pds-dev-kit-web 2.2.310 → 2.2.312

package/dist/src/common/assets/icons/line/SocialLine.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const SocialLine: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default SocialLine;

package/dist/src/common/assets/icons/line/SocialLine.js

@@ -0,0 +1,30 @@
+"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 SocialLine = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M19.914 9.003a6.741 6.741 0 0 1-.764 2.2c-.179.324-1.056 1.558-1.325 1.884-1.478 1.788-3.953 3.851-8.092 5.857a.545.545 0 0 1-.78-.552l.21-1.885a.545.545 0 0 0-.483-.604C3.781 15.388 0 12.04 0 7.986 0 3.576 4.476 0 9.997 0c5.366 0 9.744 3.377 9.987 7.615.007.123.026.516.01.78-.011.16-.034.365-.08.608zm-15.414.6V6.24a.512.512 0 1 0-1.023 0v3.877c0 .284.23.514.512.514h2.045a.512.512 0 0 0 0-1.027H4.5zm3.154 1.028a.4.4 0 0 0 .4-.401V6.128a.4.4 0 0 0-.4-.402h-.223a.4.4 0 0 0-.4.402v4.102a.4.4 0 0 0 .4.4h.223zm4.133-4.391v2.369s-2.042-2.676-2.074-2.71a.508.508 0 0 0-.4-.172.527.527 0 0 0-.492.534v3.856a.512.512 0 1 0 1.023 0V7.763s2.073 2.698 2.104 2.727c.09.086.211.14.346.14.284.003.516-.249.516-.534V6.24a.512.512 0 1 0-1.023 0zm4.858 0a.512.512 0 0 0-.512-.514h-2.045a.512.512 0 0 0-.511.514v3.877c0 .284.229.514.511.514h2.045a.512.512 0 0 0 0-1.027H14.6v-.912h1.534a.512.512 0 0 0 0-1.027H14.6v-.912h1.534c.283 0 .512-.23.512-.513z" }) })));
+};
+exports.default = SocialLine;

package/dist/src/common/assets/icons/line/SocialMeta.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const SocialMeta: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default SocialMeta;

package/dist/src/common/assets/icons/line/SocialMeta.js

@@ -0,0 +1,30 @@
+"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 SocialMeta = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V1.14c-.328-.047-1.46-.14-2.774-.14-2.766 0-4.726 1.677-4.726 4.86v3.14H8v4h2.274V22h3.726v-8.5z" }) })));
+};
+exports.default = SocialMeta;

package/dist/src/common/assets/icons/line/SocialX.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const SocialX: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default SocialX;

package/dist/src/common/assets/icons/line/SocialX.js

@@ -0,0 +1,30 @@
+"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 SocialX = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) })));
+};
+exports.default = SocialX;

package/dist/src/common/assets/icons/line/index.d.ts

@@ -234,6 +234,9 @@ declare const lineIcons: {
     readonly ic_site: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_slideBanner: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_slider: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_social_line: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_social_meta: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_social_x: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_sort: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_speaker_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_speaker_wave_1: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/line/index.js

@@ -271,6 +271,9 @@ var Shoppingbag_1 = __importDefault(require("./Shoppingbag"));
 var Site_1 = __importDefault(require("./Site"));
 var SlideBanner_1 = __importDefault(require("./SlideBanner"));
 var Slider_1 = __importDefault(require("./Slider"));
+var SocialLine_1 = __importDefault(require("./SocialLine"));
+var SocialMeta_1 = __importDefault(require("./SocialMeta"));
+var SocialX_1 = __importDefault(require("./SocialX"));
 var Sort_1 = __importDefault(require("./Sort"));
 var SpeakerOff_1 = __importDefault(require("./SpeakerOff"));
 var SpeakerWave1_1 = __importDefault(require("./SpeakerWave1"));
@@ -577,6 +580,9 @@ var lineIcons = {
     ic_site: Site_1.default,
     ic_slideBanner: SlideBanner_1.default,
     ic_slider: Slider_1.default,
+    ic_social_line: SocialLine_1.default,
+    ic_social_meta: SocialMeta_1.default,
+    ic_social_x: SocialX_1.default,
     ic_sort: Sort_1.default,
     ic_speaker_off: SpeakerOff_1.default,
     ic_speaker_wave_1: SpeakerWave1_1.default,

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

@@ -173,9 +173,77 @@ function Button(props) {
     var _o = extractBorderStyles(propsStyle), borderNormalStyle = _o.borderStyleProps, cleanedNormalStyle = _o.remainingStyle;
     // hover 스타일 분리
     var _p = extractBorderStyles(propsHoverStyle), borderHoverStyle = _p.borderStyleProps, cleanedHoverStyle = _p.remainingStyle;
+    /**
+     * 텍스트가 Rich Text(HTML)인지 Plain Text인지 판별합니다.
+     * @param {string} text - 확인할 문자열
+     * @returns {boolean} - HTML 태그가 포함되어 있으면 true
+     */
+    var isRichText = function (text) {
+        if (typeof text !== 'string')
+            return false;
+        // HTML 태그를 찾는 정규 표현식
+        var htmlRegex = /<[a-z][\s\S]*>/i;
+        return htmlRegex.test(text);
+    };
+    function domstringToPlain(domstring, ellipsis, useEnter) {
+        var tempDivElement = document.createElement('div');
+        tempDivElement.innerHTML = domstring;
+        // 1. 제거하고 싶은 '비-텍스트' 태그들을 정의하고 모두 삭제합니다.
+        var tagsToRemove = ['iframe', 'img', 'video', 'audio', 'script', 'style', 'canvas', 'svg'];
+        tagsToRemove.forEach(function (tagName) {
+            var elements = tempDivElement.querySelectorAll(tagName);
+            elements.forEach(function (el) { return el.remove(); });
+        });
+        // 2. 텍스트 추출 (위에서 태그를 지웠으므로 순수 텍스트만 남음)
+        var plainText = tempDivElement.textContent || tempDivElement.innerText || '';
+        // 3. 공백 처리
+        var processedText = plainText.replace(/\s{2,}/gi, ' ');
+        // 4. 말줄임표 처리
+        if (ellipsis && processedText.length > ellipsis) {
+            return "".concat(processedText.slice(0, ellipsis), "...");
+        }
+        // 5. 줄바꿈 처리 로직
+        if (useEnter) {
+            // innerHTML에서 br과 p 태그를 변환하기 전에,
+            // 이미 1번 단계에서 이미지/이프레임 등이 제거된 상태의 innerHTML을 사용합니다.
+            processedText = tempDivElement.innerHTML
+                .replace(/<br\s*\/?>/gi, '\n')
+                .replace(/<\/p>/gi, '\n')
+                .replace(/&gt;/gi, '>')
+                .replace(/&lt;/gi, '<')
+                .replace(/&amp;/gi, '&')
+                .replace(/<p[^>]*>/gi, '')
+                .replace(/<\/?[^>]+(>|$)/g, ''); // 남은 모든 HTML 태그 제거 (정규식 추가)
+        }
+        else {
+            // 줄바꿈을 공백으로 치환하거나 <br>로 치환 (상황에 따라 선택)
+            processedText = processedText.replace(/\n/gi, ' ').trim();
+        }
+        return processedText;
+    }
+    var getTruncatedText = function (text) {
+        var _a;
+        if (!text || typeof text !== 'string') {
+            return text;
+        }
+        // const maxLength = props.CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_ELLIPSIS;
+        var maxLength = device === 'MOBILE'
+            ? (_a = props.CB_STYLE_PROP_TEXT['CB_STYLE_PROP_TEXT_SPEC_ELLIPSIS:MOBILE']) !== null && _a !== void 0 ? _a : props.CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_ELLIPSIS
+            : props.CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_ELLIPSIS;
+        if (isRichText(text)) {
+            return domstringToPlain(text, maxLength, true);
+        }
+        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({ 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: 'hidden', 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), 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] })) })) }))] }));
+                        }, 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() === 'ERROR' ? 'EDITOR:FALLBACK_TEXT' : getTruncatedText(textValue()), textSuffix] })) })) }))] }));
 }
 function extractBorderStyles(style) {
     var 

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

@@ -158,10 +158,13 @@ function Text(props) {
         return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
     };
     var getTruncatedText = function (text) {
+        var _a;
         if (!text || typeof text !== 'string') {
             return text;
         }
-        var maxLength = props.CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_ELLIPSIS;
+        var maxLength = device === 'MOBILE'
+            ? (_a = props.CB_STYLE_PROP_TEXT['CB_STYLE_PROP_TEXT_SPEC_ELLIPSIS:MOBILE']) !== null && _a !== void 0 ? _a : props.CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_ELLIPSIS
+            : props.CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_ELLIPSIS;
         if (isRichText(text)) {
             return domstringToPlain(text, maxLength, true);
         }

package/package.json

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

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.310]
+## [v2.2.312]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1422] ChatBubbleListItem UI 개선
+* [PDS-1424] 텍스트CB에서 모바일 ellipsis가 동작하지 않는 현상