@tedi-design-system/angular 8.2.0-rc.4 → 8.2.0-rc.5

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, DestroyRef, afterRenderEffect, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, HostAttributeToken, viewChild, NgZone, viewChildren, afterNextRender, Optional, SkipSelf, linkedSignal, untracked, ViewChild, TemplateRef, numberAttribute, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, ContentChild, makeEnvironmentProviders } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, DestroyRef, afterRenderEffect, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, HostAttributeToken, viewChild, NgZone, viewChildren, afterNextRender, ErrorHandler, Optional, SkipSelf, linkedSignal, untracked, ViewChild, TemplateRef, numberAttribute, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, ContentChild, makeEnvironmentProviders } from '@angular/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i1 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin, OverlayContainer, OverlayModule, Overlay, OverlayConfig, CdkConnectedOverlay } from '@angular/cdk/overlay';
@@ -11,6 +11,7 @@ import * as i2 from '@angular/cdk/a11y';
 import { _IdGenerator, CdkTrapFocus, A11yModule, LiveAnnouncer, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Dialog } from '@angular/cdk/dialog';
+import { isObservable, firstValueFrom } from 'rxjs';
 import * as i1$2 from '@angular/cdk/scrolling';
 import { CdkScrollable, CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i3 from '@angular/cdk/listbox';
@@ -8691,15 +8692,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 /**
  * Reference to a modal opened via `ModalService`.
  * Provides methods to close the modal and observe its lifecycle.
+ * The opener and the content share the same instance.
  */
 class ModalRef {
     dialogRef;
-    constructor(dialogRef) {
+    errorHandler;
+    /** Checked before every close, except `ModalService.closeAll()` and navigation. */
+    canClose = null;
+    pendingGuard = false;
+    constructor(dialogRef, errorHandler = new ErrorHandler()) {
         this.dialogRef = dialogRef;
+        this.errorHandler = errorHandler;
     }
-    /** Close the modal, optionally returning a result. */
+    /** Close the modal, optionally returning a result. Subject to `canClose`. */
     close(result) {
-        this.dialogRef.close(result);
+        this.requestClose("programmatic", result);
+    }
+    /** @internal */
+    requestClose(reason, result) {
+        if (this.pendingGuard)
+            return;
+        let verdict;
+        try {
+            verdict = this.canClose ? this.canClose(result, reason) : true;
+        }
+        catch (error) {
+            this.errorHandler.handleError(error);
+            return;
+        }
+        if (typeof verdict === "boolean") {
+            if (verdict)
+                this.dialogRef.close(result);
+            return;
+        }
+        this.pendingGuard = true;
+        const decision = isObservable(verdict)
+            ? firstValueFrom(verdict, { defaultValue: false })
+            : verdict;
+        decision
+            .then((allowed) => {
+            if (allowed)
+                this.dialogRef.close(result);
+        })
+            .catch((error) => this.errorHandler.handleError(error))
+            .finally(() => (this.pendingGuard = false));
     }
     /** Observable that emits when the modal is closed, with the optional result value. */
     get closed() {
@@ -8755,6 +8791,7 @@ class ModalService {
     overlay = inject(Overlay);
     injector = inject(Injector);
     idGenerator = inject(_IdGenerator);
+    errorHandler = inject(ErrorHandler);
     /**
      * Open a modal dialog with the given component as content.
      *
@@ -8777,6 +8814,7 @@ class ModalService {
         const { data, size = "default", width = "sm", position = "center", scrollBehavior = "content", closeOnBackdropClick = true, closeOnEscape = true, fullscreen = false, maxWidth, ariaLabel, ariaLabelledBy, } = config;
         const panelClasses = this.buildPanelClasses(size, width, position, scrollBehavior, fullscreen);
         const isPresetWidth = WIDTH_PRESETS.includes(width);
+        let modalRef;
         const dialogRef = this.dialog.open(component, {
             data,
             panelClass: panelClasses,
@@ -8791,7 +8829,10 @@ class ModalService {
             positionStrategy: this.buildPositionStrategy(position, scrollBehavior),
             scrollStrategy: this.overlay.scrollStrategies.block(),
             providers: (ref) => [
-                { provide: ModalRef, useValue: new ModalRef(ref) },
+                {
+                    provide: ModalRef,
+                    useValue: (modalRef = new ModalRef(ref, this.errorHandler)),
+                },
                 { provide: MODAL_DATA, useValue: data },
                 { provide: MODAL_SIZE, useValue: signal(size) },
             ],
@@ -8802,13 +8843,13 @@ class ModalService {
         if (maxWidth) {
             dialogRef.overlayRef.overlayElement.style.setProperty("--_tedi-modal-max-width", maxWidth);
         }
-        this.setupDialogBehavior(dialogRef, scrollBehavior, closeOnBackdropClick, closeOnEscape);
+        this.setupDialogBehavior(dialogRef, modalRef, scrollBehavior, closeOnBackdropClick, closeOnEscape);
         if (!ariaLabel && !ariaLabelledBy) {
             this.labelFromHeading(dialogRef);
         }
-        return new ModalRef(dialogRef);
+        return modalRef;
     }
-    /** Close all open modals. */
+    /** Close all open modals, ignoring `canClose`. */
     closeAll() {
         this.dialog.closeAll();
     }
@@ -8824,7 +8865,8 @@ class ModalService {
     labelFromHeading(dialogRef) {
         afterNextRender(() => {
             // The container, not the pane, is what carries role="dialog".
-            const container = dialogRef.overlayRef.overlayElement.querySelector("cdk-dialog-container");
+            // The pane is null if the modal closed before rendering.
+            const container = dialogRef.overlayRef.overlayElement?.querySelector("cdk-dialog-container");
             if (!container)
                 return;
             const headingId = resolveModalHeadingId(container, this.idGenerator);
@@ -8855,19 +8897,19 @@ class ModalService {
         }
         return classes;
     }
-    setupDialogBehavior(dialogRef, scrollBehavior, closeOnBackdropClick, closeOnEscape) {
+    setupDialogBehavior(dialogRef, modalRef, scrollBehavior, closeOnBackdropClick, closeOnEscape) {
         if (scrollBehavior === "page") {
             const host = dialogRef.overlayRef.hostElement;
             host.style.overflow = "auto";
             host.style.paddingBlock = "var(--layout-grid-gutters-16)";
         }
         if (closeOnBackdropClick) {
-            dialogRef.backdropClick.subscribe(() => dialogRef.close());
+            dialogRef.backdropClick.subscribe(() => modalRef.requestClose("backdrop"));
         }
         if (closeOnEscape) {
             dialogRef.keydownEvents.subscribe((event) => {
                 if (event.key === "Escape") {
-                    dialogRef.close();
+                    modalRef.requestClose("escape");
                 }
             });
         }
@@ -9123,7 +9165,7 @@ class ModalHeaderComponent {
     }, ...(ngDevMode ? [{ debugName: "effectiveCloseButtonSize" }] : []));
     closeModal() {
         if (this.modalRef) {
-            this.modalRef.close();
+            this.modalRef.requestClose("close-button");
         }
         else if (this.modal) {
             this.modal.open.set(false);