@gxpl/sdk 0.0.7 → 0.0.8

package/lib/sdk-nextjs/components/Section/SectionImage.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SectionImage = ({ media, sectionId }) => {
+    const { url, size, position, offsetX } = media;
+    const isContainHeight = size === 'contain-height';
+    const hasOffsetX = offsetX !== null && size === 'contain';
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: `section-image-wrapper-${sectionId}`, style: {
+                position: position === 'fixed' ? 'sticky' : 'relative',
+                height: position === 'fixed' ? '100vh' : '100%',
+                top: position === 'fixed' ? '100vh' : '0',
+                width: '100%',
+                overflow: 'hidden'
+            }, children: (0, jsx_runtime_1.jsx)("img", { src: url, className: `image-background-${sectionId}`, style: {
+                    objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),
+                    width: isContainHeight || hasOffsetX ? 'auto' : '100%',
+                    transform: isContainHeight ? 'translateX(-50%)' : 'none',
+                    position: 'relative',
+                    left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
+                    height: '100%'
+                } }) }) }));
+};
+exports.SectionImage = SectionImage;

package/lib/sdk-nextjs/components/Section/SectionVideo.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionVideo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SectionVideo = ({ container, sectionId, media }) => {
+    const [video, setVideo] = (0, react_1.useState)(null);
+    const [videoWrapper, setVideoWrapper] = (0, react_1.useState)(null);
+    const [isVideoWidthOverflow, setIsVideoWidthOverflow] = (0, react_1.useState)(false);
+    const { url, size, position, offsetX, coverUrl, play } = media;
+    const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
+    const [userPaused, setUserPaused] = (0, react_1.useState)(false);
+    const [isClickedOnCover, setIsClickedOnCover] = (0, react_1.useState)(false);
+    const handleCoverClick = () => {
+        if (!video || play !== 'on-click')
+            return;
+        setIsClickedOnCover(true);
+        if (isPlaying) {
+            video.pause();
+            setUserPaused(true);
+        }
+        else {
+            video.play();
+            setUserPaused(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (!video || play !== 'on-click')
+            return;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (userPaused || !isClickedOnCover)
+                return;
+            if (entry.isIntersecting) {
+                video.play();
+            }
+            else {
+                video.pause();
+            }
+        });
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [container, play, userPaused, isClickedOnCover]);
+    (0, react_1.useEffect)(() => {
+        if (!video || !videoWrapper)
+            return;
+        video.addEventListener('loadedmetadata', () => {
+            const h = video.videoHeight;
+            const w = video.videoWidth;
+            const width = (videoWrapper.clientHeight / h) * w;
+            if (width > videoWrapper.clientWidth) {
+                setIsVideoWidthOverflow(true);
+            }
+            else {
+                setIsVideoWidthOverflow(false);
+            }
+        });
+    }, [video, videoWrapper]);
+    const isContainHeight = size === 'contain-height';
+    const hasOffsetX = offsetX !== null && size === 'contain';
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { ref: setVideoWrapper, className: `section-video-wrapper-${sectionId}`, style: {
+                position: position === 'fixed' ? 'sticky' : 'relative',
+                height: position === 'fixed' ? '100vh' : '100%',
+                top: position === 'fixed' ? '100vh' : '0',
+                overflow: 'hidden',
+                width: '100%'
+            }, children: [(0, jsx_runtime_1.jsx)("video", { ref: setVideo, autoPlay: play === 'auto', loop: true, style: {
+                        opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : 1,
+                        objectFit: isContainHeight ? 'cover' : (size !== null && size !== void 0 ? size : 'cover'),
+                        width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
+                        transform: isContainHeight ? 'translateX(-50%)' : 'none',
+                        left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
+                        height: '100%',
+                        position: 'relative'
+                    }, controls: play === 'on-click', muted: play === 'auto', playsInline: true, preload: "auto", className: `video-background-${sectionId}`, onPlay: () => setIsPlaying(true), onPause: () => setIsPlaying(false), children: (0, jsx_runtime_1.jsx)("source", { src: `${url}` }) }), play === 'on-click' && !isClickedOnCover && ((0, jsx_runtime_1.jsx)("div", { className: `video-background-${sectionId}-cover-container`, style: {
+                        position: 'absolute',
+                        left: 0,
+                        width: '100%',
+                        height: '100%',
+                        top: 0
+                    }, onClick: handleCoverClick, children: coverUrl && play === 'on-click' && ((0, jsx_runtime_1.jsx)("img", { src: coverUrl, alt: "Video cover", className: `video-background-${sectionId}-cover`, style: {
+                            opacity: isPlaying ? 0 : 1,
+                            left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
+                            width: isContainHeight ? 'auto' : '100%',
+                            objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),
+                            transform: isContainHeight ? 'translateX(-50%)' : 'none',
+                            position: 'relative',
+                            height: '100%',
+                            transition: 'opacity 0.1s ease-in-out'
+                        } })) }))] }) }));
+};
+exports.SectionVideo = SectionVideo;

package/lib/sdk-nextjs/components/Section/useSectionHeightMap.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSectionHeightData = void 0;
+exports.getSectionHeightMap = getSectionHeightMap;
+const react_1 = require("react");
+const CntrlContext_1 = require("../../provider/CntrlContext");
+const Section_1 = require("./Section");
+const useSectionHeightData = (sectionId) => {
+    const sectionHeightContext = (0, react_1.useContext)(CntrlContext_1.CntrlContext);
+    const layouts = sectionHeightContext.layouts;
+    const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
+    return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
+};
+exports.useSectionHeightData = useSectionHeightData;
+function getSectionHeightMap(sectionHeight) {
+    return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, (0, Section_1.getSectionHeight)(heightData)]));
+}
+function getDefaultHeightData(layouts) {
+    return layouts.reduce((acc, layout) => (Object.assign(Object.assign({}, acc), { [layout.id]: '0' })), {});
+}

package/lib/sdk-nextjs/components/items/CodeEmbedItem/CodeEmbedItem.js

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeEmbedItem = void 0;
+exports.decodeBase64 = decodeBase64;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const useItemAngle_1 = require("../useItemAngle");
+const LinkWrapper_1 = require("../LinkWrapper");
+const useCodeEmbedItem_1 = require("./useCodeEmbedItem");
+const ItemArea_1 = require("../../../../sdk/types/article/ItemArea");
+const utils_1 = require("../../../../utils");
+const FontFaceGenerator_1 = require("../../../../sdk/FontFaceGenerator/FontFaceGenerator");
+const stylesMap = {
+    [ItemArea_1.AreaAnchor.TopLeft]: {},
+    [ItemArea_1.AreaAnchor.TopCenter]: { justifyContent: 'center' },
+    [ItemArea_1.AreaAnchor.TopRight]: { justifyContent: 'flex-end' },
+    [ItemArea_1.AreaAnchor.MiddleLeft]: { alignItems: 'center' },
+    [ItemArea_1.AreaAnchor.MiddleCenter]: { justifyContent: 'center', alignItems: 'center' },
+    [ItemArea_1.AreaAnchor.MiddleRight]: { justifyContent: 'flex-end', alignItems: 'center' },
+    [ItemArea_1.AreaAnchor.BottomLeft]: { alignItems: 'flex-end' },
+    [ItemArea_1.AreaAnchor.BottomCenter]: { justifyContent: 'center', alignItems: 'flex-end' },
+    [ItemArea_1.AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
+};
+const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const id = (0, react_1.useId)();
+    const { layouts, fonts } = (0, useCntrlContext_1.useCntrlContext)();
+    const fontGoogleTags = fonts === null || fonts === void 0 ? void 0 : fonts.google;
+    const fontAdobeTags = fonts === null || fonts === void 0 ? void 0 : fonts.adobe;
+    const fontCustomTags = new FontFaceGenerator_1.FontFaceGenerator((_a = fonts === null || fonts === void 0 ? void 0 : fonts.custom) !== null && _a !== void 0 ? _a : []).generate();
+    const { anchor, blur: itemBlur, opacity: itemOpacity } = (0, useCodeEmbedItem_1.useCodeEmbedItem)(item, sectionId);
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const html = decodeBase64(item.commonParams.html);
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const pos = stylesMap[anchor];
+    const layoutValues = [item.area, item.layoutParams];
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
+    const blur = ((_c = (_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.blur) !== null && _c !== void 0 ? _c : itemBlur);
+    const opacity = (_e = (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _d === void 0 ? void 0 : _d.opacity) !== null && _e !== void 0 ? _e : itemOpacity;
+    const angle = (_g = (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _f === void 0 ? void 0 : _f.angle) !== null && _g !== void 0 ? _g : itemAngle;
+    (0, react_1.useEffect)(() => {
+        if (!ref)
+            return;
+        const scripts = ref.querySelectorAll('script');
+        for (const script of scripts) {
+            const newScript = document.createElement('script');
+            for (const attr of script.getAttributeNames()) {
+                newScript.setAttribute(attr, script.getAttribute(attr));
+            }
+            newScript.textContent = script.textContent;
+            script.parentNode.removeChild(script);
+            ref.appendChild(newScript);
+        }
+    }, [html]);
+    (0, react_1.useEffect)(() => {
+        if (!ref)
+            return;
+        const iframe = ref.querySelector(`[data-embed="${item.id}"]`);
+        if (!iframe)
+            return;
+        const htmlWithStyles = `
+      ${fontGoogleTags}
+      ${fontAdobeTags}
+      <style>
+      ${fontCustomTags}
+        html, body {
+          height: 100%;
+          margin: 0 !important;
+          padding: 0 !important;
+        }
+      </style>
+      ${html}
+    `;
+        iframe.srcdoc = htmlWithStyles;
+    }, [html, item.commonParams.iframe, ref]);
+    const isInteractive = opacity !== 0;
+    (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 } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', 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, utils_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'};
+            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+          }
+          .embed-${item.id} {
+            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
+            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
+          }
+        `);
+                })}
+    ` })] }));
+};
+exports.CodeEmbedItem = CodeEmbedItem;
+function decodeBase64(str) {
+    const binary = atob(str);
+    const bytes = Uint8Array.from(binary, char => char.charCodeAt(0));
+    return new TextDecoder().decode(bytes);
+}

package/lib/sdk-nextjs/components/items/CodeEmbedItem/useCodeEmbedItem.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCodeEmbedItem = useCodeEmbedItem;
+const useLayoutContext_1 = require("../../useLayoutContext");
+const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
+const Keyframe_1 = require("../../../../sdk/types/keyframe/Keyframe");
+const ItemArea_1 = require("../../../../sdk/types/article/ItemArea");
+function useCodeEmbedItem(item, sectionId) {
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Blur, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Opacity, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    }, (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
+    const anchor = layoutId && 'areaAnchor' in item.layoutParams[layoutId] ? item.layoutParams[layoutId].areaAnchor : ItemArea_1.AreaAnchor.TopLeft;
+    return { anchor, blur, opacity };
+}

package/lib/sdk-nextjs/components/items/ComponentItem/ComponentItem.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const react_1 = require("react");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useComponentItem_1 = require("./useComponentItem");
+const useItemAngle_1 = require("../useItemAngle");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const utils_1 = require("../../../../utils");
+const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
+    var _a, _b, _c, _d;
+    const sdk = (0, useCntrlContext_1.useCntrlContext)();
+    const { layouts } = sdk;
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const layoutValues = [item.area, item.layoutParams];
+    const component = sdk.getComponent(item.commonParams.componentId);
+    const [ref, setRef] = (0, react_1.useState)(null);
+    const { opacity: itemOpacity, blur: itemBlur } = (0, useComponentItem_1.useComponentItem)(item, sectionId);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle', 'blur']);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.blur, itemBlur);
+    const Element = component ? component.element : undefined;
+    const parameters = layout ? item.layoutParams[layout].parameters : undefined;
+    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(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
+      .custom-component-${item.id} {
+        width: 100%;
+        height: 100%;
+        pointer-events: auto;
+      }
+      ${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                    return (`
+          .custom-component-${item.id} {
+            transform: rotate(${area.angle}deg);
+            opacity: ${layoutParams.opacity};
+            filter: blur(${layoutParams.blur}vw);
+            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+          }
+        `);
+                })}` })] }));
+};
+exports.ComponentItem = ComponentItem;

package/lib/sdk-nextjs/components/items/ComponentItem/useComponentItem.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponentItem = useComponentItem;
+const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const Keyframe_1 = require("../../../../sdk/types/keyframe/Keyframe");
+function useComponentItem(item, sectionId) {
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Opacity, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    }, (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Blur, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
+    return {
+        opacity,
+        blur
+    };
+}

package/lib/sdk-nextjs/components/items/CompoundItem/CompoundChild.js

@@ -0,0 +1,102 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompoundChild = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const useExemplary_1 = require("../../../common/useExemplary");
+const useItemScale_1 = require("../useItemScale");
+const useItemInteractionCtrl_1 = require("../../../interactions/useItemInteractionCtrl");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const ScaleAnchorMap_1 = require("../../../utils/ScaleAnchorMap");
+const isItemType_1 = require("../../../utils/isItemType");
+const RichTextWrapper_1 = require("../RichTextWrapper");
+const itemsMap_1 = require("../itemsMap");
+const getCompoundBoundaryStyles_1 = require("../../../utils/getCompoundBoundaryStyles");
+const useItemTriggers_1 = require("../useItemTriggers");
+const useSizing_1 = require("../useSizing");
+const useItemPointerEvents_1 = require("../useItemPointerEvents");
+const useItemArea_1 = require("../useItemArea");
+const ArticleItemType_1 = require("../../../../sdk/types/article/ArticleItemType");
+const utils_1 = require("../../../../utils");
+const noop = () => null;
+const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const id = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const exemplary = (0, useExemplary_1.useExemplary)();
+    const { handleVisibilityChange, allowPointerEvents } = (0, useItemPointerEvents_1.useItemPointerEvents)((_b = (_a = item.commonParams) === null || _a === void 0 ? void 0 : _a.pointerEvents) !== null && _b !== void 0 ? _b : 'when_visible', isParentVisible);
+    const itemScale = (0, useItemScale_1.useItemScale)(item, sectionId);
+    const interactionCtrl = (0, useItemInteractionCtrl_1.useItemInteractionCtrl)(item.id);
+    const triggers = (0, useItemTriggers_1.useItemTriggers)(interactionCtrl);
+    const wrapperStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left', 'width', 'height']);
+    const innerStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['scale']);
+    const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
+    const { width, height, top, left } = (0, useItemArea_1.useItemArea)(item, sectionId, {
+        top: (_c = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _c === void 0 ? void 0 : _c.top,
+        left: (_d = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _d === void 0 ? void 0 : _d.left,
+        width: (_e = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _e === void 0 ? void 0 : _e.width,
+        height: (_f = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _f === void 0 ? void 0 : _f.height
+    });
+    const isInitialRef = (0, react_1.useRef)(true);
+    const sizingAxis = (0, useSizing_1.useSizing)(item);
+    const ItemComponent = itemsMap_1.itemsMap[item.type] || noop;
+    (0, react_1.useEffect)(() => {
+        isInitialRef.current = false;
+    }, []);
+    const transformOrigin = compoundSettings ? ScaleAnchorMap_1.ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
+    const isRichText = (0, isItemType_1.isItemType)(item, ArticleItemType_1.ArticleItemType.RichText);
+    const scale = (_h = (_g = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
+    const hasClickTriggers = (_j = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _j !== void 0 ? _j : false;
+    if (!item.compoundSettings)
+        return null;
+    const layoutValues = [item.area, item.hidden, item.compoundSettings];
+    if (item.layoutParams) {
+        layoutValues.push(item.layoutParams);
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-${item.id}`, onTransitionEnd: (e) => {
+            var _a;
+            e.stopPropagation();
+            (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
+        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top !== undefined && compoundSettings ? { top: (0, getCompoundBoundaryStyles_1.getCompoundTop)(compoundSettings, top) } : {})), (left !== undefined && compoundSettings ? { left: (0, getCompoundBoundaryStyles_1.getCompoundLeft)(compoundSettings, left) } : {})), (width !== undefined && compoundSettings
+            ? { width: `${sizingAxis.x === 'manual'
+                    ? (0, getCompoundBoundaryStyles_1.getCompoundWidth)(compoundSettings, width, isRichText, exemplary)
+                    : 'max-content'}` }
+            : {})), (height !== undefined && compoundSettings
+            ? { height: `${sizingAxis.y === 'manual'
+                    ? (0, getCompoundBoundaryStyles_1.getCompoundHeight)(compoundSettings, height)
+                    : 'unset'}` }
+            : {})), (compoundSettings ? { transform: `${(0, getCompoundBoundaryStyles_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, utils_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, getCompoundBoundaryStyles_1.getCompoundTop)(compoundSettings, area.top)};
+              left: ${(0, getCompoundBoundaryStyles_1.getCompoundLeft)(compoundSettings, area.left)};
+              transition: opacity 0.2s linear 0.1s;
+              display: ${hidden ? 'none' : 'block'};
+              width: ${sizingAxis.x === 'manual'
+                        ? `${(0, getCompoundBoundaryStyles_1.getCompoundWidth)(compoundSettings, area.width, isRichText)}`
+                        : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? `${(0, getCompoundBoundaryStyles_1.getCompoundHeight)(compoundSettings, area.height)}` : 'unset'};
+              transform: ${(0, getCompoundBoundaryStyles_1.getCompoundTransform)(compoundSettings)};
+              z-index: ${area.zIndex};
+            }
+          `);
+                })}
+      ` })] })));
+};
+exports.CompoundChild = CompoundChild;

package/lib/sdk-nextjs/components/items/CompoundItem/CompoundItem.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompoundItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useItemAngle_1 = require("../useItemAngle");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const LinkWrapper_1 = require("../LinkWrapper");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const CompoundChild_1 = require("./CompoundChild");
+const useCompoundItem_1 = require("./useCompoundItem");
+const utils_1 = require("../../../../utils");
+const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d, _e;
+    const id = (0, react_1.useId)();
+    const { items } = item;
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const { opacity: itemOpacity } = (0, useCompoundItem_1.useCompoundItem)(item, sectionId);
+    const layoutValues = [item.area, item.layoutParams];
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle']);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
+    const isInteractive = opacity !== 0 && opacity !== undefined;
+    (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;
+        }
+        ${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                        return (`
+            .compound-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+            }
+          `);
+                    })}
+      ` })] }) }));
+};
+exports.CompoundItem = CompoundItem;

