pds-dev-kit-web-test 2.5.490 → 2.5.491

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 (82) hide show
  1. package/dist/index.d.ts +4 -4
  2. package/dist/index.js +4 -5
  3. package/dist/src/common/services/i18n/resources/en.json +42 -1
  4. package/dist/src/common/services/i18n/resources/es.json +41 -1
  5. package/dist/src/common/services/i18n/resources/fil.json +41 -1
  6. package/dist/src/common/services/i18n/resources/index.d.ts +285 -0
  7. package/dist/src/common/services/i18n/resources/ja.json +42 -1
  8. package/dist/src/common/services/i18n/resources/ko.json +42 -1
  9. package/dist/src/common/services/i18n/resources/zh-cn.json +42 -1
  10. package/dist/src/common/services/i18n/resources/zh-tw.json +42 -1
  11. package/dist/src/common/types/components.d.ts +9 -0
  12. package/dist/src/common/types/components.js +8 -0
  13. package/dist/src/common/types/index.d.ts +0 -1
  14. package/dist/src/common/types/index.js +0 -1
  15. package/dist/src/common/utils/dateHelper.d.ts +3 -0
  16. package/dist/src/common/utils/dateHelper.js +37 -0
  17. package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.d.ts +18 -1
  18. package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.js +46 -3
  19. package/dist/src/desktop/components/BoxItem/BoxItem.d.ts +1 -5
  20. package/dist/src/desktop/components/BoxItem/BoxItem.js +5 -8
  21. package/dist/src/desktop/components/Calendar/AllDaySchedulesSection.d.ts +13 -0
  22. package/dist/src/desktop/components/Calendar/AllDaySchedulesSection.js +132 -0
  23. package/dist/src/desktop/components/Calendar/Calendar.d.ts +4 -0
  24. package/dist/src/desktop/components/Calendar/Calendar.js +384 -0
  25. package/dist/src/desktop/components/Calendar/CurrentTimeIndicator.d.ts +7 -0
  26. package/dist/src/desktop/components/Calendar/CurrentTimeIndicator.js +48 -0
  27. package/dist/src/desktop/components/Calendar/DailyView.d.ts +17 -0
  28. package/dist/src/desktop/components/Calendar/DailyView.js +64 -0
  29. package/dist/src/desktop/components/Calendar/MonthlyView.d.ts +27 -0
  30. package/dist/src/desktop/components/Calendar/MonthlyView.js +263 -0
  31. package/dist/src/desktop/components/Calendar/MultiWeekSchedulesLayer.d.ts +19 -0
  32. package/dist/src/desktop/components/Calendar/MultiWeekSchedulesLayer.js +73 -0
  33. package/dist/src/desktop/components/Calendar/ScheduleItem.d.ts +16 -0
  34. package/dist/src/desktop/components/Calendar/ScheduleItem.js +50 -0
  35. package/dist/src/desktop/components/Calendar/TimeBasedScheduleItem.d.ts +9 -0
  36. package/dist/src/desktop/components/Calendar/TimeBasedScheduleItem.js +170 -0
  37. package/dist/src/desktop/components/Calendar/WeeklyView.d.ts +21 -0
  38. package/dist/src/desktop/components/Calendar/WeeklyView.js +91 -0
  39. package/dist/src/desktop/components/Calendar/YearlyView.d.ts +12 -0
  40. package/dist/src/desktop/components/Calendar/YearlyView.js +76 -0
  41. package/dist/src/desktop/components/Calendar/calendarUtils.d.ts +24 -0
  42. package/dist/src/desktop/components/Calendar/calendarUtils.js +112 -0
  43. package/dist/src/desktop/components/Calendar/constants.d.ts +1 -0
  44. package/dist/src/desktop/components/Calendar/constants.js +31 -0
  45. package/dist/src/desktop/components/Calendar/index.d.ts +10 -0
  46. package/dist/src/desktop/components/Calendar/index.js +37 -0
  47. package/dist/src/desktop/components/Calendar/timeFormatUtils.d.ts +16 -0
  48. package/dist/src/desktop/components/Calendar/timeFormatUtils.js +45 -0
  49. package/dist/src/desktop/components/Calendar/types.d.ts +60 -0
  50. package/dist/src/desktop/components/Calendar/types.js +2 -0
  51. package/dist/src/desktop/components/index.d.ts +2 -2
  52. package/dist/src/desktop/components/index.js +4 -4
  53. package/dist/src/desktop/index.d.ts +1 -1
  54. package/dist/src/desktop/index.js +2 -2
  55. package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.d.ts +23 -0
  56. package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.js +199 -0
  57. package/dist/src/desktop/panels/MultilingualModal/index.d.ts +1 -0
  58. package/dist/src/desktop/panels/MultilingualModal/index.js +8 -0
  59. package/dist/src/desktop/panels/index.d.ts +2 -1
  60. package/dist/src/desktop/panels/index.js +6 -1
  61. package/dist/src/mobile/components/BoxItem/BoxItem.d.ts +1 -5
  62. package/dist/src/mobile/components/BoxItem/BoxItem.js +5 -7
  63. package/dist/src/mobile/components/index.d.ts +1 -2
  64. package/dist/src/mobile/components/index.js +1 -3
  65. package/dist/src/mobile/index.d.ts +1 -1
  66. package/dist/src/mobile/index.js +2 -3
  67. package/package.json +1 -1
  68. package/release-note.md +2 -2
  69. package/dist/src/common/types/form.d.ts +0 -9
  70. package/dist/src/common/types/form.js +0 -10
  71. package/dist/src/desktop/components/Snackbar/Snackbar.d.ts +0 -16
  72. package/dist/src/desktop/components/Snackbar/Snackbar.js +0 -209
  73. package/dist/src/desktop/components/Snackbar/index.d.ts +0 -1
  74. package/dist/src/desktop/components/Snackbar/index.js +0 -8
  75. package/dist/src/desktop/components/Snackbar/provider.d.ts +0 -11
  76. package/dist/src/desktop/components/Snackbar/provider.js +0 -52
  77. package/dist/src/mobile/components/Snackbar/Snackbar.d.ts +0 -16
  78. package/dist/src/mobile/components/Snackbar/Snackbar.js +0 -209
  79. package/dist/src/mobile/components/Snackbar/index.d.ts +0 -1
  80. package/dist/src/mobile/components/Snackbar/index.js +0 -8
  81. package/dist/src/mobile/components/Snackbar/provider.d.ts +0 -11
  82. package/dist/src/mobile/components/Snackbar/provider.js +0 -52
