@ng-doc/app
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>
82 lines (78 loc) • 8.47 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { NgIf, NgTemplateOutlet, NgFor, AsyncPipe } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, Component, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterLink } from '@angular/router';
import { NgDocSearchEngine } from '@ng-doc/app/classes';
import { NgDocSearchDialogComponent } from '@ng-doc/app/components/search-dialog';
import { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';
import { NgDocDialogService, observableState, NgDocComponentContent, NgDocButtonIconComponent, NgDocDropdownOriginDirective, NgDocIconComponent, NgDocInputWrapperComponent, NgDocInputStringDirective, NgDocHotkeyDirective, NgDocTagComponent, NgDocLetDirective, NgDocDropdownComponent, NgDocAutofocusDirective, NgDocFocusCatcherDirective, NgDocDataListComponent, NgDocTextComponent, NgDocSpinnerComponent, NgDocHighlighterPipe, NgDocExecutePipe } from '@ng-doc/ui-kit';
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
import { BehaviorSubject, NEVER } from 'rxjs';
import { skip, switchMap, shareReplay } from 'rxjs/operators';
let NgDocSearchComponent = class NgDocSearchComponent {
constructor() {
this.query = new BehaviorSubject('');
this.dialog = inject(NgDocDialogService);
this.searchEngine = inject(NgDocSearchEngine, { optional: true });
if (!this.searchEngine) {
throw new Error(`NgDoc: Search engine is not provided,
please check this article: https://ng-doc.com/docs/getting-started/installation#configuring-application
to learn how to provide it.`);
}
this.searchResults = this.query.pipe(skip(1), switchMap((term) => this.searchEngine?.search(term).pipe(observableState()) ?? NEVER), shareReplay(1), untilDestroyed(this));
}
open() {
this.dialog.open(new NgDocComponentContent(NgDocSearchDialogComponent), {
hasBackdrop: true,
backdropClass: 'ng-doc-blur-backdrop',
panelClass: 'ng-doc-transparent-dialog',
positionStrategy: this.dialog.positionStrategy().centerHorizontally().top('5vh'),
data: {
term: this.query.value,
search: (query) => this.query.next(query),
searchResults: this.searchResults,
},
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgDocSearchComponent, isStandalone: true, selector: "ng-doc-search", ngImport: i0, template: "<ng-container\n [ngDocHotkey]=\"{ ctrlKey: false, altKey: false, shiftKey: false, code: 'Slash' }\"\n (ngDocHotkey)=\"open()\">\n <button ng-doc-button-icon size=\"large\" (click)=\"open()\" ngDocDropdownOrigin>\n <ng-doc-icon icon=\"search\" [size]=\"24\"></ng-doc-icon>\n </button>\n\n <ng-doc-input-wrapper ngDocDropdownOrigin>\n <ng-doc-icon icon=\"search\" ngDocInputWrapperLeft></ng-doc-icon>\n <input ngDocInputString readonly placeholder=\"Search...\" (click)=\"open()\" />\n <ng-doc-tag class=\"search-hotkey\" ngDocInputWrapperRight>/</ng-doc-tag>\n </ng-doc-input-wrapper>\n</ng-container>\n", styles: [":host{--ng-doc-floated-border-radius: var(--ng-doc-base-gutter);--ng-doc-input-background-color: var(--ng-doc-base-1);--ng-doc-input-border: none;--ng-doc-input-border-hover: none;--ng-doc-icon-color: var(--ng-doc-base-7)}:host ng-doc-input-wrapper{cursor:pointer}:host ng-doc-input-wrapper ng-doc-icon,:host ng-doc-input-wrapper ng-doc-tag{cursor:pointer}@media (max-width: 1024px){:host ng-doc-input-wrapper{display:none}}@media (min-width: 1024px){:host{width:240px}:host button[ng-doc-button-icon]{display:none}}.search-hotkey{display:flex;align-items:center;justify-content:center;width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3);margin-right:var(--ng-doc-base-gutter);--ng-doc-tag-border: 1px solid var(--ng-doc-base-6);--ng-doc-tag-color: var(--ng-doc-base-6);--ng-doc-tag-background: transparent}\n"], dependencies: [{ kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "directive", type: NgDocDropdownOriginDirective, selector: "[ngDocDropdownOrigin]", exportAs: ["ngDocDropdownOrigin"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocInputWrapperComponent, selector: "ng-doc-input-wrapper", inputs: ["blurContent", "blurContext", "align"] }, { kind: "directive", type: NgDocInputStringDirective, selector: "input[ngDocInputString]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgDocHotkeyDirective, selector: "[ngDocHotkey]", inputs: ["ngDocHotkey"], outputs: ["ngDocHotkey"] }, { kind: "component", type: NgDocTagComponent, selector: "ng-doc-tag", inputs: ["color", "size", "mod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
};
NgDocSearchComponent = __decorate([
UntilDestroy(),
__metadata("design:paramtypes", [])
], NgDocSearchComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocSearchComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-search', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgDocLetDirective,
NgIf,
NgDocButtonIconComponent,
NgDocDropdownOriginDirective,
NgDocIconComponent,
NgDocDropdownComponent,
NgDocInputWrapperComponent,
NgDocInputStringDirective,
FormsModule,
NgDocAutofocusDirective,
NgTemplateOutlet,
NgDocFocusCatcherDirective,
NgDocHotkeyDirective,
NgDocTagComponent,
NgDocDataListComponent,
RouterLink,
NgDocTextComponent,
NgFor,
NgDocSpinnerComponent,
AsyncPipe,
NgDocHighlighterPipe,
NgDocExecutePipe,
NgDocSanitizeHtmlPipe,
], template: "<ng-container\n [ngDocHotkey]=\"{ ctrlKey: false, altKey: false, shiftKey: false, code: 'Slash' }\"\n (ngDocHotkey)=\"open()\">\n <button ng-doc-button-icon size=\"large\" (click)=\"open()\" ngDocDropdownOrigin>\n <ng-doc-icon icon=\"search\" [size]=\"24\"></ng-doc-icon>\n </button>\n\n <ng-doc-input-wrapper ngDocDropdownOrigin>\n <ng-doc-icon icon=\"search\" ngDocInputWrapperLeft></ng-doc-icon>\n <input ngDocInputString readonly placeholder=\"Search...\" (click)=\"open()\" />\n <ng-doc-tag class=\"search-hotkey\" ngDocInputWrapperRight>/</ng-doc-tag>\n </ng-doc-input-wrapper>\n</ng-container>\n", styles: [":host{--ng-doc-floated-border-radius: var(--ng-doc-base-gutter);--ng-doc-input-background-color: var(--ng-doc-base-1);--ng-doc-input-border: none;--ng-doc-input-border-hover: none;--ng-doc-icon-color: var(--ng-doc-base-7)}:host ng-doc-input-wrapper{cursor:pointer}:host ng-doc-input-wrapper ng-doc-icon,:host ng-doc-input-wrapper ng-doc-tag{cursor:pointer}@media (max-width: 1024px){:host ng-doc-input-wrapper{display:none}}@media (min-width: 1024px){:host{width:240px}:host button[ng-doc-button-icon]{display:none}}.search-hotkey{display:flex;align-items:center;justify-content:center;width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3);margin-right:var(--ng-doc-base-gutter);--ng-doc-tag-border: 1px solid var(--ng-doc-base-6);--ng-doc-tag-color: var(--ng-doc-base-6);--ng-doc-tag-background: transparent}\n"] }]
}], ctorParameters: () => [] });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocSearchComponent };
//# sourceMappingURL=ng-doc-app-components-search.mjs.map