pds-dev-kit-web-test 2.5.496 → 2.5.498

package/dist/src/common/types/index.d.ts

@@ -3,3 +3,4 @@ export * from './styled-components';
 export * from './text';
 export * from './uiColors';
 export * from './components';
+export * from './multilingual';

package/dist/src/common/types/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./styled-components"), exports);
 __exportStar(require("./text"), exports);
 __exportStar(require("./uiColors"), exports);
 __exportStar(require("./components"), exports);
+__exportStar(require("./multilingual"), exports);

package/dist/src/common/types/multilingual.d.ts

@@ -0,0 +1,16 @@
+type LanguageCode = 'en' | 'ko' | 'ja' | 'zh' | 'zh-Hant' | 'fr' | 'de' | 'es' | 'it' | 'pt' | 'ru' | 'vi' | 'th' | 'id' | 'ms' | 'ar' | 'tr' | 'pl' | 'nl' | 'sv' | 'fi' | 'no' | 'da' | 'he' | 'hi' | 'bn' | 'ta' | 'el' | 'cs' | 'ro';
+type MultilingualConfig = {
+    textFieldLineType?: 'single' | 'multi' | 'auto' | 'tinyeditor';
+    originalText?: string;
+    initialValues?: {
+        [key in LanguageCode]?: string;
+    };
+    visibleLanguages?: LanguageCode[];
+    readonlyLanguages?: LanguageCode[];
+    hiddenInputId: string;
+    onApply?: (values: {
+        [key in LanguageCode]?: string;
+    }) => void;
+    onTinyEditorAction?: () => void;
+};
+export type { LanguageCode, MultilingualConfig };

package/dist/src/common/types/multilingual.js

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

package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.d.ts

@@ -1,19 +1,5 @@
 /// <reference types="react" />
-import type { PDSTextType } from '../../../common/types';
-type LanguageCode = 'en' | 'ko' | 'ja' | 'zh' | 'zh-Hant' | 'fr' | 'de' | 'es' | 'it' | 'pt' | 'ru' | 'vi' | 'th' | 'id' | 'ms' | 'ar' | 'tr' | 'pl' | 'nl' | 'sv' | 'fi' | 'no' | 'da' | 'he' | 'hi' | 'bn' | 'ta' | 'el' | 'cs' | 'ro';
-type MultilingualConfig = {
-    textFieldLineType?: 'single' | 'multi' | 'auto';
-    originalText?: string;
-    initialValues?: {
-        [key in LanguageCode]?: string;
-    };
-    visibleLanguages?: LanguageCode[];
-    readonlyLanguages?: LanguageCode[];
-    hiddenInputId: string;
-    onApply?: (values: {
-        [key in LanguageCode]?: string;
-    }) => void;
-};
+import type { PDSTextType, MultilingualConfig } from '../../../common/types';
 type BasicFormGroupProps = {
     titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
     titleText?: PDSTextType;
@@ -27,4 +13,3 @@ type BasicFormGroupProps = {
 };
 declare function BasicFormGroup({ titleStyleTheme, titleText, descText, captionText, inputForm, titleRequirementMode, multilingualBtnMode, multilingualBtnState, multilingualConfig }: BasicFormGroupProps): JSX.Element;
 export default BasicFormGroup;
-export type { LanguageCode, MultilingualConfig };

package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var components_1 = require("../../components");
-var panels_1 = require("../../panels");
+var MultilingualModal_1 = __importDefault(require("../../panels/MultilingualModal"));
 var components_2 = require("../../../hybrid/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 function BasicFormGroup(_a) {
@@ -52,6 +52,13 @@ function BasicFormGroup(_a) {
         checkMultilingualValues();
     }, [hiddenInputValue]);
     var handleLanguageButtonClick = function () {
+        // TinyEditor 모드일 때는 모달을 열지 않고 onTinyEditorAction 실행
+        if ((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.textFieldLineType) === 'tinyeditor') {
+            if (multilingualConfig.onTinyEditorAction) {
+                multilingualConfig.onTinyEditorAction();
+            }
+            return;
+        }
         setIsMultiLanguageModalOpen(true);
     };
     var handleLanguageModalClose = function () {
@@ -61,8 +68,8 @@ function BasicFormGroup(_a) {
         setHiddenInputValue(newValue);
     };
     return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), titleRequirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) })), multilingualBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MultilingualButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.IconButton, { iconFillType: "line", iconName: "ic_translate", baseSize: "small", shapeType: "round", baseColorKey: "ui_cpnt_button_icon_default", iconColorKey: hasMultilingualValues
-                                        ? 'ui_cpnt_button_fill_base_primary'
-                                        : 'ui_cpnt_button_fill_base_disabled', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" })] })), multilingualBtnMode === 'use' && multilingualConfig && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: "hiddenInput_".concat(multilingualConfig.hiddenInputId), name: multilingualConfig.hiddenInputId, value: hiddenInputValue, readOnly: true }), (0, jsx_runtime_1.jsx)(panels_1.MultilingualModal, { isOpen: isMultiLanguageModalOpen, onClose: handleLanguageModalClose, config: multilingualConfig, onHiddenInputUpdate: handleHiddenInputUpdate })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
+                                        ? 'ui_cpnt_button_icon_primary'
+                                        : 'ui_cpnt_button_icon_disabled', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" })] })), multilingualBtnMode === 'use' && multilingualConfig && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: "hiddenInput_".concat(multilingualConfig.hiddenInputId), name: multilingualConfig.hiddenInputId, value: hiddenInputValue, readOnly: true }), (0, jsx_runtime_1.jsx)(MultilingualModal_1.default, { isOpen: isMultiLanguageModalOpen, onClose: handleLanguageModalClose, config: multilingualConfig, onHiddenInputUpdate: handleHiddenInputUpdate })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
 }
 var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
 var S_IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  height: 16px;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  height: 16px;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"])), function (_a) {

package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { MultilingualConfig } from '../../components/BasicFormGroup/BasicFormGroup';
+import type { MultilingualConfig } from '../../../common/types';
 type MultilingualModalModalProps = {
     isOpen: boolean;
     onClose: () => void;

package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.js

@@ -103,7 +103,6 @@ function MultilingualModal(_a) {
                 hiddenInput.dispatchEvent(event_1);
             }
         }
-        // onApply 콜백이 있으면 호출
         if (config === null || config === void 0 ? void 0 : config.onApply) {
             config.onApply(formValues);
         }
@@ -117,7 +116,7 @@ function MultilingualModal(_a) {
     return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, __assign({}, methods, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { onClick: handleCancel }), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "MultiLanguageModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", size: size }, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: t('multilingual_settings'), colorTheme: "sysTextPrimary", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsxs)(S_Body, { children: [(config === null || config === void 0 ? void 0 : config.originalText) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.BodyTextGroup, { titleText: t('str_original_text'), contentText: config.originalText }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" }), (0, jsx_runtime_1.jsx)(components_2.Divider, {}), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] })), (_b = config === null || config === void 0 ? void 0 : config.visibleLanguages) === null || _b === void 0 ? void 0 : _b.map(function (languageCode, index) {
                                 var _a, _b;
                                 var isReadonly = (_a = config.readonlyLanguages) === null || _a === void 0 ? void 0 : _a.includes(languageCode);
-                                return ((0, jsx_runtime_1.jsxs)(S_LanguageField, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "".concat(t(LANGUAGE_I18N_KEYS[languageCode]), " (").concat(languageCode, ")"), styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextField, { responsiveMode: "use", name: languageCode, hintText: t('str_9071'), placeholder: "Input Text", textLineType: config.textFieldLineType || 'single', state: isReadonly ? 'disabled' : 'normal' }), index < (((_b = config.visibleLanguages) === null || _b === void 0 ? void 0 : _b.length) || 0) - 1 && (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] }, "".concat(languageCode, "_field")));
+                                return ((0, jsx_runtime_1.jsxs)(S_LanguageField, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "".concat(t(LANGUAGE_I18N_KEYS[languageCode]), " (").concat(languageCode, ")"), styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextField, { responsiveMode: "use", multiRows: config.textFieldLineType === 'multi' ? 5 : undefined, autoMaxRows: config.textFieldLineType === 'auto' ? 5 : undefined, autoMinRows: config.textFieldLineType === 'auto' ? 1 : undefined, name: languageCode, hintText: t('str_9071'), placeholder: "Input Text", textLineType: config.textFieldLineType, state: isReadonly ? 'disabled' : 'normal' }), index < (((_b = config.visibleLanguages) === null || _b === void 0 ? void 0 : _b.length) || 0) - 1 && (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] }, "".concat(languageCode, "_field")));
                             })] }), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, {}), (0, jsx_runtime_1.jsxs)(S_Right, { children: [(0, jsx_runtime_1.jsx)(S_Btn2Wrapper, { children: (0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: t('str_cancel'), size: "medium", onClick: handleCancel }) }), (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: t('str_apply'), size: "medium", onClick: handleConfirm })] })] })] }))] })), container);
 }
 var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {

package/package.json

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