@ng-doc/app/fesm2022/ng-doc-app-components-search-dialog.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 i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, ElementRef, forwardRef, Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { RouterLink } from '@angular/router';
import { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';
import { NG_DOC_DIALOG_DATA, NgDocInputWrapperComponent, NgDocInputStringDirective, NgDocAutofocusDirective, NgDocIconComponent, NgDocDataListComponent, NgDocTagComponent, NgDocTextComponent, NgDocHighlighterPipe, NgDocSpinnerComponent, NgDocExecutePipe, popupAnimation, NgDocFocusCatcherDirective, NgDocDropdownComponent, NgDocLetDirective } from '@ng-doc/ui-kit';
import { NgDocOverlayRef, NgDocListHost } from '@ng-doc/ui-kit/classes';

class NgDocSearchDialogComponent {
    constructor() {
        this.searchTerm = '';
        this.elementRef = inject(ElementRef);
        this.overlayRef = inject(NgDocOverlayRef);
        this.data = inject(NG_DOC_DIALOG_DATA);
        this.searchTerm = this.data.term;
    }
    search(query) {
        this.data.search(query);
        if (this.resultContent) {
            this.resultContent.nativeElement.scrollTop = 0;
        }
    }
    getPositions(key, item) {
        return item.positions[key] ?? [];
    }
    get listHostOrigin() {
        return this.inputElement ?? this.elementRef;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocSearchDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgDocSearchDialogComponent, isStandalone: true, selector: "ng-doc-search-dialog", host: { properties: { "@popupAnimation": "true" } }, providers: [
            {
                provide: NgDocListHost,
                useExisting: forwardRef(() => NgDocSearchDialogComponent),
            },
        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef }, { propertyName: "resultContent", first: true, predicate: ["resultContent"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"ng-doc-search-dialog-container\">\n  <ng-doc-input-wrapper>\n    <ng-doc-icon icon=\"search\" ngDocInputWrapperLeft></ng-doc-icon>\n    <input\n      ngDocInputString\n      ngDocAutofocus\n      [selectAll]=\"true\"\n      placeholder=\"Find or ask anything...\"\n      [(ngModel)]=\"searchTerm\"\n      (ngModelChange)=\"search($event)\"\n      #inputElement />\n  </ng-doc-input-wrapper>\n\n  <div\n    class=\"ng-doc-search-result-content\"\n    *ngIf=\"data.searchResults | async as state\"\n    #resultContent>\n    <ng-doc-data-list\n      [items]=\"state?.result ?? []\"\n      [itemContent]=\"itemContent\"\n      [emptyContent]=\"emptyContent\">\n      <ng-template let-item #itemContent>\n        <a\n          class=\"ng-doc-search-option\"\n          [routerLink]=\"item.index.route\"\n          [fragment]=\"item.index.fragment\"\n          (click)=\"overlayRef.close()\">\n          <div class=\"ng-doc-search-option-header\">\n            <ng-doc-tag size=\"small\" [attr.data-ng-doc-page-type]=\"item.index.pageType\">\n              {{ item.index.pageType }}\n            </ng-doc-tag>\n            <span class=\"ng-doc-search-option-breadcrumbs\" ng-doc-text>\n              <ng-container *ngFor=\"let breadcrum of item.index.breadcrumbs; let i = index\">\n                <span>{{ breadcrum }}</span>\n                <span\n                  class=\"ng-doc-search-option-breadcrumb-divider\"\n                  *ngIf=\"i !== item.index.breadcrumbs.length - 1\"\n                  ><b>\u2022</b></span\n                >\n              </ng-container>\n            </span>\n          </div>\n          <h5\n            class=\"ng-doc-search-section-title\"\n            ng-doc-text\n            [innerHTML]=\"\n              (item.index.section\n                | ngDocHighlighterPipe: (getPositions | execute: 'section' : item)\n                | ngDocSanitizeHtml) || item.index.title\n            \"></h5>\n          <div\n            *ngIf=\"item.index.content\"\n            class=\"ng-doc-search-content\"\n            [innerHTML]=\"\n              item.index.content\n                | ngDocHighlighterPipe: (getPositions | execute: 'content' : item)\n                | ngDocSanitizeHtml\n            \"\n            ng-doc-text></div>\n        </a>\n      </ng-template>\n      <ng-template #emptyContent>\n        <ng-container *ngIf=\"!state?.pending\">\n          <div class=\"ng-doc-search-empty\">\n            <ng-container *ngIf=\"searchTerm.length\">Nothing found</ng-container>\n            <ng-container *ngIf=\"!searchTerm.length\">Please enter your search query </ng-container>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"state?.pending\">\n          <div class=\"ng-doc-search-progress\">\n            <ng-doc-spinner size=\"small\"></ng-doc-spinner>\n            Searching...\n          </div>\n        </ng-container>\n      </ng-template>\n    </ng-doc-data-list>\n  </div>\n</div>\n", styles: [":host{display:block;width:800px;max-width:100%;--ng-doc-search-border-radius: var(--ng-doc-floated-border-radius);--ng-doc-input-height: calc(var(--ng-doc-base-gutter) * 7);--ng-doc-input-border: 1px solid var(--ng-doc-base-1);--ng-doc-input-border-hover: 1px solid var(--ng-doc-base-1);--ng-doc-floated-focus-border-color: transparent}@media (max-width: 1024px){:host{padding:calc(var(--ng-doc-base-gutter) * 5)}}@media (max-width: 768px){:host{padding:calc(var(--ng-doc-base-gutter) * 2)}}:host ng-doc-icon[icon=search]{--ng-doc-icon-width: calc(var(--ng-doc-base-gutter) * 6)}:host ng-doc-input-wrapper:not(:last-child){--ng-doc-floated-border-radius: var(--ng-doc-search-border-radius) var(--ng-doc-search-border-radius) 0 0}:host .ng-doc-search-dialog-container{box-shadow:#0000 0 0,#0000 0 0,#00000040 0 25px 50px -12px}:host .ng-doc-search-result-content{max-height:70vh;overflow:auto;background-color:var(--ng-doc-background);border-radius:0 0 var(--ng-doc-search-border-radius) var(--ng-doc-search-border-radius);--ng-doc-option-padding: 0}:host .ng-doc-search-result-content[data-ng-doc-mod=icon] .ng-doc-search-wrapper{padding:calc(var(--ng-doc-base-gutter) * 2) 0}:host .ng-doc-search-result-content[data-ng-doc-mod=icon] .ng-doc-search-option{padding:12px 16px}:host .ng-doc-search-option{display:block;padding:12px 36px;text-decoration:none}:host .ng-doc-search-option .ng-doc-search-option-header{display:flex;align-items:center;margin-bottom:calc(var(--ng-doc-base-gutter) / 2)}:host .ng-doc-search-option .ng-doc-search-option-header ng-doc-tag{text-transform:uppercase;margin-right:var(--ng-doc-base-gutter);--ng-doc-font-weight: 500}:host .ng-doc-search-option .ng-doc-search-option-header ng-doc-tag[data-ng-doc-page-type=guide]{--ng-doc-tag-color: var(--ng-doc-guide-tag-color);--ng-doc-tag-background: var(--ng-doc-guide-tag-background)}:host .ng-doc-search-option .ng-doc-search-option-header ng-doc-tag[data-ng-doc-page-type=api]{--ng-doc-tag-color: var(--ng-doc-api-tag-color);--ng-doc-tag-background: var(--ng-doc-api-tag-background)}:host .ng-doc-search-option .ng-doc-search-option-header .ng-doc-search-option-breadcrumbs{--ng-doc-text: var(--ng-doc-text-muted);--ng-doc-font-size: 12px;--ng-doc-line-height: 16px}:host .ng-doc-search-option .ng-doc-search-option-header .ng-doc-search-option-breadcrumbs .ng-doc-search-option-breadcrumb-divider{margin:0 6px}:host .ng-doc-search-option .ng-doc-search-section-title{display:block;color:var(--ng-doc-search-result-header-color, var(--ng-doc-text));--ng-doc-line-height: 20px;margin:4px 0}:host .ng-doc-search-option .ng-doc-search-content{display:block;color:var(--ng-doc-search-result-color, var(--ng-doc-text));--ng-doc-font-size: 14px;--ng-doc-line-height: 19px}:host .ng-doc-search-empty{padding:0 22px}:host .ng-doc-search-progress{display:flex;align-items:center}:host .ng-doc-search-progress ng-doc-spinner{margin-right:var(--ng-doc-base-gutter)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NgDocInputWrapperComponent, selector: "ng-doc-input-wrapper", inputs: ["blurContent", "blurContext", "align"] }, { kind: "directive", type: NgDocInputStringDirective, selector: "input[ngDocInputString]" }, { kind: "directive", type: NgDocAutofocusDirective, selector: "[ngDocAutofocus]", inputs: ["selectAll"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocDataListComponent, selector: "ng-doc-data-list", inputs: ["autofocus", "items", "itemContent", "emptyContent", "itemDisabledFn", "defineValueFn", "trackByFn"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NgDocTagComponent, selector: "ng-doc-tag", inputs: ["color", "size", "mod"] }, { kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "pipe", type: NgDocHighlighterPipe, name: "ngDocHighlighterPipe" }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }, { kind: "component", type: NgDocSpinnerComponent, selector: "ng-doc-spinner", inputs: ["size"] }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [popupAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocSearchDialogComponent, decorators: [{
            type: Component,
            args: [{ animations: [popupAnimation], selector: 'ng-doc-search-dialog', imports: [
                        CommonModule,
                        NgDocInputWrapperComponent,
                        NgDocInputStringDirective,
                        NgDocAutofocusDirective,
                        NgDocIconComponent,
                        NgDocDataListComponent,
                        RouterLink,
                        NgDocTagComponent,
                        NgDocTextComponent,
                        NgDocHighlighterPipe,
                        NgDocSanitizeHtmlPipe,
                        NgDocFocusCatcherDirective,
                        NgDocDropdownComponent,
                        NgDocLetDirective,
                        NgDocSpinnerComponent,
                        NgDocExecutePipe,
                        FormsModule,
                    ], providers: [
                        {
                            provide: NgDocListHost,
                            useExisting: forwardRef(() => NgDocSearchDialogComponent),
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[@popupAnimation]': 'true',
                    }, template: "<div class=\"ng-doc-search-dialog-container\">\n  <ng-doc-input-wrapper>\n    <ng-doc-icon icon=\"search\" ngDocInputWrapperLeft></ng-doc-icon>\n    <input\n      ngDocInputString\n      ngDocAutofocus\n      [selectAll]=\"true\"\n      placeholder=\"Find or ask anything...\"\n      [(ngModel)]=\"searchTerm\"\n      (ngModelChange)=\"search($event)\"\n      #inputElement />\n  </ng-doc-input-wrapper>\n\n  <div\n    class=\"ng-doc-search-result-content\"\n    *ngIf=\"data.searchResults | async as state\"\n    #resultContent>\n    <ng-doc-data-list\n      [items]=\"state?.result ?? []\"\n      [itemContent]=\"itemContent\"\n      [emptyContent]=\"emptyContent\">\n      <ng-template let-item #itemContent>\n        <a\n          class=\"ng-doc-search-option\"\n          [routerLink]=\"item.index.route\"\n          [fragment]=\"item.index.fragment\"\n          (click)=\"overlayRef.close()\">\n          <div class=\"ng-doc-search-option-header\">\n            <ng-doc-tag size=\"small\" [attr.data-ng-doc-page-type]=\"item.index.pageType\">\n              {{ item.index.pageType }}\n            </ng-doc-tag>\n            <span class=\"ng-doc-search-option-breadcrumbs\" ng-doc-text>\n              <ng-container *ngFor=\"let breadcrum of item.index.breadcrumbs; let i = index\">\n                <span>{{ breadcrum }}</span>\n                <span\n                  class=\"ng-doc-search-option-breadcrumb-divider\"\n                  *ngIf=\"i !== item.index.breadcrumbs.length - 1\"\n                  ><b>\u2022</b></span\n                >\n              </ng-container>\n            </span>\n          </div>\n          <h5\n            class=\"ng-doc-search-section-title\"\n            ng-doc-text\n            [innerHTML]=\"\n              (item.index.section\n                | ngDocHighlighterPipe: (getPositions | execute: 'section' : item)\n                | ngDocSanitizeHtml) || item.index.title\n            \"></h5>\n          <div\n            *ngIf=\"item.index.content\"\n            class=\"ng-doc-search-content\"\n            [innerHTML]=\"\n              item.index.content\n                | ngDocHighlighterPipe: (getPositions | execute: 'content' : item)\n                | ngDocSanitizeHtml\n            \"\n            ng-doc-text></div>\n        </a>\n      </ng-template>\n      <ng-template #emptyContent>\n        <ng-container *ngIf=\"!state?.pending\">\n          <div class=\"ng-doc-search-empty\">\n            <ng-container *ngIf=\"searchTerm.length\">Nothing found</ng-container>\n            <ng-container *ngIf=\"!searchTerm.length\">Please enter your search query </ng-container>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"state?.pending\">\n          <div class=\"ng-doc-search-progress\">\n            <ng-doc-spinner size=\"small\"></ng-doc-spinner>\n            Searching...\n          </div>\n        </ng-container>\n      </ng-template>\n    </ng-doc-data-list>\n  </div>\n</div>\n", styles: [":host{display:block;width:800px;max-width:100%;--ng-doc-search-border-radius: var(--ng-doc-floated-border-radius);--ng-doc-input-height: calc(var(--ng-doc-base-gutter) * 7);--ng-doc-input-border: 1px solid var(--ng-doc-base-1);--ng-doc-input-border-hover: 1px solid var(--ng-doc-base-1);--ng-doc-floated-focus-border-color: transparent}@media (max-width: 1024px){:host{padding:calc(var(--ng-doc-base-gutter) * 5)}}@media (max-width: 768px){:host{padding:calc(var(--ng-doc-base-gutter) * 2)}}:host ng-doc-icon[icon=search]{--ng-doc-icon-width: calc(var(--ng-doc-base-gutter) * 6)}:host ng-doc-input-wrapper:not(:last-child){--ng-doc-floated-border-radius: var(--ng-doc-search-border-radius) var(--ng-doc-search-border-radius) 0 0}:host .ng-doc-search-dialog-container{box-shadow:#0000 0 0,#0000 0 0,#00000040 0 25px 50px -12px}:host .ng-doc-search-result-content{max-height:70vh;overflow:auto;background-color:var(--ng-doc-background);border-radius:0 0 var(--ng-doc-search-border-radius) var(--ng-doc-search-border-radius);--ng-doc-option-padding: 0}:host .ng-doc-search-result-content[data-ng-doc-mod=icon] .ng-doc-search-wrapper{padding:calc(var(--ng-doc-base-gutter) * 2) 0}:host .ng-doc-search-result-content[data-ng-doc-mod=icon] .ng-doc-search-option{padding:12px 16px}:host .ng-doc-search-option{display:block;padding:12px 36px;text-decoration:none}:host .ng-doc-search-option .ng-doc-search-option-header{display:flex;align-items:center;margin-bottom:calc(var(--ng-doc-base-gutter) / 2)}:host .ng-doc-search-option .ng-doc-search-option-header ng-doc-tag{text-transform:uppercase;margin-right:var(--ng-doc-base-gutter);--ng-doc-font-weight: 500}:host .ng-doc-search-option .ng-doc-search-option-header ng-doc-tag[data-ng-doc-page-type=guide]{--ng-doc-tag-color: var(--ng-doc-guide-tag-color);--ng-doc-tag-background: var(--ng-doc-guide-tag-background)}:host .ng-doc-search-option .ng-doc-search-option-header ng-doc-tag[data-ng-doc-page-type=api]{--ng-doc-tag-color: var(--ng-doc-api-tag-color);--ng-doc-tag-background: var(--ng-doc-api-tag-background)}:host .ng-doc-search-option .ng-doc-search-option-header .ng-doc-search-option-breadcrumbs{--ng-doc-text: var(--ng-doc-text-muted);--ng-doc-font-size: 12px;--ng-doc-line-height: 16px}:host .ng-doc-search-option .ng-doc-search-option-header .ng-doc-search-option-breadcrumbs .ng-doc-search-option-breadcrumb-divider{margin:0 6px}:host .ng-doc-search-option .ng-doc-search-section-title{display:block;color:var(--ng-doc-search-result-header-color, var(--ng-doc-text));--ng-doc-line-height: 20px;margin:4px 0}:host .ng-doc-search-option .ng-doc-search-content{display:block;color:var(--ng-doc-search-result-color, var(--ng-doc-text));--ng-doc-font-size: 14px;--ng-doc-line-height: 19px}:host .ng-doc-search-empty{padding:0 22px}:host .ng-doc-search-progress{display:flex;align-items:center}:host .ng-doc-search-progress ng-doc-spinner{margin-right:var(--ng-doc-base-gutter)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { inputElement: [{
                type: ViewChild,
                args: ['inputElement', { read: ElementRef }]
            }], resultContent: [{
                type: ViewChild,
                args: ['resultContent', { read: ElementRef }]
            }] } });

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

export { NgDocSearchDialogComponent };
//# sourceMappingURL=ng-doc-app-components-search-dialog.mjs.map