@cute-widgets/base 20.0.1

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

@@ -0,0 +1,1046 @@
+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 { CuteButton } from '@cute-widgets/base/button';
+import { CdkDrag } from '@angular/cdk/drag-drop';
+import { Subject, merge, defer } from 'rxjs';
+import { filter, take, startWith } from 'rxjs/operators';
+import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
+import { OverlayRef, Overlay } from '@angular/cdk/overlay';
+import { CdkDialogContainer, Dialog, DialogConfig } from '@angular/cdk/dialog';
+import * as i1 from '@angular/cdk/portal';
+import { PortalModule } from '@angular/cdk/portal';
+import { CuteLayoutControl } from '@cute-widgets/base/abstract';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { _animationsDisabled, bsBreakpoints } from '@cute-widgets/base/core';
+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
+ *
+ * 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).
+ */
+var CuteDialogState;
+(function (CuteDialogState) {
+    CuteDialogState[CuteDialogState["OPEN"] = 0] = "OPEN";
+    CuteDialogState[CuteDialogState["CLOSING"] = 1] = "CLOSING";
+    CuteDialogState[CuteDialogState["CLOSED"] = 2] = "CLOSED";
+})(CuteDialogState || (CuteDialogState = {}));
+/**
+ * Reference to a dialog opened via the CuteDialog service.
+ */
+class CuteDialogRef {
+    constructor(_ref, _config, _containerInstance) {
+        this._ref = _ref;
+        this._config = _config;
+        this._containerInstance = _containerInstance;
+        /**
+         * `ComponentRef` of the component opened into the dialog. Will be
+         * null when the dialog is opened using a `TemplateRef`.
+         */
+        this.componentRef = null;
+        /** Subject for notifying the user that the dialog has finished opening. */
+        this._afterOpened = new Subject();
+        /** Subject for notifying the user that the dialog has started closing. */
+        this._beforeClosed = new Subject();
+        /** Current state of the dialog. */
+        this._state = CuteDialogState.OPEN;
+        this.disableClose = _config.disableClose;
+        this.id = _ref.id;
+        // Used to target panels specifically tied to dialogs.
+        _ref.addPanelClass('cute-dialog-panel');
+        // Emit when opening animation completes
+        _containerInstance._animationStateChanged
+            .pipe(filter(event => event.state === 'opened'), take(1))
+            .subscribe(() => {
+            this._afterOpened.next();
+            this._afterOpened.complete();
+        });
+        // Dispose overlay when closing animation is complete
+        _containerInstance._animationStateChanged
+            .pipe(filter(event => event.state === 'closed'), take(1))
+            .subscribe(() => {
+            clearTimeout(this._closeFallbackTimeout);
+            this._finishDialogClose();
+        });
+        _ref.overlayRef.detachments().subscribe(() => {
+            this._beforeClosed.next(this._result);
+            this._beforeClosed.complete();
+            this._finishDialogClose();
+        });
+        merge(this.backdropClick(), this.keydownEvents().pipe(filter(event => event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)))).subscribe(event => {
+            if (!this.disableClose) {
+                event.preventDefault();
+                _closeDialogVia(this, event.type === 'keydown' ? 'keyboard' : 'mouse');
+            }
+        });
+    }
+    /**
+     * Close the dialog.
+     * @param dialogResult Optional result to return to the dialog opener.
+     */
+    close(dialogResult) {
+        const closePredicate = this._config.closePredicate;
+        if (closePredicate && !closePredicate(dialogResult, this._config, this.componentInstance)) {
+            return;
+        }
+        this._result = dialogResult;
+        // Transition the backdrop in parallel to the dialog.
+        this._containerInstance._animationStateChanged
+            .pipe(filter(event => event.state === 'closing'), take(1))
+            .subscribe(event => {
+            this._beforeClosed.next(dialogResult);
+            this._beforeClosed.complete();
+            this._ref.overlayRef.detachBackdrop();
+            // The logic that disposes of the overlay depends on the exit animation completing, however,
+            // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback
+            // timeout which will clean everything up if the animation hasn't fired within the specified
+            // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
+            // vast majority of cases the timeout will have been cleared before it has the chance to fire.
+            this._closeFallbackTimeout = setTimeout(() => this._finishDialogClose(), event.totalTime + 100);
+        });
+        this._state = CuteDialogState.CLOSING;
+        this._containerInstance._startExitAnimation();
+    }
+    /**
+     * Gets an observable notified when the dialog is finished opening.
+     */
+    afterOpened() {
+        return this._afterOpened;
+    }
+    /**
+     * Gets an observable notified when the dialog is finished closing.
+     */
+    afterClosed() {
+        return this._ref.closed;
+    }
+    /**
+     * Gets an observable notified when the dialog has started closing.
+     */
+    beforeClosed() {
+        return this._beforeClosed;
+    }
+    /**
+     * Gets an observable that emits when the overlay's backdrop has been clicked.
+     */
+    backdropClick() {
+        return this._ref.backdropClick;
+    }
+    /**
+     * Gets an observable that emits when keydown events are targeted on the overlay.
+     */
+    keydownEvents() {
+        return this._ref.keydownEvents;
+    }
+    /**
+     * Updates the dialog's position.
+     * @param position New dialog position.
+     */
+    updatePosition(position) {
+        let strategy = this._ref.config.positionStrategy;
+        if (position && (position.left || position.right)) {
+            position.left ? strategy.left(position.left) : strategy.right(position.right);
+        }
+        else {
+            strategy.centerHorizontally();
+        }
+        if (position && (position.top || position.bottom)) {
+            position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
+        }
+        else {
+            strategy.centerVertically();
+        }
+        this._ref.updatePosition();
+        return this;
+    }
+    /**
+     * Updates the dialog's width and height.
+     * @param width New width of the dialog.
+     * @param height New height of the dialog.
+     */
+    updateSize(width = '', height = '') {
+        this._ref.updateSize(width, height);
+        return this;
+    }
+    /** Add a CSS class or an array of classes to the overlay pane. */
+    addPanelClass(classes) {
+        this._ref.addPanelClass(classes);
+        return this;
+    }
+    /** Remove a CSS class or an array of classes from the overlay pane. */
+    removePanelClass(classes) {
+        this._ref.removePanelClass(classes);
+        return this;
+    }
+    /** Checks if the panel contains the specified CSS class */
+    hasPanelClass(className) {
+        return this._ref.overlayRef.overlayElement.classList.contains(className);
+    }
+    /** Gets the current state of the dialog's lifecycle. */
+    getState() {
+        return this._state;
+    }
+    /**
+     * Finishes the dialog close by updating the state of the dialog
+     * and disposing the overlay.
+     */
+    _finishDialogClose() {
+        this._state = CuteDialogState.CLOSED;
+        this._ref.close(this._result, { focusOrigin: this._closeInteractionType });
+        this.componentInstance = null;
+    }
+}
+/**
+ * Closes the dialog with the specified interaction type. This is currently not part of
+ * `CuteDialogRef` as that would conflict with custom dialog ref mocks provided in tests.
+ * More details. See: https://github.com/angular/components/pull/9257#issuecomment-651342226.
+ */
+// TODO: Move this back into `CuteDialogRef` when we provide an official mock dialog ref.
+function _closeDialogVia(ref, interactionType, result) {
+    ref._closeInteractionType = interactionType;
+    return ref.close(result);
+}
+
+/**
+ * Configuration for opening a modal dialog with the `CuteDialog` service.
+ */
+class CuteDialogConfig {
+    constructor() {
+        /** The ARIA role of the dialog element. */
+        this.role = 'dialog';
+        /** Custom class for the overlay pane. */
+        this.panelClass = '';
+        /** Whether the dialog has a backdrop. */
+        this.hasBackdrop = true;
+        /** Custom class for the backdrop. */
+        this.backdropClass = '';
+        /** Whether the user can use escape or clicking on the backdrop to close the modal. */
+        this.disableClose = false;
+        /** Width of the dialog. */
+        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-height of the dialog. If a number is provided, assumes pixel units. */
+        this.maxHeight = '95vh';
+        /** 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. */
+        this.data = null;
+        /** ID of the element that describes the dialog. */
+        this.ariaDescribedBy = null;
+        /** ID of the element that labels the dialog. */
+        this.ariaLabelledBy = null;
+        /** Aria label to assign to the dialog element. */
+        this.ariaLabel = null;
+        /** Whether this is a modal dialog. Used to set the `aria-modal` attribute. */
+        this.ariaModal = true;
+        /**
+         * Where the dialog should focus on open.
+         */
+        this.autoFocus = 'first-tabbable';
+        /**
+         * Whether the dialog should restore focus to the
+         * previously focused element, after it's closed.
+         */
+        this.restoreFocus = true;
+        /** Whether to wait for the opening animation to finish before trapping focus. */
+        this.delayFocusTrap = true;
+        /**
+         * Whether the dialog should close when the user goes backwards/forwards in history.
+         * Note that this usually doesn't include clicking on links (unless the user is using
+         * the `HashLocationStrategy`).
+         */
+        this.closeOnNavigation = 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
+ */
+let uniqueId$1 = 0;
+class CuteDialogStage extends CuteLayoutControl {
+    constructor() {
+        super();
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogStage, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-dialog-stage', host: {
+                        'class': 'cute-dialog-stage modal-dialog modal-dialog-scrollable',
+                        '[attr.id]': 'id || null',
+                    }, standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @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).
+ */
+const TRANSITION_DURATION_PROPERTY = '--cute-dialog-transition-duration';
+const FULLSCREEN_CLASS = "fullscreen-dialog";
+/** Class added when the dialog is open. */
+const OPEN_CLASS = 'show'; //'cute-dialog--open';
+/** Class added while the dialog is opening. */
+const OPENING_CLASS = 'show'; //'cute-dialog--opening';
+/** Class added while the dialog is closing. */
+const CLOSING_CLASS = 'hide'; // 'cute-dialog--closing';
+/** Duration of the opening animation in milliseconds. */
+const OPEN_ANIMATION_DURATION = 300; //150
+/** Duration of the closing animation in milliseconds. */
+const CLOSE_ANIMATION_DURATION = 300; //75
+class CuteDialogContainer extends CdkDialogContainer {
+    constructor() {
+        super();
+        /** Emits when an animation state changes. */
+        this._animationStateChanged = new EventEmitter();
+        /** Whether animations are enabled. */
+        this._animationsEnabled = !_animationsDisabled();
+        this._overlayRef = inject(OverlayRef);
+        /** Number of actions projected in the dialog. */
+        this._actionSectionCount = 0;
+        /** Host element of the dialog container component. */
+        this._hostElement = this._elementRef.nativeElement;
+        /** Duration of the dialog open animation. */
+        this._enterAnimationDuration = this._animationsEnabled
+            ? (parseCssTime(this._config.enterAnimationDuration) ?? OPEN_ANIMATION_DURATION)
+            : 0;
+        /** Duration of the dialog close animation. */
+        this._exitAnimationDuration = this._animationsEnabled
+            ? (parseCssTime(this._config.exitAnimationDuration) ?? CLOSE_ANIMATION_DURATION)
+            : 0;
+        /** Current timer for dialog animations. */
+        this._animationTimer = null;
+        /**
+         * Completes the dialog open by clearing potential animation classes, trapping
+         * focus and emitting an opened event.
+         */
+        this._finishDialogOpen = () => {
+            //this._clearAnimationClasses();
+            this._openAnimationDone(this._enterAnimationDuration);
+        };
+        /**
+         * Completes the dialog close by clearing potential animation classes, restoring
+         * focus and emitting a closed event.
+         */
+        this._finishDialogClose = () => {
+            this._clearAnimationClasses();
+            this._animationStateChanged.emit({ state: 'closed', totalTime: this._exitAnimationDuration });
+        };
+        const dialogConfig = inject(CuteDialogConfig);
+        const breakpointObserver = inject(BreakpointObserver);
+        const BREAKPOINT_KEY = "fullscreen-";
+        if (dialogConfig.fullscreenStrategy && dialogConfig.fullscreenStrategy.startsWith(BREAKPOINT_KEY)) {
+            const bpName = bsBreakpoints.getLabel(dialogConfig.fullscreenStrategy.substring(BREAKPOINT_KEY.length));
+            breakpointObserver
+                .observe([
+                bsBreakpoints[bpName + 'AndDown'],
+            ])
+                .pipe(takeUntilDestroyed())
+                .subscribe(result => {
+                //console.log(result.breakpoints);
+                if (result.matches) {
+                    this._overlayRef.addPanelClass(FULLSCREEN_CLASS);
+                }
+                else {
+                    this._overlayRef.removePanelClass(FULLSCREEN_CLASS);
+                }
+            });
+        }
+    }
+    /**
+     * Whether the Dialog box is opened to the full screen
+     */
+    isFullScreenDialog() {
+        return this._overlayRef.overlayElement.classList.contains(FULLSCREEN_CLASS);
+    }
+    _contentAttached() {
+        // Delegate to the original dialog-container initialization (i.e. saving the
+        // previous element, setting up the focus trap and moving focus to the container).
+        super._contentAttached();
+        // Note: Usually we would be able to use the MDC dialog foundation here to handle
+        // the dialog animation for us, but there are a few reasons why we just leverage
+        // their styles and not use the runtime foundation code:
+        //   1. Foundation does not allow us to disable animations.
+        //   2. Foundation contains unnecessary features we don't need and aren't
+        //      tree-shakeable. e.g. background scrim, keyboard event handlers for ESC button.
+        this._startOpenAnimation();
+    }
+    /** Starts the dialog open animation if enabled. */
+    _startOpenAnimation() {
+        this._animationStateChanged.emit({ state: 'opening', totalTime: this._enterAnimationDuration });
+        if (this._animationsEnabled) {
+            this._hostElement.style.setProperty(TRANSITION_DURATION_PROPERTY, `${this._enterAnimationDuration}ms`);
+            // We need to give the `setProperty` call from above some time to be applied.
+            // One would expect that the open class is added once the animation finished, but MDC
+            // uses the open class in combination with the opening class to start the animation.
+            this._requestAnimationFrame(() => this._hostElement.classList.add(/*OPENING_CLASS,*/ OPEN_CLASS));
+            this._waitForAnimationToComplete(this._enterAnimationDuration, this._finishDialogOpen);
+        }
+        else {
+            this._hostElement.classList.add(OPEN_CLASS);
+            // Note: We could immediately finish the dialog opening here with noop animations,
+            // but we defer until next tick so that consumers can subscribe to `afterOpened`.
+            // Executing this immediately would mean that `afterOpened` emits synchronously
+            // on `dialog.open` before the consumer had a change to subscribe to `afterOpened`.
+            Promise.resolve().then(() => this._finishDialogOpen());
+        }
+    }
+    /**
+     * Starts the exit animation of the dialog if enabled. This method is
+     * called by the dialog ref.
+     */
+    _startExitAnimation() {
+        this._animationStateChanged.emit({ state: 'closing', totalTime: this._exitAnimationDuration });
+        this._hostElement.classList.remove(OPEN_CLASS);
+        if (this._animationsEnabled) {
+            this._hostElement.style.setProperty(TRANSITION_DURATION_PROPERTY, `${this._exitAnimationDuration}ms`);
+            // We need to give the `setProperty` call from above some time to be applied.
+            this._requestAnimationFrame(() => this._hostElement.classList.add(CLOSING_CLASS));
+            this._waitForAnimationToComplete(this._exitAnimationDuration, this._finishDialogClose);
+        }
+        else {
+            // This subscription to the `OverlayRef#backdropClick` observable in the `DialogRef` is
+            // set up before any user can subscribe to the backdrop click. The subscription triggers
+            // the dialog close and this method synchronously. If we'd synchronously emit the `CLOSED`
+            // animation state event if animations are disabled, the overlay would be disposed
+            // immediately and all other subscriptions to `DialogRef#backdropClick` would be silently
+            // skipped. We work around this by waiting with the dialog close until the next tick when
+            // all subscriptions have been fired as expected. This is not an ideal solution, but
+            // there doesn't seem to be any other good way. Alternatives that have been considered:
+            //   1. Deferring `DialogRef.close`. This could be a breaking change due to a new microtask.
+            //      Also this issue is specific to the MDC implementation where the dialog could
+            //      technically be closed synchronously. In the non-MDC one, Angular animations are used
+            //      and closing always takes at least a tick.
+            //   2. Ensuring that user subscriptions to `backdropClick`, `keydownEvents` in the dialog
+            //      ref are first. This would solve the issue, but has the risk of memory leaks and also
+            //      doesn't solve the case where consumers call `DialogRef.close` in their subscriptions.
+            // Based on the fact that this is specific to the MDC-based implementation of the dialog
+            // animations, the defer is applied here.
+            Promise.resolve().then(() => this._finishDialogClose());
+        }
+    }
+    /**
+     * Updates the number action sections.
+     * @param delta Increase/decrease in the number of sections.
+     */
+    _updateActionSectionCount(delta) {
+        this._actionSectionCount += delta;
+        this._changeDetectorRef.markForCheck();
+    }
+    /** Clears all dialog animation classes. */
+    _clearAnimationClasses() {
+        this._hostElement.classList.remove(OPENING_CLASS, CLOSING_CLASS);
+    }
+    _waitForAnimationToComplete(duration, callback) {
+        if (this._animationTimer !== null) {
+            clearTimeout(this._animationTimer);
+        }
+        // Note that we want this timer to run inside the NgZone, because we want
+        // the related events like `afterClosed` to be inside the zone as well.
+        this._animationTimer = setTimeout(callback, duration);
+    }
+    /** Runs a callback in `requestAnimationFrame`, if available. */
+    _requestAnimationFrame(callback) {
+        this._ngZone.runOutsideAngular(() => {
+            if (typeof requestAnimationFrame === 'function') {
+                requestAnimationFrame(callback);
+            }
+            else {
+                callback();
+            }
+        });
+    }
+    _captureInitialFocus() {
+        if (!this._config.delayFocusTrap) {
+            this._trapFocus();
+        }
+    }
+    /**
+     * Callback for when the open dialog animation has finished. Intended to
+     * be called by sub-classes that use different animation implementations.
+     */
+    _openAnimationDone(totalTime) {
+        if (this._config.delayFocusTrap) {
+            this._trapFocus();
+        }
+        this._animationStateChanged.next({ state: 'opened', totalTime });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this._animationTimer !== null) {
+            clearTimeout(this._animationTimer);
+        }
+    }
+    attachComponentPortal(portal) {
+        // When a component is passed into the dialog, the host element interrupts
+        // the `display:flex` from affecting the dialog title, content, and
+        // actions. To fix this, we make the component host `display: contents` by
+        // marking its host with the `mat-mdc-dialog-component-host` class.
+        //
+        // Note that this problem does not exist when a template ref is used since
+        // the title, contents, and actions are then nested directly under the
+        // dialog surface.
+        const ref = super.attachComponentPortal(portal);
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-dialog-container', host: {
+                        'class': 'cute-dialog-container cute-dialog modal fade',
+                        'tabindex': '-1',
+                        '[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',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, imports: [PortalModule, CuteDialogStage], 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"] }]
+        }], ctorParameters: () => [] });
+// TODO(mmalerba): Remove this function after animation durations are required
+//  to be numbers.
+/**
+ * Converts a CSS time string to a number in ms. If the given time is already a
+ * number, it is assumed to be in ms.
+ */
+function parseCssTime(time) {
+    if (time == null) {
+        return null;
+    }
+    if (typeof time === 'number') {
+        return time;
+    }
+    if (time.endsWith('ms')) {
+        return coerceNumberProperty(time.substring(0, time.length - 2));
+    }
+    if (time.endsWith('s')) {
+        return coerceNumberProperty(time.substring(0, time.length - 1)) * 1000;
+    }
+    if (time === '0') {
+        return 0;
+    }
+    return null; // anything else is invalid.
+}
+
+/**
+ * @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).
+ */
+/** Injection token that can be used to access the data that was passed in to a dialog. */
+const CUTE_DIALOG_DATA = new InjectionToken('CuteDialogData');
+/** Injection token that can be used to specify default dialog options. */
+const CUTE_DIALOG_DEFAULT_OPTIONS = new InjectionToken('cute-dialog-default-options');
+/** Injection token that determines the scroll handling while the dialog is open. */
+const CUTE_DIALOG_SCROLL_STRATEGY = new InjectionToken('cute-dialog-scroll-strategy', {
+    providedIn: 'root',
+    factory: () => {
+        const overlay = inject(Overlay);
+        return () => overlay.scrollStrategies.block();
+    },
+});
+// Counter for unique dialog ids.
+let uniqueId = 0;
+/**
+ * Service to open `Bootstrap` modal controls
+ */
+class CuteDialog {
+    /** Keeps track of the currently open dialogs. */
+    get openDialogs() {
+        return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;
+    }
+    /** Stream that emits when a dialog has been opened. */
+    get afterOpened() {
+        return (this._parentDialog ? this._parentDialog.afterOpened : this._afterOpenedAtThisLevel);
+    }
+    _getAfterAllClosed() {
+        const parent = this._parentDialog;
+        return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;
+    }
+    constructor() {
+        this._overlay = inject(Overlay);
+        this._defaultOptions = inject(CUTE_DIALOG_DEFAULT_OPTIONS, { optional: true });
+        this._scrollStrategy = inject(CUTE_DIALOG_SCROLL_STRATEGY);
+        this._parentDialog = inject(CuteDialog, { optional: true, skipSelf: true });
+        this._dialog = inject(Dialog);
+        this._openDialogsAtThisLevel = [];
+        this._afterAllClosedAtThisLevel = new Subject();
+        this._afterOpenedAtThisLevel = new Subject();
+        this.dialogConfigClass = CuteDialogConfig;
+        /**
+         * Stream that emits when all open dialogs have finished closing.
+         * Will emit on subscribing if there are no open dialogs to begin with.
+         */
+        this.afterAllClosed = defer(() => this.openDialogs.length
+            ? this._getAfterAllClosed()
+            : this._getAfterAllClosed().pipe(startWith(undefined)));
+        this._dialogRefConstructor = CuteDialogRef;
+        this._dialogContainerType = CuteDialogContainer;
+        this._dialogDataToken = CUTE_DIALOG_DATA;
+    }
+    open(componentOrTemplateRef, config) {
+        let dialogRef;
+        config = { ...(this._defaultOptions || new CuteDialogConfig()), ...config };
+        config.id = config.id || `cute-dialog-${uniqueId++}`;
+        config.scrollStrategy = config.scrollStrategy || this._scrollStrategy();
+        const cdkRef = this._dialog.open(componentOrTemplateRef, {
+            ...config,
+            positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+            // Disable closing since we need to sync it up to the animation ourselves.
+            disableClose: true,
+            // 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.
+            closeOnDestroy: false,
+            // Disable closing on detachments so that we can sync up the animation.
+            // The Material dialog ref handles this manually.
+            closeOnOverlayDetachments: false,
+            container: {
+                type: this._dialogContainerType,
+                providers: () => [
+                    // Provide our config as the CDK config as well since it has the same interface as the
+                    // CDK one. However, it contains the actual values passed in by the user for things like
+                    // `disableClose` which we disable for the CDK dialog since we handle it ourselves.
+                    { provide: this.dialogConfigClass, useValue: config },
+                    { provide: DialogConfig, useValue: config },
+                ],
+            },
+            templateContext: () => ({ dialogRef }),
+            providers: (ref, cdkConfig, dialogContainer) => {
+                dialogRef = new this._dialogRefConstructor(ref, config, dialogContainer);
+                dialogRef.updatePosition(config?.position);
+                if (config?.fullscreenStrategy === "fullscreen") {
+                    dialogRef.addPanelClass("fullscreen-dialog");
+                }
+                return [
+                    { provide: this._dialogContainerType, useValue: dialogContainer },
+                    { provide: this._dialogDataToken, useValue: cdkConfig.data },
+                    { provide: this._dialogRefConstructor, useValue: dialogRef },
+                ];
+            },
+        });
+        // This can't be assigned in the `providers` callback, because
+        // the instance hasn't been assigned to the CDK ref yet.
+        dialogRef.componentRef = cdkRef.componentRef;
+        dialogRef.componentInstance = cdkRef.componentInstance;
+        this.openDialogs.push(dialogRef);
+        this.afterOpened.next(dialogRef);
+        dialogRef.afterClosed().subscribe(() => {
+            const index = this.openDialogs.indexOf(dialogRef);
+            if (index > -1) {
+                this.openDialogs.splice(index, 1);
+                if (!this.openDialogs.length) {
+                    this._getAfterAllClosed().next();
+                }
+            }
+        });
+        return dialogRef;
+    }
+    /**
+     * Closes all the currently open dialogs.
+     */
+    closeAll() {
+        this._closeDialogs(this.openDialogs);
+    }
+    /**
+     * Finds an open dialog by its id.
+     * @param id ID to use when looking up the dialog.
+     */
+    getDialogById(id) {
+        return this.openDialogs.find(dialog => dialog.id === id);
+    }
+    ngOnDestroy() {
+        // Only close the dialogs at this level on destroy
+        // since the parent service may still be active.
+        this._closeDialogs(this._openDialogsAtThisLevel);
+        this._afterAllClosedAtThisLevel.complete();
+        this._afterOpenedAtThisLevel.complete();
+    }
+    _closeDialogs(dialogs) {
+        let i = dialogs.length;
+        while (i--) {
+            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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialog, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @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).
+ */
+/**
+ * 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;
+        /** Default to "button" to prevent accidental form submits. */
+        this.type = 'button';
+        /** Dialog close input. */
+        this.dialogResult = undefined;
+        this._cuteDialogClose = undefined; // Handled in `ngOnChanges`
+    }
+    ngOnInit() {
+        if (!this.dialogRef) {
+            // When this directive is included in a dialog via TemplateRef (rather than being
+            // in a Component), the DialogRef isn't available via injection because embedded
+            // views cannot be given a custom injector. Instead, we look up the `DialogRef` by
+            // ID. This must occur in `onInit`, as the ID binding for the dialog container won't
+            // be resolved at constructor time.
+            this.dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs);
+        }
+    }
+    ngOnChanges(changes) {
+        const proxiedChange = changes['_cuteDialogClose'];
+        if (proxiedChange) {
+            this.dialogResult = proxiedChange.currentValue;
+        }
+    }
+    _onButtonClick(event) {
+        // Determinate the focus origin using the click event, because using the FocusMonitor will
+        // result in incorrect origins. Most of the time, close buttons will be auto focused in the
+        // dialog, and therefore clicking the button won't result in a focus change. This means that
+        // 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cute-dialog-close], [cuteDialogClose]',
+                    exportAs: 'cuteDialogClose',
+                    standalone: true,
+                    host: {
+                        '(click)': '_onButtonClick($event)',
+                        '[attr.aria-label]': 'ariaLabel || null',
+                        '[attr.type]': 'type',
+                    },
+                }]
+        }], ctorParameters: () => [{ type: CuteDialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ElementRef }, { type: CuteDialog }], propDecorators: { ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], type: [{
+                type: Input
+            }], dialogResult: [{
+                type: Input,
+                args: ['cute-dialog-close']
+            }], _cuteDialogClose: [{
+                type: Input,
+                args: ['cuteDialogClose']
+            }] } });
+/**
+ * Finds the closest CuteDialogRef to an element by looking at the DOM.
+ * @param element Element relative to which to look for a dialog.
+ * @param openDialogs References to the currently open dialogs.
+ */
+function getClosestDialog(element, openDialogs) {
+    let parent = element.nativeElement.parentElement;
+    while (parent && !parent.classList.contains('cute-dialog-container')) {
+        parent = parent.parentElement;
+    }
+    return parent ? openDialogs.find(dialog => dialog.id === parent.id) : null;
+}
+
+/**
+ * @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 CuteDialogHeader {
+    /**
+     * Whether it is possible to drag the `Dialog` by grabbing the header section.
+     * The default value is the value of the `draggable` property from the `CuteDialogConfig` object,
+     * or _false_ if the value is not defined.
+     */
+    get draggable() { return this._draggable; }
+    set draggable(value) { this._draggable = value; }
+    constructor(container) {
+        this.container = container;
+        this.isMouseDown = false;
+        this._draggable = false;
+        this.config = container._config;
+        // Assign an initial value based on the `draggable` property of the `CuteDialogConfig` object.
+        // User can override this value by setting his/her value to the `draggable` input property
+        this.draggable = !!this.config.draggable;
+    }
+    getCursorStyle() {
+        if (this.draggable && !this.container.isFullScreenDialog()) {
+            return this.isMouseDown ? 'grabbing' : 'move'; //'grab';
+        }
+        return "default";
+    }
+    onMouseDown(event) {
+        this.isMouseDown = true;
+    }
+    onMouseUp(event) {
+        this.isMouseDown = false;
+    }
+    ngOnInit() {
+        if (this.cdkDragEl && typeof (this.config.draggable) == "string") {
+            // Drag constraints: x-axis | y-axis
+            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: `
+      <div #header
+           class="modal-header"
+           role="heading"
+           cdkDrag
+           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>
+      </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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cute-dialog-header',
+                    exportAs: 'cuteDialogHeader',
+                    template: `
+      <div #header
+           class="modal-header"
+           role="heading"
+           cdkDrag
+           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>
+      </div>
+<!--      cdkDragHandle-->
+  `,
+                    host: {
+                        'class': 'cute-dialog-header',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CuteButton,
+                        CdkDrag,
+                        CuteDialogClose
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: CuteDialogContainer }], propDecorators: { cdkDragEl: [{
+                type: ViewChild,
+                args: ['header', { read: CdkDrag, static: true }]
+            }], draggable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ["mousedown", ["$event"]]
+            }], onMouseUp: [{
+                type: HostListener,
+                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
+ *
+ * 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
+ */
+const TYPES = [
+    CuteDialogBody,
+    CuteDialogClose,
+    CuteDialogFooter,
+    CuteDialogHeader,
+    CuteDialogTitle,
+    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,
+            CuteDialogClose,
+            CuteDialogFooter,
+            CuteDialogHeader,
+            CuteDialogTitle,
+            CuteDialogContainer], exports: [CuteDialogBody,
+            CuteDialogClose,
+            CuteDialogFooter,
+            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,
+            CuteDialogContainer] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ...TYPES],
+                    exports: TYPES,
+                    declarations: [],
+                    providers: [CuteDialog],
+                }]
+        }] });
+
+/**
+ * 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 };
+//# sourceMappingURL=cute-widgets-base-dialog.mjs.map