codexly-ui 0.10.6 → 0.10.7

package/fesm2022/codexly-ui.mjs

@@ -14081,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;
@@ -14098,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'
@@ -14119,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 -->
@@ -14158,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 {
@@ -14293,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 {
@@ -14385,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 */ []));