@gem-sdk/components 2.1.13-staging.10 → 2.1.13-staging.12

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.
Files changed (12) hide show
  1. package/dist/cjs/banner/components/hero-banner/index.liquid.js +1 -1
  2. package/dist/cjs/banner/components/hero-banner/utils/index.js +5 -3
  3. package/dist/cjs/collection/components/CollectionDescription.js +101 -7
  4. package/dist/cjs/collection/components/CollectionDescription.liquid.js +102 -9
  5. package/dist/cjs/collection/setting/CollectionDescription.js +128 -0
  6. package/dist/esm/banner/components/hero-banner/index.liquid.js +1 -1
  7. package/dist/esm/banner/components/hero-banner/utils/index.js +5 -3
  8. package/dist/esm/collection/components/CollectionDescription.js +103 -9
  9. package/dist/esm/collection/components/CollectionDescription.liquid.js +103 -10
  10. package/dist/esm/collection/setting/CollectionDescription.js +128 -0
  11. package/dist/types/index.d.ts +11 -1
  12. package/package.json +1 -1
package/dist/cjs/banner/components/hero-banner/index.liquid.js CHANGED
@@ -219,8 +219,8 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
219
219
  ...core.makeStyleResponsive('pos', getAttachmentDevice()),
220
220
  ...index.getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
221
221
  }}"
222
- ${embed()}
223
222
  >
