@cntrl-site/sdk-nextjs 1.9.5 → 1.9.7

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 (7) hide show
  1. package/lib/components/items/FileItem/ImageItem.js +2 -4
  2. package/lib/components/items/FileItem/VideoItem.js +2 -4
  3. package/lib/components/items/RectangleItem/RectangleItem.js +1 -1
  4. package/package.json +1 -1
  5. package/src/components/items/FileItem/ImageItem.tsx +24 -25
  6. package/src/components/items/FileItem/VideoItem.tsx +24 -25
  7. package/src/components/items/RectangleItem/RectangleItem.tsx +1 -0
package/lib/components/items/FileItem/ImageItem.js CHANGED
@@ -75,13 +75,11 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
75
75
  '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
76
76
  } : {})) : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_q = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _q !== void 0 ? _q : 'none' }), children: [hasGLEffect && isFXAllowed
77
77
  ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
78
- : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })), (0, jsx_runtime_1.jsx)("div", { className: `image-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
78
+ : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })), strokeWidth !== 0 && strokeValue && ((0, jsx_runtime_1.jsx)("div", { className: `image-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
79
79
  backgroundPosition: 'center',
80
80
  backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
81
81
  backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
82
- } : {
83
- background: stroke,
84
- })) : { background: stroke })) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
82
+ } : { background: stroke })) : {})) }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
85
83
  .image-wrapper-${item.id} {
86
84
  position: absolute;
87
85
  width: 100%;
package/lib/components/items/FileItem/VideoItem.js CHANGED
@@ -138,13 +138,11 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
138
138
  else {
139
139
  videoRef.play();
140
140
  }
141
- } })))] })), (0, jsx_runtime_1.jsx)("div", { className: `video-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
141
+ } })))] })), strokeWidth !== 0 && strokeValue && ((0, jsx_runtime_1.jsx)("div", { className: `video-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
142
142
  backgroundPosition: 'center',
143
143
  backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
144
144
  backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
145
- } : {
146
- background: stroke,
147
- })) : { background: stroke })) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
145
+ } : { background: stroke })) : {})) }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
148
146
  .video-wrapper-${item.id} {
149
147
  position: absolute;
150
148
  overflow: hidden;
package/lib/components/items/RectangleItem/RectangleItem.js CHANGED
@@ -125,6 +125,6 @@ function Fill({ fill, itemId, background, solidTransition }) {
125
125
  backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
126
126
  opacity: fill.opacity
127
127
  }
128
- : { background })), { position: 'absolute', mixBlendMode: fill.blendMode, top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }), (isRotatedImage ? { overflow: 'hidden' } : {})) }, fill.id));
128
+ : { background })), { position: 'absolute', borderRadius: 'inherit', mixBlendMode: fill.blendMode, top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }), (isRotatedImage ? { overflow: 'hidden' } : {})) }, fill.id));
129
129
  }
130
130
  ;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.9.5",
3
+ "version": "1.9.7",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
package/src/components/items/FileItem/ImageItem.tsx CHANGED
@@ -123,31 +123,30 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
123
123
  src={item.commonParams.url}
124
124
  />
125
125
  )}
126
- <div
127
- className={`image-border-${item.id}`}
128
- style={{
129
- position: 'absolute',
130
- inset: 0,
131
- borderRadius: 'inherit',
132
- pointerEvents: 'none',
133
- zIndex: 2,
134
- WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
135
- WebkitMaskComposite: 'xor',
136
- maskComposite: 'exclude',
137
- ...(strokeWidth !== 0 && strokeValue ? {
138
- ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
139
- ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
140
- ...(strokeValue.type === 'image' ? {
141
- backgroundPosition: 'center',
142
- backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
143
- backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
144
- } : {
145
- background: stroke,
146
- }
147
- )
148
- } : { background: stroke }),
149
- }}
150
- />
126
+ {strokeWidth !== 0 && strokeValue && (
127
+ <div
128
+ className={`image-border-${item.id}`}
129
+ style={{
130
+ position: 'absolute',
131
+ inset: 0,
132
+ borderRadius: 'inherit',
133
+ pointerEvents: 'none',
134
+ zIndex: 2,
135
+ WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
136
+ WebkitMaskComposite: 'xor',
137
+ maskComposite: 'exclude',
138
+ ...(strokeWidth !== 0 && strokeValue ? {
139
+ ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
140
+ ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
141
+ ...(strokeValue.type === 'image' ? {
142
+ backgroundPosition: 'center',
143
+ backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
144
+ backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
145
+ } : { background: stroke })
146
+ } : {}),
147
+ }}
148
+ />
149
+ )}
151
150
  </div>
152
151
  <JSXStyle id={id}>{`
153
152
  .image-wrapper-${item.id} {
package/src/components/items/FileItem/VideoItem.tsx CHANGED
@@ -217,31 +217,30 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
217
217
  ))}
218
218
  </>
219
219
  )}
220
- <div
221
- className={`video-border-${item.id}`}
222
- style={{
223
- position: 'absolute',
224
- inset: 0,
225
- borderRadius: 'inherit',
226
- pointerEvents: 'none',
227
- zIndex: 2,
228
- WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
229
- WebkitMaskComposite: 'xor',
230
- maskComposite: 'exclude',
231
- ...(strokeWidth !== 0 && strokeValue ? {
232
- ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
233
- ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
234
- ...(strokeValue.type === 'image' ? {
235
- backgroundPosition: 'center',
236
- backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
237
- backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
238
- } : {
239
- background: stroke,
240
- }
241
- )
242
- } : { background: stroke }),
243
- }}
244
- />
220
+ {strokeWidth !== 0 && strokeValue && (
221
+ <div
222
+ className={`video-border-${item.id}`}
223
+ style={{
224
+ position: 'absolute',
225
+ inset: 0,
226
+ borderRadius: 'inherit',
227
+ pointerEvents: 'none',
228
+ zIndex: 2,
229
+ WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
230
+ WebkitMaskComposite: 'xor',
231
+ maskComposite: 'exclude',
232
+ ...(strokeWidth !== 0 && strokeValue ? {
233
+ ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
234
+ ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
235
+ ...(strokeValue.type === 'image' ? {
236
+ backgroundPosition: 'center',
237
+ backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
238
+ backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
239
+ } : { background: stroke })
240
+ } : {}),
241
+ }}
242
+ />
243
+ )}
245
244
  </div>
246
245
  <JSXStyle id={id}>{`
247
246
  .video-wrapper-${item.id} {
package/src/components/items/RectangleItem/RectangleItem.tsx CHANGED
@@ -184,6 +184,7 @@ function Fill({ fill, itemId, background, solidTransition }: { fill: FillLayer;
184
184
  }
185
185
  : { background }),
186
186
  position: 'absolute',
187
+ borderRadius: 'inherit',
187
188
  mixBlendMode: fill.blendMode as any,
188
189
  top: 0,
189
190
  left: 0,