@ng-doc/ui-kit/fesm2022/ng-doc-ui-kit-components-list.mjs

<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>

import { ListKeyManager } from '@angular/cdk/a11y';
import * as i0 from '@angular/core';
import { inject, ElementRef, NgZone, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { asArray } from '@ng-doc/core/helpers/as-array';
import { NgDocListHost } from '@ng-doc/ui-kit/classes/list-host';
import { toElement } from '@ng-doc/ui-kit/helpers';
import { merge, fromEvent, NEVER } from 'rxjs';
import { takeUntil, delayWhen, repeat, filter } from 'rxjs/operators';

class NgDocListComponent {
    constructor() {
        this.elementRef = inject(ElementRef);
        this.ngZone = inject(NgZone);
        this.listHost = inject(NgDocListHost, { optional: true });
        this.keyManager = null;
        this.items = new Set();
        const origin = this.listHost?.listHostOrigin
            ? toElement(this.listHost?.listHostOrigin)
            : null;
        const list = toElement(this.elementRef);
        merge(fromEvent(list, 'keydown'), origin
            ? fromEvent(origin, 'keydown').pipe(takeUntil(fromEvent(list, 'keydown')), delayWhen(() => this.ngZone.onStable), repeat())
            : NEVER)
            .pipe(filter((event) => !event.defaultPrevented), takeUntilDestroyed())
            .subscribe((event) => {
            const typedEvent = event;
            switch (typedEvent.key) {
                case 'Enter':
                    this.keyManager?.activeItem?.selectByUser();
                    typedEvent.preventDefault();
                    break;
            }
            this.keyManager?.activeItem?.setInactiveStyles();
            this.keyManager?.onKeydown(typedEvent);
            this.keyManager?.activeItem?.setActiveStyles();
            if (this.keyManager?.activeItem)
                toElement(this.keyManager?.activeItem.elementRef).scrollIntoView({ block: 'nearest' });
        });
    }
    registerItem(item) {
        this.items.add(item);
        this.keyManager?.activeItem?.setInactiveStyles();
        this.keyManager = new ListKeyManager(asArray(this.items)).withVerticalOrientation(true);
    }
    unregisterItem(item) {
        this.items.delete(item);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: NgDocListComponent, isStandalone: true, selector: "ng-doc-list", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ng-doc-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
        }], ctorParameters: () => [] });

/**
 * Generated bundle index. Do not edit.
 */

export { NgDocListComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-list.mjs.map