@coreui/angular 5.7.20 → 5.7.21

package/fesm2022/coreui-angular.mjs

@@ -5882,6 +5882,14 @@ class OffcanvasComponent {
      */
     backdrop = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
+    /**
+     * Appends the offcanvas to a specific element. You can pass an HTML element or function that returns a single element. By default, `document.body`.
+     * @since 5.7.21
+     * @returns Element | (() => Element | null) | null
+     * @default document.body
+     */
+    container = input(this.#document.body, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
     /**
      * Closes the offcanvas when the escape key is pressed
      * @returns boolean
@@ -5895,6 +5903,13 @@ class OffcanvasComponent {
      */
     placement = input('start', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /**
+     * Generates offcanvas using a portal
+     * @since 5.7.21
+     * @returns boolean
+     * @default false
+     */
+    portal = input(false, { ...(ngDevMode ? { debugName: "portal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Responsive offcanvas property hides content outside the viewport from a specified breakpoint and down.
      * @returns boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
@@ -5925,6 +5940,8 @@ class OffcanvasComponent {
     #activeBackdrop;
     #backdropClickSubscription;
     #layoutChangeSubscription;
+    #hideFallbackId;
+    #isShown = false;
     /**
      * Allow body scrolling while offcanvas is visible.
      * @returns boolean
@@ -5939,6 +5956,33 @@ class OffcanvasComponent {
     visibleInput = input(false, { ...(ngDevMode ? { debugName: "visibleInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'visible' });
     visible = linkedSignal({ ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), source: this.visibleInput,
         computation: (value) => value });
+    domPortal = new DomPortal(this.#hostElement.nativeElement);
+    domPortalOutlet;
+    domPortalCleanup = () => {
+        if (this.domPortalOutlet?.hasAttached()) {
+            this.domPortalOutlet.detach();
+        }
+    };
+    #portalEffect = effect(() => {
+        const visible = this.visible();
+        const containerInput = this.container();
+        const portalEnabled = this.portal();
+        untracked(() => {
+            if (!visible) {
+                return;
+            }
+            const container = typeof containerInput === 'function' ? containerInput() : containerInput;
+            this.domPortalCleanup();
+            if (container && portalEnabled) {
+                this.domPortalOutlet = new DomPortalOutlet(container);
+                this.domPortalOutlet.attach(this.domPortal);
+                // Re-inserting the host drops its computed style, so the show classes applied later in
+                // this same cycle would have no starting point to animate from. Force a reflow to commit it.
+                void this.#hostElement.nativeElement.offsetHeight;
+            }
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#portalEffect" }] : /* istanbul ignore next */ []));
     visibleEffect = effect(() => {
         const visible = this.visible();
         this.animateStart(visible);
@@ -5995,6 +6039,9 @@ class OffcanvasComponent {
         return breakpointValue ? `${parseFloat(breakpointValue.trim()) - 0.02}px` : false;
     }
     animateStart(visible = this.visible()) {
+        const wasShown = this.#isShown;
+        this.#isShown = visible;
+        this.#clearHideFallback();
         if (visible) {
             if (!this.scroll()) {
                 this.#backdropService.hideScrollbar();
@@ -6005,6 +6052,9 @@ class OffcanvasComponent {
         else {
             this.#renderer.removeClass(this.#hostElement.nativeElement, 'showing');
             this.#renderer.addClass(this.#hostElement.nativeElement, 'hiding');
+            if (wasShown) {
+                this.#scheduleHideFallback();
+            }
         }
     }
     onKeyDownHandler(event) {
@@ -6023,6 +6073,8 @@ class OffcanvasComponent {
     ngOnDestroy() {
         this.#offcanvasService.toggle({ show: false, id: this.id() });
         this.#removeEventListeners();
+        this.#clearHideFallback();
+        this.domPortalCleanup();
     }
     #removeEventListeners = () => {
         this.#hostElement.nativeElement.removeEventListener('transitionend', this.#handleTransitionEnd);
@@ -6034,12 +6086,30 @@ class OffcanvasComponent {
                 this.#renderer.removeClass(offcanvasElement, 'showing');
             }
             else {
-                this.#renderer.removeClass(offcanvasElement, 'hiding');
-                this.#renderer.removeStyle(this.#document.body, 'overflow');
-                this.#renderer.removeStyle(this.#document.body, 'paddingRight');
+                this.#completeHide();
             }
         }
     };
+    #completeHide() {
+        this.#clearHideFallback();
+        this.#renderer.removeClass(this.#hostElement.nativeElement, 'hiding');
+        this.#renderer.removeStyle(this.#document.body, 'overflow');
+        this.#renderer.removeStyle(this.#document.body, 'paddingRight');
+        this.domPortalCleanup();
+    }
+    // `transitionend` never fires when there is nothing to animate — reduced motion, or a responsive
+    // offcanvas above its breakpoint — which would leave the body scroll-locked and the host parked
+    // in the portal container.
+    #scheduleHideFallback() {
+        const style = this.#document.defaultView?.getComputedStyle(this.#hostElement.nativeElement);
+        const duration = Number.parseFloat(style?.transitionDuration ?? '') || 0;
+        const delay = Number.parseFloat(style?.transitionDelay ?? '') || 0;
+        this.#hideFallbackId = setTimeout(() => this.#completeHide(), (duration + delay) * 1000 + 5);
+    }
+    #clearHideFallback() {
+        clearTimeout(this.#hideFallbackId);
+        this.#hideFallbackId = undefined;
+    }
     setFocus() {
         if (isPlatformBrowser(this.#platformId)) {
             setTimeout(() => this.#hostElement.nativeElement.focus());
@@ -6090,12 +6160,11 @@ class OffcanvasComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: OffcanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: OffcanvasComponent, isStandalone: true, selector: "c-offcanvas", inputs: { backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.id": "id()", "attr.inert": "ariaHidden() || null", "attr.role": "role()", "attr.aria-modal": "ariaModal()", "attr.tabindex": "tabIndex", "class": "hostClasses()" } }, 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: OffcanvasComponent, isStandalone: true, selector: "c-offcanvas", inputs: { backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, portal: { classPropertyName: "portal", publicName: "portal", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.id": "id()", "attr.inert": "ariaHidden() || null", "attr.role": "role()", "attr.aria-modal": "ariaModal()", "attr.tabindex": "tabIndex", "class": "hostClasses()" } }, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: OffcanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-offcanvas', exportAs: 'cOffcanvas', imports: [A11yModule], hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }], host: {
-                        ngSkipHydration: 'true',
                         '[attr.id]': 'id()',
                         '[attr.inert]': 'ariaHidden() || null',
                         '[attr.role]': 'role()',
@@ -6104,7 +6173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         '[class]': 'hostClasses()',
                         '(document:keydown)': 'onKeyDownHandler($event)'
                     }, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content />\n</div>\n\n", styles: [":host{display:none}\n"] }]
-        }], propDecorators: { backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
+        }], propDecorators: { backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], portal: [{ type: i0.Input, args: [{ isSignal: true, alias: "portal", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
 
 class OffcanvasBodyComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: OffcanvasBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });