@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>
94 lines (90 loc) • 17.4 kB
JavaScript
import { HttpClient } from '@angular/common/http';
import * as i0 from '@angular/core';
import { inject, input, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i1 from '@angular/forms';
import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { NgDocKindIconComponent } from '@ng-doc/app/components/kind-icon';
import { asArray } from '@ng-doc/core/helpers/as-array';
import { NgDocTextComponent, NgDocInputWrapperComponent, NgDocIconComponent, NgDocInputStringDirective, NgDocAutofocusDirective, NgDocTooltipDirective, NgDocRadioGroupDirective, NgDocButtonToggleComponent } from '@ng-doc/ui-kit';
import { NG_REQUEST_BASE_PATH } from '@ng-doc/ui-kit/tokens';
import { startWith } from 'rxjs/operators';
class NgDocApiListComponent {
constructor() {
this.baseUrl = inject(NG_REQUEST_BASE_PATH);
this.title = input('API References');
this.segment = input();
this.apiList = signal([]);
this.formBuilder = inject(FormBuilder);
this.route = inject(ActivatedRoute);
this.router = inject(Router);
this.httpClient = inject(HttpClient);
this.formGroup = this.formBuilder.group({
filter: [''],
scope: [''],
type: [''],
});
this.filter = toSignal(this.formGroup.valueChanges.pipe(startWith(this.formGroup.value)), {
initialValue: this.formGroup.value,
});
this.scopes = computed(() => asArray(new Set(this.apiList().flatMap((api) => api.title))).sort());
this.types = computed(() => asArray(new Set(this.apiList()
.flatMap((api) => api.items)
.flatMap((item) => item.type))).sort());
this.route.queryParamMap.pipe(takeUntilDestroyed()).subscribe((paramMap) => this.formGroup.setValue({
filter: paramMap.get('filter') || null,
scope: paramMap.get('scope') || null,
type: paramMap.get('type') || null,
}));
this.formGroup.valueChanges
.pipe(takeUntilDestroyed())
.subscribe((formValue) => this.router.navigate([], {
relativeTo: this.route,
queryParams: formValue,
queryParamsHandling: 'merge',
}));
this.filteredApiList = computed(() => {
const { filter, scope, type } = this.filter();
return this.apiList()
.filter((api) => !scope || api.title === scope)
.map((api) => ({
...api,
items: api.items
.filter((item) => item.name.toLowerCase().includes(filter?.toLowerCase() ?? '') &&
(!type || item.type === type))
.sort((a, b) => a.type.localeCompare(b.type) || a.name.localeCompare(b.name)),
}))
.filter((api) => api.items.length);
});
}
ngOnInit() {
this.httpClient
.get(this.baseUrl + asArray('assets/ng-doc', this.segment(), 'api-list.json').join('/'))
.subscribe((apiList) => this.apiList.set(apiList));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocApiListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: NgDocApiListComponent, isStandalone: true, selector: "ng-doc-api-list", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, segment: { classPropertyName: "segment", publicName: "segment", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h1 ng-doc-text>{{ title() }}</h1>\n<div class=\"ng-doc-api-list-wrapper\">\n <form [formGroup]=\"formGroup\">\n @if (types().length) {\n <h3>Declaration types</h3>\n <ul class=\"ng-doc-filter-list\" ngDocRadioGroup formControlName=\"type\">\n @for (type of types(); track type) {\n <li>\n <button class=\"ng-doc-filter-button\" ng-doc-button-toggle [value]=\"type\">\n <ng-doc-kind-icon [kind]=\"type\" size=\"medium\"></ng-doc-kind-icon>\n {{ type }}\n </button>\n </li>\n }\n </ul>\n }\n\n @if (scopes().length) {\n <h3>Scopes</h3>\n <ul class=\"ng-doc-filter-list\" ngDocRadioGroup formControlName=\"scope\">\n @for (scope of scopes(); track scope) {\n <li>\n <button class=\"ng-doc-filter-button\" ng-doc-button-toggle [value]=\"scope\">\n {{ scope }}\n </button>\n </li>\n }\n </ul>\n }\n\n <h3>Filter</h3>\n <ng-doc-input-wrapper class=\"ng-doc-api-list-filter-input\">\n <ng-doc-icon icon=\"search\" ngDocInputWrapperLeft></ng-doc-icon>\n <input\n ngDocInputString\n formControlName=\"filter\"\n placeholder=\"Declaration name...\"\n ngDocAutofocus />\n </ng-doc-input-wrapper>\n </form>\n\n <div class=\"ng-doc-api-list\">\n @for (scope of filteredApiList(); track scope) {\n <div class=\"ng-doc-api-scope\">\n <h3 class=\"ng-doc-scope-title\" ng-doc-text>{{ scope.title }}</h3>\n @if (scope.items.length) {\n <ul class=\"ng-doc-scope-items\">\n @for (apiReference of scope.items; track apiReference) {\n <li class=\"ng-doc-scope-item\">\n <a class=\"ng-doc-scope-item-link\" [routerLink]=\"[apiReference.route]\">\n <ng-doc-kind-icon\n [kind]=\"apiReference.type\"\n size=\"medium\"\n [ngDocTooltip]=\"apiReference.type\">\n </ng-doc-kind-icon>\n {{ apiReference.name }}\n </a>\n </li>\n }\n </ul>\n }\n </div>\n }\n </div>\n</div>\n", styles: [":host h1{margin-top:0}:host .ng-doc-filter-list{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--ng-doc-base-gutter);list-style:none;padding:0}@container api-list-wrapper (max-width: 775px){:host .ng-doc-filter-list{grid-template-columns:repeat(4,1fr)}}@container api-list-wrapper (max-width: 600px){:host .ng-doc-filter-list{grid-template-columns:repeat(3,1fr)}}@container api-list-wrapper (max-width: 500px){:host .ng-doc-filter-list{grid-template-columns:repeat(2,1fr)}}@container api-list-wrapper (max-width: 350px){:host .ng-doc-filter-list{grid-template-columns:repeat(1,1fr)}}:host .ng-doc-filter-list .ng-doc-filter-button{justify-content:flex-start;text-wrap:nowrap;width:100%}:host .ng-doc-filter-list .ng-doc-filter-button ng-doc-kind-icon{margin-right:var(--ng-doc-base-gutter)}:host .ng-doc-api-list-filter-input{max-width:450px}:host .ng-doc-api-list-wrapper{container:api-list-wrapper/inline-size}:host .ng-doc-api-list-wrapper .ng-doc-api-filter{display:flex;margin-top:calc(var(--ng-doc-base-gutter) * 3);flex-wrap:wrap;gap:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-api-list-wrapper .ng-doc-api-filter .ng-doc-api-filter-item{width:200px}:host .ng-doc-api-list-wrapper .ng-doc-api-list{margin-top:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope{display:flex;flex-direction:column}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items{margin-top:calc(var(--ng-doc-base-gutter) * 3);list-style:none;padding:0}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item{float:left;width:33%;overflow:hidden;min-width:330px;text-overflow:ellipsis;white-space:nowrap}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item .ng-doc-scope-item-link{display:flex;align-items:center;border-left:1px solid var(--ng-doc-border-color);padding:var(--ng-doc-base-gutter);color:var(--ng-doc-text);background:color-mix(in srgb,var(--ng-doc-scope-item-link-background),transparent 90%);text-decoration:none}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item .ng-doc-scope-item-link:hover{color:var(--ng-doc-heading-color);border-left-color:var(--ng-doc-primary);--ng-doc-scope-item-link-background: var(--ng-doc-primary)}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item .ng-doc-scope-item-link ng-doc-kind-icon{margin-right:var(--ng-doc-base-gutter);text-decoration:none!important}:host ng-doc-input-wrapper ng-doc-icon{--ng-doc-icon-color: var(--ng-doc-text-muted)}\n"], dependencies: [{ kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NgDocInputWrapperComponent, selector: "ng-doc-input-wrapper", inputs: ["blurContent", "blurContext", "align"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "directive", type: NgDocInputStringDirective, selector: "input[ngDocInputString]" }, { kind: "directive", type: NgDocAutofocusDirective, selector: "[ngDocAutofocus]", inputs: ["selectAll"] }, { 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: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgDocRadioGroupDirective, selector: "[ngDocRadioGroup]" }, { kind: "component", type: NgDocButtonToggleComponent, selector: "[ng-doc-button-toggle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocApiListComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-api-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgDocTextComponent,
FormsModule,
ReactiveFormsModule,
NgDocInputWrapperComponent,
NgDocIconComponent,
NgDocInputStringDirective,
NgDocAutofocusDirective,
NgDocKindIconComponent,
NgDocTooltipDirective,
RouterLink,
NgDocRadioGroupDirective,
NgDocButtonToggleComponent,
], template: "<h1 ng-doc-text>{{ title() }}</h1>\n<div class=\"ng-doc-api-list-wrapper\">\n <form [formGroup]=\"formGroup\">\n @if (types().length) {\n <h3>Declaration types</h3>\n <ul class=\"ng-doc-filter-list\" ngDocRadioGroup formControlName=\"type\">\n @for (type of types(); track type) {\n <li>\n <button class=\"ng-doc-filter-button\" ng-doc-button-toggle [value]=\"type\">\n <ng-doc-kind-icon [kind]=\"type\" size=\"medium\"></ng-doc-kind-icon>\n {{ type }}\n </button>\n </li>\n }\n </ul>\n }\n\n @if (scopes().length) {\n <h3>Scopes</h3>\n <ul class=\"ng-doc-filter-list\" ngDocRadioGroup formControlName=\"scope\">\n @for (scope of scopes(); track scope) {\n <li>\n <button class=\"ng-doc-filter-button\" ng-doc-button-toggle [value]=\"scope\">\n {{ scope }}\n </button>\n </li>\n }\n </ul>\n }\n\n <h3>Filter</h3>\n <ng-doc-input-wrapper class=\"ng-doc-api-list-filter-input\">\n <ng-doc-icon icon=\"search\" ngDocInputWrapperLeft></ng-doc-icon>\n <input\n ngDocInputString\n formControlName=\"filter\"\n placeholder=\"Declaration name...\"\n ngDocAutofocus />\n </ng-doc-input-wrapper>\n </form>\n\n <div class=\"ng-doc-api-list\">\n @for (scope of filteredApiList(); track scope) {\n <div class=\"ng-doc-api-scope\">\n <h3 class=\"ng-doc-scope-title\" ng-doc-text>{{ scope.title }}</h3>\n @if (scope.items.length) {\n <ul class=\"ng-doc-scope-items\">\n @for (apiReference of scope.items; track apiReference) {\n <li class=\"ng-doc-scope-item\">\n <a class=\"ng-doc-scope-item-link\" [routerLink]=\"[apiReference.route]\">\n <ng-doc-kind-icon\n [kind]=\"apiReference.type\"\n size=\"medium\"\n [ngDocTooltip]=\"apiReference.type\">\n </ng-doc-kind-icon>\n {{ apiReference.name }}\n </a>\n </li>\n }\n </ul>\n }\n </div>\n }\n </div>\n</div>\n", styles: [":host h1{margin-top:0}:host .ng-doc-filter-list{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--ng-doc-base-gutter);list-style:none;padding:0}@container api-list-wrapper (max-width: 775px){:host .ng-doc-filter-list{grid-template-columns:repeat(4,1fr)}}@container api-list-wrapper (max-width: 600px){:host .ng-doc-filter-list{grid-template-columns:repeat(3,1fr)}}@container api-list-wrapper (max-width: 500px){:host .ng-doc-filter-list{grid-template-columns:repeat(2,1fr)}}@container api-list-wrapper (max-width: 350px){:host .ng-doc-filter-list{grid-template-columns:repeat(1,1fr)}}:host .ng-doc-filter-list .ng-doc-filter-button{justify-content:flex-start;text-wrap:nowrap;width:100%}:host .ng-doc-filter-list .ng-doc-filter-button ng-doc-kind-icon{margin-right:var(--ng-doc-base-gutter)}:host .ng-doc-api-list-filter-input{max-width:450px}:host .ng-doc-api-list-wrapper{container:api-list-wrapper/inline-size}:host .ng-doc-api-list-wrapper .ng-doc-api-filter{display:flex;margin-top:calc(var(--ng-doc-base-gutter) * 3);flex-wrap:wrap;gap:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-api-list-wrapper .ng-doc-api-filter .ng-doc-api-filter-item{width:200px}:host .ng-doc-api-list-wrapper .ng-doc-api-list{margin-top:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope{display:flex;flex-direction:column}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items{margin-top:calc(var(--ng-doc-base-gutter) * 3);list-style:none;padding:0}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item{float:left;width:33%;overflow:hidden;min-width:330px;text-overflow:ellipsis;white-space:nowrap}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item .ng-doc-scope-item-link{display:flex;align-items:center;border-left:1px solid var(--ng-doc-border-color);padding:var(--ng-doc-base-gutter);color:var(--ng-doc-text);background:color-mix(in srgb,var(--ng-doc-scope-item-link-background),transparent 90%);text-decoration:none}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item .ng-doc-scope-item-link:hover{color:var(--ng-doc-heading-color);border-left-color:var(--ng-doc-primary);--ng-doc-scope-item-link-background: var(--ng-doc-primary)}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item .ng-doc-scope-item-link ng-doc-kind-icon{margin-right:var(--ng-doc-base-gutter);text-decoration:none!important}:host ng-doc-input-wrapper ng-doc-icon{--ng-doc-icon-color: var(--ng-doc-text-muted)}\n"] }]
}], ctorParameters: () => [] });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocApiListComponent };
//# sourceMappingURL=ng-doc-app-components-api-list.mjs.map