@gem-sdk/components 2.5.9 → 2.5.10

package/dist/cjs/carousel/components/CarouselItem.js

@@ -71,7 +71,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
         onClick: onClickItem,
         "aria-hidden": true,
         children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: "gp-w-full",
+            className: "gp-w-full gp-h-full",
             style: {
                 ...itemShadowStyle
             },

package/dist/cjs/carousel/components/CarouselItem.liquid.js

@@ -82,7 +82,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
       data-index="${index}"
     >
       <div
-        class="gp-w-full",
+        class="gp-w-full gp-h-full",
         style="${{
         ...itemShadowStyle
     }}"

package/dist/cjs/grid/components/Row.js

@@ -50,7 +50,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         childHasChildren,
         children
     ]);
-    const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
+    const { fullWidth, width, verticalGutter, background, columnGap, height } = styles ?? {};
     const styleObject = helpers.createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
         desktop: false,
         tablet: false,
@@ -69,7 +69,8 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
             ...isSection ? restStyle : style,
             ...core.makeStyleResponsive('cg', verticalGutter),
             ...layout ? core.composeGridLayout(layout) : core.makeStyleResponsive('gtc', responsive),
-            ...core.makeStyleResponsive('w', styleObject.content)
+            ...core.makeStyleResponsive('w', styleObject.content),
+            ...core.makeStyleResponsive('h', height)
         };
         if (pageType === 'POST_PURCHASE') {
             result = {
@@ -123,7 +124,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         "data-id": builderProps?.uidInteraction ?? builderProps?.uid,
         ref: ref,
         style: getStyles(),
-        className: core.cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
+        className: core.cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out gp-grid-rows-[1fr]', {
             'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
         }),
         children: isDisplaySection ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {

package/dist/cjs/grid/components/Row.liquid.js

@@ -8,7 +8,7 @@ var helpers = require('../../helpers.js');
 
 const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, rawChildren, advanced, ...props })=>{
     const { isSection, horizontalAlign, verticalAlign, order, layout, responsive } = setting ?? {};
-    const { fullWidth, width, verticalGutter, background } = styles ?? {};
+    const { fullWidth, width, verticalGutter, background, height } = styles ?? {};
     const styleObject = helpers$1.createStyleObject(width, fullWidth);
     const [wrapStyle, restStyle] = core.splitStyle([
         'pos',
@@ -31,12 +31,13 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         ...core.makeStyleResponsive('pc', horizontalAlign),
         ...layout ? core.composeGridLayout(layout) : core.makeStyleResponsive('gtc', responsive),
         ...core.makeStyleResponsive('w', styleObject.content),
+        ...core.makeStyleResponsive('h', height),
         ...core.getStyleBackgroundByDevice(background, {
             liquid: true
         }),
         ...core.getGradientBgrStyleByDevice(background)
     }}"
-        class="${core.cls(className, builderProps?.uid, advanced?.cssClass, 'gp-mx-auto gp-mb-0 gp-grid gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out [&_*]:gp-max-w-full')}"
+        class="${core.cls(className, builderProps?.uid, advanced?.cssClass, 'gp-mx-auto gp-mb-0 gp-grid gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out [&_*]:gp-max-w-full gp-grid-rows-[1fr]')}"
     >
     ${core.WrapRenderChildren({
         uid: builderProps?.uid || '',

package/dist/cjs/grid/setting/Row.js

@@ -254,6 +254,27 @@ const config = {
                         }
                     }
                 },
+                {
+                    id: 'height',
+                    type: 'segment',
+                    devices: {
+                        desktop: {
+                            default: 'auto'
+                        }
+                    },
+                    options: [
+                        {
+                            label: 'Full',
+                            value: '100%',
+                            tooltip: 'Stretch to fill <br> vertical space'
+                        },
+                        {
+                            label: 'Fit',
+                            value: 'auto',
+                            tooltip: 'Adjust size <br> based on content'
+                        }
+                    ]
+                },
                 {
                     id: 'verticalGutter',
                     type: 'input:unit-spacing',
@@ -347,7 +368,6 @@ const config = {
             label: {
                 en: 'Align'
             },
-            condition: `(layout.display !== 'fill' || (layout.display === 'fill' && !!layout.cols && layout.cols.length > 1)) && pageType != "POST_PURCHASE"`,
             controls: [
                 {
                     type: 'control',
@@ -357,7 +377,7 @@ const config = {
                     setting: {
                         id: 'verticalAlign'
                     },
-                    condition: `!!layout.cols && layout.cols.length > 1 && pageType != "POST_PURCHASE"`
+                    condition: `((!!layout.cols && layout.cols.length > 1) || (!!layout.cols && layout.cols.length == 1 && height == '100%')) && pageType != "POST_PURCHASE"`
                 },
                 {
                     type: 'control',
@@ -408,6 +428,16 @@ const config = {
                     },
                     layout: 'horizontal'
                 },
+                {
+                    type: 'control',
+                    setting: {
+                        id: 'height'
+                    },
+                    label: {
+                        en: 'Height'
+                    },
+                    layout: 'horizontal'
+                },
                 {
                     type: 'control',
                     label: {

package/dist/cjs/image/components/Image.js

@@ -21,6 +21,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     };
     const imageWidth = shape ? core.makeStyleResponsive('w', core.getWidthByShapeGlobalSize(shape)) : core.makeStyleResponsive('w', core.makeWidth(styles?.width, styles?.fullWidth));
     const imageHeight = core.makeStyleResponsive('h', core.getHeightByShapeGlobalSize(shape));
+    const imageFlexGrowClass = core.getFlexGrowClassByShapeGlobalSize(shape);
     const overwriteDefaultRadius = (cornerRadius)=>{
         const radius = {
             ...cornerRadius
@@ -61,7 +62,9 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         "data-id": builderProps?.uid,
         onClick: onClick,
         role: "presentation",
-        className: core.cls('gp-group/image gp-relative', builderProps?.uid),
+        className: core.cls('gp-group/image gp-relative', builderProps?.uid, {
+            ...imageFlexGrowClass
+        }),
         style: {
             ...style,
             ...core.makeStyleResponsive('ta', styles?.align)

package/dist/cjs/image/components/Image.liquid.js

@@ -31,20 +31,23 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     };
     const imageWidth = core.makeStyleResponsive('w', core.getWidthByShapeGlobalSize(shape));
     const imageHeight = core.makeStyleResponsive('h', core.getHeightByShapeGlobalSize(shape));
+    const imageFlexGrowClass = core.getFlexGrowClassByShapeGlobalSize(shape);
     return core.template`<div
     ${{
         ...builderAttrs
     }}
      data-id="${builderProps?.uid}"
     role="presentation"
-    class="${core.cls('gp-group/image', builderProps?.uid, advanced?.cssClass)}"
+    class="${core.cls('gp-group/image', builderProps?.uid, advanced?.cssClass, {
+        ...imageFlexGrowClass
+    })}"
     style="${{
         ...style,
         ...core.makeStyleResponsive('ta', styles?.align)
     }}"
     >
       <${WrapLink}
-        class="pointer-events-auto h-full gp-flex"
+        class="pointer-events-auto gp-h-full gp-flex"
         ${shouldRenderLink ? {
         ...urlData,
         title: setting?.title

package/dist/cjs/image/setting/Image.js

@@ -148,6 +148,15 @@ const config = {
                             displayOptions: [
                                 'full'
                             ]
+                        },
+                        height: {
+                            displayOptions: [
+                                'full'
+                            ],
+                            units: [
+                                'px',
+                                '%'
+                            ]
                         }
                     },
                     hiddenSettings: [

package/dist/esm/carousel/components/CarouselItem.js

@@ -67,7 +67,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
         onClick: onClickItem,
         "aria-hidden": true,
         children: /*#__PURE__*/ jsx("div", {
-            className: "gp-w-full",
+            className: "gp-w-full gp-h-full",
             style: {
                 ...itemShadowStyle
             },

package/dist/esm/carousel/components/CarouselItem.liquid.js

@@ -78,7 +78,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
       data-index="${index}"
     >
       <div
-        class="gp-w-full",
+        class="gp-w-full gp-h-full",
         style="${{
         ...itemShadowStyle
     }}"

package/dist/esm/grid/components/Row.js

@@ -46,7 +46,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         childHasChildren,
         children
     ]);
-    const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
+    const { fullWidth, width, verticalGutter, background, columnGap, height } = styles ?? {};
     const styleObject = createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
         desktop: false,
         tablet: false,
@@ -65,7 +65,8 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
             ...isSection ? restStyle : style,
             ...makeStyleResponsive('cg', verticalGutter),
             ...layout ? composeGridLayout(layout) : makeStyleResponsive('gtc', responsive),
-            ...makeStyleResponsive('w', styleObject.content)
+            ...makeStyleResponsive('w', styleObject.content),
+            ...makeStyleResponsive('h', height)
         };
         if (pageType === 'POST_PURCHASE') {
             result = {
@@ -119,7 +120,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         "data-id": builderProps?.uidInteraction ?? builderProps?.uid,
         ref: ref,
         style: getStyles(),
-        className: cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
+        className: cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out gp-grid-rows-[1fr]', {
             'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
         }),
         children: isDisplaySection ? /*#__PURE__*/ jsx(Fragment, {

package/dist/esm/grid/components/Row.liquid.js

@@ -4,7 +4,7 @@ import { getSettingPreloadData } from '../../helpers.js';
 
 const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, rawChildren, advanced, ...props })=>{
     const { isSection, horizontalAlign, verticalAlign, order, layout, responsive } = setting ?? {};
-    const { fullWidth, width, verticalGutter, background } = styles ?? {};
+    const { fullWidth, width, verticalGutter, background, height } = styles ?? {};
     const styleObject = createStyleObject(width, fullWidth);
     const [wrapStyle, restStyle] = splitStyle([
         'pos',
@@ -27,12 +27,13 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         ...makeStyleResponsive('pc', horizontalAlign),
         ...layout ? composeGridLayout(layout) : makeStyleResponsive('gtc', responsive),
         ...makeStyleResponsive('w', styleObject.content),
+        ...makeStyleResponsive('h', height),
         ...getStyleBackgroundByDevice(background, {
             liquid: true
         }),
         ...getGradientBgrStyleByDevice(background)
     }}"
-        class="${cls(className, builderProps?.uid, advanced?.cssClass, 'gp-mx-auto gp-mb-0 gp-grid gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out [&_*]:gp-max-w-full')}"
+        class="${cls(className, builderProps?.uid, advanced?.cssClass, 'gp-mx-auto gp-mb-0 gp-grid gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out [&_*]:gp-max-w-full gp-grid-rows-[1fr]')}"
     >
     ${WrapRenderChildren({
         uid: builderProps?.uid || '',

package/dist/esm/grid/setting/Row.js

@@ -250,6 +250,27 @@ const config = {
                         }
                     }
                 },
+                {
+                    id: 'height',
+                    type: 'segment',
+                    devices: {
+                        desktop: {
+                            default: 'auto'
+                        }
+                    },
+                    options: [
+                        {
+                            label: 'Full',
+                            value: '100%',
+                            tooltip: 'Stretch to fill <br> vertical space'
+                        },
+                        {
+                            label: 'Fit',
+                            value: 'auto',
+                            tooltip: 'Adjust size <br> based on content'
+                        }
+                    ]
+                },
                 {
                     id: 'verticalGutter',
                     type: 'input:unit-spacing',
@@ -343,7 +364,6 @@ const config = {
             label: {
                 en: 'Align'
             },
-            condition: `(layout.display !== 'fill' || (layout.display === 'fill' && !!layout.cols && layout.cols.length > 1)) && pageType != "POST_PURCHASE"`,
             controls: [
                 {
                     type: 'control',
@@ -353,7 +373,7 @@ const config = {
                     setting: {
                         id: 'verticalAlign'
                     },
-                    condition: `!!layout.cols && layout.cols.length > 1 && pageType != "POST_PURCHASE"`
+                    condition: `((!!layout.cols && layout.cols.length > 1) || (!!layout.cols && layout.cols.length == 1 && height == '100%')) && pageType != "POST_PURCHASE"`
                 },
                 {
                     type: 'control',
@@ -404,6 +424,16 @@ const config = {
                     },
                     layout: 'horizontal'
                 },
+                {
+                    type: 'control',
+                    setting: {
+                        id: 'height'
+                    },
+                    label: {
+                        en: 'Height'
+                    },
+                    layout: 'horizontal'
+                },
                 {
                     type: 'control',
                     label: {

package/dist/esm/image/components/Image.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
+import { makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, getFlexGrowClassByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
 import Link from '../../link/components/Link.js';
 import AdaptiveImage from './AdaptiveImage.js';
 import NextImage from './NextImage.js';
@@ -17,6 +17,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     };
     const imageWidth = shape ? makeStyleResponsive('w', getWidthByShapeGlobalSize(shape)) : makeStyleResponsive('w', makeWidth(styles?.width, styles?.fullWidth));
     const imageHeight = makeStyleResponsive('h', getHeightByShapeGlobalSize(shape));
+    const imageFlexGrowClass = getFlexGrowClassByShapeGlobalSize(shape);
     const overwriteDefaultRadius = (cornerRadius)=>{
         const radius = {
             ...cornerRadius
@@ -57,7 +58,9 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         "data-id": builderProps?.uid,
         onClick: onClick,
         role: "presentation",
-        className: cls('gp-group/image gp-relative', builderProps?.uid),
+        className: cls('gp-group/image gp-relative', builderProps?.uid, {
+            ...imageFlexGrowClass
+        }),
         style: {
             ...style,
             ...makeStyleResponsive('ta', styles?.align)

package/dist/esm/image/components/Image.liquid.js

@@ -1,4 +1,4 @@
-import { makeStyleResponsive, getWidthByShapeGlobalSize, getHeightByShapeGlobalSize, template, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getCornerCSSFromGlobal } from '@gem-sdk/core';
+import { makeStyleResponsive, getWidthByShapeGlobalSize, getHeightByShapeGlobalSize, getFlexGrowClassByShapeGlobalSize, template, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getCornerCSSFromGlobal } from '@gem-sdk/core';
 import AdaptiveImage from './AdaptiveImage.liquid.js';
 import NextImage from './NextImage.liquid.js';
 import { getLinkDataConfigs } from '../../helpers.js';
@@ -27,20 +27,23 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     };
     const imageWidth = makeStyleResponsive('w', getWidthByShapeGlobalSize(shape));
     const imageHeight = makeStyleResponsive('h', getHeightByShapeGlobalSize(shape));
+    const imageFlexGrowClass = getFlexGrowClassByShapeGlobalSize(shape);
     return template`<div
     ${{
         ...builderAttrs
     }}
      data-id="${builderProps?.uid}"
     role="presentation"
-    class="${cls('gp-group/image', builderProps?.uid, advanced?.cssClass)}"
+    class="${cls('gp-group/image', builderProps?.uid, advanced?.cssClass, {
+        ...imageFlexGrowClass
+    })}"
     style="${{
         ...style,
         ...makeStyleResponsive('ta', styles?.align)
     }}"
     >
       <${WrapLink}
-        class="pointer-events-auto h-full gp-flex"
+        class="pointer-events-auto gp-h-full gp-flex"
         ${shouldRenderLink ? {
         ...urlData,
         title: setting?.title

package/dist/esm/image/setting/Image.js

@@ -144,6 +144,15 @@ const config = {
                             displayOptions: [
                                 'full'
                             ]
+                        },
+                        height: {
+                            displayOptions: [
+                                'full'
+                            ],
+                            units: [
+                                'px',
+                                '%'
+                            ]
                         }
                     },
                     hiddenSettings: [

package/dist/types/index.d.ts

@@ -547,6 +547,7 @@ type RowProps$1 = BaseProps<{
 }, {
     fullWidth?: ObjectDevices<boolean>;
     width?: ObjectDevices<string>;
+    height?: ObjectDevices<'auto' | '100%'>;
     verticalGutter?: ObjectDevices<string>;
     background?: ObjectDevices<Background>;
     preloadBgImage?: boolean;
@@ -5535,6 +5536,7 @@ type RowProps = BaseProps<{
 }, {
     fullWidth?: ObjectDevices<boolean>;
     width?: ObjectDevices<string>;
+    height?: ObjectDevices<'auto' | '100%'>;
     verticalGutter?: ObjectDevices<string>;
     background?: ObjectDevices<Background>;
     preloadBgImage?: boolean;
@@ -5680,6 +5682,7 @@ declare const Product: ({ children, setting, styles, style, builderProps, rawChi
 }, {
     fullWidth?: Partial<Record<_gem_sdk_core.NameDevices, boolean>> | undefined;
     width?: Partial<Record<_gem_sdk_core.NameDevices, string>> | undefined;
+    height?: Partial<Record<_gem_sdk_core.NameDevices, "auto" | "100%">> | undefined;
     verticalGutter?: Partial<Record<_gem_sdk_core.NameDevices, string>> | undefined;
     background?: Partial<Record<_gem_sdk_core.NameDevices, _gem_sdk_core.Background>> | undefined;
     preloadBgImage?: boolean | undefined;
@@ -6478,6 +6481,7 @@ declare const HeroBanner: ({ builderAttrs, builderProps, setting, styles, style,
 } & Pick<{
     fullWidth?: Partial<Record<NameDevices, boolean>> | undefined;
     width?: Partial<Record<NameDevices, string>> | undefined;
+    height?: Partial<Record<NameDevices, "auto" | "100%">> | undefined;
     verticalGutter?: Partial<Record<NameDevices, string>> | undefined;
     background?: Partial<Record<NameDevices, Background>> | undefined;
     preloadBgImage?: boolean | undefined;
@@ -6721,6 +6725,7 @@ declare const CollectionBanner: ({ builderAttrs, builderProps, setting, style, c
 }, "layout" | "verticalAlign" | "horizontalAlign"> & Pick<{
     fullWidth?: Partial<Record<_gem_sdk_core.NameDevices, boolean>> | undefined;
     width?: Partial<Record<_gem_sdk_core.NameDevices, string>> | undefined;
+    height?: Partial<Record<_gem_sdk_core.NameDevices, "auto" | "100%">> | undefined;
     verticalGutter?: Partial<Record<_gem_sdk_core.NameDevices, string>> | undefined;
     background?: Partial<Record<_gem_sdk_core.NameDevices, _gem_sdk_core.Background>> | undefined;
     preloadBgImage?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.5.9",
+  "version": "2.5.10",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
     "format": "prettier --write \"./src/**/*.{ts,tsx}\""
   },
   "devDependencies": {
-    "@gem-sdk/core": "2.5.9",
+    "@gem-sdk/core": "2.5.10",
     "@gem-sdk/styles": "2.4.8",
     "@types/react-transition-group": "^4.4.5"
   },