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

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

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

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

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

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

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

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

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

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

@@ -1,41 +1,74 @@
+import { LocationStrategy } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, inject, 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 { NgDocIconComponent } from '@ng-doc/ui-kit';
 import { WA_LOCATION } from '@ng-web-apis/common';
 
+/**
+ * Button next to a heading that copies the link to the heading.
+ */
 class NgDocHeadingAnchorComponent {
     constructor() {
-        this.classes = [];
+        /** Id of the heading. */
+        this.anchor = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+        /** Classes of the host element. */
+        this.classes = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
         this.location = inject(WA_LOCATION);
+        this.locationStrategy = inject(LocationStrategy);
+        this.host = inject(ElementRef).nativeElement;
+        this.renderer = inject(Renderer2);
+        // Read when the button is pressed: the location is not a signal, and the link must use the
+        // route the reader is on, in the form the location strategy shows it.
+        this.href = () => _ngDocPageUrl(this.locationStrategy, this.location, this.anchor());
     }
-    get href() {
-        const { origin, pathname } = this.location;
-        return `${origin}${pathname}#${this.anchor}`;
+    /**
+     * Names the heading after its own text: the anchor sits inside the heading, so the button's
+     * label would otherwise end the heading's accessible name ("Installation Copy link to
+     * section"). The heading's other content moves into a span that the heading is labelled by, so
+     * the name follows that content and leaves out whatever it hides from assistive technology.
+     * The processors insert the anchor before its first change detection, on the server as in the
+     * browser, so the heading is its parent here.
+     * @internal
+     */
+    ngOnInit() {
+        const heading = this.host.parentElement;
+        if (!heading ||
+            !/^H[1-6]$/.test(heading.tagName) ||
+            heading.hasAttribute('aria-label') ||
+            heading.hasAttribute('aria-labelledby'))
+            return;
+        const id = `ng-doc-heading-label-${heading.id || this.anchor()}`;
+        const label = this.renderer.createElement('span');
+        this.renderer.setAttribute(label, 'id', id);
+        this.renderer.setAttribute(label, 'class', 'ng-doc-heading-label');
+        for (const node of Array.from(heading.childNodes)) {
+            if (node !== this.host)
+                this.renderer.appendChild(label, node);
+        }
+        this.renderer.insertBefore(heading, label, this.host);
+        this.renderer.setAttribute(heading, 'aria-labelledby', id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocHeadingAnchorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocHeadingAnchorComponent, isStandalone: true, selector: "ng-doc-heading-anchor", inputs: { anchor: "anchor", classes: "classes" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
-    <ng-doc-copy-button [text]="href">
+    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-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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocHeadingAnchorComponent, decorators: [{
+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">
+    <ng-doc-copy-button [text]="href" label="Copy link to section">
       <ng-doc-icon icon="link-2"></ng-doc-icon>
     </ng-doc-copy-button>
-  `, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], propDecorators: { anchor: [{
-                type: Input,
-                args: [{ required: true }]
-            }], classes: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class']
-            }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'classes()',
+                    } }]
+        }], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: true }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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 { ChangeDetectionStrategy, Component, HostBinding, inject, Input } from '@angular/core';\nimport { NgDocCopyButtonComponent } from '@ng-doc/app/components/copy-button';\nimport { NgDocIconComponent } from '@ng-doc/ui-kit';\nimport { WA_LOCATION } from '@ng-web-apis/common';\n\n@Component({\n  selector: 'ng-doc-heading-anchor',\n  imports: [NgDocIconComponent, NgDocCopyButtonComponent],\n  template: `\n    <ng-doc-copy-button [text]=\"href\">\n      <ng-doc-icon icon=\"link-2\"></ng-doc-icon>\n    </ng-doc-copy-button>\n  `,\n  styles: ``,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocHeadingAnchorComponent {\n  @Input({ required: true })\n  anchor!: string;\n\n  @Input()\n  @HostBinding('class')\n  classes: string[] = [];\n\n  protected readonly location = inject(WA_LOCATION);\n\n  protected get href(): string {\n    const { origin, pathname } = this.location;\n\n    return `${origin}${pathname}#${this.anchor}`;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAgBa,2BAA2B,CAAA;AAXxC,IAAA,WAAA,GAAA;QAiBE,IAAA,CAAA,OAAO,GAAa,EAAE;AAEH,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC;AAOlD,IAAA;AALC,IAAA,IAAc,IAAI,GAAA;QAChB,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ;QAE1C,OAAO,CAAA,EAAG,MAAM,CAAA,EAAG,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAA,CAAE;IAC9C;8GAdW,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,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,cAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAR5B;;;;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,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAS3C,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAXvC,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;;sBAG9C,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;sBAGxB;;sBACA,WAAW;uBAAC,OAAO;;;ACrBtB;;AAEG;;;;"}
+{"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":";;;;;;;;AAeA;;AAEG;MAeU,2BAA2B,CAAA;AAdxC,IAAA,WAAA,GAAA;;QAgBW,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;8GAhDW,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;;;AC9BH;;AAEG;;;;"}

package/fesm2022/ng-doc-app-components-image-viewer.mjs

@@ -1,27 +1,89 @@
 import * as i0 from '@angular/core';
-import { input, viewChild, TemplateRef, inject, ElementRef, ChangeDetectorRef, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, viewChild, TemplateRef, inject, ElementRef, DOCUMENT, signal, DestroyRef, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocOverlayService, NgDocOverlayContainerComponent } from '@ng-doc/ui-kit';
 
+/** Easing of the zoom: fast at first, settling into the final size. */
+const ZOOM_EASING = 'cubic-bezier(0.2, 0, 0, 1)';
+/**
+ * Wraps an image of the page: clicking it, or pressing Enter or Space on it, opens the image at
+ * its natural size, scaled down to fit the window.
+ *
+ * An image inside a link keeps the link's behaviour, and an image with an empty `alt` is
+ * decorative: neither becomes a button.
+ */
 class NgDocImageViewerComponent {
     constructor() {
+        /** Source of the image. */
         this.src = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        /** Alternative text of the image. */
         this.alt = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
-        this.image = viewChild('image', { ...(ngDevMode ? { debugName: "image" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.image = viewChild.required('image', { ...(ngDevMode ? { debugName: "image" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.overlay = inject(NgDocOverlayService);
         this.element = inject((ElementRef)).nativeElement;
-        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.window = inject(DOCUMENT).defaultView;
+        /** Whether the scaled image is open. */
+        this.opened = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+        /** The size of the opened image. */
+        this.size = signal({ width: 0, height: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.attempt = 0;
+        this.destroyed = false;
+        inject(DestroyRef).onDestroy(() => {
+            this.destroyed = true;
+            this.overlayRef?.close();
+        });
     }
+    /**
+     * Opens the image at its natural size, scaled down to fit the window, unless the image is not
+     * interactive. The image grows from its place on the page.
+     */
     clickEvent() {
+        untracked(() => {
+            if (this.isInteractive()) {
+                void this.open();
+            }
+        });
+    }
+    /**
+     * Whether the image opens: it has a text alternative and is not inside a link. The page
+     * processor moves the host into place before change detection, so the check reads the DOM
+     * where the image ends up.
+     */
+    isInteractive() {
+        return !!this.alt().trim() && !this.element.parentElement?.closest('a');
+    }
+    /**
+     * Opens the image on Space without scrolling the page.
+     * @param event - The key press.
+     */
+    onSpace(event) {
+        if (this.isInteractive()) {
+            event.preventDefault();
+            this.clickEvent();
+        }
+    }
+    async open() {
         this.overlayRef?.close();
-        const { width, height, top, left } = this.element.getBoundingClientRect();
-        const windowWidth = window.innerWidth;
-        const windowHeight = window.innerHeight;
-        const ratio = Math.min(windowWidth / width, windowHeight / height);
-        const newWidth = width * ratio;
-        const newHeight = height * ratio;
-        this.overlayRef = this.overlay.open(this.image(), {
+        const attempt = ++this.attempt;
+        const thumbnail = this.element.querySelector('img');
+        await this.decode(thumbnail);
+        // The reader may have opened the image again, pressed Escape or left the page while it
+        // decoded.
+        if (attempt !== this.attempt || this.destroyed) {
+            return;
+        }
+        // The size is known before anything moves, so the image grows straight to it.
+        const source = this.sourceSize(thumbnail);
+        const size = this.fit(source);
+        const zoomedFrame = { transformOrigin: '0 0', transform: 'none' };
+        // The close animation reads its keyframes when it runs; a refit updates them in place.
+        const closeFrames = [zoomedFrame, this.thumbnailFrame(thumbnail, size)];
+        const animate = !this.window?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+        this.size.set(size);
+        const overlayRef = this.overlay.open(this.image(), {
             overlayContainer: NgDocOverlayContainerComponent,
             positionStrategy: this.overlay
                 .globalPositionStrategy()
@@ -30,92 +92,124 @@ class NgDocImageViewerComponent {
             scrollStrategy: this.overlay.scrollStrategy().block(),
             hasBackdrop: true,
             backdropClass: 'ng-doc-blur-backdrop',
-            openAnimation: [
-                [
-                    {
-                        position: 'fixed',
-                        width: `${width}px`,
-                        height: `${height}px`,
-                        top: `${top}px`,
-                        left: `${left}px`,
-                        transform: 'translate(0%, 0)',
-                    },
-                    {
-                        position: 'fixed',
-                        width: `${newWidth}px`,
-                        height: `${newHeight}px`,
-                        top: '50%',
-                        left: '50%',
-                        transform: 'translate(-50%, -50%)',
-                    },
-                ],
-                {
-                    duration: 300,
-                    easing: 'cubic-bezier(0.25, 0.8, 0.25, 1)',
-                },
-                //
-                // group([
-                //   animate(
-                //     '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
-                //     style({
-                //       width: `${newWidth}px`,
-                //       height: `${newHeight}px`,
-                //       top: '50%',
-                //       left: '50%',
-                //       transform: 'translate(-50%, -50%)',
-                //     }),
-                //   ),
-                //   query('.ng-doc-image-container', [
-                //     style({ padding: 0 }),
-                //     animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ padding: '16px' })),
-                //   ]),
-                // ]),
-            ],
-            // closeAnimation: [
-            //   style({
-            //     position: 'fixed',
-            //     width: `${newWidth}px`,
-            //     height: `${newHeight}px`,
-            //     top: '50%',
-            //     left: '50%',
-            //     transform: 'translate(-50%, -50%)',
-            //   }),
-            //   group([
-            //     animate(
-            //       '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
-            //       style({ width, height, top, left, transform: 'translate(0%, 0)' }),
-            //     ),
-            //     query(
-            //       '.ng-doc-image-container',
-            //       animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ padding: 0 })),
-            //     ),
-            //   ]),
-            // ],
+            width: `${size.width}px`,
+            height: `${size.height}px`,
+            openAnimation: animate
+                ? [[closeFrames[1], zoomedFrame], { duration: 300, easing: ZOOM_EASING }]
+                : undefined,
+            closeAnimation: animate
+                ? [closeFrames, { duration: 200, easing: ZOOM_EASING, fill: 'forwards' }]
+                : undefined,
         });
-        this.overlayRef.afterClose().subscribe(() => {
-            this.overlayRef = undefined;
-            this.changeDetectorRef.markForCheck();
+        const listeners = new AbortController();
+        // A resized or rotated window fits the image again.
+        const refit = () => {
+            const fitted = this.fit(source);
+            this.size.set(fitted);
+            overlayRef.overlayRef.updateSize({
+                width: `${fitted.width}px`,
+                height: `${fitted.height}px`,
+            });
+            closeFrames[1] = this.thumbnailFrame(thumbnail, fitted);
+        };
+        this.window?.addEventListener('resize', refit, { signal: listeners.signal });
+        this.window?.addEventListener('orientationchange', refit, { signal: listeners.signal });
+        this.overlayRef = overlayRef;
+        this.opened.set(true);
+        overlayRef.afterClose().subscribe(() => {
+            listeners.abort();
+            if (this.overlayRef === overlayRef) {
+                this.overlayRef = undefined;
+                this.opened.set(false);
+                this.element.focus();
+            }
         });
     }
-    enterContainer(element) {
-        console.log('enterContainer');
-        element.animate([{ padding: 0 }, { padding: '16px' }], {
-            duration: 300,
-            easing: 'cubic-bezier(0.25, 0.8, 0.25, 1)',
-        });
+    /**
+     * Waits until the image is decoded, so its natural size is known. Escape cancels the open
+     * meanwhile, as it closes the opened image. A failed decode (a broken or not yet available
+     * image) leaves the sizes that are known.
+     * @param thumbnail - The image on the page.
+     */
+    async decode(thumbnail) {
+        const listeners = new AbortController();
+        this.window?.document.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') {
+                this.attempt++;
+            }
+        }, { capture: true, signal: listeners.signal });
+        try {
+            await thumbnail?.decode?.().catch(() => undefined);
+        }
+        finally {
+            listeners.abort();
+        }
+    }
+    /**
+     * The size to scale: the natural size of the image, or the size of the thumbnail for an image
+     * without one (an SVG without dimensions), which may then grow to fill the window.
+     * @param thumbnail - The image on the page.
+     */
+    sourceSize(thumbnail) {
+        const naturalWidth = thumbnail?.naturalWidth ?? 0;
+        const naturalHeight = thumbnail?.naturalHeight ?? 0;
+        if (naturalWidth > 0 && naturalHeight > 0) {
+            return { width: naturalWidth, height: naturalHeight, natural: true };
+        }
+        const rect = (thumbnail ?? this.element).getBoundingClientRect();
+        return { width: rect.width, height: rect.height, natural: false };
+    }
+    /**
+     * The size the image opens at: its natural size, scaled down to fit the viewport with a margin
+     * and never scaled up. An image without a natural size fills the available space with the
+     * proportions of its thumbnail.
+     * @param source - The size to scale.
+     */
+    fit(source) {
+        const viewport = this.window?.document.documentElement;
+        const viewportWidth = viewport?.clientWidth || this.window?.innerWidth || 0;
+        const viewportHeight = viewport?.clientHeight || this.window?.innerHeight || 0;
+        const margin = viewportWidth <= 640 ? 16 : 48;
+        const maxWidth = Math.max(viewportWidth - margin * 2, 1);
+        const maxHeight = Math.max(viewportHeight - margin * 2, 1);
+        const width = source.width || maxWidth;
+        const height = source.height || maxHeight;
+        const scale = Math.min(source.natural ? 1 : Number.POSITIVE_INFINITY, maxWidth / width, maxHeight / height);
+        return { width: Math.round(width * scale), height: Math.round(height * scale) };
+    }
+    /**
+     * The keyframe that puts the opened image over its thumbnail. The overlay centres the image in
+     * the viewport; the frame scales it uniformly to fit the thumbnail's box and centres it there,
+     * so an image whose proportions differ from its box's is not distorted.
+     * @param thumbnail - The image on the page.
+     * @param size - The size of the opened image.
+     */
+    thumbnailFrame(thumbnail, size) {
+        const from = (thumbnail ?? this.element).getBoundingClientRect();
+        const viewport = this.window?.document.documentElement;
+        const left = ((viewport?.clientWidth ?? size.width) - size.width) / 2;
+        const top = ((viewport?.clientHeight ?? size.height) - size.height) / 2;
+        const scale = Math.min(from.width / size.width, from.height / size.height) || 0;
+        const x = from.left + (from.width - size.width * scale) / 2 - left;
+        const y = from.top + (from.height - size.height * scale) / 2 - top;
+        return { transformOrigin: '0 0', transform: `translate(${x}px, ${y}px) scale(${scale})` };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocImageViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: NgDocImageViewerComponent, isStandalone: true, selector: "ng-doc-image-viewer", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "clickEvent()" }, properties: { "attr.data-opened": "!!overlayRef" } }, viewQueries: [{ propertyName: "image", first: true, predicate: ["image"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-template #image>\n  <div\n    class=\"ng-doc-image-container\"\n    (click)=\"overlayRef?.close()\"\n    (animate.enter)=\"enterContainer(element)\"\n    #element>\n    <img class=\"ng-doc-scaled-image\" [src]=\"src()\" [alt]=\"alt()\" />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;cursor:zoom-in;transition:var(--ng-doc-transition)}:host[data-opened=true]>::ng-deep img{opacity:0}:host>::ng-deep img{max-width:100%;vertical-align:middle;border-radius:var(--ng-doc-base-gutter);overflow:hidden}.ng-doc-image-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--ng-doc-base-gutter) * 2);width:100%;height:100%}.ng-doc-image-container .ng-doc-scaled-image{cursor:zoom-out;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocImageViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.2.1", type: NgDocImageViewerComponent, isStandalone: true, selector: "ng-doc-image-viewer", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "clickEvent()", "keydown.enter": "clickEvent()", "keydown.space": "onSpace($event)" }, properties: { "attr.role": "isInteractive() ? \"button\" : null", "attr.tabindex": "isInteractive() ? 0 : null", "attr.aria-label": "isInteractive() ? \"Open image: \" + alt() : null", "attr.data-interactive": "isInteractive()", "attr.data-opened": "opened()" } }, viewQueries: [{ propertyName: "image", first: true, predicate: ["image"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-template #image>\n  <div\n    class=\"ng-doc-image-container\"\n    [style.width.px]=\"size().width\"\n    [style.height.px]=\"size().height\"\n    (click)=\"overlayRef?.close()\">\n    <img class=\"ng-doc-scaled-image\" [src]=\"src()\" [alt]=\"alt()\" />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}:host[data-interactive=true]{cursor:zoom-in}:host{transition:var(--ng-doc-transition);border-radius:var(--ng-doc-radius-lg)}:host:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:host[data-opened=true]>::ng-deep img{opacity:0}:host>::ng-deep img{max-width:100%;vertical-align:middle;border-radius:var(--ng-doc-radius-lg);overflow:hidden}.ng-doc-image-container{display:block}.ng-doc-image-container .ng-doc-scaled-image{display:block;width:100%;height:100%;object-fit:contain;border-radius:var(--ng-doc-radius-lg);cursor:zoom-out}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocImageViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocImageViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-image-viewer', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.data-opened]': '!!overlayRef',
-                    }, template: "<ng-content></ng-content>\n\n<ng-template #image>\n  <div\n    class=\"ng-doc-image-container\"\n    (click)=\"overlayRef?.close()\"\n    (animate.enter)=\"enterContainer(element)\"\n    #element>\n    <img class=\"ng-doc-scaled-image\" [src]=\"src()\" [alt]=\"alt()\" />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;cursor:zoom-in;transition:var(--ng-doc-transition)}:host[data-opened=true]>::ng-deep img{opacity:0}:host>::ng-deep img{max-width:100%;vertical-align:middle;border-radius:var(--ng-doc-base-gutter);overflow:hidden}.ng-doc-image-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--ng-doc-base-gutter) * 2);width:100%;height:100%}.ng-doc-image-container .ng-doc-scaled-image{cursor:zoom-out;width:100%;height:100%}\n"] }]
-        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], image: [{ type: i0.ViewChild, args: ['image', { ...{ read: TemplateRef }, isSignal: true }] }], clickEvent: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+                        '[attr.role]': 'isInteractive() ? "button" : null',
+                        '[attr.tabindex]': 'isInteractive() ? 0 : null',
+                        '[attr.aria-label]': 'isInteractive() ? "Open image: " + alt() : null',
+                        '[attr.data-interactive]': 'isInteractive()',
+                        '[attr.data-opened]': 'opened()',
+                        '(click)': 'clickEvent()',
+                        '(keydown.enter)': 'clickEvent()',
+                        '(keydown.space)': 'onSpace($event)',
+                    }, template: "<ng-content></ng-content>\n\n<ng-template #image>\n  <div\n    class=\"ng-doc-image-container\"\n    [style.width.px]=\"size().width\"\n    [style.height.px]=\"size().height\"\n    (click)=\"overlayRef?.close()\">\n    <img class=\"ng-doc-scaled-image\" [src]=\"src()\" [alt]=\"alt()\" />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}:host[data-interactive=true]{cursor:zoom-in}:host{transition:var(--ng-doc-transition);border-radius:var(--ng-doc-radius-lg)}:host:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:host[data-opened=true]>::ng-deep img{opacity:0}:host>::ng-deep img{max-width:100%;vertical-align:middle;border-radius:var(--ng-doc-radius-lg);overflow:hidden}.ng-doc-image-container{display:block}.ng-doc-image-container .ng-doc-scaled-image{display:block;width:100%;height:100%;object-fit:contain;border-radius:var(--ng-doc-radius-lg);cursor:zoom-out}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], image: [{ type: i0.ViewChild, args: ['image', { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.