pds-dev-kit-web-test 0.2.0-beta.0 → 0.2.1

package/dist/src/sub/DynamicLayout/components/Box.js

@@ -0,0 +1,73 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importStar(require("styled-components"));
+function Box(_a) {
+    var _b = _a.direction, direction = _b === void 0 ? 'horizontal' : _b, children = _a.children, relative = _a.relative, justifyContent = _a.justifyContent, alignItems = _a.alignItems, flex = _a.flex, style = _a.style, className = _a.className;
+    if (direction === 'horizontal') {
+        return ((0, jsx_runtime_1.jsx)(Row, __assign({ style: style, relative: relative, justifyContent: justifyContent, alignItems: alignItems, flex: flex, className: className }, { children: children }), void 0));
+    }
+    return ((0, jsx_runtime_1.jsx)(Col, __assign({ style: style, relative: relative, justifyContent: justifyContent, alignItems: alignItems, flex: flex, className: className }, { children: children }), void 0));
+}
+exports.default = Box;
+var Col = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+    var relative = _a.relative;
+    return relative && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n    "], ["\n      position: relative;\n    "])));
+}, function (_a) {
+    var justifyContent = _a.justifyContent;
+    return justifyContent && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      justify-content: center;\n    "], ["\n      justify-content: center;\n    "])));
+}, function (_a) {
+    var alignItems = _a.alignItems;
+    return alignItems && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      align-items: center;\n    "], ["\n      align-items: center;\n    "])));
+}, function (_a) {
+    var flex = _a.flex;
+    return flex && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      flex: 1;\n    "], ["\n      flex: 1;\n    "])));
+});
+var Row = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+    var relative = _a.relative;
+    return relative && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      position: relative;\n    "], ["\n      position: relative;\n    "])));
+}, function (_a) {
+    var justifyContent = _a.justifyContent;
+    return justifyContent && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      justify-content: center;\n    "], ["\n      justify-content: center;\n    "])));
+}, function (_a) {
+    var alignItems = _a.alignItems;
+    return alignItems && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      align-items: center;\n    "], ["\n      align-items: center;\n    "])));
+}, function (_a) {
+    var flex = _a.flex;
+    return flex && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      flex: 1;\n    "], ["\n      flex: 1;\n    "])));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/RichText/RichText.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type RichTextPropTypes = {
+    text: string;
+    style: React.CSSProperties;
+};
+declare function RichText({ text, style }: RichTextPropTypes): JSX.Element;
+export default RichText;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/RichText/RichText.js

@@ -0,0 +1,24 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+function RichText(_a) {
+    var text = _a.text, style = _a.style;
+    return (0, jsx_runtime_1.jsx)(S_RichText, { style: style, dangerouslySetInnerHTML: { __html: text } }, void 0);
+}
+var S_RichText = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n  height: 100%;\n  line-height: 1.5;\n  /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n  overflow: hidden;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n    /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n    width: 100%;\n  }\n"], ["\n  /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n  height: 100%;\n  line-height: 1.5;\n  /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n  overflow: hidden;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n    /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n    width: 100%;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_papp_post_notice_link;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_98;
+});
+exports.default = RichText;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/RichText/index.d.ts

