@ng-doc/app 22.1.0 → 22.2.0

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

@@ -1,20 +1,22 @@
 import { PlatformLocation, APP_BASE_HREF, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, input, computed, viewChild, linkedSignal, signal, viewChildren, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, DOCUMENT, input, computed, linkedSignal, viewChild, signal, viewChildren, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
 import { NgDocCodeComponent } from '@ng-doc/app/components/code';
 import { NgDocCopyButtonComponent } from '@ng-doc/app/components/copy-button';
-import { NgDocDemoFrameComponent } from '@ng-doc/app/components/demo-frame';
+import { NgDocDemoFrameComponent, NgDocDemoThemeButtonComponent } from '@ng-doc/app/components/demo-frame';
 import { NgDocFullscreenButtonComponent } from '@ng-doc/app/components/fullscreen-button';
 import { NgDocFullscreenToggleComponent } from '@ng-doc/app/components/fullscreen-toggle';
+import { ɵwithDemoTheme as _withDemoTheme } from '@ng-doc/app/demo-app';
+import { NG_DOC_TEXTS } from '@ng-doc/app/tokens';
 import { asArray } from '@ng-doc/core/helpers/as-array';
 import { NgDocFullscreenDirective, NgDocButtonIconComponent, NgDocIconComponent, NgDocSelectionComponent, NgDocSelectionHostDirective, NgDocSelectionOriginDirective, NgDocTooltipDirective } from '@ng-doc/ui-kit';
 
-/** The preview widths, in the order of their buttons. */
+/** The preview widths, in the order of their buttons, with the texts of their label and readout. */
 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' },
+    { width: 'full', label: 'widthFull', readout: 'readoutFull' },
+    { width: '480', label: 'width480', readout: 'readout480' },
+    { width: '280', label: 'width280', readout: 'readout280' },
 ];
 let nextId = 0;
 /**
@@ -31,6 +33,8 @@ let nextId = 0;
  */
 class NgDocDemoComponent {
     constructor() {
+        this.texts = inject(NG_DOC_TEXTS).demo;
+        this.copyTexts = inject(NG_DOC_TEXTS).copy;
         this.rootPage = inject(NgDocRootPage);
         this.document = inject(DOCUMENT);
         this.platformLocation = inject(PlatformLocation);
@@ -77,14 +81,41 @@ class NgDocDemoComponent {
             !this.options().fullscreenRoute &&
             (this.options().isolated ?? this.rootPage.isolatedDemos ?? false), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isolated" }] : /* istanbul ignore next */ []));
+        /**
+         * The theme of the demo's iframe: the `theme` option, until the reader picks another with the
+         * theme button; `undefined` follows the page.
+         */
+        this.frameTheme = linkedSignal(() => this.options().theme, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frameTheme" }] : /* istanbul ignore next */ []));
+        /**
+         * The background of the stage while the demo shows a theme of its own: the background its page
+         * reported, so the whole stage reads in the demo's theme rather than only the iframe.
+         */
+        this.stageBackground = computed(() => this.isolated() && this.frameTheme() !== undefined ? this.frame()?.background() : undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stageBackground" }] : /* istanbul ignore next */ []));
+        /** The dots of the stage while the demo shows a theme of its own, in that theme's color. */
+        this.stageDots = computed(() => this.stageBackground() ? this.frame()?.dots() : undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stageDots" }] : /* istanbul ignore next */ []));
+        /** The URL fragment of the demo's iframe, which carries its theme. */
+        this.frameFragment = computed(() => _withDemoTheme(undefined, this.frameTheme()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frameFragment" }] : /* istanbul ignore next */ []));
+        /** The demo's page as the toolbar opens it in a new tab: in the theme of its iframe. */
+        this.newTabUrl = computed(() => {
+            const url = this.demoUrl();
+            const fragment = this.isolated() ? this.frameFragment() : undefined;
+            return url && fragment ? `${url}#${fragment}` : url;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "newTabUrl" }] : /* istanbul ignore next */ []));
         /** The accessible title of the demo's iframe. */
-        this.frameTitle = computed(() => `${this.componentName()} demo`, /* @ts-ignore */
+        this.frameTitle = computed(() => this.texts.frameTitle({ name: `${this.componentName()}` }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "frameTitle" }] : /* istanbul ignore next */ []));
         /** Whether the stage is fullscreen. */
         this.fullscreen = computed(() => this.stage()?.active() ?? false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fullscreen" }] : /* istanbul ignore next */ []));
         this.stage = viewChild(NgDocFullscreenDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "stage" }] : /* istanbul ignore next */ []));
+        this.frame = viewChild(NgDocDemoFrameComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []));
         /** Source files of the demo, filtered by the `tabs` option. */
         this.assets = computed(() => {
             const name = this.componentName();
@@ -106,9 +137,14 @@ class NgDocDemoComponent {
         /** The width the demo is previewed at. */
         this.previewWidth = signal('full', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "previewWidth" }] : /* istanbul ignore next */ []));
-        this.previewWidths = PREVIEW_WIDTHS;
+        this.previewWidths = PREVIEW_WIDTHS.map(({ width, label, readout }) => ({
+            width,
+            label: this.texts[label],
+            readout: this.texts[readout],
+        }));
         /** Readout of the preview width. */
-        this.widthReadout = computed(() => PREVIEW_WIDTHS.find(({ width }) => width === this.previewWidth())?.readout ?? '100% × auto', /* @ts-ignore */
+        this.widthReadout = computed(() => this.previewWidths.find(({ width }) => width === this.previewWidth())?.readout ??
+            this.texts.readoutFull, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "widthReadout" }] : /* istanbul ignore next */ []));
         /** The views in tab order: the preview, then the source files. */
         this.views = computed(() => [
@@ -168,7 +204,7 @@ class NgDocDemoComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocDemoComponent, isStandalone: true, selector: "ng-doc-demo", inputs: { componentName: { classPropertyName: "componentName", publicName: "componentName", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "options().class ?? \"\"", "attr.data-ng-doc-container": "options().container ?? true" } }, viewQueries: [{ propertyName: "stage", first: true, predicate: NgDocFullscreenDirective, descendants: true, isSignal: true }, { propertyName: "viewTabs", predicate: ["viewTab"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (options().container ?? true) {\n  <div class=\"ng-doc-demo-toolbar\">\n    <div class=\"ng-doc-demo-views\" role=\"tablist\" aria-label=\"Demo view\" ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      @for (item of views(); track item; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"ng-doc-demo-view\"\n          role=\"tab\"\n          [id]=\"idPrefix + '-tab-' + i\"\n          [attr.aria-selected]=\"view() === item\"\n          [ngDocSelectionOrigin]=\"view() === item\"\n          [attr.aria-controls]=\"idPrefix + '-panel-' + i\"\n          [attr.tabindex]=\"view() === item ? 0 : -1\"\n          (click)=\"openView(item)\"\n          (keydown)=\"onViewKeydown($event)\"\n          #viewTab>\n          @if (item === 'preview') {\n            Preview\n          } @else {\n            @if (assets()[i - 1].icon; as icon) {\n              <ng-doc-icon [customIcon]=\"icon\"></ng-doc-icon>\n            }\n            {{ item }}\n          }\n        </button>\n      }\n    </div>\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <span class=\"ng-doc-demo-width-readout\">{{ widthReadout() }}</span>\n      <div class=\"ng-doc-demo-widths\" role=\"group\" aria-label=\"Preview width\" ngDocSelectionHost>\n        <ng-doc-selection [align]=\"null\" />\n        @for (item of previewWidths; track item.width) {\n          <button\n            type=\"button\"\n            class=\"ng-doc-demo-width\"\n            [attr.aria-pressed]=\"previewWidth() === item.width\"\n            [ngDocSelectionOrigin]=\"previewWidth() === item.width\"\n            [attr.aria-label]=\"item.label\"\n            [ngDocTooltip]=\"item.label\"\n            (click)=\"previewWidth.set(item.width)\">\n            @switch (item.width) {\n              @case ('full') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" />\n                  <path d=\"M8 21h8M12 17v4\" />\n                </svg>\n              }\n              @case ('480') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n              @case ('280') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"6\" y=\"2\" width=\"12\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (assets().length) {\n      <ng-doc-copy-button class=\"ng-doc-demo-copy\" [text]=\"copyText\" label=\"Copy code\">\n        <ng-doc-icon icon=\"copy\"></ng-doc-icon>\n      </ng-doc-copy-button>\n    }\n\n    @if (demoUrl(); as url) {\n      <a\n        class=\"ng-doc-demo-open\"\n        ng-doc-button-icon\n        [rounded]=\"false\"\n        [href]=\"url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        aria-label=\"Open in a new tab\"\n        ngDocTooltip=\"Open in a new tab\">\n        <ng-doc-icon icon=\"external-link\"></ng-doc-icon>\n      </a>\n    }\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n\n  <div\n    class=\"ng-doc-demo-stage\"\n    role=\"tabpanel\"\n    [id]=\"idPrefix + '-panel-0'\"\n    [attr.aria-labelledby]=\"idPrefix + '-tab-0'\"\n    [attr.data-ng-doc-width]=\"previewWidth()\"\n    [attr.data-ng-doc-isolated]=\"isolated()\"\n    [hidden]=\"view() !== 'preview'\"\n    ngDocFullscreen\n    #stage=\"ngDocFullscreen\">\n    <div class=\"ng-doc-demo-frame\">\n      <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    </div>\n    <!-- The toolbar is not shown in fullscreen, so the stage carries its own way out. -->\n    @if (stage.active()) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen-exit\" [target]=\"stage\" />\n    }\n  </div>\n\n  @for (asset of assets(); track asset.title; let i = $index) {\n    @if (view() === asset.title) {\n      <div\n        class=\"ng-doc-demo-source\"\n        role=\"tabpanel\"\n        [id]=\"idPrefix + '-panel-' + (i + 1)\"\n        [attr.aria-labelledby]=\"idPrefix + '-tab-' + (i + 1)\">\n        <ng-doc-code [html]=\"asset.code\" [copyButton]=\"false\"></ng-doc-code>\n      </div>\n    }\n  }\n} @else {\n  <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n}\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (isolated()) {\n    <ng-doc-demo-frame [src]=\"demoUrl()!\" [frameTitle]=\"frameTitle()\" [fill]=\"fullscreen()\" />\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n", styles: [":host{display:block;margin:var(--ng-doc-demo-margin);border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);background:var(--ng-doc-demo-displayer-background, var(--ng-doc-background));overflow:hidden;min-width:0;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host[data-ng-doc-container=false]{border:none;border-radius:0;background:none;overflow:visible}.ng-doc-demo-toolbar{display:flex;align-items:center;gap:var(--ng-doc-space-2);min-height:48px;padding:var(--ng-doc-space-2);background:var(--ng-doc-demo-toolbar-background);border-bottom:1px solid var(--ng-doc-border-color);font-family:var(--ng-doc-font-family)}.ng-doc-demo-views,.ng-doc-demo-widths{display:inline-flex;flex:none;gap:2px;max-width:100%;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);overflow-x:auto;scrollbar-width:none}.ng-doc-demo-views{flex:0 1 auto}.ng-doc-demo-view,.ng-doc-demo-width{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:inherit;font-size:13px;font-weight:500;line-height:18px;color:var(--ng-doc-text-muted);white-space:nowrap;cursor:pointer;--ng-doc-icon-color: currentColor}.ng-doc-demo-view:hover,.ng-doc-demo-width:hover{color:var(--ng-doc-heading-color)}.ng-doc-demo-view:focus-visible,.ng-doc-demo-width:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-demo-view[aria-selected=true],.ng-doc-demo-view[aria-pressed=true],.ng-doc-demo-width[aria-selected=true],.ng-doc-demo-width[aria-pressed=true]{color:var(--ng-doc-heading-color)}.ng-doc-demo-views,.ng-doc-demo-widths{position:relative}.ng-doc-demo-views ng-doc-selection,.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true],.ng-doc-demo-widths ng-doc-selection,.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-demo-view,.ng-doc-demo-width{position:relative}.ng-doc-demo-width{padding:0 7px}.ng-doc-demo-width svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}:host-context([data-theme=dark]) ng-doc-selection,:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) ng-doc-selection,:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-demo-width-readout{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ng-doc-text-muted);white-space:nowrap}.ng-doc-demo-copy{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-copy{margin-left:0}.ng-doc-demo-open{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-open,.ng-doc-demo-copy~.ng-doc-demo-open{margin-left:0}.ng-doc-demo-fullscreen{margin-left:auto}.ng-doc-demo-width-readout~.ng-doc-demo-fullscreen,.ng-doc-demo-copy~.ng-doc-demo-fullscreen,.ng-doc-demo-open~.ng-doc-demo-fullscreen{margin-left:0}.ng-doc-demo-stage{background-image:radial-gradient(color-mix(in srgb,var(--ng-doc-base-5) 55%,transparent) 1px,transparent 1px);background-size:16px 16px;position:relative;display:grid;place-items:center;min-height:160px;padding:var(--ng-doc-space-8) var(--ng-doc-space-4);background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-demo-stage[hidden]{display:none}.ng-doc-demo-stage[data-ng-doc-fullscreen=true]{overflow:auto;padding:var(--ng-doc-space-16) var(--ng-doc-space-8)}.ng-doc-demo-stage[data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:auto;max-width:100%}.ng-doc-demo-fullscreen-exit{position:absolute;top:var(--ng-doc-space-4);right:var(--ng-doc-space-4);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm)}.ng-doc-demo-frame{width:100%;min-width:0;border-radius:var(--ng-doc-radius-md);transition:width var(--ng-doc-transition) var(--ng-doc-easing)}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame,[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{padding:var(--ng-doc-space-5);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm);overflow:auto}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame{width:min(480px,100%)}[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{width:min(280px,100%)}.ng-doc-demo-stage[data-ng-doc-isolated=true]>.ng-doc-demo-frame{padding:0;overflow:hidden}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true]{place-items:stretch center;padding:0}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true]>.ng-doc-demo-frame{height:100%}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:100%}.ng-doc-demo-source{background:var(--ng-doc-code-background)}@media(prefers-reduced-motion:reduce){.ng-doc-demo-frame{transition:none}}@media(max-width:640px){.ng-doc-demo-width-readout,.ng-doc-demo-widths{display:none}.ng-doc-demo-copy,.ng-doc-demo-open{margin-left:auto}.ng-doc-demo-copy~.ng-doc-demo-open{margin-left:0}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgDocCodeComponent, selector: "ng-doc-code", inputs: ["html", "copyButton", "name", "icon"] }, { kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "component", type: NgDocCopyButtonComponent, selector: "ng-doc-copy-button", inputs: ["text", "label"] }, { kind: "component", type: NgDocDemoFrameComponent, selector: "ng-doc-demo-frame", inputs: ["src", "frameTitle", "fill"] }, { kind: "component", type: NgDocFullscreenButtonComponent, selector: "ng-doc-fullscreen-button", inputs: ["route"] }, { kind: "directive", type: NgDocFullscreenDirective, selector: "[ngDocFullscreen]", exportAs: ["ngDocFullscreen"] }, { kind: "component", type: NgDocFullscreenToggleComponent, selector: "ng-doc-fullscreen-toggle", inputs: ["target"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocSelectionComponent, selector: "ng-doc-selection", inputs: ["align"] }, { kind: "directive", type: NgDocSelectionHostDirective, selector: "[ngDocSelectionHost]" }, { kind: "directive", type: NgDocSelectionOriginDirective, selector: "[ngDocSelectionOrigin]", inputs: ["ngDocSelectionOrigin"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocDemoComponent, isStandalone: true, selector: "ng-doc-demo", inputs: { componentName: { classPropertyName: "componentName", publicName: "componentName", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "options().class ?? \"\"", "attr.data-ng-doc-container": "options().container ?? true" } }, viewQueries: [{ propertyName: "stage", first: true, predicate: NgDocFullscreenDirective, descendants: true, isSignal: true }, { propertyName: "frame", first: true, predicate: NgDocDemoFrameComponent, descendants: true, isSignal: true }, { propertyName: "viewTabs", predicate: ["viewTab"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (options().container ?? true) {\n  <div class=\"ng-doc-demo-toolbar\">\n    <div\n      class=\"ng-doc-demo-views\"\n      role=\"tablist\"\n      [attr.aria-label]=\"texts.viewsLabel\"\n      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            {{ texts.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\n        class=\"ng-doc-demo-widths\"\n        role=\"group\"\n        [attr.aria-label]=\"texts.widthsLabel\"\n        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]=\"copyTexts.copyCode\">\n        <ng-doc-icon icon=\"copy\"></ng-doc-icon>\n      </ng-doc-copy-button>\n    }\n\n    @if (isolated()) {\n      <ng-doc-demo-theme-button\n        class=\"ng-doc-demo-theme\"\n        [(theme)]=\"frameTheme\"\n        [configured]=\"options().theme\" />\n    }\n\n    @if (newTabUrl(); as url) {\n      <a\n        class=\"ng-doc-demo-open\"\n        ng-doc-button-icon\n        [rounded]=\"false\"\n        [href]=\"url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        [attr.aria-label]=\"texts.openInNewTab\"\n        [ngDocTooltip]=\"texts.openInNewTab\">\n        <ng-doc-icon icon=\"external-link\"></ng-doc-icon>\n      </a>\n    }\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n\n  <div\n    class=\"ng-doc-demo-stage\"\n    role=\"tabpanel\"\n    [id]=\"idPrefix + '-panel-0'\"\n    [attr.aria-labelledby]=\"idPrefix + '-tab-0'\"\n    [attr.data-ng-doc-width]=\"previewWidth()\"\n    [attr.data-ng-doc-isolated]=\"isolated()\"\n    [attr.data-ng-doc-themed]=\"stageBackground() ? true : null\"\n    [style.background-color]=\"stageBackground() ?? null\"\n    [style.--_ng-doc-demo-canvas-dots]=\"stageDots() ?? null\"\n    [hidden]=\"view() !== 'preview'\"\n    ngDocFullscreen\n    #stage=\"ngDocFullscreen\">\n    <div class=\"ng-doc-demo-frame\">\n      <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    </div>\n    <!-- The toolbar is not shown in fullscreen, so the stage carries its own way out. -->\n    @if (stage.active()) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen-exit\" [target]=\"stage\" />\n    }\n  </div>\n\n  @for (asset of assets(); track asset.title; let i = $index) {\n    @if (view() === asset.title) {\n      <div\n        class=\"ng-doc-demo-source\"\n        role=\"tabpanel\"\n        [id]=\"idPrefix + '-panel-' + (i + 1)\"\n        [attr.aria-labelledby]=\"idPrefix + '-tab-' + (i + 1)\">\n        <ng-doc-code [html]=\"asset.code\" [copyButton]=\"false\"></ng-doc-code>\n      </div>\n    }\n  }\n} @else {\n  <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n}\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (isolated()) {\n    <ng-doc-demo-frame\n      [src]=\"demoUrl()!\"\n      [fragment]=\"frameFragment()\"\n      [frameTitle]=\"frameTitle()\"\n      [fill]=\"fullscreen()\" />\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n", styles: [":host{display:block;margin:var(--ng-doc-demo-margin);border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);background:var(--ng-doc-demo-displayer-background, var(--ng-doc-background));overflow:hidden;min-width:0;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host[data-ng-doc-container=false]{border:none;border-radius:0;background:none;overflow:visible}.ng-doc-demo-toolbar{display:flex;align-items:center;gap:var(--ng-doc-space-2);min-height:48px;padding:var(--ng-doc-space-2);background:var(--ng-doc-demo-toolbar-background);border-bottom:1px solid var(--ng-doc-border-color);font-family:var(--ng-doc-font-family)}.ng-doc-demo-views,.ng-doc-demo-widths{display:inline-flex;flex:none;gap:2px;max-width:100%;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);overflow-x:auto;scrollbar-width:none}.ng-doc-demo-views{flex:0 1 auto}.ng-doc-demo-view,.ng-doc-demo-width{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:inherit;font-size:13px;font-weight:500;line-height:18px;color:var(--ng-doc-text-muted);white-space:nowrap;cursor:pointer;--ng-doc-icon-color: currentColor}.ng-doc-demo-view:hover,.ng-doc-demo-width:hover{color:var(--ng-doc-heading-color)}.ng-doc-demo-view:focus-visible,.ng-doc-demo-width:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-demo-view[aria-selected=true],.ng-doc-demo-view[aria-pressed=true],.ng-doc-demo-width[aria-selected=true],.ng-doc-demo-width[aria-pressed=true]{color:var(--ng-doc-heading-color)}.ng-doc-demo-views,.ng-doc-demo-widths{position:relative}.ng-doc-demo-views ng-doc-selection,.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true],.ng-doc-demo-widths ng-doc-selection,.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-demo-view,.ng-doc-demo-width{position:relative}.ng-doc-demo-width{padding:0 7px}.ng-doc-demo-width svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}:host-context([data-theme=dark]) ng-doc-selection,:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) ng-doc-selection,:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-demo-width-readout{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ng-doc-text-muted);white-space:nowrap}.ng-doc-demo-copy{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-copy{margin-left:0}.ng-doc-demo-open{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-open,.ng-doc-demo-copy~.ng-doc-demo-open,.ng-doc-demo-theme~.ng-doc-demo-open{margin-left:0}.ng-doc-demo-theme>button{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-theme>button,.ng-doc-demo-copy~.ng-doc-demo-theme>button{margin-left:0}.ng-doc-demo-fullscreen{margin-left:auto}.ng-doc-demo-width-readout~.ng-doc-demo-fullscreen,.ng-doc-demo-copy~.ng-doc-demo-fullscreen,.ng-doc-demo-theme~.ng-doc-demo-fullscreen,.ng-doc-demo-open~.ng-doc-demo-fullscreen{margin-left:0}.ng-doc-demo-stage{background-image:radial-gradient(color-mix(in srgb,var(--_ng-doc-demo-canvas-dots, var(--ng-doc-base-5)) 55%,transparent) 1px,transparent 1px);background-size:16px 16px;position:relative;display:grid;place-items:center;min-height:160px;padding:var(--ng-doc-space-8) var(--ng-doc-space-4);background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-demo-stage[hidden]{display:none}.ng-doc-demo-stage[data-ng-doc-fullscreen=true]{overflow:auto;padding:var(--ng-doc-space-16) var(--ng-doc-space-8)}.ng-doc-demo-stage[data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:auto;max-width:100%}.ng-doc-demo-fullscreen-exit{position:absolute;top:var(--ng-doc-space-4);right:var(--ng-doc-space-4);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm)}.ng-doc-demo-frame{width:100%;min-width:0;border-radius:var(--ng-doc-radius-md);transition:width var(--ng-doc-transition) var(--ng-doc-easing)}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame,[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{padding:var(--ng-doc-space-5);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm);overflow:auto}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame{width:min(480px,100%)}[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{width:min(280px,100%)}.ng-doc-demo-stage[data-ng-doc-isolated=true]>.ng-doc-demo-frame{padding:0;overflow:hidden}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true]{place-items:stretch center;padding:0}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true]>.ng-doc-demo-frame{height:100%}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:100%}.ng-doc-demo-source{background:var(--ng-doc-code-background)}@media(prefers-reduced-motion:reduce){.ng-doc-demo-frame{transition:none}}@media(max-width:640px){.ng-doc-demo-width-readout,.ng-doc-demo-widths{display:none}.ng-doc-demo-copy,.ng-doc-demo-open{margin-left:auto}.ng-doc-demo-copy~.ng-doc-demo-open{margin-left:0}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgDocCodeComponent, selector: "ng-doc-code", inputs: ["html", "copyButton", "name", "icon"] }, { kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "component", type: NgDocCopyButtonComponent, selector: "ng-doc-copy-button", inputs: ["text", "label"] }, { kind: "component", type: NgDocDemoFrameComponent, selector: "ng-doc-demo-frame", inputs: ["src", "frameTitle", "fill", "fragment", "playground"], outputs: ["playgroundMessage", "playgroundSilent"] }, { kind: "component", type: NgDocDemoThemeButtonComponent, selector: "ng-doc-demo-theme-button", inputs: ["theme", "configured"], outputs: ["themeChange"] }, { kind: "component", type: NgDocFullscreenButtonComponent, selector: "ng-doc-fullscreen-button", inputs: ["route"] }, { kind: "directive", type: NgDocFullscreenDirective, selector: "[ngDocFullscreen]", exportAs: ["ngDocFullscreen"] }, { kind: "component", type: NgDocFullscreenToggleComponent, selector: "ng-doc-fullscreen-toggle", inputs: ["target"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocSelectionComponent, selector: "ng-doc-selection", inputs: ["align"] }, { kind: "directive", type: NgDocSelectionHostDirective, selector: "[ngDocSelectionHost]" }, { kind: "directive", type: NgDocSelectionOriginDirective, selector: "[ngDocSelectionOrigin]", inputs: ["ngDocSelectionOrigin"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoComponent, decorators: [{
             type: Component,
@@ -179,6 +215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                         NgDocButtonIconComponent,
                         NgDocCopyButtonComponent,
                         NgDocDemoFrameComponent,
+                        NgDocDemoThemeButtonComponent,
                         NgDocFullscreenButtonComponent,
                         NgDocFullscreenDirective,
                         NgDocFullscreenToggleComponent,
@@ -190,8 +227,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                     ], host: {
                         '[class]': 'options().class ?? ""',
                         '[attr.data-ng-doc-container]': 'options().container ?? true',
-                    }, template: "@if (options().container ?? true) {\n  <div class=\"ng-doc-demo-toolbar\">\n    <div class=\"ng-doc-demo-views\" role=\"tablist\" aria-label=\"Demo view\" ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      @for (item of views(); track item; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"ng-doc-demo-view\"\n          role=\"tab\"\n          [id]=\"idPrefix + '-tab-' + i\"\n          [attr.aria-selected]=\"view() === item\"\n          [ngDocSelectionOrigin]=\"view() === item\"\n          [attr.aria-controls]=\"idPrefix + '-panel-' + i\"\n          [attr.tabindex]=\"view() === item ? 0 : -1\"\n          (click)=\"openView(item)\"\n          (keydown)=\"onViewKeydown($event)\"\n          #viewTab>\n          @if (item === 'preview') {\n            Preview\n          } @else {\n            @if (assets()[i - 1].icon; as icon) {\n              <ng-doc-icon [customIcon]=\"icon\"></ng-doc-icon>\n            }\n            {{ item }}\n          }\n        </button>\n      }\n    </div>\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <span class=\"ng-doc-demo-width-readout\">{{ widthReadout() }}</span>\n      <div class=\"ng-doc-demo-widths\" role=\"group\" aria-label=\"Preview width\" ngDocSelectionHost>\n        <ng-doc-selection [align]=\"null\" />\n        @for (item of previewWidths; track item.width) {\n          <button\n            type=\"button\"\n            class=\"ng-doc-demo-width\"\n            [attr.aria-pressed]=\"previewWidth() === item.width\"\n            [ngDocSelectionOrigin]=\"previewWidth() === item.width\"\n            [attr.aria-label]=\"item.label\"\n            [ngDocTooltip]=\"item.label\"\n            (click)=\"previewWidth.set(item.width)\">\n            @switch (item.width) {\n              @case ('full') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" />\n                  <path d=\"M8 21h8M12 17v4\" />\n                </svg>\n              }\n              @case ('480') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n              @case ('280') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"6\" y=\"2\" width=\"12\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (assets().length) {\n      <ng-doc-copy-button class=\"ng-doc-demo-copy\" [text]=\"copyText\" label=\"Copy code\">\n        <ng-doc-icon icon=\"copy\"></ng-doc-icon>\n      </ng-doc-copy-button>\n    }\n\n    @if (demoUrl(); as url) {\n      <a\n        class=\"ng-doc-demo-open\"\n        ng-doc-button-icon\n        [rounded]=\"false\"\n        [href]=\"url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        aria-label=\"Open in a new tab\"\n        ngDocTooltip=\"Open in a new tab\">\n        <ng-doc-icon icon=\"external-link\"></ng-doc-icon>\n      </a>\n    }\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n\n  <div\n    class=\"ng-doc-demo-stage\"\n    role=\"tabpanel\"\n    [id]=\"idPrefix + '-panel-0'\"\n    [attr.aria-labelledby]=\"idPrefix + '-tab-0'\"\n    [attr.data-ng-doc-width]=\"previewWidth()\"\n    [attr.data-ng-doc-isolated]=\"isolated()\"\n    [hidden]=\"view() !== 'preview'\"\n    ngDocFullscreen\n    #stage=\"ngDocFullscreen\">\n    <div class=\"ng-doc-demo-frame\">\n      <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    </div>\n    <!-- The toolbar is not shown in fullscreen, so the stage carries its own way out. -->\n    @if (stage.active()) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen-exit\" [target]=\"stage\" />\n    }\n  </div>\n\n  @for (asset of assets(); track asset.title; let i = $index) {\n    @if (view() === asset.title) {\n      <div\n        class=\"ng-doc-demo-source\"\n        role=\"tabpanel\"\n        [id]=\"idPrefix + '-panel-' + (i + 1)\"\n        [attr.aria-labelledby]=\"idPrefix + '-tab-' + (i + 1)\">\n        <ng-doc-code [html]=\"asset.code\" [copyButton]=\"false\"></ng-doc-code>\n      </div>\n    }\n  }\n} @else {\n  <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n}\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (isolated()) {\n    <ng-doc-demo-frame [src]=\"demoUrl()!\" [frameTitle]=\"frameTitle()\" [fill]=\"fullscreen()\" />\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n", styles: [":host{display:block;margin:var(--ng-doc-demo-margin);border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);background:var(--ng-doc-demo-displayer-background, var(--ng-doc-background));overflow:hidden;min-width:0;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host[data-ng-doc-container=false]{border:none;border-radius:0;background:none;overflow:visible}.ng-doc-demo-toolbar{display:flex;align-items:center;gap:var(--ng-doc-space-2);min-height:48px;padding:var(--ng-doc-space-2);background:var(--ng-doc-demo-toolbar-background);border-bottom:1px solid var(--ng-doc-border-color);font-family:var(--ng-doc-font-family)}.ng-doc-demo-views,.ng-doc-demo-widths{display:inline-flex;flex:none;gap:2px;max-width:100%;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);overflow-x:auto;scrollbar-width:none}.ng-doc-demo-views{flex:0 1 auto}.ng-doc-demo-view,.ng-doc-demo-width{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:inherit;font-size:13px;font-weight:500;line-height:18px;color:var(--ng-doc-text-muted);white-space:nowrap;cursor:pointer;--ng-doc-icon-color: currentColor}.ng-doc-demo-view:hover,.ng-doc-demo-width:hover{color:var(--ng-doc-heading-color)}.ng-doc-demo-view:focus-visible,.ng-doc-demo-width:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-demo-view[aria-selected=true],.ng-doc-demo-view[aria-pressed=true],.ng-doc-demo-width[aria-selected=true],.ng-doc-demo-width[aria-pressed=true]{color:var(--ng-doc-heading-color)}.ng-doc-demo-views,.ng-doc-demo-widths{position:relative}.ng-doc-demo-views ng-doc-selection,.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true],.ng-doc-demo-widths ng-doc-selection,.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-demo-view,.ng-doc-demo-width{position:relative}.ng-doc-demo-width{padding:0 7px}.ng-doc-demo-width svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}:host-context([data-theme=dark]) ng-doc-selection,:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) ng-doc-selection,:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-demo-width-readout{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ng-doc-text-muted);white-space:nowrap}.ng-doc-demo-copy{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-copy{margin-left:0}.ng-doc-demo-open{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-open,.ng-doc-demo-copy~.ng-doc-demo-open{margin-left:0}.ng-doc-demo-fullscreen{margin-left:auto}.ng-doc-demo-width-readout~.ng-doc-demo-fullscreen,.ng-doc-demo-copy~.ng-doc-demo-fullscreen,.ng-doc-demo-open~.ng-doc-demo-fullscreen{margin-left:0}.ng-doc-demo-stage{background-image:radial-gradient(color-mix(in srgb,var(--ng-doc-base-5) 55%,transparent) 1px,transparent 1px);background-size:16px 16px;position:relative;display:grid;place-items:center;min-height:160px;padding:var(--ng-doc-space-8) var(--ng-doc-space-4);background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-demo-stage[hidden]{display:none}.ng-doc-demo-stage[data-ng-doc-fullscreen=true]{overflow:auto;padding:var(--ng-doc-space-16) var(--ng-doc-space-8)}.ng-doc-demo-stage[data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:auto;max-width:100%}.ng-doc-demo-fullscreen-exit{position:absolute;top:var(--ng-doc-space-4);right:var(--ng-doc-space-4);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm)}.ng-doc-demo-frame{width:100%;min-width:0;border-radius:var(--ng-doc-radius-md);transition:width var(--ng-doc-transition) var(--ng-doc-easing)}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame,[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{padding:var(--ng-doc-space-5);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm);overflow:auto}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame{width:min(480px,100%)}[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{width:min(280px,100%)}.ng-doc-demo-stage[data-ng-doc-isolated=true]>.ng-doc-demo-frame{padding:0;overflow:hidden}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true]{place-items:stretch center;padding:0}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true]>.ng-doc-demo-frame{height:100%}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:100%}.ng-doc-demo-source{background:var(--ng-doc-code-background)}@media(prefers-reduced-motion:reduce){.ng-doc-demo-frame{transition:none}}@media(max-width:640px){.ng-doc-demo-width-readout,.ng-doc-demo-widths{display:none}.ng-doc-demo-copy,.ng-doc-demo-open{margin-left:auto}.ng-doc-demo-copy~.ng-doc-demo-open{margin-left:0}}\n"] }]
-        }], propDecorators: { componentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentName", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], stage: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgDocFullscreenDirective), { isSignal: true }] }], viewTabs: [{ type: i0.ViewChildren, args: ['viewTab', { isSignal: true }] }] } });
+                    }, template: "@if (options().container ?? true) {\n  <div class=\"ng-doc-demo-toolbar\">\n    <div\n      class=\"ng-doc-demo-views\"\n      role=\"tablist\"\n      [attr.aria-label]=\"texts.viewsLabel\"\n      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            {{ texts.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\n        class=\"ng-doc-demo-widths\"\n        role=\"group\"\n        [attr.aria-label]=\"texts.widthsLabel\"\n        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]=\"copyTexts.copyCode\">\n        <ng-doc-icon icon=\"copy\"></ng-doc-icon>\n      </ng-doc-copy-button>\n    }\n\n    @if (isolated()) {\n      <ng-doc-demo-theme-button\n        class=\"ng-doc-demo-theme\"\n        [(theme)]=\"frameTheme\"\n        [configured]=\"options().theme\" />\n    }\n\n    @if (newTabUrl(); as url) {\n      <a\n        class=\"ng-doc-demo-open\"\n        ng-doc-button-icon\n        [rounded]=\"false\"\n        [href]=\"url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        [attr.aria-label]=\"texts.openInNewTab\"\n        [ngDocTooltip]=\"texts.openInNewTab\">\n        <ng-doc-icon icon=\"external-link\"></ng-doc-icon>\n      </a>\n    }\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n\n  <div\n    class=\"ng-doc-demo-stage\"\n    role=\"tabpanel\"\n    [id]=\"idPrefix + '-panel-0'\"\n    [attr.aria-labelledby]=\"idPrefix + '-tab-0'\"\n    [attr.data-ng-doc-width]=\"previewWidth()\"\n    [attr.data-ng-doc-isolated]=\"isolated()\"\n    [attr.data-ng-doc-themed]=\"stageBackground() ? true : null\"\n    [style.background-color]=\"stageBackground() ?? null\"\n    [style.--_ng-doc-demo-canvas-dots]=\"stageDots() ?? null\"\n    [hidden]=\"view() !== 'preview'\"\n    ngDocFullscreen\n    #stage=\"ngDocFullscreen\">\n    <div class=\"ng-doc-demo-frame\">\n      <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    </div>\n    <!-- The toolbar is not shown in fullscreen, so the stage carries its own way out. -->\n    @if (stage.active()) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen-exit\" [target]=\"stage\" />\n    }\n  </div>\n\n  @for (asset of assets(); track asset.title; let i = $index) {\n    @if (view() === asset.title) {\n      <div\n        class=\"ng-doc-demo-source\"\n        role=\"tabpanel\"\n        [id]=\"idPrefix + '-panel-' + (i + 1)\"\n        [attr.aria-labelledby]=\"idPrefix + '-tab-' + (i + 1)\">\n        <ng-doc-code [html]=\"asset.code\" [copyButton]=\"false\"></ng-doc-code>\n      </div>\n    }\n  }\n} @else {\n  <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n}\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (isolated()) {\n    <ng-doc-demo-frame\n      [src]=\"demoUrl()!\"\n      [fragment]=\"frameFragment()\"\n      [frameTitle]=\"frameTitle()\"\n      [fill]=\"fullscreen()\" />\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n", styles: [":host{display:block;margin:var(--ng-doc-demo-margin);border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);background:var(--ng-doc-demo-displayer-background, var(--ng-doc-background));overflow:hidden;min-width:0;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host[data-ng-doc-container=false]{border:none;border-radius:0;background:none;overflow:visible}.ng-doc-demo-toolbar{display:flex;align-items:center;gap:var(--ng-doc-space-2);min-height:48px;padding:var(--ng-doc-space-2);background:var(--ng-doc-demo-toolbar-background);border-bottom:1px solid var(--ng-doc-border-color);font-family:var(--ng-doc-font-family)}.ng-doc-demo-views,.ng-doc-demo-widths{display:inline-flex;flex:none;gap:2px;max-width:100%;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);overflow-x:auto;scrollbar-width:none}.ng-doc-demo-views{flex:0 1 auto}.ng-doc-demo-view,.ng-doc-demo-width{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:inherit;font-size:13px;font-weight:500;line-height:18px;color:var(--ng-doc-text-muted);white-space:nowrap;cursor:pointer;--ng-doc-icon-color: currentColor}.ng-doc-demo-view:hover,.ng-doc-demo-width:hover{color:var(--ng-doc-heading-color)}.ng-doc-demo-view:focus-visible,.ng-doc-demo-width:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-demo-view[aria-selected=true],.ng-doc-demo-view[aria-pressed=true],.ng-doc-demo-width[aria-selected=true],.ng-doc-demo-width[aria-pressed=true]{color:var(--ng-doc-heading-color)}.ng-doc-demo-views,.ng-doc-demo-widths{position:relative}.ng-doc-demo-views ng-doc-selection,.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true],.ng-doc-demo-widths ng-doc-selection,.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-demo-view,.ng-doc-demo-width{position:relative}.ng-doc-demo-width{padding:0 7px}.ng-doc-demo-width svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}:host-context([data-theme=dark]) ng-doc-selection,:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) ng-doc-selection,:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-demo-width-readout{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ng-doc-text-muted);white-space:nowrap}.ng-doc-demo-copy{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-copy{margin-left:0}.ng-doc-demo-open{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-open,.ng-doc-demo-copy~.ng-doc-demo-open,.ng-doc-demo-theme~.ng-doc-demo-open{margin-left:0}.ng-doc-demo-theme>button{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-theme>button,.ng-doc-demo-copy~.ng-doc-demo-theme>button{margin-left:0}.ng-doc-demo-fullscreen{margin-left:auto}.ng-doc-demo-width-readout~.ng-doc-demo-fullscreen,.ng-doc-demo-copy~.ng-doc-demo-fullscreen,.ng-doc-demo-theme~.ng-doc-demo-fullscreen,.ng-doc-demo-open~.ng-doc-demo-fullscreen{margin-left:0}.ng-doc-demo-stage{background-image:radial-gradient(color-mix(in srgb,var(--_ng-doc-demo-canvas-dots, var(--ng-doc-base-5)) 55%,transparent) 1px,transparent 1px);background-size:16px 16px;position:relative;display:grid;place-items:center;min-height:160px;padding:var(--ng-doc-space-8) var(--ng-doc-space-4);background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-demo-stage[hidden]{display:none}.ng-doc-demo-stage[data-ng-doc-fullscreen=true]{overflow:auto;padding:var(--ng-doc-space-16) var(--ng-doc-space-8)}.ng-doc-demo-stage[data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:auto;max-width:100%}.ng-doc-demo-fullscreen-exit{position:absolute;top:var(--ng-doc-space-4);right:var(--ng-doc-space-4);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm)}.ng-doc-demo-frame{width:100%;min-width:0;border-radius:var(--ng-doc-radius-md);transition:width var(--ng-doc-transition) var(--ng-doc-easing)}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame,[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{padding:var(--ng-doc-space-5);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm);overflow:auto}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame{width:min(480px,100%)}[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{width:min(280px,100%)}.ng-doc-demo-stage[data-ng-doc-isolated=true]>.ng-doc-demo-frame{padding:0;overflow:hidden}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true]{place-items:stretch center;padding:0}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true]>.ng-doc-demo-frame{height:100%}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:100%}.ng-doc-demo-source{background:var(--ng-doc-code-background)}@media(prefers-reduced-motion:reduce){.ng-doc-demo-frame{transition:none}}@media(max-width:640px){.ng-doc-demo-width-readout,.ng-doc-demo-widths{display:none}.ng-doc-demo-copy,.ng-doc-demo-open{margin-left:auto}.ng-doc-demo-copy~.ng-doc-demo-open{margin-left:0}}\n"] }]
+        }], propDecorators: { componentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentName", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], stage: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgDocFullscreenDirective), { isSignal: true }] }], frame: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgDocDemoFrameComponent), { isSignal: true }] }], viewTabs: [{ type: i0.ViewChildren, args: ['viewTab', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

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

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

@@ -1,17 +1,19 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
+import { NG_DOC_TEXTS } from '@ng-doc/app/tokens';
 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 {
     constructor() {
+        this.texts = inject(NG_DOC_TEXTS).demo;
         /** 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 }); }
+    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    {{ texts.openFullscreenRoute }}\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.2.1", ngImport: i0, type: NgDocFullscreenButtonComponent, decorators: [{
             type: Component,
@@ -21,7 +23,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                         NgDocIconComponent,
                         NgDocTextRightDirective,
                         NgDocButtonComponent,
-                    ], 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"] }]
+                    ], template: "<a ng-doc-button-text [routerLink]=\"route()\" target=\"_blank\">\n  <span ng-doc-text>\n    {{ texts.openFullscreenRoute }}\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 }] }] } });
 
 /**

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/** 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;;;;"}
+{"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, inject, input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport type { NgDocDemoTexts } from '@ng-doc/app/interfaces';\nimport { NG_DOC_TEXTS } from '@ng-doc/app/tokens';\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  protected readonly texts: NgDocDemoTexts = inject(NG_DOC_TEXTS).demo;\n\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    {{ texts.openFullscreenRoute }}\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":";;;;;;AAWA;MAca,8BAA8B,CAAA;AAb3C,IAAA,WAAA,GAAA;AAcqB,QAAA,IAAA,CAAA,KAAK,GAAmB,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI;;QAG3D,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ;kFAAU;AAC1C,IAAA;8GALY,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,ECzB3C,wNAMA,EAAA,MAAA,EAAA,CAAA,iJAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDYI,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,wNAAA,EAAA,MAAA,EAAA,CAAA,iJAAA,CAAA,EAAA;;;AEvBH;;AAEG;;;;"}

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_DOC_TEXTS } from '@ng-doc/app/tokens';
 import { NgDocButtonIconComponent, NgDocTooltipDirective } from '@ng-doc/ui-kit';
 
 /**
@@ -14,11 +15,12 @@ import { NgDocButtonIconComponent, NgDocTooltipDirective } from '@ng-doc/ui-kit'
  */
 class NgDocFullscreenToggleComponent {
     constructor() {
+        this.texts = inject(NG_DOC_TEXTS).demo;
         /** 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 */
+        this.label = computed(() => this.target().active() ? this.texts.exitFullscreen : this.texts.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 }); }

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

@@ -1 +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;;;;"}
+{"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, inject, input, Signal } from '@angular/core';\nimport type { NgDocDemoTexts } from '@ng-doc/app/interfaces';\nimport { NG_DOC_TEXTS } from '@ng-doc/app/tokens';\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  protected readonly texts: NgDocDemoTexts = inject(NG_DOC_TEXTS).demo;\n\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() ? this.texts.exitFullscreen : this.texts.fullscreen,\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AASA;;;;;;;;;AASG;MAiDU,8BAA8B,CAAA;AAhD3C,IAAA,WAAA,GAAA;AAiDqB,QAAA,IAAA,CAAA,KAAK,GAAmB,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI;;QAG3D,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,QAAQ;mFAA4B;;AAGzC,QAAA,IAAA,CAAA,KAAK,GAAmB,QAAQ,CAAC,MAClD,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU;kFAC3E;AACF,IAAA;8GAVY,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;;;ACjEH;;AAEG;;;;"}

package/fesm2022/ng-doc-app-components-heading-anchor.mjs

@@ -1,8 +1,9 @@
 import { LocationStrategy } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, inject, ElementRef, Renderer2, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, ElementRef, Renderer2, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocCopyButtonComponent } from '@ng-doc/app/components/copy-button';
 import { ɵngDocPageUrl as _ngDocPageUrl } from '@ng-doc/app/helpers';
+import { NG_DOC_TEXTS } from '@ng-doc/app/tokens';
 import { NgDocIconComponent } from '@ng-doc/ui-kit';
 import { WA_LOCATION } from '@ng-web-apis/common';
 
@@ -11,6 +12,7 @@ import { WA_LOCATION } from '@ng-web-apis/common';
  */
 class NgDocHeadingAnchorComponent {
     constructor() {
+        this.texts = inject(NG_DOC_TEXTS).copy;
         /** Id of the heading. */
         this.anchor = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
@@ -54,7 +56,7 @@ class NgDocHeadingAnchorComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocHeadingAnchorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: NgDocHeadingAnchorComponent, isStandalone: true, selector: "ng-doc-heading-anchor", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
-    <ng-doc-copy-button [text]="href" label="Copy link to section">
+    <ng-doc-copy-button [text]="href" [label]="texts.copyLinkToSection">
       <ng-doc-icon icon="link-2"></ng-doc-icon>
     </ng-doc-copy-button>
   `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocCopyButtonComponent, selector: "ng-doc-copy-button", inputs: ["text", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -62,7 +64,7 @@ class NgDocHeadingAnchorComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocHeadingAnchorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-heading-anchor', imports: [NgDocIconComponent, NgDocCopyButtonComponent], template: `
-    <ng-doc-copy-button [text]="href" label="Copy link to section">
+    <ng-doc-copy-button [text]="href" [label]="texts.copyLinkToSection">
       <ng-doc-icon icon="link-2"></ng-doc-icon>
     </ng-doc-copy-button>
   `, changeDetection: ChangeDetectionStrategy.OnPush, host: {

package/fesm2022/ng-doc-app-components-heading-anchor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-heading-anchor.mjs","sources":["../../../../libs/app/components/heading-anchor/heading-anchor.component.ts","../../../../libs/app/components/heading-anchor/ng-doc-app-components-heading-anchor.ts"],"sourcesContent":["import { LocationStrategy } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  inject,\n  input,\n  OnInit,\n  Renderer2,\n} from '@angular/core';\nimport { NgDocCopyButtonComponent } from '@ng-doc/app/components/copy-button';\nimport { ɵngDocPageUrl } from '@ng-doc/app/helpers';\nimport { NgDocIconComponent } from '@ng-doc/ui-kit';\nimport { WA_LOCATION } from '@ng-web-apis/common';\n\n/**\n * Button next to a heading that copies the link to the heading.\n */\n@Component({\n  selector: 'ng-doc-heading-anchor',\n  imports: [NgDocIconComponent, NgDocCopyButtonComponent],\n  template: `\n    <ng-doc-copy-button [text]=\"href\" label=\"Copy link to section\">\n      <ng-doc-icon icon=\"link-2\"></ng-doc-icon>\n    </ng-doc-copy-button>\n  `,\n  styles: ``,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class NgDocHeadingAnchorComponent implements OnInit {\n  /** Id of the heading. */\n  readonly anchor = input.required<string>();\n\n  /** Classes of the host element. */\n  readonly classes = input<string[]>([]);\n\n  protected readonly location = inject(WA_LOCATION);\n\n  private readonly locationStrategy = inject(LocationStrategy);\n  private readonly host: HTMLElement = inject(ElementRef).nativeElement;\n  private readonly renderer = inject(Renderer2);\n\n  // Read when the button is pressed: the location is not a signal, and the link must use the\n  // route the reader is on, in the form the location strategy shows it.\n  protected readonly href = (): string =>\n    ɵngDocPageUrl(this.locationStrategy, this.location, this.anchor());\n\n  /**\n   * Names the heading after its own text: the anchor sits inside the heading, so the button's\n   * label would otherwise end the heading's accessible name (\"Installation Copy link to\n   * section\"). The heading's other content moves into a span that the heading is labelled by, so\n   * the name follows that content and leaves out whatever it hides from assistive technology.\n   * The processors insert the anchor before its first change detection, on the server as in the\n   * browser, so the heading is its parent here.\n   * @internal\n   */\n  ngOnInit(): void {\n    const heading = this.host.parentElement;\n\n    if (\n      !heading ||\n      !/^H[1-6]$/.test(heading.tagName) ||\n      heading.hasAttribute('aria-label') ||\n      heading.hasAttribute('aria-labelledby')\n    )\n      return;\n\n    const id = `ng-doc-heading-label-${heading.id || this.anchor()}`;\n    const label: HTMLElement = this.renderer.createElement('span');\n\n    this.renderer.setAttribute(label, 'id', id);\n    this.renderer.setAttribute(label, 'class', 'ng-doc-heading-label');\n    for (const node of Array.from(heading.childNodes)) {\n      if (node !== this.host) this.renderer.appendChild(label, node);\n    }\n    this.renderer.insertBefore(heading, label, this.host);\n    this.renderer.setAttribute(heading, 'aria-labelledby', id);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ɵngDocPageUrl"],"mappings":"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"}
+{"version":3,"file":"ng-doc-app-components-heading-anchor.mjs","sources":["../../../../libs/app/components/heading-anchor/heading-anchor.component.ts","../../../../libs/app/components/heading-anchor/ng-doc-app-components-heading-anchor.ts"],"sourcesContent":["import { LocationStrategy } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  inject,\n  input,\n  OnInit,\n  Renderer2,\n} from '@angular/core';\nimport { NgDocCopyButtonComponent } from '@ng-doc/app/components/copy-button';\nimport { ɵngDocPageUrl } from '@ng-doc/app/helpers';\nimport type { NgDocCopyTexts } from '@ng-doc/app/interfaces';\nimport { NG_DOC_TEXTS } from '@ng-doc/app/tokens';\nimport { NgDocIconComponent } from '@ng-doc/ui-kit';\nimport { WA_LOCATION } from '@ng-web-apis/common';\n\n/**\n * Button next to a heading that copies the link to the heading.\n */\n@Component({\n  selector: 'ng-doc-heading-anchor',\n  imports: [NgDocIconComponent, NgDocCopyButtonComponent],\n  template: `\n    <ng-doc-copy-button [text]=\"href\" [label]=\"texts.copyLinkToSection\">\n      <ng-doc-icon icon=\"link-2\"></ng-doc-icon>\n    </ng-doc-copy-button>\n  `,\n  styles: ``,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class NgDocHeadingAnchorComponent implements OnInit {\n  protected readonly texts: NgDocCopyTexts = inject(NG_DOC_TEXTS).copy;\n\n  /** Id of the heading. */\n  readonly anchor = input.required<string>();\n\n  /** Classes of the host element. */\n  readonly classes = input<string[]>([]);\n\n  protected readonly location = inject(WA_LOCATION);\n\n  private readonly locationStrategy = inject(LocationStrategy);\n  private readonly host: HTMLElement = inject(ElementRef).nativeElement;\n  private readonly renderer = inject(Renderer2);\n\n  // Read when the button is pressed: the location is not a signal, and the link must use the\n  // route the reader is on, in the form the location strategy shows it.\n  protected readonly href = (): string =>\n    ɵngDocPageUrl(this.locationStrategy, this.location, this.anchor());\n\n  /**\n   * Names the heading after its own text: the anchor sits inside the heading, so the button's\n   * label would otherwise end the heading's accessible name (\"Installation Copy link to\n   * section\"). The heading's other content moves into a span that the heading is labelled by, so\n   * the name follows that content and leaves out whatever it hides from assistive technology.\n   * The processors insert the anchor before its first change detection, on the server as in the\n   * browser, so the heading is its parent here.\n   * @internal\n   */\n  ngOnInit(): void {\n    const heading = this.host.parentElement;\n\n    if (\n      !heading ||\n      !/^H[1-6]$/.test(heading.tagName) ||\n      heading.hasAttribute('aria-label') ||\n      heading.hasAttribute('aria-labelledby')\n    )\n      return;\n\n    const id = `ng-doc-heading-label-${heading.id || this.anchor()}`;\n    const label: HTMLElement = this.renderer.createElement('span');\n\n    this.renderer.setAttribute(label, 'id', id);\n    this.renderer.setAttribute(label, 'class', 'ng-doc-heading-label');\n    for (const node of Array.from(heading.childNodes)) {\n      if (node !== this.host) this.renderer.appendChild(label, node);\n    }\n    this.renderer.insertBefore(heading, label, this.host);\n    this.renderer.setAttribute(heading, 'aria-labelledby', id);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ɵngDocPageUrl"],"mappings":";;;;;;;;;AAiBA;;AAEG;MAeU,2BAA2B,CAAA;AAdxC,IAAA,WAAA,GAAA;AAeqB,QAAA,IAAA,CAAA,KAAK,GAAmB,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI;;QAG3D,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,QAAQ;mFAAU;;QAGjC,IAAA,CAAA,OAAO,GAAG,KAAK,CAAW,EAAE;oFAAC;AAEnB,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC;AAEhC,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC3C,QAAA,IAAA,CAAA,IAAI,GAAgB,MAAM,CAAC,UAAU,CAAC,CAAC,aAAa;AACpD,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;;;AAI1B,QAAA,IAAA,CAAA,IAAI,GAAG,MACxBA,aAAa,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAiCrE,IAAA;AA/BC;;;;;;;;AAQG;IACH,QAAQ,GAAA;AACN,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa;AAEvC,QAAA,IACE,CAAC,OAAO;AACR,YAAA,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;AACjC,YAAA,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC;AAClC,YAAA,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC;YAEvC;AAEF,QAAA,MAAM,EAAE,GAAG,CAAA,qBAAA,EAAwB,OAAO,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAA,CAAE;QAChE,MAAM,KAAK,GAAgB,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;QAE9D,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC;QAC3C,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,sBAAsB,CAAC;AAClE,QAAA,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;AACjD,YAAA,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC;QAChE;AACA,QAAA,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC;QACrD,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,iBAAiB,EAAE,EAAE,CAAC;IAC5D;8GAlDW,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,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,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAX5B;;;;GAIT,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EALS,kBAAkB,gGAAE,wBAAwB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAY3C,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAdvC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,WACxB,CAAC,kBAAkB,EAAE,wBAAwB,CAAC,EAAA,QAAA,EAC7C;;;;GAIT,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,SAAS,EAAE,WAAW;AACvB,qBAAA,EAAA;;;AChCH;;AAEG;;;;"}