@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,566 +1 @@
-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 };
+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};