@designbasekorea/ui-wc 0.5.6 → 0.6.0

package/dist/esm/components/db-onboarding-modal.js

@@ -1,322 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-class DbOnboardingModal extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.internalStep = 0;
-        this.keyHandler = null;
-        this.isMounted = false;
-        this.handlePrev = () => {
-            if (this.getCurrentStep() > 0)
-                this.goToStep(this.getCurrentStep() - 1);
-        };
-        this.handleNext = () => {
-            const steps = this.getSteps();
-            const current = this.getCurrentStep();
-            if (current >= steps.length - 1) {
-                this.dispatchEvent(new CustomEvent('db-complete', { bubbles: true, composed: true }));
-                return;
-            }
-            this.goToStep(current + 1);
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'open',
-            'steps',
-            'current-step',
-            'show-close-button',
-            'show-indicator',
-            'indicator-type',
-            'indicator-size',
-        ];
-    }
-    get open() {
-        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
-    }
-    set open(value) {
-        if (value)
-            this.setAttribute('open', '');
-        else
-            this.removeAttribute('open');
-    }
-    get steps() {
-        return this.parseSteps();
-    }
-    set steps(value) {
-        const next = typeof value === 'string' ? value : JSON.stringify(value);
-        if (this.getAttribute('steps') === next)
-            return;
-        this.setAttribute('steps', next);
-    }
-    connectedCallback() {
-        this.style.display = 'contents';
-        this.syncStepFromAttribute();
-        this.syncOpenState();
-    }
-    disconnectedCallback() {
-        this.detachKeyHandler();
-        this.unmount();
-    }
-    attributeChangedCallback(name) {
-        if (!this.isConnected)
-            return;
-        if (name === 'open') {
-            this.syncOpenState();
-            return;
-        }
-        if (name === 'current-step') {
-            this.syncStepFromAttribute();
-        }
-        if (name === 'steps') {
-            if (this.isOpenRequested()) {
-                if (!this.isMounted)
-                    this.syncOpenState();
-                else
-                    this.render();
-            }
-            return;
-        }
-        if (this.isMounted)
-            this.render();
-    }
-    isOpenRequested() {
-        return this.open;
-    }
-    parseSteps() {
-        const raw = this.getAttribute('steps');
-        if (!raw)
-            return [];
-        try {
-            const parsed = JSON.parse(raw);
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    syncStepFromAttribute() {
-        if (!this.hasAttribute('current-step'))
-            return;
-        const next = Number(this.getAttribute('current-step') || 0);
-        if (Number.isFinite(next))
-            this.internalStep = Math.max(0, next);
-    }
-    getSteps() {
-        return this.parseSteps();
-    }
-    getCurrentStep() {
-        const steps = this.getSteps();
-        if (!steps.length)
-            return 0;
-        return Math.min(Math.max(this.internalStep, 0), steps.length - 1);
-    }
-    close() {
-        this.open = false;
-        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
-    }
-    emitStepChange(step) {
-        this.dispatchEvent(new CustomEvent('db-step-change', {
-            bubbles: true,
-            composed: true,
-            detail: { step },
-        }));
-    }
-    goToStep(step) {
-        const steps = this.getSteps();
-        if (!steps.length)
-            return;
-        const next = Math.min(Math.max(step, 0), steps.length - 1);
-        this.internalStep = next;
-        this.emitStepChange(next);
-        this.render();
-    }
-    attachKeyHandler() {
-        if (this.keyHandler)
-            return;
-        this.keyHandler = (event) => {
-            if (event.key === 'Escape') {
-                this.close();
-                return;
-            }
-            if (event.key === 'ArrowLeft' && this.getCurrentStep() > 0) {
-                this.handlePrev();
-                return;
-            }
-            if (event.key === 'ArrowRight' && this.getCurrentStep() < this.getSteps().length - 1) {
-                this.handleNext();
-            }
-        };
-        document.addEventListener('keydown', this.keyHandler);
-    }
-    detachKeyHandler() {
-        if (!this.keyHandler)
-            return;
-        document.removeEventListener('keydown', this.keyHandler);
-        this.keyHandler = null;
-    }
-    syncOpenState() {
-        if (this.isOpenRequested()) {
-            this.mount();
-            this.attachKeyHandler();
-            return;
-        }
-        this.detachKeyHandler();
-        this.unmount();
-    }
-    mount() {
-        if (!this.root) {
-            this.root = document.createElement('div');
-            this.root.className = 'designbase-wc-onboarding-modal';
-            this.root.setAttribute('role', 'dialog');
-            this.root.setAttribute('aria-modal', 'true');
-            this.root.tabIndex = -1;
-            this.ensureStructure();
-        }
-        if (!this.root.isConnected) {
-            document.body.append(this.root);
-        }
-        this.isMounted = true;
-        this.render();
-    }
-    unmount() {
-        this.isMounted = false;
-        this.root?.remove();
-    }
-    ensureStructure() {
-        if (!this.root)
-            return;
-        if (this.contentEl && this.root.contains(this.contentEl))
-            return;
-        this.overlayEl = undefined;
-        this.contentEl = undefined;
-        this.closeButtonEl = undefined;
-        this.mainEl = undefined;
-        this.imageWrapEl = undefined;
-        this.imageEl = undefined;
-        this.textEl = undefined;
-        this.titleEl = undefined;
-        this.descriptionEl = undefined;
-        this.navigationEl = undefined;
-        this.prevButtonEl = undefined;
-        this.nextButtonEl = undefined;
-        this.indicatorEl = undefined;
-        this.root.replaceChildren();
-        this.overlayEl = document.createElement('div');
-        this.overlayEl.className = 'designbase-wc-onboarding-modal__overlay';
-        this.overlayEl.addEventListener('click', () => this.close());
-        this.contentEl = document.createElement('div');
-        this.contentEl.className = 'designbase-wc-onboarding-modal__content';
-        this.closeButtonEl = document.createElement('button');
-        this.closeButtonEl.type = 'button';
-        this.closeButtonEl.className = 'designbase-wc-onboarding-modal__close-button';
-        this.closeButtonEl.setAttribute('aria-label', '닫기');
-        this.closeButtonEl.append(createDbIcon('close', 20));
-        this.closeButtonEl.addEventListener('click', () => this.close());
-        this.mainEl = document.createElement('div');
-        this.mainEl.className = 'designbase-wc-onboarding-modal__main';
-        this.imageWrapEl = document.createElement('div');
-        this.imageWrapEl.className = 'designbase-wc-onboarding-modal__image';
-        this.imageEl = document.createElement('img');
-        this.imageWrapEl.append(this.imageEl);
-        this.textEl = document.createElement('div');
-        this.textEl.className = 'designbase-wc-onboarding-modal__text';
-        this.titleEl = document.createElement('h2');
-        this.titleEl.id = 'onboarding-title';
-        this.titleEl.className = 'designbase-wc-onboarding-modal__title';
-        this.descriptionEl = document.createElement('p');
-        this.descriptionEl.id = 'onboarding-description';
-        this.descriptionEl.className = 'designbase-wc-onboarding-modal__description';
-        this.textEl.append(this.titleEl, this.descriptionEl);
-        this.mainEl.append(this.imageWrapEl, this.textEl);
-        this.navigationEl = document.createElement('div');
-        this.navigationEl.className = 'designbase-wc-onboarding-modal__navigation';
-        this.prevButtonEl = document.createElement('db-button');
-        this.prevButtonEl.setAttribute('variant', 'secondary');
-        this.prevButtonEl.setAttribute('size', 'm');
-        this.prevButtonEl.setAttribute('start-icon', 'chevron-left');
-        this.prevButtonEl.setAttribute('aria-label', '이전');
-        this.prevButtonEl.addEventListener('db-click', this.handlePrev);
-        this.indicatorEl = document.createElement('db-indicator');
-        this.indicatorEl.addEventListener('db-step-click', (event) => {
-            const detail = event.detail;
-            this.goToStep(detail.index ?? detail.current);
-        });
-        this.nextButtonEl = document.createElement('db-button');
-        this.nextButtonEl.setAttribute('variant', 'primary');
-        this.nextButtonEl.setAttribute('size', 'm');
-        this.nextButtonEl.addEventListener('db-click', this.handleNext);
-        this.navigationEl.append(this.prevButtonEl, this.indicatorEl, this.nextButtonEl);
-        this.contentEl.append(this.closeButtonEl, this.mainEl, this.navigationEl);
-        this.root.append(this.overlayEl, this.contentEl);
-    }
-    render() {
-        if (!this.root || !this.isMounted)
-            return;
-        this.ensureStructure();
-        const steps = this.getSteps();
-        const current = this.getCurrentStep();
-        const step = steps[current];
-        if (!step)
-            return;
-        const showCloseButton = !this.hasAttribute('show-close-button') || this.getAttribute('show-close-button') !== 'false';
-        const showIndicator = !this.hasAttribute('show-indicator') || this.getAttribute('show-indicator') !== 'false';
-        const indicatorType = this.getAttribute('indicator-type') || 'dots';
-        const indicatorSize = this.getAttribute('indicator-size') || 'm';
-        const isFirst = current === 0;
-        const isLast = current === steps.length - 1;
-        this.root.setAttribute('aria-labelledby', 'onboarding-title');
-        this.root.setAttribute('aria-describedby', 'onboarding-description');
-        if (this.closeButtonEl)
-            this.closeButtonEl.style.display = showCloseButton ? '' : 'none';
-        if (this.imageWrapEl && this.imageEl) {
-            if (step.image) {
-                this.imageEl.src = step.image;
-                this.imageEl.alt = step.title || '온보딩 이미지';
-                this.imageWrapEl.style.display = '';
-            }
-            else {
-                this.imageWrapEl.style.display = 'none';
-            }
-        }
-        if (this.titleEl) {
-            this.titleEl.textContent = step.title || '';
-            this.titleEl.style.display = step.title ? '' : 'none';
-        }
-        if (this.descriptionEl) {
-            this.descriptionEl.textContent = step.description || '';
-            this.descriptionEl.style.display = step.description ? '' : 'none';
-        }
-        if (this.prevButtonEl) {
-            this.prevButtonEl.textContent = '이전';
-            if (isFirst)
-                this.prevButtonEl.setAttribute('disabled', '');
-            else
-                this.prevButtonEl.removeAttribute('disabled');
-        }
-        if (this.nextButtonEl) {
-            this.nextButtonEl.textContent = isLast ? '완료' : '다음';
-            this.nextButtonEl.setAttribute('aria-label', isLast ? '완료' : '다음');
-            if (isLast)
-                this.nextButtonEl.removeAttribute('end-icon');
-            else
-                this.nextButtonEl.setAttribute('end-icon', 'chevron-right');
-        }
-        if (this.indicatorEl) {
-            const shouldShowIndicator = showIndicator && steps.length > 1;
-            this.indicatorEl.style.display = shouldShowIndicator ? '' : 'none';
-            if (shouldShowIndicator) {
-                this.indicatorEl.setAttribute('total', String(steps.length));
-                this.indicatorEl.setAttribute('current', String(current));
-                this.indicatorEl.setAttribute('indicator-type', indicatorType);
-                this.indicatorEl.setAttribute('size', indicatorSize);
-                this.indicatorEl.setAttribute('clickable', '');
-            }
-        }
-    }
-}
-if (!customElements.get('db-onboarding-modal')) {
-    customElements.define('db-onboarding-modal', DbOnboardingModal);
-}
-
-export { DbOnboardingModal };
+import{createDbIcon as t}from"./db-icons.js";class DbOnboardingModal extends HTMLElement{constructor(){super(...arguments),this.internalStep=0,this.keyHandler=null,this.isMounted=!1,this.handlePrev=()=>{this.getCurrentStep()>0&&this.goToStep(this.getCurrentStep()-1)},this.handleNext=()=>{const t=this.getSteps(),e=this.getCurrentStep();e>=t.length-1?this.dispatchEvent(new CustomEvent("db-complete",{bubbles:!0,composed:!0})):this.goToStep(e+1)}}static get observedAttributes(){return["open","steps","current-step","show-close-button","show-indicator","indicator-type","indicator-size"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}get steps(){return this.parseSteps()}set steps(t){const e="string"==typeof t?t:JSON.stringify(t);this.getAttribute("steps")!==e&&this.setAttribute("steps",e)}connectedCallback(){this.style.display="contents",this.syncStepFromAttribute(),this.syncOpenState()}disconnectedCallback(){this.detachKeyHandler(),this.unmount()}attributeChangedCallback(t){this.isConnected&&("open"!==t?("current-step"===t&&this.syncStepFromAttribute(),"steps"!==t?this.isMounted&&this.render():this.isOpenRequested()&&(this.isMounted?this.render():this.syncOpenState())):this.syncOpenState())}isOpenRequested(){return this.open}parseSteps(){const t=this.getAttribute("steps");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}syncStepFromAttribute(){if(!this.hasAttribute("current-step"))return;const t=Number(this.getAttribute("current-step")||0);Number.isFinite(t)&&(this.internalStep=Math.max(0,t))}getSteps(){return this.parseSteps()}getCurrentStep(){const t=this.getSteps();return t.length?Math.min(Math.max(this.internalStep,0),t.length-1):0}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}emitStepChange(t){this.dispatchEvent(new CustomEvent("db-step-change",{bubbles:!0,composed:!0,detail:{step:t}}))}goToStep(t){const e=this.getSteps();if(!e.length)return;const i=Math.min(Math.max(t,0),e.length-1);this.internalStep=i,this.emitStepChange(i),this.render()}attachKeyHandler(){this.keyHandler||(this.keyHandler=t=>{"Escape"!==t.key?"ArrowLeft"===t.key&&this.getCurrentStep()>0?this.handlePrev():"ArrowRight"===t.key&&this.getCurrentStep()<this.getSteps().length-1&&this.handleNext():this.close()},document.addEventListener("keydown",this.keyHandler))}detachKeyHandler(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}syncOpenState(){if(this.isOpenRequested())return this.mount(),void this.attachKeyHandler();this.detachKeyHandler(),this.unmount()}mount(){this.root||(this.root=document.createElement("div"),this.root.className="designbase-wc-onboarding-modal",this.root.setAttribute("role","dialog"),this.root.setAttribute("aria-modal","true"),this.root.tabIndex=-1,this.ensureStructure()),this.root.isConnected||document.body.append(this.root),this.isMounted=!0,this.render()}unmount(){this.isMounted=!1,this.root?.remove()}ensureStructure(){this.root&&(this.contentEl&&this.root.contains(this.contentEl)||(this.overlayEl=void 0,this.contentEl=void 0,this.closeButtonEl=void 0,this.mainEl=void 0,this.imageWrapEl=void 0,this.imageEl=void 0,this.textEl=void 0,this.titleEl=void 0,this.descriptionEl=void 0,this.navigationEl=void 0,this.prevButtonEl=void 0,this.nextButtonEl=void 0,this.indicatorEl=void 0,this.root.replaceChildren(),this.overlayEl=document.createElement("div"),this.overlayEl.className="designbase-wc-onboarding-modal__overlay",this.overlayEl.addEventListener("click",()=>this.close()),this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-onboarding-modal__content",this.closeButtonEl=document.createElement("button"),this.closeButtonEl.type="button",this.closeButtonEl.className="designbase-wc-onboarding-modal__close-button",this.closeButtonEl.setAttribute("aria-label","닫기"),this.closeButtonEl.append(t("close",20)),this.closeButtonEl.addEventListener("click",()=>this.close()),this.mainEl=document.createElement("div"),this.mainEl.className="designbase-wc-onboarding-modal__main",this.imageWrapEl=document.createElement("div"),this.imageWrapEl.className="designbase-wc-onboarding-modal__image",this.imageEl=document.createElement("img"),this.imageWrapEl.append(this.imageEl),this.textEl=document.createElement("div"),this.textEl.className="designbase-wc-onboarding-modal__text",this.titleEl=document.createElement("h2"),this.titleEl.id="onboarding-title",this.titleEl.className="designbase-wc-onboarding-modal__title",this.descriptionEl=document.createElement("p"),this.descriptionEl.id="onboarding-description",this.descriptionEl.className="designbase-wc-onboarding-modal__description",this.textEl.append(this.titleEl,this.descriptionEl),this.mainEl.append(this.imageWrapEl,this.textEl),this.navigationEl=document.createElement("div"),this.navigationEl.className="designbase-wc-onboarding-modal__navigation",this.prevButtonEl=document.createElement("db-button"),this.prevButtonEl.setAttribute("variant","secondary"),this.prevButtonEl.setAttribute("size","m"),this.prevButtonEl.setAttribute("start-icon","chevron-left"),this.prevButtonEl.setAttribute("aria-label","이전"),this.prevButtonEl.addEventListener("db-click",this.handlePrev),this.indicatorEl=document.createElement("db-indicator"),this.indicatorEl.addEventListener("db-step-click",t=>{const e=t.detail;this.goToStep(e.index??e.current)}),this.nextButtonEl=document.createElement("db-button"),this.nextButtonEl.setAttribute("variant","primary"),this.nextButtonEl.setAttribute("size","m"),this.nextButtonEl.addEventListener("db-click",this.handleNext),this.navigationEl.append(this.prevButtonEl,this.indicatorEl,this.nextButtonEl),this.contentEl.append(this.closeButtonEl,this.mainEl,this.navigationEl),this.root.append(this.overlayEl,this.contentEl)))}render(){if(!this.root||!this.isMounted)return;this.ensureStructure();const t=this.getSteps(),e=this.getCurrentStep(),i=t[e];if(!i)return;const s=!this.hasAttribute("show-close-button")||"false"!==this.getAttribute("show-close-button"),n=!this.hasAttribute("show-indicator")||"false"!==this.getAttribute("show-indicator"),o=this.getAttribute("indicator-type")||"dots",r=this.getAttribute("indicator-size")||"m",a=0===e,l=e===t.length-1;if(this.root.setAttribute("aria-labelledby","onboarding-title"),this.root.setAttribute("aria-describedby","onboarding-description"),this.closeButtonEl&&(this.closeButtonEl.style.display=s?"":"none"),this.imageWrapEl&&this.imageEl&&(i.image?(this.imageEl.src=i.image,this.imageEl.alt=i.title||"온보딩 이미지",this.imageWrapEl.style.display=""):this.imageWrapEl.style.display="none"),this.titleEl&&(this.titleEl.textContent=i.title||"",this.titleEl.style.display=i.title?"":"none"),this.descriptionEl&&(this.descriptionEl.textContent=i.description||"",this.descriptionEl.style.display=i.description?"":"none"),this.prevButtonEl&&(this.prevButtonEl.textContent="이전",a?this.prevButtonEl.setAttribute("disabled",""):this.prevButtonEl.removeAttribute("disabled")),this.nextButtonEl&&(this.nextButtonEl.textContent=l?"완료":"다음",this.nextButtonEl.setAttribute("aria-label",l?"완료":"다음"),l?this.nextButtonEl.removeAttribute("end-icon"):this.nextButtonEl.setAttribute("end-icon","chevron-right")),this.indicatorEl){const i=n&&t.length>1;this.indicatorEl.style.display=i?"":"none",i&&(this.indicatorEl.setAttribute("total",String(t.length)),this.indicatorEl.setAttribute("current",String(e)),this.indicatorEl.setAttribute("indicator-type",o),this.indicatorEl.setAttribute("size",r),this.indicatorEl.setAttribute("clickable",""))}}}customElements.get("db-onboarding-modal")||customElements.define("db-onboarding-modal",DbOnboardingModal);export{DbOnboardingModal};

package/dist/esm/components/db-otp-input.d.ts

@@ -0,0 +1,53 @@
+/**
+ * ui-wc — db-otp-input (수동 작성, 자동 동기화 대상 아님)
+ *
+ * 분할 자릿수 OTP/PIN 입력. 붙여넣기·화살표·백스페이스를 지원합니다.
+ */
+declare const SIZES: readonly ["s", "m", "l"];
+type OtpSize = (typeof SIZES)[number];
+declare class DbOtpInput extends HTMLElement {
+    static formAssociated: boolean;
+    static get observedAttributes(): string[];
+    private internals;
+    private built;
+    private digits;
+    private errorEl?;
+    private suppressSync;
+    private initialValue;
+    private lastCompleteValue;
+    get length(): number;
+    set length(v: number);
+    get value(): string;
+    set value(v: string);
+    get size(): OtpSize;
+    set size(v: OtpSize);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get readOnly(): boolean;
+    set readOnly(v: boolean);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    focus(): void;
+    clear(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    private build;
+    private sync;
+    private emit;
+    private setValueAttribute;
+    private syncFormValue;
+    private focusFirstEmpty;
+    private focusAt;
+    private applyValue;
+    private onDigitFocus;
+    private onDigitInput;
+    private onDigitKeydown;
+    private onPaste;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-otp-input': DbOtpInput;
+    }
+}
+
+export { DbOtpInput };

package/dist/esm/components/db-otp-input.js

@@ -0,0 +1 @@
+const t=["s","m","l"];function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}class DbOtpInput extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals?.(),this.built=!1,this.digits=[],this.suppressSync=!1,this.initialValue="",this.lastCompleteValue="",this.onDigitFocus=t=>{const e=t.currentTarget;requestAnimationFrame(()=>e.select())},this.onDigitInput=t=>{if(this.suppressSync)return;const e=t.currentTarget,i=Number(e.dataset.index||0),s=e.value.replace(/\D/g,"");if(s.length>1){const t=this.digits.slice(0,i).map(t=>t.value).join("");return void this.applyValue(t+s,Math.min(this.length-1,t.length+s.length))}e.value=s.slice(-1),e.classList.toggle("designbase-wc-otp-input__digit--filled",Boolean(e.value));const a=this.digits.map(t=>t.value).join("");this.setAttribute("value",a),this.emit("db-input"),this.emit("db-change"),e.value&&i<this.digits.length-1&&this.focusAt(i+1)},this.onDigitKeydown=t=>{const e=t.currentTarget,i=Number(e.dataset.index||0);if("Backspace"!==t.key)return"ArrowLeft"===t.key?(t.preventDefault(),void this.focusAt(i-1)):"ArrowRight"===t.key?(t.preventDefault(),void this.focusAt(i+1)):void("Delete"===t.key&&(e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change")));if(e.value)e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change");else if(i>0){t.preventDefault(),this.focusAt(i-1);const e=this.digits[i-1];e&&(e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change"))}},this.onPaste=t=>{t.preventDefault();const e=t.clipboardData?.getData("text")||"",i=Number(t.currentTarget.dataset.index||0),s=this.digits.slice(0,i).map(t=>t.value).join("");this.applyValue(s+e,Math.min(this.length-1,s.length+e.replace(/\D/g,"").length))}}static get observedAttributes(){return["length","value","size","disabled","readonly","error","error-message","label","auto-focus","masked","name","required"]}get length(){const t=Number(this.getAttribute("length")||6);return Number.isFinite(t)?Math.min(8,Math.max(4,Math.round(t))):6}set length(t){this.setAttribute("length",String(t))}get value(){return this.digits.map(t=>t.value).join("")||this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}get size(){return function pick(t,e,i){return t.includes(e)?e:i}(t,this.getAttribute("size"),"m")}set size(t){this.setAttribute("size",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t)}connectedCallback(){this.built||(this.initialValue=this.getAttribute("value")||""),this.build(),this.sync(),this.hasAttribute("auto-focus")&&!this.disabled&&requestAnimationFrame(()=>this.focusFirstEmpty())}attributeChangedCallback(t){this.built&&("length"===t&&(this.built=!1,this.build()),this.sync())}focus(){this.disabled||this.focusFirstEmpty()}clear(){this.suppressSync=!0,this.digits.forEach(t=>{t.value=""}),this.suppressSync=!1,this.lastCompleteValue="",this.setValueAttribute(""),this.emit("db-input"),this.emit("db-change"),this.focusFirstEmpty()}formResetCallback(){this.lastCompleteValue="",this.value=this.initialValue}formDisabledCallback(t){this.toggleAttribute("disabled",t)}build(){this.replaceChildren(),this.digits=[];const t=this.length,e="designbase-wc-otp-input",i=this.getAttribute("label");if(i){const t=el("div",`${e}__label`);t.textContent=i,this.append(t)}const s=el("div",`${e}__row`);s.setAttribute("role","group"),s.setAttribute("aria-label",i||"인증 코드");for(let i=0;i<t;i+=1){const t=el("div",`${e}__cell`),a=document.createElement("input");a.className=`${e}__digit`,a.type=this.hasAttribute("masked")?"password":"text",a.inputMode="numeric",a.autocomplete=0===i?"one-time-code":"off",a.maxLength=1,a.pattern="[0-9]*",a.setAttribute("aria-label",`${i+1}번째 자리`),a.dataset.index=String(i),a.addEventListener("input",this.onDigitInput),a.addEventListener("keydown",this.onDigitKeydown),a.addEventListener("paste",this.onPaste),a.addEventListener("focus",this.onDigitFocus),t.append(a),s.append(t),this.digits.push(a)}this.append(s),this.errorEl=el("p",`${e}__error`),this.errorEl.id=`${this.id||`db-otp-${Math.random().toString(36).slice(2)}`}-error`,this.errorEl.setAttribute("role","alert"),this.errorEl.hidden=!0,this.append(this.errorEl),this.built=!0}sync(){const t="designbase-wc-otp-input",e=this.size,i=this.hasAttribute("error"),s=this.disabled,a=this.readOnly,l=this.getAttribute("error-message")||"";this.className=[t,`${t}--${e}`,i&&`${t}--error`,s&&`${t}--disabled`].filter(Boolean).join(" ");const r=(this.getAttribute("value")||"").replace(/\D/g,"").slice(0,this.length);this.suppressSync=!0,this.digits.forEach((e,n)=>{e.value=r[n]||"",e.disabled=s,e.readOnly=a,e.type=this.hasAttribute("masked")?"password":"text",e.classList.toggle(`${t}__digit--filled`,Boolean(e.value)),e.setAttribute("aria-invalid",String(i)),i&&l?e.setAttribute("aria-describedby",this.errorEl?.id||""):e.removeAttribute("aria-describedby")}),this.suppressSync=!1,this.errorEl&&(this.errorEl.textContent=l,this.errorEl.hidden=!i||!l),this.setAttribute("role","group"),this.setAttribute("aria-disabled",String(s)),this.setAttribute("aria-invalid",String(i)),this.syncFormValue(r)}emit(t){const e=this.digits.map(t=>t.value).join("");if(this.setValueAttribute(e),this.dispatchEvent(new CustomEvent(t,{detail:{value:e},bubbles:!0,composed:!0})),"db-change"===t&&e.length===this.length&&/^\d+$/.test(e)){if(e===this.lastCompleteValue)return;this.lastCompleteValue=e,this.dispatchEvent(new CustomEvent("db-complete",{detail:{value:e},bubbles:!0,composed:!0}))}else e.length!==this.length&&(this.lastCompleteValue="")}setValueAttribute(t){this.getAttribute("value")!==t&&this.setAttribute("value",t),this.syncFormValue(t)}syncFormValue(t){this.internals?.setFormValue(t||null),this.internals&&(this.hasAttribute("error")?this.internals.setValidity({customError:!0},this.getAttribute("error-message")||"인증 코드가 올바르지 않습니다.",this.digits[0]):this.hasAttribute("required")&&t.length!==this.length?this.internals.setValidity({valueMissing:!0},"인증 코드를 모두 입력해 주세요.",this.digits.find(t=>!t.value)||this.digits[0]):this.internals.setValidity({}))}focusFirstEmpty(){const t=this.digits.find(t=>!t.value)||this.digits[this.digits.length-1];t?.focus(),t?.select()}focusAt(t){const e=this.digits[Math.max(0,Math.min(this.digits.length-1,t))];e?.focus(),e?.select()}applyValue(t,e){const i=t.replace(/\D/g,"").slice(0,this.length);this.suppressSync=!0,this.digits.forEach((t,e)=>{t.value=i[e]||"",t.classList.toggle("designbase-wc-otp-input__digit--filled",Boolean(t.value))}),this.suppressSync=!1,this.emit("db-input"),this.emit("db-change"),void 0!==e?this.focusAt(e):i.length<this.length?this.focusAt(i.length):this.focusAt(this.length-1)}}DbOtpInput.formAssociated=!0,customElements.get("db-otp-input")||customElements.define("db-otp-input",DbOtpInput);export{DbOtpInput};