pds-dev-kit-web-test 0.1.9 → 0.1.10

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/theme.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.themeByGivenTone = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
-var pds_dev_kit_color_web_1 = require("pds-dev-kit-color-web");
+var ui_colors_1 = require("./ui-colors");
 exports.fontWeight = {
     normal: '500',
     bold: '700'
@@ -119,7 +119,7 @@ exports.spacing = {
     spacingM: '288px',
     spacingN: '320px'
 };
-var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, pds_dev_kit_color_web_1.customColor)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
-var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, pds_dev_kit_color_web_1.customColor)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing })); };
+var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
+var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing })); };
 exports.themeByGivenTone = themeByGivenTone;
 exports.default = theme;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/ui-colors.d.ts

@@ -0,0 +1,10 @@
+import type { UITheme } from './colorSet/ui-type';
+export declare const uiColors: UITheme;
+declare global {
+    interface Window {
+        PdsUtils: any;
+    }
+}
+export declare const customTheme: (tone: string, palette?: {
+    [key: string]: string;
+} | undefined) => any;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/ui-colors.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.customTheme = exports.uiColors = void 0;
+var colorSet_1 = __importDefault(require("./colorSet"));
+function buildCascadedColors(lowLevel, highLevel, override) {
+    if (override === void 0) { override = {}; }
+    return Object.keys(highLevel).reduce(function (acc, key) {
+        var keyInLowLevelColors = highLevel[key];
+        var colorValue;
+        if (keyInLowLevelColors.indexOf('/') !== -1) {
+            colorValue = override[key]
+                ? override[key]
+                : lowLevel[keyInLowLevelColors.split('/')[0]] + lowLevel[keyInLowLevelColors.split('/')[1]];
+        }
+        else {
+            colorValue = override[key] ? override[key] : lowLevel[keyInLowLevelColors];
+        }
+        acc[key] = colorValue;
+        return acc;
+    }, {});
+}
+// fetch-palette-phase
+// 서버로부터 해당 채널이 라이트 톤을 사용하는지, 다크 톤을 사용하는지 가져오기
+// 서버로부터 해당 채널에서 커스텀으로 설정한 팔레트 가져오기
+// from server (원래는 비동기)
+var colorSetting = {
+    tone: 'DARK',
+    palette: {
+        usr_good_job: '#999999'
+    }
+};
+var phaseTwoJSON = colorSetting.tone === 'LIGHT' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark;
+// ui-color-build-phase
+var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, colorSetting.palette);
+exports.uiColors = buildCascadedColors(paletteColors, colorSet_1.default.UIColor);
+window.PdsUtils = {
+    tone: 'DARK'
+};
+var customTheme = function (tone, palette) {
+    window.PdsUtils.tone = tone;
+    window.PdsUtils.palette = palette;
+    var buildedColors = buildCascadedColors(buildCascadedColors(colorSet_1.default.SemanticColor, tone === 'LIGHT' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark, palette), colorSet_1.default.UIColor);
+    return buildedColors;
+};
+exports.customTheme = customTheme;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/types/index.d.ts

@@ -2,4 +2,5 @@ export * from './form';
 export * from './icon';
 export * from './styled-components';
 export * from './text';
+export * from './uiColors';
 export * from './components';

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/types/index.js

@@ -14,4 +14,5 @@ __exportStar(require("./form"), exports);
 __exportStar(require("./icon"), exports);
 __exportStar(require("./styled-components"), exports);
 __exportStar(require("./text"), exports);
+__exportStar(require("./uiColors"), exports);
 __exportStar(require("./components"), exports);

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/types/uiColors.d.ts

@@ -0,0 +1,2 @@
+import type { uiColors } from '../styles/ui-colors';
+export declare type UiColors = keyof typeof uiColors;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/types/uiColors.js

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

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.d.ts

