@cute-widgets/base 20.0.4 → 21.0.0

package/fesm2022/cute-widgets-base-dialog.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, inject, InjectionToken, Injectable, Optional, booleanAttribute, HostListener, ViewChild, NgModule } from '@angular/core';
+import { ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, inject, InjectionToken, Injectable, ElementRef, Input, Directive, booleanAttribute, HostListener, ViewChild, NgModule } from '@angular/core';
 import { CuteButton } from '@cute-widgets/base/button';
-import { CdkDrag } from '@angular/cdk/drag-drop';
-import { Subject, merge, defer } from 'rxjs';
+import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { ReplaySubject, merge, Subject, defer } from 'rxjs';
 import { filter, take, startWith } from 'rxjs/operators';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
 import { OverlayRef, Overlay } from '@angular/cdk/overlay';
@@ -16,68 +17,6 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CommonModule } from '@angular/common';
 
-/**
- * @license Apache-2.0
- *
- * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
- *
- * You may not use this file except in compliance with the License
- * that can be found at http://www.apache.org/licenses/LICENSE-2.0
- */
-class CuteDialogBody {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteDialogBody, isStandalone: true, selector: "cute-dialog-body, [cute-dialog-body], [cuteDialogBody],\n             cute-dialog-content, [cute-dialog-content], [cuteDialogContent]\n  ", host: { classAttribute: "cute-dialog-body modal-body" }, exportAs: ["cuteDialogBody"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogBody, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `cute-dialog-body, [cute-dialog-body], [cuteDialogBody],
-             cute-dialog-content, [cute-dialog-content], [cuteDialogContent]
-  `,
-                    exportAs: 'cuteDialogBody',
-                    host: {
-                        'class': 'cute-dialog-body modal-body'
-                    },
-                    standalone: true,
-                }]
-        }] });
-
-/**
- * @license Apache-2.0
- *
- * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
- *
- * You may not use this file except in compliance with the License
- * that can be found at http://www.apache.org/licenses/LICENSE-2.0
- *
- * This code is a modification of the `@angular/material` original
- * code licensed under MIT-style License (https://angular.dev/license).
- */
-class CuteDialogFooter {
-    constructor() {
-        /** Horizontal alignment of the footer's content */
-        this.align = 'start';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteDialogFooter, isStandalone: true, selector: "cute-dialog-footer, [cute-dialog-footer], [cuteDialogFooter],\n             cute-dialog-actions, [cute-dialog-actions], [cuteDialogActions]\n  ", inputs: { align: "align" }, host: { properties: { "style.justify-content": "align" }, classAttribute: "cute-dialog-footer cute-dialog-actions modal-footer" }, exportAs: ["cuteDialogFooter", "cuteDialogActions"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogFooter, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `cute-dialog-footer, [cute-dialog-footer], [cuteDialogFooter],
-             cute-dialog-actions, [cute-dialog-actions], [cuteDialogActions]
-  `,
-                    exportAs: 'cuteDialogFooter, cuteDialogActions',
-                    host: {
-                        'class': 'cute-dialog-footer cute-dialog-actions modal-footer',
-                        '[style.justify-content]': 'align',
-                    },
-                    standalone: true,
-                }]
-        }], propDecorators: { align: [{
-                type: Input
-            }] } });
-
 /**
  * @license Apache-2.0
  *
@@ -109,9 +48,9 @@ class CuteDialogRef {
          */
         this.componentRef = null;
         /** Subject for notifying the user that the dialog has finished opening. */
-        this._afterOpened = new Subject();
+        this._afterOpened = new ReplaySubject(1);
         /** Subject for notifying the user that the dialog has started closing. */
-        this._beforeClosed = new Subject();
+        this._beforeClosed = new ReplaySubject(1);
         /** Current state of the dialog. */
         this._state = CuteDialogState.OPEN;
         this.disableClose = _config.disableClose;
