@pdg/react-form 1.0.153 → 1.0.154

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 (3) hide show
  1. package/dist/index.esm.js +29 -21
  2. package/dist/index.js +29 -21
  3. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -1,4 +1,12 @@
1
- import React,{createContext,useContext,useRef,useCallback,useMemo,useLayoutEffect,useEffect,useState,useId}from'react';import classNames from'classnames';import {Box,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,Icon,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Button,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Switch,Paper,Menu}from'@mui/material';import {empty,ifUndefined,nextTick,notEmpty,equal,telNoAutoDash,businessNoAutoDash,personalNoAutoDash}from'@pdg/util';import dayjs from'dayjs';import {useAutoUpdateLayoutRef,useAutoUpdateState,useAutoUpdateRefState,useForceUpdate,useAutoUpdateRef,useFirstSkipEffect}from'@pdg/react-hook';import {PdgButton,PdgIcon,PdgIconText}from'@pdg/react-component';import {useResizeDetector}from'react-resize-detector';import {NumericFormat}from'react-number-format';import {CheckBoxOutlineBlank,CheckBox,RadioButtonChecked,RadioButtonUnchecked}from'@mui/icons-material';import {Editor}from'@tinymce/tinymce-react';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker,StaticDateTimePicker,DesktopDateTimePicker}from'@mui/x-date-pickers';import SimpleBar from'simplebar-react';/******************************************************************************
1
+ import React,{createContext,useContext,useRef,useCallback,useMemo,useLayoutEffect,useEffect,useState,useId}from'react';import classNames from'classnames';import {Box,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,Icon,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Button,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Switch,Paper,Menu}from'@mui/material';import {empty,ifUndefined,nextTick,notEmpty,equal,telNoAutoDash,businessNoAutoDash,personalNoAutoDash}from'@pdg/util';import dayjs from'dayjs';import {useAutoUpdateLayoutRef,useAutoUpdateState,useAutoUpdateRefState,useForceUpdate,useAutoUpdateRef,useFirstSkipEffect}from'@pdg/react-hook';import {PdgButton,PdgIcon,PdgIconText}from'@pdg/react-component';import {useResizeDetector}from'react-resize-detector';import {NumericFormat}from'react-number-format';import {CheckBoxOutlineBlank,CheckBox,RadioButtonChecked,RadioButtonUnchecked}from'@mui/icons-material';import {Editor}from'@tinymce/tinymce-react';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker,StaticDateTimePicker,DesktopDateTimePicker}from'@mui/x-date-pickers';import SimpleBar from'simplebar-react';function insertStyle(css) {
2
+ if (!css || typeof window === 'undefined')
3
+ return;
4
+ const style = document.createElement('style');
5
+ style.setAttribute('type', 'text/css');
6
+ style.innerHTML = css;
7
+ document.head.appendChild(style);
8
+ return css;
9
+ }insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}");/******************************************************************************
2
10
  Copyright (c) Microsoft Corporation.
3
11
 
4
12
  Permission to use, copy, modify, and/or distribute this software for any
@@ -1016,7 +1024,7 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
1016
1024
  !noLine && (React.createElement(Grid, { size: { xs: 12 }, sx: { mt: spacing } },
1017
1025
  React.createElement(FormDivider, { line: true }))),
1018
1026
  children)));
1019
- };var FormTextField = React.forwardRef(function (_a, ref) {
1027
+ };insertStyle(".FormTextField{min-width:200px}.FormTextField .clear-icon-button-wrap{visibility:hidden}.FormTextField.variant-filled .clear-icon-button-wrap{margin-top:9px;margin-bottom:-9px}.FormTextField:hover .clear-icon-button-wrap.show,.FormTextField .MuiInputBase-root.Mui-focused .clear-icon-button-wrap.show{visibility:visible}");var FormTextField = React.forwardRef(function (_a, ref) {
1020
1028
  /********************************************************************************************************************
1021
1029
  * ID
1022
1030
  * ******************************************************************************************************************/
@@ -1347,7 +1355,7 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
1347
1355
  React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
1348
1356
  React.createElement(Box, { component: 'span', style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel), placeholder: placeholder, className: classNames(className, 'FormValueItem', 'FormTextField', "variant-".concat(variant)), inputRef: initInputRef ? initInputRef : inputRef, value: value, required: required, fullWidth: !width && fullWidth, error: error, helperText: formColWithHelperText ? undefined : error ? errorHelperText : helperText, slotProps: slotProps, disabled: disabled, style: style, select: select, multiline: multiline, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown })));
1349
1357
  });
1350
- FormTextField.displayName = 'FormTextField';var FormHidden = React.forwardRef(function (_a, ref) {
1358
+ FormTextField.displayName = 'FormTextField';insertStyle(".FormHidden{display:none !important}");var FormHidden = React.forwardRef(function (_a, ref) {
1351
1359
  var className = _a.className, props = __rest(_a, ["className"]);
1352
1360
  return (React.createElement(FormTextField, __assign({ ref: ref, className: classNames(className, 'FormHidden'), type: 'hidden', variant: 'standard' }, props)));
1353
1361
  });
@@ -1603,7 +1611,7 @@ FormTag.displayName = 'FormTag';var FormEmail = React.forwardRef(function (_a, r
1603
1611
  * ******************************************************************************************************************/
1604
1612
  return (React.createElement(FormText, __assign({ ref: ref, className: classNames(className, 'FormEmail'), type: 'email', validPattern: validPattern, onValue: handleValue }, props)));
1605
1613
  });
1606
- FormEmail.displayName = 'FormEmail';var StyledEyeInputAdornment = styled(InputAdornment)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n visibility: hidden;\n"], ["\n visibility: hidden;\n"])));
1614
+ FormEmail.displayName = 'FormEmail';insertStyle(".FormPassword .eye-icon-button-wrap{visibility:hidden}.FormPassword.variant-filled .eye-icon-button-wrap{margin-top:9px;margin-bottom:-9px}.FormPassword:hover .eye-icon-button-wrap.show,.FormPassword .MuiInputBase-root.Mui-focused .eye-icon-button-wrap.show{visibility:visible}");var StyledEyeInputAdornment = styled(InputAdornment)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n visibility: hidden;\n"], ["\n visibility: hidden;\n"])));
1607
1615
  var FormPassword = React.forwardRef(function (_a, ref) {
1608
1616
  /********************************************************************************************************************
1609
1617
  * State
@@ -1763,11 +1771,11 @@ FormMobile.displayName = 'FormMobile';var NumberFormatCustom = React.forwardRef(
1763
1771
  * ******************************************************************************************************************/
1764
1772
  return (React.createElement(FormTextField, __assign({ ref: ref, className: classNames(className, 'FormNumber'), disableReturnKey: true, labelShrink: strValueRef.current === '' || strValueRef.current === undefined ? labelShrink : true, slotProps: slotProps, readOnly: readOnly, clear: clear, value: strValueRef.current, onChange: handleChange, onValue: handleValue, onValidate: handleValidate }, props)));
1765
1773
  });
1766
- FormNumber.displayName = 'FormNumber';var FormSearch = React.forwardRef(function (_a, ref) {
1774
+ FormNumber.displayName = 'FormNumber';insertStyle(".FormSearch input[type=search]::-webkit-search-decoration,.FormSearch input[type=search]::-webkit-search-cancel-button,.FormSearch input[type=search]::-webkit-search-results-button,.FormSearch input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}");var FormSearch = React.forwardRef(function (_a, ref) {
1767
1775
  var className = _a.className, props = __rest(_a, ["className"]);
1768
1776
  return React.createElement(FormText, __assign({ className: classNames(className, 'FormSearch'), ref: ref, type: 'search' }, props));
1769
1777
  });
1770
- FormSearch.displayName = 'FormSearch';var FormTextarea = React.forwardRef(function (_a, ref) {
1778
+ FormSearch.displayName = 'FormSearch';insertStyle(".FormTextarea .MuiInputBase-root .MuiInputBase-input{overflow-y:scroll}.FormTextarea .MuiInputBase-root .MuiInputBase-input::-webkit-scrollbar{width:8px}.FormTextarea .MuiInputBase-root .MuiInputBase-input::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1882352941);background-clip:padding-box;border-left:4px rgba(0,0,0,0) solid}");var FormTextarea = React.forwardRef(function (_a, ref) {
1771
1779
  var className = _a.className, _b = _a.clear, clear = _b === void 0 ? false : _b, _c = _a.rows, rows = _c === void 0 ? 3 : _c, _d = _a.value, value = _d === void 0 ? '' : _d, props = __rest(_a, ["className", "clear", "rows", "value"]);
1772
1780
  return (React.createElement(FormTextField, __assign({ ref: ref, className: classNames(className, 'FormTextarea'), clear: clear, rows: rows, value: value }, props, { multiline: true })));
1773
1781
  });
@@ -2088,7 +2096,7 @@ function checkDateAvailable(date, availableDate, type, time) {
2088
2096
  }
2089
2097
  function AutoTypeForwardRef(render) {
2090
2098
  return React.forwardRef(render);
2091
- }var FormSelect = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
2099
+ }insertStyle(".FormSelect.is-selected-placeholder .MuiSelect-select{opacity:.38}.FormSelect .MuiInputBase-root.MuiInputBase-adornedEnd{padding-right:25px}.FormSelect .MuiSelect-select.MuiSelect-multiple .selected-list:not(:empty){margin-top:-3px;margin-bottom:-3px}.FormSelect-Menu-Popover>.MuiPaper-root::-webkit-scrollbar{width:12px}.FormSelect-Menu-Popover>.MuiPaper-root::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1882352941);background-clip:padding-box;border-left:4px rgba(0,0,0,0) solid;border-right:4px rgba(0,0,0,0) solid}.FormSelect-Menu-Popover>.MuiPaper-root::-webkit-scrollbar-button:start:decrement,.FormSelect-Menu-Popover>.MuiPaper-root::-webkit-scrollbar-button:end:increment{display:block;height:4px;background-color:rgba(0,0,0,0)}");var FormSelect = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
2092
2100
  /********************************************************************************************************************
2093
2101
  * type
2094
2102
  * ******************************************************************************************************************/
@@ -2441,7 +2449,7 @@ FormBusinessNo.displayName = 'FormBusinessNo';var FormPersonalNo = React.forward
2441
2449
  * ******************************************************************************************************************/
2442
2450
  return (React.createElement(FormText, __assign({ ref: ref, className: classNames(className, 'FormPersonalNo'), maxLength: 14, validPattern: validPattern, onValue: handleValue, onValidate: handleValidate }, props)));
2443
2451
  });
2444
- FormPersonalNo.displayName = 'FormPersonalNo';var FormItemBase = React.forwardRef(function (_a, ref) {
2452
+ FormPersonalNo.displayName = 'FormPersonalNo';insertStyle(".FormItemBase .FormItemBase-InputLabel{overflow:visible;padding-left:5px}.FormItemBase .FormItemBase-InputLabel.MuiInputLabel-sizeSmall{transform:translate(0, -1.5px) scale(0.7)}.FormItemBase.variant-standard .FormItemBase-Control-wrap{margin-top:16px}");var FormItemBase = React.forwardRef(function (_a, ref) {
2445
2453
  /********************************************************************************************************************
2446
2454
  * FormState
2447
2455
  * ******************************************************************************************************************/
@@ -3118,7 +3126,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3118
3126
  paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
3119
3127
  }, controlVerticalCenter: !isMultiline, control: control }));
3120
3128
  }));
