@coreui/angular 5.3.5 → 5.3.7

package/fesm2022/coreui-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, Input, booleanAttribute, NgModule, computed, Injectable, Component, signal, output, contentChildren, EventEmitter, HostBinding, Output, ContentChildren, HostListener, DestroyRef, RendererFactory2, PLATFORM_ID, afterNextRender, Inject, ChangeDetectorRef, ViewChild, forwardRef, ContentChild, contentChild, afterRender, viewChild, ViewContainerRef, model, numberAttribute, ChangeDetectionStrategy, Pipe, Injector, untracked, runInInjectionContext } from '@angular/core';
+import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, Input, booleanAttribute, NgModule, computed, Injectable, Component, signal, output, afterNextRender, contentChildren, EventEmitter, HostBinding, Output, ContentChildren, HostListener, DestroyRef, RendererFactory2, PLATFORM_ID, Inject, ChangeDetectorRef, ViewChild, forwardRef, ContentChild, contentChild, afterRender, viewChild, ViewContainerRef, model, numberAttribute, ChangeDetectionStrategy, Pipe, Injector, untracked, runInInjectionContext } from '@angular/core';
 import { NgTemplateOutlet, DOCUMENT, NgClass, AsyncPipe, isPlatformServer, isPlatformBrowser, NgStyle } from '@angular/common';
 import { animation, animate, style, AnimationBuilder, useAnimation, trigger, state, transition, group, query, animateChild } from '@angular/animations';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
@@ -273,6 +273,10 @@ const expandHorizontalAnimation = animation([animate('{{ time }} {{ easing }}')]
 const collapseHorizontalAnimation = animation([animate('{{ time }} {{ easing }}')]);
 
 class CollapseDirective {
+    #hostElement;
+    #renderer;
+    #animationBuilder;
+    #player;
     constructor() {
         this.#hostElement = inject(ElementRef);
         this.#renderer = inject(Renderer2);
@@ -283,7 +287,7 @@ class CollapseDirective {
          */
         this.animateInput = input(true, { transform: booleanAttribute, alias: 'animate' });
         this.animate = signal(true);
-        this.animateInputEffect = effect(() => {
+        this.#animateInputEffect = effect(() => {
             this.animate.set(this.animateInput());
         });
         /**
@@ -299,15 +303,15 @@ class CollapseDirective {
          */
         this.visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' });
         this.visibleChange = output();
-        this.visibleInputEffect = effect(() => {
+        this.#visibleInputEffect = effect(() => {
             this.visible.set(this.visibleInput());
         });
         this.visible = signal(false);
-        this.#init = false;
-        this.visibleEffect = effect(() => {
-            const visible = this.visible();
-            (this.#init || visible) && this.createPlayer(visible);
-            this.#init = true;
+        this.#initialized = signal(false);
+        this.#visibleEffect = effect(() => {
+            if (this.#initialized()) {
+                this.createPlayer(this.visible());
+            }
         });
         /**
          * Add `navbar` prop for grouping and hiding navbar contents by a parent breakpoint.
@@ -334,12 +338,16 @@ class CollapseDirective {
                 'collapse-horizontal': this.horizontal()
             };
         });
+        afterNextRender({
+            read: () => {
+                this.#initialized.set(true);
+            }
+        });
     }
-    #hostElement;
-    #renderer;
-    #animationBuilder;
-    #player;
-    #init;
+    #animateInputEffect;
+    #visibleInputEffect;
+    #initialized;
+    #visibleEffect;
     ngOnDestroy() {
         this.destroyPlayer();
     }
@@ -401,16 +409,16 @@ class CollapseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CollapseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", 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 { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CollapseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cCollapse]',
                     exportAs: 'cCollapse',
-                    host: { '[class]': 'hostClasses()', '[style]': '{display: "none"}' }
+                    host: { '[class]': 'hostClasses()', '[style]': '{ display: "none" }' }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class CollapseModule {
     static forRoot() {
@@ -5938,6 +5946,7 @@ class OffcanvasComponent {
             show: this.show
         };
     }
+    // @HostBinding('attr.aria-hidden')
     get ariaHidden() {
         return this.visible ? null : true;
     }
@@ -6053,7 +6062,7 @@ class OffcanvasComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OffcanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.5", type: OffcanvasComponent, isStandalone: true, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: ["keyboard", "keyboard", booleanAttribute], placement: "placement", responsive: "responsive", id: "id", role: "role", ariaModal: ["ariaModal", "ariaModal", booleanAttribute], scroll: ["scroll", "scroll", booleanAttribute], visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, exportAs: ["cOffcanvas"], hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content />\n</div>\n\n", styles: [":host{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.5", type: OffcanvasComponent, isStandalone: true, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: ["keyboard", "keyboard", booleanAttribute], placement: "placement", responsive: "responsive", id: "id", role: "role", ariaModal: ["ariaModal", "ariaModal", booleanAttribute], scroll: ["scroll", "scroll", booleanAttribute], visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.inert": "ariaHidden || null", "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, exportAs: ["cOffcanvas"], hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content />\n</div>\n\n", styles: [":host{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
             trigger('showHide', [
                 state('visible', style({
                 // visibility: 'visible'
@@ -6077,7 +6086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             })),
                             transition('visible <=> *', [animate('300ms')])
                         ])
-                    ], exportAs: 'cOffcanvas', imports: [A11yModule], hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }], host: { ngSkipHydration: 'true' }, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content />\n</div>\n\n", styles: [":host{display:none}\n"] }]
+                    ], exportAs: 'cOffcanvas', imports: [A11yModule], hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }], host: { ngSkipHydration: 'true', '[attr.inert]': 'ariaHidden || null' }, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content />\n</div>\n\n", styles: [":host{display:none}\n"] }]
         }], propDecorators: { backdrop: [{
                 type: Input
             }], keyboard: [{
@@ -6111,9 +6120,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], ariaHidden: [{
-                type: HostBinding,
-                args: ['attr.aria-hidden']
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']