@ng-doc/ui-kit
Version:
<!-- 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>
114 lines (110 loc) • 6.81 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, NgZone, ElementRef, forwardRef, ContentChild, ViewChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { NgDocBaseInput, NgDocOverlayHost, NgDocInputHost, NgDocDisplayValueHost, NgDocListHost } from '@ng-doc/ui-kit/classes';
import { NgDocDropdownComponent } from '@ng-doc/ui-kit/components/dropdown';
import { NgDocDropdownHandlerDirective } from '@ng-doc/ui-kit/directives/dropdown-handler';
import { NgDocFocusCatcherDirective } from '@ng-doc/ui-kit/directives/focus-catcher';
import { ngDocZoneOptimize } from '@ng-doc/ui-kit/observables';
import { DIControl, DIStateControl, injectHostControl, DI_DEFAULT_COMPARE, provideHostControl, provideCompareHost } from 'di-controls';
import { filter } from 'rxjs/operators';
class NgDocComboboxHostComponent extends DIControl {
constructor() {
super({
host: injectHostControl({ skipSelf: true, optional: true }),
onChildControlChange: (control) => {
if (control instanceof DIStateControl) {
this.dropdown?.close();
}
},
});
this.compareFn = DI_DEFAULT_COMPARE;
this.displayValueFn = String;
this.positions = ['bottom-center', 'top-center'];
this.ngZone = inject(NgZone);
}
ngAfterContentInit() {
this.inputControl?.changes
.pipe(filter(() => !!this.inputControl?.isFocused), ngDocZoneOptimize(this.ngZone), takeUntilDestroyed(this['destroyRef']))
.subscribe(() => this.dropdown?.open());
}
get listHostOrigin() {
return this.inputControl?.elementRef;
}
get searchText() {
return this.hasValue ? '' : this.inputControl?.value || '';
}
get width() {
return this.origin?.nativeElement.offsetWidth || 0;
}
get panelClass() {
return `ng-doc-combobox-host-overlay`;
}
clickEvent() {
if (!this.disabled) {
this.dropdown?.open();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocComboboxHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgDocComboboxHostComponent, isStandalone: true, selector: "ng-doc-combobox-host", inputs: { compareFn: "compareFn", displayValueFn: "displayValueFn" }, providers: [
provideHostControl(forwardRef(() => NgDocComboboxHostComponent)),
provideCompareHost(forwardRef(() => NgDocComboboxHostComponent)),
{
provide: NgDocOverlayHost,
useExisting: forwardRef(() => NgDocComboboxHostComponent),
},
{
provide: NgDocInputHost,
useExisting: forwardRef(() => NgDocComboboxHostComponent),
},
{
provide: NgDocDisplayValueHost,
useExisting: forwardRef(() => NgDocComboboxHostComponent),
},
{
provide: NgDocListHost,
useExisting: forwardRef(() => NgDocComboboxHostComponent),
},
], queries: [{ propertyName: "dropdown", first: true, predicate: NgDocDropdownComponent, descendants: true }, { propertyName: "inputControl", first: true, predicate: NgDocBaseInput, descendants: true }], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<label\n\tclass=\"ng-doc-dropdown-host\"\n\tngDocFocusCatcher\n\t[ngDocDropdownHandler]=\"dropdown\"\n\t(click)=\"clickEvent()\"\n\t#origin>\n\t<ng-content></ng-content>\n</label>\n", styles: [":host{position:relative;display:block;width:100%}::ng-deep .ng-doc-combobox-host-overlay .ng-doc-overlay-content{display:block;max-height:300px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgDocFocusCatcherDirective, selector: "[ngDocFocusCatcher]", outputs: ["focusEvent", "blurEvent"], exportAs: ["ngDocFocusCatcher"] }, { kind: "directive", type: NgDocDropdownHandlerDirective, selector: "[ngDocDropdownHandler]", inputs: ["ngDocDropdownHandler"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocComboboxHostComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-combobox-host', providers: [
provideHostControl(forwardRef(() => NgDocComboboxHostComponent)),
provideCompareHost(forwardRef(() => NgDocComboboxHostComponent)),
{
provide: NgDocOverlayHost,
useExisting: forwardRef(() => NgDocComboboxHostComponent),
},
{
provide: NgDocInputHost,
useExisting: forwardRef(() => NgDocComboboxHostComponent),
},
{
provide: NgDocDisplayValueHost,
useExisting: forwardRef(() => NgDocComboboxHostComponent),
},
{
provide: NgDocListHost,
useExisting: forwardRef(() => NgDocComboboxHostComponent),
},
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocFocusCatcherDirective, NgDocDropdownHandlerDirective], template: "<label\n\tclass=\"ng-doc-dropdown-host\"\n\tngDocFocusCatcher\n\t[ngDocDropdownHandler]=\"dropdown\"\n\t(click)=\"clickEvent()\"\n\t#origin>\n\t<ng-content></ng-content>\n</label>\n", styles: [":host{position:relative;display:block;width:100%}::ng-deep .ng-doc-combobox-host-overlay .ng-doc-overlay-content{display:block;max-height:300px;overflow:auto}\n"] }]
}], ctorParameters: () => [], propDecorators: { compareFn: [{
type: Input
}], displayValueFn: [{
type: Input
}], origin: [{
type: ViewChild,
args: ['origin', { read: ElementRef, static: true }]
}], dropdown: [{
type: ContentChild,
args: [NgDocDropdownComponent]
}], inputControl: [{
type: ContentChild,
args: [NgDocBaseInput]
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocComboboxHostComponent };
//# sourceMappingURL=ng-doc-ui-kit-cdk-combobox-host.mjs.map