@daracl/form 0.0.17 → 0.0.19

package/dist/index.cjs

@@ -1,36 +1,14 @@
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-
-// src/util/utils.ts
-var xssFilter = {
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("@daracl/core");
+const xssFilter = {
   "&": "&",
   "<": "&lt;",
   ">": "&gt;",
   '"': "&quot;",
   "'": "&#39;"
 };
-var replaceXss = (inputText) => {
+const replaceXss = (inputText) => {
   let returnText = inputText;
   if (returnText) {
     Object.keys(xssFilter).forEach((key) => {
@@ -39,55 +17,51 @@ var replaceXss = (inputText) => {
   }
   return returnText;
 };
-var hasOwnProp = (obj, key) => {
+const hasOwnProp = (obj, key) => {
   return obj.hasOwnProperty(key);
 };
-var isBlank = (value) => {
-  if (value === null)
-    return true;
-  if (value === "")
-    return true;
-  if (typeof value === "undefined")
-    return true;
-  if (typeof value === "string" && (value === "" || value.replace(/\s/g, "") === ""))
-    return true;
+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;
 };
-var isUndefined = (value) => {
+const isUndefined = (value) => {
   return typeof value === "undefined";
 };
-var isFunction = (value) => {
+const isFunction = (value) => {
   return typeof value === "function";
 };
-var isString = (value) => {
+const isString = (value) => {
   return typeof value === "string";
 };
-var isNumber = (value) => {
+const isNumber = (value) => {
   if (isBlank(value)) {
     return false;
   }
   value = +value;
   return !isNaN(value);
 };
-var isArray = (value) => {
-  return Array.isArray(value);
+const isArray = (value) => {
+  return core.isArray(value);
 };
-var isEmpty = (value) => isUndefined(value) || value == null;
-var isTabType = (field) => {
+const isEmpty = (value) => isUndefined(value) || value == null;
+const isTabType = (field) => {
   return field && field.renderType === "tab";
 };
-var isGridType = (field) => {
+const isGridType = (field) => {
   return field && field.renderType === "grid";
 };
-var replaceXssField = (field) => {
+const replaceXssField = (field) => {
   field.$xssName = getXssFieldName(field);
   field.label = replaceXss(field.label);
   return field;
 };
-var ignoreValueField = (field) => {
+const ignoreValueField = (field) => {
   return isGridType(field.$parent) || isTabType(field.$parent);
 };
-var getXssFieldName = (field) => {
+const getXssFieldName = (field) => {
   if (isUndefined(field.$xssName)) {
     let returnText = field.name;
     if (returnText) {
@@ -99,10 +73,9 @@ var getXssFieldName = (field) => {
   }
   return field.$xssName;
 };
-var getHashCode = (str) => {
+const getHashCode = (str) => {
   let hash = 0;
-  if (str.length == 0)
-    return hash;
+  if (str.length == 0) return hash;
   for (let i = 0; i < str.length; i++) {
     let tmpChar = str.charCodeAt(i);
     hash = (hash << 5) - hash + tmpChar;
@@ -110,13 +83,13 @@ var getHashCode = (str) => {
   }
   return String(hash).replaceAll(/-/g, "_");
 };
-var isHiddenField = (field) => {
+const isHiddenField = (field) => {
   if (field.renderType === "hidden") {
     return true;
   }
   return false;
 };
-var templateToElement = (htmlTemplate) => {
+const templateToElement = (htmlTemplate) => {
   const template = document.createElement("template");
   template.innerHTML = htmlTemplate;
   return template.content.firstElementChild;
@@ -132,12 +105,12 @@ function isPlainObject(obj) {
   return Object.getPrototypeOf(obj) === proto;
 }
 function isObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
+  return typeof value === "object" && value !== null && !isArray(value);
 }
 function isDate(value) {
   return value instanceof Date && !isNaN(value.valueOf());
 }
-var merge = (...value) => {
+const merge = (...value) => {
   let reval = value[0];
   if (!isPlainObject(reval) || isEmpty(reval)) {
     return reval;
@@ -206,17 +179,15 @@ function cloneArrayDeep(dst, src) {
   }
   return dst;
 }
-
-// src/renderer/Render.ts
-var Render = class _Render {
+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)
-      rowElement.querySelector(".df-tooltip")?.setAttribute("tooltip", field.tooltip);
+    if (field.tooltip) (_a = rowElement.querySelector(".df-tooltip")) == null ? void 0 : _a.setAttribute("tooltip", field.tooltip);
   }
   setDefaultInfo() {
     if (isUndefined(this.field.defaultValue)) {
@@ -235,7 +206,8 @@ var Render = class _Render {
     this.setDisabled(this.field.disabled ?? false);
   }
   addChildField(element) {
-    this.rowElement.querySelector(".df-field-container")?.append(element);
+    var _a;
+    (_a = this.rowElement.querySelector(".df-field-container")) == null ? void 0 : _a.append(element);
   }
   static isDataRender() {
     return true;
@@ -249,9 +221,12 @@ var Render = class _Render {
   setValueItems(value) {
   }
   static getDescriptionTemplate(field) {
-    return field.description ? `<div class="df-description">${field.description}</div>` : "";
+    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,
@@ -259,9 +234,9 @@ var Render = class _Render {
         oldValue: field.$value,
         value: fieldValue
       };
-      if (field.listItem?.list) {
+      if ((_a = field.listItem) == null ? void 0 : _a.list) {
         let valuesItem = [];
-        const valueKey = _Render.valuesValueKey(field);
+        const valueKey = Render.valuesValueKey(field);
         for (let val of field.listItem.list) {
           let changeVal = val[valueKey];
           if (isString(fieldValue)) {
@@ -308,17 +283,17 @@ var Render = class _Render {
    * @param {string} desc
    */
   setDescription(desc) {
+    var _a;
     const descEle = this.rowElement.querySelector(".df-description");
     if (descEle) {
-      descEle.innerHTML = desc;
+      descEle.textContent = desc;
     } else {
       const fieldEle = this.rowElement.querySelector(".df-field");
       if (fieldEle) {
-        const parser = new DOMParser();
+        const parser2 = new DOMParser();
         this.field.description = desc;
-        const descEle2 = parser.parseFromString(_Render.getDescriptionTemplate(this.field), "text/html").querySelector(".df-description");
-        if (descEle2)
-          fieldEle.parentNode?.insertBefore(descEle2, fieldEle.nextSibling);
+        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);
       }
     }
   }
@@ -337,10 +312,12 @@ var Render = class _Render {
   commonValidator() {
   }
   static valuesValueKey(field) {
-    return field.listItem?.valueField ? field.listItem.valueField : "value";
+    var _a;
+    return ((_a = field.listItem) == null ? void 0 : _a.valueField) ? field.listItem.valueField : "value";
   }
   static valuesLabelKey(field) {
-    return field.listItem?.labelField ? field.listItem.labelField : "label";
+    var _a;
+    return ((_a = field.listItem) == null ? void 0 : _a.labelField) ? field.listItem.labelField : "label";
   }
   static valuesLabelValue(label, val) {
     let replaceFlag = false;
@@ -353,10 +330,8 @@ var Render = class _Render {
     }
     return val[label] || "";
   }
-};
-
-// src/rule/regexpValidator.ts
-var regexp = {
+}
+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*)?$/,
@@ -369,7 +344,7 @@ var regexp = {
   "upper-char-special": /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[#?!@$%^&*-])/,
   "upper-char-special-number": /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]/
 };
-var regexpValidator = (value, field, result) => {
+const regexpValidator = (value, field, result) => {
   if (!field.$instance.isEnableView()) {
     return { name: field.name, constraint: [] };
   }
@@ -385,9 +360,7 @@ var regexpValidator = (value, field, result) => {
   }
   return result;
 };
-
-// src/rule/validator.ts
-var validator = (value, field, result) => {
+const validator = (value, field, result) => {
   if (field.validator) {
     result.validator = field.validator(field, value);
     if (typeof result.validator === "object") {
@@ -416,9 +389,7 @@ var validator = (value, field, result) => {
   }
   return true;
 };
-
-// src/rule/numberValidator.ts
-var numberValidator = (value, field) => {
+const numberValidator = (value, field) => {
   if (!field.$instance.isEnableView()) {
     return true;
   }
@@ -483,15 +454,13 @@ var numberValidator = (value, field) => {
   }
   return true;
 };
-
-// src/util/validUtils.ts
-var invalidMessage = (field, rowElement, validResult) => {
+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(".help-message");
+    const helpMessageElement = rowElement.querySelector(".df-help-message");
     if (helpMessageElement) {
       helpMessageElement.innerHTML = "";
     }
@@ -502,11 +471,11 @@ var invalidMessage = (field, rowElement, validResult) => {
     rowElement.classList.add("invalid");
   }
   if (validResult !== false) {
-    const message2 = Lanauage_default.validMessage(field, validResult);
+    const message2 = Language3.validMessage(field, validResult);
     if (validResult.message) {
       message2.push(validResult.message);
     }
-    const helpMessageElement = rowElement.querySelector(".help-message");
+    const helpMessageElement = rowElement.querySelector(".df-help-message");
     if (helpMessageElement && message2.length > 0) {
       const msgHtml = [];
       message2.forEach((item) => {
@@ -516,19 +485,17 @@ var invalidMessage = (field, rowElement, validResult) => {
     }
   }
 };
-var resetRowElementStyleClass = (rowElement) => {
+const resetRowElementStyleClass = (rowElement) => {
   rowElement.classList.remove("invalid");
   rowElement.classList.remove("valid");
 };
-
-// src/event/renderEvents.ts
-var inputEvent = (field, element, renderInfo) => {
+const inputEvent = (field, element, renderInfo) => {
   element.addEventListener("input", (e) => {
     customChangeEventCall(field, e, renderInfo, renderInfo.getValue());
     renderInfo.valid();
   });
 };
-var numberInputEvent = (field, element, renderInfo) => {
+const numberInputEvent = (field, element, renderInfo) => {
   element.addEventListener("keyup", (e) => {
     const val = e.target.value;
     if (!isNumber(val)) {
@@ -539,18 +506,16 @@ var numberInputEvent = (field, element, renderInfo) => {
     renderInfo.valid();
   });
 };
-var dropdownChangeEvent = (field, element, renderInfo) => {
+const dropdownChangeEvent = (field, element, renderInfo) => {
   element.addEventListener("change", (e) => {
     customChangeEventCall(field, e, renderInfo, renderInfo.getValue());
     renderInfo.valid();
   });
 };
-var customChangeEventCall = (field, e, renderInfo, value) => {
+const customChangeEventCall = (field, e, renderInfo, value) => {
   renderInfo.changeEventCall(field, e, renderInfo, value);
 };
-
-// src/renderer/NumberRender.ts
-var NumberRender = class extends Render {
+class NumberRender extends Render {
   constructor(field, rowElement, daraForm) {
     super(daraForm, field, rowElement);
     this.mounted();
@@ -565,10 +530,10 @@ var NumberRender = class extends Render {
     const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
     fieldContainerElement.innerHTML = `
         <div class="df-field">
-            <input type="text" name="${field.$xssName}" class="form-field number help-icon" />
+            <input type="text" name="${field.$xssName}" class="df-form-field df-number df-help-icon" />
         </div> 
         ${Render.getDescriptionTemplate(field)}
-        <div class="help-message"></div>
+        <div class="df-help-message"></div>
        `;
     this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
   }
@@ -596,10 +561,8 @@ var NumberRender = class extends Render {
     invalidMessage(this.field, this.rowElement, validResult);
     return validResult;
   }
-};
-
-// src/rule/stringValidator.ts
-var stringValidator = (value, field) => {
+}
+const stringValidator = (value, field) => {
   if (!field.$instance.isEnableView()) {
     return true;
   }
@@ -639,9 +602,7 @@ var stringValidator = (value, field) => {
   }
   return true;
 };
-
-// src/renderer/TextAreaRender.ts
-var TextAreaRender = class extends Render {
+class TextAreaRender extends Render {
   constructor(field, rowElement, daraForm) {
     super(daraForm, field, rowElement);
     this.mounted();
@@ -652,16 +613,17 @@ var TextAreaRender = class extends Render {
     inputEvent(this.field, this.element, this);
   }
   createField() {
+    var _a;
     const field = this.field;
     const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
-    let rows = field.customOptions?.rows;
+    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="form-field textarea help-icon"></textarea>
+            <textarea name="${field.$xssName}" rows="${rows}" class="df-form-field df-textarea df-help-icon"></textarea>
         </div> 
         ${Render.getDescriptionTemplate(field)}
-        <div class="help-message"></div>
+        <div class="df-help-message"></div>
     `;
     this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
   }
@@ -689,19 +651,18 @@ var TextAreaRender = class extends Render {
     invalidMessage(this.field, this.rowElement, validResult);
     return validResult;
   }
-};
-
-// src/renderer/DropdownRender.ts
-var DropdownRender = class _DropdownRender extends Render {
+}
+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);
+    const valueKey = DropdownRender.valuesValueKey(field);
     let initDefaultValueFlag = false;
-    this.field.listItem?.list?.forEach((item) => {
+    (_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;
@@ -713,8 +674,8 @@ var DropdownRender = class _DropdownRender extends Render {
     if (initDefaultValueFlag) {
       this.defaultSelected = initDefaultValue;
     } else if (!this.defaultSelected) {
-      if (field.customOptions?.disableDefaultOption === true) {
-        this.defaultSelected = this.field.listItem?.list?.length > 0 ? this.field.listItem.list[0][valueKey] || "" : "";
+      if (((_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)) {
@@ -730,11 +691,11 @@ var DropdownRender = class _DropdownRender extends Render {
   createField() {
     const field = this.field;
     const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
-    let template = ` <div class="df-field"><select name="${field.$xssName}" class="form-field dropdown">
+    let template = ` <div class="df-field"><select name="${field.$xssName}" class="df-form-field df-dropdown">
           ${this.dropdownValuesTemplate(field)}
-          </select> <i class="help-icon"></i></div>
+          </select> <i class="df-help-icon"></i></div>
                 ${Render.getDescriptionTemplate(field)}
-      <div class="help-message"></div>
+      <div class="df-help-message"></div>
     `;
     fieldContainerElement.innerHTML = template;
     this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
@@ -786,13 +747,14 @@ var DropdownRender = class _DropdownRender extends Render {
     return validResult;
   }
   dropdownValuesTemplate(field) {
+    var _a, _b, _c;
     const labelKey = Render.valuesLabelKey(field);
     const valueKey = Render.valuesValueKey(field);
     let template = "";
-    if (field.customOptions?.disableDefaultOption !== true) {
-      template += `<option value="">${Lanauage_default.getMessage("selection")}</option>`;
+    if (((_a = field.rendererOptions) == null ? void 0 : _a.disableDefaultOption) !== true) {
+      template += `<option value="">${Language3.getMessage("selection")}</option>`;
     }
-    field.listItem?.list?.forEach((val) => {
+    (_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>`;
@@ -802,10 +764,8 @@ var DropdownRender = class _DropdownRender extends Render {
     });
     return template;
   }
-};
-
-// src/renderer/TextRender.ts
-var TextRender = class extends Render {
+}
+class TextRender extends Render {
   constructor(field, rowElement, daraForm) {
     super(daraForm, field, rowElement);
     this.mounted();
@@ -820,10 +780,10 @@ var TextRender = class extends Render {
     const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
     fieldContainerElement.innerHTML = `
       <div class="df-field">
-       <input type="text" name="${field.$xssName}" class="form-field text help-icon" />
+       <input type="text" name="${field.$xssName}" class="df-form-field df-text df-help-icon" />
       </div>
       ${Render.getDescriptionTemplate(field)}
-      <div class="help-message"></div>
+      <div class="df-help-message"></div>
       `;
     this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
   }
@@ -851,11 +811,74 @@ var TextRender = class extends Render {
     invalidMessage(this.field, this.rowElement, validResult);
     return validResult;
   }
-};
-
-// src/renderer/CheckboxRender.ts
-var CheckboxRender = class _CheckboxRender extends Render {
+}
+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 = [];
@@ -867,12 +890,12 @@ var CheckboxRender = class _CheckboxRender extends Render {
         initDefaultValue = [field.defaultValue];
       }
     }
-    const valueKey = _CheckboxRender.valuesValueKey(field);
+    const valueKey = CheckboxRender.valuesValueKey(field);
     if (isUndefined(this.field.listItem)) {
       this.setValueItems([{ label: "", value: "Y" }]);
     }
     let initDefaultValueFlag = false;
-    this.field.listItem?.list?.forEach((item) => {
+    (_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);
@@ -902,25 +925,26 @@ var CheckboxRender = class _CheckboxRender extends Render {
     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="field-group">`);
-    field.listItem?.list?.forEach((val) => {
+    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="field ${field.listItem.orientation == "vertical" ? "vertical" : "horizontal"}">
+          <span class="df-field-item ${orientationClassName(field.listItem.orientation ?? OrientationMap.horizontal)}">
               <label>
-                  <input type="checkbox" name="${fieldName}" value="${checkVal ? replaceXss(checkVal) : ""}" class="form-field checkbox" ${val.selected ? "checked" : ""} ${val.disabled ? "disabled" : ""}  />
+                  <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="daracl-icon help-icon"></i></div></div> ${Render.getDescriptionTemplate(field)}<div class="help-message"></div>`);
+    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) {
@@ -954,7 +978,7 @@ var CheckboxRender = class _CheckboxRender extends Render {
       return checkValue;
     } else {
       const checkElement = this.rowElement.querySelector(`[name="${this.field.$xssName}"]`);
-      if (checkElement?.checked) {
+      if (checkElement == null ? void 0 : checkElement.checked) {
         return checkElement.value ? checkElement.value : true;
       }
       return checkElement.value ? "" : false;
@@ -974,7 +998,7 @@ var CheckboxRender = class _CheckboxRender extends Render {
       return;
     }
     let valueArr = [];
-    if (Array.isArray(value)) {
+    if (isArray(value)) {
       valueArr = value;
     } else {
       valueArr.push(value);
@@ -985,12 +1009,12 @@ var CheckboxRender = class _CheckboxRender extends Render {
     });
     valueArr.forEach((val) => {
       const ele = this.rowElement.querySelector(`[name="${this.field.$xssName}"][value="${val}"]`);
-      if (ele)
-        ele.checked = true;
+      if (ele) ele.checked = true;
     });
   }
   reset() {
-    if (this.field.listItem?.list?.length == 1 && this.defaultCheckValue.length == 1) {
+    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);
@@ -1019,20 +1043,19 @@ var CheckboxRender = class _CheckboxRender extends Render {
     invalidMessage(this.field, this.rowElement, validResult);
     return validResult;
   }
-};
-
-// src/renderer/RadioRender.ts
-var RadioRender = class _RadioRender extends Render {
+}
+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);
+    const valueKey = RadioRender.valuesValueKey(field);
     let initDefaultValueFlag = false;
-    this.field.listItem?.list?.forEach((item) => {
+    (_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;
@@ -1044,7 +1067,7 @@ var RadioRender = class _RadioRender extends Render {
     if (initDefaultValueFlag) {
       this.defaultCheckValue = initDefaultValue;
     } else if (!this.defaultCheckValue) {
-      this.defaultCheckValue = this.field.listItem?.list?.length > 0 ? this.field.listItem?.list[0][valueKey] : "";
+      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();
@@ -1066,28 +1089,29 @@ var RadioRender = class _RadioRender extends Render {
     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="field-group">`);
-    field.listItem?.list?.forEach((val) => {
+    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="field ${field.orientation == "vertical" ? "vertical" : "horizontal"}">
+        `<span class="df-field-item ${orientationClassName(field.orientation ?? OrientationMap.horizontal)}">
         <label>
-            <input type="radio" name="${fieldName}" value="${radioVal}" class="form-field radio" ${val.selected ? "checked" : ""} ${val.disabled ? "disabled" : ""}/>
+            <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="daracl-icon help-icon"></i></div></div>
+    templates.push(`<i class="df-form-icon df-help-icon"></i></div></div>
         ${Render.getDescriptionTemplate(field)}
-     <div class="help-message"></div>
+     <div class="df-help-message"></div>
     `);
     fieldContainerElement.innerHTML = templates.join("");
     this.initEvent();
@@ -1111,7 +1135,8 @@ var RadioRender = class _RadioRender extends Render {
     }
   }
   getValue() {
-    return this.rowElement.querySelector(`[name="${this.field.$xssName}"]:checked`)?.value;
+    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) {
@@ -1162,10 +1187,8 @@ var RadioRender = class _RadioRender extends Render {
     invalidMessage(this.field, this.rowElement, validResult);
     return validResult;
   }
-};
-
-// src/renderer/PasswordRender.ts
-var PasswordRender = class extends Render {
+}
+class PasswordRender extends Render {
   constructor(field, rowElement, daraForm) {
     super(daraForm, field, rowElement);
     this.mounted();
@@ -1180,10 +1203,10 @@ var PasswordRender = class extends Render {
     const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
     fieldContainerElement.innerHTML = `
         <div class="df-field">
-            <input type="password" name="${field.$xssName}" class="form-field password help-icon" autocomplete="off" />
+            <input type="password" name="${field.$xssName}" class="df-form-field df-password df-help-icon" autocomplete="off" />
         </div>
         ${Render.getDescriptionTemplate(field)}
-        <div class="help-message"></div>
+        <div class="df-help-message"></div>
     `;
     this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
   }
@@ -1211,10 +1234,8 @@ var PasswordRender = class extends Render {
     invalidMessage(this.field, this.rowElement, validResult);
     return validResult;
   }
-};
-
-// src/rule/fileValidator.ts
-var fileValidator = (element, field, fileList) => {
+}
+const fileValidator = (element, field, fileList) => {
   const result = { name: field.name, constraint: [] };
   if (field.required && fileList.length < 1) {
     result.constraint.push(RULES.REQUIRED);
@@ -1225,23 +1246,23 @@ var fileValidator = (element, field, fileList) => {
   }
   return true;
 };
-
-// src/renderer/FileRender.ts
-var FileRender = class extends Render {
+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 = field.listItem?.list || [];
+    this.fileList = ((_a = field.listItem) == null ? void 0 : _a.list) || [];
     this.mounted();
     this.setDefaultOption();
   }
   mounted() {
     this.element.addEventListener("change", (e) => {
-      const files = e.target?.files;
+      var _a;
+      const files = (_a = e.target) == null ? void 0 : _a.files;
       if (files) {
         let fileList = [];
         for (let item of files) {
@@ -1262,17 +1283,17 @@ var FileRender = class extends Render {
     const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
     fieldContainerElement.innerHTML = `
     <div class="df-field">
-      <span class="file-wrapper">
-        <label class="file-label">
-          <input type="file" name="${field.$xssName}" class="form-field file" multiple />
-          ${Lanauage_default.getMessage("fileButton")}
+      <span class="df-file-wrapper">
+        <label class="df-file-label">
+          <input type="file" name="${field.$xssName}" class="df-form-field df-file" multiple />
+          ${Language3.getMessage("fileButton")}
         </label>
-        <i class="daracl-icon help-icon"></i>
+        <i class="df-form-icon df-help-icon"></i>
       </span>
     </div>
     ${Render.getDescriptionTemplate(field)}
-    <div class="daracl-file-list"></div>
-    <div class="help-message"></div>
+    <div class="df-file-list"></div>
+    <div class="df-help-message"></div>
     `;
     this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
   }
@@ -1281,8 +1302,7 @@ var FileRender = class extends Render {
     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;
+      if (fileCheckList.length > 0) continue;
       this.fileSeq += 1;
       this.uploadFiles[this.fileSeq] = item;
       let newFileInfo = {
@@ -1300,7 +1320,7 @@ var FileRender = class extends Render {
     }
   }
   setFileList(fileList, initFlag) {
-    const fileListElement = this.rowElement.querySelector(".daracl-file-list");
+    const fileListElement = this.rowElement.querySelector(".df-file-list");
     if (fileListElement) {
       if (initFlag === true) {
         fileListElement.innerHTML = "";
@@ -1308,9 +1328,9 @@ var FileRender = class extends Render {
       const fileTemplateHtml = [];
       fileList.forEach((file) => {
         fileTemplateHtml.push(`
-        <div class="file-item" data-seq="${file.$seq}">
-          ${file.fileId ? '<span class="file-icon download"></span>' : '<span class="file-icon"></span>'} <span class="file-icon remove"></span>
-          <span class="file-name">${file.fileName}</span > 
+        <div class="df-file-item" data-seq="${file.$seq}">
+          ${file.fileId ? '<span class="df-file-icon df-file-download"></span>' : '<span class="df-file-icon df-empty-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(""));
@@ -1327,10 +1347,10 @@ var FileRender = class extends Render {
    * @param fileListElement
    */
   downloadFileEvent(item, fileListElement) {
-    const ele = fileListElement.querySelector(`[data-seq="${item.$seq}"] .download`);
+    const ele = fileListElement.querySelector(`[data-seq="${item.$seq}"] .df-file-download`);
     if (ele) {
       ele.addEventListener("click", (evt) => {
-        const fileItemElement = evt.target.closest(".file-item");
+        const fileItemElement = evt.target.closest(".df-file-item");
         if (fileItemElement) {
           const attrSeq = fileItemElement.getAttribute("data-seq");
           if (attrSeq) {
@@ -1357,10 +1377,10 @@ var FileRender = class extends Render {
    * @param fileListElement
    */
   removeFileEvent(item, fileListElement) {
-    const ele = fileListElement.querySelector(`[data-seq="${item.$seq}"] .remove`);
+    const ele = fileListElement.querySelector(`[data-seq="${item.$seq}"] .df-file-remove`);
     if (ele) {
       ele.addEventListener("click", (evt) => {
-        const fileItemElement = evt.target.closest(".file-item");
+        const fileItemElement = evt.target.closest(".df-file-item");
         if (fileItemElement) {
           const attrSeq = fileItemElement.getAttribute("data-seq");
           if (attrSeq) {
@@ -1396,7 +1416,7 @@ var FileRender = class extends Render {
     this.setFileList(this.fileList, true);
   }
   setValue(value) {
-    if (isArray(value)) {
+    if (core.isArray(value)) {
       this.setValueItems(value);
     }
     this.element.value = "";
@@ -1414,10 +1434,8 @@ var FileRender = class extends Render {
     invalidMessage(this.field, this.rowElement, validResult);
     return validResult;
   }
-};
-
-// src/renderer/CustomRender.ts
-var CustomRender = class extends Render {
+}
+class CustomRender extends Render {
   constructor(field, rowElement, daraForm) {
     super(daraForm, field, rowElement);
     if (field.renderer) {
@@ -1445,7 +1463,7 @@ var CustomRender = class extends Render {
         ${fieldTemplate}
         </div>
           ${Render.getDescriptionTemplate(field)}
-        <div class="help-message"></div>`;
+        <div class="df-help-message"></div>`;
   }
   getValue() {
     if (this.customFunction.getValue) {
@@ -1490,10 +1508,8 @@ var CustomRender = class extends Render {
       this.customFunction.focus.call(this, this.field, this.rowElement);
     }
   }
-};
-
-// src/renderer/GroupRender.ts
-var GroupRender = class extends Render {
+}
+class GroupRender extends Render {
   constructor(field, rowElement, daraForm) {
     super(daraForm, field, rowElement);
   }
@@ -1528,10 +1544,8 @@ var GroupRender = class extends Render {
   }
   focus() {
   }
-};
-
-// src/renderer/HiddenRender.ts
-var HiddenRender = class extends Render {
+}
+class HiddenRender extends Render {
   constructor(field, rowElement, daraForm) {
     super(daraForm, field, rowElement);
     this.field.$value = field.defaultValue;
@@ -1556,17 +1570,16 @@ var HiddenRender = class extends Render {
   valid() {
     return true;
   }
-};
-
-// src/renderer/ButtonRender.ts
-var ButtonRender = class extends Render {
+}
+class ButtonRender extends Render {
   constructor(field, rowElement, daraForm) {
     super(daraForm, field, rowElement);
     this.mounted();
     this.setDefaultOption();
   }
   mounted() {
-    this.rowElement.querySelector(`#${this.field.$key}`)?.addEventListener("click", (evt) => {
+    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);
       }
@@ -1596,13 +1609,11 @@ var ButtonRender = class extends Render {
   valid() {
     return true;
   }
-};
-
-// src/renderer/RangeRender.ts
-var RangeRender = class extends Render {
+}
+class RangeRender extends Render {
   constructor(field, rowElement, daraForm) {
     super(daraForm, field, rowElement);
-    this.rangeNumElement = rowElement.querySelector(".range-num");
+    this.rangeNumElement = rowElement.querySelector(".df-range-num");
     this.mounted();
     this.setDefaultOption();
     this.setDefaultInfo();
@@ -1620,11 +1631,11 @@ var RangeRender = class extends Render {
     const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
     fieldContainerElement.innerHTML = `
         <div class="df-field">
-            <span class="range-num">${field.defaultValue ? field.defaultValue : 0}</span>
-            <input type="range" name="${field.$xssName}" class="form-field range help-icon" min="${field.rule.minimum}" max="${field.rule.maximum}"/>
+            <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="help-message"></div>
+        <div class="df-help-message"></div>
        `;
     this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
   }
@@ -1652,11 +1663,1300 @@ var RangeRender = class extends Render {
     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 core.leftPad(date.getMonth() + 1, 2);
+  },
+  MMM: (date) => {
+    return Lanauage.getMonthsMessage(date.getMonth());
+  },
+  MMMM: (date) => {
+    return Lanauage.getMonthsMessage(date.getMonth(), "full");
+  },
+  D: (date) => {
+    return String(date.getDate());
+  },
+  DD: (date) => {
+    return core.leftPad(date.getDate(), 2);
+  },
+  d: (date) => {
+    return String(date.getDate());
+  },
+  dd: (date) => {
+    return core.leftPad(date.getDate(), 2);
+  },
+  ddd: (date) => {
+    return Lanauage.getWeeksMessage(date.getDay());
+  },
+  dddd: (date) => {
+    return Lanauage.getWeeksMessage(date.getDay(), "full");
+  },
+  H: (date) => {
+    return String(date.getHours());
+  },
+  HH: (date) => {
+    return core.leftPad(date.getHours(), 2);
+  },
+  h: (date) => {
+    return getH(date);
+  },
+  hh: (date) => {
+    return core.leftPad(getH(date), 2);
+  },
+  a: (date) => {
+    return String(date.getFullYear()).slice(-2);
+  },
+  A: (date) => {
+    return getMeridiem(date);
+  },
+  m: (date) => {
+    return String(date.getMinutes());
+  },
+  mm: (date) => {
+    return core.leftPad(date.getMinutes(), 2);
+  },
+  s: (date) => {
+    return String(date.getSeconds());
+  },
+  ss: (date) => {
+    return core.leftPad(date.getSeconds(), 2);
+  },
+  SSS: (date) => {
+    return core.leftPad(date.getMilliseconds(), 3);
+  }
+};
+function getH(date) {
+  let hour = date.getHours();
+  if (hour > 12) {
+    hour -= 12;
+  } else if (hour < 1) {
+    hour = 12;
+  }
+  return hour;
+}
+function getMeridiem(date, isUpper, isShort) {
+  const hour = date.getHours();
+  let m = hour < 12 ? "am" : "pm";
+  m = Lanauage.getMessage(m);
+  m = m.toUpperCase();
+  return m;
+}
+const parser = (dateStr, format2) => {
+  if (dateStr.length > 1e3) {
+    return null;
+  }
+  format2 = format2 || DEFAULT_FORMAT.date;
+  const dateInfo = {
+    year: (/* @__PURE__ */ new Date()).getFullYear(),
+    month: 0,
+    day: 1,
+    hour: 0,
+    minute: 0,
+    second: 0,
+    millisecond: 0,
+    isPm: false,
+    isH: false,
+    charIdx: 0
+  };
+  const len = format2.length;
+  let startIdx = 0;
+  for (let i = 0; i < len; ) {
+    let minLen = Math.min(MAX_CHAR_LENGTH, len - i);
+    let j = minLen;
+    for (; j > 0; j--) {
+      const v = format2.substring(i, i + j);
+      if (EXPRESSIONS_FORMAT.includes(v)) {
+        const expInfo = expressionsFunction[v];
+        const val = matchFind(dateStr.substring(startIdx), expInfo[0]);
+        expInfo[1](dateInfo, val);
+        startIdx += val.length;
+        break;
+      }
+    }
+    if (j < 1) {
+      i += 1;
+      startIdx += 1;
+    } else {
+      i += j;
+    }
+  }
+  if (dateInfo.hour != null && !dateInfo.isH) {
+    if (dateInfo.isPm && +dateInfo.hour !== 12) {
+      dateInfo.hour = +dateInfo.hour + 12;
+    } else if (!dateInfo.isPm && +dateInfo.hour === 12) {
+      dateInfo.hour = 0;
+    }
+  }
+  let date;
+  date = new Date(dateInfo.year, dateInfo.month, dateInfo.day, dateInfo.hour, dateInfo.minute, dateInfo.second, dateInfo.millisecond);
+  return date;
+};
+const matchFind = (val, regexp2) => {
+  const match = regexp2.exec(val);
+  return match == null ? "" : match[0];
+};
+const digitsCheck = {
+  twoOptional: /\d\d?/,
+  two: /\d\d/,
+  three: /\d{3}/,
+  four: /\d{4}/
+};
+const word = /[^\s]+/;
+const expressionsFunction = {
+  YY: [
+    digitsCheck["two"],
+    (dateInfo, val) => {
+      dateInfo.year = +(("" + (/* @__PURE__ */ new Date()).getFullYear()).substring(0, 2) + val);
+      return dateInfo;
+    }
+  ],
+  YYYY: [
+    digitsCheck["four"],
+    (dateInfo, val) => {
+      dateInfo.year = +val;
+      return dateInfo;
+    }
+  ],
+  M: [
+    digitsCheck["twoOptional"],
+    (dateInfo, val) => {
+      dateInfo.month = +val - 1;
+      return dateInfo;
+    }
+  ],
+  MM: [
+    digitsCheck["two"],
+    (dateInfo, val) => {
+      dateInfo.month = +val - 1;
+      return dateInfo;
+    }
+  ],
+  MMM: [
+    word,
+    (dateInfo, val) => {
+      dateInfo.month = Lanauage.getMonthsIdx(val, "abbr");
+      return dateInfo;
+    }
+  ],
+  MMMM: [
+    word,
+    (dateInfo, val) => {
+      dateInfo.month = Lanauage.getMonthsIdx(val, "full");
+      return dateInfo;
+    }
+  ],
+  D: [
+    digitsCheck["twoOptional"],
+    (dateInfo, val) => {
+      dateInfo.day = +val;
+      return dateInfo;
+    }
+  ],
+  DD: [
+    digitsCheck["two"],
+    (dateInfo, val) => {
+      dateInfo.day = +val;
+      return dateInfo;
+    }
+  ],
+  d: [
+    digitsCheck["twoOptional"],
+    (dateInfo, val) => {
+      dateInfo.day = +val;
+      return dateInfo;
+    }
+  ],
+  dd: [
+    digitsCheck["two"],
+    (dateInfo, val) => {
+      dateInfo.day = +val;
+      return dateInfo;
+    }
+  ],
+  ddd: [
+    word,
+    (dateInfo, val) => {
+      return dateInfo;
+    }
+  ],
+  dddd: [
+    word,
+    (dateInfo, val) => {
+      return dateInfo;
+    }
+  ],
+  H: [
+    digitsCheck["twoOptional"],
+    (dateInfo, val) => {
+      dateInfo.hour = +val;
+      dateInfo.isH = true;
+      return dateInfo;
+    }
+  ],
+  HH: [
+    digitsCheck["two"],
+    (dateInfo, val) => {
+      dateInfo.hour = +val;
+      dateInfo.isH = true;
+      return dateInfo;
+    }
+  ],
+  h: [
+    digitsCheck["twoOptional"],
+    (dateInfo, val) => {
+      dateInfo.hour = +val;
+      return dateInfo;
+    }
+  ],
+  hh: [
+    digitsCheck["two"],
+    (dateInfo, val) => {
+      dateInfo.hour = +val;
+      return dateInfo;
+    }
+  ],
+  a: [
+    word,
+    (dateInfo, val) => {
+      if (Lanauage.getMessage("am") != val.toLowerCase()) {
+        dateInfo.isPm = true;
+      }
+      return dateInfo;
+    }
+  ],
+  A: [
+    word,
+    (dateInfo, val) => {
+      if (Lanauage.getMessage("am") != val.toLowerCase()) {
+        dateInfo.isPm = true;
+      }
+      return dateInfo;
+    }
+  ],
+  m: [
+    digitsCheck["twoOptional"],
+    (dateInfo, val) => {
+      dateInfo.minute = +val;
+      return dateInfo;
+    }
+  ],
+  mm: [
+    digitsCheck["two"],
+    (dateInfo, val) => {
+      dateInfo.minute = +val;
+      return dateInfo;
+    }
+  ],
+  s: [
+    digitsCheck["twoOptional"],
+    (dateInfo, val) => {
+      dateInfo.second = +val;
+      return dateInfo;
+    }
+  ],
+  ss: [
+    digitsCheck["two"],
+    (dateInfo, val) => {
+      dateInfo.second = +val;
+      return dateInfo;
+    }
+  ],
+  SSS: [
+    digitsCheck["three"],
+    (dateInfo, val) => {
+      dateInfo.millisecond = +val;
+      return dateInfo;
+    }
+  ]
 };
+function closestElement(el, checkElement) {
+  let currentEl = el;
+  while (currentEl) {
+    if (currentEl == checkElement) {
+      return true;
+    }
+    currentEl = currentEl.parentElement;
+  }
+  return false;
+}
+class DaraDate {
+  constructor(dt) {
+    this.date = dt;
+  }
+  setYear(num) {
+    this.date.setFullYear(num);
+    return this;
+  }
+  addYear(num) {
+    this.date.setFullYear(this.date.getFullYear() + num);
+    return this;
+  }
+  addMonth(num) {
+    this.date.setMonth(this.date.getMonth() + num);
+    return this;
+  }
+  setMonth(num) {
+    this.date.setMonth(num);
+    return this;
+  }
+  setDate(num) {
+    this.date.setDate(num);
+    return this;
+  }
+  addDate(num) {
+    this.date.setDate(this.date.getDate() + num);
+    return this;
+  }
+  addWeek(num) {
+    this.date.setDate(this.date.getDate() + num * 7);
+    return this;
+  }
+  addHours(num) {
+    this.date.setHours(this.date.getHours() + num);
+    return this;
+  }
+  setHour(num) {
+    this.date.setHours(num);
+    return this;
+  }
+  addMinutes(num) {
+    this.date.setMinutes(this.date.getMinutes() + num);
+    return this;
+  }
+  setMinutes(num) {
+    this.date.setMinutes(num);
+    return this;
+  }
+  addSeconds(num) {
+    this.date.setSeconds(this.date.getSeconds() + num);
+    return this;
+  }
+  addMilliseconds(num) {
+    this.date.setMilliseconds(this.date.getMilliseconds() + num);
+    return this;
+  }
+  compare(date) {
+    if (this.date.valueOf() < date.valueOf()) {
+      return -1;
+    } else if (this.date.valueOf() > date.valueOf()) {
+      return 1;
+    }
+    return 0;
+  }
+  getYear() {
+    return this.date.getFullYear();
+  }
+  getMonth() {
+    return this.date.getMonth() + 1;
+  }
+  getDate() {
+    return this.date.getDate();
+  }
+  getDay() {
+    return this.date.getDay();
+  }
+  getTime() {
+    return this.date.getTime();
+  }
+  format(format$1) {
+    return format(this.date, format$1);
+  }
+  clone() {
+    return new DaraDate(new Date(this.date.valueOf()));
+  }
+}
+let DEFAULT_OPTIONS$1 = {
+  inline: false,
+  // layer or innerhtml
+  weekStartDay: 0,
+  initialDate: "",
+  autoClose: true,
+  isRTL: false,
+  mode: DateViewMode.date,
+  enableTodayBtn: false,
+  showMonthAfterYear: false,
+  isPositionFixed: false,
+  format: "",
+  zIndex: 1e3,
+  minDate: "",
+  maxDate: "",
+  beforeDrawDate: (dt) => {
+    return {
+      check: false,
+      style: "",
+      tooltip: ""
+    };
+  }
+};
+function hiddenElement() {
+  var _a;
+  if (document.getElementById("hiddenDaraDatetimeElement") == null) {
+    (_a = document.querySelector("body")) == null ? void 0 : _a.insertAdjacentHTML("beforeend", `<div id="hiddenDaraDatetimeElement" class="daracl-datetime-hidden"></div>`);
+  }
+  return document.getElementById("hiddenDaraDatetimeElement");
+}
+let daraDatetimeIdx = 0;
+const _DateTimePicker = class _DateTimePicker2 {
+  constructor(selector, options, message2) {
+    var _a;
+    this.isInput = false;
+    this.isVisible = false;
+    this.minYear = -1;
+    this.maxYear = -1;
+    this.minMonth = -1;
+    this.maxMonth = -1;
+    this.dayOrder = [0, 1, 2, 3, 4, 5, 6];
+    this._documentClickEvent = (e) => {
+      if (this.isVisible && e.target != this.targetElement && !closestElement(e.target, this.datetimeElement)) {
+        this.hide();
+      }
+    };
+    this.options = Object.assign({}, DEFAULT_OPTIONS$1, options);
+    daraDatetimeIdx += 1;
+    let selectorElement;
+    if (typeof selector === "string") {
+      selectorElement = document.querySelector(selector);
+    } else {
+      selectorElement = selector;
+    }
+    if (!selectorElement) {
+      throw new Error(`${selector} datetimepicker element not found`);
+    }
+    this._viewMode = Object.keys(DateViewMode).includes(this.options.mode) ? this.options.mode : DateViewMode.date;
+    this.initMode = this._viewMode;
+    Lanauage.set(message2);
+    if (this.initMode == DateViewMode.year) {
+      this.dateFormat = this.options.format || DEFAULT_FORMAT.year;
+    } else if (this.initMode == DateViewMode.month) {
+      this.dateFormat = this.options.format || DEFAULT_FORMAT.month;
+    } else if (this.initMode == DateViewMode.time) {
+      this.dateFormat = this.options.format || DEFAULT_FORMAT.time;
+    } else if (this.initMode == DateViewMode.datetime) {
+      this.dateFormat = this.options.format || DEFAULT_FORMAT.datetime;
+    } else {
+      this.dateFormat = this.options.format || DEFAULT_FORMAT.date;
+    }
+    let viewDate;
+    if (this.options.initialDate) {
+      if (typeof this.options.initialDate === "string") {
+        viewDate = new DaraDate(parser(this.options.initialDate, this.dateFormat) || /* @__PURE__ */ new Date());
+      } else {
+        viewDate = new DaraDate(this.options.initialDate);
+      }
+    } else {
+      viewDate = new DaraDate(/* @__PURE__ */ new Date());
+      this.options.initialDate = viewDate.format(this.dateFormat);
+    }
+    this.setWeekDays();
+    this.todayDate = viewDate.format(DEFAULT_FORMAT.date);
+    this.currentDate = viewDate;
+    this.targetElement = selectorElement;
+    this.minDate = this._minDate();
+    this.maxDate = this._maxDate();
+    if (this.options.inline) {
+      this.datetimeElement = selectorElement;
+      this.datetimeElement.className = `daracl-datetime-wrapper ddtp-${daraDatetimeIdx} embed`;
+    } else {
+      this.isInput = true;
+      this.targetElement.setAttribute("value", viewDate.format(this.dateFormat));
+      const datetimeElement = document.createElement("div");
+      datetimeElement.className = `daracl-datetime-wrapper ddtp-${daraDatetimeIdx} layer`;
+      datetimeElement.setAttribute("style", `z-index:${this.options.zIndex};`);
+      (_a = hiddenElement()) == null ? void 0 : _a.appendChild(datetimeElement);
+      this.datetimeElement = datetimeElement;
+      this.initTargetEvent();
+    }
+    this.createDatetimeTemplate();
+    if (this.isTimeMode()) {
+      this.hourInputEle = this.datetimeElement.querySelector(".ddtp-hour");
+      this.minuteInputEle = this.datetimeElement.querySelector(".ddtp-minute");
+    } else {
+      this.hourInputEle = {};
+      this.minuteInputEle = {};
+    }
+    this.changeViewMode(this._viewMode);
+    this.initHeaderEvent();
+    this.initDateEvent();
+    this.initTimeEvent();
+  }
+  setWeekDays() {
+    let weekStartDay = this.options.weekStartDay;
+    if (weekStartDay == 0) return;
+    if (weekStartDay < 0 || weekStartDay > 6) {
+      weekStartDay = 0;
+    }
+    for (let i = 0; i < 7; i++) {
+      let day = weekStartDay + i;
+      this.dayOrder[i] = day < 7 ? day : day - 7;
+    }
+  }
+  static create(selector, options, message2) {
+    return new _DateTimePicker2(selector, options, message2);
+  }
+  /**
+   * default date format setting
+   * @example
+   ```
+  setDefaultFormat({
+    year: "YYYY",
+    month: "YYYY-MM",
+    date: "YYYY-MM-DD",
+    time: "HH:mm",
+    datetime: "YYYY-MM-DD HH:mm",
+  });
+   ```
+   * @public
+   * @static
+   * @param {*} dateFormat
+   */
+  static setDefaultFormat(dateFormat) {
+    Object.assign(DEFAULT_FORMAT, dateFormat);
+  }
+  _minDate() {
+    let minDate = this.options.minDate;
+    if (minDate != "") {
+      if (typeof minDate === "string") {
+        const dt = parser(minDate, this.dateFormat);
+        if (!dt) {
+          return -1;
+        }
+        minDate = dt;
+      }
+      this.minYear = minDate.getFullYear();
+      this.minMonth = +(this.minYear + core.leftPad(minDate.getMonth(), 2));
+      return new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), 0, 0).getTime();
+    }
+    return -1;
+  }
+  _maxDate() {
+    let maxDate = this.options.maxDate;
+    if (maxDate != "") {
+      if (typeof maxDate === "string") {
+        const dt = parser(maxDate, this.dateFormat);
+        if (!dt) {
+          return -1;
+        }
+        maxDate = dt;
+      }
+      this.maxYear = maxDate.getFullYear();
+      this.maxMonth = +(this.maxYear + core.leftPad(maxDate.getMonth(), 2));
+      return new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate(), 23, 59).getTime();
+    }
+    return -1;
+  }
+  set viewMode(mode) {
+    if (this._viewMode === mode) {
+      return;
+    }
+    this._viewMode = mode;
+    this.changeViewMode(mode);
+  }
+  get viewMode() {
+    return this._viewMode;
+  }
+  /**
+   * 모드  change
+   * @param mode
+   */
+  changeViewMode(mode) {
+    var _a;
+    (_a = this.datetimeElement.querySelector(".ddtp-datetime")) == null ? void 0 : _a.setAttribute("view-mode", mode);
+    if (mode === "year") {
+      this.yearDraw();
+    } else if (mode === "month") {
+      this.monthDraw();
+    } else {
+      this.dayDraw();
+    }
+  }
+  /**
+   * init header event
+   *
+   * @public
+   */
+  initHeaderEvent() {
+    var _a, _b, _c, _d;
+    const isRTL = this.options.isRTL;
+    (_a = this.datetimeElement.querySelector(".ddtp-move-btn.prev")) == null ? void 0 : _a.addEventListener("click", (e) => {
+      this.moveDate(isRTL ? "next" : "prev", e);
+    });
+    (_b = this.datetimeElement.querySelector(".ddtp-move-btn.next")) == null ? void 0 : _b.addEventListener("click", (e) => {
+      this.moveDate(isRTL ? "prev" : "next", e);
+    });
+    (_c = this.datetimeElement.querySelector(".ddtp-header-year")) == null ? void 0 : _c.addEventListener("click", (e) => {
+      this.viewMode = DateViewMode.year;
+    });
+    (_d = this.datetimeElement.querySelector(".ddtp-header-month")) == null ? void 0 : _d.addEventListener("click", (e) => {
+      this.viewMode = DateViewMode.month;
+    });
+  }
+  /**
+   * 날짜 달력 이벤트처리.
+   */
+  initDateEvent() {
+    var _a, _b;
+    (_a = this.datetimeElement.querySelector(".ddtp-day-body")) == null ? void 0 : _a.addEventListener("click", (e) => {
+      var _a2;
+      const targetEle = e.target;
+      if (targetEle.classList.contains("ddtp-day") || targetEle.closest(".ddtp-day")) {
+        const selectDate = targetEle.getAttribute("data-day") || "1";
+        const mmDD = selectDate.split(",");
+        this.currentDate.setMonth(+mmDD[0] - 1);
+        this.currentDate.setDate(+mmDD[1]);
+        if (this.isDayDisabled(this.currentDate)) {
+          return;
+        }
+        (_a2 = this.datetimeElement.querySelector(".select")) == null ? void 0 : _a2.classList.remove("select");
+        targetEle.classList.add("select");
+        if (this.isTimeMode()) {
+          this.currentDate.setHour(+this.hourInputEle.value);
+          this.currentDate.setMinutes(+this.minuteInputEle.value);
+        }
+        this.dateChangeEvent(e);
+      }
+    });
+    (_b = this.datetimeElement.querySelector(".ddtp-today")) == null ? void 0 : _b.addEventListener("click", (e) => {
+      const initDate = new DaraDate(parser(this.todayDate, DEFAULT_FORMAT.date) || /* @__PURE__ */ new Date());
+      this.currentDate.setYear(initDate.getYear());
+      this.currentDate.setMonth(initDate.getMonth() - 1);
+      this.currentDate.setDate(initDate.getDate());
+      this.changeViewMode(this.initMode);
+    });
+  }
+  isTimeMode() {
+    return this._viewMode === DateViewMode.time || this._viewMode === DateViewMode.datetime;
+  }
+  getTimeNumberValue(val) {
+    if (!core.isNumeric(val)) {
+      return 0;
+    }
+    return parseInt(val, 10);
+  }
+  /**
+   * 시간 분 설정 이벤트 처리.
+   *
+   * @public
+   */
+  initTimeEvent() {
+    var _a;
+    if (!this.isTimeMode()) return;
+    let hh = this.currentDate.format("HH");
+    const datetimeElement = this.datetimeElement;
+    const hourInputEle = datetimeElement.querySelector(".ddtp-hour");
+    const hourRangeEle = datetimeElement.querySelector(".ddtp-hour-range");
+    hourInputEle.value = hh;
+    hourRangeEle.value = hh;
+    hourInputEle.addEventListener("input", (e) => {
+      const targetElement = e.target;
+      let val = this.getTimeNumberValue(targetElement.value);
+      let addVal = core.leftPadClamp(val, 2, "0");
+      if (parseInt(addVal, 10) > 23) {
+        addVal = "23";
+      }
+      hourInputEle.value = addVal;
+      hourRangeEle.value = addVal;
+    });
+    hourRangeEle.addEventListener("input", (e) => {
+      const targetElement = e.target;
+      hourInputEle.value = core.leftPadClamp(targetElement.value, 2, "0");
+    });
+    let mm = this.currentDate.format("mm");
+    const minuteInputEle = datetimeElement.querySelector(".ddtp-minute");
+    const minuteRangeEle = datetimeElement.querySelector(".ddtp-minute-range");
+    minuteInputEle.value = mm;
+    minuteRangeEle.value = mm;
+    minuteInputEle.addEventListener("input", (e) => {
+      const targetElement = e.target;
+      let val = this.getTimeNumberValue(targetElement.value);
+      let addVal = core.leftPadClamp(val, 2, "0");
+      if (parseInt(addVal, 10) > 59) {
+        addVal = "59";
+      }
+      minuteInputEle.value = addVal;
+      minuteRangeEle.value = addVal;
+    });
+    minuteRangeEle.addEventListener("input", (e) => {
+      const targetElement = e.target;
+      minuteInputEle.value = core.leftPadClamp(targetElement.value, 2, "0");
+    });
+    (_a = datetimeElement.querySelector(".time-select")) == null ? void 0 : _a.addEventListener("click", (e) => {
+      this.currentDate.setHour(+hourInputEle.value);
+      this.currentDate.setMinutes(+minuteInputEle.value);
+      this.dateChangeEvent(e);
+    });
+  }
+  /**
+   * 날짜 이동
+   * @param moveMode // 앞뒤 이동 prev, next
+   * @returns
+   */
+  moveDate(moveMode, e) {
+    if (this._viewMode === DateViewMode.date || this._viewMode === DateViewMode.datetime) {
+      this.currentDate.setDate(1);
+      this.currentDate.addMonth("prev" === moveMode ? -1 : 1);
+      this.dayDraw();
+      return;
+    }
+    if (this._viewMode === DateViewMode.month) {
+      this.currentDate.setDate(1);
+      this.currentDate.addYear("prev" === moveMode ? -1 : 1);
+      this.monthDraw();
+      return;
+    }
+    if (this._viewMode === DateViewMode.year) {
+      this.currentDate.setDate(1);
+      this.currentDate.addYear("prev" === moveMode ? -16 : 16);
+      this.yearDraw();
+    }
+  }
+  /**
+   * get date value
+   *
+   * @returns
+   */
+  getDateValue() {
+    return this.currentDate.format(this.dateFormat);
+  }
+  /**
+   * 옵션 셋팅
+   * @static
+   * @param {DateTimePickerOptions} options
+   */
+  static setOptions(options) {
+    DEFAULT_OPTIONS$1 = Object.assign({}, DEFAULT_OPTIONS$1, options);
+  }
+  /**
+   * 달력 보이기 처리.
+   *
+   * @returns
+   */
+  show() {
+    if (this.isVisible) {
+      return;
+    }
+    this.isVisible = true;
+    const docSize = getDocSize();
+    this.datetimeElement.classList.remove("hide");
+    this.datetimeElement.classList.add("show");
+    const rect = this.targetElement.getBoundingClientRect();
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+    const elementHeight = this.datetimeElement.offsetHeight;
+    const targetElementHeight = this.targetElement.offsetHeight + 2;
+    let left = rect.left + scrollLeft;
+    let top = 0;
+    if (this.options.isPositionFixed) {
+      top = rect.top + targetElementHeight;
+      left = rect.left;
+    } else {
+      if (rect.top + targetElementHeight + elementHeight > docSize.clientHeight && rect.top >= elementHeight) {
+        top = scrollTop + rect.top - elementHeight - 2;
+      } else {
+        top = scrollTop + rect.top + targetElementHeight;
+      }
+    }
+    this.datetimeElement.setAttribute("style", `${this.options.isPositionFixed ? "position:fixed;" : ""}top:${top}px;left:${left}px;z-index:${this.options.zIndex}`);
+    document.addEventListener("click", this._documentClickEvent);
+  }
+  /**
+   * 달력 숨기기
+   */
+  hide() {
+    this.isVisible = false;
+    if (this.options.onClose) {
+      if (this.options.onClose() === false) {
+        return;
+      }
+    }
+    this.datetimeElement.classList.remove("show");
+    this.datetimeElement.classList.add("hide");
+    document.removeEventListener("click", this._documentClickEvent);
+  }
+  /**
+   * 타켓 이벤트 처리.
+   */
+  initTargetEvent() {
+    if (this.targetElement) {
+      this.targetElement.addEventListener("click", (e) => {
+        this.show();
+      });
+    }
+  }
+  /**
+   * 날짜 변경후 이벤트
+   */
+  afterChangeDatepicker() {
+    const formatValue = this.currentDate.format(this.dateFormat);
+    if (this.options.afterChangeDatepicker && core.isFunction(this.options.afterChangeDatepicker)) {
+      this.options.afterChangeDatepicker(formatValue, this.viewMode);
+    }
+  }
+  /**
+   * 날짜 변경 전 이벤트.
+   * @returns void
+   */
+  beforeChangeDatepicker() {
+    const formatValue = this.currentDate.format(this.dateFormat);
+    if (this.options.beforeChangeDatepicker && core.isFunction(this.options.beforeChangeDatepicker)) {
+      const reval = this.options.beforeChangeDatepicker(formatValue, (result) => {
+        if (result === false) {
+          return;
+        }
+        this.refresh(false);
+      });
+      if (reval === false) {
+        return;
+      }
+      this.refresh(false);
+      return;
+    }
+    this.refresh(false);
+  }
+  dateChangeEvent(e) {
+    const formatValue = this.currentDate.format(this.dateFormat);
+    if (this.options.onSelect) {
+      if (this.options.onSelect(formatValue, this.viewMode, e) === false) {
+        return;
+      }
+    }
+    if (this.isInput) {
+      this.targetElement.setAttribute("value", formatValue);
+    }
+    if (!this.options.inline && this.options.autoClose) {
+      this.hide();
+    }
+  }
+  /**
+   *  datepicker template  그리기
+   */
+  createDatetimeTemplate() {
+    const showMonthAfterYear = this.options.showMonthAfterYear;
+    let datetimeTemplate = `<div class="ddtp-datetime ${this.options.isRTL ? "rtl" : ""}" view-mode="${this._viewMode}">
+			<div class="ddtp-header">
+                <span class="${showMonthAfterYear ? "ddtp-header-year" : "ddtp-header-month"}"></span>
+                <span class="${showMonthAfterYear ? "ddtp-header-month" : "ddtp-header-year"}"></span>
+
+                <span class="ddtp-date-move">  
+                    <a href="javascript:;" class="ddtp-move-btn prev">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
+                    </a>
+                    <a href="javascript:;" class="ddtp-move-btn next">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+                    </a> 
+                </span>
+			</div>
+            <div class="ddtp-body">
+                <table class="ddtp-days">
+                    <thead class="ddtp-day-header">
+                        <tr>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[0]]}">${Lanauage.getWeeksMessage(this.dayOrder[0])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[1]]}">${Lanauage.getWeeksMessage(this.dayOrder[1])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[2]]}">${Lanauage.getWeeksMessage(this.dayOrder[2])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[3]]}">${Lanauage.getWeeksMessage(this.dayOrder[3])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[4]]}">${Lanauage.getWeeksMessage(this.dayOrder[4])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[5]]}">${Lanauage.getWeeksMessage(this.dayOrder[5])}</td>		
+                            <td class="ddtp-day-label ${DAY_STYLE_CLASS[this.dayOrder[6]]}">${Lanauage.getWeeksMessage(this.dayOrder[6])}</td>		
+                        </tr>
+                    </thead>
+                    <tbody class="ddtp-day-body">
+                    </tbody>
+                    
+                    <tfoot class="ddtp-day-footer">
+                        <td colspan="7">
+                            <div style="width:99%;text-align:center;margin-top: 5px;${this.options.enableTodayBtn ? "" : "display:none;"}"><button type="button" class="ddtp-today">${Lanauage.getMessage("today")}</button></div>
+                            <div class="footer-tooltip"></div>
+                        </td>
+                    </tfoot>
+                </table>
+
+                <div class="ddtp-times">
+                        <div class="time-container">
+                            <div class="ddtp-time">
+                                <span>H: </span><input type="number" class="ddtp-hour" min="0" max="23" maxlength="2">
+                                <input type="range" min="0" max="23" class="ddtp-hour-range">
+                            </div>
+                            <div class="ddtp-time">
+                                <span>M: </span><input type="number" class="ddtp-minute" min="0" max="59" size="2" maxlength="2">
+                                <input type="range" min="0" max="59" class="ddtp-minute-range">
+                            </div>
+                        </div>
+                        <div class="ddtp-btn">
+                            <button type="button" class="time-select">${Lanauage.getMessage("ok")}</button>
+                        </div>
+                </div>
 
-// src/renderer/DateRender.ts
-var import_datetimepicker = __toESM(require("@daracl/datetimepicker"));
-var DateRender = class extends Render {
+                <div class="ddtp-months">
+                </div>
+
+                <div class="ddtp-years">
+                </div>
+            </div>
+        </div>`;
+    this.datetimeElement.innerHTML = datetimeTemplate;
+  }
+  refresh(beforeChangeDatepickerCheck) {
+    if (this._viewMode === DateViewMode.date || this._viewMode === DateViewMode.datetime) {
+      this.dayDraw(beforeChangeDatepickerCheck);
+      return;
+    }
+    if (this._viewMode === DateViewMode.month) {
+      this.monthDraw(beforeChangeDatepickerCheck);
+      return;
+    }
+    if (this._viewMode === DateViewMode.year) {
+      this.yearDraw(beforeChangeDatepickerCheck);
+    }
+  }
+  /**
+   * 년 달력 그리기
+   */
+  yearDraw(beforeChangeDatepickerCheck) {
+    var _a;
+    const currentYear = this.currentDate.format("YYYY");
+    if (beforeChangeDatepickerCheck !== false && this.initMode == DateViewMode.year) {
+      this.beforeChangeDatepicker();
+      return;
+    }
+    const startYear = +currentYear - 8;
+    this.datetimeElement.querySelector(".ddtp-header-year").textContent = `${startYear} ~ ${startYear + 15}`;
+    const beforeDrawDateFlag = core.isFunction(this.options.beforeDrawDate);
+    const beforeDrawDateFn = beforeDrawDateFlag ? this.options.beforeDrawDate : false;
+    const calHTML = [];
+    for (let i = 0; i < 16; i++) {
+      const year = startYear + i;
+      const disabled = this.isYearDisabled(year);
+      let addStylceClass = disabled ? " disabled" : "";
+      let tooltip = "";
+      if (beforeDrawDateFlag && beforeDrawDateFn) {
+        const reval = beforeDrawDateFn({ mode: this._viewMode, date: year });
+        addStylceClass += reval.style ? " " + reval.style : "";
+        tooltip = reval.tooltip;
+        tooltip = tooltip ? `title="${tooltip}"` : "";
+      }
+      calHTML.push(`<div class="ddtp-year ${addStylceClass}" data-year="${year}" ${tooltip}>${year}</div>`);
+    }
+    this.datetimeElement.querySelector(".ddtp-years").innerHTML = calHTML.join("");
+    if (this.initMode == DateViewMode.year) {
+      this.afterChangeDatepicker();
+    }
+    (_a = this.datetimeElement.querySelectorAll(".ddtp-year")) == null ? void 0 : _a.forEach((yearEle) => {
+      yearEle.addEventListener("click", (e) => {
+        const targetEle = e.target;
+        if (targetEle) {
+          const year = targetEle.getAttribute("data-year");
+          if (year) {
+            const numYear = +year;
+            if (this.isYearDisabled(numYear)) {
+              return;
+            }
+            if (this.initMode == DateViewMode.year) {
+              if (this.isYearDisabled(numYear)) {
+                return;
+              }
+              this.currentDate.setYear(numYear);
+              this.dateChangeEvent(e);
+              return;
+            }
+            this.currentDate.setYear(numYear);
+            this.viewMode = this.initMode;
+          }
+        }
+      });
+    });
+  }
+  /**
+   * 월 달력 그리기
+   */
+  monthDraw(beforeChangeDatepickerCheck) {
+    var _a;
+    if (beforeChangeDatepickerCheck !== false && this.initMode == DateViewMode.month) {
+      this.beforeChangeDatepicker();
+      return;
+    }
+    const year = this.currentDate.format("YYYY");
+    this.datetimeElement.querySelector(".ddtp-header-year").textContent = `${year}`;
+    const monthElements = this.datetimeElement.querySelectorAll(".ddtp-months > .ddtp-month");
+    if (monthElements.length > 0) {
+      if (this.isYearDisabled(+year)) {
+        monthElements.forEach((monthEle) => {
+          if (!monthEle.classList.contains("disabled")) {
+            monthEle.classList.add("disabled");
+          }
+        });
+        return;
+      }
+      monthElements.forEach((monthEle, idx) => {
+        if (this.isMonthDisabled(+year, idx)) {
+          if (!monthEle.classList.contains("disabled")) {
+            monthEle.classList.add("disabled");
+          }
+        } else {
+          monthEle.classList.remove("disabled");
+        }
+      });
+      if (this.initMode == DateViewMode.month) {
+        this.afterChangeDatepicker();
+      }
+      return;
+    }
+    this.datetimeElement.querySelector(".ddtp-header-month").textContent = this.currentDate.format("MMMM");
+    const beforeDrawDateFlag = core.isFunction(this.options.beforeDrawDate);
+    const beforeDrawDateFn = beforeDrawDateFlag ? this.options.beforeDrawDate : false;
+    const calHTML = [];
+    for (let i = 0; i < 12; i++) {
+      const disabled = this.isMonthDisabled(+year, i);
+      let addStylceClass = disabled ? " disabled" : "";
+      let tooltip = "";
+      if (beforeDrawDateFlag && beforeDrawDateFn) {
+        const reval = beforeDrawDateFn({ mode: this._viewMode, date: year + "/" + (i + 1) });
+        addStylceClass += reval.style ? " " + reval.style : "";
+        tooltip = reval.tooltip;
+        tooltip = tooltip ? `title="${tooltip}"` : "";
+      }
+      calHTML.push(`<div class="ddtp-month ${addStylceClass}" data-month="${i}" ${tooltip}>${Lanauage.getMonthsMessage(i, "abbr")}</div>`);
+    }
+    this.datetimeElement.querySelector(".ddtp-months").innerHTML = calHTML.join("");
+    if (this.initMode == DateViewMode.month) {
+      this.afterChangeDatepicker();
+    }
+    (_a = this.datetimeElement.querySelectorAll(".ddtp-month")) == null ? void 0 : _a.forEach((monthEle) => {
+      monthEle.addEventListener("click", (e) => {
+        const targetEle = e.target;
+        if (targetEle) {
+          const month = targetEle.getAttribute("data-month");
+          if (month) {
+            if (this.isMonthDisabled(this.currentDate.getYear(), +month)) {
+              return false;
+            }
+            if (this.initMode == DateViewMode.month) {
+              this.currentDate.setMonth(+month);
+              this.dateChangeEvent(e);
+              return;
+            }
+            this.currentDate.setMonth(+month);
+            this.viewMode = this.initMode;
+            this.dayDraw();
+          }
+        }
+      });
+    });
+  }
+  /**
+   * 날짜 그리기
+   */
+  dayDraw(beforeChangeDatepickerCheck) {
+    if (beforeChangeDatepickerCheck !== false && (this.initMode == DateViewMode.date || this.initMode == DateViewMode.datetime)) {
+      this.beforeChangeDatepicker();
+      return;
+    }
+    let monthFirstDate = this.currentDate.clone();
+    const currentMonth = monthFirstDate.getMonth();
+    monthFirstDate.setDate(1);
+    this.datetimeElement.querySelector(".ddtp-header-year").textContent = monthFirstDate.format("YYYY");
+    this.datetimeElement.querySelector(".ddtp-header-month").textContent = monthFirstDate.format("MMMM");
+    let day = monthFirstDate.getDay();
+    day = day - this.dayOrder[0];
+    if (day >= 0) {
+      monthFirstDate.addDate(-day);
+    } else {
+      monthFirstDate.addDate(-(7 + day));
+    }
+    const beforeDrawDateFlag = core.isFunction(this.options.beforeDrawDate);
+    const beforeDrawDateFn = beforeDrawDateFlag ? this.options.beforeDrawDate : false;
+    const calHTML = [];
+    for (let i = 0; i < 42; i++) {
+      let dateItem;
+      if (i == 0) {
+        dateItem = monthFirstDate;
+      } else {
+        dateItem = monthFirstDate.clone().addDate(i);
+      }
+      const dateItemFormat = dateItem.format(DEFAULT_FORMAT.date);
+      if (i % 7 == 0) {
+        calHTML.push((i == 0 ? "" : "</tr>") + "<tr>");
+      }
+      let disabled = this.isDayDisabled(dateItem);
+      let addStylceClass = DAY_STYLE_CLASS[this.dayOrder[i % 7]];
+      const dateItemMonth = dateItem.getMonth();
+      if (dateItemMonth != currentMonth) {
+        if (dateItemMonth < currentMonth) {
+          addStylceClass += dateItemMonth == 1 ? " new" : " old";
+        } else {
+          addStylceClass += currentMonth == 1 && dateItemMonth == 12 ? " old" : " new";
+        }
+      }
+      addStylceClass += this.todayDate == dateItemFormat ? " ddtp-today" : "";
+      addStylceClass += disabled ? " disabled" : "";
+      let tooltip = "";
+      if (beforeDrawDateFlag && beforeDrawDateFn) {
+        const reval = beforeDrawDateFn({ mode: this._viewMode, item: dateItem, date: dateItem.format(this.dateFormat) });
+        addStylceClass += reval.style ? " " + reval.style : "";
+        addStylceClass += reval.check ? " ddtp-event" : "";
+        tooltip = reval.tooltip;
+        tooltip = tooltip ? `title="${tooltip}"` : "";
+      }
+      calHTML.push(`<td class="ddtp-day ${addStylceClass}" data-day="${dateItem.format("M,D")}" ${tooltip}>`);
+      calHTML.push(`<span>${dateItem.format("d")}</span>`);
+      calHTML.push("</td>");
+    }
+    calHTML.push("</tr>");
+    this.datetimeElement.querySelector(".ddtp-day-body").innerHTML = calHTML.join("");
+    if (this.initMode == DateViewMode.date || this.initMode == DateViewMode.datetime) {
+      this.afterChangeDatepicker();
+    }
+  }
+  isDayDisabled(dateItem) {
+    if (this.minDate != -1 && this.minDate > dateItem.getTime() || this.maxDate != -1 && this.maxDate < dateItem.getTime()) {
+      return true;
+    }
+    return false;
+  }
+  isYearDisabled(year) {
+    if (this.minYear != -1 && this.minYear > year || this.maxYear != -1 && this.maxYear < year) {
+      return true;
+    }
+    return false;
+  }
+  isMonthDisabled(year, month) {
+    if (this.isYearDisabled(year)) {
+      return true;
+    }
+    let yearMonth = +(year + core.leftPad(month, 2));
+    if (this.minMonth != -1 && this.minMonth > yearMonth || this.maxMonth != -1 && this.maxMonth < yearMonth) {
+      return true;
+    }
+    return false;
+  }
+  static setMessage(message2) {
+    Lanauage.setDefaultMessage(message2);
+  }
+};
+_DateTimePicker.VERSION = `${"0.0.13"}`;
+_DateTimePicker.format = format;
+_DateTimePicker.parser = parser;
+let DateTimePicker = _DateTimePicker;
+function getDocSize() {
+  return {
+    clientHeight: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
+    clientWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
+  };
+}
+class DateRender extends Render {
   constructor(field, rowElement, daraForm) {
     super(daraForm, field, rowElement);
     this.mounted();
@@ -1665,39 +2965,35 @@ var DateRender = class extends Render {
   }
   mounted() {
     let dateOnSelectEvent;
-    this.field.customOptions = Object.assign({}, this.field.customOptions);
-    if (typeof this.field.customOptions.onSelect !== "undefined") {
-      dateOnSelectEvent = typeof this.field.customOptions.onSelect;
+    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.customOptions.mode)) {
+    if (isUndefined(this.field.rendererOptions.mode)) {
       if (this.field.renderType == "datemonth" || this.field.renderType == "datehour") {
-        this.field.customOptions.mode = this.field.renderType.replace("date", "");
+        this.field.rendererOptions.mode = this.field.renderType.replace("date", "");
       } else {
-        this.field.customOptions.mode = this.field.renderType;
+        this.field.rendererOptions.mode = this.field.renderType;
       }
     }
-    this.field.customOptions.onSelect = (dt, e) => {
+    this.field.rendererOptions.onSelect = (dt, e) => {
       if (dateOnSelectEvent) {
         dateOnSelectEvent(dt, e);
       }
       this.setValue(dt);
       this.valid();
     };
-    this.dateObj = new import_datetimepicker.default(this.element, this.field.customOptions, {});
+    this.dateObj = new DateTimePicker(this.element, this.field.rendererOptions, {});
   }
-  // async loadDate() {
-  //   const DateTimePicker = await import("@daracl/datetimepicker");
-  //   this.dateObj = new DateTimePicker.default(this.element, this.field.customOptions, {} as any);
-  // }
   createField() {
     const field = this.field;
     const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
     fieldContainerElement.innerHTML = `
     <div class="df-field">
-      <input type="text" name="${field.$xssName}" class="form-field text help-icon" autocomplete="off" readonly/>
+      <input type="text" name="${field.$xssName}" class="df-form-field df-text df-help-icon" autocomplete="off" readonly/>
      </div>
      ${Render.getDescriptionTemplate(field)}
-     <div class="help-message"></div>
+     <div class="df-help-message"></div>
      `;
     this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`);
   }
@@ -1725,82 +3021,8 @@ var DateRender = class extends Render {
     invalidMessage(this.field, this.rowElement, validResult);
     return validResult;
   }
-};
-
-// src/util/styleUtils.ts
-var styleUtils_default = {
-  /**
-   * field style 처리
-   *
-   * @param formOptions FormOptions
-   * @param field FormField
-   * @param beforeField FormField
-   * @returns FieldStyle
-   */
-  fieldStyle(formOptions, field, beforeField, isLabelHide) {
-    const fieldStyle = {
-      rowStyleClass: field.orientation === "horizontal" ? "horizontal" : "vertical",
-      fieldClass: "",
-      fieldStyle: "",
-      labelClass: "",
-      labelStyle: "",
-      labelAlignClass: "",
-      valueClass: "",
-      valueStyle: "",
-      tabAlignClass: ""
-    };
-    const defaultLabelWidth = beforeField?.style?.labelWidth ?? formOptions.style.labelWidth ?? "3";
-    let defaultValueWidth = beforeField?.style?.valueWidth ?? formOptions.style.valueWidth ?? "9";
-    const position = beforeField?.style?.position ?? formOptions.style.position;
-    const width = field.style?.width;
-    const positionArr = FIELD_POSITION_STYLE[field.style?.position] ?? FIELD_POSITION_STYLE[position] ?? FIELD_POSITION_STYLE.top;
-    fieldStyle.fieldClass = `${positionArr[0]} ${field.style?.customClass || ""}`;
-    if (width) {
-      if (isNumber(width)) {
-        fieldStyle.fieldClass += isNumber(width) ? ` col-xs-${width}` : "";
-      } else {
-        fieldStyle.fieldStyle = isNumber(width) ? "" : `width:${width};`;
-      }
-    }
-    fieldStyle.tabAlignClass = "tab-al-" + (["right", "center"].includes(field.style?.tabAlign) ? field.style.tabAlign : "left");
-    const labelWidth = field.style?.labelWidth || defaultLabelWidth;
-    fieldStyle.labelAlignClass = positionArr[1];
-    if (!isLabelHide && labelWidth && !["top", "bottom"].includes(positionArr[0])) {
-      if (isNumber(labelWidth)) {
-        const labelWidthValue = +labelWidth;
-        defaultValueWidth = 12 - labelWidthValue;
-        fieldStyle.labelClass = `col-xs-${labelWidthValue}`;
-        fieldStyle.valueClass = fieldStyle.labelStyle ? "col-full" : `col-xs-${defaultValueWidth}`;
-      } else {
-        fieldStyle.labelStyle = `width:${labelWidth};`;
-      }
-    }
-    const valueWidth = field.style?.valueWidth || defaultValueWidth;
-    if (isLabelHide && !["left", "right"].includes(positionArr[0])) {
-      fieldStyle.valueClass = "col-full";
-    } else {
-      if (valueWidth && !["top", "bottom"].includes(positionArr[0])) {
-        if (isNumber(valueWidth)) {
-          fieldStyle.valueClass = fieldStyle.labelStyle ? "col-full" : `col-xs-${valueWidth}`;
-        } else {
-          fieldStyle.valueStyle = `width:${valueWidth};`;
-        }
-      } else {
-        fieldStyle.valueClass = fieldStyle.labelStyle ? "col-full" : "";
-      }
-    }
-    fieldStyle.fieldClass = spaceReplace(fieldStyle.fieldClass);
-    fieldStyle.labelClass = spaceReplace(fieldStyle.labelClass);
-    fieldStyle.valueClass = spaceReplace(fieldStyle.valueClass);
-    return fieldStyle;
-  }
-};
-function spaceReplace(str) {
-  return str.replace(/\s+/g, " ").trim();
 }
-
-// src/renderer/TabRender.ts
-var TabRender = class extends Render {
+class TabRender extends Render {
   constructor(field, rowElement, daraForm) {
     super(daraForm, field, rowElement);
     if (field.renderer) {
@@ -1814,7 +3036,7 @@ var TabRender = class extends Render {
     if (this.customFunction.mounted) {
       this.customFunction.mounted.call(this, this.field, this.rowElement);
     }
-    this.tabContainerElement.querySelectorAll(".tab-item").forEach((tabItem) => {
+    this.tabContainerElement.querySelectorAll(".df-tab-item").forEach((tabItem) => {
       tabItem.addEventListener("click", (e) => {
         this.clickEventHandler(tabItem, e);
       });
@@ -1830,21 +3052,21 @@ var TabRender = class extends Render {
     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) return;
     if (!tabItem.classList.contains("active")) {
-      for (let item of tabItem?.parentElement?.children ?? []) {
+      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?.classList.contains("active")) {
-      for (let item of tabPanel?.parentElement?.children ?? []) {
+    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?.classList.add("active");
+      tabPanel == null ? void 0 : tabPanel.classList.add("active");
     }
   }
   static isDataRender() {
@@ -1862,37 +3084,38 @@ var TabRender = class extends Render {
    * @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 = styleUtils_default.fieldStyle(options, field);
+    let fieldStyle = resolveFieldStyle(options, field);
     fieldContainerElement.innerHTML = `
         <div class="df-field ">
-          <div class="tab-header ${fieldStyle.tabAlignClass}"></div>
+          <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 = styleUtils_default.fieldStyle(formOptions, field, null, formTemplate.isLabelHide(field));
+      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="tab-item ${firstFlag ? "active" : ""}" data-tab-id="${id}"><a href="javascript:;">${childField.label}</a></span>`;
-        let tabBodyTemplate = `<div class="tab-panel ${firstFlag ? "active" : ""}" tab-panel-id="${id}">${Render.getDescriptionTemplate(childField)}
-          <div class="tab-group"></div>
+        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) {
-          fieldContainerElement.querySelector(".tab-header")?.appendChild(tabElement);
+          (_a = fieldContainerElement.querySelector(".df-tab-header")) == null ? void 0 : _a.appendChild(tabElement);
         }
         if (tabBodyElement) {
-          fieldContainerElement.querySelector(".df-tab-body")?.appendChild(tabBodyElement);
+          (_b = fieldContainerElement.querySelector(".df-tab-body")) == null ? void 0 : _b.appendChild(tabBodyElement);
           if (childField.children) {
             let tabFormOptions = {
               style: {
@@ -1907,7 +3130,7 @@ var TabRender = class extends Render {
               fields: []
             };
             childField.$tabForm = new DaraForm(document.createElement("div"), tabFormOptions);
-            childField.$instance = new childField.$renderType(childField, tabBodyElement?.querySelector(".tab-group"), childField.$tabForm);
+            childField.$instance = new childField.$renderType(childField, tabBodyElement == null ? void 0 : tabBodyElement.querySelector(".df-tab-group"), childField.$tabForm);
             childField.$tabForm.formTemplate.childTemplate(childField, fieldStyle2);
           }
         }
@@ -1916,13 +3139,14 @@ var TabRender = class extends Render {
     }
   }
   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 = childField.$tabForm?.getValue(false);
+      const childFieldValue = (_a = childField.$tabForm) == null ? void 0 : _a.getValue(false);
       if (useTypeValue) {
         allTabValue[childField.$validName] = childFieldValue;
       } else {
@@ -1934,10 +3158,11 @@ var TabRender = class extends Render {
     return allTabValue;
   }
   setValue(value) {
+    var _a;
     for (const childField of this.field.children) {
       let tabChildValue = value[childField.$validName];
       if (tabChildValue) {
-        childField.$tabForm?.setValue(tabChildValue);
+        (_a = childField.$tabForm) == null ? void 0 : _a.setValue(tabChildValue);
       }
     }
   }
@@ -1947,6 +3172,7 @@ var TabRender = class extends Render {
     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);
@@ -1954,7 +3180,7 @@ var TabRender = class extends Render {
     }
     const field = this.field;
     for (const childField of field.children) {
-      const validResult = childField.$tabForm?.validForm();
+      const validResult = (_a = childField.$tabForm) == null ? void 0 : _a.validForm();
       if (validResult && validResult.length > 0) {
         const firstItem = validResult[0];
         if (firstItem.message) {
@@ -1967,11 +3193,9 @@ var TabRender = class extends Render {
   }
   focus() {
   }
-};
-
-// src/renderer/GridRender.ts
-var $$idx = 0;
-var GridRender = class extends Render {
+}
+let $$idx = 0;
+class GridRender extends Render {
   constructor(field, rowElement, daraForm) {
     super(daraForm, field, rowElement);
     this.allAddRowInfo = {};
@@ -1997,11 +3221,12 @@ var GridRender = class extends Render {
     this.setDefaultInfo();
   }
   mounted() {
+    var _a;
     this.addRow();
     if (this.customFunction.mounted) {
       this.customFunction.mounted.call(this, this.field, this.rowElement);
     }
-    this.rowElement.querySelector(".df-grid-add-row-btn")?.addEventListener("click", (evt) => {
+    (_a = this.rowElement.querySelector(".df-grid-add-row-btn")) == null ? void 0 : _a.addEventListener("click", (evt) => {
       this.addRow();
     });
   }
@@ -2012,6 +3237,7 @@ var GridRender = class extends Render {
     return false;
   }
   createField() {
+    var _a, _b, _c, _d;
     const field = this.field;
     const fieldContainerElement = this.rowElement.querySelector(".df-field-container");
     let theadTemplate = [];
@@ -2023,12 +3249,12 @@ var GridRender = class extends Render {
       theadTemplate.push("<tr>");
       colgroupTemplate.push(`<col style="width:38px">`);
       theadTemplate.push("<th>");
-      if (field.gridOptions?.disableAddButton !== true) {
+      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:${childField.style?.width ?? "*"}">`);
+        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>");
@@ -2037,7 +3263,7 @@ var GridRender = class extends Render {
     fieldContainerElement.innerHTML = `
     <div class="df-grid-field">
       ${addBtnTemplate.join("")}
-     <div class="df-grid-container ${field.style?.position ?? ""}" style="height:${field.gridOptions?.height ?? "auto"};">
+     <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>
@@ -2047,20 +3273,21 @@ var GridRender = class extends Render {
    * 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="grid-row">`);
+    rowTemplate.push(`<tr class="df-grid-row">`);
     rowTemplate.push("<td>");
-    if (this.field.gridOptions?.disableRemoveButton !== true) {
+    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 = styleUtils_default.fieldStyle(options, childField, null, true);
+      let fieldStyle = resolveFieldStyle(options, childField, null, true);
       let columnField = merge({}, childField);
       addColumns.push(columnField);
       columnField.$orgin = childField;
@@ -2073,14 +3300,14 @@ var GridRender = class extends Render {
     this.allAddRowInfo[$$idx] = addColumns;
     const addRowElement = templateToElement(rowTemplate.join(""));
     if (addRowElement) {
-      this.rowElement.querySelector("tbody")?.append(addRowElement);
-      addRowElement.querySelector(".df-grid-row-remove")?.addEventListener("click", (evt) => {
+      (_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?.querySelector(`#${columnField.$xssName}`), this.gridForm);
+      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]);
       }
@@ -2092,12 +3319,11 @@ var GridRender = class extends Render {
    * @param evt event
    */
   removeRow(evt) {
+    var _a;
     const target = evt.target;
     const rowElement = target.closest("tr");
     if (rowElement) {
-      if (rowElement.parentElement?.childElementCount == 1)
-        return;
-      let rowIdx = evt.currentTarget?.getAttribute("data-row-idx") || "-1";
+      let rowIdx = ((_a = evt.currentTarget) == null ? void 0 : _a.getAttribute("data-row-idx")) || "-1";
       this.removeFieldInfo(rowIdx);
       rowElement.remove();
     }
@@ -2108,6 +3334,7 @@ var GridRender = class extends Render {
    */
   removeFieldInfo(rowIdx) {
     let removeFieldArrs = [];
+    console.log("rowIdx : ", rowIdx);
     if (isEmpty(rowIdx)) {
       for (let key in this.allAddRowInfo) {
         removeFieldArrs = removeFieldArrs.concat(this.allAddRowInfo[key]);
@@ -2123,7 +3350,8 @@ var GridRender = class extends Render {
     }
   }
   allRemoveRow() {
-    this.rowElement.querySelector("tbody")?.replaceChildren();
+    var _a;
+    (_a = this.rowElement.querySelector("tbody")) == null ? void 0 : _a.replaceChildren();
     this.removeFieldInfo();
   }
   getValue() {
@@ -2147,7 +3375,7 @@ var GridRender = class extends Render {
   setValue(value) {
     this.field.$value = value;
     let valueArr = [];
-    if (Array.isArray(value)) {
+    if (isArray(value)) {
       valueArr = value;
     } else {
       if (isPlainObject(value)) {
@@ -2187,10 +3415,8 @@ var GridRender = class extends Render {
   }
   focus() {
   }
-};
-
-// src/constants.ts
-var RULES = {
+}
+const RULES = {
   NAN: "nan",
   MIN: "minimum",
   EXCLUSIVE_MIN: "exclusiveMinimum",
@@ -2202,12 +3428,10 @@ var RULES = {
   BETWEEN_EXCLUSIVE_MIN: "betweenExclusiveMin",
   BETWEEN_EXCLUSIVE_MAX: "betweenExclusiveMax",
   BETWEEN_EXCLUSIVE_MINMAX: "betweenExclusiveMinMax",
-  REGEXP: "regexp",
-  REQUIRED: "required",
-  VALIDATOR: "validator"
+  REQUIRED: "required"
 };
-var FIELD_PREFIX = "dff";
-var RENDER_TEMPLATE = {
+const FIELD_PREFIX = "dff";
+const RENDER_TEMPLATE = {
   number: NumberRender,
   textarea: TextAreaRender,
   dropdown: DropdownRender,
@@ -2228,61 +3452,62 @@ var RENDER_TEMPLATE = {
   tab: TabRender,
   grid: GridRender
 };
-var FIELD_POSITION_STYLE = {
-  "top-left": ["top", "txt-left"],
-  "top-center": ["top", "txt-center"],
-  "top-right": ["top", "txt-right"],
-  "left-left": ["", "txt-left"],
-  "left-center": ["", "txt-center"],
-  "left-right": ["", "txt-right"],
-  "right-right": ["right", "txt-right"],
-  "right-center": ["right", "txt-center"],
-  "right-left": ["right", "txt-left"],
-  "bottom-left": ["bottom", "txt-left"],
-  "bottom-center": ["bottom", "txt-center"],
-  "bottom-right": ["bottom", "txt-right"]
+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"];
-
-// src/util/Lanauage.ts
-var localeMessage = {
-  required: "{label} \uD544\uC218 \uC785\uB825\uC0AC\uD56D\uC785\uB2C8\uB2E4.",
-  fileButton: "\uD30C\uC77C\uCC3E\uAE30",
-  selection: "\uC120\uD0DD",
+let localeMessage = {
+  required: "{label} 필수 입력사항입니다.",
+  fileButton: "파일찾기",
+  selection: "선택",
   string: {
-    minLength: "{minLength} \uAE00\uC790 \uC774\uC0C1\uC73C\uB85C \uC785\uB825\uD558\uC138\uC694.",
-    maxLength: "{maxLength} \uAE00\uC790 \uC774\uD558\uB85C \uC785\uB825\uD558\uC138\uC694.",
-    between: "{minLength} ~ {maxLength} \uC0AC\uC774\uC758 \uAE00\uC790\uB97C \uC785\uB825\uD558\uC138\uC694."
+    minLength: "{minLength} 글자 이상으로 입력하세요.",
+    maxLength: "{maxLength} 글자 이하로 입력하세요.",
+    between: "{minLength} ~ {maxLength} 사이의 글자를 입력하세요."
   },
   number: {
-    nan: "\uC22B\uC790\uB9CC \uC785\uB825 \uAC00\uB2A5 \uD569\uB2C8\uB2E4.",
-    minimum: "{minimum} \uAC12\uACFC \uAC19\uAC70\uB098 \uCEE4\uC57C \uD569\uB2C8\uB2E4",
-    exclusiveMinimum: "{minimum} \uBCF4\uB2E4 \uCEE4\uC57C \uD569\uB2C8\uB2E4",
-    maximum: "{maximum} \uAC12\uACFC \uAC19\uAC70\uB098 \uC791\uC544\uC57C \uD569\uB2C8\uB2E4",
-    exclusiveMaximum: "{maximum} \uBCF4\uB2E4 \uC791\uC544\uC57C \uD569\uB2C8\uB2E4.",
-    between: "{minimum}~{maximum} \uC0AC\uC774\uC758 \uAC12\uC744 \uC785\uB825\uD558\uC138\uC694.",
-    betweenExclusiveMin: "{minimum} \uBCF4\uB2E4 \uD06C\uACE0 {maximum} \uBCF4\uB2E4 \uAC19\uAC70\uB098 \uC791\uC544\uC57C \uD569\uB2C8\uB2E4",
-    betweenExclusiveMax: "{minimum} \uBCF4\uB2E4 \uAC19\uAC70\uB098 \uD06C\uACE0 {maximum} \uBCF4\uB2E4 \uC791\uC544\uC57C \uD569\uB2C8\uB2E4",
-    betweenExclusiveMinMax: "{minimum} \uBCF4\uB2E4 \uD06C\uACE0 {maximum} \uBCF4\uB2E4 \uC791\uC544\uC57C \uD569\uB2C8\uB2E4"
+    nan: "숫자만 입력 가능 합니다.",
+    minimum: "{minimum} 값과 같거나 커야 합니다",
+    exclusiveMinimum: "{minimum} 보다 커야 합니다",
+    maximum: "{maximum} 값과 같거나 작아야 합니다",
+    exclusiveMaximum: "{maximum} 보다 작아야 합니다.",
+    between: "{minimum}~{maximum} 사이의 값을 입력하세요.",
+    betweenExclusiveMin: "{minimum} 보다 크고 {maximum} 보다 같거나 작아야 합니다",
+    betweenExclusiveMax: "{minimum} 보다 같거나 크고 {maximum} 보다 작아야 합니다",
+    betweenExclusiveMinMax: "{minimum} 보다 크고 {maximum} 보다 작아야 합니다"
   },
   regexp: {
-    mobile: "\uD578\uB4DC\uD3F0 \uBC88\uD638\uAC00 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.",
-    email: "\uC774\uBA54\uC77C\uC774 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.",
-    url: "URL\uC774 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.",
-    alpha: "\uC601\uBB38\uB9CC \uC785\uB825 \uAC00\uB2A5 \uD569\uB2C8\uB2E4.",
-    "alpha-num": "\uC601\uBB38\uACFC \uC22B\uC790\uB9CC \uC785\uB825 \uAC00\uB2A5 \uD569\uB2C8\uB2E4.",
-    number: "\uC22B\uC790\uB9CC \uC785\uB825 \uAC00\uB2A5 \uD569\uB2C8\uB2E4.",
-    variable: "\uAC12\uC774 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.",
-    "number-char": "\uC22B\uC790, \uBB38\uC790 \uAC01\uAC01 \uD558\uB098 \uC774\uC0C1 \uD3EC\uD568 \uB418\uC5B4\uC57C \uD569\uB2C8\uB2E4.",
-    "upper-char": "\uB300\uBB38\uC790\uAC00 \uD558\uB098 \uC774\uC0C1 \uD3EC\uD568 \uB418\uC5B4\uC57C \uD569\uB2C8\uB2E4.",
-    "upper-char-special": "\uB300\uBB38\uC790,\uC18C\uBB38\uC790,\uD2B9\uC218\uBB38\uC790 \uAC01\uAC01 \uD558\uB098 \uC774\uC0C1 \uD3EC\uD568 \uB418\uC5B4\uC57C \uD569\uB2C8\uB2E4.",
-    "upper-char-special-number": "\uB300\uBB38\uC790,\uC18C\uBB38\uC790,\uD2B9\uC218\uBB38\uC790,\uC22B\uC790 \uAC01\uAC01 \uD558\uB098 \uC774\uC0C1 \uD3EC\uD568 \uB418\uC5B4\uC57C\uD569\uB2C8\uB2E4."
+    mobile: "핸드폰 번호가 유효하지 않습니다.",
+    email: "이메일이 유효하지 않습니다.",
+    url: "URL이 유효하지 않습니다.",
+    alpha: "영문만 입력 가능 합니다.",
+    "alpha-num": "영문과 숫자만 입력 가능 합니다.",
+    number: "숫자만 입력 가능 합니다.",
+    variable: "값이 유효하지 않습니다.",
+    "number-char": "숫자, 문자 각각 하나 이상 포함 되어야 합니다.",
+    "upper-char": "대문자가 하나 이상 포함 되어야 합니다.",
+    "upper-char-special": "대문자,소문자,특수문자 각각 하나 이상 포함 되어야 합니다.",
+    "upper-char-special-number": "대문자,소문자,특수문자,숫자 각각 하나 이상 포함 되어야합니다."
   }
 };
-var Language = class {
+let Language$1 = class Language2 {
   constructor() {
     this.lang = localeMessage;
   }
@@ -2351,10 +3576,8 @@ function message(msgFormat, msgParam) {
     return typeof msgParam[key] !== "undefined" ? msgParam[key] : match;
   });
 }
-var Lanauage_default = new Language();
-
-// src/util/renderFactory.ts
-var getRenderer = (field) => {
+const Language3 = new Language$1();
+const getRenderer = (field) => {
   let render;
   if (field.renderType) {
     render = RENDER_TEMPLATE[field.renderType];
@@ -2371,9 +3594,7 @@ var getRenderer = (field) => {
   }
   return RENDER_TEMPLATE["text"];
 };
-
-// src/FieldInfoMap.ts
-var FieldInfoMap = class {
+class FieldInfoMap {
   constructor(selector, form) {
     this.fieldIdx = 0;
     this.allFieldInfo = {};
@@ -2449,7 +3670,24 @@ var FieldInfoMap = class {
    * @param {string} fieldName
    */
   removeFieldInfo(fieldName) {
-    delete this.allFieldInfo[this.keyNameMap[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);
   }
   /**
    * 모든 필드값 구하기
@@ -2580,18 +3818,17 @@ var FieldInfoMap = class {
     }
     const renderInfo = fieldInfo.$instance;
     let fieldValid = renderInfo.valid();
-    if (fieldValid === true)
-      return true;
+    if (fieldValid === true) return true;
     if (focusFlag) {
       renderInfo.focus();
     }
     fieldValid = fieldValid;
     if (isUndefined(fieldValid.message)) {
-      fieldValid.message = Lanauage_default.validMessage(fieldInfo, fieldValid)[0];
+      fieldValid.message = Language3.validMessage(fieldInfo, fieldValid)[0];
     }
     return fieldValid;
   }
-};
+}
 function addFormValue(formData, fieldInfo, useTypeValue) {
   if (ignoreValueField(fieldInfo)) {
     return formData;
@@ -2647,9 +3884,7 @@ function addFieldFormData(formData, fieldInfo, useTypeValue) {
   }
   return formData;
 }
-
-// src/FormTemplate.ts
-var FormTemplate = class {
+class FormTemplate {
   constructor(daraform, formElement, fieldInfoMap) {
     this.addRowFields = [];
     this.daraform = daraform;
@@ -2677,10 +3912,10 @@ var FormTemplate = class {
    */
   addRowTemplate(field) {
     let labelHideFlag = this.isLabelHide(field);
-    let fieldStyle = styleUtils_default.fieldStyle(this.options, field, null, labelHideFlag);
+    let fieldStyle = resolveFieldStyle(this.options, field, null, labelHideFlag);
     this.addRowFieldInfo(field);
     const rowElement = templateToElement(`
-        <div class="df-row form-group ${fieldStyle.fieldClass}" id="${field.$key}">
+        <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>
@@ -2731,13 +3966,13 @@ var FormTemplate = class {
       let childFieldStyle;
       let labelTemplate = "";
       if (labelHideFlag) {
-        childFieldStyle = styleUtils_default.fieldStyle(this.options, childField, beforeField, !isEmptyLabel);
-        labelTemplate = isEmptyLabel ? `<span class="df-label empty ${childFieldStyle.labelClass}" style="${childFieldStyle.labelStyle}"></span>` : "";
+        childFieldStyle = resolveFieldStyle(this.options, childField, beforeField, !isEmptyLabel);
+        labelTemplate = isEmptyLabel ? `<span class="df-label df-empty ${childFieldStyle.labelClass}" style="${childFieldStyle.labelStyle}"></span>` : "";
       } else {
-        childFieldStyle = styleUtils_default.fieldStyle(this.options, childField, beforeField, false);
+        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="form-group ${childFieldStyle.fieldClass}" style="${childFieldStyle.fieldStyle}" id="${childField.$key}">
+      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>`);
@@ -2763,8 +3998,8 @@ var FormTemplate = class {
    */
   getLabelTemplate(field) {
     const requiredTemplate = field.required ? `<span class="required"></span>` : "";
-    const tooltipTemplate = isBlank(field.tooltip) ? "" : `<span class="df-tooltip">?<span class="tooltip">${field.tooltip}</span></span>`;
-    return `${field.label ?? ""} ${tooltipTemplate} ${requiredTemplate}`;
+    const tooltipTemplate = isBlank(field.tooltip) ? "" : `<span class="df-tooltip">?<span class="df-tooltip-text">${field.tooltip}</span></span>`;
+    return `<span class="df-label-text">${field.label ?? ""}</span> ${tooltipTemplate} ${requiredTemplate}`;
   }
   /**
    * label 숨김 여부
@@ -2773,7 +4008,8 @@ var FormTemplate = class {
    * @returns
    */
   isLabelHide(field) {
-    return field.style?.labelHide || isUndefined(field.label);
+    var _a;
+    return ((_a = field.style) == null ? void 0 : _a.labelHide) || isUndefined(field.label);
   }
   checkHiddenField(field) {
     if (isHiddenField(field)) {
@@ -2795,10 +4031,15 @@ var FormTemplate = class {
     this.fieldInfoMap.addField(field);
     this.addRowFields.push(field.$key);
   }
-};
-
-// src/DaraForm.ts
-var defaultOptions = {
+}
+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,
@@ -2811,24 +4052,37 @@ var defaultOptions = {
   notValidMessage: "This form is not valid.",
   fields: []
 };
-var allInstance = {};
-var SEQ_ATTR_KEY = "data-form-uid";
-var DARA_FORM_SEQ = 0;
-var DaraForm = class _DaraForm {
+const allInstance = {};
+const SEQ_ATTR_KEY = "data-form-uid";
+let DARA_FORM_SEQ = 0;
+const _DaraForm = class _DaraForm {
   constructor(formElement, options, message2) {
     this.formValue = {};
-    /**
-     * change mode
-     *
-     * @param mode form_mode default new
-     */
+    this.changeListeners = [];
     this.changeMode = (mode) => {
       this.options.mode = mode;
       this.formElement.setAttribute("data-df-mode", mode);
+      const fields = this.formElement.querySelectorAll(".df-field input, .df-field textarea, .df-field select");
+      if (mode == "view") {
+        fields.forEach((field) => {
+          if (field instanceof HTMLInputElement) {
+            field.readOnly = true;
+          }
+          if (field instanceof HTMLTextAreaElement) {
+            field.readOnly = true;
+          }
+        });
+      } else {
+        fields.forEach((field) => {
+          if (field instanceof HTMLInputElement) {
+            field.readOnly = false;
+          }
+          if (field instanceof HTMLTextAreaElement) {
+            field.readOnly = false;
+          }
+        });
+      }
     };
-    /**
-     * 폼 데이터 reset
-     */
     this.resetForm = () => {
       const fieldMap = this.fieldInfoMap.getAllFieldInfo();
       for (const seq in fieldMap) {
@@ -2841,21 +4095,11 @@ var DaraForm = class _DaraForm {
       this.formValue = {};
       this.conditionCheck();
     };
-    /**
-     * field 값 reset
-     * @param fieldName 필드명
-     */
     this.resetField = (fieldName) => {
       this.fieldInfoMap.getFieldName(fieldName).$instance.reset();
       this.formValue[fieldName] = "";
       this.conditionCheck();
     };
-    /**
-     * field 값 얻기
-     *
-     * @param fieldName  필드명
-     * @returns
-     */
     this.getFieldValue = (fieldName) => {
       const field = this.fieldInfoMap.getFieldName(fieldName);
       if (field) {
@@ -2863,21 +4107,12 @@ var DaraForm = class _DaraForm {
       }
       return null;
     };
-    /**
-     * 폼 필드 값 얻기
-     * @param isValid 폼 유효성 검사 여부 default:false|undefined true일경우 검사.
-     * @returns
-     */
     this.getValue = (isValid) => {
       return this.fieldInfoMap.getAllFieldValue(this.formValue, isValid);
     };
     this.getFormDataValue = (isValid) => {
       return this.fieldInfoMap.getFormDataValue(this.formValue, isValid);
     };
-    /**
-     * 폼 필드 value 셋팅
-     * @param values
-     */
     this.setValue = (values, dataClear) => {
       if (dataClear !== false) {
         this.resetForm();
@@ -2897,42 +4132,29 @@ var DaraForm = class _DaraForm {
         return field.$instance.setValueItems(values);
       }
     };
-    /**
-     * field 추가
-     *
-     * @param {FormField} field
-     */
     this.addField = (field) => {
       this.options.fields.push(field);
       this.formTemplate.addRow(field);
       this.conditionCheck();
     };
-    /**
-     * field 제거
-     *
-     * @param {string} fieldName
-     */
     this.removeField = (fieldName) => {
-      const element = this.getFieldElement(fieldName);
-      if (element != null) {
-        element.closest(".df-row")?.remove();
-      }
-      this.fieldInfoMap.removeFieldInfo(fieldName);
+      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();
     };
-    /**
-     * 폼 유효성 검증 여부
-     *
-     * @returns {boolean}
-     */
     this.isValidForm = () => {
       const result = this.validForm();
       return result.length < 1;
     };
-    /**
-     * 유효성 검증 폼 검증여부 리턴
-     *
-     * @returns {any[]}
-     */
     this.validForm = () => {
       let validResult = [];
       let autoFocusFlag = this.options.autoFocus !== false;
@@ -2967,12 +4189,15 @@ var DaraForm = class _DaraForm {
       }
       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();
@@ -2983,22 +4208,15 @@ var DaraForm = class _DaraForm {
         }
       }
     };
-    /**
-     * 모든 field 얻기
-     */
     this.getFields = () => {
       return this.options.fields;
     };
-    /**
-     * field setting
-     * @param fields
-     */
     this.setFields = (fields) => {
       this.options.fields = fields;
       this.createForm(fields);
     };
-    this.options = merge({}, defaultOptions, options);
-    Lanauage_default.set(message2);
+    this.options = initFormOptions(options);
+    Language3.set(message2);
     if (formElement) {
       this.orginFormStyleClass = formElement.className;
       formElement.classList.add("daracl-form");
@@ -3018,14 +4236,17 @@ var DaraForm = class _DaraForm {
       throw new Error(`${formElement} form selector not found`);
     }
   }
-  static {
-    this.VERSION = `${APP_VERSION}`;
-  }
   static create(formElement, options, message2) {
     return new _DaraForm(formElement, options, message2);
   }
   static setMessage(message2) {
-    Lanauage_default.set(message2);
+    Language3.set(message2);
+  }
+  static setDefaultOptions(options, message2) {
+    setDefaultOptions(options);
+    if (message2) {
+      Language3.set(message2);
+    }
   }
   createForm(fields) {
     this.fieldInfoMap = new FieldInfoMap(this.selector, this);
@@ -3049,7 +4270,7 @@ var DaraForm = class _DaraForm {
    */
   getFieldElement(fieldName) {
     const field = this.fieldInfoMap.getFieldName(fieldName);
-    if (field?.$instance) {
+    if (field == null ? void 0 : field.$instance) {
       return field.$instance.getElement();
     }
     return null;
@@ -3064,6 +4285,88 @@ var DaraForm = class _DaraForm {
       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") {
@@ -3074,6 +4377,12 @@ var DaraForm = class _DaraForm {
   }
   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);
@@ -3090,20 +4399,6 @@ var DaraForm = class _DaraForm {
     const fieldInfo = this.fieldInfoMap.getFieldName(fieldName);
     fieldInfo.$instance.setDescription(desc);
   }
-  static {
-    this.validator = {
-      string: (value, field) => {
-        return stringValidator(value, field);
-      },
-      number: (value, field) => {
-        return numberValidator(value, field);
-      },
-      regexp: (value, field) => {
-        let result = { name: field.name, constraint: [] };
-        return regexpValidator(value, field, result);
-      }
-    };
-  }
   static instance(ele) {
     let element;
     if (isString(ele)) {
@@ -3126,7 +4421,19 @@ var DaraForm = class _DaraForm {
     return this.fieldInfoMap;
   }
 };
-
-// src/index.ts
-module.exports = DaraForm;
+_DaraForm.VERSION = `${"0.0.19"}`;
+_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;
+exports.DaraForm = DaraForm;
 //# sourceMappingURL=index.cjs.map