3121
- FormRadioGroup.displayName = 'FormRadioGroup';var FormToggleButtonGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
3129
+ FormRadioGroup.displayName = 'FormRadioGroup';insertStyle(".FormToggleButtonGroup.loading .FormItemBase-Control-wrap .FormItemBase-Control{align-items:center !important}.FormToggleButtonGroup .ToggleButton{display:inline-flex;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:center}.FormToggleButtonGroup .ToggleButton .__label__{height:0;line-height:0 !important;overflow:visible !important}.FormToggleButtonGroup.type-checkbox .ToggleButton,.FormToggleButtonGroup.type-radio .ToggleButton{padding-left:3px;padding-right:5px;border:0 !important;margin-left:0 !important;justify-content:flex-start;display:flex;background-color:rgba(0,0,0,0) !important}.FormToggleButtonGroup.type-checkbox .ToggleButton:not(:last-child),.FormToggleButtonGroup.type-radio .ToggleButton:not(:last-child){margin-right:5px}.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__,.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-unchecked__,.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__,.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-unchecked__{margin-right:3px}.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__,.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__{display:none}.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-checked__,.FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-checked__{display:block}.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-unchecked__,.FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-unchecked__{display:none}.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap{margin-top:15px;margin-bottom:-15px}.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap .ToggleButton{height:37px}.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap{margin-top:15px;margin-bottom:-15px}.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap .ToggleButton{height:37px}.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap{margin-top:0px;margin-bottom:0px}.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap .ToggleButton{height:28px}.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap{margin-top:13px;margin-bottom:-13px}.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton{height:24px}.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap{margin-top:13px;margin-bottom:-13px}.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton{height:31px}.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap{margin-top:0px;margin-bottom:0px}.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton{height:26px}.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap .ToggleButton{height:37px}.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap .ToggleButton{height:37px}.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap .ToggleButton{height:28px}.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton{height:24px}.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton{height:31px}.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton{height:26px}.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap .ToggleButton{height:37px}.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap .ToggleButton{height:37px}.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap .ToggleButton{height:28px}.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton{height:24px}.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton{height:31px}.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton{height:26px}");var FormToggleButtonGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
3122
3130
  /********************************************************************************************************************
3123
3131
  * type
3124
3132
  * ******************************************************************************************************************/
@@ -3785,7 +3793,7 @@ FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = Rea
3785
3793
  });
3786
3794
  FormRating.displayName = 'FormRating';var getFinalValue$8 = function (value) {
3787
3795
  return value || '';
3788
- };var FormTextEditor = React.forwardRef(function (_a, ref) {
3796
+ };insertStyle(".FormTextEditor.initializing textarea{display:none}.FormTextEditor.error .tox-tinymce{border-color:#d32f2f}.tox-menu.tox-collection.tox-collection--list .tox-collection__group .tox-menu-nav__js.tox-collection__item{padding-right:20px !important}.tox-notifications-container{display:none}");var FormTextEditor = React.forwardRef(function (_a, ref) {
3789
3797
  /********************************************************************************************************************
3790
3798
  * ID
3791
3799
  * ******************************************************************************************************************/
@@ -5149,7 +5157,7 @@ class AdapterDayjs {
5149
5157
  getDayOfWeek(value) {
5150
5158
  return value.day() + 1;
5151
5159
  }
5152
- }var PrivateToggleButton = React.forwardRef(function (_a, ref) {
5160
+ }insertStyle(".PrivateYearSelect{position:absolute;left:0;right:0;top:0;bottom:0;background-color:#fff}.PrivateYearSelect button{font-size:14px;font-weight:400;border-radius:18px}");var PrivateToggleButton = React.forwardRef(function (_a, ref) {
5153
5161
  /********************************************************************************************************************
5154
5162
  * Use
5155
5163
  * ******************************************************************************************************************/
@@ -5237,7 +5245,7 @@ var PrivateYearSelect = function (_a) {
5237
5245
  return (React.createElement(Grid, { key: y, size: { xs: 3 } },
5238
5246
  React.createElement(PrivateToggleButton, { "data-id": y, className: "private-year-select-value-".concat(y), fullWidth: true, selected: isSelected, activated: isActive, outlined: isToday, disabled: disabled, onClick: handleClick }, y)));
5239
5247
  })))));
5240
- };var MONTHS$1 = new Array(12).fill(0);
5248
+ };insertStyle(".PrivateMonthSelect{position:absolute;left:0;right:0;top:0;bottom:0;background-color:#fff}.PrivateMonthSelect button{font-size:15px;font-weight:400;border-radius:18px}");var MONTHS$1 = new Array(12).fill(0);
5241
5249
  for (var i$5 = 0; i$5 < 12; i$5 += 1) {
5242
5250
  MONTHS$1[i$5] = i$5;
5243
5251
  }
@@ -5256,7 +5264,7 @@ var PrivateMonthSelect = function (_a) {
5256
5264
  m + 1,
5257
5265
  "\uC6D4")));
5258
5266
  }))));
5259
- };var DEFAULT_MINUTES$3 = new Array(60).fill(0);
5267
+ };insertStyle(".PrivateTimeSelect{position:absolute;left:0;right:0;top:0;bottom:0}.PrivateTimeSelect button{border-radius:0}");var DEFAULT_MINUTES$3 = new Array(60).fill(0);
5260
5268
  for (var i$4 = 0; i$4 < DEFAULT_MINUTES$3.length; i$4 += 1) {
5261
5269
  DEFAULT_MINUTES$3[i$4] = i$4;
5262
5270
  }
@@ -5455,7 +5463,7 @@ var PrivateTimeSection = function (_a) {
5455
5463
  } }))))),
5456
5464
  onClose && (React.createElement(Grid, { className: 'action-buttons' },
5457
5465
  React.createElement(Button, { variant: 'text', onClick: onClose }, "\uB2EB\uAE30"))))));
