codexly-ui 0.0.21 → 0.0.24

package/fesm2022/codexly-ui.mjs

@@ -10900,7 +10900,7 @@ class ClxAppLayoutComponent {
             width = 'w-72';
         }
         else if (isDesktopCollapsed) {
-            width = 'w-16';
+            width = 'w-20';
         }
         else {
             width = 'w-72';
@@ -10908,7 +10908,7 @@ class ClxAppLayoutComponent {
         const isOverlay = isDesktopCollapsed && hovered;
         return [
             `fixed inset-y-0 left-0 z-30 ${width} flex flex-col`,
-            'bg-slate-900 overflow-y-auto shrink-0',
+            'bg-slate-900 overflow-hidden shrink-0',
             'transition-[width,transform] duration-300 ease-in-out',
             isOverlay ? 'shadow-2xl' : '',
             'lg:transition-[width] lg:relative lg:inset-auto lg:z-30 lg:translate-x-0',
@@ -10981,7 +10981,15 @@ class ClxAppLayoutComponent {
       (mouseenter)="_onSidebarEnter()"
       (mouseleave)="_onSidebarLeave()"
       aria-label="Navegación principal">
-      <ng-content select="[clx-sidebar]"></ng-content>
+
+      <!-- Brand slot -->
+      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
+        <ng-content select="clx-brand"></ng-content>
+      </div>
+
+      <div class="flex-1 overflow-y-auto overflow-x-hidden">
+        <ng-content select="[clx-sidebar]"></ng-content>
+      </div>
     </aside>
 
     <!-- Right panel -->
@@ -11035,7 +11043,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
       (mouseenter)="_onSidebarEnter()"
       (mouseleave)="_onSidebarLeave()"
       aria-label="Navegación principal">
-      <ng-content select="[clx-sidebar]"></ng-content>
+
+      <!-- Brand slot -->
+      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
+        <ng-content select="clx-brand"></ng-content>
+      </div>
+
+      <div class="flex-1 overflow-y-auto overflow-x-hidden">
+        <ng-content select="[clx-sidebar]"></ng-content>
+      </div>
     </aside>
 
     <!-- Right panel -->
@@ -11072,6 +11088,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                 }]
         }], 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" }] : []));
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxBrandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", 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 }, 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="flex items-center gap-3 px-4 py-4">
+      <img [src]="logo()" [alt]="name()" class="h-8 w-8 shrink-0 object-contain" />
+      @if (!collapsed()) {
+        <div class="min-w-0 overflow-hidden">
+          <p class="text-white text-sm font-semibold truncate leading-tight">{{ name() }}</p>
+          @if (description()) {
+            <p class="text-slate-400 text-xs truncate leading-tight">{{ description() }}</p>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxBrandComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-brand',
+                    standalone: true,
+                    template: `
+    <div class="flex items-center gap-3 px-4 py-4">
+      <img [src]="logo()" [alt]="name()" class="h-8 w-8 shrink-0 object-contain" />
+      @if (!collapsed()) {
+        <div class="min-w-0 overflow-hidden">
+          <p class="text-white text-sm font-semibold truncate leading-tight">{{ name() }}</p>
+          @if (description()) {
+            <p class="text-slate-400 text-xs truncate leading-tight">{{ description() }}</p>
+          }
+        </div>
+      }
+    </div>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    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 }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
+
 // ── Item geometry ──────────────────────────────────────────────────────────────
 const NAV_ITEM_BASE = 'flex items-center gap-3 w-full text-sm font-medium transition-colors duration-150 cursor-pointer select-none';
 const NAV_ITEM_L1 = 'px-6 py-3';
@@ -11089,18 +11149,21 @@ class ClxMenuItemComponent {
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
     nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    _inheritedColor = signal(null, ...(ngDevMode ? [{ debugName: "_inheritedColor" }] : []));
+    _resolvedColor = computed(() => this._inheritedColor() ?? this.color(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : []));
+    inheritColor(c) { this._inheritedColor.set(c); }
     _geom = computed(() => {
         if (this.collapsed())
-            return 'w-16 px-0 justify-center';
+            return 'w-full py-3 px-0 justify-center';
         return this.nested() ? NAV_ITEM_L2 : NAV_ITEM_L1;
     }, ...(ngDevMode ? [{ debugName: "_geom" }] : []));
-    _iconCls = computed(() => resolveColor(this.color()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
+    _iconCls = computed(() => resolveColor(this._resolvedColor()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
     _idleCls = computed(() => {
-        const t = resolveColor(this.color());
+        const t = resolveColor(this._resolvedColor());
         return `${NAV_ITEM_BASE} ${this._geom()} ${NAV_ITEM_IDLE} ${t.hoverBgMuted}`;
     }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : []));
     _activeCls = computed(() => {
-        const t = resolveColor(this.color());
+        const t = resolveColor(this._resolvedColor());
         if (this.collapsed()) {
             return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold`;
         }
@@ -11172,10 +11235,16 @@ class ClxMenuComponent {
     constructor() {
         effect(() => { if (this._isChildActive())
             this._isExpanded.set(true); });
+        effect(() => { if (this.collapsed())
+            this._isExpanded.set(false); });
+        effect(() => {
+            const color = this.color();
+            this._childItems?.forEach(c => c.inheritColor(color));
+        });
     }
     _iconCls = computed(() => resolveColor(this.color()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
     _buttonCls = computed(() => {
-        const geom = this.collapsed() ? 'w-16 px-0 justify-center' : NAV_ITEM_L1;
+        const geom = this.collapsed() ? 'w-full py-3 px-0 justify-center' : NAV_ITEM_L1;
         const base = `${NAV_ITEM_BASE} ${geom}`;
         const t = resolveColor(this.color());
         if (this._isChildActive()) {
@@ -11189,15 +11258,16 @@ class ClxMenuComponent {
     NAV_CHILDREN_INNER = NAV_CHILDREN_INNER;
     NAV_CHILDREN_LIST = NAV_CHILDREN_LIST;
     ngAfterContentInit() {
-        this._syncChildRoutes();
+        this._syncChildren();
         this._childItems.changes
             .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => this._syncChildRoutes());
+            .subscribe(() => this._syncChildren());
     }
-    _syncChildRoutes() {
+    _syncChildren() {
+        const color = this.color();
         this._childRoutes = this._childItems
             .filter(c => !!c.route())
-            .map(c => c.route());
+            .map(c => { c.inheritColor(color); return c.route(); });
     }
     _toggle() {
         this._isExpanded.update(v => !v);
@@ -11224,17 +11294,15 @@ class ClxMenuComponent {
       }
     </button>
 
-    @if (!collapsed()) {
-      <div
-        [class]="NAV_CHILDREN_WRAPPER"
-        [style.grid-template-rows]="_isExpanded() ? '1fr' : '0fr'">
-        <div [class]="NAV_CHILDREN_INNER">
-          <div [class]="NAV_CHILDREN_LIST">
-            <ng-content></ng-content>
-          </div>
+    <div
+      [class]="NAV_CHILDREN_WRAPPER"
+      [style.grid-template-rows]="(!collapsed() && _isExpanded()) ? '1fr' : '0fr'">
+      <div [class]="NAV_CHILDREN_INNER">
+        <div [class]="NAV_CHILDREN_LIST">
+          <ng-content></ng-content>
         </div>
       </div>
-    }
+    </div>
   `, isInline: true, dependencies: [{ 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.21", ngImport: i0, type: ClxMenuComponent, decorators: [{
@@ -11264,17 +11332,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
       }
     </button>
 
-    @if (!collapsed()) {
-      <div
-        [class]="NAV_CHILDREN_WRAPPER"
-        [style.grid-template-rows]="_isExpanded() ? '1fr' : '0fr'">
-        <div [class]="NAV_CHILDREN_INNER">
-          <div [class]="NAV_CHILDREN_LIST">
-            <ng-content></ng-content>
-          </div>
+    <div
+      [class]="NAV_CHILDREN_WRAPPER"
+      [style.grid-template-rows]="(!collapsed() && _isExpanded()) ? '1fr' : '0fr'">
+      <div [class]="NAV_CHILDREN_INNER">
+        <div [class]="NAV_CHILDREN_LIST">
+          <ng-content></ng-content>
         </div>
       </div>
-    }
+    </div>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -11289,24 +11355,33 @@ class ClxNavGroupComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.21", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "textContent": "!collapsed() ? label() : \"\"", "class.!p-0": "collapsed()", "class.!h-0": "collapsed()", "class.!pt-0": "collapsed()", "class.!pb-0": "collapsed()" }, classAttribute: "block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none overflow-hidden transition-all duration-300" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    @if (!collapsed()) {
+      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none">{{ label() }}</span>
+    } @else {
+      <span class="flex items-center justify-center w-full py-3">
+        <span class="w-1.5 h-1.5 rounded-full bg-slate-600"></span>
+      </span>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxNavGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-nav-group',
                     standalone: true,
-                    template: '',
+                    template: `
+    @if (!collapsed()) {
+      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none">{{ label() }}</span>
+    } @else {
+      <span class="flex items-center justify-center w-full py-3">
+        <span class="w-1.5 h-1.5 rounded-full bg-slate-600"></span>
+      </span>
+    }
+  `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none overflow-hidden transition-all duration-300',
-                        '[textContent]': '!collapsed() ? label() : ""',
-                        '[class.!p-0]': 'collapsed()',
-                        '[class.!h-0]': 'collapsed()',
-                        '[class.!pt-0]': 'collapsed()',
-                        '[class.!pb-0]': 'collapsed()',
-                    },
+                    host: { class: 'block' },
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
 
@@ -13928,5 +14003,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", 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, 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, 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