@cntrl-site/sdk-nextjs 1.6.12 → 1.6.13

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/sdk-nextjs.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 CNTRL
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 CNTRL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,4 +1,4 @@
-# sdk-nextjs
-SDK is the code that transforms the raw data from the API
-into React components. In Control this happens at build time,
-when users hit the "Publish" button from the Project Dashboard.
+# sdk-nextjs
+SDK is the code that transforms the raw data from the API
+into React components. In Control this happens at build time,
+when users hit the "Publish" button from the Project Dashboard.

package/TODO.md

@@ -1 +1 @@
-1. Uninstall `@types/isomorphic-fetch` package and run `npm run build` - results in a TS compile error 
+1. Uninstall `@types/isomorphic-fetch` package and run `npm run build` - results in a TS compile error 

package/eslint.config.mjs

@@ -1,35 +1,35 @@
-import antfu from '@antfu/eslint-config';
-
-export default antfu(
-  {
-    ignores: [],
-  },
-  {
-    rules: {
-      'import/order': 'off',
-      'style/semi': 'off',
-      'antfu/if-newline': 'off',
-      'style/comma-dangle': 'off',
-      'style/member-delimiter-style': 'off',
-      'semi': ['error', 'always'],
-      'no-alert': 'off',
-      'ts/consistent-type-definitions': 'off',
-      'perfectionist/sort-imports': 'off',
-      'perfectionist/sort-named-imports': 'off',
-      'ts/consistent-type-imports': 'off',
-      'jsonc/sort-keys': 'off',
-      'node/prefer-global/process': 'off',
-      'style/arrow-parens': 'off',
-      'ts/method-signature-style': 'off',
-      'style/brace-style': 'off',
-      'style/jsx-one-expression-per-line': 'off',
-      'test/prefer-lowercase-title': 'off',
-      'perfectionist/sort-exports': 'off',
-      'no-extra-boolean-cast': 'off',
-      'prefer-promise-reject-errors': 'off',
-      'new-cap': 'off',
-      'perfectionist/sort-named-exports': 'off',
-      'style/multiline-ternary': 'off'
-    },
-  },
-);
+import antfu from '@antfu/eslint-config';
+
+export default antfu(
+  {
+    ignores: [],
+  },
+  {
+    rules: {
+      'import/order': 'off',
+      'style/semi': 'off',
+      'antfu/if-newline': 'off',
+      'style/comma-dangle': 'off',
+      'style/member-delimiter-style': 'off',
+      'semi': ['error', 'always'],
+      'no-alert': 'off',
+      'ts/consistent-type-definitions': 'off',
+      'perfectionist/sort-imports': 'off',
+      'perfectionist/sort-named-imports': 'off',
+      'ts/consistent-type-imports': 'off',
+      'jsonc/sort-keys': 'off',
+      'node/prefer-global/process': 'off',
+      'style/arrow-parens': 'off',
+      'ts/method-signature-style': 'off',
+      'style/brace-style': 'off',
+      'style/jsx-one-expression-per-line': 'off',
+      'test/prefer-lowercase-title': 'off',
+      'perfectionist/sort-exports': 'off',
+      'no-extra-boolean-cast': 'off',
+      'prefer-promise-reject-errors': 'off',
+      'new-cap': 'off',
+      'perfectionist/sort-named-exports': 'off',
+      'style/multiline-ternary': 'off'
+    },
+  },
+);

package/jest.config.js

@@ -1,6 +1,6 @@
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
-  rootDir: './src'
-};
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  rootDir: './src'
+};

package/lib/common/useItemFXData.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemFXData = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("./useKeyframeValue");
-const baseVariables = `precision mediump float;
-uniform sampler2D u_image;
-uniform sampler2D u_pattern;
-uniform vec2 u_imgDimensions;
-uniform vec2 u_patternDimensions;
-uniform float u_time;
-uniform vec2 u_cursor;
+const baseVariables = `precision mediump float;
+uniform sampler2D u_image;
+uniform sampler2D u_pattern;
+uniform vec2 u_imgDimensions;
+uniform vec2 u_patternDimensions;
+uniform float u_time;
+uniform vec2 u_cursor;
 varying vec2 v_texCoord;`;
 function useItemFXData(item, sectionId) {
     const { fragmentShader: shaderBody, FXControls } = item.commonParams;

package/lib/components/Article.js

@@ -28,11 +28,11 @@ const Article = ({ article, sectionData }) => {
     return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: article.sections.map((section, i) => {
                             const data = section.name ? sectionData[section.name] : {};
                             return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }, section.id));
-                        }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-       .article {
-         position: relative;
-         overflow: clip;
-       }
+                        }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+       .article {
+         position: relative;
+         overflow: clip;
+       }
       ` })] }) }));
 };
 exports.Article = Article;

