@coreui/angular 5.7.6 → 5.7.9

package/fesm2022/coreui-angular.mjs

@@ -3082,7 +3082,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);
@@ -3101,7 +3100,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 */
@@ -3138,9 +3137,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 });
@@ -5041,33 +5045,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"] }] });
 }
@@ -5552,7 +5550,7 @@ class ModalComponent {
             this.show = this.visible();
         });
     }
-    onKeyUpHandler(event) {
+    onKeyDownHandler(event) {
         if (event.key === 'Escape' && this.keyboard() && this.visible()) {
             if (this.backdrop() === 'static') {
                 this.setStaticBackdrop();
@@ -5633,7 +5631,7 @@ class ModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: ModalComponent, isStandalone: true, selector: "c-modal", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, attrId: { classPropertyName: "attrId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaModalInput: { classPropertyName: "ariaModalInput", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "mousedown": "onMouseDownHandler($event)", "click": "onClickHandler($event)", "document:keyup": "onKeyUpHandler($event)" }, properties: { "class": "hostClasses()", "attr.role": "visible() ? role() : null", "attr.inert": "ariaHidden()", "attr.id": "id", "attr.aria-modal": "ariaModal()", "attr.aria-hidden": "ariaHidden()", "attr.tabindex": "-1" }, classAttribute: "modal" }, viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContentRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "modalDialogRef", first: true, predicate: ModalDialogComponent, descendants: true, read: ElementRef, isSignal: true }], exportAs: ["cModal"], ngImport: i0, template: "@let isVisible = visible();\n<c-modal-dialog\n  [alignment]=\"alignment()\"\n  [fullscreen]=\"fullscreen()\"\n  [scrollable]=\"scrollable()\"\n  [size]=\"size()\">\n  <c-modal-content>\n    <div #modalContentRef [cdkTrapFocusAutoCapture]=\"isVisible\" [cdkTrapFocus]=\"isVisible\" style=\"display: contents;\">\n      <ng-content />\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n", dependencies: [{ kind: "component", type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }, { kind: "component", type: ModalContentComponent, selector: "c-modal-content" }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: ModalComponent, isStandalone: true, selector: "c-modal", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, attrId: { classPropertyName: "attrId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaModalInput: { classPropertyName: "ariaModalInput", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "mousedown": "onMouseDownHandler($event)", "click": "onClickHandler($event)", "document:keydown": "onKeyDownHandler($event)" }, properties: { "class": "hostClasses()", "attr.role": "visible() ? role() : null", "attr.inert": "ariaHidden()", "attr.id": "id", "attr.aria-modal": "ariaModal()", "attr.aria-hidden": "ariaHidden()", "attr.tabindex": "-1" }, classAttribute: "modal" }, viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContentRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "modalDialogRef", first: true, predicate: ModalDialogComponent, descendants: true, read: ElementRef, isSignal: true }], exportAs: ["cModal"], ngImport: i0, template: "@let isVisible = visible();\n<c-modal-dialog\n  [alignment]=\"alignment()\"\n  [fullscreen]=\"fullscreen()\"\n  [scrollable]=\"scrollable()\"\n  [size]=\"size()\">\n  <c-modal-content>\n    <div #modalContentRef [cdkTrapFocusAutoCapture]=\"isVisible\" [cdkTrapFocus]=\"isVisible\" style=\"display: contents;\">\n      <ng-content />\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n", dependencies: [{ kind: "component", type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }, { kind: "component", type: ModalContentComponent, selector: "c-modal-content" }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -5648,7 +5646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.tabindex]': '-1',
                         '(mousedown)': 'onMouseDownHandler($event)',
                         '(click)': 'onClickHandler($event)',
-                        '(document:keyup)': 'onKeyUpHandler($event)'
+                        '(document:keydown)': 'onKeyDownHandler($event)'
                     }, template: "@let isVisible = visible();\n<c-modal-dialog\n  [alignment]=\"alignment()\"\n  [fullscreen]=\"fullscreen()\"\n  [scrollable]=\"scrollable()\"\n  [size]=\"size()\">\n  <c-modal-content>\n    <div #modalContentRef [cdkTrapFocusAutoCapture]=\"isVisible\" [cdkTrapFocus]=\"isVisible\" style=\"display: contents;\">\n      <ng-content />\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n" }]
         }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], attrId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaModalInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], modalContentRef: [{ type: i0.ViewChild, args: ['modalContentRef', { ...{ read: ElementRef }, isSignal: true }] }], modalDialogRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ModalDialogComponent), { ...{ read: ElementRef }, isSignal: true }] }] } });
 
@@ -6442,6 +6440,25 @@ class PopoverDirective {
             this.visible() ? this.addTooltipElement() : this.removeTooltipElement();
         }
     });
+    #handleEscapeKey = (event) => {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.visible.set(false);
+    };
+    #escapeEffect = effect((onCleanup) => {
+        if (!this.visible()) {
+            return;
+        }
+        const useCapture = true;
+        this.#document.addEventListener('keydown', this.#handleEscapeKey, useCapture);
+        onCleanup(() => {
+            this.#document.removeEventListener('keydown', this.#handleEscapeKey, useCapture);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#escapeEffect" }] : /* istanbul ignore next */ []));
     get ariaDescribedBy() {
         return this.tooltipId ? this.tooltipId : null;
     }
@@ -9486,6 +9503,23 @@ class TooltipDirective {
             this.visible() ? this.addTooltipElement() : this.removeTooltipElement();
         }
     });
+    #handleEscapeKey = (event) => {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.visible.set(false);
+    };
+    #escapeEffect = effect((onCleanup) => {
+        if (!this.visible()) {
+            return;
+        }
+        const useCapture = true;
+        this.#document.addEventListener('keydown', this.#handleEscapeKey, useCapture);
+        onCleanup(() => this.#document.removeEventListener('keydown', this.#handleEscapeKey, useCapture));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#escapeEffect" }] : /* istanbul ignore next */ []));
     get ariaDescribedBy() {
         return this.tooltipId ? this.tooltipId : null;
     }