@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>
93 lines (89 loc) • 9.33 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ViewContainerRef, ViewChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
import { Router, ActivatedRoute, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
import { NgDocPageHeaderComponent } from '@ng-doc/app/components/page-header';
import { createComponent } from '@ng-doc/app/helpers';
import { NG_DOC_PAGE_SKELETON, NG_DOC_CONTEXT } from '@ng-doc/app/tokens';
import { isPresent } from '@ng-doc/core/helpers/is-present';
import { NgDocTabRouteComponent, NgDocTabRoutesGroupComponent, NgDocIconComponent } from '@ng-doc/ui-kit';
class NgDocPageWrapperComponent {
constructor() {
this.hasBreadcrumb = true;
this.pageType = 'guide';
this.skeleton = inject(NG_DOC_PAGE_SKELETON);
this.router = inject(Router);
this.route = inject(ActivatedRoute);
this.context = inject(NG_DOC_CONTEXT);
this.breadcrumbs = inject(ActivatedRoute)
.pathFromRoot.filter((route) => !!route.snapshot.url.length)
.map((route) => route.snapshot.title)
.filter(isPresent);
}
ngOnInit() {
if (this.skeleton.breadcrumbs && this.hasBreadcrumb) {
createComponent(this.pageBreadcrumbs, this.skeleton.breadcrumbs, {
breadcrumbs: this.breadcrumbs,
});
}
if (this.pageType === 'guide') {
if (this.skeleton.navigation) {
createComponent(this.pageNavigation, this.skeleton.navigation, this.navigationInputs());
}
}
}
navigationInputs() {
const url = '/' +
this.route.pathFromRoot
.map((route) => route.snapshot.url)
.flat()
.join('/');
const flatItems = (items) => items
.map((item) => [item.children?.length ? flatItems(item.children) : item])
.flat(2);
const flatPages = flatItems(this.context.navigation);
return {
prevPage: flatPages[flatPages.findIndex((item) => url === item.route) - 1],
nextPage: flatPages[flatPages.findIndex((item) => url === item.route) + 1],
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocPageWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocPageWrapperComponent, isStandalone: true, selector: "ng-doc-page-wrapper", inputs: { routes: "routes", headerContent: "headerContent", hasBreadcrumb: "hasBreadcrumb", pageType: "pageType" }, host: { properties: { "attr.data-ng-doc-page-tabs": "routes.length > 1" } }, viewQueries: [{ propertyName: "pageBreadcrumbs", first: true, predicate: ["pageBreadcrumbs"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "pageToc", first: true, predicate: ["pageToc"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "pageNavigation", first: true, predicate: ["pageNavigation"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<article class=\"ngde\">\n <ng-container #pageBreadcrumbs></ng-container>\n\n <ng-doc-page-header [headerContent]=\"headerContent\" />\n\n @if (routes.length > 1) {\n <ng-doc-tab-routes-group>\n @for (route of routes; track route) {\n <a\n ng-doc-tab-route\n [routerLink]=\"['./' + route.path]\"\n routerLinkActive\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #rla=\"routerLinkActive\"\n [isActive]=\"rla.isActive\">\n @if (route.data?.['icon']; as icon) {\n <ng-doc-icon [customIcon]=\"icon\" />\n }\n {{ route.title }}\n </a>\n }\n </ng-doc-tab-routes-group>\n }\n\n <router-outlet></router-outlet>\n\n <ng-container #pageNavigation></ng-container>\n</article>\n\n<ng-container #pageToc></ng-container>\n", styles: [":host{display:flex;justify-content:space-between;--ng-doc-page-sticky-offset: var(--ng-doc-navbar-height)}:host[data-ng-doc-page-tabs=true]{--ng-doc-page-sticky-offset: calc( var(--ng-doc-navbar-height) + var(--ng-doc-page-wrapper-tabs-height) )}:host{--ng-doc-toc-margin: calc(var(--ng-doc-base-gutter) * 5)}:host article{position:relative;width:var(--ng-doc-article-width, 100%);margin-left:auto;margin-right:auto;min-width:0}:host header ::ng-deep h1{margin-top:0}:host ng-doc-tab-routes-group{position:sticky!important;top:var(--ng-doc-navbar-height);margin:calc(var(--ng-doc-base-gutter) * 2) 0;background:var(--ng-doc-navbar-background);z-index:5;height:var(--ng-doc-page-wrapper-tabs-height)}:host .ng-doc-page-header{margin-bottom:calc(var(--ng-doc-base-gutter) * 3)}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NgDocTabRouteComponent, selector: "a[ng-doc-tab-route]", inputs: ["isActive"] }, { kind: "component", type: NgDocTabRoutesGroupComponent, selector: "ng-doc-tab-routes-group" }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocPageHeaderComponent, selector: "ng-doc-page-header", inputs: ["headerContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocPageWrapperComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-page-wrapper', imports: [
RouterOutlet,
RouterLink,
NgDocTabRouteComponent,
NgDocTabRoutesGroupComponent,
RouterLinkActive,
NgDocIconComponent,
NgDocPageHeaderComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[attr.data-ng-doc-page-tabs]': 'routes.length > 1',
}, template: "<article class=\"ngde\">\n <ng-container #pageBreadcrumbs></ng-container>\n\n <ng-doc-page-header [headerContent]=\"headerContent\" />\n\n @if (routes.length > 1) {\n <ng-doc-tab-routes-group>\n @for (route of routes; track route) {\n <a\n ng-doc-tab-route\n [routerLink]=\"['./' + route.path]\"\n routerLinkActive\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #rla=\"routerLinkActive\"\n [isActive]=\"rla.isActive\">\n @if (route.data?.['icon']; as icon) {\n <ng-doc-icon [customIcon]=\"icon\" />\n }\n {{ route.title }}\n </a>\n }\n </ng-doc-tab-routes-group>\n }\n\n <router-outlet></router-outlet>\n\n <ng-container #pageNavigation></ng-container>\n</article>\n\n<ng-container #pageToc></ng-container>\n", styles: [":host{display:flex;justify-content:space-between;--ng-doc-page-sticky-offset: var(--ng-doc-navbar-height)}:host[data-ng-doc-page-tabs=true]{--ng-doc-page-sticky-offset: calc( var(--ng-doc-navbar-height) + var(--ng-doc-page-wrapper-tabs-height) )}:host{--ng-doc-toc-margin: calc(var(--ng-doc-base-gutter) * 5)}:host article{position:relative;width:var(--ng-doc-article-width, 100%);margin-left:auto;margin-right:auto;min-width:0}:host header ::ng-deep h1{margin-top:0}:host ng-doc-tab-routes-group{position:sticky!important;top:var(--ng-doc-navbar-height);margin:calc(var(--ng-doc-base-gutter) * 2) 0;background:var(--ng-doc-navbar-background);z-index:5;height:var(--ng-doc-page-wrapper-tabs-height)}:host .ng-doc-page-header{margin-bottom:calc(var(--ng-doc-base-gutter) * 3)}\n"] }]
}], propDecorators: { routes: [{
type: Input,
args: [{ required: true }]
}], headerContent: [{
type: Input,
args: [{ required: true }]
}], hasBreadcrumb: [{
type: Input
}], pageType: [{
type: Input
}], pageBreadcrumbs: [{
type: ViewChild,
args: ['pageBreadcrumbs', { read: ViewContainerRef, static: true }]
}], pageToc: [{
type: ViewChild,
args: ['pageToc', { read: ViewContainerRef, static: true }]
}], pageNavigation: [{
type: ViewChild,
args: ['pageNavigation', { read: ViewContainerRef, static: true }]
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocPageWrapperComponent };
//# sourceMappingURL=ng-doc-app-components-page-wrapper.mjs.map