5458
- };var DEFAULT_HOURS$1 = new Array(24).fill(0);
5466
+ };insertStyle(".PrivateStaticDatePicker.time{height:400px}.PrivateStaticDatePicker .MuiPickersCalendarHeader-root{display:none}.PrivateStaticDatePicker .month-title-container{display:flex;align-items:center;margin-left:5px}.PrivateStaticDatePicker .month-title-container .month-title-wrap{display:flex;align-items:center;cursor:pointer}.PrivateStaticDatePicker .month-title-container .month-title-wrap .month-title button{font-size:15px;padding-left:8px;padding-right:0;min-width:0}.PrivateStaticDatePicker .month-title-container .month-title-wrap .month-title button:not(.active){color:unset}.PrivateStaticDatePicker .action-buttons{border-top:1px solid #efefef;padding:10px;text-align:right}.PrivateStaticDatePicker .action-buttons button{min-width:0;color:inherit}.PrivateStaticDatePicker .action-buttons button:not(:first-of-type){margin-left:5px}.PrivateStaticDatePicker .action-buttons button.disabled{color:rgba(0,0,0,.5)}.PrivateStaticDatePicker .time{border-left:2px solid #bfbfbf}.PrivateStaticDatePicker .time .time-container{height:100%}.PrivateStaticDatePicker .time .time-container .time-title{text-align:center;padding:22px 0;font-size:15px}.PrivateStaticDatePicker .time .time-container .time-select-wrap{flex:1;border-top:1px solid #efefef}.PrivateStaticDatePicker.time .time .time-container .time-select-wrap>div>div:not(:first-of-type){border-left:1px solid #efefef}");var DEFAULT_HOURS$1 = new Array(24).fill(0);
5459
5467
  for (var i$2 = 0; i$2 < DEFAULT_HOURS$1.length; i$2 += 1) {
5460
5468
  DEFAULT_HOURS$1[i$2] = i$2;
5461
5469
  }
@@ -5694,7 +5702,7 @@ var PrivateStaticDatePicker = React.forwardRef(function (_a, ref) {
5694
5702
  boxShadow: theme.shadows[8],
5695
5703
  },
5696
5704
  _b);
5697
- });var PrivateDatePicker = React.forwardRef(function (_a, ref) {
5705
+ });insertStyle(".PrivateDatePicker .input-text-field.align-left .MuiInputBase-input{text-align:left}.PrivateDatePicker .input-text-field.align-center .MuiInputBase-input{text-align:center}.PrivateDatePicker .input-text-field.align-right .MuiInputBase-input{text-align:right}");var PrivateDatePicker = React.forwardRef(function (_a, ref) {
5698
5706
  /********************************************************************************************************************
5699
5707
  * ID
5700
5708
  * ******************************************************************************************************************/
@@ -6087,7 +6095,7 @@ var PrivateStaticDatePicker = React.forwardRef(function (_a, ref) {
6087
6095
  React.createElement("div", { style: { display: fullWidth ? 'block' : 'inline-block' } },
6088
6096
  React.createElement(DesktopDatePicker, __assign({ value: inputValue, label: labelIcon ? React.createElement(PdgIconText, { icon: labelIcon }, initLabel) : initLabel, open: false, format: format ? format : getDateTimeFormat(type, time), disabled: disabled, readOnly: readOnly, minDate: minDate, maxDate: maxDate, disablePast: disablePast, disableFuture: disableFuture, onClose: function () { return setOpen(false); }, onError: function (reason) { return (datePickerErrorRef.current = reason); }, onChange: function (newValue) { return handleChange('date', newValue); }, slotProps: slotProps, showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth }, otherProps)))),
6089
6097
  !formColWithHelperText && (helperText || (error && errorHelperText)) && (React.createElement(FormHelperText, { error: error, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, error ? errorHelperText : helperText))))));
6090
- });var DEFAULT_HOURS = new Array(24).fill(0);
6098
+ });insertStyle(".PrivateDateTimePicker .input-text-field.align-left .MuiInputBase-input{text-align:left}.PrivateDateTimePicker .input-text-field.align-center .MuiInputBase-input{text-align:center}.PrivateDateTimePicker .input-text-field.align-right .MuiInputBase-input{text-align:right}");insertStyle(".PrivateStaticDateTimePicker.time{height:400px}.PrivateStaticDateTimePicker .MuiPickersCalendarHeader-root{display:none}.PrivateStaticDateTimePicker .month-title-container{display:flex;align-items:center;margin-left:5px}.PrivateStaticDateTimePicker .month-title-container .month-title-wrap{display:flex;align-items:center;cursor:pointer}.PrivateStaticDateTimePicker .month-title-container .month-title-wrap .month-title button{font-size:15px;padding-left:8px;padding-right:0;min-width:0}.PrivateStaticDateTimePicker .month-title-container .month-title-wrap .month-title button:not(.active){color:unset}.PrivateStaticDateTimePicker .action-buttons{border-top:1px solid #efefef;padding:10px;text-align:right}.PrivateStaticDateTimePicker .action-buttons button{min-width:0;color:inherit}.PrivateStaticDateTimePicker .action-buttons button:not(:first-of-type){margin-left:5px}.PrivateStaticDateTimePicker .action-buttons button.disabled{color:rgba(0,0,0,.5)}.PrivateStaticDateTimePicker .time{border-left:2px solid #bfbfbf}.PrivateStaticDateTimePicker .time .time-container{height:100%}.PrivateStaticDateTimePicker .time .time-container .time-title{text-align:center;padding:22px 0;font-size:15px}.PrivateStaticDateTimePicker .time .time-container .time-select-wrap{flex:1;border-top:1px solid #efefef}.PrivateStaticDateTimePicker.time .time .time-container .time-select-wrap>div>div:not(:first-of-type){border-left:1px solid #efefef}");var DEFAULT_HOURS = new Array(24).fill(0);
6091
6099
  for (var i$1 = 0; i$1 < DEFAULT_HOURS.length; i$1 += 1) {
6092
6100
  DEFAULT_HOURS[i$1] = i$1;
6093
6101
  }
@@ -6751,7 +6759,7 @@ var PrivateStaticDateTimePicker = React.forwardRef(function (_a, ref) {
6751
6759
  React.createElement(DialogContent, null, content),
6752
6760
  React.createElement(DialogActions, null,
6753
6761
  React.createElement(Button, { variant: 'text', onClick: handleClose, autoFocus: true }, "\uD655\uC778"))));
6754
- };var PrivateInputDatePicker = React.forwardRef(function (_a, ref) {
6762
+ };insertStyle(".PrivateInputDatePicker.align-left .MuiInputBase-input{text-align:left}.PrivateInputDatePicker.align-center .MuiInputBase-input{text-align:center}.PrivateInputDatePicker.align-right .MuiInputBase-input{text-align:right}");var PrivateInputDatePicker = React.forwardRef(function (_a, ref) {
6755
6763
  /********************************************************************************************************************
6756
6764
  * ID
6757
6765
  * ******************************************************************************************************************/
@@ -7833,7 +7841,7 @@ FormDateTimePicker.displayName = 'FormDateTimePicker';var FormTimePicker = React
7833
7841
  return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { onAddValueItem: handleAddValueItem }) },
7834
7842
  React.createElement(PrivateDateTimePicker, __assign({ className: classNames(className, 'FormTimePicker') }, props, { ref: ref, type: 'time' }))));
7835
7843
  });
7836
- FormTimePicker.displayName = 'FormTimePicker';var FormDateRangePickerTooltipPicker = React.forwardRef(function (_a, ref) {
7844
+ FormTimePicker.displayName = 'FormTimePicker';insertStyle(".FormDateRangePickerTooltipPicker .MuiPickersCalendarHeader-root{display:none}.FormDateRangePickerTooltipPicker .MuiDayPicker-header>span{margin:0}.FormDateRangePickerTooltipPicker .MuiPickerStaticWrapper-content{min-width:292px}.FormDateRangePickerTooltipPicker .MuiPickerStaticWrapper-content .MuiCalendarOrClockPicker-root>div{width:292px}.FormDateRangePickerTooltipPicker .MuiPickerStaticWrapper-content .MuiCalendarOrClockPicker-root>div .MuiCalendarPicker-root{width:292px}.FormDateRangePickerTooltipPicker .selected-bg{display:none;position:absolute}.FormDateRangePickerTooltipPicker .selected-bg.sel{display:block;position:absolute;top:0;bottom:0;left:0;right:0;background-color:rgba(66,165,245,.6)}.FormDateRangePickerTooltipPicker .selected-bg.sel.ui-start,.FormDateRangePickerTooltipPicker .selected-bg.sel.s-start{border-top-left-radius:50%;border-bottom-left-radius:50%}.FormDateRangePickerTooltipPicker .selected-bg.sel.ui-end,.FormDateRangePickerTooltipPicker .selected-bg.sel.s-end{border-top-right-radius:50%;border-bottom-right-radius:50%}.FormDateRangePickerTooltipPicker .selected-bg.sel~.MuiPickersDay-root{border:0}.FormDateRangePickerTooltipPicker .selected-bg.sel~.MuiPickersDay-root:not(:hover):not(:active):not(.Mui-selected){background-color:rgba(0,0,0,0)}.FormDateRangePickerTooltipPicker .focused-bg{display:none;position:absolute}.FormDateRangePickerTooltipPicker .focused-bg.focused{display:block;position:absolute;top:0;bottom:0;left:0;right:0;border:2px solid #efefef;border-left:0;border-right:0}.FormDateRangePickerTooltipPicker .focused-bg.focused.ui-start,.FormDateRangePickerTooltipPicker .focused-bg.focused.f-start{border-left:2px solid #efefef;border-top-left-radius:50%;border-bottom-left-radius:50%}.FormDateRangePickerTooltipPicker .focused-bg.focused.ui-end,.FormDateRangePickerTooltipPicker .focused-bg.focused.f-end{border-right:2px solid #efefef;border-top-right-radius:50%;border-bottom-right-radius:50%}.FormDateRangePickerTooltipPicker .focused-bg.focused~.MuiPickersDay-root:not(:hover):not(:active):not(.Mui-selected){background-color:rgba(0,0,0,0)}");var FormDateRangePickerTooltipPicker = React.forwardRef(function (_a, ref) {
7837
7845
  /********************************************************************************************************************
7838
7846
  * State
7839
7847
  * ******************************************************************************************************************/
@@ -8024,7 +8032,7 @@ FormTimePicker.displayName = 'FormTimePicker';var FormDateRangePickerTooltipPick
8024
8032
  onMonthChange(month);
8025
8033
  setActiveMonthValue(null);
8026
8034
  } }));