@@ -33,6 +33,47 @@
33
33
  "str_3890": "목",
34
34
  "str_3891": "금",
35
35
  "str_3892": "토",
36
- "str_3893": "일"
36
+ "str_3893": "일",
37
+ "calendar_all_day": "종일",
38
+ "calendar_more_schedules": "개 더보기",
39
+ "calendar_today": "오늘",
40
+ "calendar_month_1": "1월",
41
+ "calendar_month_2": "2월",
42
+ "calendar_month_3": "3월",
43
+ "calendar_month_4": "4월",
44
+ "calendar_month_5": "5월",
45
+ "calendar_month_6": "6월",
46
+ "calendar_month_7": "7월",
47
+ "calendar_month_8": "8월",
48
+ "calendar_month_9": "9월",
49
+ "calendar_month_10": "10월",
50
+ "calendar_month_11": "11월",
51
+ "calendar_month_12": "12월",
52
+ "calendar_time_am": "오전",
53
+ "calendar_time_pm": "오후",
54
+ "calendar_time_hour": "시",
55
+ "calendar_duration_hour": "시간",
56
+ "calendar_duration_hours": "시간",
57
+ "calendar_time_noon": "점심",
58
+ "calendar_header_daily": "{{year}}년 {{month}} {{day}}일 {{dayText}}요일",
59
+ "calendar_header_weekly_same_month": "{{month}} {{startDay}}일 - {{endDay}}일",
60
+ "calendar_header_weekly_diff_month": "{{startMonth}} {{startDay}}일 - {{endMonth}} {{endDay}}일",
61
+ "calendar_header_monthly": "{{year}}년 {{month}}",
62
+ "calendar_view_monthly": "월간",
63
+ "calendar_view_weekly": "주간",
64
+ "calendar_view_daily": "일간",
65
+ "calendar_view_yearly": "연간",
66
+ "calendar_date_format": "{{day}}일 ({{dayText}})",
67
+ "multilingual_settings": "다국어 설정",
68
+ "str_multilingual_ko": "한국어",
69
+ "str_multilingual_en": "영어",
70
+ "str_multilingual_ja": "일본어",
71
+ "str_multilingual_zh_cn": "중국어 (간체)",
72
+ "str_multilingual_zh_tw": "중국어 (번체)",
73
+ "str_multilingual_fr": "프랑스어",
74
+ "str_multilingual_es": "스페인어",
75
+ "str_9071": "국가에 맞는 언어를 입력해 주세요.",
76
+ "apply": "적용",
77
+ "cancel": "취소"
37
78
  }
38
79
  }
@@ -33,6 +33,47 @@
33
33
  "str_3890": "Thu",
34
34
  "str_3891": "Fri",
35
35
  "str_3892": "Sat",