@@ -0,0 +1,2 @@
+import RichText from './RichText';
+export { RichText };

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/RichText/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichText = void 0;
+var RichText_1 = __importDefault(require("./RichText"));
+exports.RichText = RichText_1.default;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/TwitterTimeline/TwitterTimeline.d.ts

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+declare const customChrome: {
+    readonly noheader: "noheader";
+    readonly nofooter: "nofooter";
+    readonly noborders: "noborders";
+    readonly noscrollbar: "noscrollbar";
+    readonly transparent: "transparent";
+};
+declare type TwitterTimelinePropTypes = {
+    /**
+     * 임베드할 트위터 유저의 id 값 입니다.
+     */
+    userId: string;
+    /**
+     * 임베드시 보여줄 트윗의 개수입니다. 최소 1에서 20까지 설정할 수 있습니다.
+     */
+    tweetLimit?: number;
+    /**
+     * 다른 트윗 또는 계정에 대한 답글 트윗 표시 여부를 결정합니다.
+     */
+    showReplies?: boolean;
+    /**
+     * 임베드할 트위터 타임라인의 컬러 theme 입니다.
+     */
+    theme?: 'dark' | 'light';
+    /**
+     * 렌더링된 위젯에 지정된 아리아 예의 동작을 적용합니다. 새 트윗이 타임라인 상단에 추가되어 화면 리더에 영향을 줄 수 있습니다.
+     *
+     * @types polite: 변경 사항이 있지만 사용자의 작업을 방해하지 않는다는 의미입니다. 즉, 변경 사항이 있을 때 스크린 리더는 사용자 작업을 중단하지 않고 알립니다.
+     *
+     * @types assertive: 변경 사항이 즉시 사용자에게 알려져야 함을 의미합니다. 이 속성 값은 사용자 작업을 방해할 수 있으므로 신중하게 사용해야 합니다.
+     *
+     * @types rude: 변경 사항이 사용자의 작업을 방해하거나 중단할 수 있음을 나타냅니다. 이 값은 더욱 강력한 우선순위를 가지며, 사용자의 작업을 더 강제로 중단시킬 수 있습니다.
+     */
+    ariaPolite?: 'polite' | 'assertive' | 'rude';
+    /**
+     * 타임라인과 사이트의 임베드된 페이지를 맞춤 추천 및 맞춤 광고 등의 목적으로 사용할지 여부를 결정합니다.
+     */
+    dnt?: boolean;
+    /**
+     * 임베드할 트위터 타임라인 위젯의 디자인 요소 표시를 결정합니다.
+     *
+     * @types noheader: 위젯의 헤더를 숨깁니다.
+     *
+     * @types nofooter: 위젯의 푸터를 숨깁니다.
+     *
+     * @types noborders: 위젯 영역을 둘러싼 테두리와 트윗을 구분하는 테두리를 포함하여 위젯 내의 모든 테두리를 제거합니다.
+     *
+     * @types noscrollbar: 기본 타임라인 스크롤바(표시된 경우)를 자르고 숨깁니다. 표준 사용자 인터페이스 구성 요소를 숨기면 웹사이트의 접근성에 영향을 줄 수 있다는 점을 고려하세요.
+     *
+     * @types transparent: 위젯의 배경색을 제거합니다.
+     */
+    customChrome?: (keyof typeof customChrome)[];
+    /**
+     * 임베드할 트위터 타임라인 위젯의 너비를 결정합니다. 최소 너비 180픽셀, 최대 너비 520픽셀로 상위 요소의 너비에 맞게 자동으로 조정됩니다.
+     */
+    width?: number;
+    /**
+     * 임베드할 트위터 타임라인 위젯의 높이를 결정합니다.
+     */
+    height?: number;
+    /**
+     * 트위터 스크립트가 로드 되기 전 혹은 로드 실패시 보여지는 컴포넌트입니다.
+     * a 태그 내부에 들어가기 때문에 로딩과는 다른 용도로 사용됩니다.
+     */
+    fallback?: React.ReactNode;
+};
+/**
+ * 트위터의 Profile Timeline 임베드 컴포넌트입니다.
+ *
+ * Profile Timeline 가이드: https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/profile-timeline
+ *
+ * Parameter Reference: https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/parameter-reference
+ *
+ * 트위터 표시 요구 약관: https://developer.twitter.com/en/developer-terms/display-requirements
+ */
+declare function TwitterTimeline({ userId, tweetLimit, showReplies, theme, ariaPolite, dnt, customChrome, width, height, fallback }: TwitterTimelinePropTypes): JSX.Element;
+export default TwitterTimeline;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/TwitterTimeline/TwitterTimeline.js

