@daracl/form 0.0.1

package/dist/index.cjs

@@ -0,0 +1,4540 @@
+"use strict";
+
+// src/util/utils.ts
+var xssFilter = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+var replaceXss = (inputText) => {
+  let returnText = inputText;
+  if (returnText) {
+    Object.keys(xssFilter).forEach((key) => {
+      returnText = returnText.replaceAll(key, xssFilter[key]);
+    });
+  }
+  return returnText;
+};
+var hasOwnProp = (obj, key) => {
+  return obj.hasOwnProperty(key);
+};
+var 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;
+};
+var isUndefined = (value) => {
+  return typeof value === "undefined";
+};
+var isFunction = (value) => {
+  return typeof value === "function";
+};
+var isString = (value) => {
+  return typeof value === "string";
+};
+var isNumber = (value) => {
+  if (isBlank(value)) {
+    return false;
+  }
+  value = +value;
+  return !isNaN(value);
+};
+var isArray = (value) => {
+  return Array.isArray(value);
+};
+var isEmpty = (value) => isUndefined(value) || value == null;
+var isTabType = (field) => {
+  return field && field.renderType === "tab";
+};
+var isGridType = (field) => {
+  return field && field.renderType === "grid";
+};
+var replaceXssField = (field) => {
+  field.$xssName = getXssFieldName(field);
+  field.label = replaceXss(field.label);
+  return field;
+};
+var ignoreValueField = (field) => {
+  return isGridType(field.$parent) || isTabType(field.$parent);
+};
+var getXssFieldName = (field) => {
+  if (isUndefined(field.$xssName)) {
+    let returnText = field.name;
+    if (returnText) {
+      Object.keys(xssFilter).forEach((key) => {
+        returnText = returnText.replaceAll(key, "_");
+      });
+    }
+    return "df_" + returnText;
+  }
+  return field.$xssName;
+};
+var 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, "_");
+};
+var isHiddenField = (field) => {
+  if (field.renderType === "hidden") {
+    return true;
+  }
+  return false;
+};
+var 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 && !Array.isArray(value);
+}
+function isDate(value) {
+  return value instanceof Date && !isNaN(value.valueOf());
+}
+var 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;
+};
+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;
+}
+
+// src/renderer/Render.ts
+var Render = class _Render {
+  constructor(form, field, rowElement) {
+    this.enableView = true;
+    this.daraForm = form;
+    this.field = field;
+    this.rowElement = rowElement;
+    this.createField();
+    if (field.tooltip)
+      rowElement.querySelector(".df-tooltip")?.setAttribute("tooltip", field.tooltip);
+  }
+  setDefaultInfo() {
+    if (isUndefined(this.field.defaultValue)) {
+      this.setValue("", false);
+    } else {
+      this.setValue(this.field.defaultValue, false);
+    }
+    if (!isUndefined(this.field.placeholder)) {
+      const ele = this.getElement();
+      if (ele instanceof Element) {
+        ele.setAttribute("placeholder", this.field.placeholder);
+      }
+    }
+  }
+  setDefaultOption() {
+    this.setDisabled(this.field.disabled ?? false);
+  }
+  addChildField(element) {
+    this.rowElement.querySelector(".df-field-container")?.append(element);
+  }
+  static isDataRender() {
+    return true;
+  }
+  static isChildrenCreate() {
+    return true;
+  }
+  getForm() {
+    return this.daraForm;
+  }
+  setValueItems(value) {
+  }
+  static getDescriptionTemplate(field) {
+    return field.description ? `<div class="df-description">${field.description}</div>` : "";
+  }
+  changeEventCall(field, e, rederInfo, fieldValue) {
+    if (field.onChange) {
+      let changeInfo = {
+        field,
+        evt: e,
+        oldValue: field.$value,
+        value: fieldValue
+      };
+      if (field.listItem?.list) {
+        let valuesItem = [];
+        const valueKey = _Render.valuesValueKey(field);
+        for (let val of field.listItem.list) {
+          let changeVal = val[valueKey];
+          if (isString(fieldValue)) {
+            if (changeVal == fieldValue) {
+              valuesItem.push(val);
+              break;
+            }
+          } else if (isArray(fieldValue)) {
+            if (fieldValue.includes(changeVal)) {
+              valuesItem.push(val);
+            }
+          }
+        }
+        changeInfo.valueItems = valuesItem;
+      }
+      if (changeInfo.oldValue != changeInfo.value && field.onChange.call(null, changeInfo) === false) {
+        rederInfo.setValue(field.$value, false);
+        return false;
+      }
+      field.$value = changeInfo.value;
+    }
+    this.daraForm.conditionCheck();
+  }
+  focus() {
+    this.getElement().focus();
+  }
+  isEnableView() {
+    return this.enableView;
+  }
+  show() {
+    this.enableView = true;
+    this.rowElement.classList.remove("df-hidden");
+  }
+  hide() {
+    this.enableView = false;
+    if (!this.rowElement.classList.contains("df-hidden")) {
+      this.rowElement.classList.add("df-hidden");
+    }
+  }
+  /**
+   * 설명 추가
+   *
+   * @public
+   * @param {string} desc
+   */
+  setDescription(desc) {
+    const descEle = this.rowElement.querySelector(".df-description");
+    if (descEle) {
+      descEle.innerHTML = desc;
+    } else {
+      const fieldEle = this.rowElement.querySelector(".df-field");
+      if (fieldEle) {
+        const parser = new DOMParser();
+        this.field.description = desc;
+        const descEle2 = parser.parseFromString(_Render.getDescriptionTemplate(this.field), "text/html").querySelector(".df-description");
+        if (descEle2)
+          fieldEle.parentNode?.insertBefore(descEle2, fieldEle.nextSibling);
+      }
+    }
+  }
+  setActive(id) {
+  }
+  setDisabled(flag) {
+    const ele = this.getElement();
+    if (ele instanceof HTMLElement) {
+      if (flag === false) {
+        this.getElement().removeAttribute("disabled");
+      } else {
+        this.getElement().setAttribute("disabled", true);
+      }
+    }
+  }
+  commonValidator() {
+  }
+  static valuesValueKey(field) {
+    return field.listItem?.valueField ? field.listItem.valueField : "value";
+  }
+  static valuesLabelKey(field) {
+    return field.listItem?.labelField ? field.listItem.labelField : "label";
+  }
+  static valuesLabelValue(label, val) {
+    let replaceFlag = false;
+    const resultValue = label.replace(/\{\{([A-Za-z0-9_.]*)\}\}/g, (match, key) => {
+      replaceFlag = true;
+      return val[key] || "";
+    });
+    if (replaceFlag) {
+      return resultValue;
+    }
+    return val[label] || "";
+  }
+};
+
+// src/rule/regexpValidator.ts
+var regexp = {
+  mobile: /^\d{3}-\d{3,4}-\d{4}$/,
+  email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+  url: /^(?:(?:https?|HTTPS?|ftp|FTP):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)*(?:\.(?:[a-zA-Z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/,
+  number: /\d$/,
+  alpha: /^[a-zA-Z]+$/,
+  "alpha-num": /^[a-zA-Z0-9]+$/,
+  variable: /^[a-zA-Z0-9_$][a-zA-Z0-9_$]*$/,
+  "number-char": /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]/,
+  "upper-char": /^(?=.*?[A-Z])(?=.*?[a-z])/,
+  "upper-char-special": /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[#?!@$%^&*-])/,
+  "upper-char-special-number": /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]/
+};
+var regexpValidator = (value, field, result) => {
+  if (!field.$instance.isEnableView()) {
+    return { name: field.name, constraint: [] };
+  }
+  if (typeof result === "undefined") {
+    result = { name: field.name, constraint: [] };
+  }
+  const regexpType = field.regexpType;
+  if (regexpType) {
+    if (!regexp[regexpType].test(value)) {
+      result.regexp = regexpType;
+      return result;
+    }
+  }
+  return result;
+};
+
+// src/rule/validator.ts
+var validator = (value, field, result) => {
+  if (field.validator) {
+    result.validator = field.validator(field, value);
+    if (typeof result.validator === "object") {
+      return result;
+    }
+  }
+  result = regexpValidator(value, field, result);
+  if (result.regexp) {
+    return 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()) {
+      result.message = field.different.message;
+      return 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()) {
+      result.message = field.identical.message;
+      return result;
+    }
+  }
+  return true;
+};
+
+// src/rule/numberValidator.ts
+var numberValidator = (value, field) => {
+  if (!field.$instance.isEnableView()) {
+    return true;
+  }
+  const result = { name: field.name, constraint: [] };
+  const numValue = Number(value);
+  if (field.required && isBlank(value)) {
+    result.constraint.push(RULES.REQUIRED);
+    return result;
+  }
+  if (!isNumber(value)) {
+    result.constraint.push(RULES.NAN);
+    return result;
+  }
+  if (validator(value, field, result) !== true) {
+    return result;
+  }
+  const rule = field.rule;
+  if (rule) {
+    const isMinimum = isNumber(rule.minimum), isMaximum = isNumber(rule.maximum);
+    let minRule = false, minExclusive = false, maxRule = false, maxExclusive = false;
+    if (isMinimum) {
+      if (rule.exclusiveMinimum && numValue <= rule.minimum) {
+        minExclusive = true;
+      } else if (numValue < rule.minimum) {
+        minRule = true;
+      }
+    }
+    if (isMaximum) {
+      if (rule.exclusiveMaximum && numValue >= rule.maximum) {
+        maxExclusive = true;
+      } else if (numValue > rule.maximum) {
+        maxRule = true;
+      }
+    }
+    if (isMinimum && isMaximum && (minRule || minExclusive || maxRule || maxExclusive)) {
+      if (rule.exclusiveMinimum && rule.exclusiveMaximum && (minExclusive || maxExclusive)) {
+        result.constraint.push(RULES.BETWEEN_EXCLUSIVE_MINMAX);
+      } else if (minExclusive) {
+        result.constraint.push(RULES.BETWEEN_EXCLUSIVE_MIN);
+      } else if (maxExclusive) {
+        result.constraint.push(RULES.BETWEEN_EXCLUSIVE_MAX);
+      } else {
+        result.constraint.push(RULES.BETWEEN);
+      }
+    } else {
+      if (minExclusive) {
+        result.constraint.push(RULES.EXCLUSIVE_MIN);
+      }
+      if (maxExclusive) {
+        result.constraint.push(RULES.EXCLUSIVE_MAX);
+      }
+      if (minRule) {
+        result.constraint.push(RULES.MIN);
+      }
+      if (maxRule) {
+        result.constraint.push(RULES.MAX);
+      }
+    }
+  }
+  if (result.constraint.length > 0) {
+    return result;
+  }
+  return true;
+};
+
+// src/util/validUtils.ts
+var invalidMessage = (field, rowElement, validResult) => {
+  if (validResult === true) {
+    rowElement.classList.remove("invalid");
+    if (!rowElement.classList.contains("valid")) {
+      rowElement.classList.add("valid");
+    }
+    const helpMessageElement = rowElement.querySelector(".help-message");
+    if (helpMessageElement) {
+      helpMessageElement.innerHTML = "";
+    }
+    return;
+  }
+  rowElement.classList.remove("valid");
+  if (!rowElement.classList.contains("invalid")) {
+    rowElement.classList.add("invalid");
+  }
+  if (validResult !== false) {
+    const message2 = Lanauage_default.validMessage(field, validResult);
+    if (validResult.message) {
+      message2.push(validResult.message);
+    }
+    const helpMessageElement = rowElement.querySelector(".help-message");
+    if (helpMessageElement && message2.length > 0) {
+      const msgHtml = [];
+      message2.forEach((item) => {
+        msgHtml.push(`<div>${item}</div>`);
+      });
+      helpMessageElement.innerHTML = msgHtml.join("");
+    }
+  }
+};
+var resetRowElementStyleClass = (rowElement) => {
+  rowElement.classList.remove("invalid");
+  rowElement.classList.remove("valid");
+};
+
+// src/event/renderEvents.ts
+var inputEvent = (field, element, renderInfo) => {
+  element.addEventListener("input", (e) => {
+    customChangeEventCall(field, e, renderInfo, renderInfo.getValue());
+    renderInfo.valid();
+  });
+};
+var numberInputEvent = (field, element, renderInfo) => {
+  element.addEventListener("keyup", (e) => {
+    const val = e.target.value;
+    if (!isNumber(val)) {
+      element.value = val.replace(/[^0-9\.\-\+]/g, "");
+      e.preventDefault();
+    }
+    customChangeEventCall(field, e, renderInfo, renderInfo.getValue());
+    renderInfo.valid();
+  });
+};
+var dropdownChangeEvent = (field, element, renderInfo) => {
+  element.addEventListener("change", (e) => {
+    customChangeEventCall(field, e, renderInfo, renderInfo.getValue());
+    renderInfo.valid();
+  });
+};
+var customChangeEventCall = (field, e, renderInfo, value) => {
+  renderInfo.changeEventCall(field, e, renderInfo, value);
+};
+
+// src/renderer/NumberRender.ts
+var NumberRender = class extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    this.mounted();
+    this.setDefaultOption();
+    this.setDefaultInfo();
+  }
+  mounted() {
+    numberInputEvent(this.field, this.element, this);
+  }
+  createField() {
+    const field = this.field;
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    fieldContainerElement.innerHTML = `
+        <div class="df-field">
+            <input type="text" name="${field.$xssName}" class="form-field number help-icon" />
+        </div> 
+        ${Render.getDescriptionTemplate(field)}
+        <div class="help-message"></div>
+       `;
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
+  }
+  getValue() {
+    return this.element.value;
+  }
+  setValue(value, changeCheckFlag) {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      this.element.value = this.field.$value;
+      return;
+    }
+    this.field.$value = value;
+    this.element.value = value;
+  }
+  reset() {
+    this.setDefaultInfo();
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+  getElement() {
+    return this.element;
+  }
+  valid() {
+    const validResult = numberValidator(this.getValue(), this.field);
+    invalidMessage(this.field, this.rowElement, validResult);
+    return validResult;
+  }
+};
+
+// src/rule/stringValidator.ts
+var stringValidator = (value, field) => {
+  if (!field.$instance.isEnableView()) {
+    return true;
+  }
+  let result = { name: field.name, constraint: [] };
+  if (field.required && isBlank(value)) {
+    result.constraint.push(RULES.REQUIRED);
+    return result;
+  }
+  const validResult = validator(value, field, result);
+  if (validResult !== true) {
+    return validResult;
+  }
+  const rule = field.rule;
+  if (rule) {
+    const valueLength = value.length;
+    const isMinNumber = isNumber(rule.minLength), isMaxNumber = isNumber(rule.maxLength);
+    let minRule = false, maxRule = false;
+    if (isMinNumber && valueLength < rule.minLength) {
+      minRule = true;
+    }
+    if (isMaxNumber && valueLength > rule.maxLength) {
+      maxRule = true;
+    }
+    if (isMinNumber && isMaxNumber && (minRule || maxRule)) {
+      result.constraint.push(RULES.BETWEEN);
+    } else {
+      if (minRule) {
+        result.constraint.push(RULES.MIN_LENGTH);
+      }
+      if (maxRule) {
+        result.constraint.push(RULES.MAX_LENGTH);
+      }
+    }
+    if (result.constraint.length > 0) {
+      return result;
+    }
+  }
+  return true;
+};
+
+// src/renderer/TextAreaRender.ts
+var TextAreaRender = class extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    this.mounted();
+    this.setDefaultOption();
+    this.setDefaultInfo();
+  }
+  mounted() {
+    inputEvent(this.field, this.element, this);
+  }
+  createField() {
+    const field = this.field;
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    let rows = field.customOptions?.rows;
+    rows = +rows > 0 ? rows : 3;
+    fieldContainerElement.innerHTML = `
+        <div class="df-field">
+            <textarea name="${field.$xssName}" rows="${rows}" class="form-field textarea help-icon"></textarea>
+        </div> 
+        ${Render.getDescriptionTemplate(field)}
+        <div class="help-message"></div>
+    `;
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
+  }
+  getValue() {
+    return this.element.value;
+  }
+  setValue(value, changeCheckFlag) {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      this.element.value = this.field.$value;
+      return;
+    }
+    this.field.$value = value;
+    this.element.value = value;
+  }
+  reset() {
+    this.setDefaultInfo();
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+  getElement() {
+    return this.element;
+  }
+  valid() {
+    const validResult = stringValidator(this.getValue(), this.field);
+    invalidMessage(this.field, this.rowElement, validResult);
+    return validResult;
+  }
+};
+
+// src/renderer/DropdownRender.ts
+var DropdownRender = class _DropdownRender extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    let initDefaultValue = "";
+    if (!isUndefined(field.defaultValue)) {
+      initDefaultValue = field.defaultValue;
+    }
+    const valueKey = _DropdownRender.valuesValueKey(field);
+    let initDefaultValueFlag = false;
+    this.field.listItem?.list?.forEach((item) => {
+      let itemValue = item[valueKey];
+      if (item.selected) {
+        this.defaultSelected = itemValue;
+      }
+      if (itemValue == initDefaultValue) {
+        initDefaultValueFlag = true;
+      }
+    });
+    if (initDefaultValueFlag) {
+      this.defaultSelected = initDefaultValue;
+    } else if (!this.defaultSelected) {
+      if (field.customOptions?.disableDefaultOption === true) {
+        this.defaultSelected = this.field.listItem?.list?.length > 0 ? this.field.listItem.list[0][valueKey] || "" : "";
+      }
+    }
+    if (isUndefined(this.defaultSelected)) {
+      this.defaultSelected = "";
+    }
+    this.mounted();
+    this.setDefaultOption();
+    this.setValue(this.defaultSelected, false);
+  }
+  mounted() {
+    dropdownChangeEvent(this.field, this.element, this);
+  }
+  createField() {
+    const field = this.field;
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    let template = ` <div class="df-field"><select name="${field.$xssName}" class="form-field dropdown">
+          ${this.dropdownValuesTemplate(field)}
+          </select> <i class="help-icon"></i></div>
+                ${Render.getDescriptionTemplate(field)}
+      <div class="help-message"></div>
+    `;
+    fieldContainerElement.innerHTML = template;
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
+  }
+  setValueItems(items) {
+    if (this.field.listItem) {
+      this.field.listItem.list = items;
+    } else {
+      this.field.listItem = {
+        list: items
+      };
+    }
+    this.element.innerHTML = this.dropdownValuesTemplate(this.field);
+    if (!isBlank(this.field.$value)) {
+      const currentValue = this.field.$value;
+      this.field.$value = "";
+      this.setValue(currentValue);
+    }
+  }
+  getValue() {
+    return this.element.value;
+  }
+  setValue(value, changeCheckFlag) {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      this.element.value = this.field.$value;
+      return;
+    }
+    this.field.$value = value;
+    this.element.value = value;
+  }
+  reset() {
+    this.setValue(this.defaultSelected, false);
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+  getElement() {
+    return this.element;
+  }
+  valid() {
+    const value = this.getValue();
+    let validResult = true;
+    if (this.field.required) {
+      if (value.length < 1) {
+        validResult = { name: this.field.name, constraint: [] };
+        validResult.constraint.push(RULES.REQUIRED);
+      }
+    }
+    invalidMessage(this.field, this.rowElement, validResult);
+    return validResult;
+  }
+  dropdownValuesTemplate(field) {
+    const labelKey = Render.valuesLabelKey(field);
+    const valueKey = Render.valuesValueKey(field);
+    let template = "";
+    if (field.customOptions?.disableDefaultOption !== true) {
+      template += `<option value="">${Lanauage_default.getMessage("selection")}</option>`;
+    }
+    field.listItem?.list?.forEach((val) => {
+      const attr = `${val.selected ? "selected" : ""} ${val.disabled ? "disabled" : ""}`;
+      if (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>`;
+      }
+    });
+    return template;
+  }
+};
+
+// src/renderer/TextRender.ts
+var TextRender = class extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    this.mounted();
+    this.setDefaultOption();
+    this.setDefaultInfo();
+  }
+  mounted() {
+    inputEvent(this.field, this.element, this);
+  }
+  createField() {
+    const field = this.field;
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    fieldContainerElement.innerHTML = `
+      <div class="df-field">
+       <input type="text" name="${field.$xssName}" class="form-field text help-icon" />
+      </div>
+      ${Render.getDescriptionTemplate(field)}
+      <div class="help-message"></div>
+      `;
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
+  }
+  getValue() {
+    return this.element.value;
+  }
+  setValue(value, changeCheckFlag) {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      this.element.value = this.field.$value;
+      return;
+    }
+    this.field.$value = value;
+    this.element.value = value;
+  }
+  reset() {
+    this.setDefaultInfo();
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+  getElement() {
+    return this.element;
+  }
+  valid() {
+    const validResult = stringValidator(this.getValue(), this.field);
+    invalidMessage(this.field, this.rowElement, validResult);
+    return validResult;
+  }
+};
+
+// src/renderer/CheckboxRender.ts
+var CheckboxRender = class _CheckboxRender extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    this.defaultCheckValue = [];
+    this.defaultCheckValue = [];
+    let initDefaultValue = [];
+    if (!isUndefined(field.defaultValue)) {
+      if (isArray(field.defaultValue)) {
+        initDefaultValue = field.defaultValue;
+      } else {
+        initDefaultValue = [field.defaultValue];
+      }
+    }
+    const valueKey = _CheckboxRender.valuesValueKey(field);
+    if (isUndefined(this.field.listItem)) {
+      this.setValueItems([{ label: "", value: "Y" }]);
+    }
+    let initDefaultValueFlag = false;
+    this.field.listItem?.list?.forEach((item) => {
+      let itemValue = item[valueKey];
+      if (item.selected) {
+        this.defaultCheckValue.push(itemValue ? itemValue : true);
+      }
+      if (initDefaultValue.includes(itemValue)) {
+        initDefaultValueFlag = true;
+      }
+    });
+    this.defaultCheckValue = initDefaultValueFlag ? initDefaultValue : this.defaultCheckValue;
+    this.mounted();
+    this.setDefaultOption();
+    this.setValue(this.defaultCheckValue, false);
+  }
+  mounted() {
+    this.initEvent();
+  }
+  initEvent() {
+    const checkboxes = this.rowElement.querySelectorAll(this.getSelector());
+    checkboxes.forEach((ele) => {
+      ele.addEventListener("change", (e) => {
+        customChangeEventCall(this.field, e, this, this.getValue());
+        this.valid();
+      });
+    });
+  }
+  getSelector() {
+    return `input[type="checkbox"][name="${this.field.$xssName}"]`;
+  }
+  createField() {
+    const field = this.field;
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    const templates = [];
+    const fieldName = field.$xssName;
+    const labelKey = Render.valuesLabelKey(field);
+    const valueKey = Render.valuesValueKey(field);
+    templates.push(` <div class="df-field"><div class="field-group">`);
+    field.listItem?.list?.forEach((val) => {
+      const checkVal = val[valueKey];
+      templates.push(`
+          <span class="field ${field.listItem.orientation == "vertical" ? "vertical" : "horizontal"}">
+              <label>
+                  <input type="checkbox" name="${fieldName}" value="${checkVal ? replaceXss(checkVal) : ""}" class="form-field checkbox" ${val.selected ? "checked" : ""} ${val.disabled ? "disabled" : ""}  />
+                  ${Render.valuesLabelValue(labelKey, val)}
+              </label>
+          </span>
+      `);
+    });
+    templates.push(`<i class="daracl-icon help-icon"></i></div></div> ${Render.getDescriptionTemplate(field)}<div class="help-message"></div>`);
+    fieldContainerElement.innerHTML = templates.join("");
+  }
+  setValueItems(items) {
+    const containerEle = this.rowElement.querySelector(".df-field-container");
+    if (containerEle) {
+      if (this.field.listItem) {
+        this.field.listItem.list = items;
+      } else {
+        this.field.listItem = {
+          list: items
+        };
+      }
+      this.createField();
+      if (!isBlank(this.field.$value)) {
+        const currentValue = this.field.$value;
+        this.field.$value = "";
+        this.setValue(currentValue);
+      }
+    }
+  }
+  getValue() {
+    const checkboxes = this.rowElement.querySelectorAll(this.getSelector());
+    if (checkboxes.length > 1) {
+      const checkValue = [];
+      checkboxes.forEach((ele) => {
+        const checkEle = ele;
+        if (checkEle.checked) {
+          checkValue.push(checkEle.value);
+        }
+      });
+      return checkValue;
+    } else {
+      const checkElement = this.rowElement.querySelector(`[name="${this.field.$xssName}"]`);
+      if (checkElement?.checked) {
+        return checkElement.value ? checkElement.value : true;
+      }
+      return checkElement.value ? "" : false;
+    }
+  }
+  setValue(value, changeCheckFlag) {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      value = this.field.$value;
+    }
+    this.field.$value = value;
+    if (value === true) {
+      this.rowElement.querySelector(`[name="${this.field.$xssName}"]`).checked = true;
+      return;
+    }
+    if (value === false) {
+      this.rowElement.querySelector(`[name="${this.field.$xssName}"]`).checked = false;
+      return;
+    }
+    let valueArr = [];
+    if (Array.isArray(value)) {
+      valueArr = value;
+    } else {
+      valueArr.push(value);
+    }
+    const checkboxes = this.rowElement.querySelectorAll(this.getSelector());
+    checkboxes.forEach((ele) => {
+      ele.checked = false;
+    });
+    valueArr.forEach((val) => {
+      const ele = this.rowElement.querySelector(`[name="${this.field.$xssName}"][value="${val}"]`);
+      if (ele)
+        ele.checked = true;
+    });
+  }
+  reset() {
+    if (this.field.listItem?.list?.length == 1 && this.defaultCheckValue.length == 1) {
+      this.setValue(true, false);
+    } else {
+      this.setValue(this.defaultCheckValue, false);
+    }
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+  getElement() {
+    return this.rowElement.querySelectorAll(`[name="${this.field.$xssName}"]`);
+  }
+  focus() {
+    const elements = this.getElement();
+    if (elements && elements.length > 0) {
+      this.getElement()[0].focus();
+    }
+  }
+  valid() {
+    const value = this.getValue();
+    let validResult = true;
+    if (this.field.required && isArray(value)) {
+      if (value.length < 1) {
+        validResult = { name: this.field.name, constraint: [] };
+        validResult.constraint.push(RULES.REQUIRED);
+      }
+    }
+    invalidMessage(this.field, this.rowElement, validResult);
+    return validResult;
+  }
+};
+
+// src/renderer/RadioRender.ts
+var RadioRender = class _RadioRender extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    this.defaultCheckValue = "";
+    let initDefaultValue = [];
+    if (!isUndefined(field.defaultValue)) {
+      initDefaultValue = field.defaultValue;
+    }
+    const valueKey = _RadioRender.valuesValueKey(field);
+    let initDefaultValueFlag = false;
+    this.field.listItem?.list?.forEach((item) => {
+      let itemValue = item[valueKey];
+      if (item.selected) {
+        this.defaultCheckValue = itemValue;
+      }
+      if (initDefaultValue == itemValue) {
+        initDefaultValueFlag = true;
+      }
+    });
+    if (initDefaultValueFlag) {
+      this.defaultCheckValue = initDefaultValue;
+    } else if (!this.defaultCheckValue) {
+      this.defaultCheckValue = this.field.listItem?.list?.length > 0 ? this.field.listItem?.list[0][valueKey] : "";
+    }
+    this.mounted();
+    this.setDefaultOption();
+    this.setValue(this.defaultCheckValue, false);
+  }
+  mounted() {
+    this.initEvent();
+  }
+  initEvent() {
+    const checkboxes = this.rowElement.querySelectorAll(this.getSelector());
+    checkboxes.forEach((ele) => {
+      ele.addEventListener("change", (e) => {
+        customChangeEventCall(this.field, e, this, this.getValue());
+        this.valid();
+      });
+    });
+  }
+  getSelector() {
+    return `input[type="radio"][name="${this.field.$xssName}"]`;
+  }
+  createField() {
+    const field = this.field;
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    const templates = [];
+    const fieldName = field.$xssName;
+    const labelKey = Render.valuesLabelKey(field);
+    const valueKey = Render.valuesValueKey(field);
+    templates.push(`<div class="df-field"><div class="field-group">`);
+    field.listItem?.list?.forEach((val) => {
+      const radioVal = val[valueKey];
+      templates.push(
+        `<span class="field ${field.orientation == "vertical" ? "vertical" : "horizontal"}">
+        <label>
+            <input type="radio" name="${fieldName}" value="${radioVal}" class="form-field radio" ${val.selected ? "checked" : ""} ${val.disabled ? "disabled" : ""}/>
+            ${Render.valuesLabelValue(labelKey, val)}
+        </label>
+        </span>
+                `
+      );
+    });
+    templates.push(`<i class="daracl-icon help-icon"></i></div></div>
+        ${Render.getDescriptionTemplate(field)}
+     <div class="help-message"></div>
+    `);
+    fieldContainerElement.innerHTML = templates.join("");
+    this.initEvent();
+  }
+  setValueItems(items) {
+    const containerEle = this.rowElement.querySelector(".df-field-container");
+    if (containerEle) {
+      if (this.field.listItem) {
+        this.field.listItem.list = items;
+      } else {
+        this.field.listItem = {
+          list: items
+        };
+      }
+      this.createField();
+      if (!isBlank(this.field.$value)) {
+        const currentValue = this.field.$value;
+        this.field.$value = "";
+        this.setValue(currentValue);
+      }
+    }
+  }
+  getValue() {
+    return this.rowElement.querySelector(`[name="${this.field.$xssName}"]:checked`)?.value;
+  }
+  setValue(value, changeCheckFlag) {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      value = this.field.$value;
+    }
+    this.field.$value = value;
+    if (value === true) {
+      this.rowElement.querySelector(`[name="${this.field.$xssName}"]`).checked = true;
+      return;
+    }
+    if (value === false) {
+      this.rowElement.querySelector(`[name="${this.field.$xssName}"]`).checked = false;
+      return;
+    }
+    const elements = this.rowElement.querySelectorAll(this.getSelector());
+    elements.forEach((ele) => {
+      let radioEle = ele;
+      if (radioEle.value == value) {
+        radioEle.checked = true;
+      } else {
+        radioEle.checked = false;
+      }
+    });
+  }
+  reset() {
+    this.setValue(this.defaultCheckValue, false);
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+  getElement() {
+    return this.rowElement.querySelectorAll(this.getSelector());
+  }
+  focus() {
+    const elements = this.getElement();
+    if (elements && elements.length > 0) {
+      this.getElement()[0].focus();
+    }
+  }
+  valid() {
+    const value = this.getValue();
+    let validResult = true;
+    if (this.field.required) {
+      if (isBlank(value)) {
+        validResult = { name: this.field.name, constraint: [] };
+        validResult.constraint.push(RULES.REQUIRED);
+      }
+    }
+    invalidMessage(this.field, this.rowElement, validResult);
+    return validResult;
+  }
+};
+
+// src/renderer/PasswordRender.ts
+var PasswordRender = class extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    this.mounted();
+    this.setDefaultOption();
+    this.setDefaultInfo();
+  }
+  mounted() {
+    inputEvent(this.field, this.element, this);
+  }
+  createField() {
+    const field = this.field;
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    fieldContainerElement.innerHTML = `
+        <div class="df-field">
+            <input type="password" name="${field.$xssName}" class="form-field password help-icon" autocomplete="off" />
+        </div>
+        ${Render.getDescriptionTemplate(field)}
+        <div class="help-message"></div>
+    `;
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
+  }
+  getValue() {
+    return this.element.value;
+  }
+  setValue(value, changeCheckFlag) {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      this.element.value = this.field.$value;
+      return;
+    }
+    this.field.$value = value;
+    this.element.value = value;
+  }
+  reset() {
+    this.setDefaultInfo();
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+  getElement() {
+    return this.element;
+  }
+  valid() {
+    const validResult = stringValidator(this.getValue(), this.field);
+    invalidMessage(this.field, this.rowElement, validResult);
+    return validResult;
+  }
+};
+
+// src/rule/fileValidator.ts
+var fileValidator = (element, field, fileList) => {
+  const result = { name: field.name, constraint: [] };
+  if (field.required && fileList.length < 1) {
+    result.constraint.push(RULES.REQUIRED);
+    return result;
+  }
+  if (result.constraint.length > 0) {
+    return result;
+  }
+  return true;
+};
+
+// src/renderer/FileRender.ts
+var FileRender = class extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    this.removeIds = [];
+    this.uploadFiles = {};
+    this.fileList = [];
+    this.fileSeq = 0;
+    this.element = rowElement.querySelector(`[name="${field.$xssName}"]`);
+    this.fileList = field.listItem?.list || [];
+    this.mounted();
+    this.setDefaultOption();
+  }
+  mounted() {
+    this.element.addEventListener("change", (e) => {
+      const files = e.target?.files;
+      if (files) {
+        let fileList = [];
+        for (let item of files) {
+          fileList.push(item);
+        }
+        this.addFiles(fileList);
+      }
+      customChangeEventCall(this.field, e, this, this.fileList);
+      this.valid();
+    });
+    this.fileList.forEach((file) => {
+      file.$seq = this.fileSeq += 1;
+    });
+    this.setFileList(this.fileList);
+  }
+  createField() {
+    const field = this.field;
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    fieldContainerElement.innerHTML = `
+    <div class="df-field">
+      <span class="file-wrapper">
+        <label class="file-label">
+          <input type="file" name="${field.$xssName}" class="form-field file" multiple />
+          ${Lanauage_default.getMessage("fileButton")}
+        </label>
+        <i class="daracl-icon help-icon"></i>
+      </span>
+    </div>
+    ${Render.getDescriptionTemplate(field)}
+    <div class="daracl-file-list"></div>
+    <div class="help-message"></div>
+    `;
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
+  }
+  addFiles(files) {
+    let addFlag = false;
+    const newFiles = [];
+    for (let item of files) {
+      const fileCheckList = this.fileList.filter((fileItem) => fileItem.fileName == item.name && fileItem.fileSize == item.size && fileItem.lastModified == item.lastModified);
+      if (fileCheckList.length > 0)
+        continue;
+      this.fileSeq += 1;
+      this.uploadFiles[this.fileSeq] = item;
+      let newFileInfo = {
+        fileName: item.name,
+        $seq: this.fileSeq,
+        fileSize: item.size,
+        lastModified: item.lastModified
+      };
+      newFiles.push(newFileInfo);
+      addFlag = true;
+    }
+    if (addFlag) {
+      this.setFileList(newFiles);
+      this.fileList.push(...newFiles);
+    }
+  }
+  setFileList(fileList, initFlag) {
+    const fileListElement = this.rowElement.querySelector(".daracl-file-list");
+    if (fileListElement) {
+      if (initFlag === true) {
+        fileListElement.innerHTML = "";
+      }
+      const fileTemplateHtml = [];
+      fileList.forEach((file) => {
+        fileTemplateHtml.push(`
+        <div class="file-item" data-seq="${file.$seq}">
+          ${file.fileId ? '<span class="file-icon download"></span>' : '<span class="file-icon"></span>'} <span class="file-icon remove"></span>
+          <span class="file-name">${file.fileName}</span > 
+        </div>`);
+      });
+      fileListElement.insertAdjacentHTML("beforeend", fileTemplateHtml.join(""));
+      fileList.forEach((item) => {
+        this.removeFileEvent(item, fileListElement);
+        this.downloadFileEvent(item, fileListElement);
+      });
+    }
+  }
+  /**
+   * 파일 다운로드 이벤트 처리.
+   *
+   * @param item
+   * @param fileListElement
+   */
+  downloadFileEvent(item, fileListElement) {
+    const ele = fileListElement.querySelector(`[data-seq="${item.$seq}"] .download`);
+    if (ele) {
+      ele.addEventListener("click", (evt) => {
+        const fileItemElement = evt.target.closest(".file-item");
+        if (fileItemElement) {
+          const attrSeq = fileItemElement.getAttribute("data-seq");
+          if (attrSeq) {
+            const seq = parseInt(attrSeq, 10);
+            const idx = this.fileList.findIndex((v) => v.$seq === seq);
+            const item2 = this.fileList[idx];
+            if (item2["url"]) {
+              location.href = item2["url"];
+              return;
+            }
+            if (this.field.fileDownload) {
+              this.field.fileDownload.call(null, { file: item2, field: this.field });
+              return;
+            }
+          }
+        }
+      });
+    }
+  }
+  /**
+   * 파일 삭제  처리.
+   *
+   * @param item
+   * @param fileListElement
+   */
+  removeFileEvent(item, fileListElement) {
+    const ele = fileListElement.querySelector(`[data-seq="${item.$seq}"] .remove`);
+    if (ele) {
+      ele.addEventListener("click", (evt) => {
+        const fileItemElement = evt.target.closest(".file-item");
+        if (fileItemElement) {
+          const attrSeq = fileItemElement.getAttribute("data-seq");
+          if (attrSeq) {
+            const seq = parseInt(attrSeq, 10);
+            const removeIdx = this.fileList.findIndex((v) => v.$seq === seq);
+            const removeItem = this.fileList[removeIdx];
+            this.fileList.splice(removeIdx, 1);
+            delete this.uploadFiles[seq];
+            fileItemElement.remove();
+            if (removeItem.fileId) {
+              this.removeIds.push(removeItem.fileId);
+            }
+          }
+        }
+        this.valid();
+      });
+    }
+  }
+  getValue() {
+    return {
+      uploadFile: Object.values(this.uploadFiles),
+      removeIds: this.removeIds
+    };
+  }
+  setValueItems(value) {
+    this.fileList = [];
+    this.uploadFiles = [];
+    this.removeIds = [];
+    for (let file of value) {
+      file.$seq = this.fileSeq += 1;
+      this.fileList.push(file);
+    }
+    this.setFileList(this.fileList, true);
+  }
+  setValue(value) {
+    if (isArray(value)) {
+      this.setValueItems(value);
+    }
+    this.element.value = "";
+  }
+  reset() {
+    this.setValue("");
+    this.setValueItems([]);
+    resetRowElementStyleClass(this.rowElement);
+  }
+  getElement() {
+    return this.element;
+  }
+  valid() {
+    const validResult = fileValidator(this.element, this.field, this.fileList);
+    invalidMessage(this.field, this.rowElement, validResult);
+    return validResult;
+  }
+};
+
+// src/renderer/CustomRender.ts
+var CustomRender = class extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    if (field.renderer) {
+      this.customFunction = field.renderer;
+      this.mounted();
+      this.setDefaultOption();
+      this.setDefaultInfo();
+    } else {
+      this.customFunction = {};
+    }
+  }
+  mounted() {
+    if (this.customFunction.mounted) {
+      this.customFunction.mounted.call(this, this.field, this.rowElement);
+    }
+  }
+  static isDataRender() {
+    return false;
+  }
+  createField() {
+    const field = this.field;
+    const fieldTemplate = isEmpty(field.template) ? "" : isString(field.template) ? field.template : field.template();
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    fieldContainerElement.innerHTML = ` <div class="df-field">
+        ${fieldTemplate}
+        </div>
+          ${Render.getDescriptionTemplate(field)}
+        <div class="help-message"></div>`;
+  }
+  getValue() {
+    if (this.customFunction.getValue) {
+      return this.customFunction.getValue.call(this, this.field, this.rowElement);
+    }
+    return "";
+  }
+  setValue(value, changeCheckFlag) {
+    if (this.customFunction.setValue) {
+      if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+        value = this.field.$value;
+      }
+      this.customFunction.setValue.call(this, value, this.field, this.rowElement);
+    }
+    this.field.$value = value;
+  }
+  reset() {
+    this.setDefaultInfo();
+    resetRowElementStyleClass(this.rowElement);
+  }
+  getElement() {
+    if (this.customFunction.getElement) {
+      return this.customFunction.getElement.call(this, this.field, this.rowElement);
+    }
+    return null;
+  }
+  valid() {
+    if (this.customFunction.valid) {
+      const validResult2 = this.customFunction.valid.call(this, this.field, this.rowElement);
+      invalidMessage(this.field, this.rowElement, validResult2);
+      return;
+    }
+    const validResult = stringValidator(this.getValue(), this.field);
+    invalidMessage(this.field, this.rowElement, validResult);
+    return validResult;
+  }
+  /**
+   * focus
+   */
+  focus() {
+    if (this.customFunction.focus) {
+      this.customFunction.focus.call(this, this.field, this.rowElement);
+    }
+  }
+};
+
+// src/renderer/GroupRender.ts
+var GroupRender = class extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+  }
+  mounted() {
+  }
+  static isDataRender() {
+    return false;
+  }
+  createField() {
+    return "";
+  }
+  getValue() {
+    return null;
+  }
+  setValue(value) {
+  }
+  reset() {
+  }
+  getElement() {
+    return this.rowElement;
+  }
+  valid() {
+    return true;
+  }
+  addChildField(element) {
+    let addContainer = this.rowElement.querySelector(".df-field-container");
+    if (addContainer) {
+      addContainer.append(element);
+    } else {
+      this.rowElement.append(element);
+    }
+  }
+  focus() {
+  }
+};
+
+// src/renderer/HiddenRender.ts
+var HiddenRender = class extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    this.field.$value = field.defaultValue;
+  }
+  mounted() {
+  }
+  createField() {
+    return ``;
+  }
+  getValue() {
+    return this.field.$value;
+  }
+  setValue(value) {
+    this.field.$value = value;
+  }
+  reset() {
+    this.setValue(this.field.defaultValue);
+  }
+  getElement() {
+    return;
+  }
+  valid() {
+    return true;
+  }
+};
+
+// src/renderer/ButtonRender.ts
+var ButtonRender = class extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    this.mounted();
+    this.setDefaultOption();
+  }
+  mounted() {
+    this.rowElement.querySelector(`#${this.field.$key}`)?.addEventListener("click", (evt) => {
+      if (this.field.onClick) {
+        this.field.onClick.call(null, this.field);
+      }
+    });
+  }
+  static isDataRender() {
+    return false;
+  }
+  createField() {
+    const field = this.field;
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    fieldContainerElement.innerHTML = `
+      <button type="button" id="${field.$key}" class="df-btn">${field.label}</button> ${Render.getDescriptionTemplate(field)}
+     `;
+  }
+  getValue() {
+    return "";
+  }
+  setValue(value) {
+  }
+  reset() {
+    this.setDisabled(false);
+  }
+  getElement() {
+    return null;
+  }
+  valid() {
+    return true;
+  }
+};
+
+// src/renderer/RangeRender.ts
+var RangeRender = class extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    this.rangeNumElement = rowElement.querySelector(".range-num");
+    this.mounted();
+    this.setDefaultOption();
+    this.setDefaultInfo();
+  }
+  mounted() {
+    this.element.addEventListener("input", (e) => {
+      this.rangeNumElement.innerHTML = e.target.value;
+      this.element.setAttribute("title", e.target.value);
+      customChangeEventCall(this.field, e, this, this.getValue());
+      this.valid();
+    });
+  }
+  createField() {
+    const field = this.field;
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    fieldContainerElement.innerHTML = `
+        <div class="df-field">
+            <span class="range-num">${field.defaultValue ? field.defaultValue : 0}</span>
+            <input type="range" name="${field.$xssName}" class="form-field range help-icon" min="${field.rule.minimum}" max="${field.rule.maximum}"/>
+        </div> 
+        ${Render.getDescriptionTemplate(field)}
+        <div class="help-message"></div>
+       `;
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
+  }
+  getValue() {
+    return this.element.value;
+  }
+  setValue(value, changeCheckFlag) {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      this.element.value = this.field.$value;
+      return;
+    }
+    this.field.$value = value;
+    this.element.value = value;
+  }
+  reset() {
+    this.setDefaultInfo();
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+  getElement() {
+    return this.element;
+  }
+  valid() {
+    const validResult = numberValidator(this.getValue(), this.field);
+    invalidMessage(this.field, this.rowElement, validResult);
+    return validResult;
+  }
+};
+
+// node_modules/@daracl/datetimepicker/dist/index.js
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var localeMessage;
+var Language;
+var Lanauage_default2;
+var init_Lanauage = __esm({
+  "src/Lanauage.ts"() {
+    "use strict";
+    localeMessage = {
+      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"]
+      }
+    };
+    Language = class {
+      constructor() {
+        this.lang = localeMessage;
+      }
+      setDefaultMessage(lang) {
+        localeMessage = Object.assign(localeMessage, lang);
+      }
+      /**
+       * 다국어 메시지 등록
+       *
+       * @public
+       * @param {?Message} [lang] 둥록할 메시지
+       */
+      set(lang) {
+        this.lang = Object.assign({}, localeMessage, 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);
+      }
+    };
+    Lanauage_default2 = new Language();
+  }
+});
+var EXPRESSIONS_FORMAT;
+var MAX_CHAR_LENGTH;
+var DEFAULT_FORMAT;
+var DAY_STYLE_CLASS;
+var DateViewMode;
+var init_constants = __esm({
+  "src/constants.ts"() {
+    "use strict";
+    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"];
+    MAX_CHAR_LENGTH = 0;
+    DEFAULT_FORMAT = {
+      year: "YYYY",
+      month: "YYYY-MM",
+      date: "YYYY-MM-DD",
+      time: "HH:mm",
+      datetime: "YYYY-MM-DD HH:mm"
+    };
+    DAY_STYLE_CLASS = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
+    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);
+    });
+  }
+});
+var xssFilter2;
+var utils_default;
+var init_utils = __esm({
+  "src/util/utils.ts"() {
+    "use strict";
+    xssFilter2 = {
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;"
+    };
+    utils_default = {
+      replace(str) {
+        let returnText = str;
+        if (returnText) {
+          Object.keys(xssFilter2).forEach((key) => {
+            returnText = returnText.replaceAll(key, xssFilter2[key]);
+          });
+        }
+        return returnText;
+      },
+      unReplace(inputText) {
+        let returnText = inputText;
+        if (returnText) {
+          Object.keys(xssFilter2).forEach((key) => {
+            returnText = returnText.replaceAll(xssFilter2[key], key);
+          });
+        }
+        return returnText;
+      },
+      unFieldName(fieldName) {
+        if (fieldName) {
+          return this.unReplace(fieldName).replaceAll('"', '\\"');
+        }
+        return "";
+      },
+      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;
+      },
+      isUndefined(value) {
+        return typeof value === "undefined";
+      },
+      isFunction(value) {
+        return typeof value === "function";
+      },
+      isString(value) {
+        return typeof value === "string";
+      },
+      isNumber(value) {
+        if (this.isBlank(value)) {
+          return false;
+        }
+        return !isNaN(value);
+      },
+      isArray(value) {
+        return Array.isArray(value);
+      },
+      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 hash;
+      },
+      pad(str, length) {
+        str = String(str);
+        while (str.length < length) {
+          str = "0" + str;
+        }
+        return str;
+      },
+      closestElement(el, checkElement) {
+        let currentEl = el;
+        while (currentEl) {
+          if (currentEl == checkElement) {
+            return true;
+          }
+          currentEl = currentEl.parentElement;
+        }
+        return false;
+      }
+    };
+  }
+});
+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_default2.getMessage(m);
+  m = isUpper ? m.toUpperCase() : m;
+  return m;
+}
+var format_default;
+var expressionsFunction;
+var init_format = __esm({
+  "src/format/index.ts"() {
+    "use strict";
+    init_Lanauage();
+    init_constants();
+    init_utils();
+    format_default = (date, format) => {
+      format = format || "YYYY-MM-DD";
+      const len = format.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 = format.substring(i, i + j);
+          if (EXPRESSIONS_FORMAT.includes(v)) {
+            try {
+              result.push(expressionsFunction[v](date));
+            } catch (e) {
+              console.log(EXPRESSIONS_FORMAT.includes(v), v, e);
+            }
+            break;
+          }
+        }
+        if (j < 1) {
+          result.push(format.substring(i, i + 1));
+          i += 1;
+        } else {
+          i += j;
+        }
+      }
+      return result.join("");
+    };
+    expressionsFunction = {
+      YY: (date) => {
+        return String(date.getFullYear()).slice(-2);
+      },
+      YYYY: (date) => {
+        return String(date.getFullYear());
+      },
+      M: (date) => {
+        return String(date.getMonth() + 1);
+      },
+      MM: (date) => {
+        return utils_default.pad(date.getMonth() + 1, 2);
+      },
+      MMM: (date) => {
+        return Lanauage_default2.getMonthsMessage(date.getMonth());
+      },
+      MMMM: (date) => {
+        return Lanauage_default2.getMonthsMessage(date.getMonth(), "full");
+      },
+      D: (date) => {
+        return String(date.getDate());
+      },
+      DD: (date) => {
+        return utils_default.pad(date.getDate(), 2);
+      },
+      d: (date) => {
+        return String(date.getDate());
+      },
+      dd: (date) => {
+        return utils_default.pad(date.getDate(), 2);
+      },
+      ddd: (date) => {
+        return Lanauage_default2.getWeeksMessage(date.getDay());
+      },
+      dddd: (date) => {
+        return Lanauage_default2.getWeeksMessage(date.getDay(), "full");
+      },
+      H: (date) => {
+        return String(date.getHours());
+      },
+      HH: (date) => {
+        return utils_default.pad(date.getHours(), 2);
+      },
+      h: (date) => {
+        return getH(date);
+      },
+      hh: (date) => {
+        return utils_default.pad(getH(date), 2);
+      },
+      a: (date) => {
+        return String(date.getFullYear()).slice(-2);
+      },
+      A: (date) => {
+        return getMeridiem(date, true, true);
+      },
+      m: (date) => {
+        return String(date.getMinutes());
+      },
+      mm: (date) => {
+        return utils_default.pad(date.getMinutes(), 2);
+      },
+      s: (date) => {
+        return String(date.getSeconds());
+      },
+      ss: (date) => {
+        return utils_default.pad(date.getSeconds(), 2);
+      },
+      SSS: (date) => {
+        return utils_default.pad(date.getMilliseconds(), 3);
+      }
+    };
+  }
+});
+var parser_default;
+var matchFind;
+var digitsCheck;
+var word;
+var expressionsFunction2;
+var init_parser = __esm({
+  "src/util/parser.ts"() {
+    "use strict";
+    init_Lanauage();
+    init_constants();
+    parser_default = (dateStr, format) => {
+      if (dateStr.length > 1e3) {
+        return null;
+      }
+      format = format || 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 = format.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 = format.substring(i, i + j);
+          if (EXPRESSIONS_FORMAT.includes(v)) {
+            const expInfo = expressionsFunction2[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;
+    };
+    matchFind = (val, regexp2) => {
+      const match = regexp2.exec(val);
+      return match == null ? "" : match[0];
+    };
+    digitsCheck = {
+      twoOptional: /\d\d?/,
+      two: /\d\d/,
+      three: /\d{3}/,
+      four: /\d{4}/
+    };
+    word = /[^\s]+/;
+    expressionsFunction2 = {
+      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_default2.getMonthsIdx(val, "abbr");
+          return dateInfo;
+        }
+      ],
+      MMMM: [
+        word,
+        (dateInfo, val) => {
+          dateInfo.month = Lanauage_default2.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_default2.getMessage("am") != val.toLowerCase()) {
+            dateInfo.isPm = true;
+          }
+          return dateInfo;
+        }
+      ],
+      A: [
+        word,
+        (dateInfo, val) => {
+          if (Lanauage_default2.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;
+        }
+      ]
+    };
+  }
+});
+var DaraDate;
+var init_DaraDate = __esm({
+  "src/DaraDate.ts"() {
+    "use strict";
+    init_format();
+    DaraDate = 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) {
+        return format_default(this.date, format);
+      }
+      clone() {
+        return new _DaraDate(new Date(this.date.valueOf()));
+      }
+    };
+  }
+});
+function hiddenElement() {
+  if (document.getElementById("hiddenDaraDatetimeElement") == null) {
+    document.querySelector("body")?.insertAdjacentHTML("beforeend", `<div id="hiddenDaraDatetimeElement" class="daracl-datetime-hidden"></div>`);
+  }
+  return document.getElementById("hiddenDaraDatetimeElement");
+}
+function getDocSize() {
+  return {
+    clientHeight: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
+    clientWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
+  };
+}
+var DEFAULT_OPTIONS;
+var daraDatetimeIdx;
+var DateTimePicker;
+var init_DateTimePicker = __esm({
+  "src/DateTimePicker.ts"() {
+    "use strict";
+    init_format();
+    init_parser();
+    init_Lanauage();
+    init_utils();
+    init_DaraDate();
+    init_constants();
+    DEFAULT_OPTIONS = {
+      inline: false,
+      // layer or innerhtml
+      weekStartDay: 0,
+      initialDate: "",
+      autoClose: true,
+      isRTL: false,
+      mode: "date",
+      enableTodayBtn: true,
+      showMonthAfterYear: false,
+      format: "",
+      zIndex: 1e3,
+      minDate: "",
+      maxDate: "",
+      beforeDrawDate: (dt) => {
+        return {
+          check: false,
+          style: "",
+          tooltip: ""
+        };
+      }
+    };
+    daraDatetimeIdx = 0;
+    DateTimePicker = class _DateTimePicker {
+      constructor(selector, options, message2) {
+        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 && !utils_default.closestElement(e.target, this.datetimeElement)) {
+            this.hide();
+          }
+        };
+        this.options = Object.assign({}, DEFAULT_OPTIONS, 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 : "date";
+        this.initMode = this._viewMode;
+        Lanauage_default2.set(message2);
+        if (this.initMode == "year") {
+          this.dateFormat = this.options.format || DEFAULT_FORMAT.year;
+        } else if (this.initMode == "month") {
+          this.dateFormat = this.options.format || DEFAULT_FORMAT.month;
+        } else if (this.initMode == "time") {
+          this.dateFormat = this.options.format || DEFAULT_FORMAT.time;
+        } else if (this.initMode == "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_default(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};`);
+          hiddenElement()?.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();
+      }
+      static {
+        this.VERSION = `${APP_VERSION}`;
+      }
+      static {
+        this.format = format_default;
+      }
+      static {
+        this.parser = parser_default;
+      }
+      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 _DateTimePicker(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_default(minDate, this.dateFormat);
+            if (!dt) {
+              return -1;
+            }
+            minDate = dt;
+          }
+          this.minYear = minDate.getFullYear();
+          this.minMonth = +(this.minYear + utils_default.pad(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_default(maxDate, this.dateFormat);
+            if (!dt) {
+              return -1;
+            }
+            maxDate = dt;
+          }
+          this.maxYear = maxDate.getFullYear();
+          this.maxMonth = +(this.maxYear + utils_default.pad(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) {
+        this.datetimeElement.querySelector(".ddtp-datetime")?.setAttribute("view-mode", mode);
+        if (mode === "year") {
+          this.yearDraw();
+        } else if (mode === "month") {
+          this.monthDraw();
+        } else {
+          this.dayDraw();
+        }
+      }
+      /**
+       * init header event
+       *
+       * @public
+       */
+      initHeaderEvent() {
+        const isRTL = this.options.isRTL;
+        this.datetimeElement.querySelector(".ddtp-move-btn.prev")?.addEventListener("click", (e) => {
+          this.moveDate(isRTL ? "next" : "prev", e);
+        });
+        this.datetimeElement.querySelector(".ddtp-move-btn.next")?.addEventListener("click", (e) => {
+          this.moveDate(isRTL ? "prev" : "next", e);
+        });
+        this.datetimeElement.querySelector(".ddtp-header-year")?.addEventListener("click", (e) => {
+          this.viewMode = "year";
+        });
+        this.datetimeElement.querySelector(".ddtp-header-month")?.addEventListener("click", (e) => {
+          this.viewMode = "month";
+        });
+      }
+      /**
+       * 날짜 달력 이벤트처리.
+       */
+      initDateEvent() {
+        this.datetimeElement.querySelector(".ddtp-day-body")?.addEventListener("click", (e) => {
+          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;
+            }
+            this.datetimeElement.querySelector(".select")?.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);
+          }
+        });
+        this.datetimeElement.querySelector(".time-today")?.addEventListener("click", (e) => {
+          const initDate = new DaraDate(parser_default(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 === "time" || this._viewMode === "datetime";
+      }
+      /**
+       * 시간 분 설정 이벤트 처리.
+       *
+       * @public
+       */
+      initTimeEvent() {
+        if (!this.isTimeMode())
+          return;
+        let hh = this.currentDate.format("HH");
+        const hourInputEle = this.datetimeElement.querySelector(".ddtp-hour");
+        const hourRangeEle = this.datetimeElement.querySelector(".ddtp-hour-range");
+        hourInputEle.value = hh;
+        hourRangeEle.value = hh;
+        hourInputEle.addEventListener("input", (e) => {
+          const targetElement = e.target;
+          const addVal = utils_default.pad(targetElement.value, 2);
+          hourInputEle.value = addVal;
+          hourRangeEle.value = addVal;
+        });
+        hourRangeEle.addEventListener("input", (e) => {
+          const targetElement = e.target;
+          hourInputEle.value = utils_default.pad(targetElement.value, 2);
+        });
+        let mm = this.currentDate.format("mm");
+        const minuteInputEle = this.datetimeElement.querySelector(".ddtp-minute");
+        const minuteRangeEle = this.datetimeElement.querySelector(".ddtp-minute-range");
+        minuteInputEle.value = mm;
+        minuteRangeEle.value = mm;
+        minuteInputEle.addEventListener("input", (e) => {
+          const targetElement = e.target;
+          const addVal = utils_default.pad(targetElement.value, 2);
+          minuteInputEle.value = addVal;
+          minuteRangeEle.value = addVal;
+        });
+        minuteRangeEle.addEventListener("input", (e) => {
+          const targetElement = e.target;
+          minuteInputEle.value = utils_default.pad(targetElement.value, 2);
+        });
+        this.datetimeElement.querySelector(".time-select")?.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 === "date" || this._viewMode === "datetime") {
+          this.currentDate.setDate(1);
+          this.currentDate.addMonth("prev" === moveMode ? -1 : 1);
+          this.dayDraw();
+          return;
+        }
+        if (this._viewMode === "month") {
+          this.currentDate.setDate(1);
+          this.currentDate.addYear("prev" === moveMode ? -1 : 1);
+          this.monthDraw();
+          return;
+        }
+        if (this._viewMode === "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 = Object.assign({}, DEFAULT_OPTIONS, 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 offsetTop = rect.top + scrollTop;
+        let top = offsetTop + this.targetElement.offsetHeight + 2;
+        const left = rect.left + scrollLeft;
+        if (top + this.datetimeElement.offsetHeight > docSize.clientHeight) {
+          const newTop = offsetTop - (this.datetimeElement.offsetHeight + 2);
+          top = newTop > 0 ? newTop : top;
+        }
+        this.datetimeElement.setAttribute("style", `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 && utils_default.isFunction(this.options.afterChangeDatepicker)) {
+          this.options.afterChangeDatepicker(formatValue, this.viewMode);
+        }
+      }
+      /**
+       * 날짜 변경 전 이벤트.
+       * @returns void
+       */
+      beforeChangeDatepicker() {
+        const formatValue = this.currentDate.format(this.dateFormat);
+        if (this.options.beforeChangeDatepicker && utils_default.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_default2.getWeeksMessage(this.dayOrder[0])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[1]]}">${Lanauage_default2.getWeeksMessage(this.dayOrder[1])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[2]]}">${Lanauage_default2.getWeeksMessage(this.dayOrder[2])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[3]]}">${Lanauage_default2.getWeeksMessage(this.dayOrder[3])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[4]]}">${Lanauage_default2.getWeeksMessage(this.dayOrder[4])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[5]]}">${Lanauage_default2.getWeeksMessage(this.dayOrder[5])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[6]]}">${Lanauage_default2.getWeeksMessage(this.dayOrder[6])}</td>		
+                        </tr>
+                    </thead>
+                    <tbody class="ddtp-day-body">
+                    </tbody>
+                    
+                    <tfoot class="ddtp-day-footer">
+                        <td colspan="7">
+                            <div style="text-align:center;margin-top: 5px;${this.options.enableTodayBtn ? "" : "display:none;"}"><button type="button" class="time-today">${Lanauage_default2.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">
+                                <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">
+                                <input type="range" min="0" max="59" class="ddtp-minute-range">
+                            </div>
+                        </div>
+                        <div class="time-btn">
+                            <button type="button" class="time-select">${Lanauage_default2.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 === "date" || this._viewMode === "datetime") {
+          this.dayDraw(beforeChangeDatepickerCheck);
+          return;
+        }
+        if (this._viewMode === "month") {
+          this.monthDraw(beforeChangeDatepickerCheck);
+          return;
+        }
+        if (this._viewMode === "year") {
+          this.yearDraw(beforeChangeDatepickerCheck);
+        }
+      }
+      /**
+       * 년 달력 그리기
+       */
+      yearDraw(beforeChangeDatepickerCheck) {
+        const currentYear = this.currentDate.format("YYYY");
+        if (beforeChangeDatepickerCheck !== false && this.initMode == "year") {
+          this.beforeChangeDatepicker();
+          return;
+        }
+        const startYear = +currentYear - 8;
+        this.datetimeElement.querySelector(".ddtp-header-year").textContent = `${startYear} ~ ${startYear + 15}`;
+        const beforeDrawDateFlag = utils_default.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 == "year") {
+          this.afterChangeDatepicker();
+        }
+        this.datetimeElement.querySelectorAll(".ddtp-year")?.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 == "year") {
+                  if (this.isYearDisabled(numYear)) {
+                    return;
+                  }
+                  this.currentDate.setYear(numYear);
+                  this.dateChangeEvent(e);
+                  return;
+                }
+                this.currentDate.setYear(numYear);
+                this.viewMode = this.initMode;
+              }
+            }
+          });
+        });
+      }
+      /**
+       * 월 달력 그리기
+       */
+      monthDraw(beforeChangeDatepickerCheck) {
+        if (beforeChangeDatepickerCheck !== false && this.initMode == "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 == "month") {
+            this.afterChangeDatepicker();
+          }
+          return;
+        }
+        this.datetimeElement.querySelector(".ddtp-header-month").textContent = this.currentDate.format("MMMM");
+        const beforeDrawDateFlag = utils_default.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_default2.getMonthsMessage(i, "abbr")}</div>`);
+        }
+        this.datetimeElement.querySelector(".ddtp-months").innerHTML = calHTML.join("");
+        if (this.initMode == "month") {
+          this.afterChangeDatepicker();
+        }
+        this.datetimeElement.querySelectorAll(".ddtp-month")?.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 == "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 == "date" || this.initMode == "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 = utils_default.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 ? " 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 ? " 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 == "date" || this.initMode == "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 + utils_default.pad(month, 2));
+        if (this.minMonth != -1 && this.minMonth > yearMonth || this.maxMonth != -1 && this.maxMonth < yearMonth) {
+          return true;
+        }
+        return false;
+      }
+      static setMessage(message2) {
+        Lanauage_default2.setDefaultMessage(message2);
+      }
+    };
+  }
+});
+var init_daracl_datetimepicker = __esm({
+  "style/daracl.datetimepicker.scss"() {
+  }
+});
+var require_src = __commonJS({
+  "src/index.ts"(exports2, module2) {
+    init_DateTimePicker();
+    init_daracl_datetimepicker();
+    module2.exports = DateTimePicker;
+  }
+});
+var dist_default = require_src();
+
+// src/renderer/DateRender.ts
+var DateRender = class extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    this.mounted();
+    this.setDefaultOption();
+    this.setDefaultInfo();
+  }
+  mounted() {
+    let dateOnSelectEvent;
+    this.field.customOptions = Object.assign({}, this.field.customOptions);
+    if (typeof this.field.customOptions.onSelect !== "undefined") {
+      dateOnSelectEvent = typeof this.field.customOptions.onSelect;
+    }
+    if (isUndefined(this.field.customOptions.mode)) {
+      if (this.field.renderType == "datemonth" || this.field.renderType == "datehour") {
+        this.field.customOptions.mode = this.field.renderType.replace("date", "");
+      } else {
+        this.field.customOptions.mode = this.field.renderType;
+      }
+    }
+    this.field.customOptions.onSelect = (dt, e) => {
+      if (dateOnSelectEvent) {
+        dateOnSelectEvent.call(null, dt, e);
+      }
+      this.setValue(dt);
+    };
+    this.dateObj = new dist_default(this.element, this.field.customOptions, {});
+  }
+  createField() {
+    const field = this.field;
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    fieldContainerElement.innerHTML = `
+    <div class="df-field">
+      <input type="text" name="${field.$xssName}" class="form-field text help-icon" autocomplete="off"/>
+     </div>
+     ${Render.getDescriptionTemplate(field)}
+     <div class="help-message"></div>
+     `;
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
+  }
+  getValue() {
+    return this.element.value;
+  }
+  setValue(value, changeCheckFlag) {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      this.element.value = this.field.$value;
+      return;
+    }
+    this.field.$value = value;
+    this.element.value = value;
+  }
+  reset() {
+    this.setDefaultInfo();
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+  getElement() {
+    return this.element;
+  }
+  valid() {
+    const validResult = stringValidator(this.getValue(), this.field);
+    invalidMessage(this.field, this.rowElement, validResult);
+    return validResult;
+  }
+};
+
+// src/util/styleUtils.ts
+var styleUtils_default = {
+  /**
+   * field style 처리
+   *
+   * @param formOptions FormOptions
+   * @param field FormField
+   * @param beforeField FormField
+   * @returns FieldStyle
+   */
+  fieldStyle(formOptions, field, beforeField, isLabelHide) {
+    const fieldStyle = {
+      rowStyleClass: field.orientation === "horizontal" ? "horizontal" : "vertical",
+      fieldClass: "",
+      fieldStyle: "",
+      labelClass: "",
+      labelStyle: "",
+      labelAlignClass: "",
+      valueClass: "",
+      valueStyle: "",
+      tabAlignClass: ""
+    };
+    const defaultLabelWidth = beforeField?.style?.labelWidth ?? formOptions.style.labelWidth ?? "3";
+    let defaultValueWidth = beforeField?.style?.valueWidth ?? formOptions.style.valueWidth ?? "9";
+    const position = beforeField?.style?.position ?? formOptions.style.position;
+    const width = field.style?.width;
+    const positionArr = FIELD_POSITION_STYLE[field.style?.position] ?? FIELD_POSITION_STYLE[position] ?? FIELD_POSITION_STYLE.top;
+    fieldStyle.fieldClass = `${positionArr[0]} ${field.style?.customClass || ""}`;
+    if (width) {
+      if (isNumber(width)) {
+        fieldStyle.fieldClass += isNumber(width) ? ` col-xs-${width}` : "";
+      } else {
+        fieldStyle.fieldStyle = isNumber(width) ? "" : `width:${width};`;
+      }
+    }
+    fieldStyle.tabAlignClass = "tab-al-" + (["right", "center"].includes(field.style?.tabAlign) ? field.style.tabAlign : "left");
+    const labelWidth = field.style?.labelWidth || defaultLabelWidth;
+    fieldStyle.labelAlignClass = positionArr[1];
+    if (!isLabelHide && labelWidth && !["top", "bottom"].includes(positionArr[0])) {
+      if (isNumber(labelWidth)) {
+        const labelWidthValue = +labelWidth;
+        defaultValueWidth = 12 - labelWidthValue;
+        fieldStyle.labelClass = `col-xs-${labelWidthValue}`;
+        fieldStyle.valueClass = fieldStyle.labelStyle ? "col-full" : `col-xs-${defaultValueWidth}`;
+      } else {
+        fieldStyle.labelStyle = `width:${labelWidth};`;
+      }
+    }
+    const valueWidth = field.style?.valueWidth || defaultValueWidth;
+    if (isLabelHide && !["left", "right"].includes(positionArr[0])) {
+      fieldStyle.valueClass = "col-full";
+    } else {
+      if (valueWidth && !["top", "bottom"].includes(positionArr[0])) {
+        if (isNumber(valueWidth)) {
+          fieldStyle.valueClass = fieldStyle.labelStyle ? "col-full" : `col-xs-${valueWidth}`;
+        } else {
+          fieldStyle.valueStyle = `width:${valueWidth};`;
+        }
+      } else {
+        fieldStyle.valueClass = fieldStyle.labelStyle ? "col-full" : "";
+      }
+    }
+    fieldStyle.fieldClass = spaceReplace(fieldStyle.fieldClass);
+    fieldStyle.labelClass = spaceReplace(fieldStyle.labelClass);
+    fieldStyle.valueClass = spaceReplace(fieldStyle.valueClass);
+    return fieldStyle;
+  }
+};
+function spaceReplace(str) {
+  return str.replace(/\s+/g, " ").trim();
+}
+
+// src/renderer/TabRender.ts
+var TabRender = class extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    if (field.renderer) {
+      this.customFunction = field.renderer;
+    } else {
+      this.customFunction = {};
+    }
+    this.mounted();
+  }
+  mounted() {
+    if (this.customFunction.mounted) {
+      this.customFunction.mounted.call(this, this.field, this.rowElement);
+    }
+    this.tabContainerElement.querySelectorAll(".tab-item").forEach((tabItem) => {
+      tabItem.addEventListener("click", (e) => {
+        this.clickEventHandler(tabItem, e);
+      });
+    });
+  }
+  /**
+   * tab item click
+   *
+   * @param {Element} tabItem
+   * @param {*} evt
+   */
+  clickEventHandler(tabItem, evt) {
+    this.setActive(tabItem.getAttribute("data-tab-id") ?? "");
+  }
+  setActive(tabId) {
+    const tabItem = this.tabContainerElement.querySelector(`[data-tab-id="${tabId}"]`);
+    if (!tabItem)
+      return;
+    if (!tabItem.classList.contains("active")) {
+      for (let item of tabItem?.parentElement?.children ?? []) {
+        item.classList.remove("active");
+      }
+      tabItem.classList.add("active");
+    }
+    const tabPanel = this.rowElement.querySelector(`[tab-panel-id="${tabId}"]`);
+    if (!tabPanel?.classList.contains("active")) {
+      for (let item of tabPanel?.parentElement?.children ?? []) {
+        item.classList.remove("active");
+      }
+      tabPanel?.classList.add("active");
+    }
+  }
+  static isDataRender() {
+    return false;
+  }
+  static isChildrenCreate() {
+    return false;
+  }
+  /**
+   * tab template
+   *
+   * @param {FormField} field
+   * @param {FormTemplate} formTemplate
+   * @param {FormOptions} options
+   * @returns {string} template string
+   */
+  createField() {
+    const field = this.field;
+    const formTemplate = this.daraForm.formTemplate;
+    const options = this.daraForm.getOptions();
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    let fieldStyle = styleUtils_default.fieldStyle(options, field);
+    fieldContainerElement.innerHTML = `
+        <div class="df-field ">
+          <div class="tab-header ${fieldStyle.tabAlignClass}"></div>
+        </div>
+        <div class="df-tab-body"></div>
+    `;
+    if (field.children) {
+      let firstFlag = true;
+      const formOptions = this.getForm().getOptions();
+      let fieldStyle2 = styleUtils_default.fieldStyle(formOptions, field, null, formTemplate.isLabelHide(field));
+      for (const childField of field.children) {
+        childField.$parent = field;
+        formTemplate.addRowFieldInfo(childField);
+        let id = childField.$key;
+        let tabTemplate = `<span class="tab-item ${firstFlag ? "active" : ""}" data-tab-id="${id}"><a href="javascript:;">${childField.label}</a></span>`;
+        let tabBodyTemplate = `<div class="tab-panel ${firstFlag ? "active" : ""}" tab-panel-id="${id}">${Render.getDescriptionTemplate(childField)}
+          <div class="tab-group"></div>
+        </div>`;
+        const tabElement = templateToElement(tabTemplate);
+        const tabBodyElement = templateToElement(tabBodyTemplate);
+        firstFlag = false;
+        if (tabElement) {
+          fieldContainerElement.querySelector(".tab-header")?.appendChild(tabElement);
+        }
+        if (tabBodyElement) {
+          fieldContainerElement.querySelector(".df-tab-body")?.appendChild(tabBodyElement);
+          if (childField.children) {
+            let tabFormOptions = {
+              style: {
+                width: formOptions.style.width ?? "100%",
+                labelWidth: formOptions.style.labelWidth ?? 3,
+                valueWidth: formOptions.style.valueWidth ?? 9,
+                position: formOptions.style.position ?? "left-right"
+              },
+              useTypeValue: formOptions.useTypeValue,
+              autoCreate: false,
+              notValidMessage: "This form is not valid.",
+              fields: []
+            };
+            childField.$tabForm = new DaraForm(document.createElement("div"), tabFormOptions);
+            childField.$instance = new childField.$renderType(childField, tabBodyElement?.querySelector(".tab-group"), childField.$tabForm);
+            childField.$tabForm.formTemplate.childTemplate(childField, fieldStyle2);
+          }
+        }
+      }
+      this.tabContainerElement = fieldContainerElement;
+    }
+  }
+  getValue() {
+    if (this.customFunction.getValue) {
+      return this.customFunction.getValue.call(this, this.field, this.rowElement);
+    }
+    let allTabValue = {};
+    let useTypeValue = this.getForm().getOptions().useTypeValue;
+    for (const childField of this.field.children) {
+      const childFieldValue = childField.$tabForm?.getValue(false);
+      if (useTypeValue) {
+        allTabValue[childField.$validName] = childFieldValue;
+      } else {
+        for (let [key, value] of Object.entries(childFieldValue)) {
+          allTabValue[key] = value;
+        }
+      }
+    }
+    return allTabValue;
+  }
+  setValue(value) {
+    for (const childField of this.field.children) {
+      let tabChildValue = value[childField.$validName];
+      if (tabChildValue) {
+        childField.$tabForm?.setValue(tabChildValue);
+      }
+    }
+  }
+  reset() {
+  }
+  getElement() {
+    return this.rowElement;
+  }
+  valid() {
+    if (this.customFunction.valid) {
+      const validResult = this.customFunction.valid.call(this, this.field, this.rowElement);
+      invalidMessage(this.field, this.rowElement, validResult);
+      return;
+    }
+    const field = this.field;
+    for (const childField of field.children) {
+      const validResult = childField.$tabForm?.validForm();
+      if (validResult && validResult.length > 0) {
+        const firstItem = validResult[0];
+        if (firstItem.message) {
+          firstItem.message = "[" + this.field.label + "] " + firstItem.message;
+          return firstItem;
+        }
+      }
+    }
+    return true;
+  }
+  focus() {
+  }
+};
+
+// src/renderer/GridRender.ts
+var $$idx = 0;
+var GridRender = class extends Render {
+  constructor(field, rowElement, daraForm) {
+    super(daraForm, field, rowElement);
+    this.allAddRowInfo = {};
+    if (field.renderer) {
+      this.customFunction = field.renderer;
+    } else {
+      this.customFunction = {};
+    }
+    const gridFormOptions = {
+      style: {
+        width: "100%",
+        labelWidth: 3,
+        valueWidth: 9,
+        position: "left-right"
+      },
+      autoCreate: false,
+      notValidMessage: "This form is not valid.",
+      fields: []
+    };
+    this.gridForm = new DaraForm(document.createElement("div"), gridFormOptions);
+    this.mounted();
+    this.setDefaultOption();
+    this.setDefaultInfo();
+  }
+  mounted() {
+    this.addRow();
+    if (this.customFunction.mounted) {
+      this.customFunction.mounted.call(this, this.field, this.rowElement);
+    }
+    this.rowElement.querySelector(".df-grid-add-row-btn")?.addEventListener("click", (evt) => {
+      this.addRow();
+    });
+  }
+  static isDataRender() {
+    return false;
+  }
+  static isChildrenCreate() {
+    return false;
+  }
+  createField() {
+    const field = this.field;
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+    let theadTemplate = [];
+    let colgroupTemplate = [];
+    let addBtnTemplate = [];
+    addBtnTemplate.push("");
+    if (field.children) {
+      colgroupTemplate.push("<colgroup>");
+      theadTemplate.push("<tr>");
+      colgroupTemplate.push(`<col style="width:38px">`);
+      theadTemplate.push("<th>");
+      if (field.gridOptions?.disableAddButton !== true) {
+        theadTemplate.push(`<button type="button" class="df-btn df-grid-add-row-btn" title="Add"><i class="df-icon df-add-icon"></i></button>`);
+      }
+      theadTemplate.push("</th>");
+      for (const childField of field.children) {
+        colgroupTemplate.push(`<col style="width:${childField.style?.width ?? "*"}">`);
+        theadTemplate.push(`<th class="df-grid-header">${childField.label}</th>`);
+      }
+      colgroupTemplate.push("</colgroup>");
+      theadTemplate.push("</tr>");
+    }
+    fieldContainerElement.innerHTML = `
+    <div class="df-grid-field">
+      ${addBtnTemplate.join("")}
+     <div class="df-grid-container ${field.style?.position ?? ""}" style="height:${field.gridOptions?.height ?? "auto"};">
+        <table class="df-grid">${colgroupTemplate.join("")}<thead>${theadTemplate.join("")}</thead><tbody></tbody></table>
+     </div>
+     </div>
+     `;
+  }
+  /**
+   * add row
+   */
+  addRow(valueItem) {
+    let rowTemplate = [];
+    const options = this.daraForm.getOptions();
+    const formTemplate = this.gridForm.formTemplate;
+    const parentName = this.field.$xssName;
+    ++$$idx;
+    let addColumns = [];
+    rowTemplate.push(`<tr class="grid-row">`);
+    rowTemplate.push("<td>");
+    if (this.field.gridOptions?.disableRemoveButton !== true) {
+      rowTemplate.push(`<button type="button" data-row-idx="${$$idx}" class="df-btn df-grid-row-remove"><i class="df-icon df-remove-icon"></i></button>`);
+    }
+    rowTemplate.push("</td>");
+    for (const childField of this.field.children) {
+      let fieldStyle = styleUtils_default.fieldStyle(options, childField, null, true);
+      let columnField = merge({}, childField);
+      addColumns.push(columnField);
+      columnField.$orgin = childField;
+      columnField.name = columnField.name + "_" + $$idx;
+      columnField.$xssName = parentName + "_" + getXssFieldName(columnField);
+      formTemplate.addRowFieldInfo(columnField);
+      rowTemplate.push(`<td id="${columnField.$xssName}"><div class="df-field-container ${columnField.required ? "required" : ""} " style="${fieldStyle.valueStyle}"></div></td>`);
+    }
+    rowTemplate.push("</tr>");
+    this.allAddRowInfo[$$idx] = addColumns;
+    const addRowElement = templateToElement(rowTemplate.join(""));
+    if (addRowElement) {
+      this.rowElement.querySelector("tbody")?.append(addRowElement);
+      addRowElement.querySelector(".df-grid-row-remove")?.addEventListener("click", (evt) => {
+        this.removeRow(evt);
+      });
+    }
+    valueItem = valueItem ?? {};
+    for (let columnField of addColumns) {
+      columnField.$instance = new columnField.$renderType(columnField, addRowElement?.querySelector(`#${columnField.$xssName}`), this.gridForm);
+      if (valueItem[columnField.$orgin.name]) {
+        columnField.$instance.setValue(valueItem[columnField.$orgin.name]);
+      }
+    }
+  }
+  /**
+   * remove row
+   *
+   * @param evt event
+   */
+  removeRow(evt) {
+    const target = evt.target;
+    const rowElement = target.closest("tr");
+    if (rowElement) {
+      if (rowElement.parentElement?.childElementCount == 1)
+        return;
+      let rowIdx = evt.currentTarget?.getAttribute("data-row-idx") || "-1";
+      this.removeFieldInfo(rowIdx);
+      rowElement.remove();
+    }
+  }
+  /**
+   *
+   * @param rowIdx row index
+   */
+  removeFieldInfo(rowIdx) {
+    let removeFieldArrs = [];
+    if (isEmpty(rowIdx)) {
+      for (let key in this.allAddRowInfo) {
+        removeFieldArrs = removeFieldArrs.concat(this.allAddRowInfo[key]);
+      }
+      this.allAddRowInfo = {};
+    } else if (rowIdx) {
+      const rowIdxNum = parseInt(rowIdx, 10);
+      removeFieldArrs = removeFieldArrs.concat(this.allAddRowInfo[rowIdxNum]);
+      delete this.allAddRowInfo[rowIdxNum];
+    }
+    for (let columnField of removeFieldArrs) {
+      this.gridForm.getFieldInfoMap().removeFieldInfo(columnField.name);
+    }
+  }
+  allRemoveRow() {
+    this.rowElement.querySelector("tbody")?.replaceChildren();
+    this.removeFieldInfo();
+  }
+  getValue() {
+    if (this.customFunction.getValue) {
+      return this.customFunction.getValue.call(this, this.field, this.rowElement);
+    }
+    let result = [];
+    const children = this.field.children;
+    const childrenLength = children.length;
+    for (let idx in this.allAddRowInfo) {
+      const rowColumns = this.allAddRowInfo[idx];
+      let rowInfo = {};
+      for (let childIdx = 0; childIdx < childrenLength; childIdx++) {
+        let childField = children[childIdx];
+        rowInfo[childField.name] = this.gridForm.getFieldValue(rowColumns[childIdx].name);
+      }
+      result.push(rowInfo);
+    }
+    return result;
+  }
+  setValue(value) {
+    this.field.$value = value;
+    let valueArr = [];
+    if (Array.isArray(value)) {
+      valueArr = value;
+    } else {
+      if (isPlainObject(value)) {
+        valueArr.push(value);
+      }
+    }
+    this.allRemoveRow();
+    for (let valueItem of valueArr) {
+      this.addRow(valueItem);
+    }
+  }
+  reset() {
+    this.setDefaultInfo();
+    resetRowElementStyleClass(this.rowElement);
+  }
+  getElement() {
+    if (this.customFunction.getElement) {
+      return this.customFunction.getElement.call(this, this.field, this.rowElement);
+    }
+    return null;
+  }
+  valid() {
+    if (this.customFunction.valid) {
+      const validResult2 = this.customFunction.valid.call(this, this.field, this.rowElement);
+      invalidMessage(this.field, this.rowElement, validResult2);
+      return;
+    }
+    const validResult = this.gridForm.validForm();
+    if (validResult.length > 0) {
+      const firstItem = validResult[0];
+      if (firstItem.message) {
+        firstItem.message = "[" + this.field.label + "] " + firstItem.message;
+        return firstItem;
+      }
+    }
+    return true;
+  }
+  focus() {
+  }
+};
+
+// src/constants.ts
+var RULES = {
+  NAN: "nan",
+  MIN: "minimum",
+  EXCLUSIVE_MIN: "exclusiveMinimum",
+  MAX: "maximum",
+  EXCLUSIVE_MAX: "exclusiveMaximum",
+  MIN_LENGTH: "minLength",
+  MAX_LENGTH: "maxLength",
+  BETWEEN: "between",
+  BETWEEN_EXCLUSIVE_MIN: "betweenExclusiveMin",
+  BETWEEN_EXCLUSIVE_MAX: "betweenExclusiveMax",
+  BETWEEN_EXCLUSIVE_MINMAX: "betweenExclusiveMinMax",
+  REGEXP: "regexp",
+  REQUIRED: "required",
+  VALIDATOR: "validator"
+};
+var FIELD_PREFIX = "dff";
+var RENDER_TEMPLATE = {
+  number: NumberRender,
+  textarea: TextAreaRender,
+  dropdown: DropdownRender,
+  checkbox: CheckboxRender,
+  radio: RadioRender,
+  text: TextRender,
+  password: PasswordRender,
+  file: FileRender,
+  custom: CustomRender,
+  group: GroupRender,
+  hidden: HiddenRender,
+  button: ButtonRender,
+  range: RangeRender,
+  datehour: DateRender,
+  datemonth: DateRender,
+  date: DateRender,
+  datetime: DateRender,
+  tab: TabRender,
+  grid: GridRender
+};
+var FIELD_POSITION_STYLE = {
+  "top-left": ["top", "txt-left"],
+  "top-center": ["top", "txt-center"],
+  "top-right": ["top", "txt-right"],
+  "left-left": ["", "txt-left"],
+  "left-center": ["", "txt-center"],
+  "left-right": ["", "txt-right"],
+  "right-right": ["right", "txt-right"],
+  "right-center": ["right", "txt-center"],
+  "right-left": ["right", "txt-left"],
+  "bottom-left": ["bottom", "txt-left"],
+  "bottom-center": ["bottom", "txt-center"],
+  "bottom-right": ["bottom", "txt-right"]
+};
+FIELD_POSITION_STYLE["top"] = FIELD_POSITION_STYLE["top-left"];
+FIELD_POSITION_STYLE["right"] = FIELD_POSITION_STYLE["right-right"];
+FIELD_POSITION_STYLE["left"] = FIELD_POSITION_STYLE["left-left"];
+FIELD_POSITION_STYLE["bottom"] = FIELD_POSITION_STYLE["bottom-left"];
+
+// src/util/Lanauage.ts
+var localeMessage2 = {
+  required: "{label} \uD544\uC218 \uC785\uB825\uC0AC\uD56D\uC785\uB2C8\uB2E4.",
+  fileButton: "\uD30C\uC77C\uCC3E\uAE30",
+  selection: "\uC120\uD0DD",
+  string: {
+    minLength: "{minLength} \uAE00\uC790 \uC774\uC0C1\uC73C\uB85C \uC785\uB825\uD558\uC138\uC694.",
+    maxLength: "{maxLength} \uAE00\uC790 \uC774\uD558\uB85C \uC785\uB825\uD558\uC138\uC694.",
+    between: "{minLength} ~ {maxLength} \uC0AC\uC774\uC758 \uAE00\uC790\uB97C \uC785\uB825\uD558\uC138\uC694."
+  },
+  number: {
+    nan: "\uC22B\uC790\uB9CC \uC785\uB825 \uAC00\uB2A5 \uD569\uB2C8\uB2E4.",
+    minimum: "{minimum} \uAC12\uACFC \uAC19\uAC70\uB098 \uCEE4\uC57C \uD569\uB2C8\uB2E4",
+    exclusiveMinimum: "{minimum} \uBCF4\uB2E4 \uCEE4\uC57C \uD569\uB2C8\uB2E4",
+    maximum: "{maximum} \uAC12\uACFC \uAC19\uAC70\uB098 \uC791\uC544\uC57C \uD569\uB2C8\uB2E4",
+    exclusiveMaximum: "{maximum} \uBCF4\uB2E4 \uC791\uC544\uC57C \uD569\uB2C8\uB2E4.",
+    between: "{minimum}~{maximum} \uC0AC\uC774\uC758 \uAC12\uC744 \uC785\uB825\uD558\uC138\uC694.",
+    betweenExclusiveMin: "{minimum} \uBCF4\uB2E4 \uD06C\uACE0 {maximum} \uBCF4\uB2E4 \uAC19\uAC70\uB098 \uC791\uC544\uC57C \uD569\uB2C8\uB2E4",
+    betweenExclusiveMax: "{minimum} \uBCF4\uB2E4 \uAC19\uAC70\uB098 \uD06C\uACE0 {maximum} \uBCF4\uB2E4 \uC791\uC544\uC57C \uD569\uB2C8\uB2E4",
+    betweenExclusiveMinMax: "{minimum} \uBCF4\uB2E4 \uD06C\uACE0 {maximum} \uBCF4\uB2E4 \uC791\uC544\uC57C \uD569\uB2C8\uB2E4"
+  },
+  regexp: {
+    mobile: "\uD578\uB4DC\uD3F0 \uBC88\uD638\uAC00 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.",
+    email: "\uC774\uBA54\uC77C\uC774 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.",
+    url: "URL\uC774 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.",
+    alpha: "\uC601\uBB38\uB9CC \uC785\uB825 \uAC00\uB2A5 \uD569\uB2C8\uB2E4.",
+    "alpha-num": "\uC601\uBB38\uACFC \uC22B\uC790\uB9CC \uC785\uB825 \uAC00\uB2A5 \uD569\uB2C8\uB2E4.",
+    number: "\uC22B\uC790\uB9CC \uC785\uB825 \uAC00\uB2A5 \uD569\uB2C8\uB2E4.",
+    variable: "\uAC12\uC774 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.",
+    "number-char": "\uC22B\uC790, \uBB38\uC790 \uAC01\uAC01 \uD558\uB098 \uC774\uC0C1 \uD3EC\uD568 \uB418\uC5B4\uC57C \uD569\uB2C8\uB2E4.",
+    "upper-char": "\uB300\uBB38\uC790\uAC00 \uD558\uB098 \uC774\uC0C1 \uD3EC\uD568 \uB418\uC5B4\uC57C \uD569\uB2C8\uB2E4.",
+    "upper-char-special": "\uB300\uBB38\uC790,\uC18C\uBB38\uC790,\uD2B9\uC218\uBB38\uC790 \uAC01\uAC01 \uD558\uB098 \uC774\uC0C1 \uD3EC\uD568 \uB418\uC5B4\uC57C \uD569\uB2C8\uB2E4.",
+    "upper-char-special-number": "\uB300\uBB38\uC790,\uC18C\uBB38\uC790,\uD2B9\uC218\uBB38\uC790,\uC22B\uC790 \uAC01\uAC01 \uD558\uB098 \uC774\uC0C1 \uD3EC\uD568 \uB418\uC5B4\uC57C\uD569\uB2C8\uB2E4."
+  }
+};
+var Language2 = class {
+  constructor() {
+    this.lang = localeMessage2;
+  }
+  /**
+   * 다국어 메시지 등록
+   *
+   * @public
+   * @param {?Message} [lang] 둥록할 메시지
+   */
+  set(lang) {
+    this.lang = Object.assign({}, localeMessage2, lang);
+  }
+  /**
+   * 메시지 얻기
+   *
+   * @public
+   * @param {string} messageKey 메시지 키
+   * @returns {*}
+   */
+  getMessage(messageKey) {
+    return this.lang[messageKey];
+  }
+  /**
+   * ValidResult 값을 메시지로 변경.
+   *
+   * @public
+   * @param {FormField} field
+   * @param {ValidResult} validResult
+   * @returns {string[]}
+   */
+  validMessage(field, validResult) {
+    let messageFormat = "";
+    let messageFormats = [];
+    if (validResult.regexp) {
+      messageFormat = this.lang.regexp[validResult.regexp];
+      messageFormats.push(messageFormat);
+    }
+    (validResult.constraint ?? []).forEach((constraint) => {
+      if (constraint === RULES.REQUIRED) {
+        messageFormat = message(this.lang.required, field);
+        messageFormats.push(messageFormat);
+      }
+      if (field.renderType == "number" || field.renderType == "range") {
+        messageFormat = this.lang.number[constraint];
+        messageFormats.push(messageFormat);
+      } else {
+        messageFormat = this.lang.string[constraint];
+        messageFormats.push(messageFormat);
+      }
+    });
+    const reMessage = [];
+    const msgParam = Object.assign({}, { name: field.name, label: field.label }, field.rule);
+    messageFormats.forEach((msgFormat) => {
+      if (msgFormat) {
+        reMessage.push(message(msgFormat, msgParam));
+      }
+    });
+    if (validResult.validator) {
+      reMessage.push(validResult.validator.message);
+    }
+    return reMessage;
+  }
+};
+function message(msgFormat, msgParam) {
+  return msgFormat.replace(/\{{1,1}([A-Za-z0-9_.]*)\}{1,1}/g, (match, key) => {
+    return typeof msgParam[key] !== "undefined" ? msgParam[key] : match;
+  });
+}
+var Lanauage_default = new Language2();
+
+// src/util/renderFactory.ts
+var getRenderer = (field) => {
+  let render;
+  if (field.renderType) {
+    render = RENDER_TEMPLATE[field.renderType];
+  }
+  if (render && (render.isDataRender() === false || !isUndefined(field.name))) {
+    return render;
+  }
+  if (isUndefined(field.name)) {
+    if (field.children) {
+      return RENDER_TEMPLATE["group"];
+    } else {
+      return RENDER_TEMPLATE["hidden"];
+    }
+  }
+  return RENDER_TEMPLATE["text"];
+};
+
+// src/FieldInfoMap.ts
+var FieldInfoMap = class {
+  constructor(selector, form) {
+    this.fieldIdx = 0;
+    this.allFieldInfo = {};
+    this.keyNameMap = {};
+    this.conditionFields = [];
+    this.fieldPrefix = `${FIELD_PREFIX}_${getHashCode(selector)}`;
+    this.form = form;
+  }
+  /**
+   * add Field 정보
+   *
+   * @public
+   * @param {FormField} field 폼필드 정보
+   */
+  addField(field) {
+    replaceXssField(field);
+    this.fieldIdx += 1;
+    field.$key = `${this.fieldPrefix}_${this.fieldIdx}`;
+    field.$validName = field.name ?? field.label;
+    this.keyNameMap[field.$validName] = field.$key;
+    this.allFieldInfo[field.$key] = field;
+    field.$renderType = getRenderer(field);
+    if (field.conditional) {
+      this.conditionFields.push(field.$key);
+    }
+  }
+  /**
+   * 필드명으로 필드 정부 구하기
+   *
+   * @public
+   * @param {string} fieldName 필드명
+   * @returns {FormField}
+   */
+  getFieldName(fieldName) {
+    return this.allFieldInfo[this.keyNameMap[fieldName]];
+  }
+  /**
+   * 필드 키로 정보 구하기
+   *
+   * @public
+   * @param {string} fieldKey
+   * @returns {FormField}
+   */
+  get(fieldKey) {
+    return this.allFieldInfo[fieldKey];
+  }
+  /**
+   * 필드명 있는지 여부 체크.
+   *
+   * @public
+   * @param {string} fieldName 필드명
+   * @returns {boolean}
+   */
+  hasFieldName(fieldName) {
+    if (this.keyNameMap[fieldName] && this.allFieldInfo[this.keyNameMap[fieldName]]) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * 모든 필드 정보
+   *
+   * @public
+   * @returns {NumberFieldMap}
+   */
+  getAllFieldInfo() {
+    return this.allFieldInfo;
+  }
+  /**
+   * 필드 정보 맵에서 지우기
+   *
+   * @public
+   * @param {string} fieldName
+   */
+  removeFieldInfo(fieldName) {
+    delete this.allFieldInfo[this.keyNameMap[fieldName]];
+  }
+  /**
+   * 모든 필드값 구하기
+   *
+   * @public
+   * @param {boolean} validationCheck
+   * @returns {*}
+   */
+  getAllFieldValue(formValue, validationCheck) {
+    const useTypeValue = this.form.getOptions().useTypeValue;
+    if (validationCheck !== true) {
+      for (let [key, fieldInfo] of Object.entries(this.allFieldInfo)) {
+        formValue = addFormValue(formValue, fieldInfo, useTypeValue);
+      }
+      return formValue;
+    }
+    return new Promise((resolve, reject) => {
+      for (let [key, fieldInfo] of Object.entries(this.allFieldInfo)) {
+        if (!fieldInfo.$instance.isEnableView()) {
+          continue;
+        }
+        let fieldValid = this.getFieldValidation(fieldInfo, true);
+        if (fieldValid !== true) {
+          reject(new Error(fieldValid.message, { cause: fieldValid }));
+          return;
+        }
+        formValue = addFormValue(formValue, fieldInfo, useTypeValue);
+      }
+      resolve(formValue);
+    });
+  }
+  getFormDataValue(formValue, validationCheck) {
+    if (validationCheck !== true) {
+      let reval = new FormData();
+      for (let [key, value] of Object.entries(formValue)) {
+        reval.set(key, value);
+      }
+      for (let [key, fieldInfo] of Object.entries(this.allFieldInfo)) {
+        addFieldFormData(reval, fieldInfo, fieldInfo.$instance.getValue());
+      }
+      return reval;
+    }
+    return new Promise((resolve, reject) => {
+      let reval = new FormData();
+      for (let [key, value] of Object.entries(formValue)) {
+        reval.set(key, value);
+      }
+      for (let [key, fieldInfo] of Object.entries(this.allFieldInfo)) {
+        if (!fieldInfo.$instance.isEnableView()) {
+          continue;
+        }
+        let fieldValid = this.getFieldValidation(fieldInfo, true);
+        if (fieldValid !== true) {
+          reject(new Error(fieldValid.message, { cause: fieldValid }));
+          return;
+        }
+        addFieldFormData(reval, fieldInfo, fieldInfo.$instance.getValue());
+      }
+      resolve(reval);
+    });
+  }
+  /**
+   *
+   *
+   * @param field
+   * @returns
+   */
+  isConditionFieldCheck(field) {
+    let parent = field;
+    while (typeof parent !== "undefined") {
+      if (!this.isConditionField(parent)) {
+        return false;
+      }
+      parent = parent.$parent;
+    }
+    return true;
+  }
+  /**
+   * field 활성 비활성화 여부.
+   *
+   * @param field form field
+   * @returns
+   */
+  isConditionField(field) {
+    if (!this.conditionFields.includes(field.$key)) {
+      return true;
+    }
+    let condFlag = false;
+    if (field.conditional.custom) {
+      condFlag = field.conditional.custom.call(null, field);
+    } else {
+      if (field.conditional.field) {
+        const condField = this.getFieldName(field.conditional.field);
+        if (condField) {
+          if (field.conditional.eq == condField.$instance.getValue()) {
+            condFlag = true;
+          }
+        }
+      }
+    }
+    return condFlag;
+  }
+  /**
+   * 컬럼 로우 보이고 안보이기 체크.
+   *
+   * @public
+   */
+  conditionCheck() {
+    this.conditionFields.forEach((fieldKey) => {
+      const fieldInfo = this.allFieldInfo[fieldKey];
+      let condFlag = this.isConditionField(fieldInfo);
+      if (condFlag) {
+        fieldInfo.$instance.show();
+      } else {
+        fieldInfo.$instance.hide();
+      }
+    });
+  }
+  /**
+   * field validation check
+   *
+   * @param fieldInfo FormField
+   * @returns boolean true or ValidResult
+   */
+  getFieldValidation(fieldInfo, focusFlag) {
+    if (!this.isConditionFieldCheck(fieldInfo)) {
+      return true;
+    }
+    const renderInfo = fieldInfo.$instance;
+    let fieldValid = renderInfo.valid();
+    if (fieldValid === true)
+      return true;
+    if (focusFlag) {
+      renderInfo.focus();
+    }
+    fieldValid = fieldValid;
+    if (isUndefined(fieldValid.message)) {
+      fieldValid.message = Lanauage_default.validMessage(fieldInfo, fieldValid)[0];
+    }
+    return fieldValid;
+  }
+};
+function addFormValue(formData, fieldInfo, useTypeValue) {
+  if (ignoreValueField(fieldInfo)) {
+    return formData;
+  }
+  const fieldValue = fieldInfo.$instance.getValue();
+  if (fieldInfo.renderType === "file") {
+    const uploadFiles = fieldValue["uploadFile"];
+    formData[fieldInfo.$validName] = uploadFiles;
+    formData[fieldInfo.$validName + "RemoveIds"] = fieldValue["removeIds"];
+  } else {
+    if (useTypeValue !== true) {
+      if (isTabType(fieldInfo)) {
+        for (let [key, value] of Object.entries(fieldValue)) {
+          formData[key] = value;
+        }
+      } else {
+        if (!isEmpty(fieldInfo.name)) {
+          formData[fieldInfo.name] = fieldValue;
+        }
+      }
+    } else {
+      formData[fieldInfo.$validName] = fieldValue;
+    }
+  }
+  return formData;
+}
+function addFieldFormData(formData, fieldInfo, useTypeValue) {
+  if (ignoreValueField(fieldInfo)) {
+    return formData;
+  }
+  const fieldValue = fieldInfo.$instance.getValue();
+  if (fieldInfo.renderType === "file") {
+    const uploadFiles = fieldValue["uploadFile"];
+    formData.delete(fieldInfo.$validName);
+    for (let uploadFile of uploadFiles) {
+      formData.append(fieldInfo.$validName, uploadFile);
+    }
+    formData.set(fieldInfo.$validName + "RemoveIds", fieldValue["removeIds"]);
+  } else {
+    if (useTypeValue !== true) {
+      if (isTabType(fieldInfo)) {
+        for (let [key, value] of Object.entries(fieldValue)) {
+          formData.set(key, value);
+        }
+      } else {
+        if (!isEmpty(fieldInfo.name)) {
+          formData.set(fieldInfo.$validName, fieldValue);
+        }
+      }
+    } else {
+      formData.set(fieldInfo.$validName, fieldValue);
+    }
+  }
+  return formData;
+}
+
+// src/FormTemplate.ts
+var FormTemplate = class {
+  constructor(daraform, formElement, fieldInfoMap) {
+    this.addRowFields = [];
+    this.daraform = daraform;
+    this.options = daraform.getOptions();
+    this.formElement = formElement;
+    this.fieldInfoMap = fieldInfoMap;
+  }
+  /**
+   * field row 추가.
+   *
+   * @param field
+   */
+  addRow(field) {
+    if (this.checkHiddenField(field)) {
+      return;
+    }
+    this.addRowFields = [];
+    this.addRowTemplate(field);
+  }
+  /**
+   * 그룹 템플릿
+   *
+   * @param {FormField} field
+   * @returns {string} row template
+   */
+  addRowTemplate(field) {
+    let labelHideFlag = this.isLabelHide(field);
+    let fieldStyle = styleUtils_default.fieldStyle(this.options, field, null, labelHideFlag);
+    this.addRowFieldInfo(field);
+    const rowElement = templateToElement(`
+        <div class="df-row 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>`}
+
+          <div class="df-field-container ${fieldStyle.valueClass} ${field.required ? "required" : ""}" style="${fieldStyle.valueStyle}"></div>
+        </div>
+    `);
+    if (rowElement) {
+      this.createField(field, rowElement);
+      this.formElement.append(rowElement);
+      if (field.children) {
+        this.childTemplate(field, fieldStyle);
+      }
+    }
+  }
+  createField(field, element) {
+    field.$instance = new field.$renderType(field, element, this.daraform);
+  }
+  /**
+   * child template
+   *
+   * @param {FormField} field
+   * @param {FieldStyle} parentFieldStyle
+   * @returns {*}
+   */
+  childTemplate(field, parentFieldStyle) {
+    let beforeField = null;
+    let firstFlag = true;
+    let isEmptyLabel = false;
+    if (!field.$renderType.isChildrenCreate()) {
+      return;
+    }
+    const rowElement = document.createElement("div");
+    rowElement.classList.add("df-row", parentFieldStyle.rowStyleClass ?? "");
+    let idx = 0;
+    for (const childField of field.children) {
+      if (isEmpty(childField)) {
+        throw new Error(`parent field :[${field.$validName}], children index ${idx},  empty [${childField}]`);
+      }
+      childField.$parent = field;
+      ++idx;
+      if (this.checkHiddenField(childField)) {
+        continue;
+      }
+      this.addRowFieldInfo(childField);
+      if (firstFlag) {
+        beforeField = childField;
+      }
+      let labelHideFlag = this.isLabelHide(childField);
+      let childFieldStyle;
+      let labelTemplate = "";
+      if (labelHideFlag) {
+        childFieldStyle = styleUtils_default.fieldStyle(this.options, childField, beforeField, !isEmptyLabel);
+        labelTemplate = isEmptyLabel ? `<span class="df-label empty ${childFieldStyle.labelClass}" style="${childFieldStyle.labelStyle}"></span>` : "";
+      } else {
+        childFieldStyle = styleUtils_default.fieldStyle(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="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>`);
+      if (groupElement) {
+        this.createField(childField, groupElement);
+        rowElement.append(groupElement);
+        if (childField.children) {
+          this.childTemplate(childField, childField.children ? childFieldStyle : parentFieldStyle);
+        }
+      }
+      if (!labelHideFlag) {
+        isEmptyLabel = true;
+      }
+      firstFlag = false;
+    }
+    field.$instance.addChildField(rowElement);
+  }
+  /**
+   * label template
+   *
+   * @param {FormField} field form field
+   * @returns {string} template string
+   */
+  getLabelTemplate(field) {
+    const requiredTemplate = field.required ? `<span class="required"></span>` : "";
+    const tooltipTemplate = isBlank(field.tooltip) ? "" : `<span class="df-tooltip">?<span class="tooltip">${field.tooltip}</span></span>`;
+    return `${field.label ?? ""} ${tooltipTemplate} ${requiredTemplate}`;
+  }
+  /**
+   * label 숨김 여부
+   *
+   * @param field formfield
+   * @returns
+   */
+  isLabelHide(field) {
+    return field.style?.labelHide || isUndefined(field.label);
+  }
+  checkHiddenField(field) {
+    if (isHiddenField(field)) {
+      this.fieldInfoMap.addField(field);
+      field.$instance = new field.$renderType(field, null, this.daraform);
+      return true;
+    }
+    return false;
+  }
+  /**
+   * add row file map
+   *
+   * @param {FormField} field
+   */
+  addRowFieldInfo(field) {
+    if (!isBlank(field.name) && this.fieldInfoMap.hasFieldName(field.name)) {
+      throw new Error(`Duplicate field name "${field.name}"`);
+    }
+    this.fieldInfoMap.addField(field);
+    this.addRowFields.push(field.$key);
+  }
+};
+
+// src/DaraForm.ts
+var defaultOptions = {
+  style: {
+    width: "100%",
+    labelWidth: 3,
+    valueWidth: 9,
+    position: "left-right"
+  },
+  mode: "new",
+  useTypeValue: true,
+  autoCreate: true,
+  notValidMessage: "This form is not valid.",
+  fields: []
+};
+var allInstance = {};
+var SEQ_ATTR_KEY = "data-form-uid";
+var DARA_FORM_SEQ = 0;
+var DaraForm = class _DaraForm {
+  constructor(formElement, options, message2) {
+    this.formValue = {};
+    /**
+     * change mode
+     *
+     * @param mode form_mode default new
+     */
+    this.changeMode = (mode) => {
+      this.options.mode = mode;
+      this.formElement.setAttribute("data-df-mode", mode);
+    };
+    /**
+     * 폼 데이터 reset
+     */
+    this.resetForm = () => {
+      const fieldMap = this.fieldInfoMap.getAllFieldInfo();
+      for (const seq in fieldMap) {
+        const fieldInfo = fieldMap[seq];
+        const renderInfo = fieldInfo.$instance;
+        if (renderInfo && typeof renderInfo.reset === "function") {
+          renderInfo.reset();
+        }
+      }
+      this.formValue = {};
+      this.conditionCheck();
+    };
+    /**
+     * field 값 reset
+     * @param fieldName 필드명
+     */
+    this.resetField = (fieldName) => {
+      this.fieldInfoMap.getFieldName(fieldName).$instance.reset();
+      this.formValue[fieldName] = "";
+      this.conditionCheck();
+    };
+    /**
+     * field 값 얻기
+     *
+     * @param fieldName  필드명
+     * @returns
+     */
+    this.getFieldValue = (fieldName) => {
+      const field = this.fieldInfoMap.getFieldName(fieldName);
+      if (field) {
+        return field.$instance.getValue();
+      }
+      return null;
+    };
+    /**
+     * 폼 필드 값 얻기
+     * @param isValid 폼 유효성 검사 여부 default:false|undefined true일경우 검사.
+     * @returns
+     */
+    this.getValue = (isValid) => {
+      return this.fieldInfoMap.getAllFieldValue(this.formValue, isValid);
+    };
+    this.getFormDataValue = (isValid) => {
+      return this.fieldInfoMap.getFormDataValue(this.formValue, isValid);
+    };
+    /**
+     * 폼 필드 value 셋팅
+     * @param values
+     */
+    this.setValue = (values, dataClear) => {
+      if (dataClear !== false) {
+        this.resetForm();
+      }
+      Object.keys(values).forEach((fieldName) => {
+        this._setFieldValue(fieldName, values[fieldName]);
+      });
+      this.conditionCheck();
+    };
+    this.setFieldValue = (fieldName, value) => {
+      this._setFieldValue(fieldName, value);
+      this.conditionCheck();
+    };
+    this.setFieldItems = (fieldName, values) => {
+      const field = this.fieldInfoMap.getFieldName(fieldName);
+      if (field) {
+        return field.$instance.setValueItems(values);
+      }
+    };
+    /**
+     * field 추가
+     *
+     * @param {FormField} field
+     */
+    this.addField = (field) => {
+      this.options.fields.push(field);
+      this.formTemplate.addRow(field);
+      this.conditionCheck();
+    };
+    /**
+     * field 제거
+     *
+     * @param {string} fieldName
+     */
+    this.removeField = (fieldName) => {
+      const element = this.getFieldElement(fieldName);
+      if (element != null) {
+        element.closest(".df-row")?.remove();
+      }
+      this.fieldInfoMap.removeFieldInfo(fieldName);
+    };
+    /**
+     * 폼 유효성 검증 여부
+     *
+     * @returns {boolean}
+     */
+    this.isValidForm = () => {
+      const result = this.validForm();
+      return result.length < 1;
+    };
+    /**
+     * 유효성 검증 폼 검증여부 리턴
+     *
+     * @returns {any[]}
+     */
+    this.validForm = () => {
+      let validResult = [];
+      let autoFocusFlag = this.options.autoFocus !== false;
+      let firstFlag = true;
+      const fieldMap = this.fieldInfoMap.getAllFieldInfo();
+      for (const fieldKey in fieldMap) {
+        const fieldInfo = fieldMap[fieldKey];
+        let fieldValid = this.fieldInfoMap.getFieldValidation(fieldInfo, autoFocusFlag);
+        if (fieldValid !== true) {
+          autoFocusFlag = false;
+          if (isGridType(fieldInfo)) {
+            validResult = validResult.concat(fieldValid);
+          } else {
+            if (firstFlag) {
+              this.validTabCheck(fieldInfo);
+              firstFlag = false;
+            }
+            validResult.push(fieldValid);
+          }
+        }
+      }
+      return validResult;
+    };
+    this.isValidField = (fieldName) => {
+      const fieldInfo = this.fieldInfoMap.getFieldName(fieldName);
+      if (isUndefined(fieldInfo)) {
+        throw new Error(`Field name [${fieldName}] not found`);
+      }
+      const renderInfo = fieldInfo.$instance;
+      if (renderInfo) {
+        return renderInfo.valid() === true;
+      }
+      return true;
+    };
+    /**
+     * 설정 옵션 얻기
+     */
+    this.getOptions = () => {
+      return this.options;
+    };
+    this.destroy = () => {
+      this.formElement.className = this.orginFormStyleClass;
+      this.formElement.replaceChildren();
+      for (const key in this) {
+        if (hasOwnProp(this, key)) {
+          delete this[key];
+          delete allInstance[this.selector];
+        }
+      }
+    };
+    /**
+     * 모든 field 얻기
+     */
+    this.getFields = () => {
+      return this.options.fields;
+    };
+    /**
+     * field setting
+     * @param fields
+     */
+    this.setFields = (fields) => {
+      this.options.fields = fields;
+      this.createForm(fields);
+    };
+    this.options = merge({}, defaultOptions, options);
+    Lanauage_default.set(message2);
+    if (formElement) {
+      this.orginFormStyleClass = formElement.className;
+      formElement.classList.add("daracl-form");
+      this.selector = `df_${++DARA_FORM_SEQ}`;
+      formElement.setAttribute("name", this.selector);
+      formElement.setAttribute(SEQ_ATTR_KEY, this.selector);
+      if (this.options.style.width) {
+        formElement.setAttribute("style", `width:${this.options.style.width};`);
+      }
+      this.formElement = formElement;
+      this.changeMode(this.options.mode ?? "new");
+      this.createForm(this.options.fields);
+      if (this.options.autoCreate !== false) {
+        allInstance[this.selector] = this;
+      }
+    } else {
+      throw new Error(`${formElement} form selector not found`);
+    }
+  }
+  static {
+    this.VERSION = `${APP_VERSION}`;
+  }
+  static create(formElement, options, message2) {
+    return new _DaraForm(formElement, options, message2);
+  }
+  static setMessage(message2) {
+    Lanauage_default.set(message2);
+  }
+  createForm(fields) {
+    this.fieldInfoMap = new FieldInfoMap(this.selector, this);
+    this.formTemplate = new FormTemplate(this, this.formElement, this.fieldInfoMap);
+    if (this.options.autoCreate === false) {
+      return;
+    }
+    fields.forEach((field) => {
+      this.formTemplate.addRow(field);
+    });
+    this.conditionCheck();
+    if (this.options.onMounted) {
+      this.options.onMounted.call(this);
+    }
+  }
+  /**
+   * 필드 element 얻기
+   *
+   * @param {string} fieldName
+   * @returns {*}
+   */
+  getFieldElement(fieldName) {
+    const field = this.fieldInfoMap.getFieldName(fieldName);
+    if (field?.$instance) {
+      return field.$instance.getElement();
+    }
+    return null;
+  }
+  getField(fieldName) {
+    return this.fieldInfoMap.getFieldName(fieldName);
+  }
+  _setFieldValue(fieldName, value) {
+    this.formValue[fieldName] = value;
+    const fieldInfo = this.fieldInfoMap.getFieldName(fieldName);
+    if (fieldInfo) {
+      fieldInfo.$instance.setValue(value);
+    }
+  }
+  validTabCheck(fieldInfo) {
+    if (fieldInfo.$parent) {
+      if (fieldInfo.$parent.renderType == "tab") {
+        fieldInfo.$parent.$instance.setActive(fieldInfo.$key);
+      }
+      this.validTabCheck(fieldInfo.$parent);
+    }
+  }
+  conditionCheck() {
+    this.fieldInfoMap.conditionCheck();
+  }
+  setFieldDisabled(fieldName, flag) {
+    const fieldInfo = this.fieldInfoMap.getFieldName(fieldName);
+    fieldInfo.$instance.setDisabled(flag);
+  }
+  /**
+   * 설명 추가
+   *
+   * @public
+   * @param {string} fieldName
+   * @param {string} desc
+   */
+  setFieldDescription(fieldName, desc) {
+    const fieldInfo = this.fieldInfoMap.getFieldName(fieldName);
+    fieldInfo.$instance.setDescription(desc);
+  }
+  static {
+    this.validator = {
+      string: (value, field) => {
+        return stringValidator(value, field);
+      },
+      number: (value, field) => {
+        return numberValidator(value, field);
+      },
+      regexp: (value, field) => {
+        let result = { name: field.name, constraint: [] };
+        return regexpValidator(value, field, result);
+      }
+    };
+  }
+  static instance(ele) {
+    let element;
+    if (isString(ele)) {
+      element = document.querySelector(ele);
+    } else {
+      element = ele;
+    }
+    element = element;
+    let selector = element.getAttribute(SEQ_ATTR_KEY);
+    if (isUndefined(selector) || isBlank(selector)) {
+      const keys = Object.keys(allInstance);
+      if (keys.length > 1) {
+        throw new Error(`selector empty : [${selector}]`);
+      }
+      selector = keys[0];
+      return allInstance[selector];
+    }
+  }
+  getFieldInfoMap() {
+    return this.fieldInfoMap;
+  }
+};
+
+// src/index.ts
+module.exports = DaraForm;
+//# sourceMappingURL=index.cjs.map