@mintplayer/ng-bootstrap 13.1.9 → 13.1.10

package/fesm2020/mintplayer-ng-bootstrap.mjs

@@ -4,7 +4,7 @@ import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SlideUpDownAnimation, FadeInOutAnimation, CarouselSlideAnimation, ColorTransitionAnimation } from '@mintplayer/ng-animations';
-import { Subject, BehaviorSubject, map, takeUntil, filter, take, Observable, combineLatest } from 'rxjs';
+import { Subject, BehaviorSubject, map, takeUntil, filter, take, Observable, combineLatest, debounceTime } from 'rxjs';
 import { map as map$1, takeUntil as takeUntil$1, take as take$1 } from 'rxjs/operators';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -1406,44 +1406,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class BsNavbarComponent {
     constructor() {
-        this.isExpanded = false;
+        this.isExpanded$ = new BehaviorSubject(false);
     }
     toggleExpanded() {
-        this.isExpanded = !this.isExpanded;
+        this.isExpanded$.pipe(take(1)).subscribe((isExpanded) => {
+            this.isExpanded$.next(!isExpanded);
+        });
     }
 }
 BsNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarComponent, selector: "bs-navbar", viewQueries: [{ propertyName: "nav", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n    <div class=\"container-fluid\">\n        <div class=\"d-flex w-100 w-md-auto\">\n            <a class=\"navbar-brand mx-auto mx-md-unset\" href=\"#\">Navbar 2</a>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\" data-toggle=\"collapse\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:10}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}\n"] });
+BsNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarComponent, selector: "bs-navbar", viewQueries: [{ propertyName: "nav", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n    <div class=\"container-fluid\">\n        <div class=\"d-flex w-100 w-md-auto\">\n            <a class=\"navbar-brand mx-auto mx-md-unset\" href=\"#\">Navbar 2</a>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:10}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-navbar', template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n    <div class=\"container-fluid\">\n        <div class=\"d-flex w-100 w-md-auto\">\n            <a class=\"navbar-brand mx-auto mx-md-unset\" href=\"#\">Navbar 2</a>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\" data-toggle=\"collapse\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:10}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { nav: [{
+            args: [{ selector: 'bs-navbar', template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n    <div class=\"container-fluid\">\n        <div class=\"d-flex w-100 w-md-auto\">\n            <a class=\"navbar-brand mx-auto mx-md-unset\" href=\"#\">Navbar 2</a>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:10}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}\n"] }]
+        }], propDecorators: { nav: [{
                 type: ViewChild,
                 args: ['nav']
             }] } });
 
 class BsNavbarNavComponent {
     constructor(bsNavbar) {
-        //#region collapse
-        this._collapse = true;
+        this.collapse$ = new BehaviorSubject(true);
+        this.windowWidth$ = new BehaviorSubject(null);
+        this.isResizing$ = new BehaviorSubject(false);
+        this.destroyed$ = new Subject();
         this.bsNavbar = bsNavbar;
+        this.showNavs$ = combineLatest([this.bsNavbar.isExpanded$, this.windowWidth$])
+            .pipe(filter(([isExpanded, windowWidth]) => {
+            return windowWidth !== null;
+        }))
+            .pipe(map(([isExpanded, windowWidth]) => {
+            if (windowWidth === null) {
+                throw 'windowWidth should not be null here';
+            }
+            else if (windowWidth >= 768) {
+                return true;
+            }
+            else if (isExpanded) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        }));
+        this.windowWidth$
+            .pipe(debounceTime(300), takeUntil(this.destroyed$))
+            .subscribe(() => {
+            this.isResizing$.next(false);
+        });
+        this.onWindowResize();
     }
-    ngOnInit() {
+    ngOnDestroy() {
+        this.destroyed$.next(true);
     }
+    //#region collapse
     set collapse(value) {
-        this._collapse = value;
+        this.collapse$.next(value);
     }
     get collapse() {
-        return this._collapse;
+        return this.collapse$.value;
+    }
+    //#endregion
+    onWindowResize() {
+        this.isResizing$.next(true);
+        this.windowWidth$.next(window.innerWidth);
     }
 }
 BsNavbarNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarNavComponent, deps: [{ token: BsNavbarComponent }], target: i0.ɵɵFactoryTarget.Component });
-BsNavbarNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarNavComponent, selector: "bs-navbar-nav", inputs: { collapse: "collapse" }, ngImport: i0, template: "<div class=\"navbar-collapse collapse w-100 show\" *ngIf=\"bsNavbar.isExpanded\" [@slideUpDown]>\n    <ul class=\"navbar-nav mr-auto\">\n        <ng-content></ng-content>\n    </ul>\n</div>", styles: [":host{margin-right:auto}@media screen and (max-width: 767px){:host{width:100%!important}.navbar-collapse.collapse{overflow:hidden}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [SlideUpDownAnimation] });
+BsNavbarNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarNavComponent, selector: "bs-navbar-nav", inputs: { collapse: "collapse" }, host: { listeners: { "window:resize": "onWindowResize()" } }, ngImport: i0, template: "<div class=\"navbar-collapse w-100 show\" [class.collapse]=\"collapse$ | async\" *ngIf=\"showNavs$ | async\" [@slideUpDown] [@.disabled]=\"isResizing$ | async\">\n    <ul class=\"navbar-nav mr-auto\">\n        <ng-content></ng-content>\n    </ul>\n</div>", styles: [":host{margin-right:auto}@media screen and (max-width: 767px){:host{width:100%!important}.navbar-collapse.collapse{overflow:hidden}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe }, animations: [SlideUpDownAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-navbar-nav', animations: [SlideUpDownAnimation], template: "<div class=\"navbar-collapse collapse w-100 show\" *ngIf=\"bsNavbar.isExpanded\" [@slideUpDown]>\n    <ul class=\"navbar-nav mr-auto\">\n        <ng-content></ng-content>\n    </ul>\n</div>", styles: [":host{margin-right:auto}@media screen and (max-width: 767px){:host{width:100%!important}.navbar-collapse.collapse{overflow:hidden}}\n"] }]
+            args: [{ selector: 'bs-navbar-nav', animations: [SlideUpDownAnimation], template: "<div class=\"navbar-collapse w-100 show\" [class.collapse]=\"collapse$ | async\" *ngIf=\"showNavs$ | async\" [@slideUpDown] [@.disabled]=\"isResizing$ | async\">\n    <ul class=\"navbar-nav mr-auto\">\n        <ng-content></ng-content>\n    </ul>\n</div>", styles: [":host{margin-right:auto}@media screen and (max-width: 767px){:host{width:100%!important}.navbar-collapse.collapse{overflow:hidden}}\n"] }]
         }], ctorParameters: function () { return [{ type: BsNavbarComponent }]; }, propDecorators: { collapse: [{
                 type: Input
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 class BsNavbarItemComponent {