@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>
56 lines (52 loc) • 7.54 kB
JavaScript
import { KeyValuePipe } from '@angular/common';
import * as i0 from '@angular/core';
import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { NgDocKindIconComponent } from '@ng-doc/app/components/kind-icon';
import { NgDocTextComponent, NgDocTooltipDirective } from '@ng-doc/ui-kit';
class NgDocSearchResultComponent {
constructor() {
this.result = [];
this.groupedResult = {};
}
ngOnChanges({ result }) {
if (result && this.result) {
this.groupedResult = this.result.reduce((grouped, item) => {
if (!grouped[item.type]) {
grouped[item.type] = [];
}
grouped[item.type].push(item);
return grouped;
}, {});
}
}
typeToLabel(type) {
switch (type) {
case 'api':
return 'API';
case 'guide':
return 'Guides';
default:
return 'Unknown';
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocSearchResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocSearchResultComponent, isStandalone: true, selector: "ng-doc-search-result", inputs: { result: "result" }, usesOnChanges: true, ngImport: i0, template: "@if (groupedResult | keyvalue; as results) {\n <div class=\"ng-doc-search-result-wrapper\">\n @if (results.length) {\n @for (item of results; track item) {\n <div class=\"ng-doc-search-result-category\">\n <h4 class=\"ng-doc-search-result-title\" ng-doc-text>{{ typeToLabel(item.key) }}</h4>\n <ul class=\"ng-doc-search-result-pages\">\n @for (page of item.value; track page) {\n <li class=\"ng-doc-search-result-page\">\n <a class=\"ng-doc-search-result-page-link\" [routerLink]=\"[page.route]\">\n @if (page.kind) {\n <ng-doc-kind-icon\n [kind]=\"page.kind\"\n [ngDocTooltip]=\"page.kind\"></ng-doc-kind-icon>\n }\n {{ page.title }}\n </a>\n </li>\n }\n </ul>\n </div>\n }\n } @else {\n <div ng-doc-text color=\"muted\">Nothing was found...</div>\n }\n </div>\n}\n", styles: [":host{display:block}:host .ng-doc-search-result-wrapper{display:flex;flex-direction:row}:host .ng-doc-search-result-wrapper .ng-doc-search-result-category:not(:last-child){margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-search-result-wrapper .ng-doc-search-result-category .ng-doc-search-result-title{margin:0 0 calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-search-result-wrapper .ng-doc-search-result-category .ng-doc-search-result-pages{list-style:none;padding:0;margin:0}:host .ng-doc-search-result-wrapper .ng-doc-search-result-category .ng-doc-search-result-pages .ng-doc-search-result-page{margin-bottom:var(--ng-doc-base-gutter)}:host .ng-doc-search-result-wrapper .ng-doc-search-result-category .ng-doc-search-result-pages .ng-doc-search-result-page .ng-doc-search-result-page-link{display:flex;align-items:center;text-decoration:none;color:var(--ng-doc-text)}:host .ng-doc-search-result-wrapper .ng-doc-search-result-category .ng-doc-search-result-pages .ng-doc-search-result-page .ng-doc-search-result-page-link ng-doc-kind-icon{margin-right:var(--ng-doc-base-gutter)}\n"], dependencies: [{ kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NgDocKindIconComponent, selector: "ng-doc-kind-icon", inputs: ["kind", "type", "size"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocSearchResultComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-search-result', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgDocTextComponent,
RouterLink,
NgDocKindIconComponent,
NgDocTooltipDirective,
KeyValuePipe,
], template: "@if (groupedResult | keyvalue; as results) {\n <div class=\"ng-doc-search-result-wrapper\">\n @if (results.length) {\n @for (item of results; track item) {\n <div class=\"ng-doc-search-result-category\">\n <h4 class=\"ng-doc-search-result-title\" ng-doc-text>{{ typeToLabel(item.key) }}</h4>\n <ul class=\"ng-doc-search-result-pages\">\n @for (page of item.value; track page) {\n <li class=\"ng-doc-search-result-page\">\n <a class=\"ng-doc-search-result-page-link\" [routerLink]=\"[page.route]\">\n @if (page.kind) {\n <ng-doc-kind-icon\n [kind]=\"page.kind\"\n [ngDocTooltip]=\"page.kind\"></ng-doc-kind-icon>\n }\n {{ page.title }}\n </a>\n </li>\n }\n </ul>\n </div>\n }\n } @else {\n <div ng-doc-text color=\"muted\">Nothing was found...</div>\n }\n </div>\n}\n", styles: [":host{display:block}:host .ng-doc-search-result-wrapper{display:flex;flex-direction:row}:host .ng-doc-search-result-wrapper .ng-doc-search-result-category:not(:last-child){margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-search-result-wrapper .ng-doc-search-result-category .ng-doc-search-result-title{margin:0 0 calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-search-result-wrapper .ng-doc-search-result-category .ng-doc-search-result-pages{list-style:none;padding:0;margin:0}:host .ng-doc-search-result-wrapper .ng-doc-search-result-category .ng-doc-search-result-pages .ng-doc-search-result-page{margin-bottom:var(--ng-doc-base-gutter)}:host .ng-doc-search-result-wrapper .ng-doc-search-result-category .ng-doc-search-result-pages .ng-doc-search-result-page .ng-doc-search-result-page-link{display:flex;align-items:center;text-decoration:none;color:var(--ng-doc-text)}:host .ng-doc-search-result-wrapper .ng-doc-search-result-category .ng-doc-search-result-pages .ng-doc-search-result-page .ng-doc-search-result-page-link ng-doc-kind-icon{margin-right:var(--ng-doc-base-gutter)}\n"] }]
}], propDecorators: { result: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocSearchResultComponent };
//# sourceMappingURL=ng-doc-app-components-search-result.mjs.map