pds-dev-kit-web-test 2.7.433 → 2.7.436

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

@@ -1,5 +1,10 @@
 /// <reference types="react" />
-import type { CB_BTN_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_STYLE_PROP_TEXT_SPECS } from '../types';
+import type { CB_BTN_PROPERTIES_TYPE, Device, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_BTN_PROPERTIES_TYPE & IndexForIntersection;
 declare function Button(props: Props): JSX.Element;
+export declare function getTextStyles(props: CB_STYLE_PROP_TEXT_SPECS, device: Device): {
+    style: import("styled-components").CSSProperties;
+    hoverStyle: import("styled-components").CSSProperties;
+};
 export default Button;

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

@@ -1,4 +1,8 @@
 "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++) {
@@ -25,27 +29,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTextStyles = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
 var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
 var useGoogleFonts_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks/useGoogleFonts");
 var newUtils_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils");
 var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var types_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/types");
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var parseStylePropShadow_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropShadow");
+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 S_CB_Box_1 = require("../components/S_CB_Box");
+require("../components/S_CB_BoxWithShadow");
+var S_HeightFitContentCover_1 = require("../components/S_HeightFitContentCover");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
-var Text_1 = require("../Text/Text");
 var textSpecFormatOptions_1 = require("../Text/textSpecFormatOptions");
 function Button(props) {
-    var _a, _b, _c;
-    var _d = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _d.device, mode = _d.mode;
+    var _a, _b, _c, _d, _e;
+    var _f = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _f.device, mode = _f.mode;
     var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
-    var index = props.index, CB_STYLE_PROP_COLOR = props.CB_STYLE_PROP_COLOR, _e = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _e.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _e.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _e.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _e.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _e.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _e.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, _f = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _f.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _f.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_CONTENT_PROP_TEXTOPTION = props.CB_CONTENT_PROP_TEXTOPTION;
+    var index = props.index, CB_STYLE_PROP_COLOR = props.CB_STYLE_PROP_COLOR, _g = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _g.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _g.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _g.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _g.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _g.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _g.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, _h = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _h.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _h.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_STYLE_PROP_BORDER = props.CB_STYLE_PROP_BORDER, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_CONTENT_PROP_TEXTOPTION = props.CB_CONTENT_PROP_TEXTOPTION, CB_STYLE_PROP_TEXT = props.CB_STYLE_PROP_TEXT;
     var textSuffix = (_a = CB_CONTENT_PROP_TEXTOPTION === null || CB_CONTENT_PROP_TEXTOPTION === void 0 ? void 0 : CB_CONTENT_PROP_TEXTOPTION.CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX) !== null && _a !== void 0 ? _a : '';
     var textPrefix = (_b = CB_CONTENT_PROP_TEXTOPTION === null || CB_CONTENT_PROP_TEXTOPTION === void 0 ? void 0 : CB_CONTENT_PROP_TEXTOPTION.CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX) !== null && _b !== void 0 ? _b : '';
     var textFormat = (_c = CB_CONTENT_PROP_TEXTOPTION === null || CB_CONTENT_PROP_TEXTOPTION === void 0 ? void 0 : CB_CONTENT_PROP_TEXTOPTION.CB_CONTENT_PROP_TEXTOPTION_SPEC_FORMAT) !== null && _c !== void 0 ? _c : 'NONE';
@@ -63,15 +73,15 @@ function Button(props) {
         }
         return CB_CONTENT_PROP_CLINK_SPEC_SRC;
     };
-    var _g = (0, useCLINK_1.default)({
+    var _j = (0, useCLINK_1.default)({
         src: cLinkValue(),
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
         internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
-    }), onClickCLINK = _g.onClickCLINK, CLINKCursor = _g.CLINKCursor;
-    var _h = (0, Text_1.getTextStyles)(props.CB_STYLE_PROP_TEXT, device), btnTextStyle = _h.style, btnTextHoverStyle = _h.hoverStyle;
-    var _j = getBTNColorStyles(CB_STYLE_PROP_COLOR, device), btnColorStyle = _j.style, btnColorHoverStyle = _j.hoverStyle;
-    var _k = (0, util_1.parseProperties)(props, device), propsStyle = _k.style, propsHoverStyle = _k.hoverStyle, _l = _k.layout, paddingLeft = _l.paddingLeft, paddingRight = _l.paddingRight, paddingTop = _l.paddingTop, paddingBottom = _l.paddingBottom, layoutStyle = __rest(_l, ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]), effect = _k.effect;
+    }), onClickCLINK = _j.onClickCLINK, CLINKCursor = _j.CLINKCursor;
+    var _k = getTextStyles(props.CB_STYLE_PROP_TEXT, device), btnTextStyle = _k.style, btnTextHoverStyle = _k.hoverStyle;
+    var _l = getBTNColorStyles(CB_STYLE_PROP_COLOR, device), btnColorStyle = _l.style, btnColorHoverStyle = _l.hoverStyle;
+    var _m = (0, util_1.parseProperties)(props, device), propsStyle = _m.style, propsHoverStyle = _m.hoverStyle, _o = _m.layout, paddingLeft = _o.paddingLeft, paddingRight = _o.paddingRight, paddingTop = _o.paddingTop, paddingBottom = _o.paddingBottom, layoutStyle = __rest(_o, ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]), effect = _m.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     var googleFonts = (0, useGoogleFonts_1.getGoogleFontsFromTextSpecCode)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
     (0, useGoogleFonts_1.useGoogleFonts)({ fonts: googleFonts });
@@ -132,16 +142,42 @@ function Button(props) {
         }
         return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
     };
-    var _m = (0, react_1.useState)(false), isAnimating = _m[0], setIsAnimating = _m[1];
-    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)("div", __assign({ onAnimationEnd: function () {
-                        setIsAnimating(false);
-                    }, onAnimationStart: function () {
-                        setIsAnimating(true);
-                    }, style: __assign({ height: '100%', display: 'flex', paddingLeft: paddingLeft, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingTop: paddingTop, alignItems: "".concat(btnTextStyle.alignItems), overflowY: btnTextStyle.overflowY, scrollbarWidth: btnTextStyle.scrollbarWidth }, effectCssProperties) }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ onMouseLeave: function (e) {
+    var desktopHeightFitContent = (_d = CB_STYLE_PROP_TEXT === null || CB_STYLE_PROP_TEXT === void 0 ? void 0 : CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_FITCONTENT) !== null && _d !== void 0 ? _d : false;
+    var mobileHeightFitContent = (_e = CB_STYLE_PROP_TEXT === null || CB_STYLE_PROP_TEXT === void 0 ? void 0 : CB_STYLE_PROP_TEXT['CB_STYLE_PROP_TEXT_SPEC_FITCONTENT:MOBILE']) !== null && _e !== void 0 ? _e : desktopHeightFitContent;
+    var heightFitContent = device === 'MOBILE' ? mobileHeightFitContent : desktopHeightFitContent;
+    var isEditModeAndHeightFitContent = heightFitContent && mode === 'EDIT';
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var _p = (0, parseStylePropShadow_1.generateBoxShadow)(CB_STYLE_PROP_SHADOW, device), normalShadowStyle = _p.normalStyle, hoverShadowStyle = _p.hoverStyle;
+    var _q = extractBorderStyles(propsStyle), borderNormalStyle = _q.borderStyleProps, cleanedNormalStyle = _q.remainingStyle;
+    // hover 스타일 분리
+    var _r = extractBorderStyles(propsHoverStyle), borderHoverStyle = _r.borderStyleProps, cleanedHoverStyle = _r.remainingStyle;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), isEditModeAndHeightFitContent && (0, jsx_runtime_1.jsx)(S_HeightFitContentCover_1.S_HeightFitContentCover, { bottomText: t('str_10106') }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: { paddingLeft: paddingLeft, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingTop: paddingTop } }, { children: (0, jsx_runtime_1.jsx)(S_ShadowBox, __assign({ "$normalStyle": __assign(__assign(__assign({ height: '100%', display: 'flex', alignItems: "".concat(btnTextStyle.alignItems), overflowY: btnTextStyle.overflowY, scrollbarWidth: btnTextStyle.scrollbarWidth }, effectCssProperties), normalShadowStyle), borderNormalStyle), "$hoverStyle": __assign(__assign({}, hoverShadowStyle), borderHoverStyle) }, { children: (0, jsx_runtime_1.jsxs)(S_CB_Box_1.S_CB_Box, __assign({ onMouseLeave: function (e) {
                             e.currentTarget.classList.remove('hovered');
-                        }, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, overflowY: 'unset', scrollbarWidth: 'unset' }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: [textPrefix, textValue(), textSuffix] })) })) }))] }));
+                        }, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, btnTextStyle), cleanedNormalStyle), layoutStyle), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, overflowY: 'unset', scrollbarWidth: 'unset' }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), cleanedHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: [textPrefix, textValue(), textSuffix] })) })) }))] }));
+}
+function extractBorderStyles(style) {
+    var 
+    // 추출할 키들
+    borderTopLeftRadius = style.borderTopLeftRadius, borderTopRightRadius = style.borderTopRightRadius, borderBottomLeftRadius = style.borderBottomLeftRadius, borderBottomRightRadius = style.borderBottomRightRadius, borderStyle = style.borderStyle, borderWidth = style.borderWidth, borderColor = style.borderColor, 
+    // 나머지 모든 속성은 'rest'에 담김 (원본에서 제거된 효과)
+    rest = __rest(style, ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderStyle", "borderWidth", "borderColor"]);
+    // 추출된 Border 스타일 객체
+    var borderStyleProps = {
+        borderTopLeftRadius: borderTopLeftRadius,
+        borderTopRightRadius: borderTopRightRadius,
+        borderBottomLeftRadius: borderBottomLeftRadius,
+        borderBottomRightRadius: borderBottomRightRadius,
+        borderStyle: borderStyle,
+        borderWidth: borderWidth,
+        borderColor: borderColor,
+    };
+    return {
+        borderStyleProps: borderStyleProps,
+        remainingStyle: rest, // border가 제거된 나머지 스타일
+    };
 }
-function getBTNStyles(props, device) {
+var S_ShadowBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  &:hover {\n    ", "\n  }\n"], ["\n  ", "\n\n  &:hover {\n    ", "\n  }\n"])), function (props) { return props.$normalStyle; }, function (props) { return props.$hoverStyle; });
+function getTextStyles(props, device) {
     var availableSpecCodes = [
         'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE',
         'CB_STYLE_PROP_TEXT_SPEC_WEIGHT',
@@ -150,10 +186,20 @@ function getBTNStyles(props, device) {
         'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING',
         'CB_STYLE_PROP_TEXT_SPEC_COLOR',
         'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL',
-        'CB_STYLE_PROP_TEXT_SPEC_VERTICAL'
+        'CB_STYLE_PROP_TEXT_SPEC_VERTICAL',
+        'CB_STYLE_PROP_TEXT_SPEC_FITCONTENT',
+        'CB_STYLE_PROP_TEXT_SPEC_SCROLLCONTENTS',
+        'CB_STYLE_PROP_TEXT_SPEC_SCROLLBAR'
     ];
-    return (0, newUtils_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'TEXT' });
+    return (0, newUtils_1.parseStyleTextToCSSProp)({
+        availableSpecCodes: availableSpecCodes,
+        props: props,
+        device: device,
+        propKey: 'TEXT',
+        cbCode: types_1.CB_ALL_CODES.CB_BTN
+    });
 }
+exports.getTextStyles = getTextStyles;
 function getBTNColorStyles(props, device) {
     var availableSpecCodes = [
         'CB_STYLE_PROP_COLOR_SPEC_ANGLE',
@@ -168,3 +214,4 @@ function getBTNColorStyles(props, device) {
     return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'COLOR', device: device });
 }
 exports.default = Button;
+var templateObject_1;

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

@@ -21,6 +21,7 @@ var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
+var types_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/types");
 var hooks_1 = require("../../../../hooks");
 var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts");
 var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));
@@ -34,10 +35,10 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 var textSpecFormatOptions_1 = require("./textSpecFormatOptions");
 function Text(props) {
-    var _a, _b, _c, _d;
-    var _e = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _e.device, mode = _e.mode;
+    var _a, _b, _c, _d, _e;
+    var _f = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _f.device, mode = _f.mode;
     var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
-    var index = props.index, _f = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _f.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _f.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _f.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _f.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _f.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _f.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, _g = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _g.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _g.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA, CB_CONTENT_PROP_TEXTOPTION = props.CB_CONTENT_PROP_TEXTOPTION, CB_STYLE_PROP_TEXT = props.CB_STYLE_PROP_TEXT;
+    var index = props.index, _g = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _g.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _g.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _g.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _g.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _g.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _g.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, _h = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _h.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _h.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA, CB_CONTENT_PROP_TEXTOPTION = props.CB_CONTENT_PROP_TEXTOPTION, CB_STYLE_PROP_TEXT = props.CB_STYLE_PROP_TEXT;
     // const {
     //   CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX,
     //   CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX,
@@ -50,7 +51,9 @@ function Text(props) {
     var textSuffix = (_a = CB_CONTENT_PROP_TEXTOPTION === null || CB_CONTENT_PROP_TEXTOPTION === void 0 ? void 0 : CB_CONTENT_PROP_TEXTOPTION.CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX) !== null && _a !== void 0 ? _a : '';
     var textPrefix = (_b = CB_CONTENT_PROP_TEXTOPTION === null || CB_CONTENT_PROP_TEXTOPTION === void 0 ? void 0 : CB_CONTENT_PROP_TEXTOPTION.CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX) !== null && _b !== void 0 ? _b : '';
     var textFormat = (_c = CB_CONTENT_PROP_TEXTOPTION === null || CB_CONTENT_PROP_TEXTOPTION === void 0 ? void 0 : CB_CONTENT_PROP_TEXTOPTION.CB_CONTENT_PROP_TEXTOPTION_SPEC_FORMAT) !== null && _c !== void 0 ? _c : 'NONE';
-    var heightFitContent = (_d = CB_STYLE_PROP_TEXT === null || CB_STYLE_PROP_TEXT === void 0 ? void 0 : CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_FITCONTENT) !== null && _d !== void 0 ? _d : false;
+    var desktopHeightFitContent = (_d = CB_STYLE_PROP_TEXT === null || CB_STYLE_PROP_TEXT === void 0 ? void 0 : CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_FITCONTENT) !== null && _d !== void 0 ? _d : true;
+    var mobileHeightFitContent = (_e = CB_STYLE_PROP_TEXT === null || CB_STYLE_PROP_TEXT === void 0 ? void 0 : CB_STYLE_PROP_TEXT['CB_STYLE_PROP_TEXT_SPEC_FITCONTENT:MOBILE']) !== null && _e !== void 0 ? _e : desktopHeightFitContent;
+    var heightFitContent = device === 'MOBILE' ? mobileHeightFitContent : desktopHeightFitContent;
     var cLinkValue = function () {
         if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
             CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
@@ -65,14 +68,14 @@ function Text(props) {
         }
         return CB_CONTENT_PROP_CLINK_SPEC_SRC;
     };
-    var _h = (0, useCLINK_1.default)({
+    var _j = (0, useCLINK_1.default)({
         src: cLinkValue(),
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
         internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
-    }), CLINKCursor = _h.CLINKCursor, onClickCLINK = _h.onClickCLINK;
-    var _j = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _j.style, textHoverStyle = _j.hoverStyle;
-    var _k = (0, util_1.parseProperties)(props, device), propsStyle = _k.style, propsHoverStyle = _k.hoverStyle, layoutStyle = _k.layout, effect = _k.effect;
+    }), CLINKCursor = _j.CLINKCursor, onClickCLINK = _j.onClickCLINK;
+    var _k = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _k.style, textHoverStyle = _k.hoverStyle;
+    var _l = (0, util_1.parseProperties)(props, device), propsStyle = _l.style, propsHoverStyle = _l.hoverStyle, layoutStyle = _l.layout, effect = _l.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     var isEditModeAndHeightFitContent = heightFitContent && mode === 'EDIT';
     var googleFonts = (0, getGoogleFonts_1.getGoogleFontsFromTextSpecCode)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
@@ -166,6 +169,12 @@ function getTextStyles(props, device) {
         'CB_STYLE_PROP_TEXT_SPEC_SCROLLCONTENTS',
         'CB_STYLE_PROP_TEXT_SPEC_SCROLLBAR'
     ];
-    return (0, textUtil_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'TEXT' });
+    return (0, textUtil_1.parseStyleTextToCSSProp)({
+        availableSpecCodes: availableSpecCodes,
+        props: props,
+        device: device,
+        propKey: 'TEXT',
+        cbCode: types_1.CB_ALL_CODES.CB_TEXT
+    });
 }
 exports.getTextStyles = getTextStyles;

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.d.ts

