codexly-ui 0.0.32 → 0.0.34

package/fesm2022/codexly-ui.mjs

@@ -145,9 +145,15 @@ const CLX_COLOR_HEX = {
 };
 
 const BADGE_SIZE_MAP = {
+    xs: 'text-[10px] px-1.5 py-0.5',
     sm: 'text-xs px-2 py-1',
     md: 'text-xs px-2.5 py-1 font-medium',
 };
+const BADGE_CIRCLE_SIZE_MAP = {
+    xs: 'text-[10px] w-4 h-4',
+    sm: 'text-xs w-5 h-5',
+    md: 'text-xs w-6 h-6 font-medium',
+};
 const BADGE_SHAPE_MAP = {
     rounded: 'rounded',
     pill: 'rounded-md',
@@ -163,7 +169,8 @@ class ClxBadgeComponent {
     _hostClass = computed(() => {
         const t = resolveColor(this.color());
         const variant = this.variant();
-        const sizeClass = BADGE_SIZE_MAP[this.size()];
+        const isCircle = this.shape() === 'circle';
+        const sizeClass = isCircle ? BADGE_CIRCLE_SIZE_MAP[this.size()] : BADGE_SIZE_MAP[this.size()];
         const shapeClass = BADGE_SHAPE_MAP[this.shape()];
         const posClass = this.positioned()
             ? 'absolute top-0 right-0 translate-x-1/2 -translate-y-1/2'
@@ -1731,7 +1738,7 @@ class ClxCarouselComponent {
     _slides = contentChildren(ClxCarouselDirective, ...(ngDevMode ? [{ debugName: "_slides" }] : []));
     _autoPlayTimer = null;
     _touchStartX = 0;
-    _zone = inject(NgZone, { optional: true }) ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
+    _zone;
     _aspectClass = computed(() => CAROUSEL_ASPECT_RATIO_MAP[this.aspectRatio()] ?? '', ...(ngDevMode ? [{ debugName: "_aspectClass" }] : []));
     _viewportClass = computed(() => {
         const base = this._aspectClass();
@@ -1748,6 +1755,8 @@ class ClxCarouselComponent {
         }));
     }, ...(ngDevMode ? [{ debugName: "_dotItems" }] : []));
     constructor() {
+        const zone = inject(NgZone, { optional: true });
+        this._zone = zone ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
         effect(() => {
             const active = this.autoPlay();
             const ms = this.interval();
@@ -4936,7 +4945,11 @@ class ClxAlertComponent {
     _resolve = inject(CLX_ALERT_RESOLVE);
     _animate = inject(ClxAnimateService);
     _el = inject((ElementRef));
-    _zone = inject(NgZone, { optional: true }) ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
+    _zone;
+    constructor() {
+        const zone = inject(NgZone, { optional: true });
+        this._zone = zone ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
+    }
     // ─── Resolved options ─────────────────────────────────────────────────────
     get _type() { return this._opts.type ?? 'info'; }
     _icon = signal(ALERT_ICON_MAP[this._type], ...(ngDevMode ? [{ debugName: "_icon" }] : []));
@@ -5157,7 +5170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
       }
     </div>
   `, styles: ["clx-alert{display:flex;align-items:center;justify-content:center;width:100%}.clx-alert-card{will-change:transform,opacity}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const MODAL_SIZE_MAP = {
     sm: 'w-full max-w-[400px]',
@@ -5984,7 +5997,11 @@ class ClxToastComponent {
     dismiss = output();
     _animate = inject(ClxAnimateService);
     _el = inject((ElementRef));
-    _zone = inject(NgZone, { optional: true }) ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
+    _zone;
+    constructor() {
+        const zone = inject(NgZone, { optional: true });
+        this._zone = zone ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
+    }
     // ─── Timer state ──────────────────────────────────────────────────────────
     _progressPct = signal(100, ...(ngDevMode ? [{ debugName: "_progressPct" }] : []));
     _timerHandle = null;
@@ -6204,7 +6221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
       }
     </div>
   `, styles: ["clx-toast{display:block;width:100%}.clx-toast-card{will-change:transform,opacity}\n"] }]
-        }], propDecorators: { entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: true }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+        }], ctorParameters: () => [], propDecorators: { entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: true }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
 
 class ClxToastContainerComponent {
     entries = model([], ...(ngDevMode ? [{ debugName: "entries" }] : []));
@@ -9066,7 +9083,7 @@ class ClxEditorComponent {
     _sourceEl;
     // ── Services ─────────────────────────────────────────────────────────────
     _cdr = inject(ChangeDetectorRef);
-    _zone = inject(NgZone, { optional: true }) ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
+    _zone;
     _destroyRef = inject(DestroyRef);
     _modal = inject(ClxModalService);
     // ── Select options ────────────────────────────────────────────────────────
@@ -9090,6 +9107,10 @@ class ClxEditorComponent {
     _copiedTimer = null;
     _onChange = () => { };
     _onTouched = () => { };
+    constructor() {
+        const zone = inject(NgZone, { optional: true });
+        this._zone = zone ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
+    }
     // ── Lifecycle ─────────────────────────────────────────────────────────────
     ngAfterViewInit() {
         document.execCommand('defaultParagraphSeparator', false, 'p');
@@ -9727,7 +9748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
       <p [class]="_sizeCfg().hint + ' text-gray-400'">{{ hint() }}</p>
     }
   `, host: { class: 'flex flex-col gap-1.5' }, styles: [".clx-editor-body:empty:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}.clx-editor-body:focus{outline:none}.clx-editor-body p{margin:0 0 .4em}.clx-editor-body p:last-child{margin-bottom:0}.clx-editor-body h1{font-size:1.5em;font-weight:700;margin:.5em 0}.clx-editor-body h2{font-size:1.25em;font-weight:600;margin:.5em 0}.clx-editor-body h3{font-size:1.1em;font-weight:600;margin:.5em 0}.clx-editor-body ul,.clx-editor-body ol{padding-left:1.5em;margin:.35em 0}.clx-editor-body li{margin:.1em 0}.clx-editor-body blockquote{border-left:3px solid #e2e8f0;padding-left:.75em;color:#64748b;margin:.4em 0}.clx-editor-body code{background:#f1f5f9;border-radius:3px;padding:.1em .3em;font-size:.875em;font-family:ui-monospace,monospace}.clx-editor-body a{color:#6366f1;text-decoration:underline}.clx-editor-body hr{border:none;border-top:1px solid #e2e8f0;margin:.6em 0}.clx-editor-color-btn{position:relative;overflow:hidden}.clx-editor-color-btn input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none;padding:0}.clx-editor-toolbar-select clx-select .flex.flex-col{gap:0!important}.clx-editor-source{width:100%;resize:none;border:none;outline:none;background:#0f172a;color:#e2e8f0;font-family:ui-monospace,Cascadia Code,Fira Code,monospace;font-size:.8125rem;line-height:1.6;padding:1rem;tab-size:2}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _bodyEl: [{
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _bodyEl: [{
                 type: ViewChild,
                 args: ['bodyEl', { static: false }]
             }], _sourceEl: [{
@@ -10882,7 +10903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
             }] } });
 
 class ClxAppLayoutComponent {
-    _zone = inject(NgZone, { optional: true }) ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
+    _zone;
     _document = inject(DOCUMENT);
     activeColor = input('indigo', ...(ngDevMode ? [{ debugName: "activeColor" }] : []));
     _sidebarOpen = signal(false, ...(ngDevMode ? [{ debugName: "_sidebarOpen" }] : []));
@@ -10891,6 +10912,10 @@ class ClxAppLayoutComponent {
     _isMobile = signal(true, ...(ngDevMode ? [{ debugName: "_isMobile" }] : []));
     collapsedChange = output();
     expandedChange = output();
+    constructor() {
+        const zone = inject(NgZone, { optional: true });
+        this._zone = zone ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
+    }
     _showBackdrop = computed(() => this._sidebarOpen() && this._isMobile(), ...(ngDevMode ? [{ debugName: "_showBackdrop" }] : []));
     _isExpanded = computed(() => !this.collapsed() || this._hovered(), ...(ngDevMode ? [{ debugName: "_isExpanded" }] : []));
     _sidebarCls = computed(() => {
@@ -11087,7 +11112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'flex h-screen overflow-hidden' },
                 }]
-        }], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
+        }], 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"] }] } });
 
 class ClxBrandComponent {
     logo = input.required(...(ngDevMode ? [{ debugName: "logo" }] : []));
@@ -11471,6 +11496,251 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
 
+class ClxProfileComponent {
+    // ── Inputs ──────────────────────────────────────────────────────────────────
+    firstName = input('', ...(ngDevMode ? [{ debugName: "firstName" }] : []));
+    lastName = input('', ...(ngDevMode ? [{ debugName: "lastName" }] : []));
+    username = input('', ...(ngDevMode ? [{ debugName: "username" }] : []));
+    role = input('', ...(ngDevMode ? [{ debugName: "role" }] : []));
+    avatarSrc = input(null, ...(ngDevMode ? [{ debugName: "avatarSrc" }] : []));
+    color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
+    signOutLabel = input('Cerrar sesión', ...(ngDevMode ? [{ debugName: "signOutLabel" }] : []));
+    // ── Outputs ─────────────────────────────────────────────────────────────────
+    menuAction = output();
+    signOut = output();
+    // ── CDK Overlay ─────────────────────────────────────────────────────────────
+    _sso = inject(ScrollStrategyOptions);
+    _scrollStrategy = this._sso.reposition();
+    _positions = [
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 },
+        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -8 },
+    ];
+    // ── State ────────────────────────────────────────────────────────────────────
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    // ── Computed ─────────────────────────────────────────────────────────────────
+    fullName = computed(() => `${this.firstName()} ${this.lastName()}`.trim() || this.username(), ...(ngDevMode ? [{ debugName: "fullName" }] : []));
+    _initials = computed(() => {
+        const f = this.firstName().charAt(0).toUpperCase();
+        const l = this.lastName().charAt(0).toUpperCase();
+        return f && l ? `${f}${l}` : (f || this.username().charAt(0).toUpperCase());
+    }, ...(ngDevMode ? [{ debugName: "_initials" }] : []));
+    _ringClass = computed(() => {
+        const t = resolveColor(this.color());
+        return `focus-visible:${t.ringBase}`;
+    }, ...(ngDevMode ? [{ debugName: "_ringClass" }] : []));
+    _headerBgClass = computed(() => {
+        const t = resolveColor(this.color());
+        return `${t.bgSubtle}`;
+    }, ...(ngDevMode ? [{ debugName: "_headerBgClass" }] : []));
+    _badgeClass = computed(() => {
+        const t = resolveColor(this.color());
+        return `${t.bgSubtle} ${t.textSubtle}`;
+    }, ...(ngDevMode ? [{ debugName: "_badgeClass" }] : []));
+    _itemHoverClass = computed(() => {
+        const t = resolveColor(this.color());
+        return t.hoverBgSubtle;
+    }, ...(ngDevMode ? [{ debugName: "_itemHoverClass" }] : []));
+    _signOutClass = computed(() => 'text-red-600 hover:text-red-700 hover:bg-red-50', ...(ngDevMode ? [{ debugName: "_signOutClass" }] : []));
+    // ── Methods ──────────────────────────────────────────────────────────────────
+    _toggle() { this._isOpen.update(v => !v); }
+    _close() { this._isOpen.set(false); }
+    _onKeydown(event) {
+        if (event.key === 'Escape')
+            this._close();
+    }
+    _onAction(action) {
+        this.menuAction.emit(action);
+        this._close();
+    }
+    _onSignOut() {
+        this.signOut.emit();
+        this._close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxProfileComponent, isStandalone: true, selector: "clx-profile", inputs: { firstName: { classPropertyName: "firstName", publicName: "firstName", isSignal: true, isRequired: false, transformFunction: null }, lastName: { classPropertyName: "lastName", publicName: "lastName", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, signOutLabel: { classPropertyName: "signOutLabel", publicName: "signOutLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuAction: "menuAction", signOut: "signOut" }, host: { classAttribute: "relative inline-flex items-center" }, ngImport: i0, template: `
+    <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
+    <button
+      #origin="cdkOverlayOrigin"
+      cdkOverlayOrigin
+      type="button"
+      class="flex items-center gap-2 rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer"
+      [class]="_ringClass()"
+      (click)="_toggle()">
+      <clx-avatar
+        [initials]="_initials()"
+        [src]="avatarSrc()"
+        [color]="color()"
+        size="sm" />
+    </button>
+
+    <!-- ── Overlay panel ─────────────────────────────────────────────────── -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_isOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_close()"
+      (overlayKeydown)="_onKeydown($event)">
+
+      <div class="w-64 bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden mt-2">
+
+        <!-- Header: avatar + name + role -->
+        <div class="px-4 py-4 flex items-center gap-3" [class]="_headerBgClass()">
+          <clx-avatar
+            [initials]="_initials()"
+            [src]="avatarSrc()"
+            [color]="color()"
+            size="md" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-semibold text-slate-800 truncate">{{ fullName() }}</p>
+            <p class="text-xs text-slate-500 truncate">{{ username() }}</p>
+            @if (role()) {
+              <span class="inline-flex items-center mt-1 px-2 py-0.5 rounded-full text-xs font-medium"
+                    [class]="_badgeClass()">
+                {{ role() }}
+              </span>
+            }
+          </div>
+        </div>
+
+        <!-- Divider -->
+        <div class="border-t border-slate-100"></div>
+
+        <!-- Menu items -->
+        @if (menuItems().length) {
+          <div class="p-1.5">
+            @for (item of menuItems(); track item.action) {
+              <button
+                type="button"
+                class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-slate-700 hover:text-slate-900 transition-colors text-left group"
+                [class]="_itemHoverClass()"
+                (click)="_onAction(item.action)">
+                <span clx-icon [name]="item.icon" size="sm"
+                      class="text-slate-400 group-hover:text-slate-600 transition-colors"></span>
+                {{ item.label }}
+              </button>
+            }
+          </div>
+          <!-- Divider before signout -->
+          <div class="border-t border-slate-100 mx-3"></div>
+        }
+
+        <!-- Sign out -->
+        <div class="p-1.5">
+          <button
+            type="button"
+            class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors text-left"
+            [class]="_signOutClass()"
+            (click)="_onSignOut()">
+            <span clx-icon name="logout" size="sm"></span>
+            {{ signOutLabel() }}
+          </button>
+        </div>
+
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ClxAvatarComponent, selector: "clx-avatar", inputs: ["src", "initials", "iconName", "color", "size", "shape", "alt"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxProfileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-profile',
+                    standalone: true,
+                    imports: [OverlayModule, ClxAvatarComponent, ClxIconComponent, ClxButtonComponent],
+                    template: `
+    <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
+    <button
+      #origin="cdkOverlayOrigin"
+      cdkOverlayOrigin
+      type="button"
+      class="flex items-center gap-2 rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer"
+      [class]="_ringClass()"
+      (click)="_toggle()">
+      <clx-avatar
+        [initials]="_initials()"
+        [src]="avatarSrc()"
+        [color]="color()"
+        size="sm" />
+    </button>
+
+    <!-- ── Overlay panel ─────────────────────────────────────────────────── -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_isOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_close()"
+      (overlayKeydown)="_onKeydown($event)">
+
+      <div class="w-64 bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden mt-2">
+
+        <!-- Header: avatar + name + role -->
+        <div class="px-4 py-4 flex items-center gap-3" [class]="_headerBgClass()">
+          <clx-avatar
+            [initials]="_initials()"
+            [src]="avatarSrc()"
+            [color]="color()"
+            size="md" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-semibold text-slate-800 truncate">{{ fullName() }}</p>
+            <p class="text-xs text-slate-500 truncate">{{ username() }}</p>
+            @if (role()) {
+              <span class="inline-flex items-center mt-1 px-2 py-0.5 rounded-full text-xs font-medium"
+                    [class]="_badgeClass()">
+                {{ role() }}
+              </span>
+            }
+          </div>
+        </div>
+
+        <!-- Divider -->
+        <div class="border-t border-slate-100"></div>
+
+        <!-- Menu items -->
+        @if (menuItems().length) {
+          <div class="p-1.5">
+            @for (item of menuItems(); track item.action) {
+              <button
+                type="button"
+                class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-slate-700 hover:text-slate-900 transition-colors text-left group"
+                [class]="_itemHoverClass()"
+                (click)="_onAction(item.action)">
+                <span clx-icon [name]="item.icon" size="sm"
+                      class="text-slate-400 group-hover:text-slate-600 transition-colors"></span>
+                {{ item.label }}
+              </button>
+            }
+          </div>
+          <!-- Divider before signout -->
+          <div class="border-t border-slate-100 mx-3"></div>
+        }
+
+        <!-- Sign out -->
+        <div class="p-1.5">
+          <button
+            type="button"
+            class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors text-left"
+            [class]="_signOutClass()"
+            (click)="_onSignOut()">
+            <span clx-icon name="logout" size="sm"></span>
+            {{ signOutLabel() }}
+          </button>
+        </div>
+
+      </div>
+    </ng-template>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'relative inline-flex items-center' },
+                }]
+        }], propDecorators: { firstName: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstName", required: false }] }], lastName: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastName", required: false }] }], username: [{ type: i0.Input, args: [{ isSignal: true, alias: "username", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], signOutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "signOutLabel", required: false }] }], menuAction: [{ type: i0.Output, args: ["menuAction"] }], signOut: [{ type: i0.Output, args: ["signOut"] }] } });
+
 // ── Base classes ─────────────────────────────────────────────────────────────
 const TABLE_BASE_CLASS = 'w-full text-left border-collapse text-sm';
 const TABLE_HEADER_CELL_CLASS = 'px-4 py-3 font-semibold whitespace-nowrap';
@@ -14089,5 +14359,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_COLOR_HEX, CLX_COLOR_MAP, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_RADIO_GROUP, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxTimelineComponent, ClxTimelineItemComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, parseColorInput, resolveColor };
+export { CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_COLOR_HEX, CLX_COLOR_MAP, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_RADIO_GROUP, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxTimelineComponent, ClxTimelineItemComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, parseColorInput, resolveColor };
 //# sourceMappingURL=codexly-ui.mjs.map