@coreui/angular 5.7.11 → 5.7.13

package/fesm2022/coreui-angular.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, booleanAttribute, untracked, NgModule, computed, Injectable, Component, afterNextRender, linkedSignal, output, signal, contentChildren, numberAttribute, DestroyRef, DOCUMENT, PLATFORM_ID, RendererFactory2, forwardRef, NgZone, ChangeDetectorRef, contentChild, afterEveryRender, viewChild, ViewContainerRef, model, afterRenderEffect, ChangeDetectionStrategy, Pipe, Input, HostBinding, ContentChildren, HostListener, Injector, runInInjectionContext, ViewEncapsulation, MAX_ANIMATION_TIMEOUT } from '@angular/core';
+import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, booleanAttribute, untracked, NgModule, computed, Injectable, Component, linkedSignal, output, signal, contentChildren, numberAttribute, MAX_ANIMATION_TIMEOUT, DestroyRef, DOCUMENT, PLATFORM_ID, RendererFactory2, afterNextRender, forwardRef, NgZone, ChangeDetectorRef, contentChild, afterEveryRender, viewChild, ViewContainerRef, model, afterRenderEffect, ChangeDetectionStrategy, Pipe, Input, HostBinding, ContentChildren, HostListener, Injector, runInInjectionContext, ViewEncapsulation } from '@angular/core';
 import { NgTemplateOutlet, isPlatformServer, isPlatformBrowser } from '@angular/common';
-import { animation, animate, style, AnimationBuilder, useAnimation, trigger, state, transition, group, query, animateChild } from '@angular/animations';
 import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { fromEvent, Subject, BehaviorSubject, merge, takeWhile, skipWhile } from 'rxjs';
 import * as i1 from '@angular/router';
 import { RouterModule, Router, ActivatedRoute, NavigationEnd, RouterLink } from '@angular/router';
 import { filter, tap, finalize, zipWith, withLatestFrom, debounceTime } from 'rxjs/operators';
+import { animation, group, query, animate, style, trigger, state, transition, useAnimation, animateChild } from '@angular/animations';
 import { createPopper } from '@popperjs/core';
 import * as i1$1 from '@angular/cdk/a11y';
 import { FocusKeyManager, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
@@ -261,74 +261,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'c-accordion', template: '<ng-content />', exportAs: 'cAccordionItem', providers: [AccordionService], host: { '[class]': 'hostClasses()' }, styles: [":host{display:block}\n"] }]
         }], propDecorators: { flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], alwaysOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysOpen", required: false }] }] } });
 
