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

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

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-components-text.mjs","sources":["../../../../libs/ui-kit/components/text/text-left.directive.ts","../../../../libs/ui-kit/components/text/text-right.directive.ts","../../../../libs/ui-kit/components/text/text.component.ts","../../../../libs/ui-kit/components/text/text.component.html","../../../../libs/ui-kit/components/text/ng-doc-ui-kit-components-text.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/** Using to display content on the left side */\n@Directive({\n  selector: '[ngDocTextLeft]',\n  standalone: true,\n})\nexport class NgDocTextLeftDirective {}\n","import { Directive } from '@angular/core';\n\n/** Using to display content on the right side */\n@Directive({\n  selector: '[ngDocTextRight]',\n  standalone: true,\n})\nexport class NgDocTextRightDirective {}\n","import {\n  AfterContentChecked,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  HostBinding,\n  inject,\n  Input,\n} from '@angular/core';\nimport { NgDocSize, NgDocTextAlign, NgDocTextColor } from '@ng-doc/ui-kit/types';\n\nimport { NgDocTextLeftDirective } from './text-left.directive';\nimport { NgDocTextRightDirective } from './text-right.directive';\n\n@Component({\n  selector: '[ng-doc-text]',\n  templateUrl: './text.component.html',\n  styleUrls: ['./text.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [],\n})\nexport class NgDocTextComponent implements AfterContentChecked {\n  private readonly changeDetectorRef = inject(ChangeDetectorRef);\n\n  /** Text size */\n  @Input()\n  @HostBinding('attr.data-ng-doc-text-size')\n  size: NgDocSize = 'medium';\n\n  /** Text color */\n  @Input()\n  @HostBinding('attr.data-ng-doc-text-color')\n  color: NgDocTextColor = 'normal';\n\n  /** Text align */\n  @Input()\n  @HostBinding('attr.data-ng-doc-text-align')\n  align: NgDocTextAlign = 'left';\n\n  @Input()\n  @HostBinding('attr.data-ng-doc-text-absolute')\n  absoluteContent: boolean = false;\n\n  @ContentChild(NgDocTextLeftDirective)\n  leftContent?: NgDocTextLeftDirective;\n\n  @ContentChild(NgDocTextRightDirective)\n  rightContent?: NgDocTextRightDirective;\n\n  @HostBinding('class.ngde')\n  readonly ngDocElement: boolean = true;\n\n  constructor() {}\n\n  ngAfterContentChecked(): void {\n    this.changeDetectorRef.detectChanges();\n  }\n}\n","@if (leftContent) {\n  <span class=\"ng-doc-text-left\">\n    <ng-content select=\"[ngDocTextLeft]\"></ng-content>\n  </span>\n}\n<span class=\"ng-doc-text\">\n  <ng-content></ng-content>\n</span>\n@if (rightContent) {\n  <span class=\"ng-doc-text-right\">\n    <ng-content select=\"[ngDocTextRight]\"></ng-content>\n  </span>\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-text.mjs","sources":["../../../../libs/ui-kit/components/text/text-left.directive.ts","../../../../libs/ui-kit/components/text/text-right.directive.ts","../../../../libs/ui-kit/components/text/text.component.ts","../../../../libs/ui-kit/components/text/text.component.html","../../../../libs/ui-kit/components/text/ng-doc-ui-kit-components-text.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/** Using to display content on the left side */\n@Directive({\n  selector: '[ngDocTextLeft]',\n})\nexport class NgDocTextLeftDirective {}\n","import { Directive } from '@angular/core';\n\n/** Using to display content on the right side */\n@Directive({\n  selector: '[ngDocTextRight]',\n})\nexport class NgDocTextRightDirective {}\n","import { ChangeDetectionStrategy, Component, contentChild, input } from '@angular/core';\nimport { NgDocSize, NgDocTextAlign, NgDocTextColor } from '@ng-doc/ui-kit/types';\n\nimport { NgDocTextLeftDirective } from './text-left.directive';\nimport { NgDocTextRightDirective } from './text-right.directive';\n\n/**\n * Text with the UI Kit typography, optionally with content on its left or right side\n * (`ngDocTextLeft`, `ngDocTextRight`).\n */\n@Component({\n  selector: '[ng-doc-text]',\n  templateUrl: './text.component.html',\n  styleUrls: ['./text.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'ngde',\n    '[attr.data-ng-doc-text-size]': 'size()',\n    '[attr.data-ng-doc-text-color]': 'color()',\n    '[attr.data-ng-doc-text-align]': 'align()',\n    '[attr.data-ng-doc-text-absolute]': 'absoluteContent()',\n  },\n})\nexport class NgDocTextComponent {\n  /** Text size */\n  readonly size = input<NgDocSize>('medium');\n\n  /** Text color */\n  readonly color = input<NgDocTextColor>('normal');\n\n  /** Text align */\n  readonly align = input<NgDocTextAlign>('left');\n\n  /** Positions the side content absolutely, so it does not take space from the text. */\n  readonly absoluteContent = input<boolean>(false);\n\n  /** Content projected with `ngDocTextLeft`. */\n  readonly leftContent = contentChild(NgDocTextLeftDirective);\n\n  /** Content projected with `ngDocTextRight`. */\n  readonly rightContent = contentChild(NgDocTextRightDirective);\n}\n","@if (leftContent()) {\n  <span class=\"ng-doc-text-left\">\n    <ng-content select=\"[ngDocTextLeft]\"></ng-content>\n  </span>\n}\n<span class=\"ng-doc-text\">\n  <ng-content></ng-content>\n</span>\n@if (rightContent()) {\n  <span class=\"ng-doc-text-right\">\n    <ng-content select=\"[ngDocTextRight]\"></ng-content>\n  </span>\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-toggle.mjs

@@ -1,90 +1,115 @@
 import * as i0 from '@angular/core';
-import { inject, HostBinding, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, DOCUMENT, DestroyRef, viewChild, signal, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgDocPositionUtils } from '@ng-doc/ui-kit/utils';
 import { DIStateControl, DICompareHost, injectHostControl } from 'di-controls';
 import { fromEvent } from 'rxjs';
 import { filter, switchMap, pairwise, map, tap, startWith, takeUntil, last } from 'rxjs/operators';
 
+/**
+ * Switch control. It works with forms (`ngModel`, reactive forms, `[formField]`) and with host
+ * controls; the circle can be clicked or dragged.
+ */
 class NgDocToggleComponent extends DIStateControl {
     constructor() {
         super({
             host: injectHostControl({ optional: true }),
             compareHost: inject(DICompareHost, { optional: true }),
-            onIncomingUpdate: () => {
-                this.setState(!!this.checked());
-            },
+            onIncomingUpdate: () => this.setState(!!this.checked()),
         });
-        this.dragging = false;
+        this.document = inject(DOCUMENT);
+        this.toggleDestroyRef = inject(DestroyRef);
+        this.wrapper = viewChild('wrapper', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wrapper" }] : /* istanbul ignore next */ []));
+        this.circle = viewChild('circle', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "circle" }] : /* istanbul ignore next */ []));
+        /** Whether the user is dragging the circle. */
+        this.dragging = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
         this.maxPixelValue = 0;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        if (this.wrapper && this.circle) {
-            this.maxPixelValue =
-                this.wrapper.nativeElement.offsetWidth - this.circle.nativeElement.offsetWidth - 6;
-            fromEvent(this.circle.nativeElement, 'mousedown')
-                .pipe(filter(() => !this.disabled), switchMap(() => {
-                const transition = this.circle?.nativeElement.style.transition ?? '';
-                this.renderer.setStyle(this.circle?.nativeElement, 'transition', '');
-                this.setDragging(true);
-                return fromEvent(document.body, 'mousemove').pipe(pairwise(), map(([newEvent, oldEvent]) => [newEvent, oldEvent]), map(([newEvent, oldEvent]) => oldEvent.clientX - newEvent.clientX), filter((deltaX) => deltaX !== 0), tap((deltaX) => this.changeCirclePosition(deltaX)), startWith(null), takeUntil(fromEvent(document.body, 'mouseup').pipe(tap(() => this.setDragging(false)))), last(), tap(() => this.circle &&
-                    this.renderer.setStyle(this.circle.nativeElement, 'transition', transition)));
-            }), takeUntilDestroyed(this['destroyRef']))
-                .subscribe((deltaX) => {
-                deltaX === null ? this.toggle() : this.detectByCoordinates();
-            });
-        }
+        // The track is measured once it is rendered (and only in the browser); a value written by a
+        // form before that is shown from here.
+        afterNextRender(() => {
+            const wrapper = this.wrapper()?.nativeElement;
+            const circle = this.circle()?.nativeElement;
+            if (!wrapper || !circle) {
+                return;
+            }
+            this.maxPixelValue = Math.max(wrapper.offsetWidth - circle.offsetWidth - 6, 0);
+            this.setState(!!this.checked());
+            this.listenToDrag(circle);
+        });
     }
     updateModel(value) {
         super.updateModel(value);
-        this.setState(!!this.checked);
+        this.setState(!!this.checked());
+    }
+    onWrapperClick() {
+        if (!this.disabled) {
+            this.toggle();
+        }
     }
     setState(isSelected) {
-        isSelected
-            ? this.circle &&
-                this.renderer.setStyle(this.circle.nativeElement, 'transform', `translateX(${this.maxPixelValue}px)`)
-            : this.circle &&
-                this.renderer.setStyle(this.circle.nativeElement, 'transform', `translateX(0)`);
+        const circle = this.circle()?.nativeElement;
+        if (circle) {
+            this.renderer.setStyle(circle, 'transform', isSelected ? `translateX(${this.maxPixelValue}px)` : 'translateX(0)');
+        }
     }
