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

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/NarrowMembershipListView.js

@@ -0,0 +1,174 @@
+"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 react_1 = require("react");
+var panels_1 = require("../../../../../../../../../desktop/panels");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
+var styled_components_1 = __importStar(require("styled-components"));
+function NarrowMembershipListView(_a) {
+    var connectedMemberships = _a.connectedMemberships, itemHighlightingColorInHex = _a.itemHighlightingColorInHex, itemToneType = _a.itemToneType, currentIndex = _a.currentIndex, handleMembershipClick = _a.handleMembershipClick;
+    var resizeTarget = (0, react_1.useRef)(null);
+    var membershipListRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(0), scrollValue = _b[0], setScrollValue = _b[1];
+    var _c = (0, react_1.useState)(0), targetWidth = _c[0], setTargetWidth = _c[1];
+    var handleScroll = function () {
+        if (membershipListRef === null || membershipListRef.current === null) {
+            return;
+        }
+        setScrollValue(membershipListRef.current.scrollLeft);
+    };
+    /**
+     * @when : 화면 진입 시
+     * @expected : 스크롤을 감지하는 이벤트 핸들러를 추가합니다.
+     * @clear : 스크롤을 감지하는 이벤트 핸들러를 제거합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        if (!membershipListRef.current) {
+            return;
+        }
+        membershipListRef.current.addEventListener('scroll', handleScroll);
+        return function () {
+            if (!membershipListRef.current) {
+                return;
+            }
+            membershipListRef.current.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    /**
+     * @when : 화면 진입 시
+     * @expected : 콘텐츠 영역의 크기를 확인해서 observer를 추가합니다.
+     * @clear : observer를 제거합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        var element = resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current;
+        if (!element)
+            return;
+        var observer = new ResizeObserver(function (entries) {
+            entries.forEach(function (entry) {
+                setTargetWidth(entry.contentRect.width);
+            });
+        });
+        observer.observe(element);
+        return function () {
+            observer.disconnect();
+        };
+    }, []);
+    var isLeftMaskingCoverShow = connectedMemberships.length > 2 && scrollValue > 0;
+    var isRightMaskingCoverShow = (0, react_1.useMemo)(function () {
+        if (connectedMemberships.length < 3) {
+            return false;
+        }
+        if (scrollValue === 0) {
+            return true;
+        }
+        return membershipListRef.current
+            ? membershipListRef.current.scrollLeft + membershipListRef.current.clientWidth <
+                membershipListRef.current.scrollWidth - 1
+            : scrollValue === 0;
+    }, [connectedMemberships, membershipListRef.current, scrollValue, targetWidth]);
+    var scrollPrev = function (x) {
+        var scrollLeft = (membershipListRef.current || {}).scrollLeft;
+        if (membershipListRef.current && typeof scrollLeft === 'number') {
+            membershipListRef.current.scroll({ left: scrollLeft - x, behavior: 'smooth' });
+            setScrollValue(scrollLeft - x);
+        }
+    };
+    var scrollNext = function (x) {
+        var scrollLeft = (membershipListRef.current || {}).scrollLeft;
+        if (membershipListRef.current && typeof scrollLeft === 'number') {
+            membershipListRef.current.scroll({ left: scrollLeft + x, behavior: 'smooth' });
+            setScrollValue(scrollLeft + x);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(S_NarrowMembershipList, { children: connectedMemberships.length > 0 && ((0, jsx_runtime_1.jsxs)(S_MembershipListBox, { children: [isLeftMaskingCoverShow && ((0, jsx_runtime_1.jsx)(S_ArrowIconCover, __assign({ position: "left" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconName: "ic_arrow_left", iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, onClick: function () { return scrollPrev(500); } }, void 0) }), void 0)), (0, jsx_runtime_1.jsx)(S_ContentOperatorPanel, __assign({ ref: membershipListRef, isLeftMaskingCoverShow: isLeftMaskingCoverShow, isRightMaskingCoverShow: isRightMaskingCoverShow, centered: connectedMemberships.length <= 2 }, { children: connectedMemberships.map(function (_a, i) {
+                        var id = _a.id, membership = _a.membership;
+                        return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
+                                    backgroundColor: i === currentIndex
+                                        ? itemHighlightingColorInHex
+                                        : constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType]
+                                            .membershipSheetBackgroundColor,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    height: '120px',
+                                    justifyContent: 'center',
+                                    marginRight: '24px',
+                                    width: '384px',
+                                    maxWidth: '384px',
+                                    minWidth: '384px',
+                                    paddingLeft: '40px',
+                                    paddingRight: '40px'
+                                }, radius: 24, shapeType: "round", width: "100%", height: "120px", onClick: function () {
+                                    handleMembershipClick(i);
+                                } }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: membership.title, styleTheme: "headingBold", ellipsisMode: "use", lineLimit: 2, color: i === currentIndex
+                                        ? '#FDFDFDFF'
+                                        : constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }, void 0) }), void 0) }, id));
+                    }) }), void 0), isRightMaskingCoverShow && ((0, jsx_runtime_1.jsx)(S_ArrowIconCover, __assign({ position: "right" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconName: "ic_arrow_right", iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, onClick: function () { return scrollNext(500); } }, void 0) }), void 0))] }, void 0)) }, void 0));
+}
+var S_NarrowMembershipList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var S_MembershipListBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  overflow: hidden;\n  position: relative;\n"], ["\n  margin-bottom: ", ";\n  overflow: hidden;\n  position: relative;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+});
+var Centered = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+var LeftMasking = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 7.5%);\n"], ["\n  -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 7.5%);\n"])));
+var RightMasking = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  -webkit-mask-image: linear-gradient(90deg, white 92.5%, transparent 100%);\n"], ["\n  -webkit-mask-image: linear-gradient(90deg, white 92.5%, transparent 100%);\n"])));
+var BothMasking = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  -webkit-mask-image: linear-gradient(\n    90deg,\n    transparent 0%,\n    white 7.5%,\n    white 92.5%,\n    transparent 100%\n  );\n"], ["\n  -webkit-mask-image: linear-gradient(\n    90deg,\n    transparent 0%,\n    white 7.5%,\n    white 92.5%,\n    transparent 100%\n  );\n"])));
+var S_ContentOperatorPanel = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  overflow: scroll;\n\n  ", ";\n  ", "\n"], ["\n  display: flex;\n  overflow: scroll;\n\n  ", ";\n  ", "\n"])), function (_a) {
+    var centered = _a.centered;
+    return centered && Centered;
+}, function (_a) {
+    var isLeftMaskingCoverShow = _a.isLeftMaskingCoverShow, isRightMaskingCoverShow = _a.isRightMaskingCoverShow;
+    if (isLeftMaskingCoverShow && isRightMaskingCoverShow) {
+        return BothMasking;
+    }
+    if (isLeftMaskingCoverShow) {
+        return LeftMasking;
+    }
+    if (isRightMaskingCoverShow) {
+        return RightMasking;
+    }
+});
+var S_ArrowIconCover = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 120px;\n  justify-content: ", ";\n  position: absolute;\n  top: 0;\n  width: 48px;\n  z-index: 1;\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  height: 120px;\n  justify-content: ", ";\n  position: absolute;\n  top: 0;\n  width: 48px;\n  z-index: 1;\n\n  ", "\n"])), function (_a) {
+    var position = _a.position;
+    return (position === 'left' ? 'flex-start' : 'flex-end');
+}, function (_a) {
+    var position = _a.position;
+    return position && position + ":0";
+});
+exports.default = NarrowMembershipListView;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/SectionContents.d.ts

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

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/SectionContents.js

@@ -0,0 +1,49 @@
+"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 Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+function SectionContents() {
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    if (!section) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
+    var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
+    var isEmptySection = !title && !description && !buttonAlphaLabel;
+    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySection: isEmptySection }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
+}
+var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
+    var isEmptySection = _a.isEmptySection;
+    return (isEmptySection ? 0 : '80px');
+});
+var S_DescriptionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+});
+var S_ButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingG;
+});
+exports.default = SectionContents;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/UnavailableMembershipPlanSheet.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ISectionStyles } from '../../../../../../../../DynamicLayout/types';
+declare type Props = {
+    sectionStyles: ISectionStyles;
+};
+declare function UnavailableMembershipPlanSheet({ sectionStyles }: Props): JSX.Element;
+export default UnavailableMembershipPlanSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/UnavailableMembershipPlanSheet.js

@@ -0,0 +1,33 @@
+"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_i18next_1 = require("react-i18next");
+var panels_1 = require("../../../../../../../../../desktop/panels");
+var components_1 = require("../../../../../../../../../hybrid/components");
+var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
+function UnavailableMembershipPlanSheet(_a) {
+    var sectionStyles = _a.sectionStyles;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var itemToneType = sectionStyles.itemToneType, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ width: "100%", height: "auto", shapeType: "round", overrideCSS: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '112px',
+                    backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
+                } }, { children: (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t('str_5300'), color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonText: t(constants_1.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT[programmedItemActionButtonTextType]), state: "disabled", buttonTextColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].disabledProgrammedItemActionButtonTextColor, buttonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType]
+                    .disabledProgrammedItemActionButtonBackgroundColor, "$paddingBottom": "56px" }, void 0)] }, void 0));
+}
+exports.default = UnavailableMembershipPlanSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/WideMembershipListView.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { IConnectedMembership, TypeOfItemToneType } from '../../../../../../../../DynamicLayout/types';
+declare type Props = {
+    connectedMemberships: IConnectedMembership[];
+    itemHighlightingColorInHex: string;
+    itemToneType: TypeOfItemToneType;
+    currentIndex: number;
+    handleMembershipClick: (currentIndex: number) => void;
+};
+declare function WideMembershipListView({ connectedMemberships, itemHighlightingColorInHex, itemToneType, currentIndex, handleMembershipClick }: Props): JSX.Element;
+export default WideMembershipListView;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/WideMembershipListView.js

@@ -0,0 +1,88 @@
+"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 panels_1 = require("../../../../../../../../../desktop/panels");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
+var styled_components_1 = __importDefault(require("styled-components"));
+function WideMembershipListView(_a) {
+    var connectedMemberships = _a.connectedMemberships, itemHighlightingColorInHex = _a.itemHighlightingColorInHex, itemToneType = _a.itemToneType, currentIndex = _a.currentIndex, handleMembershipClick = _a.handleMembershipClick;
+    var membershipListRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(0), scrollValue = _b[0], setScrollValue = _b[1];
+    var handleScroll = function () {
+        if (membershipListRef === null || membershipListRef.current === null) {
+            return;
+        }
+        setScrollValue(membershipListRef.current.scrollTop);
+    };
+    (0, react_1.useEffect)(function () {
+        if (!membershipListRef.current) {
+            return;
+        }
+        membershipListRef.current.addEventListener('scroll', handleScroll);
+        return function () {
+            if (!membershipListRef.current) {
+                return;
+            }
+            membershipListRef.current.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    var isTopMaskingCoverShow = connectedMemberships.length > 5 && scrollValue > 0;
+    var isBottomMaskingCoverShow = membershipListRef.current
+        ? membershipListRef.current.scrollTop + membershipListRef.current.clientHeight <
+            membershipListRef.current.scrollHeight
+        : true;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_MembershipListMaskingBox, __assign({ isTopMaskingCoverShow: isTopMaskingCoverShow, isBottomMaskingCoverShow: isBottomMaskingCoverShow }, { children: (0, jsx_runtime_1.jsx)(S_MembershipList, __assign({ ref: membershipListRef }, { children: connectedMemberships.map(function (_a, i) {
+                    var id = _a.id, membership = _a.membership;
+                    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
+                                backgroundColor: i === currentIndex
+                                    ? itemHighlightingColorInHex
+                                    : constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '120px',
+                                justifyContent: 'center',
+                                marginBottom: '24px',
+                                paddingLeft: '40px',
+                                paddingRight: '40px'
+                            }, radius: 24, shapeType: "round", width: "100%", height: "120px", onClick: function () {
+                                handleMembershipClick(i);
+                            } }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: membership.title, styleTheme: "headingBold", ellipsisMode: "use", lineLimit: 2, color: i === currentIndex
+                                    ? '#FDFDFDFF'
+                                    : constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }, void 0) }), void 0) }, id));
+                }) }), void 0) }), void 0) }, void 0));
+}
+var S_MembershipListMaskingBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  -webkit-mask-image: ", ";\n  width: 33%;\n"], ["\n  -webkit-mask-image: ", ";\n  width: 33%;\n"])), function (_a) {
+    var isTopMaskingCoverShow = _a.isTopMaskingCoverShow, isBottomMaskingCoverShow = _a.isBottomMaskingCoverShow;
+    if (isTopMaskingCoverShow && isBottomMaskingCoverShow) {
+        return 'linear-gradient(transparent 0%, white 7.5%, white 92.5%, transparent 100%)';
+    }
+    if (isTopMaskingCoverShow) {
+        return 'linear-gradient(transparent 0%, white 7.5%)';
+    }
+    if (isBottomMaskingCoverShow) {
+        return 'linear-gradient(white 92.5%, transparent 100%)';
+    }
+});
+var S_MembershipList = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  flex-direction: column;\n  height: 720px;\n  min-width: 33%;\n  overflow: auto;\n  position: relative;\n"], ["\n  flex: 1;\n  flex-direction: column;\n  height: 720px;\n  min-width: 33%;\n  overflow: auto;\n  position: relative;\n"])));
+exports.default = WideMembershipListView;
+var templateObject_1, templateObject_2;

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

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

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/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/MembershipSection/EditType/templates/TemplateA/index.d.ts

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

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/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/MembershipSection/EditType/templates/TemplateA/mobile/M_TemplateA.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { IMembershipDisplay } from '../../../../../../../DynamicLayout/types';
+declare type Props = {
+    membershipDisplay: IMembershipDisplay;
+};
+declare function TemplateA({ membershipDisplay }: Props): JSX.Element;
+export default TemplateA;

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

@@ -0,0 +1,28 @@
+"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"));
+var EmptyMembershipSheet_1 = __importDefault(require("./components/EmptyMembershipSheet"));
+var MembershipContents_1 = __importDefault(require("./components/MembershipContents"));
+var SectionContents_1 = __importDefault(require("./components/SectionContents"));
+function TemplateA(_a) {
+    var membershipDisplay = _a.membershipDisplay;
+    var orderedConnectedMemberships = membershipDisplay.connectedMemberships.slice().sort(function (a, b) { return a.order - b.order; }) || [];
+    return ((0, jsx_runtime_1.jsxs)(S_MembershipSection, { children: [(0, jsx_runtime_1.jsx)(SectionContents_1.default, {}, void 0), orderedConnectedMemberships.length > 0 ? ((0, jsx_runtime_1.jsx)(MembershipContents_1.default, { orderedConnectedMemberships: orderedConnectedMemberships }, void 0)) : ((0, jsx_runtime_1.jsx)(EmptyMembershipSheet_1.default, {}, void 0))] }, void 0));
+}
+var S_MembershipSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " auto;\n  padding: 0 ", ";\n"], ["\n  margin: ", " auto;\n  padding: 0 ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingG;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+exports.default = TemplateA;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/EmptyMembershipSheet.d.ts

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

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/EmptyMembershipSheet.js

@@ -0,0 +1,35 @@
+"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 react_i18next_1 = require("react-i18next");
+var panels_1 = require("../../../../../../../../../desktop/panels");
+var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
+function MembershipSheet() {
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    if (!section) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    var itemToneType = section.styles.itemToneType;
+    return ((0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
+            backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        }, width: "100%", height: "180px", shapeType: "round" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: t('str_5299'), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].emptyMembershipSheetTextLabelColor }, void 0) }), void 0));
+}
+exports.default = MembershipSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/MembershipBenefitInfo.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { IMembershipBenefitInfo, TypeOfItemToneType } from '../../../../../../../../DynamicLayout/types';
+declare type Props = {
+    membershipBenefitInfo: IMembershipBenefitInfo;
+    itemToneType: TypeOfItemToneType;
+};
+declare function MembershipBenefitInfo({ membershipBenefitInfo, itemToneType }: Props): JSX.Element;
+export default MembershipBenefitInfo;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/MembershipBenefitInfo.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../../../../../../../DynamicLayout/components");
+var mobile_1 = require("../../../../../../../../DynamicLayout/components/mobile");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
+function MembershipBenefitInfo(_a) {
+    var membershipBenefitInfo = _a.membershipBenefitInfo, itemToneType = _a.itemToneType;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [membershipBenefitInfo.benefitAlpha && ((0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitAlpha, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)), membershipBenefitInfo.benefitBravo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitBravo, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0)), membershipBenefitInfo.benefitCharlie && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitCharlie, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0)), membershipBenefitInfo.benefitDelta && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitDelta, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0)), membershipBenefitInfo.benefitEcho && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitEcho, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0))] }, void 0));
+}
+exports.default = MembershipBenefitInfo;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/MembershipContents.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { IConnectedMembership } from '../../../../../../../../DynamicLayout/types';
+declare type Props = {
+    orderedConnectedMemberships: IConnectedMembership[];
+};
+declare function MembershipContents({ orderedConnectedMemberships }: Props): JSX.Element;
+export default MembershipContents;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/MembershipContents.js

@@ -0,0 +1,22 @@
+"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 react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var MembershipSectionSheet_1 = __importDefault(require("./MembershipSectionSheet"));
+function MembershipContents(_a) {
+    var orderedConnectedMemberships = _a.orderedConnectedMemberships;
+    return ((0, jsx_runtime_1.jsx)(S_MembershipBox, { children: orderedConnectedMemberships.map(function (connectedMembership) {
+            return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(MembershipSectionSheet_1.default, { membership: connectedMembership.membership }, void 0) }, connectedMembership.id));
+        }) }, void 0));
+}
+var S_MembershipBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  position: relative;\n"])));
+exports.default = MembershipContents;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/MembershipSectionSheet.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { IMembership } from '../../../../../../../../DynamicLayout/types';
+declare type Props = {
+    membership: IMembership;
+};
+declare function MembershipSectionSheet({ membership }: Props): JSX.Element;
+export default MembershipSectionSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/MembershipSectionSheet.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 __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 components_1 = require("../../../../../../../../../hybrid/components");
+var panels_1 = require("../../../../../../../../../mobile/panels");
+var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
+var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
+var styled_components_1 = __importDefault(require("styled-components"));
+var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
+function MembershipSectionSheet(_a) {
+    var membership = _a.membership;
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    if (!section) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    var itemToneType = section.styles.itemToneType;
+    var membershipCardTemplate = membership.membershipCardTemplate, membershipBenefitInfo = membership.membershipBenefitInfo;
+    return ((0, jsx_runtime_1.jsxs)(panels_1.SectionSheet, __assign({ overrideCSS: {
+            backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            marginBottom: '48px'
+        }, width: "100%", height: "100%", shapeType: "round", paddingBottom: "spacing_f" }, { children: [(0, jsx_runtime_1.jsx)(components_2.M_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membershipCardTemplate }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(components_2.M_MembershipSectionItem.Title, { text: membership.title || '', color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, customFontSize: "28px", customFontWeight: "bold", textAlign: "center" }, void 0), (0, jsx_runtime_1.jsx)(S_MembershipDetailBox, { children: membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membershipBenefitInfo, itemToneType: itemToneType }, void 0)) }, void 0)] }), void 0));
+}
+var S_MembershipDetailBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: ", ";\n  position: relative;\n  width: 100%;\n"], ["\n  padding-top: ", ";\n  position: relative;\n  width: 100%;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+});
+exports.default = MembershipSectionSheet;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/SectionContents.d.ts

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