codexly-ui 0.0.42 → 0.0.44

package/fesm2022/codexly-ui.mjs

@@ -11563,15 +11563,6 @@ class ClxProfileComponent {
         const t = resolveColor(this.color());
         return `${t.bgSubtle}`;
     }, ...(ngDevMode ? [{ debugName: "_headerBgClass" }] : /* istanbul ignore next */ []));
-    _badgeClass = computed(() => {
-        const t = resolveColor(this.color());
-        return `${t.bgSubtle} ${t.textSubtle}`;
-    }, ...(ngDevMode ? [{ debugName: "_badgeClass" }] : /* istanbul ignore next */ []));
-    _itemHoverClass = computed(() => {
-        const t = resolveColor(this.color());
-        return t.hoverBgSubtle;
-    }, ...(ngDevMode ? [{ debugName: "_itemHoverClass" }] : /* istanbul ignore next */ []));
-    _signOutClass = computed(() => 'text-red-600 hover:text-red-700 hover:bg-red-50', ...(ngDevMode ? [{ debugName: "_signOutClass" }] : /* istanbul ignore next */ []));
     // ── Methods ──────────────────────────────────────────────────────────────────
     _toggle() { this._isOpen.update(v => !v); }
     _close() { this._isOpen.set(false); }
@@ -11628,10 +11619,7 @@ class ClxProfileComponent {
             <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>
+              <span clx-badge [color]="color()" variant="light" size="sm" class="mt-1">{{ role() }}</span>
             }
           </div>
         </div>
@@ -11643,43 +11631,35 @@ class ClxProfileComponent {
         @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()"
+              <button clx-button variant="ghost" [color]="color()" [block]="true" [icon]="item.icon"
+                class="justify-start rounded-xl!"
                 (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()"
+          <button clx-button variant="ghost" color="red" [block]="true" icon="logout"
+            class="justify-start rounded-xl!"
             (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 });
+  `, 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: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProfileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-profile',
                     standalone: true,
-                    imports: [OverlayModule, ClxAvatarComponent, ClxIconComponent],
+                    imports: [OverlayModule, ClxAvatarComponent, ClxButtonComponent, ClxBadgeComponent],
                     template: `
     <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
     <button
@@ -11720,10 +11700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             <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>
+              <span clx-badge [color]="color()" variant="light" size="sm" class="mt-1">{{ role() }}</span>
             }
           </div>
         </div>
@@ -11735,29 +11712,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         @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()"
+              <button clx-button variant="ghost" [color]="color()" [block]="true" [icon]="item.icon"
+                class="justify-start rounded-xl!"
                 (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()"
+          <button clx-button variant="ghost" color="red" [block]="true" icon="logout"
+            class="justify-start rounded-xl!"
             (click)="_onSignOut()">
-            <span clx-icon name="logout" size="sm"></span>
             {{ signOutLabel() }}
           </button>
         </div>