ngx-navkit
Version:
A simple angular library to create admin dashboard and website toolbar sidenav view
227 lines (217 loc) • 12.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, HostBinding, Input, ChangeDetectionStrategy, HostListener, NgModule } from '@angular/core';
import { BehaviorSubject, take } from 'rxjs';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
class NgxNavkitService {
constructor() {
this.sideNavWidth = new BehaviorSubject(null);
this.openSidenav = new BehaviorSubject(false);
}
toggleSidenav() {
this.openSidenav.pipe(take(1)).subscribe((value) => {
console.log(value);
this.openSidenav.next(!value);
});
}
}
NgxNavkitService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NgxNavkitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NgxNavkitService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NgxNavkitService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NgxNavkitService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () { return []; } });
class NavkitContainerComponent {
constructor() { }
ngOnInit() {
}
get HeadingClass() {
return 'navkit-container';
}
}
NavkitContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NavkitContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NavkitContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: NavkitContainerComponent, selector: "navkit-container", host: { properties: { "class": "this.HeadingClass" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NavkitContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'navkit-container', template: "<ng-content></ng-content>\r\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { HeadingClass: [{
type: HostBinding,
args: ['class']
}] } });
class NavkitToolbarComponent {
constructor(navkitService) {
this.navkitService = navkitService;
this.open = false;
this.sticky = false;
this.sidenavToggle = false;
this.height = 60;
}
ngOnInit() { }
get HeadingClass() {
return 'navkit-toolbar';
}
get toolbarSticky() {
return this.sticky;
}
toggleSidenav() {
this.navkitService.toggleSidenav();
}
}
NavkitToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NavkitToolbarComponent, deps: [{ token: NgxNavkitService }], target: i0.ɵɵFactoryTarget.Component });
NavkitToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: NavkitToolbarComponent, selector: "navkit-toolbar", inputs: { sticky: "sticky", sidenavToggle: "sidenavToggle", height: "height" }, host: { properties: { "class": "this.HeadingClass", "class.sticky": "this.toolbarSticky", "style.height.px": "this.height", "style.minHeight.px": "this.height" } }, ngImport: i0, template: "<div *ngIf=\"sidenavToggle\" class=\"navkit-hamburger\" (click)=\"toggleSidenav()\">\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n</div>\r\n<ng-content></ng-content>\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NavkitToolbarComponent, decorators: [{
type: Component,
args: [{ selector: 'navkit-toolbar', template: "<div *ngIf=\"sidenavToggle\" class=\"navkit-hamburger\" (click)=\"toggleSidenav()\">\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n</div>\r\n<ng-content></ng-content>\r\n" }]
}], ctorParameters: function () { return [{ type: NgxNavkitService }]; }, propDecorators: { HeadingClass: [{
type: HostBinding,
args: ['class']
}], sticky: [{
type: Input
}], toolbarSticky: [{
type: HostBinding,
args: ['class.sticky']
}], sidenavToggle: [{
type: Input
}], height: [{
type: HostBinding,
args: ['style.height.px']
}, {
type: HostBinding,
args: ['style.minHeight.px']
}, {
type: Input
}] } });
//import { RouteService } from '@services/route.service';
//import { ToolbarService } from '@services/toolbar.service';
class NavkitSidenavComponent {
constructor(navkitService) {
this.navkitService = navkitService;
this.mode = 'side';
this.width = 300;
// @Input() navItems: NavItems[] = [];
this.sidenavOpen = true;
}
ngOnInit() {
this.navkitService.sideNavWidth.next(this.width);
}
get HeadingClass() {
return 'navkit-sidenav';
}
toggleSidenav() {
this.navkitService.toggleSidenav();
}
}
NavkitSidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NavkitSidenavComponent, deps: [{ token: NgxNavkitService }], target: i0.ɵɵFactoryTarget.Component });
NavkitSidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: NavkitSidenavComponent, selector: "navkit-sidenav", inputs: { mode: "mode", width: "width" }, host: { properties: { "class": "this.HeadingClass" } }, ngImport: i0, template: "<div class=\"overlay\" (click)=\"toggleSidenav()\"></div>\r\n<div\r\n class=\"navkit-sidenav-inner\"\r\n [ngClass]=\"(navkitService.openSidenav | async) ? 'over' : 'side'\"\r\n [style.width.px]=\"width\"\r\n [style.maxWidth.px]=\"width\"\r\n>\r\n <div class=\"sidenav-btn-container\" (click)=\"toggleSidenav()\">\r\n <span class=\"cross-stand-alone\"></span>\r\n </div>\r\n <div class=\"sidenav-items\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NavkitSidenavComponent, decorators: [{
type: Component,
args: [{ selector: 'navkit-sidenav', template: "<div class=\"overlay\" (click)=\"toggleSidenav()\"></div>\r\n<div\r\n class=\"navkit-sidenav-inner\"\r\n [ngClass]=\"(navkitService.openSidenav | async) ? 'over' : 'side'\"\r\n [style.width.px]=\"width\"\r\n [style.maxWidth.px]=\"width\"\r\n>\r\n <div class=\"sidenav-btn-container\" (click)=\"toggleSidenav()\">\r\n <span class=\"cross-stand-alone\"></span>\r\n </div>\r\n <div class=\"sidenav-items\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n" }]
}], ctorParameters: function () { return [{ type: NgxNavkitService }]; }, propDecorators: { mode: [{
type: Input
}], width: [{
type: Input
}], HeadingClass: [{
type: HostBinding,
args: ['class']
}] } });
class NavkitContentComponent {
constructor(navkitService, cdRef) {
this.navkitService = navkitService;
this.cdRef = cdRef;
this.width = 100 + '%';
}
ngOnInit() { }
ngAfterContentChecked() {
this.navkitService.sideNavWidth.pipe(take(1)).subscribe((width) => {
if (width && window.innerWidth > 992) {
this.navkitService.openSidenav.pipe(take(1)).subscribe((value) => {
if (value) {
this.width = `100%`;
this.cdRef.detectChanges();
return;
}
this.width = `calc(100% - ${width}px)`;
this.cdRef.detectChanges();
});
}
else {
this.width = `100%`;
this.cdRef.detectChanges();
}
});
}
onWindowResize(event) {
this.navkitService.sideNavWidth.pipe(take(1)).subscribe((width) => {
if (width && window.innerWidth > 992) {
this.width = `calc(100% - ${width}px)`;
this.cdRef.detectChanges();
}
else {
this.navkitService.openSidenav.pipe(take(1)).subscribe((value) => {
if (value) {
this.navkitService.toggleSidenav();
}
});
this.width = `100%`;
this.cdRef.detectChanges();
}
});
}
get HeadingClass() {
return 'navkit-content';
}
}
NavkitContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NavkitContentComponent, deps: [{ token: NgxNavkitService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NavkitContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: NavkitContentComponent, selector: "navkit-content", host: { listeners: { "window:resize": "onWindowResize($event)" }, properties: { "class": "this.HeadingClass", "style.width": "this.width" } }, ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NavkitContentComponent, decorators: [{
type: Component,
args: [{ selector: 'navkit-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>" }]
}], ctorParameters: function () { return [{ type: NgxNavkitService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onWindowResize: [{
type: HostListener,
args: ['window:resize', ['$event']]
}], HeadingClass: [{
type: HostBinding,
args: ['class']
}], width: [{
type: HostBinding,
args: ['style.width']
}] } });
class NgxNavkitModule {
}
NgxNavkitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NgxNavkitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxNavkitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: NgxNavkitModule, declarations: [NavkitContainerComponent,
NavkitContentComponent,
NavkitSidenavComponent,
NavkitToolbarComponent], imports: [CommonModule], exports: [NavkitContainerComponent,
NavkitContentComponent,
NavkitSidenavComponent,
NavkitToolbarComponent] });
NgxNavkitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NgxNavkitModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NgxNavkitModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NavkitContainerComponent,
NavkitContentComponent,
NavkitSidenavComponent,
NavkitToolbarComponent,
],
imports: [CommonModule],
exports: [
NavkitContainerComponent,
NavkitContentComponent,
NavkitSidenavComponent,
NavkitToolbarComponent,
],
}]
}] });
/*
* Public API Surface of ngx-navkit
*/
/**
* Generated bundle index. Do not edit.
*/
export { NavkitContainerComponent, NavkitContentComponent, NavkitSidenavComponent, NavkitToolbarComponent, NgxNavkitModule, NgxNavkitService };
//# sourceMappingURL=ngx-navkit.mjs.map