pds-dev-kit-web-test 2.7.93 → 2.7.94

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/types.d.ts

@@ -0,0 +1,67 @@
+import type { NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+export type ContentsListPropsKeys = keyof CB_STYLE_PROP_CONTENTSLIST_SPECS;
+export type OUTSET_POSTIION = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12';
+export type INSET_POSTIION = 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8';
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE = 'DESIGN1' | 'DESIGN2' | null;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE = 'WIDE' | 'NORMAL' | 'NARROW' | null;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE = NUMBER_INTEGER | null;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE = boolean | null;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE = boolean | null;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | null;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE = OUTSET_POSTIION | INSET_POSTIION;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE' | null;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR = string;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR = string;
+export type CB_STYLE_PROP_CONTENTSLIST_SPECS_BASE = {
+    CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE: CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;
+    CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING: CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE;
+    CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT: CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE;
+    CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT: CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE;
+    CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL: CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE;
+    CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
+    CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE;
+    CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
+    CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
+    CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
+};
+export type CB_STYLE_PROP_CONTENTSLIST_SPECS = CB_STYLE_PROP_CONTENTSLIST_SPECS_BASE & {
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
+};
+export interface CustomPaginationProps {
+    current?: number;
+    total?: number;
+    type?: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
+    location?: OUTSET_POSTIION | INSET_POSTIION;
+    size?: 'SMALL' | 'MEDIUM' | 'LARGE';
+    primaryColor?: string;
+    secondaryColor?: string;
+}

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/types.js

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/IframeDenied.js

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 require("react");
-var usePackageTranslation_1 = require("../../../../../../../../common/hooks/usePackageTranslation");
+var react_i18next_1 = require("react-i18next");
 var components_1 = require("../../../../../../../DynamicLayout/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 function IframeDenied() {
-    var t = (0, usePackageTranslation_1.usePackageTranslation)().t;
+    var t = (0, react_i18next_1.useTranslation)().t;
     return ((0, jsx_runtime_1.jsx)(S_Denied, { children: (0, jsx_runtime_1.jsx)(components_1.D_TextLabel, { text: t('str_key_user_scene_x00001pages_notconnectdomain_embedcb_hide_info'), styleTheme: "caption1Regular", colorTheme: "sysTextSecondary", textAlign: "center" }) }));
 }
 var S_Denied = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: #ddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"], ["\n  align-items: center;\n  background-color: #ddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"])));

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js

@@ -44,6 +44,7 @@ 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 compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");
@@ -53,9 +54,24 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Image(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var index = props.index, CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
+    var index = props.index, CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var cLinkValue = function () {
+        if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
+            CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
+            if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
+                return "ERROR: QueryData NOT FOUND";
+            }
+            var link = queryContext.queryData[CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA];
+            if (!link) {
+                return "ERROR: ".concat(CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, " NOT found from queryData");
+            }
+            return link;
+        }
+        return CB_CONTENT_PROP_CLINK_SPEC_SRC;
+    };
     var _c = (0, useCLINK_1.default)({
-        src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
+        src: cLinkValue(),
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
         internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
@@ -74,7 +90,27 @@ function Image(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }) })) })) }))] }));
+    var imgSrc = function () {
+        var isDataConnected = CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DATA' ||
+            CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DELEGATEDDATA';
+        if (!isDataConnected) {
+            return CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR;
+        }
+        if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
+            // eslint-disable-next-line
+            console.warn('ERROR: No query data found');
+            return 'ERROR';
+        }
+        if (!queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA]) {
+            // eslint-disable-next-line
+            console.warn("ERROR: ".concat(CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA, " NOT found in query data"));
+            return 'ERROR';
+        }
+        return queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA];
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: imgSrc() === 'ERROR'
+                                ? 'https://static.publ.site/pages-sample/img_cb_style_prop_bgmedia_spec_imageselector_01.png'
+                                : imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }) })) })) }))] }));
 }
 function parseImageCBStyle(style, hoverStyle, mode) {
     var boxStyle = {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { INSET_POSTIION, OUTSET_POSTIION } from './types';
+import type { CB_SLIDEBANNER } from '../../../../../../../DynamicLayout/sections/CustomSection/types';
+import type { CB_SLIDEBANNER_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+type Props = CB_SLIDEBANNER_PROPERTIES_TYPE & IndexForIntersection & {
+    compositions: CB_SLIDEBANNER['compositions'];
+};
+type ComponentType = 'PREV' | 'NEXT' | 'PAGINATION' | 'PROGRESSBAR';
+export type SlideBannerElementsProps = {
+    type: ComponentType;
+    position: OUTSET_POSTIION | INSET_POSTIION;
+};
+declare function SlideBanner(props: Props): JSX.Element;
+export default SlideBanner;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js

@@ -0,0 +1,159 @@
+"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 createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
+var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
+var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
+var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var styled_components_1 = __importDefault(require("styled-components"));
+var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
+var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
+var CustomNavigationNextBtn_1 = require("./components/CustomNavigationNextBtn");
+var CustomNavigationPrevBtn_1 = require("./components/CustomNavigationPrevBtn");
+var CustomPagination_1 = require("./components/CustomPagination");
+var CustomProgressbar_1 = require("./components/CustomProgressbar");
+var useFlexGridLayout_1 = require("./hooks/useFlexGridLayout");
+var useSwiper_1 = require("./hooks/useSwiper");
+var SlideBannerCore_1 = __importDefault(require("./SlideBannerCore"));
+var slideBannerUtils_1 = require("./slideBannerUtils");
+var createComponent = function (type, getDesignType, getLocation) {
+    return function (normalStyle, hoverStyle, isHovered) {
+        var normalDesign = getDesignType(normalStyle);
+        var hoverDesign = getDesignType(hoverStyle);
+        if (isHovered && hoverDesign === 'NONE')
+            return undefined;
+        if (normalDesign === 'NONE')
+            return undefined;
+        return {
+            type: type,
+            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle)
+        };
+    };
+};
+function SlideBanner(props) {
+    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, queryData = _a.queryData;
+    var index = props.index, _b = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_STYLE_PROP_SLIDEBANNER = props.CB_STYLE_PROP_SLIDEBANNER, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var compositions = props.compositions;
+    var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
+    var _d = (0, slideBannerUtils_1.parseSlideBannerStyleToSlideBannerCoreProp)({
+        props: CB_STYLE_PROP_SLIDEBANNER,
+        device: device
+    }), slideBannerNormalStyle = _d.normalStyle, slideBannerHoverStyle = _d.hoverStyle;
+    var _e = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomPaginationProp)({
+        props: CB_STYLE_PROP_SLIDEBANNER,
+        device: device
+    }), customPaginationNormalStyle = _e.normalStyle, customPaginationHoverStyle = _e.hoverStyle;
+    var _f = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomNavigationProp)({
+        props: CB_STYLE_PROP_SLIDEBANNER,
+        device: device
+    }), customNavigationNormalStyle = _f.normalStyle, customNavigationHoverStyle = _f.hoverStyle;
+    var _g = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomProgressbarProp)({
+        props: CB_STYLE_PROP_SLIDEBANNER,
+        device: device
+    }), customProgressbarNormalStyle = _g.normalStyle, customProgressbarHoverStyle = _g.hoverStyle;
+    var _h = (0, useSwiper_1.useSwiper)(), swiperRef = _h.swiperRef, progressRef = _h.progressRef, leftTimeMsRef = _h.leftTimeMsRef, currentSlide = _h.currentSlide, isBeginning = _h.isBeginning, isEnd = _h.isEnd, onSwiper = _h.onSwiper, onSlideChangeTransitionEnd = _h.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _h.onAutoplayTimeLeft, onClickBullet = _h.onClickBullet, onClickPrevBtn = _h.onClickPrevBtn, onClickNextBtn = _h.onClickNextBtn;
+    var _j = (0, react_1.useState)(false), isHovered = _j[0], setIsHovered = _j[1];
+    var loop = isHovered ? slideBannerNormalStyle.loop : slideBannerHoverStyle.loop;
+    // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
+    var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
+    // NOTE: EFFECT와 관련된 함수들입니다.
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var isNoneEffectType = device === 'DESKTOP'
+        ? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
+        : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
+    var hasEffect = !isNoneEffectType;
+    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
+    var createPrevButton = createComponent('PREV', function (style) { return style.prevBtnType || 'NONE'; }, function (style) { return style.prevBtnLocation || 'OUTSET1'; });
+    var createNextButton = createComponent('NEXT', function (style) { return style.nextBtnType || 'NONE'; }, function (style) { return style.nextBtnLocation || 'OUTSET1'; });
+    var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; });
+    var components = [
+        createPrevButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
+        createNextButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
+        createPagination(customPaginationNormalStyle, customPaginationHoverStyle, isHovered),
+        { type: 'PROGRESSBAR', position: 'INSET5' }
+    ].filter(function (component) { return component !== undefined; });
+    var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs, 
+    // ccbInset,
+    componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
+    var ccbInset = {
+        top: '0px',
+        right: '0px',
+        bottom: '0px',
+        left: '0px'
+    };
+    var renderElements = function (component) {
+        var _a;
+        switch (component.type) {
+            case 'PREV':
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, styles: isHovered ? customNavigationHoverStyle : customNavigationNormalStyle, onClick: onClickPrevBtn }));
+            case 'NEXT':
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: isHovered ? customNavigationHoverStyle : customNavigationNormalStyle, onClick: onClickNextBtn }));
+            case 'PAGINATION':
+                return ((0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? customPaginationHoverStyle : customPaginationNormalStyle, current: currentSlide, isPrevBtnDisabled: loop ? false : isBeginning, isNextBtnDisabled: loop ? false : isEnd, total: ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slides.length) || 0, onBulletClick: onClickBullet, onPrevBtnClick: onClickPrevBtn, onNextBtnClick: onClickNextBtn }));
+            case 'PROGRESSBAR':
+                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
+            default:
+                return null;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(componentGroups).map(function (_a) {
+                var position = _a[0], groupComponents = _a[1];
+                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-group ccb-elements", ref: function (el) {
+                        if (el) {
+                            positionRefs.current[position] = el;
+                        }
+                        else {
+                            delete positionRefs.current[position];
+                        }
+                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3, pointerEvents: 'none' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) { return renderElements(component); }) })) }), position));
+            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-slidebanner-layout-box", ref: layoutRef }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-slidebanner-wrapper", ccbInset: ccbInset, customStyle: isHovered ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, className: "cb-slidebanner", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? slideBannerHoverStyle : slideBannerNormalStyle }, { children: (0, createCompositions_1.createCompositions)({
+                                    valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
+                                    queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
+                                    limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
+                                    queryData: queryData,
+                                    compositions: compositions
+                                }) })) })) })) })) }))] }));
+}
+var S_SwiperLayout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"], ["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"])));
+var S_SwiperWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"], ["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"])), function (_a) {
+    var ccbInset = _a.ccbInset;
+    return ccbInset.bottom;
+}, function (_a) {
+    var ccbInset = _a.ccbInset;
+    return ccbInset.left;
+}, function (_a) {
+    var ccbInset = _a.ccbInset;
+    return ccbInset.right;
+}, function (_a) {
+    var ccbInset = _a.ccbInset;
+    return ccbInset.top;
+}, function (_a) {
+    var customStyle = _a.customStyle;
+    return customStyle;
+});
+exports.default = SlideBanner;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBannerCore.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import 'swiper/modules/navigation/navigation.min.css';
+import type { CoreSlideBannerProps } from './types';
+import type { SwiperProps, SwiperRef } from 'swiper/react/swiper-react.js';
+export interface SlideBannerCoreProps extends SwiperProps {
+    styles: CoreSlideBannerProps;
+    slidesPerView?: SwiperProps['slidesPerView'];
+    children?: React.ReactNode[] | JSX.Element;
+}
+declare const SlideBannerCore: import("react").ForwardRefExoticComponent<SlideBannerCoreProps & import("react").RefAttributes<SwiperRef>>;
+export default SlideBannerCore;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBannerCore.js

