@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>
79 lines (75 loc) • 18.5 kB
JavaScript
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, ElementRef, forwardRef, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 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, NgDocSpinnerComponent, NgDocHighlighterPipe, NgDocExecutePipe } 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: "21.0.6", ngImport: i0, type: NgDocSearchDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocSearchDialogComponent, isStandalone: true, selector: "ng-doc-search-dialog", host: { attributes: { "animate.enter": "ng-doc-enter-animation" } }, 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 @if (data.searchResults | async; as state) {\n <div class=\"ng-doc-search-result-content\" #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 @for (breadcrum of item.index.breadcrumbs; track breadcrum; let i = $index) {\n <span>{{ breadcrum }}</span>\n @if (i !== item.index.breadcrumbs.length - 1) {\n <span class=\"ng-doc-search-option-breadcrumb-divider\"><b>\u2022</b></span>\n }\n }\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 @if (item.index.content) {\n <div\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 }\n </a>\n </ng-template>\n <ng-template #emptyContent>\n @if (!state?.pending) {\n <div class=\"ng-doc-search-empty\">\n @if (searchTerm.length) {\n Nothing found\n }\n @if (!searchTerm.length) {\n Please enter your search query\n }\n </div>\n }\n @if (state?.pending) {\n <div class=\"ng-doc-search-progress\">\n <ng-doc-spinner size=\"small\"></ng-doc-spinner>\n Searching...\n </div>\n }\n </ng-template>\n </ng-doc-data-list>\n </div>\n }\n</div>\n", styles: [":host{display:block;width:800px;max-width:100%}@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-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}: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)}:host.ng-doc-enter-animation{animation:ng-doc-fade-in-scale .15s ease-in forwards}@keyframes ng-doc-fade-in-scale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: NgDocSpinnerComponent, selector: "ng-doc-spinner", inputs: ["size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: NgDocHighlighterPipe, name: "ngDocHighlighterPipe" }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocSearchDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-search-dialog', imports: [
CommonModule,
NgDocInputWrapperComponent,
NgDocInputStringDirective,
NgDocAutofocusDirective,
NgDocIconComponent,
NgDocDataListComponent,
RouterLink,
NgDocTagComponent,
NgDocTextComponent,
NgDocHighlighterPipe,
NgDocSanitizeHtmlPipe,
NgDocSpinnerComponent,
NgDocExecutePipe,
FormsModule,
], providers: [
{
provide: NgDocListHost,
useExisting: forwardRef(() => NgDocSearchDialogComponent),
},
], host: {
'animate.enter': 'ng-doc-enter-animation',
}, changeDetection: ChangeDetectionStrategy.OnPush, 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 @if (data.searchResults | async; as state) {\n <div class=\"ng-doc-search-result-content\" #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 @for (breadcrum of item.index.breadcrumbs; track breadcrum; let i = $index) {\n <span>{{ breadcrum }}</span>\n @if (i !== item.index.breadcrumbs.length - 1) {\n <span class=\"ng-doc-search-option-breadcrumb-divider\"><b>\u2022</b></span>\n }\n }\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 @if (item.index.content) {\n <div\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 }\n </a>\n </ng-template>\n <ng-template #emptyContent>\n @if (!state?.pending) {\n <div class=\"ng-doc-search-empty\">\n @if (searchTerm.length) {\n Nothing found\n }\n @if (!searchTerm.length) {\n Please enter your search query\n }\n </div>\n }\n @if (state?.pending) {\n <div class=\"ng-doc-search-progress\">\n <ng-doc-spinner size=\"small\"></ng-doc-spinner>\n Searching...\n </div>\n }\n </ng-template>\n </ng-doc-data-list>\n </div>\n }\n</div>\n", styles: [":host{display:block;width:800px;max-width:100%}@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-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}: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)}:host.ng-doc-enter-animation{animation:ng-doc-fade-in-scale .15s ease-in forwards}@keyframes ng-doc-fade-in-scale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\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