@ng-doc/app 22.0.0 → 22.2.0

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

@@ -0,0 +1,279 @@
+import * as i0 from '@angular/core';
+import { inject, input, output, signal, computed, viewChild, afterNextRender, untracked, DestroyRef, effect, ChangeDetectionStrategy, Component, model } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ɵisNgDocPlaygroundFrameMessage as _isNgDocPlaygroundFrameMessage, ɵisNgDocDemoBackgroundMessage as _isNgDocDemoBackgroundMessage, ɵisNgDocDemoSizeMessage as _isNgDocDemoSizeMessage } from '@ng-doc/app/demo-app';
+import { NG_DOC_TEXTS } from '@ng-doc/app/tokens';
+import { NgDocButtonIconComponent, NgDocTooltipDirective } from '@ng-doc/ui-kit';
+
+/** 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() {
+        this.texts = inject(NG_DOC_TEXTS).demo;
+        /** 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 URL fragment of the demo page, without `#`: the state of an isolated playground, and the
+         * theme the page shows (`~theme=dark`). The iframe loads with the fragment it has when the
+         * iframe is created; a later fragment replaces the page's location (`location.replace`), which
+         * reloads nothing and adds no history entry.
+         */
+        this.fragment = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fragment" }] : /* istanbul ignore next */ []));
+        /** Whether the page is the page of an isolated playground, which reports the target. */
+        this.playground = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "playground" }] : /* istanbul ignore next */ []));
+        /** The messages of an isolated playground's page, from this iframe only. */
+        this.playgroundMessage = output();
+        /**
+         * The page of an isolated playground (`playground`) loaded but sent no message of the playground
+         * within 10 seconds, such as a page the build didn't make.
+         */
+        this.playgroundSilent = output();
+        /** The height the demo reported, in pixels. */
+        this.height = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /**
+         * The background color the demo's page reported, so that the canvas around the iframe can take
+         * it when the demo shows a theme of its own.
+         */
+        this.background = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
+        /** The color of the dots of the demo canvas in the demo's theme, which its page reported. */
+        this.dots = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dots" }] : /* istanbul ignore next */ []));
+        /**
+         * The color scheme of the demo's page, which the iframe takes: the page is transparent, and a
+         * browser paints an opaque backdrop behind an iframe whose color scheme differs from its page's.
+         */
+        this.scheme = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scheme" }] : /* 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, with the fragment the iframe was created with. */
+        this.frameSrc = computed(() => 
+        // The URL comes from the generated demo route and the demo's name: a page of this site.
+        this.sanitizer.bypassSecurityTrustResourceUrl(withFragment(this.src(), this.initialFragment)), /* @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 */ []));
+        this.loaded = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
+        this.answered = false;
+        afterNextRender(() => {
+            // Read once: a fragment that changes later must not change the iframe's `src`, which would
+            // navigate it and add a history entry.
+            this.initialFragment = this.shownFragment = untracked(this.fragment);
+            this.created.set(true);
+        });
+        inject(DestroyRef).onDestroy(() => {
+            clearTimeout(this.timer);
+            clearTimeout(this.silenceTimer);
+        });
+        effect(() => {
+            const fragment = this.fragment();
+            const window = this.loaded() ? this.frame()?.nativeElement.contentWindow : undefined;
+            if (!window || fragment === this.shownFragment)
+                return;
+            this.shownFragment = fragment;
+            // Always with `#`: going from a fragment to none would load the page again.
+            window.location.replace(`${withFragment(this.src(), undefined)}#${fragment ?? ''}`);
+        });
+    }
+    /**
+     * Waits for the demo's size once its page has loaded.
+     * @internal
+     */
+    onLoad() {
+        this.loaded.set(true);
+        clearTimeout(this.timer);
+        clearTimeout(this.silenceTimer);
+        if (untracked(this.playground) && !this.answered) {
+            this.silenceTimer = setTimeout(() => this.answered || this.playgroundSilent.emit(), READY_TIMEOUT_MS);
+        }
+        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) {
+            return;
+        }
+        if (_isNgDocPlaygroundFrameMessage(event.data)) {
+            this.answered = true;
+            clearTimeout(this.silenceTimer);
+            this.playgroundMessage.emit(event.data);
+            return;
+        }
+        if (_isNgDocDemoBackgroundMessage(event.data)) {
+            this.background.set(event.data.color);
+            this.dots.set(event.data.dots);
+            this.scheme.set(event.data.scheme);
+            return;
+        }
+        if (!_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 }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null }, playground: { classPropertyName: "playground", publicName: "playground", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playgroundMessage: "playgroundMessage", playgroundSilent: "playgroundSilent" }, 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    [style.color-scheme]=\"scheme() ?? null\"\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        >{{ texts.loading }}\n        <a [href]=\"src()\" target=\"_blank\" rel=\"noopener\">{{ texts.openFrameInNewTab }}</a></span\n      >\n    } @else {\n      <span\n        >{{ texts.failed }}\n        <a [href]=\"src()\" target=\"_blank\" rel=\"noopener\">{{ texts.openFrameInNewTab }}</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    [style.color-scheme]=\"scheme() ?? null\"\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        >{{ texts.loading }}\n        <a [href]=\"src()\" target=\"_blank\" rel=\"noopener\">{{ texts.openFrameInNewTab }}</a></span\n      >\n    } @else {\n      <span\n        >{{ texts.failed }}\n        <a [href]=\"src()\" target=\"_blank\" rel=\"noopener\">{{ texts.openFrameInNewTab }}</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 }] }], fragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "fragment", required: false }] }], playground: [{ type: i0.Input, args: [{ isSignal: true, alias: "playground", required: false }] }], playgroundMessage: [{ type: i0.Output, args: ["playgroundMessage"] }], playgroundSilent: [{ type: i0.Output, args: ["playgroundSilent"] }], frame: [{ type: i0.ViewChild, args: ['frame', { isSignal: true }] }] } });
+/**
+ * A URL with another fragment.
+ * @param url - A URL, relative or absolute.
+ * @param fragment - The fragment without `#`, or none.
+ */
+function withFragment(url, fragment) {
+    const base = url.replace(/#.*$/, '');
+    return fragment ? `${base}#${fragment}` : base;
+}
+
+/** The themes the button offers in turn; `undefined` follows the theme of the page. */
+const THEMES = [undefined, 'light', 'dark'];
+/**
+ * The button beside an isolated demo that switches the theme of its iframe in turn: the page's
+ * theme, Light and Dark. A `theme` option that is none of them, such as `auto` or the id of a
+ * custom theme, is offered after the page's theme.
+ */
+class NgDocDemoThemeButtonComponent {
+    constructor() {
+        this.texts = inject(NG_DOC_TEXTS).demo;
+        this.themeTexts = inject(NG_DOC_TEXTS).theme;
+        /** The theme of the iframe, or `undefined` while it follows the page. */
+        this.theme = model(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+        /** The `theme` option of the demo, which the button offers too. */
+        this.configured = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "configured" }] : /* istanbul ignore next */ []));
+        /** The theme the next press switches to. */
+        this.next = computed(() => {
+            const configured = this.configured();
+            const themes = configured && !THEMES.includes(configured)
+                ? [undefined, configured, ...THEMES.slice(1)]
+                : THEMES;
+            return themes[(themes.indexOf(this.theme()) + 1) % themes.length];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "next" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * The name of a theme in the texts.
+     * @param theme - A theme, or `undefined` for the page's.
+     */
+    name(theme) {
+        if (theme === undefined)
+            return this.texts.themePage;
+        if (theme === 'light' || theme === 'dark' || theme === 'auto')
+            return this.themeTexts[theme];
+        return theme;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoThemeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocDemoThemeButtonComponent, isStandalone: true, selector: "ng-doc-demo-theme-button", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, configured: { classPropertyName: "configured", publicName: "configured", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { theme: "themeChange" }, ngImport: i0, template: `<button
+    type="button"
+    ng-doc-button-icon
+    [rounded]="false"
+    [attr.aria-label]="texts.themeLabel({ current: name(theme()), next: name(next()) })"
+    [ngDocTooltip]="texts.themeTooltip({ current: name(theme()) })"
+    (click)="theme.set(next())">
+    @switch (theme()) {
+      @case ('light') {
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <circle cx="12" cy="12" r="4" />
+          <path
+            d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+        </svg>
+      }
+      @case ('dark') {
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
+        </svg>
+      }
+      @default {
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <circle cx="12" cy="12" r="9" />
+          <path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" />
+        </svg>
+      }
+    }
+  </button>`, isInline: true, styles: [":host{display:contents}svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}\n"], dependencies: [{ 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: "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: NgDocDemoThemeButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-doc-demo-theme-button', template: `<button
+    type="button"
+    ng-doc-button-icon
+    [rounded]="false"
+    [attr.aria-label]="texts.themeLabel({ current: name(theme()), next: name(next()) })"
+    [ngDocTooltip]="texts.themeTooltip({ current: name(theme()) })"
+    (click)="theme.set(next())">
+    @switch (theme()) {
+      @case ('light') {
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <circle cx="12" cy="12" r="4" />
+          <path
+            d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+        </svg>
+      }
+      @case ('dark') {
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
+        </svg>
+      }
+      @default {
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <circle cx="12" cy="12" r="9" />
+          <path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" />
+        </svg>
+      }
+    }
+  </button>`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocButtonIconComponent, NgDocTooltipDirective], styles: [":host{display:contents}svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}\n"] }]
+        }], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }, { type: i0.Output, args: ["themeChange"] }], configured: [{ type: i0.Input, args: [{ isSignal: true, alias: "configured", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgDocDemoFrameComponent, NgDocDemoThemeButtonComponent };
+//# 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/demo-theme-button.component.ts","../../../../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  effect,\n  ElementRef,\n  inject,\n  input,\n  output,\n  Signal,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';\nimport {\n  ɵisNgDocDemoBackgroundMessage,\n  ɵisNgDocDemoSizeMessage,\n  ɵisNgDocPlaygroundFrameMessage,\n  ɵNgDocPlaygroundFrameMessage,\n} from '@ng-doc/app/demo-app';\nimport type { NgDocDemoTexts } from '@ng-doc/app/interfaces';\nimport { NG_DOC_TEXTS } from '@ng-doc/app/tokens';\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  protected readonly texts: NgDocDemoTexts = inject(NG_DOC_TEXTS).demo;\n\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  /**\n   * The URL fragment of the demo page, without `#`: the state of an isolated playground, and the\n   * theme the page shows (`~theme=dark`). The iframe loads with the fragment it has when the\n   * iframe is created; a later fragment replaces the page's location (`location.replace`), which\n   * reloads nothing and adds no history entry.\n   */\n  readonly fragment = input<string | undefined>(undefined);\n\n  /** Whether the page is the page of an isolated playground, which reports the target. */\n  readonly playground = input<boolean>(false);\n\n  /** The messages of an isolated playground's page, from this iframe only. */\n  readonly playgroundMessage = output<ɵNgDocPlaygroundFrameMessage>();\n\n  /**\n   * The page of an isolated playground (`playground`) loaded but sent no message of the playground\n   * within 10 seconds, such as a page the build didn't make.\n   */\n  readonly playgroundSilent = output<void>();\n\n  /** The height the demo reported, in pixels. */\n  readonly height = signal<number | undefined>(undefined);\n\n  /**\n   * The background color the demo's page reported, so that the canvas around the iframe can take\n   * it when the demo shows a theme of its own.\n   */\n  readonly background = signal<string | undefined>(undefined);\n\n  /** The color of the dots of the demo canvas in the demo's theme, which its page reported. */\n  readonly dots = signal<string | undefined>(undefined);\n\n  /**\n   * The color scheme of the demo's page, which the iframe takes: the page is transparent, and a\n   * browser paints an opaque backdrop behind an iframe whose color scheme differs from its page's.\n   */\n  readonly scheme = signal<string | 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, with the fragment the iframe was created with. */\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(withFragment(this.src(), this.initialFragment)),\n  );\n\n  private readonly sanitizer = inject(DomSanitizer);\n  private readonly frame = viewChild<ElementRef<HTMLIFrameElement>>('frame');\n  private readonly failed = signal(false);\n  private readonly loaded = signal(false);\n  private initialFragment?: string;\n  private shownFragment?: string;\n  private timer?: ReturnType<typeof setTimeout>;\n  private silenceTimer?: ReturnType<typeof setTimeout>;\n  private answered = false;\n\n  constructor() {\n    afterNextRender(() => {\n      // Read once: a fragment that changes later must not change the iframe's `src`, which would\n      // navigate it and add a history entry.\n      this.initialFragment = this.shownFragment = untracked(this.fragment);\n      this.created.set(true);\n    });\n    inject(DestroyRef).onDestroy(() => {\n      clearTimeout(this.timer);\n      clearTimeout(this.silenceTimer);\n    });\n    effect(() => {\n      const fragment = this.fragment();\n      const window = this.loaded() ? this.frame()?.nativeElement.contentWindow : undefined;\n\n      if (!window || fragment === this.shownFragment) return;\n      this.shownFragment = fragment;\n      // Always with `#`: going from a fragment to none would load the page again.\n      window.location.replace(`${withFragment(this.src(), undefined)}#${fragment ?? ''}`);\n    });\n  }\n\n  /**\n   * Waits for the demo's size once its page has loaded.\n   * @internal\n   */\n  protected onLoad(): void {\n    this.loaded.set(true);\n    clearTimeout(this.timer);\n    clearTimeout(this.silenceTimer);\n    if (untracked(this.playground) && !this.answered) {\n      this.silenceTimer = setTimeout(\n        () => this.answered || this.playgroundSilent.emit(),\n        READY_TIMEOUT_MS,\n      );\n    }\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    ) {\n      return;\n    }\n    if (ɵisNgDocPlaygroundFrameMessage(event.data)) {\n      this.answered = true;\n      clearTimeout(this.silenceTimer);\n      this.playgroundMessage.emit(event.data);\n      return;\n    }\n    if (ɵisNgDocDemoBackgroundMessage(event.data)) {\n      this.background.set(event.data.color);\n      this.dots.set(event.data.dots);\n      this.scheme.set(event.data.scheme);\n      return;\n    }\n    if (!ɵisNgDocDemoSizeMessage(event.data)) return;\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\n/**\n * A URL with another fragment.\n * @param url - A URL, relative or absolute.\n * @param fragment - The fragment without `#`, or none.\n */\nfunction withFragment(url: string, fragment: string | undefined): string {\n  const base = url.replace(/#.*$/, '');\n\n  return fragment ? `${base}#${fragment}` : base;\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    [style.color-scheme]=\"scheme() ?? null\"\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        >{{ texts.loading }}\n        <a [href]=\"src()\" target=\"_blank\" rel=\"noopener\">{{ texts.openFrameInNewTab }}</a></span\n      >\n    } @else {\n      <span\n        >{{ texts.failed }}\n        <a [href]=\"src()\" target=\"_blank\" rel=\"noopener\">{{ texts.openFrameInNewTab }}</a></span\n      >\n    }\n  </div>\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  model,\n  Signal,\n} from '@angular/core';\nimport type { NgDocDemoTexts, NgDocThemeTexts } from '@ng-doc/app/interfaces';\nimport { NG_DOC_TEXTS } from '@ng-doc/app/tokens';\nimport { NgDocButtonIconComponent, NgDocTooltipDirective } from '@ng-doc/ui-kit';\n\n/** The themes the button offers in turn; `undefined` follows the theme of the page. */\nconst THEMES: ReadonlyArray<string | undefined> = [undefined, 'light', 'dark'];\n\n/**\n * The button beside an isolated demo that switches the theme of its iframe in turn: the page's\n * theme, Light and Dark. A `theme` option that is none of them, such as `auto` or the id of a\n * custom theme, is offered after the page's theme.\n */\n@Component({\n  selector: 'ng-doc-demo-theme-button',\n  template: `<button\n    type=\"button\"\n    ng-doc-button-icon\n    [rounded]=\"false\"\n    [attr.aria-label]=\"texts.themeLabel({ current: name(theme()), next: name(next()) })\"\n    [ngDocTooltip]=\"texts.themeTooltip({ current: name(theme()) })\"\n    (click)=\"theme.set(next())\">\n    @switch (theme()) {\n      @case ('light') {\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"4\" />\n          <path\n            d=\"M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n        </svg>\n      }\n      @case ('dark') {\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z\" />\n        </svg>\n      }\n      @default {\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"9\" />\n          <path d=\"M12 3a9 9 0 0 0 0 18z\" fill=\"currentColor\" />\n        </svg>\n      }\n    }\n  </button>`,\n  styles: `\n    :host {\n      display: contents;\n    }\n\n    svg {\n      width: 16px;\n      height: 16px;\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgDocButtonIconComponent, NgDocTooltipDirective],\n})\nexport class NgDocDemoThemeButtonComponent {\n  protected readonly texts: NgDocDemoTexts = inject(NG_DOC_TEXTS).demo;\n  private readonly themeTexts: NgDocThemeTexts = inject(NG_DOC_TEXTS).theme;\n\n  /** The theme of the iframe, or `undefined` while it follows the page. */\n  readonly theme = model<string | undefined>(undefined);\n\n  /** The `theme` option of the demo, which the button offers too. */\n  readonly configured = input<string | undefined>(undefined);\n\n  /** The theme the next press switches to. */\n  protected readonly next: Signal<string | undefined> = computed(() => {\n    const configured = this.configured();\n    const themes =\n      configured && !THEMES.includes(configured)\n        ? [undefined, configured, ...THEMES.slice(1)]\n        : THEMES;\n\n    return themes[(themes.indexOf(this.theme()) + 1) % themes.length];\n  });\n\n  /**\n   * The name of a theme in the texts.\n   * @param theme - A theme, or `undefined` for the page's.\n   */\n  protected name(theme: string | undefined): string {\n    if (theme === undefined) return this.texts.themePage;\n    if (theme === 'light' || theme === 'dark' || theme === 'auto') return this.themeTexts[theme];\n    return theme;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ɵisNgDocPlaygroundFrameMessage","ɵisNgDocDemoBackgroundMessage","ɵ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-demo-canvas-dots, 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,
@@ -58,7 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                         NgDocIconComponent,
                     ], host: {
                         '[class]': 'options().class ?? ""',
-                    }, 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"] }]
+                    }, 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-demo-canvas-dots, 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"] }]
         }], propDecorators: { componentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentName", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
 /**

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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"}