@designbasekorea/ui-wc 0.5.5 → 0.5.6

package/dist/esm/components/db-form.js

@@ -1 +1,566 @@
-import"./db-input.js";import"./db-textarea.js";import"./db-select.js";import"./db-checkbox.js";import"./db-radio.js";import"./db-button.js";const e="designbase-wc-form";class DbForm extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.formEl=null,this.headerEl=null,this.fieldsEl=null,this.actionsEl=null,this.submitBtn=null,this.resetBtn=null,this.values={},this.errors={},this.touched={},this.initialValues={},this.fieldWrappers=new Map,this.boundSubmit=e=>this.handleSubmit(e),this.boundReset=e=>this.handleReset(e)}static get observedAttributes(){return["fields","columns","size","variant","title","description","submit-text","reset-text","show-reset","submit-loading","submit-disabled","initial-values"]}connectedCallback(){this.built||(this.buildShell(),this.built=!0),this.bootstrapValues(),this.syncAll()}attributeChangedCallback(e){this.built&&("initial-values"===e&&this.bootstrapValues(),"fields"===e&&this.bootstrapValues(),this.syncAll())}get fields(){return this.parseFields(this.getAttribute("fields"))}set fields(e){this.setAttribute("fields","string"==typeof e?e:JSON.stringify(e))}parseFields(e){if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}parseInitialValues(){const e=this.getAttribute("initial-values");if(!e)return{};try{const t=JSON.parse(e);return t&&"object"==typeof t?t:{}}catch{return{}}}bootstrapValues(){this.initialValues=this.parseInitialValues();const e={...this.initialValues};this.fields.forEach(t=>{void 0===e[t.name]&&(void 0===t.value?void 0===t.defaultValue?"checkbox"===t.type&&t.checkboxGroup?e[t.name]=[]:"checkbox"!==t.type?e[t.name]="":e[t.name]=!1:e[t.name]=t.defaultValue:e[t.name]=t.value)}),this.values=e}buildShell(){this.formEl=document.createElement("form"),this.formEl.className=`${e}__native`,this.formEl.noValidate=!0,this.formEl.addEventListener("submit",this.boundSubmit),this.headerEl=document.createElement("div"),this.headerEl.className=`${e}__header`,this.fieldsEl=document.createElement("div"),this.fieldsEl.className=`${e}__fields`,this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,this.submitBtn=document.createElement("db-button"),this.submitBtn.setAttribute("type","submit"),this.submitBtn.setAttribute("variant","primary"),this.resetBtn=document.createElement("db-button"),this.resetBtn.setAttribute("type","button"),this.resetBtn.setAttribute("variant","secondary"),this.resetBtn.addEventListener("click",this.boundReset),this.actionsEl.append(this.submitBtn,this.resetBtn),this.formEl.append(this.fieldsEl,this.actionsEl),this.append(this.headerEl,this.formEl)}syncAll(){this.syncClasses(),this.syncHeader(),this.renderFields(),this.syncActions()}syncClasses(){const t=this.getAttribute("columns")||"1",i=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default";this.className=[e,`${e}--columns-${t}`,`${e}--${i}`,`${e}--${s}`,this.hasAttribute("submit-loading")&&`${e}--loading`].filter(Boolean).join(" ")}syncHeader(){if(!this.headerEl)return;const t=this.getAttribute("title")||"",i=this.getAttribute("description")||"";if(this.headerEl.innerHTML="",t||i){if(this.headerEl.hidden=!1,t){const i=document.createElement("h3");i.className=`${e}__title`,i.textContent=t,this.headerEl.appendChild(i)}if(i){const t=document.createElement("p");t.className=`${e}__description`,t.textContent=i,this.headerEl.appendChild(t)}}else this.headerEl.hidden=!0}syncActions(){const e=this.getAttribute("submit-text")||"제출",t=this.getAttribute("reset-text")||"리셋",i=this.hasAttribute("show-reset");this.submitBtn&&(this.submitBtn.textContent=e,this.hasAttribute("submit-loading")?this.submitBtn.setAttribute("loading",""):this.submitBtn.removeAttribute("loading"),this.hasAttribute("submit-disabled")?this.submitBtn.setAttribute("disabled",""):this.submitBtn.removeAttribute("disabled")),this.resetBtn&&(this.resetBtn.textContent=t,this.resetBtn.hidden=!i)}renderFields(){if(!this.fieldsEl)return;const t=this.getAttribute("size")||"m";this.fieldsEl.innerHTML="",this.fieldWrappers.clear(),this.fields.forEach(i=>{const s=document.createElement("div");if(s.className=`${e}__field-wrapper ${e}__field-wrapper--${i.type||"text"}`,s.dataset.field=i.name,i.label&&("checkbox"!==i.type||i.checkboxGroup)){const t=document.createElement("label");if(t.className=`${e}__label`,t.htmlFor=`db-form-${i.name}`,t.textContent=i.label,i.required||i.validation?.required){const i=document.createElement("span");i.className=`${e}__required`,i.textContent="*",i.setAttribute("aria-hidden","true"),t.appendChild(i)}s.appendChild(t)}s.appendChild(this.createFieldControl(i,t)),this.fieldsEl.appendChild(s),this.fieldWrappers.set(i.name,s),this.refreshFieldState(i.name)})}refreshFieldState(t){const i=this.fields.find(e=>e.name===t),s=this.fieldWrappers.get(t);if(!i||!s)return;const r=Boolean(this.touched[t]&&this.errors[t]);s.classList.toggle(`${e}__field-wrapper--error`,r),s.querySelector(`.${e}__error`)?.remove(),s.querySelector(`.${e}__help`)?.remove();const a=s.querySelector(`.${e}__field, db-input, db-textarea, db-select, db-checkbox`);if(a&&(r?(a.setAttribute("error",""),a.setAttribute("error-message",this.errors[t])):(a.removeAttribute("error"),a.removeAttribute("error-message"))),r){const i=document.createElement("div");return i.className=`${e}__error`,i.textContent=this.errors[t],void s.appendChild(i)}if(i.helpText){const t=document.createElement("div");t.className=`${e}__help`,t.textContent=i.helpText,s.appendChild(t)}}refreshAllFieldStates(){this.fields.forEach(e=>this.refreshFieldState(e.name))}createFieldControl(t,i){const s=t.type||"text",r=this.values[t.name],a=Boolean(this.touched[t.name]&&this.errors[t.name]),n=a?this.errors[t.name]:"";if("textarea"===s){const s=document.createElement("db-textarea");return s.className=`${e}__field`,s.setAttribute("name",t.name),s.id=`db-form-${t.name}`,s.setAttribute("size",i),s.setAttribute("full-width",""),t.placeholder&&s.setAttribute("placeholder",t.placeholder),void 0!==r&&s.setAttribute("value",String(r)),t.disabled&&s.setAttribute("disabled",""),t.readOnly&&s.setAttribute("readonly",""),t.required&&s.setAttribute("required",""),t.maxLength&&s.setAttribute("max-length",String(t.maxLength)),a&&(s.setAttribute("error",""),s.setAttribute("error-message",n)),s.addEventListener("db-change",e=>{const i=e.detail;this.handleFieldChange(t,i.value)}),s.addEventListener("db-input",e=>{const i=e.detail;this.handleFieldChange(t,i.value,!1)}),s}if("select"===s){const s=document.createElement("db-select");return s.className=`${e}__field`,s.setAttribute("name",t.name),s.id=`db-form-${t.name}`,s.setAttribute("size",i),s.setAttribute("full-width",""),t.placeholder&&s.setAttribute("placeholder",t.placeholder),t.options&&s.setAttribute("options",JSON.stringify(t.options)),t.multiple&&s.setAttribute("multiple",""),t.disabled&&s.setAttribute("disabled",""),t.readOnly&&s.setAttribute("readonly",""),t.required&&s.setAttribute("required",""),void 0!==r&&s.setAttribute("value",Array.isArray(r)?JSON.stringify(r):String(r)),a&&(s.setAttribute("error",""),s.setAttribute("error-message",n)),s.addEventListener("db-change",e=>{const i=e.detail;this.handleFieldChange(t,i.value)}),s}if("radio"===s&&t.radioGroup){const s=document.createElement("div");return s.className=`${e}__radio-group`,s.setAttribute("role","radiogroup"),(t.options||[]).forEach(e=>{const a=document.createElement("db-radio");a.setAttribute("name",t.name),a.setAttribute("value",e.value),a.setAttribute("size",i),r===e.value&&a.setAttribute("checked",""),(t.disabled||e.disabled)&&a.setAttribute("disabled",""),a.textContent=e.label,a.addEventListener("db-change",i=>{i.detail.checked&&this.handleFieldChange(t,e.value)}),s.appendChild(a)}),s}if("checkbox"===s&&t.checkboxGroup){const s=document.createElement("div");s.className=`${e}__checkbox-group`;const a=Array.isArray(r)?r:[];return(t.options||[]).forEach(e=>{const r=document.createElement("db-checkbox");r.setAttribute("name",t.name),r.setAttribute("value",e.value),r.setAttribute("size",i),a.includes(e.value)&&r.setAttribute("checked",""),(t.disabled||e.disabled)&&r.setAttribute("disabled",""),r.textContent=e.label,r.addEventListener("db-change",i=>{const s=i.detail,r=Array.isArray(this.values[t.name])?[...this.values[t.name]]:[],a=s.checked?[...new Set([...r,e.value])]:r.filter(t=>t!==e.value);this.handleFieldChange(t,a)}),s.appendChild(r)}),s}if("checkbox"===s){const s=document.createElement("db-checkbox");return s.className=`${e}__field`,s.setAttribute("name",t.name),s.id=`db-form-${t.name}`,s.setAttribute("size",i),r&&s.setAttribute("checked",""),t.disabled&&s.setAttribute("disabled",""),t.readOnly&&s.setAttribute("readonly",""),t.required&&s.setAttribute("required",""),s.textContent=t.label||"",s.addEventListener("db-change",e=>{const i=e.detail;this.handleFieldChange(t,i.checked)}),s}const l=document.createElement("db-input");return l.className=`${e}__field`,l.setAttribute("name",t.name),l.id=`db-form-${t.name}`,l.setAttribute("type",s),l.setAttribute("size",i),l.setAttribute("full-width",""),t.placeholder&&l.setAttribute("placeholder",t.placeholder),void 0!==r&&!1!==r&&l.setAttribute("value",String(r)),t.disabled&&l.setAttribute("disabled",""),t.readOnly&&l.setAttribute("readonly",""),t.required&&l.setAttribute("required",""),void 0!==t.min&&l.setAttribute("min",String(t.min)),void 0!==t.max&&l.setAttribute("max",String(t.max)),void 0!==t.minLength&&l.setAttribute("minlength",String(t.minLength)),void 0!==t.maxLength&&l.setAttribute("maxlength",String(t.maxLength)),t.pattern&&l.setAttribute("pattern",t.pattern),a&&(l.setAttribute("error",""),l.setAttribute("error-message",n)),l.addEventListener("db-change",e=>{const i=e.detail;this.handleFieldChange(t,i.value)}),l.addEventListener("db-input",e=>{const i=e.detail;this.handleFieldChange(t,i.value,!1)}),l}handleFieldChange(e,t,i=!0){this.values[e.name]=t,i&&(this.touched[e.name]=!0);const s=this.validateField(e,t);this.errors[e.name]=s||"",this.refreshFieldState(e.name),this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{values:{...this.values}}}))}validateField(e,t){const i=e.validation||{};if((i.required??e.required)&&(null==t||""===t||!1===t||Array.isArray(t)&&0===t.length))return e.errorMessage||`${e.label||e.name}은(는) 필수입니다.`;if(void 0!==i.min&&Number(t)<i.min)return e.errorMessage||`최소값은 ${i.min}입니다.`;if(void 0!==i.max&&Number(t)>i.max)return e.errorMessage||`최대값은 ${i.max}입니다.`;if(void 0!==i.minLength&&String(t).length<i.minLength)return e.errorMessage||`최소 ${i.minLength}자 이상 입력해주세요.`;if(void 0!==i.maxLength&&String(t).length>i.maxLength)return e.errorMessage||`최대 ${i.maxLength}자까지 입력 가능합니다.`;const s=i.pattern||e.pattern;if(s&&String(t))try{if(!new RegExp(s).test(String(t)))return e.errorMessage||"올바른 형식으로 입력해주세요."}catch{}}validateForm(){let e=!0;return this.fields.forEach(t=>{const i=this.validateField(t,this.values[t.name]);i?(this.errors[t.name]=i,e=!1):this.errors[t.name]=""}),e}handleSubmit(e){e.preventDefault(),this.fields.forEach(e=>{this.touched[e.name]=!0}),this.validateForm()?this.dispatchEvent(new CustomEvent("db-submit",{bubbles:!0,composed:!0,detail:{values:{...this.values}}})):this.refreshAllFieldStates()}handleReset(e){e.preventDefault(),this.values={...this.initialValues},this.bootstrapValues(),this.errors={},this.touched={},this.renderFields(),this.dispatchEvent(new CustomEvent("db-reset",{bubbles:!0,composed:!0,detail:{values:{...this.values}}})),this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{values:{...this.values}}}))}}customElements.get("db-form")||customElements.define("db-form",DbForm);export{DbForm};
+import './db-input.js';
+import './db-textarea.js';
+import './db-select.js';
+import './db-checkbox.js';
+import './db-radio.js';
+import './db-button.js';
+
+/**
+ * Form Web Component
+ * packages/ui Form.tsx 기준 — ui-wc 폼 필드(db-input, db-select 등) 조합
+ */
+const CLASS = 'designbase-wc-form';
+class DbForm extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+        this.formEl = null;
+        this.headerEl = null;
+        this.fieldsEl = null;
+        this.actionsEl = null;
+        this.submitBtn = null;
+        this.resetBtn = null;
+        this.values = {};
+        this.errors = {};
+        this.touched = {};
+        this.initialValues = {};
+        this.fieldWrappers = new Map();
+        this.boundSubmit = (e) => this.handleSubmit(e);
+        this.boundReset = (e) => this.handleReset(e);
+    }
+    static get observedAttributes() {
+        return [
+            'fields',
+            'columns',
+            'size',
+            'variant',
+            'title',
+            'description',
+            'submit-text',
+            'reset-text',
+            'show-reset',
+            'submit-loading',
+            'submit-disabled',
+            'initial-values',
+        ];
+    }
+    connectedCallback() {
+        if (!this.built) {
+            this.buildShell();
+            this.built = true;
+        }
+        this.bootstrapValues();
+        this.syncAll();
+    }
+    attributeChangedCallback(name) {
+        if (!this.built)
+            return;
+        if (name === 'initial-values') {
+            this.bootstrapValues();
+        }
+        if (name === 'fields') {
+            this.bootstrapValues();
+        }
+        this.syncAll();
+    }
+    get fields() {
+        return this.parseFields(this.getAttribute('fields'));
+    }
+    set fields(value) {
+        this.setAttribute('fields', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    parseFields(raw) {
+        if (!raw)
+            return [];
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    parseInitialValues() {
+        const raw = this.getAttribute('initial-values');
+        if (!raw)
+            return {};
+        try {
+            const parsed = JSON.parse(raw);
+            return parsed && typeof parsed === 'object' ? parsed : {};
+        }
+        catch {
+            return {};
+        }
+    }
+    bootstrapValues() {
+        this.initialValues = this.parseInitialValues();
+        const next = { ...this.initialValues };
+        this.fields.forEach((field) => {
+            if (next[field.name] !== undefined)
+                return;
+            if (field.value !== undefined) {
+                next[field.name] = field.value;
+                return;
+            }
+            if (field.defaultValue !== undefined) {
+                next[field.name] = field.defaultValue;
+                return;
+            }
+            if (field.type === 'checkbox' && field.checkboxGroup) {
+                next[field.name] = [];
+                return;
+            }
+            if (field.type === 'checkbox') {
+                next[field.name] = false;
+                return;
+            }
+            next[field.name] = '';
+        });
+        this.values = next;
+    }
+    buildShell() {
+        this.formEl = document.createElement('form');
+        this.formEl.className = `${CLASS}__native`;
+        this.formEl.noValidate = true;
+        this.formEl.addEventListener('submit', this.boundSubmit);
+        this.headerEl = document.createElement('div');
+        this.headerEl.className = `${CLASS}__header`;
+        this.fieldsEl = document.createElement('div');
+        this.fieldsEl.className = `${CLASS}__fields`;
+        this.actionsEl = document.createElement('div');
+        this.actionsEl.className = `${CLASS}__actions`;
+        this.submitBtn = document.createElement('db-button');
+        this.submitBtn.setAttribute('type', 'submit');
+        this.submitBtn.setAttribute('variant', 'primary');
+        this.resetBtn = document.createElement('db-button');
+        this.resetBtn.setAttribute('type', 'button');
+        this.resetBtn.setAttribute('variant', 'secondary');
+        this.resetBtn.addEventListener('click', this.boundReset);
+        this.actionsEl.append(this.submitBtn, this.resetBtn);
+        this.formEl.append(this.fieldsEl, this.actionsEl);
+        this.append(this.headerEl, this.formEl);
+    }
+    syncAll() {
+        this.syncClasses();
+        this.syncHeader();
+        this.renderFields();
+        this.syncActions();
+    }
+    syncClasses() {
+        const columns = this.getAttribute('columns') || '1';
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        this.className = [
+            CLASS,
+            `${CLASS}--columns-${columns}`,
+            `${CLASS}--${size}`,
+            `${CLASS}--${variant}`,
+            this.hasAttribute('submit-loading') && `${CLASS}--loading`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    syncHeader() {
+        if (!this.headerEl)
+            return;
+        const title = this.getAttribute('title') || '';
+        const description = this.getAttribute('description') || '';
+        this.headerEl.innerHTML = '';
+        if (!title && !description) {
+            this.headerEl.hidden = true;
+            return;
+        }
+        this.headerEl.hidden = false;
+        if (title) {
+            const heading = document.createElement('h3');
+            heading.className = `${CLASS}__title`;
+            heading.textContent = title;
+            this.headerEl.appendChild(heading);
+        }
+        if (description) {
+            const desc = document.createElement('p');
+            desc.className = `${CLASS}__description`;
+            desc.textContent = description;
+            this.headerEl.appendChild(desc);
+        }
+    }
+    syncActions() {
+        const submitText = this.getAttribute('submit-text') || '제출';
+        const resetText = this.getAttribute('reset-text') || '리셋';
+        const showReset = this.hasAttribute('show-reset');
+        if (this.submitBtn) {
+            this.submitBtn.textContent = submitText;
+            if (this.hasAttribute('submit-loading')) {
+                this.submitBtn.setAttribute('loading', '');
+            }
+            else {
+                this.submitBtn.removeAttribute('loading');
+            }
+            if (this.hasAttribute('submit-disabled')) {
+                this.submitBtn.setAttribute('disabled', '');
+            }
+            else {
+                this.submitBtn.removeAttribute('disabled');
+            }
+        }
+        if (this.resetBtn) {
+            this.resetBtn.textContent = resetText;
+            this.resetBtn.hidden = !showReset;
+        }
+    }
+    renderFields() {
+        if (!this.fieldsEl)
+            return;
+        const size = this.getAttribute('size') || 'm';
+        this.fieldsEl.innerHTML = '';
+        this.fieldWrappers.clear();
+        this.fields.forEach((field) => {
+            const wrapper = document.createElement('div');
+            wrapper.className = `${CLASS}__field-wrapper ${CLASS}__field-wrapper--${field.type || 'text'}`;
+            wrapper.dataset.field = field.name;
+            if (field.label && !(field.type === 'checkbox' && !field.checkboxGroup)) {
+                const label = document.createElement('label');
+                label.className = `${CLASS}__label`;
+                label.htmlFor = `db-form-${field.name}`;
+                label.textContent = field.label;
+                if (field.required || field.validation?.required) {
+                    const req = document.createElement('span');
+                    req.className = `${CLASS}__required`;
+                    req.textContent = '*';
+                    req.setAttribute('aria-hidden', 'true');
+                    label.appendChild(req);
+                }
+                wrapper.appendChild(label);
+            }
+            wrapper.appendChild(this.createFieldControl(field, size));
+            this.fieldsEl.appendChild(wrapper);
+            this.fieldWrappers.set(field.name, wrapper);
+            this.refreshFieldState(field.name);
+        });
+    }
+    refreshFieldState(fieldName) {
+        const field = this.fields.find((item) => item.name === fieldName);
+        const wrapper = this.fieldWrappers.get(fieldName);
+        if (!field || !wrapper)
+            return;
+        const showError = Boolean(this.touched[fieldName] && this.errors[fieldName]);
+        wrapper.classList.toggle(`${CLASS}__field-wrapper--error`, showError);
+        wrapper.querySelector(`.${CLASS}__error`)?.remove();
+        wrapper.querySelector(`.${CLASS}__help`)?.remove();
+        const control = wrapper.querySelector(`.${CLASS}__field, db-input, db-textarea, db-select, db-checkbox`);
+        if (control) {
+            if (showError) {
+                control.setAttribute('error', '');
+                control.setAttribute('error-message', this.errors[fieldName]);
+            }
+            else {
+                control.removeAttribute('error');
+                control.removeAttribute('error-message');
+            }
+        }
+        if (showError) {
+            const errorEl = document.createElement('div');
+            errorEl.className = `${CLASS}__error`;
+            errorEl.textContent = this.errors[fieldName];
+            wrapper.appendChild(errorEl);
+            return;
+        }
+        if (field.helpText) {
+            const helpEl = document.createElement('div');
+            helpEl.className = `${CLASS}__help`;
+            helpEl.textContent = field.helpText;
+            wrapper.appendChild(helpEl);
+        }
+    }
+    refreshAllFieldStates() {
+        this.fields.forEach((field) => this.refreshFieldState(field.name));
+    }
+    createFieldControl(field, size) {
+        const type = field.type || 'text';
+        const value = this.values[field.name];
+        const showError = Boolean(this.touched[field.name] && this.errors[field.name]);
+        const errorMessage = showError ? this.errors[field.name] : '';
+        if (type === 'textarea') {
+            const el = document.createElement('db-textarea');
+            el.className = `${CLASS}__field`;
+            el.setAttribute('name', field.name);
+            el.id = `db-form-${field.name}`;
+            el.setAttribute('size', size);
+            el.setAttribute('full-width', '');
+            if (field.placeholder)
+                el.setAttribute('placeholder', field.placeholder);
+            if (value !== undefined)
+                el.setAttribute('value', String(value));
+            if (field.disabled)
+                el.setAttribute('disabled', '');
+            if (field.readOnly)
+                el.setAttribute('readonly', '');
+            if (field.required)
+                el.setAttribute('required', '');
+            if (field.maxLength)
+                el.setAttribute('max-length', String(field.maxLength));
+            if (showError) {
+                el.setAttribute('error', '');
+                el.setAttribute('error-message', errorMessage);
+            }
+            el.addEventListener('db-change', (e) => {
+                const detail = e.detail;
+                this.handleFieldChange(field, detail.value);
+            });
+            el.addEventListener('db-input', (e) => {
+                const detail = e.detail;
+                this.handleFieldChange(field, detail.value, false);
+            });
+            return el;
+        }
+        if (type === 'select') {
+            const el = document.createElement('db-select');
+            el.className = `${CLASS}__field`;
+            el.setAttribute('name', field.name);
+            el.id = `db-form-${field.name}`;
+            el.setAttribute('size', size);
+            el.setAttribute('full-width', '');
+            if (field.placeholder)
+                el.setAttribute('placeholder', field.placeholder);
+            if (field.options)
+                el.setAttribute('options', JSON.stringify(field.options));
+            if (field.multiple)
+                el.setAttribute('multiple', '');
+            if (field.disabled)
+                el.setAttribute('disabled', '');
+            if (field.readOnly)
+                el.setAttribute('readonly', '');
+            if (field.required)
+                el.setAttribute('required', '');
+            if (value !== undefined) {
+                el.setAttribute('value', Array.isArray(value) ? JSON.stringify(value) : String(value));
+            }
+            if (showError) {
+                el.setAttribute('error', '');
+                el.setAttribute('error-message', errorMessage);
+            }
+            el.addEventListener('db-change', (e) => {
+                const detail = e.detail;
+                this.handleFieldChange(field, detail.value);
+            });
+            return el;
+        }
+        if (type === 'radio' && field.radioGroup) {
+            const group = document.createElement('div');
+            group.className = `${CLASS}__radio-group`;
+            group.setAttribute('role', 'radiogroup');
+            (field.options || []).forEach((option) => {
+                const radio = document.createElement('db-radio');
+                radio.setAttribute('name', field.name);
+                radio.setAttribute('value', option.value);
+                radio.setAttribute('size', size);
+                if (value === option.value)
+                    radio.setAttribute('checked', '');
+                if (field.disabled || option.disabled)
+                    radio.setAttribute('disabled', '');
+                radio.textContent = option.label;
+                radio.addEventListener('db-change', (e) => {
+                    const detail = e.detail;
+                    if (detail.checked) {
+                        this.handleFieldChange(field, option.value);
+                    }
+                });
+                group.appendChild(radio);
+            });
+            return group;
+        }
+        if (type === 'checkbox' && field.checkboxGroup) {
+            const group = document.createElement('div');
+            group.className = `${CLASS}__checkbox-group`;
+            const selected = Array.isArray(value) ? value : [];
+            (field.options || []).forEach((option) => {
+                const checkbox = document.createElement('db-checkbox');
+                checkbox.setAttribute('name', field.name);
+                checkbox.setAttribute('value', option.value);
+                checkbox.setAttribute('size', size);
+                if (selected.includes(option.value))
+                    checkbox.setAttribute('checked', '');
+                if (field.disabled || option.disabled)
+                    checkbox.setAttribute('disabled', '');
+                checkbox.textContent = option.label;
+                checkbox.addEventListener('db-change', (e) => {
+                    const detail = e.detail;
+                    const current = Array.isArray(this.values[field.name])
+                        ? [...this.values[field.name]]
+                        : [];
+                    const next = detail.checked
+                        ? [...new Set([...current, option.value])]
+                        : current.filter((v) => v !== option.value);
+                    this.handleFieldChange(field, next);
+                });
+                group.appendChild(checkbox);
+            });
+            return group;
+        }
+        if (type === 'checkbox') {
+            const el = document.createElement('db-checkbox');
+            el.className = `${CLASS}__field`;
+            el.setAttribute('name', field.name);
+            el.id = `db-form-${field.name}`;
+            el.setAttribute('size', size);
+            if (value)
+                el.setAttribute('checked', '');
+            if (field.disabled)
+                el.setAttribute('disabled', '');
+            if (field.readOnly)
+                el.setAttribute('readonly', '');
+            if (field.required)
+                el.setAttribute('required', '');
+            el.textContent = field.label || '';
+            el.addEventListener('db-change', (e) => {
+                const detail = e.detail;
+                this.handleFieldChange(field, detail.checked);
+            });
+            return el;
+        }
+        const el = document.createElement('db-input');
+        el.className = `${CLASS}__field`;
+        el.setAttribute('name', field.name);
+        el.id = `db-form-${field.name}`;
+        el.setAttribute('type', type);
+        el.setAttribute('size', size);
+        el.setAttribute('full-width', '');
+        if (field.placeholder)
+            el.setAttribute('placeholder', field.placeholder);
+        if (value !== undefined && value !== false)
+            el.setAttribute('value', String(value));
+        if (field.disabled)
+            el.setAttribute('disabled', '');
+        if (field.readOnly)
+            el.setAttribute('readonly', '');
+        if (field.required)
+            el.setAttribute('required', '');
+        if (field.min !== undefined)
+            el.setAttribute('min', String(field.min));
+        if (field.max !== undefined)
+            el.setAttribute('max', String(field.max));
+        if (field.minLength !== undefined)
+            el.setAttribute('minlength', String(field.minLength));
+        if (field.maxLength !== undefined)
+            el.setAttribute('maxlength', String(field.maxLength));
+        if (field.pattern)
+            el.setAttribute('pattern', field.pattern);
+        if (showError) {
+            el.setAttribute('error', '');
+            el.setAttribute('error-message', errorMessage);
+        }
+        el.addEventListener('db-change', (e) => {
+            const detail = e.detail;
+            this.handleFieldChange(field, detail.value);
+        });
+        el.addEventListener('db-input', (e) => {
+            const detail = e.detail;
+            this.handleFieldChange(field, detail.value, false);
+        });
+        return el;
+    }
+    handleFieldChange(field, value, touch = true) {
+        this.values[field.name] = value;
+        if (touch) {
+            this.touched[field.name] = true;
+        }
+        const error = this.validateField(field, value);
+        this.errors[field.name] = error || '';
+        this.refreshFieldState(field.name);
+        this.dispatchEvent(new CustomEvent('db-change', {
+            bubbles: true,
+            composed: true,
+            detail: { values: { ...this.values } },
+        }));
+    }
+    validateField(field, value) {
+        const validation = field.validation || {};
+        const required = validation.required ?? field.required;
+        if (required) {
+            if (value === undefined
+                || value === null
+                || value === ''
+                || value === false
+                || (Array.isArray(value) && value.length === 0)) {
+                return field.errorMessage || `${field.label || field.name}은(는) 필수입니다.`;
+            }
+        }
+        if (validation.min !== undefined && Number(value) < validation.min) {
+            return field.errorMessage || `최소값은 ${validation.min}입니다.`;
+        }
+        if (validation.max !== undefined && Number(value) > validation.max) {
+            return field.errorMessage || `최대값은 ${validation.max}입니다.`;
+        }
+        if (validation.minLength !== undefined && String(value).length < validation.minLength) {
+            return field.errorMessage || `최소 ${validation.minLength}자 이상 입력해주세요.`;
+        }
+        if (validation.maxLength !== undefined && String(value).length > validation.maxLength) {
+            return field.errorMessage || `최대 ${validation.maxLength}자까지 입력 가능합니다.`;
+        }
+        const patternSource = validation.pattern || field.pattern;
+        if (patternSource && String(value)) {
+            try {
+                const regex = new RegExp(patternSource);
+                if (!regex.test(String(value))) {
+                    return field.errorMessage || '올바른 형식으로 입력해주세요.';
+                }
+            }
+            catch {
+                // ignore invalid pattern
+            }
+        }
+        return undefined;
+    }
+    validateForm() {
+        let isValid = true;
+        this.fields.forEach((field) => {
+            const error = this.validateField(field, this.values[field.name]);
+            if (error) {
+                this.errors[field.name] = error;
+                isValid = false;
+            }
+            else {
+                this.errors[field.name] = '';
+            }
+        });
+        return isValid;
+    }
+    handleSubmit(e) {
+        e.preventDefault();
+        this.fields.forEach((field) => {
+            this.touched[field.name] = true;
+        });
+        if (!this.validateForm()) {
+            this.refreshAllFieldStates();
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('db-submit', {
+            bubbles: true,
+            composed: true,
+            detail: { values: { ...this.values } },
+        }));
+    }
+    handleReset(e) {
+        e.preventDefault();
+        this.values = { ...this.initialValues };
+        this.bootstrapValues();
+        this.errors = {};
+        this.touched = {};
+        this.renderFields();
+        this.dispatchEvent(new CustomEvent('db-reset', {
+            bubbles: true,
+            composed: true,
+            detail: { values: { ...this.values } },
+        }));
+        this.dispatchEvent(new CustomEvent('db-change', {
+            bubbles: true,
+            composed: true,
+            detail: { values: { ...this.values } },
+        }));
+    }
+}
+if (!customElements.get('db-form')) {
+    customElements.define('db-form', DbForm);
+}
+
+export { DbForm };