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

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

@@ -1,118 +1,215 @@
 import * as i0 from '@angular/core';
-import { Directive, inject, ElementRef, DestroyRef, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { distinctUntilChanged, debounceTime } from 'rxjs/operators';
-import { ReplaySubject } from 'rxjs';
+import { signal, untracked, Directive, inject, ElementRef, DestroyRef, input, afterRenderEffect, afterNextRender, ChangeDetectionStrategy, Component, effect } from '@angular/core';
 
+/**
+ * Tracks which of its `ngDocSelectionOrigin` elements is selected, so that an
+ * `ng-doc-selection` inside it can highlight that element.
+ */
 class NgDocSelectionHostDirective {
     constructor() {
-        this.origins = new Set();
-        this.selectedChange = new ReplaySubject();
-    }
-    get selectedChange$() {
-        return this.selectedChange.pipe(distinctUntilChanged());
-    }
-    addOrigin(origin) {
-        this.origins.add(origin);
-    }
-    removeOrigin(origin) {
-        this.origins.delete(origin);
-        if (this.selected === origin) {
-            this.changeSelected(origin, false);
-        }
+        this.selectedElement = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedElement" }] : /* istanbul ignore next */ []));
+        /** Element of the selected origin, or `undefined` when none is selected. */
+        this.selected = this.selectedElement.asReadonly();
     }
+    /**
+     * Updates the selection after an origin changed its state or went away.
+     * @param origin - The origin whose state changed.
+     * @param selected - Whether the origin is selected now.
+     */
     changeSelected(origin, selected) {
-        this.selected =
-            this.selected === origin || selected ? (selected ? origin : undefined) : this.selected;
-        this.selectedChange.next(this.selected?.elementRef?.nativeElement ?? undefined);
+        // Origins call this from their effects: reading the current selection must not subscribe
+        // them to it.
+        untracked(() => {
+            const element = origin.elementRef.nativeElement;
+            if (selected) {
+                this.selectedElement.set(element);
+            }
+            else if (this.selectedElement() === element) {
+                this.selectedElement.set(undefined);
+            }
+        });
+    }
+    /**
+     * Selects an element that cannot carry `ngDocSelectionOrigin`, because Angular does not render
+     * it: for example a tab in the HTML of a generated page.
+     * @param element - The element to highlight, or `undefined` to highlight none.
+     */
+    select(element) {
+        this.selectedElement.set(element);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSelectionHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NgDocSelectionHostDirective, isStandalone: true, selector: "[ngDocSelectionHost]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSelectionHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: NgDocSelectionHostDirective, isStandalone: true, selector: "[ngDocSelectionHost]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSelectionHostDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSelectionHostDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngDocSelectionHost]',
-                    standalone: true,
                 }]
         }] });
 