@@ -0,0 +1,38 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var swiper_1 = require("swiper");
+require("swiper/modules/navigation/navigation.min.css");
+var react_2 = require("swiper/react");
+var SlideBannerCore = (0, react_1.forwardRef)(function (_a, ref) {
+    var styles = _a.styles, slidesPerView = _a.slidesPerView, children = _a.children, props = __rest(_a, ["styles", "slidesPerView", "children"]);
+    return ((0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ ref: ref, style: {
+            width: '100%',
+            height: '100%'
+        }, modules: [swiper_1.Pagination, swiper_1.Navigation, swiper_1.Scrollbar, swiper_1.FreeMode, swiper_1.Autoplay], slidesPerView: slidesPerView, scrollbar: styles.scrollbar, freeMode: styles.freeMode, autoplay: styles.useAutoplay ? styles.autoplay : false, loop: styles.loop }, props, { children: Array.isArray(children) ? (children.map(function (slide, index) { return (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: slide }, index); })) : ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: children })) })));
+});
+SlideBannerCore.displayName = 'SlideBannerCore';
+exports.default = SlideBannerCore;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationNextBtn.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { CustomNavigationProps } from '../types';
+export interface CustomNavigationNextBtnProps {
+    isDisabled: boolean;
+    styles: CustomNavigationProps;
+    onClick?: () => void;
+}
+export declare const CustomNavigationNextBtn: ({ isDisabled, styles, onClick }: CustomNavigationNextBtnProps) => JSX.Element;
+export interface FlexBoxProps {
+    direction?: 'row' | 'column';
+    justifyContent?: string;
+    alignItems?: string;
+    gap?: string;
+}
+export default CustomNavigationNextBtn;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationNextBtn.js

@@ -0,0 +1,69 @@
+"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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+exports.CustomNavigationNextBtn = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal/desktop/IconButton");
+var styled_components_1 = __importStar(require("styled-components"));
+var navigationConfigs_1 = require("./navigationConfigs");
+var CustomNavigationNextBtn = function (_a) {
+    var isDisabled = _a.isDisabled, styles = _a.styles, onClick = _a.onClick;
+    var nextButton = styles.nextBtnType === 'NONE'
+        ? undefined
+        : navigationConfigs_1.nextButtonMappedIcons[styles.nextBtnType || 'DESIGN1'];
+    var buttonSize = 'large';
+    var iconSize = 24;
+    if (styles.nextBtnSize === 'SMALL') {
+        buttonSize = 'small';
+        iconSize = 16;
+    }
+    if (styles.nextBtnSize === 'LARGE') {
+        buttonSize = 'xxlarge';
+        iconSize = 48;
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "cb-slidebanner-next-button", disabled: isDisabled, "$size": styles.nextBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: nextButton.shapeType, borderColorKey: nextButton.borderColorKey, overrideBaseColorHex: styles.nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.nextBtnSecondaryColor, shadow: nextButton.shadow, onClick: onClick }) }))) }));
+};
+exports.CustomNavigationNextBtn = CustomNavigationNextBtn;
+var S_NextButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n\n  ", ";\n"], ["\n  cursor: pointer;\n\n  ", ";\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      cursor: auto;\n      opacity: 0.35;\n      pointer-events: none;\n    "], ["\n      cursor: auto;\n      opacity: 0.35;\n      pointer-events: none;\n    "])));
+});
+exports.default = exports.CustomNavigationNextBtn;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationPrevBtn.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { CustomNavigationProps } from '../types';
+export interface CustomNavigationPrevBtnProps {
+    isDisabled: boolean;
+    styles: CustomNavigationProps;
+    onClick?: () => void;
+}
+export declare const CustomNavigationPrevBtn: ({ isDisabled, styles, onClick }: CustomNavigationPrevBtnProps) => JSX.Element;
+export interface FlexBoxProps {
+    direction?: 'row' | 'column';
+    justifyContent?: string;
+    alignItems?: string;
+    gap?: string;
+}
+export default CustomNavigationPrevBtn;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationPrevBtn.js

