@cisstech/nge
Version:
NG Essentials is a collection of libraries for Angular developers.
30 lines • 9.86 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, Output } 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 HeaderComponent {
constructor(injector, docService) {
this.injector = injector;
this.docService = docService;
this.toggle = new EventEmitter();
this.state$ = this.docService.stateChanges;
}
async invoke(handler) {
if (typeof handler === 'string') {
window.open(handler, '_blank');
}
else {
await handler(this.injector);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Injector }, { token: i1.NgeDocService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: HeaderComponent, selector: "nge-doc-header", outputs: { toggle: "toggle" }, ngImport: i0, template: "<header *ngIf=\"state$|async as state\">\n <div class=\"action\" aria-label=\"Menu\" (click)=\"toggle.emit()\">\n <img src=\"https://icongr.am/octicons/three-bars.svg?size=24&color=currentColor\">\n </div>\n <ng-container *ngIf=\"state.meta.backUrl\">\n <a class=\"action\" aria-label=\"Back\" [routerLink]=\"state.meta.backUrl\">\n <img [src]=\"state.meta.backIconUrl ?? 'https://icongr.am/octicons/home.svg?size=24&color=currentColor'\">\n </a>\n </ng-container>\n <ng-container *ngIf=\"state.meta.backUrlHref\">\n <a class=\"action\" aria-label=\"Back\" [href]=\"state.meta.backUrlHref\">\n <img [src]=\"state.meta.backIconUrl ?? 'https://icongr.am/octicons/home.svg?size=24&color=currentColor'\">\n </a>\n </ng-container>\n <div class=\"spacer\"></div>\n <ng-container *ngIf=\"state.currLink?.actions\">\n <ng-container *ngFor=\"let action of state.currLink?.actions || []\">\n <div class=\"action\" [attr.aria-label]=\"action.title\" [title]=\"action.tooltip\" (click)=\"invoke(action.run)\">\n <ng-container *ngIf=\"action.title\">\n <span>{{action.title}}</span>\n </ng-container>\n <ng-container *ngIf=\"action.icon\">\n <img [src]=\"action.icon\">\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</header>\n", styles: [":host{display:flex;align-items:center;margin:0;padding:2rem 0;width:100%;height:var(--header-height)}header{display:flex;align-items:center;width:100%;cursor:pointer}header .action{display:flex;align-items:center;font-size:1em;text-rendering:optimizeLegibility;color:#000;text-decoration:none;margin-right:8px}header .action span{padding:0 8px}header .action:hover{font-weight:700}header img{width:24px;height:24px;object-fit:cover}.spacer{flex:1}\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: 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: HeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'nge-doc-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header *ngIf=\"state$|async as state\">\n <div class=\"action\" aria-label=\"Menu\" (click)=\"toggle.emit()\">\n <img src=\"https://icongr.am/octicons/three-bars.svg?size=24&color=currentColor\">\n </div>\n <ng-container *ngIf=\"state.meta.backUrl\">\n <a class=\"action\" aria-label=\"Back\" [routerLink]=\"state.meta.backUrl\">\n <img [src]=\"state.meta.backIconUrl ?? 'https://icongr.am/octicons/home.svg?size=24&color=currentColor'\">\n </a>\n </ng-container>\n <ng-container *ngIf=\"state.meta.backUrlHref\">\n <a class=\"action\" aria-label=\"Back\" [href]=\"state.meta.backUrlHref\">\n <img [src]=\"state.meta.backIconUrl ?? 'https://icongr.am/octicons/home.svg?size=24&color=currentColor'\">\n </a>\n </ng-container>\n <div class=\"spacer\"></div>\n <ng-container *ngIf=\"state.currLink?.actions\">\n <ng-container *ngFor=\"let action of state.currLink?.actions || []\">\n <div class=\"action\" [attr.aria-label]=\"action.title\" [title]=\"action.tooltip\" (click)=\"invoke(action.run)\">\n <ng-container *ngIf=\"action.title\">\n <span>{{action.title}}</span>\n </ng-container>\n <ng-container *ngIf=\"action.icon\">\n <img [src]=\"action.icon\">\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</header>\n", styles: [":host{display:flex;align-items:center;margin:0;padding:2rem 0;width:100%;height:var(--header-height)}header{display:flex;align-items:center;width:100%;cursor:pointer}header .action{display:flex;align-items:center;font-size:1em;text-rendering:optimizeLegibility;color:#000;text-decoration:none;margin-right:8px}header .action span{padding:0 8px}header .action:hover{font-weight:700}header img{width:24px;height:24px;object-fit:cover}.spacer{flex:1}\n"] }]
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.NgeDocService }], propDecorators: { toggle: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nZS9kb2Mvc3JjL2xheW91dHMvZGVmYXVsdC9oZWFkZXIvaGVhZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nZS9kb2Mvc3JjL2xheW91dHMvZGVmYXVsdC9oZWFkZXIvaGVhZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFZLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQTs7Ozs7QUFVbEcsTUFBTSxPQUFPLGVBQWU7SUFJMUIsWUFDVyxRQUFrQixFQUNsQixVQUF5QjtRQUR6QixhQUFRLEdBQVIsUUFBUSxDQUFVO1FBQ2xCLGVBQVUsR0FBVixVQUFVLENBQWU7UUFMMUIsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUE7UUFDckMsV0FBTSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsWUFBWSxDQUFBO0lBS2xDLENBQUM7SUFFSixLQUFLLENBQUMsTUFBTSxDQUFDLE9BQWdDO1FBQzNDLElBQUksT0FBTyxPQUFPLEtBQUssUUFBUSxFQUFFLENBQUM7WUFDaEMsTUFBTSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsUUFBUSxDQUFDLENBQUE7UUFDaEMsQ0FBQzthQUFNLENBQUM7WUFDTixNQUFNLE9BQU8sQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUE7UUFDOUIsQ0FBQztJQUNILENBQUM7OEdBZlUsZUFBZTtrR0FBZixlQUFlLHFGQ1Y1QixrekNBNEJBOzsyRkRsQmEsZUFBZTtrQkFOM0IsU0FBUzsrQkFDRSxnQkFBZ0IsbUJBR1QsdUJBQXVCLENBQUMsTUFBTTt5R0FHckMsTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbmplY3RvciwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcbmltcG9ydCB7IE5nZURvY0xpbmtBY3Rpb25IYW5kbGVyIH0gZnJvbSAnLi4vLi4vLi4vbmdlLWRvYydcbmltcG9ydCB7IE5nZURvY1NlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9uZ2UtZG9jLnNlcnZpY2UnXG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25nZS1kb2MtaGVhZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2hlYWRlci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2hlYWRlci5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgSGVhZGVyQ29tcG9uZW50IHtcbiAgQE91dHB1dCgpIHRvZ2dsZSA9IG5ldyBFdmVudEVtaXR0ZXIoKVxuICBzdGF0ZSQgPSB0aGlzLmRvY1NlcnZpY2Uuc3RhdGVDaGFuZ2VzXG5cbiAgY29uc3RydWN0b3IoXG4gICAgcmVhZG9ubHkgaW5qZWN0b3I6IEluamVjdG9yLFxuICAgIHJlYWRvbmx5IGRvY1NlcnZpY2U6IE5nZURvY1NlcnZpY2VcbiAgKSB7fVxuXG4gIGFzeW5jIGludm9rZShoYW5kbGVyOiBOZ2VEb2NMaW5rQWN0aW9uSGFuZGxlcikge1xuICAgIGlmICh0eXBlb2YgaGFuZGxlciA9PT0gJ3N0cmluZycpIHtcbiAgICAgIHdpbmRvdy5vcGVuKGhhbmRsZXIsICdfYmxhbmsnKVxuICAgIH0gZWxzZSB7XG4gICAgICBhd2FpdCBoYW5kbGVyKHRoaXMuaW5qZWN0b3IpXG4gICAgfVxuICB9XG59XG4iLCI8aGVhZGVyICpuZ0lmPVwic3RhdGUkfGFzeW5jIGFzIHN0YXRlXCI+XG4gIDxkaXYgY2xhc3M9XCJhY3Rpb25cIiBhcmlhLWxhYmVsPVwiTWVudVwiIChjbGljayk9XCJ0b2dnbGUuZW1pdCgpXCI+XG4gICAgPGltZyBzcmM9XCJodHRwczovL2ljb25nci5hbS9vY3RpY29ucy90aHJlZS1iYXJzLnN2Zz9zaXplPTI0JmNvbG9yPWN1cnJlbnRDb2xvclwiPlxuICA8L2Rpdj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInN0YXRlLm1ldGEuYmFja1VybFwiPlxuICAgIDxhIGNsYXNzPVwiYWN0aW9uXCIgYXJpYS1sYWJlbD1cIkJhY2tcIiBbcm91dGVyTGlua109XCJzdGF0ZS5tZXRhLmJhY2tVcmxcIj5cbiAgICAgIDxpbWcgW3NyY109XCJzdGF0ZS5tZXRhLmJhY2tJY29uVXJsID8/ICdodHRwczovL2ljb25nci5hbS9vY3RpY29ucy9ob21lLnN2Zz9zaXplPTI0JmNvbG9yPWN1cnJlbnRDb2xvcidcIj5cbiAgICA8L2E+XG4gIDwvbmctY29udGFpbmVyPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwic3RhdGUubWV0YS5iYWNrVXJsSHJlZlwiPlxuICAgIDxhIGNsYXNzPVwiYWN0aW9uXCIgYXJpYS1sYWJlbD1cIkJhY2tcIiBbaHJlZl09XCJzdGF0ZS5tZXRhLmJhY2tVcmxIcmVmXCI+XG4gICAgICA8aW1nIFtzcmNdPVwic3RhdGUubWV0YS5iYWNrSWNvblVybCA/PyAnaHR0cHM6Ly9pY29uZ3IuYW0vb2N0aWNvbnMvaG9tZS5zdmc/c2l6ZT0yNCZjb2xvcj1jdXJyZW50Q29sb3InXCI+XG4gICAgPC9hPlxuICA8L25nLWNvbnRhaW5lcj5cbiAgPGRpdiBjbGFzcz1cInNwYWNlclwiPjwvZGl2PlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwic3RhdGUuY3Vyckxpbms/LmFjdGlvbnNcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBhY3Rpb24gb2Ygc3RhdGUuY3Vyckxpbms/LmFjdGlvbnMgfHwgW11cIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJhY3Rpb25cIiBbYXR0ci5hcmlhLWxhYmVsXT1cImFjdGlvbi50aXRsZVwiIFt0aXRsZV09XCJhY3Rpb24udG9vbHRpcFwiIChjbGljayk9XCJpbnZva2UoYWN0aW9uLnJ1bilcIj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImFjdGlvbi50aXRsZVwiPlxuICAgICAgICAgIDxzcGFuPnt7YWN0aW9uLnRpdGxlfX08L3NwYW4+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiYWN0aW9uLmljb25cIj5cbiAgICAgICAgICA8aW1nIFtzcmNdPVwiYWN0aW9uLmljb25cIj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8L2Rpdj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC9uZy1jb250YWluZXI+XG48L2hlYWRlcj5cbiJdfQ==