@coreui/angular-pro 5.7.19 → 5.7.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/angular-pro",
-  "version": "5.7.19",
+  "version": "5.7.20",
   "description": "CoreUI Pro Components Library for Angular",
   "copyright": "Copyright 2026 creativeLabs Łukasz Holeczek",
   "license": "SEE LICENSE IN LICENSE",
@@ -31,7 +31,7 @@
     "@angular/forms": "^22.1.0",
     "@angular/router": "^22.1.0",
     "@coreui/coreui-pro": "^5.27.1",
-    "@coreui/icons-angular": "~5.7.19",
+    "@coreui/icons-angular": "~5.7.20",
     "rxjs": "^7.8.2"
   },
   "repository": {

package/types/coreui-angular-pro.d.ts

@@ -12,6 +12,7 @@ import { FocusableOption, FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import * as node_modules_rxjs_dist_types from 'node_modules/rxjs/dist/types';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { SelectionModel, SelectionChange } from '@angular/cdk/collections';
+import { DomPortal, DomPortalOutlet } from '@angular/cdk/portal';
 import { AnimationEvent } from '@angular/animations';
 
 declare type BooleanInput = string | boolean | null | undefined;
@@ -3799,6 +3800,13 @@ declare class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
      * @default true
      */
     readonly backdrop: _angular_core.InputSignal<boolean | "static">;
+    /**
+     * 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
+     */
+    readonly container: _angular_core.InputSignal<Element | (() => Element | null) | null>;
     /**
      * Set modal to cover the entire user viewport.
      * @returns {boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'}
@@ -3812,11 +3820,18 @@ declare class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
      */
     readonly keyboard: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * Html id attribute, required for programmatic visibility change.
+     * HTML id attribute, required for programmatic visibility change.
      * @returns string
      */
     readonly attrId: _angular_core.InputSignal<string | undefined>;
     get id(): string | undefined;
+    /**
+     * Generates modal using a portal
+     * @since 5.7.20
+     * @returns boolean
+     * @default false
+     */
+    readonly portal: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Size the component small, large, or extra large.
      * @returns {'sm' | 'lg' | 'xl'}
@@ -3853,6 +3868,9 @@ declare class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
      */
     readonly visibleInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly visible: _angular_core.WritableSignal<boolean>;
+    protected readonly domPortal: DomPortal<any>;
+    protected domPortalOutlet: DomPortalOutlet;
+    protected domPortalCleanup: () => void;
     /**
      * Event triggered on modal dismiss.
      * @returns boolean
@@ -3877,7 +3895,7 @@ declare class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
     private setBodyStyles;
     private setStaticBackdrop;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalComponent, "c-modal", ["cModal"], { "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "fullscreen": { "alias": "fullscreen"; "required": false; "isSignal": true; }; "keyboard": { "alias": "keyboard"; "required": false; "isSignal": true; }; "attrId": { "alias": "id"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transition": { "alias": "transition"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaModalInput": { "alias": "ariaModal"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "visibleInput": { "alias": "visible"; "required": false; "isSignal": true; }; }, { "visibleChange": "visibleChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalComponent, "c-modal", ["cModal"], { "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "container": { "alias": "container"; "required": false; "isSignal": true; }; "fullscreen": { "alias": "fullscreen"; "required": false; "isSignal": true; }; "keyboard": { "alias": "keyboard"; "required": false; "isSignal": true; }; "attrId": { "alias": "id"; "required": false; "isSignal": true; }; "portal": { "alias": "portal"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transition": { "alias": "transition"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaModalInput": { "alias": "ariaModal"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "visibleInput": { "alias": "visible"; "required": false; "isSignal": true; }; }, { "visibleChange": "visibleChange"; }, never, ["*"], true, never>;
 }
 
 interface IModalAction {