@daracl/form 0.0.20 → 0.0.22

package/dist/index.cjs

@@ -1,184 +1,39 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const core = require("@daracl/core");
-const xssFilter = {
-  "&": "&",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "'": "&#39;"
-};
-const replaceXss = (inputText) => {
-  let returnText = inputText;
-  if (returnText) {
-    Object.keys(xssFilter).forEach((key) => {
-      returnText = returnText.replaceAll(key, xssFilter[key]);
-    });
-  }
-  return returnText;
-};
-const hasOwnProp = (obj, key) => {
-  return obj.hasOwnProperty(key);
-};
-const isBlank = (value) => {
-  if (value === null) return true;
-  if (value === "") return true;
-  if (typeof value === "undefined") return true;
-  if (typeof value === "string" && (value === "" || value.replace(/\s/g, "") === "")) return true;
-  return false;
-};
-const isUndefined = (value) => {
-  return typeof value === "undefined";
-};
-const isFunction = (value) => {
-  return typeof value === "function";
-};
-const isString = (value) => {
-  return typeof value === "string";
-};
+const utils = require("@daracl/core/utils");
+const datetimepicker = require("@daracl/datetimepicker");
 const isNumber = (value) => {
-  if (isBlank(value)) {
-    return false;
-  }
-  value = +value;
-  return !isNaN(value);
-};
-const isArray = (value) => {
-  return core.isArray(value);
+  return !utils.isBlank(value) && utils.isNumeric(+value, true);
 };
-const isEmpty = (value) => isUndefined(value) || value == null;
 const isTabType = (field) => {
-  return field && field.renderType === "tab";
+  return (field == null ? void 0 : field.renderType) === "tab";
 };
 const isGridType = (field) => {
-  return field && field.renderType === "grid";
+  return (field == null ? void 0 : field.renderType) === "grid";
 };
 const replaceXssField = (field) => {
   field.$xssName = getXssFieldName(field);
-  field.label = replaceXss(field.label);
+  field.label = utils.xss(field.label);
   return field;
 };
 const ignoreValueField = (field) => {
   return isGridType(field.$parent) || isTabType(field.$parent);
 };
 const getXssFieldName = (field) => {
-  if (isUndefined(field.$xssName)) {
+  if (utils.isUndefined(field.$xssName)) {
     let returnText = field.name;
     if (returnText) {
-      Object.keys(xssFilter).forEach((key) => {
-        returnText = returnText.replaceAll(key, "_");
-      });
+      returnText = returnText.replace(/[&<>"']/g, "_");
     }
     return "df_" + returnText;
   }
   return field.$xssName;
 };
-const getHashCode = (str) => {
-  let hash = 0;
-  if (str.length == 0) return hash;
-  for (let i = 0; i < str.length; i++) {
-    let tmpChar = str.charCodeAt(i);
-    hash = (hash << 5) - hash + tmpChar;
-    hash = hash & hash;
-  }
-  return String(hash).replaceAll(/-/g, "_");
-};
-const isHiddenField = (field) => {
-  if (field.renderType === "hidden") {
-    return true;
-  }
-  return false;
-};
-const templateToElement = (htmlTemplate) => {
-  const template = document.createElement("template");
-  template.innerHTML = htmlTemplate;
-  return template.content.firstElementChild;
-};
-function isPlainObject(obj) {
-  if (typeof obj !== "object" || obj === null) {
-    return false;
-  }
-  let proto = obj;
-  while (Object.getPrototypeOf(proto) !== null) {
-    proto = Object.getPrototypeOf(proto);
-  }
-  return Object.getPrototypeOf(obj) === proto;
-}
-function isObject(value) {
-  return typeof value === "object" && value !== null && !isArray(value);
-}
-function isDate(value) {
-  return value instanceof Date && !isNaN(value.valueOf());
-}
-const merge = (...value) => {
-  let reval = value[0];
-  if (!isPlainObject(reval) || isEmpty(reval)) {
-    return reval;
-  }
-  let i = 1;
-  if (Object.keys(reval).length > 0) {
-    i = 0;
-    reval = isArray(reval) ? [] : {};
-  }
-  const argLen = value.length;
-  for (; i < argLen; i += 1) {
-    cloneDeep(reval, value[i]);
-  }
-  return reval;
+const isHiddenField = (field) => (field == null ? void 0 : field.renderType) === "hidden";
+const merge = (...values) => {
+  if (!utils.isPlainObject(values[0])) return values[0];
+  return utils.objectDeepMerge(...values, {});
 };
-function cloneDeep(dst, src) {
-  if (isObject(src)) {
-    return cloneObjectDeep(dst, src);
-  }
-  if (isArray(src)) {
-    return cloneArrayDeep(dst, src);
-  }
-  if (isDate(src)) {
-    return new src.constructor(src);
-  }
-  return src;
-}
-function cloneObjectDeep(dst, src) {
-  if (isFunction(src)) {
-    return src;
-  }
-  for (const key of Object.keys(src)) {
-    const val = src[key];
-    if (isUndefined(val)) {
-      continue;
-    }
-    if (val === null) {
-      dst[key] = val;
-    } else if (isFunction(val)) {
-      dst[key] = val;
-    } else if (isEmpty(dst[key])) {
-      dst[key] = cloneDeep(isArray(val) ? [] : {}, val);
-    } else if (!isObject(val)) {
-      dst[key] = val;
-    } else {
-      cloneDeep(dst[key], val);
-    }
-  }
-  return dst;
-}
-function cloneArrayDeep(dst, src) {
-  const isObj = isPlainObject(dst);
-  for (let i = 0; i < src.length; i += 1) {
-    const val = src[i];
-    let newVal;
-    if (val == null) {
-      newVal = val;
-    } else {
-      newVal = cloneDeep(isArray(val) ? [] : {}, val);
-    }
-    if (isObj) {
-      dst[i] = newVal;
-    } else {
-      dst.push(newVal);
-    }
-  }
-  return dst;
-}
 class Render {
   constructor(form, field, rowElement) {
     var _a;
@@ -190,12 +45,12 @@ class Render {
     if (field.tooltip) (_a = rowElement.querySelector(".df-tooltip")) == null ? void 0 : _a.setAttribute("tooltip", field.tooltip);
   }
   setDefaultInfo() {
-    if (isUndefined(this.field.defaultValue)) {
+    if (utils.isUndefined(this.field.defaultValue)) {
       this.setValue("", false);
     } else {
       this.setValue(this.field.defaultValue, false);
     }
-    if (!isUndefined(this.field.placeholder)) {
+    if (!utils.isUndefined(this.field.placeholder)) {
       const ele = this.getElement();
       if (ele instanceof Element) {
         ele.setAttribute("placeholder", this.field.placeholder);
@@ -221,8 +76,8 @@ class Render {
   setValueItems(value) {
   }
   static getDescriptionTemplate(field) {
-    const classNames = field.descriptionClass ? replaceXss(field.descriptionClass) : "";
-    const style = field.descriptionStyle ? 'style="' + replaceXss(field.descriptionStyle) + '"' : "";
+    const classNames = field.descriptionClass ? utils.xss(field.descriptionClass) : "";
+    const style = field.descriptionStyle ? 'style="' + utils.xss(field.descriptionStyle) + '"' : "";
     return field.description ? `<div class="df-description ${classNames}" ${style}>${field.description}</div>` : "";
   }
   changeEventCall(field, e, rederInfo, fieldValue) {
@@ -239,12 +94,12 @@ class Render {
         const valueKey = Render.valuesValueKey(field);
         for (let val of field.listItem.list) {
           let changeVal = val[valueKey];
-          if (isString(fieldValue)) {
+          if (utils.isString(fieldValue)) {
             if (changeVal == fieldValue) {
               valuesItem.push(val);
               break;
             }
-          } else if (isArray(fieldValue)) {
+          } else if (utils.isArray(fieldValue)) {
             if (fieldValue.includes(changeVal)) {
               valuesItem.push(val);
             }
@@ -290,9 +145,9 @@ class Render {
     } else {
       const fieldEle = this.rowElement.querySelector(".df-field");
       if (fieldEle) {
-        const parser2 = new DOMParser();
+        const parser = new DOMParser();
         this.field.description = desc;
-        const descEle2 = parser2.parseFromString(Render.getDescriptionTemplate(this.field), "text/html").querySelector(".df-description");
+        const descEle2 = parser.parseFromString(Render.getDescriptionTemplate(this.field), "text/html").querySelector(".df-description");
         if (descEle2) (_a = fieldEle.parentNode) == null ? void 0 : _a.insertBefore(descEle2, fieldEle.nextSibling);
       }
     }
@@ -374,7 +229,7 @@ const validator = (value, field, result) => {
   if (field.different) {
     const diffFieldName = field.different.field;
     const diffField = field.$instance.getForm().getField(diffFieldName);
-    if (!isEmpty(diffField) && field.$instance.getValue() == diffField.$instance.getValue()) {
+    if (!utils.isNil(diffField) && field.$instance.getValue() == diffField.$instance.getValue()) {
       result.message = field.different.message;
       return result;
     }
@@ -382,7 +237,7 @@ const validator = (value, field, result) => {
   if (field.identical) {
     const diffFieldName = field.identical.field;
     const diffField = field.$instance.getForm().getField(diffFieldName);
-    if (!isEmpty(diffField) && field.$instance.getValue() != diffField.$instance.getValue()) {
+    if (!utils.isNil(diffField) && field.$instance.getValue() != diffField.$instance.getValue()) {
       result.message = field.identical.message;
       return result;
     }
@@ -395,7 +250,7 @@ const numberValidator = (value, field) => {
   }
   const result = { name: field.name, constraint: [] };
   const numValue = Number(value);
-  if (field.required && isBlank(value)) {
+  if (field.required && utils.isBlank(value)) {
     result.constraint.push(RULES.REQUIRED);
     return result;
   }
@@ -471,7 +326,7 @@ const invalidMessage = (field, rowElement, validResult) => {
     rowElement.classList.add("invalid");
   }
   if (validResult !== false) {
-    const message2 = Language3.validMessage(field, validResult);
+    const message2 = Language2.validMessage(field, validResult);
     if (validResult.message) {
       message2.push(validResult.message);
     }
@@ -567,7 +422,7 @@ const stringValidator = (value, field) => {
     return true;
   }
   let result = { name: field.name, constraint: [] };
-  if (field.required && isBlank(value)) {
+  if (field.required && utils.isBlank(value)) {
     result.constraint.push(RULES.REQUIRED);
     return result;
   }
@@ -657,7 +512,7 @@ class DropdownRender extends Render {
     var _a, _b, _c, _d, _e;
     super(daraForm, field, rowElement);
     let initDefaultValue = "";
-    if (!isUndefined(field.defaultValue)) {
+    if (!utils.isUndefined(field.defaultValue)) {
       initDefaultValue = field.defaultValue;
     }
     const valueKey = DropdownRender.valuesValueKey(field);
@@ -678,7 +533,7 @@ class DropdownRender extends Render {
         this.defaultSelected = ((_e = (_d = this.field.listItem) == null ? void 0 : _d.list) == null ? void 0 : _e.length) > 0 ? this.field.listItem.list[0][valueKey] || "" : "";
       }
     }
-    if (isUndefined(this.defaultSelected)) {
+    if (utils.isUndefined(this.defaultSelected)) {
       this.defaultSelected = "";
     }
     this.mounted();
@@ -709,7 +564,7 @@ class DropdownRender extends Render {
       };
     }
     this.element.innerHTML = this.dropdownValuesTemplate(this.field);
-    if (!isBlank(this.field.$value)) {
+    if (!utils.isBlank(this.field.$value)) {
       const currentValue = this.field.$value;
       this.field.$value = "";
       this.setValue(currentValue);
@@ -752,11 +607,11 @@ class DropdownRender extends Render {
     const valueKey = Render.valuesValueKey(field);
     let template = "";
     if (((_a = field.rendererOptions) == null ? void 0 : _a.disableDefaultOption) !== true) {
-      template += `<option value="">${Language3.getMessage("selection")}</option>`;
+      template += `<option value="">${Language2.getMessage("selection")}</option>`;
     }
     (_c = (_b = field.listItem) == null ? void 0 : _b.list) == null ? void 0 : _c.forEach((val) => {
       const attr = `${val.selected ? "selected" : ""} ${val.disabled ? "disabled" : ""}`;
-      if (isUndefined(val[valueKey]) && val.label) {
+      if (utils.isUndefined(val[valueKey]) && val.label) {
         template += `<option value="${val.value || ""}" ${attr}>${val.label}</option>`;
       } else {
         template += `<option value="${val[valueKey]}" ${attr}>${Render.valuesLabelValue(labelKey, val)}</option>`;
@@ -865,17 +720,14 @@ function resolveFieldStyle(formOptions, field, beforeField, isLabelHide) {
       fieldStyle.valueClass = fieldStyle.labelStyle ? "df-col-full" : "";
     }
   }
-  fieldStyle.fieldClass = spaceReplace(fieldStyle.fieldClass);
-  fieldStyle.labelClass = spaceReplace(fieldStyle.labelClass);
-  fieldStyle.valueClass = spaceReplace(fieldStyle.valueClass);
+  fieldStyle.fieldClass = utils.resolveClassName(fieldStyle.fieldClass).join(" ");
+  fieldStyle.labelClass = utils.resolveClassName(fieldStyle.labelClass).join(" ");
+  fieldStyle.valueClass = utils.resolveClassName(fieldStyle.valueClass).join(" ");
   return fieldStyle;
 }
 function orientationClassName(orientation) {
   return orientation === "horizontal" ? "df-horizontal" : "df-vertical";
 }
-function spaceReplace(str) {
-  return str.replace(/\s+/g, " ").trim();
-}
 class CheckboxRender extends Render {
   constructor(field, rowElement, daraForm) {
     var _a, _b;
@@ -883,15 +735,15 @@ class CheckboxRender extends Render {
     this.defaultCheckValue = [];
     this.defaultCheckValue = [];
     let initDefaultValue = [];
-    if (!isUndefined(field.defaultValue)) {
-      if (isArray(field.defaultValue)) {
+    if (!utils.isUndefined(field.defaultValue)) {
+      if (utils.isArray(field.defaultValue)) {
         initDefaultValue = field.defaultValue;
       } else {
         initDefaultValue = [field.defaultValue];
       }
     }
     const valueKey = CheckboxRender.valuesValueKey(field);
-    if (isUndefined(this.field.listItem)) {
+    if (utils.isUndefined(this.field.listItem)) {
       this.setValueItems([{ label: "", value: "Y" }]);
     }
     let initDefaultValueFlag = false;
@@ -934,11 +786,11 @@ class CheckboxRender extends Render {
     const valueKey = Render.valuesValueKey(field);
     templates.push(` <div class="df-field"><div class="df-field-group">`);
     (_b = (_a = field.listItem) == null ? void 0 : _a.list) == null ? void 0 : _b.forEach((val) => {
-      const checkVal = val[valueKey];
+      const checkVal = String(val[valueKey] ?? "");
       templates.push(`
           <span class="df-field-item ${orientationClassName(field.listItem.orientation ?? OrientationMap.horizontal)}">
               <label>
-                  <input type="checkbox" name="${fieldName}" value="${checkVal ? replaceXss(checkVal) : ""}" class="df-form-field df-checkbox" ${val.selected ? "checked" : ""} ${val.disabled ? "disabled" : ""}  />
+                  <input type="checkbox" name="${fieldName}" value="${checkVal ? utils.xss(checkVal) : ""}" class="df-form-field df-checkbox" ${val.selected ? "checked" : ""} ${val.disabled ? "disabled" : ""}  />
                   ${Render.valuesLabelValue(labelKey, val)}
               </label>
           </span>
@@ -958,7 +810,7 @@ class CheckboxRender extends Render {
         };
       }
       this.createField();
-      if (!isBlank(this.field.$value)) {
+      if (!utils.isBlank(this.field.$value)) {
         const currentValue = this.field.$value;
         this.field.$value = "";
         this.setValue(currentValue);
@@ -998,7 +850,7 @@ class CheckboxRender extends Render {
       return;
     }
     let valueArr = [];
-    if (isArray(value)) {
+    if (utils.isArray(value)) {
       valueArr = value;
     } else {
       valueArr.push(value);
@@ -1034,7 +886,7 @@ class CheckboxRender extends Render {
   valid() {
     const value = this.getValue();
     let validResult = true;
-    if (this.field.required && isArray(value)) {
+    if (this.field.required && utils.isArray(value)) {
       if (value.length < 1) {
         validResult = { name: this.field.name, constraint: [] };
         validResult.constraint.push(RULES.REQUIRED);
@@ -1050,7 +902,7 @@ class RadioRender extends Render {
     super(daraForm, field, rowElement);
     this.defaultCheckValue = "";
     let initDefaultValue = [];
-    if (!isUndefined(field.defaultValue)) {
+    if (!utils.isUndefined(field.defaultValue)) {
       initDefaultValue = field.defaultValue;
     }
     const valueKey = RadioRender.valuesValueKey(field);
@@ -1127,7 +979,7 @@ class RadioRender extends Render {
         };
       }
       this.createField();
-      if (!isBlank(this.field.$value)) {
+      if (!utils.isBlank(this.field.$value)) {
         const currentValue = this.field.$value;
         this.field.$value = "";
         this.setValue(currentValue);
@@ -1179,7 +1031,7 @@ class RadioRender extends Render {
     const value = this.getValue();
     let validResult = true;
     if (this.field.required) {
-      if (isBlank(value)) {
+      if (utils.isBlank(value)) {
         validResult = { name: this.field.name, constraint: [] };
         validResult.constraint.push(RULES.REQUIRED);
       }
@@ -1286,7 +1138,7 @@ class FileRender extends Render {
       <span class="df-file-wrapper">
         <label class="df-file-label">
           <input type="file" name="${field.$xssName}" class="df-form-field df-file" multiple />
-          ${Language3.getMessage("fileButton")}
+          ${Language2.getMessage("fileButton")}
         </label>
         <i class="df-form-icon df-help-icon"></i>
       </span>
@@ -1416,7 +1268,7 @@ class FileRender extends Render {
     this.setFileList(this.fileList, true);
   }
   setValue(value) {
-    if (core.isArray(value)) {
+    if (utils.isArray(value)) {
       this.setValueItems(value);
     }
     this.element.value = "";
@@ -1457,7 +1309,7 @@ class CustomRender extends Render {
   }
   createField() {
     const field = this.field;
-    const fieldTemplate = isEmpty(field.template) ? "" : isString(field.template) ? field.template : field.template();
+    const fieldTemplate = utils.isNil(field.template) ? "" : utils.isString(field.template) ? field.template : field.template();
     const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
     fieldContainerElement.innerHTML = ` <div class="df-field">
         ${fieldTemplate}
@@ -1664,1298 +1516,6 @@ class RangeRender extends Render {
     return validResult;
   }
 }
-let localeMessage$1 = {
-  year: "Year",
-  month: "Month",
-  day: "Day",
-  am: "AM",
-  pm: "PM",
-  today: "Today",
-  ok: "Ok",
-  months: {
-    full: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
-    abbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
-  },
-  weeks: {
-    full: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-    abbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
-  }
-};
-let Language$2 = class Language {
-  constructor() {
-    this.lang = localeMessage$1;
-  }
-  setDefaultMessage(lang) {
-    localeMessage$1 = Object.assign(localeMessage$1, lang);
-  }
-  /**
-   * 다국어 메시지 등록
-   *
-   * @public
-   * @param {?Message} [lang] 둥록할 메시지
-   */
-  set(lang) {
-    this.lang = Object.assign({}, localeMessage$1, lang);
-  }
-  /**
-   * 메시지 얻기
-   *
-   * @public
-   * @param {string} messageKey 메시지 키
-   * @returns {*}
-   */
-  getMessage(messageKey) {
-    return this.lang[messageKey];
-  }
-  getMonthsMessage(idx, mode = "abbr") {
-    return this.lang.months[mode][idx] || "";
-  }
-  getWeeksMessage(idx, mode = "abbr") {
-    return this.lang.weeks[mode][idx] || "";
-  }
-  getMonthsIdx(val, mode = "abbr") {
-    return mode == "full" ? this.lang.months.full.indexOf(val) : this.lang.months.abbr.indexOf(val);
-  }
-  getWeeksIdx(val, mode = "abbr") {
-    return mode == "full" ? this.lang.weeks.full.indexOf(val) : this.lang.weeks.abbr.indexOf(val);
-  }
-};
-const Lanauage = new Language$2();
-const EXPRESSIONS_FORMAT = ["YY", "YYYY", "MMMM", "MMM", "MM", "M", "dddd", "ddd", "dd", "d", "DD", "D", "S", "HH", "H", "hh", "h", "mm", "m", "ss", "s", "SSS", "zzzz", "zzz", "zz", "z", "a", "A"];
-let MAX_CHAR_LENGTH = 0;
-let DEFAULT_FORMAT = {
-  year: "YYYY",
-  month: "YYYY-MM",
-  date: "YYYY-MM-DD",
-  time: "HH:mm",
-  datetime: "YYYY-MM-DD HH:mm"
-};
-const DAY_STYLE_CLASS = ["ddtp-sun", "ddtp-mon", "ddtp-tue", "ddtp-wed", "ddtp-thu", "ddtp-fri", "ddtp-sat"];
-var DateViewMode = /* @__PURE__ */ ((DateViewMode2) => {
-  DateViewMode2["year"] = "year";
-  DateViewMode2["month"] = "month";
-  DateViewMode2["date"] = "date";
-  DateViewMode2["datetime"] = "datetime";
-  DateViewMode2["time"] = "time";
-  return DateViewMode2;
-})(DateViewMode || {});
-EXPRESSIONS_FORMAT.forEach((item) => {
-  MAX_CHAR_LENGTH = Math.max(item.length, MAX_CHAR_LENGTH);
-});
-const format = (date, format2) => {
-  format2 = format2 || "YYYY-MM-DD";
-  const len = format2.length;
-  let result = [];
-  for (let i = 0; i < len; ) {
-    let minLen = Math.min(MAX_CHAR_LENGTH, len - i);
-    let j = minLen;
-    for (; j > 0; j--) {
-      const v = format2.substring(i, i + j);
-      if (EXPRESSIONS_FORMAT.includes(v)) {
-        try {
-          result.push(expressionsFunction$1[v](date));
-        } catch (e) {
-          console.log(EXPRESSIONS_FORMAT.includes(v), v, e);
-        }
-        break;
-      }
-    }
-    if (j < 1) {
-      result.push(format2.substring(i, i + 1));
-      i += 1;
-    } else {
-      i += j;
-    }
-  }
-  return result.join("");
-};
-const expressionsFunction$1 = {
-  YY: (date) => {
-    return String(date.getFullYear()).slice(-2);
-  },
-  YYYY: (date) => {
-    return String(date.getFullYear());
-  },
-  M: (date) => {
-    return String(date.getMonth() + 1);
-  },
-  MM: (date) => {
-    return core.leftPad(date.getMonth() + 1, 2);
-  },
-  MMM: (date) => {
-    return Lanauage.getMonthsMessage(date.getMonth());
-  },
-  MMMM: (date) => {
-    return Lanauage.getMonthsMessage(date.getMonth(), "full");
-  },
-  D: (date) => {
-    return String(date.getDate());
-  },
-  DD: (date) => {
-    return core.leftPad(date.getDate(), 2);
-  },
-  d: (date) => {
-    return String(date.getDate());
-  },
-  dd: (date) => {
-    return core.leftPad(date.getDate(), 2);
-  },
-  ddd: (date) => {
-    return Lanauage.getWeeksMessage(date.getDay());
-  },
-  dddd: (date) => {
-    return Lanauage.getWeeksMessage(date.getDay(), "full");
-  },
-  H: (date) => {
-    return String(date.getHours());
-  },
-  HH: (date) => {
-    return core.leftPad(date.getHours(), 2);
-  },
-  h: (date) => {
-    return getH(date);
-  },
-  hh: (date) => {
-    return core.leftPad(getH(date), 2);
-  },
-  a: (date) => {
-    return String(date.getFullYear()).slice(-2);
-  },
-  A: (date) => {
-    return getMeridiem(date);
-  },
-  m: (date) => {
-    return String(date.getMinutes());
-  },
-  mm: (date) => {
-    return core.leftPad(date.getMinutes(), 2);
-  },
-  s: (date) => {
-    return String(date.getSeconds());
-  },
-  ss: (date) => {
-    return core.leftPad(date.getSeconds(), 2);
-  },
-  SSS: (date) => {
-    return core.leftPad(date.getMilliseconds(), 3);
-  }
-};
-function getH(date) {
-  let hour = date.getHours();
-  if (hour > 12) {
-    hour -= 12;
-  } else if (hour < 1) {
-    hour = 12;
-  }
-  return hour;
-}
-function getMeridiem(date, isUpper, isShort) {
-  const hour = date.getHours();
-  let m = hour < 12 ? "am" : "pm";
-  m = Lanauage.getMessage(m);
-  m = m.toUpperCase();
-  return m;
-}
-const parser = (dateStr, format2) => {
-  if (dateStr.length > 1e3) {
-    return null;
-  }
-  format2 = format2 || DEFAULT_FORMAT.date;
-  const dateInfo = {
-    year: (/* @__PURE__ */ new Date()).getFullYear(),
-    month: 0,
-    day: 1,
-    hour: 0,
-    minute: 0,
-    second: 0,
-    millisecond: 0,
-    isPm: false,
-    isH: false,
-    charIdx: 0
-  };
-  const len = format2.length;
-  let startIdx = 0;
-  for (let i = 0; i < len; ) {
-    let minLen = Math.min(MAX_CHAR_LENGTH, len - i);
-    let j = minLen;
-    for (; j > 0; j--) {
-      const v = format2.substring(i, i + j);
-      if (EXPRESSIONS_FORMAT.includes(v)) {
-        const expInfo = expressionsFunction[v];
-        const val = matchFind(dateStr.substring(startIdx), expInfo[0]);
-        expInfo[1](dateInfo, val);
-        startIdx += val.length;
-        break;
-      }
-    }
-    if (j < 1) {
-      i += 1;
-      startIdx += 1;
-    } else {
-      i += j;
-    }
-  }
-  if (dateInfo.hour != null && !dateInfo.isH) {
-    if (dateInfo.isPm && +dateInfo.hour !== 12) {
-      dateInfo.hour = +dateInfo.hour + 12;
-    } else if (!dateInfo.isPm && +dateInfo.hour === 12) {
-      dateInfo.hour = 0;
-    }
-  }
-  let date;
-  date = new Date(dateInfo.year, dateInfo.month, dateInfo.day, dateInfo.hour, dateInfo.minute, dateInfo.second, dateInfo.millisecond);
-  return date;
-};
-const matchFind = (val, regexp2) => {
-  const match = regexp2.exec(val);
-  return match == null ? "" : match[0];
-};
-const digitsCheck = {
-  twoOptional: /\d\d?/,
-  two: /\d\d/,
-  three: /\d{3}/,
-  four: /\d{4}/
-};
-const word = /[^\s]+/;
-const expressionsFunction = {
-  YY: [
-    digitsCheck["two"],
-    (dateInfo, val) => {
-      dateInfo.year = +(("" + (/* @__PURE__ */ new Date()).getFullYear()).substring(0, 2) + val);
-      return dateInfo;
-    }
-  ],
-  YYYY: [
-    digitsCheck["four"],
-    (dateInfo, val) => {
-      dateInfo.year = +val;
-      return dateInfo;
-    }
-  ],
-  M: [
-    digitsCheck["twoOptional"],
-    (dateInfo, val) => {
-      dateInfo.month = +val - 1;
-      return dateInfo;
-    }
-  ],
-  MM: [
-    digitsCheck["two"],
-    (dateInfo, val) => {
-      dateInfo.month = +val - 1;
-      return dateInfo;
-    }
-  ],
-  MMM: [
-    word,
-    (dateInfo, val) => {
-      dateInfo.month = Lanauage.getMonthsIdx(val, "abbr");
-      return dateInfo;
-    }
-  ],
-  MMMM: [
-    word,
-    (dateInfo, val) => {
-      dateInfo.month = Lanauage.getMonthsIdx(val, "full");
-      return dateInfo;
-    }
-  ],
-  D: [
-    digitsCheck["twoOptional"],
-    (dateInfo, val) => {
-      dateInfo.day = +val;
-      return dateInfo;
-    }
-  ],
-  DD: [
-    digitsCheck["two"],
-    (dateInfo, val) => {
-      dateInfo.day = +val;
-      return dateInfo;
-    }
-  ],
-  d: [
-    digitsCheck["twoOptional"],
-    (dateInfo, val) => {
-      dateInfo.day = +val;
-      return dateInfo;
-    }
-  ],
-  dd: [
-    digitsCheck["two"],
-    (dateInfo, val) => {
-      dateInfo.day = +val;
-      return dateInfo;
-    }
-  ],
-  ddd: [
-    word,
-    (dateInfo, val) => {
-      return dateInfo;
-    }
-  ],
-  dddd: [
-    word,
-    (dateInfo, val) => {
-      return dateInfo;
-    }
-  ],
-  H: [
-    digitsCheck["twoOptional"],
-    (dateInfo, val) => {
-      dateInfo.hour = +val;
-      dateInfo.isH = true;
-      return dateInfo;
-    }
-  ],
-  HH: [
-    digitsCheck["two"],
-    (dateInfo, val) => {
-      dateInfo.hour = +val;
-      dateInfo.isH = true;
-      return dateInfo;
-    }
-  ],
-  h: [
-    digitsCheck["twoOptional"],
-    (dateInfo, val) => {
-      dateInfo.hour = +val;
-      return dateInfo;
-    }
-  ],
-  hh: [
-    digitsCheck["two"],
-    (dateInfo, val) => {
-      dateInfo.hour = +val;
-      return dateInfo;
-    }
-  ],
-  a: [
-    word,
-    (dateInfo, val) => {
-      if (Lanauage.getMessage("am") != val.toLowerCase()) {
-        dateInfo.isPm = true;
-      }
-      return dateInfo;
-    }
-  ],
-  A: [
-    word,
-    (dateInfo, val) => {
-      if (Lanauage.getMessage("am") != val.toLowerCase()) {
-        dateInfo.isPm = true;
-      }
-      return dateInfo;
-    }
-  ],
-  m: [
-    digitsCheck["twoOptional"],
-    (dateInfo, val) => {
-      dateInfo.minute = +val;
-      return dateInfo;
-    }
-  ],
-  mm: [
-    digitsCheck["two"],
-    (dateInfo, val) => {
-      dateInfo.minute = +val;
-      return dateInfo;
-    }
-  ],
-  s: [
-    digitsCheck["twoOptional"],
-    (dateInfo, val) => {
-      dateInfo.second = +val;
-      return dateInfo;
-    }
-  ],
-  ss: [
-    digitsCheck["two"],
-    (dateInfo, val) => {
-      dateInfo.second = +val;
-      return dateInfo;
-    }
-  ],
-  SSS: [
-    digitsCheck["three"],
-    (dateInfo, val) => {
-      dateInfo.millisecond = +val;
-      return dateInfo;
-    }
-  ]
-};
-function closestElement(el, checkElement) {
-  let currentEl = el;
-  while (currentEl) {
-    if (currentEl == checkElement) {
-      return true;
-    }
-    currentEl = currentEl.parentElement;
-  }
-  return false;
-}
-class DaraDate {
-  constructor(dt) {
-    this.date = dt;
-  }
-  setYear(num) {
-    this.date.setFullYear(num);
-    return this;
-  }
-  addYear(num) {
-    this.date.setFullYear(this.date.getFullYear() + num);
-    return this;
-  }
-  addMonth(num) {
-    this.date.setMonth(this.date.getMonth() + num);
-    return this;
-  }
-  setMonth(num) {
-    this.date.setMonth(num);
-    return this;
-  }
-  setDate(num) {
-    this.date.setDate(num);
-    return this;
-  }
-  addDate(num) {
-    this.date.setDate(this.date.getDate() + num);
-    return this;
-  }
-  addWeek(num) {
-    this.date.setDate(this.date.getDate() + num * 7);
-    return this;
-  }
-  addHours(num) {
-    this.date.setHours(this.date.getHours() + num);
-    return this;
-  }
-  setHour(num) {
-    this.date.setHours(num);
-    return this;
-  }
-  addMinutes(num) {
-    this.date.setMinutes(this.date.getMinutes() + num);
-    return this;
-  }
-  setMinutes(num) {
-    this.date.setMinutes(num);
-    return this;
-  }
-  addSeconds(num) {
-    this.date.setSeconds(this.date.getSeconds() + num);
-    return this;
-  }
-  addMilliseconds(num) {
-    this.date.setMilliseconds(this.date.getMilliseconds() + num);
-    return this;
-  }
-  compare(date) {
-    if (this.date.valueOf() < date.valueOf()) {
-      return -1;
-    } else if (this.date.valueOf() > date.valueOf()) {
-      return 1;
-    }
-    return 0;
-  }
-  getYear() {
-    return this.date.getFullYear();
-  }
-  getMonth() {
-    return this.date.getMonth() + 1;
-  }
-  getDate() {
-    return this.date.getDate();
-  }
-  getDay() {
-    return this.date.getDay();
-  }
-  getTime() {
-    return this.date.getTime();
-  }
-  format(format$1) {
-    return format(this.date, format$1);
-  }
-  clone() {
-    return new DaraDate(new Date(this.date.valueOf()));
-  }
-}
-let DEFAULT_OPTIONS$1 = {
-  inline: false,
-  // layer or innerhtml
-  weekStartDay: 0,
-  initialDate: "",
-  autoClose: true,
-  isRTL: false,
-  mode: DateViewMode.date,
-  enableTodayBtn: false,
-  showMonthAfterYear: false,
-  isPositionFixed: false,
-  format: "",
-  zIndex: 1e3,
-  minDate: "",
-  maxDate: "",
-  beforeDrawDate: (dt) => {
-    return {
-      check: false,
-      style: "",
-      tooltip: ""
-    };
-  }
-};
-function hiddenElement() {
-  var _a;
-  if (document.getElementById("hiddenDaraDatetimeElement") == null) {
-    (_a = document.querySelector("body")) == null ? void 0 : _a.insertAdjacentHTML("beforeend", `<div id="hiddenDaraDatetimeElement" class="daracl-datetime-hidden"></div>`);
-  }
-  return document.getElementById("hiddenDaraDatetimeElement");
-}
-let daraDatetimeIdx = 0;
-const _DateTimePicker = class _DateTimePicker2 {
-  constructor(selector, options, message2) {
-    var _a;
-    this.isInput = false;
-    this.isVisible = false;
-    this.minYear = -1;
-    this.maxYear = -1;
-    this.minMonth = -1;
-    this.maxMonth = -1;
-    this.dayOrder = [0, 1, 2, 3, 4, 5, 6];
-    this._documentClickEvent = (e) => {
-      if (this.isVisible && e.target != this.targetElement && !closestElement(e.target, this.datetimeElement)) {
-        this.hide();
-      }
-    };
-    this.options = Object.assign({}, DEFAULT_OPTIONS$1, options);
-    daraDatetimeIdx += 1;
-    let selectorElement;
-    if (typeof selector === "string") {
-      selectorElement = document.querySelector(selector);
-    } else {
-      selectorElement = selector;
-    }
-    if (!selectorElement) {
-      throw new Error(`${selector} datetimepicker element not found`);
-    }
-    this._viewMode = Object.keys(DateViewMode).includes(this.options.mode) ? this.options.mode : DateViewMode.date;
-    this.initMode = this._viewMode;
-    Lanauage.set(message2);
-    if (this.initMode == DateViewMode.year) {
-      this.dateFormat = this.options.format || DEFAULT_FORMAT.year;
-    } else if (this.initMode == DateViewMode.month) {
-      this.dateFormat = this.options.format || DEFAULT_FORMAT.month;
-    } else if (this.initMode == DateViewMode.time) {
-      this.dateFormat = this.options.format || DEFAULT_FORMAT.time;
-    } else if (this.initMode == DateViewMode.datetime) {
-      this.dateFormat = this.options.format || DEFAULT_FORMAT.datetime;
-    } else {
-      this.dateFormat = this.options.format || DEFAULT_FORMAT.date;
-    }
-    let viewDate;
-    if (this.options.initialDate) {
-      if (typeof this.options.initialDate === "string") {
-        viewDate = new DaraDate(parser(this.options.initialDate, this.dateFormat) || /* @__PURE__ */ new Date());
-      } else {
-        viewDate = new DaraDate(this.options.initialDate);
-      }
-    } else {
-      viewDate = new DaraDate(/* @__PURE__ */ new Date());
-      this.options.initialDate = viewDate.format(this.dateFormat);
-    }
-    this.setWeekDays();
-    this.todayDate = viewDate.format(DEFAULT_FORMAT.date);
-    this.currentDate = viewDate;
-    this.targetElement = selectorElement;
-    this.minDate = this._minDate();
-    this.maxDate = this._maxDate();
-    if (this.options.inline) {
-      this.datetimeElement = selectorElement;
-      this.datetimeElement.className = `daracl-datetime-wrapper ddtp-${daraDatetimeIdx} embed`;
-    } else {
-      this.isInput = true;
-      this.targetElement.setAttribute("value", viewDate.format(this.dateFormat));
-      const datetimeElement = document.createElement("div");
-      datetimeElement.className = `daracl-datetime-wrapper ddtp-${daraDatetimeIdx} layer`;
-      datetimeElement.setAttribute("style", `z-index:${this.options.zIndex};`);
-      (_a = hiddenElement()) == null ? void 0 : _a.appendChild(datetimeElement);
-      this.datetimeElement = datetimeElement;
-      this.initTargetEvent();
-    }
-    this.createDatetimeTemplate();
-    if (this.isTimeMode()) {
-      this.hourInputEle = this.datetimeElement.querySelector(".ddtp-hour");
-      this.minuteInputEle = this.datetimeElement.querySelector(".ddtp-minute");
-    } else {
-      this.hourInputEle = {};
-      this.minuteInputEle = {};
-    }
-    this.changeViewMode(this._viewMode);
-    this.initHeaderEvent();
-    this.initDateEvent();
-    this.initTimeEvent();
-  }
-  setWeekDays() {
-    let weekStartDay = this.options.weekStartDay;
-    if (weekStartDay == 0) return;
-    if (weekStartDay < 0 || weekStartDay > 6) {
-      weekStartDay = 0;
-    }
-    for (let i = 0; i < 7; i++) {
-      let day = weekStartDay + i;
-      this.dayOrder[i] = day < 7 ? day : day - 7;
-    }
-  }
-  static create(selector, options, message2) {
-    return new _DateTimePicker2(selector, options, message2);
-  }
-  /**
-   * default date format setting
-   * @example
-   ```
-  setDefaultFormat({
-    year: "YYYY",
-    month: "YYYY-MM",
-    date: "YYYY-MM-DD",
-    time: "HH:mm",
-    datetime: "YYYY-MM-DD HH:mm",
-  });
-   ```
-   * @public
-   * @static
-   * @param {*} dateFormat
-   */
-  static setDefaultFormat(dateFormat) {
-    Object.assign(DEFAULT_FORMAT, dateFormat);
-  }
-  _minDate() {
-    let minDate = this.options.minDate;
-    if (minDate != "") {
-      if (typeof minDate === "string") {
-        const dt = parser(minDate, this.dateFormat);
-        if (!dt) {
-          return -1;
-        }
-        minDate = dt;
-      }
-      this.minYear = minDate.getFullYear();
-      this.minMonth = +(this.minYear + core.leftPad(minDate.getMonth(), 2));
-      return new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), 0, 0).getTime();
-    }
-    return -1;
-  }
-  _maxDate() {
-    let maxDate = this.options.maxDate;
-    if (maxDate != "") {
-      if (typeof maxDate === "string") {
-        const dt = parser(maxDate, this.dateFormat);
-        if (!dt) {
-          return -1;
-        }
-        maxDate = dt;
-      }
-      this.maxYear = maxDate.getFullYear();
-      this.maxMonth = +(this.maxYear + core.leftPad(maxDate.getMonth(), 2));
-      return new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate(), 23, 59).getTime();
-    }
-    return -1;
-  }
-  set viewMode(mode) {
-    if (this._viewMode === mode) {
-      return;
-    }
-    this._viewMode = mode;
-    this.changeViewMode(mode);
-  }
-  get viewMode() {
-    return this._viewMode;
-  }
-  /**
-   * 모드  change
-   * @param mode
-   */
-  changeViewMode(mode) {
-    var _a;
-    (_a = this.datetimeElement.querySelector(".ddtp-datetime")) == null ? void 0 : _a.setAttribute("view-mode", mode);
-    if (mode === "year") {
-      this.yearDraw();
-    } else if (mode === "month") {
-      this.monthDraw();
-    } else {
-      this.dayDraw();
-    }
-  }
-  /**
-   * init header event
-   *
-   * @public
-   */
-  initHeaderEvent() {
-    var _a, _b, _c, _d;
-    const isRTL = this.options.isRTL;
-    (_a = this.datetimeElement.querySelector(".ddtp-move-btn.prev")) == null ? void 0 : _a.addEventListener("click", (e) => {
-      this.moveDate(isRTL ? "next" : "prev", e);
-    });
-    (_b = this.datetimeElement.querySelector(".ddtp-move-btn.next")) == null ? void 0 : _b.addEventListener("click", (e) => {
-      this.moveDate(isRTL ? "prev" : "next", e);
-    });
-    (_c = this.datetimeElement.querySelector(".ddtp-header-year")) == null ? void 0 : _c.addEventListener("click", (e) => {
-      this.viewMode = DateViewMode.year;
-    });
-    (_d = this.datetimeElement.querySelector(".ddtp-header-month")) == null ? void 0 : _d.addEventListener("click", (e) => {
-      this.viewMode = DateViewMode.month;
-    });
-  }
-  /**
-   * 날짜 달력 이벤트처리.
-   */
-  initDateEvent() {
-    var _a, _b;
-    (_a = this.datetimeElement.querySelector(".ddtp-day-body")) == null ? void 0 : _a.addEventListener("click", (e) => {
-      var _a2;
-      const targetEle = e.target;
-      if (targetEle.classList.contains("ddtp-day") || targetEle.closest(".ddtp-day")) {
-        const selectDate = targetEle.getAttribute("data-day") || "1";
-        const mmDD = selectDate.split(",");
-        this.currentDate.setMonth(+mmDD[0] - 1);
-        this.currentDate.setDate(+mmDD[1]);
-        if (this.isDayDisabled(this.currentDate)) {
-          return;
-        }
-        (_a2 = this.datetimeElement.querySelector(".select")) == null ? void 0 : _a2.classList.remove("select");
-        targetEle.classList.add("select");
-        if (this.isTimeMode()) {
-          this.currentDate.setHour(+this.hourInputEle.value);
-          this.currentDate.setMinutes(+this.minuteInputEle.value);
-        }
-        this.dateChangeEvent(e);
-      }
-    });
-    (_b = this.datetimeElement.querySelector(".ddtp-today")) == null ? void 0 : _b.addEventListener("click", (e) => {
-      const initDate = new DaraDate(parser(this.todayDate, DEFAULT_FORMAT.date) || /* @__PURE__ */ new Date());
-      this.currentDate.setYear(initDate.getYear());
-      this.currentDate.setMonth(initDate.getMonth() - 1);
-      this.currentDate.setDate(initDate.getDate());
-      this.changeViewMode(this.initMode);
-    });
-  }
-  isTimeMode() {
-    return this._viewMode === DateViewMode.time || this._viewMode === DateViewMode.datetime;
-  }
-  getTimeNumberValue(val) {
-    if (!core.isNumeric(val)) {
-      return 0;
-    }
-    return parseInt(val, 10);
-  }
-  /**
-   * 시간 분 설정 이벤트 처리.
-   *
-   * @public
-   */
-  initTimeEvent() {
-    var _a;
-    if (!this.isTimeMode()) return;
-    let hh = this.currentDate.format("HH");
-    const datetimeElement = this.datetimeElement;
-    const hourInputEle = datetimeElement.querySelector(".ddtp-hour");
-    const hourRangeEle = datetimeElement.querySelector(".ddtp-hour-range");
-    hourInputEle.value = hh;
-    hourRangeEle.value = hh;
-    hourInputEle.addEventListener("input", (e) => {
-      const targetElement = e.target;
-      let val = this.getTimeNumberValue(targetElement.value);
-      let addVal = core.leftPadClamp(val, 2, "0");
-      if (parseInt(addVal, 10) > 23) {
-        addVal = "23";
-      }
-      hourInputEle.value = addVal;
-      hourRangeEle.value = addVal;
-    });
-    hourRangeEle.addEventListener("input", (e) => {
-      const targetElement = e.target;
-      hourInputEle.value = core.leftPadClamp(targetElement.value, 2, "0");
-    });
-    let mm = this.currentDate.format("mm");
-    const minuteInputEle = datetimeElement.querySelector(".ddtp-minute");
-    const minuteRangeEle = datetimeElement.querySelector(".ddtp-minute-range");
-    minuteInputEle.value = mm;
-    minuteRangeEle.value = mm;
-    minuteInputEle.addEventListener("input", (e) => {
-      const targetElement = e.target;
-      let val = this.getTimeNumberValue(targetElement.value);
-      let addVal = core.leftPadClamp(val, 2, "0");
-      if (parseInt(addVal, 10) > 59) {
-        addVal = "59";
-      }
-      minuteInputEle.value = addVal;
-      minuteRangeEle.value = addVal;
-    });
-    minuteRangeEle.addEventListener("input", (e) => {
-      const targetElement = e.target;
-      minuteInputEle.value = core.leftPadClamp(targetElement.value, 2, "0");
-    });
-    (_a = datetimeElement.querySelector(".time-select")) == null ? void 0 : _a.addEventListener("click", (e) => {
-      this.currentDate.setHour(+hourInputEle.value);
-      this.currentDate.setMinutes(+minuteInputEle.value);
-      this.dateChangeEvent(e);
-    });
-  }
-  /**
-   * 날짜 이동
-   * @param moveMode // 앞뒤 이동 prev, next
-   * @returns
-   */
-  moveDate(moveMode, e) {
-    if (this._viewMode === DateViewMode.date || this._viewMode === DateViewMode.datetime) {
-      this.currentDate.setDate(1);
-      this.currentDate.addMonth("prev" === moveMode ? -1 : 1);
-      this.dayDraw();
-      return;
-    }
-    if (this._viewMode === DateViewMode.month) {
-      this.currentDate.setDate(1);
-      this.currentDate.addYear("prev" === moveMode ? -1 : 1);
-      this.monthDraw();
-      return;
-    }
-    if (this._viewMode === DateViewMode.year) {
-      this.currentDate.setDate(1);
-      this.currentDate.addYear("prev" === moveMode ? -16 : 16);
-      this.yearDraw();
-    }
-  }
-  /**
-   * get date value
-   *
-   * @returns
-   */
-  getDateValue() {
-    return this.currentDate.format(this.dateFormat);
-  }
-  /**
-   * 옵션 셋팅
-   * @static
-   * @param {DateTimePickerOptions} options
-   */
-  static setOptions(options) {
-    DEFAULT_OPTIONS$1 = Object.assign({}, DEFAULT_OPTIONS$1, options);
-  }
-  /**
-   * 달력 보이기 처리.
-   *
-   * @returns
-   */
-  show() {
-    if (this.isVisible) {
-      return;
-    }
-    this.isVisible = true;
-    const docSize = getDocSize();
-    this.datetimeElement.classList.remove("hide");
-    this.datetimeElement.classList.add("show");
-    const rect = this.targetElement.getBoundingClientRect();
-    const scrollTop = window.scrollY || document.documentElement.scrollTop;
-    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
-    const elementHeight = this.datetimeElement.offsetHeight;
-    const targetElementHeight = this.targetElement.offsetHeight + 2;
-    let left = rect.left + scrollLeft;
-    let top = 0;
-    if (this.options.isPositionFixed) {
-      top = rect.top + targetElementHeight;
-      left = rect.left;
-    } else {
-      if (rect.top + targetElementHeight + elementHeight > docSize.clientHeight && rect.top >= elementHeight) {
-        top = scrollTop + rect.top - elementHeight - 2;
-      } else {
-        top = scrollTop + rect.top + targetElementHeight;
-      }
-    }
-    this.datetimeElement.setAttribute("style", `${this.options.isPositionFixed ? "position:fixed;" : ""}top:${top}px;left:${left}px;z-index:${this.options.zIndex}`);
-    document.addEventListener("click", this._documentClickEvent);
-  }
-  /**
-   * 달력 숨기기
-   */
-  hide() {
-    this.isVisible = false;
-    if (this.options.onClose) {
-      if (this.options.onClose() === false) {
-        return;
-      }
-    }
-    this.datetimeElement.classList.remove("show");
-    this.datetimeElement.classList.add("hide");
-    document.removeEventListener("click", this._documentClickEvent);
-  }
-  /**
-   * 타켓 이벤트 처리.
-   */
-  initTargetEvent() {
-    if (this.targetElement) {
-      this.targetElement.addEventListener("click", (e) => {
-        this.show();
-      });
-    }
-  }
-  /**
-   * 날짜 변경후 이벤트
-   */
-  afterChangeDatepicker() {
-    const formatValue = this.currentDate.format(this.dateFormat);
-    if (this.options.afterChangeDatepicker && core.isFunction(this.options.afterChangeDatepicker)) {
-      this.options.afterChangeDatepicker(formatValue, this.viewMode);
-    }
-  }
-  /**
-   * 날짜 변경 전 이벤트.
-   * @returns void
-   */
-  beforeChangeDatepicker() {
-    const formatValue = this.currentDate.format(this.dateFormat);
-    if (this.options.beforeChangeDatepicker && core.isFunction(this.options.beforeChangeDatepicker)) {
-      const reval = this.options.beforeChangeDatepicker(formatValue, (result) => {
-        if (result === false) {
-          return;
-        }
-        this.refresh(false);
-      });
-      if (reval === false) {
-        return;
-      }
-      this.refresh(false);
-      return;
-    }
-    this.refresh(false);
-  }
-  dateChangeEvent(e) {
-    const formatValue = this.currentDate.format(this.dateFormat);
-    if (this.options.onSelect) {
-      if (this.options.onSelect(formatValue, this.viewMode, e) === false) {
-        return;
-      }
-    }
-    if (this.isInput) {
-      this.targetElement.setAttribute("value", formatValue);
-    }
-    if (!this.options.inline && this.options.autoClose) {
-      this.hide();
-    }
-  }
-  /**
-   *  datepicker template  그리기
-   */
-  createDatetimeTemplate() {
-    const showMonthAfterYear = this.options.showMonthAfterYear;
-    let datetimeTemplate = `<div class="ddtp-datetime ${this.options.isRTL ? "rtl" : ""}" view-mode="${this._viewMode}">
-			<div class="ddtp-header">
-                <span class="${showMonthAfterYear ? "ddtp-header-year" : "ddtp-header-month"}"></span>
-                <span class="${showMonthAfterYear ? "ddtp-header-month" : "ddtp-header-year"}"></span>
-
-                <span class="ddtp-date-move">  
-                    <a href="javascript:;" class="ddtp-move-btn prev">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
-                    </a>
-                    <a href="javascript:;" class="ddtp-move-btn next">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-                    </a> 
-                </span>
-			</div>
-            <div class="ddtp-body">
-                <table class="ddtp-days">
-                    <thead class="ddtp-day-header">
-                        <tr>		
-                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[0]]}">${Lanauage.getWeeksMessage(this.dayOrder[0])}</td>		
-                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[1]]}">${Lanauage.getWeeksMessage(this.dayOrder[1])}</td>		
-                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[2]]}">${Lanauage.getWeeksMessage(this.dayOrder[2])}</td>		
-                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[3]]}">${Lanauage.getWeeksMessage(this.dayOrder[3])}</td>		
-                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[4]]}">${Lanauage.getWeeksMessage(this.dayOrder[4])}</td>		
-                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[5]]}">${Lanauage.getWeeksMessage(this.dayOrder[5])}</td>		
-                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[6]]}">${Lanauage.getWeeksMessage(this.dayOrder[6])}</td>		
-                        </tr>
-                    </thead>
-                    <tbody class="ddtp-day-body">
-                    </tbody>
-                    
-                    <tfoot class="ddtp-day-footer">
-                        <td colspan="7">
-                            <div style="width:99%;text-align:center;margin-top: 5px;${this.options.enableTodayBtn ? "" : "display:none;"}"><button type="button" class="ddtp-today">${Lanauage.getMessage("today")}</button></div>
-                            <div class="footer-tooltip"></div>
-                        </td>
-                    </tfoot>
-                </table>
-
-                <div class="ddtp-times">
-                        <div class="time-container">
-                            <div class="ddtp-time">
-                                <span>H: </span><input type="number" class="ddtp-hour" min="0" max="23" maxlength="2">
-                                <input type="range" min="0" max="23" class="ddtp-hour-range">
-                            </div>
-                            <div class="ddtp-time">
-                                <span>M: </span><input type="number" class="ddtp-minute" min="0" max="59" size="2" maxlength="2">
-                                <input type="range" min="0" max="59" class="ddtp-minute-range">
-                            </div>
-                        </div>
-                        <div class="ddtp-btn">
-                            <button type="button" class="time-select">${Lanauage.getMessage("ok")}</button>
-                        </div>
-                </div>
-
-                <div class="ddtp-months">
-                </div>
-
-                <div class="ddtp-years">
-                </div>
-            </div>
-        </div>`;
-    this.datetimeElement.innerHTML = datetimeTemplate;
-  }
-  refresh(beforeChangeDatepickerCheck) {
-    if (this._viewMode === DateViewMode.date || this._viewMode === DateViewMode.datetime) {
-      this.dayDraw(beforeChangeDatepickerCheck);
-      return;
-    }
-    if (this._viewMode === DateViewMode.month) {
-      this.monthDraw(beforeChangeDatepickerCheck);
-      return;
-    }
-    if (this._viewMode === DateViewMode.year) {
-      this.yearDraw(beforeChangeDatepickerCheck);
-    }
-  }
-  /**
-   * 년 달력 그리기
-   */
-  yearDraw(beforeChangeDatepickerCheck) {
-    var _a;
-    const currentYear = this.currentDate.format("YYYY");
-    if (beforeChangeDatepickerCheck !== false && this.initMode == DateViewMode.year) {
-      this.beforeChangeDatepicker();
-      return;
-    }
-    const startYear = +currentYear - 8;
-    this.datetimeElement.querySelector(".ddtp-header-year").textContent = `${startYear} ~ ${startYear + 15}`;
-    const beforeDrawDateFlag = core.isFunction(this.options.beforeDrawDate);
-    const beforeDrawDateFn = beforeDrawDateFlag ? this.options.beforeDrawDate : false;
-    const calHTML = [];
-    for (let i = 0; i < 16; i++) {
-      const year = startYear + i;
-      const disabled = this.isYearDisabled(year);
-      let addStylceClass = disabled ? " disabled" : "";
-      let tooltip = "";
-      if (beforeDrawDateFlag && beforeDrawDateFn) {
-        const reval = beforeDrawDateFn({ mode: this._viewMode, date: year });
-        addStylceClass += reval.style ? " " + reval.style : "";
-        tooltip = reval.tooltip;
-        tooltip = tooltip ? `title="${tooltip}"` : "";
-      }
-      calHTML.push(`<div class="ddtp-year ${addStylceClass}" data-year="${year}" ${tooltip}>${year}</div>`);
-    }
-    this.datetimeElement.querySelector(".ddtp-years").innerHTML = calHTML.join("");
-    if (this.initMode == DateViewMode.year) {
-      this.afterChangeDatepicker();
-    }
-    (_a = this.datetimeElement.querySelectorAll(".ddtp-year")) == null ? void 0 : _a.forEach((yearEle) => {
-      yearEle.addEventListener("click", (e) => {
-        const targetEle = e.target;
-        if (targetEle) {
-          const year = targetEle.getAttribute("data-year");
-          if (year) {
-            const numYear = +year;
-            if (this.isYearDisabled(numYear)) {
-              return;
-            }
-            if (this.initMode == DateViewMode.year) {
-              if (this.isYearDisabled(numYear)) {
-                return;
-              }
-              this.currentDate.setYear(numYear);
-              this.dateChangeEvent(e);
-              return;
-            }
-            this.currentDate.setYear(numYear);
-            this.viewMode = this.initMode;
-          }
-        }
-      });
-    });
-  }
-  /**
-   * 월 달력 그리기
-   */
-  monthDraw(beforeChangeDatepickerCheck) {
-    var _a;
-    if (beforeChangeDatepickerCheck !== false && this.initMode == DateViewMode.month) {
-      this.beforeChangeDatepicker();
-      return;
-    }
-    const year = this.currentDate.format("YYYY");
-    this.datetimeElement.querySelector(".ddtp-header-year").textContent = `${year}`;
-    const monthElements = this.datetimeElement.querySelectorAll(".ddtp-months > .ddtp-month");
-    if (monthElements.length > 0) {
-      if (this.isYearDisabled(+year)) {
-        monthElements.forEach((monthEle) => {
-          if (!monthEle.classList.contains("disabled")) {
-            monthEle.classList.add("disabled");
-          }
-        });
-        return;
-      }
-      monthElements.forEach((monthEle, idx) => {
-        if (this.isMonthDisabled(+year, idx)) {
-          if (!monthEle.classList.contains("disabled")) {
-            monthEle.classList.add("disabled");
-          }
-        } else {
-          monthEle.classList.remove("disabled");
-        }
-      });
-      if (this.initMode == DateViewMode.month) {
-        this.afterChangeDatepicker();
-      }
-      return;
-    }
-    this.datetimeElement.querySelector(".ddtp-header-month").textContent = this.currentDate.format("MMMM");
-    const beforeDrawDateFlag = core.isFunction(this.options.beforeDrawDate);
-    const beforeDrawDateFn = beforeDrawDateFlag ? this.options.beforeDrawDate : false;
-    const calHTML = [];
-    for (let i = 0; i < 12; i++) {
-      const disabled = this.isMonthDisabled(+year, i);
-      let addStylceClass = disabled ? " disabled" : "";
-      let tooltip = "";
-      if (beforeDrawDateFlag && beforeDrawDateFn) {
-        const reval = beforeDrawDateFn({ mode: this._viewMode, date: year + "/" + (i + 1) });
-        addStylceClass += reval.style ? " " + reval.style : "";
-        tooltip = reval.tooltip;
-        tooltip = tooltip ? `title="${tooltip}"` : "";
-      }
-      calHTML.push(`<div class="ddtp-month ${addStylceClass}" data-month="${i}" ${tooltip}>${Lanauage.getMonthsMessage(i, "abbr")}</div>`);
-    }
-    this.datetimeElement.querySelector(".ddtp-months").innerHTML = calHTML.join("");
-    if (this.initMode == DateViewMode.month) {
-      this.afterChangeDatepicker();
-    }
-    (_a = this.datetimeElement.querySelectorAll(".ddtp-month")) == null ? void 0 : _a.forEach((monthEle) => {
-      monthEle.addEventListener("click", (e) => {
-        const targetEle = e.target;
-        if (targetEle) {
-          const month = targetEle.getAttribute("data-month");
-          if (month) {
-            if (this.isMonthDisabled(this.currentDate.getYear(), +month)) {
-              return false;
-            }
-            if (this.initMode == DateViewMode.month) {
-              this.currentDate.setMonth(+month);
-              this.dateChangeEvent(e);
-              return;
-            }
-            this.currentDate.setMonth(+month);
-            this.viewMode = this.initMode;
-            this.dayDraw();
-          }
-        }
-      });
-    });
-  }
-  /**
-   * 날짜 그리기
-   */
-  dayDraw(beforeChangeDatepickerCheck) {
-    if (beforeChangeDatepickerCheck !== false && (this.initMode == DateViewMode.date || this.initMode == DateViewMode.datetime)) {
-      this.beforeChangeDatepicker();
-      return;
-    }
-    let monthFirstDate = this.currentDate.clone();
-    const currentMonth = monthFirstDate.getMonth();
-    monthFirstDate.setDate(1);
-    this.datetimeElement.querySelector(".ddtp-header-year").textContent = monthFirstDate.format("YYYY");
-    this.datetimeElement.querySelector(".ddtp-header-month").textContent = monthFirstDate.format("MMMM");
-    let day = monthFirstDate.getDay();
-    day = day - this.dayOrder[0];
-    if (day >= 0) {
-      monthFirstDate.addDate(-day);
-    } else {
-      monthFirstDate.addDate(-(7 + day));
-    }
-    const beforeDrawDateFlag = core.isFunction(this.options.beforeDrawDate);
-    const beforeDrawDateFn = beforeDrawDateFlag ? this.options.beforeDrawDate : false;
-    const calHTML = [];
-    for (let i = 0; i < 42; i++) {
-      let dateItem;
-      if (i == 0) {
-        dateItem = monthFirstDate;
-      } else {
-        dateItem = monthFirstDate.clone().addDate(i);
-      }
-      const dateItemFormat = dateItem.format(DEFAULT_FORMAT.date);
-      if (i % 7 == 0) {
-        calHTML.push((i == 0 ? "" : "</tr>") + "<tr>");
-      }
-      let disabled = this.isDayDisabled(dateItem);
-      let addStylceClass = DAY_STYLE_CLASS[this.dayOrder[i % 7]];
-      const dateItemMonth = dateItem.getMonth();
-      if (dateItemMonth != currentMonth) {
-        if (dateItemMonth < currentMonth) {
-          addStylceClass += dateItemMonth == 1 ? " new" : " old";
-        } else {
-          addStylceClass += currentMonth == 1 && dateItemMonth == 12 ? " old" : " new";
-        }
-      }
-      addStylceClass += this.todayDate == dateItemFormat ? " ddtp-today" : "";
-      addStylceClass += disabled ? " disabled" : "";
-      let tooltip = "";
-      if (beforeDrawDateFlag && beforeDrawDateFn) {
-        const reval = beforeDrawDateFn({ mode: this._viewMode, item: dateItem, date: dateItem.format(this.dateFormat) });
-        addStylceClass += reval.style ? " " + reval.style : "";
-        addStylceClass += reval.check ? " ddtp-event" : "";
-        tooltip = reval.tooltip;
-        tooltip = tooltip ? `title="${tooltip}"` : "";
-      }
-      calHTML.push(`<td class="ddtp-day ${addStylceClass}" data-day="${dateItem.format("M,D")}" ${tooltip}>`);
-      calHTML.push(`<span>${dateItem.format("d")}</span>`);
-      calHTML.push("</td>");
-    }
-    calHTML.push("</tr>");
-    this.datetimeElement.querySelector(".ddtp-day-body").innerHTML = calHTML.join("");
-    if (this.initMode == DateViewMode.date || this.initMode == DateViewMode.datetime) {
-      this.afterChangeDatepicker();
-    }
-  }
-  isDayDisabled(dateItem) {
-    if (this.minDate != -1 && this.minDate > dateItem.getTime() || this.maxDate != -1 && this.maxDate < dateItem.getTime()) {
-      return true;
-    }
-    return false;
-  }
-  isYearDisabled(year) {
-    if (this.minYear != -1 && this.minYear > year || this.maxYear != -1 && this.maxYear < year) {
-      return true;
-    }
-    return false;
-  }
-  isMonthDisabled(year, month) {
-    if (this.isYearDisabled(year)) {
-      return true;
-    }
-    let yearMonth = +(year + core.leftPad(month, 2));
-    if (this.minMonth != -1 && this.minMonth > yearMonth || this.maxMonth != -1 && this.maxMonth < yearMonth) {
-      return true;
-    }
-    return false;
-  }
-  static setMessage(message2) {
-    Lanauage.setDefaultMessage(message2);
-  }
-};
-_DateTimePicker.VERSION = `${"0.0.13"}`;
-_DateTimePicker.format = format;
-_DateTimePicker.parser = parser;
-let DateTimePicker = _DateTimePicker;
-function getDocSize() {
-  return {
-    clientHeight: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
-    clientWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
-  };
-}
 class DateRender extends Render {
   constructor(field, rowElement, daraForm) {
     super(daraForm, field, rowElement);
@@ -2967,9 +1527,9 @@ class DateRender extends Render {
     let dateOnSelectEvent;
     this.field.rendererOptions = Object.assign({}, this.field.rendererOptions);
     if (typeof this.field.rendererOptions.onSelect !== "undefined") {
-      dateOnSelectEvent = typeof this.field.rendererOptions.onSelect;
+      dateOnSelectEvent = this.field.rendererOptions.onSelect;
     }
-    if (isUndefined(this.field.rendererOptions.mode)) {
+    if (utils.isUndefined(this.field.rendererOptions.mode)) {
       if (this.field.renderType == "datemonth" || this.field.renderType == "datehour") {
         this.field.rendererOptions.mode = this.field.renderType.replace("date", "");
       } else {
@@ -2977,13 +1537,13 @@ class DateRender extends Render {
       }
     }
     this.field.rendererOptions.onSelect = (dt, e) => {
-      if (dateOnSelectEvent) {
+      if (utils.isFunction(dateOnSelectEvent)) {
         dateOnSelectEvent(dt, e);
       }
       this.setValue(dt);
       this.valid();
     };
-    this.dateObj = new DateTimePicker(this.element, this.field.rendererOptions, {});
+    this.dateObj = new datetimepicker.DateTimePicker(this.element, this.field.rendererOptions, {});
   }
   createField() {
     const field = this.field;
@@ -3108,8 +1668,8 @@ class TabRender extends Render {
         let tabBodyTemplate = `<div class="df-tab-panel ${firstFlag ? "active" : ""}" tab-panel-id="${id}">${Render.getDescriptionTemplate(childField)}
           <div class="df-tab-group"></div>
         </div>`;
-        const tabElement = templateToElement(tabTemplate);
-        const tabBodyElement = templateToElement(tabBodyTemplate);
+        const tabElement = utils.templateToElement(tabTemplate);
+        const tabBodyElement = utils.templateToElement(tabBodyTemplate);
         firstFlag = false;
         if (tabElement) {
           (_a = fieldContainerElement.querySelector(".df-tab-header")) == null ? void 0 : _a.appendChild(tabElement);
@@ -3167,6 +1727,10 @@ class TabRender extends Render {
     }
   }
   reset() {
+    var _a;
+    for (const childField of this.field.children ?? []) {
+      (_a = childField.$tabForm) == null ? void 0 : _a.resetForm();
+    }
   }
   getElement() {
     return this.rowElement;
@@ -3298,7 +1862,7 @@ class GridRender extends Render {
     }
     rowTemplate.push("</tr>");
     this.allAddRowInfo[$$idx] = addColumns;
-    const addRowElement = templateToElement(rowTemplate.join(""));
+    const addRowElement = utils.templateToElement(rowTemplate.join(""));
     if (addRowElement) {
       (_b = this.rowElement.querySelector("tbody")) == null ? void 0 : _b.append(addRowElement);
       (_c = addRowElement.querySelector(".df-grid-row-remove")) == null ? void 0 : _c.addEventListener("click", (evt) => {
@@ -3308,7 +1872,7 @@ class GridRender extends Render {
     valueItem = valueItem ?? {};
     for (let columnField of addColumns) {
       columnField.$instance = new columnField.$renderType(columnField, addRowElement == null ? void 0 : addRowElement.querySelector(`#${columnField.$xssName}`), this.gridForm);
-      if (valueItem[columnField.$orgin.name]) {
+      if (utils.hasProperty(valueItem, columnField.$orgin.name)) {
         columnField.$instance.setValue(valueItem[columnField.$orgin.name]);
       }
     }
@@ -3334,8 +1898,7 @@ class GridRender extends Render {
    */
   removeFieldInfo(rowIdx) {
     let removeFieldArrs = [];
-    console.log("rowIdx : ", rowIdx);
-    if (isEmpty(rowIdx)) {
+    if (utils.isNil(rowIdx)) {
       for (let key in this.allAddRowInfo) {
         removeFieldArrs = removeFieldArrs.concat(this.allAddRowInfo[key]);
       }
@@ -3375,10 +1938,10 @@ class GridRender extends Render {
   setValue(value) {
     this.field.$value = value;
     let valueArr = [];
-    if (isArray(value)) {
+    if (utils.isArray(value)) {
       valueArr = value;
     } else {
-      if (isPlainObject(value)) {
+      if (utils.isPlainObject(value)) {
         valueArr.push(value);
       }
     }
@@ -3507,7 +2070,7 @@ let localeMessage = {
     "upper-char-special-number": "대문자,소문자,특수문자,숫자 각각 하나 이상 포함 되어야합니다."
   }
 };
-let Language$1 = class Language2 {
+let Language$1 = class Language {
   constructor() {
     this.lang = localeMessage;
   }
@@ -3576,16 +2139,16 @@ function message(msgFormat, msgParam) {
     return typeof msgParam[key] !== "undefined" ? msgParam[key] : match;
   });
 }
-const Language3 = new Language$1();
+const Language2 = new Language$1();
 const getRenderer = (field) => {
   let render;
   if (field.renderType) {
     render = RENDER_TEMPLATE[field.renderType];
   }
-  if (render && (render.isDataRender() === false || !isUndefined(field.name))) {
+  if (render && (render.isDataRender() === false || !utils.isUndefined(field.name))) {
     return render;
   }
-  if (isUndefined(field.name)) {
+  if (utils.isUndefined(field.name)) {
     if (field.children) {
       return RENDER_TEMPLATE["group"];
     } else {
@@ -3600,7 +2163,7 @@ class FieldInfoMap {
     this.allFieldInfo = {};
     this.keyNameMap = {};
     this.conditionFields = [];
-    this.fieldPrefix = `${FIELD_PREFIX}_${getHashCode(selector)}`;
+    this.fieldPrefix = `${FIELD_PREFIX}_${utils.getHashCode(selector)}`;
     this.form = form;
   }
   /**
@@ -3671,7 +2234,7 @@ class FieldInfoMap {
    */
   removeFieldInfo(fieldName) {
     const fieldKey = this.keyNameMap[fieldName];
-    if (isUndefined(fieldKey)) return;
+    if (utils.isUndefined(fieldKey)) return;
     this.removeFieldInfoByKey(fieldKey);
     delete this.keyNameMap[fieldName];
   }
@@ -3823,8 +2386,8 @@ class FieldInfoMap {
       renderInfo.focus();
     }
     fieldValid = fieldValid;
-    if (isUndefined(fieldValid.message)) {
-      fieldValid.message = Language3.validMessage(fieldInfo, fieldValid)[0];
+    if (utils.isUndefined(fieldValid.message)) {
+      fieldValid.message = Language2.validMessage(fieldInfo, fieldValid)[0];
     }
     return fieldValid;
   }
@@ -3845,7 +2408,7 @@ function addFormValue(formData, fieldInfo, useTypeValue) {
           formData[key] = value;
         }
       } else {
-        if (!isEmpty(fieldInfo.name)) {
+        if (!utils.isNil(fieldInfo.name)) {
           formData[fieldInfo.name] = fieldValue;
         }
       }
@@ -3874,7 +2437,7 @@ function addFieldFormData(formData, fieldInfo, useTypeValue) {
           formData.set(key, value);
         }
       } else {
-        if (!isEmpty(fieldInfo.name)) {
+        if (!utils.isNil(fieldInfo.name)) {
           formData.set(fieldInfo.$validName, fieldValue);
         }
       }
@@ -3914,7 +2477,7 @@ class FormTemplate {
     let labelHideFlag = this.isLabelHide(field);
     let fieldStyle = resolveFieldStyle(this.options, field, null, labelHideFlag);
     this.addRowFieldInfo(field);
-    const rowElement = templateToElement(`
+    const rowElement = utils.templateToElement(`
         <div class="df-row df-form-group ${fieldStyle.fieldClass}" id="${field.$key}">
           ${labelHideFlag ? "" : `<div class="df-label ${fieldStyle.labelClass} ${fieldStyle.labelAlignClass}" title="${field.label ?? ""}" style="${fieldStyle.labelStyle}">${this.getLabelTemplate(field)}</div>`}
 
@@ -3950,7 +2513,7 @@ class FormTemplate {
     rowElement.classList.add("df-row", parentFieldStyle.rowStyleClass ?? "");
     let idx = 0;
     for (const childField of field.children) {
-      if (isEmpty(childField)) {
+      if (utils.isNil(childField)) {
         throw new Error(`parent field :[${field.$validName}], children index ${idx},  empty [${childField}]`);
       }
       childField.$parent = field;
@@ -3972,7 +2535,7 @@ class FormTemplate {
         childFieldStyle = resolveFieldStyle(this.options, childField, beforeField, false);
         labelTemplate = `<span class="df-label ${childFieldStyle.labelClass} ${childFieldStyle.labelAlignClass}" title="${childField.label ?? ""}" style="${childFieldStyle.labelStyle}">${this.getLabelTemplate(childField)}</span>`;
       }
-      const groupElement = templateToElement(`<div class="df-form-group ${childFieldStyle.fieldClass}" style="${childFieldStyle.fieldStyle}" id="${childField.$key}">
+      const groupElement = utils.templateToElement(`<div class="df-form-group ${childFieldStyle.fieldClass}" style="${childFieldStyle.fieldStyle}" id="${childField.$key}">
         ${labelTemplate}
         <span class="df-field-container ${childFieldStyle.valueClass} ${childField.required ? "required" : ""}" style="${childFieldStyle.valueStyle}"></span>
       </div>`);
@@ -3998,7 +2561,7 @@ class FormTemplate {
    */
   getLabelTemplate(field) {
     const requiredTemplate = field.required ? `<span class="required"></span>` : "";
-    const tooltipTemplate = isBlank(field.tooltip) ? "" : `<span class="df-tooltip">?<span class="df-tooltip-text">${field.tooltip}</span></span>`;
+    const tooltipTemplate = utils.isBlank(field.tooltip) ? "" : `<span class="df-tooltip">?<span class="df-tooltip-text">${field.tooltip}</span></span>`;
     return `<span class="df-label-text">${field.label ?? ""}</span> ${tooltipTemplate} ${requiredTemplate}`;
   }
   /**
@@ -4009,7 +2572,7 @@ class FormTemplate {
    */
   isLabelHide(field) {
     var _a;
-    return ((_a = field.style) == null ? void 0 : _a.labelHide) || isUndefined(field.label);
+    return ((_a = field.style) == null ? void 0 : _a.labelHide) || utils.isUndefined(field.label);
   }
   checkHiddenField(field) {
     if (isHiddenField(field)) {
@@ -4025,7 +2588,7 @@ class FormTemplate {
    * @param {FormField} field
    */
   addRowFieldInfo(field) {
-    if (!isBlank(field.name) && this.fieldInfoMap.hasFieldName(field.name)) {
+    if (!utils.isBlank(field.name) && this.fieldInfoMap.hasFieldName(field.name)) {
       throw new Error(`Duplicate field name "${field.name}"`);
     }
     this.fieldInfoMap.addField(field);
@@ -4034,10 +2597,18 @@ class FormTemplate {
 }
 function initFormOptions(options) {
   const opts = merge({}, DEFAULT_OPTIONS, options);
+  opts.fields = normalizeFields(opts.fields);
   return opts;
 }
 function setDefaultOptions(options) {
   DEFAULT_OPTIONS = merge({}, DEFAULT_OPTIONS, options);
+  DEFAULT_OPTIONS.fields = normalizeFields(DEFAULT_OPTIONS.fields);
+}
+function normalizeFields(fields) {
+  return (fields ?? []).filter((field) => field != null).map((field) => {
+    if (Array.isArray(field.children)) field.children = normalizeFields(field.children);
+    return field;
+  });
 }
 let DEFAULT_OPTIONS = {
   style: {
@@ -4133,6 +2704,7 @@ const _DaraForm = class _DaraForm {
       }
     };
     this.addField = (field) => {
+      if (!normalizeFields([field]).length) return;
       this.options.fields.push(field);
       this.formTemplate.addRow(field);
       this.conditionCheck();
@@ -4180,7 +2752,7 @@ const _DaraForm = class _DaraForm {
     };
     this.isValidField = (fieldName) => {
       const fieldInfo = this.fieldInfoMap.getFieldName(fieldName);
-      if (isUndefined(fieldInfo)) {
+      if (utils.isUndefined(fieldInfo)) {
         throw new Error(`Field name [${fieldName}] not found`);
       }
       const renderInfo = fieldInfo.$instance;
@@ -4201,10 +2773,10 @@ const _DaraForm = class _DaraForm {
     this.destroy = () => {
       this.formElement.className = this.orginFormStyleClass;
       this.formElement.replaceChildren();
+      delete allInstance[this.selector];
       for (const key in this) {
-        if (hasOwnProp(this, key)) {
+        if (utils.hasProperty(this, key)) {
           delete this[key];
-          delete allInstance[this.selector];
         }
       }
     };
@@ -4212,11 +2784,13 @@ const _DaraForm = class _DaraForm {
       return this.options.fields;
     };
     this.setFields = (fields) => {
-      this.options.fields = fields;
-      this.createForm(fields);
+      this.options.fields = normalizeFields(fields);
+      this.formElement.replaceChildren();
+      this.formValue = {};
+      this.createForm(this.options.fields);
     };
     this.options = initFormOptions(options);
-    Language3.set(message2);
+    Language2.set(message2);
     if (formElement) {
       this.orginFormStyleClass = formElement.className;
       formElement.classList.add("daracl-form");
@@ -4240,12 +2814,12 @@ const _DaraForm = class _DaraForm {
     return new _DaraForm(formElement, options, message2);
   }
   static setMessage(message2) {
-    Language3.set(message2);
+    Language2.set(message2);
   }
   static setDefaultOptions(options, message2) {
     setDefaultOptions(options);
     if (message2) {
-      Language3.set(message2);
+      Language2.set(message2);
     }
   }
   createForm(fields) {
@@ -4364,7 +2938,7 @@ const _DaraForm = class _DaraForm {
       keys.push(...Object.keys(fieldInfo.$tabForm.getValue(false) ?? {}));
     }
     keys.forEach((key) => {
-      if (!isBlank(key)) delete this.formValue[key];
+      if (!utils.isBlank(key)) delete this.formValue[key];
     });
   }
   validTabCheck(fieldInfo) {
@@ -4400,28 +2974,21 @@ const _DaraForm = class _DaraForm {
     fieldInfo.$instance.setDescription(desc);
   }
   static instance(ele) {
-    let element;
-    if (isString(ele)) {
-      element = document.querySelector(ele);
-    } else {
-      element = ele;
-    }
-    element = element;
+    const element = utils.isString(ele) ? document.querySelector(ele) : ele;
+    if (!element) return void 0;
     let selector = element.getAttribute(SEQ_ATTR_KEY);
-    if (isUndefined(selector) || isBlank(selector)) {
+    if (utils.isBlank(selector)) {
       const keys = Object.keys(allInstance);
-      if (keys.length > 1) {
-        throw new Error(`selector empty : [${selector}]`);
-      }
+      if (keys.length > 1) throw new Error(`selector empty : [${selector}]`);
       selector = keys[0];
-      return allInstance[selector];
     }
+    return selector ? allInstance[selector] : void 0;
   }
   getFieldInfoMap() {
     return this.fieldInfoMap;
   }
 };
-_DaraForm.VERSION = `${"0.0.20"}`;
+_DaraForm.VERSION = `${"0.0.22"}`;
 _DaraForm.validator = {
   string: (value, field) => {
     return stringValidator(value, field);