@cisstech/nge/esm2022/doc/src/layouts/default/sidenav/sidenav.component.mjs

NG Essentials is a collection of libraries for Angular developers.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../../nge-doc.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/router";
export class SidenavComponent {
    constructor(docService) {
        this.docService = docService;
        this.state$ = this.docService.stateChanges;
    }
    trackBy(_, item) {
        return item.href;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: SidenavComponent, deps: [{ token: i1.NgeDocService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: SidenavComponent, selector: "nge-doc-sidenav", ngImport: i0, template: "<ng-container *ngIf=\"state$|async as state\">\n  <header>\n    <ng-container *ngIf=\"state.meta.logo; else: nologo\">\n      <img [src]=\"state.meta.logo\" alt=\"Documentation Logo\">\n    </ng-container>\n    <ng-template #nologo>\n      <img src=\"https://icongr.am/octicons/book.svg?size=48&color=34495e\">\n    </ng-template>\n    <h1>{{ state.meta.name }}</h1>\n  </header>\n  <nav *ngIf=\"state.links.length\">\n    <ng-container *ngTemplateOutlet=\"template; context: { $implicit: state.links }\"></ng-container>\n  </nav>\n</ng-container>\n<ng-template #template let-links>\n  <ul>\n    <ng-container *ngFor=\"let link of links; trackBy: trackBy\">\n      <li [class.caption]=\"docService.isExpandable(link)\">\n        <a [routerLink]=\"link.href\" [class.active]=\"docService.isActive(link)\">\n          <img *ngIf=\"link.icon\" [src]=\"link.icon\">\n          {{ link.title }}\n        </a>\n      </li>\n      <ng-container *ngIf=\"docService.isExpandable(link)\">\n        <ng-container\n          *ngTemplateOutlet=\"template; context: { $implicit: link.children }\">\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow:auto;line-height:2.3em;padding:1rem}header{display:block}header h1{font-size:1.5rem;font-weight:300;margin:0 auto 1rem}header img{height:48px;width:48px;box-sizing:border-box;object-fit:contain}nav{margin:0;padding:0;box-sizing:border-box;flex:1}ul,li,a{margin:0;padding:0;list-style:none;text-decoration:none}a{display:inline-flex;align-items:center;font-size:1em;text-rendering:optimizeLegibility;position:relative;color:currentColor;text-decoration:none}a:hover,a.active{font-weight:700}a:before{content:\"\";position:absolute;width:100%;height:1px;bottom:-2px;left:0;background-color:var(--nge-doc-primary-color);visibility:hidden;transform:scaleX(0);transition:all .3s ease-in-out 0s}a:hover:before,a.active:before{visibility:visible;transform:scaleX(1)}a img{width:24px;height:24px;margin-right:4px;object-fit:cover}li{margin-bottom:4px}.caption{margin-top:.2rem;font-weight:700;display:flex;align-items:center}.caption+ul{padding-left:1.3em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: SidenavComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nge-doc-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"state$|async as state\">\n  <header>\n    <ng-container *ngIf=\"state.meta.logo; else: nologo\">\n      <img [src]=\"state.meta.logo\" alt=\"Documentation Logo\">\n    </ng-container>\n    <ng-template #nologo>\n      <img src=\"https://icongr.am/octicons/book.svg?size=48&color=34495e\">\n    </ng-template>\n    <h1>{{ state.meta.name }}</h1>\n  </header>\n  <nav *ngIf=\"state.links.length\">\n    <ng-container *ngTemplateOutlet=\"template; context: { $implicit: state.links }\"></ng-container>\n  </nav>\n</ng-container>\n<ng-template #template let-links>\n  <ul>\n    <ng-container *ngFor=\"let link of links; trackBy: trackBy\">\n      <li [class.caption]=\"docService.isExpandable(link)\">\n        <a [routerLink]=\"link.href\" [class.active]=\"docService.isActive(link)\">\n          <img *ngIf=\"link.icon\" [src]=\"link.icon\">\n          {{ link.title }}\n        </a>\n      </li>\n      <ng-container *ngIf=\"docService.isExpandable(link)\">\n        <ng-container\n          *ngTemplateOutlet=\"template; context: { $implicit: link.children }\">\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow:auto;line-height:2.3em;padding:1rem}header{display:block}header h1{font-size:1.5rem;font-weight:300;margin:0 auto 1rem}header img{height:48px;width:48px;box-sizing:border-box;object-fit:contain}nav{margin:0;padding:0;box-sizing:border-box;flex:1}ul,li,a{margin:0;padding:0;list-style:none;text-decoration:none}a{display:inline-flex;align-items:center;font-size:1em;text-rendering:optimizeLegibility;position:relative;color:currentColor;text-decoration:none}a:hover,a.active{font-weight:700}a:before{content:\"\";position:absolute;width:100%;height:1px;bottom:-2px;left:0;background-color:var(--nge-doc-primary-color);visibility:hidden;transform:scaleX(0);transition:all .3s ease-in-out 0s}a:hover:before,a.active:before{visibility:visible;transform:scaleX(1)}a img{width:24px;height:24px;margin-right:4px;object-fit:cover}li{margin-bottom:4px}.caption{margin-top:.2rem;font-weight:700;display:flex;align-items:center}.caption+ul{padding-left:1.3em}\n"] }]
        }], ctorParameters: () => [{ type: i1.NgeDocService }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZW5hdi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ2UvZG9jL3NyYy9sYXlvdXRzL2RlZmF1bHQvc2lkZW5hdi9zaWRlbmF2LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nZS9kb2Mvc3JjL2xheW91dHMvZGVmYXVsdC9zaWRlbmF2L3NpZGVuYXYuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQTs7Ozs7QUFVbEUsTUFBTSxPQUFPLGdCQUFnQjtJQUczQixZQUFxQixVQUF5QjtRQUF6QixlQUFVLEdBQVYsVUFBVSxDQUFlO1FBRjlDLFdBQU0sR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLFlBQVksQ0FBQTtJQUVZLENBQUM7SUFFbEQsT0FBTyxDQUFDLENBQVMsRUFBRSxJQUFnQjtRQUNqQyxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUE7SUFDbEIsQ0FBQzs4R0FQVSxnQkFBZ0I7a0dBQWhCLGdCQUFnQix1RENWN0IsNnBDQStCQTs7MkZEckJhLGdCQUFnQjtrQkFONUIsU0FBUzsrQkFDRSxpQkFBaUIsbUJBR1YsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJ1xuaW1wb3J0IHsgTmdlRG9jTGluayB9IGZyb20gJy4uLy4uLy4uL25nZS1kb2MnXG5pbXBvcnQgeyBOZ2VEb2NTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vLi4vbmdlLWRvYy5zZXJ2aWNlJ1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ2UtZG9jLXNpZGVuYXYnLFxuICB0ZW1wbGF0ZVVybDogJy4vc2lkZW5hdi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NpZGVuYXYuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNpZGVuYXZDb21wb25lbnQge1xuICBzdGF0ZSQgPSB0aGlzLmRvY1NlcnZpY2Uuc3RhdGVDaGFuZ2VzXG5cbiAgY29uc3RydWN0b3IocmVhZG9ubHkgZG9jU2VydmljZTogTmdlRG9jU2VydmljZSkge31cblxuICB0cmFja0J5KF86IG51bWJlciwgaXRlbTogTmdlRG9jTGluaykge1xuICAgIHJldHVybiBpdGVtLmhyZWZcbiAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cInN0YXRlJHxhc3luYyBhcyBzdGF0ZVwiPlxuICA8aGVhZGVyPlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJzdGF0ZS5tZXRhLmxvZ287IGVsc2U6IG5vbG9nb1wiPlxuICAgICAgPGltZyBbc3JjXT1cInN0YXRlLm1ldGEubG9nb1wiIGFsdD1cIkRvY3VtZW50YXRpb24gTG9nb1wiPlxuICAgIDwvbmctY29udGFpbmVyPlxuICAgIDxuZy10ZW1wbGF0ZSAjbm9sb2dvPlxuICAgICAgPGltZyBzcmM9XCJodHRwczovL2ljb25nci5hbS9vY3RpY29ucy9ib29rLnN2Zz9zaXplPTQ4JmNvbG9yPTM0NDk1ZVwiPlxuICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPGgxPnt7IHN0YXRlLm1ldGEubmFtZSB9fTwvaDE+XG4gIDwvaGVhZGVyPlxuICA8bmF2ICpuZ0lmPVwic3RhdGUubGlua3MubGVuZ3RoXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInRlbXBsYXRlOyBjb250ZXh0OiB7ICRpbXBsaWNpdDogc3RhdGUubGlua3MgfVwiPjwvbmctY29udGFpbmVyPlxuICA8L25hdj5cbjwvbmctY29udGFpbmVyPlxuPG5nLXRlbXBsYXRlICN0ZW1wbGF0ZSBsZXQtbGlua3M+XG4gIDx1bD5cbiAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBsaW5rIG9mIGxpbmtzOyB0cmFja0J5OiB0cmFja0J5XCI+XG4gICAgICA8bGkgW2NsYXNzLmNhcHRpb25dPVwiZG9jU2VydmljZS5pc0V4cGFuZGFibGUobGluaylcIj5cbiAgICAgICAgPGEgW3JvdXRlckxpbmtdPVwibGluay5ocmVmXCIgW2NsYXNzLmFjdGl2ZV09XCJkb2NTZXJ2aWNlLmlzQWN0aXZlKGxpbmspXCI+XG4gICAgICAgICAgPGltZyAqbmdJZj1cImxpbmsuaWNvblwiIFtzcmNdPVwibGluay5pY29uXCI+XG4gICAgICAgICAge3sgbGluay50aXRsZSB9fVxuICAgICAgICA8L2E+XG4gICAgICA8L2xpPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImRvY1NlcnZpY2UuaXNFeHBhbmRhYmxlKGxpbmspXCI+XG4gICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICAqbmdUZW1wbGF0ZU91dGxldD1cInRlbXBsYXRlOyBjb250ZXh0OiB7ICRpbXBsaWNpdDogbGluay5jaGlsZHJlbiB9XCI+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvdWw+XG48L25nLXRlbXBsYXRlPlxuIl19