@mintplayer/ng-bootstrap 15.16.0 → 15.16.1

package/fesm2020/mintplayer-ng-bootstrap-navbar.mjs

@@ -11,6 +11,10 @@ import { BsNoNoscriptModule } from '@mintplayer/ng-bootstrap/no-noscript';
 import { Color } from '@mintplayer/ng-bootstrap';
 import { BehaviorSubject, Subject, map, combineLatest, filter, debounceTime, takeUntil, take } from 'rxjs';
 import { SlideUpDownAnimation } from '@mintplayer/ng-animations';
+import { takeUntil as takeUntil$1 } from 'rxjs/operators';
+import { DomPortal } from '@angular/cdk/portal';
+import * as i4 from '@mintplayer/ng-bootstrap/has-overlay';
+import { BsHasOverlayModule } from '@mintplayer/ng-bootstrap/has-overlay';
 
 class BsNavbarComponent {
     constructor() {
@@ -209,13 +213,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
             }] } });
 
 class BsNavbarItemComponent {
-    constructor(navbar, element, injector, platformId, parentDropdown) {
+    constructor(navbar, element, 
+    // private injector: Injector,
+    platformId, parentDropdown) {
         this.navbar = navbar;
-        this.element = element;
-        this.injector = injector;
         this.platformId = platformId;
         this.hasDropdown = false;
         this.anchorTag = null;
+        this.destroyed$ = new Subject();
+        this.element = element;
         this.parentDropdown = parentDropdown;
     }
     ngAfterContentChecked() {
@@ -236,16 +242,28 @@ class BsNavbarItemComponent {
                                 dropdown.childDropdowns.forEach((child) => {
                                     child.isVisible = false;
                                 });
-                                // } else {
+                            }
+                            else if (this.parentDropdown) {
                                 // import('@angular/cdk/overlay').then(({ OverlayModule, Overlay }) => {
                                 //   const overlayService = this.injector.get(Overlay);
                                 //   return overlayService;
                                 // }).then((overlayService) => {
                                 //   const p = new DomPortal(dropdown.element);
                                 //   const overlayRef = overlayService.create({
+                                //     positionStrategy: overlayService.position()
+                                //       .flexibleConnectedTo(this.element)
+                                //       .withPositions([
+                                //         { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' }
+                                //       ])
                                 //   });
-                                //   overlayRef.attach(p);
+                                // overlayRef.attach(p);
                                 // });
+                                // dropdown.showInOverlay = true;
+                                this.navbar.isSmallMode$
+                                    .pipe(takeUntil$1(this.destroyed$))
+                                    .subscribe((isSmallMode) => {
+                                    dropdown.showInOverlay = !isSmallMode;
+                                });
                             }
                         });
                         return false;
@@ -270,13 +288,16 @@ class BsNavbarItemComponent {
             }
         }
     }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
+    }
 }
-BsNavbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: BsNavbarItemComponent, deps: [{ token: BsNavbarComponent }, { token: i0.ElementRef }, { token: i0.Injector }, { token: PLATFORM_ID }, { token: BsNavbarDropdownComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+BsNavbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: BsNavbarItemComponent, deps: [{ token: BsNavbarComponent }, { token: i0.ElementRef }, { token: PLATFORM_ID }, { token: BsNavbarDropdownComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 BsNavbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: BsNavbarItemComponent, selector: "bs-navbar-item", queries: [{ propertyName: "dropdowns", predicate: i0.forwardRef(function () { return BsNavbarDropdownComponent; }) }], ngImport: i0, template: "<li [class.nav-item]=\"parentDropdown === null\" [class.dropdown]=\"(dropdowns.length > 0) && (parentDropdown === null)\" [class.dropend]=\"(dropdowns.length > 0) && (parentDropdown !== null)\">\n    <ng-content></ng-content>\n</li>", styles: ["li.dropend ::ng-deep a.dropdown-toggle{padding-right:1.5rem}li.dropend ::ng-deep a.dropdown-toggle:after{position:absolute;right:.5rem;top:.75rem}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: BsNavbarItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-navbar-item', template: "<li [class.nav-item]=\"parentDropdown === null\" [class.dropdown]=\"(dropdowns.length > 0) && (parentDropdown === null)\" [class.dropend]=\"(dropdowns.length > 0) && (parentDropdown !== null)\">\n    <ng-content></ng-content>\n</li>", styles: ["li.dropend ::ng-deep a.dropdown-toggle{padding-right:1.5rem}li.dropend ::ng-deep a.dropdown-toggle:after{position:absolute;right:.5rem;top:.75rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: BsNavbarComponent }, { type: i0.ElementRef }, { type: i0.Injector }, { type: Object, decorators: [{
+        }], ctorParameters: function () { return [{ type: BsNavbarComponent }, { type: i0.ElementRef }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }, { type: BsNavbarDropdownComponent, decorators: [{
@@ -287,10 +308,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
             }] } });
 
 class BsNavbarDropdownComponent {
-    constructor(navbar, parentDropdown, navbarItem, element, document, platformId) {
+    constructor(navbar, parentDropdown, navbarItem, element, injector, document, platformId) {
         this.navbar = navbar;
         this.element = element;
+        this.injector = injector;
         this.document = document;
+        this.isAttached = false;
         this.autoclose = true;
         this.destroyed$ = new Subject();
         this.isBrowser = false;
@@ -302,6 +325,7 @@ class BsNavbarDropdownComponent {
         this.isBrowser = !isPlatformServer(platformId);
         this.isVisible$.pipe(takeUntil(this.destroyed$)).subscribe((isVisible) => {
             if (isVisible) {
+                setTimeout(() => this.overlay && this.overlay.updatePosition(), 20);
                 this.topPos$.next(this.element.nativeElement.offsetTop);
             }
             else {
@@ -325,10 +349,48 @@ class BsNavbarDropdownComponent {
             if (isSmallMode) {
                 return null;
             }
+            else if (isPlatformServer(platformId)) {
+                // Javascript disabled
+                // Only apply max-height to the top-dropdown
+                return parentDropdown ? null : maxHeight;
+            }
             else {
+                // If javascript enabled
                 return maxHeight;
             }
         }));
+        if (!!parentDropdown) {
+            // Setup overlay
+            import('@angular/cdk/overlay').then(({ OverlayModule, Overlay }) => {
+                const overlayService = this.injector.get(Overlay);
+                return overlayService;
+            }).then((overlayService) => {
+                this.domPortal = new DomPortal(this.element);
+                this.overlay = overlayService.create({
+                    positionStrategy: overlayService.position()
+                        .flexibleConnectedTo(this.navbarItem.element)
+                        .withPositions([
+                        { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: -7, offsetY: -9 }
+                    ])
+                });
+                // For some reason we have to trigger this from the BsDropdownItem
+                // this.showInOverlay = true;
+            });
+        }
+    }
+    set showInOverlay(value) {
+        if (this.overlay && this.domPortal) {
+            console.log('showInOverlay', value);
+            // if (value && !this.overlay.hasAttached()) {
+            if (value && !this.isAttached) {
+                this.overlay.attach(this.domPortal);
+                this.isAttached = true;
+            }
+            if (!value && this.isAttached) {
+                this.overlay.detach();
+                this.isAttached = false;
+            }
+        }
     }
     get isVisible() {
         return this.isVisible$.value;
@@ -344,11 +406,11 @@ class BsNavbarDropdownComponent {
         this.destroyed$.next(true);
     }
 }
-BsNavbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: BsNavbarDropdownComponent, deps: [{ token: BsNavbarComponent }, { token: BsNavbarDropdownComponent, host: true, optional: true, skipSelf: true }, { token: forwardRef(() => BsNavbarItemComponent), host: true }, { token: i0.ElementRef }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-BsNavbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: BsNavbarDropdownComponent, selector: "bs-navbar-dropdown", inputs: { autoclose: "autoclose" }, queries: [{ propertyName: "childDropdowns", predicate: i0.forwardRef(function () { return BsNavbarDropdownComponent; }), descendants: true }], viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dd"], descendants: true }], ngImport: i0, template: "<!-- <bs-has-overlay></bs-has-overlay> -->\n<!-- [class.overflow-auto]=\"isBrowser\" -->\n<!-- [style.max-height]=\"maxHeightOrNull$ | async\" -->\n<ul #dd class=\"dropdown-menu\" [class.show]=\"isVisible$ | async\" [class.submenu]=\"!!parentDropdown\" (clickOutside)=\"isVisible = false\" [exclude]=\"elementsToExclude\" aria-labelledby=\"navbarDropdown\">\n    <ng-content></ng-content>\n</ul>\n\n<!-- \n    - Working demo: https://codepen.io/agop/pen/VwwMGR\n    - Location must be set through javascript\n    - bsNoScript => If noscript, 2nd-level submenus must be shown inside the 1st-level submenu\n -->\n <!-- \n    - Another option: https://stackblitz.com/edit/web-platform-vmsr4l?file=index.html\n    - But this doesn't seem to work here\n  -->", styles: ["@media (max-width: 767px){.submenu{margin-left:.5rem;margin-right:.5rem}}@media (min-width: 768px){.submenu{position:absolute;left:100%;top:-1px;margin-top:-.5rem}}\n"], dependencies: [{ kind: "directive", type: i2$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+BsNavbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: BsNavbarDropdownComponent, deps: [{ token: BsNavbarComponent }, { token: BsNavbarDropdownComponent, host: true, optional: true, skipSelf: true }, { token: forwardRef(() => BsNavbarItemComponent), host: true }, { token: i0.ElementRef }, { token: i0.Injector }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+BsNavbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: BsNavbarDropdownComponent, selector: "bs-navbar-dropdown", inputs: { autoclose: "autoclose" }, queries: [{ propertyName: "childDropdowns", predicate: i0.forwardRef(function () { return BsNavbarDropdownComponent; }), descendants: true }], viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dd"], descendants: true }], ngImport: i0, template: "<bs-has-overlay></bs-has-overlay>\n<ul #dd class=\"dropdown-menu\" [class.show]=\"isVisible$ | async\" [class.submenu]=\"!!parentDropdown\" [class.overflow-y-auto]=\"isBrowser\" [style.max-height]=\"maxHeightOrNull$ | async\" bsNoNoscript (clickOutside)=\"isVisible = false\" [exclude]=\"elementsToExclude\" aria-labelledby=\"navbarDropdown\">\n    <ng-content></ng-content>\n</ul>\n\n<!-- \n    - Working demo: https://codepen.io/agop/pen/VwwMGR\n    - Location must be set through javascript\n    - bsNoScript => If noscript, 2nd-level submenus must be shown inside the 1st-level submenu\n -->\n <!-- \n    - Another option: https://stackblitz.com/edit/web-platform-vmsr4l?file=index.html\n    - But this doesn't seem to work here\n  -->", styles: [".submenu:not(.noscript){margin:0 .5rem!important}.submenu.noscript{margin:0 .5rem;position:initial!important}:not(.submenu).noscript{max-height:calc(100vh - 100% - 1rem);overflow-y:auto}.overflow-y-auto{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i3.BsNoNoscriptDirective, selector: "[bsNoNoscript]" }, { kind: "component", type: i4.BsHasOverlayComponent, selector: "bs-has-overlay" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: BsNavbarDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-navbar-dropdown', template: "<!-- <bs-has-overlay></bs-has-overlay> -->\n<!-- [class.overflow-auto]=\"isBrowser\" -->\n<!-- [style.max-height]=\"maxHeightOrNull$ | async\" -->\n<ul #dd class=\"dropdown-menu\" [class.show]=\"isVisible$ | async\" [class.submenu]=\"!!parentDropdown\" (clickOutside)=\"isVisible = false\" [exclude]=\"elementsToExclude\" aria-labelledby=\"navbarDropdown\">\n    <ng-content></ng-content>\n</ul>\n\n<!-- \n    - Working demo: https://codepen.io/agop/pen/VwwMGR\n    - Location must be set through javascript\n    - bsNoScript => If noscript, 2nd-level submenus must be shown inside the 1st-level submenu\n -->\n <!-- \n    - Another option: https://stackblitz.com/edit/web-platform-vmsr4l?file=index.html\n    - But this doesn't seem to work here\n  -->", styles: ["@media (max-width: 767px){.submenu{margin-left:.5rem;margin-right:.5rem}}@media (min-width: 768px){.submenu{position:absolute;left:100%;top:-1px;margin-top:-.5rem}}\n"] }]
+            args: [{ selector: 'bs-navbar-dropdown', template: "<bs-has-overlay></bs-has-overlay>\n<ul #dd class=\"dropdown-menu\" [class.show]=\"isVisible$ | async\" [class.submenu]=\"!!parentDropdown\" [class.overflow-y-auto]=\"isBrowser\" [style.max-height]=\"maxHeightOrNull$ | async\" bsNoNoscript (clickOutside)=\"isVisible = false\" [exclude]=\"elementsToExclude\" aria-labelledby=\"navbarDropdown\">\n    <ng-content></ng-content>\n</ul>\n\n<!-- \n    - Working demo: https://codepen.io/agop/pen/VwwMGR\n    - Location must be set through javascript\n    - bsNoScript => If noscript, 2nd-level submenus must be shown inside the 1st-level submenu\n -->\n <!-- \n    - Another option: https://stackblitz.com/edit/web-platform-vmsr4l?file=index.html\n    - But this doesn't seem to work here\n  -->", styles: [".submenu:not(.noscript){margin:0 .5rem!important}.submenu.noscript{margin:0 .5rem;position:initial!important}:not(.submenu).noscript{max-height:calc(100vh - 100% - 1rem);overflow-y:auto}.overflow-y-auto{overflow-y:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: BsNavbarComponent }, { type: BsNavbarDropdownComponent, decorators: [{
                     type: SkipSelf
                 }, {
@@ -360,7 +422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                 }, {
                     type: Inject,
                     args: [forwardRef(() => BsNavbarItemComponent)]
-                }] }, { type: i0.ElementRef }, { type: Document, decorators: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Injector }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: Object, decorators: [{
@@ -581,7 +643,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                 args: ['click', ['$event']]
             }] } });
 
-// import { BsHasOverlayModule } from '@mintplayer/ng-bootstrap/has-overlay';
 class BsNavbarModule {
 }
 BsNavbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: BsNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -597,7 +658,8 @@ BsNavbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         BsNavbarTogglerComponent], imports: [CommonModule,
         ClickOutsideModule,
         BsUserAgentModule,
-        BsNoNoscriptModule], exports: [BsNavbarComponent,
+        BsNoNoscriptModule,
+        BsHasOverlayModule], exports: [BsNavbarComponent,
         BsNavbarNavComponent,
         BsNavbarDropdownComponent,
         BsNavbarItemComponent,
@@ -610,7 +672,8 @@ BsNavbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
 BsNavbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: BsNavbarModule, imports: [CommonModule,
         ClickOutsideModule,
         BsUserAgentModule,
-        BsNoNoscriptModule] });
+        BsNoNoscriptModule,
+        BsHasOverlayModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: BsNavbarModule, decorators: [{
             type: NgModule,
             args: [{
@@ -631,7 +694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                         ClickOutsideModule,
                         BsUserAgentModule,
                         BsNoNoscriptModule,
-                        // BsHasOverlayModule,
+                        BsHasOverlayModule,
                     ],
                     exports: [
                         BsNavbarComponent,