codexly-ui 0.10.101 → 0.10.103

package/fesm2022/codexly-ui.mjs

@@ -10085,7 +10085,7 @@ class ClxAppLayoutComponent {
       aria-label="Navegación principal">
 
       <!-- Brand slot -->
-      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
+      <div class="border-b border-clx-border shrink-0 overflow-hidden">
         <ng-content select="clx-brand"></ng-content>
       </div>
 
@@ -10147,7 +10147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       aria-label="Navegación principal">
 
       <!-- Brand slot -->
-      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
+      <div class="border-b border-clx-border shrink-0 overflow-hidden">
         <ng-content select="clx-brand"></ng-content>
       </div>
 
@@ -10190,6 +10190,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], 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"] }] } });
 
+const SIZE_CLASSES = {
+    md: {
+        wrapper: 'flex items-center gap-3 px-4 py-4',
+        wrapperCollapsed: 'flex items-center justify-center py-4',
+        logo: 'h-8 w-8 shrink-0 object-contain',
+        name: 'text-sm font-semibold truncate leading-tight',
+        description: 'text-xs truncate leading-tight',
+    },
+    lg: {
+        wrapper: 'flex items-center justify-center gap-3 px-4 py-2.5',
+        wrapperCollapsed: 'flex items-center justify-center py-2.5',
+        logo: 'h-11 w-11 shrink-0 object-contain',
+        name: 'text-lg font-semibold truncate leading-tight',
+        description: 'text-sm truncate leading-tight',
+    },
+};
 class ClxBrandComponent {
     _sanitizer = inject(DomSanitizer);
     logo = input.required(...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
@@ -10202,20 +10218,24 @@ class ClxBrandComponent {
     nameHtml = input(undefined, ...(ngDevMode ? [{ debugName: "nameHtml" }] : /* istanbul ignore next */ []));
     description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** 'md' (default) preserves the original compact, left-aligned look. 'lg' centers the whole
+     *  block and enlarges the logo/name for a more prominent brand splash. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    _sizeClasses = computed(() => SIZE_CLASSES[this.size()], ...(ngDevMode ? [{ debugName: "_sizeClasses" }] : /* istanbul ignore next */ []));
     _safeNameHtml = computed(() => this._sanitizer.bypassSecurityTrustHtml(this.nameHtml() ?? ''), ...(ngDevMode ? [{ debugName: "_safeNameHtml" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxBrandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxBrandComponent, isStandalone: true, selector: "clx-brand", inputs: { logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, nameHtml: { classPropertyName: "nameHtml", publicName: "nameHtml", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
-    <div [class]="collapsed() ? 'flex items-center justify-center py-4' : 'flex items-center gap-3 px-4 py-4'">
-      <img [src]="logo()" [alt]="name()" class="h-8 w-8 shrink-0 object-contain" />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxBrandComponent, isStandalone: true, selector: "clx-brand", inputs: { logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, nameHtml: { classPropertyName: "nameHtml", publicName: "nameHtml", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div [class]="collapsed() ? _sizeClasses().wrapperCollapsed : _sizeClasses().wrapper">
+      <img [src]="logo()" [alt]="name()" [class]="_sizeClasses().logo" />
       @if (!collapsed()) {
         <div class="min-w-0 overflow-hidden">
           @if (nameHtml()) {
-            <p class="text-sm font-semibold truncate leading-tight" [innerHTML]="_safeNameHtml()"></p>
+            <p [class]="_sizeClasses().name" [innerHTML]="_safeNameHtml()"></p>
           } @else {
-            <p class="text-clx-text-label text-sm font-semibold truncate leading-tight">{{ name() }}</p>
+            <p class="text-clx-text-label" [class]="_sizeClasses().name">{{ name() }}</p>
           }
           @if (description()) {
-            <p class="text-clx-text-muted text-xs truncate leading-tight">{{ description() }}</p>
+            <p class="text-clx-text-muted" [class]="_sizeClasses().description">{{ description() }}</p>
           }
         </div>
       }
@@ -10228,17 +10248,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     selector: 'clx-brand',
                     standalone: true,
                     template: `
-    <div [class]="collapsed() ? 'flex items-center justify-center py-4' : 'flex items-center gap-3 px-4 py-4'">
-      <img [src]="logo()" [alt]="name()" class="h-8 w-8 shrink-0 object-contain" />
+    <div [class]="collapsed() ? _sizeClasses().wrapperCollapsed : _sizeClasses().wrapper">
+      <img [src]="logo()" [alt]="name()" [class]="_sizeClasses().logo" />
       @if (!collapsed()) {
         <div class="min-w-0 overflow-hidden">
           @if (nameHtml()) {
-            <p class="text-sm font-semibold truncate leading-tight" [innerHTML]="_safeNameHtml()"></p>
+            <p [class]="_sizeClasses().name" [innerHTML]="_safeNameHtml()"></p>
           } @else {
-            <p class="text-clx-text-label text-sm font-semibold truncate leading-tight">{{ name() }}</p>
+            <p class="text-clx-text-label" [class]="_sizeClasses().name">{{ name() }}</p>
           }
           @if (description()) {
-            <p class="text-clx-text-muted text-xs truncate leading-tight">{{ description() }}</p>
+            <p class="text-clx-text-muted" [class]="_sizeClasses().description">{{ description() }}</p>
           }
         </div>
       }
@@ -10248,7 +10268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], propDecorators: { logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], nameHtml: [{ type: i0.Input, args: [{ isSignal: true, alias: "nameHtml", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
+        }], propDecorators: { logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], nameHtml: [{ type: i0.Input, args: [{ isSignal: true, alias: "nameHtml", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 // ── Item geometry ──────────────────────────────────────────────────────────────
 const NAV_ITEM_BASE = 'flex items-center gap-3 cursor-pointer select-none';