@open-rlb/ng-bootstrap 3.1.24 → 3.1.25

package/fesm2022/open-rlb-ng-bootstrap.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Component, input, booleanAttribute, effect, Host, Self, Optional, Directive, Injectable, output, contentChild, computed, contentChildren, viewChild, numberAttribute, model, ViewChild, isSignal, Pipe, ChangeDetectionStrategy, inject, ViewContainerRef, Renderer2, DOCUMENT, Inject, HostListener, InjectionToken, viewChildren, untracked, EventEmitter, Output, NgModule } from '@angular/core';
+import { signal, Component, input, booleanAttribute, effect, Host, Self, Optional, Directive, Injectable, output, contentChild, computed, contentChildren, viewChild, numberAttribute, model, ViewChild, isSignal, Pipe, ChangeDetectionStrategy, inject, ViewContainerRef, Renderer2, DestroyRef, DOCUMENT, Inject, HostListener, InjectionToken, viewChildren, untracked, EventEmitter, Output, NgModule } from '@angular/core';
 import { Collapse, Carousel, Dropdown, Modal, Toast, Offcanvas, ScrollSpy, Popover, Tooltip } from 'bootstrap';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -4212,7 +4212,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 
 class NavbarDropdownItemComponent {
     constructor() {
-        this.listeners = [];
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
+        this.destroyRef = inject(DestroyRef);
+        this.template = viewChild.required('template');
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), alias: 'disabled', transform: booleanAttribute });
         this.dropdown = input(false, { ...(ngDevMode ? { debugName: "dropdown" } : {}), alias: 'dropdown', transform: booleanAttribute });
         this.href = input(undefined, ...(ngDevMode ? [{ debugName: "href" }] : []));
@@ -4223,8 +4226,6 @@ class NavbarDropdownItemComponent {
         this.statusChanged = output({ alias: 'status-changed' });
         this._autoClose = computed(() => {
             switch (this.autoClose()) {
-                case 'default':
-                    return 'true';
                 case 'inside':
                     return 'inside';
                 case 'outside':
@@ -4235,22 +4236,37 @@ class NavbarDropdownItemComponent {
                     return 'true';
             }
         }, ...(ngDevMode ? [{ debugName: "_autoClose" }] : []));
-        this.template = viewChild.required('template');
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.renderer = inject(Renderer2);
+        effect(() => {
+            const template = this.template();
+            const dropdownEnabled = this.dropdown();
+            const templateView = this.viewContainerRef.createEmbeddedView(template);
+            this.element = templateView.rootNodes[0];
+            this.viewContainerRef.element.nativeElement.remove();
+            const anchor = this.element.querySelector('a');
+            if (!anchor || !dropdownEnabled)
+                return;
+            this.dropdownInstance = Dropdown.getOrCreateInstance(anchor);
+            const unsubShow = this.renderer.listen(anchor, 'show.bs.dropdown', () => this.statusChanged.emit('show'));
+            const unsubShown = this.renderer.listen(anchor, 'shown.bs.dropdown', () => this.statusChanged.emit('shown'));
+            const unsubHide = this.renderer.listen(anchor, 'hide.bs.dropdown', () => this.statusChanged.emit('hide'));
+            const unsubHidden = this.renderer.listen(anchor, 'hidden.bs.dropdown', () => this.statusChanged.emit('hidden'));
+            this.destroyRef.onDestroy(() => {
+                unsubShow();
+                unsubShown();
+                unsubHide();
+                unsubHidden();
+                this.dropdownInstance?.dispose();
+            });
+        });
     }
-    ngOnInit() {
-        const templateView = this.viewContainerRef.createEmbeddedView(this.template());
-        this.element = templateView.rootNodes[0];
-        this.viewContainerRef.element.nativeElement.remove();
-        const anchor = this.element.querySelector('a');
-        if (anchor && this.dropdown()) {
-            this.listeners.push(this.renderer.listen(anchor, 'show.bs.dropdown', () => this.statusChanged.emit('show')), this.renderer.listen(anchor, 'shown.bs.dropdown', () => this.statusChanged.emit('shown')), this.renderer.listen(anchor, 'hide.bs.dropdown', () => this.statusChanged.emit('hide')), this.renderer.listen(anchor, 'hidden.bs.dropdown', () => this.statusChanged.emit('hidden')));
-        }
+    open() {
+        this.dropdownInstance?.show();
     }
-    ngOnDestroy() {
-        this.listeners.forEach(unsub => unsub());
-        this.listeners = [];
+    close() {
+        this.dropdownInstance?.hide();
+    }
+    toggleDropdown() {
+        this.dropdownInstance?.toggle();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NavbarDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: NavbarDropdownItemComponent, isStandalone: false, selector: "rlb-navbar-dropdown-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "auto-close", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", statusChanged: "status-changed" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: `
@@ -4271,6 +4287,7 @@ class NavbarDropdownItemComponent {
         >
           <ng-content select=":not(rlb-dropdown-container)"></ng-content>
         </a>
+
         <ng-content select="rlb-dropdown-container"></ng-content>
       </li>
     </ng-template>
@@ -4298,13 +4315,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         >
           <ng-content select=":not(rlb-dropdown-container)"></ng-content>
         </a>
+
         <ng-content select="rlb-dropdown-container"></ng-content>
       </li>
     </ng-template>
   `,
                     standalone: false,
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdown", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto-close", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], statusChanged: [{ type: i0.Output, args: ["status-changed"] }], template: [{ type: i0.ViewChild, args: ['template', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { template: [{ type: i0.ViewChild, args: ['template', { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdown", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto-close", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], statusChanged: [{ type: i0.Output, args: ["status-changed"] }] } });
 
 class NavbarItemComponent {
     constructor(viewContainerRef) {