@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>
96 lines (92 loc) • 8.52 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { NgIf, AsyncPipe } from '@angular/common';
import * as i0 from '@angular/core';
import { afterNextRender, NgZone, ChangeDetectorRef, Component, ChangeDetectionStrategy, Inject, Input, HostBinding } from '@angular/core';
import { NgDocSearchComponent } from '@ng-doc/app/components/search';
import * as i1 from '@ng-doc/app/services';
import { NgDocSidebarService } from '@ng-doc/app/services';
import { ngDocZoneOptimize, NgDocButtonIconComponent, NgDocIconComponent, NgDocLetDirective } from '@ng-doc/ui-kit';
import { WINDOW } from '@ng-web-apis/common';
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
import { combineLatest, fromEvent } from 'rxjs';
import { map, distinctUntilChanged, startWith } from 'rxjs/operators';
/**
* Navbar component for ng-doc application
*/
let NgDocNavbarComponent = class NgDocNavbarComponent {
constructor(window, ngZone, changeDetectorRef, sidebarService) {
this.window = window;
this.ngZone = ngZone;
this.changeDetectorRef = changeDetectorRef;
this.sidebarService = sidebarService;
/**
* Show search input
*/
this.search = true;
/**
* Show hamburger button
*/
this.hamburger = true;
/**
* Use glass effect for navbar
*/
this.glassEffect = true;
/**
* Indicates if navbar has border
*/
this.hasBorder = false;
afterNextRender(() => {
combineLatest([
fromEvent(this.window, 'scroll').pipe(map((e) => (e.target?.scrollingElement?.scrollTop ?? 0) > 0), distinctUntilChanged(), startWith(false), ngDocZoneOptimize(this.ngZone)),
this.sidebarService.isExpanded(),
])
.pipe(map(([scrolled, isExpanded]) => scrolled || (isExpanded && this.sidebarService.isMobile)), untilDestroyed(this))
.subscribe((hasShadow) => {
this.hasBorder = hasShadow;
this.changeDetectorRef.markForCheck();
});
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocNavbarComponent, deps: [{ token: WINDOW }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.NgDocSidebarService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgDocNavbarComponent, isStandalone: true, selector: "ng-doc-navbar", inputs: { search: "search", hamburger: "hamburger", glassEffect: "glassEffect" }, host: { properties: { "attr.data-glass-effect": "this.glassEffect", "class.has-border": "this.hasBorder" } }, ngImport: i0, template: "<div class=\"navbar-container\">\n <div class=\"ng-doc-navbar-left\">\n <ng-content select=\"[ngDocNavbarLeft]\"></ng-content>\n </div>\n <div class=\"ng-doc-navbar-right\">\n @if (search) {\n <ng-doc-search></ng-doc-search>\n }\n <ng-content select=\"[ngDocNavbarRight]\"></ng-content>\n <button class=\"ng-doc-menu\" ng-doc-button-icon size=\"large\" (click)=\"sidebarService.toggle()\">\n <ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n </button>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex;justify-content:center;height:100%;border-bottom:1px solid transparent;transition:var(--ng-doc-transition) border}:host:not([data-glass-effect=false]){background:color-mix(in srgb,var(--ng-doc-navbar-background) 60%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background-color:var(--ng-doc-navbar-background)}}:host[data-glass-effect=false]{background-color:var(--ng-doc-navbar-background)}:host.has-border{border-bottom:var(--ng-doc-navbar-border, );box-shadow:var(--ng-doc-shadow-color) 0 5px 20px -5px}:host .navbar-container{display:flex;height:100%;width:100%;padding:0 var(--ng-doc-navbar-horizontal-padding);z-index:10;max-width:var(--ng-doc-app-max-width)}:host .ng-doc-navbar-left,:host .ng-doc-navbar-right{display:flex;align-items:center}:host .ng-doc-navbar-left{justify-content:flex-start;width:100%;max-width:var(--ng-doc-navbar-left-width)}:host .ng-doc-navbar-right{justify-content:flex-end;margin-left:auto}:host .ng-doc-menu{margin-left:calc(var(--ng-doc-base-gutter) * 2)}@media (min-width: 1024px){:host .ng-doc-menu{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: PolymorpheusModule }, { kind: "component", type: NgDocSearchComponent, selector: "ng-doc-search" }, { kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
};
NgDocNavbarComponent = __decorate([
UntilDestroy(),
__metadata("design:paramtypes", [Window,
NgZone,
ChangeDetectorRef,
NgDocSidebarService])
], NgDocNavbarComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocNavbarComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgDocLetDirective,
PolymorpheusModule,
NgIf,
NgDocSearchComponent,
NgDocButtonIconComponent,
NgDocIconComponent,
AsyncPipe,
], template: "<div class=\"navbar-container\">\n <div class=\"ng-doc-navbar-left\">\n <ng-content select=\"[ngDocNavbarLeft]\"></ng-content>\n </div>\n <div class=\"ng-doc-navbar-right\">\n @if (search) {\n <ng-doc-search></ng-doc-search>\n }\n <ng-content select=\"[ngDocNavbarRight]\"></ng-content>\n <button class=\"ng-doc-menu\" ng-doc-button-icon size=\"large\" (click)=\"sidebarService.toggle()\">\n <ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n </button>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex;justify-content:center;height:100%;border-bottom:1px solid transparent;transition:var(--ng-doc-transition) border}:host:not([data-glass-effect=false]){background:color-mix(in srgb,var(--ng-doc-navbar-background) 60%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background-color:var(--ng-doc-navbar-background)}}:host[data-glass-effect=false]{background-color:var(--ng-doc-navbar-background)}:host.has-border{border-bottom:var(--ng-doc-navbar-border, );box-shadow:var(--ng-doc-shadow-color) 0 5px 20px -5px}:host .navbar-container{display:flex;height:100%;width:100%;padding:0 var(--ng-doc-navbar-horizontal-padding);z-index:10;max-width:var(--ng-doc-app-max-width)}:host .ng-doc-navbar-left,:host .ng-doc-navbar-right{display:flex;align-items:center}:host .ng-doc-navbar-left{justify-content:flex-start;width:100%;max-width:var(--ng-doc-navbar-left-width)}:host .ng-doc-navbar-right{justify-content:flex-end;margin-left:auto}:host .ng-doc-menu{margin-left:calc(var(--ng-doc-base-gutter) * 2)}@media (min-width: 1024px){:host .ng-doc-menu{display:none}}\n"] }]
}], ctorParameters: () => [{ type: Window, decorators: [{
type: Inject,
args: [WINDOW]
}] }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.NgDocSidebarService }], propDecorators: { search: [{
type: Input
}], hamburger: [{
type: Input
}], glassEffect: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-glass-effect']
}], hasBorder: [{
type: HostBinding,
args: ['class.has-border']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocNavbarComponent };
//# sourceMappingURL=ng-doc-app-components-navbar.mjs.map