8027
- });var YEARS = new Array(200).fill(0);
8035
+ });insertStyle(".FormDateRangePickerTooltipPickerContainer{display:inline-block;position:relative}.FormDateRangePickerTooltipPickerContainer .month-change-arrow-wrap{position:absolute;top:15px;left:0;right:0}.FormDateRangePickerTooltipPickerContainer .month-change-arrow-wrap>div:first-of-type{padding-left:20px}.FormDateRangePickerTooltipPickerContainer .month-change-arrow-wrap>div:last-child{padding-right:20px;text-align:right}.FormDateRangePickerTooltipPickerContainer .month-title{text-align:center;padding-top:13px;padding-bottom:10px}.FormDateRangePickerTooltipPickerContainer .month-title button{font-size:15px;padding-left:8px;padding-right:0;min-width:0}.FormDateRangePickerTooltipPickerContainer .month-title button:not(.active){color:unset}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap{position:relative}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select,.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select{position:absolute;left:0;right:0;top:0;bottom:0;border-top:1px solid #efefef;padding-top:15px;background-color:#fff}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select button.today:not(.selected),.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select button.today:not(.selected){border:1px solid rgba(0,0,0,.1)}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select button.active:not(.selected),.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select button.active:not(.selected){background-color:#f5f5f5}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select button.active:not(.selected):hover,.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select button.active:not(.selected):hover{background-color:#e5e5e5}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select{overflow-y:scroll}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select button{font-size:14px;font-weight:400;border-radius:18px}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select button{font-size:15px;font-weight:400;border-radius:18px}.FormDateRangePickerTooltipPickerContainer .action-buttons button{min-width:0;color:unset}.FormDateRangePickerTooltipPickerContainer .action-buttons button:not(:first-of-type){margin-left:5px}.FormDateRangePickerTooltipPickerContainer .action-buttons button.disabled{color:rgba(0,0,0,.5)}");var YEARS = new Array(200).fill(0);
8028
8036
  for (var i = 0; i < 200; i += 1) {
8029
8037
  YEARS[i] = 1900 + i;
8030
8038
  }
@@ -8901,7 +8909,7 @@ FormDateRangePicker.displayName = 'FormDateRangePicker';var LinkDialog = functio
8901
8909
  React.createElement(Button, { variant: 'text', onClick: handleCancel }, "\uCDE8\uC18C"),
8902
8910
  React.createElement(Button, { variant: 'text', onClick: handleSubmit }, "\uD655\uC778"))));
8903
8911
  };var StyledPdgButton = styled(PdgButton)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n min-width: 0;\n\n &.input-file-btn {\n padding: 0 !important;\n position: relative;\n\n .PdgFlexRowBox {\n height: 100%;\n label {\n cursor: pointer;\n display: flex;\n flex: 1;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n padding: 0 10px;\n\n .PdgIcon {\n margin-right: 0.2em;\n }\n }\n }\n }\n\n &.hidden-label.input-file-btn .PdgFlexRowBox label .PdgIcon {\n margin-left: 0;\n margin-right: 0;\n }\n\n &.MuiButton-outlined {\n &:first-of-type:not(:last-of-type) {\n border-right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n &:last-of-type:not(:first-of-type) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n &:not(:first-of-type):not(:last-of-type) {\n border-right: 0;\n border-radius: 0;\n }\n }\n"], ["\n min-width: 0;\n\n &.input-file-btn {\n padding: 0 !important;\n position: relative;\n\n .PdgFlexRowBox {\n height: 100%;\n label {\n cursor: pointer;\n display: flex;\n flex: 1;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n padding: 0 10px;\n\n .PdgIcon {\n margin-right: 0.2em;\n }\n }\n }\n }\n\n &.hidden-label.input-file-btn .PdgFlexRowBox label .PdgIcon {\n margin-left: 0;\n margin-right: 0;\n }\n\n &.MuiButton-outlined {\n &:first-of-type:not(:last-of-type) {\n border-right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n &:last-of-type:not(:first-of-type) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n &:not(:first-of-type):not(:last-of-type) {\n border-right: 0;\n border-radius: 0;\n }\n }\n"])));
8904
- var templateObject_1$1;var getFinalValue$5 = function (value) { return value || ''; };var FILE_VALUE = '';
8912
+ var templateObject_1$1;var getFinalValue$5 = function (value) { return value || ''; };insertStyle(".FormFile .control-wrap{display:inline-flex}.FormFile .control-wrap .file-name-wrap .file-name{min-width:350px}.FormFile .control-wrap .file-name-wrap .file-name .MuiInputBase-root{padding-right:7px}.FormFile .control-wrap .input-file{display:none}.FormFile .control-wrap .input-file-wrap{display:flex}.FormFile .control-wrap .input-file-wrap .input-file-btn:not(.hidden-label) .PdgIcon{margin-left:-3px}.FormFile.full-width .control-wrap{display:flex}.FormFile.full-width .control-wrap .file-name-wrap{flex:1}.FormFile.variant-standard .file-name-wrap .file-name .MuiInputBase-root{padding-right:0}.FormFile:not(.hide-file-name).variant-outlined .form-file-btn label,.FormFile:not(.hide-file-name).variant-filled .form-file-btn label{padding-top:10px;padding-bottom:10px}.FormFile:not(.hide-file-name).variant-standard .form-file-btn label{padding-top:5px;padding-bottom:5px}.FormFile:not(.hide-file-name).size-small .form-file-btn label{padding-top:5px;padding-bottom:5px}.FormFile.hide-file-name:not(.with-label).variant-outlined .form-file-btn{height:52px}.FormFile.hide-file-name:not(.with-label).variant-filled .form-file-btn{height:52px}.FormFile.hide-file-name:not(.with-label).variant-standard .form-file-btn{height:28px}.FormFile.hide-file-name:not(.with-label).size-small.variant-outlined .form-file-btn{height:37px}.FormFile.hide-file-name:not(.with-label).size-small.variant-filled .form-file-btn{height:44px}.FormFile.hide-file-name:not(.with-label).size-small.variant-standard .form-file-btn{height:26px}.FormFile.hide-file-name.with-label.variant-outlined .form-file-btn{height:37px}.FormFile.hide-file-name.with-label.variant-filled .form-file-btn{height:37px}.FormFile.hide-file-name.with-label.variant-standard .form-file-btn{height:28px}.FormFile.hide-file-name.with-label.size-small.variant-outlined .form-file-btn{height:24px}.FormFile.hide-file-name.with-label.size-small.variant-filled .form-file-btn{height:31px}.FormFile.hide-file-name.with-label.size-small.variant-standard .form-file-btn{height:26px}.Form .FormCol.with-label .FormFile.hide-file-name.variant-outlined .form-file-btn{height:37px}.Form .FormCol.with-label .FormFile.hide-file-name.variant-filled .form-file-btn{height:37px}.Form .FormCol.with-label .FormFile.hide-file-name.variant-standard .form-file-btn{height:28px}.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-outlined .form-file-btn{height:24px}.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-filled .form-file-btn{height:31px}.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-standard .form-file-btn{height:26px}");var FILE_VALUE = '';
8905
8913
  var FormFile = React.forwardRef(function (_a, ref) {
8906
8914
  /********************************************************************************************************************
8907
8915
  * ID
@@ -9196,7 +9204,7 @@ var FormFile = React.forwardRef(function (_a, ref) {
9196
9204
  React.createElement(PrivateAlertDialog, __assign({}, alertDialogProps, { onClose: function () { return setAlertDialogProps({ open: false }); } })),
9197
9205
  React.createElement(LinkDialog, { open: isOpenLinkDialog, onConfirm: handleLinkDialogConfirm, onClose: function () { return setIsOpenLinkDialog(false); } })) }));
9198
9206
  });
9199
- FormFile.displayName = 'FormFile';var getFinalValue$4 = function (value) { return value || ''; };var FormImageFile = React.forwardRef(function (_a, ref) {
9207
+ FormFile.displayName = 'FormFile';insertStyle(".FormImageFile .preview-img{max-width:100%}.FormImageFile:not(.hide-file-name):not(.variant-standard) .preview-img{padding-right:14px}");var getFinalValue$4 = function (value) { return value || ''; };var FormImageFile = React.forwardRef(function (_a, ref) {
9200
9208
  var className = _a.className, imageSize = _a.imageSize, preview = _a.preview, previewMaxHeight = _a.previewMaxHeight, _b = _a.accept, accept = _b === void 0 ? '.jpg,.jpeg,.png' : _b, initValue = _a.value, onChange = _a.onChange, onFile = _a.onFile, onLink = _a.onLink, props = __rest(_a, ["className", "imageSize", "preview", "previewMaxHeight", "accept", "value", "onChange", "onFile", "onLink"]);
9201
9209
  var _c = useState({
9202
9210
  open: false,
package/dist/index.js CHANGED
@@ -1,4 +1,12 @@
1
- 'use strict';var React=require('react'),classNames=require('classnames'),material=require('@mui/material'),util=require('@pdg/util'),dayjs=require('dayjs'),reactHook=require('@pdg/react-hook'),reactComponent=require('@pdg/react-component'),reactResizeDetector=require('react-resize-detector'),reactNumberFormat=require('react-number-format'),iconsMaterial=require('@mui/icons-material'),tinymceReact=require('@tinymce/tinymce-react'),xDatePickers=require('@mui/x-date-pickers'),SimpleBar=require('simplebar-react');/******************************************************************************
1
+ 'use strict';var React=require('react'),classNames=require('classnames'),material=require('@mui/material'),util=require('@pdg/util'),dayjs=require('dayjs'),reactHook=require('@pdg/react-hook'),reactComponent=require('@pdg/react-component'),reactResizeDetector=require('react-resize-detector'),reactNumberFormat=require('react-number-format'),iconsMaterial=require('@mui/icons-material'),tinymceReact=require('@tinymce/tinymce-react'),xDatePickers=require('@mui/x-date-pickers'),SimpleBar=require('simplebar-react');function insertStyle(css) {
2
+ if (!css || typeof window === 'undefined')
3
+ return;
4
+ const style = document.createElement('style');
5
+ style.setAttribute('type', 'text/css');
6
+ style.innerHTML = css;
7
+ document.head.appendChild(style);
8
+ return css;
9
+ }insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}");/******************************************************************************
2
10
  Copyright (c) Microsoft Corporation.
3
11
 
4
12
  Permission to use, copy, modify, and/or distribute this software for any
@@ -1016,7 +1024,7 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
1016
1024
  !noLine && (React.createElement(material.Grid, { size: { xs: 12 }, sx: { mt: spacing } },
1017
1025
  React.createElement(FormDivider, { line: true }))),
1018
1026
  children)));
1019
- };var FormTextField = React.forwardRef(function (_a, ref) {
1027
+ };insertStyle(".FormTextField{min-width:200px}.FormTextField .clear-icon-button-wrap{visibility:hidden}.FormTextField.variant-filled .clear-icon-button-wrap{margin-top:9px;margin-bottom:-9px}.FormTextField:hover .clear-icon-button-wrap.show,.FormTextField .MuiInputBase-root.Mui-focused .clear-icon-button-wrap.show{visibility:visible}");var FormTextField = React.forwardRef(function (_a, ref) {
1020
1028
  /********************************************************************************************************************
1021
1029
  * ID
1022
1030
  * ******************************************************************************************************************/
@@ -1347,7 +1355,7 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
1347
1355
  React.createElement(reactComponent.PdgIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
1348
1356
  React.createElement(material.Box, { component: 'span', style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel), placeholder: placeholder, className: classNames(className, 'FormValueItem', 'FormTextField', "variant-".concat(variant)), inputRef: initInputRef ? initInputRef : inputRef, value: value, required: required, fullWidth: !width && fullWidth, error: error, helperText: formColWithHelperText ? undefined : error ? errorHelperText : helperText, slotProps: slotProps, disabled: disabled, style: style, select: select, multiline: multiline, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown })));
1349
1357
  });
