codexly-ui 0.0.45 → 0.0.47

package/assets/styles/_globals.css

@@ -0,0 +1,15 @@
+/* ── Modal backdrop ─────────────────────────────────────────────────────── */
+.clx-modal-backdrop {
+  background-color: rgba(15, 23, 42, 0.40);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+/* ── Scrollbar ───────────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 0.5rem; }
+::-webkit-scrollbar-track { background-color: transparent; }
+::-webkit-scrollbar-thumb {
+  background-color: var(--clx-scrollbar);
+  border-radius: 0.5rem;
+}
+::-webkit-scrollbar-thumb:hover { background-color: var(--clx-scrollbar-hover); }

package/fesm2022/codexly-ui.mjs

@@ -5220,9 +5220,10 @@ const DRAWER_SIZE_MAP = {
     lg: 'w-full max-w-[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');
 
 class ClxDrawerComponent {
-    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 */ []));
@@ -5230,7 +5231,9 @@ class ClxDrawerComponent {
     confirmClick = output();
     cancelClick = output();
     _modalRef = inject(CLX_MODAL_REF, { optional: true });
-    _hostClass = computed(() => `${DRAWER_CONTAINER_CLASS} ${DRAWER_SIZE_MAP[this.size()]}`, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
+    _sizeToken = inject(CLX_DRAWER_SIZE, { optional: true });
+    _resolvedSize = computed(() => this.size() ?? this._sizeToken ?? 'md', ...(ngDevMode ? [{ debugName: "_resolvedSize" }] : /* istanbul ignore next */ []));
+    _hostClass = computed(() => `${DRAWER_CONTAINER_CLASS} ${DRAWER_SIZE_MAP[this._resolvedSize()]}`, ...(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 */ []));
@@ -13877,7 +13880,7 @@ class ClxDrawerService {
     open(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     component, config = {}) {
-        const { hasBackdrop = false, disableClose = false, panelClass = [], data, } = config;
+        const { hasBackdrop = false, disableClose = false, panelClass = [], size = 'md', data, } = config;
         let _resolve;
         const _afterClosed = new Promise(res => (_resolve = res));
         let _focusTrap = null;
@@ -13904,6 +13907,7 @@ class ClxDrawerService {
             providers: [
                 { provide: CLX_MODAL_DATA, useValue: data ?? null },
                 { provide: CLX_MODAL_REF, useValue: drawerRef },
+                { provide: CLX_DRAWER_SIZE, useValue: size },
             ],
         });
         // Attach wrapper via ComponentPortal — CDK creates backdrop on attach()