-const expandAnimation = animation([animate('{{ time }} {{ easing }}')]);
-const collapseAnimation = animation([
-    style({ height: '*', minHeight: '*' }),
-    animate('{{ time }} {{ easing }}', style({ height: 0, minHeight: 0 }))
-]);
-const expandHorizontalAnimation = animation([animate('{{ time }} {{ easing }}')]);
-const collapseHorizontalAnimation = animation([animate('{{ time }} {{ easing }}')]);
-
 class CollapseDirective {
-    #animationBuilder = inject(AnimationBuilder);
+    static ngAcceptInputType_animate;
+    static ngAcceptInputType_horizontal;
+    static ngAcceptInputType_navbar;
+    static ngAcceptInputType_visible;
     #hostElement = inject(ElementRef);
     #renderer = inject(Renderer2);
-    #player = undefined;
-    constructor() {
-        afterNextRender({
-            read: () => {
-                this.#initialized.set(true);
-            }
-        });
-    }
+    #unlistenTransitionEnd;
+    #isFirstChange = true;
     /**
-     * @ignore
+     * @ignore internal
      */
     animateInput = input(true, { ...(ngDevMode ? { debugName: "animateInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'animate' });
-    animate = linkedSignal({ ...(ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {}), source: this.animateInput,
-        computation: (value) => value });
+    animate = linkedSignal(this.animateInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
     /**
      * Set horizontal collapsing to transition the width instead of height.
-     * @type boolean
+     * @return boolean
      * @default false
      */
     horizontal = input(false, { ...(ngDevMode ? { debugName: "horizontal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * Toggle the visibility of collapsible element.
-     * @type boolean
+     * Toggle the visibility of a collapsible element.
+     * @return boolean
      * @default false
      */
     visibleInput = input(false, { ...(ngDevMode ? { debugName: "visibleInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'visible' });
+    /**
+     * Event emitted on visibility change. [docs]
+     * @return boolean
+     */
     visibleChange = output();
-    visible = linkedSignal({ ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), source: this.visibleInput, computation: (value) => value });
-    #initialized = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "#initialized" }] : /* istanbul ignore next */ []));
+    visible = linkedSignal(this.visibleInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     #visibleEffect = effect(() => {
         const visible = this.visible();
-        if (this.#initialized()) {
-            this.createPlayer(visible);
+        if (this.#isFirstChange || !untracked(() => this.animate())) {
+            // no transition
+            this.#isFirstChange = false;
+            this.setInitialState(visible);
+            return;
         }
+        untracked(() => {
+            this.runTransition(visible);
+        });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#visibleEffect" }] : /* istanbul ignore next */ []));
     /**
-     * Add `navbar` prop for grouping and hiding navbar contents by a parent breakpoint.
-     * @type boolean
+     * Add a `navbar` prop for grouping and hiding navbar contents by a parent breakpoint.
+     * @return boolean
      * @default false
      */
     navbar = input(false, { ...(ngDevMode ? { debugName: "navbar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * @ignore
-     */
-    duration = input('350ms', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
-    /**
-     * @ignore
-     */
-    transition = input('ease', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "transition" }] : /* istanbul ignore next */ []));
     /**
      * Event emitted on visibility change. [docs]
-     * @type string
+     * @return string
      */
     collapseChange = output();
     hostClasses = computed(() => {
@@ -339,60 +327,88 @@ class CollapseDirective {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     ngOnDestroy() {
-        this.destroyPlayer();
+        this.clearPendingCallbacks();
     }
     toggle(visible = !this.visible()) {
         this.visible.set(visible);
     }
-    destroyPlayer() {
-        this.#player?.destroy();
-        this.#player = undefined;
+    clearPendingCallbacks() {
+        this.#unlistenTransitionEnd?.();
+        this.#unlistenTransitionEnd = undefined;
     }
-    createPlayer(visible = this.visible()) {
-        if (this.#player?.hasStarted()) {
-            this.destroyPlayer();
-        }
+    setInitialState(visible) {
         const host = this.#hostElement.nativeElement;
+        this.#renderer.addClass(host, 'collapse');
+        this.#renderer.removeClass(host, 'collapsing');
         if (visible) {
-            this.#renderer.removeStyle(host, 'display');
+            this.#renderer.addClass(host, 'show');
+        }
+        else {
+            this.#renderer.removeClass(host, 'show');
         }
-        const duration = this.animate() ? this.duration() : '0ms';
-        const expand = this.horizontal() ? expandHorizontalAnimation : expandAnimation;
-        const collapse = this.horizontal() ? collapseHorizontalAnimation : collapseAnimation;
+    }
+    runTransition(visible) {
+        this.clearPendingCallbacks();
+        const host = this.#hostElement.nativeElement;
         const dimension = this.horizontal() ? 'width' : 'height';
         const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1);
         const scrollSize = `scroll${capitalizedDimension}`;
-        const animationFactory = this.#animationBuilder?.build(useAnimation(visible ? expand : collapse, { params: { time: duration, easing: this.transition() } }));
-        this.#player = animationFactory.create(host);
-        !visible && host.offsetHeight && host.style[dimension] && host.scrollHeight;
-        this.#renderer.setStyle(host, dimension, visible ? 0 : `${host.getBoundingClientRect()[dimension]}px`);
-        this.#player.onStart(() => {
+        const animate = this.animate();
+        if (visible) {
             this.setMaxSize();
+            // Switch off `collapse`/`show` before we measure its scroll size below.
             this.#renderer.removeClass(host, 'collapse');
+            this.#renderer.removeClass(host, 'show');
             this.#renderer.addClass(host, 'collapsing');
+            this.collapseChange?.emit('opening');
+            // Reading scrollHeight/scrollWidth forces a synchronous reflow, committing the 0-size
+            // starting point before we set the target size below, so the browser animates the change.
+            const targetSize = host[scrollSize];
+            this.#renderer.setStyle(host, dimension, `${targetSize}px`);
+        }
+        else {
+            // Lock in the current pixel size first so the browser has a committed starting point,
+            // then switch to the collapsing state and clear it so the size can animate down to 0.
+            const startSize = host.getBoundingClientRect()[dimension];
+            this.#renderer.setStyle(host, dimension, `${startSize}px`);
+            // Force a reflow so the browser registers the starting size before the next style change.
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            host.offsetHeight;
+            this.#renderer.removeClass(host, 'collapse');
             this.#renderer.removeClass(host, 'show');
-            this.#renderer.setStyle(host, dimension, visible ? `${host[scrollSize]}px` : '');
-            if (this.#player) {
-                this.collapseChange?.emit(visible ? 'opening' : 'collapsing');
-            }
-        });
-        this.#player.onDone(() => {
-            this.#renderer.removeClass(host, 'collapsing');
-            this.#renderer.addClass(host, 'collapse');
-            if (visible) {
-                this.#renderer.addClass(host, 'show');
-                this.#renderer.setStyle(host, dimension, '');
-            }
-            else {
-                this.#renderer.removeClass(host, 'show');
-            }
-            if (this.#player) {
-                this.collapseChange?.emit(visible ? 'open' : 'collapsed');
-                this.visibleChange?.emit(visible);
-            }
-            this.destroyPlayer();
-        });
-        this.#player?.play();
+            this.#renderer.addClass(host, 'collapsing');
+            this.collapseChange?.emit('collapsing');
+            // Now that the starting size is committed, set the target size (0) so the browser
+            // animates the transition down.
+            this.#renderer.setStyle(host, dimension, '0px');
+        }
+        const finish = () => this.finishTransition(visible, host, dimension);
+        if (animate) {
+            this.#unlistenTransitionEnd = this.#renderer.listen(host, 'transitionend', (event) => {
+                // Ignore bubbled transitionend events from descendant elements.
+                if (event.target === host && event.propertyName === dimension) {
+                    finish();
+                }
+            });
+        }
+        else {
+            finish();
+        }
+    }
+    finishTransition(visible, host, dimension) {
+        this.clearPendingCallbacks();
+        this.#renderer.removeClass(host, 'collapsing');
+        this.#renderer.addClass(host, 'collapse');
+        if (visible) {
+            this.#renderer.addClass(host, 'show');
+        }
+        else {
+            this.#renderer.removeClass(host, 'show');
+        }
+        this.#renderer.removeStyle(host, 'transition');
+        this.#renderer.removeStyle(host, dimension);
+        this.collapseChange?.emit(visible ? 'open' : 'collapsed');
+        this.visibleChange?.emit(visible);
     }
     setMaxSize() {
         const host = this.#hostElement.nativeElement;
@@ -403,16 +419,16 @@ class CollapseDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CollapseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: CollapseDirective, isStandalone: true, selector: "[cCollapse]", inputs: { animateInput: { classPropertyName: "animateInput", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, navbar: { classPropertyName: "navbar", publicName: "navbar", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange", collapseChange: "collapseChange" }, host: { properties: { "class": "hostClasses()", "style": "{ display: \"none\" }" } }, exportAs: ["cCollapse"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: CollapseDirective, isStandalone: true, selector: "[cCollapse]", inputs: { animateInput: { classPropertyName: "animateInput", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, navbar: { classPropertyName: "navbar", publicName: "navbar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange", collapseChange: "collapseChange" }, host: { properties: { "class": "hostClasses()" } }, exportAs: ["cCollapse"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CollapseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cCollapse]',
                     exportAs: 'cCollapse',
-                    host: { '[class]': 'hostClasses()', '[style]': '{ display: "none" }' }
+                    host: { '[class]': 'hostClasses()' }
                 }]
-        }], ctorParameters: () => [], propDecorators: { animateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], navbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbar", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: false }] }], collapseChange: [{ type: i0.Output, args: ["collapseChange"] }] } });
+        }], propDecorators: { animateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], navbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbar", required: false }] }], collapseChange: [{ type: i0.Output, args: ["collapseChange"] }] } });
 
 class CollapseModule {
     static forRoot() {
@@ -473,7 +489,7 @@ class AccordionItemComponent {
         this.#accordionService.toggleItem(this);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: AccordionItemComponent, isStandalone: true, selector: "c-accordion-item", inputs: { visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "accordion-item" }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], exportAs: ["cAccordionItem"], ngImport: i0, template: "@let tmpl = templates();\n<ng-container>\n  <div class=\"accordion-header\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\" />\n  </div>\n  <div class=\"accordion-collapse\" cCollapse [visible]=\"itemVisible()\" [attr.aria-expanded]=\"itemVisible()\" [id]=\"contentId\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\" />\n  </div>\n</ng-container>\n\n<ng-template #defaultAccordionHeaderTemplate>\n  <button cAccordionButton [collapsed]=\"!itemVisible()\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\" />\n  </button>\n</ng-template>\n\n<ng-template #defaultAccordionHeaderContentTemplate>\n  <ng-content />\n</ng-template>\n\n<ng-template #defaultAccordionBodyTemplate>\n  <div class=\"accordion-body\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultAccordionBodyContentTemplate>\n  <ng-content />\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: AccordionButtonDirective, selector: "[cAccordionButton]", inputs: ["collapsed", "type"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar", "duration", "transition"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: AccordionItemComponent, isStandalone: true, selector: "c-accordion-item", inputs: { visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "accordion-item" }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], exportAs: ["cAccordionItem"], ngImport: i0, template: "@let tmpl = templates();\n<ng-container>\n  <div class=\"accordion-header\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\" />\n  </div>\n  <div class=\"accordion-collapse\" cCollapse [visible]=\"itemVisible()\" [attr.aria-expanded]=\"itemVisible()\" [id]=\"contentId\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\" />\n  </div>\n</ng-container>\n\n<ng-template #defaultAccordionHeaderTemplate>\n  <button cAccordionButton [collapsed]=\"!itemVisible()\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\" />\n  </button>\n</ng-template>\n\n<ng-template #defaultAccordionHeaderContentTemplate>\n  <ng-content />\n</ng-template>\n\n<ng-template #defaultAccordionBodyTemplate>\n  <div class=\"accordion-body\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultAccordionBodyContentTemplate>\n  <ng-content />\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: AccordionButtonDirective, selector: "[cAccordionButton]", inputs: ["collapsed", "type"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
@@ -699,6 +715,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         }] });
 
 class AlertComponent {
+    #hostElement = inject(ElementRef);
+    #maxAnimationTimeout = inject(MAX_ANIMATION_TIMEOUT);
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      * @return Colors
@@ -720,50 +738,42 @@ class AlertComponent {
     variant = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
     /**
-     * Optionally adds a close button to alert and allow it to self dismiss.
+     * Optionally adds a close button to the alert and allow it to self-dismiss.
      * @return boolean
      * @default false
      */
-    dismissibleInput = input(false, { ...(ngDevMode ? { debugName: "dismissibleInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'dismissible' });
-    #dismissible = linkedSignal({ ...(ngDevMode ? { debugName: "#dismissible" } : /* istanbul ignore next */ {}), source: this.dismissibleInput,
-        computation: (value) => {
-            return value;
-        } });
-    set dismissible(value) {
-        this.#dismissible.set(value);
-    }
-    get dismissible() {
-        return this.#dismissible();
-    }
+    dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Adds animation for dismissible alert.
      * @return boolean
      */
     fade = input(false, { ...(ngDevMode ? { debugName: "fade" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * Toggle the visibility of alert component.
+     * Toggle the visibility of the alert component.
      * @return boolean
      */
     visibleInput = input(true, { ...(ngDevMode ? { debugName: "visibleInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'visible' });
-    #visible = linkedSignal({ ...(ngDevMode ? { debugName: "#visible" } : /* istanbul ignore next */ {}), source: this.visibleInput,
-        computation: (value) => {
-            return value;
-        } });
-    set visible(value) {
-        if (this.#visible() !== value) {
-            this.#visible.set(value);
-            this.visibleChange?.emit(value);
-        }
-    }
-    get visible() {
-        return this.#visible();
-    }
-    hide = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hide" }] : /* istanbul ignore next */ []));
+    visible = linkedSignal(this.visibleInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     /**
-     * Event triggered on the alert dismiss.
+     * Event triggered on the alert visibility change.
+     * @return boolean
      */
     visibleChange = output();
+    hide = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hide" }] : /* istanbul ignore next */ []));
+    #visibleEffect = effect(() => {
+        const visible = this.visible();
+        if (visible) {
+            this.hide.set(false);
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#visibleEffect" }] : /* istanbul ignore next */ []));
+    #hideEffect = effect(() => {
+        const hide = this.hide();
+        this.visibleChange.emit(!hide);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#hideEffect" }] : /* istanbul ignore next */ []));
     contentTemplates = contentChildren(TemplateIdDirective, { ...(ngDevMode ? { debugName: "contentTemplates" } : /* istanbul ignore next */ {}), descendants: true });
     templates = computed(() => {
         return this.contentTemplates().reduce((acc, child) => {
@@ -772,72 +782,58 @@ class AlertComponent {
         }, {});
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    get animateType() {
-        return this.visible ? 'show' : 'hide';
-    }
     hostClasses = computed(() => {
         const color = this.color();
         const variant = this.variant();
+        const visible = this.visible();
         return {
             alert: true,
-            'alert-dismissible': this.dismissible,
+            'alert-dismissible': this.dismissible(),
             fade: this.fade(),
-            show: !this.hide(),
+            show: visible,
+            'd-none': this.hide() && !visible,
             [`alert-${color}`]: !!color && variant !== 'solid',
             [`bg-${color}`]: !!color && variant === 'solid',
             'text-white': !!color && variant === 'solid'
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    onAnimationStart($event) {
-        this.onAnimationEvent($event);
-    }
-    onAnimationDone($event) {
-        this.onAnimationEvent($event);
-    }
-    onAnimationEvent(event) {
-        this.hide.set(event.phaseName === 'start' && event.toState === 'show');
-        if (event.phaseName === 'done') {
-            this.hide.set(event.toState === 'hide' || event.toState === 'void');
-            if (event.toState === 'show') {
+    onTransitionStart($event) {
+        if ($event.propertyName === 'opacity') {
+            if (this.visible()) {
                 this.hide.set(false);
             }
         }
     }
+    onTransitionEnd($event) {
+        if ($event.propertyName === 'opacity') {
+            this.hide.set(!this.visible());
+        }
+    }
+    #leavingInProgress = false;
+    handleLeaving($event) {
+        if (this.#leavingInProgress)
+            return;
+        this.#leavingInProgress = true;
+        this.#hostElement.nativeElement.classList.remove('show');
+        setTimeout(() => {
+            $event.animationComplete();
+        }, this.#maxAnimationTimeout);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AlertComponent, isStandalone: true, selector: "c-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissibleInput: { classPropertyName: "dismissibleInput", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "fade", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@fadeInOut.start": "onAnimationStart($event)", "@fadeInOut.done": "onAnimationDone($event)" }, properties: { "@.disabled": "!fade()", "@fadeInOut": "animateType", "attr.role": "role()", "class": "hostClasses()" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], exportAs: ["cAlert"], ngImport: i0, template: "@if (visible || !hide()) {\n  @if (dismissible) {\n    <ng-container *ngTemplateOutlet=\"templates()?.['alertButtonCloseTemplate'] || defaultAlertButtonCloseTemplate\" />\n  }\n  <ng-content />\n}\n<ng-template #defaultAlertButtonCloseTemplate>\n  <button (click)=\"visible=false\" aria-label=\"Close\" cButtonClose></button>\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }], animations: [
-            trigger('fadeInOut', [
-                state('show', style({ opacity: 1, height: '*', padding: '*', border: '*', margin: '*' })),
-                state('hide', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
-                state('void', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
-                transition('show => hide', [animate('.3s ease-out')]),
-                transition('hide => show', [animate('.3s ease-in')]),
-                transition('show => void', [animate('.3s ease-out')]),
-                transition('void => show', [animate('.3s ease-in')])
-            ])
-        ] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AlertComponent, isStandalone: true, selector: "c-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "fade", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "animate.leave": "handleLeaving($event)", "transitionend": "onTransitionEnd($event)", "transitionstart": "onTransitionStart($event)" }, properties: { "attr.role": "role()", "class": "hostClasses()", "attr.hidden": "hide() ? \"\" : null" } }, providers: [{ provide: MAX_ANIMATION_TIMEOUT, useValue: 300 }], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], exportAs: ["cAlert"], ngImport: i0, template: "@if (visible() || !hide()) {\n  @if (dismissible()) {\n    <ng-container *ngTemplateOutlet=\"templates()?.['alertButtonCloseTemplate'] || defaultAlertButtonCloseTemplate\" />\n  }\n  <ng-content />\n}\n<ng-template #defaultAlertButtonCloseTemplate>\n  <button (click)=\"visible.set(false)\" aria-label=\"Close\" cButtonClose></button>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-alert', exportAs: 'cAlert', imports: [NgTemplateOutlet, ButtonCloseDirective], animations: [
-                        trigger('fadeInOut', [
-                            state('show', style({ opacity: 1, height: '*', padding: '*', border: '*', margin: '*' })),
-                            state('hide', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
-                            state('void', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
-                            transition('show => hide', [animate('.3s ease-out')]),
-                            transition('hide => show', [animate('.3s ease-in')]),
-                            transition('show => void', [animate('.3s ease-out')]),
-                            transition('void => show', [animate('.3s ease-in')])
-                        ])
-                    ], host: {
-                        '[@.disabled]': '!fade()',
-                        '[@fadeInOut]': 'animateType',
+            args: [{ selector: 'c-alert', exportAs: 'cAlert', imports: [NgTemplateOutlet, ButtonCloseDirective], host: {
                         '[attr.role]': 'role()',
                         '[class]': 'hostClasses()',
-                        '(@fadeInOut.start)': 'onAnimationStart($event)',
-                        '(@fadeInOut.done)': 'onAnimationDone($event)'
-                    }, template: "@if (visible || !hide()) {\n  @if (dismissible) {\n    <ng-container *ngTemplateOutlet=\"templates()?.['alertButtonCloseTemplate'] || defaultAlertButtonCloseTemplate\" />\n  }\n  <ng-content />\n}\n<ng-template #defaultAlertButtonCloseTemplate>\n  <button (click)=\"visible=false\" aria-label=\"Close\" cButtonClose></button>\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"] }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dismissibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], fade: [{ type: i0.Input, args: [{ isSignal: true, alias: "fade", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateIdDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+                        '(animate.leave)': 'handleLeaving($event)',
+                        '(transitionend)': 'onTransitionEnd($event)',
+                        '(transitionstart)': 'onTransitionStart($event)',
+                        '[attr.hidden]': 'hide() ? "" : null'
+                    }, providers: [{ provide: MAX_ANIMATION_TIMEOUT, useValue: 300 }], template: "@if (visible() || !hide()) {\n  @if (dismissible()) {\n    <ng-container *ngTemplateOutlet=\"templates()?.['alertButtonCloseTemplate'] || defaultAlertButtonCloseTemplate\" />\n  }\n  <ng-content />\n}\n<ng-template #defaultAlertButtonCloseTemplate>\n  <button (click)=\"visible.set(false)\" aria-label=\"Close\" cButtonClose></button>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], fade: [{ type: i0.Input, args: [{ isSignal: true, alias: "fade", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateIdDirective), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class AlertModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -5075,12 +5071,11 @@ class NavbarComponent {
             if (!collapse) {
                 return;
             }
-            const animate = collapse.animate();
             collapse.animate.set(false);
             collapse.toggle(false);
             setTimeout(() => {
                 collapse.toggle(result.matches);
-                setTimeout(() => collapse.animate.set(animate));
+                setTimeout(() => collapse.animate.set(collapse.animateInput()));
             });
         });
         onCleanup(() => subscription.unsubscribe());
@@ -5161,27 +5156,29 @@ class NavbarTogglerDirective {
     }
     /**
      * Reference to navbar collapse element (via # template variable) . [docs]
-     * @type string
+     * @return string
      * @default 'button'
      */
     collapseRef = input(undefined, { ...(ngDevMode ? { debugName: "collapseRef" } : /* istanbul ignore next */ {}), alias: 'cNavbarToggler' });
     /**
      * Default type for navbar-toggler. [docs]
-     * @type string
+     * @return string
      * @default 'button'
      */
     type = input('button', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     /**
      * Default aria-label attr for navbar-toggler. [docs]
-     * @type string
+     * @return string
      * @default 'Toggle navigation'
      */
     ariaLabel = input('Toggle navigation', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     handleClick($event) {
         const collapseRef = this.collapseRef();
-        collapseRef?.toggle(!collapseRef?.visible());
+        if (collapseRef) {
+            collapseRef?.toggle(!collapseRef?.visible());
+        }
     }
     addDefaultIcon() {
         const span = this.#renderer.createElement('span');