@coreui/angular 5.7.19 → 5.7.21

package/fesm2022/coreui-angular.mjs

@@ -10,6 +10,7 @@ import { createPopper } from '@popperjs/core';
 import * as i1$1 from '@angular/cdk/a11y';
 import { FocusKeyManager, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import { DomPortal, DomPortalOutlet } from '@angular/cdk/portal';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { IconDirective } from '@coreui/icons-angular';
 
@@ -5493,6 +5494,14 @@ class ModalComponent {
      */
     backdrop = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
+    /**
+     * Appends the angular modal to a specific element. You can pass an HTML element or function that returns a single element. By default, `document.body`.
+     * @since 5.7.20
+     * @returns Element | (() => Element | null) | null
+     * @default document.body
+     */
+    container = input(this.#document.body, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
     /**
      * Set modal to cover the entire user viewport.
      * @returns {boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'}
@@ -5507,13 +5516,20 @@ class ModalComponent {
      */
     keyboard = input(true, { ...(ngDevMode ? { debugName: "keyboard" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * Html id attribute, required for programmatic visibility change.
+     * HTML id attribute, required for programmatic visibility change.
      * @returns string
      */
     attrId = input(undefined, { ...(ngDevMode ? { debugName: "attrId" } : /* istanbul ignore next */ {}), alias: 'id' });
     get id() {
         return this.attrId();
     }
+    /**
+     * Generates modal using a portal
+     * @since 5.7.20
+     * @returns boolean
+     * @default false
+     */
+    portal = input(false, { ...(ngDevMode ? { debugName: "portal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Size the component small, large, or extra large.
      * @returns {'sm' | 'lg' | 'xl'}
@@ -5556,6 +5572,30 @@ class ModalComponent {
     visibleInput = input(false, { ...(ngDevMode ? { debugName: "visibleInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'visible' });
     visible = linkedSignal(this.visibleInput, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    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);
+            }
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#portalEffect" }] : /* istanbul ignore next */ []));
     #visibleInputEffect = effect(() => {
         const visible = this.visible();
         untracked(() => {
@@ -5600,9 +5640,6 @@ class ModalComponent {
      * @returns boolean
      */
     visibleChange = output();
-    // @ViewChild(ModalContentComponent, { read: ElementRef }) modalContent!: ElementRef;
-    // @ViewChild('modalContentRef', { read: ElementRef }) modalContentRef!: ElementRef;
-    // readonly modalContentRef = viewChild(ModalContentComponent, { read: ElementRef });
     modalContentRef = viewChild('modalContentRef', { ...(ngDevMode ? { debugName: "modalContentRef" } : /* istanbul ignore next */ {}), read: ElementRef });
     modalDialogRef = viewChild.required(ModalDialogComponent, { ...(ngDevMode ? { debugName: "modalDialogRef" } : /* istanbul ignore next */ {}), read: ElementRef });
     #modalDialogEffect = effect((OnCleanup) => {
@@ -5618,6 +5655,7 @@ class ModalComponent {
         const modalDialogElement = this.modalDialogRef().nativeElement;
         if (event.target === modalDialogElement && event.propertyName === 'transform') {
             if (!this.visible()) {
+                this.domPortalCleanup();
                 this.#renderer.setStyle(this.#hostElement.nativeElement, 'display', 'none');
             }
         }
@@ -5651,6 +5689,7 @@ class ModalComponent {
         }
         else {
             if (!this.transition()) {
+                this.domPortalCleanup();
                 this.#renderer.setStyle(this.#hostElement.nativeElement, 'display', 'none');
             }
         }
@@ -5698,6 +5737,7 @@ class ModalComponent {
         this.#modalService.toggle({ show: false, modal: this });
         this.#afterViewInit.set(false);
         this.setBackdrop(false);
+        this.domPortalCleanup();
     }
     stateToggleSubscribe() {
         this.#modalService.modalState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((action) => {
@@ -5739,7 +5779,7 @@ class ModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", 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 }, container: { classPropertyName: "container", publicName: "container", 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 }, portal: { classPropertyName: "portal", publicName: "portal", 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.1.3", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -5756,7 +5796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         '(click)': 'onClickHandler($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 }] }] } });
+        }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", 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 }] }], portal: [{ type: i0.Input, args: [{ isSignal: true, alias: "portal", 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 }] }] } });
 
 class ModalModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -5842,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
@@ -5855,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';
@@ -5885,6 +5940,8 @@ class OffcanvasComponent {
     #activeBackdrop;
     #backdropClickSubscription;
     #layoutChangeSubscription;
+    #hideFallbackId;
+    #isShown = false;
     /**
      * Allow body scrolling while offcanvas is visible.
      * @returns boolean
@@ -5899,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);
@@ -5955,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();
@@ -5965,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) {
@@ -5983,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);
@@ -5994,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());
@@ -6050,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()',
@@ -6064,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 });