1350
- FormTextField.displayName = 'FormTextField';var FormHidden = React.forwardRef(function (_a, ref) {
1358
+ FormTextField.displayName = 'FormTextField';insertStyle(".FormHidden{display:none !important}");var FormHidden = React.forwardRef(function (_a, ref) {
1351
1359
  var className = _a.className, props = __rest(_a, ["className"]);
1352
1360
  return (React.createElement(FormTextField, __assign({ ref: ref, className: classNames(className, 'FormHidden'), type: 'hidden', variant: 'standard' }, props)));
1353
1361
  });
@@ -1603,7 +1611,7 @@ FormTag.displayName = 'FormTag';var FormEmail = React.forwardRef(function (_a, r
1603
1611
  * ******************************************************************************************************************/
1604
1612
  return (React.createElement(FormText, __assign({ ref: ref, className: classNames(className, 'FormEmail'), type: 'email', validPattern: validPattern, onValue: handleValue }, props)));
1605
1613
  });
1606
- FormEmail.displayName = 'FormEmail';var StyledEyeInputAdornment = material.styled(material.InputAdornment)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n visibility: hidden;\n"], ["\n visibility: hidden;\n"])));
1614
+ FormEmail.displayName = 'FormEmail';insertStyle(".FormPassword .eye-icon-button-wrap{visibility:hidden}.FormPassword.variant-filled .eye-icon-button-wrap{margin-top:9px;margin-bottom:-9px}.FormPassword:hover .eye-icon-button-wrap.show,.FormPassword .MuiInputBase-root.Mui-focused .eye-icon-button-wrap.show{visibility:visible}");var StyledEyeInputAdornment = material.styled(material.InputAdornment)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n visibility: hidden;\n"], ["\n visibility: hidden;\n"])));
1607
1615
  var FormPassword = React.forwardRef(function (_a, ref) {
1608
1616
  /********************************************************************************************************************
1609
1617
  * State
@@ -1763,11 +1771,11 @@ FormMobile.displayName = 'FormMobile';var NumberFormatCustom = React.forwardRef(
1763
1771
  * ******************************************************************************************************************/
1764
1772
  return (React.createElement(FormTextField, __assign({ ref: ref, className: classNames(className, 'FormNumber'), disableReturnKey: true, labelShrink: strValueRef.current === '' || strValueRef.current === undefined ? labelShrink : true, slotProps: slotProps, readOnly: readOnly, clear: clear, value: strValueRef.current, onChange: handleChange, onValue: handleValue, onValidate: handleValidate }, props)));
1765
1773
  });
1766
- FormNumber.displayName = 'FormNumber';var FormSearch = React.forwardRef(function (_a, ref) {
1774
+ FormNumber.displayName = 'FormNumber';insertStyle(".FormSearch input[type=search]::-webkit-search-decoration,.FormSearch input[type=search]::-webkit-search-cancel-button,.FormSearch input[type=search]::-webkit-search-results-button,.FormSearch input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}");var FormSearch = React.forwardRef(function (_a, ref) {
1767
1775
  var className = _a.className, props = __rest(_a, ["className"]);
1768
1776
  return React.createElement(FormText, __assign({ className: classNames(className, 'FormSearch'), ref: ref, type: 'search' }, props));
1769
1777
  });
1770
- FormSearch.displayName = 'FormSearch';var FormTextarea = React.forwardRef(function (_a, ref) {
1778
+ FormSearch.displayName = 'FormSearch';insertStyle(".FormTextarea .MuiInputBase-root .MuiInputBase-input{overflow-y:scroll}.FormTextarea .MuiInputBase-root .MuiInputBase-input::-webkit-scrollbar{width:8px}.FormTextarea .MuiInputBase-root .MuiInputBase-input::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1882352941);background-clip:padding-box;border-left:4px rgba(0,0,0,0) solid}");var FormTextarea = React.forwardRef(function (_a, ref) {
1771
1779
  var className = _a.className, _b = _a.clear, clear = _b === void 0 ? false : _b, _c = _a.rows, rows = _c === void 0 ? 3 : _c, _d = _a.value, value = _d === void 0 ? '' : _d, props = __rest(_a, ["className", "clear", "rows", "value"]);
1772
1780
  return (React.createElement(FormTextField, __assign({ ref: ref, className: classNames(className, 'FormTextarea'), clear: clear, rows: rows, value: value }, props, { multiline: true })));
1773
1781
  });
@@ -2088,7 +2096,7 @@ function checkDateAvailable(date, availableDate, type, time) {
2088
2096
  }
2089
2097
  function AutoTypeForwardRef(render) {
2090
2098
  return React.forwardRef(render);
2091
- }var FormSelect = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
2099
+ }insertStyle(".FormSelect.is-selected-placeholder .MuiSelect-select{opacity:.38}.FormSelect .MuiInputBase-root.MuiInputBase-adornedEnd{padding-right:25px}.FormSelect .MuiSelect-select.MuiSelect-multiple .selected-list:not(:empty){margin-top:-3px;margin-bottom:-3px}.FormSelect-Menu-Popover>.MuiPaper-root::-webkit-scrollbar{width:12px}.FormSelect-Menu-Popover>.MuiPaper-root::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1882352941);background-clip:padding-box;border-left:4px rgba(0,0,0,0) solid;border-right:4px rgba(0,0,0,0) solid}.FormSelect-Menu-Popover>.MuiPaper-root::-webkit-scrollbar-button:start:decrement,.FormSelect-Menu-Popover>.MuiPaper-root::-webkit-scrollbar-button:end:increment{display:block;height:4px;background-color:rgba(0,0,0,0)}");var FormSelect = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
2092
2100
  /********************************************************************************************************************
2093
2101
  * type
2094
2102
  * ******************************************************************************************************************/
@@ -2441,7 +2449,7 @@ FormBusinessNo.displayName = 'FormBusinessNo';var FormPersonalNo = React.forward
2441
2449
  * ******************************************************************************************************************/
2442
2450
  return (React.createElement(FormText, __assign({ ref: ref, className: classNames(className, 'FormPersonalNo'), maxLength: 14, validPattern: validPattern, onValue: handleValue, onValidate: handleValidate }, props)));
2443
2451
  });
2444
- FormPersonalNo.displayName = 'FormPersonalNo';var FormItemBase = React.forwardRef(function (_a, ref) {
2452
+ FormPersonalNo.displayName = 'FormPersonalNo';insertStyle(".FormItemBase .FormItemBase-InputLabel{overflow:visible;padding-left:5px}.FormItemBase .FormItemBase-InputLabel.MuiInputLabel-sizeSmall{transform:translate(0, -1.5px) scale(0.7)}.FormItemBase.variant-standard .FormItemBase-Control-wrap{margin-top:16px}");var FormItemBase = React.forwardRef(function (_a, ref) {
2445
2453
  /********************************************************************************************************************
2446
2454
  * FormState
2447
2455
  * ******************************************************************************************************************/
@@ -3118,7 +3126,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3118
3126
  paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
3119
3127
  }, controlVerticalCenter: !isMultiline, control: control }));
3120
3128
  }));
