@coreui/angular-pro 5.7.7 → 5.7.8

package/fesm2022/coreui-angular-pro.mjs

@@ -774,7 +774,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class DropdownToken {
 }
 class DropdownToggleDirective {
-    // injections
     #destroyRef = inject(DestroyRef);
     elementRef = inject(ElementRef);
     #dropdownService = inject(DropdownService);
@@ -793,7 +792,7 @@ class DropdownToggleDirective {
      */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * Enables pseudo element caret on toggler.
+     * Enables pseudo-element caret on toggler.
      * @return boolean
      */
     caret = input(true, /* @ts-ignore */
@@ -830,9 +829,14 @@ class DropdownToggleDirective {
         }
         if (this.dropdown) {
             const dropdown = this.dropdown;
-            dropdown?.visibleChange?.subscribe((visible) => {
+            const subscription = dropdown?.visibleChange?.subscribe((visible) => {
                 this.#ariaExpanded.set(visible);
             });
+            if (subscription) {
+                this.#destroyRef.onDestroy(() => {
+                    subscription.unsubscribe();
+                });
+            }
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DropdownToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -12767,33 +12771,27 @@ class NavbarComponent {
         return false;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "breakpoint" }] : /* istanbul ignore next */ []));
-    #observer;
-    ngAfterContentInit() {
+    #breakpointEffect = effect((onCleanup) => {
         const breakpoint = this.breakpoint();
-        if (breakpoint) {
-            const onBreakpoint = `(min-width: ${breakpoint})`;
-            this.#observer = this.#breakpointObserver
-                .observe([onBreakpoint])
-                .pipe()
-                .subscribe((result) => {
-                const collapse = this.collapse();
-                if (collapse) {
-                    const animate = collapse.animate();
-                    collapse.animate.set(false);
-                    collapse.toggle(false);
-                    setTimeout(() => {
-                        collapse.toggle(result.matches);
-                        setTimeout(() => {
-                            collapse.animate.set(animate);
-                        });
-                    });
-                }
-            });
+        if (!breakpoint) {
+            return;
         }
-    }
-    ngOnDestroy() {
-        this.#observer?.unsubscribe();
-    }
+        const subscription = this.#breakpointObserver.observe([`(min-width: ${breakpoint})`]).subscribe((result) => {
+            const collapse = this.collapse();
+            if (!collapse) {
+                return;
+            }
+            const animate = collapse.animate();
+            collapse.animate.set(false);
+            collapse.toggle(false);
+            setTimeout(() => {
+                collapse.toggle(result.matches);
+                setTimeout(() => collapse.animate.set(animate));
+            });
+        });
+        onCleanup(() => subscription.unsubscribe());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#breakpointEffect" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: NavbarComponent, isStandalone: true, selector: "c-navbar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "role()" } }, queries: [{ propertyName: "collapse", first: true, predicate: CollapseDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ThemeDirective, inputs: ["colorScheme", "colorScheme"] }], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"container() ? withContainerTemplate : noContainerTemplate\" />\n\n<ng-template #withContainerTemplate>\n  <div [class]=\"containerClass()\">\n    <ng-content />\n  </div>\n</ng-template>\n\n<ng-template #noContainerTemplate>\n  <ng-content />\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }