ngx-navkit
Version:
A simple angular library to create admin dashboard and website toolbar sidenav view
67 lines • 8.93 kB
JavaScript
import { ChangeDetectionStrategy, Component, HostBinding, HostListener, } from '@angular/core';
import { take } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "../../ngx-navkit.service";
export 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: i1.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: i1.NgxNavkitService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onWindowResize: [{
type: HostListener,
args: ['window:resize', ['$event']]
}], HeadingClass: [{
type: HostBinding,
args: ['class']
}], width: [{
type: HostBinding,
args: ['style.width']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2a2l0LWNvbnRlbnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW5hdmtpdC9zcmMvbGliL2NvbXBvbmVudHMvbmF2a2l0LWNvbnRlbnQvbmF2a2l0LWNvbnRlbnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW5hdmtpdC9zcmMvbGliL2NvbXBvbmVudHMvbmF2a2l0LWNvbnRlbnQvbmF2a2l0LWNvbnRlbnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUV2QixTQUFTLEVBQ1QsV0FBVyxFQUNYLFlBQVksR0FFYixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sTUFBTSxDQUFDOzs7QUFTNUIsTUFBTSxPQUFPLHNCQUFzQjtJQUNqQyxZQUNVLGFBQStCLEVBQy9CLEtBQXdCO1FBRHhCLGtCQUFhLEdBQWIsYUFBYSxDQUFrQjtRQUMvQixVQUFLLEdBQUwsS0FBSyxDQUFtQjtRQWdEbEMsVUFBSyxHQUFXLEdBQUcsR0FBRyxHQUFHLENBQUM7SUEvQ3ZCLENBQUM7SUFFSixRQUFRLEtBQVUsQ0FBQztJQUVuQixxQkFBcUI7UUFDbkIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFO1lBQ2hFLElBQUksS0FBSyxJQUFJLE1BQU0sQ0FBQyxVQUFVLEdBQUcsR0FBRyxFQUFFO2dCQUNwQyxJQUFJLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7b0JBQy9ELElBQUksS0FBSyxFQUFFO3dCQUNULElBQUksQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDO3dCQUNwQixJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsRUFBRSxDQUFDO3dCQUMzQixPQUFPO3FCQUNSO29CQUNELElBQUksQ0FBQyxLQUFLLEdBQUcsZUFBZSxLQUFLLEtBQUssQ0FBQztvQkFDdkMsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLEVBQUUsQ0FBQztnQkFDN0IsQ0FBQyxDQUFDLENBQUM7YUFDSjtpQkFBTTtnQkFDTCxJQUFJLENBQUMsS0FBSyxHQUFHLE1BQU0sQ0FBQztnQkFDcEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLEVBQUUsQ0FBQzthQUM1QjtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUdELGNBQWMsQ0FBQyxLQUFZO1FBQ3pCLElBQUksQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtZQUNoRSxJQUFJLEtBQUssSUFBSSxNQUFNLENBQUMsVUFBVSxHQUFHLEdBQUcsRUFBRTtnQkFDcEMsSUFBSSxDQUFDLEtBQUssR0FBRyxlQUFlLEtBQUssS0FBSyxDQUFDO2dCQUN2QyxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsRUFBRSxDQUFDO2FBQzVCO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtvQkFDL0QsSUFBSSxLQUFLLEVBQUU7d0JBQ1QsSUFBSSxDQUFDLGFBQWEsQ0FBQyxhQUFhLEVBQUUsQ0FBQztxQkFDcEM7Z0JBQ0gsQ0FBQyxDQUFDLENBQUM7Z0JBRUgsSUFBSSxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUM7Z0JBQ3BCLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxFQUFFLENBQUM7YUFDNUI7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxJQUEwQixZQUFZO1FBQ3BDLE9BQU8sZ0JBQWdCLENBQUM7SUFDMUIsQ0FBQzs7bUhBaERVLHNCQUFzQjt1R0FBdEIsc0JBQXNCLHFNQ2pCbkMsMkJBQXlCOzJGRGlCWixzQkFBc0I7a0JBTmxDLFNBQVM7K0JBQ0UsZ0JBQWdCLG1CQUdULHVCQUF1QixDQUFDLE1BQU07dUlBOEIvQyxjQUFjO3NCQURiLFlBQVk7dUJBQUMsZUFBZSxFQUFFLENBQUMsUUFBUSxDQUFDO2dCQW1CZixZQUFZO3NCQUFyQyxXQUFXO3VCQUFDLE9BQU87Z0JBS3BCLEtBQUs7c0JBREosV0FBVzt1QkFBQyxhQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcclxuICBDaGFuZ2VEZXRlY3RvclJlZixcclxuICBDb21wb25lbnQsXHJcbiAgSG9zdEJpbmRpbmcsXHJcbiAgSG9zdExpc3RlbmVyLFxyXG4gIE9uSW5pdCxcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgdGFrZSB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBOZ3hOYXZraXRTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vbmd4LW5hdmtpdC5zZXJ2aWNlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmF2a2l0LWNvbnRlbnQnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9uYXZraXQtY29udGVudC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbXSxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxufSlcclxuZXhwb3J0IGNsYXNzIE5hdmtpdENvbnRlbnRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBuYXZraXRTZXJ2aWNlOiBOZ3hOYXZraXRTZXJ2aWNlLFxyXG4gICAgcHJpdmF0ZSBjZFJlZjogQ2hhbmdlRGV0ZWN0b3JSZWZcclxuICApIHt9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge31cclxuXHJcbiAgbmdBZnRlckNvbnRlbnRDaGVja2VkKCk6IHZvaWQge1xyXG4gICAgdGhpcy5uYXZraXRTZXJ2aWNlLnNpZGVOYXZXaWR0aC5waXBlKHRha2UoMSkpLnN1YnNjcmliZSgod2lkdGgpID0+IHtcclxuICAgICAgaWYgKHdpZHRoICYmIHdpbmRvdy5pbm5lcldpZHRoID4gOTkyKSB7XHJcbiAgICAgICAgdGhpcy5uYXZraXRTZXJ2aWNlLm9wZW5TaWRlbmF2LnBpcGUodGFrZSgxKSkuc3Vic2NyaWJlKCh2YWx1ZSkgPT4ge1xyXG4gICAgICAgICAgaWYgKHZhbHVlKSB7XHJcbiAgICAgICAgICAgIHRoaXMud2lkdGggPSBgMTAwJWA7XHJcbiAgICAgICAgICAgIHRoaXMuY2RSZWYuZGV0ZWN0Q2hhbmdlcygpO1xyXG4gICAgICAgICAgICByZXR1cm47XHJcbiAgICAgICAgICB9XHJcbiAgICAgICAgICB0aGlzLndpZHRoID0gYGNhbGMoMTAwJSAtICR7d2lkdGh9cHgpYDtcclxuICAgICAgICAgIHRoaXMuY2RSZWYuZGV0ZWN0Q2hhbmdlcygpO1xyXG4gICAgICAgIH0pO1xyXG4gICAgICB9IGVsc2Uge1xyXG4gICAgICAgIHRoaXMud2lkdGggPSBgMTAwJWA7XHJcbiAgICAgICAgdGhpcy5jZFJlZi5kZXRlY3RDaGFuZ2VzKCk7XHJcbiAgICAgIH1cclxuICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignd2luZG93OnJlc2l6ZScsIFsnJGV2ZW50J10pXHJcbiAgb25XaW5kb3dSZXNpemUoZXZlbnQ6IEV2ZW50KSB7XHJcbiAgICB0aGlzLm5hdmtpdFNlcnZpY2Uuc2lkZU5hdldpZHRoLnBpcGUodGFrZSgxKSkuc3Vic2NyaWJlKCh3aWR0aCkgPT4ge1xyXG4gICAgICBpZiAod2lkdGggJiYgd2luZG93LmlubmVyV2lkdGggPiA5OTIpIHtcclxuICAgICAgICB0aGlzLndpZHRoID0gYGNhbGMoMTAwJSAtICR7d2lkdGh9cHgpYDtcclxuICAgICAgICB0aGlzLmNkUmVmLmRldGVjdENoYW5nZXMoKTtcclxuICAgICAgfSBlbHNlIHtcclxuICAgICAgICB0aGlzLm5hdmtpdFNlcnZpY2Uub3BlblNpZGVuYXYucGlwZSh0YWtlKDEpKS5zdWJzY3JpYmUoKHZhbHVlKSA9PiB7XHJcbiAgICAgICAgICBpZiAodmFsdWUpIHtcclxuICAgICAgICAgICAgdGhpcy5uYXZraXRTZXJ2aWNlLnRvZ2dsZVNpZGVuYXYoKTtcclxuICAgICAgICAgIH1cclxuICAgICAgICB9KTtcclxuXHJcbiAgICAgICAgdGhpcy53aWR0aCA9IGAxMDAlYDtcclxuICAgICAgICB0aGlzLmNkUmVmLmRldGVjdENoYW5nZXMoKTtcclxuICAgICAgfVxyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJykgZ2V0IEhlYWRpbmdDbGFzcygpIHtcclxuICAgIHJldHVybiAnbmF2a2l0LWNvbnRlbnQnO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS53aWR0aCcpXHJcbiAgd2lkdGg6IHN0cmluZyA9IDEwMCArICclJztcclxufVxyXG4iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+Il19