3121
- FormRadioGroup.displayName = 'FormRadioGroup';var FormToggleButtonGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
3129
+ FormRadioGroup.displayName = 'FormRadioGroup';insertStyle(".FormToggleButtonGroup.loading .FormItemBase-Control-wrap .FormItemBase-Control{align-items:center !important}.FormToggleButtonGroup .ToggleButton{display:inline-flex;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:center}.FormToggleButtonGroup .ToggleButton .__label__{height:0;line-height:0 !important;overflow:visible !important}.FormToggleButtonGroup.type-checkbox .ToggleButton,.FormToggleButtonGroup.type-radio .ToggleButton{padding-left:3px;padding-right:5px;border:0 !important;margin-left:0 !important;justify-content:flex-start;display:flex;background-color:rgba(0,0,0,0) !important}.FormToggleButtonGroup.type-checkbox .ToggleButton:not(:last-child),.FormToggleButtonGroup.type-radio .ToggleButton:not(:last-child){margin-right:5px}.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__,.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-unchecked__,.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__,.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-unchecked__{margin-right:3px}.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__,.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__{display:none}.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-checked__,.FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-checked__{display:block}.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-unchecked__,.FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-unchecked__{display:none}.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap{margin-top:15px;margin-bottom:-15px}.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap .ToggleButton{height:37px}.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap{margin-top:15px;margin-bottom:-15px}.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap .ToggleButton{height:37px}.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap{margin-top:0px;margin-bottom:0px}.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap .ToggleButton{height:28px}.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap{margin-top:13px;margin-bottom:-13px}.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton{height:24px}.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap{margin-top:13px;margin-bottom:-13px}.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton{height:31px}.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap{margin-top:0px;margin-bottom:0px}.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton{height:26px}.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap .ToggleButton{height:37px}.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap .ToggleButton{height:37px}.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap .ToggleButton{height:28px}.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton{height:24px}.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton{height:31px}.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton{height:26px}.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap .ToggleButton{height:37px}.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap .ToggleButton{height:37px}.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap .ToggleButton{height:28px}.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton{height:24px}.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton{height:31px}.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap{margin-top:0;margin-bottom:0}.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton{height:26px}");var FormToggleButtonGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
3122
3130
  /********************************************************************************************************************
3123
3131
  * type
3124
3132
  * ******************************************************************************************************************/
@@ -3785,7 +3793,7 @@ FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = Rea
3785
3793
  });
3786
3794
  FormRating.displayName = 'FormRating';var getFinalValue$8 = function (value) {
3787
3795
  return value || '';
3788
- };var FormTextEditor = React.forwardRef(function (_a, ref) {
3796
+ };insertStyle(".FormTextEditor.initializing textarea{display:none}.FormTextEditor.error .tox-tinymce{border-color:#d32f2f}.tox-menu.tox-collection.tox-collection--list .tox-collection__group .tox-menu-nav__js.tox-collection__item{padding-right:20px !important}.tox-notifications-container{display:none}");var FormTextEditor = React.forwardRef(function (_a, ref) {
3789
3797
  /********************************************************************************************************************
3790
3798
  * ID
3791
3799
  * ******************************************************************************************************************/
@@ -5149,7 +5157,7 @@ class AdapterDayjs {
5149
5157
  getDayOfWeek(value) {
5150
5158
  return value.day() + 1;
5151
5159
  }
5152
- }var PrivateToggleButton = React.forwardRef(function (_a, ref) {
5160
+ }insertStyle(".PrivateYearSelect{position:absolute;left:0;right:0;top:0;bottom:0;background-color:#fff}.PrivateYearSelect button{font-size:14px;font-weight:400;border-radius:18px}");var PrivateToggleButton = React.forwardRef(function (_a, ref) {
5153
5161
  /********************************************************************************************************************
5154
5162
  * Use
5155
5163
  * ******************************************************************************************************************/
@@ -5237,7 +5245,7 @@ var PrivateYearSelect = function (_a) {
5237
5245
  return (React.createElement(material.Grid, { key: y, size: { xs: 3 } },
5238
5246
  React.createElement(PrivateToggleButton, { "data-id": y, className: "private-year-select-value-".concat(y), fullWidth: true, selected: isSelected, activated: isActive, outlined: isToday, disabled: disabled, onClick: handleClick }, y)));
5239
5247
  })))));
5240
- };var MONTHS$1 = new Array(12).fill(0);
5248
+ };insertStyle(".PrivateMonthSelect{position:absolute;left:0;right:0;top:0;bottom:0;background-color:#fff}.PrivateMonthSelect button{font-size:15px;font-weight:400;border-radius:18px}");var MONTHS$1 = new Array(12).fill(0);
5241
5249
  for (var i$5 = 0; i$5 < 12; i$5 += 1) {
5242
5250
  MONTHS$1[i$5] = i$5;
5243
5251
  }
@@ -5256,7 +5264,7 @@ var PrivateMonthSelect = function (_a) {
5256
5264
  m + 1,
5257
5265
  "\uC6D4")));
5258
5266
  }))));
5259
- };var DEFAULT_MINUTES$3 = new Array(60).fill(0);
5267
+ };insertStyle(".PrivateTimeSelect{position:absolute;left:0;right:0;top:0;bottom:0}.PrivateTimeSelect button{border-radius:0}");var DEFAULT_MINUTES$3 = new Array(60).fill(0);
5260
5268
  for (var i$4 = 0; i$4 < DEFAULT_MINUTES$3.length; i$4 += 1) {
5261
5269
  DEFAULT_MINUTES$3[i$4] = i$4;
5262
5270
  }
@@ -5455,7 +5463,7 @@ var PrivateTimeSection = function (_a) {
5455
5463
  } }))))),
5456
5464
  onClose && (React.createElement(material.Grid, { className: 'action-buttons' },
5457
5465
  React.createElement(material.Button, { variant: 'text', onClick: onClose }, "\uB2EB\uAE30"))))));
5458
- };var DEFAULT_HOURS$1 = new Array(24).fill(0);
5466
+ };insertStyle(".PrivateStaticDatePicker.time{height:400px}.PrivateStaticDatePicker .MuiPickersCalendarHeader-root{display:none}.PrivateStaticDatePicker .month-title-container{display:flex;align-items:center;margin-left:5px}.PrivateStaticDatePicker .month-title-container .month-title-wrap{display:flex;align-items:center;cursor:pointer}.PrivateStaticDatePicker .month-title-container .month-title-wrap .month-title button{font-size:15px;padding-left:8px;padding-right:0;min-width:0}.PrivateStaticDatePicker .month-title-container .month-title-wrap .month-title button:not(.active){color:unset}.PrivateStaticDatePicker .action-buttons{border-top:1px solid #efefef;padding:10px;text-align:right}.PrivateStaticDatePicker .action-buttons button{min-width:0;color:inherit}.PrivateStaticDatePicker .action-buttons button:not(:first-of-type){margin-left:5px}.PrivateStaticDatePicker .action-buttons button.disabled{color:rgba(0,0,0,.5)}.PrivateStaticDatePicker .time{border-left:2px solid #bfbfbf}.PrivateStaticDatePicker .time .time-container{height:100%}.PrivateStaticDatePicker .time .time-container .time-title{text-align:center;padding:22px 0;font-size:15px}.PrivateStaticDatePicker .time .time-container .time-select-wrap{flex:1;border-top:1px solid #efefef}.PrivateStaticDatePicker.time .time .time-container .time-select-wrap>div>div:not(:first-of-type){border-left:1px solid #efefef}");var DEFAULT_HOURS$1 = new Array(24).fill(0);
5459
5467
  for (var i$2 = 0; i$2 < DEFAULT_HOURS$1.length; i$2 += 1) {
5460
5468
  DEFAULT_HOURS$1[i$2] = i$2;
5461
5469
  }