36
- "str_3893": "Sun"
36
+ "str_3893": "Sun",
37
+ "calendar_all_day": "全天",
38
+ "calendar_more_schedules": "更多",
39
+ "calendar_today": "今天",
40
+ "calendar_month_1": "1月",
41
+ "calendar_month_2": "2月",
42
+ "calendar_month_3": "3月",
43
+ "calendar_month_4": "4月",
44
+ "calendar_month_5": "5月",
45
+ "calendar_month_6": "6月",
46
+ "calendar_month_7": "7月",
47
+ "calendar_month_8": "8月",
48
+ "calendar_month_9": "9月",
49
+ "calendar_month_10": "10月",
50
+ "calendar_month_11": "11月",
51
+ "calendar_month_12": "12月",
52
+ "calendar_time_am": "上午",
53
+ "calendar_time_pm": "下午",
54
+ "calendar_time_hour": "时",
55
+ "calendar_duration_hour": "小时",
56
+ "calendar_duration_hours": "小时",
57
+ "calendar_time_noon": "中午",
58
+ "calendar_header_daily": "{{year}}年{{month}}{{day}}日 {{dayText}}",
59
+ "calendar_header_weekly_same_month": "{{month}}{{startDay}}日 - {{endDay}}日",
60
+ "calendar_header_weekly_diff_month": "{{startMonth}}{{startDay}}日 - {{endMonth}}{{endDay}}日",
61
+ "calendar_header_monthly": "{{year}}年{{month}}",
62
+ "calendar_view_monthly": "月",
63
+ "calendar_view_weekly": "周",
64
+ "calendar_view_daily": "日",
65
+ "calendar_view_yearly": "年",
66
+ "calendar_date_format": "{{day}}日 ({{dayText}})",
67
+ "multilingual_settings": "多语言设置",
68
+ "str_multilingual_ko": "韩语",
69
+ "str_multilingual_en": "英语",
70
+ "str_multilingual_ja": "日语",
71
+ "str_multilingual_zh_cn": "中文(简体)",
72
+ "str_multilingual_zh_tw": "中文(繁体)",
73
+ "str_multilingual_fr": "法语",
74
+ "str_multilingual_es": "西班牙语",
75
+ "str_9071": "请输入适合您国家的语言。",
76
+ "apply": "应用",
77
+ "cancel": "取消"
37
78
  }
38
79
  }
@@ -33,6 +33,47 @@
33
33
  "str_3890": "Thu",
34
34
  "str_3891": "Fri",
35
35
  "str_3892": "Sat",
36
- "str_3893": "Sun"
36
+ "str_3893": "Sun",
37
+ "calendar_all_day": "全天",
38
+ "calendar_more_schedules": "更多",
39
+ "calendar_today": "今天",
40
+ "calendar_month_1": "1月",
41
+ "calendar_month_2": "2月",
42
+ "calendar_month_3": "3月",
43
+ "calendar_month_4": "4月",
44
+ "calendar_month_5": "5月",
45
+ "calendar_month_6": "6月",
46
+ "calendar_month_7": "7月",
47
+ "calendar_month_8": "8月",
48
+ "calendar_month_9": "9月",
49
+ "calendar_month_10": "10月",
50
+ "calendar_month_11": "11月",
51
+ "calendar_month_12": "12月",
52
+ "calendar_time_am": "上午",
53
+ "calendar_time_pm": "下午",
54
+ "calendar_time_hour": "時",
55
+ "calendar_duration_hour": "小時",
56
+ "calendar_duration_hours": "小時",
57
+ "calendar_time_noon": "中午",
58
+ "calendar_header_daily": "{{year}}年{{month}}{{day}}日 {{dayText}}",
59
+ "calendar_header_weekly_same_month": "{{month}}{{startDay}}日 - {{endDay}}日",
60
+ "calendar_header_weekly_diff_month": "{{startMonth}}{{startDay}}日 - {{endMonth}}{{endDay}}日",
61
+ "calendar_header_monthly": "{{year}}年{{month}}",
62
+ "calendar_view_monthly": "月",
63
+ "calendar_view_weekly": "周",
64
+ "calendar_view_daily": "日",
65
+ "calendar_view_yearly": "年",
66
+ "calendar_date_format": "{{day}}日 ({{dayText}})",
67
+ "multilingual_settings": "多語言設置",
68
+ "str_multilingual_ko": "韓語",
69
+ "str_multilingual_en": "英語",
70
+ "str_multilingual_ja": "日語",
71
+ "str_multilingual_zh_cn": "中文(簡體)",
72
+ "str_multilingual_zh_tw": "中文(繁體)",
73
+ "str_multilingual_fr": "法語",
74
+ "str_multilingual_es": "西班牙語",
75
+ "str_9071": "請輸入適合您國家的語言。",
76
+ "apply": "應用",
77
+ "cancel": "取消"
37
78
  }
38
79
  }
@@ -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,4 +1,3 @@
1
- export * from './form';
2
1
  export * from './icon';
3
2
  export * from './styled-components';
4
3
  export * from './text';
@@ -14,7 +14,6 @@ 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);
@@ -10,4 +10,7 @@ export declare class DateHelper {
10
10
  static addMonths(date: Date, diff: number): Date;
11
11
  static addDays(date: Date, diff: number): Date;
12
12
  static getCalendarDates(monthDate: Date, startOfWeek: 'sunday' | 'monday'): Date[];
13
+ static endOfMonth(date: Date): Date;
14
+ static getCalendarDatesForCalendar(monthDate: Date, startOfWeek: 'sunday' | 'monday'): Date[];
15
+ static getDatesInRange(startDate: Date, endDate: Date): Date[];
13
16
  }
