@frame-ui-ng/components 0.3.0-beta.0 → 0.4.1

package/fesm2022/frame-ui-ng-components-modal.mjs

@@ -5,6 +5,7 @@ import { NgComponentOutlet } from '@angular/common';
 import { FrButton, FrButtonLabel } from '@frame-ui-ng/components/button';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
+/** Content slot for modal. */
 class FrModalContent {
     templateRef = inject((TemplateRef));
     ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
@@ -57,6 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], closeOnDestroy: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnDestroy", required: false }] }], closeOnNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnNavigation", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], disableClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClose", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 
+/** Close control for modal. */
 class FrModalClose {
     dialogRef = inject(DialogRef, { optional: true });
     result = input(undefined, { ...(ngDevMode ? { debugName: "result" } : /* istanbul ignore next */ {}), alias: 'frModalClose' });
@@ -76,24 +78,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { result: [{ type: i0.Input, args: [{ isSignal: true, alias: "frModalClose", required: false }] }] } });
+/** Panel slot for modal. */
 class FrModalPanel {
     scrollable = input(false, { ...(ngDevMode ? { debugName: "scrollable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     showCloseButton = input(true, { ...(ngDevMode ? { debugName: "showCloseButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     stickyFooter = input(false, { ...(ngDevMode ? { debugName: "stickyFooter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrModalPanel, isStandalone: true, selector: "[frModalPanel], frame-modal-panel", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stickyFooter: { classPropertyName: "stickyFooter", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-scrollable": "scrollable() ? \"\" : null", "attr.data-sticky-footer": "stickyFooter() ? \"\" : null", "attr.data-size": "size()" }, classAttribute: "frame-modal__panel" }, ngImport: i0, template: `
-    <ng-content />
-    @if (showCloseButton()) {
-      <button
-        class="frame-modal__close"
-        frModalClose
-        type="button"
-        aria-label="Close dialog"
-      >
-        <span aria-hidden="true">×</span>
-      </button>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrModalPanel, isStandalone: true, selector: "[frModalPanel], frame-modal-panel", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stickyFooter: { classPropertyName: "stickyFooter", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-scrollable": "scrollable() ? \"\" : null", "attr.data-sticky-footer": "stickyFooter() ? \"\" : null", "attr.data-size": "size()" }, classAttribute: "frame-modal__panel" }, ngImport: i0, template: `
+    <ng-content />
+    @if (showCloseButton()) {
+      <button
+        class="frame-modal__close"
+        frModalClose
+        type="button"
+        aria-label="Close dialog"
+      >
+        <span aria-hidden="true">×</span>
+      </button>
+    }
   `, isInline: true, dependencies: [{ kind: "directive", type: FrModalClose, selector: "[frModalClose]", inputs: ["frModalClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalPanel, decorators: [{
@@ -106,22 +109,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-sticky-footer]': 'stickyFooter() ? "" : null',
                         '[attr.data-size]': 'size()',
                     },
-                    template: `
-    <ng-content />
-    @if (showCloseButton()) {
-      <button
-        class="frame-modal__close"
-        frModalClose
-        type="button"
-        aria-label="Close dialog"
-      >
-        <span aria-hidden="true">×</span>
-      </button>
-    }
+                    template: `
+    <ng-content />
+    @if (showCloseButton()) {
+      <button
+        class="frame-modal__close"
+        frModalClose
+        type="button"
+        aria-label="Close dialog"
+      >
+        <span aria-hidden="true">×</span>
+      </button>
+    }
   `,
                     imports: [FrModalClose],
                 }]
         }], propDecorators: { scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stickyFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFooter", required: false }] }] } });
+/** Header slot for modal. */
 class FrModalHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrModalHeader, isStandalone: true, selector: "[frModalHeader], frame-modal-header", host: { classAttribute: "frame-modal__header" }, ngImport: i0 });
@@ -135,6 +139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Body slot for modal. */
 class FrModalBody {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrModalBody, isStandalone: true, selector: "[frModalBody], frame-modal-body", host: { classAttribute: "frame-modal__body" }, ngImport: i0 });
@@ -148,6 +153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Footer slot for modal. */
 class FrModalFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrModalFooter, isStandalone: true, selector: "[frModalFooter], frame-modal-footer", host: { classAttribute: "frame-modal__footer" }, ngImport: i0 });
@@ -161,6 +167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Title slot for modal. */
 class FrModalTitle {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrModalTitle, isStandalone: true, selector: "[frModalTitle], frame-modal-title", host: { classAttribute: "frame-modal__title" }, ngImport: i0 });
