@ngneat/cmdk
Version:
<p align="center"> <img width="20%" height="20%" src="./src/assets/ngneat%20cdk.svg"> </p>
76 lines • 10.5 kB
JavaScript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, HostBinding, inject, Input, ViewChild, } from '@angular/core';
import { ItemDirective } from '../../directives/item/item.directive';
import * as i0 from "@angular/core";
let cmdkListId = 0;
export class ListComponent {
constructor() {
this._active = false;
this._elementRef = inject((ElementRef));
this.listId = `cmdk-list-${cmdkListId++}`;
this._cdr = inject(ChangeDetectorRef);
}
get filteredItems() {
return this.items?.filter((item) => item.filtered);
}
get active() {
return this._active;
}
set active(value) {
this._active = value;
this._cdr.markForCheck();
}
get filtered() {
return this.filteredItems.length > 0;
}
get id() {
return this.listId;
}
get activeClass() {
return this.active;
}
ngAfterViewInit() {
if (this.heightEle.nativeElement && this._elementRef.nativeElement) {
const el = this.heightEle.nativeElement;
const wrapper = this._elementRef.nativeElement;
this._observer = new ResizeObserver(() => {
this._animationFrame = requestAnimationFrame(() => {
const height = el.getBoundingClientRect().height;
wrapper.style.setProperty(`--cmdk-list-height`, height.toFixed(1) + 'px');
this._cdr.markForCheck();
});
});
this._observer.observe(el);
}
}
ngOnDestroy() {
if (this._animationFrame !== undefined) {
cancelAnimationFrame(this._animationFrame);
}
if (this._observer && this.heightEle.nativeElement) {
this._observer.unobserve(this.heightEle.nativeElement);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, isStandalone: true, selector: "cmdk-list", inputs: { ariaLabel: "ariaLabel" }, host: { properties: { "id": "this.id", "class.cmdk-list-active": "this.activeClass" }, classAttribute: "cmdk-list" }, queries: [{ propertyName: "items", predicate: ItemDirective, descendants: true }], viewQueries: [{ propertyName: "heightEle", first: true, predicate: ["height"], descendants: true }], ngImport: i0, template: "<div class=\"cmdk-list-content\" role=\"listbox\" [attr.aria-label]=\"ariaLabel\" #height>\n <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, decorators: [{
type: Component,
args: [{ selector: 'cmdk-list', changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'cmdk-list',
}, standalone: true, template: "<div class=\"cmdk-list-content\" role=\"listbox\" [attr.aria-label]=\"ariaLabel\" #height>\n <ng-content></ng-content>\n</div>\n" }]
}], propDecorators: { ariaLabel: [{
type: Input
}], items: [{
type: ContentChildren,
args: [ItemDirective, { descendants: true }]
}], heightEle: [{
type: ViewChild,
args: ['height']
}], id: [{
type: HostBinding,
args: ['id']
}], activeClass: [{
type: HostBinding,
args: ['class.cmdk-list-active']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ25lYXQvY21kay9zcmMvbGliL2NvbXBvbmVudHMvbGlzdC9saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nbmVhdC9jbWRrL3NyYy9saWIvY29tcG9uZW50cy9saXN0L2xpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLHVCQUF1QixFQUN2QixpQkFBaUIsRUFDakIsU0FBUyxFQUNULGVBQWUsRUFDZixVQUFVLEVBQ1YsV0FBVyxFQUNYLE1BQU0sRUFDTixLQUFLLEVBR0wsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQzs7QUFHckUsSUFBSSxVQUFVLEdBQUcsQ0FBQyxDQUFDO0FBWW5CLE1BQU0sT0FBTyxhQUFhO0lBVjFCO1FBa0JVLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFDaEIsZ0JBQVcsR0FBRyxNQUFNLENBQWtCLENBQUEsVUFBZSxDQUFBLENBQUMsQ0FBQztRQUV0RCxXQUFNLEdBQUcsYUFBYSxVQUFVLEVBQUUsRUFBRSxDQUFDO1FBQzlDLFNBQUksR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQztLQXdEbEM7SUFyREMsSUFBSSxhQUFhO1FBQ2YsT0FBTyxJQUFJLENBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3JELENBQUM7SUFFRCxJQUFJLE1BQU07UUFDUixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDdEIsQ0FBQztJQUNELElBQUksTUFBTSxDQUFDLEtBQWM7UUFDdkIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7UUFDckIsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUMzQixDQUFDO0lBRUQsSUFBSSxRQUFRO1FBQ1YsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUM7SUFDdkMsQ0FBQztJQUVELElBQ0ksRUFBRTtRQUNKLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQixDQUFDO0lBRUQsSUFDSSxXQUFXO1FBQ2IsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDLGFBQWEsSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsRUFBRTtZQUNsRSxNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLGFBQWEsQ0FBQztZQUN4QyxNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQztZQUUvQyxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksY0FBYyxDQUFDLEdBQUcsRUFBRTtnQkFDdkMsSUFBSSxDQUFDLGVBQWUsR0FBRyxxQkFBcUIsQ0FBQyxHQUFHLEVBQUU7b0JBQ2hELE1BQU0sTUFBTSxHQUFHLEVBQUUsQ0FBQyxxQkFBcUIsRUFBRSxDQUFDLE1BQU0sQ0FBQztvQkFDakQsT0FBTyxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQ3ZCLG9CQUFvQixFQUNwQixNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FDekIsQ0FBQztvQkFDRixJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO2dCQUMzQixDQUFDLENBQUMsQ0FBQztZQUNMLENBQUMsQ0FBQyxDQUFDO1lBQ0gsSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDLENBQUM7U0FDNUI7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLGVBQWUsS0FBSyxTQUFTLEVBQUU7WUFDdEMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDO1NBQzVDO1FBQ0QsSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxFQUFFO1lBQ2xELElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxDQUFDLENBQUM7U0FDeEQ7SUFDSCxDQUFDOytHQW5FVSxhQUFhO21HQUFiLGFBQWEscVBBR1AsYUFBYSxxSkNoQ2hDLG1JQUdBOzs0RkQwQmEsYUFBYTtrQkFWekIsU0FBUzsrQkFDSSxXQUFXLG1CQUVKLHVCQUF1QixDQUFDLE1BQU0sUUFFekM7d0JBQ0YsS0FBSyxFQUFFLFdBQVc7cUJBQ3JCLGNBQ1csSUFBSTs4QkFHVCxTQUFTO3NCQUFqQixLQUFLO2dCQUdOLEtBQUs7c0JBREosZUFBZTt1QkFBQyxhQUFhLEVBQUUsRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFO2dCQUdoQyxTQUFTO3NCQUE3QixTQUFTO3VCQUFDLFFBQVE7Z0JBMEJmLEVBQUU7c0JBREwsV0FBVzt1QkFBQyxJQUFJO2dCQU1iLFdBQVc7c0JBRGQsV0FBVzt1QkFBQyx3QkFBd0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgaW5qZWN0LFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBRdWVyeUxpc3QsXG4gIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJdGVtRGlyZWN0aXZlIH0gZnJvbSAnLi4vLi4vZGlyZWN0aXZlcy9pdGVtL2l0ZW0uZGlyZWN0aXZlJztcbmltcG9ydCB7IENtZGtMaXN0UHJvcHMgfSBmcm9tICcuLi8uLi90eXBlcyc7XG5cbmxldCBjbWRrTGlzdElkID0gMDtcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdjbWRrLWxpc3QnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9saXN0LmNvbXBvbmVudC5odG1sJyxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L25vLWhvc3QtbWV0YWRhdGEtcHJvcGVydHlcbiAgICBob3N0OiB7XG4gICAgICAgIGNsYXNzOiAnY21kay1saXN0JyxcbiAgICB9LFxuICAgIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIExpc3RDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3ksIENtZGtMaXN0UHJvcHMge1xuICBASW5wdXQoKSBhcmlhTGFiZWw/OiBzdHJpbmc7XG5cbiAgQENvbnRlbnRDaGlsZHJlbihJdGVtRGlyZWN0aXZlLCB7IGRlc2NlbmRhbnRzOiB0cnVlIH0pXG4gIGl0ZW1zITogUXVlcnlMaXN0PEl0ZW1EaXJlY3RpdmU+O1xuXG4gIEBWaWV3Q2hpbGQoJ2hlaWdodCcpIGhlaWdodEVsZSE6IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+O1xuXG4gIHByaXZhdGUgX2FjdGl2ZSA9IGZhbHNlO1xuICBwcml2YXRlIF9lbGVtZW50UmVmID0gaW5qZWN0PEVsZW1lbnRSZWY8YW55Pj4oRWxlbWVudFJlZjxhbnk+KTtcbiAgcHJpdmF0ZSBfYW5pbWF0aW9uRnJhbWU6IG51bWJlciB8IHVuZGVmaW5lZDtcbiAgcmVhZG9ubHkgbGlzdElkID0gYGNtZGstbGlzdC0ke2NtZGtMaXN0SWQrK31gO1xuICBfY2RyID0gaW5qZWN0KENoYW5nZURldGVjdG9yUmVmKTtcbiAgcHJpdmF0ZSBfb2JzZXJ2ZXI6IFJlc2l6ZU9ic2VydmVyIHwgdW5kZWZpbmVkO1xuXG4gIGdldCBmaWx0ZXJlZEl0ZW1zKCkge1xuICAgIHJldHVybiB0aGlzLml0ZW1zPy5maWx0ZXIoKGl0ZW0pID0+IGl0ZW0uZmlsdGVyZWQpO1xuICB9XG5cbiAgZ2V0IGFjdGl2ZSgpIHtcbiAgICByZXR1cm4gdGhpcy5fYWN0aXZlO1xuICB9XG4gIHNldCBhY3RpdmUodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9hY3RpdmUgPSB2YWx1ZTtcbiAgICB0aGlzLl9jZHIubWFya0ZvckNoZWNrKCk7XG4gIH1cblxuICBnZXQgZmlsdGVyZWQoKSB7XG4gICAgcmV0dXJuIHRoaXMuZmlsdGVyZWRJdGVtcy5sZW5ndGggPiAwO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdpZCcpXG4gIGdldCBpZCgpIHtcbiAgICByZXR1cm4gdGhpcy5saXN0SWQ7XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmNtZGstbGlzdC1hY3RpdmUnKVxuICBnZXQgYWN0aXZlQ2xhc3MoKSB7XG4gICAgcmV0dXJuIHRoaXMuYWN0aXZlO1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIGlmICh0aGlzLmhlaWdodEVsZS5uYXRpdmVFbGVtZW50ICYmIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCkge1xuICAgICAgY29uc3QgZWwgPSB0aGlzLmhlaWdodEVsZS5uYXRpdmVFbGVtZW50O1xuICAgICAgY29uc3Qgd3JhcHBlciA9IHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcblxuICAgICAgdGhpcy5fb2JzZXJ2ZXIgPSBuZXcgUmVzaXplT2JzZXJ2ZXIoKCkgPT4ge1xuICAgICAgICB0aGlzLl9hbmltYXRpb25GcmFtZSA9IHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB7XG4gICAgICAgICAgY29uc3QgaGVpZ2h0ID0gZWwuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkuaGVpZ2h0O1xuICAgICAgICAgIHdyYXBwZXIuc3R5bGUuc2V0UHJvcGVydHkoXG4gICAgICAgICAgICBgLS1jbWRrLWxpc3QtaGVpZ2h0YCxcbiAgICAgICAgICAgIGhlaWdodC50b0ZpeGVkKDEpICsgJ3B4J1xuICAgICAgICAgICk7XG4gICAgICAgICAgdGhpcy5fY2RyLm1hcmtGb3JDaGVjaygpO1xuICAgICAgICB9KTtcbiAgICAgIH0pO1xuICAgICAgdGhpcy5fb2JzZXJ2ZXIub2JzZXJ2ZShlbCk7XG4gICAgfVxuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgaWYgKHRoaXMuX2FuaW1hdGlvbkZyYW1lICE9PSB1bmRlZmluZWQpIHtcbiAgICAgIGNhbmNlbEFuaW1hdGlvbkZyYW1lKHRoaXMuX2FuaW1hdGlvbkZyYW1lKTtcbiAgICB9XG4gICAgaWYgKHRoaXMuX29ic2VydmVyICYmIHRoaXMuaGVpZ2h0RWxlLm5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgIHRoaXMuX29ic2VydmVyLnVub2JzZXJ2ZSh0aGlzLmhlaWdodEVsZS5uYXRpdmVFbGVtZW50KTtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJjbWRrLWxpc3QtY29udGVudFwiIHJvbGU9XCJsaXN0Ym94XCIgW2F0dHIuYXJpYS1sYWJlbF09XCJhcmlhTGFiZWxcIiAjaGVpZ2h0PlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==