@vsn-ux/ngx-gaia 0.9.17 → 0.10.0

package/fesm2022/vsn-ux-ngx-gaia.mjs

@@ -2940,6 +2940,68 @@ class GaModalRef {
 
 const GA_MODAL_DATA = new InjectionToken('GaModalData');
 
+class GaModalOptions {
+    /**
+     * Defines the predefined size of the modal.
+     *
+     * @default `md`
+     */
+    size;
+    /**
+     * Defines the type of the modal:
+     *  - `none` for no icon.
+     *  - `information` for info dialog.
+     *  - `danger` for danger dialog.
+     *  - `warning` for warning dialog.
+     *  - `success` for success dialog.
+     */
+    type;
+    /**
+     * The ARIA role of the dialog element.
+     *
+     * @default `dialog`
+     */
+    role;
+    /**
+     * Defines the vertical position of the modal.
+     *  - `center` centers the modal vertically in the viewport (default).
+     *  - `top` positions the modal at the top with a calculated offset.
+     *
+     * @default `center`
+     */
+    verticalPosition;
+    /**
+     * Defines if the modal should be closed when the escape key is pressed.
+     *
+     * @default `true`
+     */
+    closeOnEscape;
+    /**
+     * Defines if the modal should be closed when the backdrop is clicked.
+     *
+     * @default `true`
+     */
+    closeOnOutsideClick;
+    /**
+     * Defines if the modal should be closed when the route changes.
+     *
+     * @default `true`
+     */
+    closeOnNavigation;
+}
+const DEFAULT_MODAL_OPTIONS = {
+    role: 'dialog',
+    type: 'none',
+    size: 'md',
+    verticalPosition: 'center',
+    closeOnEscape: true,
+    closeOnOutsideClick: true,
+    closeOnNavigation: true,
+};
+function provideGaModalOptions(options) {
+    return { provide: GaModalOptions, useValue: options };
+}
+
 class GaModalService {
     /** @ignore */
     overlay = inject(Overlay);
@@ -2952,6 +3014,8 @@ class GaModalService {
     });
     /** @ignore */
     openModalsAtThisLevel = signal([]);
+    /** @ignore */
+    positionStrategy;
     get activeModals() {
         if (this.parentModalService) {
             return this.parentModalService.activeModals;
@@ -2976,15 +3040,23 @@ class GaModalService {
         const modalRef = new GaModalRef();
         const injector = this.createInjector(this.injector, overlayRef, modalRef, data);
         const modalPortal = new ComponentPortal(component, null, injector);
-        const result = overlayRef.attach(modalPortal);
-        modalRef.instance = result.instance;
+        const { instance: modalComponent } = overlayRef.attach(modalPortal);
+        modalRef.instance = modalComponent;
+        // Update position and size if verticalPosition is 'top'
+        const verticalPosition = modalComponent.options.verticalPosition ??
+            DEFAULT_MODAL_OPTIONS.verticalPosition;
+        if (verticalPosition === 'top') {
+            const modalStackIndex = this.activeModals().length + 1;
+            this.positionStrategy?.top(`calc(4rem * var(--ga-base-scaling-factor, 1) * ${modalStackIndex})`);
+            overlayRef.updateSize({
+                maxHeight: `calc(100vh - 4rem * var(--ga-base-scaling-factor, 1) * (2 + ${modalStackIndex}))`,
+            });
+        }
         this.activeModals.update((modals) => {
-            modals.push(modalRef.instance);
+            modals.push(modalComponent);
             return modals;
         });
-        modalRef.instance
-            .afterClosed({ closeOnUnsubscribe: false })
-            .subscribe(() => {
+        modalComponent.afterClosed({ closeOnUnsubscribe: false }).subscribe(() => {
             const index = this.activeModals().indexOf(modalRef.instance);
             if (index > -1) {
                 this.activeModals.update((modals) => {
@@ -2993,26 +3065,25 @@ class GaModalService {
                 });
             }
         });
-        return result.instance;
+        return modalComponent;
     }
     /** @ignore */
     createOverlay() {
-        const modalStackIndex = this.activeModals().length;
-        const positionStrategy = this.overlay
+        this.positionStrategy = this.overlay
             .position()
             .global()
             .centerHorizontally()
-            .top(`calc(4rem * var(--ga-base-scaling-factor, 1) * ${modalStackIndex + 1})`);
+            .centerVertically();
         const scrollStrategy = this.overlay.scrollStrategies.block();
         return this.overlay.create({
-            positionStrategy,
+            positionStrategy: this.positionStrategy,
             scrollStrategy,
             hasBackdrop: true,
             backdropClass: 'ga-modal__backdrop',
             // NOTE: handled manually inside the modal component
             disposeOnNavigation: false,
             height: 'auto',
-            maxHeight: `calc(100vh - 4rem * var(--ga-base-scaling-factor, 1) * (2 + ${modalStackIndex}))`,
+            maxHeight: `calc(100vh - 4rem * var(--ga-base-scaling-factor, 1) * 2)`,
         });
     }
     /** @ignore */
@@ -3034,59 +3105,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-class GaModalOptions {
-    /**
-     * Defines the predefined size of the modal.
-     *
-     * @default `md`
-     */
-    size;
-    /**
-     * Defines the type of the modal:
-     *  - `none` for no icon.
-     *  - `information` for info dialog.
-     *  - `danger` for danger dialog.
-     *  - `warning` for warning dialog.
-     *  - `success` for success dialog.
-     */
-    type;
-    /**
-     * The ARIA role of the dialog element.
-     *
-     * @default `dialog`
-     */
-    role;
-    /**
-     * Defines if the modal should be closed when the escape key is pressed.
-     *
-     * @default `true`
-     */
-    closeOnEscape;
-    /**
-     * Defines if the modal should be closed when the backdrop is clicked.
-     *
-     * @default `true`
-     */
-    closeOnOutsideClick;
-    /**
-     * Defines if the modal should be closed when the route changes.
-     *
-     * @default `true`
-     */
-    closeOnNavigation;
-}
-const DEFAULT_MODAL_OPTIONS = {
-    role: 'dialog',
-    type: 'none',
-    size: 'md',
-    closeOnEscape: true,
-    closeOnOutsideClick: true,
-    closeOnNavigation: true,
-};
-function provideGaModalOptions(options) {
-    return { provide: GaModalOptions, useValue: options };
-}
-
 class GaModalComponent {
     closeSubject = new Subject();
     overlayRef = inject(OverlayRef);