+/**
+ * Highlight that slides to the selected `ngDocSelectionOrigin` of the closest
+ * `ngDocSelectionHost`, for example the underline of the active tab or the thumb of a segmented
+ * control. It covers the selected element and moves with a transform.
+ *
+ * The highlight is measured in the browser only. Until it is placed it is hidden and has no
+ * `data-ng-doc-placed` attribute, so the selected element can style itself in the server-rendered
+ * page, for example with `ng-doc-selection:not([data-ng-doc-placed]) ~ .selected`. The first
+ * placement never animates, and nothing animates when the reader prefers reduced motion.
+ */
 class NgDocSelectionComponent {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.selectionHost = inject(NgDocSelectionHostDirective);
-        this.align = 'bottom';
         this.destroyRef = inject(DestroyRef);
+        // Changes when the selected element or the container resizes, to measure again.
+        this.resized = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resized" }] : /* istanbul ignore next */ []));
+        this.destroyed = false;
+        // Counts the first placements, so a transition scheduled for an earlier one is dropped.
+        this.placements = 0;
+        /**
+         * Side of the selected element on which the highlight draws its border, or `null` for no
+         * border (a thumb that covers the element, styled by its container).
+         */
+        this.align = input('bottom', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        // Runs after the render in which the selection changed. Every highlight on the page measures
+        // in the read phase and moves in the write phase, so the layout is computed once for all of
+        // them. Nothing runs during server rendering, where nothing can be measured.
+        afterRenderEffect({
+            earlyRead: () => {
+                this.resized();
+                const element = this.selectionHost.selected();
+                return {
+                    element,
+                    box: element?.offsetWidth
+                        ? {
+                            left: element.offsetLeft || 0,
+                            top: element.offsetTop || 0,
+                            width: element.offsetWidth,
+                            height: element.offsetHeight || 0,
+                        }
+                        : null,
+                };
+            },
+            write: (measured) => {
+                const { element, box } = measured();
+                this.observe(element);
+                this.place(box);
+            },
+        });
+        // The selected element can change its size without a new selection: when web fonts load,
+        // when the container resizes, or when a hidden container (a collapsed pane) is shown.
+        afterNextRender(() => {
+            const view = this.elementRef.nativeElement.ownerDocument.defaultView;
+            if (view?.ResizeObserver) {
+                this.resizeObserver = new view.ResizeObserver(() => this.resized.update((value) => value + 1));
+                const container = this.elementRef.nativeElement.parentElement;
+                if (container) {
+                    this.resizeObserver.observe(container);
+                }
+                this.observe(this.selectionHost.selected());
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            this.destroyed = true;
+            this.resizeObserver?.disconnect();
+        });
     }
-    ngAfterViewInit() {
-        this.selectionHost.selectedChange$
-            .pipe(debounceTime(0), takeUntilDestroyed(this.destroyRef))
-            .subscribe((selected) => this.setStyles(selected));
-    }
-    setStyles(element) {
-        this.elementRef.nativeElement.style.visibility = 'hidden';
-        if (element) {
-            const position = this.getPosition(element);
-            if (this.align === 'left' || this.align === 'right') {
-                this.elementRef.nativeElement.style.top = position.top;
+    observe(element) {
+        if (this.resizeObserver && element !== this.observed) {
+            if (this.observed) {
+                this.resizeObserver.unobserve(this.observed);
             }
-            else {
-                this.elementRef.nativeElement.style.left = position.left;
+            if (element) {
+                this.resizeObserver.observe(element);
             }
-            this.elementRef.nativeElement.style.height = position.height;
-            this.elementRef.nativeElement.style.width = position.width;
-            this.elementRef.nativeElement.style.visibility = 'visible';
+            this.observed = element;
+        }
+    }
+    place(box) {
+        const host = this.elementRef.nativeElement;
+        const style = host.style;
+        // An element without a box (none selected, not rendered yet, or inside a hidden container)
+        // cannot be measured. The highlight hides and is placed without animation once the element
+        // has a box, instead of sliding in from a stale position.
+        if (!box) {
+            this.placements++;
+            style.visibility = 'hidden';
+            host.removeAttribute('data-ng-doc-placed');
+            host.removeAttribute('data-ng-doc-animated');
+            return;
+        }
+        // Width and height animate with the transform: scaling instead would distort the rounded
+        // corners, the shadow and the border of the highlight. The highlight is absolutely positioned
+        // and has no content, so resizing it lays out nothing else.
+        style.transform = `translate(${box.left}px, ${box.top}px)`;
+        style.width = `${box.width}px`;
+        style.height = `${box.height}px`;
+        style.visibility = 'visible';
+        if (!host.hasAttribute('data-ng-doc-placed')) {
+            host.setAttribute('data-ng-doc-placed', '');
+            this.enableTransition();
         }
     }
-    getPosition(element) {
-        return {
-            top: element ? `${element.offsetTop || 0}px` : '0',
-            left: element ? `${element.offsetLeft || 0}px` : '0',
-            width: element ? `${element.offsetWidth || 0}px` : '0',
-            height: element ? `${element.offsetHeight || 0}px` : '0',
+    /**
+     * Turns the transition on once the first position has been painted. Turning it on in the same
+     * frame would animate the highlight from the corner of its container; reading the style to
+     * commit the position instead would force a layout for every highlight on the page.
+     */
+    enableTransition() {
+        const host = this.elementRef.nativeElement;
+        const view = host.ownerDocument.defaultView;
+        const placement = ++this.placements;
+        const enable = () => {
+            if (!this.destroyed && placement === this.placements) {
+                host.setAttribute('data-ng-doc-animated', '');
+            }
         };
+        if (view?.requestAnimationFrame) {
+            // The first frame paints the position, the second one may animate from it.
+            view.requestAnimationFrame(() => view.requestAnimationFrame(enable));
+        }
+        else {
+            enable();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocSelectionComponent, isStandalone: true, selector: "ng-doc-selection", inputs: { align: "align" }, host: { properties: { "attr.data-ng-doc-align": "this.align" } }, ngImport: i0, template: '', isInline: true, styles: [":host{position:absolute;transition:var(--ng-doc-transition);pointer-events:none;background:var(--ng-doc-selection-background)}:host[data-ng-doc-align=left]{left:0;border-left:var(--ng-doc-selection-border)}:host[data-ng-doc-align=right]{right:0;border-right:var(--ng-doc-selection-border)}:host[data-ng-doc-align=bottom]{bottom:0;border-bottom:var(--ng-doc-selection-border)}:host[data-ng-doc-align=top]{top:0;border-top:var(--ng-doc-selection-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: NgDocSelectionComponent, isStandalone: true, selector: "ng-doc-selection", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-ng-doc-align": "align()" } }, ngImport: i0, template: '', isInline: true, styles: [":host{position:absolute;top:0;left:0;box-sizing:border-box;visibility:hidden;pointer-events:none;background:var(--ng-doc-selection-background)}:host[data-ng-doc-animated]{transition-property:transform,width,height;transition-duration:var(--ng-doc-transition);transition-timing-function:cubic-bezier(.2,0,0,1)}:host[data-ng-doc-align=left]{border-left:var(--ng-doc-selection-border)}:host[data-ng-doc-align=right]{border-right:var(--ng-doc-selection-border)}:host[data-ng-doc-align=bottom]{border-bottom:var(--ng-doc-selection-border)}:host[data-ng-doc-align=top]{border-top:var(--ng-doc-selection-border)}@media(prefers-reduced-motion:reduce){:host[data-ng-doc-animated]{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-selection', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{position:absolute;transition:var(--ng-doc-transition);pointer-events:none;background:var(--ng-doc-selection-background)}:host[data-ng-doc-align=left]{left:0;border-left:var(--ng-doc-selection-border)}:host[data-ng-doc-align=right]{right:0;border-right:var(--ng-doc-selection-border)}:host[data-ng-doc-align=bottom]{bottom:0;border-bottom:var(--ng-doc-selection-border)}:host[data-ng-doc-align=top]{top:0;border-top:var(--ng-doc-selection-border)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { align: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-align']
-            }] } });
+            args: [{ selector: 'ng-doc-selection', template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'aria-hidden': 'true',
+                        '[attr.data-ng-doc-align]': 'align()',
+                    }, styles: [":host{position:absolute;top:0;left:0;box-sizing:border-box;visibility:hidden;pointer-events:none;background:var(--ng-doc-selection-background)}:host[data-ng-doc-animated]{transition-property:transform,width,height;transition-duration:var(--ng-doc-transition);transition-timing-function:cubic-bezier(.2,0,0,1)}:host[data-ng-doc-align=left]{border-left:var(--ng-doc-selection-border)}:host[data-ng-doc-align=right]{border-right:var(--ng-doc-selection-border)}:host[data-ng-doc-align=bottom]{border-bottom:var(--ng-doc-selection-border)}:host[data-ng-doc-align=top]{border-top:var(--ng-doc-selection-border)}@media(prefers-reduced-motion:reduce){:host[data-ng-doc-animated]{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
 
+/**
+ * Element that the `ng-doc-selection` of the closest `ngDocSelectionHost` highlights while
+ * `ngDocSelectionOrigin` is `true`.
+ */
 class NgDocSelectionOriginDirective {
     constructor() {
+        /** The host element. */
         this.elementRef = inject(ElementRef);
         this.selectionHost = inject(NgDocSelectionHostDirective);
-        this.selected = false;
-        this.selectionHost.addOrigin(this);
-    }
-    ngOnChanges({ selected }) {
-        if (selected) {
-            this.selectionHost.changeSelected(this, this.selected);
-        }
-    }
-    ngOnDestroy() {
-        this.selectionHost.removeOrigin(this);
+        /** Whether the element is selected. */
+        this.selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), alias: 'ngDocSelectionOrigin' });
+        effect(() => this.selectionHost.changeSelected(this, this.selected()));
+        inject(DestroyRef).onDestroy(() => this.selectionHost.changeSelected(this, false));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSelectionOriginDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NgDocSelectionOriginDirective, isStandalone: true, selector: "[ngDocSelectionOrigin]", inputs: { selected: ["ngDocSelectionOrigin", "selected"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSelectionOriginDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.1", type: NgDocSelectionOriginDirective, isStandalone: true, selector: "[ngDocSelectionOrigin]", inputs: { selected: { classPropertyName: "selected", publicName: "ngDocSelectionOrigin", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSelectionOriginDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSelectionOriginDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngDocSelectionOrigin]',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [], propDecorators: { selected: [{
-                type: Input,
-                args: ['ngDocSelectionOrigin']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngDocSelectionOrigin", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-components-selection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-components-selection.mjs","sources":["../../../../libs/ui-kit/components/selection/selection-host.directive.ts","../../../../libs/ui-kit/components/selection/selection.component.ts","../../../../libs/ui-kit/components/selection/selection-origin.directive.ts","../../../../libs/ui-kit/components/selection/ng-doc-ui-kit-components-selection.ts"],"sourcesContent":["import { Directive } from '@angular/core';\nimport { Observable, ReplaySubject } from 'rxjs';\nimport { distinctUntilChanged } from 'rxjs/operators';\n\nimport { NgDocSelectionOriginDirective } from './selection-origin.directive';\n\n@Directive({\n\tselector: '[ngDocSelectionHost]',\n\tstandalone: true,\n})\nexport class NgDocSelectionHostDirective {\n\tprivate origins: Set<NgDocSelectionOriginDirective> = new Set<NgDocSelectionOriginDirective>();\n\tprivate selected?: NgDocSelectionOriginDirective;\n\tprivate selectedChange: ReplaySubject<HTMLElement | undefined> = new ReplaySubject<\n\t\tHTMLElement | undefined\n\t>();\n\n\tget selectedChange$(): Observable<HTMLElement | undefined> {\n\t\treturn this.selectedChange.pipe(distinctUntilChanged());\n\t}\n\n\taddOrigin(origin: NgDocSelectionOriginDirective): void {\n\t\tthis.origins.add(origin);\n\t}\n\n\tremoveOrigin(origin: NgDocSelectionOriginDirective): void {\n\t\tthis.origins.delete(origin);\n\n\t\tif (this.selected === origin) {\n\t\t\tthis.changeSelected(origin, false);\n\t\t}\n\t}\n\n\tchangeSelected(origin: NgDocSelectionOriginDirective, selected: boolean): void {\n\t\tthis.selected =\n\t\t\tthis.selected === origin || selected ? (selected ? origin : undefined) : this.selected;\n\t\tthis.selectedChange.next(this.selected?.elementRef?.nativeElement ?? undefined);\n\t}\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  HostBinding,\n  inject,\n  Input,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgDocHorizontalAlign, NgDocPosition, NgDocVerticalAlign } from '@ng-doc/ui-kit/types';\nimport { debounceTime } from 'rxjs/operators';\n\nimport { NgDocSelectionHostDirective } from './selection-host.directive';\n\n@Component({\n  selector: 'ng-doc-selection',\n  template: '',\n  styleUrls: ['./selection.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class NgDocSelectionComponent implements AfterViewInit {\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly selectionHost = inject(NgDocSelectionHostDirective);\n\n  @Input()\n  @HostBinding('attr.data-ng-doc-align')\n  align: NgDocHorizontalAlign | NgDocVerticalAlign = 'bottom';\n\n  private readonly destroyRef = inject(DestroyRef);\n\n  constructor() {}\n\n  ngAfterViewInit(): void {\n    this.selectionHost.selectedChange$\n      .pipe(debounceTime(0), takeUntilDestroyed(this.destroyRef))\n      .subscribe((selected: HTMLElement | undefined) => this.setStyles(selected));\n  }\n\n  private setStyles(element?: HTMLElement): void {\n    this.elementRef.nativeElement.style.visibility = 'hidden';\n    if (element) {\n      const position: NgDocPosition = this.getPosition(element);\n\n      if (this.align === 'left' || this.align === 'right') {\n        this.elementRef.nativeElement.style.top = position.top;\n      } else {\n        this.elementRef.nativeElement.style.left = position.left;\n      }\n\n      this.elementRef.nativeElement.style.height = position.height;\n      this.elementRef.nativeElement.style.width = position.width;\n      this.elementRef.nativeElement.style.visibility = 'visible';\n    }\n  }\n\n  private getPosition(element: HTMLElement): NgDocPosition {\n    return {\n      top: element ? `${element.offsetTop || 0}px` : '0',\n      left: element ? `${element.offsetLeft || 0}px` : '0',\n      width: element ? `${element.offsetWidth || 0}px` : '0',\n      height: element ? `${element.offsetHeight || 0}px` : '0',\n    };\n  }\n}\n","import {\n  Directive,\n  ElementRef,\n  inject,\n  Input,\n  OnChanges,\n  OnDestroy,\n  SimpleChanges,\n} from '@angular/core';\n\nimport { NgDocSelectionHostDirective } from './selection-host.directive';\n\n@Directive({\n  selector: '[ngDocSelectionOrigin]',\n  standalone: true,\n})\nexport class NgDocSelectionOriginDirective implements OnChanges, OnDestroy {\n  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly selectionHost = inject(NgDocSelectionHostDirective);\n\n  @Input('ngDocSelectionOrigin')\n  selected: boolean = false;\n\n  /** Inserted by Angular inject() migration for backwards compatibility */\n  constructor(...args: unknown[]);\n\n  constructor() {\n    this.selectionHost.addOrigin(this);\n  }\n\n  ngOnChanges({ selected }: SimpleChanges): void {\n    if (selected) {\n      this.selectionHost.changeSelected(this, this.selected);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.selectionHost.removeOrigin(this);\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-components-selection.mjs","sources":["../../../../libs/ui-kit/components/selection/selection-host.directive.ts","../../../../libs/ui-kit/components/selection/selection.component.ts","../../../../libs/ui-kit/components/selection/selection-origin.directive.ts","../../../../libs/ui-kit/components/selection/ng-doc-ui-kit-components-selection.ts"],"sourcesContent":["import { Directive, Signal, signal, untracked } from '@angular/core';\n\nimport type { NgDocSelectionOriginDirective } from './selection-origin.directive';\n\n/**\n * Tracks which of its `ngDocSelectionOrigin` elements is selected, so that an\n * `ng-doc-selection` inside it can highlight that element.\n */\n@Directive({\n  selector: '[ngDocSelectionHost]',\n})\nexport class NgDocSelectionHostDirective {\n  private readonly selectedElement = signal<HTMLElement | undefined>(undefined);\n\n  /** Element of the selected origin, or `undefined` when none is selected. */\n  readonly selected: Signal<HTMLElement | undefined> = this.selectedElement.asReadonly();\n\n  /**\n   * Updates the selection after an origin changed its state or went away.\n   * @param origin - The origin whose state changed.\n   * @param selected - Whether the origin is selected now.\n   */\n  changeSelected(origin: NgDocSelectionOriginDirective, selected: boolean): void {\n    // Origins call this from their effects: reading the current selection must not subscribe\n    // them to it.\n    untracked(() => {\n      const element: HTMLElement = origin.elementRef.nativeElement;\n\n      if (selected) {\n        this.selectedElement.set(element);\n      } else if (this.selectedElement() === element) {\n        this.selectedElement.set(undefined);\n      }\n    });\n  }\n\n  /**\n   * Selects an element that cannot carry `ngDocSelectionOrigin`, because Angular does not render\n   * it: for example a tab in the HTML of a generated page.\n   * @param element - The element to highlight, or `undefined` to highlight none.\n   */\n  select(element: HTMLElement | undefined): void {\n    this.selectedElement.set(element);\n  }\n}\n","import {\n  afterNextRender,\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport { NgDocHorizontalAlign, NgDocVerticalAlign } from '@ng-doc/ui-kit/types';\n\nimport { NgDocSelectionHostDirective } from './selection-host.directive';\n\n/** The box of the selected element, relative to its offset parent. */\ninterface SelectionBox {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Highlight that slides to the selected `ngDocSelectionOrigin` of the closest\n * `ngDocSelectionHost`, for example the underline of the active tab or the thumb of a segmented\n * control. It covers the selected element and moves with a transform.\n *\n * The highlight is measured in the browser only. Until it is placed it is hidden and has no\n * `data-ng-doc-placed` attribute, so the selected element can style itself in the server-rendered\n * page, for example with `ng-doc-selection:not([data-ng-doc-placed]) ~ .selected`. The first\n * placement never animates, and nothing animates when the reader prefers reduced motion.\n */\n@Component({\n  selector: 'ng-doc-selection',\n  template: '',\n  styleUrls: ['./selection.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'aria-hidden': 'true',\n    '[attr.data-ng-doc-align]': 'align()',\n  },\n})\nexport class NgDocSelectionComponent {\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly selectionHost = inject(NgDocSelectionHostDirective);\n  private readonly destroyRef = inject(DestroyRef);\n  // Changes when the selected element or the container resizes, to measure again.\n  private readonly resized = signal(0);\n  private resizeObserver?: ResizeObserver;\n  private observed?: HTMLElement;\n  private destroyed: boolean = false;\n  // Counts the first placements, so a transition scheduled for an earlier one is dropped.\n  private placements: number = 0;\n\n  /**\n   * Side of the selected element on which the highlight draws its border, or `null` for no\n   * border (a thumb that covers the element, styled by its container).\n   */\n  readonly align = input<NgDocHorizontalAlign | NgDocVerticalAlign | null>('bottom');\n\n  constructor() {\n    // Runs after the render in which the selection changed. Every highlight on the page measures\n    // in the read phase and moves in the write phase, so the layout is computed once for all of\n    // them. Nothing runs during server rendering, where nothing can be measured.\n    afterRenderEffect({\n      earlyRead: () => {\n        this.resized();\n\n        const element: HTMLElement | undefined = this.selectionHost.selected();\n\n        return {\n          element,\n          box: element?.offsetWidth\n            ? {\n                left: element.offsetLeft || 0,\n                top: element.offsetTop || 0,\n                width: element.offsetWidth,\n                height: element.offsetHeight || 0,\n              }\n            : null,\n        };\n      },\n      write: (measured) => {\n        const { element, box } = measured();\n\n        this.observe(element);\n        this.place(box);\n      },\n    });\n\n    // The selected element can change its size without a new selection: when web fonts load,\n    // when the container resizes, or when a hidden container (a collapsed pane) is shown.\n    afterNextRender(() => {\n      const view: (Window & typeof globalThis) | null =\n        this.elementRef.nativeElement.ownerDocument.defaultView;\n\n      if (view?.ResizeObserver) {\n        this.resizeObserver = new view.ResizeObserver(() =>\n          this.resized.update((value: number) => value + 1),\n        );\n\n        const container: HTMLElement | null = this.elementRef.nativeElement.parentElement;\n\n        if (container) {\n          this.resizeObserver.observe(container);\n        }\n\n        this.observe(this.selectionHost.selected());\n      }\n    });\n\n    this.destroyRef.onDestroy(() => {\n      this.destroyed = true;\n      this.resizeObserver?.disconnect();\n    });\n  }\n\n  private observe(element?: HTMLElement): void {\n    if (this.resizeObserver && element !== this.observed) {\n      if (this.observed) {\n        this.resizeObserver.unobserve(this.observed);\n      }\n\n      if (element) {\n        this.resizeObserver.observe(element);\n      }\n\n      this.observed = element;\n    }\n  }\n\n  private place(box: SelectionBox | null): void {\n    const host: HTMLElement = this.elementRef.nativeElement;\n    const style: CSSStyleDeclaration = host.style;\n\n    // An element without a box (none selected, not rendered yet, or inside a hidden container)\n    // cannot be measured. The highlight hides and is placed without animation once the element\n    // has a box, instead of sliding in from a stale position.\n    if (!box) {\n      this.placements++;\n      style.visibility = 'hidden';\n      host.removeAttribute('data-ng-doc-placed');\n      host.removeAttribute('data-ng-doc-animated');\n\n      return;\n    }\n\n    // Width and height animate with the transform: scaling instead would distort the rounded\n    // corners, the shadow and the border of the highlight. The highlight is absolutely positioned\n    // and has no content, so resizing it lays out nothing else.\n    style.transform = `translate(${box.left}px, ${box.top}px)`;\n    style.width = `${box.width}px`;\n    style.height = `${box.height}px`;\n    style.visibility = 'visible';\n\n    if (!host.hasAttribute('data-ng-doc-placed')) {\n      host.setAttribute('data-ng-doc-placed', '');\n      this.enableTransition();\n    }\n  }\n\n  /**\n   * Turns the transition on once the first position has been painted. Turning it on in the same\n   * frame would animate the highlight from the corner of its container; reading the style to\n   * commit the position instead would force a layout for every highlight on the page.\n   */\n  private enableTransition(): void {\n    const host: HTMLElement = this.elementRef.nativeElement;\n    const view: (Window & typeof globalThis) | null = host.ownerDocument.defaultView;\n    const placement: number = ++this.placements;\n    const enable = (): void => {\n      if (!this.destroyed && placement === this.placements) {\n        host.setAttribute('data-ng-doc-animated', '');\n      }\n    };\n\n    if (view?.requestAnimationFrame) {\n      // The first frame paints the position, the second one may animate from it.\n      view.requestAnimationFrame(() => view.requestAnimationFrame(enable));\n    } else {\n      enable();\n    }\n  }\n}\n","import { DestroyRef, Directive, effect, ElementRef, inject, input } from '@angular/core';\n\nimport { NgDocSelectionHostDirective } from './selection-host.directive';\n\n/**\n * Element that the `ng-doc-selection` of the closest `ngDocSelectionHost` highlights while\n * `ngDocSelectionOrigin` is `true`.\n */\n@Directive({\n  selector: '[ngDocSelectionOrigin]',\n})\nexport class NgDocSelectionOriginDirective {\n  /** The host element. */\n  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly selectionHost = inject(NgDocSelectionHostDirective);\n\n  /** Whether the element is selected. */\n  readonly selected = input<boolean>(false, { alias: 'ngDocSelectionOrigin' });\n\n  constructor() {\n    effect(() => this.selectionHost.changeSelected(this, this.selected()));\n\n    inject(DestroyRef).onDestroy(() => this.selectionHost.changeSelected(this, false));\n  }\n}\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-components-sidenav.mjs

@@ -1,44 +1,45 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, output, ChangeDetectionStrategy, Component } from '@angular/core';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
 
+/**
+ * Layout with a side panel next to the projected content.
+ *
+ * At 900px and below the side panel becomes an overlay that slides in from the left; `opened`
+ * shows it and `closeEvent` asks the owner to hide it. The panel has the id `ng-doc-sidenav`, so a
+ * toggle button can point `aria-controls` at it.
+ */
 class NgDocSidenavComponent {
     constructor() {
         /**
          * Content of the sidenav.
          */
-        this.sidebar = '';
+        this.sidebar = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []));
         /**
          * Indicates whether the sidenav is opened or not.
          * This is used to trigger the animation.
          */
-        this.opened = true;
+        this.opened = input(true, { ...(ngDevMode ? { debugName: "opened" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Indicates whether the sidenav has a backdrop or not.
          */
-        this.hasBackdrop = true;
-        this.closeEvent = new EventEmitter();
+        this.hasBackdrop = input(true, { ...(ngDevMode ? { debugName: "hasBackdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Emits when the backdrop is clicked, so the owner can close the sidenav.
+         */
+        this.closeEvent = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocSidenavComponent, isStandalone: true, selector: "ng-doc-sidenav", inputs: { sidebar: "sidebar", opened: "opened", hasBackdrop: "hasBackdrop" }, outputs: { closeEvent: "closeEvent" }, host: { properties: { "attr.data-ng-doc-sidebar": "!!sidebar", "attr.data-ng-doc-opened": "this.opened" } }, ngImport: i0, template: "<div class=\"ng-doc-sidenav-wrapper\">\n  <div class=\"ng-doc-sidenav\">\n    <ng-container *polymorpheusOutlet=\"sidebar\"></ng-container>\n  </div>\n  <div class=\"ng-doc-sidenav-content\">\n    @if (opened && hasBackdrop) {\n      <div class=\"ng-doc-backdrop\" animate.enter=\"backdrop-enter\" (click)=\"closeEvent.emit()\"></div>\n    }\n\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{width:100%}:host[data-ng-doc-sidebar=false] .ng-doc-sidenav-content{margin-left:0;width:100%}:host .ng-doc-sidenav-wrapper{position:relative;display:flex;width:100%}:host .ng-doc-sidenav{position:fixed;top:var(--ng-doc-navbar-height);width:var(--ng-doc-sidenav-width);flex-shrink:0;z-index:10;transition:left var(--ng-doc-transition)}:host .ng-doc-sidenav-content{margin-left:var(--ng-doc-sidenav-width);width:calc(100% - var(--ng-doc-sidenav-width));padding:var(--ng-doc-sidenav-content-padding);transition:margin-left var(--ng-doc-transition)}:host .ng-doc-backdrop:not(nothing){background:color-mix(in srgb,rgba(0,0,0,.2) 60%,transparent);backdrop-filter:blur(20px)}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host .ng-doc-backdrop{background-color:#0003}}:host .ng-doc-backdropnothing{background-color:#0003}:host .ng-doc-backdrop{position:fixed!important;left:0;top:0;width:100%;height:100%;z-index:9}@media(max-width:1024px){:host[data-ng-doc-opened=true] .ng-doc-sidenav{right:0;transition:right var(--ng-doc-transition);--ng-doc-sidebar-shadow: var(--ng-doc-shadow-color) -5px 5px 20px -5px}:host .ng-doc-sidenav{transition:unset;left:unset;right:calc(var(--ng-doc-sidenav-width) * -1);top:var(--ng-doc-navbar-height)}:host .ng-doc-sidenav-content{margin-left:0;width:100%}}:host .backdrop-enter{animation:ng-doc-backdrop-fade-in var(--ng-doc-transition) forwards}@keyframes ng-doc-backdrop-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocSidenavComponent, isStandalone: true, selector: "ng-doc-sidenav", inputs: { sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent" }, host: { properties: { "attr.data-ng-doc-sidebar": "!!sidebar()", "attr.data-ng-doc-opened": "opened()" } }, ngImport: i0, template: "<div class=\"ng-doc-sidenav-wrapper\">\n  <div class=\"ng-doc-sidenav\" id=\"ng-doc-sidenav\">\n    <ng-container *polymorpheusOutlet=\"sidebar()\"></ng-container>\n  </div>\n  <div class=\"ng-doc-sidenav-content\">\n    @if (opened() && hasBackdrop()) {\n      <div class=\"ng-doc-backdrop\" animate.enter=\"backdrop-enter\" (click)=\"closeEvent.emit()\"></div>\n    }\n\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{width:100%}:host[data-ng-doc-sidebar=false] .ng-doc-sidenav-content{margin-left:0;width:100%}:host .ng-doc-sidenav-wrapper{position:relative;display:flex;width:100%}:host .ng-doc-sidenav{position:fixed;top:var(--ng-doc-navbar-height);width:var(--ng-doc-sidenav-width);flex-shrink:0;z-index:10;transition:left var(--ng-doc-transition)}:host .ng-doc-sidenav-content{margin-left:var(--ng-doc-sidenav-width);width:calc(100% - var(--ng-doc-sidenav-width));padding:var(--ng-doc-sidenav-content-padding);transition:margin-left var(--ng-doc-transition)}:host .ng-doc-backdrop:not(nothing){background:color-mix(in srgb,rgba(0,0,0,.2) 60%,transparent);backdrop-filter:blur(20px)}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host .ng-doc-backdrop{background-color:#0003}}:host .ng-doc-backdropnothing{background-color:#0003}:host .ng-doc-backdrop{position:fixed!important;left:0;top:0;width:100%;height:100%;z-index:9}@media(max-width:900px){:host .ng-doc-sidenav{left:calc(var(--ng-doc-sidenav-width) * -1);max-width:100%;visibility:hidden;transition:left var(--ng-doc-transition),visibility var(--ng-doc-transition)}:host[data-ng-doc-opened=true] .ng-doc-sidenav{left:0;visibility:visible;--ng-doc-sidebar-shadow: var(--ng-doc-shadow-lg)}:host .ng-doc-sidenav-content{margin-left:0;width:100%}}@media(prefers-reduced-motion:reduce){:host .ng-doc-sidenav,:host .ng-doc-sidenav-content{transition:none}}:host .backdrop-enter{animation:ng-doc-backdrop-fade-in var(--ng-doc-transition) forwards}@keyframes ng-doc-backdrop-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSidenavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PolymorpheusOutlet], host: {
-                        '[attr.data-ng-doc-sidebar]': '!!sidebar',
-                    }, template: "<div class=\"ng-doc-sidenav-wrapper\">\n  <div class=\"ng-doc-sidenav\">\n    <ng-container *polymorpheusOutlet=\"sidebar\"></ng-container>\n  </div>\n  <div class=\"ng-doc-sidenav-content\">\n    @if (opened && hasBackdrop) {\n      <div class=\"ng-doc-backdrop\" animate.enter=\"backdrop-enter\" (click)=\"closeEvent.emit()\"></div>\n    }\n\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{width:100%}:host[data-ng-doc-sidebar=false] .ng-doc-sidenav-content{margin-left:0;width:100%}:host .ng-doc-sidenav-wrapper{position:relative;display:flex;width:100%}:host .ng-doc-sidenav{position:fixed;top:var(--ng-doc-navbar-height);width:var(--ng-doc-sidenav-width);flex-shrink:0;z-index:10;transition:left var(--ng-doc-transition)}:host .ng-doc-sidenav-content{margin-left:var(--ng-doc-sidenav-width);width:calc(100% - var(--ng-doc-sidenav-width));padding:var(--ng-doc-sidenav-content-padding);transition:margin-left var(--ng-doc-transition)}:host .ng-doc-backdrop:not(nothing){background:color-mix(in srgb,rgba(0,0,0,.2) 60%,transparent);backdrop-filter:blur(20px)}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host .ng-doc-backdrop{background-color:#0003}}:host .ng-doc-backdropnothing{background-color:#0003}:host .ng-doc-backdrop{position:fixed!important;left:0;top:0;width:100%;height:100%;z-index:9}@media(max-width:1024px){:host[data-ng-doc-opened=true] .ng-doc-sidenav{right:0;transition:right var(--ng-doc-transition);--ng-doc-sidebar-shadow: var(--ng-doc-shadow-color) -5px 5px 20px -5px}:host .ng-doc-sidenav{transition:unset;left:unset;right:calc(var(--ng-doc-sidenav-width) * -1);top:var(--ng-doc-navbar-height)}:host .ng-doc-sidenav-content{margin-left:0;width:100%}}:host .backdrop-enter{animation:ng-doc-backdrop-fade-in var(--ng-doc-transition) forwards}@keyframes ng-doc-backdrop-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
-        }], propDecorators: { sidebar: [{
-                type: Input
-            }], opened: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-opened']
-            }], hasBackdrop: [{
-                type: Input
-            }], closeEvent: [{
-                type: Output
-            }] } });
+                        '[attr.data-ng-doc-sidebar]': '!!sidebar()',
+                        '[attr.data-ng-doc-opened]': 'opened()',
+                    }, template: "<div class=\"ng-doc-sidenav-wrapper\">\n  <div class=\"ng-doc-sidenav\" id=\"ng-doc-sidenav\">\n    <ng-container *polymorpheusOutlet=\"sidebar()\"></ng-container>\n  </div>\n  <div class=\"ng-doc-sidenav-content\">\n    @if (opened() && hasBackdrop()) {\n      <div class=\"ng-doc-backdrop\" animate.enter=\"backdrop-enter\" (click)=\"closeEvent.emit()\"></div>\n    }\n\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{width:100%}:host[data-ng-doc-sidebar=false] .ng-doc-sidenav-content{margin-left:0;width:100%}:host .ng-doc-sidenav-wrapper{position:relative;display:flex;width:100%}:host .ng-doc-sidenav{position:fixed;top:var(--ng-doc-navbar-height);width:var(--ng-doc-sidenav-width);flex-shrink:0;z-index:10;transition:left var(--ng-doc-transition)}:host .ng-doc-sidenav-content{margin-left:var(--ng-doc-sidenav-width);width:calc(100% - var(--ng-doc-sidenav-width));padding:var(--ng-doc-sidenav-content-padding);transition:margin-left var(--ng-doc-transition)}:host .ng-doc-backdrop:not(nothing){background:color-mix(in srgb,rgba(0,0,0,.2) 60%,transparent);backdrop-filter:blur(20px)}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host .ng-doc-backdrop{background-color:#0003}}:host .ng-doc-backdropnothing{background-color:#0003}:host .ng-doc-backdrop{position:fixed!important;left:0;top:0;width:100%;height:100%;z-index:9}@media(max-width:900px){:host .ng-doc-sidenav{left:calc(var(--ng-doc-sidenav-width) * -1);max-width:100%;visibility:hidden;transition:left var(--ng-doc-transition),visibility var(--ng-doc-transition)}:host[data-ng-doc-opened=true] .ng-doc-sidenav{left:0;visibility:visible;--ng-doc-sidebar-shadow: var(--ng-doc-shadow-lg)}:host .ng-doc-sidenav-content{margin-left:0;width:100%}}@media(prefers-reduced-motion:reduce){:host .ng-doc-sidenav,:host .ng-doc-sidenav-content{transition:none}}:host .backdrop-enter{animation:ng-doc-backdrop-fade-in var(--ng-doc-transition) forwards}@keyframes ng-doc-backdrop-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], propDecorators: { sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeEvent: [{ type: i0.Output, args: ["closeEvent"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-components-sidenav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-components-sidenav.mjs","sources":["../../../../libs/ui-kit/components/sidenav/sidenav.component.ts","../../../../libs/ui-kit/components/sidenav/sidenav.component.html","../../../../libs/ui-kit/components/sidenav/ng-doc-ui-kit-components-sidenav.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  HostBinding,\n  Input,\n  Output,\n} from '@angular/core';\nimport { NgDocContent } from '@ng-doc/ui-kit/types';\nimport { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';\n\n@Component({\n  selector: 'ng-doc-sidenav',\n  templateUrl: './sidenav.component.html',\n  styleUrls: ['./sidenav.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [PolymorpheusOutlet],\n  host: {\n    '[attr.data-ng-doc-sidebar]': '!!sidebar',\n  },\n})\nexport class NgDocSidenavComponent {\n  /**\n   * Content of the sidenav.\n   */\n  @Input()\n  sidebar: NgDocContent = '';\n\n  /**\n   * Indicates whether the sidenav is opened or not.\n   * This is used to trigger the animation.\n   */\n  @Input()\n  @HostBinding('attr.data-ng-doc-opened')\n  opened: boolean = true;\n\n  /**\n   * Indicates whether the sidenav has a backdrop or not.\n   */\n  @Input()\n  hasBackdrop: boolean = true;\n\n  @Output()\n  closeEvent: EventEmitter<void> = new EventEmitter<void>();\n}\n","<div class=\"ng-doc-sidenav-wrapper\">\n  <div class=\"ng-doc-sidenav\">\n    <ng-container *polymorpheusOutlet=\"sidebar\"></ng-container>\n  </div>\n  <div class=\"ng-doc-sidenav-content\">\n    @if (opened && hasBackdrop) {\n      <div class=\"ng-doc-backdrop\" animate.enter=\"backdrop-enter\" (click)=\"closeEvent.emit()\"></div>\n    }\n\n    <ng-content></ng-content>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAqBa,qBAAqB,CAAA;AAVlC,IAAA,WAAA,GAAA;AAWE;;AAEG;QAEH,IAAA,CAAA,OAAO,GAAiB,EAAE;AAE1B;;;AAGG;QAGH,IAAA,CAAA,MAAM,GAAY,IAAI;AAEtB;;AAEG;QAEH,IAAA,CAAA,WAAW,GAAY,IAAI;AAG3B,QAAA,IAAA,CAAA,UAAU,GAAuB,IAAI,YAAY,EAAQ;AAC1D,IAAA;8GAvBY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,0BAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,aAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrBlC,4YAYA,EAAA,MAAA,EAAA,CAAA,o8CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDIY,kBAAkB,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,2BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAKjB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAVjC,SAAS;+BACE,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,WACtC,CAAC,kBAAkB,CAAC,EAAA,IAAA,EACvB;AACJ,wBAAA,4BAA4B,EAAE,WAAW;AAC1C,qBAAA,EAAA,QAAA,EAAA,4YAAA,EAAA,MAAA,EAAA,CAAA,o8CAAA,CAAA,EAAA;;sBAMA;;sBAOA;;sBACA,WAAW;uBAAC,yBAAyB;;sBAMrC;;sBAGA;;;AE1CH;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-components-sidenav.mjs","sources":["../../../../libs/ui-kit/components/sidenav/sidenav.component.ts","../../../../libs/ui-kit/components/sidenav/sidenav.component.html","../../../../libs/ui-kit/components/sidenav/ng-doc-ui-kit-components-sidenav.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, input, output } from '@angular/core';\nimport { NgDocContent } from '@ng-doc/ui-kit/types';\nimport { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';\n\n/**\n * Layout with a side panel next to the projected content.\n *\n * At 900px and below the side panel becomes an overlay that slides in from the left; `opened`\n * shows it and `closeEvent` asks the owner to hide it. The panel has the id `ng-doc-sidenav`, so a\n * toggle button can point `aria-controls` at it.\n */\n@Component({\n  selector: 'ng-doc-sidenav',\n  templateUrl: './sidenav.component.html',\n  styleUrls: ['./sidenav.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [PolymorpheusOutlet],\n  host: {\n    '[attr.data-ng-doc-sidebar]': '!!sidebar()',\n    '[attr.data-ng-doc-opened]': 'opened()',\n  },\n})\nexport class NgDocSidenavComponent {\n  /**\n   * Content of the sidenav.\n   */\n  readonly sidebar = input<NgDocContent>('');\n\n  /**\n   * Indicates whether the sidenav is opened or not.\n   * This is used to trigger the animation.\n   */\n  readonly opened = input<boolean, unknown>(true, { transform: booleanAttribute });\n\n  /**\n   * Indicates whether the sidenav has a backdrop or not.\n   */\n  readonly hasBackdrop = input<boolean, unknown>(true, { transform: booleanAttribute });\n\n  /**\n   * Emits when the backdrop is clicked, so the owner can close the sidenav.\n   */\n  readonly closeEvent = output<void>();\n}\n","<div class=\"ng-doc-sidenav-wrapper\">\n  <div class=\"ng-doc-sidenav\" id=\"ng-doc-sidenav\">\n    <ng-container *polymorpheusOutlet=\"sidebar()\"></ng-container>\n  </div>\n  <div class=\"ng-doc-sidenav-content\">\n    @if (opened() && hasBackdrop()) {\n      <div class=\"ng-doc-backdrop\" animate.enter=\"backdrop-enter\" (click)=\"closeEvent.emit()\"></div>\n    }\n\n    <ng-content></ng-content>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAIA;;;;;;AAMG;MAYU,qBAAqB,CAAA;AAXlC,IAAA,WAAA,GAAA;AAYE;;AAEG;QACM,IAAA,CAAA,OAAO,GAAG,KAAK,CAAe,EAAE;oFAAC;AAE1C;;;AAGG;QACM,IAAA,CAAA,MAAM,GAAG,KAAK,CAAmB,IAAI,8EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEhF;;AAEG;QACM,IAAA,CAAA,WAAW,GAAG,KAAK,CAAmB,IAAI,mFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAErF;;AAEG;QACM,IAAA,CAAA,UAAU,GAAG,MAAM,EAAQ;AACrC,IAAA;8GArBY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,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,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,0BAAA,EAAA,aAAA,EAAA,yBAAA,EAAA,UAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtBlC,waAYA,EAAA,MAAA,EAAA,CAAA,ijDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDIY,kBAAkB,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,2BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAMjB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAXjC,SAAS;+BACE,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,WACtC,CAAC,kBAAkB,CAAC,EAAA,IAAA,EACvB;AACJ,wBAAA,4BAA4B,EAAE,aAAa;AAC3C,wBAAA,2BAA2B,EAAE,UAAU;AACxC,qBAAA,EAAA,QAAA,EAAA,waAAA,EAAA,MAAA,EAAA,CAAA,ijDAAA,CAAA,EAAA;;;AEpBH;;AAEG;;;;"}

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

@@ -1,22 +1,24 @@
 import * as i0 from '@angular/core';
-import { Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
 
+/**
+ * Circular loading indicator.
+ */
 class NgDocSpinnerComponent {
     constructor() {
-        this.size = 'medium';
+        /** Spinner size */
+        this.size = input('medium', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocSpinnerComponent, isStandalone: true, selector: "ng-doc-spinner", inputs: { size: "size" }, host: { properties: { "attr.data-ng-doc-size": "this.size" } }, ngImport: i0, template: "<svg class=\"ng-doc-spinner\" viewBox=\"0 0 50 50\">\n\t<circle class=\"ng-doc-spinner-path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n</svg>\n", styles: [":host{display:inline-block}:host[data-ng-doc-size=small]{width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=medium]{width:calc(var(--ng-doc-base-gutter) * 5);height:calc(var(--ng-doc-base-gutter) * 5)}:host[data-ng-doc-size=large]{width:calc(var(--ng-doc-base-gutter) * 8);height:calc(var(--ng-doc-base-gutter) * 8)}:host .ng-doc-spinner{animation:rotate 2s linear infinite}:host .ng-doc-spinner .ng-doc-spinner-path{stroke:var(--ng-doc-spinner-color, var(--ng-doc-primary));stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: NgDocSpinnerComponent, isStandalone: true, selector: "ng-doc-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-size": "size()" } }, ngImport: i0, template: "<svg class=\"ng-doc-spinner\" viewBox=\"0 0 50 50\">\n\t<circle class=\"ng-doc-spinner-path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n</svg>\n", styles: [":host{display:inline-block}:host[data-ng-doc-size=small]{width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=medium]{width:calc(var(--ng-doc-base-gutter) * 5);height:calc(var(--ng-doc-base-gutter) * 5)}:host[data-ng-doc-size=large]{width:calc(var(--ng-doc-base-gutter) * 8);height:calc(var(--ng-doc-base-gutter) * 8)}:host .ng-doc-spinner{animation:rotate 2s linear infinite}:host .ng-doc-spinner .ng-doc-spinner-path{stroke:var(--ng-doc-spinner-color, var(--ng-doc-primary));stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-spinner', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<svg class=\"ng-doc-spinner\" viewBox=\"0 0 50 50\">\n\t<circle class=\"ng-doc-spinner-path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n</svg>\n", styles: [":host{display:inline-block}:host[data-ng-doc-size=small]{width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=medium]{width:calc(var(--ng-doc-base-gutter) * 5);height:calc(var(--ng-doc-base-gutter) * 5)}:host[data-ng-doc-size=large]{width:calc(var(--ng-doc-base-gutter) * 8);height:calc(var(--ng-doc-base-gutter) * 8)}:host .ng-doc-spinner{animation:rotate 2s linear infinite}:host .ng-doc-spinner .ng-doc-spinner-path{stroke:var(--ng-doc-spinner-color, var(--ng-doc-primary));stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"] }]
-        }], propDecorators: { size: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-size']
-            }] } });
+            args: [{ selector: 'ng-doc-spinner', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-ng-doc-size]': 'size()',
+                    }, template: "<svg class=\"ng-doc-spinner\" viewBox=\"0 0 50 50\">\n\t<circle class=\"ng-doc-spinner-path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n</svg>\n", styles: [":host{display:inline-block}:host[data-ng-doc-size=small]{width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-size=medium]{width:calc(var(--ng-doc-base-gutter) * 5);height:calc(var(--ng-doc-base-gutter) * 5)}:host[data-ng-doc-size=large]{width:calc(var(--ng-doc-base-gutter) * 8);height:calc(var(--ng-doc-base-gutter) * 8)}:host .ng-doc-spinner{animation:rotate 2s linear infinite}:host .ng-doc-spinner .ng-doc-spinner-path{stroke:var(--ng-doc-spinner-color, var(--ng-doc-primary));stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-components-spinner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-components-spinner.mjs","sources":["../../../../libs/ui-kit/components/spinner/spinner.component.ts","../../../../libs/ui-kit/components/spinner/spinner.component.html","../../../../libs/ui-kit/components/spinner/ng-doc-ui-kit-components-spinner.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\nimport { NgDocSize } from '@ng-doc/ui-kit/types';\n\n@Component({\n\tselector: 'ng-doc-spinner',\n\ttemplateUrl: './spinner.component.html',\n\tstyleUrls: ['./spinner.component.scss'],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tstandalone: true,\n})\nexport class NgDocSpinnerComponent {\n\t@Input()\n\t@HostBinding('attr.data-ng-doc-size')\n\tsize: NgDocSize = 'medium';\n}\n","<svg class=\"ng-doc-spinner\" viewBox=\"0 0 50 50\">\n\t<circle class=\"ng-doc-spinner-path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n</svg>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAUa,qBAAqB,CAAA;AAPlC,IAAA,WAAA,GAAA;QAUC,IAAA,CAAA,IAAI,GAAc,QAAQ;AAC1B,IAAA;8GAJY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,oKCVlC,iLAGA,EAAA,MAAA,EAAA,CAAA,wyBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDOa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,cACnC,IAAI,EAAA,QAAA,EAAA,iLAAA,EAAA,MAAA,EAAA,CAAA,wyBAAA,CAAA,EAAA;;sBAGf;;sBACA,WAAW;uBAAC,uBAAuB;;;AEZrC;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-components-spinner.mjs","sources":["../../../../libs/ui-kit/components/spinner/spinner.component.ts","../../../../libs/ui-kit/components/spinner/spinner.component.html","../../../../libs/ui-kit/components/spinner/ng-doc-ui-kit-components-spinner.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgDocSize } from '@ng-doc/ui-kit/types';\n\n/**\n * Circular loading indicator.\n */\n@Component({\n  selector: 'ng-doc-spinner',\n  templateUrl: './spinner.component.html',\n  styleUrls: ['./spinner.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-ng-doc-size]': 'size()',\n  },\n})\nexport class NgDocSpinnerComponent {\n  /** Spinner size */\n  readonly size = input<NgDocSize>('medium');\n}\n","<svg class=\"ng-doc-spinner\" viewBox=\"0 0 50 50\">\n\t<circle class=\"ng-doc-spinner-path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n</svg>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;AAEG;MAUU,qBAAqB,CAAA;AATlC,IAAA,WAAA,GAAA;;QAWW,IAAA,CAAA,IAAI,GAAG,KAAK,CAAY,QAAQ;iFAAC;AAC3C,IAAA;8GAHY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,wQCflC,iLAGA,EAAA,MAAA,EAAA,CAAA,wyBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDYa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBATjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,yBAAyB,EAAE,QAAQ;AACpC,qBAAA,EAAA,QAAA,EAAA,iLAAA,EAAA,MAAA,EAAA,CAAA,wyBAAA,CAAA,EAAA;;;AEbH;;AAEG;;;;"}