@@ -1,6 +1,7 @@
+import { CB_ALL_CODES } from '../types';
 import type { Device } from '../util/types';
 import type { CSSProperties } from 'styled-components';
-export declare function parseStyleTextToCSSProp<T>({ availableSpecCodes, props, propKey, device }: ParseStyleTextProps<T>): {
+export declare function parseStyleTextToCSSProp<T>({ availableSpecCodes, props, propKey, device, cbCode }: ParseStyleTextProps<T>): {
     style: CSSProperties;
     hoverStyle: CSSProperties;
 };
@@ -9,6 +10,7 @@ type ParseStyleTextProps<T> = {
     props: T;
     propKey: 'TEXT';
     device: Device;
+    cbCode: CB_ALL_CODES.CB_BTN | CB_ALL_CODES.CB_TEXT;
 };
 export declare function getTextCSSPropKey(key: string, cbName: 'TEXT'): "" | "color" | "letterSpacing" | "fontWeight" | "fontFamily" | "lineHeight" | "fontSize" | "HORIZONTAL" | "alignItems" | "overflowY" | "scrollbarWidth" | "overflow";
 export {};

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js

@@ -12,8 +12,10 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTextCSSPropKey = exports.parseStyleTextToCSSProp = void 0;
+var types_1 = require("../types");
 function parseStyleTextToCSSProp(_a) {
-    var availableSpecCodes = _a.availableSpecCodes, props = _a.props, propKey = _a.propKey, device = _a.device;
+    var _b, _c;
+    var availableSpecCodes = _a.availableSpecCodes, props = _a.props, propKey = _a.propKey, device = _a.device, cbCode = _a.cbCode;
     var styleProps = availableSpecCodes.reduce(function (acc, currentKey) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         var stringifiedKey = currentKey.toString();
@@ -134,10 +136,11 @@ function parseStyleTextToCSSProp(_a) {
         style: {},
         hoverStyle: {}
     });
-    var fitContentKey = device === 'DESKTOP'
-        ? 'CB_STYLE_PROP_TEXT_SPEC_FITCONTENT'
-        : 'CB_STYLE_PROP_TEXT_SPEC_FITCONTENT:MOBILE';
-    var fitContentValue = props[fitContentKey];
+    // const cbCode = props
+    var defaultValue = cbCode === types_1.CB_ALL_CODES.CB_BTN ? false : true;
+    var desktopValue = (_b = props['CB_STYLE_PROP_TEXT_SPEC_FITCONTENT']) !== null && _b !== void 0 ? _b : defaultValue;
+    var mobileValue = (_c = props['CB_STYLE_PROP_TEXT_SPEC_FITCONTENT:MOBILE']) !== null && _c !== void 0 ? _c : desktopValue;
+    var fitContentValue = device === 'DESKTOP' ? desktopValue : mobileValue;
     if (fitContentValue === true) {
         styleProps.style.overflowY = 'hidden';
     }

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parsePlacement.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.parsePlacement = exports.getHeightFitContent = void 0;
 var types_1 = require("../types");
 function getHeightFitContent(cb) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     if (cb.componentBlockCode === types_1.CB_ALL_CODES.CB_TEXT) {
         var desktop = (_a = cb.jsonProperties.data.CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_FITCONTENT) !== null && _a !== void 0 ? _a : true;
         var mobile = (_b = cb.jsonProperties.data.CB_STYLE_PROP_TEXT['CB_STYLE_PROP_TEXT_SPEC_FITCONTENT:MOBILE']) !== null && _b !== void 0 ? _b : desktop;
@@ -21,9 +21,17 @@ function getHeightFitContent(cb) {
             mobile: mobile
         };
     }
+    if (cb.componentBlockCode === types_1.CB_ALL_CODES.CB_BTN) {
+        var desktop = (_c = cb.jsonProperties.data.CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_FITCONTENT) !== null && _c !== void 0 ? _c : false;
+        var mobile = (_d = cb.jsonProperties.data.CB_STYLE_PROP_TEXT['CB_STYLE_PROP_TEXT_SPEC_FITCONTENT:MOBILE']) !== null && _d !== void 0 ? _d : desktop;
+        return {
+            desktop: desktop,
+            mobile: mobile
+        };
+    }
     if (cb.componentBlockCode === types_1.CB_ALL_CODES.CB_LIST) {
-        var desktop = (_c = cb.jsonProperties.data.CB_STYLE_PROP_CONTENTSLISTDESIGN.CB_STYLE_PROP_CONTENTSLISTDESIGN_SPEC_ITEMHEIGHTFITCONTENT) !== null && _c !== void 0 ? _c : true;
-        var mobile = (_d = cb.jsonProperties.data.CB_STYLE_PROP_CONTENTSLISTDESIGN['CB_STYLE_PROP_CONTENTSLISTDESIGN_SPEC_ITEMHEIGHTFITCONTENT:MOBILE']) !== null && _d !== void 0 ? _d : desktop;
+        var desktop = (_e = cb.jsonProperties.data.CB_STYLE_PROP_CONTENTSLISTDESIGN.CB_STYLE_PROP_CONTENTSLISTDESIGN_SPEC_ITEMHEIGHTFITCONTENT) !== null && _e !== void 0 ? _e : true;
+        var mobile = (_f = cb.jsonProperties.data.CB_STYLE_PROP_CONTENTSLISTDESIGN['CB_STYLE_PROP_CONTENTSLISTDESIGN_SPEC_ITEMHEIGHTFITCONTENT:MOBILE']) !== null && _f !== void 0 ? _f : desktop;
         return {
             desktop: desktop,
             mobile: mobile

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropShadow.d.ts

@@ -1,5 +1,6 @@
 import type { Device, ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX, StyleAndHoverStyle } from '../types';
 import type { CB_STYLE_PROP_KEYS } from './types';
+import type { CSSProperties } from 'styled-components';
 export type NAMED_CB_STYLE_SHADOW_PROPS = {
     name: CB_STYLE_PROP_KEYS.CB_STYLE_PROP_SHADOW;
     specs: CB_STYLE_PROP_SHADOW_SPECS;
@@ -37,3 +38,8 @@ export type CB_STYLE_PROP_SHADOW_SPECS = CB_STYLE_PROP_SHADOW_SPECS_BASE & {
     'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE': NUMBER_INTEGER | null | undefined;
     'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
 };
+export interface ShadowStyles {
+    normalStyle: CSSProperties;
+    hoverStyle: CSSProperties;
+}
+export declare function generateBoxShadow(specs: CB_STYLE_PROP_SHADOW_SPECS, device: Device): ShadowStyles;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropShadow.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateBoxShadow = void 0;
 var AVAILABLE_SPECS = [
     'CB_STYLE_PROP_SHADOW_SPEC_TYPE',
     'CB_STYLE_PROP_SHADOW_SPEC_COLOR',
@@ -56,3 +57,56 @@ function valueGenerator(valueSet) {
             return '';
     }
 }
+var hex8ToRgba = function (hex, opacityFactor) {
+    var cleanHex = hex.replace('#', '');
+    if (cleanHex.length !== 8)
+        return hex; // Fallback if invalid
+    var r = parseInt(cleanHex.substring(0, 2), 16);
+    var g = parseInt(cleanHex.substring(2, 4), 16);
+    var b = parseInt(cleanHex.substring(4, 6), 16);
+    var aHex = parseInt(cleanHex.substring(6, 8), 16);
+    var alpha = (aHex / 255) * (opacityFactor / 100);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha.toFixed(3), ")");
+};
+function generateBoxShadow(specs, device) {
+    var resolve = function (baseKey, isHover) {
+        var _a, _b, _c;
+        var mobileKey = "".concat(baseKey, ":MOBILE");
+        var hoverKey = "".concat(baseKey, ":HOVER");
+        var mobileHoverKey = "".concat(baseKey, ":MOBILE:HOVER");
+        var baseVal = specs[baseKey];
+        if (device === 'MOBILE') {
+            var mobileVal = (_a = specs[mobileKey]) !== null && _a !== void 0 ? _a : baseVal;
+            if (isHover) {
+                return (_b = specs[mobileHoverKey]) !== null && _b !== void 0 ? _b : mobileVal;
+            }
+            return mobileVal;
+        }
+        // DESKTOP
+        if (isHover) {
+            return (_c = specs[hoverKey]) !== null && _c !== void 0 ? _c : baseVal;
+        }
+        return baseVal;
+    };
+    var buildShadowString = function (isHover) {
+        var type = resolve('CB_STYLE_PROP_SHADOW_SPEC_TYPE', isHover);
+        var colorHex = resolve('CB_STYLE_PROP_SHADOW_SPEC_COLOR', isHover);
+        var x = resolve('CB_STYLE_PROP_SHADOW_SPEC_X', isHover);
+        var y = resolve('CB_STYLE_PROP_SHADOW_SPEC_Y', isHover);
+        var blur = resolve('CB_STYLE_PROP_SHADOW_SPEC_BLUR', isHover);
+        var spread = resolve('CB_STYLE_PROP_SHADOW_SPEC_SPREAD', isHover);
+        var opacity = resolve('CB_STYLE_PROP_SHADOW_SPEC_OPACITY', isHover);
+        var finalColor = hex8ToRgba(colorHex, opacity);
+        var insetStr = type && type.toLowerCase() === 'inset' ? 'inset ' : '';
+        return "".concat(insetStr).concat(x, "px ").concat(y, "px ").concat(blur, "px ").concat(spread, "px ").concat(finalColor);
+    };
+    return {
+        normalStyle: {
+            boxShadow: buildShadowString(false)
+        },
+        hoverStyle: {
+            boxShadow: buildShadowString(true)
+        }
+    };
+}
+exports.generateBoxShadow = generateBoxShadow;

package/package.json

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