@@ -5694,7 +5702,7 @@ var PrivateStaticDatePicker = React.forwardRef(function (_a, ref) {
5694
5702
  boxShadow: theme.shadows[8],
5695
5703
  },
5696
5704
  _b);
5697
- });var PrivateDatePicker = React.forwardRef(function (_a, ref) {
5705
+ });insertStyle(".PrivateDatePicker .input-text-field.align-left .MuiInputBase-input{text-align:left}.PrivateDatePicker .input-text-field.align-center .MuiInputBase-input{text-align:center}.PrivateDatePicker .input-text-field.align-right .MuiInputBase-input{text-align:right}");var PrivateDatePicker = React.forwardRef(function (_a, ref) {
5698
5706
  /********************************************************************************************************************
5699
5707
  * ID
5700
5708
  * ******************************************************************************************************************/
@@ -6087,7 +6095,7 @@ var PrivateStaticDatePicker = React.forwardRef(function (_a, ref) {
6087
6095
  React.createElement("div", { style: { display: fullWidth ? 'block' : 'inline-block' } },
6088
6096
  React.createElement(xDatePickers.DesktopDatePicker, __assign({ value: inputValue, label: labelIcon ? React.createElement(reactComponent.PdgIconText, { icon: labelIcon }, initLabel) : initLabel, open: false, format: format ? format : getDateTimeFormat(type, time), disabled: disabled, readOnly: readOnly, minDate: minDate, maxDate: maxDate, disablePast: disablePast, disableFuture: disableFuture, onClose: function () { return setOpen(false); }, onError: function (reason) { return (datePickerErrorRef.current = reason); }, onChange: function (newValue) { return handleChange('date', newValue); }, slotProps: slotProps, showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth }, otherProps)))),
6089
6097
  !formColWithHelperText && (helperText || (error && errorHelperText)) && (React.createElement(material.FormHelperText, { error: error, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, error ? errorHelperText : helperText))))));
6090
- });var DEFAULT_HOURS = new Array(24).fill(0);
6098
+ });insertStyle(".PrivateDateTimePicker .input-text-field.align-left .MuiInputBase-input{text-align:left}.PrivateDateTimePicker .input-text-field.align-center .MuiInputBase-input{text-align:center}.PrivateDateTimePicker .input-text-field.align-right .MuiInputBase-input{text-align:right}");insertStyle(".PrivateStaticDateTimePicker.time{height:400px}.PrivateStaticDateTimePicker .MuiPickersCalendarHeader-root{display:none}.PrivateStaticDateTimePicker .month-title-container{display:flex;align-items:center;margin-left:5px}.PrivateStaticDateTimePicker .month-title-container .month-title-wrap{display:flex;align-items:center;cursor:pointer}.PrivateStaticDateTimePicker .month-title-container .month-title-wrap .month-title button{font-size:15px;padding-left:8px;padding-right:0;min-width:0}.PrivateStaticDateTimePicker .month-title-container .month-title-wrap .month-title button:not(.active){color:unset}.PrivateStaticDateTimePicker .action-buttons{border-top:1px solid #efefef;padding:10px;text-align:right}.PrivateStaticDateTimePicker .action-buttons button{min-width:0;color:inherit}.PrivateStaticDateTimePicker .action-buttons button:not(:first-of-type){margin-left:5px}.PrivateStaticDateTimePicker .action-buttons button.disabled{color:rgba(0,0,0,.5)}.PrivateStaticDateTimePicker .time{border-left:2px solid #bfbfbf}.PrivateStaticDateTimePicker .time .time-container{height:100%}.PrivateStaticDateTimePicker .time .time-container .time-title{text-align:center;padding:22px 0;font-size:15px}.PrivateStaticDateTimePicker .time .time-container .time-select-wrap{flex:1;border-top:1px solid #efefef}.PrivateStaticDateTimePicker.time .time .time-container .time-select-wrap>div>div:not(:first-of-type){border-left:1px solid #efefef}");var DEFAULT_HOURS = new Array(24).fill(0);
6091
6099
  for (var i$1 = 0; i$1 < DEFAULT_HOURS.length; i$1 += 1) {
6092
6100
  DEFAULT_HOURS[i$1] = i$1;
6093
6101
  }
@@ -6751,7 +6759,7 @@ var PrivateStaticDateTimePicker = React.forwardRef(function (_a, ref) {
6751
6759
  React.createElement(material.DialogContent, null, content),
6752
6760
  React.createElement(material.DialogActions, null,
6753
6761
  React.createElement(material.Button, { variant: 'text', onClick: handleClose, autoFocus: true }, "\uD655\uC778"))));
6754
- };var PrivateInputDatePicker = React.forwardRef(function (_a, ref) {
6762
+ };insertStyle(".PrivateInputDatePicker.align-left .MuiInputBase-input{text-align:left}.PrivateInputDatePicker.align-center .MuiInputBase-input{text-align:center}.PrivateInputDatePicker.align-right .MuiInputBase-input{text-align:right}");var PrivateInputDatePicker = React.forwardRef(function (_a, ref) {
6755
6763
  /********************************************************************************************************************
6756
6764
  * ID
6757
6765
  * ******************************************************************************************************************/
@@ -7833,7 +7841,7 @@ FormDateTimePicker.displayName = 'FormDateTimePicker';var FormTimePicker = React
7833
7841
  return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { onAddValueItem: handleAddValueItem }) },
7834
7842
  React.createElement(PrivateDateTimePicker, __assign({ className: classNames(className, 'FormTimePicker') }, props, { ref: ref, type: 'time' }))));
7835
7843
  });
7836
- FormTimePicker.displayName = 'FormTimePicker';var FormDateRangePickerTooltipPicker = React.forwardRef(function (_a, ref) {
7844
+ FormTimePicker.displayName = 'FormTimePicker';insertStyle(".FormDateRangePickerTooltipPicker .MuiPickersCalendarHeader-root{display:none}.FormDateRangePickerTooltipPicker .MuiDayPicker-header>span{margin:0}.FormDateRangePickerTooltipPicker .MuiPickerStaticWrapper-content{min-width:292px}.FormDateRangePickerTooltipPicker .MuiPickerStaticWrapper-content .MuiCalendarOrClockPicker-root>div{width:292px}.FormDateRangePickerTooltipPicker .MuiPickerStaticWrapper-content .MuiCalendarOrClockPicker-root>div .MuiCalendarPicker-root{width:292px}.FormDateRangePickerTooltipPicker .selected-bg{display:none;position:absolute}.FormDateRangePickerTooltipPicker .selected-bg.sel{display:block;position:absolute;top:0;bottom:0;left:0;right:0;background-color:rgba(66,165,245,.6)}.FormDateRangePickerTooltipPicker .selected-bg.sel.ui-start,.FormDateRangePickerTooltipPicker .selected-bg.sel.s-start{border-top-left-radius:50%;border-bottom-left-radius:50%}.FormDateRangePickerTooltipPicker .selected-bg.sel.ui-end,.FormDateRangePickerTooltipPicker .selected-bg.sel.s-end{border-top-right-radius:50%;border-bottom-right-radius:50%}.FormDateRangePickerTooltipPicker .selected-bg.sel~.MuiPickersDay-root{border:0}.FormDateRangePickerTooltipPicker .selected-bg.sel~.MuiPickersDay-root:not(:hover):not(:active):not(.Mui-selected){background-color:rgba(0,0,0,0)}.FormDateRangePickerTooltipPicker .focused-bg{display:none;position:absolute}.FormDateRangePickerTooltipPicker .focused-bg.focused{display:block;position:absolute;top:0;bottom:0;left:0;right:0;border:2px solid #efefef;border-left:0;border-right:0}.FormDateRangePickerTooltipPicker .focused-bg.focused.ui-start,.FormDateRangePickerTooltipPicker .focused-bg.focused.f-start{border-left:2px solid #efefef;border-top-left-radius:50%;border-bottom-left-radius:50%}.FormDateRangePickerTooltipPicker .focused-bg.focused.ui-end,.FormDateRangePickerTooltipPicker .focused-bg.focused.f-end{border-right:2px solid #efefef;border-top-right-radius:50%;border-bottom-right-radius:50%}.FormDateRangePickerTooltipPicker .focused-bg.focused~.MuiPickersDay-root:not(:hover):not(:active):not(.Mui-selected){background-color:rgba(0,0,0,0)}");var FormDateRangePickerTooltipPicker = React.forwardRef(function (_a, ref) {
7837
7845
  /********************************************************************************************************************
7838
7846
  * State
7839
7847
  * ******************************************************************************************************************/
@@ -8024,7 +8032,7 @@ FormTimePicker.displayName = 'FormTimePicker';var FormDateRangePickerTooltipPick
8024
8032
  onMonthChange(month);
8025
8033
  setActiveMonthValue(null);
8026
8034
  } }));
8027
- });var YEARS = new Array(200).fill(0);
8035
+ });insertStyle(".FormDateRangePickerTooltipPickerContainer{display:inline-block;position:relative}.FormDateRangePickerTooltipPickerContainer .month-change-arrow-wrap{position:absolute;top:15px;left:0;right:0}.FormDateRangePickerTooltipPickerContainer .month-change-arrow-wrap>div:first-of-type{padding-left:20px}.FormDateRangePickerTooltipPickerContainer .month-change-arrow-wrap>div:last-child{padding-right:20px;text-align:right}.FormDateRangePickerTooltipPickerContainer .month-title{text-align:center;padding-top:13px;padding-bottom:10px}.FormDateRangePickerTooltipPickerContainer .month-title button{font-size:15px;padding-left:8px;padding-right:0;min-width:0}.FormDateRangePickerTooltipPickerContainer .month-title button:not(.active){color:unset}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap{position:relative}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select,.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select{position:absolute;left:0;right:0;top:0;bottom:0;border-top:1px solid #efefef;padding-top:15px;background-color:#fff}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select button.today:not(.selected),.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select button.today:not(.selected){border:1px solid rgba(0,0,0,.1)}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select button.active:not(.selected),.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select button.active:not(.selected){background-color:#f5f5f5}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select button.active:not(.selected):hover,.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select button.active:not(.selected):hover{background-color:#e5e5e5}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select{overflow-y:scroll}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .year-select button{font-size:14px;font-weight:400;border-radius:18px}.FormDateRangePickerTooltipPickerContainer .date-picker-wrap .month-select button{font-size:15px;font-weight:400;border-radius:18px}.FormDateRangePickerTooltipPickerContainer .action-buttons button{min-width:0;color:unset}.FormDateRangePickerTooltipPickerContainer .action-buttons button:not(:first-of-type){margin-left:5px}.FormDateRangePickerTooltipPickerContainer .action-buttons button.disabled{color:rgba(0,0,0,.5)}");var YEARS = new Array(200).fill(0);
8028
8036
  for (var i = 0; i < 200; i += 1) {
8029
8037
  YEARS[i] = 1900 + i;
8030
8038
  }
@@ -8901,7 +8909,7 @@ FormDateRangePicker.displayName = 'FormDateRangePicker';var LinkDialog = functio
8901
8909
  React.createElement(material.Button, { variant: 'text', onClick: handleCancel }, "\uCDE8\uC18C"),
8902
8910
  React.createElement(material.Button, { variant: 'text', onClick: handleSubmit }, "\uD655\uC778"))));
8903
8911
  };var StyledPdgButton = material.styled(reactComponent.PdgButton)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n min-width: 0;\n\n &.input-file-btn {\n padding: 0 !important;\n position: relative;\n\n .PdgFlexRowBox {\n height: 100%;\n label {\n cursor: pointer;\n display: flex;\n flex: 1;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n padding: 0 10px;\n\n .PdgIcon {\n margin-right: 0.2em;\n }\n }\n }\n }\n\n &.hidden-label.input-file-btn .PdgFlexRowBox label .PdgIcon {\n margin-left: 0;\n margin-right: 0;\n }\n\n &.MuiButton-outlined {\n &:first-of-type:not(:last-of-type) {\n border-right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n &:last-of-type:not(:first-of-type) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n &:not(:first-of-type):not(:last-of-type) {\n border-right: 0;\n border-radius: 0;\n }\n }\n"], ["\n min-width: 0;\n\n &.input-file-btn {\n padding: 0 !important;\n position: relative;\n\n .PdgFlexRowBox {\n height: 100%;\n label {\n cursor: pointer;\n display: flex;\n flex: 1;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n padding: 0 10px;\n\n .PdgIcon {\n margin-right: 0.2em;\n }\n }\n }\n }\n\n &.hidden-label.input-file-btn .PdgFlexRowBox label .PdgIcon {\n margin-left: 0;\n margin-right: 0;\n }\n\n &.MuiButton-outlined {\n &:first-of-type:not(:last-of-type) {\n border-right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n &:last-of-type:not(:first-of-type) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n &:not(:first-of-type):not(:last-of-type) {\n border-right: 0;\n border-radius: 0;\n }\n }\n"])));
8904
- var templateObject_1$1;var getFinalValue$5 = function (value) { return value || ''; };var FILE_VALUE = '';
8912
+ var templateObject_1$1;var getFinalValue$5 = function (value) { return value || ''; };insertStyle(".FormFile .control-wrap{display:inline-flex}.FormFile .control-wrap .file-name-wrap .file-name{min-width:350px}.FormFile .control-wrap .file-name-wrap .file-name .MuiInputBase-root{padding-right:7px}.FormFile .control-wrap .input-file{display:none}.FormFile .control-wrap .input-file-wrap{display:flex}.FormFile .control-wrap .input-file-wrap .input-file-btn:not(.hidden-label) .PdgIcon{margin-left:-3px}.FormFile.full-width .control-wrap{display:flex}.FormFile.full-width .control-wrap .file-name-wrap{flex:1}.FormFile.variant-standard .file-name-wrap .file-name .MuiInputBase-root{padding-right:0}.FormFile:not(.hide-file-name).variant-outlined .form-file-btn label,.FormFile:not(.hide-file-name).variant-filled .form-file-btn label{padding-top:10px;padding-bottom:10px}.FormFile:not(.hide-file-name).variant-standard .form-file-btn label{padding-top:5px;padding-bottom:5px}.FormFile:not(.hide-file-name).size-small .form-file-btn label{padding-top:5px;padding-bottom:5px}.FormFile.hide-file-name:not(.with-label).variant-outlined .form-file-btn{height:52px}.FormFile.hide-file-name:not(.with-label).variant-filled .form-file-btn{height:52px}.FormFile.hide-file-name:not(.with-label).variant-standard .form-file-btn{height:28px}.FormFile.hide-file-name:not(.with-label).size-small.variant-outlined .form-file-btn{height:37px}.FormFile.hide-file-name:not(.with-label).size-small.variant-filled .form-file-btn{height:44px}.FormFile.hide-file-name:not(.with-label).size-small.variant-standard .form-file-btn{height:26px}.FormFile.hide-file-name.with-label.variant-outlined .form-file-btn{height:37px}.FormFile.hide-file-name.with-label.variant-filled .form-file-btn{height:37px}.FormFile.hide-file-name.with-label.variant-standard .form-file-btn{height:28px}.FormFile.hide-file-name.with-label.size-small.variant-outlined .form-file-btn{height:24px}.FormFile.hide-file-name.with-label.size-small.variant-filled .form-file-btn{height:31px}.FormFile.hide-file-name.with-label.size-small.variant-standard .form-file-btn{height:26px}.Form .FormCol.with-label .FormFile.hide-file-name.variant-outlined .form-file-btn{height:37px}.Form .FormCol.with-label .FormFile.hide-file-name.variant-filled .form-file-btn{height:37px}.Form .FormCol.with-label .FormFile.hide-file-name.variant-standard .form-file-btn{height:28px}.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-outlined .form-file-btn{height:24px}.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-filled .form-file-btn{height:31px}.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-standard .form-file-btn{height:26px}");var FILE_VALUE = '';
8905
8913
  var FormFile = React.forwardRef(function (_a, ref) {
8906
8914
  /********************************************************************************************************************
8907
8915
  * ID
@@ -9196,7 +9204,7 @@ var FormFile = React.forwardRef(function (_a, ref) {
9196
9204
  React.createElement(PrivateAlertDialog, __assign({}, alertDialogProps, { onClose: function () { return setAlertDialogProps({ open: false }); } })),
9197
9205
  React.createElement(LinkDialog, { open: isOpenLinkDialog, onConfirm: handleLinkDialogConfirm, onClose: function () { return setIsOpenLinkDialog(false); } })) }));
9198
9206
  });
9199
- FormFile.displayName = 'FormFile';var getFinalValue$4 = function (value) { return value || ''; };var FormImageFile = React.forwardRef(function (_a, ref) {
9207
+ FormFile.displayName = 'FormFile';insertStyle(".FormImageFile .preview-img{max-width:100%}.FormImageFile:not(.hide-file-name):not(.variant-standard) .preview-img{padding-right:14px}");var getFinalValue$4 = function (value) { return value || ''; };var FormImageFile = React.forwardRef(function (_a, ref) {
9200
9208
  var className = _a.className, imageSize = _a.imageSize, preview = _a.preview, previewMaxHeight = _a.previewMaxHeight, _b = _a.accept, accept = _b === void 0 ? '.jpg,.jpeg,.png' : _b, initValue = _a.value, onChange = _a.onChange, onFile = _a.onFile, onLink = _a.onLink, props = __rest(_a, ["className", "imageSize", "preview", "previewMaxHeight", "accept", "value", "onChange", "onFile", "onLink"]);
9201
9209
  var _c = React.useState({
9202
9210
  open: false,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pdg/react-form",
3
3
  "title": "React Form",
4
- "version": "1.0.153",
4
+ "version": "1.0.154",
5
5
  "description": "React Form",
6
6
  "type": "module",
7
7
  "types": "dist/index.d.ts",