@@ -82,6 +82,43 @@ var DateHelper = /** @class */ (function () {
82
82
  var calendarStart = this.addDays(start, -offset);
83
83
  return Array.from({ length: 42 }, function (_, i) { return _this.addDays(calendarStart, i); });
84
84
  };
85
+ /*
86
+ * 월의 마지막 날짜 반환
87
+ */
88
+ DateHelper.endOfMonth = function (date) {
89
+ return new Date(date.getFullYear(), date.getMonth() + 1, 0);
90
+ };
91
+ /*
92
+ * 일반 캘린더처럼 현재 달의 날짜만 표시하고, 필요한 경우에만 이전/다음 달의 날짜를 포함
93
+ */
94
+ DateHelper.getCalendarDatesForCalendar = function (monthDate, startOfWeek) {
95
+ var start = this.startOfMonth(monthDate);
96
+ var end = this.endOfMonth(monthDate);
97
+ var startIndex = startOfWeek === 'monday' ? 1 : 0;
98
+ // 시작 날짜의 요일 조정
99
+ var startOffset = (start.getDay() - startIndex + 7) % 7;
100
+ var calendarStart = this.addDays(start, -startOffset);
101
+ // 마지막 날짜의 요일 조정
102
+ var endOffset = (6 - end.getDay() + startIndex) % 7;
103
+ var calendarEnd = this.addDays(end, endOffset);
104
+ // 전체 날짜 배열 생성
105
+ var dates = [];
106
+ var currentDate = new Date(calendarStart);
107
+ while (currentDate <= calendarEnd) {
108
+ dates.push(new Date(currentDate));
109
+ currentDate = this.addDays(currentDate, 1);
110
+ }
111
+ return dates;
112
+ };
113
+ DateHelper.getDatesInRange = function (startDate, endDate) {
114
+ var dates = [];
115
+ var currentDate = new Date(startDate);
116
+ while (currentDate <= endDate) {
117
+ dates.push(new Date(currentDate));
118
+ currentDate.setDate(currentDate.getDate() + 1);
119
+ }
120
+ return dates;
121
+ };
85
122
  return DateHelper;
86
123
  }());
87
124
  exports.DateHelper = DateHelper;
@@ -1,5 +1,18 @@
1
1
  /// <reference types="react" />
2
2
  import type { PDSTextType } from '../../../common';
3
+ 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';
4
+ type MultilingualConfig = {
5
+ originalText?: string;
6
+ initialValues?: {
7
+ [key in LanguageCode]?: string;
8
+ };
9
+ visibleLanguages?: LanguageCode[];
10
+ readonlyLanguages?: LanguageCode[];
11
+ hiddenInputId: string;
12
+ onApply?: (values: {
13
+ [key in LanguageCode]?: string;
14
+ }) => void;
15
+ };
3
16
  type BasicFormGroupProps = {
4
17
  titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
5
18
  titleText?: PDSTextType;
@@ -7,6 +20,10 @@ type BasicFormGroupProps = {
7
20
  captionText?: PDSTextType;
8
21
  inputForm?: JSX.Element;
9
22
  titleRequirementMode?: 'use' | 'none';
23
+ multilingualMode?: 'use' | 'none';
24
+ multilingualBtnState?: 'normal' | 'disabled';
25
+ multilingualConfig?: MultilingualConfig;
10
26
  };
11
- declare function BasicFormGroup({ titleStyleTheme, titleText, descText, captionText, inputForm, titleRequirementMode }: BasicFormGroupProps): JSX.Element;
27
+ declare function BasicFormGroup({ titleStyleTheme, titleText, descText, captionText, inputForm, titleRequirementMode, multilingualMode, multilingualBtnState, multilingualConfig }: BasicFormGroupProps): JSX.Element;
12
28
  export default BasicFormGroup;
29
+ export type { LanguageCode, MultilingualConfig };
@@ -19,17 +19,60 @@ 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");
22
23
  var styled_components_1 = __importDefault(require("styled-components"));
23
24
  var hybrid_1 = require("../../../hybrid");
25
+ var panels_1 = require("../../panels");
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, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm, _c = _a.titleRequirementMode, titleRequirementMode = _c === void 0 ? 'none' : _c, _d = _a.multilingualMode, multilingualMode = _d === void 0 ? 'none' : _d, _e = _a.multilingualBtnState, multilingualBtnState = _e === void 0 ? 'normal' : _e, multilingualConfig = _a.multilingualConfig;
30
+ var _f = (0, react_1.useState)(false), isMultiLanguageModalOpen = _f[0], setIsMultiLanguageModalOpen = _f[1];
31
+ var _g = (0, react_1.useState)(false), hasMultilingualValues = _g[0], setHasMultilingualValues = _g[1];
32
+ var _h = (0, react_1.useState)(function () {
33
+ return JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
34
+ }), hiddenInputValue = _h[0], setHiddenInputValue = _h[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
+ setIsMultiLanguageModalOpen(true);
57
+ };
58
+ var handleLanguageModalClose = function () {
59
+ setIsMultiLanguageModalOpen(false);
60
+ };
61
+ var handleHiddenInputUpdate = function (newValue) {
62
+ setHiddenInputValue(newValue);
63
+ };
64
+ 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" }) })), multilingualMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MultilingualButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_language", baseSize: "small", shapeType: "round", baseColorKey: "ui_cpnt_button_icon_default", iconColorKey: hasMultilingualValues
65
+ ? 'ui_cpnt_button_fill_base_primary'
66
+ : 'ui_cpnt_button_fill_base_disabled', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), multilingualMode === '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)(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" })] }))] })));
28
67
  }