package/lib/components/LayoutStyle.js

@@ -9,10 +9,10 @@ const sdk_1 = require("@cntrl-site/sdk");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const LayoutStyle = ({ id, layouts, layoutId, children }) => {
     const layout = layouts.find(l => l.id === layoutId);
-    return ((0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-      ${(0, sdk_1.getLayoutMediaQuery)(layoutId, layouts)} {
-        ${children === null || children === void 0 ? void 0 : children(layout)}
-      }
+    return ((0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      ${(0, sdk_1.getLayoutMediaQuery)(layoutId, layouts)} {
+        ${children === null || children === void 0 ? void 0 : children(layout)}
+      }
     ` }));
 };
 exports.LayoutStyle = LayoutStyle;

package/lib/components/Section/Section.js

@@ -11,38 +11,101 @@ const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useSectionRegistry_1 = require("../../utils/ArticleRectManager/useSectionRegistry");
 const color_1 = require("@cntrl-site/color");
+const useLayoutContext_1 = require("../useLayoutContext");
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
+function isVideoUrl(url) {
+    const videoExtensions = ['.mp4', '.webm', '.ogg'];
+    return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
+}
 const Section = ({ section, data, children }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const id = (0, react_1.useId)();
     const sectionRef = (0, react_1.useRef)(null);
     const { layouts, customSections } = (0, useCntrlContext_1.useCntrlContext)();
-    const layoutValues = [section.height, section.color];
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const layoutValues = [section.height, section.color, (_a = section.media) !== null && _a !== void 0 ? _a : {}];
     const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
+    const isVideo = layout && ((_c = (_b = section.media) === null || _b === void 0 ? void 0 : _b[layout]) === null || _c === void 0 ? void 0 : _c.url) ? isVideoUrl(String((_e = (_d = section.media) === null || _d === void 0 ? void 0 : _d[layout]) === null || _e === void 0 ? void 0 : _e.url)) : false;
+    const videoRef = (0, react_1.useRef)(null);
     (0, useSectionRegistry_1.useSectionRegistry)(section.id, sectionRef.current);
     const getSectionVisibilityStyles = () => {
         return layouts
             .sort((a, b) => a.startsWith - b.startsWith)
             .reduce((acc, layout) => {
             const isHidden = section.hidden[layout.id];
-            return `
-          ${acc}
-          ${(0, sdk_1.getLayoutMediaQuery)(layout.id, layouts)} {
-            .section-${section.id} {
-              display: ${isHidden ? 'none' : 'block'};
-            }
+            return `
+          ${acc}
+          ${(0, sdk_1.getLayoutMediaQuery)(layout.id, layouts)} {
+            .section-${section.id} {
+              display: ${isHidden ? 'none' : 'block'};
+            }
           }`;
         }, '');
     };
+    (0, react_1.useEffect)(() => {
+        if (!isVideo || !sectionRef.current || !videoRef.current)
+            return;
+        const video = videoRef.current;
+        const section = sectionRef.current;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                video.style.display = 'block';
+                video.play().catch(() => { });
+            }
+            else {
+                video.style.display = 'none';
+                video.pause();
+            }
+        }, {
+            root: null,
+            rootMargin: '50px',
+            threshold: 0
+        });
+        observer.observe(section);
+        return () => observer.disconnect();
+    }, [isVideo]);
     if (SectionComponent)
         return (0, jsx_runtime_1.jsx)("div", { ref: sectionRef, children: (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: children }) });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color]) => (`
-         .section-${section.id} {
-            height: ${getSectionHeight(height)};
-            position: relative;
-            background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
-         }`))}
-      ${getSectionVisibilityStyles()}
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, children: [layout && ((_g = (_f = section.media) === null || _f === void 0 ? void 0 : _f[layout]) === null || _g === void 0 ? void 0 : _g.url) && ((_j = (_h = section.media) === null || _h === void 0 ? void 0 : _h[layout]) === null || _j === void 0 ? void 0 : _j.size) !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsx)("div", { className: `section-background-wrapper-${section.id}`, children: isVideo ? ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, loop: true, muted: true, playsInline: true, preload: "auto", className: `video-background-${section.id}`, children: (0, jsx_runtime_1.jsx)("source", { src: (_m = (_l = (_k = section.media) === null || _k === void 0 ? void 0 : _k[layout]) === null || _l === void 0 ? void 0 : _l.url) !== null && _m !== void 0 ? _m : '' }) })) : ((0, jsx_runtime_1.jsx)("img", { src: (_q = (_p = (_o = section.media) === null || _o === void 0 ? void 0 : _o[layout]) === null || _p === void 0 ? void 0 : _p.url) !== null && _q !== void 0 ? _q : '', className: `image-background-${section.id}` })) }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color, media]) => {
+                    var _a;
+                    return (`
+         .section-${section.id} {
+            height: ${getSectionHeight(height)};
+            position: relative;
+            background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
+         }
+         .section-background-overlay-${section.id} {
+            height: ${getSectionHeight(height)};
+            width: 100%;
+            position: relative;
+            overflow: clip;
+         }
+         .section-background-wrapper-${section.id} {
+            transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
+            left: 0;
+            position: relative;
+            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)}};
+            width: 100%;
+         }
+         .video-background-${section.id} {
+            object-fit: ${(_a = media === null || media === void 0 ? void 0 : media.size) !== null && _a !== void 0 ? _a : 'cover'};
+            width: 100%;
+            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : '100%'};
+            position: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'sticky' : 'relative'};
+            top: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : 'unset'};
+            left: 0;
+         }
+         .image-background-${section.id} {
+            object-fit: ${media === null || media === void 0 ? void 0 : media.size};
+            width: 100%;
+            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : '100%'};
+            position: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'sticky' : 'relative'};
+            top: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : 'unset'};
+         }
+        `);
+                })}
+      ${getSectionVisibilityStyles()}
     ` })] }));
 };
 exports.Section = Section;

package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js

@@ -62,13 +62,13 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
         const iframe = ref.querySelector(`[data-embed="${item.id}"]`);
         if (!iframe)
             return;
-        const htmlWithStyles = `
-      ${fontGoogleTags}
-      ${fontAdobeTags}
-      <style>
-        ${fontCustomTags}
-      </style>
-      ${item.commonParams.html}
+        const htmlWithStyles = `
+      ${fontGoogleTags}
+      ${fontAdobeTags}
+      <style>
+        ${fontCustomTags}
+      </style>
+      ${item.commonParams.html}
     `;
         iframe.srcdoc = htmlWithStyles;
     }, [item.commonParams.html, item.commonParams.iframe, ref]);
@@ -76,31 +76,31 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), { transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-      .embed-wrapper-${item.id} {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
-      .embed-${item.id} {
-        transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
-        transform-origin: top left;
-        z-index: 1;
-        border: none;
-      }
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), { transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      .embed-wrapper-${item.id} {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .embed-${item.id} {
+        transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
+        transform-origin: top left;
+        z-index: 1;
+        border: none;
+      }
       ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams], exemplary) => {
-                    return (`
-          .embed-wrapper-${item.id} {
-            opacity: ${layoutParams.opacity};
-            transform: rotate(${area.angle}deg);
-            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-          }
-          .embed-${item.id} {
-            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
-            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
-          }
+                    return (`
+          .embed-wrapper-${item.id} {
+            opacity: ${layoutParams.opacity};
+            transform: rotate(${area.angle}deg);
+            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+          }
+          .embed-${item.id} {
+            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
+            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
+          }
         `);
-                })}
+                })}
     ` })] }));
 };
 exports.CodeEmbedItem = CodeEmbedItem;

package/lib/components/items/CompoundItem/CompoundChild.js

@@ -70,32 +70,32 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
             ? { height: `${sizingAxis.y === 'manual'
                     ? (0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, height)
                     : 'unset'}` }
-            : {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({ transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none' }, (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+            : {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({ transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none' }, (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
                     const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     const scaleAnchor = area.scaleAnchor;
-                    return (`
-            .item-${item.id}-inner {
-              width: 100%;
-              height: 100%;
-              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
-              transform: scale(${area.scale});
-            }
-            .item-${item.id} {
-              position: absolute;
-              top: ${(0, getCompoundBondaryStyles_1.getCompoundTop)(compoundSettings, area.top)};
-              left: ${(0, getCompoundBondaryStyles_1.getCompoundLeft)(compoundSettings, area.left)};
-              transition: opacity 0.2s linear 0.1s;
-              display: ${hidden ? 'none' : 'block'};
+                    return (`
+            .item-${item.id}-inner {
+              width: 100%;
+              height: 100%;
+              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale});
+            }
+            .item-${item.id} {
+              position: absolute;
+              top: ${(0, getCompoundBondaryStyles_1.getCompoundTop)(compoundSettings, area.top)};
+              left: ${(0, getCompoundBondaryStyles_1.getCompoundLeft)(compoundSettings, area.left)};
+              transition: opacity 0.2s linear 0.1s;
+              display: ${hidden ? 'none' : 'block'};
               width: ${sizingAxis.x === 'manual'
                         ? `${(0, getCompoundBondaryStyles_1.getCompoundWidth)(compoundSettings, area.width, isRichText)}`
-                        : 'max-content'};
-              height: ${sizingAxis.y === 'manual' ? `${(0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, area.height)}` : 'unset'};
-              transform: ${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)};
-              z-index: ${area.zIndex};
-            }
+                        : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? `${(0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, area.height)}` : 'unset'};
+              transform: ${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)};
+              z-index: ${area.zIndex};
+            }
           `);
-                })}
+                })}
       ` })] })));
 };
 exports.CompoundChild = CompoundChild;

package/lib/components/items/CompoundItem/CompoundItem.js

@@ -32,22 +32,22 @@ const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `compound-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        .compound-${item.id} {
-          overflow: ${item.commonParams.overflow};
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-        }
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `compound-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .compound-${item.id} {
+          overflow: ${item.commonParams.overflow};
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+        }
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                        return (`
-            .compound-${item.id} {
-              opacity: ${layoutParams.opacity};
-              transform: rotate(${area.angle}deg);
-            }
+                        return (`
+            .compound-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+            }
           `);
-                    })}
+                    })}
       ` })] }) }));
 };
 exports.CompoundItem = CompoundItem;

package/lib/components/items/CustomItem/CustomItem.js

@@ -25,15 +25,15 @@ const CustomItem = ({ item, onResize, sectionId, interactionCtrl }) => {
     if (!component)
         return null;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none' }), children: component({}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area]) => {
-                    return (`
-            .custom-component-${item.id} {
-              transform: rotate(${area.angle}deg);
-              height: 100%;
-              width: 100%;
-              position: absolute;
-              left: 0;
-              top: 0;
-            }
+                    return (`
+            .custom-component-${item.id} {
+              transform: rotate(${area.angle}deg);
+              height: 100%;
+              width: 100%;
+              position: absolute;
+              left: 0;
+              top: 0;
+            }
           `);
                 })}` })] }));
 };

package/lib/components/items/EmbedVideoItem/VimeoEmbed.js

@@ -135,31 +135,31 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                             width: '100%',
                             top: '0',
                             left: '0'
-                        } })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embed-video", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-      .embed-video-wrapper-${item.id} {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
-      .embed-video {
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        border: none;
-        overflow: hidden;
-      }
+                        } })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embed-video", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      .embed-video-wrapper-${item.id} {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .embed-video {
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        border: none;
+        overflow: hidden;
+      }
       ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                    return (`
-          .embed-video-wrapper-${item.id} {
-            opacity: ${layoutParams.opacity};
-            transform: rotate(${area.angle}deg);
-            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-          }
-          .embed-video-wrapper-${item.id} .embed-video {
-            border-radius: ${layoutParams.radius * 100}vw;
-          }
+                    return (`
+          .embed-video-wrapper-${item.id} {
+            opacity: ${layoutParams.opacity};
+            transform: rotate(${area.angle}deg);
+            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+          }
+          .embed-video-wrapper-${item.id} .embed-video {
+            border-radius: ${layoutParams.radius * 100}vw;
+          }
         `);
-                })}
+                })}
     ` })] }));
 };
 exports.VimeoEmbedItem = VimeoEmbedItem;