codexly-ui 0.10.5 → 0.10.7

package/fesm2022/codexly-ui.mjs

@@ -9771,6 +9771,13 @@ class ClxMenuComponent {
     active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
     routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
+    /** Whether this module has any nested clx-menu-item children. When false and routerLink is set,
+     *  clicking navigates straight through instead of only toggling an (empty) expand arrow — the
+     *  module keeps its normal "Módulos" color either way, only the click behavior and the arrow's
+     *  presence change. See ShellComponent's usage for the real case this covers: a module with no
+     *  options assigned still needs somewhere to go rather than dead-ending on a submenu with nothing
+     *  in it. */
+    hasChildren = input(true, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
     _isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : /* istanbul ignore next */ []));
     _rla;
     _destroyRef = inject(DestroyRef);
@@ -9808,8 +9815,18 @@ class ClxMenuComponent {
     _toggle() {
         this._isExpanded.update(v => !v);
     }
+    /** With children: the anchor's real navigation is suppressed, click only toggles the submenu
+     *  (the routerLink here exists solely to drive routerLinkActive styling on the row). Without
+     *  children: there's nothing to expand, so the click is left to navigate normally instead. */
+    _onRouterLinkClick(event) {
+        if (!this.hasChildren())
+            return;
+        event.preventDefault();
+        if (!this.collapsed())
+            this._toggle();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
     @if (routerLink()) {
       <a
         [routerLink]="routerLink()"
@@ -9818,19 +9835,21 @@ class ClxMenuComponent {
         [routerLinkActiveOptions]="routerLinkActiveOptions()"
         [class]="_buttonCls(rla.isActive)"
         [title]="collapsed() ? label() : ''"
-        (click)="$event.preventDefault(); !collapsed() && _toggle()">
+        (click)="_onRouterLinkClick($event)">
         @if (icon()) {
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-          <span
-            clx-icon
-            name="expand_more"
-            size="sm"
-            [class]="'shrink-0 transition-transform duration-300 ' + (rla.isActive ? '' : 'text-clx-text-subtle')"
-            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-          </span>
+          @if (hasChildren()) {
+            <span
+              clx-icon
+              name="expand_more"
+              size="sm"
+              [class]="'shrink-0 transition-transform duration-300 ' + (rla.isActive ? '' : 'text-clx-text-subtle')"
+              [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+            </span>
+          }
         }
       </a>
     } @else {
@@ -9881,19 +9900,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         [routerLinkActiveOptions]="routerLinkActiveOptions()"
         [class]="_buttonCls(rla.isActive)"
         [title]="collapsed() ? label() : ''"
-        (click)="$event.preventDefault(); !collapsed() && _toggle()">
+        (click)="_onRouterLinkClick($event)">
         @if (icon()) {
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-          <span
-            clx-icon
-            name="expand_more"
-            size="sm"
-            [class]="'shrink-0 transition-transform duration-300 ' + (rla.isActive ? '' : 'text-clx-text-subtle')"
-            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-          </span>
+          @if (hasChildren()) {
+            <span
+              clx-icon
+              name="expand_more"
+              size="sm"
+              [class]="'shrink-0 transition-transform duration-300 ' + (rla.isActive ? '' : 'text-clx-text-subtle')"
+              [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+            </span>
+          }
         }
       </a>
     } @else {
@@ -9932,7 +9953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], _rla: [{
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], _rla: [{
                 type: ViewChild,
                 args: [RouterLinkActive]
             }] } });
@@ -14060,6 +14081,11 @@ class ClxProductComponent {
     layout = input('vertical', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     clxColor = input('indigo', ...(ngDevMode ? [{ debugName: "clxColor" }] : /* istanbul ignore next */ []));
+    /** 'cover' (default) fills the frame edge-to-edge, cropping overflow — right for photos shot to
+     *  fill the frame (apparel on a model). 'contain' keeps the whole image visible with padding
+     *  around it — right for products photographed against negative space (helmets, boxed goods),
+     *  where 'cover' would crop into the product itself. */
+    imageFit = input('cover', ...(ngDevMode ? [{ debugName: "imageFit" }] : /* istanbul ignore next */ []));
     addToCart = output();
     addToWishlist = output();
     PRODUCT_TAG_LABEL = PRODUCT_TAG_LABEL;
@@ -14077,6 +14103,9 @@ class ClxProductComponent {
     _imageContainerClass = computed(() => this._h()
         ? `relative shrink-0 w-full aspect-square sm:aspect-auto ${this._sm() ? 'sm:w-32' : 'sm:w-44'} overflow-hidden rounded-t-2xl sm:rounded-t-none sm:rounded-l-2xl`
         : 'relative w-full aspect-square overflow-hidden rounded-t-2xl', ...(ngDevMode ? [{ debugName: "_imageContainerClass" }] : /* istanbul ignore next */ []));
+    _imageClass = computed(() => this.imageFit() === 'contain'
+        ? 'w-full h-full object-contain p-6 transition-transform duration-500 group-hover:scale-105'
+        : 'w-full h-full object-cover transition-transform duration-500 group-hover:scale-105', ...(ngDevMode ? [{ debugName: "_imageClass" }] : /* istanbul ignore next */ []));
     _contentClass = computed(() => 'flex flex-col gap-2 flex-1 p-3', ...(ngDevMode ? [{ debugName: "_contentClass" }] : /* istanbul ignore next */ []));
     _actionsClass = computed(() => this._h()
         ? 'flex flex-col sm:flex-row items-stretch sm:items-center gap-2 mt-3'
@@ -14098,7 +14127,7 @@ class ClxProductComponent {
         return `${sz} font-bold ${color}`;
     }, ...(ngDevMode ? [{ debugName: "_priceClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProductComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProductComponent, isStandalone: true, selector: "clx-product", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addToCart: "addToCart", addToWishlist: "addToWishlist" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProductComponent, isStandalone: true, selector: "clx-product", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, imageFit: { classPropertyName: "imageFit", publicName: "imageFit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addToCart: "addToCart", addToWishlist: "addToWishlist" }, ngImport: i0, template: `
     @if (loading()) {
       @if (_h()) {
         <!-- Skeleton Horizontal -->
@@ -14137,7 +14166,7 @@ class ClxProductComponent {
             <img
               [src]="product()!.main_image"
               [alt]="product()!.name"
-              class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+              [class]="_imageClass()"
               [loading]="priority() ? 'eager' : 'lazy'"
             />
           } @else {
@@ -14272,7 +14301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             <img
               [src]="product()!.main_image"
               [alt]="product()!.name"
-              class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+              [class]="_imageClass()"
               [loading]="priority() ? 'eager' : 'lazy'"
             />
           } @else {
@@ -14364,7 +14393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxColor", required: false }] }], addToCart: [{ type: i0.Output, args: ["addToCart"] }], addToWishlist: [{ type: i0.Output, args: ["addToWishlist"] }] } });
+        }], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxColor", required: false }] }], imageFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageFit", required: false }] }], addToCart: [{ type: i0.Output, args: ["addToCart"] }], addToWishlist: [{ type: i0.Output, args: ["addToWishlist"] }] } });
 
 class ClxProductDetailComponent {
     product = input(null, ...(ngDevMode ? [{ debugName: "product" }] : /* istanbul ignore next */ []));