@ng-doc/app/fesm2022/ng-doc-app-components-search.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 * as i0 from '@angular/core';
import { inject, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormsModule } from '@angular/forms';
import { NgDocSearchEngine } from '@ng-doc/app/classes';
import { NgDocSearchDialogComponent } from '@ng-doc/app/components/search-dialog';
import { NgDocDialogService, observableState, NgDocComponentContent, NgDocButtonIconComponent, NgDocDropdownOriginDirective, NgDocIconComponent, NgDocInputWrapperComponent, NgDocInputStringDirective, NgDocHotkeyDirective, NgDocTagComponent } from '@ng-doc/ui-kit';
import { BehaviorSubject, NEVER } from 'rxjs';
import { skip, switchMap, shareReplay } from 'rxjs/operators';

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), takeUntilDestroyed());
    }
    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: "20.0.3", ngImport: i0, type: NgDocSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocSearchComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ng-doc-search', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        NgDocButtonIconComponent,
                        NgDocDropdownOriginDirective,
                        NgDocIconComponent,
                        NgDocInputWrapperComponent,
                        NgDocInputStringDirective,
                        FormsModule,
                        NgDocHotkeyDirective,
                        NgDocTagComponent,
                    ], 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