codexly-ui 0.8.1 → 0.8.3

package/fesm2022/codexly-ui.mjs

@@ -9399,6 +9399,9 @@ class ClxAppLayoutComponent {
     collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     _hovered = signal(false, ...(ngDevMode ? [{ debugName: "_hovered" }] : /* istanbul ignore next */ []));
     _isMobile = signal(true, ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
+    /** True only for the duration of an explicit toggle/hover transition — see _sidebarCls(). */
+    _animating = signal(false, ...(ngDevMode ? [{ debugName: "_animating" }] : /* istanbul ignore next */ []));
+    _animatingTimer;
     collapsedChange = output();
     expandedChange = output();
     constructor() {
@@ -9422,12 +9425,22 @@ class ClxAppLayoutComponent {
             width = 'w-72';
         }
         const isOverlay = isDesktopCollapsed && hovered;
+        // `width` only transitions while `_animating` is true (set for the duration of an explicit
+        // collapse/expand/hover toggle — see _withTransition()). Left permanently on, this transition
+        // would also animate every layout pass a native window resize causes (the sidebar's computed
+        // width changes as a flex/fixed side-effect of the viewport reflow even when its Tailwind
+        // width class hasn't), turning a single instant reflow into a 300ms interpolated one and
+        // dragging the rest of the flex-sibling content along with it — the classic "resize lags,
+        // catches up after you stop" symptom.
+        const transition = this._animating()
+            ? 'transition-[width,transform] duration-300 ease-in-out lg:transition-[width]'
+            : 'transition-none';
         return [
             `fixed inset-y-0 left-0 z-30 ${width} flex flex-col`,
             'bg-clx-surface border-r border-clx-border overflow-hidden shrink-0',
-            'transition-[width,transform] duration-300 ease-in-out',
+            transition,
             isOverlay ? 'shadow-2xl' : '',
-            'lg:transition-[width] lg:relative lg:inset-auto lg:z-30 lg:translate-x-0',
+            '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 */ []));
@@ -9458,23 +9471,38 @@ class ClxAppLayoutComponent {
     }
     ngOnDestroy() {
         this._mql?.removeEventListener('change', this._mqlListener);
+        clearTimeout(this._animatingTimer);
+    }
+    /** Arms the width/transform transition for one toggle's duration, then switches it back off
+     *  so a later window resize reflow doesn't get caught by a live CSS transition on `width`. */
+    _withTransition(fn) {
+        this._animating.set(true);
+        fn();
+        clearTimeout(this._animatingTimer);
+        this._animatingTimer = setTimeout(() => this._animating.set(false), 320);
     }
     _toggleCollapsed() {
-        const next = !this.collapsed();
-        this.collapsed.set(next);
-        this._hovered.set(false);
-        this.collapsedChange.emit(next);
+        this._withTransition(() => {
+            const next = !this.collapsed();
+            this.collapsed.set(next);
+            this._hovered.set(false);
+            this.collapsedChange.emit(next);
+        });
     }
     _onSidebarEnter() {
         if (this.collapsed() && !this._isMobile()) {
-            this._hovered.set(true);
-            this.expandedChange.emit(true);
+            this._withTransition(() => {
+                this._hovered.set(true);
+                this.expandedChange.emit(true);
+            });
         }
     }
     _onSidebarLeave() {
         if (this._hovered()) {
-            this._hovered.set(false);
-            this.expandedChange.emit(false);
+            this._withTransition(() => {
+                this._hovered.set(false);
+                this.expandedChange.emit(false);
+            });
         }
     }
     toggleSidebar() { this._sidebarOpen.update(v => !v); }
@@ -10055,18 +10083,22 @@ class ClxPageHeaderComponent {
     _titleSlot = contentChild(ClxPageHeaderTitleDirective, ...(ngDevMode ? [{ debugName: "_titleSlot" }] : /* istanbul ignore next */ []));
     _hasCustomTitle = computed(() => !!this._titleSlot(), ...(ngDevMode ? [{ debugName: "_hasCustomTitle" }] : /* istanbul ignore next */ []));
     _color = computed(() => this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
-    _titleClass = computed(() => {
+    /** Title classes resolved from the theme — also usable by consumers projecting a custom
+     *  [clxPageHeaderTitle] block, via a template reference: `<clx-page-header #ph="clxPageHeader">`
+     *  then `[class]="ph.titleClass()"` on their own <h1>. */
+    titleClass = computed(() => {
         const s = this._themeSvc.pageHeaderTitleStyle();
         const colorCls = s.color ? resolveColor(s.color).textSubtle : 'text-clx-text-label';
         return `${TEXT_SIZE_CLASS[s.size]} font-[${s.weight}] ${colorCls} truncate`;
-    }, ...(ngDevMode ? [{ debugName: "_titleClass" }] : /* istanbul ignore next */ []));
-    _subtitleClass = computed(() => {
+    }, ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+    /** Subtitle classes resolved from the theme — same usage as titleClass. */
+    subtitleClass = computed(() => {
         const s = this._themeSvc.pageHeaderSubtitleStyle();
         const colorCls = s.color ? resolveColor(s.color).textSubtle : 'text-clx-text-muted';
         return `${TEXT_SIZE_CLASS[s.size]} font-[${s.weight}] ${colorCls} mt-0.5`;
-    }, ...(ngDevMode ? [{ debugName: "_subtitleClass" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "subtitleClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageHeaderComponent, isStandalone: true, selector: "clx-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { classAttribute: "flex items-center gap-3 flex-wrap" }, queries: [{ propertyName: "_titleSlot", first: true, predicate: ClxPageHeaderTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageHeaderComponent, isStandalone: true, selector: "clx-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { classAttribute: "flex items-center gap-3 flex-wrap" }, queries: [{ propertyName: "_titleSlot", first: true, predicate: ClxPageHeaderTitleDirective, descendants: true, isSignal: true }], exportAs: ["clxPageHeader"], ngImport: i0, template: `
     @if (showBack()) {
       <button clx-button variant="ghost" [color]="_color()" icon="arrow_back" [iconOnly]="true"
         (click)="back.emit()"></button>
@@ -10079,9 +10111,9 @@ class ClxPageHeaderComponent {
         </div>
       } @else {
         <div class="min-w-0">
-          <h1 [class]="_titleClass()">{{ title() }}</h1>
+          <h1 [class]="titleClass()">{{ title() }}</h1>
           @if (subtitle()) {
-            <p [class]="_subtitleClass()">{{ subtitle() }}</p>
+            <p [class]="subtitleClass()">{{ subtitle() }}</p>
           }
         </div>
       }
@@ -10094,6 +10126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{
                     selector: 'clx-page-header',
                     standalone: true,
+                    exportAs: 'clxPageHeader',
                     imports: [ClxButtonComponent],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -10111,9 +10144,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         </div>
       } @else {
         <div class="min-w-0">
-          <h1 [class]="_titleClass()">{{ title() }}</h1>
+          <h1 [class]="titleClass()">{{ title() }}</h1>
           @if (subtitle()) {
-            <p [class]="_subtitleClass()">{{ subtitle() }}</p>
+            <p [class]="subtitleClass()">{{ subtitle() }}</p>
           }
         </div>
       }