@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,266 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const SIZES = ['s', 'm', 'l'];
-const VARIANTS = ['default', 'outlined', 'filled'];
-class DbDropzone extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.internalDragOver = false;
-        this.handleFileInputChange = () => {
-            this.emitFiles(this.fileInput?.files ?? null);
-            if (this.fileInput)
-                this.fileInput.value = '';
-        };
-        this.handleDragOver = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.isDisabled())
-                return;
-            this.internalDragOver = true;
-            this.syncClasses();
-            this.dispatchEvent(new CustomEvent('db-drag-over', { bubbles: true, composed: true, detail: { event } }));
-        };
-        this.handleDragLeave = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.isDisabled())
-                return;
-            this.internalDragOver = false;
-            this.syncClasses();
-            this.dispatchEvent(new CustomEvent('db-drag-leave', { bubbles: true, composed: true, detail: { event } }));
-        };
-        this.handleDrop = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.isDisabled())
-                return;
-            this.internalDragOver = false;
-            this.syncClasses();
-            this.emitFiles(event.dataTransfer?.files ?? null);
-            this.dispatchEvent(new CustomEvent('db-drop', { bubbles: true, composed: true, detail: { event } }));
-        };
-        this.handleClick = (event) => {
-            if (this.isDisabled())
-                return;
-            if (event.target.closest('.designbase-wc-dropzone__button'))
-                return;
-            this.fileInput?.click();
-            this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true, detail: { event } }));
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'size',
-            'variant',
-            'show-icon',
-            'icon',
-            'image',
-            'title',
-            'description',
-            'button-text',
-            'show-button',
-            'accept',
-            'max-size',
-            'multiple',
-            'drag-over',
-            'disabled',
-            'readonly',
-        ];
-    }
-    connectedCallback() {
-        this.ensureInput();
-        this.sync();
-        this.addEventListener('dragover', this.handleDragOver);
-        this.addEventListener('dragleave', this.handleDragLeave);
-        this.addEventListener('drop', this.handleDrop);
-        this.addEventListener('click', this.handleClick);
-    }
-    disconnectedCallback() {
-        this.removeEventListener('dragover', this.handleDragOver);
-        this.removeEventListener('dragleave', this.handleDragLeave);
-        this.removeEventListener('drop', this.handleDrop);
-        this.removeEventListener('click', this.handleClick);
-    }
-    attributeChangedCallback() {
-        if (this.isConnected)
-            this.sync();
-    }
-    ensureInput() {
-        if (this.fileInput)
-            return;
-        this.fileInput = document.createElement('input');
-        this.fileInput.type = 'file';
-        this.fileInput.style.display = 'none';
-        this.fileInput.setAttribute('data-wc-internal', '');
-        this.fileInput.addEventListener('change', this.handleFileInputChange);
-        this.append(this.fileInput);
-    }
-    isDisabled() {
-        return this.hasAttribute('disabled') || this.hasAttribute('readonly');
-    }
-    isDragOver() {
-        if (this.hasAttribute('drag-over')) {
-            return this.getAttribute('drag-over') !== 'false';
-        }
-        return this.internalDragOver;
-    }
-    validateFile(file) {
-        const accept = this.getAttribute('accept');
-        if (accept) {
-            const acceptedTypes = accept.split(',').map((type) => type.trim());
-            const fileType = file.type;
-            const fileExtension = `.${file.name.split('.').pop()?.toLowerCase()}`;
-            const isValidType = acceptedTypes.some((type) => {
-                if (type.startsWith('.'))
-                    return fileExtension === type.toLowerCase();
-                return fileType === type || fileType.startsWith(type.replace('*', ''));
-            });
-            if (!isValidType)
-                return false;
-        }
-        const maxSize = Number(this.getAttribute('max-size') || 0);
-        if (maxSize > 0 && file.size > maxSize)
-            return false;
-        return true;
-    }
-    emitFiles(files) {
-        if (!files || files.length === 0)
-            return;
-        const validFiles = Array.from(files).filter((file) => this.validateFile(file));
-        if (!validFiles.length)
-            return;
-        this.dispatchEvent(new CustomEvent('db-file-select', {
-            bubbles: true,
-            composed: true,
-            detail: { files: validFiles },
-        }));
-    }
-    getDescriptionText() {
-        const description = this.getAttribute('description');
-        if (description)
-            return description;
-        const accept = this.getAttribute('accept');
-        if (!accept)
-            return '모든 파일 형식 지원';
-        const types = accept.split(',').map((type) => {
-            const trimmed = type.trim();
-            if (trimmed.startsWith('.'))
-                return trimmed.toUpperCase();
-            if (trimmed.includes('*'))
-                return trimmed.replace('*', '').toUpperCase();
-            return trimmed;
-        });
-        let desc = types.join(', ');
-        const maxSize = Number(this.getAttribute('max-size') || 0);
-        if (maxSize > 0) {
-            const k = 1024;
-            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-            const i = Math.floor(Math.log(maxSize) / Math.log(k));
-            const sizeText = `${parseFloat((maxSize / k ** i).toFixed(2))} ${sizes[i]}`;
-            desc += ` (최대 ${sizeText})`;
-        }
-        return desc;
-    }
-    collectChildren() {
-        return Array.from(this.children).filter((child) => child !== this.fileInput && !child.hasAttribute('data-wc-internal'));
-    }
-    syncClasses() {
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const safeSize = SIZES.includes(size) ? size : 'm';
-        const safeVariant = VARIANTS.includes(variant) ? variant : 'default';
-        this.className = [
-            'designbase-wc-dropzone',
-            `designbase-wc-dropzone--size-${safeSize}`,
-            `designbase-wc-dropzone--variant-${safeVariant}`,
-            this.isDragOver() && 'designbase-wc-dropzone--drag-over',
-            this.hasAttribute('disabled') && 'designbase-wc-dropzone--disabled',
-            this.hasAttribute('readonly') && 'designbase-wc-dropzone--readonly',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
-    sync() {
-        this.ensureInput();
-        this.syncClasses();
-        const accept = this.getAttribute('accept');
-        const multiple = this.hasAttribute('multiple');
-        if (this.fileInput) {
-            if (accept)
-                this.fileInput.setAttribute('accept', accept);
-            else
-                this.fileInput.removeAttribute('accept');
-            this.fileInput.toggleAttribute('multiple', multiple);
-            this.fileInput.disabled = this.isDisabled();
-        }
-        const userChildren = this.collectChildren();
-        const defaultContent = this.querySelector(':scope > .designbase-wc-dropzone__content[data-wc-internal]');
-        if (userChildren.length) {
-            defaultContent?.remove();
-            return;
-        }
-        let content = defaultContent;
-        if (!content) {
-            content = document.createElement('div');
-            content.className = 'designbase-wc-dropzone__content';
-            content.setAttribute('data-wc-internal', '');
-            this.append(content);
-        }
-        content.replaceChildren();
-        const size = this.getAttribute('size') || 'm';
-        const safeSize = SIZES.includes(size) ? size : 'm';
-        const image = this.getAttribute('image');
-        const showIcon = this.getAttribute('show-icon') !== 'false';
-        const iconName = this.getAttribute('icon') || 'gallery';
-        const title = this.getAttribute('title') || '파일을 드래그하여 업로드하거나 클릭하여 선택하세요';
-        const description = this.getDescriptionText();
-        const showButton = this.hasAttribute('show-button');
-        const buttonText = this.getAttribute('button-text') || '파일 선택';
-        if (image) {
-            const imageWrap = document.createElement('div');
-            imageWrap.className = 'designbase-wc-dropzone__image';
-            const img = document.createElement('img');
-            img.src = image;
-            img.alt = 'Upload illustration';
-            imageWrap.append(img);
-            content.append(imageWrap);
-        }
-        else if (showIcon) {
-            const iconWrap = document.createElement('div');
-            iconWrap.className = 'designbase-wc-dropzone__icon';
-            const iconSize = safeSize === 's' ? 32 : safeSize === 'l' ? 56 : 48;
-            iconWrap.append(createDbIcon(iconName, iconSize));
-            content.append(iconWrap);
-        }
-        if (title) {
-            const titleEl = document.createElement('div');
-            titleEl.className = 'designbase-wc-dropzone__title';
-            titleEl.textContent = title;
-            content.append(titleEl);
-        }
-        if (description) {
-            const descriptionEl = document.createElement('div');
-            descriptionEl.className = 'designbase-wc-dropzone__description';
-            descriptionEl.textContent = description;
-            content.append(descriptionEl);
-        }
-        if (showButton) {
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = 'designbase-wc-dropzone__button';
-            button.textContent = buttonText;
-            button.disabled = this.isDisabled();
-            button.addEventListener('click', (event) => {
-                event.stopPropagation();
-                if (!this.isDisabled())
-                    this.fileInput?.click();
-            });
-            content.append(button);
-        }
-    }
-}
-if (!customElements.get('db-dropzone')) {
-    customElements.define('db-dropzone', DbDropzone);
-}
-
-export { DbDropzone };
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],i=["default","outlined","filled"];class DbDropzone extends HTMLElement{constructor(){super(...arguments),this.internalDragOver=!1,this.handleFileInputChange=()=>{this.emitFiles(this.fileInput?.files??null),this.fileInput&&(this.fileInput.value="")},this.handleDragOver=e=>{e.preventDefault(),e.stopPropagation(),this.isDisabled()||(this.internalDragOver=!0,this.syncClasses(),this.dispatchEvent(new CustomEvent("db-drag-over",{bubbles:!0,composed:!0,detail:{event:e}})))},this.handleDragLeave=e=>{e.preventDefault(),e.stopPropagation(),this.isDisabled()||(this.internalDragOver=!1,this.syncClasses(),this.dispatchEvent(new CustomEvent("db-drag-leave",{bubbles:!0,composed:!0,detail:{event:e}})))},this.handleDrop=e=>{e.preventDefault(),e.stopPropagation(),this.isDisabled()||(this.internalDragOver=!1,this.syncClasses(),this.emitFiles(e.dataTransfer?.files??null),this.dispatchEvent(new CustomEvent("db-drop",{bubbles:!0,composed:!0,detail:{event:e}})))},this.handleClick=e=>{this.isDisabled()||e.target.closest(".designbase-wc-dropzone__button")||(this.fileInput?.click(),this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0,detail:{event:e}})))}}static get observedAttributes(){return["size","variant","show-icon","icon","image","title","description","button-text","show-button","accept","max-size","multiple","drag-over","disabled","readonly"]}connectedCallback(){this.ensureInput(),this.sync(),this.addEventListener("dragover",this.handleDragOver),this.addEventListener("dragleave",this.handleDragLeave),this.addEventListener("drop",this.handleDrop),this.addEventListener("click",this.handleClick)}disconnectedCallback(){this.removeEventListener("dragover",this.handleDragOver),this.removeEventListener("dragleave",this.handleDragLeave),this.removeEventListener("drop",this.handleDrop),this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.isConnected&&this.sync()}ensureInput(){this.fileInput||(this.fileInput=document.createElement("input"),this.fileInput.type="file",this.fileInput.style.display="none",this.fileInput.setAttribute("data-wc-internal",""),this.fileInput.addEventListener("change",this.handleFileInputChange),this.append(this.fileInput))}isDisabled(){return this.hasAttribute("disabled")||this.hasAttribute("readonly")}isDragOver(){return this.hasAttribute("drag-over")?"false"!==this.getAttribute("drag-over"):this.internalDragOver}validateFile(e){const t=this.getAttribute("accept");if(t){const i=t.split(",").map(e=>e.trim()),s=e.type,n=`.${e.name.split(".").pop()?.toLowerCase()}`;if(!i.some(e=>e.startsWith(".")?n===e.toLowerCase():s===e||s.startsWith(e.replace("*",""))))return!1}const i=Number(this.getAttribute("max-size")||0);return!(i>0&&e.size>i)}emitFiles(e){if(!e||0===e.length)return;const t=Array.from(e).filter(e=>this.validateFile(e));t.length&&this.dispatchEvent(new CustomEvent("db-file-select",{bubbles:!0,composed:!0,detail:{files:t}}))}getDescriptionText(){const e=this.getAttribute("description");if(e)return e;const t=this.getAttribute("accept");if(!t)return"모든 파일 형식 지원";let i=t.split(",").map(e=>{const t=e.trim();return t.startsWith(".")?t.toUpperCase():t.includes("*")?t.replace("*","").toUpperCase():t}).join(", ");const s=Number(this.getAttribute("max-size")||0);if(s>0){const e=1024,t=["Bytes","KB","MB","GB"],n=Math.floor(Math.log(s)/Math.log(e));i+=` (최대 ${`${parseFloat((s/e**n).toFixed(2))} ${t[n]}`})`}return i}collectChildren(){return Array.from(this.children).filter(e=>e!==this.fileInput&&!e.hasAttribute("data-wc-internal"))}syncClasses(){const e=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",n=t.includes(e)?e:"m",a=i.includes(s)?s:"default";this.className=["designbase-wc-dropzone",`designbase-wc-dropzone--size-${n}`,`designbase-wc-dropzone--variant-${a}`,this.isDragOver()&&"designbase-wc-dropzone--drag-over",this.hasAttribute("disabled")&&"designbase-wc-dropzone--disabled",this.hasAttribute("readonly")&&"designbase-wc-dropzone--readonly"].filter(Boolean).join(" ")}sync(){this.ensureInput(),this.syncClasses();const i=this.getAttribute("accept"),s=this.hasAttribute("multiple");this.fileInput&&(i?this.fileInput.setAttribute("accept",i):this.fileInput.removeAttribute("accept"),this.fileInput.toggleAttribute("multiple",s),this.fileInput.disabled=this.isDisabled());const n=this.collectChildren(),a=this.querySelector(":scope > .designbase-wc-dropzone__content[data-wc-internal]");if(n.length)return void a?.remove();let r=a;r||(r=document.createElement("div"),r.className="designbase-wc-dropzone__content",r.setAttribute("data-wc-internal",""),this.append(r)),r.replaceChildren();const l=this.getAttribute("size")||"m",o=t.includes(l)?l:"m",d=this.getAttribute("image"),c="false"!==this.getAttribute("show-icon"),h=this.getAttribute("icon")||"gallery",p=this.getAttribute("title")||"파일을 드래그하여 업로드하거나 클릭하여 선택하세요",u=this.getDescriptionText(),b=this.hasAttribute("show-button"),g=this.getAttribute("button-text")||"파일 선택";if(d){const e=document.createElement("div");e.className="designbase-wc-dropzone__image";const t=document.createElement("img");t.src=d,t.alt="Upload illustration",e.append(t),r.append(e)}else if(c){const t=document.createElement("div");t.className="designbase-wc-dropzone__icon";const i="s"===o?32:"l"===o?56:48;t.append(e(h,i)),r.append(t)}if(p){const e=document.createElement("div");e.className="designbase-wc-dropzone__title",e.textContent=p,r.append(e)}if(u){const e=document.createElement("div");e.className="designbase-wc-dropzone__description",e.textContent=u,r.append(e)}if(b){const e=document.createElement("button");e.type="button",e.className="designbase-wc-dropzone__button",e.textContent=g,e.disabled=this.isDisabled(),e.addEventListener("click",e=>{e.stopPropagation(),this.isDisabled()||this.fileInput?.click()}),r.append(e)}}}customElements.get("db-dropzone")||customElements.define("db-dropzone",DbDropzone);export{DbDropzone};

package/dist/esm/components/db-email-verify.d.ts

@@ -0,0 +1,64 @@
+import './db-button.js';
+import './db-input.js';
+import './db-otp-input.js';
+
+/**
+ * ui-wc — db-email-verify (수동 작성, 자동 동기화 대상 아님)
+ *
+ * 이메일 인증: code(OTP) 모드 / confirm(메일함 확인) 모드.
+ */
+
+declare const SIZES: readonly ["s", "m", "l"];
+type Size = (typeof SIZES)[number];
+declare class DbEmailVerify extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private timerId;
+    private remaining;
+    private emailInput;
+    private sendBtn;
+    private otpInput;
+    private timerEl;
+    private resendBtn;
+    private verifyBtn;
+    private confirmBtn;
+    private codeBlock;
+    private confirmBlock;
+    private verifiedBlock;
+    private emailRow;
+    private errorEl;
+    private closeBtn?;
+    get mode(): 'code' | 'confirm';
+    set mode(v: 'code' | 'confirm');
+    get size(): Size;
+    set size(v: Size);
+    get step(): 'email' | 'code' | 'sent' | 'verified';
+    set step(v: 'email' | 'code' | 'sent' | 'verified');
+    get email(): string;
+    set email(v: string);
+    get countdown(): number;
+    set countdown(v: number);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    startCodeStep(): void;
+    /** 수동 제어 모드에서 재전송 성공 후 카운트다운을 다시 시작합니다. */
+    restartCountdown(): void;
+    markSent(): void;
+    markVerified(): void;
+    private clearTimer;
+    private startTimer;
+    private renderTimer;
+    private build;
+    private sync;
+    private isEmailValid;
+    private requestVerify;
+    private setEmphasizedText;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-email-verify': DbEmailVerify;
+    }
+}
+
+export { DbEmailVerify };