223
+ ${embed()}
224
224
  ${!setting?.preload ? getSrcSet.DEVICES.map((device)=>{
225
225
  return core.RenderIf(getEnableBgImageByDevice(device), NextImage_liquid.default({
226
226
  src: getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, device), device),
package/dist/cjs/banner/components/hero-banner/utils/index.js CHANGED
@@ -27,13 +27,14 @@ const getHeightHeroBanner = (background, enableParallax)=>{
27
27
  'tablet'
28
28
  ];
29
29
  DEVICES.forEach((device)=>{
30
+ const enableParallaxDevice = background?.[device]?.type === 'image' ? enableParallax : false;
30
31
  const isScale = isScaleImage({
31
- enableParallax,
32
+ enableParallax: enableParallaxDevice,
32
33
  attachment: background[device]?.attachment
33
34
  });
34
35
  result = {
35
36
  ...result,
36
- [device]: enableParallax ? '150%' : isScale ? '100vh' : '100%'
37
+ [device]: enableParallaxDevice ? '150%' : isScale ? '100vh' : '100%'
37
38
  };
38
39
  });
39
40
  return core.makeStyleResponsive('h', result);
@@ -46,8 +47,9 @@ const getWidthHeroBanner = (background, enableParallax)=>{
46
47
  'tablet'
47
48
  ];
48
49
  DEVICES.forEach((device)=>{
50
+ const enableParallaxDevice = background?.[device]?.type === 'image' ? enableParallax : false;
49
51
  const isScale = isScaleImage({
50
- enableParallax,
52
+ enableParallax: enableParallaxDevice,
51
53
  attachment: background[device]?.attachment
52
54
  });
53
55
  result = {
package/dist/cjs/collection/components/CollectionDescription.js CHANGED
@@ -4,16 +4,110 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var core = require('@gem-sdk/core');
7
- var Text = require('../../text/components/Text.js');
7
+ var React = require('react');
8
8
 
9
- const CollectionDescription = ({ setting })=>{
9
+ const CollectionDescription = ({ setting, builderProps })=>{
10
+ const [open, setOpen] = React.useState(false);
11
+ const [isShowViewMore, allowShowViewMore] = React.useState(false);
12
+ const ref = React.useRef(null);
13
+ const currentDevice = core.useCurrentDevice();
10
14
  const collection = core.useCollection();
11
- return /*#__PURE__*/ jsxRuntime.jsx(Text.default, {
12
- styles: setting,
13
- setting: {
14
- text: collection?.descriptionHtml ?? 'Collection description',
15
- excludeFlex: true
15
+ const hasLineClamp = core.getResponsiveValueByScreen(setting?.hasLineClamp, currentDevice);
16
+ const lineClamp = core.getResponsiveValueByScreen(setting?.lineClamp, currentDevice);
17
+ const appendTypoClass = core.composeTypographyClassName(setting?.typo, setting?.typography);
18
+ const appendTypoStyle = core.composeTypographyStyle(setting?.typo, setting?.typography);
19
+ React.useEffect(()=>{
20
+ const dom = ref.current;
21
+ setOpen(false);
22
+ if (dom && hasLineClamp && collection?.description) {
23
+ const value = lineClamp;
24
+ setTimeout(()=>{
25
+ const scrollHeight = dom?.scrollHeight ?? 0;
26
+ const clientHeight = dom?.clientHeight ?? 0;
27
+ const lineHeight = window.getComputedStyle(dom).getPropertyValue('line-height');
28
+ const lineText = Math.round((scrollHeight ?? 0) / parseInt(lineHeight));
29
+ const conditionCheckLine = core.isSafari() ? value && value < lineText : clientHeight < scrollHeight;
30
+ if (value && conditionCheckLine) {
31
+ allowShowViewMore(()=>true);
32
+ } else {
33
+ allowShowViewMore(()=>false);
34
+ }
35
+ }, 100);
16
36
  }
37
+ }, [
38
+ hasLineClamp,
39
+ lineClamp,
40
+ collection?.description
41
+ ]);
42
+ const css = `
43
+ .gp-p-description-text > *:not(ol):not(ul):not(table):not(div) {
44
+ display: inline !important;
45
+ }
46
+ .gp-p-description-text > *:not(ol):not(ul):not(table):not(div)::after {
47
+ content: "\\A";
48
+ white-space: pre;
49
+ }
50
+ .gp-p-description-text > table {
51
+ box-shadow: none;
52
+ }
53
+ `;
54
+ const hasDescription = collection?.description && collection.description?.trim() != '';
55
+ return /*#__PURE__*/ jsxRuntime.jsxs("div", {
56
+ "data-id": builderProps?.uid,
57
+ children: [
58
+ !core.isSafari() && /*#__PURE__*/ jsxRuntime.jsx("style", {
59
+ children: css
60
+ }),
61
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
62
+ ref: ref,
63
+ "data-gp-text": true,
64
+ className: core.cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, !hasDescription ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', core.getGlobalColorClass('text', setting?.color)),
65
+ style: {
66
+ ...core.getStyleShadow({
67
+ styleAppliedFor: 'text-shadow'
68
+ }),
69
+ ...core.makeStyleResponsive('ta', setting?.textAlign),
70
+ ...hasLineClamp && !open ? core.makeStyleResponsive('line-clamp', setting?.lineClamp) : {},
71
+ ...core.makeStyle({
72
+ tt: setting?.transform
73
+ }),
74
+ ...appendTypoStyle
75
+ },
76
+ dangerouslySetInnerHTML: {
77
+ __html: collection?.descriptionHtml && hasDescription ? collection.descriptionHtml : ``
78
+ }
79
+ }),
80
+ hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxRuntime.jsxs("button", {
81
+ className: core.cls(appendTypoClass, core.getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 gp-w-full gp-transition-all hover:gp-opacity-80'),
82
+ style: {
83
+ ...core.makeStyleResponsive('ta', setting?.textAlign),
84
+ ...core.makeStyle({
85
+ tt: setting?.transform
86
+ }),
87
+ ...appendTypoStyle,
88
+ ...core.getGlobalColorStyle(setting?.showMoreColor)
89
+ },
90
+ onClick: ()=>setOpen((prev)=>!prev),
91
+ children: [
92
+ !open ? setting?.viewMoreText : setting?.viewLessText,
93
+ setting?.enableViewMoreIcon && /*#__PURE__*/ jsxRuntime.jsx("svg", {
94
+ className: "gp-ml-1 gp-inline-block",
95
+ height: "1em",
96
+ width: "1em",
97
+ viewBox: "0 0 22 12",
98
+ fill: "none",
99
+ xmlns: "http://www.w3.org/2000/svg",
100
+ children: !open ? /*#__PURE__*/ jsxRuntime.jsx("path", {
101
+ d: "M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z",
102
+ fill: "currentColor"
103
+ }) : /*#__PURE__*/ jsxRuntime.jsx("path", {
104
+ d: "M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683417 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM11 1L11.7071 0.292893C11.3166 -0.0976311 10.6834 -0.0976311 10.2929 0.292893L11 1ZM20.2929 11.7071C20.6834 12.0976 21.3166 12.0976 21.7071 11.7071C22.0976 11.3166 22.0976 10.6834 21.7071 10.2929L20.2929 11.7071ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071ZM10.2929 1.70711L20.2929 11.7071L21.7071 10.2929L11.7071 0.292893L10.2929 1.70711Z",
105
+ fill: "currentColor"
106
+ })
107
+ })
108
+ ]
109
+ })
110
+ ]
17
111
  });
18
112
  };
19
113
 
package/dist/cjs/collection/components/CollectionDescription.liquid.js CHANGED
@@ -3,18 +3,111 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var core = require('@gem-sdk/core');
6
- var Text_liquid = require('../../text/components/Text.liquid.js');
6
+ var helpers = require('../../helpers.js');
7
+ var common = require('../../product/components/ProductImages/common/common.js');
7
8
 
8
- const CollectionDescription = ({ setting })=>{
9
+ const CollectionDescription = ({ setting, advanced, builderProps, pageContext })=>{
10
+ const appendTypoStyle = core.composeTypographyStyle(setting?.typo, setting?.typography);
11
+ const appendTypoClass = core.composeTypographyClassName(setting?.typo, setting?.typography);
12
+ const defaultStyle = {
13
+ ...core.getStyleShadow({
14
+ styleAppliedFor: 'text-shadow'
15
+ }),
16
+ ...core.makeStyleResponsive('ta', setting?.textAlign),
17
+ ...core.getGlobalColorStyle(setting?.color),
18
+ ...core.makeStyle({
19
+ tt: setting?.transform
20
+ }),
21
+ ...appendTypoStyle
22
+ };
23
+ const collapseStyle = {
24
+ ...defaultStyle,
25
+ ...core.makeStyleResponsive('line-clamp', core.makeLineClamp(setting?.lineClamp, setting?.hasLineClamp))
26
+ };
27
+ const getDisplayCollapse = ()=>{
28
+ return common.getDisplayStyle((device)=>!!setting?.hasLineClamp && setting.hasLineClamp[device] !== undefined && !setting.hasLineClamp[device], 'block');
29
+ };
30
+ const moreIcon = `<svg
31
+ class="gp-ml-1 gp-inline-block"
32
+ style="display: inline-block; margin-left: 1px;"
33
+ height="1em"
34
+ width="1em"
35
+ viewBox="0 0 22 12"
36
+ fill="none"
37
+ xmlns="http://www.w3.org/2000/svg"
38
+ >
39
+ <path
40
+ d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z"
41
+ fill="currentColor"
42
+ />
43
+ </svg>`;
44
+ const viewMoreTextTranslate = helpers.getDynamicSourceLocales({
45
+ val: setting?.viewMoreText,
46
+ uid: builderProps?.uid,
47
+ settingId: 'viewMoreText',
48
+ isLiquid: true,
49
+ pageContext,
50
+ translate: setting?.translate
51
+ });
52
+ const viewLessTextTranslate = helpers.getDynamicSourceLocales({
53
+ val: setting?.viewLessText,
54
+ uid: builderProps?.uid,
55
+ settingId: 'viewLessText',
56
+ isLiquid: true,
57
+ pageContext,
58
+ translate: setting?.translate
59
+ });
9
60
  return core.template`
10
- ${Text_liquid.default({
11
- styles: setting,
61
+ <gp-collection-description data-id="${builderProps?.uid}" class="${advanced?.cssClass} gp-collection-description" gp-data='${JSON.stringify({
12
62
  setting: {
13
- ...setting,
14
- text: '{{ collection.description }}',
15
- excludeFlex: true
16
- }
17
- })}
63
+ lineClamp: setting?.lineClamp,
64
+ hasLineClamp: setting?.hasLineClamp,
65
+ viewMoreText: viewMoreTextTranslate,
66
+ viewLessText: viewLessTextTranslate,
67
+ enableViewMoreIcon: setting?.enableViewMoreIcon
68
+ },
69
+ defaultStyle,
70
+ collapseStyle
71
+ }).replaceAll("'", '&#039;')}'
72
+ view-more-text="${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}"
73
+ view-less-text="${pageContext?.isPreviewing ? viewLessTextTranslate : `{{${viewLessTextTranslate}}}`}"
74
+ >
75
+ <div></div>
76
+ <div
77
+ data-gp-text
78
+ class="${core.cls('gp-relative p-description-wrapper gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, core.getGlobalColorClass('text', setting?.color), "data-[browser=safari]:after:gp-content-[' '] data-[browser=safari]:after:gp-absolute data-[browser=safari]:after:gp-left-0 data-[browser=safari]:after:gp-right-0 data-[browser=safari]:after:gp-bottom-0 data-[browser=safari]:after:gp-w-full data-[browser=safari]:after:gp-h-1/2 data-[browser=safari]:after:gp-bg-gradient-to-t data-[browser=safari]:after:gp-from-white")}"
79
+ data-gp-text
80
+ style="${collapseStyle}"
81
+ >
82
+ {{collection.description}}
83
+ </div>
84
+ {% if collection.description != blank -%}
85
+ <button
86
+ type="button"
87
+ class="p-description-show-more ${core.cls(appendTypoClass, core.getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 hover:gp-opacity-80 gp-transition-all gp-w-full')}"
88
+ style="${{
89
+ ...core.makeStyle({
90
+ tt: setting?.transform
91
+ }),
92
+ ...core.makeStyleResponsive('ta', setting?.textAlign),
93
+ ...appendTypoStyle,
94
+ ...core.getGlobalColorStyle(setting?.showMoreColor),
95
+ ...getDisplayCollapse(),
96
+ position: 'absolute',
97
+ visibility: 'hidden'
98
+ }}"
99
+ >
100
+ ${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}
101
+ ${setting?.enableViewMoreIcon ? moreIcon : ''}
102
+ </button>
103
+ {%- endif -%}
104
+ {% style %}
105
+ .p-description-wrapper.gp-p-description-text * {
106
+ color: inherit
107
+ }
108
+ {% endstyle %}
109
+ </gp-collection-description>
110
+ ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-collection-description.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-collection-description.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
18
111
  `;
19
112
  };
20
113
 
package/dist/cjs/collection/setting/CollectionDescription.js CHANGED
@@ -39,6 +39,59 @@ const config = {
39
39
  }
40
40
  ]
41
41
  },
42
+ {
43
+ id: 'hasLineClamp',
44
+ label: 'Enable View More',
45
+ type: 'toggle',
46
+ devices: {
47
+ desktop: {
48
+ default: true
49
+ }
50
+ }
51
+ },
52
+ {
53
+ id: 'lineClamp',
54
+ label: 'Maximum Row(s) To Show',
55
+ type: 'input:number',
56
+ min: 1,
57
+ hide: true,
58
+ devices: {
59
+ desktop: {
60
+ default: 12
61
+ }
62
+ }
63
+ },
64
+ {
65
+ id: 'viewMoreText',
66
+ label: 'View More Text',
67
+ type: 'input',
68
+ default: 'Show more',
69
+ hide: true
70
+ },
71
+ {
72
+ id: 'showMoreColor',
73
+ type: 'colorpicker',
74
+ default: 'text-1'
75
+ },
76
+ {
77
+ id: 'viewLessText',
78
+ label: 'View Less Text',
79
+ type: 'input',
80
+ default: 'Show less',
81
+ hide: true
82
+ },
83
+ {
84
+ id: 'enableViewMoreIcon',
85
+ label: 'Enable Icon',
86
+ type: 'toggle',
87
+ default: true,
88
+ hide: true
89
+ },
90
+ {
91
+ id: 'translate',
92
+ type: 'input',
93
+ default: 'viewLessText,viewMoreText'
94
+ },
42
95
  {
43
96
  id: 'textAlign',
44
97
  label: 'Align',
@@ -74,11 +127,86 @@ const config = {
74
127
  default: 'center'
75
128
  }
76
129
  }
130
+ },
131
+ {
132
+ id: 'color',
133
+ type: 'colorpicker',
134
+ default: 'text-1'
77
135
  }
78
136
  ]
79
137
  }
80
138
  ],
81
139
  ui: [
140
+ {
141
+ type: 'group',
142
+ label: {
143
+ en: ''
144
+ },
145
+ controls: [
146
+ {
147
+ type: 'control',
148
+ label: {
149
+ en: 'Show more'
150
+ },
151
+ options: {
152
+ label: 'large'
153
+ },
154
+ setting: {
155
+ id: 'hasLineClamp'
156
+ }
157
+ },
158
+ {
159
+ type: 'control',
160
+ label: {
161
+ en: 'Text color'
162
+ },
163
+ setting: {
164
+ id: 'showMoreColor'
165
+ },
166
+ condition: 'hasLineClamp == true'
167
+ },
168
+ {
169
+ type: 'control',
170
+ label: {
171
+ en: 'Max lines'
172
+ },
173
+ setting: {
174
+ id: 'lineClamp'
175
+ },
176
+ condition: 'hasLineClamp == true'
177
+ },
178
+ {
179
+ type: 'control',
180
+ label: {
181
+ en: 'Show more label'
182
+ },
183
+ setting: {
184
+ id: 'viewMoreText'
185
+ },
186
+ condition: 'hasLineClamp == true'
187
+ },
188
+ {
189
+ type: 'control',
190
+ label: {
191
+ en: 'Show less label'
192
+ },
193
+ setting: {
194
+ id: 'viewLessText'
195
+ },
196
+ condition: 'hasLineClamp == true'
197
+ },
198
+ {
199
+ type: 'control',
200
+ label: {
201
+ en: 'Icon'
202
+ },
203
+ setting: {
204
+ id: 'enableViewMoreIcon'
205
+ },
206
+ condition: 'hasLineClamp == true'
207
+ }
208
+ ]
209
+ },
82
210
  {
83
211
  label: {
84
212
  en: 'Text'
package/dist/esm/banner/components/hero-banner/index.liquid.js CHANGED
@@ -215,8 +215,8 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
215
215
  ...makeStyleResponsive('pos', getAttachmentDevice()),
216
216
  ...getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
217
217
  }}"
218
- ${embed()}
219
218
  >
219
+ ${embed()}
220
220
  ${!setting?.preload ? DEVICES.map((device)=>{
221
221
  return RenderIf(getEnableBgImageByDevice(device), NextImage({
222
222
  src: getImageSrc(getResponsiveValueByScreen(srcSet, device), device),
package/dist/esm/banner/components/hero-banner/utils/index.js CHANGED
@@ -25,13 +25,14 @@ const getHeightHeroBanner = (background, enableParallax)=>{
25
25
  'tablet'
26
26
  ];
27
27
  DEVICES.forEach((device)=>{
28
+ const enableParallaxDevice = background?.[device]?.type === 'image' ? enableParallax : false;
28
29
  const isScale = isScaleImage({
29
- enableParallax,
30
+ enableParallax: enableParallaxDevice,
30
31
  attachment: background[device]?.attachment
31
32
  });
32
33
  result = {
33
34
  ...result,
34
- [device]: enableParallax ? '150%' : isScale ? '100vh' : '100%'
35
+ [device]: enableParallaxDevice ? '150%' : isScale ? '100vh' : '100%'
35
36
  };
36
37
  });
37
38
  return makeStyleResponsive('h', result);
@@ -44,8 +45,9 @@ const getWidthHeroBanner = (background, enableParallax)=>{
44
45
  'tablet'
45
46
  ];
46
47
  DEVICES.forEach((device)=>{
48
+ const enableParallaxDevice = background?.[device]?.type === 'image' ? enableParallax : false;
47
49
  const isScale = isScaleImage({
48
- enableParallax,
50
+ enableParallax: enableParallaxDevice,
49
51
  attachment: background[device]?.attachment
50
52
  });
51
53
  result = {
package/dist/esm/collection/components/CollectionDescription.js CHANGED
@@ -1,15 +1,109 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { useCollection } from '@gem-sdk/core';
3
- import Text from '../../text/components/Text.js';
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { useCurrentDevice, useCollection, getResponsiveValueByScreen, composeTypographyClassName, composeTypographyStyle, isSafari, cls, getGlobalColorClass, getStyleShadow, makeStyleResponsive, makeStyle, getGlobalColorStyle } from '@gem-sdk/core';
3
+ import { useState, useRef, useEffect } from 'react';
4
4
 
5
- const CollectionDescription = ({ setting })=>{
5
+ const CollectionDescription = ({ setting, builderProps })=>{
6
+ const [open, setOpen] = useState(false);
7
+ const [isShowViewMore, allowShowViewMore] = useState(false);
8
+ const ref = useRef(null);
9
+ const currentDevice = useCurrentDevice();
6
10
  const collection = useCollection();
7
- return /*#__PURE__*/ jsx(Text, {
8
- styles: setting,
9
- setting: {
10
- text: collection?.descriptionHtml ?? 'Collection description',
11
- excludeFlex: true
11
+ const hasLineClamp = getResponsiveValueByScreen(setting?.hasLineClamp, currentDevice);
12
+ const lineClamp = getResponsiveValueByScreen(setting?.lineClamp, currentDevice);
13
+ const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
14
+ const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
15
+ useEffect(()=>{
16
+ const dom = ref.current;
17
+ setOpen(false);
18
+ if (dom && hasLineClamp && collection?.description) {
19
+ const value = lineClamp;
20
+ setTimeout(()=>{
21
+ const scrollHeight = dom?.scrollHeight ?? 0;
22
+ const clientHeight = dom?.clientHeight ?? 0;
23
+ const lineHeight = window.getComputedStyle(dom).getPropertyValue('line-height');
24
+ const lineText = Math.round((scrollHeight ?? 0) / parseInt(lineHeight));
25
+ const conditionCheckLine = isSafari() ? value && value < lineText : clientHeight < scrollHeight;
26
+ if (value && conditionCheckLine) {
27
+ allowShowViewMore(()=>true);
28
+ } else {
29
+ allowShowViewMore(()=>false);
30
+ }
31
+ }, 100);
12
32
  }
33
+ }, [
34
+ hasLineClamp,
35
+ lineClamp,
36
+ collection?.description
37
+ ]);
38
+ const css = `
39
+ .gp-p-description-text > *:not(ol):not(ul):not(table):not(div) {
40
+ display: inline !important;
41
+ }
42
+ .gp-p-description-text > *:not(ol):not(ul):not(table):not(div)::after {
43
+ content: "\\A";
44
+ white-space: pre;
45
+ }
46
+ .gp-p-description-text > table {
47
+ box-shadow: none;
48
+ }
49
+ `;
50
+ const hasDescription = collection?.description && collection.description?.trim() != '';
51
+ return /*#__PURE__*/ jsxs("div", {
52
+ "data-id": builderProps?.uid,
53
+ children: [
54
+ !isSafari() && /*#__PURE__*/ jsx("style", {
55
+ children: css
56
+ }),
57
+ /*#__PURE__*/ jsx("div", {
58
+ ref: ref,
59
+ "data-gp-text": true,
60
+ className: cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, !hasDescription ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', getGlobalColorClass('text', setting?.color)),
61
+ style: {
62
+ ...getStyleShadow({
63
+ styleAppliedFor: 'text-shadow'
64
+ }),
65
+ ...makeStyleResponsive('ta', setting?.textAlign),
66
+ ...hasLineClamp && !open ? makeStyleResponsive('line-clamp', setting?.lineClamp) : {},
67
+ ...makeStyle({
68
+ tt: setting?.transform
69
+ }),
70
+ ...appendTypoStyle
71
+ },
72
+ dangerouslySetInnerHTML: {
73
+ __html: collection?.descriptionHtml && hasDescription ? collection.descriptionHtml : ``
74
+ }
75
+ }),
76
+ hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxs("button", {
77
+ className: cls(appendTypoClass, getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 gp-w-full gp-transition-all hover:gp-opacity-80'),
78
+ style: {
79
+ ...makeStyleResponsive('ta', setting?.textAlign),
80
+ ...makeStyle({
81
+ tt: setting?.transform
82
+ }),
83
+ ...appendTypoStyle,
84
+ ...getGlobalColorStyle(setting?.showMoreColor)
85
+ },
86
+ onClick: ()=>setOpen((prev)=>!prev),
87
+ children: [
88
+ !open ? setting?.viewMoreText : setting?.viewLessText,
89
+ setting?.enableViewMoreIcon && /*#__PURE__*/ jsx("svg", {
90
+ className: "gp-ml-1 gp-inline-block",
91
+ height: "1em",
92
+ width: "1em",
93
+ viewBox: "0 0 22 12",
94
+ fill: "none",
95
+ xmlns: "http://www.w3.org/2000/svg",
96
+ children: !open ? /*#__PURE__*/ jsx("path", {
97
+ d: "M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z",
98
+ fill: "currentColor"
99
+ }) : /*#__PURE__*/ jsx("path", {
100
+ d: "M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683417 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM11 1L11.7071 0.292893C11.3166 -0.0976311 10.6834 -0.0976311 10.2929 0.292893L11 1ZM20.2929 11.7071C20.6834 12.0976 21.3166 12.0976 21.7071 11.7071C22.0976 11.3166 22.0976 10.6834 21.7071 10.2929L20.2929 11.7071ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071ZM10.2929 1.70711L20.2929 11.7071L21.7071 10.2929L11.7071 0.292893L10.2929 1.70711Z",
101
+ fill: "currentColor"
102
+ })
103
+ })
104
+ ]
105
+ })
106
+ ]
13
107
  });
14
108
  };
15
109
 
package/dist/esm/collection/components/CollectionDescription.liquid.js CHANGED
@@ -1,16 +1,109 @@
1
- import { template } from '@gem-sdk/core';
2
- import Text from '../../text/components/Text.liquid.js';
1
+ import { composeTypographyStyle, composeTypographyClassName, getStyleShadow, makeStyleResponsive, getGlobalColorStyle, makeStyle, makeLineClamp, template, cls, getGlobalColorClass, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
2
+ import { getDynamicSourceLocales, getSettingPreloadData } from '../../helpers.js';
3
+ import { getDisplayStyle } from '../../product/components/ProductImages/common/common.js';
3
4
 
4
- const CollectionDescription = ({ setting })=>{
5
+ const CollectionDescription = ({ setting, advanced, builderProps, pageContext })=>{
6
+ const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
7
+ const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
8
+ const defaultStyle = {
9
+ ...getStyleShadow({
10
+ styleAppliedFor: 'text-shadow'
11
+ }),
12
+ ...makeStyleResponsive('ta', setting?.textAlign),
13
+ ...getGlobalColorStyle(setting?.color),
14
+ ...makeStyle({
15
+ tt: setting?.transform
16
+ }),
17
+ ...appendTypoStyle
18
+ };
19
+ const collapseStyle = {
20
+ ...defaultStyle,
21
+ ...makeStyleResponsive('line-clamp', makeLineClamp(setting?.lineClamp, setting?.hasLineClamp))
22
+ };
23
+ const getDisplayCollapse = ()=>{
24
+ return getDisplayStyle((device)=>!!setting?.hasLineClamp && setting.hasLineClamp[device] !== undefined && !setting.hasLineClamp[device], 'block');
25
+ };
26
+ const moreIcon = `<svg
27
+ class="gp-ml-1 gp-inline-block"
28
+ style="display: inline-block; margin-left: 1px;"
29
+ height="1em"
30
+ width="1em"
31
+ viewBox="0 0 22 12"
32
+ fill="none"
33
+ xmlns="http://www.w3.org/2000/svg"
34
+ >
35
+ <path
36
+ d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z"
37
+ fill="currentColor"
38
+ />
39
+ </svg>`;
40
+ const viewMoreTextTranslate = getDynamicSourceLocales({
41
+ val: setting?.viewMoreText,
42
+ uid: builderProps?.uid,
43
+ settingId: 'viewMoreText',
44
+ isLiquid: true,
45
+ pageContext,
46
+ translate: setting?.translate
47
+ });
48
+ const viewLessTextTranslate = getDynamicSourceLocales({
49
+ val: setting?.viewLessText,
50
+ uid: builderProps?.uid,
51
+ settingId: 'viewLessText',
52
+ isLiquid: true,
53
+ pageContext,
54
+ translate: setting?.translate
55
+ });
5
56
  return template`
6
- ${Text({
7
- styles: setting,
57
+ <gp-collection-description data-id="${builderProps?.uid}" class="${advanced?.cssClass} gp-collection-description" gp-data='${JSON.stringify({
8
58
  setting: {
9
- ...setting,
10
- text: '{{ collection.description }}',
11
- excludeFlex: true
12
- }
13
- })}
59
+ lineClamp: setting?.lineClamp,
60
+ hasLineClamp: setting?.hasLineClamp,
61
+ viewMoreText: viewMoreTextTranslate,
62
+ viewLessText: viewLessTextTranslate,
63
+ enableViewMoreIcon: setting?.enableViewMoreIcon
64
+ },
65
+ defaultStyle,
66
+ collapseStyle
67
+ }).replaceAll("'", '&#039;')}'
68
+ view-more-text="${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}"
69
+ view-less-text="${pageContext?.isPreviewing ? viewLessTextTranslate : `{{${viewLessTextTranslate}}}`}"
70
+ >
71
+ <div></div>
72
+ <div
73
+ data-gp-text
74
+ class="${cls('gp-relative p-description-wrapper gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, getGlobalColorClass('text', setting?.color), "data-[browser=safari]:after:gp-content-[' '] data-[browser=safari]:after:gp-absolute data-[browser=safari]:after:gp-left-0 data-[browser=safari]:after:gp-right-0 data-[browser=safari]:after:gp-bottom-0 data-[browser=safari]:after:gp-w-full data-[browser=safari]:after:gp-h-1/2 data-[browser=safari]:after:gp-bg-gradient-to-t data-[browser=safari]:after:gp-from-white")}"
75
+ data-gp-text
76
+ style="${collapseStyle}"
77
+ >
78
+ {{collection.description}}
79
+ </div>
80
+ {% if collection.description != blank -%}
81
+ <button
82
+ type="button"
83
+ class="p-description-show-more ${cls(appendTypoClass, getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 hover:gp-opacity-80 gp-transition-all gp-w-full')}"
84
+ style="${{
85
+ ...makeStyle({
86
+ tt: setting?.transform
87
+ }),
88
+ ...makeStyleResponsive('ta', setting?.textAlign),
89
+ ...appendTypoStyle,
90
+ ...getGlobalColorStyle(setting?.showMoreColor),
91
+ ...getDisplayCollapse(),
92
+ position: 'absolute',
93
+ visibility: 'hidden'
94
+ }}"
95
+ >
96
+ ${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}
97
+ ${setting?.enableViewMoreIcon ? moreIcon : ''}
98
+ </button>
99
+ {%- endif -%}
100
+ {% style %}
101
+ .p-description-wrapper.gp-p-description-text * {
102
+ color: inherit
103
+ }
104
+ {% endstyle %}
105
+ </gp-collection-description>
106
+ ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-collection-description.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-collection-description.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
14
107
  `;
15
108
  };
16
109
 
package/dist/esm/collection/setting/CollectionDescription.js CHANGED
@@ -35,6 +35,59 @@ const config = {
35
35
  }
36
36
  ]
37
37
  },
38
+ {
39
+ id: 'hasLineClamp',
40
+ label: 'Enable View More',
41
+ type: 'toggle',
42
+ devices: {
43
+ desktop: {
44
+ default: true
45
+ }
46
+ }
47
+ },
48
+ {
49
+ id: 'lineClamp',
50
+ label: 'Maximum Row(s) To Show',
51
+ type: 'input:number',
52
+ min: 1,
53
+ hide: true,
54
+ devices: {
55
+ desktop: {
56
+ default: 12
57
+ }
58
+ }
59
+ },
60
+ {
61
+ id: 'viewMoreText',
62
+ label: 'View More Text',
63
+ type: 'input',
64
+ default: 'Show more',
65
+ hide: true
66
+ },
67
+ {
68
+ id: 'showMoreColor',
69
+ type: 'colorpicker',
70
+ default: 'text-1'
71
+ },
72
+ {
73
+ id: 'viewLessText',
74
+ label: 'View Less Text',
75
+ type: 'input',
76
+ default: 'Show less',
77
+ hide: true
78
+ },
79
+ {
80
+ id: 'enableViewMoreIcon',
81
+ label: 'Enable Icon',
82
+ type: 'toggle',
83
+ default: true,
84
+ hide: true
85
+ },
86
+ {
87
+ id: 'translate',
88
+ type: 'input',
89
+ default: 'viewLessText,viewMoreText'
90
+ },
38
91
  {
39
92
  id: 'textAlign',
40
93
  label: 'Align',
@@ -70,11 +123,86 @@ const config = {
70
123
  default: 'center'
71
124
  }
72
125
  }
126
+ },
127
+ {
128
+ id: 'color',
129
+ type: 'colorpicker',
130
+ default: 'text-1'
73
131
  }
74
132
  ]
75
133
  }
76
134
  ],
77
135
  ui: [
136
+ {
137
+ type: 'group',
138
+ label: {
139
+ en: ''
140
+ },
141
+ controls: [
142
+ {
143
+ type: 'control',
144
+ label: {
145
+ en: 'Show more'
146
+ },
147
+ options: {
148
+ label: 'large'
149
+ },
150
+ setting: {
151
+ id: 'hasLineClamp'
152
+ }
153
+ },
154
+ {
155
+ type: 'control',
156
+ label: {
157
+ en: 'Text color'
158
+ },
159
+ setting: {
160
+ id: 'showMoreColor'
161
+ },
162
+ condition: 'hasLineClamp == true'
163
+ },
164
+ {
165
+ type: 'control',
166
+ label: {
167
+ en: 'Max lines'
168
+ },
169
+ setting: {
170
+ id: 'lineClamp'
171
+ },
172
+ condition: 'hasLineClamp == true'
173
+ },
174
+ {
175
+ type: 'control',
176
+ label: {
177
+ en: 'Show more label'
178
+ },
179
+ setting: {
180
+ id: 'viewMoreText'
181
+ },
182
+ condition: 'hasLineClamp == true'
183
+ },
184
+ {
185
+ type: 'control',
186
+ label: {
187
+ en: 'Show less label'
188
+ },
189
+ setting: {
190
+ id: 'viewLessText'
191
+ },
192
+ condition: 'hasLineClamp == true'
193
+ },
194
+ {
195
+ type: 'control',
196
+ label: {
197
+ en: 'Icon'
198
+ },
199
+ setting: {
200
+ id: 'enableViewMoreIcon'
201
+ },
202
+ condition: 'hasLineClamp == true'
203
+ }
204
+ ]
205
+ },
78
206
  {
79
207
  label: {
80
208
  en: 'Text'
package/dist/types/index.d.ts CHANGED
@@ -667,7 +667,15 @@ type CollectionDescriptionProps = BaseProps<{
667
667
  /**
668
668
  * @deprecated please use transform inside `typo` instead
669
669
  */
670
+ color?: ColorValueType;
670
671
  transform?: TransformProp;
672
+ showMoreColor?: ColorValueType;
673
+ hasLineClamp?: ObjectDevices<boolean>;
674
+ lineClamp?: ObjectDevices<number>;
675
+ viewMoreText?: string;
676
+ viewLessText?: string;
677
+ enableViewMoreIcon?: boolean;
678
+ translate?: string;
671
679
  }>;
672
680
  declare const CollectionDescription$1: React.FC<CollectionDescriptionProps>;
673
681
 
@@ -6558,7 +6566,9 @@ declare const CollectionToolbar: ({ setting, builderProps, pageContext }: Collec
6558
6566
 
6559
6567
  declare const CollectionTitle: ({ setting }: CollectionTitleProps) => string;
6560
6568
 
6561
- declare const CollectionDescription: ({ setting }: CollectionDescriptionProps) => string;
6569
+ declare const CollectionDescription: ({ setting, advanced, builderProps, pageContext, }: CollectionDescriptionProps & {
6570
+ pageContext?: PageContext | undefined;
6571
+ }) => string;
6562
6572
 
6563
6573
  declare const CollectionPaginator: ({ setting, builderProps, pageContext }: CollectionPaginatorProps) => string;
6564
6574
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "2.1.13-staging.10",
3
+ "version": "2.1.13-staging.12",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",