@@ -0,0 +1,52 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var customChrome = {
+    noheader: 'noheader',
+    nofooter: 'nofooter',
+    noborders: 'noborders',
+    noscrollbar: 'noscrollbar',
+    transparent: 'transparent'
+};
+/**
+ * 트위터의 Profile Timeline 임베드 컴포넌트입니다.
+ *
+ * Profile Timeline 가이드: https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/profile-timeline
+ *
+ * Parameter Reference: https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/parameter-reference
+ *
+ * 트위터 표시 요구 약관: https://developer.twitter.com/en/developer-terms/display-requirements
+ */
+function TwitterTimeline(_a) {
+    var userId = _a.userId, _b = _a.tweetLimit, tweetLimit = _b === void 0 ? 5 : _b, _c = _a.showReplies, showReplies = _c === void 0 ? false : _c, _d = _a.theme, theme = _d === void 0 ? 'light' : _d, _e = _a.ariaPolite, ariaPolite = _e === void 0 ? 'polite' : _e, _f = _a.dnt, dnt = _f === void 0 ? true : _f, _g = _a.customChrome, customChrome = _g === void 0 ? [] : _g, width = _a.width, _h = _a.height, height = _h === void 0 ? 600 : _h, fallback = _a.fallback;
+    var TWITTER_EMBED_TIMELINE_SCRIPT_ID = 'twitter-timeline';
+    var TWITTER_EMBED_TIMELINE_SCRIPT_SRC = 'https://platform.twitter.com/widgets.js';
+    /**
+      @when : 컴포넌트 렌더시
+      @expected : 트위터 임베드 스크립트가 없다면 스크립트 주소와 아이디를 설정해줍니다.
+      @clear : -
+     */
+    (0, react_1.useEffect)(function () {
+        var hasScript = document.getElementById(TWITTER_EMBED_TIMELINE_SCRIPT_ID);
+        if (!hasScript) {
+            var script = document.createElement('script');
+            script.src = TWITTER_EMBED_TIMELINE_SCRIPT_SRC;
+            script.id = TWITTER_EMBED_TIMELINE_SCRIPT_ID;
+            document.body.append(script);
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("section", __assign({ className: "twitter-embed-container" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "twitter-embed" }, { children: (0, jsx_runtime_1.jsx)("a", __assign({ className: "twitter-timeline", "data-tweet-limit": tweetLimit, "data-show-replies": showReplies, "data-aria-polite": ariaPolite, "data-dnt": dnt, "data-theme": theme, "data-chrome": customChrome.join(' '), "data-width": width, "data-height": height, href: "https://twitter.com/" + userId }, { children: fallback }), void 0) }), void 0) }), void 0));
+}
+exports.default = TwitterTimeline;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/TwitterTimeline/index.d.ts

@@ -0,0 +1,2 @@
+import TwitterTimeline from './TwitterTimeline';
+export { TwitterTimeline };

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/TwitterTimeline/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TwitterTimeline = void 0;
+var TwitterTimeline_1 = __importDefault(require("./TwitterTimeline"));
+exports.TwitterTimeline = TwitterTimeline_1.default;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/index.d.ts

@@ -0,0 +1,3 @@
+import { RichText } from './RichText';
+import { TwitterTimeline } from './TwitterTimeline';
+export { RichText, TwitterTimeline };

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TwitterTimeline = exports.RichText = void 0;
+var RichText_1 = require("./RichText");
+Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichText_1.RichText; } });
+var TwitterTimeline_1 = require("./TwitterTimeline");
+Object.defineProperty(exports, "TwitterTimeline", { enumerable: true, get: function () { return TwitterTimeline_1.TwitterTimeline; } });

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ISection } from '../../types';
+export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, onClickEditSection }: {
+    filteredSortedSection: ISection[];
+    scrollDownTargetSectionId?: number;
+    editingSectionId?: number;
+    onClickEditSection: (section: ISection) => void;
+}): JSX.Element;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.js

