@mintplayer/ng-bootstrap 13.3.2 → 13.3.6

package/fesm2020/mintplayer-ng-bootstrap.mjs

@@ -2907,10 +2907,10 @@ class BsNavbarComponent {
     }
 }
 BsNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: BsNavbarComponent, selector: "bs-navbar", inputs: { autoclose: "autoclose" }, 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            <ng-content select=\"bs-navbar-brand\"></ng-content>\n            <div class=\"flex-end d-md-none d-flex tw\">\n                <button (click)=\"toggleExpanded()\" title=\"Expand/collapse menu\" class=\"align-self-center\" [class.navbar-toggler]=\"!expandButtonTemplate\" [class.bg-transparent]=\"expandButtonTemplate\" [class.shadow-none]=\"expandButtonTemplate\" [class.border-0]=\"expandButtonTemplate\" type=\"button\">\n                    <ng-container *ngTemplateOutlet=\"expandButtonTemplate ?? defaultExpandButton; context: { $implicit: (isExpanded$ | async) ? 'open' : 'closed' }\"></ng-container>\n                </button>\n            </div>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>\n\n<ng-template #defaultExpandButton>\n    <span class=\"navbar-toggler-icon\"></span>\n</ng-template>", 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}}.tw{margin:-.5rem -.6666666667rem}\n"], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i1.AsyncPipe } });
+BsNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: BsNavbarComponent, selector: "bs-navbar", inputs: { autoclose: "autoclose" }, 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            <ng-content select=\"bs-navbar-brand\"></ng-content>\n            <div class=\"flex-end d-md-none d-flex tw\">\n                <button (click)=\"toggleExpanded()\" title=\"Expand/collapse menu\" class=\"align-self-center\" [class.navbar-toggler]=\"!expandButtonTemplate\" [class.bg-transparent]=\"expandButtonTemplate\" [class.shadow-none]=\"expandButtonTemplate\" [class.border-0]=\"expandButtonTemplate\" type=\"button\">\n                    <ng-container *ngTemplateOutlet=\"expandButtonTemplate ?? defaultExpandButton; context: { $implicit: (isExpanded$ | async) ? 'open' : 'closed' }\"></ng-container>\n                </button>\n            </div>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>\n\n<ng-template #defaultExpandButton>\n    <span class=\"navbar-toggler-icon\"></span>\n</ng-template>", styles: ["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}}.tw{margin:-.5rem -.6666666667rem}\n"], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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            <ng-content select=\"bs-navbar-brand\"></ng-content>\n            <div class=\"flex-end d-md-none d-flex tw\">\n                <button (click)=\"toggleExpanded()\" title=\"Expand/collapse menu\" class=\"align-self-center\" [class.navbar-toggler]=\"!expandButtonTemplate\" [class.bg-transparent]=\"expandButtonTemplate\" [class.shadow-none]=\"expandButtonTemplate\" [class.border-0]=\"expandButtonTemplate\" type=\"button\">\n                    <ng-container *ngTemplateOutlet=\"expandButtonTemplate ?? defaultExpandButton; context: { $implicit: (isExpanded$ | async) ? 'open' : 'closed' }\"></ng-container>\n                </button>\n            </div>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>\n\n<ng-template #defaultExpandButton>\n    <span class=\"navbar-toggler-icon\"></span>\n</ng-template>", 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}}.tw{margin:-.5rem -.6666666667rem}\n"] }]
+            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            <ng-content select=\"bs-navbar-brand\"></ng-content>\n            <div class=\"flex-end d-md-none d-flex tw\">\n                <button (click)=\"toggleExpanded()\" title=\"Expand/collapse menu\" class=\"align-self-center\" [class.navbar-toggler]=\"!expandButtonTemplate\" [class.bg-transparent]=\"expandButtonTemplate\" [class.shadow-none]=\"expandButtonTemplate\" [class.border-0]=\"expandButtonTemplate\" type=\"button\">\n                    <ng-container *ngTemplateOutlet=\"expandButtonTemplate ?? defaultExpandButton; context: { $implicit: (isExpanded$ | async) ? 'open' : 'closed' }\"></ng-container>\n                </button>\n            </div>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>\n\n<ng-template #defaultExpandButton>\n    <span class=\"navbar-toggler-icon\"></span>\n</ng-template>", styles: ["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}}.tw{margin:-.5rem -.6666666667rem}\n"] }]
         }], propDecorators: { nav: [{
                 type: ViewChild,
                 args: ['nav']
@@ -2992,8 +2992,9 @@ class BsNavbarItemComponent {
         this.anchorTag = this.element.nativeElement.querySelector('li a');
         if (this.hasDropdown) {
             (this.anchorTag) && this.anchorTag.classList.add('dropdown-toggle');
-            if (this.anchorTag && !this.anchorTag.onclick) {
-                this.anchorTag.onclick = (ev) => {
+            if (this.anchorTag && !this.anchorTag.getAttribute('close-init-b')) {
+                this.anchorTag.setAttribute('close-init-b', '1');
+                this.anchorTag.addEventListener('click', (ev) => {
                     ev.preventDefault();
                     // Normally there should be only one dropdown in this list
                     this.dropdowns.forEach((dropdown) => {
@@ -3004,24 +3005,23 @@ class BsNavbarItemComponent {
                         }
                     });
                     return false;
-                };
+                });
             }
         }
         else {
             // Close if this is a link
-            if (this.dropdowns.length === 0) {
-                if (this.anchorTag && !this.anchorTag.onclick) {
-                    this.anchorTag.onclick = (ev) => {
-                        let d = this.parentDropdown;
-                        while (d && d.autoclose) {
-                            d.isVisible = false;
-                            d = d.parentDropdown;
-                        }
-                        if (this.navbar.autoclose) {
-                            this.navbar.isExpanded$.next(false);
-                        }
-                    };
-                }
+            if ((this.dropdowns.length === 0) && this.anchorTag && !this.anchorTag.getAttribute('close-init-a')) {
+                this.anchorTag.setAttribute('close-init-a', '1');
+                this.anchorTag.addEventListener('click', (ev) => {
+                    let d = this.parentDropdown;
+                    while (d && d.autoclose) {
+                        d.isVisible = false;
+                        d = d.parentDropdown;
+                    }
+                    if (this.navbar.autoclose) {
+                        this.navbar.isExpanded$.next(false);
+                    }
+                });
             }
         }
     }
@@ -3133,28 +3133,49 @@ class NavbarContentDirective {
     constructor(element, platformId) {
         this.element = element;
         this.platformId = platformId;
+        this.destroyed$ = new Subject();
+        this.viewInit$ = new BehaviorSubject(false);
+        this.navbar$ = new BehaviorSubject(null);
+        this.resizeObserver = null;
         this.initialPadding = 0;
-        if (!isPlatformServer(platformId)) {
-            this.resizeObserver = new ResizeObserver((entries) => {
-                const height = entries[0].contentRect.height;
-                this.element.nativeElement.style.paddingTop = (this.initialPadding + height) + 'px';
-            });
-        }
-        else {
-            this.resizeObserver = null;
-        }
+        combineLatest([this.viewInit$, this.navbar$])
+            .pipe(filter(([viewInit, navbar]) => {
+            return viewInit && !!navbar;
+        }))
+            .pipe(take(1))
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe(([viewInit, navbar]) => {
+            if (!isPlatformServer(platformId)) {
+                // Initialize the ResizeObserver
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    const height = navbar
+                        ? navbar.nav.nativeElement.offsetHeight
+                        : entries[0].contentRect.height;
+                    this.element.nativeElement.style.paddingTop = (this.initialPadding + height) + 'px';
+                });
+                // Monitor the size
+                const px = getComputedStyle(this.element.nativeElement).getPropertyValue('padding-top');
+                const pt = parseInt(px.replace(/px$/, ''));
+                this.initialPadding = isNaN(pt) ? 0 : pt;
+                if (this.resizeObserver && navbar) {
+                    this.resizeObserver.observe(navbar.nav.nativeElement);
+                }
+            }
+        });
+        this.destroyed$
+            .pipe(filter(d => !!d))
+            .subscribe(() => {
+            this.resizeObserver?.unobserve(this.navbar$.value?.nav.nativeElement);
+        });
+    }
+    set navbar(value) {
+        this.navbar$.next(value);
     }
     ngAfterViewInit() {
-        const pt = parseInt(this.element.nativeElement.style.paddingTop.replace(/px$/, ''));
-        this.initialPadding = isNaN(pt) ? 0 : pt;
-        if (this.resizeObserver) {
-            this.resizeObserver.observe(this.navbar.nav.nativeElement);
-        }
+        this.viewInit$.next(true);
     }
     ngOnDestroy() {
-        if (this.resizeObserver) {
-            this.resizeObserver.unobserve(this.navbar.nav.nativeElement);
-        }
+        this.destroyed$.next(true);
     }
 }
 NavbarContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: NavbarContentDirective, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });