pds-dev-kit-web 2.0.4 → 2.0.6

package/dist/index.d.ts

@@ -25,6 +25,6 @@ export { M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_
 export { M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet };
 import { DynamicLayout } from './src/sub';
 export { DynamicLayout };
-import type { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, ISection, ISectionProperties, ISectionStyles, IItem } from './src/sub/DynamicLayout/types';
-export { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, ISection, ISectionProperties, ISectionStyles, IItem };
+import type { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, ISection, ISectionProperties, ISectionStyles, IItem, TypeOfSectionAction } from './src/sub/DynamicLayout/types';
+export { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, TypeOfSectionAction, ISection, ISectionProperties, ISectionStyles, IItem };
 export { AdminList, AdminListHeader, AdminListItem, BulkActionBar, ToolBar } from './src/sub';

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, onClickEditSection }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

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

@@ -25,10 +25,11 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, onClickEditSection = _a.onClickEditSection;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
-    return ((0, jsx_runtime_1.jsxs)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection }, void 0)), mode !== 'EDIT' &&
-                filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })] }), void 0));
+    var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
+    return ((0, jsx_runtime_1.jsxs)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler, sectionActionHandler: sectionActionHandler } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection }, void 0)), mode !== 'EDIT' &&
+                (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] }), void 0));
 }
 exports.default = DynamicLayout;

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

@@ -19,6 +19,7 @@ var SectionMatcher_1 = require("../SectionMatcher");
 var SectionBox_1 = __importDefault(require("./SectionBox"));
 function EditModeSectionMatcher(_a) {
     var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, onClickEditSection = _a.onClickEditSection;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: 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)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id) }), section.id)); }) }, void 0));
+    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)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id) }), 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)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id) }), section.id)); })) }, void 0));
 }
 exports.default = EditModeSectionMatcher;

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

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

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

@@ -26,7 +26,7 @@ var desktop_1 = require("../../../../desktop");
 var useLazyUnmount_1 = require("../../hooks/useLazyUnmount");
 var OverlayBorders_1 = __importDefault(require("./OverlayBorders"));
 function SectionBox(_a) {
-    var scrollIntoThisSection = _a.scrollIntoThisSection, isEditing = _a.isEditing, children = _a.children, onClick = _a.onClick;
+    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];
@@ -72,14 +72,17 @@ function SectionBox(_a) {
         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 }, { 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));
+    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  position: relative;\n"], ["\n  position: relative;\n"])));
+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';

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

@@ -37,9 +37,12 @@ var YouTubeIframe_1 = require("../YouTubeIframe");
 var sectionContext_1 = require("./sectionContext");
 function Section(_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(sectionContext_1.sectionContext.Provider, __assign({ value: props }, { children: (0, jsx_runtime_1.jsxs)(S_Section, { children: [(0, jsx_runtime_1.jsx)(Background, {}, void 0), children] }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(sectionContext_1.sectionContext.Provider, __assign({ value: props }, { children: (0, jsx_runtime_1.jsxs)(S_Section, __assign({ isIframeSection: props.manifest.schema === 'EXP_IFRAME' }, { children: [(0, jsx_runtime_1.jsx)(Background, {}, void 0), children] }), void 0) }), void 0));
 }
-var S_Section = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"])));
+var S_Section = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: ", ";\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"], ["\n  box-sizing: border-box;\n  height: ", ";\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"])), function (_a) {
+    var isIframeSection = _a.isIframeSection;
+    return (isIframeSection ? '100%' : 'auto');
+});
 function Background() {
     var context = (0, react_1.useContext)(sectionContext_1.sectionContext);
     var id = context.id;

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

@@ -38,6 +38,8 @@ function SectionMatcher(_a) {
             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);
         default:
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }

package/dist/src/sub/DynamicLayout/mock_samplePage.d.ts

@@ -6,4 +6,5 @@ export declare const samplePageContentsSection: ISection;
 export declare const samplePageInfoBoxSection: ISection;
 export declare const samplePageIntroSection3: ISection;
 export declare const samplePageFooterSection: ISection;
+export declare const samplePageFullscreenIframeSection: ISection;
 export declare const samplePage: ISection[];

package/dist/src/sub/DynamicLayout/mock_samplePage.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.samplePage = exports.samplePageFooterSection = exports.samplePageIntroSection3 = exports.samplePageInfoBoxSection = exports.samplePageContentsSection = exports.samplePageIntroSection2 = exports.samplePageContentsCarouselSection = exports.samplePageIntroSection = void 0;
+exports.samplePage = exports.samplePageFullscreenIframeSection = exports.samplePageFooterSection = exports.samplePageIntroSection3 = exports.samplePageInfoBoxSection = exports.samplePageContentsSection = exports.samplePageIntroSection2 = exports.samplePageContentsCarouselSection = exports.samplePageIntroSection = void 0;
 exports.samplePageIntroSection = {
     display: true,
     dynamicLayoutSectionItems: [],
@@ -64,7 +64,8 @@ exports.samplePageIntroSection = {
         itemLinkMethod: 'CLICK_BUTTON_IN_ITEM',
         sectionContentMediaSrc: '',
         sectionContentMediaType: 'IMAGE',
-        title: 'Entertainment Business Sample'
+        title: 'Entertainment Business Sample',
+        multiPurposeUrl: ''
     },
     styles: {
         backgroundColorInHex: '#EFF0F3FF',
@@ -332,7 +333,8 @@ exports.samplePageContentsCarouselSection = {
         itemLinkMethod: 'CLICK_BUTTON_IN_ITEM',
         sectionContentMediaSrc: '',
         sectionContentMediaType: 'IMAGE',
-        title: 'Music Festival'
+        title: 'Music Festival',
+        multiPurposeUrl: ''
     },
     styles: {
         backgroundColorInHex: '#FFFFFFFF',
@@ -428,7 +430,8 @@ exports.samplePageIntroSection2 = {
         itemLinkMethod: 'CLICK_BUTTON_IN_ITEM',
         sectionContentMediaSrc: '',
         sectionContentMediaType: 'IMAGE',
-        title: 'Sample'
+        title: 'Sample',
+        multiPurposeUrl: ''
     },
     styles: {
         backgroundColorInHex: '#EFF0F3FF',
@@ -514,7 +517,8 @@ exports.samplePageContentsSection = {
         itemLinkMethod: 'CLICK_BUTTON_IN_ITEM',
         sectionContentMediaSrc: 'https://publ-upload-dev.s3.ap-northeast-2.amazonaws.com/be9aaa5a-ec5c-4727-b374-d7027b18f7ee.jpg',
         sectionContentMediaType: 'IMAGE',
-        title: 'Sample'
+        title: 'Sample',
+        multiPurposeUrl: ''
     },
     styles: {
         backgroundColorInHex: '#EFF0F3FF',
@@ -689,7 +693,8 @@ exports.samplePageInfoBoxSection = {
         itemLinkMethod: 'CLICK_ITEM',
         sectionContentMediaSrc: '',
         sectionContentMediaType: 'IMAGE',
-        title: 'Sample'
+        title: 'Sample',
+        multiPurposeUrl: ''
     },
     styles: {
         backgroundColorInHex: '#EFF0F3FF',
@@ -785,7 +790,8 @@ exports.samplePageIntroSection3 = {
         itemLinkMethod: 'CLICK_BUTTON_IN_ITEM',
         sectionContentMediaSrc: '',
         sectionContentMediaType: 'IMAGE',
-        title: 'Contact Us'
+        title: 'Contact Us',
+        multiPurposeUrl: ''
     },
     styles: {
         backgroundColorInHex: '#EFF0F3FF',
@@ -884,7 +890,8 @@ exports.samplePageFooterSection = {
         itemLinkMethod: 'CLICK_BUTTON_IN_ITEM',
         sectionContentMediaSrc: '',
         sectionContentMediaType: 'IMAGE',
-        title: ''
+        title: '',
+        multiPurposeUrl: ''
     },
     styles: {
         backgroundColorInHex: '#0F0F10FF',
@@ -917,6 +924,75 @@ exports.samplePageFooterSection = {
     template: 'BASE_FOOTER_B',
     updatedAt: '2023-01-06T09:05:45'
 };
+exports.samplePageFullscreenIframeSection = {
+    display: false,
+    dynamicLayoutSectionItems: null,
+    id: 999,
+    insertedAt: '2023-01-06T09:05:45',
+    manifest: {
+        availableProperties: ['multi_purpose_url'],
+        availableStyles: [],
+        availableTemplates: ['EXP_IFRAME_A'],
+        schema: 'EXP_IFRAME'
+    },
+    order: 7,
+    properties: {
+        buttonAlphaLabel: '',
+        buttonAlphaLinkSrc: '',
+        buttonAlphaLinkType: 'WEB_LINK',
+        buttonBravoLabel: '',
+        buttonBravoLinkSrc: '',
+        buttonBravoLinkType: 'WEB_LINK',
+        buttonCharlieLabel: '',
+        buttonCharlieLinkSrc: '',
+        buttonCharlieLinkType: 'WEB_LINK',
+        buttonDeltaLabel: '',
+        buttonDeltaLinkSrc: '',
+        buttonDeltaLinkType: 'WEB_LINK',
+        buttonEchoLabel: '',
+        buttonEchoLinkSrc: '',
+        buttonEchoLinkType: 'WEB_LINK',
+        carouselAutoplayMode: 'MANUAL',
+        carouselAutoplayTime: 3,
+        carouselInfiniteLoopMode: 'NO_USE',
+        description: '',
+        itemLinkMethod: 'CLICK_BUTTON_IN_ITEM',
+        sectionContentMediaSrc: '',
+        sectionContentMediaType: 'IMAGE',
+        title: '',
+        multiPurposeUrl: 'https://app.publr.co/'
+    },
+    styles: {
+        backgroundColorInHex: '#0F0F10FF',
+        backgroundMediaSrc: '',
+        backgroundMediaType: 'IMAGE',
+        backgroundOverlayColorInHex: '#00000000',
+        buttonAlphaBackgroundColorInHex: '#455EEFFF',
+        buttonAlphaDesignType: 'A',
+        buttonAlphaLabelColorInHex: '#FFFFFFFF',
+        buttonBravoBackgroundColorInHex: '#455EEFFF',
+        buttonBravoDesignType: 'A',
+        buttonBravoLabelColorInHex: '#FFFFFFFF',
+        buttonCharlieBackgroundColorInHex: '#455EEFFF',
+        buttonCharlieDesignType: 'A',
+        buttonCharlieLabelColorInHex: '#FFFFFFFF',
+        buttonDeltaBackgroundColorInHex: '#455EEFFF',
+        buttonDeltaDesignType: 'A',
+        buttonDeltaLabelColorInHex: '#FFFFFFFF',
+        buttonEchoBackgroundColorInHex: '#455EEFFF',
+        buttonEchoDesignType: 'A',
+        buttonEchoLabelColorInHex: '#FFFFFFFF',
+        descriptionColorInHex: '#68686BFF',
+        itemButtonBackgroundColorInHex: '#455EEFFF',
+        itemButtonDesignType: 'A',
+        itemButtonLabelColorInHex: '#FFFFFFFF',
+        itemDescriptionColorInHex: '#676970FF',
+        itemTitleColorInHex: '#1E1E20FF',
+        titleColorInHex: '#1E1E20FF'
+    },
+    template: 'EXP_IFRAME_A',
+    updatedAt: '2023-01-06T09:05:45'
+};
 exports.samplePage = [
     exports.samplePageIntroSection,
     exports.samplePageContentsCarouselSection,

package/dist/src/sub/DynamicLayout/sectionActionTypes.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare type TypeOfSectionAction = ActionMap<ActionHandlerPayload>[keyof ActionMap<ActionHandlerPayload>];
+declare type ActionHandlerPayload = {
+    LOAD_IFRAME_SECTION: {
+        event: React.SyntheticEvent<HTMLIFrameElement, Event>;
+        multiPurposeUrl: string;
+    };
+};
+declare type ActionMap<M extends {
+    [index: string]: any;
+}> = {
+    [Key in keyof M]: M[Key] extends undefined ? {
+        type: Key;
+    } : {
+        type: Key;
+        payload: M[Key];
+    };
+};
+export {};

package/dist/src/sub/DynamicLayout/sectionActionTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/FullscreenIframeSection.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ISection } from '../../types';
+declare function FullscreenIframeSection({ ...props }: ISection): JSX.Element;
+export default FullscreenIframeSection;

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/FullscreenIframeSection.js

@@ -0,0 +1,51 @@
+"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 __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 styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../components");
+var templates_1 = require("./templates");
+function FullscreenIframeSection(_a) {
+    var props = __rest(_a, []);
+    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "FullscreenIframe" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMather, { styleTemplate: props.template }, void 0) }), void 0) }), void 0));
+}
+var S_SectionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
+function TemplateMather(_a) {
+    var styleTemplate = _a.styleTemplate;
+    switch (styleTemplate) {
+        case 'EXP_IFRAME_A':
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, {}, void 0);
+        default:
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+}
+exports.default = FullscreenIframeSection;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/index.d.ts

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

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/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.FullscreenIframeSection = void 0;
+var FullscreenIframeSection_1 = require("./FullscreenIframeSection");
+Object.defineProperty(exports, "FullscreenIframeSection", { enumerable: true, get: function () { return __importDefault(FullscreenIframeSection_1).default; } });

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/TemplateA/TemplateA.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function TemplateA(): JSX.Element;
+export default TemplateA;

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/TemplateA/TemplateA.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var dynamicLayoutContext_1 = require("../../../../dynamicLayoutContext");
+var desktop_1 = require("./desktop");
+var mobile_1 = require("./mobile");
+function TemplateA() {
+    var device = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).device;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
+            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateA, {}, void 0),
+            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateA, {}, void 0)
+        }[device] }, void 0));
+}
+exports.default = TemplateA;

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/TemplateA/desktop/D_TemplateA.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function TemplateA(): JSX.Element;
+export default TemplateA;

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/TemplateA/desktop/D_TemplateA.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var DynamicLayout_1 = require("../../../../../../DynamicLayout");
+var Section_1 = require("../../../../../components/Section");
+function TemplateA() {
+    var sectionActionHandler = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext).sectionActionHandler;
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    var onIframeLoad = function (event) {
+        if (sectionActionHandler) {
+            sectionActionHandler({
+                type: 'LOAD_IFRAME_SECTION',
+                payload: { event: event, multiPurposeUrl: section.properties.multiPurposeUrl }
+            });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("iframe", { "x-dlayout-section-element-name": "Iframe", id: String(section.id), title: section.manifest.schema, src: section.properties.multiPurposeUrl, style: { border: 'none', width: '100%', height: '100%', display: 'block' }, referrerPolicy: "strict-origin", sandbox: "allow-forms allow-same-origin allow-scripts allow-popups", onLoad: onIframeLoad }, void 0));
+}
+exports.default = TemplateA;

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/TemplateA/desktop/index.d.ts

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

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/TemplateA/desktop/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.D_TemplateA = void 0;
+var D_TemplateA_1 = require("./D_TemplateA");
+Object.defineProperty(exports, "D_TemplateA", { enumerable: true, get: function () { return __importDefault(D_TemplateA_1).default; } });

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/TemplateA/index.d.ts

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

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/TemplateA/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.TemplateA = void 0;
+var TemplateA_1 = require("./TemplateA");
+Object.defineProperty(exports, "TemplateA", { enumerable: true, get: function () { return __importDefault(TemplateA_1).default; } });

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/TemplateA/mobile/M_TemplateA.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function TemplateA(): JSX.Element;
+export default TemplateA;

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/TemplateA/mobile/M_TemplateA.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var DynamicLayout_1 = require("../../../../../../DynamicLayout");
+var Section_1 = require("../../../../../components/Section");
+function TemplateA() {
+    var sectionActionHandler = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext).sectionActionHandler;
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    var onIframeLoad = function (event) {
+        if (sectionActionHandler) {
+            sectionActionHandler({
+                type: 'LOAD_IFRAME_SECTION',
+                payload: { event: event, multiPurposeUrl: section.properties.multiPurposeUrl }
+            });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("iframe", { "x-dlayout-section-element-name": "Iframe", id: String(section.id), title: section.manifest.schema, src: section.properties.multiPurposeUrl, style: { border: 'none', width: '100%', height: '100%', display: 'block' }, referrerPolicy: "strict-origin", sandbox: "allow-forms allow-same-origin allow-scripts", onLoad: onIframeLoad }, void 0));
+}
+exports.default = TemplateA;

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/TemplateA/mobile/index.d.ts

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

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/TemplateA/mobile/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.M_TemplateA = void 0;
+var M_TemplateA_1 = require("./M_TemplateA");
+Object.defineProperty(exports, "M_TemplateA", { enumerable: true, get: function () { return __importDefault(M_TemplateA_1).default; } });

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/index.d.ts

@@ -0,0 +1 @@
+export { TemplateA } from './TemplateA';

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateA = void 0;
+var TemplateA_1 = require("./TemplateA");
+Object.defineProperty(exports, "TemplateA", { enumerable: true, get: function () { return TemplateA_1.TemplateA; } });

package/dist/src/sub/DynamicLayout/sections/index.d.ts

@@ -3,3 +3,4 @@ export { ContentsSection } from './ContentsSection';
 export { FooterSection } from './FooterSection';
 export { InfoBoxSection } from './InfoBoxSection';
 export { IntroSection } from './IntroSection';
+export { FullscreenIframeSection } from './FullscreenIframeSection';

package/dist/src/sub/DynamicLayout/sections/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IntroSection = exports.InfoBoxSection = exports.FooterSection = exports.ContentsSection = exports.ContentsCarouselSection = void 0;
+exports.FullscreenIframeSection = exports.IntroSection = exports.InfoBoxSection = exports.FooterSection = exports.ContentsSection = exports.ContentsCarouselSection = void 0;
 var ContentsCarouselSection_1 = require("./ContentsCarouselSection");
 Object.defineProperty(exports, "ContentsCarouselSection", { enumerable: true, get: function () { return ContentsCarouselSection_1.ContentsCarouselSection; } });
 var ContentsSection_1 = require("./ContentsSection");