package/lib/sdk-nextjs/components/items/CompoundItem/useCompoundItem.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCompoundItem = useCompoundItem;
+const useLayoutContext_1 = require("../../useLayoutContext");
+const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
+const Keyframe_1 = require("../../../../sdk/types/keyframe/Keyframe");
+function useCompoundItem(item, sectionId) {
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Opacity, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    }, (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
+    return { opacity };
+}

package/lib/sdk-nextjs/components/items/CustomItem/CustomItem.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const useItemAngle_1 = require("../useItemAngle");
+const utils_1 = require("../../../../utils");
+const CustomItem = ({ item, onResize, sectionId, interactionCtrl }) => {
+    var _a, _b, _c;
+    const sdk = (0, useCntrlContext_1.useCntrlContext)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const component = sdk.customItems.get(item.commonParams.name);
+    const layoutValues = [item.area];
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle']);
+    const angle = (_b = (_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : itemAngle;
+    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, utils_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;
+            }
+          `);
+                })}` })] }));
+};
+exports.CustomItem = CustomItem;

package/{dist → lib}/sdk-nextjs/components/items/EmbedVideoItem/VimeoEmbed.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import { ItemProps } from '../Item';
+import type { FC } from 'react';
+import type { ItemProps } from '../Item';
 import { VimeoEmbedItem as TVimeoEmbedItem } from '../../../../sdk/types/article/Item';
 export declare const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>>;