@coreui/angular 5.7.19 → 5.7.20

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 });