@@ -0,0 +1,69 @@
+"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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+exports.CustomNavigationPrevBtn = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal/desktop/IconButton");
+var styled_components_1 = __importStar(require("styled-components"));
+var navigationConfigs_1 = require("./navigationConfigs");
+var CustomNavigationPrevBtn = function (_a) {
+    var isDisabled = _a.isDisabled, styles = _a.styles, onClick = _a.onClick;
+    var prevButton = styles.prevBtnType === 'NONE'
+        ? undefined
+        : navigationConfigs_1.prevButtonMappedIcons[styles.prevBtnType || 'DESIGN1'];
+    var buttonSize = 'large';
+    var iconSize = 24;
+    if (styles.prevBtnSize === 'SMALL') {
+        buttonSize = 'small';
+        iconSize = 16;
+    }
+    if (styles.prevBtnSize === 'LARGE') {
+        buttonSize = 'xxlarge';
+        iconSize = 48;
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prevButton && ((0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "cb-slidebanner-prev-button", disabled: isDisabled, "$size": styles.prevBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: prevButton.shapeType, borderColorKey: prevButton.borderColorKey, overrideBaseColorHex: styles.prevBtnPrimaryColor, iconName: prevButton.iconName, iconFillType: "line", iconColorKey: prevButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.prevBtnSecondaryColor, shadow: prevButton.shadow, onClick: onClick }) }))) }));
+};
+exports.CustomNavigationPrevBtn = CustomNavigationPrevBtn;
+var S_PrevButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n\n  ", ";\n"], ["\n  cursor: pointer;\n\n  ", ";\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      cursor: auto;\n      opacity: 0.35;\n      pointer-events: none;\n    "], ["\n      cursor: auto;\n      opacity: 0.35;\n      pointer-events: none;\n    "])));
+});
+exports.default = exports.CustomNavigationPrevBtn;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { CustomPaginationProps } from '../types';
+interface Props {
+    current: number;
+    total: number;
+    isPrevBtnDisabled: boolean;
+    isNextBtnDisabled: boolean;
+    styles: CustomPaginationProps;
+    onBulletClick: (index: number) => void;
+    onPrevBtnClick: () => void;
+    onNextBtnClick: () => void;
+}
+export declare const CustomPagination: ({ current, total, isNextBtnDisabled, isPrevBtnDisabled, styles, onBulletClick, onNextBtnClick, onPrevBtnClick }: Props) => JSX.Element;
+export interface FlexBoxProps {
+    direction?: 'row' | 'column';
+    justifyContent?: string;
+    alignItems?: string;
+    gap?: string;
+}
+export default CustomPagination;