@@ -0,0 +1,61 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var sections_1 = require("../../../DynamicLayout/sections");
+var CustomSection_1 = require("../../../DynamicLayout/sections/CustomSection");
+var SectionBox_1 = __importDefault(require("./SectionBox"));
+function EditModeSectionMatcher(_a) {
+    var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, onClickEditSection = _a.onClickEditSection;
+    var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iframeSection ? ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isIframeSection: true, isEditing: editingSectionId === iframeSection.id, scrollIntoThisSection: iframeSection.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(iframeSection); } }, { children: (0, jsx_runtime_1.jsx)(Matcher, __assign({}, iframeSection), void 0) }), iframeSection.id)) : (filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: (0, jsx_runtime_1.jsx)(Matcher, __assign({}, section), void 0) }), section.id)); })) }, void 0));
+}
+exports.default = EditModeSectionMatcher;
+function Matcher(_a) {
+    var props = __rest(_a, []);
+    var schema = props.manifest.schema;
+    switch (schema) {
+        case 'BASE_INTRO':
+            return (0, jsx_runtime_1.jsx)(sections_1.IntroSection, __assign({}, props), void 0);
+        case 'BASE_CONTENTS':
+            return (0, jsx_runtime_1.jsx)(sections_1.ContentsSection, __assign({}, props), void 0);
+        case 'BASE_CONTENTS_CAROUSEL':
+            return (0, jsx_runtime_1.jsx)(sections_1.ContentsCarouselSection, __assign({}, props), void 0);
+        case 'BASE_FOOTER':
+            return (0, jsx_runtime_1.jsx)(sections_1.FooterSection, __assign({}, props), void 0);
+        case 'BASE_INFO_BOX':
+            return (0, jsx_runtime_1.jsx)(sections_1.InfoBoxSection, __assign({}, props), void 0);
+        case 'EXP_IFRAME':
+            return (0, jsx_runtime_1.jsx)(sections_1.FullscreenIframeSection, __assign({}, props), void 0);
+        case 'PRG_MEMBERSHIP_DISPLAY':
+            return (0, jsx_runtime_1.jsx)(sections_1.EditTypeMembershipSection, __assign({}, props), void 0);
+        case 'CUSTOM_SECTION':
+            return (0, jsx_runtime_1.jsx)(CustomSection_1.CustomSection, __assign({}, props), void 0);
+        default:
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+}

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/OverlayBorders.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type Props = {
+    zIndex: number;
+};
+declare function OverlayBorders({ zIndex }: Props): JSX.Element;
+export default OverlayBorders;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/OverlayBorders.js

@@ -0,0 +1,45 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+function OverlayBorders(_a) {
+    var zIndex = _a.zIndex;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Absolute_Border_Top, { zIndex: zIndex }, void 0), (0, jsx_runtime_1.jsx)(Absolute_Border_Left, { zIndex: zIndex }, void 0), (0, jsx_runtime_1.jsx)(Absolute_Border_Right, { zIndex: zIndex }, void 0), (0, jsx_runtime_1.jsx)(Absolute_Border_Bottom, { zIndex: zIndex }, void 0)] }, void 0));
+}
+exports.default = OverlayBorders;
+var Absolute_Border_Top = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 4px;\n  position: absolute;\n  top: 0;\n  transition: background-color 0.2s ease-out;\n  width: 100%;\n  z-index: ", ";\n"], ["\n  background-color: ", ";\n  height: 4px;\n  position: absolute;\n  top: 0;\n  transition: background-color 0.2s ease-out;\n  width: 100%;\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_preview_editing;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var Absolute_Border_Left = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  left: 0;\n  position: absolute;\n  transition: background-color 0.2s ease-out;\n  width: 4px;\n  z-index: ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  left: 0;\n  position: absolute;\n  transition: background-color 0.2s ease-out;\n  width: 4px;\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_preview_editing;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var Absolute_Border_Right = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  position: absolute;\n  right: 0;\n  transition: background-color 0.2s ease-out;\n  width: 4px;\n  z-index: ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  position: absolute;\n  right: 0;\n  transition: background-color 0.2s ease-out;\n  width: 4px;\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_preview_editing;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var Absolute_Border_Bottom = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  height: 4px;\n  position: absolute;\n  transition: background-color 0.2s ease-out;\n  width: 100%;\n  z-index: ", ";\n"], ["\n  background-color: ", ";\n  bottom: 0;\n  height: 4px;\n  position: absolute;\n  transition: background-color 0.2s ease-out;\n  width: 100%;\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_preview_editing;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export default function SectionBox({ scrollIntoThisSection, isIframeSection, isEditing, children, onClick }: {
+    scrollIntoThisSection: boolean;
+    isIframeSection?: boolean;
+    isEditing: boolean;
+    children: React.ReactNode;
+    onClick: () => void;
+}): JSX.Element;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.js

