@gem-sdk/components 2.3.0 → 2.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/button/components/Button.js +3 -3
- package/dist/cjs/button/components/Button.liquid.js +3 -3
- package/dist/cjs/product/components/ProductImagesV2/liquid/ProductGalleryCarousel.liquid.js +1 -1
- package/dist/esm/button/components/Button.js +3 -3
- package/dist/esm/button/components/Button.liquid.js +3 -3
- package/dist/esm/product/components/ProductImagesV2/liquid/ProductGalleryCarousel.liquid.js +1 -1
- package/package.json +1 -1
|
@@ -129,7 +129,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
|
|
|
129
129
|
disabled: disabled,
|
|
130
130
|
children: [
|
|
131
131
|
loading ? /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
132
|
-
className: "gp-invisible gp-h-5 gp-w-5 gp-animate-spin group-data-[state=loading]:gp-visible gp-absolute",
|
|
132
|
+
className: "gp-invisible gp-h-5 gp-w-5 gp-animate-spin group-data-[state=loading]/button:gp-visible gp-absolute",
|
|
133
133
|
xmlns: "http://www.w3.org/2000/svg",
|
|
134
134
|
fill: "none",
|
|
135
135
|
viewBox: "0 0 24 24",
|
|
@@ -156,7 +156,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
|
|
|
156
156
|
children: [
|
|
157
157
|
!!iconSvg && iconVisible && /*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
158
158
|
className: `
|
|
159
|
-
gp-button-icon gp-transition-colors gp-duration-300 gp-z-1 gp-inline-flex gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]:gp-invisible [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)] ${shouldClearSpace && !label ? '!gp-m-0' : ''}`,
|
|
159
|
+
gp-button-icon gp-transition-colors gp-duration-300 gp-z-1 gp-inline-flex gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]/button:gp-invisible [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)] ${shouldClearSpace && !label ? '!gp-m-0' : ''}`,
|
|
160
160
|
style: {
|
|
161
161
|
...iconSpacingStyle,
|
|
162
162
|
'--height-desktop': `${size?.desktop}`,
|
|
@@ -169,7 +169,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
|
|
|
169
169
|
}),
|
|
170
170
|
(!!label || !shouldClearSpace) && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
171
171
|
"data-gp-text": true,
|
|
172
|
-
className: core.cls(`gp-relative group-hover/button:!gp-text-inherit gp-flex gp-h-full gp-items-center gp-overflow-hidden gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line`, styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : '', mode === 'edit' && !options?.isCannotEditing ? 'gp-text button-text' : '', nodePrice ? appendTypoClass : {}),
|
|
172
|
+
className: core.cls(`gp-relative group-hover/button:!gp-text-inherit gp-flex gp-h-full gp-items-center gp-overflow-hidden gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line`, styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : '', mode === 'edit' && !options?.isCannotEditing ? 'gp-text button-text' : '', nodePrice ? appendTypoClass : {}),
|
|
173
173
|
style: {
|
|
174
174
|
...core.makeStyle({
|
|
175
175
|
tt: styles?.transform
|
|
@@ -127,7 +127,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
|
|
|
127
127
|
}}"
|
|
128
128
|
>
|
|
129
129
|
${!disabledLoading ? ` <svg
|
|
130
|
-
class="gp-invisible gp-absolute gp-h-5 gp-w-5 group-data-[state=loading]:gp-animate-spin group-data-[state=loading]:gp-visible"
|
|
130
|
+
class="gp-invisible gp-absolute gp-h-5 gp-w-5 group-data-[state=loading]/button:gp-animate-spin group-data-[state=loading]/button:gp-visible"
|
|
131
131
|
xmlns="http://www.w3.org/2000/svg"
|
|
132
132
|
fill="none"
|
|
133
133
|
viewBox="0 0 24 24"
|
|
@@ -151,7 +151,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
|
|
|
151
151
|
'gp-flex-row-reverse': iconAlign === 'right'
|
|
152
152
|
})}">
|
|
153
153
|
${core.RenderIf(!!iconSvg && iconVisible, core.template`<span
|
|
154
|
-
class="${`gp-inline-flex gp-button-icon gp-transition-colors gp-duration-300 gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]:gp-invisible gp-z-1 [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)]`}"
|
|
154
|
+
class="${`gp-inline-flex gp-button-icon gp-transition-colors gp-duration-300 gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]/button:gp-invisible gp-z-1 [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)]`}"
|
|
155
155
|
style="${{
|
|
156
156
|
...label ? iconSpacingStyle : {},
|
|
157
157
|
'--height-desktop': `${size?.desktop}`,
|
|
@@ -161,7 +161,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
|
|
|
161
161
|
>${iconSvg}</span>`)}
|
|
162
162
|
<span
|
|
163
163
|
data-gp-text
|
|
164
|
-
class="${`group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
|
|
164
|
+
class="${`group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
|
|
165
165
|
${styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : ''}`}"
|
|
166
166
|
style="${{
|
|
167
167
|
...nodePrice && appendTypoStyle,
|
|
@@ -106,7 +106,7 @@ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage,
|
|
|
106
106
|
'tablet'
|
|
107
107
|
];
|
|
108
108
|
DEVICES.forEach((device)=>{
|
|
109
|
-
const value = aspectRatio?.[device] !== 'auto' && !!aspectRatio?.[device] ? aspectRatio?.[device]?.split('').reverse().join('') : '{%if media.height%} {{media.height}} / {{media.width}} {%else%} 100 / 100 {%endif%}';
|
|
109
|
+
const value = aspectRatio?.[device] !== 'auto' && !!aspectRatio?.[device] ? aspectRatio?.[device]?.split('/').reverse().join('/') : '{%if media.height%} {{media.height}} / {{media.width}} {%else%} 100 / 100 {%endif%}';
|
|
110
110
|
result = {
|
|
111
111
|
...result,
|
|
112
112
|
[device]: `calc((${value})*100%)`
|
|
@@ -125,7 +125,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
|
|
|
125
125
|
disabled: disabled,
|
|
126
126
|
children: [
|
|
127
127
|
loading ? /*#__PURE__*/ jsxs("svg", {
|
|
128
|
-
className: "gp-invisible gp-h-5 gp-w-5 gp-animate-spin group-data-[state=loading]:gp-visible gp-absolute",
|
|
128
|
+
className: "gp-invisible gp-h-5 gp-w-5 gp-animate-spin group-data-[state=loading]/button:gp-visible gp-absolute",
|
|
129
129
|
xmlns: "http://www.w3.org/2000/svg",
|
|
130
130
|
fill: "none",
|
|
131
131
|
viewBox: "0 0 24 24",
|
|
@@ -152,7 +152,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
|
|
|
152
152
|
children: [
|
|
153
153
|
!!iconSvg && iconVisible && /*#__PURE__*/ jsx("span", {
|
|
154
154
|
className: `
|
|
155
|
-
gp-button-icon gp-transition-colors gp-duration-300 gp-z-1 gp-inline-flex gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]:gp-invisible [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)] ${shouldClearSpace && !label ? '!gp-m-0' : ''}`,
|
|
155
|
+
gp-button-icon gp-transition-colors gp-duration-300 gp-z-1 gp-inline-flex gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]/button:gp-invisible [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)] ${shouldClearSpace && !label ? '!gp-m-0' : ''}`,
|
|
156
156
|
style: {
|
|
157
157
|
...iconSpacingStyle,
|
|
158
158
|
'--height-desktop': `${size?.desktop}`,
|
|
@@ -165,7 +165,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
|
|
|
165
165
|
}),
|
|
166
166
|
(!!label || !shouldClearSpace) && /*#__PURE__*/ jsx("div", {
|
|
167
167
|
"data-gp-text": true,
|
|
168
|
-
className: cls(`gp-relative group-hover/button:!gp-text-inherit gp-flex gp-h-full gp-items-center gp-overflow-hidden gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line`, styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : '', mode === 'edit' && !options?.isCannotEditing ? 'gp-text button-text' : '', nodePrice ? appendTypoClass : {}),
|
|
168
|
+
className: cls(`gp-relative group-hover/button:!gp-text-inherit gp-flex gp-h-full gp-items-center gp-overflow-hidden gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line`, styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : '', mode === 'edit' && !options?.isCannotEditing ? 'gp-text button-text' : '', nodePrice ? appendTypoClass : {}),
|
|
169
169
|
style: {
|
|
170
170
|
...makeStyle({
|
|
171
171
|
tt: styles?.transform
|
|
@@ -123,7 +123,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
|
|
|
123
123
|
}}"
|
|
124
124
|
>
|
|
125
125
|
${!disabledLoading ? ` <svg
|
|
126
|
-
class="gp-invisible gp-absolute gp-h-5 gp-w-5 group-data-[state=loading]:gp-animate-spin group-data-[state=loading]:gp-visible"
|
|
126
|
+
class="gp-invisible gp-absolute gp-h-5 gp-w-5 group-data-[state=loading]/button:gp-animate-spin group-data-[state=loading]/button:gp-visible"
|
|
127
127
|
xmlns="http://www.w3.org/2000/svg"
|
|
128
128
|
fill="none"
|
|
129
129
|
viewBox="0 0 24 24"
|
|
@@ -147,7 +147,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
|
|
|
147
147
|
'gp-flex-row-reverse': iconAlign === 'right'
|
|
148
148
|
})}">
|
|
149
149
|
${RenderIf(!!iconSvg && iconVisible, template`<span
|
|
150
|
-
class="${`gp-inline-flex gp-button-icon gp-transition-colors gp-duration-300 gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]:gp-invisible gp-z-1 [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)]`}"
|
|
150
|
+
class="${`gp-inline-flex gp-button-icon gp-transition-colors gp-duration-300 gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]/button:gp-invisible gp-z-1 [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)]`}"
|
|
151
151
|
style="${{
|
|
152
152
|
...label ? iconSpacingStyle : {},
|
|
153
153
|
'--height-desktop': `${size?.desktop}`,
|
|
@@ -157,7 +157,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
|
|
|
157
157
|
>${iconSvg}</span>`)}
|
|
158
158
|
<span
|
|
159
159
|
data-gp-text
|
|
160
|
-
class="${`group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
|
|
160
|
+
class="${`group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
|
|
161
161
|
${styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : ''}`}"
|
|
162
162
|
style="${{
|
|
163
163
|
...nodePrice && appendTypoStyle,
|
|
@@ -102,7 +102,7 @@ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage,
|
|
|
102
102
|
'tablet'
|
|
103
103
|
];
|
|
104
104
|
DEVICES.forEach((device)=>{
|
|
105
|
-
const value = aspectRatio?.[device] !== 'auto' && !!aspectRatio?.[device] ? aspectRatio?.[device]?.split('').reverse().join('') : '{%if media.height%} {{media.height}} / {{media.width}} {%else%} 100 / 100 {%endif%}';
|
|
105
|
+
const value = aspectRatio?.[device] !== 'auto' && !!aspectRatio?.[device] ? aspectRatio?.[device]?.split('/').reverse().join('/') : '{%if media.height%} {{media.height}} / {{media.width}} {%else%} 100 / 100 {%endif%}';
|
|
106
106
|
result = {
|
|
107
107
|
...result,
|
|
108
108
|
[device]: `calc((${value})*100%)`
|