@ng-doc/ui-kit 22.0.0-beta.1 → 22.0.0

package/README.md

@@ -1,37 +1,28 @@
-<!-- PROJECT LOGO -->
-<br />
-<div align="center">
-  <a href="https://github.com/ng-doc/ng-doc">
-    <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px">
-  </a>
-
-<h1 align="center" style="margin-bottom: 0; border-bottom: 0">NgDoc</h1>
-  <p align="center">
-    Create user-friendly documentation for your projects with ease!
-    <br />
-    <a href="https://ng-doc.com/">Documentation</a>
-    ·
-    <a href="https://github.com/ng-doc/ng-doc/issues/new/choose">Report Bug</a>
-    ·
-    <a href="https://github.com/ng-doc/ng-doc/issues/new/choose">Request Feature</a>
-
-[![GitHub Workflow Status][build-shield]][build-url]
+# 🎨 @ng-doc/ui-kit
+
+The UI components (buttons, dropdowns, tabs and more) that NgDoc sites are built from.
+
+It's part of [NgDoc](https://ng-doc.com/) 📚, the documentation engine for Angular projects.
+
 [![NPM][npm-shield]][npm-url]
 [![MIT License][license-shield]][license-url]
 
-  </p>
-</div>
+## 🚀 Getting started
+
+You don't need to install this package by hand. Add NgDoc to your project and it sets up
+everything it needs:
 
-<!-- ABOUT THE PROJECT -->
+```bash
+ng add @ng-doc/add
+```
 
-## About The Project
+## 📖 Learn more
 