@@ -11,3 +11,5 @@ var InfoBoxSection_1 = require("./InfoBoxSection");
 Object.defineProperty(exports, "InfoBoxSection", { enumerable: true, get: function () { return InfoBoxSection_1.InfoBoxSection; } });
 var IntroSection_1 = require("./IntroSection");
 Object.defineProperty(exports, "IntroSection", { enumerable: true, get: function () { return IntroSection_1.IntroSection; } });
+var FullscreenIframeSection_1 = require("./FullscreenIframeSection");
+Object.defineProperty(exports, "FullscreenIframeSection", { enumerable: true, get: function () { return FullscreenIframeSection_1.FullscreenIframeSection; } });

package/dist/src/sub/DynamicLayout/types.d.ts

@@ -1,5 +1,7 @@
-export declare type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX';
-export declare type TypeofSectionTemplate = 'BASE_INTRO_A' | 'BASE_INTRO_B' | 'BASE_INTRO_C' | 'BASE_INTRO_D' | 'BASE_CONTENTS_A' | 'BASE_CONTENTS_B' | 'BASE_CONTENTS_CAROUSEL_A' | 'BASE_CONTENTS_CAROUSEL_B' | 'BASE_FOOTER_A' | 'BASE_FOOTER_B' | 'BASE_INFO_BOX_A';
+import type { TypeOfSectionAction } from './sectionActionTypes';
+export { TypeOfSectionAction };
+export declare type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME';
+export declare type TypeofSectionTemplate = 'BASE_INTRO_A' | 'BASE_INTRO_B' | 'BASE_INTRO_C' | 'BASE_INTRO_D' | 'BASE_CONTENTS_A' | 'BASE_CONTENTS_B' | 'BASE_CONTENTS_CAROUSEL_A' | 'BASE_CONTENTS_CAROUSEL_B' | 'BASE_FOOTER_A' | 'BASE_FOOTER_B' | 'BASE_INFO_BOX_A' | 'EXP_IFRAME_A';
 export declare type TypeOfSectionContentMediaType = 'IMAGE' | 'YOUTUBE';
 export declare type TypeOfSectionLinkType = 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE';
 export declare type TypeOfCarouselAutoplayMode = 'AUTO' | 'MANUAL';