@@ -289,10 +228,10 @@ class CuteDialogConfig {
         this.width = '';
         /** Height of the dialog. */
         this.height = '';
-        /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */
-        this.maxWidth = '80vw';
+        /** Max-width of the dialog. If a number is provided, assumes pixel units. */
+        this.maxWidth = '560px';
         /** Max-height of the dialog. If a number is provided, assumes pixel units. */
-        this.maxHeight = '95vh';
+        this.maxHeight = '85vh';
         /** Whether the dialog can be dragged at runtime and optionally restrict dragging to a specific axis */
         this.draggable = false;
         /** Data being injected into the child component. */
@@ -341,10 +280,10 @@ class CuteDialogStage extends CuteLayoutControl {
     generateId() {
         return `cute-dialog-stage-${uniqueId$1++}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogStage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CuteDialogStage, isStandalone: true, selector: "cute-dialog-stage", host: { properties: { "attr.id": "id || null" }, classAttribute: "cute-dialog-stage modal-dialog modal-dialog-scrollable" }, usesInheritance: true, ngImport: i0, template: "<div class=\"modal-content\">\r\n  <ng-content select=\"cute-dialog-header,\r\n                            [cute-dialog-header],\r\n                            [cuteDialogHeader]\"></ng-content>\r\n  <ng-content select=\"cute-dialog-body,\r\n                            [cute-dialog-body],\r\n                            [cuteDialogBody]\"></ng-content>\r\n  <ng-content></ng-content>\r\n  <ng-content select=\"cute-dialog-footer,\r\n                            [cute-dialog-footer],\r\n                            [cuteDialogFooter]\"></ng-content>\r\n</div>\r\n", styles: [".modal-dialog{display:block;position:static;width:100%;height:100%;min-width:300px;margin:0}.modal-content{--bs-border-color-translucent: none;width:100%;height:100%}.fullscreen-dialog{--bs-border-radius-lg: 0;transform:none!important;width:100vw;max-width:none;height:100%;min-width:100%;min-height:100%}.cdk-global-scrollblock:has(.fullscreen-dialog){overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogStage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: CuteDialogStage, isStandalone: true, selector: "cute-dialog-stage", host: { properties: { "attr.id": "id || null" }, classAttribute: "cute-dialog-stage modal-dialog modal-dialog-scrollable" }, usesInheritance: true, ngImport: i0, template: "<div class=\"modal-content\">\r\n  <ng-content select=\"cute-dialog-header,\r\n                            [cute-dialog-header],\r\n                            [cuteDialogHeader]\"></ng-content>\r\n  <ng-content select=\"cute-dialog-body,\r\n                            [cute-dialog-body],\r\n                            [cuteDialogBody]\"></ng-content>\r\n  <ng-content></ng-content>\r\n  <ng-content select=\"cute-dialog-footer,\r\n                            [cute-dialog-footer],\r\n                            [cuteDialogFooter]\"></ng-content>\r\n</div>\r\n", styles: [".modal-dialog{display:block;position:static;width:100%;height:100%;min-width:300px;margin:0}.modal-content{--bs-border-color-translucent: none;width:100%;height:100%}.fullscreen-dialog{--bs-border-radius-lg: 0;transform:none!important;width:100vw;max-width:none;height:100%;min-width:100%;min-height:100%}.cdk-global-scrollblock:has(.fullscreen-dialog){overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogStage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogStage, decorators: [{
             type: Component,
             args: [{ selector: 'cute-dialog-stage', host: {
                         'class': 'cute-dialog-stage modal-dialog modal-dialog-scrollable',
@@ -420,7 +359,7 @@ class CuteDialogContainer extends CdkDialogContainer {
             const bpName = bsBreakpoints.getLabel(dialogConfig.fullscreenStrategy.substring(BREAKPOINT_KEY.length));
             breakpointObserver
                 .observe([
-                bsBreakpoints.getQuery(bpName + 'AndDown') ?? "",
+                bsBreakpoints.getMediaQuery(bpName + 'AndDown') ?? "",
             ])
                 .pipe(takeUntilDestroyed())
                 .subscribe(result => {
@@ -571,10 +510,10 @@ class CuteDialogContainer extends CdkDialogContainer {
         ref.location.nativeElement.classList.add('cute-dialog-component-host');
         return ref;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CuteDialogContainer, isStandalone: true, selector: "cute-dialog-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.aria-modal": "_config.ariaModal", "id": "_config.id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledByQueue[0]", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null", "class._cute-animation-noopable": "!_animationsEnabled", "class.cute-dialog-container-with-actions": "_actionSectionCount > 0" }, classAttribute: "cute-dialog-container cute-dialog modal fade" }, usesInheritance: true, ngImport: i0, template: "  <cute-dialog-stage>\r\n    <ng-template cdkPortalOutlet />\r\n  </cute-dialog-stage>\r\n", styles: [".cute-dialog-container{--bs-modal-width: 100%;display:block;position:static;width:100%;height:auto;min-height:inherit;max-height:inherit;min-width:inherit;max-width:inherit}.cute-dialog-component-host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: CuteDialogStage, selector: "cute-dialog-stage" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: CuteDialogContainer, isStandalone: true, selector: "cute-dialog-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.aria-modal": "_config.ariaModal", "id": "_config.id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledByQueue[0]", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null", "class._cute-animation-noopable": "!_animationsEnabled", "class.cute-dialog-container-with-actions": "_actionSectionCount > 0" }, classAttribute: "cute-dialog-container cute-dialog modal fade" }, usesInheritance: true, ngImport: i0, template: "  <cute-dialog-stage>\r\n    <ng-template cdkPortalOutlet />\r\n  </cute-dialog-stage>\r\n", styles: [".cute-dialog-container{--bs-modal-width: 100%;display:block;position:static;width:100%;height:auto;min-height:inherit;max-height:inherit;min-width:inherit;max-width:inherit}.cute-dialog-component-host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: CuteDialogStage, selector: "cute-dialog-stage" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogContainer, decorators: [{
             type: Component,
             args: [{ selector: 'cute-dialog-container', host: {
                         'class': 'cute-dialog-container cute-dialog modal fade',
@@ -686,6 +625,8 @@ class CuteDialog {
             positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
             // Disable closing since we need to sync it up to the animation ourselves.
             disableClose: true,
+            // Closing is tied to our animation so the close predicate has to be implemented separately.
+            closePredicate: undefined,
             // Disable closing on destroying, because this service cleans up its open dialogs as well.
             // We want to do the cleanup here, rather than the CDK service, because the CDK destroys
             // the dialogs immediately whereas we want it to wait for the animations to finish.
@@ -760,10 +701,10 @@ class CuteDialog {
             dialogs[i].close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialog, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialog, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialog, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -783,12 +724,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Button that will close the current dialog.
  */
 class CuteDialogClose {
-    constructor(
-    // The dialog title directive is always used in combination with a `CuteDialogRef`.
-    dialogRef, _elementRef, _dialog) {
-        this.dialogRef = dialogRef;
-        this._elementRef = _elementRef;
-        this._dialog = _dialog;
+    constructor() {
+        this.dialogRef = inject(CuteDialogRef, { optional: true });
+        this._elementRef = inject(ElementRef);
+        this._dialog = inject(CuteDialog);
         /** Default to "button" to prevent accidental form submits. */
         this.type = 'button';
         /** Dialog close input. */
@@ -818,10 +757,10 @@ class CuteDialogClose {
         // the FocusMonitor won't detect any origin change, and will always output `program`.
         _closeDialogVia(this.dialogRef, event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogClose, deps: [{ token: CuteDialogRef, optional: true }, { token: i0.ElementRef }, { token: CuteDialog }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteDialogClose, isStandalone: true, selector: "[cute-dialog-close], [cuteDialogClose]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], type: "type", dialogResult: ["cute-dialog-close", "dialogResult"], _cuteDialogClose: ["cuteDialogClose", "_cuteDialogClose"] }, host: { listeners: { "click": "_onButtonClick($event)" }, properties: { "attr.aria-label": "ariaLabel || null", "attr.type": "type" } }, exportAs: ["cuteDialogClose"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteDialogClose, isStandalone: true, selector: "[cute-dialog-close], [cuteDialogClose]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], type: "type", dialogResult: ["cute-dialog-close", "dialogResult"], _cuteDialogClose: ["cuteDialogClose", "_cuteDialogClose"] }, host: { listeners: { "click": "_onButtonClick($event)" }, properties: { "attr.aria-label": "ariaLabel || null", "attr.type": "type" } }, exportAs: ["cuteDialogClose"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogClose, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogClose, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cute-dialog-close], [cuteDialogClose]',
@@ -833,9 +772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '[attr.type]': 'type',
                     },
                 }]
-        }], ctorParameters: () => [{ type: CuteDialogRef, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ElementRef }, { type: CuteDialog }], propDecorators: { ariaLabel: [{
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{
                 type: Input,
                 args: ['aria-label']
             }], type: [{
@@ -847,6 +784,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input,
                 args: ['cuteDialogClose']
             }] } });
+class CuteDialogLayoutSection {
+    constructor() {
+        this._dialogRef = inject(CuteDialogRef, { optional: true });
+        this._elementRef = inject(ElementRef);
+        this._dialog = inject(CuteDialog);
+    }
+    ngOnInit() {
+        if (!this._dialogRef) {
+            this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs);
+        }
+        if (this._dialogRef) {
+            Promise.resolve().then(() => {
+                this._onAdd();
+            });
+        }
+    }
+    ngOnDestroy() {
+        // Note: we null check because there are some internal
+        // tests that are mocking out `MatDialogRef` incorrectly.
+        const instance = this._dialogRef?._containerInstance;
+        if (instance) {
+            Promise.resolve().then(() => {
+                this._onRemove();
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogLayoutSection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteDialogLayoutSection, isStandalone: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogLayoutSection, decorators: [{
+            type: Directive
+        }] });
+/**
+ * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
+ */
+class CuteDialogTitle extends CuteDialogLayoutSection {
+    constructor() {
+        super();
+        this._header = inject(CuteDialogHeader, { optional: true, host: true });
+        this.id = inject(_IdGenerator).getId('cute-dialog-title-');
+    }
+    _onAdd() {
+        // Note: we null check the queue, because there are some internal
+        // tests that are mocking out `MatDialogRef` incorrectly.
+        this._dialogRef._containerInstance?._addAriaLabelledBy?.(this.id);
+    }
+    _onRemove() {
+        this._dialogRef?._containerInstance?._removeAriaLabelledBy?.(this.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteDialogTitle, isStandalone: true, selector: "[cute-dialog-title], [cuteDialogTitle]", inputs: { id: "id" }, host: { properties: { "id": "id || null", "style": "{\"pointer-events\":\"none\", \"padding\": !_header ? \"var(--bs-modal-header-padding)\" : undefined}" }, classAttribute: "cute-dialog-title modal-title user-select-none" }, exportAs: ["cuteDialogTitle"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cute-dialog-title], [cuteDialogTitle]',
+                    exportAs: 'cuteDialogTitle',
+                    host: {
+                        'class': 'cute-dialog-title modal-title user-select-none',
+                        '[id]': 'id || null',
+                        '[style]': '{"pointer-events":"none", "padding": !_header ? "var(--bs-modal-header-padding)" : undefined}',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{
+                type: Input
+            }] } });
+/**
+ * Scrollable content container of a dialog.
+ */
+class CuteDialogBody {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteDialogBody, isStandalone: true, selector: "cute-dialog-body, [cute-dialog-body], [cuteDialogBody],\n             cute-dialog-content, [cute-dialog-content], [cuteDialogContent]\n  ", host: { classAttribute: "cute-dialog-body modal-body" }, exportAs: ["cuteDialogBody"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `cute-dialog-body, [cute-dialog-body], [cuteDialogBody],
+             cute-dialog-content, [cute-dialog-content], [cuteDialogContent]
+  `,
+                    exportAs: 'cuteDialogBody',
+                    host: {
+                        'class': 'cute-dialog-body modal-body',
+                    },
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Container for the bottom action buttons in a dialog.
+ * Stays fixed to the bottom when scrolling.
+ */
+class CuteDialogFooter extends CuteDialogLayoutSection {
+    constructor() {
+        super(...arguments);
+        /** Horizontal alignment of the footer's content */
+        this.align = 'end';
+    }
+    _onAdd() {
+        this._dialogRef._containerInstance?._updateActionSectionCount?.(1);
+    }
+    _onRemove() {
+        this._dialogRef._containerInstance?._updateActionSectionCount?.(-1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogFooter, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteDialogFooter, isStandalone: true, selector: "cute-dialog-footer, [cute-dialog-footer], [cuteDialogFooter],\n             cute-dialog-actions, [cute-dialog-actions], [cuteDialogActions]\n  ", inputs: { align: "align" }, host: { properties: { "style.justify-content": "align" }, classAttribute: "cute-dialog-footer cute-dialog-actions modal-footer" }, exportAs: ["cuteDialogFooter", "cuteDialogActions"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `cute-dialog-footer, [cute-dialog-footer], [cuteDialogFooter],
+             cute-dialog-actions, [cute-dialog-actions], [cuteDialogActions]
+  `,
+                    exportAs: 'cuteDialogFooter, cuteDialogActions',
+                    host: {
+                        'class': 'cute-dialog-footer cute-dialog-actions modal-footer',
+                        '[style.justify-content]': 'align',
+                    },
+                    standalone: true,
+                }]
+        }], propDecorators: { align: [{
+                type: Input
+            }] } });
 /**
  * Finds the closest CuteDialogRef to an element by looking at the DOM.
  * @param element Element relative to which to look for a dialog.
@@ -906,24 +964,26 @@ class CuteDialogHeader {
             this.cdkDragEl.lockAxis = (this.config.draggable.charAt(0));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogHeader, deps: [{ token: CuteDialogContainer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.15", type: CuteDialogHeader, isStandalone: true, selector: "cute-dialog-header", inputs: { draggable: ["draggable", "draggable", booleanAttribute] }, host: { listeners: { "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)" }, classAttribute: "cute-dialog-header" }, viewQueries: [{ propertyName: "cdkDragEl", first: true, predicate: ["header"], descendants: true, read: CdkDrag, static: true }], exportAs: ["cuteDialogHeader"], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogHeader, deps: [{ token: CuteDialogContainer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.0", type: CuteDialogHeader, isStandalone: true, selector: "cute-dialog-header", inputs: { draggable: ["draggable", "draggable", booleanAttribute] }, host: { listeners: { "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)" }, classAttribute: "cute-dialog-header" }, viewQueries: [{ propertyName: "cdkDragEl", first: true, predicate: ["header"], descendants: true, read: CdkDrag, static: true }], exportAs: ["cuteDialogHeader"], ngImport: i0, template: `
       <div #header
            class="modal-header"
            role="heading"
            cdkDrag
+           cdkDragHandle
            cdkDragRootElement=".cdk-overlay-pane"
            [cdkDragDisabled]="!draggable || container.isFullScreenDialog()"
            [style.cursor]="getCursorStyle()"
       >
           <ng-content select="[cute-dialog-title], [cuteDialogTitle]"></ng-content>
           <ng-content></ng-content>
-          <button cuteButton="close-button" tabindex="-1" color="light" magnitude="smaller" cute-dialog-close></button>
+          <button cuteButton="close-button"
+                  magnitude="small"
+                  cute-dialog-close></button>
       </div>
-<!--      cdkDragHandle-->
-  `, isInline: true, dependencies: [{ kind: "component", type: CuteButton, selector: "button[cuteButton],             button[cute-button],             a[cuteButton],             a[cute-button],  ", exportAs: ["cuteButton"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CuteDialogClose, selector: "[cute-dialog-close], [cuteDialogClose]", inputs: ["aria-label", "type", "cute-dialog-close", "cuteDialogClose"], exportAs: ["cuteDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: CuteButton, selector: "button[cuteButton],             button[cute-button],             a[cuteButton],             a[cute-button],  ", exportAs: ["cuteButton"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CuteDialogClose, selector: "[cute-dialog-close], [cuteDialogClose]", inputs: ["aria-label", "type", "cute-dialog-close", "cuteDialogClose"], exportAs: ["cuteDialogClose"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'cute-dialog-header',
@@ -933,16 +993,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
            class="modal-header"
            role="heading"
            cdkDrag
+           cdkDragHandle
            cdkDragRootElement=".cdk-overlay-pane"
            [cdkDragDisabled]="!draggable || container.isFullScreenDialog()"
            [style.cursor]="getCursorStyle()"
       >
           <ng-content select="[cute-dialog-title], [cuteDialogTitle]"></ng-content>
           <ng-content></ng-content>
-          <button cuteButton="close-button" tabindex="-1" color="light" magnitude="smaller" cute-dialog-close></button>
+          <button cuteButton="close-button"
+                  magnitude="small"
+                  cute-dialog-close></button>
       </div>
-<!--      cdkDragHandle-->
-  `,
+    `,
                     host: {
                         'class': 'cute-dialog-header',
                     },
@@ -951,7 +1013,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     imports: [
                         CuteButton,
                         CdkDrag,
-                        CuteDialogClose
+                        CuteDialogClose,
+                        CdkDragHandle
                     ]
                 }]
         }], ctorParameters: () => [{ type: CuteDialogContainer }], propDecorators: { cdkDragEl: [{
@@ -968,34 +1031,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: ["mouseup", ["$event"]]
             }] } });
 
-/**
- * @license Apache-2.0
- *
- * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
- *
- * You may not use this file except in compliance with the License
- * that can be found at http://www.apache.org/licenses/LICENSE-2.0
- */
-class CuteDialogTitle {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteDialogTitle, isStandalone: true, selector: "[cute-dialog-title], [cuteDialogTitle]", inputs: { id: "id" }, host: { properties: { "id": "id || null", "style.pointer-events": "\"none\"" }, classAttribute: "cute-dialog-title modal-title user-select-none" }, exportAs: ["cuteDialogTitle"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogTitle, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cute-dialog-title], [cuteDialogTitle]',
-                    exportAs: 'cuteDialogTitle',
-                    host: {
-                        'class': 'cute-dialog-title modal-title user-select-none',
-                        '[id]': 'id || null',
-                        '[style.pointer-events]': '"none"',
-                    },
-                    standalone: true,
-                }]
-        }], propDecorators: { id: [{
-                type: Input
-            }] } });
-
 /**
  * @license Apache-2.0
  *
@@ -1013,8 +1048,8 @@ const TYPES = [
     CuteDialogContainer,
 ];
 class CuteDialogModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogModule, imports: [CommonModule, CuteDialogBody,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogModule, imports: [CommonModule, CuteDialogBody,
             CuteDialogClose,
             CuteDialogFooter,
             CuteDialogHeader,
@@ -1025,10 +1060,10 @@ class CuteDialogModule {
             CuteDialogHeader,
             CuteDialogTitle,
             CuteDialogContainer] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogModule, providers: [CuteDialog], imports: [CommonModule, CuteDialogHeader,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogModule, providers: [CuteDialog], imports: [CommonModule, CuteDialogHeader,
             CuteDialogContainer] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ...TYPES],
@@ -1042,5 +1077,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CUTE_DIALOG_DATA, CUTE_DIALOG_DEFAULT_OPTIONS, CUTE_DIALOG_SCROLL_STRATEGY, CuteDialog, CuteDialogBody, CuteDialogClose, CuteDialogConfig, CuteDialogContainer, CuteDialogFooter, CuteDialogHeader, CuteDialogModule, CuteDialogRef, CuteDialogState, CuteDialogTitle, _closeDialogVia };
+export { CUTE_DIALOG_DATA, CUTE_DIALOG_DEFAULT_OPTIONS, CUTE_DIALOG_SCROLL_STRATEGY, CuteDialog, CuteDialogBody, CuteDialogClose, CuteDialogConfig, CuteDialogContainer, CuteDialogFooter, CuteDialogHeader, CuteDialogLayoutSection, CuteDialogModule, CuteDialogRef, CuteDialogState, CuteDialogTitle, _closeDialogVia };
 //# sourceMappingURL=cute-widgets-base-dialog.mjs.map