@cisstech/nge
Version:
NG Essentials is a collection of libraries for Angular developers.
39 lines • 10.7 kB
JavaScript
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Breakpoints } from '@angular/cdk/layout';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/layout";
import * as i2 from "@angular/common";
import * as i3 from "../../renderer/renderer.component";
import * as i4 from "../../renderer/toc.directive";
import * as i5 from "./footer/footer.component";
import * as i6 from "./header/header.component";
import * as i7 from "./sidenav/sidenav.component";
export class DefaultLayoutComponent {
constructor(observer, changeDetectorRef) {
this.observer = observer;
this.changeDetectorRef = changeDetectorRef;
this.sidebarOpened = true;
this.showTableOfContents = true;
}
ngOnInit() {
this.observer.observe([Breakpoints.XSmall, Breakpoints.Small]).subscribe((result) => {
this.sidebarOpened = true;
this.showTableOfContents = true;
if (result.matches) {
this.sidebarOpened = false;
this.showTableOfContents = false;
}
this.changeDetectorRef.markForCheck();
});
}
ngOnDestroy() {
this.subscription?.unsubscribe();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: DefaultLayoutComponent, deps: [{ token: i1.BreakpointObserver }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: DefaultLayoutComponent, selector: "nge-doc-default-layout", ngImport: i0, template: "<main>\n <aside class=\"sidebar\" [class.opened]=\"sidebarOpened\">\n <nge-doc-sidenav />\n </aside>\n <section>\n <nge-doc-header (toggle)=\"sidebarOpened = !sidebarOpened\" />\n <article>\n <nge-doc-renderer #renderer />\n <aside\n *ngIf=\"showTableOfContents\"\n [ngeDocToc]=\"renderer.componentRef\">\n </aside>\n </article>\n </section>\n</main>\n<nge-doc-footer />\n", styles: [":host{--sidebar-width: 20rem;--footer-height: 100px;--header-height: 64px;--nge-doc-primary-color: #f50057;--nge-doc-sidebar-border-color: rgba(0, 0, 0, .07);display:block;width:100vw;height:100vh;overflow:hidden}main{display:flex;height:calc(100vh - var(--footer-height));overflow:hidden}aside.sidebar{display:block;width:0px;border-right:1px solid var(--nge-doc-sidebar-border-color);background-color:#fafbfc;opacity:0;pointer-events:none;transition:all .5s}aside.sidebar.opened{opacity:1;pointer-events:initial;width:var(--sidebar-width)}aside.sidebar,nge-doc-sidenav{height:calc(100vh - var(--footer-height))}section{flex:1;height:calc(100vh - var(--footer-height));margin:0;padding:0 2rem;overflow-x:hidden;overflow-y:auto;box-sizing:border-box}section aside{height:calc(100vh - var(--header-height) - var(--footer-height));position:-webkit-sticky;position:sticky;overflow-x:hidden;top:0}section aside::ng-deep ul{list-style-type:none;border-left:1px solid #f5f5f5}section aside::ng-deep ul,section aside::ng-deep li{width:100%;margin:0;padding:0}section aside::ng-deep li{padding:0 0 4px 16px;line-height:1.5}section aside::ng-deep a{color:currentColor;text-decoration:none;white-space:nowrap;text-overflow:ellipsis;display:block;width:90%;overflow:hidden}section aside::ng-deep a:hover{text-decoration:underline}section aside::ng-deep li.active{color:currentColor;font-weight:700;border-left:2px solid var(--nge-doc-primary-color);box-sizing:border-box}section article{position:relative;display:grid;grid-template-columns:80% auto;padding-bottom:1rem}nge-doc-footer{height:var(--footer-height);padding:0 16rem}@media (max-width: 959.99px){section{padding:0 16px}section article{display:block}nge-doc-footer{padding:0 2rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.NgeDocRendererComponent, selector: "nge-doc-renderer" }, { kind: "directive", type: i4.NgeDocTocDirective, selector: "[ngeDocToc]", inputs: ["ngeDocToc"] }, { kind: "component", type: i5.FooterComponent, selector: "nge-doc-footer" }, { kind: "component", type: i6.HeaderComponent, selector: "nge-doc-header", outputs: ["toggle"] }, { kind: "component", type: i7.SidenavComponent, selector: "nge-doc-sidenav" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: DefaultLayoutComponent, decorators: [{
type: Component,
args: [{ selector: 'nge-doc-default-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<main>\n <aside class=\"sidebar\" [class.opened]=\"sidebarOpened\">\n <nge-doc-sidenav />\n </aside>\n <section>\n <nge-doc-header (toggle)=\"sidebarOpened = !sidebarOpened\" />\n <article>\n <nge-doc-renderer #renderer />\n <aside\n *ngIf=\"showTableOfContents\"\n [ngeDocToc]=\"renderer.componentRef\">\n </aside>\n </article>\n </section>\n</main>\n<nge-doc-footer />\n", styles: [":host{--sidebar-width: 20rem;--footer-height: 100px;--header-height: 64px;--nge-doc-primary-color: #f50057;--nge-doc-sidebar-border-color: rgba(0, 0, 0, .07);display:block;width:100vw;height:100vh;overflow:hidden}main{display:flex;height:calc(100vh - var(--footer-height));overflow:hidden}aside.sidebar{display:block;width:0px;border-right:1px solid var(--nge-doc-sidebar-border-color);background-color:#fafbfc;opacity:0;pointer-events:none;transition:all .5s}aside.sidebar.opened{opacity:1;pointer-events:initial;width:var(--sidebar-width)}aside.sidebar,nge-doc-sidenav{height:calc(100vh - var(--footer-height))}section{flex:1;height:calc(100vh - var(--footer-height));margin:0;padding:0 2rem;overflow-x:hidden;overflow-y:auto;box-sizing:border-box}section aside{height:calc(100vh - var(--header-height) - var(--footer-height));position:-webkit-sticky;position:sticky;overflow-x:hidden;top:0}section aside::ng-deep ul{list-style-type:none;border-left:1px solid #f5f5f5}section aside::ng-deep ul,section aside::ng-deep li{width:100%;margin:0;padding:0}section aside::ng-deep li{padding:0 0 4px 16px;line-height:1.5}section aside::ng-deep a{color:currentColor;text-decoration:none;white-space:nowrap;text-overflow:ellipsis;display:block;width:90%;overflow:hidden}section aside::ng-deep a:hover{text-decoration:underline}section aside::ng-deep li.active{color:currentColor;font-weight:700;border-left:2px solid var(--nge-doc-primary-color);box-sizing:border-box}section article{position:relative;display:grid;grid-template-columns:80% auto;padding-bottom:1rem}nge-doc-footer{height:var(--footer-height);padding:0 16rem}@media (max-width: 959.99px){section{padding:0 16px}section article{display:block}nge-doc-footer{padding:0 2rem}}\n"] }]
}], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: i0.ChangeDetectorRef }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1sYXlvdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmdlL2RvYy9zcmMvbGF5b3V0cy9kZWZhdWx0L2RlZmF1bHQtbGF5b3V0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nZS9kb2Mvc3JjL2xheW91dHMvZGVmYXVsdC9kZWZhdWx0LWxheW91dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQTtBQUNyRixPQUFPLEVBQXNCLFdBQVcsRUFBRSxNQUFNLHFCQUFxQixDQUFBOzs7Ozs7Ozs7QUFVckUsTUFBTSxPQUFPLHNCQUFzQjtJQUtqQyxZQUNtQixRQUE0QixFQUM1QixpQkFBb0M7UUFEcEMsYUFBUSxHQUFSLFFBQVEsQ0FBb0I7UUFDNUIsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQUx2RCxrQkFBYSxHQUFHLElBQUksQ0FBQTtRQUNwQix3QkFBbUIsR0FBRyxJQUFJLENBQUE7SUFLdkIsQ0FBQztJQUVKLFFBQVE7UUFDTixJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxDQUFDLFdBQVcsQ0FBQyxNQUFNLEVBQUUsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUU7WUFDbEYsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUE7WUFDekIsSUFBSSxDQUFDLG1CQUFtQixHQUFHLElBQUksQ0FBQTtZQUMvQixJQUFJLE1BQU0sQ0FBQyxPQUFPLEVBQUUsQ0FBQztnQkFDbkIsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUE7Z0JBQzFCLElBQUksQ0FBQyxtQkFBbUIsR0FBRyxLQUFLLENBQUE7WUFDbEMsQ0FBQztZQUNELElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxZQUFZLEVBQUUsQ0FBQTtRQUN2QyxDQUFDLENBQUMsQ0FBQTtJQUNKLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFlBQVksRUFBRSxXQUFXLEVBQUUsQ0FBQTtJQUNsQyxDQUFDOzhHQXhCVSxzQkFBc0I7a0dBQXRCLHNCQUFzQiw4RENYbkMsbWFBZ0JBOzsyRkRMYSxzQkFBc0I7a0JBTmxDLFNBQVM7K0JBQ0Usd0JBQXdCLG1CQUdqQix1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgT25EZXN0cm95LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJ1xuaW1wb3J0IHsgQnJlYWtwb2ludE9ic2VydmVyLCBCcmVha3BvaW50cyB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9sYXlvdXQnXG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJ1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0b3JSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJ1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ2UtZG9jLWRlZmF1bHQtbGF5b3V0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2RlZmF1bHQtbGF5b3V0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGVmYXVsdC1sYXlvdXQuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIERlZmF1bHRMYXlvdXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIHByaXZhdGUgc3Vic2NyaXB0aW9uPzogU3Vic2NyaXB0aW9uXG4gIHNpZGViYXJPcGVuZWQgPSB0cnVlXG4gIHNob3dUYWJsZU9mQ29udGVudHMgPSB0cnVlXG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSByZWFkb25seSBvYnNlcnZlcjogQnJlYWtwb2ludE9ic2VydmVyLFxuICAgIHByaXZhdGUgcmVhZG9ubHkgY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmXG4gICkge31cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLm9ic2VydmVyLm9ic2VydmUoW0JyZWFrcG9pbnRzLlhTbWFsbCwgQnJlYWtwb2ludHMuU21hbGxdKS5zdWJzY3JpYmUoKHJlc3VsdCkgPT4ge1xuICAgICAgdGhpcy5zaWRlYmFyT3BlbmVkID0gdHJ1ZVxuICAgICAgdGhpcy5zaG93VGFibGVPZkNvbnRlbnRzID0gdHJ1ZVxuICAgICAgaWYgKHJlc3VsdC5tYXRjaGVzKSB7XG4gICAgICAgIHRoaXMuc2lkZWJhck9wZW5lZCA9IGZhbHNlXG4gICAgICAgIHRoaXMuc2hvd1RhYmxlT2ZDb250ZW50cyA9IGZhbHNlXG4gICAgICB9XG4gICAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLm1hcmtGb3JDaGVjaygpXG4gICAgfSlcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uPy51bnN1YnNjcmliZSgpXG4gIH1cbn1cbiIsIjxtYWluPlxuICA8YXNpZGUgY2xhc3M9XCJzaWRlYmFyXCIgW2NsYXNzLm9wZW5lZF09XCJzaWRlYmFyT3BlbmVkXCI+XG4gICAgPG5nZS1kb2Mtc2lkZW5hdiAvPlxuICA8L2FzaWRlPlxuICA8c2VjdGlvbj5cbiAgICA8bmdlLWRvYy1oZWFkZXIgKHRvZ2dsZSk9XCJzaWRlYmFyT3BlbmVkID0gIXNpZGViYXJPcGVuZWRcIiAvPlxuICAgIDxhcnRpY2xlPlxuICAgICAgPG5nZS1kb2MtcmVuZGVyZXIgI3JlbmRlcmVyIC8+XG4gICAgICA8YXNpZGVcbiAgICAgICAgKm5nSWY9XCJzaG93VGFibGVPZkNvbnRlbnRzXCJcbiAgICAgICAgW25nZURvY1RvY109XCJyZW5kZXJlci5jb21wb25lbnRSZWZcIj5cbiAgICAgIDwvYXNpZGU+XG4gICAgPC9hcnRpY2xlPlxuICA8L3NlY3Rpb24+XG48L21haW4+XG48bmdlLWRvYy1mb290ZXIgLz5cbiJdfQ==