@daracl/form 0.0.16 → 0.0.18

package/dist/daracl.form.umd.js

@@ -0,0 +1,4477 @@
+(function(factory) {
+  typeof define === "function" && define.amd ? define(factory) : factory();
+})(function() {
+  "use strict";
+  function isArray$1(value) {
+    return Array.isArray(value);
+  }
+  function isNil(value) {
+    return value === null || value === void 0;
+  }
+  function isString$1(value) {
+    return typeof value === "string" || value instanceof String;
+  }
+  function isEmpty$1(value) {
+    if (isNil(value)) {
+      return true;
+    }
+    if (isString$1(value)) {
+      return value.trim() === "";
+    }
+    if (Array.isArray(value)) {
+      return value.length === 0;
+    }
+    if (typeof value === "object") {
+      return Object.keys(value).length === 0;
+    }
+    return false;
+  }
+  function isFunction$1(value) {
+    return typeof value === "function" || value instanceof Function;
+  }
+  function isNumeric(value, typeIgnore = false) {
+    if (typeIgnore === true) return !Number.isNaN(value);
+    return (typeof value === "number" || isString$1(value) && value.trim() !== "" && !isNaN(parseFloat(value))) && isFinite(Number(value));
+  }
+  function leftPad(str, len, ch = "0") {
+    return pad(str, len, ch, "l");
+  }
+  function leftPadClamp(str, len, ch = "0") {
+    return pad(str, len, ch, "l", true);
+  }
+  function pad(orginStr, size, ch, type = "l", clamp = false) {
+    let str = "";
+    if (isEmpty$1(orginStr)) {
+      str = "";
+    } else {
+      str = isString$1(orginStr) ? orginStr : `${orginStr}`;
+    }
+    const strLength = str.length;
+    if (strLength > size) {
+      return clamp ? str.slice(0, size) : str;
+    }
+    const len = size - strLength;
+    if (len < 1) return str;
+    const padStr = ch.repeat(len);
+    return type === "l" ? padStr + str : str + padStr;
+  }
+  const xssFilter = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  };
+  const replaceXss = (inputText) => {
+    let returnText = inputText;
+    if (returnText) {
+      Object.keys(xssFilter).forEach((key) => {
+        returnText = returnText.replaceAll(key, xssFilter[key]);
+      });
+    }
+    return returnText;
+  };
+  const hasOwnProp = (obj, key) => {
+    return obj.hasOwnProperty(key);
+  };
+  const isBlank = (value) => {
+    if (value === null) return true;
+    if (value === "") return true;
+    if (typeof value === "undefined") return true;
+    if (typeof value === "string" && (value === "" || value.replace(/\s/g, "") === "")) return true;
+    return false;
+  };
+  const isUndefined = (value) => {
+    return typeof value === "undefined";
+  };
+  const isFunction = (value) => {
+    return typeof value === "function";
+  };
+  const isString = (value) => {
+    return typeof value === "string";
+  };
+  const isNumber = (value) => {
+    if (isBlank(value)) {
+      return false;
+    }
+    value = +value;
+    return !isNaN(value);
+  };
+  const isArray = (value) => {
+    return isArray$1(value);
+  };
+  const isEmpty = (value) => isUndefined(value) || value == null;
+  const isTabType = (field) => {
+    return field && field.renderType === "tab";
+  };
+  const isGridType = (field) => {
+    return field && field.renderType === "grid";
+  };
+  const replaceXssField = (field) => {
+    field.$xssName = getXssFieldName(field);
+    field.label = replaceXss(field.label);
+    return field;
+  };
+  const ignoreValueField = (field) => {
+    return isGridType(field.$parent) || isTabType(field.$parent);
+  };
+  const 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;
+  };
+  const getHashCode = (str) => {
+    let hash = 0;
+    if (str.length == 0) return hash;
+    for (let i = 0; i < str.length; i++) {
+      let tmpChar = str.charCodeAt(i);
+      hash = (hash << 5) - hash + tmpChar;
+      hash = hash & hash;
+    }
+    return String(hash).replaceAll(/-/g, "_");
+  };
+  const isHiddenField = (field) => {
+    if (field.renderType === "hidden") {
+      return true;
+    }
+    return false;
+  };
+  const templateToElement = (htmlTemplate) => {
+    const template = document.createElement("template");
+    template.innerHTML = htmlTemplate;
+    return template.content.firstElementChild;
+  };
+  function isPlainObject(obj) {
+    if (typeof obj !== "object" || obj === null) {
+      return false;
+    }
+    let proto = obj;
+    while (Object.getPrototypeOf(proto) !== null) {
+      proto = Object.getPrototypeOf(proto);
+    }
+    return Object.getPrototypeOf(obj) === proto;
+  }
+  function isObject(value) {
+    return typeof value === "object" && value !== null && !isArray(value);
+  }
+  function isDate(value) {
+    return value instanceof Date && !isNaN(value.valueOf());
+  }
+  const merge = (...value) => {
+    let reval = value[0];
+    if (!isPlainObject(reval) || isEmpty(reval)) {
+      return reval;
+    }
+    let i = 1;
+    if (Object.keys(reval).length > 0) {
+      i = 0;
+      reval = isArray(reval) ? [] : {};
+    }
+    const argLen = value.length;
+    for (; i < argLen; i += 1) {
+      cloneDeep(reval, value[i]);
+    }
+    return reval;
+  };
+  function cloneDeep(dst, src) {
+    if (isObject(src)) {
+      return cloneObjectDeep(dst, src);
+    }
+    if (isArray(src)) {
+      return cloneArrayDeep(dst, src);
+    }
+    if (isDate(src)) {
+      return new src.constructor(src);
+    }
+    return src;
+  }
+  function cloneObjectDeep(dst, src) {
+    if (isFunction(src)) {
+      return src;
+    }
+    for (const key of Object.keys(src)) {
+      const val = src[key];
+      if (isUndefined(val)) {
+        continue;
+      }
+      if (val === null) {
+        dst[key] = val;
+      } else if (isFunction(val)) {
+        dst[key] = val;
+      } else if (isEmpty(dst[key])) {
+        dst[key] = cloneDeep(isArray(val) ? [] : {}, val);
+      } else if (!isObject(val)) {
+        dst[key] = val;
+      } else {
+        cloneDeep(dst[key], val);
+      }
+    }
+    return dst;
+  }
+  function cloneArrayDeep(dst, src) {
+    const isObj = isPlainObject(dst);
+    for (let i = 0; i < src.length; i += 1) {
+      const val = src[i];
+      let newVal;
+      if (val == null) {
+        newVal = val;
+      } else {
+        newVal = cloneDeep(isArray(val) ? [] : {}, val);
+      }
+      if (isObj) {
+        dst[i] = newVal;
+      } else {
+        dst.push(newVal);
+      }
+    }
+    return dst;
+  }
+  class Render {
+    constructor(form, field, rowElement) {
+      var _a;
+      this.enableView = true;
+      this.daraForm = form;
+      this.field = field;
+      this.rowElement = rowElement;
+      this.createField();
+      if (field.tooltip) (_a = rowElement.querySelector(".df-tooltip")) == null ? void 0 : _a.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) {
+      var _a;
+      (_a = this.rowElement.querySelector(".df-field-container")) == null ? void 0 : _a.append(element);
+    }
+    static isDataRender() {
+      return true;
+    }
+    static isChildrenCreate() {
+      return true;
+    }
+    getForm() {
+      return this.daraForm;
+    }
+    setValueItems(value) {
+    }
+    static getDescriptionTemplate(field) {
+      const classNames = field.descriptionClass ? replaceXss(field.descriptionClass) : "";
+      const style = field.descriptionStyle ? 'style="' + replaceXss(field.descriptionStyle) + '"' : "";
+      return field.description ? `<div class="df-description ${classNames}" ${style}>${field.description}</div>` : "";
+    }
+    changeEventCall(field, e, rederInfo, fieldValue) {
+      var _a;
+      if (field.onChange) {
+        let changeInfo = {
+          field,
+          evt: e,
+          oldValue: field.$value,
+          value: fieldValue
+        };
+        if ((_a = field.listItem) == null ? void 0 : _a.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) {
+      var _a;
+      const descEle = this.rowElement.querySelector(".df-description");
+      if (descEle) {
+        descEle.textContent = desc;
+      } else {
+        const fieldEle = this.rowElement.querySelector(".df-field");
+        if (fieldEle) {
+          const parser2 = new DOMParser();
+          this.field.description = desc;
+          const descEle2 = parser2.parseFromString(Render.getDescriptionTemplate(this.field), "text/html").querySelector(".df-description");
+          if (descEle2) (_a = fieldEle.parentNode) == null ? void 0 : _a.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) {
+      var _a;
+      return ((_a = field.listItem) == null ? void 0 : _a.valueField) ? field.listItem.valueField : "value";
+    }
+    static valuesLabelKey(field) {
+      var _a;
+      return ((_a = field.listItem) == null ? void 0 : _a.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] || "";
+    }
+  }
+  const 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@$!%*#?&]/
+  };
+  const 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;
+  };
+  const 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;
+  };
+  const 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;
+  };
+  const invalidMessage = (field, rowElement, validResult) => {
+    if (validResult === true) {
+      rowElement.classList.remove("invalid");
+      if (!rowElement.classList.contains("valid")) {
+        rowElement.classList.add("valid");
+      }
+      const helpMessageElement = rowElement.querySelector(".df-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 = Language$1.validMessage(field, validResult);
+      if (validResult.message) {
+        message2.push(validResult.message);
+      }
+      const helpMessageElement = rowElement.querySelector(".df-help-message");
+      if (helpMessageElement && message2.length > 0) {
+        const msgHtml = [];
+        message2.forEach((item) => {
+          msgHtml.push(`<div>${item}</div>`);
+        });
+        helpMessageElement.innerHTML = msgHtml.join("");
+      }
+    }
+  };
+  const resetRowElementStyleClass = (rowElement) => {
+    rowElement.classList.remove("invalid");
+    rowElement.classList.remove("valid");
+  };
+  const inputEvent = (field, element, renderInfo) => {
+    element.addEventListener("input", (e) => {
+      customChangeEventCall(field, e, renderInfo, renderInfo.getValue());
+      renderInfo.valid();
+    });
+  };
+  const 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();
+    });
+  };
+  const dropdownChangeEvent = (field, element, renderInfo) => {
+    element.addEventListener("change", (e) => {
+      customChangeEventCall(field, e, renderInfo, renderInfo.getValue());
+      renderInfo.valid();
+    });
+  };
+  const customChangeEventCall = (field, e, renderInfo, value) => {
+    renderInfo.changeEventCall(field, e, renderInfo, value);
+  };
+  class NumberRender 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="df-form-field df-number df-help-icon" />
+        </div> 
+        ${Render.getDescriptionTemplate(field)}
+        <div class="df-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;
+    }
+  }
+  const 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;
+  };
+  class TextAreaRender extends Render {
+    constructor(field, rowElement, daraForm) {
+      super(daraForm, field, rowElement);
+      this.mounted();
+      this.setDefaultOption();
+      this.setDefaultInfo();
+    }
+    mounted() {
+      inputEvent(this.field, this.element, this);
+    }
+    createField() {
+      var _a;
+      const field = this.field;
+      const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+      let rows = (_a = field.rendererOptions) == null ? void 0 : _a.rows;
+      rows = +rows > 0 ? rows : 3;
+      fieldContainerElement.innerHTML = `
+        <div class="df-field">
+            <textarea name="${field.$xssName}" rows="${rows}" class="df-form-field df-textarea df-help-icon"></textarea>
+        </div> 
+        ${Render.getDescriptionTemplate(field)}
+        <div class="df-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;
+    }
+  }
+  class DropdownRender extends Render {
+    constructor(field, rowElement, daraForm) {
+      var _a, _b, _c, _d, _e;
+      super(daraForm, field, rowElement);
+      let initDefaultValue = "";
+      if (!isUndefined(field.defaultValue)) {
+        initDefaultValue = field.defaultValue;
+      }
+      const valueKey = DropdownRender.valuesValueKey(field);
+      let initDefaultValueFlag = false;
+      (_b = (_a = this.field.listItem) == null ? void 0 : _a.list) == null ? void 0 : _b.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 (((_c = field.rendererOptions) == null ? void 0 : _c.disableDefaultOption) === true) {
+          this.defaultSelected = ((_e = (_d = this.field.listItem) == null ? void 0 : _d.list) == null ? void 0 : _e.length) > 0 ? this.field.listItem.list[0][valueKey] || "" : "";
+        }
+      }
+      if (isUndefined(this.defaultSelected)) {
+        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="df-form-field df-dropdown">
+          ${this.dropdownValuesTemplate(field)}
+          </select> <i class="df-help-icon"></i></div>
+                ${Render.getDescriptionTemplate(field)}
+      <div class="df-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) {
+      var _a, _b, _c;
+      const labelKey = Render.valuesLabelKey(field);
+      const valueKey = Render.valuesValueKey(field);
+      let template = "";
+      if (((_a = field.rendererOptions) == null ? void 0 : _a.disableDefaultOption) !== true) {
+        template += `<option value="">${Language$1.getMessage("selection")}</option>`;
+      }
+      (_c = (_b = field.listItem) == null ? void 0 : _b.list) == null ? void 0 : _c.forEach((val) => {
+        const attr = `${val.selected ? "selected" : ""} ${val.disabled ? "disabled" : ""}`;
+        if (isUndefined(val[valueKey]) && val.label) {
+          template += `<option value="${val.value || ""}" ${attr}>${val.label}</option>`;
+        } else {
+          template += `<option value="${val[valueKey]}" ${attr}>${Render.valuesLabelValue(labelKey, val)}</option>`;
+        }
+      });
+      return template;
+    }
+  }
+  class TextRender 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="df-form-field df-text df-help-icon" />
+      </div>
+      ${Render.getDescriptionTemplate(field)}
+      <div class="df-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;
+    }
+  }
+  function resolveFieldStyle(formOptions, field, beforeField, isLabelHide) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const fieldStyle = {
+      rowStyleClass: orientationClassName(field.orientation),
+      fieldClass: "",
+      fieldStyle: "",
+      labelClass: "",
+      labelStyle: "",
+      labelAlignClass: "",
+      valueClass: "",
+      valueStyle: "",
+      tabAlignClass: ""
+    };
+    const defaultLabelWidth = ((_a = beforeField == null ? void 0 : beforeField.style) == null ? void 0 : _a.labelWidth) ?? formOptions.style.labelWidth ?? "3";
+    let defaultValueWidth = ((_b = beforeField == null ? void 0 : beforeField.style) == null ? void 0 : _b.valueWidth) ?? formOptions.style.valueWidth ?? "9";
+    const position = ((_c = beforeField == null ? void 0 : beforeField.style) == null ? void 0 : _c.position) ?? formOptions.style.position;
+    const width = (_d = field.style) == null ? void 0 : _d.width;
+    const positionArr = FIELD_POSITION_STYLE[(_e = field.style) == null ? void 0 : _e.position] ?? FIELD_POSITION_STYLE[position] ?? FIELD_POSITION_STYLE.top;
+    fieldStyle.fieldClass = `${positionArr[0] ? "df-" + positionArr[0] : ""} ${((_f = field.style) == null ? void 0 : _f.customClass) || ""}`;
+    if (width) {
+      if (isNumber(width)) {
+        fieldStyle.fieldClass += isNumber(width) ? ` df-col-xs-${width}` : "";
+      } else {
+        fieldStyle.fieldStyle = isNumber(width) ? "" : `width:${width};`;
+      }
+    }
+    fieldStyle.tabAlignClass = "df-tab-al-" + (["right", "center"].includes((_g = field.style) == null ? void 0 : _g.tabAlign) ? field.style.tabAlign : "left");
+    const labelWidth = ((_h = field.style) == null ? void 0 : _h.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 = `df-col-xs-${labelWidthValue}`;
+        fieldStyle.valueClass = fieldStyle.labelStyle ? "df-col-full" : `df-col-xs-${defaultValueWidth}`;
+      } else {
+        fieldStyle.labelStyle = `width:${labelWidth};`;
+      }
+    }
+    const valueWidth = ((_i = field.style) == null ? void 0 : _i.valueWidth) || defaultValueWidth;
+    if (isLabelHide && !["left", "right"].includes(positionArr[0])) {
+      fieldStyle.valueClass = "df-col-full";
+    } else {
+      if (valueWidth && !["top", "bottom"].includes(positionArr[0])) {
+        if (isNumber(valueWidth)) {
+          fieldStyle.valueClass = fieldStyle.labelStyle ? "df-col-full" : `df-col-xs-${valueWidth}`;
+        } else {
+          fieldStyle.valueStyle = `width:${valueWidth};`;
+        }
+      } else {
+        fieldStyle.valueClass = fieldStyle.labelStyle ? "df-col-full" : "";
+      }
+    }
+    fieldStyle.fieldClass = spaceReplace(fieldStyle.fieldClass);
+    fieldStyle.labelClass = spaceReplace(fieldStyle.labelClass);
+    fieldStyle.valueClass = spaceReplace(fieldStyle.valueClass);
+    return fieldStyle;
+  }
+  function orientationClassName(orientation) {
+    return orientation === "horizontal" ? "df-horizontal" : "df-vertical";
+  }
+  function spaceReplace(str) {
+    return str.replace(/\s+/g, " ").trim();
+  }
+  class CheckboxRender extends Render {
+    constructor(field, rowElement, daraForm) {
+      var _a, _b;
+      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;
+      (_b = (_a = this.field.listItem) == null ? void 0 : _a.list) == null ? void 0 : _b.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() {
+      var _a, _b;
+      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="df-field-group">`);
+      (_b = (_a = field.listItem) == null ? void 0 : _a.list) == null ? void 0 : _b.forEach((val) => {
+        const checkVal = val[valueKey];
+        templates.push(`
+          <span class="df-field-item ${orientationClassName(field.listItem.orientation ?? OrientationMap.horizontal)}">
+              <label>
+                  <input type="checkbox" name="${fieldName}" value="${checkVal ? replaceXss(checkVal) : ""}" class="df-form-field df-checkbox" ${val.selected ? "checked" : ""} ${val.disabled ? "disabled" : ""}  />
+                  ${Render.valuesLabelValue(labelKey, val)}
+              </label>
+          </span>
+      `);
+      });
+      templates.push(`<i class="df-form-icon df-help-icon"></i></div></div> ${Render.getDescriptionTemplate(field)}<div class="df-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 == null ? void 0 : 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 (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() {
+      var _a, _b;
+      if (((_b = (_a = this.field.listItem) == null ? void 0 : _a.list) == null ? void 0 : _b.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;
+    }
+  }
+  class RadioRender extends Render {
+    constructor(field, rowElement, daraForm) {
+      var _a, _b, _c, _d, _e;
+      super(daraForm, field, rowElement);
+      this.defaultCheckValue = "";
+      let initDefaultValue = [];
+      if (!isUndefined(field.defaultValue)) {
+        initDefaultValue = field.defaultValue;
+      }
+      const valueKey = RadioRender.valuesValueKey(field);
+      let initDefaultValueFlag = false;
+      (_b = (_a = this.field.listItem) == null ? void 0 : _a.list) == null ? void 0 : _b.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 = ((_d = (_c = this.field.listItem) == null ? void 0 : _c.list) == null ? void 0 : _d.length) > 0 ? (_e = this.field.listItem) == null ? void 0 : _e.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() {
+      var _a, _b;
+      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="df-field-group">`);
+      (_b = (_a = field.listItem) == null ? void 0 : _a.list) == null ? void 0 : _b.forEach((val) => {
+        const radioVal = val[valueKey];
+        templates.push(
+          `<span class="df-field-item ${orientationClassName(field.orientation ?? OrientationMap.horizontal)}">
+        <label>
+            <input type="radio" name="${fieldName}" value="${radioVal}" class="df-form-field df-radio" ${val.selected ? "checked" : ""} ${val.disabled ? "disabled" : ""}/>
+            ${Render.valuesLabelValue(labelKey, val)}
+        </label>
+        </span>
+                `
+        );
+      });
+      templates.push(`<i class="df-form-icon df-help-icon"></i></div></div>
+        ${Render.getDescriptionTemplate(field)}
+     <div class="df-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() {
+      var _a;
+      return (_a = this.rowElement.querySelector(`[name="${this.field.$xssName}"]:checked`)) == null ? void 0 : _a.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;
+    }
+  }
+  class PasswordRender 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="df-form-field df-password df-help-icon" autocomplete="off" />
+        </div>
+        ${Render.getDescriptionTemplate(field)}
+        <div class="df-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;
+    }
+  }
+  const 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;
+  };
+  class FileRender extends Render {
+    constructor(field, rowElement, daraForm) {
+      var _a;
+      super(daraForm, field, rowElement);
+      this.removeIds = [];
+      this.uploadFiles = {};
+      this.fileList = [];
+      this.fileSeq = 0;
+      this.element = rowElement.querySelector(`[name="${field.$xssName}"]`);
+      this.fileList = ((_a = field.listItem) == null ? void 0 : _a.list) || [];
+      this.mounted();
+      this.setDefaultOption();
+    }
+    mounted() {
+      this.element.addEventListener("change", (e) => {
+        var _a;
+        const files = (_a = e.target) == null ? void 0 : _a.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="df-file-wrapper">
+        <label class="df-file-label">
+          <input type="file" name="${field.$xssName}" class="df-form-field df-file" multiple />
+          ${Language$1.getMessage("fileButton")}
+        </label>
+        <i class="df-form-icon df-help-icon"></i>
+      </span>
+    </div>
+    ${Render.getDescriptionTemplate(field)}
+    <div class="df-file-list"></div>
+    <div class="df-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(".df-file-list");
+      if (fileListElement) {
+        if (initFlag === true) {
+          fileListElement.innerHTML = "";
+        }
+        const fileTemplateHtml = [];
+        fileList.forEach((file) => {
+          fileTemplateHtml.push(`
+        <div class="df-file-item" data-seq="${file.$seq}">
+          ${file.fileId ? '<span class="df-file-icon df-file-download"></span>' : '<span class="df-file-icon"></span>'} <span class="df-file-icon df-file-remove"></span>
+          <span class="df-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}"] .df-file-download`);
+      if (ele) {
+        ele.addEventListener("click", (evt) => {
+          const fileItemElement = evt.target.closest(".df-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}"] .df-file-remove`);
+      if (ele) {
+        ele.addEventListener("click", (evt) => {
+          const fileItemElement = evt.target.closest(".df-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$1(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;
+    }
+  }
+  class CustomRender 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="df-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);
+      }
+    }
+  }
+  class GroupRender 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() {
+    }
+  }
+  class HiddenRender 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;
+    }
+  }
+  class ButtonRender extends Render {
+    constructor(field, rowElement, daraForm) {
+      super(daraForm, field, rowElement);
+      this.mounted();
+      this.setDefaultOption();
+    }
+    mounted() {
+      var _a;
+      (_a = this.rowElement.querySelector(`#${this.field.$key}`)) == null ? void 0 : _a.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;
+    }
+  }
+  class RangeRender extends Render {
+    constructor(field, rowElement, daraForm) {
+      super(daraForm, field, rowElement);
+      this.rangeNumElement = rowElement.querySelector(".df-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="df-range-num">${field.defaultValue ? field.defaultValue : 0}</span>
+            <input type="range" name="${field.$xssName}" class="df-form-field df-range df-help-icon" min="${field.rule.minimum}" max="${field.rule.maximum}"/>
+        </div> 
+        ${Render.getDescriptionTemplate(field)}
+        <div class="df-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;
+    }
+  }
+  let localeMessage$1 = {
+    year: "Year",
+    month: "Month",
+    day: "Day",
+    am: "AM",
+    pm: "PM",
+    today: "Today",
+    ok: "Ok",
+    months: {
+      full: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+      abbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+    },
+    weeks: {
+      full: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+      abbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
+    }
+  };
+  let Language$2 = class Language {
+    constructor() {
+      this.lang = localeMessage$1;
+    }
+    setDefaultMessage(lang) {
+      localeMessage$1 = Object.assign(localeMessage$1, lang);
+    }
+    /**
+     * 다국어 메시지 등록
+     *
+     * @public
+     * @param {?Message} [lang] 둥록할 메시지
+     */
+    set(lang) {
+      this.lang = Object.assign({}, localeMessage$1, lang);
+    }
+    /**
+     * 메시지 얻기
+     *
+     * @public
+     * @param {string} messageKey 메시지 키
+     * @returns {*}
+     */
+    getMessage(messageKey) {
+      return this.lang[messageKey];
+    }
+    getMonthsMessage(idx, mode = "abbr") {
+      return this.lang.months[mode][idx] || "";
+    }
+    getWeeksMessage(idx, mode = "abbr") {
+      return this.lang.weeks[mode][idx] || "";
+    }
+    getMonthsIdx(val, mode = "abbr") {
+      return mode == "full" ? this.lang.months.full.indexOf(val) : this.lang.months.abbr.indexOf(val);
+    }
+    getWeeksIdx(val, mode = "abbr") {
+      return mode == "full" ? this.lang.weeks.full.indexOf(val) : this.lang.weeks.abbr.indexOf(val);
+    }
+  };
+  const Lanauage = new Language$2();
+  const EXPRESSIONS_FORMAT = ["YY", "YYYY", "MMMM", "MMM", "MM", "M", "dddd", "ddd", "dd", "d", "DD", "D", "S", "HH", "H", "hh", "h", "mm", "m", "ss", "s", "SSS", "zzzz", "zzz", "zz", "z", "a", "A"];
+  let MAX_CHAR_LENGTH = 0;
+  let DEFAULT_FORMAT = {
+    year: "YYYY",
+    month: "YYYY-MM",
+    date: "YYYY-MM-DD",
+    time: "HH:mm",
+    datetime: "YYYY-MM-DD HH:mm"
+  };
+  const DAY_STYLE_CLASS = ["ddtp-sun", "ddtp-mon", "ddtp-tue", "ddtp-wed", "ddtp-thu", "ddtp-fri", "ddtp-sat"];
+  var DateViewMode = /* @__PURE__ */ ((DateViewMode2) => {
+    DateViewMode2["year"] = "year";
+    DateViewMode2["month"] = "month";
+    DateViewMode2["date"] = "date";
+    DateViewMode2["datetime"] = "datetime";
+    DateViewMode2["time"] = "time";
+    return DateViewMode2;
+  })(DateViewMode || {});
+  EXPRESSIONS_FORMAT.forEach((item) => {
+    MAX_CHAR_LENGTH = Math.max(item.length, MAX_CHAR_LENGTH);
+  });
+  const format = (date, format2) => {
+    format2 = format2 || "YYYY-MM-DD";
+    const len = format2.length;
+    let result = [];
+    for (let i = 0; i < len; ) {
+      let minLen = Math.min(MAX_CHAR_LENGTH, len - i);
+      let j = minLen;
+      for (; j > 0; j--) {
+        const v = format2.substring(i, i + j);
+        if (EXPRESSIONS_FORMAT.includes(v)) {
+          try {
+            result.push(expressionsFunction$1[v](date));
+          } catch (e) {
+            console.log(EXPRESSIONS_FORMAT.includes(v), v, e);
+          }
+          break;
+        }
+      }
+      if (j < 1) {
+        result.push(format2.substring(i, i + 1));
+        i += 1;
+      } else {
+        i += j;
+      }
+    }
+    return result.join("");
+  };
+  const expressionsFunction$1 = {
+    YY: (date) => {
+      return String(date.getFullYear()).slice(-2);
+    },
+    YYYY: (date) => {
+      return String(date.getFullYear());
+    },
+    M: (date) => {
+      return String(date.getMonth() + 1);
+    },
+    MM: (date) => {
+      return leftPad(date.getMonth() + 1, 2);
+    },
+    MMM: (date) => {
+      return Lanauage.getMonthsMessage(date.getMonth());
+    },
+    MMMM: (date) => {
+      return Lanauage.getMonthsMessage(date.getMonth(), "full");
+    },
+    D: (date) => {
+      return String(date.getDate());
+    },
+    DD: (date) => {
+      return leftPad(date.getDate(), 2);
+    },
+    d: (date) => {
+      return String(date.getDate());
+    },
+    dd: (date) => {
+      return leftPad(date.getDate(), 2);
+    },
+    ddd: (date) => {
+      return Lanauage.getWeeksMessage(date.getDay());
+    },
+    dddd: (date) => {
+      return Lanauage.getWeeksMessage(date.getDay(), "full");
+    },
+    H: (date) => {
+      return String(date.getHours());
+    },
+    HH: (date) => {
+      return leftPad(date.getHours(), 2);
+    },
+    h: (date) => {
+      return getH(date);
+    },
+    hh: (date) => {
+      return leftPad(getH(date), 2);
+    },
+    a: (date) => {
+      return String(date.getFullYear()).slice(-2);
+    },
+    A: (date) => {
+      return getMeridiem(date);
+    },
+    m: (date) => {
+      return String(date.getMinutes());
+    },
+    mm: (date) => {
+      return leftPad(date.getMinutes(), 2);
+    },
+    s: (date) => {
+      return String(date.getSeconds());
+    },
+    ss: (date) => {
+      return leftPad(date.getSeconds(), 2);
+    },
+    SSS: (date) => {
+      return leftPad(date.getMilliseconds(), 3);
+    }
+  };
+  function getH(date) {
+    let hour = date.getHours();
+    if (hour > 12) {
+      hour -= 12;
+    } else if (hour < 1) {
+      hour = 12;
+    }
+    return hour;
+  }
+  function getMeridiem(date, isUpper, isShort) {
+    const hour = date.getHours();
+    let m = hour < 12 ? "am" : "pm";
+    m = Lanauage.getMessage(m);
+    m = m.toUpperCase();
+    return m;
+  }
+  const parser = (dateStr, format2) => {
+    if (dateStr.length > 1e3) {
+      return null;
+    }
+    format2 = format2 || DEFAULT_FORMAT.date;
+    const dateInfo = {
+      year: (/* @__PURE__ */ new Date()).getFullYear(),
+      month: 0,
+      day: 1,
+      hour: 0,
+      minute: 0,
+      second: 0,
+      millisecond: 0,
+      isPm: false,
+      isH: false,
+      charIdx: 0
+    };
+    const len = format2.length;
+    let startIdx = 0;
+    for (let i = 0; i < len; ) {
+      let minLen = Math.min(MAX_CHAR_LENGTH, len - i);
+      let j = minLen;
+      for (; j > 0; j--) {
+        const v = format2.substring(i, i + j);
+        if (EXPRESSIONS_FORMAT.includes(v)) {
+          const expInfo = expressionsFunction[v];
+          const val = matchFind(dateStr.substring(startIdx), expInfo[0]);
+          expInfo[1](dateInfo, val);
+          startIdx += val.length;
+          break;
+        }
+      }
+      if (j < 1) {
+        i += 1;
+        startIdx += 1;
+      } else {
+        i += j;
+      }
+    }
+    if (dateInfo.hour != null && !dateInfo.isH) {
+      if (dateInfo.isPm && +dateInfo.hour !== 12) {
+        dateInfo.hour = +dateInfo.hour + 12;
+      } else if (!dateInfo.isPm && +dateInfo.hour === 12) {
+        dateInfo.hour = 0;
+      }
+    }
+    let date;
+    date = new Date(dateInfo.year, dateInfo.month, dateInfo.day, dateInfo.hour, dateInfo.minute, dateInfo.second, dateInfo.millisecond);
+    return date;
+  };
+  const matchFind = (val, regexp2) => {
+    const match = regexp2.exec(val);
+    return match == null ? "" : match[0];
+  };
+  const digitsCheck = {
+    twoOptional: /\d\d?/,
+    two: /\d\d/,
+    three: /\d{3}/,
+    four: /\d{4}/
+  };
+  const word = /[^\s]+/;
+  const expressionsFunction = {
+    YY: [
+      digitsCheck["two"],
+      (dateInfo, val) => {
+        dateInfo.year = +(("" + (/* @__PURE__ */ new Date()).getFullYear()).substring(0, 2) + val);
+        return dateInfo;
+      }
+    ],
+    YYYY: [
+      digitsCheck["four"],
+      (dateInfo, val) => {
+        dateInfo.year = +val;
+        return dateInfo;
+      }
+    ],
+    M: [
+      digitsCheck["twoOptional"],
+      (dateInfo, val) => {
+        dateInfo.month = +val - 1;
+        return dateInfo;
+      }
+    ],
+    MM: [
+      digitsCheck["two"],
+      (dateInfo, val) => {
+        dateInfo.month = +val - 1;
+        return dateInfo;
+      }
+    ],
+    MMM: [
+      word,
+      (dateInfo, val) => {
+        dateInfo.month = Lanauage.getMonthsIdx(val, "abbr");
+        return dateInfo;
+      }
+    ],
+    MMMM: [
+      word,
+      (dateInfo, val) => {
+        dateInfo.month = Lanauage.getMonthsIdx(val, "full");
+        return dateInfo;
+      }
+    ],
+    D: [
+      digitsCheck["twoOptional"],
+      (dateInfo, val) => {
+        dateInfo.day = +val;
+        return dateInfo;
+      }
+    ],
+    DD: [
+      digitsCheck["two"],
+      (dateInfo, val) => {
+        dateInfo.day = +val;
+        return dateInfo;
+      }
+    ],
+    d: [
+      digitsCheck["twoOptional"],
+      (dateInfo, val) => {
+        dateInfo.day = +val;
+        return dateInfo;
+      }
+    ],
+    dd: [
+      digitsCheck["two"],
+      (dateInfo, val) => {
+        dateInfo.day = +val;
+        return dateInfo;
+      }
+    ],
+    ddd: [
+      word,
+      (dateInfo, val) => {
+        return dateInfo;
+      }
+    ],
+    dddd: [
+      word,
+      (dateInfo, val) => {
+        return dateInfo;
+      }
+    ],
+    H: [
+      digitsCheck["twoOptional"],
+      (dateInfo, val) => {
+        dateInfo.hour = +val;
+        dateInfo.isH = true;
+        return dateInfo;
+      }
+    ],
+    HH: [
+      digitsCheck["two"],
+      (dateInfo, val) => {
+        dateInfo.hour = +val;
+        dateInfo.isH = true;
+        return dateInfo;
+      }
+    ],
+    h: [
+      digitsCheck["twoOptional"],
+      (dateInfo, val) => {
+        dateInfo.hour = +val;
+        return dateInfo;
+      }
+    ],
+    hh: [
+      digitsCheck["two"],
+      (dateInfo, val) => {
+        dateInfo.hour = +val;
+        return dateInfo;
+      }
+    ],
+    a: [
+      word,
+      (dateInfo, val) => {
+        if (Lanauage.getMessage("am") != val.toLowerCase()) {
+          dateInfo.isPm = true;
+        }
+        return dateInfo;
+      }
+    ],
+    A: [
+      word,
+      (dateInfo, val) => {
+        if (Lanauage.getMessage("am") != val.toLowerCase()) {
+          dateInfo.isPm = true;
+        }
+        return dateInfo;
+      }
+    ],
+    m: [
+      digitsCheck["twoOptional"],
+      (dateInfo, val) => {
+        dateInfo.minute = +val;
+        return dateInfo;
+      }
+    ],
+    mm: [
+      digitsCheck["two"],
+      (dateInfo, val) => {
+        dateInfo.minute = +val;
+        return dateInfo;
+      }
+    ],
+    s: [
+      digitsCheck["twoOptional"],
+      (dateInfo, val) => {
+        dateInfo.second = +val;
+        return dateInfo;
+      }
+    ],
+    ss: [
+      digitsCheck["two"],
+      (dateInfo, val) => {
+        dateInfo.second = +val;
+        return dateInfo;
+      }
+    ],
+    SSS: [
+      digitsCheck["three"],
+      (dateInfo, val) => {
+        dateInfo.millisecond = +val;
+        return dateInfo;
+      }
+    ]
+  };
+  function closestElement(el, checkElement) {
+    let currentEl = el;
+    while (currentEl) {
+      if (currentEl == checkElement) {
+        return true;
+      }
+      currentEl = currentEl.parentElement;
+    }
+    return false;
+  }
+  class DaraDate {
+    constructor(dt) {
+      this.date = dt;
+    }
+    setYear(num) {
+      this.date.setFullYear(num);
+      return this;
+    }
+    addYear(num) {
+      this.date.setFullYear(this.date.getFullYear() + num);
+      return this;
+    }
+    addMonth(num) {
+      this.date.setMonth(this.date.getMonth() + num);
+      return this;
+    }
+    setMonth(num) {
+      this.date.setMonth(num);
+      return this;
+    }
+    setDate(num) {
+      this.date.setDate(num);
+      return this;
+    }
+    addDate(num) {
+      this.date.setDate(this.date.getDate() + num);
+      return this;
+    }
+    addWeek(num) {
+      this.date.setDate(this.date.getDate() + num * 7);
+      return this;
+    }
+    addHours(num) {
+      this.date.setHours(this.date.getHours() + num);
+      return this;
+    }
+    setHour(num) {
+      this.date.setHours(num);
+      return this;
+    }
+    addMinutes(num) {
+      this.date.setMinutes(this.date.getMinutes() + num);
+      return this;
+    }
+    setMinutes(num) {
+      this.date.setMinutes(num);
+      return this;
+    }
+    addSeconds(num) {
+      this.date.setSeconds(this.date.getSeconds() + num);
+      return this;
+    }
+    addMilliseconds(num) {
+      this.date.setMilliseconds(this.date.getMilliseconds() + num);
+      return this;
+    }
+    compare(date) {
+      if (this.date.valueOf() < date.valueOf()) {
+        return -1;
+      } else if (this.date.valueOf() > date.valueOf()) {
+        return 1;
+      }
+      return 0;
+    }
+    getYear() {
+      return this.date.getFullYear();
+    }
+    getMonth() {
+      return this.date.getMonth() + 1;
+    }
+    getDate() {
+      return this.date.getDate();
+    }
+    getDay() {
+      return this.date.getDay();
+    }
+    getTime() {
+      return this.date.getTime();
+    }
+    format(format$1) {
+      return format(this.date, format$1);
+    }
+    clone() {
+      return new DaraDate(new Date(this.date.valueOf()));
+    }
+  }
+  let DEFAULT_OPTIONS$1 = {
+    inline: false,
+    // layer or innerhtml
+    weekStartDay: 0,
+    initialDate: "",
+    autoClose: true,
+    isRTL: false,
+    mode: DateViewMode.date,
+    enableTodayBtn: false,
+    showMonthAfterYear: false,
+    isPositionFixed: false,
+    format: "",
+    zIndex: 1e3,
+    minDate: "",
+    maxDate: "",
+    beforeDrawDate: (dt) => {
+      return {
+        check: false,
+        style: "",
+        tooltip: ""
+      };
+    }
+  };
+  function hiddenElement() {
+    var _a;
+    if (document.getElementById("hiddenDaraDatetimeElement") == null) {
+      (_a = document.querySelector("body")) == null ? void 0 : _a.insertAdjacentHTML("beforeend", `<div id="hiddenDaraDatetimeElement" class="daracl-datetime-hidden"></div>`);
+    }
+    return document.getElementById("hiddenDaraDatetimeElement");
+  }
+  let daraDatetimeIdx = 0;
+  const _DateTimePicker = class _DateTimePicker2 {
+    constructor(selector, options, message2) {
+      var _a;
+      this.isInput = false;
+      this.isVisible = false;
+      this.minYear = -1;
+      this.maxYear = -1;
+      this.minMonth = -1;
+      this.maxMonth = -1;
+      this.dayOrder = [0, 1, 2, 3, 4, 5, 6];
+      this._documentClickEvent = (e) => {
+        if (this.isVisible && e.target != this.targetElement && !closestElement(e.target, this.datetimeElement)) {
+          this.hide();
+        }
+      };
+      this.options = Object.assign({}, DEFAULT_OPTIONS$1, options);
+      daraDatetimeIdx += 1;
+      let selectorElement;
+      if (typeof selector === "string") {
+        selectorElement = document.querySelector(selector);
+      } else {
+        selectorElement = selector;
+      }
+      if (!selectorElement) {
+        throw new Error(`${selector} datetimepicker element not found`);
+      }
+      this._viewMode = Object.keys(DateViewMode).includes(this.options.mode) ? this.options.mode : DateViewMode.date;
+      this.initMode = this._viewMode;
+      Lanauage.set(message2);
+      if (this.initMode == DateViewMode.year) {
+        this.dateFormat = this.options.format || DEFAULT_FORMAT.year;
+      } else if (this.initMode == DateViewMode.month) {
+        this.dateFormat = this.options.format || DEFAULT_FORMAT.month;
+      } else if (this.initMode == DateViewMode.time) {
+        this.dateFormat = this.options.format || DEFAULT_FORMAT.time;
+      } else if (this.initMode == DateViewMode.datetime) {
+        this.dateFormat = this.options.format || DEFAULT_FORMAT.datetime;
+      } else {
+        this.dateFormat = this.options.format || DEFAULT_FORMAT.date;
+      }
+      let viewDate;
+      if (this.options.initialDate) {
+        if (typeof this.options.initialDate === "string") {
+          viewDate = new DaraDate(parser(this.options.initialDate, this.dateFormat) || /* @__PURE__ */ new Date());
+        } else {
+          viewDate = new DaraDate(this.options.initialDate);
+        }
+      } else {
+        viewDate = new DaraDate(/* @__PURE__ */ new Date());
+        this.options.initialDate = viewDate.format(this.dateFormat);
+      }
+      this.setWeekDays();
+      this.todayDate = viewDate.format(DEFAULT_FORMAT.date);
+      this.currentDate = viewDate;
+      this.targetElement = selectorElement;
+      this.minDate = this._minDate();
+      this.maxDate = this._maxDate();
+      if (this.options.inline) {
+        this.datetimeElement = selectorElement;
+        this.datetimeElement.className = `daracl-datetime-wrapper ddtp-${daraDatetimeIdx} embed`;
+      } else {
+        this.isInput = true;
+        this.targetElement.setAttribute("value", viewDate.format(this.dateFormat));
+        const datetimeElement = document.createElement("div");
+        datetimeElement.className = `daracl-datetime-wrapper ddtp-${daraDatetimeIdx} layer`;
+        datetimeElement.setAttribute("style", `z-index:${this.options.zIndex};`);
+        (_a = hiddenElement()) == null ? void 0 : _a.appendChild(datetimeElement);
+        this.datetimeElement = datetimeElement;
+        this.initTargetEvent();
+      }
+      this.createDatetimeTemplate();
+      if (this.isTimeMode()) {
+        this.hourInputEle = this.datetimeElement.querySelector(".ddtp-hour");
+        this.minuteInputEle = this.datetimeElement.querySelector(".ddtp-minute");
+      } else {
+        this.hourInputEle = {};
+        this.minuteInputEle = {};
+      }
+      this.changeViewMode(this._viewMode);
+      this.initHeaderEvent();
+      this.initDateEvent();
+      this.initTimeEvent();
+    }
+    setWeekDays() {
+      let weekStartDay = this.options.weekStartDay;
+      if (weekStartDay == 0) return;
+      if (weekStartDay < 0 || weekStartDay > 6) {
+        weekStartDay = 0;
+      }
+      for (let i = 0; i < 7; i++) {
+        let day = weekStartDay + i;
+        this.dayOrder[i] = day < 7 ? day : day - 7;
+      }
+    }
+    static create(selector, options, message2) {
+      return new _DateTimePicker2(selector, options, message2);
+    }
+    /**
+     * default date format setting
+     * @example
+     ```
+    setDefaultFormat({
+      year: "YYYY",
+      month: "YYYY-MM",
+      date: "YYYY-MM-DD",
+      time: "HH:mm",
+      datetime: "YYYY-MM-DD HH:mm",
+    });
+     ```
+     * @public
+     * @static
+     * @param {*} dateFormat
+     */
+    static setDefaultFormat(dateFormat) {
+      Object.assign(DEFAULT_FORMAT, dateFormat);
+    }
+    _minDate() {
+      let minDate = this.options.minDate;
+      if (minDate != "") {
+        if (typeof minDate === "string") {
+          const dt = parser(minDate, this.dateFormat);
+          if (!dt) {
+            return -1;
+          }
+          minDate = dt;
+        }
+        this.minYear = minDate.getFullYear();
+        this.minMonth = +(this.minYear + leftPad(minDate.getMonth(), 2));
+        return new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), 0, 0).getTime();
+      }
+      return -1;
+    }
+    _maxDate() {
+      let maxDate = this.options.maxDate;
+      if (maxDate != "") {
+        if (typeof maxDate === "string") {
+          const dt = parser(maxDate, this.dateFormat);
+          if (!dt) {
+            return -1;
+          }
+          maxDate = dt;
+        }
+        this.maxYear = maxDate.getFullYear();
+        this.maxMonth = +(this.maxYear + leftPad(maxDate.getMonth(), 2));
+        return new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate(), 23, 59).getTime();
+      }
+      return -1;
+    }
+    set viewMode(mode) {
+      if (this._viewMode === mode) {
+        return;
+      }
+      this._viewMode = mode;
+      this.changeViewMode(mode);
+    }
+    get viewMode() {
+      return this._viewMode;
+    }
+    /**
+     * 모드  change
+     * @param mode
+     */
+    changeViewMode(mode) {
+      var _a;
+      (_a = this.datetimeElement.querySelector(".ddtp-datetime")) == null ? void 0 : _a.setAttribute("view-mode", mode);
+      if (mode === "year") {
+        this.yearDraw();
+      } else if (mode === "month") {
+        this.monthDraw();
+      } else {
+        this.dayDraw();
+      }
+    }
+    /**
+     * init header event
+     *
+     * @public
+     */
+    initHeaderEvent() {
+      var _a, _b, _c, _d;
+      const isRTL = this.options.isRTL;
+      (_a = this.datetimeElement.querySelector(".ddtp-move-btn.prev")) == null ? void 0 : _a.addEventListener("click", (e) => {
+        this.moveDate(isRTL ? "next" : "prev", e);
+      });
+      (_b = this.datetimeElement.querySelector(".ddtp-move-btn.next")) == null ? void 0 : _b.addEventListener("click", (e) => {
+        this.moveDate(isRTL ? "prev" : "next", e);
+      });
+      (_c = this.datetimeElement.querySelector(".ddtp-header-year")) == null ? void 0 : _c.addEventListener("click", (e) => {
+        this.viewMode = DateViewMode.year;
+      });
+      (_d = this.datetimeElement.querySelector(".ddtp-header-month")) == null ? void 0 : _d.addEventListener("click", (e) => {
+        this.viewMode = DateViewMode.month;
+      });
+    }
+    /**
+     * 날짜 달력 이벤트처리.
+     */
+    initDateEvent() {
+      var _a, _b;
+      (_a = this.datetimeElement.querySelector(".ddtp-day-body")) == null ? void 0 : _a.addEventListener("click", (e) => {
+        var _a2;
+        const targetEle = e.target;
+        if (targetEle.classList.contains("ddtp-day") || targetEle.closest(".ddtp-day")) {
+          const selectDate = targetEle.getAttribute("data-day") || "1";
+          const mmDD = selectDate.split(",");
+          this.currentDate.setMonth(+mmDD[0] - 1);
+          this.currentDate.setDate(+mmDD[1]);
+          if (this.isDayDisabled(this.currentDate)) {
+            return;
+          }
+          (_a2 = this.datetimeElement.querySelector(".select")) == null ? void 0 : _a2.classList.remove("select");
+          targetEle.classList.add("select");
+          if (this.isTimeMode()) {
+            this.currentDate.setHour(+this.hourInputEle.value);
+            this.currentDate.setMinutes(+this.minuteInputEle.value);
+          }
+          this.dateChangeEvent(e);
+        }
+      });
+      (_b = this.datetimeElement.querySelector(".ddtp-today")) == null ? void 0 : _b.addEventListener("click", (e) => {
+        const initDate = new DaraDate(parser(this.todayDate, DEFAULT_FORMAT.date) || /* @__PURE__ */ new Date());
+        this.currentDate.setYear(initDate.getYear());
+        this.currentDate.setMonth(initDate.getMonth() - 1);
+        this.currentDate.setDate(initDate.getDate());
+        this.changeViewMode(this.initMode);
+      });
+    }
+    isTimeMode() {
+      return this._viewMode === DateViewMode.time || this._viewMode === DateViewMode.datetime;
+    }
+    getTimeNumberValue(val) {
+      if (!isNumeric(val)) {
+        return 0;
+      }
+      return parseInt(val, 10);
+    }
+    /**
+     * 시간 분 설정 이벤트 처리.
+     *
+     * @public
+     */
+    initTimeEvent() {
+      var _a;
+      if (!this.isTimeMode()) return;
+      let hh = this.currentDate.format("HH");
+      const datetimeElement = this.datetimeElement;
+      const hourInputEle = datetimeElement.querySelector(".ddtp-hour");
+      const hourRangeEle = datetimeElement.querySelector(".ddtp-hour-range");
+      hourInputEle.value = hh;
+      hourRangeEle.value = hh;
+      hourInputEle.addEventListener("input", (e) => {
+        const targetElement = e.target;
+        let val = this.getTimeNumberValue(targetElement.value);
+        let addVal = leftPadClamp(val, 2, "0");
+        if (parseInt(addVal, 10) > 23) {
+          addVal = "23";
+        }
+        hourInputEle.value = addVal;
+        hourRangeEle.value = addVal;
+      });
+      hourRangeEle.addEventListener("input", (e) => {
+        const targetElement = e.target;
+        hourInputEle.value = leftPadClamp(targetElement.value, 2, "0");
+      });
+      let mm = this.currentDate.format("mm");
+      const minuteInputEle = datetimeElement.querySelector(".ddtp-minute");
+      const minuteRangeEle = datetimeElement.querySelector(".ddtp-minute-range");
+      minuteInputEle.value = mm;
+      minuteRangeEle.value = mm;
+      minuteInputEle.addEventListener("input", (e) => {
+        const targetElement = e.target;
+        let val = this.getTimeNumberValue(targetElement.value);
+        let addVal = leftPadClamp(val, 2, "0");
+        if (parseInt(addVal, 10) > 59) {
+          addVal = "59";
+        }
+        minuteInputEle.value = addVal;
+        minuteRangeEle.value = addVal;
+      });
+      minuteRangeEle.addEventListener("input", (e) => {
+        const targetElement = e.target;
+        minuteInputEle.value = leftPadClamp(targetElement.value, 2, "0");
+      });
+      (_a = datetimeElement.querySelector(".time-select")) == null ? void 0 : _a.addEventListener("click", (e) => {
+        this.currentDate.setHour(+hourInputEle.value);
+        this.currentDate.setMinutes(+minuteInputEle.value);
+        this.dateChangeEvent(e);
+      });
+    }
+    /**
+     * 날짜 이동
+     * @param moveMode // 앞뒤 이동 prev, next
+     * @returns
+     */
+    moveDate(moveMode, e) {
+      if (this._viewMode === DateViewMode.date || this._viewMode === DateViewMode.datetime) {
+        this.currentDate.setDate(1);
+        this.currentDate.addMonth("prev" === moveMode ? -1 : 1);
+        this.dayDraw();
+        return;
+      }
+      if (this._viewMode === DateViewMode.month) {
+        this.currentDate.setDate(1);
+        this.currentDate.addYear("prev" === moveMode ? -1 : 1);
+        this.monthDraw();
+        return;
+      }
+      if (this._viewMode === DateViewMode.year) {
+        this.currentDate.setDate(1);
+        this.currentDate.addYear("prev" === moveMode ? -16 : 16);
+        this.yearDraw();
+      }
+    }
+    /**
+     * get date value
+     *
+     * @returns
+     */
+    getDateValue() {
+      return this.currentDate.format(this.dateFormat);
+    }
+    /**
+     * 옵션 셋팅
+     * @static
+     * @param {DateTimePickerOptions} options
+     */
+    static setOptions(options) {
+      DEFAULT_OPTIONS$1 = Object.assign({}, DEFAULT_OPTIONS$1, options);
+    }
+    /**
+     * 달력 보이기 처리.
+     *
+     * @returns
+     */
+    show() {
+      if (this.isVisible) {
+        return;
+      }
+      this.isVisible = true;
+      const docSize = getDocSize();
+      this.datetimeElement.classList.remove("hide");
+      this.datetimeElement.classList.add("show");
+      const rect = this.targetElement.getBoundingClientRect();
+      const scrollTop = window.scrollY || document.documentElement.scrollTop;
+      const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+      const elementHeight = this.datetimeElement.offsetHeight;
+      const targetElementHeight = this.targetElement.offsetHeight + 2;
+      let left = rect.left + scrollLeft;
+      let top = 0;
+      if (this.options.isPositionFixed) {
+        top = rect.top + targetElementHeight;
+        left = rect.left;
+      } else {
+        if (rect.top + targetElementHeight + elementHeight > docSize.clientHeight && rect.top >= elementHeight) {
+          top = scrollTop + rect.top - elementHeight - 2;
+        } else {
+          top = scrollTop + rect.top + targetElementHeight;
+        }
+      }
+      this.datetimeElement.setAttribute("style", `${this.options.isPositionFixed ? "position:fixed;" : ""}top:${top}px;left:${left}px;z-index:${this.options.zIndex}`);
+      document.addEventListener("click", this._documentClickEvent);
+    }
+    /**
+     * 달력 숨기기
+     */
+    hide() {
+      this.isVisible = false;
+      if (this.options.onClose) {
+        if (this.options.onClose() === false) {
+          return;
+        }
+      }
+      this.datetimeElement.classList.remove("show");
+      this.datetimeElement.classList.add("hide");
+      document.removeEventListener("click", this._documentClickEvent);
+    }
+    /**
+     * 타켓 이벤트 처리.
+     */
+    initTargetEvent() {
+      if (this.targetElement) {
+        this.targetElement.addEventListener("click", (e) => {
+          this.show();
+        });
+      }
+    }
+    /**
+     * 날짜 변경후 이벤트
+     */
+    afterChangeDatepicker() {
+      const formatValue = this.currentDate.format(this.dateFormat);
+      if (this.options.afterChangeDatepicker && isFunction$1(this.options.afterChangeDatepicker)) {
+        this.options.afterChangeDatepicker(formatValue, this.viewMode);
+      }
+    }
+    /**
+     * 날짜 변경 전 이벤트.
+     * @returns void
+     */
+    beforeChangeDatepicker() {
+      const formatValue = this.currentDate.format(this.dateFormat);
+      if (this.options.beforeChangeDatepicker && isFunction$1(this.options.beforeChangeDatepicker)) {
+        const reval = this.options.beforeChangeDatepicker(formatValue, (result) => {
+          if (result === false) {
+            return;
+          }
+          this.refresh(false);
+        });
+        if (reval === false) {
+          return;
+        }
+        this.refresh(false);
+        return;
+      }
+      this.refresh(false);
+    }
+    dateChangeEvent(e) {
+      const formatValue = this.currentDate.format(this.dateFormat);
+      if (this.options.onSelect) {
+        if (this.options.onSelect(formatValue, this.viewMode, e) === false) {
+          return;
+        }
+      }
+      if (this.isInput) {
+        this.targetElement.setAttribute("value", formatValue);
+      }
+      if (!this.options.inline && this.options.autoClose) {
+        this.hide();
+      }
+    }
+    /**
+     *  datepicker template  그리기
+     */
+    createDatetimeTemplate() {
+      const showMonthAfterYear = this.options.showMonthAfterYear;
+      let datetimeTemplate = `<div class="ddtp-datetime ${this.options.isRTL ? "rtl" : ""}" view-mode="${this._viewMode}">
+			<div class="ddtp-header">
+                <span class="${showMonthAfterYear ? "ddtp-header-year" : "ddtp-header-month"}"></span>
+                <span class="${showMonthAfterYear ? "ddtp-header-month" : "ddtp-header-year"}"></span>
+
+                <span class="ddtp-date-move">  
+                    <a href="javascript:;" class="ddtp-move-btn prev">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
+                    </a>
+                    <a href="javascript:;" class="ddtp-move-btn next">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+                    </a> 
+                </span>
+			</div>
+            <div class="ddtp-body">
+                <table class="ddtp-days">
+                    <thead class="ddtp-day-header">
+                        <tr>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[0]]}">${Lanauage.getWeeksMessage(this.dayOrder[0])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[1]]}">${Lanauage.getWeeksMessage(this.dayOrder[1])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[2]]}">${Lanauage.getWeeksMessage(this.dayOrder[2])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[3]]}">${Lanauage.getWeeksMessage(this.dayOrder[3])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[4]]}">${Lanauage.getWeeksMessage(this.dayOrder[4])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[5]]}">${Lanauage.getWeeksMessage(this.dayOrder[5])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[6]]}">${Lanauage.getWeeksMessage(this.dayOrder[6])}</td>		
+                        </tr>
+                    </thead>
+                    <tbody class="ddtp-day-body">
+                    </tbody>
+                    
+                    <tfoot class="ddtp-day-footer">
+                        <td colspan="7">
+                            <div style="width:99%;text-align:center;margin-top: 5px;${this.options.enableTodayBtn ? "" : "display:none;"}"><button type="button" class="ddtp-today">${Lanauage.getMessage("today")}</button></div>
+                            <div class="footer-tooltip"></div>
+                        </td>
+                    </tfoot>
+                </table>
+
+                <div class="ddtp-times">
+                        <div class="time-container">
+                            <div class="ddtp-time">
+                                <span>H: </span><input type="number" class="ddtp-hour" min="0" max="23" maxlength="2">
+                                <input type="range" min="0" max="23" class="ddtp-hour-range">
+                            </div>
+                            <div class="ddtp-time">
+                                <span>M: </span><input type="number" class="ddtp-minute" min="0" max="59" size="2" maxlength="2">
+                                <input type="range" min="0" max="59" class="ddtp-minute-range">
+                            </div>
+                        </div>
+                        <div class="ddtp-btn">
+                            <button type="button" class="time-select">${Lanauage.getMessage("ok")}</button>
+                        </div>
+                </div>
+
+                <div class="ddtp-months">
+                </div>
+
+                <div class="ddtp-years">
+                </div>
+            </div>
+        </div>`;
+      this.datetimeElement.innerHTML = datetimeTemplate;
+    }
+    refresh(beforeChangeDatepickerCheck) {
+      if (this._viewMode === DateViewMode.date || this._viewMode === DateViewMode.datetime) {
+        this.dayDraw(beforeChangeDatepickerCheck);
+        return;
+      }
+      if (this._viewMode === DateViewMode.month) {
+        this.monthDraw(beforeChangeDatepickerCheck);
+        return;
+      }
+      if (this._viewMode === DateViewMode.year) {
+        this.yearDraw(beforeChangeDatepickerCheck);
+      }
+    }
+    /**
+     * 년 달력 그리기
+     */
+    yearDraw(beforeChangeDatepickerCheck) {
+      var _a;
+      const currentYear = this.currentDate.format("YYYY");
+      if (beforeChangeDatepickerCheck !== false && this.initMode == DateViewMode.year) {
+        this.beforeChangeDatepicker();
+        return;
+      }
+      const startYear = +currentYear - 8;
+      this.datetimeElement.querySelector(".ddtp-header-year").textContent = `${startYear} ~ ${startYear + 15}`;
+      const beforeDrawDateFlag = isFunction$1(this.options.beforeDrawDate);
+      const beforeDrawDateFn = beforeDrawDateFlag ? this.options.beforeDrawDate : false;
+      const calHTML = [];
+      for (let i = 0; i < 16; i++) {
+        const year = startYear + i;
+        const disabled = this.isYearDisabled(year);
+        let addStylceClass = disabled ? " disabled" : "";
+        let tooltip = "";
+        if (beforeDrawDateFlag && beforeDrawDateFn) {
+          const reval = beforeDrawDateFn({ mode: this._viewMode, date: year });
+          addStylceClass += reval.style ? " " + reval.style : "";
+          tooltip = reval.tooltip;
+          tooltip = tooltip ? `title="${tooltip}"` : "";
+        }
+        calHTML.push(`<div class="ddtp-year ${addStylceClass}" data-year="${year}" ${tooltip}>${year}</div>`);
+      }
+      this.datetimeElement.querySelector(".ddtp-years").innerHTML = calHTML.join("");
+      if (this.initMode == DateViewMode.year) {
+        this.afterChangeDatepicker();
+      }
+      (_a = this.datetimeElement.querySelectorAll(".ddtp-year")) == null ? void 0 : _a.forEach((yearEle) => {
+        yearEle.addEventListener("click", (e) => {
+          const targetEle = e.target;
+          if (targetEle) {
+            const year = targetEle.getAttribute("data-year");
+            if (year) {
+              const numYear = +year;
+              if (this.isYearDisabled(numYear)) {
+                return;
+              }
+              if (this.initMode == DateViewMode.year) {
+                if (this.isYearDisabled(numYear)) {
+                  return;
+                }
+                this.currentDate.setYear(numYear);
+                this.dateChangeEvent(e);
+                return;
+              }
+              this.currentDate.setYear(numYear);
+              this.viewMode = this.initMode;
+            }
+          }
+        });
+      });
+    }
+    /**
+     * 월 달력 그리기
+     */
+    monthDraw(beforeChangeDatepickerCheck) {
+      var _a;
+      if (beforeChangeDatepickerCheck !== false && this.initMode == DateViewMode.month) {
+        this.beforeChangeDatepicker();
+        return;
+      }
+      const year = this.currentDate.format("YYYY");
+      this.datetimeElement.querySelector(".ddtp-header-year").textContent = `${year}`;
+      const monthElements = this.datetimeElement.querySelectorAll(".ddtp-months > .ddtp-month");
+      if (monthElements.length > 0) {
+        if (this.isYearDisabled(+year)) {
+          monthElements.forEach((monthEle) => {
+            if (!monthEle.classList.contains("disabled")) {
+              monthEle.classList.add("disabled");
+            }
+          });
+          return;
+        }
+        monthElements.forEach((monthEle, idx) => {
+          if (this.isMonthDisabled(+year, idx)) {
+            if (!monthEle.classList.contains("disabled")) {
+              monthEle.classList.add("disabled");
+            }
+          } else {
+            monthEle.classList.remove("disabled");
+          }
+        });
+        if (this.initMode == DateViewMode.month) {
+          this.afterChangeDatepicker();
+        }
+        return;
+      }
+      this.datetimeElement.querySelector(".ddtp-header-month").textContent = this.currentDate.format("MMMM");
+      const beforeDrawDateFlag = isFunction$1(this.options.beforeDrawDate);
+      const beforeDrawDateFn = beforeDrawDateFlag ? this.options.beforeDrawDate : false;
+      const calHTML = [];
+      for (let i = 0; i < 12; i++) {
+        const disabled = this.isMonthDisabled(+year, i);
+        let addStylceClass = disabled ? " disabled" : "";
+        let tooltip = "";
+        if (beforeDrawDateFlag && beforeDrawDateFn) {
+          const reval = beforeDrawDateFn({ mode: this._viewMode, date: year + "/" + (i + 1) });
+          addStylceClass += reval.style ? " " + reval.style : "";
+          tooltip = reval.tooltip;
+          tooltip = tooltip ? `title="${tooltip}"` : "";
+        }
+        calHTML.push(`<div class="ddtp-month ${addStylceClass}" data-month="${i}" ${tooltip}>${Lanauage.getMonthsMessage(i, "abbr")}</div>`);
+      }
+      this.datetimeElement.querySelector(".ddtp-months").innerHTML = calHTML.join("");
+      if (this.initMode == DateViewMode.month) {
+        this.afterChangeDatepicker();
+      }
+      (_a = this.datetimeElement.querySelectorAll(".ddtp-month")) == null ? void 0 : _a.forEach((monthEle) => {
+        monthEle.addEventListener("click", (e) => {
+          const targetEle = e.target;
+          if (targetEle) {
+            const month = targetEle.getAttribute("data-month");
+            if (month) {
+              if (this.isMonthDisabled(this.currentDate.getYear(), +month)) {
+                return false;
+              }
+              if (this.initMode == DateViewMode.month) {
+                this.currentDate.setMonth(+month);
+                this.dateChangeEvent(e);
+                return;
+              }
+              this.currentDate.setMonth(+month);
+              this.viewMode = this.initMode;
+              this.dayDraw();
+            }
+          }
+        });
+      });
+    }
+    /**
+     * 날짜 그리기
+     */
+    dayDraw(beforeChangeDatepickerCheck) {
+      if (beforeChangeDatepickerCheck !== false && (this.initMode == DateViewMode.date || this.initMode == DateViewMode.datetime)) {
+        this.beforeChangeDatepicker();
+        return;
+      }
+      let monthFirstDate = this.currentDate.clone();
+      const currentMonth = monthFirstDate.getMonth();
+      monthFirstDate.setDate(1);
+      this.datetimeElement.querySelector(".ddtp-header-year").textContent = monthFirstDate.format("YYYY");
+      this.datetimeElement.querySelector(".ddtp-header-month").textContent = monthFirstDate.format("MMMM");
+      let day = monthFirstDate.getDay();
+      day = day - this.dayOrder[0];
+      if (day >= 0) {
+        monthFirstDate.addDate(-day);
+      } else {
+        monthFirstDate.addDate(-(7 + day));
+      }
+      const beforeDrawDateFlag = isFunction$1(this.options.beforeDrawDate);
+      const beforeDrawDateFn = beforeDrawDateFlag ? this.options.beforeDrawDate : false;
+      const calHTML = [];
+      for (let i = 0; i < 42; i++) {
+        let dateItem;
+        if (i == 0) {
+          dateItem = monthFirstDate;
+        } else {
+          dateItem = monthFirstDate.clone().addDate(i);
+        }
+        const dateItemFormat = dateItem.format(DEFAULT_FORMAT.date);
+        if (i % 7 == 0) {
+          calHTML.push((i == 0 ? "" : "</tr>") + "<tr>");
+        }
+        let disabled = this.isDayDisabled(dateItem);
+        let addStylceClass = DAY_STYLE_CLASS[this.dayOrder[i % 7]];
+        const dateItemMonth = dateItem.getMonth();
+        if (dateItemMonth != currentMonth) {
+          if (dateItemMonth < currentMonth) {
+            addStylceClass += dateItemMonth == 1 ? " new" : " old";
+          } else {
+            addStylceClass += currentMonth == 1 && dateItemMonth == 12 ? " old" : " new";
+          }
+        }
+        addStylceClass += this.todayDate == dateItemFormat ? " ddtp-today" : "";
+        addStylceClass += disabled ? " disabled" : "";
+        let tooltip = "";
+        if (beforeDrawDateFlag && beforeDrawDateFn) {
+          const reval = beforeDrawDateFn({ mode: this._viewMode, item: dateItem, date: dateItem.format(this.dateFormat) });
+          addStylceClass += reval.style ? " " + reval.style : "";
+          addStylceClass += reval.check ? " ddtp-event" : "";
+          tooltip = reval.tooltip;
+          tooltip = tooltip ? `title="${tooltip}"` : "";
+        }
+        calHTML.push(`<td class="ddtp-day ${addStylceClass}" data-day="${dateItem.format("M,D")}" ${tooltip}>`);
+        calHTML.push(`<span>${dateItem.format("d")}</span>`);
+        calHTML.push("</td>");
+      }
+      calHTML.push("</tr>");
+      this.datetimeElement.querySelector(".ddtp-day-body").innerHTML = calHTML.join("");
+      if (this.initMode == DateViewMode.date || this.initMode == DateViewMode.datetime) {
+        this.afterChangeDatepicker();
+      }
+    }
+    isDayDisabled(dateItem) {
+      if (this.minDate != -1 && this.minDate > dateItem.getTime() || this.maxDate != -1 && this.maxDate < dateItem.getTime()) {
+        return true;
+      }
+      return false;
+    }
+    isYearDisabled(year) {
+      if (this.minYear != -1 && this.minYear > year || this.maxYear != -1 && this.maxYear < year) {
+        return true;
+      }
+      return false;
+    }
+    isMonthDisabled(year, month) {
+      if (this.isYearDisabled(year)) {
+        return true;
+      }
+      let yearMonth = +(year + leftPad(month, 2));
+      if (this.minMonth != -1 && this.minMonth > yearMonth || this.maxMonth != -1 && this.maxMonth < yearMonth) {
+        return true;
+      }
+      return false;
+    }
+    static setMessage(message2) {
+      Lanauage.setDefaultMessage(message2);
+    }
+  };
+  _DateTimePicker.VERSION = `${"0.0.13"}`;
+  _DateTimePicker.format = format;
+  _DateTimePicker.parser = parser;
+  let DateTimePicker = _DateTimePicker;
+  function getDocSize() {
+    return {
+      clientHeight: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
+      clientWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
+    };
+  }
+  class DateRender extends Render {
+    constructor(field, rowElement, daraForm) {
+      super(daraForm, field, rowElement);
+      this.mounted();
+      this.setDefaultOption();
+      this.setDefaultInfo();
+    }
+    mounted() {
+      let dateOnSelectEvent;
+      this.field.rendererOptions = Object.assign({}, this.field.rendererOptions);
+      if (typeof this.field.rendererOptions.onSelect !== "undefined") {
+        dateOnSelectEvent = typeof this.field.rendererOptions.onSelect;
+      }
+      if (isUndefined(this.field.rendererOptions.mode)) {
+        if (this.field.renderType == "datemonth" || this.field.renderType == "datehour") {
+          this.field.rendererOptions.mode = this.field.renderType.replace("date", "");
+        } else {
+          this.field.rendererOptions.mode = this.field.renderType;
+        }
+      }
+      this.field.rendererOptions.onSelect = (dt, e) => {
+        if (dateOnSelectEvent) {
+          dateOnSelectEvent(dt, e);
+        }
+        this.setValue(dt);
+        this.valid();
+      };
+      this.dateObj = new DateTimePicker(this.element, this.field.rendererOptions, {});
+    }
+    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="df-form-field df-text df-help-icon" autocomplete="off" readonly/>
+     </div>
+     ${Render.getDescriptionTemplate(field)}
+     <div class="df-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;
+    }
+  }
+  class TabRender 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(".df-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) {
+      var _a, _b;
+      const tabItem = this.tabContainerElement.querySelector(`[data-tab-id="${tabId}"]`);
+      if (!tabItem) return;
+      if (!tabItem.classList.contains("active")) {
+        for (let item of ((_a = tabItem == null ? void 0 : tabItem.parentElement) == null ? void 0 : _a.children) ?? []) {
+          item.classList.remove("active");
+        }
+        tabItem.classList.add("active");
+      }
+      const tabPanel = this.rowElement.querySelector(`[tab-panel-id="${tabId}"]`);
+      if (!(tabPanel == null ? void 0 : tabPanel.classList.contains("active"))) {
+        for (let item of ((_b = tabPanel == null ? void 0 : tabPanel.parentElement) == null ? void 0 : _b.children) ?? []) {
+          item.classList.remove("active");
+        }
+        tabPanel == null ? void 0 : 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() {
+      var _a, _b;
+      const field = this.field;
+      const formTemplate = this.daraForm.formTemplate;
+      const options = this.daraForm.getOptions();
+      const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
+      let fieldStyle = resolveFieldStyle(options, field);
+      fieldContainerElement.innerHTML = `
+        <div class="df-field ">
+          <div class="df-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 = resolveFieldStyle(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="df-tab-item ${firstFlag ? "active" : ""}" data-tab-id="${id}"><a href="javascript:;">${childField.label}</a></span>`;
+          let tabBodyTemplate = `<div class="df-tab-panel ${firstFlag ? "active" : ""}" tab-panel-id="${id}">${Render.getDescriptionTemplate(childField)}
+          <div class="df-tab-group"></div>
+        </div>`;
+          const tabElement = templateToElement(tabTemplate);
+          const tabBodyElement = templateToElement(tabBodyTemplate);
+          firstFlag = false;
+          if (tabElement) {
+            (_a = fieldContainerElement.querySelector(".df-tab-header")) == null ? void 0 : _a.appendChild(tabElement);
+          }
+          if (tabBodyElement) {
+            (_b = fieldContainerElement.querySelector(".df-tab-body")) == null ? void 0 : _b.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 == null ? void 0 : tabBodyElement.querySelector(".df-tab-group"), childField.$tabForm);
+              childField.$tabForm.formTemplate.childTemplate(childField, fieldStyle2);
+            }
+          }
+        }
+        this.tabContainerElement = fieldContainerElement;
+      }
+    }
+    getValue() {
+      var _a;
+      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 = (_a = childField.$tabForm) == null ? void 0 : _a.getValue(false);
+        if (useTypeValue) {
+          allTabValue[childField.$validName] = childFieldValue;
+        } else {
+          for (let [key, value] of Object.entries(childFieldValue)) {
+            allTabValue[key] = value;
+          }
+        }
+      }
+      return allTabValue;
+    }
+    setValue(value) {
+      var _a;
+      for (const childField of this.field.children) {
+        let tabChildValue = value[childField.$validName];
+        if (tabChildValue) {
+          (_a = childField.$tabForm) == null ? void 0 : _a.setValue(tabChildValue);
+        }
+      }
+    }
+    reset() {
+    }
+    getElement() {
+      return this.rowElement;
+    }
+    valid() {
+      var _a;
+      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 = (_a = childField.$tabForm) == null ? void 0 : _a.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() {
+    }
+  }
+  let $$idx = 0;
+  class GridRender 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() {
+      var _a;
+      this.addRow();
+      if (this.customFunction.mounted) {
+        this.customFunction.mounted.call(this, this.field, this.rowElement);
+      }
+      (_a = this.rowElement.querySelector(".df-grid-add-row-btn")) == null ? void 0 : _a.addEventListener("click", (evt) => {
+        this.addRow();
+      });
+    }
+    static isDataRender() {
+      return false;
+    }
+    static isChildrenCreate() {
+      return false;
+    }
+    createField() {
+      var _a, _b, _c, _d;
+      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 (((_a = field.rendererOptions) == null ? void 0 : _a.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:${((_b = childField.style) == null ? void 0 : _b.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 ${((_c = field.style) == null ? void 0 : _c.position) ?? ""}" style="height:${((_d = field.rendererOptions) == null ? void 0 : _d.height) ?? "auto"};">
+        <table class="df-grid">${colgroupTemplate.join("")}<thead>${theadTemplate.join("")}</thead><tbody></tbody></table>
+     </div>
+     </div>
+     `;
+    }
+    /**
+     * add row
+     */
+    addRow(valueItem) {
+      var _a, _b, _c;
+      let rowTemplate = [];
+      const options = this.daraForm.getOptions();
+      const formTemplate = this.gridForm.formTemplate;
+      const parentName = this.field.$xssName;
+      ++$$idx;
+      let addColumns = [];
+      rowTemplate.push(`<tr class="df-grid-row">`);
+      rowTemplate.push("<td>");
+      if (((_a = this.field.rendererOptions) == null ? void 0 : _a.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 = resolveFieldStyle(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) {
+        (_b = this.rowElement.querySelector("tbody")) == null ? void 0 : _b.append(addRowElement);
+        (_c = addRowElement.querySelector(".df-grid-row-remove")) == null ? void 0 : _c.addEventListener("click", (evt) => {
+          this.removeRow(evt);
+        });
+      }
+      valueItem = valueItem ?? {};
+      for (let columnField of addColumns) {
+        columnField.$instance = new columnField.$renderType(columnField, addRowElement == null ? void 0 : addRowElement.querySelector(`#${columnField.$xssName}`), this.gridForm);
+        if (valueItem[columnField.$orgin.name]) {
+          columnField.$instance.setValue(valueItem[columnField.$orgin.name]);
+        }
+      }
+    }
+    /**
+     * remove row
+     *
+     * @param evt event
+     */
+    removeRow(evt) {
+      var _a, _b;
+      const target = evt.target;
+      const rowElement = target.closest("tr");
+      if (rowElement) {
+        if (((_a = rowElement.parentElement) == null ? void 0 : _a.childElementCount) == 1) return;
+        let rowIdx = ((_b = evt.currentTarget) == null ? void 0 : _b.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() {
+      var _a;
+      (_a = this.rowElement.querySelector("tbody")) == null ? void 0 : _a.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 (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() {
+    }
+  }
+  const 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",
+    REQUIRED: "required"
+  };
+  const FIELD_PREFIX = "dff";
+  const 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
+  };
+  const OrientationMap = {
+    horizontal: "horizontal"
+  };
+  const FIELD_POSITION_STYLE = {
+    "top-left": ["top", "df-txt-left"],
+    "top-center": ["top", "df-txt-center"],
+    "top-right": ["top", "df-txt-right"],
+    "left-left": ["", "df-txt-left"],
+    "left-center": ["", "df-txt-center"],
+    "left-right": ["", "df-txt-right"],
+    "right-right": ["right", "df-txt-right"],
+    "right-center": ["right", "df-txt-center"],
+    "right-left": ["right", "df-txt-left"],
+    "bottom-left": ["bottom", "df-txt-left"],
+    "bottom-center": ["bottom", "df-txt-center"],
+    "bottom-right": ["bottom", "df-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"];
+  let localeMessage = {
+    required: "{label} 필수 입력사항입니다.",
+    fileButton: "파일찾기",
+    selection: "선택",
+    string: {
+      minLength: "{minLength} 글자 이상으로 입력하세요.",
+      maxLength: "{maxLength} 글자 이하로 입력하세요.",
+      between: "{minLength} ~ {maxLength} 사이의 글자를 입력하세요."
+    },
+    number: {
+      nan: "숫자만 입력 가능 합니다.",
+      minimum: "{minimum} 값과 같거나 커야 합니다",
+      exclusiveMinimum: "{minimum} 보다 커야 합니다",
+      maximum: "{maximum} 값과 같거나 작아야 합니다",
+      exclusiveMaximum: "{maximum} 보다 작아야 합니다.",
+      between: "{minimum}~{maximum} 사이의 값을 입력하세요.",
+      betweenExclusiveMin: "{minimum} 보다 크고 {maximum} 보다 같거나 작아야 합니다",
+      betweenExclusiveMax: "{minimum} 보다 같거나 크고 {maximum} 보다 작아야 합니다",
+      betweenExclusiveMinMax: "{minimum} 보다 크고 {maximum} 보다 작아야 합니다"
+    },
+    regexp: {
+      mobile: "핸드폰 번호가 유효하지 않습니다.",
+      email: "이메일이 유효하지 않습니다.",
+      url: "URL이 유효하지 않습니다.",
+      alpha: "영문만 입력 가능 합니다.",
+      "alpha-num": "영문과 숫자만 입력 가능 합니다.",
+      number: "숫자만 입력 가능 합니다.",
+      variable: "값이 유효하지 않습니다.",
+      "number-char": "숫자, 문자 각각 하나 이상 포함 되어야 합니다.",
+      "upper-char": "대문자가 하나 이상 포함 되어야 합니다.",
+      "upper-char-special": "대문자,소문자,특수문자 각각 하나 이상 포함 되어야 합니다.",
+      "upper-char-special-number": "대문자,소문자,특수문자,숫자 각각 하나 이상 포함 되어야합니다."
+    }
+  };
+  class Language {
+    constructor() {
+      this.lang = localeMessage;
+    }
+    /**
+     * 다국어 메시지 등록
+     *
+     * @public
+     * @param {?Message} [lang] 둥록할 메시지
+     */
+    set(lang) {
+      this.lang = Object.assign({}, localeMessage, 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;
+    });
+  }
+  const Language$1 = new Language();
+  const 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"];
+  };
+  class FieldInfoMap {
+    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) {
+      const fieldKey = this.keyNameMap[fieldName];
+      if (isUndefined(fieldKey)) return;
+      this.removeFieldInfoByKey(fieldKey);
+      delete this.keyNameMap[fieldName];
+    }
+    /**
+     * 필드 키로 필드 정보 맵에서 지우기
+     *
+     * @public
+     * @param {string} fieldKey
+     */
+    removeFieldInfoByKey(fieldKey) {
+      const fieldInfo = this.allFieldInfo[fieldKey];
+      if (fieldInfo && this.keyNameMap[fieldInfo.$validName] === fieldKey) {
+        delete this.keyNameMap[fieldInfo.$validName];
+      }
+      delete this.allFieldInfo[fieldKey];
+      this.conditionFields = this.conditionFields.filter((key) => key !== fieldKey);
+    }
+    /**
+     * 모든 필드값 구하기
+     *
+     * @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 = Language$1.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;
+  }
+  class FormTemplate {
+    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 = resolveFieldStyle(this.options, field, null, labelHideFlag);
+      this.addRowFieldInfo(field);
+      const rowElement = templateToElement(`
+        <div class="df-row df-form-group ${fieldStyle.fieldClass}" id="${field.$key}">
+          ${labelHideFlag ? "" : `<div class="df-label ${fieldStyle.labelClass} ${fieldStyle.labelAlignClass}" title="${field.label ?? ""}" style="${fieldStyle.labelStyle}">${this.getLabelTemplate(field)}</div>`}
+
+          <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 = resolveFieldStyle(this.options, childField, beforeField, !isEmptyLabel);
+          labelTemplate = isEmptyLabel ? `<span class="df-label df-empty ${childFieldStyle.labelClass}" style="${childFieldStyle.labelStyle}"></span>` : "";
+        } else {
+          childFieldStyle = resolveFieldStyle(this.options, childField, beforeField, false);
+          labelTemplate = `<span class="df-label ${childFieldStyle.labelClass} ${childFieldStyle.labelAlignClass}" title="${childField.label ?? ""}" style="${childFieldStyle.labelStyle}">${this.getLabelTemplate(childField)}</span>`;
+        }
+        const groupElement = templateToElement(`<div class="df-form-group ${childFieldStyle.fieldClass}" style="${childFieldStyle.fieldStyle}" id="${childField.$key}">
+        ${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="df-tooltip-text">${field.tooltip}</span></span>`;
+      return `${field.label ?? ""} ${tooltipTemplate} ${requiredTemplate}`;
+    }
+    /**
+     * label 숨김 여부
+     *
+     * @param field formfield
+     * @returns
+     */
+    isLabelHide(field) {
+      var _a;
+      return ((_a = field.style) == null ? void 0 : _a.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);
+    }
+  }
+  function initFormOptions(options) {
+    const opts = merge({}, DEFAULT_OPTIONS, options);
+    return opts;
+  }
+  function setDefaultOptions(options) {
+    DEFAULT_OPTIONS = merge({}, DEFAULT_OPTIONS, options);
+  }
+  let DEFAULT_OPTIONS = {
+    style: {
+      width: "100%",
+      labelWidth: 3,
+      valueWidth: 9,
+      position: "left-right"
+    },
+    mode: "new",
+    useTypeValue: true,
+    autoCreate: true,
+    notValidMessage: "This form is not valid.",
+    fields: []
+  };
+  const allInstance = {};
+  const SEQ_ATTR_KEY = "data-form-uid";
+  let DARA_FORM_SEQ = 0;
+  const _DaraForm = class _DaraForm {
+    constructor(formElement, options, message2) {
+      this.formValue = {};
+      this.changeListeners = [];
+      this.changeMode = (mode) => {
+        this.options.mode = mode;
+        this.formElement.setAttribute("data-df-mode", mode);
+      };
+      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();
+      };
+      this.resetField = (fieldName) => {
+        this.fieldInfoMap.getFieldName(fieldName).$instance.reset();
+        this.formValue[fieldName] = "";
+        this.conditionCheck();
+      };
+      this.getFieldValue = (fieldName) => {
+        const field = this.fieldInfoMap.getFieldName(fieldName);
+        if (field) {
+          return field.$instance.getValue();
+        }
+        return null;
+      };
+      this.getValue = (isValid) => {
+        return this.fieldInfoMap.getAllFieldValue(this.formValue, isValid);
+      };
+      this.getFormDataValue = (isValid) => {
+        return this.fieldInfoMap.getFormDataValue(this.formValue, isValid);
+      };
+      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);
+        }
+      };
+      this.addField = (field) => {
+        this.options.fields.push(field);
+        this.formTemplate.addRow(field);
+        this.conditionCheck();
+      };
+      this.removeField = (fieldName) => {
+        const fieldInfo = this.fieldInfoMap.getFieldName(fieldName);
+        if (!fieldInfo) return;
+        const removeFields = this.getRemoveFields(fieldInfo);
+        removeFields.forEach((removeField) => {
+          this.removeFormValue(removeField);
+        });
+        this.removeFieldElement(fieldInfo);
+        this.removeParentChildField(fieldInfo);
+        removeFields.forEach((removeField) => {
+          this.fieldInfoMap.removeFieldInfoByKey(removeField.$key);
+        });
+        this.conditionCheck();
+      };
+      this.isValidForm = () => {
+        const result = this.validForm();
+        return result.length < 1;
+      };
+      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.subscribe = (listener) => {
+        this.changeListeners.push(listener);
+        return () => {
+          this.changeListeners = this.changeListeners.filter((l) => l !== listener);
+        };
+      };
+      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];
+          }
+        }
+      };
+      this.getFields = () => {
+        return this.options.fields;
+      };
+      this.setFields = (fields) => {
+        this.options.fields = fields;
+        this.createForm(fields);
+      };
+      this.options = initFormOptions(options);
+      Language$1.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 create(formElement, options, message2) {
+      return new _DaraForm(formElement, options, message2);
+    }
+    static setMessage(message2) {
+      Language$1.set(message2);
+    }
+    static setDefaultOptions(options, message2) {
+      setDefaultOptions(options);
+      if (message2) {
+        Language$1.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 == null ? void 0 : 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);
+      }
+    }
+    /**
+     * 제거할 필드와 같은 fieldInfoMap에 등록된 하위 필드(group 하위 필드, tab 패널) 목록
+     * grid 컬럼, tab 패널 내부 필드는 별도 form에 등록되므로 제외됨.
+     *
+     * @param {FormField} fieldInfo
+     * @param {FormField[]} result
+     * @returns {FormField[]}
+     */
+    getRemoveFields(fieldInfo, result = []) {
+      var _a;
+      result.push(fieldInfo);
+      (_a = fieldInfo.children) == null ? void 0 : _a.forEach((childField) => {
+        if (childField && this.fieldInfoMap.get(childField.$key) === childField) {
+          this.getRemoveFields(childField, result);
+        }
+      });
+      return result;
+    }
+    /**
+     * field element 제거
+     *
+     * @param {FormField} fieldInfo
+     */
+    removeFieldElement(fieldInfo) {
+      var _a, _b;
+      const parentField = fieldInfo.$parent;
+      if (parentField && isTabType(parentField)) {
+        const tabElement = parentField.$instance.getElement();
+        const tabItem = tabElement.querySelector(`[data-tab-id="${fieldInfo.$key}"]`);
+        const activeFlag = tabItem == null ? void 0 : tabItem.classList.contains("active");
+        tabItem == null ? void 0 : tabItem.remove();
+        (_a = tabElement.querySelector(`[tab-panel-id="${fieldInfo.$key}"]`)) == null ? void 0 : _a.remove();
+        const firstTabItem = tabElement.querySelector(".df-tab-header .df-tab-item");
+        if (activeFlag && firstTabItem) {
+          parentField.$instance.setActive(firstTabItem.getAttribute("data-tab-id") ?? "");
+        }
+        return;
+      }
+      const rowSelector = `[id="${fieldInfo.$key}"]`;
+      let element = (_b = fieldInfo.$instance) == null ? void 0 : _b.getElement();
+      if (element instanceof NodeList || element instanceof HTMLCollection) {
+        element = element[0] ?? null;
+      }
+      const rowElement = (element instanceof Element ? element.closest(rowSelector) : null) ?? this.formElement.querySelector(rowSelector);
+      const containerElement = rowElement == null ? void 0 : rowElement.parentElement;
+      rowElement == null ? void 0 : rowElement.remove();
+      if (parentField && (containerElement == null ? void 0 : containerElement.classList.contains("df-row")) && containerElement.childElementCount < 1) {
+        containerElement.remove();
+      }
+    }
+    /**
+     * 부모 children(최상위는 options.fields)에서 필드 제거
+     * tab 은 children 기준으로 값/유효성 체크를 하므로 제거해야 함.
+     *
+     * @param {FormField} fieldInfo
+     */
+    removeParentChildField(fieldInfo) {
+      const fields = fieldInfo.$parent ? fieldInfo.$parent.children : this.options.fields;
+      const idx = fields ? fields.indexOf(fieldInfo) : -1;
+      if (idx > -1) {
+        fields == null ? void 0 : fields.splice(idx, 1);
+      }
+    }
+    /**
+     * getValue() 시 formValue에 누적된 field 값 제거
+     *
+     * @param {FormField} fieldInfo
+     */
+    removeFormValue(fieldInfo) {
+      const keys = [fieldInfo.name, fieldInfo.$validName];
+      if (fieldInfo.renderType === "file") {
+        keys.push(fieldInfo.$validName + "RemoveIds");
+      } else if (isTabType(fieldInfo)) {
+        keys.push(...Object.keys(fieldInfo.$instance.getValue() ?? {}));
+      }
+      if (fieldInfo.$tabForm) {
+        keys.push(...Object.keys(fieldInfo.$tabForm.getValue(false) ?? {}));
+      }
+      keys.forEach((key) => {
+        if (!isBlank(key)) delete this.formValue[key];
+      });
+    }
+    validTabCheck(fieldInfo) {
+      if (fieldInfo.$parent) {
+        if (fieldInfo.$parent.renderType == "tab") {
+          fieldInfo.$parent.$instance.setActive(fieldInfo.$key);
+        }
+        this.validTabCheck(fieldInfo.$parent);
+      }
+    }
+    conditionCheck() {
+      this.fieldInfoMap.conditionCheck();
+      this.notifyChange();
+    }
+    notifyChange() {
+      if (this.changeListeners.length < 1) return;
+      const event = { form: this };
+      this.changeListeners.forEach((listener) => listener(event));
+    }
+    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 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;
+    }
+  };
+  _DaraForm.VERSION = `${"0.0.18"}`;
+  _DaraForm.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);
+    }
+  };
+  let DaraForm = _DaraForm;
+  if (typeof window !== "undefined") {
+    window.Daracl = window.Daracl || {};
+    window.Daracl.form = DaraForm;
+  }
+});
+//# sourceMappingURL=daracl.form.umd.js.map