@@ -10,7 +12,7 @@ export declare type TypeOfItemButtonDesignType = 'A' | 'B' | 'C' | 'D' | 'E' | '
 export declare type TypeOfItemManifestSchema = 'BASE_CONTENTS_CAROUSEL_ITEM' | 'BASE_FOOTER_ITEM' | 'BASE_INFO_BOX_ITEM';
 export declare type TypeOfItemLinkMethod = 'CLICK_ITEM' | 'CLICK_BUTTON_IN_ITEM' | 'NONE';
 export declare type TypeOfItemLinkType = 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE';
-declare type KeyOfSectionProperties = 'title' | 'description' | 'section_content_media_type' | 'section_content_media_src' | 'button_alpha_label' | 'button_alpha_link_type' | 'button_alpha_link_src' | 'button_bravo_label' | 'button_bravo_link_type' | 'button_bravo_link_src' | 'button_charlie_label' | 'button_charlie_link_type' | 'button_charlie_link_src' | 'button_delta_label' | 'button_delta_link_type' | 'button_delta_link_src' | 'button_echo_label' | 'button_echo_link_type' | 'button_echo_link_src' | 'carousel_autoplay_mode' | 'carousel_autoplay_time' | 'carousel_infinite_loop_mode' | 'item_link_method';
+declare type KeyOfSectionProperties = 'title' | 'description' | 'section_content_media_type' | 'section_content_media_src' | 'button_alpha_label' | 'button_alpha_link_type' | 'button_alpha_link_src' | 'button_bravo_label' | 'button_bravo_link_type' | 'button_bravo_link_src' | 'button_charlie_label' | 'button_charlie_link_type' | 'button_charlie_link_src' | 'button_delta_label' | 'button_delta_link_type' | 'button_delta_link_src' | 'button_echo_label' | 'button_echo_link_type' | 'button_echo_link_src' | 'carousel_autoplay_mode' | 'carousel_autoplay_time' | 'carousel_infinite_loop_mode' | 'item_link_method' | 'multi_purpose_url';
 declare type KeyOfSectionStyles = 'title_color_in_hex' | 'description_color_in_hex' | 'background_color_in_hex' | 'background_media_type' | 'background_media_src' | 'background_overlay_color_in_hex' | 'button_alpha_design_type' | 'button_alpha_background_color_in_hex' | 'button_alpha_label_color_in_hex' | 'button_bravo_design_type' | 'button_bravo_background_color_in_hex' | 'button_bravo_label_color_in_hex' | 'button_charlie_design_type' | 'button_charlie_background_color_in_hex' | 'button_charlie_label_color_in_hex' | 'button_delta_design_type' | 'button_delta_background_color_in_hex' | 'button_delta_label_color_in_hex' | 'button_echo_design_type' | 'button_echo_background_color_in_hex' | 'button_echo_label_color_in_hex' | 'item_title_color_in_hex' | 'item_description_color_in_hex' | 'item_button_design_type' | 'item_button_background_color_in_hex' | 'item_button_label_color_in_hex';
 declare type KeyOfItemProperties = 'title' | 'description' | 'body' | 'logo_image_src' | 'image_src' | 'link_type' | 'link_src' | 'button_label';
 export interface ISection {
@@ -54,6 +56,7 @@ export interface ISectionProperties {
     carouselAutoplayTime: number;
     carouselInfiniteLoopMode: TypeOfCarouselInfiniteLoopMode;
     itemLinkMethod: TypeOfItemLinkMethod;
+    multiPurposeUrl: string;
 }
 export interface ISectionStyles {
     titleColorInHex: string;
@@ -174,5 +177,5 @@ export declare type DynamicLayoutProps = {
     editingSectionId?: number;
     navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
     onClickEditSection?: (section: ISection) => void;
+    sectionActionHandler?: (action: TypeOfSectionAction) => void;
 };
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,9 +1,9 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.0.4]
+## [v2.0.6]
 
-## daily|https://design.storybook.publ.biz/
+## release|https://design.storybook.publ.biz/
 
 ### sub
 * DynamicLayout
-    * Footer Section - templateB
-        * text align을 left에서 center로 수정
+    * Iframe Section 추가
+    * ActionHandler 추가