@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>
101 lines (97 loc) • 8.55 kB
JavaScript
import { AsyncPipe } from '@angular/common';
import * as i0 from '@angular/core';
import { Directive, inject, ViewChild, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
import { NgDocSidebarService } from '@ng-doc/app/services';
import { NgDocSidenavComponent } from '@ng-doc/ui-kit';
import * as i1 from '@tinkoff/ng-polymorpheus';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
/**
* Directive uses for providing custom navbar, you should mark element with this directive
* and the `NgDocRootComponent` will use it as a navbar
*
* ```html
* <ng-doc-root>
* <my-custom-navbar ngDocCustomNavbar></my-custom-navbar>
*
* <ng-doc-sidebar></ng-doc-sidebar>
* <router-outlet></router-outlet>
* </ng-doc-root>
* ```
*/
class NgDocCustomNavbarDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocCustomNavbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgDocCustomNavbarDirective, isStandalone: true, selector: "[ngDocCustomNavbar]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocCustomNavbarDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngDocCustomNavbar]',
standalone: true,
}]
}] });
/**
* Directive uses for providing custom sidebar, you should mark element with this directive
* and the `NgDocRootComponent` will use it as a sidebar
*
* ```html
* <ng-doc-root>
* <ng-doc-navbar></ng-doc-sidebar>
*
* <my-custom-sidebar ngDocCustomSidebar></my-custom-sidebar>
* <router-outlet></router-outlet>
* </ng-doc-root>
* ```
*/
class NgDocCustomSidebarDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocCustomSidebarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgDocCustomSidebarDirective, isStandalone: true, selector: "[ngDocCustomSidebar]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocCustomSidebarDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngDocCustomSidebar]',
standalone: true,
}]
}] });
class NgDocRootComponent {
constructor() {
/**
* If `true` then the sidebar will be shown
* You can use it for example for landing page to hide sidebar
*/
this.sidebar = true;
/**
* Content for footer
*/
this.footerContent = '';
/**
* If `true` then page will be shown without width limit.
* You can use it for example for landing page
*/
this.noWidthLimit = false;
this.sidebarService = inject(NgDocSidebarService);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocRootComponent, isStandalone: true, selector: "ng-doc-root", inputs: { sidebar: "sidebar", footerContent: "footerContent", noWidthLimit: "noWidthLimit" }, host: { properties: { "attr.data-ng-doc-no-width-limit": "this.noWidthLimit" } }, providers: [], viewQueries: [{ propertyName: "sidenav", first: true, predicate: NgDocSidenavComponent, descendants: true }], ngImport: i0, template: "<ng-container>\n <div class=\"ng-doc-root-wrapper\">\n <div class=\"ng-doc-header\">\n <ng-content select=\"ng-doc-navbar\"></ng-content>\n <ng-content select=\"[ngDocCustomNavbar]\"></ng-content>\n </div>\n <main>\n <ng-doc-sidenav\n [sidebar]=\"sidebar ? sidebarContent : null\"\n [opened]=\"(sidebarService.isExpanded() | async) ?? true\"\n [hasBackdrop]=\"sidebarService.isMobile\"\n (closeEvent)=\"sidebarService.hide()\">\n <ng-template #sidebarContent>\n <ng-content select=\"ng-doc-sidebar\"></ng-content>\n <ng-content select=\"[ngDocCustomSidebar]\"></ng-content>\n </ng-template>\n\n <ng-content></ng-content>\n </ng-doc-sidenav>\n </main>\n @if (footerContent) {\n <footer>\n <ng-container *polymorpheusOutlet=\"footerContent as text\"> {{ text }}</ng-container>\n </footer>\n }\n </div>\n</ng-container>\n", styles: [":host[data-ng-doc-no-width-limit=true] .ng-doc-root-wrapper main{max-width:none}:host .ng-doc-root-wrapper{display:flex;flex-direction:column;height:100%}:host .ng-doc-root-wrapper main{display:flex;width:100%;margin-left:auto;margin-right:auto;max-width:var(--ng-doc-app-max-width);padding:var(--ng-doc-main-padding);--ng-doc-sidenav-top: var(--ng-doc-navbar-height);--ng-doc-sidenav-width: var(--ng-doc-sidebar-width);--ng-doc-sidenav-content-padding: var(--ng-doc-page-padding)}:host .ng-doc-root-wrapper footer{margin-top:auto}:host .ng-doc-root-wrapper .ng-doc-header{position:fixed;top:0;height:var(--ng-doc-navbar-height);width:100%;z-index:15}\n"], dependencies: [{ kind: "component", type: NgDocSidenavComponent, selector: "ng-doc-sidenav", inputs: ["sidebar", "opened", "hasBackdrop"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: PolymorpheusModule }, { kind: "directive", type: i1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocRootComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-root', providers: [], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocSidenavComponent, PolymorpheusModule, AsyncPipe], template: "<ng-container>\n <div class=\"ng-doc-root-wrapper\">\n <div class=\"ng-doc-header\">\n <ng-content select=\"ng-doc-navbar\"></ng-content>\n <ng-content select=\"[ngDocCustomNavbar]\"></ng-content>\n </div>\n <main>\n <ng-doc-sidenav\n [sidebar]=\"sidebar ? sidebarContent : null\"\n [opened]=\"(sidebarService.isExpanded() | async) ?? true\"\n [hasBackdrop]=\"sidebarService.isMobile\"\n (closeEvent)=\"sidebarService.hide()\">\n <ng-template #sidebarContent>\n <ng-content select=\"ng-doc-sidebar\"></ng-content>\n <ng-content select=\"[ngDocCustomSidebar]\"></ng-content>\n </ng-template>\n\n <ng-content></ng-content>\n </ng-doc-sidenav>\n </main>\n @if (footerContent) {\n <footer>\n <ng-container *polymorpheusOutlet=\"footerContent as text\"> {{ text }}</ng-container>\n </footer>\n }\n </div>\n</ng-container>\n", styles: [":host[data-ng-doc-no-width-limit=true] .ng-doc-root-wrapper main{max-width:none}:host .ng-doc-root-wrapper{display:flex;flex-direction:column;height:100%}:host .ng-doc-root-wrapper main{display:flex;width:100%;margin-left:auto;margin-right:auto;max-width:var(--ng-doc-app-max-width);padding:var(--ng-doc-main-padding);--ng-doc-sidenav-top: var(--ng-doc-navbar-height);--ng-doc-sidenav-width: var(--ng-doc-sidebar-width);--ng-doc-sidenav-content-padding: var(--ng-doc-page-padding)}:host .ng-doc-root-wrapper footer{margin-top:auto}:host .ng-doc-root-wrapper .ng-doc-header{position:fixed;top:0;height:var(--ng-doc-navbar-height);width:100%;z-index:15}\n"] }]
}], propDecorators: { sidebar: [{
type: Input
}], footerContent: [{
type: Input
}], noWidthLimit: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-no-width-limit']
}], sidenav: [{
type: ViewChild,
args: [NgDocSidenavComponent]
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocCustomNavbarDirective, NgDocCustomSidebarDirective, NgDocRootComponent };
//# sourceMappingURL=ng-doc-app-components-root.mjs.map