codexly-ui 0.0.57 → 0.0.59

package/assets/styles/_safelist.css

@@ -1,5 +1,6 @@
 /* ── Safelist: all color shades for dynamic class binding ── */
 @source inline("{bg,hover:bg,ring,hover:ring,focus:ring,focus-within:ring,hover:border,border,focus:border,focus-within:border,text}-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}{/10,/20,/25,/50,/75,}");
-@source inline("{bg,hover:bg,focus:ring,focus-within:ring,border,focus:border,focus-within:border,hover:border}-{white,black,transparent}");
+@source inline("{bg,hover:bg,focus:ring,focus-within:ring,border,focus:border,focus-within:border,hover:border,border-t}-{white,black,transparent}");
+@source inline("border-white/30 border-t-white");
 @source inline("text-{black,white}");
 @source inline("focus:ring-2 focus-within:ring-2 ring-2");

package/fesm2022/codexly-ui.mjs

@@ -616,6 +616,8 @@ class ClxSpinnerComponent {
         const size = SPINNER_SIZE_MAP[this.size()];
         if (this.color() === 'inherit')
             return `${size} border-current/30 border-t-current`;
+        if (this.color() === 'white')
+            return `${size} border-white/30 border-t-white`;
         const t = resolveColor(this.color());
         return `${size} ${t.borderLight} ${t.border.replace('border-', 'border-t-')}`;
     }, ...(ngDevMode ? [{ debugName: "_spinnerClass" }] : /* istanbul ignore next */ []));
@@ -10950,9 +10952,7 @@ class ClxAppLayoutComponent {
     _sidebarOpen = signal(false, ...(ngDevMode ? [{ debugName: "_sidebarOpen" }] : /* istanbul ignore next */ []));
     collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     _hovered = signal(false, ...(ngDevMode ? [{ debugName: "_hovered" }] : /* istanbul ignore next */ []));
-    _transitioning = signal(false, ...(ngDevMode ? [{ debugName: "_transitioning" }] : /* istanbul ignore next */ []));
     _isMobile = signal(true, ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
-    _transitionTimer = null;
     collapsedChange = output();
     expandedChange = output();
     constructor() {
@@ -10976,15 +10976,12 @@ class ClxAppLayoutComponent {
             width = 'w-72';
         }
         const isOverlay = isDesktopCollapsed && hovered;
-        const transition = this._transitioning()
-            ? 'transition-[width,transform] duration-300 ease-in-out'
-            : '';
         return [
             `fixed inset-y-0 left-0 z-30 ${width} flex flex-col`,
             'bg-slate-900 overflow-hidden shrink-0',
-            transition,
+            'transition-[width,transform] duration-300 ease-in-out',
             isOverlay ? 'shadow-2xl' : '',
-            'lg:relative lg:inset-auto lg:z-30 lg:translate-x-0',
+            'lg:transition-[width] lg:relative lg:inset-auto lg:z-30 lg:translate-x-0',
             (!this._isMobile() || this._sidebarOpen()) ? 'translate-x-0' : '-translate-x-full',
         ].join(' ');
     }, ...(ngDevMode ? [{ debugName: "_sidebarCls" }] : /* istanbul ignore next */ []));
@@ -11015,17 +11012,8 @@ class ClxAppLayoutComponent {
     }
     ngOnDestroy() {
         this._mql?.removeEventListener('change', this._mqlListener);
-        if (this._transitionTimer)
-            clearTimeout(this._transitionTimer);
-    }
-    _enableTransition() {
-        this._transitioning.set(true);
-        if (this._transitionTimer)
-            clearTimeout(this._transitionTimer);
-        this._transitionTimer = setTimeout(() => this._transitioning.set(false), 320);
     }
     _toggleCollapsed() {
-        this._enableTransition();
         const next = !this.collapsed();
         this.collapsed.set(next);
         this._hovered.set(false);
@@ -11033,23 +11021,21 @@ class ClxAppLayoutComponent {
     }
     _onSidebarEnter() {
         if (this.collapsed() && !this._isMobile()) {
-            this._enableTransition();
             this._hovered.set(true);
             this.expandedChange.emit(true);
         }
     }
     _onSidebarLeave() {
         if (this._hovered()) {
-            this._enableTransition();
             this._hovered.set(false);
             this.expandedChange.emit(false);
         }
     }
-    toggleSidebar() { this._enableTransition(); this._sidebarOpen.update(v => !v); }
-    openSidebar() { this._enableTransition(); this._sidebarOpen.set(true); }
-    closeSidebar() { this._enableTransition(); this._sidebarOpen.set(false); }
+    toggleSidebar() { this._sidebarOpen.update(v => !v); }
+    openSidebar() { this._sidebarOpen.set(true); }
+    closeSidebar() { this._sidebarOpen.set(false); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAppLayoutComponent, isStandalone: true, selector: "clx-app-layout", inputs: { activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange", expandedChange: "expandedChange" }, host: { styleAttribute: "position:fixed;inset:0", classAttribute: "flex overflow-hidden" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAppLayoutComponent, isStandalone: true, selector: "clx-app-layout", inputs: { activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange", expandedChange: "expandedChange" }, host: { classAttribute: "flex h-screen overflow-hidden" }, ngImport: i0, template: `
     <!-- Mobile backdrop -->
     @if (_showBackdrop()) {
       <div
@@ -11168,7 +11154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'flex overflow-hidden', style: 'position:fixed;inset:0' },
+                    host: { class: 'flex h-screen overflow-hidden' },
                 }]
         }], ctorParameters: () => [], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });