pds-dev-kit-web 2.2.196 → 2.2.198

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 (38) hide show
  1. package/dist/src/common/assets/icons/fill/Translate.d.ts +4 -0
  2. package/dist/src/common/assets/icons/fill/Translate.js +30 -0
  3. package/dist/src/common/assets/icons/fill/index.d.ts +1 -0
  4. package/dist/src/common/assets/icons/fill/index.js +2 -0
  5. package/dist/src/common/assets/icons/line/Translate.d.ts +4 -0
  6. package/dist/src/common/assets/icons/line/Translate.js +30 -0
  7. package/dist/src/common/assets/icons/line/index.d.ts +1 -0
  8. package/dist/src/common/assets/icons/line/index.js +2 -0
  9. package/dist/src/common/services/i18n/resources/en.json +14 -0
  10. package/dist/src/common/services/i18n/resources/es.json +14 -0
  11. package/dist/src/common/services/i18n/resources/fil.json +14 -0
  12. package/dist/src/common/services/i18n/resources/index.d.ts +98 -0
  13. package/dist/src/common/services/i18n/resources/ja.json +14 -0
  14. package/dist/src/common/services/i18n/resources/ko.json +14 -0
  15. package/dist/src/common/services/i18n/resources/zh-cn.json +14 -0
  16. package/dist/src/common/services/i18n/resources/zh-tw.json +14 -0
  17. package/dist/src/common/types/components.d.ts +9 -0
  18. package/dist/src/common/types/components.js +8 -0
  19. package/dist/src/common/types/index.d.ts +1 -1
  20. package/dist/src/common/types/index.js +1 -1
  21. package/dist/src/common/types/multilingual.d.ts +16 -0
  22. package/dist/src/common/types/multilingual.js +2 -0
  23. package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.d.ts +6 -2
  24. package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.js +67 -6
  25. package/dist/src/desktop/components/BodyTextGroup/BodyTextGroup.d.ts +6 -1
  26. package/dist/src/desktop/components/BodyTextGroup/BodyTextGroup.js +70 -2
  27. package/dist/src/desktop/components/PriceTextField/PriceTextField.d.ts +2 -1
  28. package/dist/src/desktop/components/PriceTextField/PriceTextField.js +4 -1
  29. package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.d.ts +11 -0
  30. package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.js +199 -0
  31. package/dist/src/desktop/panels/MultilingualModal/index.d.ts +1 -0
  32. package/dist/src/desktop/panels/MultilingualModal/index.js +8 -0
  33. package/dist/src/desktop/panels/index.d.ts +2 -1
  34. package/dist/src/desktop/panels/index.js +6 -1
  35. package/package.json +1 -1
  36. package/release-note.md +2 -2
  37. package/dist/src/common/types/form.d.ts +0 -9
  38. package/dist/src/common/types/form.js +0 -10
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import type IconType from '../IconType';
3
+ declare const Translate: ({ color, size, ...rest }: IconType) => JSX.Element;
4
+ export default Translate;
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
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
+ Object.defineProperty(exports, "__esModule", { value: true });
25
+ var jsx_runtime_1 = require("react/jsx-runtime");
26
+ var Translate = function (_a) {
27
+ var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
+ return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M7.097,7.947 C6.356,6.96 5.801,5.917 5.413,4.781 L8.679,4.781 C8.263,6.029 7.742,7.072 7.097,7.947 L7.097,7.947 Z M16.353,12.562 L13.833,12.562 L15.099,8.982 L16.353,12.562 Z M16.608,5.369 L16.497,5.076 L13.666,5.076 L11.391,11.25 C10.424,10.814 9.569,10.32 8.882,9.798 C9.972,8.418 10.808,6.734 11.37,4.781 L13.655,4.781 L13.655,2.413 L8.256,2.413 L8.256,0 L5.743,0 L5.743,2.413 L0.454,2.413 L0.454,4.781 L2.778,4.781 C3.348,6.624 4.211,8.335 5.295,9.767 C4.321,10.562 2.798,11.553 0.706,12.205 L0,12.431 L1.355,14.732 L1.819,14.559 C3.726,13.858 5.579,12.815 7.075,11.604 C7.998,12.353 9.19,13.082 10.491,13.693 L8.813,18.245 L11.805,18.245 L12.945,15.022 L17.221,15.022 L18.363,18.245 L21.389,18.245 L16.608,5.369 Z", transform: "translate(2 2.85)" }) })));
29
+ };
30
+ exports.default = Translate;
@@ -124,6 +124,7 @@ declare const fillIcons: {
124
124
  readonly ic_toggle_down: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
125
125
  readonly ic_toggle_up: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
126
126
  readonly ic_trashcan: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
127
+ readonly ic_translate: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
127
128
  readonly ic_typeface_system: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
128
129
  readonly ic_unavailable: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
129
130
  readonly ic_upload: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -145,6 +145,7 @@ var ThumbDown_1 = __importDefault(require("./ThumbDown"));
145
145
  var ThumbUp_1 = __importDefault(require("./ThumbUp"));
146
146
  var ToggleDown_1 = __importDefault(require("./ToggleDown"));
147
147
  var ToggleUp_1 = __importDefault(require("./ToggleUp"));
148
+ var Translate_1 = __importDefault(require("./Translate"));
148
149
  var Trashcan_1 = __importDefault(require("./Trashcan"));
149
150
  var TypefaceSystem_1 = __importDefault(require("./TypefaceSystem"));
150
151
  var Unavailable_1 = __importDefault(require("./Unavailable"));
@@ -293,6 +294,7 @@ var fillIcons = {
293
294
  ic_toggle_down: ToggleDown_1.default,
294
295
  ic_toggle_up: ToggleUp_1.default,
295
296
  ic_trashcan: Trashcan_1.default,
297
+ ic_translate: Translate_1.default,
296
298
  ic_typeface_system: TypefaceSystem_1.default,
297
299
  ic_unavailable: Unavailable_1.default,
298
300
  ic_upload: Upload_1.default,
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import type IconType from '../IconType';
3
+ declare const Translate: ({ color, size, ...rest }: IconType) => JSX.Element;
4
+ export default Translate;
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
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
+ Object.defineProperty(exports, "__esModule", { value: true });
25
+ var jsx_runtime_1 = require("react/jsx-runtime");
26
+ var Translate = function (_a) {
27
+ var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
+ return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M6.497,8.1963 C5.449,6.9073 4.718,5.5273 4.267,3.9813 L8.624,3.9813 C8.109,5.7143 7.413,7.0933 6.497,8.1963 L6.497,8.1963 Z M14.519,7.4273 L16.317,12.5623 L12.667,12.5623 L14.483,7.4273 L14.519,7.4273 Z M15.634,5.1083 L15.622,5.0763 L13.345,5.0763 L11.021,11.3853 C9.701,10.8303 8.56,10.1643 7.716,9.4583 C8.954,8.0013 9.879,6.1593 10.467,3.9813 L12.655,3.9813 L12.655,2.4133 L7.256,2.4133 L7.256,0.0003 L5.543,0.0003 L5.543,2.4133 L0.254,2.4133 L0.254,3.9813 L2.476,3.9813 C3.068,6.0193 4.025,7.9003 5.247,9.4253 C4.261,10.2833 2.599,11.4483 0.228,12.1863 L8.8817842e-16,12.2593 L0.911,13.8033 L0.932,13.8403 L1.081,13.7843 C3.06,13.0563 4.974,11.9563 6.476,10.6833 C7.479,11.5503 8.867,12.4003 10.394,13.0843 L8.788,17.4453 L10.923,17.4453 L12.062,14.2223 L16.904,14.2223 L18.031,17.4123 L18.043,17.4453 L20.215,17.4453 L15.634,5.1083 Z", transform: "translate(2 3.2)" }) })));
29
+ };
30
+ exports.default = Translate;
@@ -257,6 +257,7 @@ declare const lineIcons: {
257
257
  readonly ic_toggle_down: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
258
258
  readonly ic_toggle_up: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
259
259
  readonly ic_trashcan: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
260
+ readonly ic_translate: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
260
261
  readonly ic_typeface_blackletter_20: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
261
262
  readonly ic_typeface_deco_20: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
262
263
  readonly ic_typeface_display_20: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
@@ -287,6 +287,7 @@ var Ticket_1 = __importDefault(require("./Ticket"));
287
287
  var Time_1 = __importDefault(require("./Time"));
288
288
  var ToggleDown_1 = __importDefault(require("./ToggleDown"));
289
289
  var ToggleUp_1 = __importDefault(require("./ToggleUp"));
290
+ var Translate_1 = __importDefault(require("./Translate"));
290
291
  var Trashcan_1 = __importDefault(require("./Trashcan"));
291
292
  var TypefaceBlackLetter20_1 = __importDefault(require("./TypefaceBlackLetter20"));
292
293
  var TypefaceDeco20_1 = __importDefault(require("./TypefaceDeco20"));
@@ -586,6 +587,7 @@ var lineIcons = {
586
587
  ic_toggle_down: ToggleDown_1.default,
587
588
  ic_toggle_up: ToggleUp_1.default,
588
589
  ic_trashcan: Trashcan_1.default,
590
+ ic_translate: Translate_1.default,
589
591
  ic_typeface_blackletter_20: TypefaceBlackLetter20_1.default,
590
592
  ic_typeface_deco_20: TypefaceDeco20_1.default,
591
593
  ic_typeface_display_20: TypefaceDisplay20_1.default,
@@ -34,6 +34,20 @@
34
34
  "str_3891": "Fri",
35
35
  "str_3892": "Sat",
36
36
  "str_3893": "Sun",
37
+ "multilingual_settings": "Multilingual Settings",
38
+ "str_multilingual_ko": "Korean",
39
+ "str_multilingual_en": "English",
40
+ "str_multilingual_ja": "Japanese",
41
+ "str_multilingual_zh_cn": "Chinese - Simplified",
42
+ "str_multilingual_zh_tw": "Chinese - Traditional",
43
+ "str_multilingual_fr": "French",
44
+ "str_multilingual_es": "Spanish",
45
+ "str_9071": "Please enter the text in the appropriate language for your country.",
46
+ "str_original_text": "Original Text",
47
+ "str_apply": "Apply",
48
+ "str_cancel": "Cancel",
49
+ "str_confirm": "Confirm",
50
+ "str_multilingual_settings": "Multilingual Settings",
37
51
  "str_min_price": "Please enter at least {{currency}} {{minPrice}}",
38
52
  "str_max_price": "You can enter up to {{currency}} {{maxPrice}}",
39
53
  "str_price_unit": "Please enter in increments of {{currency}} {{priceUnit}}",
@@ -34,6 +34,20 @@
34
34
  "str_3891": "Fri",
35
35
  "str_3892": "Sat",
36
36
  "str_3893": "Sun",
37
+ "multilingual_settings": "Configuración Multiidioma",
38
+ "str_multilingual_ko": "Coreano",
39
+ "str_multilingual_en": "Inglés",
40
+ "str_multilingual_ja": "Japonés",
41
+ "str_multilingual_zh_cn": "Chino - Simplificado",
42
+ "str_multilingual_zh_tw": "Chino - Tradicional",
43
+ "str_multilingual_fr": "Francés",
44
+ "str_multilingual_es": "Español",
45
+ "str_9071": "Por favor, ingrese el texto en el idioma apropiado para su país.",
46
+ "str_original_text": "Texto Original",
47
+ "str_apply": "Aplicar",
48
+ "str_cancel": "Cancelar",
49
+ "str_multilingual_settings": "Configuración Multilingüe",
50
+ "str_confirm": "controlar",
37
51
  "str_min_price": "Ingrese al menos {{minPrice}} {{currency}} o más.",
38
52
  "str_max_price": "Puede ingresar hasta {{maxPrice}} {{currency}}.",
39
53
  "str_price_unit": "Por favor, introduzca en unidades de {{priceUnit}} {{currency}}.",
@@ -34,6 +34,20 @@
34
34
  "str_3891": "Fri",
35
35
  "str_3892": "Sat",
36
36
  "str_3893": "Sun",
37
+ "multilingual_settings": "Multilingual Settings",
38
+ "str_multilingual_ko": "Korean",
39
+ "str_multilingual_en": "English",
40
+ "str_multilingual_ja": "Japanese",
41
+ "str_multilingual_zh_cn": "Chinese - Simplified",
42
+ "str_multilingual_zh_tw": "Chinese - Traditional",
43
+ "str_multilingual_fr": "French",
44
+ "str_multilingual_es": "Spanish",
45
+ "str_9071": "Mangyaring ilagay ang teksto sa naaangkop na wika para sa inyong bansa.",
46
+ "str_original_text": "Orihinal na Teksto",
47
+ "str_apply": "Apply",
48
+ "str_cancel": "Cancel",
49
+ "str_confirm": "Kumpirmahin",
50
+ "str_multilingual_settings": "Multilingual Settings",
37
51
  "str_min_price": "Mangyaring maglagay ng hindi bababa sa {{minPrice}} {{currency}} o higit pa.",
38
52
  "str_max_price": "Maaari kang mag-input ng hanggang {{maxPrice}} {{currency}}.",
39
53
  "str_price_unit": "Pakipasok sa mga unit ng {{priceUnit}} {{currency}}.",
@@ -35,6 +35,20 @@ declare const locale: {
35
35
  str_3891: string;
36
36
  str_3892: string;
37
37
  str_3893: string;
38
+ multilingual_settings: string;
39
+ str_multilingual_ko: string;
40
+ str_multilingual_en: string;
41
+ str_multilingual_ja: string;
42
+ str_multilingual_zh_cn: string;
43
+ str_multilingual_zh_tw: string;
44
+ str_multilingual_fr: string;
45
+ str_multilingual_es: string;
46
+ str_9071: string;
47
+ str_original_text: string;
48
+ str_apply: string;
49
+ str_cancel: string;
50
+ str_multilingual_settings: string;
51
+ str_confirm: string;
38
52
  str_min_price: string;
39
53
  str_max_price: string;
40
54
  str_price_unit: string;
@@ -81,6 +95,20 @@ declare const locale: {
81
95
  str_3891: string;
82
96
  str_3892: string;
83
97
  str_3893: string;
98
+ multilingual_settings: string;
99
+ str_multilingual_ko: string;
100
+ str_multilingual_en: string;
101
+ str_multilingual_ja: string;
102
+ str_multilingual_zh_cn: string;
103
+ str_multilingual_zh_tw: string;
104
+ str_multilingual_fr: string;
105
+ str_multilingual_es: string;
106
+ str_9071: string;
107
+ str_original_text: string;
108
+ str_apply: string;
109
+ str_cancel: string;
110
+ str_confirm: string;
111
+ str_multilingual_settings: string;
84
112
  str_min_price: string;
85
113
  str_max_price: string;
86
114
  str_price_unit: string;
@@ -127,6 +155,20 @@ declare const locale: {
127
155
  str_3891: string;
128
156
  str_3892: string;
129
157
  str_3893: string;
158
+ multilingual_settings: string;
159
+ str_multilingual_ko: string;
160
+ str_multilingual_en: string;
161
+ str_multilingual_ja: string;
162
+ str_multilingual_zh_cn: string;
163
+ str_multilingual_zh_tw: string;
164
+ str_multilingual_fr: string;
165
+ str_multilingual_es: string;
166
+ str_9071: string;
167
+ str_original_text: string;
168
+ str_apply: string;
169
+ str_cancel: string;
170
+ str_confirm: string;
171
+ str_multilingual_settings: string;
130
172
  str_min_price: string;
131
173
  str_max_price: string;
132
174
  str_price_unit: string;
@@ -173,6 +215,20 @@ declare const locale: {
173
215
  str_3891: string;
174
216
  str_3892: string;
175
217
  str_3893: string;
218
+ multilingual_settings: string;
219
+ str_multilingual_ko: string;
220
+ str_multilingual_en: string;
221
+ str_multilingual_ja: string;
222
+ str_multilingual_zh_cn: string;
223
+ str_multilingual_zh_tw: string;
224
+ str_multilingual_fr: string;
225
+ str_multilingual_es: string;
226
+ str_9071: string;
227
+ str_original_text: string;
228
+ str_apply: string;
229
+ str_cancel: string;
230
+ str_multilingual_settings: string;
231
+ str_confirm: string;
176
232
  str_min_price: string;
177
233
  str_max_price: string;
178
234
  str_price_unit: string;
@@ -219,6 +275,20 @@ declare const locale: {
219
275
  str_3891: string;
220
276
  str_3892: string;
221
277
  str_3893: string;
278
+ multilingual_settings: string;
279
+ str_multilingual_ko: string;
280
+ str_multilingual_en: string;
281
+ str_multilingual_ja: string;
282
+ str_multilingual_zh_cn: string;
283
+ str_multilingual_zh_tw: string;
284
+ str_multilingual_fr: string;
285
+ str_multilingual_es: string;
286
+ str_9071: string;
287
+ str_original_text: string;
288
+ str_apply: string;
289
+ str_cancel: string;
290
+ str_multilingual_settings: string;
291
+ str_confirm: string;
222
292
  str_min_price: string;
223
293
  str_max_price: string;
224
294
  str_price_unit: string;
@@ -265,6 +335,20 @@ declare const locale: {
265
335
  str_3891: string;
266
336
  str_3892: string;
267
337
  str_3893: string;
338
+ multilingual_settings: string;
339
+ str_multilingual_ko: string;
340
+ str_multilingual_en: string;
341
+ str_multilingual_ja: string;
342
+ str_multilingual_zh_cn: string;
343
+ str_multilingual_zh_tw: string;
344
+ str_multilingual_fr: string;
345
+ str_multilingual_es: string;
346
+ str_9071: string;
347
+ str_original_text: string;
348
+ str_apply: string;
349
+ str_cancel: string;
350
+ str_multilingual_settings: string;
351
+ str_confirm: string;
268
352
  str_min_price: string;
269
353
  str_max_price: string;
270
354
  str_price_unit: string;
@@ -311,6 +395,20 @@ declare const locale: {
311
395
  str_3891: string;
312
396
  str_3892: string;
313
397
  str_3893: string;
398
+ multilingual_settings: string;
399
+ str_multilingual_ko: string;
400
+ str_multilingual_en: string;
401
+ str_multilingual_ja: string;
402
+ str_multilingual_zh_cn: string;
403
+ str_multilingual_zh_tw: string;
404
+ str_multilingual_fr: string;
405
+ str_multilingual_es: string;
406
+ str_9071: string;
407
+ str_original_text: string;
408
+ str_apply: string;
409
+ str_cancel: string;
410
+ str_confirm: string;
411
+ str_multilingual_settings: string;
314
412
  str_min_price: string;
315
413
  str_max_price: string;
316
414
  str_price_unit: string;
@@ -34,6 +34,20 @@
34
34
  "str_3891": "金",
35
35
  "str_3892": "土",
36
36
  "str_3893": "日",
37
+ "multilingual_settings": "多言語設定",
38
+ "str_multilingual_ko": "韓国語",
39
+ "str_multilingual_en": "英語",
40
+ "str_multilingual_ja": "日本語",
41
+ "str_multilingual_zh_cn": "中国語 - 簡体",
42
+ "str_multilingual_zh_tw": "中国語 - 繁体",
43
+ "str_multilingual_fr": "フランス語",
44
+ "str_multilingual_es": "スペイン語",
45
+ "str_9071": "国に適した言語を入力してください。",
46
+ "str_original_text": "原文",
47
+ "str_apply": "適用",
48
+ "str_cancel": "キャンセル",
49
+ "str_confirm": "確認",
50
+ "str_multilingual_settings": "多言語設定",
37
51
  "str_min_price": "最小 {{minPrice}} {{currency}} 以上入力してください。",
38
52
  "str_max_price": "最大 {{maxPrice}} {{currency}} まで入力できます。",
39
53
  "str_price_unit": "{{priceUnit}} {{currency}}単位で入力してください。",
@@ -34,6 +34,20 @@
34
34
  "str_3891": "금",
35
35
  "str_3892": "토",
36
36
  "str_3893": "일",
37
+ "multilingual_settings": "다국어 설정",
38
+ "str_multilingual_ko": "한국어",
39
+ "str_multilingual_en": "영어",
40
+ "str_multilingual_ja": "일본어",
41
+ "str_multilingual_zh_cn": "중국어 - 간체",
42
+ "str_multilingual_zh_tw": "중국어 - 번체",
43
+ "str_multilingual_fr": "프랑스어",
44
+ "str_multilingual_es": "스페인어",
45
+ "str_9071": "국가에 맞는 언어를 입력해 주세요.",
46
+ "str_original_text": "원문",
47
+ "str_apply": "적용",
48
+ "str_cancel": "취소",
49
+ "str_multilingual_settings": "다국어 설정",
50
+ "str_confirm": "확인",
37
51
  "str_min_price": "최소 {{minPrice}} {{currency}} 이상 입력해 주세요.",
38
52
  "str_max_price": "최대 {{maxPrice}} {{currency}} 까지 입력할 수 있습니다.",
39
53
  "str_price_unit": "{{priceUnit}} {{currency}} 단위로 입력해 주세요.",
@@ -34,6 +34,20 @@
34
34
  "str_3891": "Fri",
35
35
  "str_3892": "Sat",
36
36
  "str_3893": "Sun",
37
+ "multilingual_settings": "多语言设置",
38
+ "str_multilingual_ko": "韩语",
39
+ "str_multilingual_en": "英语",
40
+ "str_multilingual_ja": "日语",
41
+ "str_multilingual_zh_cn": "中文 - 简体",
42
+ "str_multilingual_zh_tw": "中文 - 繁体",
43
+ "str_multilingual_fr": "法语",
44
+ "str_multilingual_es": "西班牙语",
45
+ "str_9071": "请输入适合您国家的语言。",
46
+ "str_original_text": "原文",
47
+ "str_apply": "应用",
48
+ "str_cancel": "取消",
49
+ "str_multilingual_settings": "多语言设置",
50
+ "str_confirm": "确认",
37
51
  "str_min_price": "请至少输入{{minPrice}}、{{currency}}或更多。",
38
52
  "str_max_price": "最多可以输入{{maxPrice}} {{currency}}。",
39
53
  "str_price_unit": "请以{{priceUnit}} {{currency}}为单位输入。",
@@ -34,6 +34,20 @@
34
34
  "str_3891": "Fri",
35
35
  "str_3892": "Sat",
36
36
  "str_3893": "Sun",
37
+ "multilingual_settings": "多語言設置",
38
+ "str_multilingual_ko": "韓語",
39
+ "str_multilingual_en": "英語",
40
+ "str_multilingual_ja": "日語",
41
+ "str_multilingual_zh_cn": "中文 - 簡體",
42
+ "str_multilingual_zh_tw": "中文 - 繁體",
43
+ "str_multilingual_fr": "法語",
44
+ "str_multilingual_es": "西班牙語",
45
+ "str_9071": "請輸入適合您國家的語言。",
46
+ "str_original_text": "原文",
47
+ "str_apply": "應用",
48
+ "str_cancel": "取消",
49
+ "str_multilingual_settings": "多語言設定",
50
+ "str_confirm": "確認",
37
51
  "str_min_price": "請至少輸入{{minPrice}}、{{currency}}或更多。",
38
52
  "str_max_price": "最多可輸入{{maxPrice}} {{currency}}。",
39
53
  "str_price_unit": "請以{{priceUnit}} {{currency}}為單位輸入。",
@@ -55,3 +55,12 @@ export type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
55
55
  tooltipPosition?: IconCaseTooltipPositionType;
56
56
  };
57
57
  export type ForwardedRefType<T> = ForwardedRef<T | null>;
58
+ export interface IFormValues {
59
+ [key: string]: string;
60
+ }
61
+ /**
62
+ * 중첩된 객체 구조에서 점(.)으로 구분된 경로를 통해 에러 객체를 조회합니다
63
+ */
64
+ export declare const getErrorByName: (errors: {
65
+ [x: string]: any;
66
+ }, name: string) => any;
@@ -1,2 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.getErrorByName = void 0;
4
+ /**
5
+ * 중첩된 객체 구조에서 점(.)으로 구분된 경로를 통해 에러 객체를 조회합니다
6
+ */
7
+ var getErrorByName = function (errors, name) {
8
+ return name.split('.').reduce(function (errors, property) { return errors && errors[property]; }, errors);
9
+ };
10
+ exports.getErrorByName = getErrorByName;
@@ -1,6 +1,6 @@
1
- export * from './form';
2
1
  export * from './icon';
3
2
  export * from './styled-components';
4
3
  export * from './text';
5
4
  export * from './uiColors';
6
5
  export * from './components';
6
+ export * from './multilingual';
@@ -14,9 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
14
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./form"), exports);
18
17
  __exportStar(require("./icon"), exports);
19
18
  __exportStar(require("./styled-components"), exports);
20
19
  __exportStar(require("./text"), exports);
21
20
  __exportStar(require("./uiColors"), exports);
22
21
  __exportStar(require("./components"), exports);
22
+ __exportStar(require("./multilingual"), exports);
@@ -0,0 +1,16 @@
1
+ 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';
2
+ type MultilingualConfig = {
3
+ textFieldLineType?: 'single' | 'multi' | 'auto' | 'tinyeditor';
4
+ originalText?: string;
5
+ initialValues?: {
6
+ [key in LanguageCode]?: string;
7
+ };
8
+ visibleLanguages?: LanguageCode[];
9
+ readonlyLanguages?: LanguageCode[];
10
+ hiddenInputId: string;
11
+ onApply?: (values: {
12
+ [key in LanguageCode]?: string;
13
+ }) => void;
14
+ onTinyEditorAction?: () => void;
15
+ };
16
+ export type { LanguageCode, MultilingualConfig };
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,12 +1,16 @@
1
1
  /// <reference types="react" />
2
- import type { PDSTextType } from '../../../common';
2
+ import type { PDSTextType, MultilingualConfig } from '../../../common/types';
3
3
  type BasicFormGroupProps = {
4
4
  titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
5
+ headerSize?: 'small' | 'medium' | 'large' | 'rlarge';
5
6
  titleText?: PDSTextType;
6
7
  descText?: PDSTextType;
7
8
  captionText?: PDSTextType;
8
9
  inputForm?: JSX.Element;
9
10
  titleRequirementMode?: 'use' | 'none';
11
+ multilingualBtnMode?: 'use' | 'none';
12
+ multilingualBtnState?: 'normal' | 'disabled';
13
+ multilingualConfig?: MultilingualConfig;
10
14
  };
11
- declare function BasicFormGroup({ titleStyleTheme, titleText, descText, captionText, inputForm, titleRequirementMode }: BasicFormGroupProps): JSX.Element;
15
+ declare function BasicFormGroup({ titleStyleTheme, headerSize, titleText, descText, captionText, inputForm, titleRequirementMode, multilingualBtnMode, multilingualBtnState, multilingualConfig }: BasicFormGroupProps): JSX.Element;
12
16
  export default BasicFormGroup;
@@ -19,17 +19,78 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
+ var react_1 = require("react");
23
+ var MultilingualModal_1 = __importDefault(require("../../panels/MultilingualModal"));
24
+ var components_1 = require("../../../hybrid/components");
22
25
  var styled_components_1 = __importDefault(require("styled-components"));
23
- var hybrid_1 = require("../../../hybrid");
26
+ var IconButton_1 = require("../IconButton");
24
27
  var TextLabel_1 = require("../TextLabel");
25
28
  function BasicFormGroup(_a) {
26
- var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm, _c = _a.titleRequirementMode, titleRequirementMode = _c === void 0 ? 'none' : _c;
27
- 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)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), titleRequirementMode === 'use' && ((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" }) }))] }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
29
+ var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, _c = _a.headerSize, headerSize = _c === void 0 ? 'rlarge' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm, _d = _a.titleRequirementMode, titleRequirementMode = _d === void 0 ? 'none' : _d, _e = _a.multilingualBtnMode, multilingualBtnMode = _e === void 0 ? 'none' : _e, _f = _a.multilingualBtnState, multilingualBtnState = _f === void 0 ? 'normal' : _f, multilingualConfig = _a.multilingualConfig;
30
+ var _g = (0, react_1.useState)(false), isMultiLanguageModalOpen = _g[0], setIsMultiLanguageModalOpen = _g[1];
31
+ var _h = (0, react_1.useState)(false), hasMultilingualValues = _h[0], setHasMultilingualValues = _h[1];
32
+ var _j = (0, react_1.useState)(function () {
33
+ return JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
34
+ }), hiddenInputValue = _j[0], setHiddenInputValue = _j[1];
35
+ // hiddenInput의 값이 있는지 확인하는 함수
36
+ var checkMultilingualValues = function () {
37
+ try {
38
+ var values = JSON.parse(hiddenInputValue || '{}');
39
+ var hasValues = Object.values(values).some(function (value) { return value && value.toString().trim() !== ''; });
40
+ setHasMultilingualValues(hasValues);
41
+ }
42
+ catch (_a) {
43
+ setHasMultilingualValues(false);
44
+ }
45
+ };
46
+ // initialValues가 변경될 때 hiddenInputValue 업데이트
47
+ (0, react_1.useEffect)(function () {
48
+ var newValue = JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
49
+ setHiddenInputValue(newValue);
50
+ }, [multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues]);
51
+ // hiddenInputValue가 변경될 때마다 체크
52
+ (0, react_1.useEffect)(function () {
53
+ checkMultilingualValues();
54
+ }, [hiddenInputValue]);
55
+ var handleLanguageButtonClick = function () {
56
+ // TinyEditor 모드일 때는 모달을 열지 않고 onTinyEditorAction 실행
57
+ if ((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.textFieldLineType) === 'tinyeditor') {
58
+ if (multilingualConfig.onTinyEditorAction) {
59
+ multilingualConfig.onTinyEditorAction();
60
+ }
61
+ return;
62
+ }
63
+ setIsMultiLanguageModalOpen(true);
64
+ };
65
+ var handleLanguageModalClose = function () {
66
+ setIsMultiLanguageModalOpen(false);
67
+ };
68
+ var handleHiddenInputUpdate = function (newValue) {
69
+ setHiddenInputValue(newValue);
70
+ };
71
+ 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, __assign({ "$headerSize": headerSize }, { children: [(0, jsx_runtime_1.jsxs)(S_TitleText, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), titleRequirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.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)(IconButton_1.IconButton, { iconFillType: "line", iconName: "ic_translate", baseSize: "small", shapeType: "round", baseColorKey: "ui_cpnt_button_fill_base_default", iconColorKey: hasMultilingualValues
72
+ ? 'ui_cpnt_button_icon_primary'
73
+ : 'ui_cpnt_icon_sys_grey_02', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] })), (0, jsx_runtime_1.jsx)(components_1.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 }), (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)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
28
74
  }
29
- 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"])));
30
- 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) {
75
+ var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: ", ";\n"], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: ", ";\n"])), function (_a) {
76
+ var $headerSize = _a.$headerSize;
77
+ if ($headerSize === 'small')
78
+ return '188px';
79
+ if ($headerSize === 'medium')
80
+ return '188px';
81
+ if ($headerSize === 'large')
82
+ return '432px';
83
+ if ($headerSize === 'rlarge')
84
+ return '100%';
85
+ });
86
+ var S_TitleText = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
87
+ var S_IconWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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) {
31
88
  var theme = _a.theme;
32
89
  return theme.spacing.spacingA;
33
90
  });
91
+ var S_MultilingualButtonWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n margin-left: ", ";\n"], ["\n align-items: center;\n display: flex;\n margin-left: ", ";\n"])), function (_a) {
92
+ var theme = _a.theme;
93
+ return theme.spacing.spacingB;
94
+ });
34
95
  exports.default = BasicFormGroup;
35
- var templateObject_1, templateObject_2;
96
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
@@ -1,7 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  import type { PDSTextType } from '../../../common';
3
+ import type { MultilingualConfig } from '../../../common/types';
3
4
  type BodyTextGroupProps = {
4
5
  titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
6
+ headerSize?: 'small' | 'medium' | 'large' | 'rlarge';
5
7
  titleText: PDSTextType;
6
8
  descText?: PDSTextType;
7
9
  contentText?: PDSTextType;
@@ -9,6 +11,9 @@ type BodyTextGroupProps = {
9
11
  descTextWordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
10
12
  contentTextWordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
11
13
  contentFontWeight?: 'regular' | 'bold';
14
+ multilingualBtnMode?: 'use' | 'none';
15
+ multilingualBtnState?: 'normal' | 'disabled';
16
+ multilingualConfig?: MultilingualConfig;
12
17
  };
13
- declare function BodyTextGroup({ titleStyleTheme, titleText, descText, contentText, titleTextWordBreak, descTextWordBreak, contentTextWordBreak, contentFontWeight }: BodyTextGroupProps): JSX.Element;
18
+ declare function BodyTextGroup({ titleStyleTheme, headerSize, titleText, descText, contentText, titleTextWordBreak, descTextWordBreak, contentTextWordBreak, contentFontWeight, multilingualBtnMode, multilingualBtnState, multilingualConfig }: BodyTextGroupProps): JSX.Element;
14
19
  export default BodyTextGroup;
@@ -1,4 +1,8 @@
1
1
  "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
2
6
  var __assign = (this && this.__assign) || function () {
3
7
  __assign = Object.assign || function(t) {
4
8
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,12 +14,76 @@ var __assign = (this && this.__assign) || function () {
10
14
  };
11
15
  return __assign.apply(this, arguments);
12
16
  };
17
+ var __importDefault = (this && this.__importDefault) || function (mod) {
18
+ return (mod && mod.__esModule) ? mod : { "default": mod };
19
+ };
13
20
  Object.defineProperty(exports, "__esModule", { value: true });
14
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
+ var react_1 = require("react");
23
+ var panels_1 = require("../../panels");
24
+ var styled_components_1 = __importDefault(require("styled-components"));
15
25
  var hybrid_1 = require("../../../hybrid");
26
+ var IconButton_1 = require("../IconButton");
16
27
  var TextLabel_1 = require("../TextLabel");
17
28
  function BodyTextGroup(_a) {
18
- var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, contentText = _a.contentText, _c = _a.titleTextWordBreak, titleTextWordBreak = _c === void 0 ? 'keep_all' : _c, _d = _a.descTextWordBreak, descTextWordBreak = _d === void 0 ? 'keep_all' : _d, _e = _a.contentTextWordBreak, contentTextWordBreak = _e === void 0 ? 'keep_all' : _e, _f = _a.contentFontWeight, contentFontWeight = _f === void 0 ? 'regular' : _f;
19
- return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BodyTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, wordBreak: titleTextWordBreak, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), descText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, wordBreak: descTextWordBreak, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" })] })), contentText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, wordBreak: contentTextWordBreak, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" })] }))] })));
29
+ var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, _c = _a.headerSize, headerSize = _c === void 0 ? 'rlarge' : _c, titleText = _a.titleText, descText = _a.descText, contentText = _a.contentText, _d = _a.titleTextWordBreak, titleTextWordBreak = _d === void 0 ? 'keep_all' : _d, _e = _a.descTextWordBreak, descTextWordBreak = _e === void 0 ? 'keep_all' : _e, _f = _a.contentTextWordBreak, contentTextWordBreak = _f === void 0 ? 'keep_all' : _f, _g = _a.contentFontWeight, contentFontWeight = _g === void 0 ? 'regular' : _g, _h = _a.multilingualBtnMode, multilingualBtnMode = _h === void 0 ? 'none' : _h, _j = _a.multilingualBtnState, multilingualBtnState = _j === void 0 ? 'normal' : _j, multilingualConfig = _a.multilingualConfig;
30
+ var _k = (0, react_1.useState)(false), isMultiLanguageModalOpen = _k[0], setIsMultiLanguageModalOpen = _k[1];
31
+ var _l = (0, react_1.useState)(false), hasMultilingualValues = _l[0], setHasMultilingualValues = _l[1];
32
+ var _m = (0, react_1.useState)(function () {
33
+ return JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
34
+ }), hiddenInputValue = _m[0], setHiddenInputValue = _m[1];
35
+ // hiddenInput의 값이 있는지 확인하는 함수
36
+ var checkMultilingualValues = function () {
37
+ try {
38
+ var values = JSON.parse(hiddenInputValue || '{}');
39
+ var hasValues = Object.values(values).some(function (value) { return value && value.toString().trim() !== ''; });
40
+ setHasMultilingualValues(hasValues);
41
+ }
42
+ catch (_a) {
43
+ setHasMultilingualValues(false);
44
+ }
45
+ };
46
+ // initialValues가 변경될 때 hiddenInputValue 업데이트
47
+ (0, react_1.useEffect)(function () {
48
+ var newValue = JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
49
+ setHiddenInputValue(newValue);
50
+ }, [multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues]);
51
+ // hiddenInputValue가 변경될 때마다 체크
52
+ (0, react_1.useEffect)(function () {
53
+ checkMultilingualValues();
54
+ }, [hiddenInputValue]);
55
+ var handleLanguageButtonClick = function () {
56
+ // TinyEditor 모드일 때는 모달을 열지 않고 onTinyEditorAction 실행
57
+ if ((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.textFieldLineType) === 'tinyeditor') {
58
+ if (multilingualConfig.onTinyEditorAction) {
59
+ multilingualConfig.onTinyEditorAction();
60
+ }
61
+ return;
62
+ }
63
+ setIsMultiLanguageModalOpen(true);
64
+ };
65
+ var handleLanguageModalClose = function () {
66
+ setIsMultiLanguageModalOpen(false);
67
+ };
68
+ var handleHiddenInputUpdate = function (newValue) {
69
+ setHiddenInputValue(newValue);
70
+ };
71
+ return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BodyTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, __assign({ "$headerSize": headerSize }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, wordBreak: titleTextWordBreak, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), multilingualBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MultilingualButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconFillType: "line", iconName: "ic_translate", baseSize: "small", shapeType: "round", baseColorKey: "ui_cpnt_button_fill_base_default", iconColorKey: hasMultilingualValues ? 'ui_cpnt_button_icon_primary' : 'ui_cpnt_icon_sys_grey_02', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] })), 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 }), (0, jsx_runtime_1.jsx)(panels_1.MultilingualModal, { isOpen: isMultiLanguageModalOpen, onClose: handleLanguageModalClose, config: multilingualConfig, onHiddenInputUpdate: handleHiddenInputUpdate })] })), descText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, wordBreak: descTextWordBreak, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" })] })), contentText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, wordBreak: contentTextWordBreak, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" })] }))] })));
20
72
  }
73
+ var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: ", ";\n"], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: ", ";\n"])), function (_a) {
74
+ var $headerSize = _a.$headerSize;
75
+ if ($headerSize === 'small')
76
+ return '188px';
77
+ if ($headerSize === 'medium')
78
+ return '188px';
79
+ if ($headerSize === 'large')
80
+ return '432px';
81
+ if ($headerSize === 'rlarge')
82
+ return '100%';
83
+ });
84
+ var S_MultilingualButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n margin-left: ", ";\n"], ["\n align-items: center;\n display: flex;\n margin-left: ", ";\n"])), function (_a) {
85
+ var theme = _a.theme;
86
+ return theme.spacing.spacingB;
87
+ });
21
88
  exports.default = BodyTextGroup;
89
+ var templateObject_1, templateObject_2;
@@ -26,6 +26,7 @@ type Props = {
26
26
  returnType?: 'object' | 'string' | 'rawValue';
27
27
  deleteBtnMode?: 'none' | 'use';
28
28
  minPriceAmount?: string | number;
29
+ onExChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
29
30
  onChange?: (value: string) => void;
30
31
  onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
31
32
  onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
@@ -37,5 +38,5 @@ type Props = {
37
38
  displayValue: string;
38
39
  }) => void;
39
40
  } & Omit<Partial<TextFieldBaseProps>, 'textAlign' | 'preventBlankMode' | 'enterSubmitMode' | 'multiRows' | 'colorTheme'>;
40
- declare function PriceTextField({ name, hintText, defaultAmount, colorTheme, size, fontWeight, hintTextFontWeight, responsiveMode, state, dropdownState, customWidth, baseCurrency, currencies, decimalPlaces, exchangeRates, textAlign, validation, useRequiredValidation, returnType, deleteBtnMode, minPriceAmount, onChange, onBlur, onFocus, onTarget, onCurrencyChange, onValueChange }: Props): JSX.Element;
41
+ declare function PriceTextField({ name, hintText, defaultAmount, colorTheme, size, fontWeight, hintTextFontWeight, responsiveMode, state, dropdownState, customWidth, baseCurrency, currencies, decimalPlaces, exchangeRates, textAlign, validation, useRequiredValidation, returnType, deleteBtnMode, minPriceAmount, onChange, onExChange, onBlur, onFocus, onTarget, onCurrencyChange, onValueChange }: Props): JSX.Element;
41
42
  export default PriceTextField;
@@ -65,7 +65,7 @@ exports.DEFAULT_DECIMAL_PLACES = {
65
65
  function PriceTextField(_a) {
66
66
  var _b;
67
67
  var _c;
68
- var name = _a.name, hintText = _a.hintText, defaultAmount = _a.defaultAmount, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.fontWeight, fontWeight = _f === void 0 ? 'bold' : _f, _g = _a.hintTextFontWeight, hintTextFontWeight = _g === void 0 ? 'normal' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, _k = _a.dropdownState, dropdownState = _k === void 0 ? 'normal' : _k, customWidth = _a.customWidth, _l = _a.baseCurrency, baseCurrency = _l === void 0 ? pricing_1.CurrencyCode.KRW : _l, _m = _a.currencies, currencies = _m === void 0 ? [pricing_1.CurrencyCode.KRW, pricing_1.CurrencyCode.USD] : _m, _o = _a.decimalPlaces, decimalPlaces = _o === void 0 ? exports.DEFAULT_DECIMAL_PLACES : _o, _p = _a.exchangeRates, exchangeRates = _p === void 0 ? (_b = {}, _b[pricing_1.CurrencyCode.KRW] = 1300, _b[pricing_1.CurrencyCode.USD] = 1, _b) : _p, _q = _a.textAlign, textAlign = _q === void 0 ? 'right' : _q, validation = _a.validation, _r = _a.useRequiredValidation, useRequiredValidation = _r === void 0 ? 'use' : _r, _s = _a.returnType, returnType = _s === void 0 ? 'object' : _s, _t = _a.deleteBtnMode, deleteBtnMode = _t === void 0 ? 'use' : _t, minPriceAmount = _a.minPriceAmount, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onTarget = _a.onTarget, onCurrencyChange = _a.onCurrencyChange, onValueChange = _a.onValueChange;
68
+ var name = _a.name, hintText = _a.hintText, defaultAmount = _a.defaultAmount, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.fontWeight, fontWeight = _f === void 0 ? 'bold' : _f, _g = _a.hintTextFontWeight, hintTextFontWeight = _g === void 0 ? 'normal' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, _k = _a.dropdownState, dropdownState = _k === void 0 ? 'normal' : _k, customWidth = _a.customWidth, _l = _a.baseCurrency, baseCurrency = _l === void 0 ? pricing_1.CurrencyCode.KRW : _l, _m = _a.currencies, currencies = _m === void 0 ? [pricing_1.CurrencyCode.KRW, pricing_1.CurrencyCode.USD] : _m, _o = _a.decimalPlaces, decimalPlaces = _o === void 0 ? exports.DEFAULT_DECIMAL_PLACES : _o, _p = _a.exchangeRates, exchangeRates = _p === void 0 ? (_b = {}, _b[pricing_1.CurrencyCode.KRW] = 1300, _b[pricing_1.CurrencyCode.USD] = 1, _b) : _p, _q = _a.textAlign, textAlign = _q === void 0 ? 'right' : _q, validation = _a.validation, _r = _a.useRequiredValidation, useRequiredValidation = _r === void 0 ? 'use' : _r, _s = _a.returnType, returnType = _s === void 0 ? 'object' : _s, _t = _a.deleteBtnMode, deleteBtnMode = _t === void 0 ? 'use' : _t, minPriceAmount = _a.minPriceAmount, onChange = _a.onChange, onExChange = _a.onExChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onTarget = _a.onTarget, onCurrencyChange = _a.onCurrencyChange, onValueChange = _a.onValueChange;
69
69
  var t = (0, react_i18next_1.useTranslation)('translation').t;
70
70
  var _u = (0, react_1.useState)(defaultAmount ? String(defaultAmount) : ''), baseCurrencyValue = _u[0], setBaseCurrencyValue = _u[1];
71
71
  var _v = (0, react_1.useState)(''), displayValue = _v[0], setDisplayValue = _v[1];
@@ -321,6 +321,9 @@ function PriceTextField(_a) {
321
321
  }
322
322
  }, 0);
323
323
  }
324
+ if (onExChange) {
325
+ onExChange(e);
326
+ }
324
327
  };
325
328
  var handleBlur = function (e) {
326
329
  setIsInputFocused(false);
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import type { MultilingualConfig } from '../../../common/types';
3
+ type MultilingualModalModalProps = {
4
+ isOpen: boolean;
5
+ onClose: () => void;
6
+ config?: MultilingualConfig;
7
+ size?: 'large' | 'medium' | 'small' | 'rlarge';
8
+ onHiddenInputUpdate?: (newValue: string) => void;
9
+ };
10
+ declare function MultilingualModal({ isOpen, onClose, config, size, onHiddenInputUpdate }: MultilingualModalModalProps): import("react").ReactPortal | null;
11
+ export default MultilingualModal;
@@ -0,0 +1,199 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
17
+ var __importDefault = (this && this.__importDefault) || function (mod) {
18
+ return (mod && mod.__esModule) ? mod : { "default": mod };
19
+ };
20
+ Object.defineProperty(exports, "__esModule", { value: true });
21
+ var jsx_runtime_1 = require("react/jsx-runtime");
22
+ var react_1 = require("react");
23
+ var react_dom_1 = __importDefault(require("react-dom"));
24
+ var react_hook_form_1 = require("react-hook-form");
25
+ var react_i18next_1 = require("react-i18next");
26
+ var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
27
+ var components_1 = require("../../components");
28
+ var components_2 = require("../../../hybrid/components");
29
+ var styled_components_1 = __importDefault(require("styled-components"));
30
+ var LANGUAGE_I18N_KEYS = {
31
+ en: 'str_multilingual_en',
32
+ ko: 'str_multilingual_ko',
33
+ ja: 'str_multilingual_ja',
34
+ zh: 'str_multilingual_zh_cn',
35
+ 'zh-Hant': 'str_multilingual_zh_tw',
36
+ fr: 'str_multilingual_fr',
37
+ es: 'str_multilingual_es'
38
+ };
39
+ function MultilingualModal(_a) {
40
+ var _b, _c;
41
+ var isOpen = _a.isOpen, onClose = _a.onClose, config = _a.config, _d = _a.size, size = _d === void 0 ? 'medium' : _d, onHiddenInputUpdate = _a.onHiddenInputUpdate;
42
+ var t = (0, react_i18next_1.useTranslation)().t;
43
+ var allLangInReadonly = (_b = config === null || config === void 0 ? void 0 : config.visibleLanguages) === null || _b === void 0 ? void 0 : _b.every(function (item) { var _a; return (_a = config === null || config === void 0 ? void 0 : config.readonlyLanguages) === null || _a === void 0 ? void 0 : _a.includes(item); });
44
+ // FormProvider에서 사용할 기본값 계산
45
+ var getDefaultValues = function () {
46
+ if (!config)
47
+ return {};
48
+ // 먼저 hiddenInput에 저장된 값이 있는지 확인
49
+ if (config.hiddenInputId) {
50
+ var hiddenInputId = "hiddenInput_".concat(config.hiddenInputId);
51
+ var hiddenInput = document.getElementById(hiddenInputId);
52
+ if (hiddenInput && hiddenInput.value) {
53
+ var existingValues = JSON.parse(hiddenInput.value);
54
+ // 빈 객체가 아닌 경우에만 사용
55
+ if (Object.keys(existingValues).length > 0) {
56
+ return existingValues;
57
+ }
58
+ }
59
+ }
60
+ // hiddenInput에 값이 없으면 config.initialValues 사용
61
+ return config.initialValues || {};
62
+ };
63
+ var methods = (0, react_hook_form_1.useForm)({
64
+ defaultValues: getDefaultValues()
65
+ });
66
+ var container = (0, react_1.useState)(function () {
67
+ var modalRoot = document.createElement('div');
68
+ modalRoot.setAttribute('id', 'MultilingualModal');
69
+ return modalRoot;
70
+ })[0];
71
+ (0, react_1.useLayoutEffect)(function () {
72
+ if (!isOpen)
73
+ return;
74
+ var root = document.getElementById('root');
75
+ if (!root)
76
+ return;
77
+ root.appendChild(container);
78
+ return function () {
79
+ if (root.contains(container)) {
80
+ root.removeChild(container);
81
+ }
82
+ };
83
+ }, [isOpen, container]);
84
+ (0, react_1.useLayoutEffect)(function () {
85
+ if (isOpen && config) {
86
+ var newDefaultValues = getDefaultValues();
87
+ methods.reset(newDefaultValues);
88
+ }
89
+ }, [isOpen, config]);
90
+ var handleConfirm = function () {
91
+ var formValues = methods.getValues();
92
+ // hidden input에 다국어 값들을 JSON 형태로 저장
93
+ var newValue = JSON.stringify(formValues);
94
+ if (config === null || config === void 0 ? void 0 : config.hiddenInputId) {
95
+ var hiddenInputId = "hiddenInput_".concat(config.hiddenInputId);
96
+ var hiddenInput = document.getElementById(hiddenInputId);
97
+ if (hiddenInput) {
98
+ // BasicFormGroup의 state 업데이트
99
+ if (onHiddenInputUpdate) {
100
+ onHiddenInputUpdate(newValue);
101
+ }
102
+ // input change 이벤트 발생시켜서 form validation 등이 동작하도록 함
103
+ var event_1 = new Event('change', { bubbles: true });
104
+ hiddenInput.dispatchEvent(event_1);
105
+ }
106
+ }
107
+ if (config === null || config === void 0 ? void 0 : config.onApply) {
108
+ config.onApply(formValues);
109
+ }
110
+ onClose();
111
+ };
112
+ var handleCancel = function () {
113
+ onClose();
114
+ };
115
+ if (!isOpen)
116
+ return null;
117
+ 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('str_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" })] })), (_c = config === null || config === void 0 ? void 0 : config.visibleLanguages) === null || _c === void 0 ? void 0 : _c.map(function (languageCode, index) {
118
+ var _a, _b;
119
+ var isReadonly = (_a = config.readonlyLanguages) === null || _a === void 0 ? void 0 : _a.includes(languageCode);
120
+ 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")));
121
+ })] }), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, {}), (0, jsx_runtime_1.jsxs)(S_Right, { children: [!allLangInReadonly && ((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: allLangInReadonly ? t('str_confirm') : t('str_apply'), size: "medium", onClick: handleConfirm })] })] })] }))] })), container);
122
+ }
123
+ 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) {
124
+ var theme = _a.theme;
125
+ return theme.ui_cpnt_modal_dimmed;
126
+ }, animationStyle_1.modalOverlayOnAni);
127
+ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n left: 50%;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n left: 50%;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", ";\n\n ", "\n"])), function (_a) {
128
+ var theme = _a.theme;
129
+ return theme.ui_cpnt_modal_base;
130
+ }, function (_a) {
131
+ var theme = _a.theme;
132
+ return theme.ui_cpnt_modal_border;
133
+ }, function (_a) {
134
+ var theme = _a.theme;
135
+ return theme.boxShadow.elevation4;
136
+ }, function (_a) {
137
+ var size = _a.size;
138
+ var sizes = {
139
+ large: '960px',
140
+ medium: '688px',
141
+ small: '400px',
142
+ rlarge: '80vw'
143
+ };
144
+ return size && sizes[size];
145
+ }, animationStyle_1.modalOnAni);
146
+ var S_Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
147
+ var theme = _a.theme;
148
+ return theme.spacing.spacingC;
149
+ }, function (_a) {
150
+ var theme = _a.theme;
151
+ return theme.spacing.spacingE;
152
+ }, function (_a) {
153
+ var theme = _a.theme;
154
+ return theme.spacing.spacingE;
155
+ }, function (_a) {
156
+ var theme = _a.theme;
157
+ return theme.spacing.spacingE;
158
+ });
159
+ var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n max-height: 60vh;\n overflow: auto;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n flex: 1;\n max-height: 60vh;\n overflow: auto;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
160
+ var theme = _a.theme;
161
+ return theme.spacing.spacingF;
162
+ }, function (_a) {
163
+ var theme = _a.theme;
164
+ return theme.spacing.spacingE;
165
+ }, function (_a) {
166
+ var theme = _a.theme;
167
+ return theme.spacing.spacingE;
168
+ }, function (_a) {
169
+ var theme = _a.theme;
170
+ return theme.spacing.spacingD;
171
+ });
172
+ var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-top: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n border-top: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
173
+ var theme = _a.theme;
174
+ return theme.ui_cpnt_modal_border;
175
+ }, function (_a) {
176
+ var theme = _a.theme;
177
+ return theme.spacing.spacingD;
178
+ }, function (_a) {
179
+ var theme = _a.theme;
180
+ return theme.spacing.spacingE;
181
+ }, function (_a) {
182
+ var theme = _a.theme;
183
+ return theme.spacing.spacingE;
184
+ }, function (_a) {
185
+ var theme = _a.theme;
186
+ return theme.spacing.spacingD;
187
+ });
188
+ var S_Left = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
189
+ var theme = _a.theme;
190
+ return theme.spacing.spacingB;
191
+ });
192
+ var S_Btn2Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
193
+ var theme = _a.theme;
194
+ return theme.spacing.spacingB;
195
+ });
196
+ var S_Right = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
197
+ var S_LanguageField = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
198
+ exports.default = MultilingualModal;
199
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
@@ -0,0 +1 @@
1
+ export { default } from './MultilingualModal';
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.default = void 0;
7
+ var MultilingualModal_1 = require("./MultilingualModal");
8
+ Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MultilingualModal_1).default; } });
@@ -4,7 +4,8 @@ import { DesktopBasicModal } from './DesktopBasicModal';
4
4
  import { DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType } from './DesktopBasicModalWithTab';
5
5
  import { DesktopHeadlessModal } from './DesktopHeadlessModal';
6
6
  import { DesktopTutorialModal, DesktopTutorialModalInfoType } from './DesktopTutorialModal';
7
+ import MultilingualModal from './MultilingualModal';
7
8
  import { SectionSheet } from './SectionSheet';
8
- export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopBasicModalWithTab, DesktopHeadlessModal, DesktopTutorialModal, SectionSheet };
9
+ export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopBasicModalWithTab, DesktopHeadlessModal, DesktopTutorialModal, MultilingualModal, SectionSheet };
9
10
  export { DesktopBasicModalWithTabInfoType };
10
11
  export { DesktopTutorialModalInfoType };
@@ -1,6 +1,9 @@
1
1
  "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
2
5
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.SectionSheet = exports.DesktopTutorialModal = exports.DesktopHeadlessModal = exports.DesktopBasicModalWithTab = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
6
+ exports.SectionSheet = exports.MultilingualModal = exports.DesktopTutorialModal = exports.DesktopHeadlessModal = exports.DesktopBasicModalWithTab = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
4
7
  var AnnotationSheet_1 = require("./AnnotationSheet");
5
8
  Object.defineProperty(exports, "AnnotationSheet", { enumerable: true, get: function () { return AnnotationSheet_1.AnnotationSheet; } });
