pds-dev-kit-web-test 0.2.31 → 0.2.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/src/desktop/components/TextLabel/TextLabel.js +83 -32
  2. package/dist/src/sub/DynamicLayout/mock_customSection.js +0 -3
  3. package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +6 -11
  4. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js +2 -18
  5. package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js +3 -12
  6. package/dist/src/sub/DynamicLayout/types.d.ts +0 -3
  7. package/package.json +1 -1
  8. package/release-note.md +4 -4
package/dist/src/desktop/components/TextLabel/TextLabel.js CHANGED
@@ -40,15 +40,76 @@ var __importStar = (this && this.__importStar) || function (mod) {
40
40
  Object.defineProperty(exports, "__esModule", { value: true });
41
41
  var jsx_runtime_1 = require("react/jsx-runtime");
42
42
  var react_1 = require("react");
43
+ var react_dom_1 = require("react-dom");
43
44
  var styled_components_1 = __importStar(require("styled-components"));
44
45
  var hybrid_1 = require("../../../hybrid");
45
46
  function TextLabel(_a) {
46
47
  var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.tooltipIconColorKey, tooltipIconColorKey = _c === void 0 ? 'ui_cpnt_icon_sys_grey_03' : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, _e = _a.styleTheme, styleTheme = _e === void 0 ? 'body2Bold' : _e, colorOverride = _a.colorOverride, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'sysTextPrimary' : _f, _g = _a.singleLineMode, singleLineMode = _g === void 0 ? 'none' : _g, _h = _a.ellipsisMode, ellipsisMode = _h === void 0 ? 'none' : _h, lineLimit = _a.lineLimit, _j = _a.userSelectMode, userSelectMode = _j === void 0 ? 'none' : _j, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _k = _a.textDecorationType, textDecorationType = _k === void 0 ? 'none' : _k, _l = _a.requirementMode, requirementMode = _l === void 0 ? 'none' : _l, _m = _a.bulletPointMode, bulletPointMode = _m === void 0 ? 'none' : _m, _o = _a.wordBreak, wordBreak = _o === void 0 ? 'keep_all' : _o, letterSpacing = _a.letterSpacing;
47
48
  var _p = (0, react_1.useState)(false), isTooltipOpen = _p[0], setIsTooltipOpen = _p[1];
48
- var handleTooltipToggle = function (value) {
49
- setIsTooltipOpen(value);
49
+ var _q = (0, react_1.useState)(null), tooltipSizeOffset = _q[0], setTooltipSizeOffset = _q[1];
50
+ var _r = (0, react_1.useState)(null), tooltipPositionOffset = _r[0], setTooltipPositionOffset = _r[1];
51
+ var tooltipRef = (0, react_1.useRef)(null);
52
+ var tooltipPositionTargetRef = (0, react_1.useRef)(null);
53
+ var handleTooltipOpen = function () {
54
+ setIsTooltipOpen(true);
50
55
  };
51
- return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) }))), tooltipText && ((0, jsx_runtime_1.jsxs)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsx)(S_IconWrapper, __assign({ onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }) })), (0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, { children: "".concat(tooltipText) }))] })))] })));
56
+ var handleTooltipClose = function () {
57
+ setIsTooltipOpen(false);
58
+ };
59
+ /**
60
+ * @when : isTooltipOpen이 변경되었을 때
61
+ * @expected : tooltipPositionTargetRef, tooltipRef 의 위치를 업데이트합니다.
62
+ * @clear :
63
+ */
64
+ (0, react_1.useEffect)(function () {
65
+ if (tooltipPositionTargetRef.current) {
66
+ var _a = tooltipPositionTargetRef.current.getBoundingClientRect(), top_1 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
67
+ setTooltipPositionOffset({
68
+ top: top_1 + window.scrollY,
69
+ right: right + window.scrollX,
70
+ bottom: bottom + window.scrollY,
71
+ left: left + window.scrollX
72
+ });
73
+ }
74
+ if (!isTooltipOpen && tooltipRef.current) {
75
+ setTooltipSizeOffset(null);
76
+ return;
77
+ }
78
+ if (tooltipRef.current) {
79
+ setTooltipSizeOffset({
80
+ height: tooltipRef.current.offsetHeight,
81
+ width: tooltipRef.current.offsetWidth
82
+ });
83
+ }
84
+ }, [isTooltipOpen]);
85
+ var tooltipPositionCss = getTooltipPositionCss(tooltipSizeOffset, tooltipPositionOffset, tooltipPosition);
86
+ return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) }))), tooltipText && ((0, jsx_runtime_1.jsxs)(S_AfterTextBox, __assign({ styleTheme: styleTheme, ref: tooltipPositionTargetRef }, { children: [(0, jsx_runtime_1.jsx)(S_IconWrapper, __assign({ onMouseEnter: handleTooltipOpen, onMouseLeave: handleTooltipClose }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }) })), (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, tooltipPositionCss: tooltipPositionCss, onMouseEnter: handleTooltipOpen, onMouseLeave: handleTooltipClose }, { children: "".concat(tooltipText) })), document.body)] })))] })));
87
+ }
88
+ function getTooltipPositionCss(size, position, positionType) {
89
+ if (!size || !position) {
90
+ return '';
91
+ }
92
+ var left = position.left, bottom = position.bottom, top = position.top;
93
+ var width = size.width, height = size.height;
94
+ var leftValue = left - width + 16;
95
+ var bottomValue = bottom + 4;
96
+ var topValue = top - height - 4;
97
+ var isOverLeft = leftValue < 0;
98
+ var isOverRight = window.innerWidth < left + width;
99
+ var isOverBottom = window.innerHeight < bottomValue + height;
100
+ var isOverTop = topValue < 0;
101
+ switch (positionType) {
102
+ case 'left_bottom':
103
+ return "\n left: ".concat(isOverLeft ? 5 : leftValue, "px;\n ").concat(isOverBottom ? 'bottom: 5px;' : "top: ".concat(bottomValue, "px;"));
104
+ case 'left_top':
105
+ return "\n left: ".concat(isOverLeft ? 5 : leftValue, "px;\n top: ").concat(isOverTop ? 5 : topValue, "px;");
106
+ case 'right_bottom':
107
+ return "\n ".concat(isOverRight ? 'right: 5px;' : "left: ".concat(isOverRight ? 5 : left, "px;"), "\n ").concat(isOverBottom ? 'bottom: 5px;' : "top: ".concat(bottomValue, "px;"));
108
+ case 'right_top':
109
+ return "\n ".concat(isOverRight ? 'right: 5px;' : "left: ".concat(isOverRight ? 5 : left, "px;"), "\n top: ").concat(isOverTop ? 5 : topValue, "px;");
110
+ default:
111
+ return '';
112
+ }
52
113
  }
53
114
  var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
54
115
  var theme = _a.theme;
@@ -315,11 +376,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_35 || (templateO
315
376
  });
316
377
  var userSelectModeStyle = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
317
378
  var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"])));
318
- var tooltipLeftTop = (0, styled_components_1.css)(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n bottom: 20px;\n right: 0;\n"], ["\n bottom: 20px;\n right: 0;\n"])));
319
- var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n right: 0;\n top: 20px;\n"], ["\n right: 0;\n top: 20px;\n"])));
320
- var tooltipRightTop = (0, styled_components_1.css)(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n bottom: 20px;\n left: 0;\n"], ["\n bottom: 20px;\n left: 0;\n"])));
321
- var tooltipRightBottom = (0, styled_components_1.css)(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n left: 0;\n top: 20px;\n"], ["\n left: 0;\n top: 20px;\n"])));
322
- var S_TextLabel = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
379
+ var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
323
380
  var textAlign = _a.textAlign;
324
381
  return textAlign;
325
382
  }, function (_a) {
@@ -404,19 +461,19 @@ var S_TextLabel = styled_components_1.default.div(templateObject_42 || (template
404
461
  var bulletPointMode = _a.bulletPointMode;
405
462
  return bulletPointMode === 'use' && bulletPointModeStyle;
406
463
  });
407
- var displayAfterTextBox = (0, styled_components_1.css)(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
408
- var headingAfterTextBox = (0, styled_components_1.css)(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
409
- var wizardPageTitleAfterTextBox = (0, styled_components_1.css)(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n margin-bottom: 7px;\n"], ["\n margin-bottom: 7px;\n"])));
410
- var leadParaAfterTextBox = (0, styled_components_1.css)(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
411
- var subTitleAfterTextBox = (0, styled_components_1.css)(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
412
- var body1AfterTextBox = (0, styled_components_1.css)(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n margin-bottom: 2px;\n"], ["\n margin-bottom: 2px;\n"])));
413
- var body2AfterTextBox = (0, styled_components_1.css)(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
414
- var caption1AfterTextBox = (0, styled_components_1.css)(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
415
- var caption2AfterTextBox = (0, styled_components_1.css)(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
416
- var form1AfterTextBox = (0, styled_components_1.css)(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
417
- var form2AfterTextBox = (0, styled_components_1.css)(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n margin-bottom: 2px;\n"], ["\n margin-bottom: 2px;\n"])));
418
- var blog1RAfterTextBox = (0, styled_components_1.css)(templateObject_54 || (templateObject_54 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
419
- var S_AfterTextBox = styled_components_1.default.div(templateObject_55 || (templateObject_55 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"])), function (_a) {
464
+ var displayAfterTextBox = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
465
+ var headingAfterTextBox = (0, styled_components_1.css)(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
466
+ var wizardPageTitleAfterTextBox = (0, styled_components_1.css)(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n margin-bottom: 7px;\n"], ["\n margin-bottom: 7px;\n"])));
467
+ var leadParaAfterTextBox = (0, styled_components_1.css)(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
468
+ var subTitleAfterTextBox = (0, styled_components_1.css)(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
469
+ var body1AfterTextBox = (0, styled_components_1.css)(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n margin-bottom: 2px;\n"], ["\n margin-bottom: 2px;\n"])));
470
+ var body2AfterTextBox = (0, styled_components_1.css)(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
471
+ var caption1AfterTextBox = (0, styled_components_1.css)(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
472
+ var caption2AfterTextBox = (0, styled_components_1.css)(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
473
+ var form1AfterTextBox = (0, styled_components_1.css)(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
474
+ var form2AfterTextBox = (0, styled_components_1.css)(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n margin-bottom: 2px;\n"], ["\n margin-bottom: 2px;\n"])));
475
+ var blog1RAfterTextBox = (0, styled_components_1.css)(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
476
+ var S_AfterTextBox = styled_components_1.default.div(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"])), function (_a) {
420
477
  var theme = _a.theme;
421
478
  return theme.spacing.spacingA;
422
479
  }, function (_a) {
@@ -445,8 +502,8 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_55 || (templ
445
502
  blog1Regular: blog1RAfterTextBox
446
503
  }[styleTheme];
447
504
  });
448
- var S_IconWrapper = styled_components_1.default.div(templateObject_56 || (templateObject_56 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"])));
449
- var S_TooltipWrapper = styled_components_1.default.div(templateObject_57 || (templateObject_57 = __makeTemplateObject(["\n ", "\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n line-height: 1.2;\n max-width: 240px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n\n ", ";\n\n ", ";\n"], ["\n ", "\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n line-height: 1.2;\n max-width: 240px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n\n ", ";\n\n ", ";\n"])), caption2Regular, function (_a) {
505
+ var S_IconWrapper = styled_components_1.default.div(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"])));
506
+ var S_TooltipWrapper = styled_components_1.default.div(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n ", "\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n line-height: 1.2;\n max-width: 240px;\n overflow-wrap: break-word;\n padding: ", ";\n position: fixed;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n\n ", ";\n ", ";\n"], ["\n ", "\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n line-height: 1.2;\n max-width: 240px;\n overflow-wrap: break-word;\n padding: ", ";\n position: fixed;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n\n ", ";\n ", ";\n"])), caption2Regular, function (_a) {
450
507
  var theme = _a.theme;
451
508
  return theme.ui_cpnt_button_tooltip_base;
452
509
  }, function (_a) {
@@ -462,14 +519,8 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_57 || (tem
462
519
  var isTooltipOpen = _a.isTooltipOpen;
463
520
  return !isTooltipOpen && 'display: none';
464
521
  }, function (_a) {
465
- var tooltipPosition = _a.tooltipPosition;
466
- return tooltipPosition &&
467
- {
468
- left_top: tooltipLeftTop,
469
- left_bottom: tooltipLeftBottom,
470
- right_top: tooltipRightTop,
471
- right_bottom: tooltipRightBottom
472
- }[tooltipPosition];
522
+ var tooltipPositionCss = _a.tooltipPositionCss;
523
+ return tooltipPositionCss && tooltipPositionCss;
473
524
  });
474
525
  exports.default = TextLabel;
475
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54, templateObject_55, templateObject_56, templateObject_57;
526
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53;
package/dist/src/sub/DynamicLayout/mock_customSection.js CHANGED
@@ -75,9 +75,6 @@ exports.customSectionMock1 = {
75
75
  template: undefined,
76
76
  updatedAt: '2023-01-06T09:05:45',
77
77
  jsonProperties: {
78
- CB_CONTENT_PROP_SECTION: {
79
- CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE: true
80
- },
81
78
  CB_CONTENT_PROP_VISIBILITY: {
82
79
  CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
83
80
  CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: true
package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js CHANGED
@@ -61,20 +61,19 @@ var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
61
61
  function CustomSection(props) {
62
62
  var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, sectionActionHandler = _a.sectionActionHandler;
63
63
  var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
64
- var _b = jsonProperties, CB_PLACEMENT_PROP_SECTION = _b.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _b.CB_LAYOUT_PROP_PADDING, CB_CONTENT_PROP_SECTION = _b.CB_CONTENT_PROP_SECTION;
64
+ var _b = jsonProperties, CB_PLACEMENT_PROP_SECTION = _b.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _b.CB_LAYOUT_PROP_PADDING;
65
65
  var _c = (0, react_1.useState)(null), selectedCB = _c[0], setSelectedCB = _c[1];
66
66
  var gleRef = (0, react_1.useRef)(null);
67
67
  var _d = (0, react_1.useState)(50), rowHeight = _d[0], setRowHeight = _d[1];
68
- var _e = (0, react_1.useState)(16), baseFontSize = _e[0], setBaseFontSize = _e[1];
69
68
  var isMobile = device === 'MOBILE';
70
69
  var isEditMode = mode === 'EDIT';
71
- var _f = (0, react_1.useState)(function () {
70
+ var _e = (0, react_1.useState)(function () {
72
71
  var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
73
72
  return {
74
73
  lg: lg,
75
74
  sm: sm
76
75
  };
77
- }), layouts = _f[0], setLayouts = _f[1];
76
+ }), layouts = _e[0], setLayouts = _e[1];
78
77
  (0, react_1.useEffect)(function () {
79
78
  var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
80
79
  setLayouts({ lg: lg, sm: sm });
@@ -84,10 +83,10 @@ function CustomSection(props) {
84
83
  setSelectedCB(null);
85
84
  }
86
85
  }, [editingSectionId]);
87
- var _g = (0, util_1.parseCustomSectionPlacement)({
86
+ var _f = (0, util_1.parseCustomSectionPlacement)({
88
87
  isMobile: isMobile,
89
88
  customSectionProps: CB_PLACEMENT_PROP_SECTION
90
- }), rows = _g.rows, width = _g.width, minHeight = _g.minHeight, isFullWidth = _g.isFullWidth;
89
+ }), rows = _f.rows, width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
91
90
  var customSectionStyles = {
92
91
  minHeight: "".concat(minHeight, "vh"),
93
92
  width: isFullWidth ? '100%' : "".concat(width, "px")
@@ -166,16 +165,13 @@ function CustomSection(props) {
166
165
  });
167
166
  };
168
167
  var onWidthChange = function (width) {
169
- var responsiveFontMode = !!CB_CONTENT_PROP_SECTION.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE;
170
168
  if (device === 'MOBILE') {
171
169
  var cellWidth_1 = width / MOBILE_GRID_COLS;
172
170
  setRowHeight(cellWidth_1 * 0.56);
173
- baseFontSize !== 14 && setBaseFontSize(14);
174
171
  return;
175
172
  }
176
173
  var cellWidth = width / DESKTOP_GRID_COLS;
177
174
  setRowHeight(cellWidth * 0.56);
178
- responsiveFontMode ? setBaseFontSize(cellWidth / 2.35) : setBaseFontSize(16);
179
175
  };
180
176
  var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
181
177
  var breakpoints = device === 'DESKTOP' ? { lg: 100, sm: 0 } : { lg: 1200, sm: 480 };
@@ -187,8 +183,7 @@ function CustomSection(props) {
187
183
  paddingLeft: padding.left
188
184
  } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: { lg: layouts.lg, sm: layouts.sm }, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: rowHeight, margin: [10, 10], style: {
189
185
  width: customSectionStyles.width,
190
- minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
191
- fontSize: "".concat(baseFontSize, "px")
186
+ minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX
192
187
  }, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: (componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.length) ? (componentBlocks.map(function (each) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === each.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
193
188
  width: '100%',
194
189
  height: '100%'
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js CHANGED
@@ -10,17 +10,6 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
- var __rest = (this && this.__rest) || function (s, e) {
14
- var t = {};
15
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
- t[p] = s[p];
17
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
- t[p[i]] = s[p[i]];
21
- }
22
- return t;
23
- };
24
13
  var __importDefault = (this && this.__importDefault) || function (mod) {
25
14
  return (mod && mod.__esModule) ? mod : { "default": mod };
26
15
  };
@@ -48,7 +37,7 @@ function Button(props) {
48
37
  }), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
49
38
  var _d = getBTNStyles(props.CB_STYLE_PROP_BTNTEXT, device), btnTextStyle = _d.style, btnTextHoverStyle = _d.hoverStyle;
50
39
  var _e = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
51
- var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, _g = _f.layout, paddingLeft = _g.paddingLeft, paddingRight = _g.paddingRight, paddingTop = _g.paddingTop, paddingBottom = _g.paddingBottom, layoutStyle = __rest(_g, ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]), effect = _f.effect;
40
+ var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, layoutStyle = _f.layout, effect = _f.effect;
52
41
  var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
53
42
  if (mode === 'EDIT') {
54
43
  propsStyle.visibility = 'visible';
@@ -60,12 +49,7 @@ function Button(props) {
60
49
  var hasEffect = props.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
61
50
  props.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
62
51
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
63
- 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: {
64
- paddingLeft: paddingLeft,
65
- paddingRight: paddingRight,
66
- paddingBottom: paddingBottom,
67
- paddingTop: paddingTop
68
- } }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
52
+ 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_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
69
53
  }
70
54
  function getBTNStyles(props, device) {
71
55
  var availableSpecCodes = [
package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js CHANGED
@@ -66,17 +66,14 @@ function parseStyleTextToCSSProp(_a) {
66
66
  }
67
67
  if (cssPropertyKey === 'fontSize') {
68
68
  if (hoverValue === null || hoverValue === undefined) {
69
- var emValue_1 = getEmFontSize(device, value);
70
69
  return {
71
- style: __assign(__assign({}, acc.style), (_k = {}, _k[cssPropertyKey] = emValue_1, _k)),
70
+ style: __assign(__assign({}, acc.style), (_k = {}, _k[cssPropertyKey] = "".concat(value, "px"), _k)),
72
71
  hoverStyle: __assign({}, acc.hoverStyle)
73
72
  };
74
73
  }
75
- var emValue = getEmFontSize(device, value);
76
- var hoverEmValue = getEmFontSize(device, hoverValue);
77
74
  return {
78
- style: __assign(__assign({}, acc.style), (_l = {}, _l[cssPropertyKey] = emValue, _l)),
79
- hoverStyle: __assign(__assign({}, acc.hoverStyle), (_m = {}, _m[cssPropertyKey] = hoverEmValue, _m))
75
+ style: __assign(__assign({}, acc.style), (_l = {}, _l[cssPropertyKey] = "".concat(value, "px"), _l)),
76
+ hoverStyle: __assign(__assign({}, acc.hoverStyle), (_m = {}, _m[cssPropertyKey] = "".concat(hoverValue, "px"), _m))
80
77
  };
81
78
  }
82
79
  if (cssPropertyKey === 'HORIZONTAL') {
@@ -201,9 +198,3 @@ function getVerticalPositionValue(value) {
201
198
  return '';
202
199
  }
203
200
  }
204
- function getEmFontSize(device, size) {
205
- if (device === 'DESKTOP') {
206
- return "".concat((size / 16).toFixed(3), "em");
207
- }
208
- return "".concat((size / 16).toFixed(3), "em");
209
- }
package/dist/src/sub/DynamicLayout/types.d.ts CHANGED
@@ -295,9 +295,6 @@ export type IMembershipDisplay = {
295
295
  connectedMemberships: IConnectedMembership[];
296
296
  };
297
297
  export type ISectionJsonProperties = {
298
- CB_CONTENT_PROP_SECTION: {
299
- CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE: boolean;
300
- };
301
298
  CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
302
299
  CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
303
300
  CB_LAYOUT_PROP_PADDING?: CB_LAYOUT_PROP_PADDING_SPECS;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.2.31",
3
+ "version": "0.2.33",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # pds-dev-kit-web-test Release Notes
2
- ## [v0.2.31]
2
+ ## [v0.2.33]
3
3
  ## 기준 pds-dev-kit-web 버전 @2.1.23
4
4
 
5
- ### sub
6
- * DynamicLayout - custom section
7
- * 모바일일 경우 font size 기준을 16에서 14로 변경
5
+ ### Component
6
+ * TextLabel
7
+ * tooltip이 떠있을 때 가려지는 문제와 영역 밖을 벗어나는 문제를 해결