codexly-ui 0.1.16 → 0.1.18

package/assets/styles/_globals.css

@@ -27,6 +27,12 @@
 }
 
 
+/* ── Suppress transitions during window resize ───────────────────────────── */
+html.clx-resizing *, html.clx-resizing *::before, html.clx-resizing *::after {
+  transition: none !important;
+  animation: none !important;
+}
+
 /* ── Scrollbar ───────────────────────────────────────────────────────────── */
 ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
 ::-webkit-scrollbar-track { background-color: transparent; }

package/fesm2022/codexly-ui.mjs

@@ -5471,6 +5471,7 @@ class ClxAlertComponent {
     _resolve = inject(CLX_ALERT_RESOLVE);
     _animate = inject(ClxAnimateService);
     _el = inject((ElementRef));
+    _themeSvc = inject(ClxThemeService);
     _zone;
     constructor() {
         const zone = inject(NgZone, { optional: true });
@@ -5478,17 +5479,36 @@ class ClxAlertComponent {
     }
     // ─── Resolved options ─────────────────────────────────────────────────────
     get _type() { return this._opts.type ?? 'info'; }
+    get _isConfirm() { return this._type === 'confirm'; }
     _icon = signal(ALERT_ICON_MAP[this._type], ...(ngDevMode ? [{ debugName: "_icon" }] : /* istanbul ignore next */ []));
-    _iconBg = signal(ALERT_ICON_BG_MAP[this._type], ...(ngDevMode ? [{ debugName: "_iconBg" }] : /* istanbul ignore next */ []));
-    _iconColor = signal(ALERT_ICON_COLOR_MAP[this._type], ...(ngDevMode ? [{ debugName: "_iconColor" }] : /* istanbul ignore next */ []));
-    _progressColor = signal(ALERT_PROGRESS_COLOR_MAP[this._type], ...(ngDevMode ? [{ debugName: "_progressColor" }] : /* istanbul ignore next */ []));
     _title = signal(this._opts.title ?? '', ...(ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []));
     _message = signal(this._opts.message ?? '', ...(ngDevMode ? [{ debugName: "_message" }] : /* istanbul ignore next */ []));
     _showCancel = signal(this._opts.showCancelButton ?? this._opts.type === 'confirm', ...(ngDevMode ? [{ debugName: "_showCancel" }] : /* istanbul ignore next */ []));
+    _iconBg = computed(() => {
+        if (!this._isConfirm)
+            return ALERT_ICON_BG_MAP[this._type];
+        return resolveColor(this._themeSvc.config().primaryColor).bgSubtle;
+    }, ...(ngDevMode ? [{ debugName: "_iconBg" }] : /* istanbul ignore next */ []));
+    _iconColor = computed(() => {
+        if (!this._isConfirm)
+            return ALERT_ICON_COLOR_MAP[this._type];
+        return resolveColor(this._themeSvc.config().primaryColor).textSubtle;
+    }, ...(ngDevMode ? [{ debugName: "_iconColor" }] : /* istanbul ignore next */ []));
+    _progressColor = computed(() => {
+        if (!this._isConfirm)
+            return ALERT_PROGRESS_COLOR_MAP[this._type];
+        return resolveColor(this._themeSvc.config().primaryColor).bg;
+    }, ...(ngDevMode ? [{ debugName: "_progressColor" }] : /* istanbul ignore next */ []));
     _confirmText = signal(this._opts.confirmButton?.text ?? 'Aceptar', ...(ngDevMode ? [{ debugName: "_confirmText" }] : /* istanbul ignore next */ []));
-    _confirmColor = signal(this._opts.confirmButton?.color ?? ALERT_CONFIRM_COLOR_MAP[this._type], ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
+    _confirmColor = computed(() => {
+        if (this._opts.confirmButton?.color)
+            return this._opts.confirmButton.color;
+        if (this._isConfirm)
+            return this._themeSvc.config().primaryColor;
+        return ALERT_CONFIRM_COLOR_MAP[this._type];
+    }, ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
     _cancelText = signal(this._opts.cancelButton?.text ?? 'Cancelar', ...(ngDevMode ? [{ debugName: "_cancelText" }] : /* istanbul ignore next */ []));
-    _cancelColor = signal(this._opts.cancelButton?.color ?? 'slate', ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
+    _cancelColor = computed(() => this._opts.cancelButton?.color ?? this._themeSvc.config().secondaryColor, ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
     _cancelVariant = signal(this._opts.cancelButton?.variant ?? 'ghost', ...(ngDevMode ? [{ debugName: "_cancelVariant" }] : /* istanbul ignore next */ []));
     // ─── Timer state ─────────────────────────────────────────────────────────
     _timerTotal = signal(this._opts.timer ?? 0, ...(ngDevMode ? [{ debugName: "_timerTotal" }] : /* istanbul ignore next */ []));
@@ -11799,6 +11819,8 @@ class ClxAppLayoutComponent {
     }, ...(ngDevMode ? [{ debugName: "_sidebarCls" }] : /* istanbul ignore next */ []));
     _mql;
     _mqlListener;
+    _resizeTimer = null;
+    _resizeListener;
     ngOnInit() {
         const win = this._document.defaultView;
         if (!win)
@@ -11821,9 +11843,26 @@ class ClxAppLayoutComponent {
             });
         };
         this._mql.addEventListener('change', this._mqlListener);
+        // Disable CSS transitions during window resize to prevent jank
+        this._resizeListener = () => {
+            this._document.documentElement.classList.add('clx-resizing');
+            if (this._resizeTimer !== null)
+                clearTimeout(this._resizeTimer);
+            this._resizeTimer = setTimeout(() => {
+                this._document.documentElement.classList.remove('clx-resizing');
+                this._resizeTimer = null;
+            }, 150);
+        };
+        this._zone.runOutsideAngular(() => {
+            win.addEventListener('resize', this._resizeListener, { passive: true });
+        });
     }
     ngOnDestroy() {
         this._mql?.removeEventListener('change', this._mqlListener);
+        const win = this._document.defaultView;
+        win?.removeEventListener('resize', this._resizeListener);
+        if (this._resizeTimer !== null)
+            clearTimeout(this._resizeTimer);
     }
     _toggleCollapsed() {
         const next = !this.collapsed();