@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>
76 lines (72 loc) • 7.58 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, NgZone, ChangeDetectorRef, DestroyRef, afterNextRender, HostBinding, Input, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { NgDocSearchComponent } from '@ng-doc/app/components/search';
import { NgDocSidebarService } from '@ng-doc/app/services';
import { ngDocZoneOptimize, NgDocButtonIconComponent, NgDocIconComponent } from '@ng-doc/ui-kit';
import { WA_WINDOW } from '@ng-web-apis/common';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
import { combineLatest, fromEvent } from 'rxjs';
import { map, distinctUntilChanged, startWith } from 'rxjs/operators';
/**
* Navbar component for ng-doc application
*/
class NgDocNavbarComponent {
constructor() {
this.window = inject(WA_WINDOW);
this.ngZone = inject(NgZone);
this.changeDetectorRef = inject(ChangeDetectorRef);
this.sidebarService = inject(NgDocSidebarService);
/**
* 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;
const destroyRef = inject(DestroyRef);
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)), takeUntilDestroyed(destroyRef))
.subscribe((hasShadow) => {
this.hasBorder = hasShadow;
this.changeDetectorRef.markForCheck();
});
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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:not([data-glass-effect=false]){background:color-mix(in srgb,var(--ng-doc-navbar-background) 60%,transparent);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{position:relative;display:flex;justify-content:center;height:100%;border-bottom:1px solid transparent;transition:var(--ng-doc-transition) border}: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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocNavbarComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PolymorpheusModule, NgDocSearchComponent, NgDocButtonIconComponent, NgDocIconComponent], 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:not([data-glass-effect=false]){background:color-mix(in srgb,var(--ng-doc-navbar-background) 60%,transparent);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{position:relative;display:flex;justify-content:center;height:100%;border-bottom:1px solid transparent;transition:var(--ng-doc-transition) border}: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: () => [], 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