codexly-ui 0.0.47 → 0.0.49

package/fesm2022/codexly-ui.mjs

@@ -5205,6 +5205,7 @@ const MODAL_SIZE_MAP = {
 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');
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const CLX_MODAL_REF = new InjectionToken('CLX_MODAL_REF');
 const CLX_MODAL_ANIM_CONFIG = new InjectionToken('CLX_MODAL_ANIM_CONFIG');
@@ -5219,6 +5220,11 @@ const DRAWER_SIZE_MAP = {
     md: 'w-full max-w-[420px]',
     lg: 'w-full max-w-[560px]',
 };
+const DRAWER_WIDTH_MAP = {
+    sm: '320px',
+    md: '420px',
+    lg: '560px',
+};
 const DRAWER_CONTAINER_CLASS = 'flex flex-col bg-white shadow-2xl overflow-hidden h-full';
 const CLX_DRAWER_SIZE = new InjectionToken('CLX_DRAWER_SIZE');
 
@@ -5367,7 +5373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], 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"] }] } });
 
 class ClxModalComponent {
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     showClose = input(true, ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
     confirmButton = input(undefined, ...(ngDevMode ? [{ debugName: "confirmButton" }] : /* istanbul ignore next */ []));
     cancelButton = input(undefined, ...(ngDevMode ? [{ debugName: "cancelButton" }] : /* istanbul ignore next */ []));
@@ -5375,7 +5381,9 @@ class ClxModalComponent {
     confirmClick = output();
     cancelClick = output();
     _modalRef = inject(CLX_MODAL_REF, { optional: true });
-    _hostClass = computed(() => `${MODAL_CONTAINER_CLASS} ${MODAL_SIZE_MAP[this.size()]} max-h-[90vh]`, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
+    _sizeToken = inject(CLX_MODAL_SIZE, { optional: true });
+    _resolvedSize = computed(() => this.size() ?? this._sizeToken ?? 'md', ...(ngDevMode ? [{ debugName: "_resolvedSize" }] : /* istanbul ignore next */ []));
+    _hostClass = computed(() => `${MODAL_CONTAINER_CLASS} ${MODAL_SIZE_MAP[this._resolvedSize()]} max-h-[90vh]`, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     _hasBuiltInButtons = computed(() => !!this.confirmButton(), ...(ngDevMode ? [{ debugName: "_hasBuiltInButtons" }] : /* istanbul ignore next */ []));
     _confirmText = computed(() => this.confirmButton()?.text ?? 'Aceptar', ...(ngDevMode ? [{ debugName: "_confirmText" }] : /* istanbul ignore next */ []));
     _confirmColor = computed(() => this.confirmButton()?.color ?? 'indigo', ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
@@ -8972,7 +8980,7 @@ class ClxModalService {
     open(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     component, config = {}) {
-        const { hasBackdrop = true, disableClose = false, panelClass = [], data, animationIn = MODAL_ANIM_DEFAULTS.animationIn, animationOut = MODAL_ANIM_DEFAULTS.animationOut, animationDuration = MODAL_ANIM_DEFAULTS.animationDuration, } = config;
+        const { hasBackdrop = true, disableClose = false, panelClass = [], size = 'md', data, animationIn = MODAL_ANIM_DEFAULTS.animationIn, animationOut = MODAL_ANIM_DEFAULTS.animationOut, animationDuration = MODAL_ANIM_DEFAULTS.animationDuration, } = config;
         const animConfig = { animationIn, animationOut, animationDuration };
         let _resolve;
         const _afterClosed = new Promise(res => (_resolve = res));
@@ -9014,6 +9022,7 @@ class ClxModalService {
                 { provide: CLX_MODAL_DATA, useValue: data ?? null },
                 { provide: CLX_MODAL_REF, useValue: modalRef },
                 { provide: CLX_MODAL_ANIM_CONFIG, useValue: animConfig },
+                { provide: CLX_MODAL_SIZE, useValue: size },
             ],
         });
         // Attach wrapper — CDK creates the backdrop on attach()
@@ -13915,6 +13924,7 @@ class ClxDrawerService {
         const wrapperRef = overlayRef.attach(wrapperPortal);
         // Apply drawer-specific styles AFTER attach() so CDK doesn't overwrite them
         Object.assign(overlayRef.overlayElement.style, {
+            width: DRAWER_WIDTH_MAP[size],
             height: '100vh',
             pointerEvents: 'none',
         });