-    setDragging(value) {
-        this.dragging = value;
-        this.changeDetectorRef.markForCheck();
+    listenToDrag(circle) {
+        fromEvent(circle, 'mousedown')
+            .pipe(filter(() => !this.disabled), switchMap(() => {
+            const transition = circle.style.transition;
+            this.renderer.setStyle(circle, 'transition', '');
+            this.dragging.set(true);
+            return fromEvent(this.document.body, 'mousemove').pipe(pairwise(), map(([newEvent, oldEvent]) => oldEvent.clientX - newEvent.clientX), filter((deltaX) => deltaX !== 0), tap((deltaX) => this.changeCirclePosition(deltaX)), startWith(null), takeUntil(fromEvent(this.document.body, 'mouseup').pipe(tap(() => this.dragging.set(false)))), last(), tap(() => this.renderer.setStyle(circle, 'transition', transition)));
+        }), takeUntilDestroyed(this.toggleDestroyRef))
+            .subscribe((deltaX) => {
+            // Without a drag the press is a click on the circle. While dragging, the track ignores
+            // pointer events, so the click that follows does not reach its handler as well.
+            if (deltaX === null) {
+                this.toggle();
+            }
+            else {
+                this.detectByCoordinates();
+            }
+        });
     }
     detectByCoordinates() {
-        if (!this.disabled && this.wrapper && this.circle) {
-            const wrapperMiddle = NgDocPositionUtils.getElementPosition(this.wrapper.nativeElement).x +
-                this.wrapper.nativeElement.offsetWidth / 2;
-            const circleCenterLeft = NgDocPositionUtils.getElementPosition(this.circle.nativeElement).x +
-                this.circle.nativeElement.offsetWidth / 2;
-            circleCenterLeft > wrapperMiddle ? this.check() : this.uncheck();
-            this.setState(!!this.checked);
+        const wrapper = this.wrapper()?.nativeElement;
+        const circle = this.circle()?.nativeElement;
+        if (!this.disabled && wrapper && circle) {
+            const wrapperMiddle = NgDocPositionUtils.getElementPosition(wrapper).x + wrapper.offsetWidth / 2;
+            const circleCenterLeft = NgDocPositionUtils.getElementPosition(circle).x + circle.offsetWidth / 2;
+            if (circleCenterLeft > wrapperMiddle) {
+                this.check();
+            }
+            else {
+                this.uncheck();
+            }
+            this.setState(!!this.checked());
         }
     }
     changeCirclePosition(delta) {
-        if (this.wrapper && this.circle) {
-            const wrapperLeft = NgDocPositionUtils.getElementPosition(this.wrapper.nativeElement).x;
-            const circleLeft = NgDocPositionUtils.getElementPosition(this.circle.nativeElement).x;
+        const wrapper = this.wrapper()?.nativeElement;
+        const circle = this.circle()?.nativeElement;
+        if (wrapper && circle) {
+            const wrapperLeft = NgDocPositionUtils.getElementPosition(wrapper).x;
+            const circleLeft = NgDocPositionUtils.getElementPosition(circle).x;
             const newPosition = Math.max(Math.min(circleLeft - wrapperLeft - 3 + delta, this.maxPixelValue), 0);
-            this.renderer.setStyle(this.circle.nativeElement, 'transform', `translateX(${newPosition}px)`);
+            this.renderer.setStyle(circle, 'transform', `translateX(${newPosition}px)`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocToggleComponent, isStandalone: true, selector: "ng-doc-toggle", host: { properties: { "attr.data-ng-doc-dragging": "this.dragging" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "circle", first: true, predicate: ["circle"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ng-doc-toggle-wrapper\" (click)=\"toggle()\" #wrapper>\n\t<div class=\"ng-doc-toggle-circle\" #circle></div>\n</div>\n", styles: [":host .ng-doc-toggle-wrapper{position:relative;display:inline-block;width:40px;height:22px;border-radius:24px;background-color:var(--ng-doc-base-3);cursor:pointer;transition:background-color var(--ng-doc-transition)}:host .ng-doc-toggle-wrapper .ng-doc-toggle-circle{position:absolute;left:3px;top:3px;height:calc(var(--ng-doc-base-gutter) * 2);width:calc(var(--ng-doc-base-gutter) * 2);border-radius:50%;background-color:var(--ng-doc-base-0);-webkit-user-select:none;user-select:none;transition:transform var(--ng-doc-transition);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}:host[data-checked=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-primary)}:host[data-ng-doc-dragging=true]{cursor:grabbing}:host[data-ng-doc-dragging=true] .ng-doc-toggle-wrapper{pointer-events:none}:host[data-disabled=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-base-2);cursor:unset}:host[data-disabled=true][data-checked=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-base-3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.2.1", type: NgDocToggleComponent, isStandalone: true, selector: "ng-doc-toggle", host: { properties: { "attr.data-ng-doc-dragging": "dragging()", "attr.data-checked": "checked()", "attr.data-disabled": "disabled" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ng-doc-toggle-wrapper\" (click)=\"onWrapperClick()\" #wrapper>\n  <div class=\"ng-doc-toggle-circle\" #circle></div>\n</div>\n", styles: [":host .ng-doc-toggle-wrapper{position:relative;display:inline-block;width:40px;height:22px;border-radius:24px;background-color:var(--ng-doc-base-3);cursor:pointer;transition:background-color var(--ng-doc-transition)}:host .ng-doc-toggle-wrapper .ng-doc-toggle-circle{position:absolute;left:3px;top:3px;height:calc(var(--ng-doc-base-gutter) * 2);width:calc(var(--ng-doc-base-gutter) * 2);border-radius:50%;background-color:var(--ng-doc-base-0);-webkit-user-select:none;user-select:none;transition:transform var(--ng-doc-transition);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}:host[data-checked=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-primary)}:host[data-ng-doc-dragging=true]{cursor:grabbing}:host[data-ng-doc-dragging=true] .ng-doc-toggle-wrapper{pointer-events:none}:host[data-disabled=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-base-2);cursor:unset}:host[data-disabled=true][data-checked=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-base-3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-toggle', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"ng-doc-toggle-wrapper\" (click)=\"toggle()\" #wrapper>\n\t<div class=\"ng-doc-toggle-circle\" #circle></div>\n</div>\n", styles: [":host .ng-doc-toggle-wrapper{position:relative;display:inline-block;width:40px;height:22px;border-radius:24px;background-color:var(--ng-doc-base-3);cursor:pointer;transition:background-color var(--ng-doc-transition)}:host .ng-doc-toggle-wrapper .ng-doc-toggle-circle{position:absolute;left:3px;top:3px;height:calc(var(--ng-doc-base-gutter) * 2);width:calc(var(--ng-doc-base-gutter) * 2);border-radius:50%;background-color:var(--ng-doc-base-0);-webkit-user-select:none;user-select:none;transition:transform var(--ng-doc-transition);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}:host[data-checked=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-primary)}:host[data-ng-doc-dragging=true]{cursor:grabbing}:host[data-ng-doc-dragging=true] .ng-doc-toggle-wrapper{pointer-events:none}:host[data-disabled=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-base-2);cursor:unset}:host[data-disabled=true][data-checked=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-base-3)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { wrapper: [{
-                type: ViewChild,
-                args: ['wrapper', { static: true }]
-            }], circle: [{
-                type: ViewChild,
-                args: ['circle', { static: true }]
-            }], dragging: [{
-                type: HostBinding,
-                args: ['attr.data-ng-doc-dragging']
-            }] } });
+            args: [{ selector: 'ng-doc-toggle', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-ng-doc-dragging]': 'dragging()',
+                        '[attr.data-checked]': 'checked()',
+                        '[attr.data-disabled]': 'disabled',
+                    }, template: "<div class=\"ng-doc-toggle-wrapper\" (click)=\"onWrapperClick()\" #wrapper>\n  <div class=\"ng-doc-toggle-circle\" #circle></div>\n</div>\n", styles: [":host .ng-doc-toggle-wrapper{position:relative;display:inline-block;width:40px;height:22px;border-radius:24px;background-color:var(--ng-doc-base-3);cursor:pointer;transition:background-color var(--ng-doc-transition)}:host .ng-doc-toggle-wrapper .ng-doc-toggle-circle{position:absolute;left:3px;top:3px;height:calc(var(--ng-doc-base-gutter) * 2);width:calc(var(--ng-doc-base-gutter) * 2);border-radius:50%;background-color:var(--ng-doc-base-0);-webkit-user-select:none;user-select:none;transition:transform var(--ng-doc-transition);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}:host[data-checked=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-primary)}:host[data-ng-doc-dragging=true]{cursor:grabbing}:host[data-ng-doc-dragging=true] .ng-doc-toggle-wrapper{pointer-events:none}:host[data-disabled=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-base-2);cursor:unset}:host[data-disabled=true][data-checked=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-base-3)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { wrapper: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], circle: [{ type: i0.ViewChild, args: ['circle', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-components-toggle.mjs","sources":["../../../../libs/ui-kit/components/toggle/toggle.component.ts","../../../../libs/ui-kit/components/toggle/toggle.component.html","../../../../libs/ui-kit/components/toggle/ng-doc-ui-kit-components-toggle.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostBinding,\n  inject,\n  OnInit,\n  ViewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgDocPositionUtils } from '@ng-doc/ui-kit/utils';\nimport { DICompareHost, DIStateControl, injectHostControl } from 'di-controls';\nimport { fromEvent } from 'rxjs';\nimport { filter, last, map, pairwise, startWith, switchMap, takeUntil, tap } from 'rxjs/operators';\n\n@Component({\n  selector: 'ng-doc-toggle',\n  templateUrl: './toggle.component.html',\n  styleUrls: ['./toggle.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class NgDocToggleComponent<T>\n  extends DIStateControl<T>\n  implements OnInit, ControlValueAccessor\n{\n  @ViewChild('wrapper', { static: true })\n  private wrapper?: ElementRef<HTMLElement>;\n\n  @ViewChild('circle', { static: true })\n  private circle?: ElementRef<HTMLElement>;\n\n  @HostBinding('attr.data-ng-doc-dragging')\n  dragging: boolean = false;\n\n  private maxPixelValue: number = 0;\n\n  constructor() {\n    super({\n      host: injectHostControl({ optional: true }),\n      compareHost: inject(DICompareHost, { optional: true }),\n      onIncomingUpdate: () => {\n        this.setState(!!this.checked());\n      },\n    });\n  }\n\n  override ngOnInit(): void {\n    super.ngOnInit();\n    if (this.wrapper && this.circle) {\n      this.maxPixelValue =\n        this.wrapper.nativeElement.offsetWidth - this.circle.nativeElement.offsetWidth - 6;\n      fromEvent(this.circle.nativeElement, 'mousedown')\n        .pipe(\n          filter(() => !this.disabled),\n          switchMap(() => {\n            const transition: string = this.circle?.nativeElement.style.transition ?? '';\n            this.renderer.setStyle(this.circle?.nativeElement, 'transition', '');\n            this.setDragging(true);\n\n            return fromEvent(document.body, 'mousemove').pipe(\n              pairwise(),\n              map(\n                ([newEvent, oldEvent]: [Event, Event]) =>\n                  [newEvent, oldEvent] as [MouseEvent, MouseEvent],\n              ),\n              map(\n                ([newEvent, oldEvent]: [MouseEvent, MouseEvent]) =>\n                  oldEvent.clientX - newEvent.clientX,\n              ),\n              filter((deltaX: number) => deltaX !== 0),\n              tap((deltaX: number) => this.changeCirclePosition(deltaX)),\n              startWith(null),\n              takeUntil(\n                fromEvent(document.body, 'mouseup').pipe(tap(() => this.setDragging(false))),\n              ),\n              last(),\n              tap(\n                () =>\n                  this.circle &&\n                  this.renderer.setStyle(this.circle.nativeElement, 'transition', transition),\n              ),\n            );\n          }),\n          takeUntilDestroyed(this['destroyRef']),\n        )\n        .subscribe((deltaX: number | null) => {\n          deltaX === null ? this.toggle() : this.detectByCoordinates();\n        });\n    }\n  }\n\n  override updateModel(value: boolean | T | null): void {\n    super.updateModel(value);\n    this.setState(!!this.checked);\n  }\n\n  protected setState(isSelected: boolean): void {\n    isSelected\n      ? this.circle &&\n        this.renderer.setStyle(\n          this.circle.nativeElement,\n          'transform',\n          `translateX(${this.maxPixelValue}px)`,\n        )\n      : this.circle &&\n        this.renderer.setStyle(this.circle.nativeElement, 'transform', `translateX(0)`);\n  }\n\n  private setDragging(value: boolean): void {\n    this.dragging = value;\n    this.changeDetectorRef.markForCheck();\n  }\n\n  private detectByCoordinates(): void {\n    if (!this.disabled && this.wrapper && this.circle) {\n      const wrapperMiddle: number =\n        NgDocPositionUtils.getElementPosition(this.wrapper.nativeElement).x +\n        this.wrapper.nativeElement.offsetWidth / 2;\n      const circleCenterLeft: number =\n        NgDocPositionUtils.getElementPosition(this.circle.nativeElement).x +\n        this.circle.nativeElement.offsetWidth / 2;\n      circleCenterLeft > wrapperMiddle ? this.check() : this.uncheck();\n      this.setState(!!this.checked);\n    }\n  }\n\n  private changeCirclePosition(delta: number): void {\n    if (this.wrapper && this.circle) {\n      const wrapperLeft: number = NgDocPositionUtils.getElementPosition(\n        this.wrapper.nativeElement,\n      ).x;\n      const circleLeft: number = NgDocPositionUtils.getElementPosition(this.circle.nativeElement).x;\n      const newPosition: number = Math.max(\n        Math.min(circleLeft - wrapperLeft - 3 + delta, this.maxPixelValue),\n        0,\n      );\n      this.renderer.setStyle(\n        this.circle.nativeElement,\n        'transform',\n        `translateX(${newPosition}px)`,\n      );\n    }\n  }\n}\n","<div class=\"ng-doc-toggle-wrapper\" (click)=\"toggle()\" #wrapper>\n\t<div class=\"ng-doc-toggle-circle\" #circle></div>\n</div>\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-toggle.mjs","sources":["../../../../libs/ui-kit/components/toggle/toggle.component.ts","../../../../libs/ui-kit/components/toggle/toggle.component.html","../../../../libs/ui-kit/components/toggle/ng-doc-ui-kit-components-toggle.ts"],"sourcesContent":["import {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  DOCUMENT,\n  ElementRef,\n  inject,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgDocPositionUtils } from '@ng-doc/ui-kit/utils';\nimport { DICompareHost, DIStateControl, injectHostControl } from 'di-controls';\nimport { fromEvent } from 'rxjs';\nimport { filter, last, map, pairwise, startWith, switchMap, takeUntil, tap } from 'rxjs/operators';\n\n/**\n * Switch control. It works with forms (`ngModel`, reactive forms, `[formField]`) and with host\n * controls; the circle can be clicked or dragged.\n */\n@Component({\n  selector: 'ng-doc-toggle',\n  templateUrl: './toggle.component.html',\n  styleUrls: ['./toggle.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-ng-doc-dragging]': 'dragging()',\n    '[attr.data-checked]': 'checked()',\n    '[attr.data-disabled]': 'disabled',\n  },\n})\nexport class NgDocToggleComponent<T> extends DIStateControl<T> implements ControlValueAccessor {\n  private readonly document = inject(DOCUMENT);\n  private readonly toggleDestroyRef = inject(DestroyRef);\n  private readonly wrapper = viewChild<ElementRef<HTMLElement>>('wrapper');\n  private readonly circle = viewChild<ElementRef<HTMLElement>>('circle');\n\n  /** Whether the user is dragging the circle. */\n  protected readonly dragging = signal(false);\n\n  private maxPixelValue: number = 0;\n\n  constructor() {\n    super({\n      host: injectHostControl({ optional: true }),\n      compareHost: inject(DICompareHost, { optional: true }),\n      onIncomingUpdate: () => this.setState(!!this.checked()),\n    });\n\n    // The track is measured once it is rendered (and only in the browser); a value written by a\n    // form before that is shown from here.\n    afterNextRender(() => {\n      const wrapper: HTMLElement | undefined = this.wrapper()?.nativeElement;\n      const circle: HTMLElement | undefined = this.circle()?.nativeElement;\n\n      if (!wrapper || !circle) {\n        return;\n      }\n\n      this.maxPixelValue = Math.max(wrapper.offsetWidth - circle.offsetWidth - 6, 0);\n      this.setState(!!this.checked());\n      this.listenToDrag(circle);\n    });\n  }\n\n  override updateModel(value: boolean | T | null): void {\n    super.updateModel(value);\n    this.setState(!!this.checked());\n  }\n\n  protected onWrapperClick(): void {\n    if (!this.disabled) {\n      this.toggle();\n    }\n  }\n\n  protected setState(isSelected: boolean): void {\n    const circle: HTMLElement | undefined = this.circle()?.nativeElement;\n\n    if (circle) {\n      this.renderer.setStyle(\n        circle,\n        'transform',\n        isSelected ? `translateX(${this.maxPixelValue}px)` : 'translateX(0)',\n      );\n    }\n  }\n\n  private listenToDrag(circle: HTMLElement): void {\n    fromEvent(circle, 'mousedown')\n      .pipe(\n        filter(() => !this.disabled),\n        switchMap(() => {\n          const transition: string = circle.style.transition;\n          this.renderer.setStyle(circle, 'transition', '');\n          this.dragging.set(true);\n\n          return fromEvent<MouseEvent>(this.document.body, 'mousemove').pipe(\n            pairwise(),\n            map(\n              ([newEvent, oldEvent]: [MouseEvent, MouseEvent]) =>\n                oldEvent.clientX - newEvent.clientX,\n            ),\n            filter((deltaX: number) => deltaX !== 0),\n            tap((deltaX: number) => this.changeCirclePosition(deltaX)),\n            startWith(null),\n            takeUntil(\n              fromEvent(this.document.body, 'mouseup').pipe(tap(() => this.dragging.set(false))),\n            ),\n            last(),\n            tap(() => this.renderer.setStyle(circle, 'transition', transition)),\n          );\n        }),\n        takeUntilDestroyed(this.toggleDestroyRef),\n      )\n      .subscribe((deltaX: number | null) => {\n        // Without a drag the press is a click on the circle. While dragging, the track ignores\n        // pointer events, so the click that follows does not reach its handler as well.\n        if (deltaX === null) {\n          this.toggle();\n        } else {\n          this.detectByCoordinates();\n        }\n      });\n  }\n\n  private detectByCoordinates(): void {\n    const wrapper: HTMLElement | undefined = this.wrapper()?.nativeElement;\n    const circle: HTMLElement | undefined = this.circle()?.nativeElement;\n\n    if (!this.disabled && wrapper && circle) {\n      const wrapperMiddle: number =\n        NgDocPositionUtils.getElementPosition(wrapper).x + wrapper.offsetWidth / 2;\n      const circleCenterLeft: number =\n        NgDocPositionUtils.getElementPosition(circle).x + circle.offsetWidth / 2;\n\n      if (circleCenterLeft > wrapperMiddle) {\n        this.check();\n      } else {\n        this.uncheck();\n      }\n\n      this.setState(!!this.checked());\n    }\n  }\n\n  private changeCirclePosition(delta: number): void {\n    const wrapper: HTMLElement | undefined = this.wrapper()?.nativeElement;\n    const circle: HTMLElement | undefined = this.circle()?.nativeElement;\n\n    if (wrapper && circle) {\n      const wrapperLeft: number = NgDocPositionUtils.getElementPosition(wrapper).x;\n      const circleLeft: number = NgDocPositionUtils.getElementPosition(circle).x;\n      const newPosition: number = Math.max(\n        Math.min(circleLeft - wrapperLeft - 3 + delta, this.maxPixelValue),\n        0,\n      );\n\n      this.renderer.setStyle(circle, 'transform', `translateX(${newPosition}px)`);\n    }\n  }\n}\n","<div class=\"ng-doc-toggle-wrapper\" (click)=\"onWrapperClick()\" #wrapper>\n  <div class=\"ng-doc-toggle-circle\" #circle></div>\n</div>\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-wrapper.mjs

@@ -1,13 +1,16 @@
 import * as i0 from '@angular/core';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
+/**
+ * Wraps an input and its controls; the border takes the focus color while it holds focus.
+ */
 class NgDocWrapperComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocWrapperComponent, isStandalone: true, selector: "ng-doc-wrapper", ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host[data-ng-doc-focused=true]{--ng-doc-floated-border-color: var(--ng-doc-floated-focus-border-color, var(--ng-doc-primary))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.1", type: NgDocWrapperComponent, isStandalone: true, selector: "ng-doc-wrapper", ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host[data-ng-doc-focused=true]{--ng-doc-floated-border-color: var(--ng-doc-floated-focus-border-color, var(--ng-doc-primary))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-wrapper', template: ` <ng-content></ng-content> `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host[data-ng-doc-focused=true]{--ng-doc-floated-border-color: var(--ng-doc-floated-focus-border-color, var(--ng-doc-primary))}\n"] }]
+            args: [{ selector: 'ng-doc-wrapper', template: ` <ng-content></ng-content> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host[data-ng-doc-focused=true]{--ng-doc-floated-border-color: var(--ng-doc-floated-focus-border-color, var(--ng-doc-primary))}\n"] }]
         }] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-components-wrapper.mjs","sources":["../../../../libs/ui-kit/components/wrapper/wrapper.component.ts","../../../../libs/ui-kit/components/wrapper/ng-doc-ui-kit-components-wrapper.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n\tselector: 'ng-doc-wrapper',\n\ttemplate: ` <ng-content></ng-content> `,\n\tstyleUrls: ['./wrapper.component.scss'],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tstandalone: true,\n})\nexport class NgDocWrapperComponent {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MASa,qBAAqB,CAAA;8GAArB,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,0EALvB,CAAA,2BAAA,CAA6B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAK3B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,YAChB,CAAA,2BAAA,CAA6B,EAAA,eAAA,EAEtB,uBAAuB,CAAC,MAAM,cACnC,IAAI,EAAA,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA;;;ACPjB;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-components-wrapper.mjs","sources":["../../../../libs/ui-kit/components/wrapper/wrapper.component.ts","../../../../libs/ui-kit/components/wrapper/ng-doc-ui-kit-components-wrapper.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/**\n * Wraps an input and its controls; the border takes the focus color while it holds focus.\n */\n@Component({\n  selector: 'ng-doc-wrapper',\n  template: ` <ng-content></ng-content> `,\n  styleUrls: ['./wrapper.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocWrapperComponent {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;AAEG;MAOU,qBAAqB,CAAA;8GAArB,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,0EAJtB,CAAA,2BAAA,CAA6B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAI5B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBANjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,QAAA,EAChB,CAAA,2BAAA,CAA6B,EAAA,eAAA,EAEtB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA;;;ACTjD;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-directives-autofocus.mjs

@@ -1,33 +1,36 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Input, Directive } from '@angular/core';
+import { inject, ElementRef, input, Directive } from '@angular/core';
 import { NgDocFocusUtils } from '@ng-doc/ui-kit/utils';
 
+/**
+ * Focuses the host when it is created, if the host can take keyboard focus.
+ */
 class NgDocAutofocusDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
-        this.selectAll = false;
+        /** Selects the whole value of an `input` host after focusing it. */
+        this.selectAll = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectAll" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         const element = this.elementRef.nativeElement;
         if (NgDocFocusUtils.isNativeKeyboardFocusable(element)) {
             element.focus();
         }
-        if (this.selectAll && element instanceof HTMLInputElement) {
+        if (this.selectAll() && element instanceof HTMLInputElement) {
+            // The value of a bound input is written after the directive initializes.
             Promise.resolve().then(() => element.select());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocAutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NgDocAutofocusDirective, isStandalone: true, selector: "[ngDocAutofocus]", inputs: { selectAll: "selectAll" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocAutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.1", type: NgDocAutofocusDirective, isStandalone: true, selector: "[ngDocAutofocus]", inputs: { selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocAutofocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocAutofocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngDocAutofocus]',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [], propDecorators: { selectAll: [{
-                type: Input
-            }] } });
+        }], propDecorators: { selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-directives-autofocus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-directives-autofocus.mjs","sources":["../../../../libs/ui-kit/directives/autofocus/autofocus.directive.ts","../../../../libs/ui-kit/directives/autofocus/ng-doc-ui-kit-directives-autofocus.ts"],"sourcesContent":["import { Directive, ElementRef, inject, Input, OnInit } from '@angular/core';\nimport { NgDocFocusUtils } from '@ng-doc/ui-kit/utils';\n\n@Directive({\n  selector: '[ngDocAutofocus]',\n  standalone: true,\n})\nexport class NgDocAutofocusDirective implements OnInit {\n  private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  @Input()\n  selectAll: boolean = false;\n\n  /** Inserted by Angular inject() migration for backwards compatibility */\n  constructor(...args: unknown[]);\n\n  constructor() {}\n\n  ngOnInit(): void {\n    const element: HTMLElement = this.elementRef.nativeElement;\n\n    if (NgDocFocusUtils.isNativeKeyboardFocusable(element)) {\n      element.focus();\n    }\n\n    if (this.selectAll && element instanceof HTMLInputElement) {\n      Promise.resolve().then(() => element.select());\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAOa,uBAAuB,CAAA;AASlC,IAAA,WAAA,GAAA;AARQ,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;QAGhE,IAAA,CAAA,SAAS,GAAY,KAAK;IAKX;IAEf,QAAQ,GAAA;AACN,QAAA,MAAM,OAAO,GAAgB,IAAI,CAAC,UAAU,CAAC,aAAa;AAE1D,QAAA,IAAI,eAAe,CAAC,yBAAyB,CAAC,OAAO,CAAC,EAAE;YACtD,OAAO,CAAC,KAAK,EAAE;QACjB;QAEA,IAAI,IAAI,CAAC,SAAS,IAAI,OAAO,YAAY,gBAAgB,EAAE;AACzD,YAAA,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC;QAChD;IACF;8GArBW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;sBAIE;;;ACVH;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-directives-autofocus.mjs","sources":["../../../../libs/ui-kit/directives/autofocus/autofocus.directive.ts","../../../../libs/ui-kit/directives/autofocus/ng-doc-ui-kit-directives-autofocus.ts"],"sourcesContent":["import { Directive, ElementRef, inject, input, OnInit } from '@angular/core';\nimport { NgDocFocusUtils } from '@ng-doc/ui-kit/utils';\n\n/**\n * Focuses the host when it is created, if the host can take keyboard focus.\n */\n@Directive({\n  selector: '[ngDocAutofocus]',\n})\nexport class NgDocAutofocusDirective implements OnInit {\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /** Selects the whole value of an `input` host after focusing it. */\n  readonly selectAll = input<boolean>(false);\n\n  ngOnInit(): void {\n    const element: HTMLElement = this.elementRef.nativeElement;\n\n    if (NgDocFocusUtils.isNativeKeyboardFocusable(element)) {\n      element.focus();\n    }\n\n    if (this.selectAll() && element instanceof HTMLInputElement) {\n      // The value of a bound input is written after the directive initializes.\n      Promise.resolve().then(() => element.select());\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;AAEG;MAIU,uBAAuB,CAAA;AAHpC,IAAA,WAAA,GAAA;AAImB,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;;QAGhE,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,KAAK;sFAAC;AAc3C,IAAA;IAZC,QAAQ,GAAA;AACN,QAAA,MAAM,OAAO,GAAgB,IAAI,CAAC,UAAU,CAAC,aAAa;AAE1D,QAAA,IAAI,eAAe,CAAC,yBAAyB,CAAC,OAAO,CAAC,EAAE;YACtD,OAAO,CAAC,KAAK,EAAE;QACjB;QAEA,IAAI,IAAI,CAAC,SAAS,EAAE,IAAI,OAAO,YAAY,gBAAgB,EAAE;;AAE3D,YAAA,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC;QAChD;IACF;8GAjBW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAHnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;AAC7B,iBAAA;;;ACRD;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-directives-checked-change.mjs

@@ -1,41 +1,45 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, EventEmitter, HostListener, Output, Input, Directive } from '@angular/core';
+import { input, output, linkedSignal, Directive } from '@angular/core';
 
+/**
+ * Binds the checked state of a native checkbox: `true`, `false`, or `null` for the
+ * indeterminate state. Use `[ngDocChecked]` and `(ngDocCheckedChange)`, or both at once with
+ * `[(ngDocChecked)]`.
+ */
 class NgDocCheckedChangeDirective {
-    set ngDocChecked(checked) {
-        this.updateProperty('checked', checked || false);
-        this.updateProperty('indeterminate', checked === null);
-    }
     constructor() {
-        this.element = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this.ngDocCheckedChange = new EventEmitter();
-        this.updateProperty('checked', false);
+        // An input and a separate output rather than `model()`: the change event carries the user's
+        // choice, which is never indeterminate, so it stays a `boolean`.
+        /** Checked state; `null` shows the checkbox as indeterminate. */
+        // eslint-disable-next-line @angular-eslint/prefer-signal-model
+        this.ngDocChecked = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ngDocChecked" }] : /* istanbul ignore next */ []));
+        /** Emits the new checked state when the user changes it. */
+        this.ngDocCheckedChange = output();
+        /** What the checkbox shows: the bound state until the user changes it. */
+        this.state = linkedSignal(() => this.ngDocChecked(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     }
     onChange(target) {
-        this.updateProperty('indeterminate', false);
-        this.ngDocCheckedChange.emit(target instanceof HTMLInputElement ? target.checked : false);
-    }
-    updateProperty(property, value) {
-        this.renderer.setProperty(this.element.nativeElement, property, value);
+        const checked = target instanceof HTMLInputElement ? target.checked : false;
+        // The user's choice ends the indeterminate state, even when the bound value stays `null`.
+        this.state.set(checked);
+        this.ngDocCheckedChange.emit(checked);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocCheckedChangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NgDocCheckedChangeDirective, isStandalone: true, selector: "input[ngDocChecked], input[ngDocCheckedChange]", inputs: { ngDocChecked: "ngDocChecked" }, outputs: { ngDocCheckedChange: "ngDocCheckedChange" }, host: { listeners: { "change": "onChange($event.target)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocCheckedChangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.1", type: NgDocCheckedChangeDirective, isStandalone: true, selector: "input[ngDocChecked], input[ngDocCheckedChange]", inputs: { ngDocChecked: { classPropertyName: "ngDocChecked", publicName: "ngDocChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ngDocCheckedChange: "ngDocCheckedChange" }, host: { listeners: { "change": "onChange($event.target)" }, properties: { "checked": "!!state()", "indeterminate": "state() === null" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocCheckedChangeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocCheckedChangeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[ngDocChecked], input[ngDocCheckedChange]',
-                    standalone: true,
+                    host: {
+                        '[checked]': '!!state()',
+                        '[indeterminate]': 'state() === null',
+                        '(change)': 'onChange($event.target)',
+                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { ngDocChecked: [{
-                type: Input
-            }], ngDocCheckedChange: [{
-                type: Output
-            }], onChange: [{
-                type: HostListener,
-                args: ['change', ['$event.target']]
-            }] } });
+        }], propDecorators: { ngDocChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngDocChecked", required: false }] }], ngDocCheckedChange: [{ type: i0.Output, args: ["ngDocCheckedChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-directives-checked-change.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-directives-checked-change.mjs","sources":["../../../../libs/ui-kit/directives/checked-change/checked-change.directive.ts","../../../../libs/ui-kit/directives/checked-change/ng-doc-ui-kit-directives-checked-change.ts"],"sourcesContent":["import {\n  Directive,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  inject,\n  Input,\n  Output,\n  Renderer2,\n} from '@angular/core';\n\n@Directive({\n  selector: 'input[ngDocChecked], input[ngDocCheckedChange]',\n  standalone: true,\n})\nexport class NgDocCheckedChangeDirective {\n  private readonly element = inject<ElementRef<HTMLInputElement>>(ElementRef);\n  private readonly renderer = inject(Renderer2);\n\n  @Input()\n  set ngDocChecked(checked: null | boolean) {\n    this.updateProperty('checked', checked || false);\n    this.updateProperty('indeterminate', checked === null);\n  }\n\n  @Output()\n  readonly ngDocCheckedChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  constructor() {\n    this.updateProperty('checked', false);\n  }\n\n  @HostListener('change', ['$event.target'])\n  onChange(target: EventTarget | null): void {\n    this.updateProperty('indeterminate', false);\n    this.ngDocCheckedChange.emit(target instanceof HTMLInputElement ? target.checked : false);\n  }\n\n  private updateProperty(property: 'checked' | 'indeterminate', value: boolean): void {\n    this.renderer.setProperty(this.element.nativeElement, property, value);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAea,2BAA2B,CAAA;IAItC,IACI,YAAY,CAAC,OAAuB,EAAA;QACtC,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,OAAO,IAAI,KAAK,CAAC;QAChD,IAAI,CAAC,cAAc,CAAC,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD;AAKA,IAAA,WAAA,GAAA;AAZiB,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAA+B,UAAU,CAAC;AAC1D,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;AASpC,QAAA,IAAA,CAAA,kBAAkB,GAA0B,IAAI,YAAY,EAAW;AAG9E,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,KAAK,CAAC;IACvC;AAGA,IAAA,QAAQ,CAAC,MAA0B,EAAA;AACjC,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,EAAE,KAAK,CAAC;AAC3C,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,YAAY,gBAAgB,GAAG,MAAM,CAAC,OAAO,GAAG,KAAK,CAAC;IAC3F;IAEQ,cAAc,CAAC,QAAqC,EAAE,KAAc,EAAA;AAC1E,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,CAAC;IACxE;8GAzBW,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA3B,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gDAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAA3B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAJvC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gDAAgD;AAC1D,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;sBAKE;;sBAMA;;sBAOA,YAAY;uBAAC,QAAQ,EAAE,CAAC,eAAe,CAAC;;;AChC3C;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-directives-checked-change.mjs","sources":["../../../../libs/ui-kit/directives/checked-change/checked-change.directive.ts","../../../../libs/ui-kit/directives/checked-change/ng-doc-ui-kit-directives-checked-change.ts"],"sourcesContent":["import { Directive, input, linkedSignal, output } from '@angular/core';\n\n/**\n * Binds the checked state of a native checkbox: `true`, `false`, or `null` for the\n * indeterminate state. Use `[ngDocChecked]` and `(ngDocCheckedChange)`, or both at once with\n * `[(ngDocChecked)]`.\n */\n@Directive({\n  selector: 'input[ngDocChecked], input[ngDocCheckedChange]',\n  host: {\n    '[checked]': '!!state()',\n    '[indeterminate]': 'state() === null',\n    '(change)': 'onChange($event.target)',\n  },\n})\nexport class NgDocCheckedChangeDirective {\n  // An input and a separate output rather than `model()`: the change event carries the user's\n  // choice, which is never indeterminate, so it stays a `boolean`.\n  /** Checked state; `null` shows the checkbox as indeterminate. */\n  // eslint-disable-next-line @angular-eslint/prefer-signal-model\n  readonly ngDocChecked = input<boolean | null>(false);\n\n  /** Emits the new checked state when the user changes it. */\n  readonly ngDocCheckedChange = output<boolean>();\n\n  /** What the checkbox shows: the bound state until the user changes it. */\n  protected readonly state = linkedSignal<boolean | null>(() => this.ngDocChecked());\n\n  protected onChange(target: EventTarget | null): void {\n    const checked: boolean = target instanceof HTMLInputElement ? target.checked : false;\n\n    // The user's choice ends the indeterminate state, even when the bound value stays `null`.\n    this.state.set(checked);\n    this.ngDocCheckedChange.emit(checked);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;;AAIG;MASU,2BAA2B,CAAA;AARxC,IAAA,WAAA,GAAA;;;;;QAaW,IAAA,CAAA,YAAY,GAAG,KAAK,CAAiB,KAAK;yFAAC;;QAG3C,IAAA,CAAA,kBAAkB,GAAG,MAAM,EAAW;;QAG5B,IAAA,CAAA,KAAK,GAAG,YAAY,CAAiB,MAAM,IAAI,CAAC,YAAY,EAAE;kFAAC;AASnF,IAAA;AAPW,IAAA,QAAQ,CAAC,MAA0B,EAAA;AAC3C,QAAA,MAAM,OAAO,GAAY,MAAM,YAAY,gBAAgB,GAAG,MAAM,CAAC,OAAO,GAAG,KAAK;;AAGpF,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;AACvB,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC;IACvC;8GAnBW,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA3B,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gDAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,eAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAA3B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBARvC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gDAAgD;AAC1D,oBAAA,IAAI,EAAE;AACJ,wBAAA,WAAW,EAAE,WAAW;AACxB,wBAAA,iBAAiB,EAAE,kBAAkB;AACrC,wBAAA,UAAU,EAAE,yBAAyB;AACtC,qBAAA;AACF,iBAAA;;;ACdD;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-directives-data.mjs

@@ -1,21 +1,24 @@
 import * as i0 from '@angular/core';
 import { inject, TemplateRef, ViewContainerRef, Directive } from '@angular/core';
 
+/**
+ * Keeps its template unrendered, so that a parent can query it (with `read: TemplateRef`) and
+ * render it somewhere else, for example in a dropdown.
+ */
 class NgDocDataDirective {
     constructor() {
         this.template = inject(TemplateRef);
         this.viewContainerRef = inject(ViewContainerRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NgDocDataDirective, isStandalone: true, selector: "[ngDocData]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: NgDocDataDirective, isStandalone: true, selector: "[ngDocData]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocDataDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDataDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngDocData]',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-directives-data.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-directives-data.mjs","sources":["../../../../libs/ui-kit/directives/data/data.directive.ts","../../../../libs/ui-kit/directives/data/ng-doc-ui-kit-directives-data.ts"],"sourcesContent":["import { Directive, inject, TemplateRef, ViewContainerRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngDocData]',\n  standalone: true,\n})\nexport class NgDocDataDirective {\n  protected template = inject<TemplateRef<unknown>>(TemplateRef);\n  protected viewContainerRef = inject(ViewContainerRef);\n\n  /** Inserted by Angular inject() migration for backwards compatibility */\n  constructor(...args: unknown[]);\n\n  constructor() {}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAMa,kBAAkB,CAAA;AAO7B,IAAA,WAAA,GAAA;AANU,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAuB,WAAW,CAAC;AACpD,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC;IAKtC;8GAPJ,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACLD;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-directives-data.mjs","sources":["../../../../libs/ui-kit/directives/data/data.directive.ts","../../../../libs/ui-kit/directives/data/ng-doc-ui-kit-directives-data.ts"],"sourcesContent":["import { Directive, inject, TemplateRef, ViewContainerRef } from '@angular/core';\n\n/**\n * Keeps its template unrendered, so that a parent can query it (with `read: TemplateRef`) and\n * render it somewhere else, for example in a dropdown.\n */\n@Directive({\n  selector: '[ngDocData]',\n})\nexport class NgDocDataDirective {\n  protected readonly template = inject<TemplateRef<unknown>>(TemplateRef);\n  protected readonly viewContainerRef = inject(ViewContainerRef);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;AAGG;MAIU,kBAAkB,CAAA;AAH/B,IAAA,WAAA,GAAA;AAIqB,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAuB,WAAW,CAAC;AACpD,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC/D,IAAA;8GAHY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAH9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACxB,iBAAA;;;ACRD;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-directives-dropdown-handler.mjs

@@ -1,36 +1,37 @@
 import * as i0 from '@angular/core';
-import { HostListener, Input, Directive } from '@angular/core';
-import '@ng-doc/ui-kit/components/dropdown';
+import { input, Directive } from '@angular/core';
 
+/** Opens the dropdown on ArrowDown and closes it on Escape while the host has focus. */
 class NgDocDropdownHandlerDirective {
+    constructor() {
+        /** The dropdown the host controls. */
+        this.dropdown = input(undefined, { ...(ngDevMode ? { debugName: "dropdown" } : /* istanbul ignore next */ {}), alias: 'ngDocDropdownHandler' });
+    }
     keyboardEvent(event) {
-        if (this.dropdown) {
-            if (event.key === 'ArrowDown' && !this.dropdown.isOpened) {
+        const dropdown = this.dropdown();
+        if (dropdown) {
+            if (event.key === 'ArrowDown' && !dropdown.isOpened) {
                 event.preventDefault();
-                this.dropdown.open();
+                dropdown.open();
             }
-            if (event.key === 'Escape' && this.dropdown.isOpened) {
+            if (event.key === 'Escape' && dropdown.isOpened) {
                 event.preventDefault();
-                this.dropdown.close();
+                dropdown.close();
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocDropdownHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NgDocDropdownHandlerDirective, isStandalone: true, selector: "[ngDocDropdownHandler]", inputs: { dropdown: ["ngDocDropdownHandler", "dropdown"] }, host: { listeners: { "keydown": "keyboardEvent($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDropdownHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.1", type: NgDocDropdownHandlerDirective, isStandalone: true, selector: "[ngDocDropdownHandler]", inputs: { dropdown: { classPropertyName: "dropdown", publicName: "ngDocDropdownHandler", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "keyboardEvent($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocDropdownHandlerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDropdownHandlerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngDocDropdownHandler]',
-                    standalone: true,
+                    host: {
+                        '(keydown)': 'keyboardEvent($event)',
+                    },
                 }]
-        }], propDecorators: { dropdown: [{
-                type: Input,
-                args: ['ngDocDropdownHandler']
-            }], keyboardEvent: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+        }], propDecorators: { dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngDocDropdownHandler", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-directives-dropdown-handler.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-ui-kit-directives-dropdown-handler.mjs","sources":["../../../../libs/ui-kit/directives/dropdown-handler/dropdown-handler.directive.ts","../../../../libs/ui-kit/directives/dropdown-handler/ng-doc-ui-kit-directives-dropdown-handler.ts"],"sourcesContent":["import { Directive, HostListener, Input } from '@angular/core';\nimport { NgDocDropdownComponent } from '@ng-doc/ui-kit/components/dropdown';\n\n@Directive({\n\tselector: '[ngDocDropdownHandler]',\n\tstandalone: true,\n})\nexport class NgDocDropdownHandlerDirective {\n\t@Input('ngDocDropdownHandler')\n\tdropdown?: NgDocDropdownComponent;\n\n\t@HostListener('keydown', ['$event'])\n\tkeyboardEvent(event: KeyboardEvent): void {\n\t\tif (this.dropdown) {\n\t\t\tif (event.key === 'ArrowDown' && !this.dropdown.isOpened) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.dropdown.open();\n\t\t\t}\n\n\t\t\tif (event.key === 'Escape' && this.dropdown.isOpened) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.dropdown.close();\n\t\t\t}\n\t\t}\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAOa,6BAA6B,CAAA;AAKzC,IAAA,aAAa,CAAC,KAAoB,EAAA;AACjC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;gBACzD,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;YACrB;AAEA,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;gBACrD,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;YACtB;QACD;IACD;8GAjBY,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA7B,6BAA6B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,CAAA,sBAAA,EAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,SAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAA7B,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAJzC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,QAAQ,EAAE,wBAAwB;AAClC,oBAAA,UAAU,EAAE,IAAI;AAChB,iBAAA;;sBAEC,KAAK;uBAAC,sBAAsB;;sBAG5B,YAAY;uBAAC,SAAS,EAAE,CAAC,QAAQ,CAAC;;;ACXpC;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-ui-kit-directives-dropdown-handler.mjs","sources":["../../../../libs/ui-kit/directives/dropdown-handler/dropdown-handler.directive.ts","../../../../libs/ui-kit/directives/dropdown-handler/ng-doc-ui-kit-directives-dropdown-handler.ts"],"sourcesContent":["import { Directive, input } from '@angular/core';\nimport { NgDocDropdownComponent } from '@ng-doc/ui-kit/components/dropdown';\n\n/** Opens the dropdown on ArrowDown and closes it on Escape while the host has focus. */\n@Directive({\n  selector: '[ngDocDropdownHandler]',\n  host: {\n    '(keydown)': 'keyboardEvent($event)',\n  },\n})\nexport class NgDocDropdownHandlerDirective {\n  /** The dropdown the host controls. */\n  readonly dropdown = input<NgDocDropdownComponent | undefined>(undefined, {\n    alias: 'ngDocDropdownHandler',\n  });\n\n  keyboardEvent(event: KeyboardEvent): void {\n    const dropdown: NgDocDropdownComponent | undefined = this.dropdown();\n\n    if (dropdown) {\n      if (event.key === 'ArrowDown' && !dropdown.isOpened) {\n        event.preventDefault();\n        dropdown.open();\n      }\n\n      if (event.key === 'Escape' && dropdown.isOpened) {\n        event.preventDefault();\n        dropdown.close();\n      }\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;MAOa,6BAA6B,CAAA;AAN1C,IAAA,WAAA,GAAA;;QAQW,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAqC,SAAS,gFACrE,KAAK,EAAE,sBAAsB,EAAA,CAC7B;AAiBH,IAAA;AAfC,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,MAAM,QAAQ,GAAuC,IAAI,CAAC,QAAQ,EAAE;QAEpE,IAAI,QAAQ,EAAE;YACZ,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;gBACnD,KAAK,CAAC,cAAc,EAAE;gBACtB,QAAQ,CAAC,IAAI,EAAE;YACjB;YAEA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,QAAQ,CAAC,QAAQ,EAAE;gBAC/C,KAAK,CAAC,cAAc,EAAE;gBACtB,QAAQ,CAAC,KAAK,EAAE;YAClB;QACF;IACF;8GApBW,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA7B,6BAA6B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,SAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAA7B,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBANzC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,wBAAwB;AAClC,oBAAA,IAAI,EAAE;AACJ,wBAAA,WAAW,EAAE,uBAAuB;AACrC,qBAAA;AACF,iBAAA;;;ACTD;;AAEG;;;;"}