@fundamental-ngx/core 0.62.0-rc.55 → 0.62.0-rc.57

package/fesm2022/fundamental-ngx-core-dialog.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, computed, signal, input, booleanAttribute, Optional, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChildren, inject, Injector, effect, Directive, DestroyRef, ElementRef, afterNextRender, isDevMode, ContentChild, ViewChild, Input, ComponentRef, EmbeddedViewRef, Type, TemplateRef, HostListener, HostBinding, PLATFORM_ID, Inject, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, computed, signal, input, booleanAttribute, Optional, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChildren, inject, Injector, effect, Directive, DestroyRef, ElementRef, afterNextRender, isDevMode, ContentChild, ViewChild, Input, ComponentRef, EmbeddedViewRef, Type, TemplateRef, PLATFORM_ID, Inject, NgModule } from '@angular/core';
 import * as i3$2 from '@angular/cdk/portal';
 import { PortalModule, CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
 import { AsyncPipe, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
@@ -23,7 +23,6 @@ import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { ESCAPE } from '@angular/cdk/keycodes';
 import { Router, NavigationStart } from '@angular/router';
 import { filter } from 'rxjs/operators';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 
 const FD_DIALOG_BODY_COMPONENT = new InjectionToken('FdDialogBodyComponent');
 const FD_DIALOG_FOCUS_TRAP_ERROR = new InjectionToken('FdDialogFocusTrapError');
@@ -1129,25 +1128,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ], template: "<fd-dialog>\n    <fd-dialog-header>\n        <div\n            role=\"heading\"\n            [attr.aria-level]=\"_defaultDialogContent?.titleHeadingLevel || 1\"\n            fd-title\n            [id]=\"_defaultDialogContent?.titleId || dialogTitleId\"\n        >\n            {{ _defaultDialogContent?.title }}\n        </div>\n        @if (_defaultDialogContent?.allowFullScreen) {\n            <button\n                fd-dialog-full-screen-toggler-button\n                #fullScreenTogglerButton\n                [title]=\"\n                    (fullScreenTogglerButton._fullscreen$()\n                        ? _defaultDialogContent?.fullScreenMinifyButtonText\n                        : _defaultDialogContent?.fullScreenExpandButtonText) || ''\n                \"\n                (click)=\"_fullScreenButtonClicked()\"\n            ></button>\n        }\n        @if (_defaultDialogContent?.closeButtonCallback) {\n            <button\n                fd-dialog-close-button\n                [title]=\"_defaultDialogContent?.closeButtonTitle || ''\"\n                [ariaLabel]=\"_defaultDialogContent?.closeButtonAriaLabel || ''\"\n                (click)=\"_closeButtonClicked()\"\n            ></button>\n        }\n        @if (_defaultDialogContent?.subHeader) {\n            <ng-template fdkTemplate=\"subheader\">\n                <ng-template [ngTemplateOutlet]=\"_defaultDialogContent!.subHeader!\"></ng-template>\n            </ng-template>\n        }\n    </fd-dialog-header>\n    @if (_defaultDialogContent?.content) {\n        <fd-dialog-body [id]=\"_defaultDialogContent?.contentId || dialogContentId\">\n            <ng-template [ngTemplateOutlet]=\"_defaultDialogContent?.content!\"></ng-template>\n        </fd-dialog-body>\n    }\n    @if (_showFooter()) {\n        <fd-dialog-footer>\n            @if (_defaultDialogContent?.approveButton) {\n                <fd-button-bar\n                    fdType=\"emphasized\"\n                    fdkInitialFocus\n                    [label]=\"_defaultDialogContent?.approveButton || ''\"\n                    [fdCozy]=\"_defaultDialogConfiguration.mobile\"\n                    (click)=\"_approveButtonClicked()\"\n                    [ariaLabel]=\"_defaultDialogContent?.approveButtonAriaLabel\"\n                    [id]=\"_defaultDialogContent?.approveButtonId || ''\"\n                >\n                </fd-button-bar>\n            }\n            @if (_defaultDialogContent?.cancelButton) {\n                <fd-button-bar\n                    [label]=\"_defaultDialogContent?.cancelButton || ''\"\n                    [fdCozy]=\"_defaultDialogConfiguration.mobile\"\n                    (click)=\"_cancelButtonClicked()\"\n                    [ariaLabel]=\"_defaultDialogContent?.closeButtonAriaLabel\"\n                    [id]=\"_defaultDialogContent?.cancelButtonId || ''\"\n                >\n                </fd-button-bar>\n            }\n        </fd-dialog-footer>\n    }\n</fd-dialog>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: DialogConfig }] });
 
-const dialogFade = trigger('state', [
-    state('void, hidden', style({
-        opacity: 0,
-        position: 'relative',
-        zIndex: 999
-    })),
-    state('visible', style({
-        opacity: 1,
-        position: 'relative',
-        zIndex: 999
-    })),
-    transition('* => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),
-    transition('* => void, * => hidden', animate('75ms cubic-bezier(0.4, 0.0, 1, 1)', style({
-        opacity: 0,
-        position: 'relative',
-        zIndex: 999
-    })))
-]);
-
 /** Dialog container where the dialog content is embedded. */
 class DialogContainerComponent extends DynamicComponentContainer {
     /** Custom classes */
@@ -1155,10 +1135,6 @@ class DialogContainerComponent extends DynamicComponentContainer {
         this._class = userClass;
         this.buildComponentCssClass();
     }
-    /** The state of the Dialog animations. */
-    get _animationState() {
-        return this._animationStateSignal();
-    }
     /** @hidden */
     constructor(dialogConfig, ref, _destroyRef, elementRef, _cdr, injector) {
         super(elementRef, injector);
@@ -1168,21 +1144,19 @@ class DialogContainerComponent extends DynamicComponentContainer {
         this._cdr = _cdr;
         /** @hidden */
         this._class = '';
-        /** @hidden */
+        /** @hidden Tracks the current animation phase for lifecycle management. */
         this._animationStateSignal = signal('void', ...(ngDevMode ? [{ debugName: "_animationStateSignal" }] : []));
+        /** @hidden Reference to the current Web Animation for cleanup. */
+        this._currentAnimation = null;
+        this._destroyRef.onDestroy(() => {
+            this._currentAnimation?.cancel();
+            this._currentAnimation = null;
+        });
     }
     /** @hidden */
     buildComponentCssClass() {
         return [this.dialogConfig.containerClass ? this.dialogConfig.containerClass : '', this._class];
     }
-    /** Handle end of animations, updating the state of the Message Toast. */
-    onAnimationEnd(event) {
-        const { toState } = event;
-        if (toState === 'hidden') {
-            this.ref._endClose$.next();
-            this.ref._endClose$.complete();
-        }
-    }
     /** @hidden */
     ngAfterViewInit() {
         setTimeout(() => {
@@ -1213,7 +1187,7 @@ class DialogContainerComponent extends DynamicComponentContainer {
         else {
             this._createFromDefaultDialog(this.childContent);
         }
-        this._animationStateSignal.set('visible');
+        this._enter();
     }
     /** @hidden Returns context for embedded template */
     _templateContext() {
@@ -1226,21 +1200,64 @@ class DialogContainerComponent extends DynamicComponentContainer {
         instance._defaultDialogContent = config;
         instance._defaultDialogConfiguration = this.dialogConfig;
     }
+    /** @hidden Animate the dialog container entrance (opacity 0 → 1). */
+    _enter() {
+        const el = this.elementRef.nativeElement;
+        if (typeof el.animate !== 'function') {
+            el.style.opacity = '1';
+            this._animationStateSignal.set('visible');
+            return;
+        }
+        this._currentAnimation = el.animate([{ opacity: 0 }, { opacity: 1 }], {
+            duration: 150,
+            easing: 'cubic-bezier(0, 0, 0.2, 1)',
+            fill: 'forwards'
+        });
+        this._currentAnimation.finished
+            .then(() => {
+            el.style.opacity = '1';
+            this._currentAnimation?.cancel();
+            this._currentAnimation = null;
+            this._animationStateSignal.set('visible');
+        })
+            .catch(() => {
+            this._currentAnimation = null;
+        });
+    }
+    /** @hidden Animate the dialog container exit (opacity 1 → 0). */
+    _exit() {
+        const el = this.elementRef.nativeElement;
+        this._animationStateSignal.set('hidden');
+        this._cdr.detectChanges();
+        if (typeof el.animate !== 'function') {
+            return;
+        }
+        this._currentAnimation?.cancel();
+        this._currentAnimation = el.animate([{ opacity: 1 }, { opacity: 0 }], {
+            duration: 75,
+            easing: 'cubic-bezier(0.4, 0, 1, 1)',
+            fill: 'forwards'
+        });
+        this._currentAnimation.finished
+            .then(() => {
+            this._currentAnimation = null;
+        })
+            .catch(() => {
+            this._currentAnimation = null;
+        });
+    }
     /**
      * @hidden
-     * We need to wait until animation plays, and then send signal to the service to destroy the component.
+     * Listen for dialog close/dismiss and trigger exit animation.
      */
     _listenOnClose() {
-        const callback = () => {
-            this._animationStateSignal.set('hidden');
-        };
         this.ref.afterClosed.pipe(takeUntilDestroyed(this._destroyRef)).subscribe({
-            next: () => callback(),
-            error: () => callback()
+            next: () => this._exit(),
+            error: () => this._exit()
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogContainerComponent, deps: [{ token: DialogConfig }, { token: DialogRef }, { token: i0.DestroyRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: DialogContainerComponent, isStandalone: true, selector: "fd-dialog-container", inputs: { class: "class" }, host: { listeners: { "@state.done": "onAnimationEnd($event)" }, properties: { "@state": "this._animationState" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], usesInheritance: true, ngImport: i0, template: '<ng-template (attached)="_attached($event)" cdkPortalOutlet></ng-template>', isInline: true, styles: [":host:not(:first-of-type) ::ng-deep .fd-dialog:before{opacity:0}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [dialogFade], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: DialogContainerComponent, isStandalone: true, selector: "fd-dialog-container", inputs: { class: "class" }, host: { styleAttribute: "opacity: 0; position: relative; z-index: 999" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], usesInheritance: true, ngImport: i0, template: '<ng-template (attached)="_attached($event)" cdkPortalOutlet></ng-template>', isInline: true, styles: [":host:not(:first-of-type) ::ng-deep .fd-dialog:before{opacity:0}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     applyCssClass,
@@ -1250,19 +1267,15 @@ __decorate([
 ], DialogContainerComponent.prototype, "buildComponentCssClass", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-dialog-container', template: '<ng-template (attached)="_attached($event)" cdkPortalOutlet></ng-template>', animations: [dialogFade], encapsulation: ViewEncapsulation.None, standalone: true, imports: [PortalModule], styles: [":host:not(:first-of-type) ::ng-deep .fd-dialog:before{opacity:0}\n"] }]
+            args: [{ selector: 'fd-dialog-container', template: '<ng-template (attached)="_attached($event)" cdkPortalOutlet></ng-template>', encapsulation: ViewEncapsulation.None, imports: [PortalModule], host: {
+                        style: 'opacity: 0; position: relative; z-index: 999'
+                    }, styles: [":host:not(:first-of-type) ::ng-deep .fd-dialog:before{opacity:0}\n"] }]
         }], ctorParameters: () => [{ type: DialogConfig }, { type: DialogRef }, { type: i0.DestroyRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }], propDecorators: { class: [{
                 type: Input
             }], portalOutlet: [{
                 type: ViewChild,
                 args: [CdkPortalOutlet]
-            }], _animationState: [{
-                type: HostBinding,
-                args: ['@state']
-            }], buildComponentCssClass: [], onAnimationEnd: [{
-                type: HostListener,
-                args: ['@state.done', ['$event']]
-            }] } });
+            }], buildComponentCssClass: [] } });
 
 /** Service used to create a dialog. */
 class DialogService extends DialogBaseService {
@@ -1527,5 +1540,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DIALOG_DEFAULT_CONFIG, DialogBase, DialogBaseService, DialogBodyComponent, DialogButtonClass, DialogCloseButtonComponent, DialogComponent, DialogConfig, DialogConfigBase, DialogContainerComponent, DialogContentBase, DialogDefaultComponent, DialogDefaultContent, DialogFooterBase, DialogFooterComponent, DialogFullScreenTogglerButtonComponent, DialogHeaderBase, DialogHeaderComponent, DialogModule, DialogOverlayContainer, DialogPosition, DialogRef, DialogRefBase, DialogService, DialogTemplateDirective, DialogTitleDirective, FD_DIALOG_BODY_COMPONENT, FD_DIALOG_DISMISS_REASON, FD_DIALOG_FOCUS_TRAP_ERROR, dialogFade, provideDialogService };
+export { DIALOG_DEFAULT_CONFIG, DialogBase, DialogBaseService, DialogBodyComponent, DialogButtonClass, DialogCloseButtonComponent, DialogComponent, DialogConfig, DialogConfigBase, DialogContainerComponent, DialogContentBase, DialogDefaultComponent, DialogDefaultContent, DialogFooterBase, DialogFooterComponent, DialogFullScreenTogglerButtonComponent, DialogHeaderBase, DialogHeaderComponent, DialogModule, DialogOverlayContainer, DialogPosition, DialogRef, DialogRefBase, DialogService, DialogTemplateDirective, DialogTitleDirective, FD_DIALOG_BODY_COMPONENT, FD_DIALOG_DISMISS_REASON, FD_DIALOG_FOCUS_TRAP_ERROR, provideDialogService };
 //# sourceMappingURL=fundamental-ngx-core-dialog.mjs.map