29
68
  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
69
  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) {
31
70
  var theme = _a.theme;
32
71
  return theme.spacing.spacingA;
33
72
  });
73
+ var S_MultilingualButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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) {
74
+ var theme = _a.theme;
75
+ return theme.spacing.spacingB;
76
+ });
34
77
  exports.default = BasicFormGroup;
35
- var templateObject_1, templateObject_2;
78
+ var templateObject_1, templateObject_2, templateObject_3;
@@ -11,10 +11,8 @@ export type BoxItemProps = {
11
11
  titleFontSize?: 'subTitleBold' | 'leadParaBold' | 'body2Bold' | 'headingBold';
12
12
  titleTextLineLimit?: number;
13
13
  titleTextColorKey?: UiColors;
14
- titleTextWordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
15
14
  descText?: PDSTextType;
16
15
  descTextColorKey?: UiColors;
17
- descTextWordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
18
16
  descLineLimit?: number;
19
17
  imageMode?: 'use' | 'none';
20
18
  imageShapeType?: 'round' | 'circular' | 'rectangle';
@@ -24,8 +22,6 @@ export type BoxItemProps = {
24
22
  imageScaleType?: 'none' | 'cover' | 'contain' | 'fill';
25
23
  chipMode?: 'use' | 'none';
26
24
  chipText?: PDSTextType;
27
- chipOverrideTextColorKey?: UiColors;
28
- chipOverrideBackgroundColorKey?: UiColors;
29
25
  displayType?: 'none' | 'ibtn_amount1' | 'ibtn_amount2' | 'ibtn_amount3';
30
26
  iBtn1IconName?: PDSIconType;
31
27
  iBtn1IconFillType?: 'fill' | 'line';
@@ -62,5 +58,5 @@ declare const paddingSpacing: {
62
58
  readonly spacing_m: "spacingM";
63
59
  readonly spacing_n: "spacingN";
64
60
  };
65
- declare function BoxItem({ selectionMode, checkboxMode, indicatorMode, state, selectState, titleText, titleFontSize, titleTextLineLimit, titleTextColorKey, titleTextWordBreak, descText, descTextColorKey, descTextWordBreak, descLineLimit, imageMode, imageShapeType, imageSrc, imageWidth, imageRatio, imageScaleType, chipMode, chipText, chipOverrideTextColorKey, chipOverrideBackgroundColorKey, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, iBtn3IconName, iBtn3IconFillType, iBtn3IconColorKey, paddingTop, paddingRight, paddingBottom, paddingLeft, id, onClick, onClickIBtn1, onClickIBtn2, onClickIBtn3 }: BoxItemProps): JSX.Element;
61
+ declare function BoxItem({ selectionMode, checkboxMode, indicatorMode, state, selectState, titleText, titleFontSize, titleTextLineLimit, titleTextColorKey, descText, descTextColorKey, descLineLimit, imageMode, imageShapeType, imageSrc, imageWidth, imageRatio, imageScaleType, chipMode, chipText, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, iBtn3IconName, iBtn3IconFillType, iBtn3IconColorKey, paddingTop, paddingRight, paddingBottom, paddingLeft, id, onClick, onClickIBtn1, onClickIBtn2, onClickIBtn3 }: BoxItemProps): JSX.Element;
66
62
  export default BoxItem;
@@ -42,7 +42,7 @@ var paddingSpacing = {
42
42
  spacing_n: 'spacingN'
43
43
  };
44
44
  function BoxItem(_a) {
45
- var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.indicatorMode, indicatorMode = _d === void 0 ? 'none' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.selectState, selectState = _f === void 0 ? 'unselected' : _f, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _g = _a.titleTextLineLimit, titleTextLineLimit = _g === void 0 ? 2 : _g, _h = _a.titleTextColorKey, titleTextColorKey = _h === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _h, _j = _a.titleTextWordBreak, titleTextWordBreak = _j === void 0 ? 'normal' : _j, descText = _a.descText, _k = _a.descTextColorKey, descTextColorKey = _k === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _k, _l = _a.descTextWordBreak, descTextWordBreak = _l === void 0 ? 'normal' : _l, _m = _a.descLineLimit, descLineLimit = _m === void 0 ? 2 : _m, _o = _a.imageMode, imageMode = _o === void 0 ? 'none' : _o, _p = _a.imageShapeType, imageShapeType = _p === void 0 ? 'round' : _p, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _q = _a.imageRatio, imageRatio = _q === void 0 ? '1_1' : _q, _r = _a.imageScaleType, imageScaleType = _r === void 0 ? 'cover' : _r, _s = _a.chipMode, chipMode = _s === void 0 ? 'none' : _s, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _t = _a.displayType, displayType = _t === void 0 ? 'none' : _t, iBtn1IconName = _a.iBtn1IconName, _u = _a.iBtn1IconFillType, iBtn1IconFillType = _u === void 0 ? 'line' : _u, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _v = _a.iBtn2IconFillType, iBtn2IconFillType = _v === void 0 ? 'line' : _v, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, _w = _a.iBtn3IconFillType, iBtn3IconFillType = _w === void 0 ? 'line' : _w, iBtn3IconColorKey = _a.iBtn3IconColorKey, _x = _a.paddingTop, paddingTop = _x === void 0 ? 'spacing_d' : _x, _y = _a.paddingRight, paddingRight = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingBottom, paddingBottom = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingLeft, paddingLeft = _0 === void 0 ? 'spacing_d' : _0, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
45
+ var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.indicatorMode, indicatorMode = _d === void 0 ? 'none' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.selectState, selectState = _f === void 0 ? 'unselected' : _f, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _g = _a.titleTextLineLimit, titleTextLineLimit = _g === void 0 ? 2 : _g, _h = _a.titleTextColorKey, titleTextColorKey = _h === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _h, descText = _a.descText, _j = _a.descTextColorKey, descTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _j, _k = _a.descLineLimit, descLineLimit = _k === void 0 ? 2 : _k, _l = _a.imageMode, imageMode = _l === void 0 ? 'none' : _l, _m = _a.imageShapeType, imageShapeType = _m === void 0 ? 'round' : _m, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _o = _a.imageRatio, imageRatio = _o === void 0 ? '1_1' : _o, _p = _a.imageScaleType, imageScaleType = _p === void 0 ? 'cover' : _p, _q = _a.chipMode, chipMode = _q === void 0 ? 'none' : _q, chipText = _a.chipText, _r = _a.displayType, displayType = _r === void 0 ? 'none' : _r, iBtn1IconName = _a.iBtn1IconName, _s = _a.iBtn1IconFillType, iBtn1IconFillType = _s === void 0 ? 'line' : _s, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _t = _a.iBtn2IconFillType, iBtn2IconFillType = _t === void 0 ? 'line' : _t, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, _u = _a.iBtn3IconFillType, iBtn3IconFillType = _u === void 0 ? 'line' : _u, iBtn3IconColorKey = _a.iBtn3IconColorKey, _v = _a.paddingTop, paddingTop = _v === void 0 ? 'spacing_d' : _v, _w = _a.paddingRight, paddingRight = _w === void 0 ? 'spacing_d' : _w, _x = _a.paddingBottom, paddingBottom = _x === void 0 ? 'spacing_d' : _x, _y = _a.paddingLeft, paddingLeft = _y === void 0 ? 'spacing_d' : _y, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
46
46
  var handleClick = function () {
47
47
  if (state === 'disabled') {
48
48
  return;
@@ -87,9 +87,8 @@ function BoxItem(_a) {
87
87
  flexDirection: 'row',
88
88
  alignItems: 'center',
89
89
  justifyContent: 'space-between',
90
- maxWidth: '100%',
91
90
  cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
92
- } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { selected: selectState === 'selected', isIndeterminate: checkboxMode === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : titleTextColorKey, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [chipMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, iconSize: 20, state: state, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, state: state, onClick: handleIBtn1Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, state: state, onClick: handleIBtn3Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((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)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] }))] })) })));
91
+ } }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftBox, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox, __assign({ hasRightBox: true }, { children: (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { selected: selectState === 'selected', isIndeterminate: checkboxMode === 'indeterminate' }) }))), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : titleTextColorKey, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [chipMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, iconSize: 20, state: state, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, state: state, onClick: handleIBtn1Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, state: state, onClick: handleIBtn3Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((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)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
93
92
  }
94
93
  var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"])), function (_a) {
95
94
  var theme = _a.theme;
@@ -99,9 +98,7 @@ var S_TextGroup = styled_components_1.default.div(templateObject_2 || (templateO
99
98
  var theme = _a.theme;
100
99
  return theme.spacing.spacingA;
101
100
  });
102
- var S_RightBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: ", ";\n flex-direction: row;\n justify-content: flex-end;\n"], ["\n align-items: center;\n display: flex;\n flex: ", ";\n flex-direction: row;\n justify-content: flex-end;\n"])), function (_a) {
103
- var hasRightBox = _a.hasRightBox;
104
- return hasRightBox && 3;
105
- });
101
+ var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n"])));
102
+ var S_RightBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n"])));
106
103
  exports.default = BoxItem;