@@ -174,6 +181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Description slot for modal. */
 class FrModalDescription {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrModalDescription, isStandalone: true, selector: "[frModalDescription], frame-modal-description", host: { classAttribute: "frame-modal__description" }, ngImport: i0 });
@@ -188,8 +196,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Reference handle for an opened modal. */
+class FrModalRef extends DialogRef {
+}
+
 const FR_MODAL_DATA = DIALOG_DATA;
+const FR_MODAL_REF = FrModalRef;
 
+/** Default shell for modal content, title, and footer actions. */
 class FrModalShell {
     dialogRef = inject((DialogRef));
     injector = inject(Injector);
@@ -209,51 +223,51 @@ class FrModalShell {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrModalShell, isStandalone: true, selector: "frame-modal-shell", ngImport: i0, template: `
-    <div
-      frModalPanel
-      [size]="options.size ?? 'md'"
-      [showCloseButton]="options.showCloseButton ?? true"
-      [scrollable]="options.scrollable ?? false"
-      [stickyFooter]="options.stickyFooter ?? false"
-    >
-      @if (options.title || options.description) {
-        <div frModalHeader>
-          @if (options.title) {
-            <h2 frModalTitle>{{ options.title }}</h2>
-          }
-
-          @if (options.description) {
-            <p frModalDescription>{{ options.description }}</p>
-          }
-        </div>
-      }
-
-      <div frModalBody>
-        <ng-container
-          [ngComponentOutlet]="options.bodyComponent"
-          [ngComponentOutletInputs]="options.bodyInputs ?? {}"
-          [ngComponentOutletInjector]="bodyInjector"
-        />
-      </div>
-
-      @if (options.footerActions?.length) {
-        <div frModalFooter>
-          @for (action of options.footerActions; track action.label) {
-            <button
-              frButton
-              type="button"
-              [appearance]="action.appearance ?? 'primary'"
-              [disabled]="action.disabled ?? false"
-              [attr.aria-label]="action.ariaLabel ?? null"
-              (click)="handleAction(action)"
-            >
-              <span frButtonLabel>{{ action.label }}</span>
-            </button>
-          }
-        </div>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrModalShell, isStandalone: true, selector: "frame-modal-shell", ngImport: i0, template: `
+    <div
+      frModalPanel
+      [size]="options.size ?? 'md'"
+      [showCloseButton]="options.showCloseButton ?? true"
+      [scrollable]="options.scrollable ?? false"
+      [stickyFooter]="options.stickyFooter ?? false"
+    >
+      @if (options.title || options.description) {
+        <div frModalHeader>
+          @if (options.title) {
+            <h2 frModalTitle>{{ options.title }}</h2>
+          }
+
+          @if (options.description) {
+            <p frModalDescription>{{ options.description }}</p>
+          }
+        </div>
+      }
+
+      <div frModalBody>
+        <ng-container
+          [ngComponentOutlet]="options.bodyComponent"
+          [ngComponentOutletInputs]="options.bodyInputs ?? {}"
+          [ngComponentOutletInjector]="bodyInjector"
+        />
+      </div>
+
+      @if (options.footerActions?.length) {
+        <div frModalFooter>
+          @for (action of options.footerActions; track action.label) {
+            <button
+              frButton
+              type="button"
+              [appearance]="action.appearance ?? 'primary'"
+              [disabled]="action.disabled ?? false"
+              [attr.aria-label]="action.ariaLabel ?? null"
+              (click)="handleAction(action)"
+            >
+              <span frButtonLabel>{{ action.label }}</span>
+            </button>
+          }
+        </div>
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: FrButton, selector: "a[frButton], button[frButton]", inputs: ["appearance", "disabled", "loading", "loadingDisplay", "radius", "size"] }, { kind: "directive", type: FrButtonLabel, selector: "[frButtonLabel]" }, { kind: "directive", type: FrModalBody, selector: "[frModalBody], frame-modal-body" }, { kind: "directive", type: FrModalDescription, selector: "[frModalDescription], frame-modal-description" }, { kind: "directive", type: FrModalFooter, selector: "[frModalFooter], frame-modal-footer" }, { kind: "directive", type: FrModalHeader, selector: "[frModalHeader], frame-modal-header" }, { kind: "component", type: FrModalPanel, selector: "[frModalPanel], frame-modal-panel", inputs: ["scrollable", "showCloseButton", "size", "stickyFooter"] }, { kind: "directive", type: FrModalTitle, selector: "[frModalTitle], frame-modal-title" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalShell, decorators: [{
@@ -271,79 +285,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         FrModalTitle,
                         NgComponentOutlet,
                     ],
-                    template: `
-    <div
-      frModalPanel
-      [size]="options.size ?? 'md'"
-      [showCloseButton]="options.showCloseButton ?? true"
-      [scrollable]="options.scrollable ?? false"
-      [stickyFooter]="options.stickyFooter ?? false"
-    >
-      @if (options.title || options.description) {
-        <div frModalHeader>
-          @if (options.title) {
-            <h2 frModalTitle>{{ options.title }}</h2>
-          }
-
-          @if (options.description) {
-            <p frModalDescription>{{ options.description }}</p>
-          }
-        </div>
-      }
-
-      <div frModalBody>
-        <ng-container
-          [ngComponentOutlet]="options.bodyComponent"
-          [ngComponentOutletInputs]="options.bodyInputs ?? {}"
-          [ngComponentOutletInjector]="bodyInjector"
-        />
-      </div>
-
-      @if (options.footerActions?.length) {
-        <div frModalFooter>
-          @for (action of options.footerActions; track action.label) {
-            <button
-              frButton
-              type="button"
-              [appearance]="action.appearance ?? 'primary'"
-              [disabled]="action.disabled ?? false"
-              [attr.aria-label]="action.ariaLabel ?? null"
-              (click)="handleAction(action)"
-            >
-              <span frButtonLabel>{{ action.label }}</span>
-            </button>
-          }
-        </div>
-      }
-    </div>
+                    template: `
+    <div
+      frModalPanel
+      [size]="options.size ?? 'md'"
+      [showCloseButton]="options.showCloseButton ?? true"
+      [scrollable]="options.scrollable ?? false"
+      [stickyFooter]="options.stickyFooter ?? false"
+    >
+      @if (options.title || options.description) {
+        <div frModalHeader>
+          @if (options.title) {
+            <h2 frModalTitle>{{ options.title }}</h2>
+          }
+
+          @if (options.description) {
+            <p frModalDescription>{{ options.description }}</p>
+          }
+        </div>
+      }
+
+      <div frModalBody>
+        <ng-container
+          [ngComponentOutlet]="options.bodyComponent"
+          [ngComponentOutletInputs]="options.bodyInputs ?? {}"
+          [ngComponentOutletInjector]="bodyInjector"
+        />
+      </div>
+
+      @if (options.footerActions?.length) {
+        <div frModalFooter>
+          @for (action of options.footerActions; track action.label) {
+            <button
+              frButton
+              type="button"
+              [appearance]="action.appearance ?? 'primary'"
+              [disabled]="action.disabled ?? false"
+              [attr.aria-label]="action.ariaLabel ?? null"
+              (click)="handleAction(action)"
+            >
+              <span frButtonLabel>{{ action.label }}</span>
+            </button>
+          }
+        </div>
+      }
+    </div>
   `,
                 }]
         }] });
 
 const DEFAULT_PANEL_CLASS = 'frame-modal__overlay-pane';
 const DEFAULT_BACKDROP_CLASS = 'frame-modal__backdrop';
+/** Service for opening modal dialogs. */
 class FrModalService {
     dialog = inject(Dialog);
-    open(content, config = {}) {
-        if (isComponentType(content) && hasShellOptions(config)) {
+    open(content, dataOrConfig, config) {
+        const resolvedConfig = resolveOpenConfig(content, dataOrConfig, config);
+        if (isComponentType(content) && hasShellOptions(resolvedConfig)) {
             const shellConfig = {
-                ...withoutShellOptions(config),
+                ...withoutShellOptions(resolvedConfig),
                 data: {
                     bodyComponent: content,
-                    bodyData: config.bodyData ?? config.data,
-                    bodyInputs: config.bodyInputs,
-                    description: config.description,
-                    footerActions: config.footerActions,
-                    scrollable: config.scrollable,
-                    showCloseButton: config.showCloseButton,
-                    size: config.size,
-                    stickyFooter: config.stickyFooter,
-                    title: config.title,
+                    bodyData: resolvedConfig.bodyData ?? resolvedConfig.data,
+                    bodyInputs: resolvedConfig.inputs ?? resolvedConfig.bodyInputs,
+                    description: resolvedConfig.description,
+                    footerActions: resolvedConfig.footerActions,
+                    scrollable: resolvedConfig.scrollable,
+                    showCloseButton: resolvedConfig.showCloseButton,
+                    size: resolvedConfig.size,
+                    stickyFooter: resolvedConfig.stickyFooter,
+                    title: resolvedConfig.title,
                 },
             };
             return this.dialog.open(FrModalShell, this.withDefaultClasses(shellConfig));
         }
-        return this.dialog.open(content, this.withDefaultClasses(config));
+        return this.dialog.open(content, this.withDefaultClasses(resolvedConfig));
     }
     closeAll() {
         this.dialog.closeAll();
@@ -357,6 +373,7 @@ class FrModalService {
             ...config,
             panelClass: mergeClassList(config.panelClass, DEFAULT_PANEL_CLASS),
             backdropClass: mergeClassList(config.backdropClass, DEFAULT_BACKDROP_CLASS),
+            providers: withModalRefProvider(config.providers),
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -375,6 +392,7 @@ function hasShellOptions(config) {
         config.bodyInputs,
         config.description,
         config.footerActions,
+        config.inputs,
         config.scrollable,
         config.showCloseButton,
         config.size,
@@ -383,9 +401,72 @@ function hasShellOptions(config) {
     ].some((value) => value !== undefined);
 }
 function withoutShellOptions(config) {
-    const { bodyData: _bodyData, bodyInputs: _bodyInputs, description: _description, footerActions: _footerActions, scrollable: _scrollable, showCloseButton: _showCloseButton, size: _size, stickyFooter: _stickyFooter, title: _title, ...dialogConfig } = config;
+    const { bodyData: _bodyData, bodyInputs: _bodyInputs, description: _description, footerActions: _footerActions, inputs: _inputs, scrollable: _scrollable, showCloseButton: _showCloseButton, size: _size, stickyFooter: _stickyFooter, title: _title, ...dialogConfig } = config;
     return dialogConfig;
 }
+function resolveOpenConfig(content, dataOrConfig, config) {
+    if (!isComponentType(content)) {
+        return (dataOrConfig ?? {});
+    }
+    // Component opens support the shorthand `open(Component, data, config)` shape.
+    if (config) {
+        return {
+            ...config,
+            data: dataOrConfig,
+        };
+    }
+    if (dataOrConfig === undefined) {
+        return {};
+    }
+    // Without a third argument, distinguish raw data from a full modal config by known keys.
+    if (isModalConfig(dataOrConfig)) {
+        return dataOrConfig;
+    }
+    return {
+        data: dataOrConfig,
+    };
+}
+const CONFIG_KEYS = new Set([
+    'ariaDescribedBy',
+    'ariaLabel',
+    'ariaLabelledBy',
+    'ariaModal',
+    'autoFocus',
+    'backdropClass',
+    'bodyData',
+    'bodyInputs',
+    'closeOnDestroy',
+    'closeOnNavigation',
+    'data',
+    'description',
+    'direction',
+    'disableClose',
+    'footerActions',
+    'height',
+    'inputs',
+    'maxHeight',
+    'maxWidth',
+    'minHeight',
+    'minWidth',
+    'panelClass',
+    'positionStrategy',
+    'providers',
+    'restoreFocus',
+    'role',
+    'scrollable',
+    'showCloseButton',
+    'size',
+    'stickyFooter',
+    'title',
+    'viewContainerRef',
+    'width',
+]);
+function isModalConfig(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        return false;
+    }
+    return Object.keys(value).some((key) => CONFIG_KEYS.has(key));
+}
 function mergeClassList(classList, defaultClass) {
     const classes = Array.isArray(classList)
         ? classList
@@ -394,7 +475,18 @@ function mergeClassList(classList, defaultClass) {
             : [];
     return Array.from(new Set([defaultClass, ...classes].filter(Boolean)));
 }
+function withModalRefProvider(providers) {
+    const modalRefProvider = { provide: FrModalRef, useExisting: DialogRef };
+    if (typeof providers === 'function') {
+        return (dialogRef, config, container) => [
+            modalRefProvider,
+            ...providers(dialogRef, config, container),
+        ];
+    }
+    return [modalRefProvider, ...(providers ?? [])];
+}
 
+/** Trigger control for modal. */
 class FrModalTrigger {
     static CUSTOM_PROPERTY_PREFIX = '--frame-modal-';
     destroyRef = inject(DestroyRef);
@@ -521,5 +613,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FR_MODAL_DATA, FrModalBody, FrModalClose, FrModalContent, FrModalDescription, FrModalFooter, FrModalHeader, FrModalModule, FrModalPanel, FrModalService, FrModalShell, FrModalTitle, FrModalTrigger };
+export { FR_MODAL_DATA, FR_MODAL_REF, FrModalBody, FrModalClose, FrModalContent, FrModalDescription, FrModalFooter, FrModalHeader, FrModalModule, FrModalPanel, FrModalRef, FrModalService, FrModalShell, FrModalTitle, FrModalTrigger };
 //# sourceMappingURL=frame-ui-ng-components-modal.mjs.map