6
9
  var ContentSheet_1 = require("./ContentSheet");
@@ -13,5 +16,7 @@ var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
13
16
  Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });
14
17
  var DesktopTutorialModal_1 = require("./DesktopTutorialModal");
15
18
  Object.defineProperty(exports, "DesktopTutorialModal", { enumerable: true, get: function () { return DesktopTutorialModal_1.DesktopTutorialModal; } });
19
+ var MultilingualModal_1 = __importDefault(require("./MultilingualModal"));
20
+ exports.MultilingualModal = MultilingualModal_1.default;
16
21
  var SectionSheet_1 = require("./SectionSheet");
17
22
  Object.defineProperty(exports, "SectionSheet", { enumerable: true, get: function () { return SectionSheet_1.SectionSheet; } });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.196",
3
+ "version": "2.2.198",
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 Release Notes
2
- ## [v2.2.196]
2
+ ## [v2.2.198]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
- * [FIX] PriceTextLabel에서 i18n 체크 수정
6
+ * [PDS-1323] 다국어 관련 컴포넌트 변경 및 추가 건
7
7
 
@@ -1,9 +0,0 @@
1
- export interface IFormValues {
2
- [key: string]: string;
3
- }
4
- /**
5
- * 중첩된 객체 구조에서 점(.)으로 구분된 경로를 통해 에러 객체를 조회합니다
6
- */
7
- export declare const getErrorByName: (errors: {
8
- [x: string]: any;
9
- }, name: string) => any;
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getErrorByName = void 0;
4
- /**
5
- * 중첩된 객체 구조에서 점(.)으로 구분된 경로를 통해 에러 객체를 조회합니다
6
- */
7
- var getErrorByName = function (errors, name) {
8
- return name.split('.').reduce(function (errors, property) { return errors && errors[property]; }, errors);
9
- };
10
- exports.getErrorByName = getErrorByName;