codexly-ui 0.0.62 → 0.0.64

package/fesm2022/codexly-ui.mjs

@@ -5199,12 +5199,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], ctorParameters: () => [] });
 
 const MODAL_SIZE_MAP = {
-    sm: 'w-full max-w-[400px]',
-    md: 'w-full max-w-[600px]',
-    lg: 'w-full max-w-[900px]',
-    full: 'w-screen h-screen max-w-none rounded-none',
+    sm: 'w-full',
+    md: 'w-full',
+    lg: 'w-full',
+    xl: 'w-full',
+    full: 'w-full h-screen rounded-none',
 };
-const MODAL_CONTAINER_CLASS = 'flex flex-col bg-white rounded-2xl shadow-2xl overflow-hidden min-w-0';
+const MODAL_CONTAINER_CLASS = 'flex flex-col bg-white rounded-2xl shadow-2xl overflow-hidden';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const CLX_MODAL_DATA = new InjectionToken('CLX_MODAL_DATA');
 const CLX_MODAL_SIZE = new InjectionToken('CLX_MODAL_SIZE');
@@ -5397,7 +5398,7 @@ class ClxModalComponent {
         this._modalRef?.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxModalComponent, isStandalone: true, selector: "clx-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, confirmButton: { classPropertyName: "confirmButton", publicName: "confirmButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, host: { properties: { "class": "_hostClass()" }, styleAttribute: "min-width:0" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxModalComponent, isStandalone: true, selector: "clx-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, confirmButton: { classPropertyName: "confirmButton", publicName: "confirmButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
     <!-- Header -->
     <div class="flex items-center gap-3 px-6 py-4 border-b border-slate-100 shrink-0">
       <div class="flex-1 min-w-0">
@@ -5514,7 +5515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': '_hostClass()', style: 'min-width:0' },
+                    host: { '[class]': '_hostClass()' },
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], confirmButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButton", required: false }] }], cancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButton", required: false }] }], showCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelButton", required: false }] }], confirmClick: [{ type: i0.Output, args: ["confirmClick"] }], cancelClick: [{ type: i0.Output, args: ["cancelClick"] }] } });
 
@@ -9000,23 +9001,27 @@ class ClxModalService {
             afterClosed() { return _afterClosed; },
         };
         const extraClasses = Array.isArray(panelClass) ? panelClass : [panelClass];
+        const sizeMaxWidth = {
+            sm: '480px',
+            md: '680px',
+            lg: '900px',
+            xl: '1200px',
+            full: '100vw',
+        };
+        const maxWidth = sizeMaxWidth[size] ?? '600px';
         const overlayRef = this._overlay.create(new OverlayConfig({
             hasBackdrop,
             backdropClass: 'clx-modal-backdrop',
             panelClass: extraClasses,
             scrollStrategy: this._overlay.scrollStrategies.block(),
             positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+            width: `min(calc(100vw - 2rem), ${maxWidth})`,
+            maxWidth: maxWidth,
+            maxHeight: '90vh',
         }));
         Object.assign(overlayRef.overlayElement.style, {
-            position: 'fixed',
-            inset: '0',
-            width: '100vw',
-            height: '100vh',
             display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '1rem',
-            boxSizing: 'border-box',
+            flexDirection: 'column',
         });
         const innerInjector = Injector.create({
             parent: this._injector,