@ng-doc/app 22.0.0-beta.2 → 22.0.0

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  HostBinding,\n  inject,\n  Input,\n  OnInit,\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 { NgDocDemoAsset } from '@ng-doc/app/interfaces';\nimport { asArray } from '@ng-doc/core/helpers/as-array';\nimport { NgDocDemoPaneActionOptions } from '@ng-doc/core/interfaces';\nimport {\n  NgDocPaneBackDirective,\n  NgDocPaneComponent,\n  NgDocPaneFrontDirective,\n  NgDocTabComponent,\n  NgDocTabGroupComponent,\n} from '@ng-doc/ui-kit';\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    NgComponentOutlet,\n  ],\n})\nexport class NgDocDemoPaneComponent implements OnInit {\n  private readonly rootPage = inject(NgDocRootPage);\n\n  @Input()\n  componentName?: string;\n\n  @Input()\n  options: NgDocDemoPaneActionOptions = {};\n\n  demo?: Type<unknown>;\n  assets: NgDocDemoAsset[] = [];\n\n  constructor() {}\n\n  @HostBinding('class')\n  protected get classes(): string | string[] {\n    return this.options.class ?? '';\n  }\n\n  ngOnInit(): void {\n    this.demo = this.getDemo();\n    this.assets = this.getAssets();\n  }\n\n  private getDemo(): Type<unknown> | undefined {\n    if (this.componentName) {\n      return this.rootPage.page?.demos && this.rootPage.page.demos[this.componentName];\n    }\n\n    return undefined;\n  }\n\n  private getAssets(): NgDocDemoAsset[] {\n    if (this.componentName) {\n      return (\n        (this.rootPage.demoAssets && this.rootPage.demoAssets[this.componentName]) ??\n        []\n      ).filter(\n        (asset: NgDocDemoAsset) =>\n          !this.options.tabs?.length || asArray(this.options.tabs).includes(asset.title),\n      );\n    }\n\n    return [];\n  }\n}\n","<ng-doc-pane [expanded]=\"options.expanded ?? false\">\n  <ng-container *ngTemplateOutlet=\"codeContent\" ngDocPaneBack></ng-container>\n  <ng-container *ngTemplateOutlet=\"demoTemplate\" ngDocPaneFront></ng-container>\n</ng-doc-pane>\n\n<ng-template #demoTemplate>\n  @if (options.fullscreenRoute) {\n    <ng-doc-fullscreen-button [route]=\"options.fullscreenRoute!\"></ng-doc-fullscreen-button>\n  } @else if (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    @for (asset of assets; track asset) {\n      <ng-doc-code [html]=\"asset.code\"></ng-doc-code>\n    }\n  }\n\n  @if (assets.length > 1) {\n    <ng-doc-tab-group [openedTab]=\"options.defaultTab\">\n      @for (asset of assets; track asset) {\n        <ng-doc-tab [id]=\"asset.title\" [label]=\"asset.title\" [content]=\"assetContent\">\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,66 +1,151 @@
-import { NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
+import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, HostBinding, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, DOCUMENT, input, computed, 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 { NgDocDemoDisplayerComponent } from '@ng-doc/app/components/demo-displayer';
+import { NgDocCopyButtonComponent } from '@ng-doc/app/components/copy-button';
 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 { NgDocTabGroupComponent, NgDocTabComponent, NgDocIconComponent, NgDocExecutePipe } from '@ng-doc/ui-kit';
+import { NgDocFullscreenDirective, NgDocIconComponent, NgDocSelectionComponent, NgDocSelectionHostDirective, NgDocSelectionOriginDirective, NgDocTooltipDirective } from '@ng-doc/ui-kit';
 
+/** The preview widths, in the order of their buttons. */
+const PREVIEW_WIDTHS = [
+    { width: 'full', label: 'Full width', readout: '100% × auto' },
+    { width: '480', label: '480 pixels wide', readout: '480 × auto' },
+    { width: '280', label: '280 pixels wide', readout: '280 × auto' },
+];
+let nextId = 0;
+/**
+ * Renders a demo of the page in a panel: a toolbar with Preview and source tabs, the preview
+ * width, copy and fullscreen controls, over the demo on a dot-grid stage. The fullscreen control
+ * 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.
+ */
 class NgDocDemoComponent {
     constructor() {
         this.rootPage = inject(NgDocRootPage);
-        this.options = {};
-        this.assets = [];
-    }
-    get classes() {
-        return this.options.class ?? '';
-    }
-    ngOnInit() {
-        this.demo = this.getDemo();
-        this.assets = this.getAssets();
-    }
-    getOpenedAssetId(assets) {
-        return assets.find((asset) => asset.opened)?.title;
+        this.document = inject(DOCUMENT);
+        /** Name of the demo component in the page's `demos`. */
+        this.componentName = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "componentName" }] : /* istanbul ignore next */ []));
+        /** Options of the `demo` action. */
+        this.options = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        /** The demo component. */
+        this.demo = computed(() => {
+            const name = this.componentName();
+            return name ? this.rootPage.page?.demos?.[name] : undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "demo" }] : /* istanbul ignore next */ []));
+        /** Source files of the demo, filtered by the `tabs` option. */
+        this.assets = computed(() => {
+            const name = this.componentName();
+            const tabs = this.options().tabs;
+            return name
+                ? (this.rootPage.demoAssets?.[name] ?? []).filter((asset) => !tabs?.length || asArray(tabs).includes(asset.title))
+                : [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "assets" }] : /* istanbul ignore next */ []));
+        /**
+         * The open view: `preview`, or the title of a source file. It starts on the preview, or on the
+         * default source file when the `expanded` option is set.
+         */
+        this.view = linkedSignal(() => {
+            const options = this.options();
+            return options.expanded ? this.defaultAsset()?.title ?? 'preview' : 'preview';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        /** The width the demo is previewed at. */
+        this.previewWidth = signal('full', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewWidth" }] : /* istanbul ignore next */ []));
+        this.previewWidths = PREVIEW_WIDTHS;
+        /** Readout of the preview width. */
+        this.widthReadout = computed(() => PREVIEW_WIDTHS.find(({ width }) => width === this.previewWidth())?.readout ?? '100% × auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "widthReadout" }] : /* istanbul ignore next */ []));
+        /** The views in tab order: the preview, then the source files. */
+        this.views = computed(() => [
+            'preview',
+            ...this.assets().map((asset) => asset.title),
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []));
+        /** Prefix of the ids that tie the view tabs to their panels. */
+        this.idPrefix = `ng-doc-demo-${nextId++}`;
+        /** Reads the code of the open source file (or the default one) when copy is pressed. */
+        this.copyText = () => {
+            const assets = this.assets();
+            const asset = assets.find((item) => item.title === this.view()) ?? this.defaultAsset();
+            const template = this.document.createElement('template');
+            template.innerHTML = asset?.code ?? '';
+            return template.content.textContent ?? '';
+        };
+        this.viewTabs = viewChildren('viewTab', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewTabs" }] : /* istanbul ignore next */ []));
+        /**
+         * The source file that opens first: the snippet marked `opened`, then `defaultTab`, then the
+         * first file (the order the demo has always used).
+         */
+        this.defaultAsset = computed(() => {
+            const assets = this.assets();
+            const defaultTab = this.options().defaultTab;
+            return (assets.find((asset) => asset.opened) ??
+                assets.find((asset) => asset.title === defaultTab) ??
+                assets[0]);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultAsset" }] : /* istanbul ignore next */ []));
     }
-    getDemo() {
-        if (this.componentName) {
-            return this.rootPage.page?.demos && this.rootPage.page.demos[this.componentName];
-        }
-        return undefined;
+    /**
+     * Opens a view.
+     * @param view - `preview` or the title of a source file.
+     */
+    openView(view) {
+        untracked(() => this.view.set(view));
     }
-    getAssets() {
-        if (this.componentName) {
-            return ((this.rootPage.demoAssets && this.rootPage.demoAssets[this.componentName]) ??
-                []).filter((asset) => !this.options.tabs?.length || asArray(this.options.tabs).includes(asset.title));
+    /**
+     * Moves between the view tabs with the keyboard.
+     * @param event - The key press on a view tab.
+     */
+    onViewKeydown(event) {
+        const views = this.views();
+        const current = Math.max(views.indexOf(this.view()), 0);
+        const next = {
+            ArrowRight: (current + 1) % views.length,
+            ArrowLeft: (current - 1 + views.length) % views.length,
+            Home: 0,
+            End: views.length - 1,
+        }[event.key];
+        if (next !== undefined) {
+            event.preventDefault();
+            this.openView(views[next]);
+            this.viewTabs()[next]?.nativeElement.focus();
         }
-        return [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocDemoComponent, isStandalone: true, selector: "ng-doc-demo", inputs: { componentName: "componentName", options: "options" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "@if (options.container ?? true) {\n  <ng-doc-demo-displayer [codeContent]=\"codeContent\" [expanded]=\"!!options.expanded\">\n    <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    <ng-template #codeContent>\n      @if (assets.length === 1) {\n        @for (asset of assets; track asset) {\n          <ng-doc-code [html]=\"asset.code\"></ng-doc-code>\n        }\n      }\n      @if (assets.length > 1) {\n        <ng-doc-tab-group [openedTab]=\"(getOpenedAssetId | execute: assets) ?? options.defaultTab\">\n          @for (asset of assets; track asset) {\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  </ng-doc-demo-displayer>\n} @else {\n  @if (options.fullscreenRoute) {\n    <ng-doc-fullscreen-button [route]=\"options.fullscreenRoute!\"></ng-doc-fullscreen-button>\n  } @else if (demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options.inputs\"></ng-container>\n  }\n}\n\n<ng-template #demoTemplate>\n  @if (options.fullscreenRoute) {\n    <ng-doc-fullscreen-button [route]=\"options.fullscreenRoute!\"></ng-doc-fullscreen-button>\n  } @else if (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);--ng-doc-tab-group-background: var(--ng-doc-code-background);--ng-doc-tab-group-tabs-background: var(--ng-doc-base-2);--ng-doc-tab-group-border-radius: 0;--ng-doc-tab-group-border: none;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host .ng-doc-example{padding:calc(var(--ng-doc-base-gutter) * 3)}:host ng-doc-icon{margin-right:calc(var(--ng-doc-base-gutter) / 2)}:host ng-doc-tab-group{border-top:1px solid var(--ng-doc-border-color)}\n"], dependencies: [{ kind: "component", type: NgDocDemoDisplayerComponent, selector: "ng-doc-demo-displayer", inputs: ["codeContent", "code", "language", "container", "border", "expanded"] }, { 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: 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: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocFullscreenButtonComponent, selector: "ng-doc-fullscreen-button", inputs: ["route"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocDemoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-demo', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgDocDemoDisplayerComponent,
+                        NgComponentOutlet,
                         NgTemplateOutlet,
                         NgDocCodeComponent,
-                        NgDocTabGroupComponent,
-                        NgDocTabComponent,
-                        NgDocIconComponent,
-                        NgDocExecutePipe,
+                        NgDocCopyButtonComponent,
                         NgDocFullscreenButtonComponent,
-                        NgComponentOutlet,
-                    ], template: "@if (options.container ?? true) {\n  <ng-doc-demo-displayer [codeContent]=\"codeContent\" [expanded]=\"!!options.expanded\">\n    <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    <ng-template #codeContent>\n      @if (assets.length === 1) {\n        @for (asset of assets; track asset) {\n          <ng-doc-code [html]=\"asset.code\"></ng-doc-code>\n        }\n      }\n      @if (assets.length > 1) {\n        <ng-doc-tab-group [openedTab]=\"(getOpenedAssetId | execute: assets) ?? options.defaultTab\">\n          @for (asset of assets; track asset) {\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  </ng-doc-demo-displayer>\n} @else {\n  @if (options.fullscreenRoute) {\n    <ng-doc-fullscreen-button [route]=\"options.fullscreenRoute!\"></ng-doc-fullscreen-button>\n  } @else if (demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options.inputs\"></ng-container>\n  }\n}\n\n<ng-template #demoTemplate>\n  @if (options.fullscreenRoute) {\n    <ng-doc-fullscreen-button [route]=\"options.fullscreenRoute!\"></ng-doc-fullscreen-button>\n  } @else if (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);--ng-doc-tab-group-background: var(--ng-doc-code-background);--ng-doc-tab-group-tabs-background: var(--ng-doc-base-2);--ng-doc-tab-group-border-radius: 0;--ng-doc-tab-group-border: none;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host .ng-doc-example{padding:calc(var(--ng-doc-base-gutter) * 3)}:host ng-doc-icon{margin-right:calc(var(--ng-doc-base-gutter) / 2)}:host ng-doc-tab-group{border-top:1px solid var(--ng-doc-border-color)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { componentName: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], classes: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+                        NgDocFullscreenDirective,
+                        NgDocFullscreenToggleComponent,
+                        NgDocIconComponent,
+                        NgDocSelectionComponent,
+                        NgDocSelectionHostDirective,
+                        NgDocSelectionOriginDirective,
+                        NgDocTooltipDirective,
+                    ], 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 }] }] } });
 
 /**
  * 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  HostBinding,\n  inject,\n  Input,\n  OnInit,\n  Type,\n} from '@angular/core';\nimport { NgDocRootPage } from '@ng-doc/app/classes/root-page';\nimport { NgDocCodeComponent } from '@ng-doc/app/components/code';\nimport { NgDocDemoDisplayerComponent } from '@ng-doc/app/components/demo-displayer';\nimport { NgDocFullscreenButtonComponent } from '@ng-doc/app/components/fullscreen-button';\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  NgDocExecutePipe,\n  NgDocIconComponent,\n  NgDocTabComponent,\n  NgDocTabGroupComponent,\n} from '@ng-doc/ui-kit';\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    NgDocDemoDisplayerComponent,\n    NgTemplateOutlet,\n    NgDocCodeComponent,\n    NgDocTabGroupComponent,\n    NgDocTabComponent,\n    NgDocIconComponent,\n    NgDocExecutePipe,\n    NgDocFullscreenButtonComponent,\n    NgComponentOutlet,\n  ],\n})\nexport class NgDocDemoComponent implements OnInit {\n  private readonly rootPage = inject(NgDocRootPage);\n\n  @Input()\n  componentName?: string;\n\n  @Input()\n  options: NgDocDemoActionOptions = {};\n\n  demo?: Type<unknown>;\n  assets: NgDocDemoAsset[] = [];\n\n  constructor() {}\n\n  @HostBinding('class')\n  protected get classes(): string | string[] {\n    return this.options.class ?? '';\n  }\n\n  ngOnInit(): void {\n    this.demo = this.getDemo();\n    this.assets = this.getAssets();\n  }\n\n  getOpenedAssetId(assets: NgDocDemoAsset[]): string | undefined {\n    return assets.find((asset: NgDocDemoAsset) => asset.opened)?.title;\n  }\n\n  private getDemo(): Type<unknown> | undefined {\n    if (this.componentName) {\n      return this.rootPage.page?.demos && this.rootPage.page.demos[this.componentName];\n    }\n\n    return undefined;\n  }\n\n  private getAssets(): NgDocDemoAsset[] {\n    if (this.componentName) {\n      return (\n        (this.rootPage.demoAssets && this.rootPage.demoAssets[this.componentName]) ??\n        []\n      ).filter(\n        (asset: NgDocDemoAsset) =>\n          !this.options.tabs?.length || asArray(this.options.tabs).includes(asset.title),\n      );\n    }\n\n    return [];\n  }\n}\n","@if (options.container ?? true) {\n  <ng-doc-demo-displayer [codeContent]=\"codeContent\" [expanded]=\"!!options.expanded\">\n    <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    <ng-template #codeContent>\n      @if (assets.length === 1) {\n        @for (asset of assets; track asset) {\n          <ng-doc-code [html]=\"asset.code\"></ng-doc-code>\n        }\n      }\n      @if (assets.length > 1) {\n        <ng-doc-tab-group [openedTab]=\"(getOpenedAssetId | execute: assets) ?? options.defaultTab\">\n          @for (asset of assets; track asset) {\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  </ng-doc-demo-displayer>\n} @else {\n  @if (options.fullscreenRoute) {\n    <ng-doc-fullscreen-button [route]=\"options.fullscreenRoute!\"></ng-doc-fullscreen-button>\n  } @else if (demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options.inputs\"></ng-container>\n  }\n}\n\n<ng-template #demoTemplate>\n  @if (options.fullscreenRoute) {\n    <ng-doc-fullscreen-button [route]=\"options.fullscreenRoute!\"></ng-doc-fullscreen-button>\n  } @else if (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 { 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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"}

package/fesm2022/ng-doc-app-components-fullscreen-button.mjs

@@ -1,13 +1,19 @@
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { NgDocTextComponent, NgDocIconComponent, NgDocTextRightDirective, NgDocButtonComponent } from '@ng-doc/ui-kit';
 
+/** A link that opens a demo's fullscreen route in a new tab. */
 class NgDocFullscreenButtonComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocFullscreenButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocFullscreenButtonComponent, isStandalone: true, selector: "ng-doc-fullscreen-button", inputs: { route: "route" }, ngImport: i0, template: "<a ng-doc-button-text [routerLink]=\"route\" target=\"_blank\">\n\t<span ng-doc-text>\n\t\tOpen demo in a new tab\n\t\t<ng-doc-icon icon=\"external-link\" ngDocTextRight></ng-doc-icon>\n\t</span>\n</a>\n", styles: [":host{display:flex;align-items:center;justify-content:center;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 2)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "directive", type: NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "component", type: NgDocButtonComponent, selector: "button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]", inputs: ["size", "color", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    constructor() {
+        /** Route of the fullscreen demo. */
+        this.route = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "route" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocFullscreenButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: NgDocFullscreenButtonComponent, isStandalone: true, selector: "ng-doc-fullscreen-button", inputs: { route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<a ng-doc-button-text [routerLink]=\"route()\" target=\"_blank\">\n  <span ng-doc-text>\n    Open demo in a new tab\n    <ng-doc-icon icon=\"external-link\" ngDocTextRight></ng-doc-icon>\n  </span>\n</a>\n", styles: [":host{display:flex;align-items:center;justify-content:center;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 2)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "directive", type: NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "component", type: NgDocButtonComponent, selector: "button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]", inputs: ["size", "color", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocFullscreenButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocFullscreenButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-fullscreen-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         RouterLink,
@@ -15,11 +21,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         NgDocIconComponent,
                         NgDocTextRightDirective,
                         NgDocButtonComponent,
-                    ], template: "<a ng-doc-button-text [routerLink]=\"route\" target=\"_blank\">\n\t<span ng-doc-text>\n\t\tOpen demo in a new tab\n\t\t<ng-doc-icon icon=\"external-link\" ngDocTextRight></ng-doc-icon>\n\t</span>\n</a>\n", styles: [":host{display:flex;align-items:center;justify-content:center;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 2)}\n"] }]
-        }], propDecorators: { route: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
+                    ], template: "<a ng-doc-button-text [routerLink]=\"route()\" target=\"_blank\">\n  <span ng-doc-text>\n    Open demo in a new tab\n    <ng-doc-icon icon=\"external-link\" ngDocTextRight></ng-doc-icon>\n  </span>\n</a>\n", styles: [":host{display:flex;align-items:center;justify-content:center;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 2)}\n"] }]
+        }], propDecorators: { route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-app-components-fullscreen-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-fullscreen-button.mjs","sources":["../../../../libs/app/components/fullscreen-button/fullscreen-button.component.ts","../../../../libs/app/components/fullscreen-button/fullscreen-button.component.html","../../../../libs/app/components/fullscreen-button/ng-doc-app-components-fullscreen-button.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport {\n  NgDocButtonComponent,\n  NgDocIconComponent,\n  NgDocTextComponent,\n  NgDocTextRightDirective,\n} from '@ng-doc/ui-kit';\n\n@Component({\n  selector: 'ng-doc-fullscreen-button',\n  templateUrl: './fullscreen-button.component.html',\n  styleUrls: ['./fullscreen-button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    RouterLink,\n    NgDocTextComponent,\n    NgDocIconComponent,\n    NgDocTextRightDirective,\n    NgDocButtonComponent,\n  ],\n})\nexport class NgDocFullscreenButtonComponent {\n  @Input({ required: true })\n  route!: string;\n}\n","<a ng-doc-button-text [routerLink]=\"route\" target=\"_blank\">\n\t<span ng-doc-text>\n\t\tOpen demo in a new tab\n\t\t<ng-doc-icon icon=\"external-link\" ngDocTextRight></ng-doc-icon>\n\t</span>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAsBa,8BAA8B,CAAA;8GAA9B,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA9B,8BAA8B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtB3C,6MAMA,EAAA,MAAA,EAAA,CAAA,iJAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDSI,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACV,kBAAkB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,OAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,uBAAuB,EAAA,QAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACvB,oBAAoB,EAAA,QAAA,EAAA,+IAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAGX,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAb1C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0BAA0B,EAAA,eAAA,EAGnB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACP,UAAU;wBACV,kBAAkB;wBAClB,kBAAkB;wBAClB,uBAAuB;wBACvB,oBAAoB;AACrB,qBAAA,EAAA,QAAA,EAAA,6MAAA,EAAA,MAAA,EAAA,CAAA,iJAAA,CAAA,EAAA;;sBAGA,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;;AEvB3B;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-app-components-fullscreen-button.mjs","sources":["../../../../libs/app/components/fullscreen-button/fullscreen-button.component.ts","../../../../libs/app/components/fullscreen-button/fullscreen-button.component.html","../../../../libs/app/components/fullscreen-button/ng-doc-app-components-fullscreen-button.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport {\n  NgDocButtonComponent,\n  NgDocIconComponent,\n  NgDocTextComponent,\n  NgDocTextRightDirective,\n} from '@ng-doc/ui-kit';\n\n/** A link that opens a demo's fullscreen route in a new tab. */\n@Component({\n  selector: 'ng-doc-fullscreen-button',\n  templateUrl: './fullscreen-button.component.html',\n  styleUrls: ['./fullscreen-button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    RouterLink,\n    NgDocTextComponent,\n    NgDocIconComponent,\n    NgDocTextRightDirective,\n    NgDocButtonComponent,\n  ],\n})\nexport class NgDocFullscreenButtonComponent {\n  /** Route of the fullscreen demo. */\n  readonly route = input.required<string>();\n}\n","<a ng-doc-button-text [routerLink]=\"route()\" target=\"_blank\">\n  <span ng-doc-text>\n    Open demo in a new tab\n    <ng-doc-icon icon=\"external-link\" ngDocTextRight></ng-doc-icon>\n  </span>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AASA;MAca,8BAA8B,CAAA;AAb3C,IAAA,WAAA,GAAA;;QAeW,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ;kFAAU;AAC1C,IAAA;8GAHY,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA9B,8BAA8B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvB3C,+MAMA,EAAA,MAAA,EAAA,CAAA,iJAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDUI,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACV,kBAAkB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,OAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,uBAAuB,EAAA,QAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACvB,oBAAoB,EAAA,QAAA,EAAA,+IAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAGX,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAb1C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0BAA0B,EAAA,eAAA,EAGnB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACP,UAAU;wBACV,kBAAkB;wBAClB,kBAAkB;wBAClB,uBAAuB;wBACvB,oBAAoB;AACrB,qBAAA,EAAA,QAAA,EAAA,+MAAA,EAAA,MAAA,EAAA,CAAA,iJAAA,CAAA,EAAA;;;AErBH;;AAEG;;;;"}

package/fesm2022/ng-doc-app-components-fullscreen-toggle.mjs

@@ -0,0 +1,79 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgDocButtonIconComponent, NgDocTooltipDirective } from '@ng-doc/ui-kit';
+
+/**
+ * An icon button that shows an element fullscreen with the browser Fullscreen API, or leaves
+ * fullscreen. Its icon, label and tooltip follow the fullscreen state, and it is hidden where the
+ * browser does not support fullscreen and on the server.
+ * @example
+ * ```html
+ * <div ngDocFullscreen #stage="ngDocFullscreen">…</div>
+ * <ng-doc-fullscreen-toggle [target]="stage" />
+ * ```
+ */
+class NgDocFullscreenToggleComponent {
+    constructor() {
+        /** The element to show fullscreen. */
+        this.target = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+        /** Accessible name and tooltip of the button, which follow the fullscreen state. */
+        this.label = computed(() => this.target().active() ? 'Exit fullscreen' : 'Fullscreen', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocFullscreenToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocFullscreenToggleComponent, isStandalone: true, selector: "ng-doc-fullscreen-toggle", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "hidden": "!target().supported()" } }, ngImport: i0, template: `
+    @if (target().supported()) {
+      <button
+        type="button"
+        ng-doc-button-icon
+        [rounded]="false"
+        [attr.aria-label]="label()"
+        [ngDocTooltip]="label()"
+        (click)="target().toggle()">
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          @if (target().active()) {
+            <path
+              d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" />
+          } @else {
+            <path
+              d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+          }
+        </svg>
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:inline-flex}:host([hidden]){display:none}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: NgDocFullscreenToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-doc-fullscreen-toggle', imports: [NgDocButtonIconComponent, NgDocTooltipDirective], template: `
+    @if (target().supported()) {
+      <button
+        type="button"
+        ng-doc-button-icon
+        [rounded]="false"
+        [attr.aria-label]="label()"
+        [ngDocTooltip]="label()"
+        (click)="target().toggle()">
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          @if (target().active()) {
+            <path
+              d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" />
+          } @else {
+            <path
+              d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+          }
+        </svg>
+      </button>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[hidden]': '!target().supported()',
+                    }, styles: [":host{display:inline-flex}:host([hidden]){display:none}svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}\n"] }]
+        }], propDecorators: { target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgDocFullscreenToggleComponent };
+//# sourceMappingURL=ng-doc-app-components-fullscreen-toggle.mjs.map

package/fesm2022/ng-doc-app-components-fullscreen-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-doc-app-components-fullscreen-toggle.mjs","sources":["../../../../libs/app/components/fullscreen-toggle/fullscreen-toggle.component.ts","../../../../libs/app/components/fullscreen-toggle/ng-doc-app-components-fullscreen-toggle.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, Signal } from '@angular/core';\nimport {\n  NgDocButtonIconComponent,\n  NgDocFullscreenDirective,\n  NgDocTooltipDirective,\n} from '@ng-doc/ui-kit';\n\n/**\n * An icon button that shows an element fullscreen with the browser Fullscreen API, or leaves\n * fullscreen. Its icon, label and tooltip follow the fullscreen state, and it is hidden where the\n * browser does not support fullscreen and on the server.\n * @example\n * ```html\n * <div ngDocFullscreen #stage=\"ngDocFullscreen\">…</div>\n * <ng-doc-fullscreen-toggle [target]=\"stage\" />\n * ```\n */\n@Component({\n  selector: 'ng-doc-fullscreen-toggle',\n  imports: [NgDocButtonIconComponent, NgDocTooltipDirective],\n  template: `\n    @if (target().supported()) {\n      <button\n        type=\"button\"\n        ng-doc-button-icon\n        [rounded]=\"false\"\n        [attr.aria-label]=\"label()\"\n        [ngDocTooltip]=\"label()\"\n        (click)=\"target().toggle()\">\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          @if (target().active()) {\n            <path\n              d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3\" />\n          } @else {\n            <path\n              d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\" />\n          }\n        </svg>\n      </button>\n    }\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n    }\n\n    :host([hidden]) {\n      display: none;\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  host: {\n    '[hidden]': '!target().supported()',\n  },\n})\nexport class NgDocFullscreenToggleComponent {\n  /** The element to show fullscreen. */\n  readonly target = input.required<NgDocFullscreenDirective>();\n\n  /** Accessible name and tooltip of the button, which follow the fullscreen state. */\n  protected readonly label: Signal<string> = computed(() =>\n    this.target().active() ? 'Exit fullscreen' : 'Fullscreen',\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAOA;;;;;;;;;AASG;MAiDU,8BAA8B,CAAA;AAhD3C,IAAA,WAAA,GAAA;;QAkDW,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,QAAQ;mFAA4B;;QAGzC,IAAA,CAAA,KAAK,GAAmB,QAAQ,CAAC,MAClD,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,GAAG,iBAAiB,GAAG,YAAY;kFAC1D;AACF,IAAA;8GARY,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA9B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,8BAA8B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA7C/B;;;;;;;;;;;;;;;;;;;;GAoBT,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,8KAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EArBS,wBAAwB,uQAAE,qBAAqB,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,OAAA,EAAA,eAAA,EAAA,eAAA,EAAA,WAAA,EAAA,SAAA,EAAA,YAAA,EAAA,WAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,YAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FA8C9C,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAhD1C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0BAA0B,WAC3B,CAAC,wBAAwB,EAAE,qBAAqB,CAAC,EAAA,QAAA,EAChD;;;;;;;;;;;;;;;;;;;;GAoBT,EAAA,eAAA,EAoBgB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,UAAU,EAAE,uBAAuB;AACpC,qBAAA,EAAA,MAAA,EAAA,CAAA,8KAAA,CAAA,EAAA;;;AC/DH;;AAEG;;;;"}