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

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

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseSlideBannerStyleToCustomProgressbarProp = exports.parseSlideBannerStyleToCustomNavigationProp = exports.parseSlideBannerStyleToCustomPaginationProp = exports.parseSlideBannerStyleToSlideBannerCoreProp = exports.getCustomPaginationPropKey = exports.getCustomProgressbarPropKey = exports.getCustomNavigationPropKey = exports.getSlideBannerCorePropKey = void 0;
+function getStyle(value) {
+    switch (value) {
+        case 'DESIGN1':
+            return undefined;
+        case 'DESIGN2': {
+            return undefined;
+        }
+        default: {
+            return undefined;
+        }
+    }
+}
+function getSlideBannerCorePropKey(key) {
+    var baseKey = key.split(':')[0];
+    var keyMapping = {
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE: 'customStyle',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE: 'useAutoplay',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME: 'autoplay',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL: 'loop'
+    };
+    return keyMapping[baseKey] || null;
+}
+exports.getSlideBannerCorePropKey = getSlideBannerCorePropKey;
+function getCustomNavigationPropKey(key) {
+    var baseKey = key.split(':')[0];
+    var keyMapping = {
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE: 'prevBtnType',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION: 'prevBtnLocation',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE: 'prevBtnSize',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR: 'prevBtnPrimaryColor',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR: 'prevBtnSecondaryColor',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE: 'nextBtnType',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNLOCATION: 'nextBtnLocation',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE: 'nextBtnSize',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR: 'nextBtnPrimaryColor',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR: 'nextBtnSecondaryColor'
+    };
+    return keyMapping[baseKey] || null;
+}
+exports.getCustomNavigationPropKey = getCustomNavigationPropKey;
+function getCustomProgressbarPropKey(key) {
+    var baseKey = key.split(':')[0];
+    var keyMapping = {
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR: 'type',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE: 'size',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR: 'primaryColor',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR: 'secondaryColor'
+    };
+    return keyMapping[baseKey] || null;
+}
+exports.getCustomProgressbarPropKey = getCustomProgressbarPropKey;
+function getCustomPaginationPropKey(key) {
+    var baseKey = key.split(':')[0];
+    var keyMapping = {
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE: 'type',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE: 'size',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION: 'location',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR: 'primaryColor',
+        CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR: 'secondaryColor'
+    };
+    return keyMapping[baseKey] || null;
+}
+exports.getCustomPaginationPropKey = getCustomPaginationPropKey;
+var transformValue = function (key, value) {
+    var _a, _b, _c, _d;
+    switch (key) {
+        case 'customStyle':
+            return _a = {}, _a[key] = getStyle(value), _a;
+        case 'useAutoplay':
+            return _b = {}, _b[key] = value === true, _b;
+        case 'autoplay':
+            return {
+                autoplay: {
+                    delay: value * 1000,
+                    disableOnInteraction: false,
+                    pauseOnMouseEnter: true
+                }
+            };
+        case 'loop':
+            return _c = {}, _c[key] = value, _c;
+        default:
+            return _d = {}, _d[key] = value, _d;
+    }
+};
+function parseSlideBannerStyleToSlideBannerCoreProp(_a) {
+    var props = _a.props, device = _a.device;
+    var normalStyle = {};
+    var hoverStyle = {};
+    var baseKeys = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
+    baseKeys.forEach(function (baseKey) {
+        var customNavKey = getSlideBannerCorePropKey(baseKey);
+        if (customNavKey) {
+            var deviceKey = device === 'DESKTOP' ? baseKey : "".concat(baseKey, ":MOBILE");
+            var hoverKey = "".concat(deviceKey, ":HOVER");
+            var normalValue = props[deviceKey];
+            var hoverValue = props[hoverKey];
+            if (normalValue !== undefined) {
+                Object.assign(normalStyle, transformValue(customNavKey, normalValue));
+            }
+            Object.assign(hoverStyle, transformValue(customNavKey, hoverValue !== null && hoverValue !== void 0 ? hoverValue : normalValue));
+        }
+    });
+    return {
+        normalStyle: normalStyle,
+        hoverStyle: hoverStyle
+    };
+}
+exports.parseSlideBannerStyleToSlideBannerCoreProp = parseSlideBannerStyleToSlideBannerCoreProp;
+function parseSlideBannerStyleToCustomPaginationProp(_a) {
+    var props = _a.props, device = _a.device;
+    var normalStyle = {};
+    var hoverStyle = {};
+    var baseKeys = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
+    baseKeys.forEach(function (baseKey) {
+        var _a, _b;
+        var customNavKey = getCustomPaginationPropKey(baseKey);
+        if (customNavKey) {
+            var deviceKey = device === 'DESKTOP' ? baseKey : "".concat(baseKey, ":MOBILE");
+            var hoverKey = "".concat(deviceKey, ":HOVER");
+            var normalValue = props[deviceKey];
+            var hoverValue = props[hoverKey];
+            if (normalValue !== undefined) {
+                Object.assign(normalStyle, (_a = {}, _a[customNavKey] = normalValue, _a));
+            }
+            Object.assign(hoverStyle, (_b = {}, _b[customNavKey] = hoverValue !== null && hoverValue !== void 0 ? hoverValue : normalValue, _b));
+        }
+    });
+    return {
+        normalStyle: normalStyle,
+        hoverStyle: hoverStyle
+    };
+}
+exports.parseSlideBannerStyleToCustomPaginationProp = parseSlideBannerStyleToCustomPaginationProp;
+function parseSlideBannerStyleToCustomNavigationProp(_a) {
+    var props = _a.props, device = _a.device;
+    var normalStyle = {};
+    var hoverStyle = {};
+    var baseKeys = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
+    baseKeys.forEach(function (baseKey) {
+        var _a, _b;
+        var customNavKey = getCustomNavigationPropKey(baseKey);
+        if (customNavKey) {
+            var deviceKey = device === 'DESKTOP' ? baseKey : "".concat(baseKey, ":MOBILE");
+            var hoverKey = "".concat(deviceKey, ":HOVER");
+            var normalValue = props[deviceKey];
+            var hoverValue = props[hoverKey];
+            if (normalValue !== undefined) {
+                Object.assign(normalStyle, (_a = {}, _a[customNavKey] = normalValue, _a));
+            }
+            Object.assign(hoverStyle, (_b = {}, _b[customNavKey] = hoverValue !== null && hoverValue !== void 0 ? hoverValue : normalValue, _b));
+        }
+    });
+    return {
+        normalStyle: normalStyle,
+        hoverStyle: hoverStyle
+    };
+}
+exports.parseSlideBannerStyleToCustomNavigationProp = parseSlideBannerStyleToCustomNavigationProp;
+function parseSlideBannerStyleToCustomProgressbarProp(_a) {
+    var props = _a.props, device = _a.device;
+    var normalStyle = {};
+    var hoverStyle = {};
+    var baseKeys = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
+    baseKeys.forEach(function (baseKey) {
+        var _a, _b;
+        var customNavKey = getCustomProgressbarPropKey(baseKey);
+        if (customNavKey) {
+            var deviceKey = device === 'DESKTOP' ? baseKey : "".concat(baseKey, ":MOBILE");
+            var hoverKey = "".concat(deviceKey, ":HOVER");
+            var normalValue = props[deviceKey];
+            var hoverValue = props[hoverKey];
+            if (normalValue !== undefined) {
+                Object.assign(normalStyle, (_a = {}, _a[customNavKey] = normalValue, _a));
+            }
+            Object.assign(hoverStyle, (_b = {}, _b[customNavKey] = hoverValue !== null && hoverValue !== void 0 ? hoverValue : normalValue, _b));
+        }
+    });
+    return {
+        normalStyle: normalStyle,
+        hoverStyle: hoverStyle
+    };
+}
+exports.parseSlideBannerStyleToCustomProgressbarProp = parseSlideBannerStyleToCustomProgressbarProp;

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

@@ -0,0 +1,163 @@
+import type { NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { SwiperProps } from 'swiper/react';
+export type SlideBannerPropsKeys = keyof CB_STYLE_PROP_SLIDEBANNER_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_SLIDEBANNER_SPEC_STYLE_TYPE = 'DESIGN1' | 'DESIGN2';
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL_TYPE = boolean;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16';
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION_TYPE = OUTSET_POSTIION | INSET_POSTIION;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR = string;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR = string;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | 'DESIGN18' | 'DESIGN19' | 'DESIGN20' | 'DESIGN21' | 'DESIGN22' | 'DESIGN23' | 'DESIGN24' | 'DESIGN25' | 'DESIGN26' | 'DESIGN27' | 'DESIGN28' | 'DESIGN29' | 'DESIGN30' | 'DESIGN31' | 'DESIGN32' | 'DESIGN33' | 'DESIGN34' | 'DESIGN35' | 'DESIGN36' | 'DESIGN37' | 'DESIGN38' | 'DESIGN39' | 'DESIGN40' | 'DESIGN41' | 'DESIGN42' | 'DESIGN43' | 'DESIGN44' | 'DESIGN45' | 'DESIGN46' | 'DESIGN47' | 'DESIGN48' | 'DESIGN49' | 'DESIGN50' | 'DESIGN51' | 'DESIGN52' | 'DESIGN53' | 'DESIGN54' | 'DESIGN55' | 'DESIGN56' | 'DESIGN57' | 'DESIGN58' | 'DESIGN59' | 'DESIGN60' | 'DESIGN61' | 'DESIGN62' | 'DESIGN63' | 'DESIGN64' | 'DESIGN65' | 'DESIGN66' | 'DESIGN67' | 'DESIGN68' | 'DESIGN69' | 'DESIGN70' | 'DESIGN71' | 'DESIGN72' | 'DESIGN73' | 'DESIGN74' | 'DESIGN75' | 'DESIGN76' | 'DESIGN77' | 'DESIGN78' | 'DESIGN79' | 'DESIGN80' | 'DESIGN81' | 'DESIGN82' | 'DESIGN83' | 'DESIGN84' | 'DESIGN85' | 'DESIGN86' | 'DESIGN87' | 'DESIGN88' | 'DESIGN89' | 'DESIGN90' | 'DESIGN91' | 'DESIGN92' | 'DESIGN93' | 'DESIGN94' | 'DESIGN95' | 'DESIGN96' | 'DESIGN97' | 'DESIGN98' | 'DESIGN99' | 'DESIGN100';
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION_TYPE = OUTSET_POSTIION | INSET_POSTIION;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR = string;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR = string;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | 'DESIGN18' | 'DESIGN19' | 'DESIGN20' | 'DESIGN21' | 'DESIGN22' | 'DESIGN23' | 'DESIGN24' | 'DESIGN25' | 'DESIGN26' | 'DESIGN27' | 'DESIGN28' | 'DESIGN29' | 'DESIGN30' | 'DESIGN31' | 'DESIGN32' | 'DESIGN33' | 'DESIGN34' | 'DESIGN35' | 'DESIGN36' | 'DESIGN37' | 'DESIGN38' | 'DESIGN39' | 'DESIGN40' | 'DESIGN41' | 'DESIGN42' | 'DESIGN43' | 'DESIGN44' | 'DESIGN45' | 'DESIGN46' | 'DESIGN47' | 'DESIGN48' | 'DESIGN49' | 'DESIGN50' | 'DESIGN51' | 'DESIGN52' | 'DESIGN53' | 'DESIGN54' | 'DESIGN55' | 'DESIGN56' | 'DESIGN57' | 'DESIGN58' | 'DESIGN59' | 'DESIGN60' | 'DESIGN61' | 'DESIGN62' | 'DESIGN63' | 'DESIGN64' | 'DESIGN65' | 'DESIGN66' | 'DESIGN67' | 'DESIGN68' | 'DESIGN69' | 'DESIGN70' | 'DESIGN71' | 'DESIGN72' | 'DESIGN73' | 'DESIGN74' | 'DESIGN75' | 'DESIGN76' | 'DESIGN77' | 'DESIGN78' | 'DESIGN79' | 'DESIGN80' | 'DESIGN81' | 'DESIGN82' | 'DESIGN83' | 'DESIGN84' | 'DESIGN85' | 'DESIGN86' | 'DESIGN87' | 'DESIGN88' | 'DESIGN89' | 'DESIGN90' | 'DESIGN91' | 'DESIGN92' | 'DESIGN93' | 'DESIGN94' | 'DESIGN95' | 'DESIGN96' | 'DESIGN97' | 'DESIGN98' | 'DESIGN99' | 'DESIGN100';
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC__NEXTBTNLOCATION_TYPE = OUTSET_POSTIION | INSET_POSTIION;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR = string;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR = string;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8';
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR = string;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR = string;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE_TYPE = boolean;
+export type CB_STYLE_PROP_SLIDEBANNER_SPECS_BASE = {
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE: CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE: CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION: CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE: CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE: CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNLOCATION: CB_STYLE_PROP_SLIDEBANNER_SPEC__NEXTBTNLOCATION_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE: CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE: CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE: CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME: NUMBER_INTEGER;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL: CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL_TYPE;
+};
+export type CB_STYLE_PROP_SLIDEBANNER_SPECS = CB_STYLE_PROP_SLIDEBANNER_SPECS_BASE & {
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNLOCATION:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC__NEXTBTNLOCATION_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNLOCATION:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC__NEXTBTNLOCATION_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNLOCATION:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC__NEXTBTNLOCATION_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME:MOBILE': NUMBER_INTEGER;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME:MOBILE:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL_TYPE;
+};
+export interface CustomNavigationProps {
+    prevBtnDisabled?: boolean;
+    prevBtnType?: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
+    prevBtnLocation?: OUTSET_POSTIION | INSET_POSTIION;
+    prevBtnSize?: 'SMALL' | 'MEDIUM' | 'LARGE';
+    prevBtnPrimaryColor?: string;
+    prevBtnSecondaryColor?: string;
+    nextBtnDisabled?: boolean;
+    nextBtnType?: CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE;
+    nextBtnLocation?: OUTSET_POSTIION | INSET_POSTIION;
+    nextBtnSize?: 'SMALL' | 'MEDIUM' | 'LARGE';
+    nextBtnPrimaryColor?: string;
+    nextBtnSecondaryColor?: string;
+    onPrevBtnClick?: () => void;
+    onNextBtnClick?: () => void;
+}
+export interface CustomProgressbarProps {
+    type?: CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR_TYPE;
+    size?: 'SMALL' | 'MEDIUM' | 'LARGE';
+    primaryColor?: string;
+    secondaryColor?: string;
+}
+export interface CustomPaginationProps {
+    current?: number;
+    total?: number;
+    type?: CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE_TYPE;
+    location?: OUTSET_POSTIION | INSET_POSTIION;
+    size?: 'SMALL' | 'MEDIUM' | 'LARGE';
+    primaryColor?: string;
+    secondaryColor?: string;
+}
+export type CoreSlideBannerProps = {
+    scrollbar?: SwiperProps['scrollbar'];
+    slidesPerGroup?: SwiperProps['slidesPerGroup'];
+    spaceBetween?: SwiperProps['spaceBetween'];
+    freeMode?: SwiperProps['freeMode'];
+    autoplay?: SwiperProps['autoplay'];
+    useAutoplay?: boolean;
+    loop?: SwiperProps['loop'];
+};

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

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

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { CB_TEXT_PROPERTIES_TYPE, IndexForIntersection } from '../../../../util/types';
 type Props = CB_TEXT_PROPERTIES_TYPE & IndexForIntersection;
-declare function Text(props: Props): JSX.Element;
-export default Text;
+export default function Text(props: Props): JSX.Element;
+export {};

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

@@ -18,6 +18,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
 var hooks_1 = require("../../../../hooks");
 var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts");
 var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));
@@ -27,17 +28,33 @@ var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverB
 var S_CB_Box_1 = require("../components/S_CB_Box");
 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 = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var index = props.index, _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_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
-    var _c = (0, useCLINK_1.default)({
-        src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
+    var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
+    var index = props.index, _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_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, _c = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA, CB_CONTENT_PROP_TEXT_SPEC_SUFFIX = _c.CB_CONTENT_PROP_TEXT_SPEC_SUFFIX, CB_CONTENT_PROP_TEXT_SPEC_PREFIX = _c.CB_CONTENT_PROP_TEXT_SPEC_PREFIX;
+    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 _d = (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 = _c.CLINKCursor, onClickCLINK = _c.onClickCLINK;
-    var _d = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _d.style, textHoverStyle = _d.hoverStyle;
-    var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
+    }), CLINKCursor = _d.CLINKCursor, onClickCLINK = _d.onClickCLINK;
+    var _e = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _e.style, textHoverStyle = _e.hoverStyle;
+    var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, layoutStyle = _f.layout, effect = _f.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     var googleFonts = (0, getGoogleFonts_1.getGoogleFontsFromTextSpecCode)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
     (0, useGoogleFonts_1.default)({ fonts: googleFonts });
@@ -56,6 +73,20 @@ function Text(props) {
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
     var textValue = function () {
+        var FORMATOPTION = props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_FORMAT;
+        var formatOption = textSpecFormatOptions_1.TEXT_SPEC_FORMAT_OPRIONS[FORMATOPTION];
+        var isDataConnected = CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DATA' ||
+            CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DELEGATEDDATA';
+        if (isDataConnected) {
+            if (queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData) {
+                var value = queryContext.queryData[CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA];
+                if (formatOption) {
+                    return formatOption.formatter(value);
+                }
+                return value;
+            }
+            return 'ERROR: data connected but no data';
+        }
         if (device === 'MOBILE' &&
             mode !== 'EDIT' &&
             props.CB_CONTENT_PROP_VISIBILITY.CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB === false) {
@@ -69,22 +100,42 @@ function Text(props) {
         if (device === 'MOBILE') {
             var value = props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXTMOBILEALTERNATIVE;
             if (value === null || value === undefined) {
+                if (formatOption) {
+                    return formatOption.formatter(props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT);
+                }
                 return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
             }
+            if (formatOption) {
+                return formatOption.formatter(value);
+            }
             return value;
         }
+        if (formatOption) {
+            return formatOption.formatter(props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT);
+        }
         return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
     };
+    var getTruncatedText = function (text) {
+        var maxLength = props.CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_ELLIPSIS;
+        if (!maxLength) {
+            return text;
+        }
+        if (text.length > maxLength) {
+            return "".concat(text.slice(0, maxLength), "...");
+        }
+        return text;
+    };
     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({ style: {
                     height: '100%',
                     display: 'flex',
                     alignItems: textStyle.alignItems
-                }, ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ onMouseEnter: function (e) {
+                }, ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_Box_1.S_CB_Box, __assign({ onMouseEnter: function (e) {
                         e.currentTarget.classList.add('hovered');
                     }, onMouseLeave: function (e) {
                         e.currentTarget.classList.remove('hovered');
-                    }, className: "cb-layout-box cb-text", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, height: 'fit-content', minWidth: "calc(2ch + ".concat(layoutStyle.paddingLeft, " + ").concat(layoutStyle.paddingRight, ")") }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: textValue() })) }))] }));
+                    }, className: "cb-layout-box cb-text", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, height: 'fit-content', minWidth: "calc(2ch + ".concat(layoutStyle.paddingLeft, " + ").concat(layoutStyle.paddingRight, ")") }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: [CB_CONTENT_PROP_TEXT_SPEC_PREFIX, textValue() === 'ERROR' ? 'EDITOR:FALLBACK_TEXT' : getTruncatedText(textValue()), CB_CONTENT_PROP_TEXT_SPEC_SUFFIX] })) }))] }));
 }
+exports.default = Text;
 function getTextStyles(props, device) {
     var availableSpecCodes = [
         'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE',
@@ -98,4 +149,3 @@ function getTextStyles(props, device) {
     ];
     return (0, textUtil_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'TEXT' });
 }
-exports.default = Text;

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

@@ -0,0 +1,7 @@
+type Formatter = (value: string) => string;
+export declare const TEXT_SPEC_FORMAT_OPRIONS: Record<string, {
+    name: string;
+    description: string;
+    formatter: Formatter;
+} | undefined>;
+export {};