107
- var templateObject_1, templateObject_2, templateObject_3;
104
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
@@ -0,0 +1,13 @@
1
+ import type { Schedule, displayAllDayScheduleMode } from './types';
2
+ import type React from 'react';
3
+ interface AllDaySchedulesSectionProps {
4
+ calendarDates: Date[];
5
+ displayAllDayScheduleMode?: displayAllDayScheduleMode;
6
+ getSchedulesForDate: (date: Date) => Schedule[];
7
+ renderScheduleItem: (schedule: Schedule, extraProps?: any) => React.ReactNode;
8
+ handleDateDragOver: (date: Date, e: React.DragEvent) => void;
9
+ handleDateDragLeave: () => void;
10
+ handleDateDrop: (date: Date, e: React.DragEvent) => void;
11
+ }
12
+ export declare const AllDaySchedulesSection: React.FC<AllDaySchedulesSectionProps>;
13
+ export {};
@@ -0,0 +1,132 @@
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
+ exports.AllDaySchedulesSection = void 0;
22
+ var jsx_runtime_1 = require("react/jsx-runtime");
23
+ var react_1 = require("react");
24
+ var react_i18next_1 = require("react-i18next");
25
+ var styled_components_1 = __importDefault(require("styled-components"));
26
+ var TextLabel_1 = require("../TextLabel");
27
+ var calendarUtils_1 = require("./calendarUtils");
28
+ var AllDaySchedulesSection = function (_a) {
29
+ var calendarDates = _a.calendarDates, _b = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _b === void 0 ? 'use' : _b, getSchedulesForDate = _a.getSchedulesForDate, renderScheduleItem = _a.renderScheduleItem, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop;
30
+ var t = (0, react_i18next_1.useTranslation)().t;
31
+ // 다중 날짜 종일 이벤트 계산
32
+ var multiDayAllDaySchedules = (0, react_1.useMemo)(function () {
33
+ var allSchedules = new Map();
34
+ var multiDaySchedules = [];
35
+ // 모든 종일 이벤트 수집
36
+ calendarDates.forEach(function (date) {
37
+ var schedulesForDate = getSchedulesForDate(date);
38
+ schedulesForDate.forEach(function (schedule) {
39
+ if (!(0, calendarUtils_1.calculateIsAllDay)(new Date(schedule.startDate), new Date(schedule.endDate))) {
40
+ return;
41
+ }
42
+ var scheduleStart = new Date(schedule.startDate);
43
+ var scheduleEnd = new Date(schedule.endDate);
44
+ scheduleStart.setHours(0, 0, 0, 0);
45
+ scheduleEnd.setHours(0, 0, 0, 0);
46
+ // 단일 날짜 종일 이벤트는 제외
47
+ if (scheduleStart.getTime() === scheduleEnd.getTime()) {
48
+ return;
49
+ }
50
+ allSchedules.set(schedule.id, schedule);
51
+ });
52
+ });
53
+ // 주간 뷰의 시작/끝 날짜 계산
54
+ var weekStart = new Date(calendarDates[0]);
55
+ var weekEnd = new Date(calendarDates[calendarDates.length - 1]);
56
+ weekStart.setHours(0, 0, 0, 0);
57
+ weekEnd.setHours(0, 0, 0, 0);
58
+ // 다중 날짜 이벤트의 위치 계산
59
+ var scheduleIndexCounter = 0;
60
+ allSchedules.forEach(function (schedule) {
61
+ var scheduleStart = new Date(schedule.startDate);
62
+ var scheduleEnd = new Date(schedule.endDate);
63
+ scheduleStart.setHours(0, 0, 0, 0);
64
+ scheduleEnd.setHours(0, 0, 0, 0);
65
+ // 이벤트가 현재 주와 교차하지 않으면 건너뛰기
66
+ var isIntersecting = !(scheduleEnd.getTime() < weekStart.getTime() || scheduleStart.getTime() > weekEnd.getTime());
67
+ if (!isIntersecting) {
68
+ return;
69
+ }
70
+ // 표시할 실제 시작/끝 날짜 계산 (주간 뷰 범위 내로 제한)
71
+ var displayStart = new Date(Math.max(scheduleStart.getTime(), weekStart.getTime()));
72
+ var displayEnd = new Date(Math.min(scheduleEnd.getTime(), weekEnd.getTime()));
73
+ // 시작과 끝 컬럼 찾기
74
+ var startIndex = calendarDates.findIndex(function (date) {
75
+ var d = new Date(date);
76
+ d.setHours(0, 0, 0, 0);
77
+ return d.getTime() === displayStart.getTime();
78
+ });
79
+ var endIndex = calendarDates.findIndex(function (date) {
80
+ var d = new Date(date);
81
+ d.setHours(0, 0, 0, 0);
82
+ return d.getTime() === displayEnd.getTime();
83
+ });
84
+ if (startIndex === -1 || endIndex === -1) {
85
+ return;
86
+ }
87
+ var startCol = startIndex + 2; // 라벨 컬럼(1) + 0-based 인덱스 보정
88
+ var endCol = endIndex + 2;
89
+ multiDaySchedules.push({
90
+ schedule: schedule,
91
+ startCol: startCol,
92
+ endCol: endCol,
93
+ scheduleIndex: scheduleIndexCounter
94
+ });
95
+ scheduleIndexCounter += 1;
96
+ });
97
+ return multiDaySchedules;
98
+ }, [calendarDates, getSchedulesForDate]);
99
+ if (displayAllDayScheduleMode === 'none') {
100
+ return null;
101
+ }
102
+ return ((0, jsx_runtime_1.jsxs)(S_WeeklyAllDaySection, __assign({ "$rowCount": Math.max(1, multiDayAllDaySchedules.length) }, { children: [(0, jsx_runtime_1.jsx)(S_AllDayLabel, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption1Regular", colorTheme: "sysTextTertiary", text: t('calendar_all_day') }) }), (0, jsx_runtime_1.jsx)(S_WeeklyAllDayGrid, { children: calendarDates.map(function (date, index) {
103
+ // 단일 날짜 종일 이벤트만 표시
104
+ var singleDayAllDaySchedules = getSchedulesForDate(date).filter(function (schedule) {
105
+ var isAllDay = (0, calendarUtils_1.calculateIsAllDay)(new Date(schedule.startDate), new Date(schedule.endDate));
106
+ if (!isAllDay)
107
+ return false;
108
+ var scheduleStart = new Date(schedule.startDate);
109
+ var scheduleEnd = new Date(schedule.endDate);
110
+ scheduleStart.setHours(0, 0, 0, 0);
111
+ scheduleEnd.setHours(0, 0, 0, 0);
112
+ // 단일 날짜 종일 이벤트만 포함
113
+ return scheduleStart.getTime() === scheduleEnd.getTime();
114
+ });
115
+ return ((0, jsx_runtime_1.jsx)(S_WeeklyAllDayCell, __assign({ onDragOver: function (e) { return handleDateDragOver(date, e); }, onDragLeave: handleDateDragLeave, onDrop: function (e) { return handleDateDrop(date, e); } }, { children: singleDayAllDaySchedules.map(function (schedule) { return renderScheduleItem(schedule); }) }), index));
116
+ }) }), multiDayAllDaySchedules.map(function (_a) {
117
+ var schedule = _a.schedule, startCol = _a.startCol, endCol = _a.endCol, scheduleIndex = _a.scheduleIndex;
118
+ return ((0, jsx_runtime_1.jsx)(S_MultiDayAllDaySchedule, __assign({ "$startCol": startCol, "$endCol": endCol, "$scheduleIndex": scheduleIndex }, { children: renderScheduleItem(schedule) }), "multi-".concat(schedule.id)));
119
+ })] })));
120
+ };
121
+ exports.AllDaySchedulesSection = AllDaySchedulesSection;
122
+ var S_WeeklyAllDaySection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n display: grid;\n grid-template-columns: 80px repeat(7, 1fr);\n grid-template-rows: repeat(", ", 24px);\n min-height: 40px;\n position: relative;\n"], ["\n border-bottom: 1px solid ", ";\n display: grid;\n grid-template-columns: 80px repeat(7, 1fr);\n grid-template-rows: repeat(", ", 24px);\n min-height: 40px;\n position: relative;\n"])), function (_a) {
123
+ var theme = _a.theme;
124
+ return theme.ui_cpnt_divider;
125
+ }, function (props) { return props.$rowCount; });
126
+ var S_AllDayLabel = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: center;\n padding: 8px;\n"], ["\n align-items: center;\n display: flex;\n justify-content: center;\n padding: 8px;\n"])));
127
+ var S_WeeklyAllDayGrid = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: contents;\n"], ["\n display: contents;\n"])));
128
+ var S_WeeklyAllDayCell = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n gap: 2px;\n padding: 4px;\n"], ["\n align-items: center;\n display: flex;\n gap: 2px;\n padding: 4px;\n"])));
129
+ var S_MultiDayAllDaySchedule = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n grid-area: ", ";\n margin: 2px;\n position: relative;\n z-index: 10;\n"], ["\n grid-area: ", ";\n margin: 2px;\n position: relative;\n z-index: 10;\n"])), function (props) {
130
+ return "".concat(1 + props.$scheduleIndex, " / ").concat(props.$startCol, " / ").concat(2 + props.$scheduleIndex, " / ").concat(props.$endCol + 1);
131
+ });
132
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import type { CalendarProps } from './types';
3
+ declare const Calendar: React.FC<CalendarProps>;
4
+ export default Calendar;