-This library is a part of NgDoc project, that uses to create documentation
-for Angular projects, please check our [repo](https://github.com/ng-doc/ng-doc) for more details.
+- [Documentation](https://ng-doc.com/)
+- [GitHub repository](https://github.com/ng-doc/ng-doc)
+- [Report a bug or request a feature](https://github.com/ng-doc/ng-doc/issues/new/choose)
 
-[npm-shield]: https://img.shields.io/npm/v/@ng-doc/builder.svg?style=for-the-badge
-[npm-url]: https://www.npmjs.com/package/@ng-doc/builder
+[npm-shield]: https://img.shields.io/npm/v/%40ng-doc%2Fui-kit.svg?style=for-the-badge
+[npm-url]: https://www.npmjs.com/package/@ng-doc/ui-kit
 [license-shield]: https://img.shields.io/github/license/ng-doc/ng-doc.svg?style=for-the-badge
-[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt
-[build-shield]: https://img.shields.io/github/actions/workflow/status/ng-doc/ng-doc/release.yml?style=for-the-badge&branch=release
-[build-url]: https://github.com/ng-doc/ng-doc/actions
+[license-url]: https://github.com/ng-doc/ng-doc/blob/main/LICENSE

package/fesm2022/ng-doc-ui-kit-cdk-combobox-host.mjs

@@ -1,14 +1,13 @@
 import * as i0 from '@angular/core';
-import { inject, NgZone, ElementRef, forwardRef, ContentChild, ViewChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { viewChild, ElementRef, contentChild, effect, untracked, forwardRef, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocBaseInput, NgDocOverlayHost, NgDocInputHost, NgDocDisplayValueHost, NgDocListHost } from '@ng-doc/ui-kit/classes';
 import { NgDocDropdownComponent } from '@ng-doc/ui-kit/components/dropdown';
 import { NgDocDropdownHandlerDirective } from '@ng-doc/ui-kit/directives/dropdown-handler';
 import { NgDocFocusCatcherDirective } from '@ng-doc/ui-kit/directives/focus-catcher';
-import { ngDocZoneOptimize } from '@ng-doc/ui-kit/observables';
 import { DIControl, DIStateControl, injectHostControl, DI_DEFAULT_COMPARE, provideHostControl, provideCompareHost } from 'di-controls';
 import { filter } from 'rxjs/operators';
 
+/** Connects a text field, a dropdown and a list into a combobox. */
 class NgDocComboboxHostComponent extends DIControl {
     constructor() {
         super({
@@ -19,15 +18,43 @@ class NgDocComboboxHostComponent extends DIControl {
                 }
             },
         });
+        // `compareFn` and `displayValueFn` stay plain inputs: `DICompareHost` and
+        // `NgDocDisplayValueHost` call them as functions.
+        /** Compares an option with the value. */
+        // eslint-disable-next-line @angular-eslint/prefer-signals -- read as a plain function by DICompareHost
         this.compareFn = DI_DEFAULT_COMPARE;
+        /** Turns the value into the text of the field. */
+        // eslint-disable-next-line @angular-eslint/prefer-signals -- read as a plain function by NgDocDisplayValueHost
         this.displayValueFn = String;
         this.positions = ['bottom-center', 'top-center'];
-        this.ngZone = inject(NgZone);
+        // Not `required`: overlay code may read the origin before this view has rendered.
+        this.originQuery = viewChild('origin', { ...(ngDevMode ? { debugName: "originQuery" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.dropdownQuery = contentChild(NgDocDropdownComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropdownQuery" }] : /* istanbul ignore next */ []));
+        this.inputQuery = contentChild(NgDocBaseInput, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputQuery" }] : /* istanbul ignore next */ []));
+        // Typing in the focused field opens the options.
+        effect((onCleanup) => {
+            const input = this.inputQuery();
+            if (input) {
+                const subscription = input.changes
+                    .pipe(filter(() => input.isFocused))
+                    .subscribe(() => untracked(() => this.dropdown?.open()));
+                onCleanup(() => subscription.unsubscribe());
+            }
+        });
+    }
+    /** Origin of the dropdown (`NgDocOverlayHost`). */
+    get origin() {
+        return this.originQuery();
+    }
+    /** The dropdown with the options. */
+    get dropdown() {
+        return this.dropdownQuery();
     }
-    ngAfterContentInit() {
-        this.inputControl?.changes
-            .pipe(filter(() => !!this.inputControl?.isFocused), ngDocZoneOptimize(this.ngZone), takeUntilDestroyed(this['destroyRef']))
-            .subscribe(() => this.dropdown?.open());
+    /** The text field of the combobox. */
+    get inputControl() {
+        return this.inputQuery();
     }
     get listHostOrigin() {
         return this.inputControl?.elementRef;
@@ -41,13 +68,14 @@ class NgDocComboboxHostComponent extends DIControl {
     get panelClass() {
         return `ng-doc-combobox-host-overlay`;
     }
+    /** Opens the dropdown when the field is clicked. */
     clickEvent() {
         if (!this.disabled) {
             this.dropdown?.open();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocComboboxHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgDocComboboxHostComponent, isStandalone: true, selector: "ng-doc-combobox-host", inputs: { compareFn: "compareFn", displayValueFn: "displayValueFn" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocComboboxHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.2.1", type: NgDocComboboxHostComponent, isStandalone: true, selector: "ng-doc-combobox-host", inputs: { compareFn: "compareFn", displayValueFn: "displayValueFn" }, providers: [
             provideHostControl(forwardRef(() => NgDocComboboxHostComponent)),
             provideCompareHost(forwardRef(() => NgDocComboboxHostComponent)),
             {
@@ -66,9 +94,9 @@ class NgDocComboboxHostComponent extends DIControl {
                 provide: NgDocListHost,
                 useExisting: forwardRef(() => NgDocComboboxHostComponent),
             },
-        ], queries: [{ propertyName: "dropdown", first: true, predicate: NgDocDropdownComponent, descendants: true }, { propertyName: "inputControl", first: true, predicate: NgDocBaseInput, descendants: true }], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<label\n\tclass=\"ng-doc-dropdown-host\"\n\tngDocFocusCatcher\n\t[ngDocDropdownHandler]=\"dropdown\"\n\t(click)=\"clickEvent()\"\n\t#origin>\n\t<ng-content></ng-content>\n</label>\n", styles: [":host{position:relative;display:block;width:100%}::ng-deep .ng-doc-combobox-host-overlay .ng-doc-overlay-content{display:block;max-height:300px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgDocFocusCatcherDirective, selector: "[ngDocFocusCatcher]", outputs: ["focusEvent", "blurEvent"], exportAs: ["ngDocFocusCatcher"] }, { kind: "directive", type: NgDocDropdownHandlerDirective, selector: "[ngDocDropdownHandler]", inputs: ["ngDocDropdownHandler"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "dropdownQuery", first: true, predicate: NgDocDropdownComponent, descendants: true, isSignal: true }, { propertyName: "inputQuery", first: true, predicate: NgDocBaseInput, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "originQuery", first: true, predicate: ["origin"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label\n\tclass=\"ng-doc-dropdown-host\"\n\tngDocFocusCatcher\n\t[ngDocDropdownHandler]=\"dropdown\"\n\t(click)=\"clickEvent()\"\n\t#origin>\n\t<ng-content></ng-content>\n</label>\n", styles: [":host{position:relative;display:block;width:100%}::ng-deep .ng-doc-combobox-host-overlay .ng-doc-overlay-content{display:block;max-height:300px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgDocFocusCatcherDirective, selector: "[ngDocFocusCatcher]", outputs: ["focusEvent", "blurEvent"], exportAs: ["ngDocFocusCatcher"] }, { kind: "directive", type: NgDocDropdownHandlerDirective, selector: "[ngDocDropdownHandler]", inputs: ["ngDocDropdownHandler"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocComboboxHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocComboboxHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-combobox-host', providers: [
                         provideHostControl(forwardRef(() => NgDocComboboxHostComponent)),
@@ -94,16 +122,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], displayValueFn: [{
                 type: Input
-            }], origin: [{
-                type: ViewChild,
-                args: ['origin', { read: ElementRef, static: true }]
-            }], dropdown: [{
-                type: ContentChild,
-                args: [NgDocDropdownComponent]
-            }], inputControl: [{
-                type: ContentChild,
-                args: [NgDocBaseInput]
-            }] } });
+            }], originQuery: [{ type: i0.ViewChild, args: ['origin', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], dropdownQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgDocDropdownComponent), { isSignal: true }] }], inputQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgDocBaseInput), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-cdk-combobox-host.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-cdk-combobox-host.mjs","sources":["../../../../libs/ui-kit/cdk/combobox-host/combobox-host.component.ts","../../../../libs/ui-kit/cdk/combobox-host/combobox-host.component.html","../../../../libs/ui-kit/cdk/combobox-host/ng-doc-ui-kit-cdk-combobox-host.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ElementRef,\n  forwardRef,\n  inject,\n  Input,\n  NgZone,\n  ViewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  NgDocBaseInput,\n  NgDocDisplayValueHost,\n  NgDocInputHost,\n  NgDocListHost,\n  NgDocOverlayHost,\n} from '@ng-doc/ui-kit/classes';\nimport { NgDocDropdownComponent } from '@ng-doc/ui-kit/components/dropdown';\nimport { NgDocDropdownHandlerDirective } from '@ng-doc/ui-kit/directives/dropdown-handler';\nimport { NgDocFocusCatcherDirective } from '@ng-doc/ui-kit/directives/focus-catcher';\nimport { ngDocZoneOptimize } from '@ng-doc/ui-kit/observables';\nimport { NgDocDisplayValueFunction, NgDocOverlayPosition } from '@ng-doc/ui-kit/types';\nimport {\n  DI_DEFAULT_COMPARE,\n  DICompareFunction,\n  DICompareHost,\n  DIControl,\n  DIStateControl,\n  injectHostControl,\n  provideCompareHost,\n  provideHostControl,\n} from 'di-controls';\nimport { filter } from 'rxjs/operators';\n\n@Component({\n  selector: 'ng-doc-combobox-host',\n  templateUrl: './combobox-host.component.html',\n  styleUrls: ['./combobox-host.component.scss'],\n  providers: [\n    provideHostControl(forwardRef(() => NgDocComboboxHostComponent)),\n    provideCompareHost(forwardRef(() => NgDocComboboxHostComponent)),\n    {\n      provide: NgDocOverlayHost,\n      useExisting: forwardRef(() => NgDocComboboxHostComponent),\n    },\n    {\n      provide: NgDocInputHost,\n      useExisting: forwardRef(() => NgDocComboboxHostComponent),\n    },\n    {\n      provide: NgDocDisplayValueHost,\n      useExisting: forwardRef(() => NgDocComboboxHostComponent),\n    },\n    {\n      provide: NgDocListHost,\n      useExisting: forwardRef(() => NgDocComboboxHostComponent),\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgDocFocusCatcherDirective, NgDocDropdownHandlerDirective],\n})\nexport class NgDocComboboxHostComponent<T>\n  extends DIControl<T>\n  implements\n    NgDocOverlayHost,\n    NgDocInputHost<string>,\n    DICompareHost<T>,\n    NgDocDisplayValueHost<T>,\n    NgDocListHost,\n    AfterContentInit\n{\n  @Input()\n  compareFn: DICompareFunction<T> = DI_DEFAULT_COMPARE;\n\n  @Input()\n  displayValueFn: NgDocDisplayValueFunction<T> = String;\n\n  @ViewChild('origin', { read: ElementRef, static: true })\n  origin?: ElementRef<HTMLElement>;\n\n  @ContentChild(NgDocDropdownComponent)\n  dropdown?: NgDocDropdownComponent;\n\n  @ContentChild(NgDocBaseInput)\n  inputControl?: NgDocBaseInput<string>;\n\n  readonly positions: NgDocOverlayPosition[] = ['bottom-center', 'top-center'];\n\n  protected readonly ngZone: NgZone = inject(NgZone);\n\n  constructor() {\n    super({\n      host: injectHostControl({ skipSelf: true, optional: true }),\n      onChildControlChange: (control) => {\n        if (control instanceof DIStateControl) {\n          this.dropdown?.close();\n        }\n      },\n    });\n  }\n\n  ngAfterContentInit(): void {\n    this.inputControl?.changes\n      .pipe(\n        filter(() => !!this.inputControl?.isFocused),\n        ngDocZoneOptimize(this.ngZone),\n        takeUntilDestroyed(this['destroyRef']),\n      )\n      .subscribe(() => this.dropdown?.open());\n  }\n\n  get listHostOrigin(): ElementRef<HTMLElement> | undefined {\n    return this.inputControl?.elementRef;\n  }\n\n  get searchText(): string {\n    return this.hasValue ? '' : this.inputControl?.value || '';\n  }\n\n  get width(): number {\n    return this.origin?.nativeElement.offsetWidth || 0;\n  }\n\n  get panelClass(): string {\n    return `ng-doc-combobox-host-overlay`;\n  }\n\n  clickEvent(): void {\n    if (!this.disabled) {\n      this.dropdown?.open();\n    }\n  }\n}\n","<label\n\tclass=\"ng-doc-dropdown-host\"\n\tngDocFocusCatcher\n\t[ngDocDropdownHandler]=\"dropdown\"\n\t(click)=\"clickEvent()\"\n\t#origin>\n\t<ng-content></ng-content>\n</label>\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-ui-kit-cdk-combobox-host.mjs","sources":["../../../../libs/ui-kit/cdk/combobox-host/combobox-host.component.ts","../../../../libs/ui-kit/cdk/combobox-host/combobox-host.component.html","../../../../libs/ui-kit/cdk/combobox-host/ng-doc-ui-kit-cdk-combobox-host.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  effect,\n  ElementRef,\n  forwardRef,\n  Input,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport {\n  NgDocBaseInput,\n  NgDocDisplayValueHost,\n  NgDocInputHost,\n  NgDocListHost,\n  NgDocOverlayHost,\n} from '@ng-doc/ui-kit/classes';\nimport { NgDocDropdownComponent } from '@ng-doc/ui-kit/components/dropdown';\nimport { NgDocDropdownHandlerDirective } from '@ng-doc/ui-kit/directives/dropdown-handler';\nimport { NgDocFocusCatcherDirective } from '@ng-doc/ui-kit/directives/focus-catcher';\nimport { NgDocDisplayValueFunction, NgDocOverlayPosition } from '@ng-doc/ui-kit/types';\nimport {\n  DI_DEFAULT_COMPARE,\n  DICompareFunction,\n  DICompareHost,\n  DIControl,\n  DIStateControl,\n  injectHostControl,\n  provideCompareHost,\n  provideHostControl,\n} from 'di-controls';\nimport { filter } from 'rxjs/operators';\n\n/** Connects a text field, a dropdown and a list into a combobox. */\n@Component({\n  selector: 'ng-doc-combobox-host',\n  templateUrl: './combobox-host.component.html',\n  styleUrls: ['./combobox-host.component.scss'],\n  providers: [\n    provideHostControl(forwardRef(() => NgDocComboboxHostComponent)),\n    provideCompareHost(forwardRef(() => NgDocComboboxHostComponent)),\n    {\n      provide: NgDocOverlayHost,\n      useExisting: forwardRef(() => NgDocComboboxHostComponent),\n    },\n    {\n      provide: NgDocInputHost,\n      useExisting: forwardRef(() => NgDocComboboxHostComponent),\n    },\n    {\n      provide: NgDocDisplayValueHost,\n      useExisting: forwardRef(() => NgDocComboboxHostComponent),\n    },\n    {\n      provide: NgDocListHost,\n      useExisting: forwardRef(() => NgDocComboboxHostComponent),\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgDocFocusCatcherDirective, NgDocDropdownHandlerDirective],\n})\nexport class NgDocComboboxHostComponent<T>\n  extends DIControl<T>\n  implements\n    NgDocOverlayHost,\n    NgDocInputHost<string>,\n    DICompareHost<T>,\n    NgDocDisplayValueHost<T>,\n    NgDocListHost\n{\n  // `compareFn` and `displayValueFn` stay plain inputs: `DICompareHost` and\n  // `NgDocDisplayValueHost` call them as functions.\n  /** Compares an option with the value. */\n  // eslint-disable-next-line @angular-eslint/prefer-signals -- read as a plain function by DICompareHost\n  @Input()\n  compareFn: DICompareFunction<T> = DI_DEFAULT_COMPARE;\n\n  /** Turns the value into the text of the field. */\n  // eslint-disable-next-line @angular-eslint/prefer-signals -- read as a plain function by NgDocDisplayValueHost\n  @Input()\n  displayValueFn: NgDocDisplayValueFunction<T> = String;\n\n  readonly positions: NgDocOverlayPosition[] = ['bottom-center', 'top-center'];\n\n  // Not `required`: overlay code may read the origin before this view has rendered.\n  private readonly originQuery = viewChild<string, ElementRef<HTMLElement>>('origin', {\n    read: ElementRef,\n  });\n  private readonly dropdownQuery = contentChild(NgDocDropdownComponent);\n  private readonly inputQuery = contentChild<NgDocBaseInput<string>>(NgDocBaseInput);\n\n  constructor() {\n    super({\n      host: injectHostControl({ skipSelf: true, optional: true }),\n      onChildControlChange: (control) => {\n        if (control instanceof DIStateControl) {\n          this.dropdown?.close();\n        }\n      },\n    });\n\n    // Typing in the focused field opens the options.\n    effect((onCleanup) => {\n      const input: NgDocBaseInput<string> | undefined = this.inputQuery();\n\n      if (input) {\n        const subscription = input.changes\n          .pipe(filter(() => input.isFocused))\n          .subscribe(() => untracked(() => this.dropdown?.open()));\n\n        onCleanup(() => subscription.unsubscribe());\n      }\n    });\n  }\n\n  /** Origin of the dropdown (`NgDocOverlayHost`). */\n  get origin(): ElementRef<HTMLElement> | undefined {\n    return this.originQuery();\n  }\n\n  /** The dropdown with the options. */\n  get dropdown(): NgDocDropdownComponent | undefined {\n    return this.dropdownQuery();\n  }\n\n  /** The text field of the combobox. */\n  get inputControl(): NgDocBaseInput<string> | undefined {\n    return this.inputQuery();\n  }\n\n  get listHostOrigin(): ElementRef<HTMLElement> | undefined {\n    return this.inputControl?.elementRef;\n  }\n\n  get searchText(): string {\n    return this.hasValue ? '' : this.inputControl?.value || '';\n  }\n\n  get width(): number {\n    return this.origin?.nativeElement.offsetWidth || 0;\n  }\n\n  get panelClass(): string {\n    return `ng-doc-combobox-host-overlay`;\n  }\n\n  /** Opens the dropdown when the field is clicked. */\n  clickEvent(): void {\n    if (!this.disabled) {\n      this.dropdown?.open();\n    }\n  }\n}\n","<label\n\tclass=\"ng-doc-dropdown-host\"\n\tngDocFocusCatcher\n\t[ngDocDropdownHandler]=\"dropdown\"\n\t(click)=\"clickEvent()\"\n\t#origin>\n\t<ng-content></ng-content>\n</label>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-doc-ui-kit-classes-base-input.mjs

@@ -1,8 +1,13 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, DOCUMENT, HostBinding, Directive } from '@angular/core';
+import { inject, ElementRef, DOCUMENT, Directive } from '@angular/core';
 import { DIControl, injectHostControl } from 'di-controls';
 import { Subject } from 'rxjs';
 
+/**
+ * Base class of the directives that turn a native `input` into a UI Kit control
+ * (`ngDocInputString`, `ngDocInputNumber`). Input wrappers and comboboxes query it to read the
+ * state of their input.
+ */
 class NgDocBaseInput extends DIControl {
     constructor(config) {
         super({
@@ -10,30 +15,34 @@ class NgDocBaseInput extends DIControl {
             ...config,
         });
         this.elementRef = inject(ElementRef);
+        /** Emits after the input updates its model from a user edit. */
         this.changes = new Subject();
         this.document = inject(DOCUMENT);
     }
-    get hostClasses() {
-        return 'ng-doc-input';
-    }
+    /** Placeholder of the native input. */
     get placeholder() {
         return this.elementRef.nativeElement.placeholder || '';
     }
+    /** Whether the native input has focus. */
     get isFocused() {
         return this.document.activeElement === this.elementRef.nativeElement;
     }
+    /** Whether the native input is read-only. */
     get isReadonly() {
         return this.elementRef.nativeElement.readOnly;
     }
+    /** Current text of the native input. */
     get value() {
         return this.elementRef.nativeElement.value;
     }
+    /** Focuses the native input. */
     focus() {
         this.elementRef.nativeElement.focus();
     }
+    /** Replays the `-blink` animation class on the native input. */
     blink() {
         this.renderer.removeClass(this.elementRef.nativeElement, '-blink');
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        // Reading the layout restarts the CSS animation when the class is added again.
         this.elementRef.nativeElement.offsetWidth;
         this.renderer.addClass(this.elementRef.nativeElement, '-blink');
     }
@@ -41,15 +50,17 @@ class NgDocBaseInput extends DIControl {
         super.updateModel(value);
         this.changes.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocBaseInput, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgDocBaseInput, isStandalone: true, host: { properties: { "class": "this.hostClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocBaseInput, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: NgDocBaseInput, isStandalone: true, host: { classAttribute: "ng-doc-input" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocBaseInput, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: undefined }], propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocBaseInput, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        class: 'ng-doc-input',
+                    },
+                }]
+        }], ctorParameters: () => [{ type: undefined }] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-classes-base-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-classes-base-input.mjs","sources":["../../../../libs/ui-kit/classes/base-input/base-input.ts","../../../../libs/ui-kit/classes/base-input/ng-doc-ui-kit-classes-base-input.ts"],"sourcesContent":["import { Directive, DOCUMENT, ElementRef, HostBinding, inject } from '@angular/core';\nimport { DIControl, injectHostControl } from 'di-controls';\nimport { DIControlConfig } from 'di-controls/controls';\nimport { Subject } from 'rxjs';\n\n@Directive()\nexport abstract class NgDocBaseInput<T> extends DIControl<T> {\n  override readonly elementRef: ElementRef<HTMLInputElement> = inject(ElementRef);\n  readonly changes: Subject<void> = new Subject();\n\n  protected readonly document = inject(DOCUMENT);\n\n  protected constructor(config?: DIControlConfig<T, T>) {\n    super({\n      host: injectHostControl({ optional: true }),\n      ...config,\n    });\n  }\n\n  @HostBinding('class')\n  get hostClasses(): string {\n    return 'ng-doc-input';\n  }\n\n  get placeholder(): string {\n    return this.elementRef.nativeElement.placeholder || '';\n  }\n\n  get isFocused(): boolean {\n    return this.document.activeElement === this.elementRef.nativeElement;\n  }\n\n  get isReadonly(): boolean {\n    return this.elementRef.nativeElement.readOnly;\n  }\n\n  get value(): string {\n    return this.elementRef.nativeElement.value;\n  }\n\n  focus(): void {\n    this.elementRef.nativeElement.focus();\n  }\n\n  blink(): void {\n    this.renderer.removeClass(this.elementRef.nativeElement, '-blink');\n    // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n    this.elementRef.nativeElement.offsetWidth;\n    this.renderer.addClass(this.elementRef.nativeElement, '-blink');\n  }\n\n  override updateModel(value: T | null) {\n    super.updateModel(value);\n\n    this.changes.next();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAMM,MAAgB,cAAkB,SAAQ,SAAY,CAAA;AAM1D,IAAA,WAAA,CAAsB,MAA8B,EAAA;AAClD,QAAA,KAAK,CAAC;YACJ,IAAI,EAAE,iBAAiB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAC3C,YAAA,GAAG,MAAM;AACV,SAAA,CAAC;AATc,QAAA,IAAA,CAAA,UAAU,GAAiC,MAAM,CAAC,UAAU,CAAC;AACtE,QAAA,IAAA,CAAA,OAAO,GAAkB,IAAI,OAAO,EAAE;AAE5B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;IAO9C;AAEA,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,cAAc;IACvB;AAEA,IAAA,IAAI,WAAW,GAAA;QACb,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,IAAI,EAAE;IACxD;AAEA,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,UAAU,CAAC,aAAa;IACtE;AAEA,IAAA,IAAI,UAAU,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ;IAC/C;AAEA,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK;IAC5C;IAEA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,EAAE;IACvC;IAEA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,QAAQ,CAAC;;AAElE,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW;AACzC,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,QAAQ,CAAC;IACjE;AAES,IAAA,WAAW,CAAC,KAAe,EAAA;AAClC,QAAA,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;AAExB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACrB;8GAjDoB,cAAc,EAAA,IAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBADnC;;sBAcE,WAAW;uBAAC,OAAO;;;ACnBtB;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-classes-base-input.mjs","sources":["../../../../libs/ui-kit/classes/base-input/base-input.ts","../../../../libs/ui-kit/classes/base-input/ng-doc-ui-kit-classes-base-input.ts"],"sourcesContent":["import { Directive, DOCUMENT, ElementRef, inject } from '@angular/core';\nimport { DIControl, injectHostControl } from 'di-controls';\nimport { DIControlConfig } from 'di-controls/controls';\nimport { Subject } from 'rxjs';\n\n/**\n * Base class of the directives that turn a native `input` into a UI Kit control\n * (`ngDocInputString`, `ngDocInputNumber`). Input wrappers and comboboxes query it to read the\n * state of their input.\n */\n@Directive({\n  host: {\n    class: 'ng-doc-input',\n  },\n})\nexport abstract class NgDocBaseInput<T> extends DIControl<T> {\n  override readonly elementRef: ElementRef<HTMLInputElement> = inject(ElementRef);\n\n  /** Emits after the input updates its model from a user edit. */\n  readonly changes: Subject<void> = new Subject();\n\n  protected readonly document = inject(DOCUMENT);\n\n  protected constructor(config?: DIControlConfig<T, T>) {\n    super({\n      host: injectHostControl({ optional: true }),\n      ...config,\n    });\n  }\n\n  /** Placeholder of the native input. */\n  get placeholder(): string {\n    return this.elementRef.nativeElement.placeholder || '';\n  }\n\n  /** Whether the native input has focus. */\n  get isFocused(): boolean {\n    return this.document.activeElement === this.elementRef.nativeElement;\n  }\n\n  /** Whether the native input is read-only. */\n  get isReadonly(): boolean {\n    return this.elementRef.nativeElement.readOnly;\n  }\n\n  /** Current text of the native input. */\n  get value(): string {\n    return this.elementRef.nativeElement.value;\n  }\n\n  /** Focuses the native input. */\n  focus(): void {\n    this.elementRef.nativeElement.focus();\n  }\n\n  /** Replays the `-blink` animation class on the native input. */\n  blink(): void {\n    this.renderer.removeClass(this.elementRef.nativeElement, '-blink');\n    // Reading the layout restarts the CSS animation when the class is added again.\n    this.elementRef.nativeElement.offsetWidth;\n    this.renderer.addClass(this.elementRef.nativeElement, '-blink');\n  }\n\n  override updateModel(value: T | null) {\n    super.updateModel(value);\n\n    this.changes.next();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAKA;;;;AAIG;AAMG,MAAgB,cAAkB,SAAQ,SAAY,CAAA;AAQ1D,IAAA,WAAA,CAAsB,MAA8B,EAAA;AAClD,QAAA,KAAK,CAAC;YACJ,IAAI,EAAE,iBAAiB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAC3C,YAAA,GAAG,MAAM;AACV,SAAA,CAAC;AAXc,QAAA,IAAA,CAAA,UAAU,GAAiC,MAAM,CAAC,UAAU,CAAC;;AAGtE,QAAA,IAAA,CAAA,OAAO,GAAkB,IAAI,OAAO,EAAE;AAE5B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;IAO9C;;AAGA,IAAA,IAAI,WAAW,GAAA;QACb,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,IAAI,EAAE;IACxD;;AAGA,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,UAAU,CAAC,aAAa;IACtE;;AAGA,IAAA,IAAI,UAAU,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ;IAC/C;;AAGA,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK;IAC5C;;IAGA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,EAAE;IACvC;;IAGA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,QAAQ,CAAC;;AAElE,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW;AACzC,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,QAAQ,CAAC;IACjE;AAES,IAAA,WAAW,CAAC,KAAe,EAAA;AAClC,QAAA,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;AAExB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACrB;8GApDoB,cAAc,EAAA,IAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,cAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBALnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,cAAc;AACtB,qBAAA;AACF,iBAAA;;;ACdD;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-classes-overlay-ref.mjs

@@ -1,33 +1,51 @@
 import { FlexibleConnectedPositionStrategy } from '@angular/cdk/overlay';
+import { NgZone, untracked, afterEveryRender } from '@angular/core';
 import { NavigationEnd } from '@angular/router';
 import { isPresent } from '@ng-doc/core';
 import { toElement } from '@ng-doc/ui-kit/helpers';
-import { ngDocZoneOptimize, fromSubscribe, ngDocZoneDetach } from '@ng-doc/ui-kit/observables';
-import { fromEvent, merge, NEVER } from 'rxjs';
-import { switchMap, filter, takeUntil, take, debounceTime, map, pairwise } from 'rxjs/operators';
+import { fromSubscribe } from '@ng-doc/ui-kit/observables';
+import { fromEvent, merge, NEVER, Subject } from 'rxjs';
+import { switchMap, filter, takeUntil, take, map, debounceTime, pairwise } from 'rxjs/operators';
 
+/**
+ * A handle to an opened overlay (a dropdown, a tooltip or a dialog).
+ *
+ * `NgDocOverlayService.open()` creates it, and the overlay content can inject it to close itself.
+ */
 class NgDocOverlayRef {
-    constructor(overlayRef, overlayConfig, overlayContainer, ngZone, router, location) {
+    /**
+     * @param overlayRef - The CDK overlay that hosts the container.
+     * @param overlayConfig - The configuration the overlay was opened with.
+     * @param overlayContainer - The container component rendered inside the overlay.
+     * @param injector - Injector the overlay uses to follow application renders. It must be able to
+     * inject NgZone; the component or environment injector of the opener is enough.
+     * @param router - Closes the overlay after a navigation when `disposeOnRouteNavigation` is set.
+     * @param location - Closes the overlay on a location change when `disposeOnNavigation` is set.
+     */
+    constructor(overlayRef, overlayConfig, overlayContainer, injector, router, location) {
         this.overlayRef = overlayRef;
         this.overlayConfig = overlayConfig;
         this.overlayContainer = overlayContainer;
-        this.ngZone = ngZone;
+        this.injector = injector;
         this.router = router;
         this.location = location;
         this.overlayResult = null;
         this.opened = true;
-        /* Closes overlay when it was outside click */
-        this.afterOpen()
-            .pipe(switchMap(() => this.ngZone.runOutsideAngular(() => this.overlayRef.outsidePointerEvents())), filter((event) => !!this.overlayConfig.closeIfOutsideClick && this.outsideClickChecker(event)), ngDocZoneOptimize(this.ngZone))
-            .subscribe(() => this.close());
-        /* Closes overlay when it was inner click */
-        fromEvent(this.overlayRef.overlayElement, 'click')
-            .pipe(filter(() => !!this.overlayConfig.closeIfInnerClick), takeUntil(this.overlayRef.detachments()), ngDocZoneOptimize(this.ngZone))
-            .subscribe(() => this.close());
-        /* Closes overlay if route was changed */
+        // The CDK dispatchers emit outside clicks and key presses inside the Angular zone, and a
+        // zoneless application needs no zone at all, so the streams below are subscribed directly.
+        if (this.overlayConfig.closeIfOutsideClick) {
+            this.afterOpen()
+                .pipe(switchMap(() => this.overlayRef.outsidePointerEvents()), filter((event) => this.outsideClickChecker(event)), takeUntil(this.overlayRef.detachments()))
+                .subscribe(() => this.close());
+        }
+        if (this.overlayConfig.closeIfInnerClick) {
+            fromEvent(this.overlayRef.overlayElement, 'click')
+                .pipe(takeUntil(this.overlayRef.detachments()))
+                .subscribe(() => this.close());
+        }
         if (this.router && this.overlayConfig.disposeOnRouteNavigation) {
             this.router.events
-                .pipe(filter((event) => event instanceof NavigationEnd), ngDocZoneOptimize(this.ngZone), takeUntil(this.overlayRef.detachments()))
+                .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this.overlayRef.detachments()))
                 .subscribe(() => this.close());
         }
         if (this.location && this.overlayConfig.disposeOnNavigation) {
@@ -40,14 +58,9 @@ class NgDocOverlayRef {
                 .pipe(take(1), takeUntil(this.overlayRef.detachments()))
                 .subscribe(() => this.close());
         }
-        /* Update position if origin changes its position */
         const origin = toElement(this.overlayConfig.origin);
         if (origin instanceof HTMLElement) {
-            this.ngZone.onStable
-                .pipe(debounceTime(10), map(() => origin.getBoundingClientRect()), pairwise(), filter(([a, b]) => isPresent(a) &&
-                isPresent(b) &&
-                (a.x !== b.x || a.y !== b.y || a.width !== b.width || a.height !== b.height)), ngDocZoneDetach(this.ngZone), takeUntil(this.overlayRef.detachments()))
-                .subscribe(() => this.overlayRef.updatePosition());
+            this.followOrigin(origin);
         }
     }
     /** Sets focus to overlay */
@@ -68,7 +81,7 @@ class NgDocOverlayRef {
     }
     /**
      * Closes overlay
-     * @param closeResult
+     * @param closeResult - The value `beforeClose()` and `afterClose()` emit.
      */
     close(closeResult) {
         this.overlayResult = isPresent(closeResult) ? closeResult : null;
@@ -94,6 +107,33 @@ class NgDocOverlayRef {
             ? this.overlayConfig.positionStrategy.positionChanges
             : NEVER;
     }
+    /**
+     * Repositions the overlay when its origin moves or resizes.
+     *
+     * The origin is measured after application renders rather than when the zone becomes stable,
+     * which never happens in a zoneless application. The debounce timer starts outside the Angular zone so that it
+     * does not trigger another change detection (and another render) in a zone.js application.
+     * @param origin - The element the overlay is connected to.
+     */
+    followOrigin(origin) {
+        const ngZone = this.injector.get(NgZone);
+        const renders = new Subject();
+        // `untracked` lets an overlay open from a reactive context (an effect, for example), where
+        // `afterEveryRender` refuses to register.
+        const afterRender = untracked(() => afterEveryRender(() => ngZone.runOutsideAngular(() => renders.next()), {
+            injector: this.injector,
+        }));
+        renders
+            .pipe(debounceTime(10), map(() => origin.getBoundingClientRect()), pairwise(), filter(([a, b]) => a.x !== b.x || a.y !== b.y || a.width !== b.width || a.height !== b.height), takeUntil(this.overlayRef.detachments()))
+            .subscribe(() => this.overlayRef.updatePosition());
+        this.overlayRef
+            .detachments()
+            .pipe(take(1))
+            .subscribe(() => {
+            afterRender.destroy();
+            renders.complete();
+        });
+    }
     outsideClickChecker(event) {
         const target = event.target;
         if (target instanceof Element) {

package/fesm2022/ng-doc-ui-kit-classes-overlay-ref.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-classes-overlay-ref.mjs","sources":["../../../../libs/ui-kit/classes/overlay-ref/overlay-ref.ts","../../../../libs/ui-kit/classes/overlay-ref/ng-doc-ui-kit-classes-overlay-ref.ts"],"sourcesContent":["import {\n  ConnectedOverlayPositionChange,\n  FlexibleConnectedPositionStrategy,\n  OverlayRef,\n} from '@angular/cdk/overlay';\nimport { Location } from '@angular/common';\nimport { NgZone } from '@angular/core';\nimport { Event, NavigationEnd, Router } from '@angular/router';\nimport { isPresent } from '@ng-doc/core';\nimport { toElement } from '@ng-doc/ui-kit/helpers';\nimport { NgDocOverlayConfig, NgDocOverlayContainer } from '@ng-doc/ui-kit/interfaces';\nimport { fromSubscribe, ngDocZoneDetach, ngDocZoneOptimize } from '@ng-doc/ui-kit/observables';\nimport { NgDocOverlayAnimationEvent } from '@ng-doc/ui-kit/types';\nimport { fromEvent, merge, NEVER, Observable } from 'rxjs';\nimport { debounceTime, filter, map, pairwise, switchMap, take, takeUntil } from 'rxjs/operators';\n\nexport class NgDocOverlayRef<T = unknown> {\n  private overlayResult: T | null = null;\n  private opened: boolean = true;\n\n  constructor(\n    readonly overlayRef: OverlayRef,\n    private readonly overlayConfig: NgDocOverlayConfig,\n    readonly overlayContainer: NgDocOverlayContainer,\n    private readonly ngZone: NgZone,\n    private readonly router?: Router,\n    private readonly location?: Location,\n  ) {\n    /* Closes overlay when it was outside click */\n    this.afterOpen()\n      .pipe(\n        switchMap(() =>\n          this.ngZone.runOutsideAngular(() => this.overlayRef.outsidePointerEvents()),\n        ),\n        filter(\n          (event: MouseEvent) =>\n            !!this.overlayConfig.closeIfOutsideClick && this.outsideClickChecker(event),\n        ),\n        ngDocZoneOptimize(this.ngZone),\n      )\n      .subscribe(() => this.close());\n\n    /* Closes overlay when it was inner click */\n    fromEvent(this.overlayRef.overlayElement, 'click')\n      .pipe(\n        filter(() => !!this.overlayConfig.closeIfInnerClick),\n        takeUntil(this.overlayRef.detachments()),\n        ngDocZoneOptimize(this.ngZone),\n      )\n      .subscribe(() => this.close());\n\n    /* Closes overlay if route was changed */\n    if (this.router && this.overlayConfig.disposeOnRouteNavigation) {\n      this.router.events\n        .pipe(\n          filter((event: Event) => event instanceof NavigationEnd),\n          ngDocZoneOptimize(this.ngZone),\n          takeUntil(this.overlayRef.detachments()),\n        )\n        .subscribe(() => this.close());\n    }\n\n    if (this.location && this.overlayConfig.disposeOnNavigation) {\n      fromSubscribe(this.location)\n        .pipe(takeUntil(this.overlayRef.detachments()))\n        .subscribe(() => this.close());\n    }\n\n    if (!this.overlayConfig.disableClose) {\n      merge(\n        this.overlayRef.backdropClick(),\n        this.overlayRef.keydownEvents().pipe(filter((e: KeyboardEvent) => e.code === 'Escape')),\n      )\n        .pipe(take(1), takeUntil(this.overlayRef.detachments()))\n        .subscribe(() => this.close());\n    }\n\n    /* Update position if origin changes its position */\n    const origin: unknown = toElement(this.overlayConfig.origin);\n\n    if (origin instanceof HTMLElement) {\n      this.ngZone.onStable\n        .pipe(\n          debounceTime(10),\n          map(() => origin.getBoundingClientRect()),\n          pairwise(),\n          filter(\n            ([a, b]: [DOMRect, DOMRect]) =>\n              isPresent(a) &&\n              isPresent(b) &&\n              (a.x !== b.x || a.y !== b.y || a.width !== b.width || a.height !== b.height),\n          ),\n          ngDocZoneDetach(this.ngZone),\n          takeUntil(this.overlayRef.detachments()),\n        )\n        .subscribe(() => this.overlayRef.updatePosition());\n    }\n  }\n\n  /** Sets focus to overlay */\n  focus(): void {\n    this.overlayContainer.focus();\n  }\n\n  /** Overlay has focus */\n  get isFocused(): boolean {\n    return this.overlayContainer.isFocused;\n  }\n\n  /** Overlay is opened */\n  get isOpened(): boolean {\n    return this.opened;\n  }\n\n  /** Overlay has attached */\n  get hasAttached(): boolean {\n    return this.overlayRef.hasAttached();\n  }\n\n  /**\n   * Closes overlay\n   * @param closeResult\n   */\n  close(closeResult?: T): void {\n    this.overlayResult = isPresent(closeResult) ? closeResult : null;\n    this.afterClose().subscribe(() => void this.overlayRef.detach());\n    this.overlayContainer.close();\n    this.overlayRef.detachBackdrop();\n    this.opened = false;\n  }\n\n  beforeOpen(): Observable<void> {\n    return this.overlayContainer.animationEvent.pipe(\n      filter((event: NgDocOverlayAnimationEvent) => event === 'beforeOpen'),\n      take(1),\n      map(() => void 0),\n    );\n  }\n\n  afterOpen(): Observable<void> {\n    return this.overlayContainer.animationEvent.pipe(\n      filter((event: NgDocOverlayAnimationEvent) => event === 'afterOpen'),\n      take(1),\n      map(() => void 0),\n    );\n  }\n\n  beforeClose(): Observable<T | null> {\n    return merge(\n      this.overlayContainer.animationEvent.pipe(\n        filter((event: NgDocOverlayAnimationEvent) => event === 'beforeClose'),\n      ),\n      this.overlayRef.detachments(),\n    ).pipe(\n      take(1),\n      map(() => this.overlayResult),\n    );\n  }\n\n  afterClose(): Observable<T | null> {\n    return merge(\n      this.overlayContainer.animationEvent.pipe(\n        filter((event: NgDocOverlayAnimationEvent) => event === 'afterClose'),\n      ),\n      this.overlayRef.detachments(),\n    ).pipe(\n      take(1),\n      map(() => this.overlayResult),\n    );\n  }\n\n  positionChanges(): Observable<ConnectedOverlayPositionChange> {\n    return this.overlayConfig.positionStrategy instanceof FlexibleConnectedPositionStrategy\n      ? this.overlayConfig.positionStrategy.positionChanges\n      : NEVER;\n  }\n\n  private outsideClickChecker(event: MouseEvent): boolean {\n    const target: EventTarget | null = event.target;\n    if (target instanceof Element) {\n      const origin: unknown = toElement(this.overlayConfig.origin);\n      if (origin instanceof HTMLElement) {\n        return !origin.contains(target);\n      }\n    }\n    return true;\n  }\n}\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-ui-kit-classes-overlay-ref.mjs","sources":["../../../../libs/ui-kit/classes/overlay-ref/overlay-ref.ts","../../../../libs/ui-kit/classes/overlay-ref/ng-doc-ui-kit-classes-overlay-ref.ts"],"sourcesContent":["import {\n  ConnectedOverlayPositionChange,\n  FlexibleConnectedPositionStrategy,\n  OverlayRef,\n} from '@angular/cdk/overlay';\nimport { Location } from '@angular/common';\nimport { afterEveryRender, AfterRenderRef, Injector, NgZone, untracked } from '@angular/core';\nimport { Event, NavigationEnd, Router } from '@angular/router';\nimport { isPresent } from '@ng-doc/core';\nimport { toElement } from '@ng-doc/ui-kit/helpers';\nimport { NgDocOverlayConfig, NgDocOverlayContainer } from '@ng-doc/ui-kit/interfaces';\nimport { fromSubscribe } from '@ng-doc/ui-kit/observables';\nimport { NgDocOverlayAnimationEvent } from '@ng-doc/ui-kit/types';\nimport { fromEvent, merge, NEVER, Observable, Subject } from 'rxjs';\nimport { debounceTime, filter, map, pairwise, switchMap, take, takeUntil } from 'rxjs/operators';\n\n/**\n * A handle to an opened overlay (a dropdown, a tooltip or a dialog).\n *\n * `NgDocOverlayService.open()` creates it, and the overlay content can inject it to close itself.\n */\nexport class NgDocOverlayRef<T = unknown> {\n  private overlayResult: T | null = null;\n  private opened: boolean = true;\n\n  /**\n   * @param overlayRef - The CDK overlay that hosts the container.\n   * @param overlayConfig - The configuration the overlay was opened with.\n   * @param overlayContainer - The container component rendered inside the overlay.\n   * @param injector - Injector the overlay uses to follow application renders. It must be able to\n   * inject NgZone; the component or environment injector of the opener is enough.\n   * @param router - Closes the overlay after a navigation when `disposeOnRouteNavigation` is set.\n   * @param location - Closes the overlay on a location change when `disposeOnNavigation` is set.\n   */\n  constructor(\n    readonly overlayRef: OverlayRef,\n    private readonly overlayConfig: NgDocOverlayConfig,\n    readonly overlayContainer: NgDocOverlayContainer,\n    private readonly injector: Injector,\n    private readonly router?: Router,\n    private readonly location?: Location,\n  ) {\n    // The CDK dispatchers emit outside clicks and key presses inside the Angular zone, and a\n    // zoneless application needs no zone at all, so the streams below are subscribed directly.\n    if (this.overlayConfig.closeIfOutsideClick) {\n      this.afterOpen()\n        .pipe(\n          switchMap(() => this.overlayRef.outsidePointerEvents()),\n          filter((event: MouseEvent) => this.outsideClickChecker(event)),\n          takeUntil(this.overlayRef.detachments()),\n        )\n        .subscribe(() => this.close());\n    }\n\n    if (this.overlayConfig.closeIfInnerClick) {\n      fromEvent(this.overlayRef.overlayElement, 'click')\n        .pipe(takeUntil(this.overlayRef.detachments()))\n        .subscribe(() => this.close());\n    }\n\n    if (this.router && this.overlayConfig.disposeOnRouteNavigation) {\n      this.router.events\n        .pipe(\n          filter((event: Event) => event instanceof NavigationEnd),\n          takeUntil(this.overlayRef.detachments()),\n        )\n        .subscribe(() => this.close());\n    }\n\n    if (this.location && this.overlayConfig.disposeOnNavigation) {\n      fromSubscribe(this.location)\n        .pipe(takeUntil(this.overlayRef.detachments()))\n        .subscribe(() => this.close());\n    }\n\n    if (!this.overlayConfig.disableClose) {\n      merge(\n        this.overlayRef.backdropClick(),\n        this.overlayRef.keydownEvents().pipe(filter((e: KeyboardEvent) => e.code === 'Escape')),\n      )\n        .pipe(take(1), takeUntil(this.overlayRef.detachments()))\n        .subscribe(() => this.close());\n    }\n\n    const origin: unknown = toElement(this.overlayConfig.origin);\n\n    if (origin instanceof HTMLElement) {\n      this.followOrigin(origin);\n    }\n  }\n\n  /** Sets focus to overlay */\n  focus(): void {\n    this.overlayContainer.focus();\n  }\n\n  /** Overlay has focus */\n  get isFocused(): boolean {\n    return this.overlayContainer.isFocused;\n  }\n\n  /** Overlay is opened */\n  get isOpened(): boolean {\n    return this.opened;\n  }\n\n  /** Overlay has attached */\n  get hasAttached(): boolean {\n    return this.overlayRef.hasAttached();\n  }\n\n  /**\n   * Closes overlay\n   * @param closeResult - The value `beforeClose()` and `afterClose()` emit.\n   */\n  close(closeResult?: T): void {\n    this.overlayResult = isPresent(closeResult) ? closeResult : null;\n    this.afterClose().subscribe(() => void this.overlayRef.detach());\n    this.overlayContainer.close();\n    this.overlayRef.detachBackdrop();\n    this.opened = false;\n  }\n\n  beforeOpen(): Observable<void> {\n    return this.overlayContainer.animationEvent.pipe(\n      filter((event: NgDocOverlayAnimationEvent) => event === 'beforeOpen'),\n      take(1),\n      map(() => void 0),\n    );\n  }\n\n  afterOpen(): Observable<void> {\n    return this.overlayContainer.animationEvent.pipe(\n      filter((event: NgDocOverlayAnimationEvent) => event === 'afterOpen'),\n      take(1),\n      map(() => void 0),\n    );\n  }\n\n  beforeClose(): Observable<T | null> {\n    return merge(\n      this.overlayContainer.animationEvent.pipe(\n        filter((event: NgDocOverlayAnimationEvent) => event === 'beforeClose'),\n      ),\n      this.overlayRef.detachments(),\n    ).pipe(\n      take(1),\n      map(() => this.overlayResult),\n    );\n  }\n\n  afterClose(): Observable<T | null> {\n    return merge(\n      this.overlayContainer.animationEvent.pipe(\n        filter((event: NgDocOverlayAnimationEvent) => event === 'afterClose'),\n      ),\n      this.overlayRef.detachments(),\n    ).pipe(\n      take(1),\n      map(() => this.overlayResult),\n    );\n  }\n\n  positionChanges(): Observable<ConnectedOverlayPositionChange> {\n    return this.overlayConfig.positionStrategy instanceof FlexibleConnectedPositionStrategy\n      ? this.overlayConfig.positionStrategy.positionChanges\n      : NEVER;\n  }\n\n  /**\n   * Repositions the overlay when its origin moves or resizes.\n   *\n   * The origin is measured after application renders rather than when the zone becomes stable,\n   * which never happens in a zoneless application. The debounce timer starts outside the Angular zone so that it\n   * does not trigger another change detection (and another render) in a zone.js application.\n   * @param origin - The element the overlay is connected to.\n   */\n  private followOrigin(origin: HTMLElement): void {\n    const ngZone: NgZone = this.injector.get(NgZone);\n    const renders: Subject<void> = new Subject<void>();\n    // `untracked` lets an overlay open from a reactive context (an effect, for example), where\n    // `afterEveryRender` refuses to register.\n    const afterRender: AfterRenderRef = untracked(() =>\n      afterEveryRender(() => ngZone.runOutsideAngular(() => renders.next()), {\n        injector: this.injector,\n      }),\n    );\n\n    renders\n      .pipe(\n        debounceTime(10),\n        map(() => origin.getBoundingClientRect()),\n        pairwise(),\n        filter(\n          ([a, b]: [DOMRect, DOMRect]) =>\n            a.x !== b.x || a.y !== b.y || a.width !== b.width || a.height !== b.height,\n        ),\n        takeUntil(this.overlayRef.detachments()),\n      )\n      .subscribe(() => this.overlayRef.updatePosition());\n\n    this.overlayRef\n      .detachments()\n      .pipe(take(1))\n      .subscribe(() => {\n        afterRender.destroy();\n        renders.complete();\n      });\n  }\n\n  private outsideClickChecker(event: MouseEvent): boolean {\n    const target: EventTarget | null = event.target;\n    if (target instanceof Element) {\n      const origin: unknown = toElement(this.overlayConfig.origin);\n      if (origin instanceof HTMLElement) {\n        return !origin.contains(target);\n      }\n    }\n    return true;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAgBA;;;;AAIG;MACU,eAAe,CAAA;AAI1B;;;;;;;;AAQG;IACH,WAAA,CACW,UAAsB,EACd,aAAiC,EACzC,gBAAuC,EAC/B,QAAkB,EAClB,MAAe,EACf,QAAmB,EAAA;QAL3B,IAAA,CAAA,UAAU,GAAV,UAAU;QACF,IAAA,CAAA,aAAa,GAAb,aAAa;QACrB,IAAA,CAAA,gBAAgB,GAAhB,gBAAgB;QACR,IAAA,CAAA,QAAQ,GAAR,QAAQ;QACR,IAAA,CAAA,MAAM,GAAN,MAAM;QACN,IAAA,CAAA,QAAQ,GAAR,QAAQ;QAlBnB,IAAA,CAAA,aAAa,GAAa,IAAI;QAC9B,IAAA,CAAA,MAAM,GAAY,IAAI;;;AAqB5B,QAAA,IAAI,IAAI,CAAC,aAAa,CAAC,mBAAmB,EAAE;YAC1C,IAAI,CAAC,SAAS;AACX,iBAAA,IAAI,CACH,SAAS,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,oBAAoB,EAAE,CAAC,EACvD,MAAM,CAAC,CAAC,KAAiB,KAAK,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,EAC9D,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;iBAEzC,SAAS,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;QAClC;AAEA,QAAA,IAAI,IAAI,CAAC,aAAa,CAAC,iBAAiB,EAAE;YACxC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,OAAO;iBAC9C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;iBAC7C,SAAS,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;QAClC;QAEA,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,CAAC,wBAAwB,EAAE;YAC9D,IAAI,CAAC,MAAM,CAAC;iBACT,IAAI,CACH,MAAM,CAAC,CAAC,KAAY,KAAK,KAAK,YAAY,aAAa,CAAC,EACxD,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;iBAEzC,SAAS,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;QAClC;QAEA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,CAAC,mBAAmB,EAAE;AAC3D,YAAA,aAAa,CAAC,IAAI,CAAC,QAAQ;iBACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;iBAC7C,SAAS,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;QAClC;AAEA,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE;AACpC,YAAA,KAAK,CACH,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,EAC/B,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAgB,KAAK,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC;AAEtF,iBAAA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;iBACtD,SAAS,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;QAClC;QAEA,MAAM,MAAM,GAAY,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;AAE5D,QAAA,IAAI,MAAM,YAAY,WAAW,EAAE;AACjC,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QAC3B;IACF;;IAGA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;IAC/B;;AAGA,IAAA,IAAI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,SAAS;IACxC;;AAGA,IAAA,IAAI,QAAQ,GAAA;QACV,OAAO,IAAI,CAAC,MAAM;IACpB;;AAGA,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE;IACtC;AAEA;;;AAGG;AACH,IAAA,KAAK,CAAC,WAAe,EAAA;AACnB,QAAA,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG,WAAW,GAAG,IAAI;AAChE,QAAA,IAAI,CAAC,UAAU,EAAE,CAAC,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AAChE,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE;AAChC,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;IACrB;IAEA,UAAU,GAAA;AACR,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,IAAI,CAC9C,MAAM,CAAC,CAAC,KAAiC,KAAK,KAAK,KAAK,YAAY,CAAC,EACrE,IAAI,CAAC,CAAC,CAAC,EACP,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC,CAClB;IACH;IAEA,SAAS,GAAA;AACP,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,IAAI,CAC9C,MAAM,CAAC,CAAC,KAAiC,KAAK,KAAK,KAAK,WAAW,CAAC,EACpE,IAAI,CAAC,CAAC,CAAC,EACP,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC,CAClB;IACH;IAEA,WAAW,GAAA;QACT,OAAO,KAAK,CACV,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,IAAI,CACvC,MAAM,CAAC,CAAC,KAAiC,KAAK,KAAK,KAAK,aAAa,CAAC,CACvE,EACD,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAC9B,CAAC,IAAI,CACJ,IAAI,CAAC,CAAC,CAAC,EACP,GAAG,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,CAC9B;IACH;IAEA,UAAU,GAAA;QACR,OAAO,KAAK,CACV,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,IAAI,CACvC,MAAM,CAAC,CAAC,KAAiC,KAAK,KAAK,KAAK,YAAY,CAAC,CACtE,EACD,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAC9B,CAAC,IAAI,CACJ,IAAI,CAAC,CAAC,CAAC,EACP,GAAG,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,CAC9B;IACH;IAEA,eAAe,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,aAAa,CAAC,gBAAgB,YAAY;AACpD,cAAE,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC;cACpC,KAAK;IACX;AAEA;;;;;;;AAOG;AACK,IAAA,YAAY,CAAC,MAAmB,EAAA;QACtC,MAAM,MAAM,GAAW,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC;AAChD,QAAA,MAAM,OAAO,GAAkB,IAAI,OAAO,EAAQ;;;QAGlD,MAAM,WAAW,GAAmB,SAAS,CAAC,MAC5C,gBAAgB,CAAC,MAAM,MAAM,CAAC,iBAAiB,CAAC,MAAM,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE;YACrE,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC,CACH;QAED;AACG,aAAA,IAAI,CACH,YAAY,CAAC,EAAE,CAAC,EAChB,GAAG,CAAC,MAAM,MAAM,CAAC,qBAAqB,EAAE,CAAC,EACzC,QAAQ,EAAE,EACV,MAAM,CACJ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAqB,KACzB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM,CAC7E,EACD,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;aAEzC,SAAS,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC;AAEpD,QAAA,IAAI,CAAC;AACF,aAAA,WAAW;AACX,aAAA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;aACZ,SAAS,CAAC,MAAK;YACd,WAAW,CAAC,OAAO,EAAE;YACrB,OAAO,CAAC,QAAQ,EAAE;AACpB,QAAA,CAAC,CAAC;IACN;AAEQ,IAAA,mBAAmB,CAAC,KAAiB,EAAA;AAC3C,QAAA,MAAM,MAAM,GAAuB,KAAK,CAAC,MAAM;AAC/C,QAAA,IAAI,MAAM,YAAY,OAAO,EAAE;YAC7B,MAAM,MAAM,GAAY,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;AAC5D,YAAA,IAAI,MAAM,YAAY,WAAW,EAAE;AACjC,gBAAA,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;YACjC;QACF;AACA,QAAA,OAAO,IAAI;IACb;AACD;;AC5ND;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-components-blockquote.mjs

@@ -1,25 +1,50 @@
 import * as i0 from '@angular/core';
-import { Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';
 
+/** The icon and the title each built-in callout type shows. */
+const BLOCKQUOTE_PRESETS = {
+    note: { icon: 'info', label: 'Note' },
+    warning: { icon: 'alert-triangle', label: 'Warning' },
+    alert: { icon: 'alert-circle', label: 'Alert' },
+    success: { icon: 'check', label: 'Success' },
+};
+/**
+ * A callout. A Markdown blockquote whose first word is a bold type name, such as Note, renders
+ * as this component.
+ *
+ * The `note`, `warning`, `alert` and `success` types show their icon and their name as a title
+ * ("Note", "Warning", ...). A callout with a custom `icon` shows no type title, only its `label`
+ * when it has one. The `default` type has neither an icon nor a title.
+ */
 class NgDocBlockquoteComponent {
     constructor() {
-        this.type = 'default';
+        /** Callout type; it selects the colour, the icon and the title. */
+        this.type = input('default', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /** Name of an icon that replaces the type's icon; the type title is not shown then. */
+        this.icon = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** A title that replaces the type title, for example "Deprecated". */
+        this.label = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** The icon that is shown, if any. */
+        this.iconName = computed(() => this.icon() || BLOCKQUOTE_PRESETS[this.type()]?.icon, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+        /** The title that is shown, if any. */
+        this.title = computed(() => this.label() || (this.icon() ? undefined : BLOCKQUOTE_PRESETS[this.type()]?.label), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocBlockquoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocBlockquoteComponent, isStandalone: true, selector: "blockquote[ng-doc-blockquote]", inputs: { type: "type", icon: "icon" }, host: { properties: { "attr.data-ng-doc-type": "this.type" } }, ngImport: i0, template: "@if (type !== 'default') {\n  <div class=\"ng-doc-blockquote-icon\">\n    @if (icon) {\n      <ng-doc-icon [icon]=\"icon\" size=\"24\"></ng-doc-icon>\n    } @else {\n      @switch (type) {\n        @case ('note') {\n          <ng-doc-icon icon=\"info\" size=\"24\"></ng-doc-icon>\n        }\n        @case ('warning') {\n          <ng-doc-icon icon=\"alert-triangle\" size=\"24\"></ng-doc-icon>\n        }\n        @case ('success') {\n          <ng-doc-icon icon=\"check\" size=\"24\"></ng-doc-icon>\n        }\n        @case ('alert') {\n          <ng-doc-icon icon=\"alert-circle\" size=\"24\"></ng-doc-icon>\n        }\n      }\n    }\n  </div>\n}\n<div class=\"ng-doc-blockquote\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:flex;padding:calc(var(--ng-doc-base-gutter) * 2);border-radius:var(--ng-doc-base-gutter);margin:var(--ng-doc-blockquote-margin);background:color-mix(in srgb,var(--ng-doc-blockquote-background, var(--ng-doc-base-9)),transparent 90%);border:1px solid color-mix(in srgb,var(--ng-doc-blockquote-border-color, var(--ng-doc-base-9)),transparent 80%);overflow:hidden;--ng-doc-code-margin: var(--ng-doc-base-gutter) 0}:host[data-ng-doc-type=note]{--ng-doc-blockquote-background: var(--ng-doc-info);--ng-doc-blockquote-border-color: var(--ng-doc-info);--ng-doc-icon-color: var(--ng-doc-info)}:host[data-ng-doc-type=warning]{--ng-doc-blockquote-background: var(--ng-doc-warning);--ng-doc-blockquote-border-color: var(--ng-doc-warning);--ng-doc-icon-color: var(--ng-doc-warning)}:host[data-ng-doc-type=alert]{--ng-doc-blockquote-background: var(--ng-doc-alert);--ng-doc-blockquote-border-color: var(--ng-doc-alert);--ng-doc-icon-color: var(--ng-doc-alert)}:host[data-ng-doc-type=success]{--ng-doc-blockquote-background: var(--ng-doc-success);--ng-doc-blockquote-border-color: var(--ng-doc-success);--ng-doc-icon-color: var(--ng-doc-success)}:host .ng-doc-blockquote-icon{display:flex;margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-blockquote{text-decoration:none}:host ::ng-deep p{margin:0}\n"], dependencies: [{ kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocBlockquoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocBlockquoteComponent, isStandalone: true, selector: "blockquote[ng-doc-blockquote]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-type": "type()", "attr.data-ng-doc-has-icon": "iconName() ? \"\" : null" } }, ngImport: i0, template: "@if (iconName(); as iconName) {\n  <div class=\"ng-doc-blockquote-icon\" aria-hidden=\"true\">\n    <ng-doc-icon [icon]=\"iconName\" size=\"24\"></ng-doc-icon>\n  </div>\n}\n<div class=\"ng-doc-blockquote\">\n  @if (title(); as title) {\n    <span class=\"ng-doc-blockquote-title\">{{ title }}</span>\n  }\n  <ng-content></ng-content>\n</div>\n", styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--ng-doc-space-3);padding:var(--ng-doc-space-3) var(--ng-doc-space-4);border-radius:var(--ng-doc-radius-lg);margin:var(--ng-doc-blockquote-margin);background:color-mix(in oklab,var(--ng-doc-blockquote-background, var(--ng-doc-hue-neutral)) var(--ng-doc-mix-soft),var(--ng-doc-background));border:1px solid color-mix(in oklab,var(--ng-doc-blockquote-border-color, var(--ng-doc-hue-neutral)) var(--ng-doc-mix-border),var(--ng-doc-background));overflow:hidden;--ng-doc-code-margin: var(--ng-doc-base-gutter) 0}:host[data-ng-doc-has-icon]{grid-template-columns:20px minmax(0,1fr)}:host[data-ng-doc-type=note]{--ng-doc-blockquote-background: var(--ng-doc-info);--ng-doc-blockquote-border-color: var(--ng-doc-info);--ng-doc-icon-color: var(--ng-doc-info)}:host[data-ng-doc-type=warning]{--ng-doc-blockquote-background: var(--ng-doc-warning);--ng-doc-blockquote-border-color: var(--ng-doc-warning);--ng-doc-icon-color: var(--ng-doc-warning)}:host[data-ng-doc-type=alert]{--ng-doc-blockquote-background: var(--ng-doc-alert);--ng-doc-blockquote-border-color: var(--ng-doc-alert);--ng-doc-icon-color: var(--ng-doc-alert)}:host[data-ng-doc-type=success]{--ng-doc-blockquote-background: var(--ng-doc-success);--ng-doc-blockquote-border-color: var(--ng-doc-success);--ng-doc-icon-color: var(--ng-doc-success)}:host .ng-doc-blockquote-icon{display:flex;padding-top:3px}:host .ng-doc-blockquote-icon ng-doc-icon{width:18px;height:18px}:host .ng-doc-blockquote-icon ::ng-deep svg{width:100%;height:100%}:host .ng-doc-blockquote{min-width:0;text-decoration:none}:host .ng-doc-blockquote-title{display:block;font-weight:600;color:color-mix(in oklab,var(--ng-doc-blockquote-border-color, var(--ng-doc-hue-neutral)) var(--ng-doc-mix-strong),var(--ng-doc-heading-color))}:host ::ng-deep code.ng-doc-code-with-link a{color:color-mix(in oklab,var(--ng-doc-link-color) var(--ng-doc-mix-syntax, 80%),var(--ng-doc-heading-color))}:host ::ng-deep p{margin:0}\n"], dependencies: [{ kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocBlockquoteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocBlockquoteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'blockquote[ng-doc-blockquote]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocIconComponent], template: "@if (type !== 'default') {\n  <div class=\"ng-doc-blockquote-icon\">\n    @if (icon) {\n      <ng-doc-icon [icon]=\"icon\" size=\"24\"></ng-doc-icon>\n    } @else {\n      @switch (type) {\n        @case ('note') {\n          <ng-doc-icon icon=\"info\" size=\"24\"></ng-doc-icon>\n        }\n        @case ('warning') {\n          <ng-doc-icon icon=\"alert-triangle\" size=\"24\"></ng-doc-icon>\n        }\n        @case ('success') {\n          <ng-doc-icon icon=\"check\" size=\"24\"></ng-doc-icon>\n        }\n        @case ('alert') {\n          <ng-doc-icon icon=\"alert-circle\" size=\"24\"></ng-doc-icon>\n        }\n      }\n    }\n  </div>\n}\n<div class=\"ng-doc-blockquote\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:flex;padding:calc(var(--ng-doc-base-gutter) * 2);border-radius:var(--ng-doc-base-gutter);margin:var(--ng-doc-blockquote-margin);background:color-mix(in srgb,var(--ng-doc-blockquote-background, var(--ng-doc-base-9)),transparent 90%);border:1px solid color-mix(in srgb,var(--ng-doc-blockquote-border-color, var(--ng-doc-base-9)),transparent 80%);overflow:hidden;--ng-doc-code-margin: var(--ng-doc-base-gutter) 0}:host[data-ng-doc-type=note]{--ng-doc-blockquote-background: var(--ng-doc-info);--ng-doc-blockquote-border-color: var(--ng-doc-info);--ng-doc-icon-color: var(--ng-doc-info)}:host[data-ng-doc-type=warning]{--ng-doc-blockquote-background: var(--ng-doc-warning);--ng-doc-blockquote-border-color: var(--ng-doc-warning);--ng-doc-icon-color: var(--ng-doc-warning)}:host[data-ng-doc-type=alert]{--ng-doc-blockquote-background: var(--ng-doc-alert);--ng-doc-blockquote-border-color: var(--ng-doc-alert);--ng-doc-icon-color: var(--ng-doc-alert)}:host[data-ng-doc-type=success]{--ng-doc-blockquote-background: var(--ng-doc-success);--ng-doc-blockquote-border-color: var(--ng-doc-success);--ng-doc-icon-color: var(--ng-doc-success)}:host .ng-doc-blockquote-icon{display:flex;margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-blockquote{text-decoration:none}:host ::ng-deep p{margin:0}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-type']
-            }], icon: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'blockquote[ng-doc-blockquote]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocIconComponent], host: {
+                        '[attr.data-ng-doc-type]': 'type()',
+                        '[attr.data-ng-doc-has-icon]': 'iconName() ? "" : null',
+                    }, template: "@if (iconName(); as iconName) {\n  <div class=\"ng-doc-blockquote-icon\" aria-hidden=\"true\">\n    <ng-doc-icon [icon]=\"iconName\" size=\"24\"></ng-doc-icon>\n  </div>\n}\n<div class=\"ng-doc-blockquote\">\n  @if (title(); as title) {\n    <span class=\"ng-doc-blockquote-title\">{{ title }}</span>\n  }\n  <ng-content></ng-content>\n</div>\n", styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--ng-doc-space-3);padding:var(--ng-doc-space-3) var(--ng-doc-space-4);border-radius:var(--ng-doc-radius-lg);margin:var(--ng-doc-blockquote-margin);background:color-mix(in oklab,var(--ng-doc-blockquote-background, var(--ng-doc-hue-neutral)) var(--ng-doc-mix-soft),var(--ng-doc-background));border:1px solid color-mix(in oklab,var(--ng-doc-blockquote-border-color, var(--ng-doc-hue-neutral)) var(--ng-doc-mix-border),var(--ng-doc-background));overflow:hidden;--ng-doc-code-margin: var(--ng-doc-base-gutter) 0}:host[data-ng-doc-has-icon]{grid-template-columns:20px minmax(0,1fr)}:host[data-ng-doc-type=note]{--ng-doc-blockquote-background: var(--ng-doc-info);--ng-doc-blockquote-border-color: var(--ng-doc-info);--ng-doc-icon-color: var(--ng-doc-info)}:host[data-ng-doc-type=warning]{--ng-doc-blockquote-background: var(--ng-doc-warning);--ng-doc-blockquote-border-color: var(--ng-doc-warning);--ng-doc-icon-color: var(--ng-doc-warning)}:host[data-ng-doc-type=alert]{--ng-doc-blockquote-background: var(--ng-doc-alert);--ng-doc-blockquote-border-color: var(--ng-doc-alert);--ng-doc-icon-color: var(--ng-doc-alert)}:host[data-ng-doc-type=success]{--ng-doc-blockquote-background: var(--ng-doc-success);--ng-doc-blockquote-border-color: var(--ng-doc-success);--ng-doc-icon-color: var(--ng-doc-success)}:host .ng-doc-blockquote-icon{display:flex;padding-top:3px}:host .ng-doc-blockquote-icon ng-doc-icon{width:18px;height:18px}:host .ng-doc-blockquote-icon ::ng-deep svg{width:100%;height:100%}:host .ng-doc-blockquote{min-width:0;text-decoration:none}:host .ng-doc-blockquote-title{display:block;font-weight:600;color:color-mix(in oklab,var(--ng-doc-blockquote-border-color, var(--ng-doc-hue-neutral)) var(--ng-doc-mix-strong),var(--ng-doc-heading-color))}:host ::ng-deep code.ng-doc-code-with-link a{color:color-mix(in oklab,var(--ng-doc-link-color) var(--ng-doc-mix-syntax, 80%),var(--ng-doc-heading-color))}:host ::ng-deep p{margin:0}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.