@@ -1,16 +1,15 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys } from '../../common';
-import type { ColorType } from 'pds-dev-kit-color-web';
+import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../common';
 export declare type IconButtonProps = {
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle';
     baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
-    baseColorKey?: keyof ColorType;
-    borderColorKey?: keyof ColorType;
+    baseColorKey?: UiColors;
+    borderColorKey?: UiColors;
     iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
     iconFillType?: 'fill' | 'line';
     iconName: FillIconNameKeys | LineIconNameKeys;
-    iconColorKey?: keyof ColorType;
+    iconColorKey?: UiColors;
     shadow?: 'hidden' | 'visible';
     colorTheme?: 'none' | 'line1' | 'line2';
     type?: 'submit' | 'reset' | 'button';

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/TextLabel/TextLabel.d.ts

@@ -1,13 +1,12 @@
 /// <reference types="react" />
-import type { PDSTextType } from '../../common';
-import type { ColorType } from 'pds-dev-kit-color-web';
+import type { PDSTextType, UiColors } from '../../common';
 export declare type TextLabelProps = {
     text: PDSTextType;
     tooltipText?: PDSTextType;
     tooltipPosition?: 'left_top' | 'left_bottom' | 'right_top' | 'right_bottom';
     textAlign?: 'left' | 'center' | 'right';
     styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
-    colorOverride?: keyof ColorType;
+    colorOverride?: UiColors;
     colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';
@@ -24,7 +23,7 @@ export declare type TextStyleProps = {
     textAlign?: 'left' | 'center' | 'right';
     tooltipPosition?: 'left_top' | 'left_bottom' | 'right_top' | 'right_bottom';
     styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
-    colorOverride?: keyof ColorType;
+    colorOverride?: UiColors;
     colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';

package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Icon/Icon.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys } from '../../common';
-import type { ColorType } from 'pds-dev-kit-color-web';
+import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../common';
 export declare type IconProps = {
     iconName?: FillIconNameKeys | LineIconNameKeys;
     size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;
-    colorKey?: keyof ColorType;
+    colorKey?: UiColors;
     fillType?: 'line' | 'fill';
 } & Record<string, any>;
 declare const Icon: ({ iconName, size, colorKey, fillType }: IconProps) => JSX.Element;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/mobile/IconButton/IconButton.d.ts

@@ -1,16 +1,15 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys } from '../../common';
-import type { ColorType } from 'pds-dev-kit-color-web';
+import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../common';
 export declare type IconButtonProps = {
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle';
     baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
-    baseColorKey?: keyof ColorType;
-    borderColorKey?: keyof ColorType;
+    baseColorKey?: UiColors;
+    borderColorKey?: UiColors;
     iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
     iconFillType?: 'fill' | 'line';
     iconName: FillIconNameKeys | LineIconNameKeys;
-    iconColorKey?: keyof ColorType;
+    iconColorKey?: UiColors;
     shadow?: 'hidden' | 'visible';
     colorTheme?: 'none' | 'line1' | 'line2';
     type?: 'submit' | 'reset' | 'button';

package/dist/src/sub/DynamicLayout/components/pdsOriginal/mobile/TextLabel/TextLabel.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
-import type { PDSTextType } from '../../common';
-import type { ColorType } from 'pds-dev-kit-color-web';
+import type { PDSTextType, UiColors } from '../../common';
 export declare type TextLabelProps = {
     text: PDSTextType;
     textAlign?: 'left' | 'center' | 'right';
     styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
-    colorOverride?: keyof ColorType;
+    colorOverride?: UiColors;
     colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';
@@ -21,7 +20,7 @@ export declare type TextLabelProps = {
 export declare type TextStyleProps = {
     textAlign?: 'left' | 'center' | 'right';
     styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
-    colorOverride?: keyof ColorType;
+    colorOverride?: UiColors;
     colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';

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 = {
+    '@EXP_IFRAME/IFRAME_ON_LOADED': {
+        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: '@EXP_IFRAME/IFRAME_ON_LOADED',
+                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: '@EXP_IFRAME/IFRAME_ON_LOADED',
+                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; } });