@@ -0,0 +1,116 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var styled_components_1 = __importDefault(require("styled-components"));
+var desktop_1 = require("../../../../desktop");
+var useLazyUnmount_1 = require("../../hooks/useLazyUnmount");
+var OverlayBorders_1 = __importDefault(require("./OverlayBorders"));
+function SectionBox(_a) {
+    var scrollIntoThisSection = _a.scrollIntoThisSection, isIframeSection = _a.isIframeSection, isEditing = _a.isEditing, children = _a.children, onClick = _a.onClick;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var sectionRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(false), isHover = _b[0], setIsHover = _b[1];
+    var _c = (0, react_1.useState)(false), fadeOut = _c[0], setFadeout = _c[1];
+    var _d = (0, react_1.useState)(false), hasNoChild = _d[0], setHasNoChild = _d[1];
+    var onMouseLeaveAsync = (0, useLazyUnmount_1.useLazyUnmount)({ doUnmount: function () { return setIsHover(false); } }, 150);
+    var onClickDelayedAsync = (0, useLazyUnmount_1.useLazyUnmount)({
+        doUnmount: function () {
+            onClick();
+            setFadeout(false);
+        }
+    }, 150);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (!sectionRef) {
+            return;
+        }
+        if (scrollIntoThisSection) {
+            (_a = sectionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [scrollIntoThisSection]);
+    (0, react_1.useEffect)(function () {
+        if (!sectionRef.current) {
+            return;
+        }
+        if (sectionRef.current.getBoundingClientRect().height === 0) {
+            setHasNoChild(true);
+            return;
+        }
+        setHasNoChild(false);
+    }, [isEditing, children]);
+    var onMouseEnter = function () {
+        if (hasNoChild) {
+            return;
+        }
+        setIsHover(true);
+    };
+    var onClickSectionBox = function () {
+        if (hasNoChild) {
+            return;
+        }
+        setFadeout(true);
+        setIsHover(false);
+        onClickDelayedAsync();
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_SectionBox, __assign({ ref: sectionRef, onClick: onClickSectionBox, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeaveAsync, isEditing: isEditing, isIframeSection: isIframeSection }, { children: [isEditing && !hasNoChild && ((0, jsx_runtime_1.jsxs)(S_Editing, { children: [(0, jsx_runtime_1.jsx)(OverlayBorders_1.default, { zIndex: 1 }, void 0), (0, jsx_runtime_1.jsx)(TopRightAbsoluteBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.D_TextLabel, { text: t('str_4657'), styleTheme: "caption1Bold", colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" }, void 0) }, void 0)] }, void 0)), !isEditing && ((0, jsx_runtime_1.jsx)(DimmedEditOverlay, __assign({ isHover: isHover, fadeOut: fadeOut }, { children: (0, jsx_runtime_1.jsx)(S_EditButton, { children: (0, jsx_runtime_1.jsx)(desktop_1.D_TextLabel, { text: t('str_4653'), colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" }, void 0) }, void 0) }), void 0)), children] }), void 0) }, void 0));
+}
+exports.default = SectionBox;
+var TopRightAbsoluteBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: 8px 10px;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 0.2s ease-out;\n  z-index: 4;\n"], ["\n  background-color: ", ";\n  padding: 8px 10px;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 0.2s ease-out;\n  z-index: 4;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_preview_editing;
+});
+var S_SectionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", ";\n  position: relative;\n"], ["\n  height: ", ";\n  position: relative;\n"])), function (_a) {
+    var isIframeSection = _a.isIframeSection;
+    return (isIframeSection ? '100%' : 'auto');
+});
+var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  animation: ", ";\n  background-color: ", ";\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  left: 0;\n\n  opacity: ", ";\n\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: opacity 0.2s ease-out;\n  z-index: 10;\n\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n"], ["\n  align-items: center;\n  animation: ", ";\n  background-color: ", ";\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  left: 0;\n\n  opacity: ", ";\n\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: opacity 0.2s ease-out;\n  z-index: 10;\n\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n"])), function (_a) {
+    var fadeOut = _a.fadeOut;
+    return fadeOut && 'fadeOut 0.2s ease-out';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_pages_section_dimmed;
+}, function (_a) {
+    var isHover = _a.isHover, fadeOut = _a.fadeOut;
+    if (fadeOut) {
+        return 0;
+    }
+    if (isHover) {
+        return 1;
+    }
+    return 0;
+});
+var S_EditButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 14px;\n  display: flex;\n  font-weight: bold;\n  height: 56px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 14px;\n  display: flex;\n  font-weight: bold;\n  height: 56px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_71;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_72;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_73;
+});
+var S_Editing = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  & > div {\n    animation: fadeIn 0.2s ease-out;\n  }\n\n  @keyframes fadeIn {\n    0% {\n      opacity: 0.2;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n"], ["\n  & > div {\n    animation: fadeIn 0.2s ease-out;\n  }\n\n  @keyframes fadeIn {\n    0% {\n      opacity: 0.2;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/index.d.ts

@@ -0,0 +1 @@
+export { default as EditModeSectionMatcher } from './EditModeSectionMatcher';

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditModeSectionMatcher = void 0;
+var EditModeSectionMatcher_1 = require("./EditModeSectionMatcher");
+Object.defineProperty(exports, "EditModeSectionMatcher", { enumerable: true, get: function () { return __importDefault(EditModeSectionMatcher_1).default; } });

package/dist/src/sub/DynamicLayout/components/Section/Section.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ISection } from '../../types';
+/// <reference types="react" />
+import type { ISection } from '../../types';
 declare function Section({ children, ...props }: ISection & {
     children?: React.ReactNode;
 }): JSX.Element;