package/dist/esm/components/db-email-verify.js

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";import"./db-button.js";import"./db-input.js";import"./db-otp-input.js";const e=["s","m","l"];function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}class DbEmailVerify extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.timerId=null,this.remaining=0}static get observedAttributes(){return["mode","email","code","step","size","disabled","error","error-message","countdown","title","description","send-label","resend-label","verify-label","confirm-label","code-length","closable","manual","sending","verifying","auto-submit"]}get mode(){return"confirm"===this.getAttribute("mode")?"confirm":"code"}set mode(t){this.setAttribute("mode",t)}get size(){return function pick(t,e,i){return t.includes(e)?e:i}(e,this.getAttribute("size"),"m")}set size(t){this.setAttribute("size",t)}get step(){const t=this.getAttribute("step");return"code"===t||"sent"===t||"verified"===t?t:"email"}set step(t){this.setAttribute("step",t)}get email(){return this.getAttribute("email")||""}set email(t){this.setAttribute("email",t)}get countdown(){const t=Number(this.getAttribute("countdown")||180);return Number.isFinite(t)&&t>0?t:180}set countdown(t){this.setAttribute("countdown",String(t))}connectedCallback(){this.build(),this.sync(),"code"===this.mode&&"code"===this.step&&this.startTimer(this.countdown)}disconnectedCallback(){this.clearTimer()}attributeChangedCallback(t,e,i){this.built&&(this.sync(),"step"!==t&&"mode"!==t||e===i||("code"===this.mode&&"code"===this.step?this.startTimer(this.countdown):this.clearTimer()))}startCodeStep(){"code"!==this.mode&&(this.mode="code"),"code"===this.step?this.startTimer(this.countdown):this.step="code",requestAnimationFrame(()=>this.otpInput?.focus?.())}restartCountdown(){"code"===this.mode&&"code"===this.step&&this.startTimer(this.countdown)}markSent(){this.step="sent",this.clearTimer()}markVerified(){this.step="verified",this.clearTimer()}clearTimer(){this.timerId&&clearInterval(this.timerId),this.timerId=null,this.remaining=0}startTimer(t){this.clearTimer(),this.remaining=t,this.renderTimer(),this.timerId=setInterval(()=>{this.remaining-=1,this.renderTimer(),this.remaining<=0&&(this.clearTimer(),this.resendBtn.disabled=!1,this.dispatchEvent(new CustomEvent("db-countdown-complete",{bubbles:!0,composed:!0})))},1e3)}renderTimer(){const t=Math.max(0,Math.floor(this.remaining/60)),e=Math.max(0,this.remaining%60);this.timerEl.textContent=`${String(t).padStart(2,"0")}:${String(e).padStart(2,"0")}`,this.timerEl.setAttribute("aria-label",`남은 시간 ${t}분 ${e}초`),this.resendBtn.disabled=this.remaining>0||this.hasAttribute("disabled")}build(){if(this.built)return;this.built=!0;const e="designbase-wc-email-verify";this.replaceChildren();const i=el("div",`${e}__shell`),s=el("div",`${e}__top`),n=el("span",`${e}__eyebrow`);n.dataset.role="eyebrow",this.closeBtn=el("button",`${e}__close`),this.closeBtn.type="button",this.closeBtn.setAttribute("aria-label","닫기"),this.closeBtn.append(t("close",18)),this.closeBtn.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}),s.append(n,this.closeBtn);const r=el("div",`${e}__header`),o=el("h3",`${e}__title`);o.dataset.role="title";const d=el("p",`${e}__description`);d.dataset.role="description",r.append(o,d),this.emailRow=el("div",`${e}__email-row`),this.emailInput=document.createElement("db-input"),this.emailInput.setAttribute("type","email"),this.emailInput.setAttribute("label","이메일"),this.emailInput.setAttribute("placeholder","name@example.com"),this.emailInput.setAttribute("full-width",""),this.emailInput.setAttribute("start-icon","mail"),this.emailInput.addEventListener("db-input",t=>{t.stopPropagation();const e=String(t.detail?.value??this.emailInput.value??"");this.setAttribute("email",e),this.dispatchEvent(new CustomEvent("db-email-change",{detail:{email:e},bubbles:!0,composed:!0}))}),this.sendBtn=document.createElement("db-button"),this.sendBtn.setAttribute("variant","primary"),this.sendBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.isEmailValid()&&(this.dispatchEvent(new CustomEvent("db-send-code",{detail:{email:this.email,mode:this.mode},bubbles:!0,composed:!0})),this.hasAttribute("manual")||("confirm"===this.mode?this.markSent():this.startCodeStep()))}),this.emailRow.append(this.emailInput,this.sendBtn),this.codeBlock=el("div",`${e}__code`);const a=el("div",`${e}__code-head`),l=el("span",`${e}__code-label`);l.textContent="인증 코드",this.timerEl=el("span",`${e}__timer`),a.append(l,this.timerEl),this.otpInput=document.createElement("db-otp-input"),this.otpInput.addEventListener("db-change",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.setAttribute("code",e),this.dispatchEvent(new CustomEvent("db-code-change",{detail:{code:e},bubbles:!0,composed:!0}))}),this.otpInput.addEventListener("db-complete",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.dispatchEvent(new CustomEvent("db-code-complete",{detail:{code:e,email:this.email},bubbles:!0,composed:!0})),this.hasAttribute("auto-submit")&&this.requestVerify()});const h=el("div",`${e}__code-actions`);this.resendBtn=el("button",`${e}__resend`),this.resendBtn.type="button",this.resendBtn.addEventListener("click",()=>{this.resendBtn.disabled||(this.dispatchEvent(new CustomEvent("db-resend",{detail:{email:this.email},bubbles:!0,composed:!0})),this.hasAttribute("manual")||this.startTimer(this.countdown))}),this.verifyBtn=document.createElement("db-button"),this.verifyBtn.setAttribute("variant","primary"),this.verifyBtn.setAttribute("full-width",""),this.verifyBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.requestVerify()}),h.append(this.resendBtn,this.verifyBtn),this.codeBlock.append(a,this.otpInput,h),this.confirmBlock=el("div",`${e}__confirm`);const c=el("div",`${e}__confirm-icon`);c.append(t("mail",40));const m=el("span",`${e}__confirm-badge`);m.append(t("circle-checked",16)),c.append(m);const u=el("h4",`${e}__confirm-title`);u.dataset.role="confirm-title";const b=el("p",`${e}__confirm-desc`);b.dataset.role="confirm-desc",this.confirmBtn=document.createElement("db-button"),this.confirmBtn.setAttribute("variant","primary"),this.confirmBtn.setAttribute("full-width",""),this.confirmBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-confirm",{detail:{email:this.email},bubbles:!0,composed:!0}))});const p=el("button",`${e}__resend`);p.type="button",p.dataset.role="confirm-resend",p.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-resend",{detail:{email:this.email},bubbles:!0,composed:!0}))}),this.confirmBlock.append(c,u,b,this.confirmBtn,p),this.verifiedBlock=el("div",`${e}__confirm`);const f=el("div",`${e}__confirm-icon`);f.append(t("circle-checked",40));const v=el("h4",`${e}__confirm-title`);v.textContent="이메일 인증 완료";const g=el("p",`${e}__confirm-desc`);g.dataset.role="verified-desc",this.verifiedBlock.append(f,v,g),this.errorEl=el("p",`${e}__error`),this.errorEl.hidden=!0,i.append(s,r,this.emailRow,this.codeBlock,this.confirmBlock,this.verifiedBlock,this.errorEl),this.append(i)}sync(){const t="designbase-wc-email-verify",e=this.size,i=this.mode,s=this.step,n=this.hasAttribute("disabled"),r=this.getAttribute("code-length")||"6",o=this.email;this.className=[t,`${t}--${e}`,`${t}--mode-${i}`,`${t}--step-${s}`,n&&`${t}--disabled`,this.hasAttribute("error")&&`${t}--error`].filter(Boolean).join(" ");this.querySelector('[data-role="eyebrow"]').textContent="confirm"===i?"회원가입":"이메일 인증";const d=this.querySelector('[data-role="title"]'),a=this.querySelector('[data-role="description"]');d.textContent=this.getAttribute("title")||("confirm"===i?"이메일을 확인해 주세요":"이메일 인증");const l=this.getAttribute("description");l?a.textContent=l:"confirm"===i?this.setEmphasizedText(a,"",o||"your@email.com"," 으로 인증 링크를 보냈어요."):this.setEmphasizedText(a,"인증 코드를 ",o||"이메일"," 로 보내 드릴게요."),this.closeBtn&&(this.closeBtn.hidden=!this.hasAttribute("closable")),this.emailInput.value=o,this.emailInput.setAttribute("size",e),this.emailInput.toggleAttribute("disabled",n||"code"===s||"sent"===s||"verified"===s),this.sendBtn.setAttribute("size",e),this.sendBtn.textContent=this.getAttribute("send-label")||("confirm"===i?"인증 메일 보내기":"인증번호 받기"),this.sendBtn.toggleAttribute("disabled",n||!this.isEmailValid()||"email"!==s),this.sendBtn.toggleAttribute("loading",this.hasAttribute("sending")),this.otpInput.setAttribute("length",r),this.otpInput.setAttribute("size",e),this.otpInput.setAttribute("value",this.getAttribute("code")||""),this.otpInput.toggleAttribute("disabled",n||"code"!==s),this.resendBtn.textContent=this.getAttribute("resend-label")||"재전송",this.verifyBtn.setAttribute("size",e),this.verifyBtn.textContent=this.getAttribute("verify-label")||"인증하기",this.verifyBtn.toggleAttribute("disabled",n||"code"!==s||(this.getAttribute("code")||"").length!==Number(r)),this.verifyBtn.toggleAttribute("loading",this.hasAttribute("verifying"));const h=this.querySelector('[data-role="confirm-title"]'),c=this.querySelector('[data-role="confirm-desc"]');h.textContent="메일함을 확인해 주세요!",this.setEmphasizedText(c,"",o||"your@email.com"," 으로 보낸 링크를 클릭하면 인증이 완료됩니다."),this.confirmBtn.setAttribute("size",e),this.confirmBtn.textContent=this.getAttribute("confirm-label")||"확인";const m=this.querySelector('[data-role="confirm-resend"]');m&&(m.textContent="메일 다시 보내기");const u=this.querySelector('[data-role="verified-desc"]');this.setEmphasizedText(u,"",o||"your@email.com"," 주소가 인증되었습니다."),this.emailRow.hidden="confirm"===i&&("sent"===s||"verified"===s)||"code"===i&&"verified"===s,this.codeBlock.hidden=!("code"===i&&"code"===s),this.confirmBlock.hidden=!("confirm"===i&&("sent"===s||"verified"===s)),this.verifiedBlock.hidden=!("code"===i&&"verified"===s);const b=this.getAttribute("error-message")||"";this.errorEl.textContent=b,this.errorEl.hidden=!this.hasAttribute("error")||!b}isEmailValid(){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email.trim())}requestVerify(){const t=(this.getAttribute("code")||this.otpInput.value).replace(/\D/g,""),e=Number(this.getAttribute("code-length")||6);"code"!==this.step||t.length!==e||this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("db-verify",{detail:{email:this.email,code:t},bubbles:!0,composed:!0}))}setEmphasizedText(t,e,i,s){const n=document.createElement("strong");n.textContent=i,t.replaceChildren(document.createTextNode(e),n,document.createTextNode(s))}}customElements.get("db-email-verify")||customElements.define("db-email-verify",DbEmailVerify);export{DbEmailVerify};

package/dist/esm/components/db-empty-state.js

@@ -1,97 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-class DbEmptyState extends HTMLElement {
-    static get observedAttributes() {
-        return ['variant', 'size', 'title', 'description', 'action-text', 'secondary-action-text', 'image', 'image-alt'];
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-    getIconName(variant) {
-        if (variant === 'no-results')
-            return 'search';
-        if (variant === 'no-access')
-            return 'user';
-        if (variant === 'error')
-            return 'cloud-close';
-        if (variant === 'onboarding')
-            return 'bulb';
-        return 'plus';
-    }
-    render() {
-        const variant = this.getAttribute('variant') || 'no-data';
-        const size = this.getAttribute('size') || 'm';
-        const title = this.getAttribute('title') || '';
-        const description = this.getAttribute('description') || '';
-        const actionText = this.getAttribute('action-text');
-        const secondaryActionText = this.getAttribute('secondary-action-text');
-        const image = this.getAttribute('image');
-        const imageAlt = this.getAttribute('image-alt') || title;
-        const iconSize = size === 's' ? 24 : size === 'l' ? 48 : 32;
-        this.className = `designbase-wc-empty-state designbase-wc-empty-state--${variant} designbase-wc-empty-state--${size}`;
-        this.setAttribute('role', 'status');
-        this.setAttribute('aria-live', 'polite');
-        this.replaceChildren();
-        const content = document.createElement('div');
-        content.className = 'designbase-wc-empty-state__content';
-        if (image) {
-            const imageWrap = document.createElement('div');
-            imageWrap.className = 'designbase-wc-empty-state__image';
-            const imageElement = document.createElement('img');
-            imageElement.className = 'designbase-wc-empty-state__image-element';
-            imageElement.src = image;
-            imageElement.alt = imageAlt;
-            imageWrap.append(imageElement);
-            content.append(imageWrap);
-        }
-        else {
-            const icon = document.createElement('div');
-            icon.className = 'designbase-wc-empty-state__icon';
-            icon.append(createDbIcon(this.getIconName(variant), iconSize));
-            content.append(icon);
-        }
-        const heading = document.createElement('h3');
-        heading.className = 'designbase-wc-empty-state__title';
-        heading.textContent = title;
-        content.append(heading);
-        if (description) {
-            const body = document.createElement('p');
-            body.className = 'designbase-wc-empty-state__description';
-            body.textContent = description;
-            content.append(body);
-        }
-        if (actionText || secondaryActionText) {
-            const actions = document.createElement('div');
-            actions.className = 'designbase-wc-empty-state__actions';
-            if (actionText) {
-                const action = document.createElement('db-button');
-                action.setAttribute('variant', variant === 'onboarding' ? 'primary' : 'secondary');
-                action.setAttribute('size', size);
-                action.textContent = actionText;
-                action.addEventListener('db-click', () => {
-                    this.dispatchEvent(new CustomEvent('db-action', { bubbles: true, composed: true }));
-                });
-                actions.append(action);
-            }
-            if (secondaryActionText) {
-                const action = document.createElement('db-button');
-                action.setAttribute('variant', 'tertiary');
-                action.setAttribute('size', size);
-                action.textContent = secondaryActionText;
-                action.addEventListener('db-click', () => {
-                    this.dispatchEvent(new CustomEvent('db-secondary-action', { bubbles: true, composed: true }));
-                });
-                actions.append(action);
-            }
-            content.append(actions);
-        }
-        this.append(content);
-    }
-}
-if (!customElements.get('db-empty-state'))
-    customElements.define('db-empty-state', DbEmptyState);
-
-export { DbEmptyState };
+import{createDbIcon as t}from"./db-icons.js";class DbEmptyState extends HTMLElement{static get observedAttributes(){return["variant","size","title","description","action-text","secondary-action-text","image","image-alt"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}getIconName(t){return"no-results"===t?"search":"no-access"===t?"user":"error"===t?"cloud-close":"onboarding"===t?"bulb":"plus"}render(){const e=this.getAttribute("variant")||"no-data",s=this.getAttribute("size")||"m",a=this.getAttribute("title")||"",n=this.getAttribute("description")||"",i=this.getAttribute("action-text"),c=this.getAttribute("secondary-action-text"),d=this.getAttribute("image"),o=this.getAttribute("image-alt")||a,r="s"===s?24:"l"===s?48:32;this.className=`designbase-wc-empty-state designbase-wc-empty-state--${e} designbase-wc-empty-state--${s}`,this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.replaceChildren();const m=document.createElement("div");if(m.className="designbase-wc-empty-state__content",d){const t=document.createElement("div");t.className="designbase-wc-empty-state__image";const e=document.createElement("img");e.className="designbase-wc-empty-state__image-element",e.src=d,e.alt=o,t.append(e),m.append(t)}else{const s=document.createElement("div");s.className="designbase-wc-empty-state__icon",s.append(t(this.getIconName(e),r)),m.append(s)}const b=document.createElement("h3");if(b.className="designbase-wc-empty-state__title",b.textContent=a,m.append(b),n){const t=document.createElement("p");t.className="designbase-wc-empty-state__description",t.textContent=n,m.append(t)}if(i||c){const t=document.createElement("div");if(t.className="designbase-wc-empty-state__actions",i){const a=document.createElement("db-button");a.setAttribute("variant","onboarding"===e?"primary":"secondary"),a.setAttribute("size",s),a.textContent=i,a.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-action",{bubbles:!0,composed:!0}))}),t.append(a)}if(c){const e=document.createElement("db-button");e.setAttribute("variant","tertiary"),e.setAttribute("size",s),e.textContent=c,e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-secondary-action",{bubbles:!0,composed:!0}))}),t.append(e)}m.append(t)}this.append(m)}}customElements.get("db-empty-state")||customElements.define("db-empty-state",DbEmptyState);export{DbEmptyState};