@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,324 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const CLASS = 'designbase-wc-tutorial';
-class DbTutorial extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.internalStep = 0;
-        this.targetElement = null;
-        this.keyHandler = null;
-        this.resizeHandler = null;
-        this.isMounted = false;
-    }
-    static get observedAttributes() {
-        return ['open', 'steps', 'current-step', 'indicator-type', 'indicator-size'];
-    }
-    connectedCallback() {
-        this.style.display = 'contents';
-        this.syncStepFromAttribute();
-        this.syncOpenState();
-    }
-    disconnectedCallback() {
-        this.detachListeners();
-        this.clearTargetHighlight();
-        this.unmount();
-    }
-    attributeChangedCallback(name) {
-        if (!this.isConnected)
-            return;
-        if (name === 'open') {
-            this.syncOpenState();
-            return;
-        }
-        if (name === 'current-step')
-            this.syncStepFromAttribute();
-        if (this.isMounted)
-            this.render();
-    }
-    get steps() {
-        return this.parseSteps();
-    }
-    set steps(value) {
-        this.setAttribute('steps', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    parseSteps() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('steps') || '[]');
-            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);
-    }
-    isOpenRequested() {
-        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
-    }
-    getCurrentStepData() {
-        const steps = this.parseSteps();
-        if (!steps.length)
-            return undefined;
-        const index = Math.min(Math.max(this.internalStep, 0), steps.length - 1);
-        return { step: steps[index], index, steps };
-    }
-    syncOpenState() {
-        if (this.isOpenRequested()) {
-            this.mount();
-            this.attachListeners();
-            return;
-        }
-        this.detachListeners();
-        this.clearTargetHighlight();
-        this.unmount();
-    }
-    mount() {
-        if (!this.root) {
-            this.root = document.createElement('div');
-            this.root.className = CLASS;
-            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 || this.popoverEl)
-            return;
-        this.overlayEl = document.createElement('div');
-        this.overlayEl.className = `${CLASS}__overlay`;
-        this.overlayEl.addEventListener('click', () => this.handleEnd());
-        this.popoverEl = document.createElement('div');
-        this.popoverEl.className = `${CLASS}__popover`;
-        this.closeButtonEl = document.createElement('button');
-        this.closeButtonEl.type = 'button';
-        this.closeButtonEl.className = `${CLASS}__close-button`;
-        this.closeButtonEl.setAttribute('aria-label', '튜토리얼 종료');
-        this.closeButtonEl.append(createDbIcon('close', 16));
-        this.closeButtonEl.addEventListener('click', () => this.handleEnd());
-        const content = document.createElement('div');
-        content.className = `${CLASS}__content`;
-        const text = document.createElement('div');
-        text.className = `${CLASS}__text`;
-        this.titleEl = document.createElement('h3');
-        this.titleEl.id = 'tutorial-title';
-        this.titleEl.className = `${CLASS}__title`;
-        this.descriptionEl = document.createElement('p');
-        this.descriptionEl.id = 'tutorial-content';
-        this.descriptionEl.className = `${CLASS}__description`;
-        text.append(this.titleEl, this.descriptionEl);
-        const navigation = document.createElement('div');
-        navigation.className = `${CLASS}__navigation`;
-        this.prevButtonEl = document.createElement('db-button');
-        this.prevButtonEl.setAttribute('variant', 'secondary');
-        this.prevButtonEl.setAttribute('size', 's');
-        this.prevButtonEl.setAttribute('start-icon', 'chevron-left');
-        this.prevButtonEl.textContent = '이전';
-        this.prevButtonEl.addEventListener('db-click', () => this.handlePrev());
-        this.indicatorEl = document.createElement('db-indicator');
-        this.indicatorEl.addEventListener('db-step-click', (event) => {
-            const detail = event.detail;
-            if (typeof detail.index === 'number')
-                this.goToStep(detail.index);
-        });
-        this.nextButtonEl = document.createElement('db-button');
-        this.nextButtonEl.setAttribute('variant', 'primary');
-        this.nextButtonEl.setAttribute('size', 's');
-        this.nextButtonEl.addEventListener('db-click', () => this.handleNext());
-        navigation.append(this.prevButtonEl, this.indicatorEl, this.nextButtonEl);
-        content.append(text, navigation);
-        this.popoverEl.append(this.closeButtonEl, content);
-        this.root.append(this.overlayEl, this.popoverEl);
-    }
-    attachListeners() {
-        if (!this.keyHandler) {
-            this.keyHandler = (event) => {
-                if (event.key === 'Escape')
-                    this.handleEnd();
-                else if (event.key === 'ArrowLeft')
-                    this.handlePrev();
-                else if (event.key === 'ArrowRight')
-                    this.handleNext();
-            };
-            document.addEventListener('keydown', this.keyHandler);
-        }
-        if (!this.resizeHandler) {
-            this.resizeHandler = () => this.updateTargetElement();
-            window.addEventListener('resize', this.resizeHandler);
-        }
-    }
-    detachListeners() {
-        if (this.keyHandler) {
-            document.removeEventListener('keydown', this.keyHandler);
-            this.keyHandler = null;
-        }
-        if (this.resizeHandler) {
-            window.removeEventListener('resize', this.resizeHandler);
-            this.resizeHandler = null;
-        }
-    }
-    clearTargetHighlight() {
-        if (!this.targetElement)
-            return;
-        this.targetElement.classList.remove(`${CLASS}__target`);
-        this.targetElement.style.position = '';
-        this.targetElement.style.zIndex = '';
-        this.targetElement = null;
-    }
-    updateTargetElement() {
-        const current = this.getCurrentStepData();
-        if (!current?.step.target || !this.popoverEl)
-            return;
-        this.clearTargetHighlight();
-        const element = document.querySelector(current.step.target);
-        if (!element)
-            return;
-        this.targetElement = element;
-        element.style.position = 'relative';
-        element.style.zIndex = '1000';
-        element.classList.add(`${CLASS}__target`);
-        const rect = element.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const popoverWidth = 300;
-        const popoverHeight = 200;
-        const margin = 16;
-        let placement = current.step.placement === 'auto' || !current.step.placement
-            ? 'bottom'
-            : current.step.placement;
-        let top = rect.bottom + margin;
-        let left = rect.left + rect.width / 2 - popoverWidth / 2;
-        if (current.step.placement === 'auto') {
-            if (rect.top - popoverHeight - margin > 0) {
-                placement = 'top';
-                top = rect.top - popoverHeight - margin;
-            }
-            else if (rect.bottom + popoverHeight + margin < viewportHeight) {
-                placement = 'bottom';
-                top = rect.bottom + margin;
-            }
-            else if (rect.left - popoverWidth - margin > 0) {
-                placement = 'left';
-                top = rect.top + rect.height / 2 - popoverHeight / 2;
-                left = rect.left - popoverWidth - margin;
-            }
-            else {
-                placement = 'right';
-                top = rect.top + rect.height / 2 - popoverHeight / 2;
-                left = rect.right + margin;
-            }
-        }
-        else {
-            switch (placement) {
-                case 'top':
-                    top = rect.top - popoverHeight - margin;
-                    break;
-                case 'bottom':
-                    top = rect.bottom + margin;
-                    break;
-                case 'left':
-                    top = rect.top + rect.height / 2 - popoverHeight / 2;
-                    left = rect.left - popoverWidth - margin;
-                    break;
-                case 'right':
-                    top = rect.top + rect.height / 2 - popoverHeight / 2;
-                    left = rect.right + margin;
-                    break;
-            }
-        }
-        left = Math.max(margin, Math.min(left, viewportWidth - popoverWidth - margin));
-        top = Math.max(margin, Math.min(top, viewportHeight - popoverHeight - margin));
-        this.popoverEl.className = [`${CLASS}__popover`, `${CLASS}__popover--${placement}`].join(' ');
-        this.popoverEl.style.top = `${top}px`;
-        this.popoverEl.style.left = `${left}px`;
-    }
-    emitStepChange(step) {
-        this.dispatchEvent(new CustomEvent('db-step-change', {
-            bubbles: true,
-            composed: true,
-            detail: { step },
-        }));
-    }
-    goToStep(step) {
-        const steps = this.parseSteps();
-        if (!steps.length)
-            return;
-        this.clearTargetHighlight();
-        this.internalStep = Math.min(Math.max(step, 0), steps.length - 1);
-        this.setAttribute('current-step', String(this.internalStep));
-        this.emitStepChange(this.internalStep);
-        this.render();
-    }
-    handlePrev() {
-        const current = this.getCurrentStepData();
-        if (!current || current.index <= 0)
-            return;
-        this.dispatchEvent(new CustomEvent('db-prev', { bubbles: true, composed: true }));
-        this.goToStep(current.index - 1);
-    }
-    handleNext() {
-        const current = this.getCurrentStepData();
-        if (!current)
-            return;
-        if (current.index >= current.steps.length - 1) {
-            this.handleEnd();
-            return;
-        }
-        this.dispatchEvent(new CustomEvent('db-next', { bubbles: true, composed: true }));
-        this.goToStep(current.index + 1);
-    }
-    handleEnd() {
-        this.dispatchEvent(new CustomEvent('db-end', { bubbles: true, composed: true }));
-        this.setAttribute('open', 'false');
-    }
-    render() {
-        const current = this.getCurrentStepData();
-        if (!current || !this.root)
-            return;
-        const { step, index, steps } = current;
-        const isFirst = index === 0;
-        const isLast = index === steps.length - 1;
-        if (this.titleEl) {
-            this.titleEl.textContent = step.title || '';
-            this.titleEl.hidden = !step.title;
-        }
-        if (this.descriptionEl) {
-            this.descriptionEl.textContent = step.content || '';
-            this.descriptionEl.hidden = !step.content;
-        }
-        if (this.prevButtonEl)
-            this.prevButtonEl.hidden = isFirst;
-        if (this.nextButtonEl) {
-            this.nextButtonEl.textContent = isLast ? '완료' : '다음';
-            if (isLast)
-                this.nextButtonEl.removeAttribute('end-icon');
-            else
-                this.nextButtonEl.setAttribute('end-icon', 'chevron-right');
-        }
-        if (this.indicatorEl) {
-            this.indicatorEl.setAttribute('current', String(index));
-            this.indicatorEl.setAttribute('total', String(steps.length));
-            this.indicatorEl.setAttribute('type', this.getAttribute('indicator-type') || 'numbers');
-            this.indicatorEl.setAttribute('size', this.getAttribute('indicator-size') || 'm');
-        }
-        this.updateTargetElement();
-    }
-}
-if (!customElements.get('db-tutorial')) {
-    customElements.define('db-tutorial', DbTutorial);
-}
-
-export { DbTutorial };
+import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-tutorial";class DbTutorial extends HTMLElement{constructor(){super(...arguments),this.internalStep=0,this.targetElement=null,this.keyHandler=null,this.resizeHandler=null,this.isMounted=!1}static get observedAttributes(){return["open","steps","current-step","indicator-type","indicator-size"]}connectedCallback(){this.style.display="contents",this.syncStepFromAttribute(),this.syncOpenState()}disconnectedCallback(){this.detachListeners(),this.clearTargetHighlight(),this.unmount()}attributeChangedCallback(t){this.isConnected&&("open"!==t?("current-step"===t&&this.syncStepFromAttribute(),this.isMounted&&this.render()):this.syncOpenState())}get steps(){return this.parseSteps()}set steps(t){this.setAttribute("steps","string"==typeof t?t:JSON.stringify(t))}parseSteps(){try{const t=JSON.parse(this.getAttribute("steps")||"[]");return Array.isArray(t)?t:[]}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))}isOpenRequested(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}getCurrentStepData(){const t=this.parseSteps();if(!t.length)return;const e=Math.min(Math.max(this.internalStep,0),t.length-1);return{step:t[e],index:e,steps:t}}syncOpenState(){if(this.isOpenRequested())return this.mount(),void this.attachListeners();this.detachListeners(),this.clearTargetHighlight(),this.unmount()}mount(){this.root||(this.root=document.createElement("div"),this.root.className=e,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(){if(!this.root||this.popoverEl)return;this.overlayEl=document.createElement("div"),this.overlayEl.className=`${e}__overlay`,this.overlayEl.addEventListener("click",()=>this.handleEnd()),this.popoverEl=document.createElement("div"),this.popoverEl.className=`${e}__popover`,this.closeButtonEl=document.createElement("button"),this.closeButtonEl.type="button",this.closeButtonEl.className=`${e}__close-button`,this.closeButtonEl.setAttribute("aria-label","튜토리얼 종료"),this.closeButtonEl.append(t("close",16)),this.closeButtonEl.addEventListener("click",()=>this.handleEnd());const i=document.createElement("div");i.className=`${e}__content`;const s=document.createElement("div");s.className=`${e}__text`,this.titleEl=document.createElement("h3"),this.titleEl.id="tutorial-title",this.titleEl.className=`${e}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.id="tutorial-content",this.descriptionEl.className=`${e}__description`,s.append(this.titleEl,this.descriptionEl);const n=document.createElement("div");n.className=`${e}__navigation`,this.prevButtonEl=document.createElement("db-button"),this.prevButtonEl.setAttribute("variant","secondary"),this.prevButtonEl.setAttribute("size","s"),this.prevButtonEl.setAttribute("start-icon","chevron-left"),this.prevButtonEl.textContent="이전",this.prevButtonEl.addEventListener("db-click",()=>this.handlePrev()),this.indicatorEl=document.createElement("db-indicator"),this.indicatorEl.addEventListener("db-step-click",t=>{const e=t.detail;"number"==typeof e.index&&this.goToStep(e.index)}),this.nextButtonEl=document.createElement("db-button"),this.nextButtonEl.setAttribute("variant","primary"),this.nextButtonEl.setAttribute("size","s"),this.nextButtonEl.addEventListener("db-click",()=>this.handleNext()),n.append(this.prevButtonEl,this.indicatorEl,this.nextButtonEl),i.append(s,n),this.popoverEl.append(this.closeButtonEl,i),this.root.append(this.overlayEl,this.popoverEl)}attachListeners(){this.keyHandler||(this.keyHandler=t=>{"Escape"===t.key?this.handleEnd():"ArrowLeft"===t.key?this.handlePrev():"ArrowRight"===t.key&&this.handleNext()},document.addEventListener("keydown",this.keyHandler)),this.resizeHandler||(this.resizeHandler=()=>this.updateTargetElement(),window.addEventListener("resize",this.resizeHandler))}detachListeners(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null),this.resizeHandler&&(window.removeEventListener("resize",this.resizeHandler),this.resizeHandler=null)}clearTargetHighlight(){this.targetElement&&(this.targetElement.classList.remove(`${e}__target`),this.targetElement.style.position="",this.targetElement.style.zIndex="",this.targetElement=null)}updateTargetElement(){const t=this.getCurrentStepData();if(!t?.step.target||!this.popoverEl)return;this.clearTargetHighlight();const i=document.querySelector(t.step.target);if(!i)return;this.targetElement=i,i.style.position="relative",i.style.zIndex="1000",i.classList.add(`${e}__target`);const s=i.getBoundingClientRect(),n=window.innerWidth,r=window.innerHeight,o=300,l=200,h=16;let a="auto"!==t.step.placement&&t.step.placement?t.step.placement:"bottom",d=s.bottom+h,c=s.left+s.width/2-150;if("auto"===t.step.placement)s.top-l-h>0?(a="top",d=s.top-l-h):s.bottom+l+h<r?(a="bottom",d=s.bottom+h):s.left-o-h>0?(a="left",d=s.top+s.height/2-100,c=s.left-o-h):(a="right",d=s.top+s.height/2-100,c=s.right+h);else switch(a){case"top":d=s.top-l-h;break;case"bottom":d=s.bottom+h;break;case"left":d=s.top+s.height/2-100,c=s.left-o-h;break;case"right":d=s.top+s.height/2-100,c=s.right+h}c=Math.max(h,Math.min(c,n-o-h)),d=Math.max(h,Math.min(d,r-l-h)),this.popoverEl.className=[`${e}__popover`,`${e}__popover--${a}`].join(" "),this.popoverEl.style.top=`${d}px`,this.popoverEl.style.left=`${c}px`}emitStepChange(t){this.dispatchEvent(new CustomEvent("db-step-change",{bubbles:!0,composed:!0,detail:{step:t}}))}goToStep(t){const e=this.parseSteps();e.length&&(this.clearTargetHighlight(),this.internalStep=Math.min(Math.max(t,0),e.length-1),this.setAttribute("current-step",String(this.internalStep)),this.emitStepChange(this.internalStep),this.render())}handlePrev(){const t=this.getCurrentStepData();!t||t.index<=0||(this.dispatchEvent(new CustomEvent("db-prev",{bubbles:!0,composed:!0})),this.goToStep(t.index-1))}handleNext(){const t=this.getCurrentStepData();t&&(t.index>=t.steps.length-1?this.handleEnd():(this.dispatchEvent(new CustomEvent("db-next",{bubbles:!0,composed:!0})),this.goToStep(t.index+1)))}handleEnd(){this.dispatchEvent(new CustomEvent("db-end",{bubbles:!0,composed:!0})),this.setAttribute("open","false")}render(){const t=this.getCurrentStepData();if(!t||!this.root)return;const{step:e,index:i,steps:s}=t,n=0===i,r=i===s.length-1;this.titleEl&&(this.titleEl.textContent=e.title||"",this.titleEl.hidden=!e.title),this.descriptionEl&&(this.descriptionEl.textContent=e.content||"",this.descriptionEl.hidden=!e.content),this.prevButtonEl&&(this.prevButtonEl.hidden=n),this.nextButtonEl&&(this.nextButtonEl.textContent=r?"완료":"다음",r?this.nextButtonEl.removeAttribute("end-icon"):this.nextButtonEl.setAttribute("end-icon","chevron-right")),this.indicatorEl&&(this.indicatorEl.setAttribute("current",String(i)),this.indicatorEl.setAttribute("total",String(s.length)),this.indicatorEl.setAttribute("type",this.getAttribute("indicator-type")||"numbers"),this.indicatorEl.setAttribute("size",this.getAttribute("indicator-size")||"m")),this.updateTargetElement()}}customElements.get("db-tutorial")||customElements.define("db-tutorial",DbTutorial);export{DbTutorial};

package/dist/esm/components/db-two-factor.d.ts

@@ -0,0 +1,60 @@
+import './db-button.js';
+import './db-otp-input.js';
+import './db-segment-control.js';
+
+/**
+ * ui-wc — db-two-factor (수동 작성, 자동 동기화 대상 아님)
+ *
+ * 2단계 인증(2FA): 인증앱 / SMS / 이메일 방식 + OTP.
+ */
+
+declare const METHODS: readonly [{
+    readonly value: "app";
+    readonly label: "인증 앱";
+}, {
+    readonly value: "sms";
+    readonly label: "SMS";
+}, {
+    readonly value: "email";
+    readonly label: "이메일";
+}];
+declare const SIZES: readonly ["s", "m", "l"];
+type Size = (typeof SIZES)[number];
+type Method = (typeof METHODS)[number]['value'];
+declare class DbTwoFactor extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private timerId;
+    private remaining;
+    private segment;
+    private otpInput;
+    private hintEl;
+    private timerEl;
+    private resendBtn;
+    private verifyBtn;
+    private backupBtn;
+    private errorEl;
+    private channelActions;
+    get method(): Method;
+    set method(v: Method);
+    get size(): Size;
+    get countdown(): number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** 수동 제어 모드에서 코드 발송 성공 후 카운트다운을 시작합니다. */
+    restartCountdown(): void;
+    private clearTimer;
+    private startTimer;
+    private renderTimer;
+    private build;
+    private sync;
+    private requestVerify;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-two-factor': DbTwoFactor;
+    }
+}
+
+export { DbTwoFactor };

package/dist/esm/components/db-two-factor.js

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";import"./db-button.js";import"./db-otp-input.js";import"./db-segment-control.js";const e=[{value:"app",label:"인증 앱"},{value:"sms",label:"SMS"},{value:"email",label:"이메일"}],i=["s","m","l"];function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}class DbTwoFactor extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.timerId=null,this.remaining=0}static get observedAttributes(){return["method","code","size","disabled","error","error-message","title","description","verify-label","code-length","show-backup","countdown","destination","manual","sending","verifying","auto-submit","resend-label"]}get method(){const t=this.getAttribute("method");return"sms"===t||"email"===t||"app"===t?t:"app"}set method(t){this.setAttribute("method",t)}get size(){return function pick(t,e,i){return t.includes(e)?e:i}(i,this.getAttribute("size"),"m")}get countdown(){const t=Number(this.getAttribute("countdown")||180);return Number.isFinite(t)&&t>0?t:180}connectedCallback(){this.build(),this.sync(),"app"===this.method||this.hasAttribute("manual")||this.startTimer(this.countdown)}disconnectedCallback(){this.clearTimer()}attributeChangedCallback(t,e,i){this.built&&(this.sync(),"method"!==t&&"manual"!==t||e===i||("app"===this.method||this.hasAttribute("manual")?this.clearTimer():this.startTimer(this.countdown)))}restartCountdown(){"app"!==this.method&&this.startTimer(this.countdown)}clearTimer(){this.timerId&&clearInterval(this.timerId),this.timerId=null,this.remaining=0,this.timerEl&&(this.timerEl.textContent="")}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="app"===this.method?"":`${String(t).padStart(2,"0")}:${String(e).padStart(2,"0")}`,"app"!==this.method?this.timerEl.setAttribute("aria-label",`남은 시간 ${t}분 ${e}초`):this.timerEl.removeAttribute("aria-label"),this.resendBtn.disabled="app"===this.method||this.remaining>0||this.hasAttribute("disabled")}build(){if(this.built)return;this.built=!0;const i="designbase-wc-two-factor";this.replaceChildren();const s=el("div",`${i}__header`),n=el("div",`${i}__icon`);n.append(t("lock",22));const r=el("div",`${i}__titles`),o=el("h3",`${i}__title`);o.dataset.role="title";const h=el("p",`${i}__description`);h.dataset.role="description",r.append(o,h),s.append(n,r),this.segment=document.createElement("db-segment-control"),this.segment.setAttribute("options",JSON.stringify(e.map(t=>({value:t.value,label:t.label})))),this.segment.setAttribute("full-width",""),this.segment.addEventListener("db-change",t=>{t.stopPropagation();const e=String(t.detail?.value||"app");e!==this.method&&(this.setAttribute("code",""),this.method=e,this.dispatchEvent(new CustomEvent("db-method-change",{detail:{method:e},bubbles:!0,composed:!0})),"app"!==e&&this.dispatchEvent(new CustomEvent("db-send-code",{detail:{method:e,destination:this.getAttribute("destination")||""},bubbles:!0,composed:!0})))}),this.hintEl=el("p",`${i}__hint`),this.hintEl.dataset.role="hint";const a=el("div",`${i}__code-head`),d=el("span",`${i}__code-label`);d.textContent="인증 코드",this.timerEl=el("span",`${i}__timer`),a.append(d,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,method:this.method},bubbles:!0,composed:!0})),this.hasAttribute("auto-submit")&&this.requestVerify()}),this.channelActions=el("div",`${i}__channel`),this.resendBtn=el("button",`${i}__resend`),this.resendBtn.type="button",this.resendBtn.textContent="코드 재전송",this.resendBtn.addEventListener("click",()=>{this.resendBtn.disabled||(this.dispatchEvent(new CustomEvent("db-resend",{detail:{method:this.method,destination:this.getAttribute("destination")||""},bubbles:!0,composed:!0})),this.hasAttribute("manual")||this.startTimer(this.countdown))}),this.channelActions.append(this.resendBtn),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()}),this.backupBtn=el("button",`${i}__backup`),this.backupBtn.type="button",this.backupBtn.textContent="백업 코드로 인증",this.backupBtn.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-backup-request",{bubbles:!0,composed:!0}))}),this.errorEl=el("p",`${i}__error`),this.errorEl.hidden=!0,this.append(s,this.segment,this.hintEl,a,this.otpInput,this.channelActions,this.verifyBtn,this.backupBtn,this.errorEl)}sync(){const t="designbase-wc-two-factor",e=this.size,i=this.method,s=this.hasAttribute("disabled"),n=this.getAttribute("code-length")||"6",r=this.getAttribute("destination")||"";this.className=[t,`${t}--${e}`,`${t}--${i}`,s&&`${t}--disabled`,this.hasAttribute("error")&&`${t}--error`].filter(Boolean).join(" ");const o=this.querySelector('[data-role="title"]'),h=this.querySelector('[data-role="description"]');o.textContent=this.getAttribute("title")||"2단계 인증",h.textContent=this.getAttribute("description")||"계속하려면 인증 코드를 입력해 주세요.",this.segment.setAttribute("value",i),this.segment.setAttribute("size",e),this.segment.toggleAttribute("disabled",s);const a=this.querySelector('[data-role="hint"]');a.textContent="app"===i?"인증 앱(Google Authenticator, 1Password 등)에 표시된 6자리 코드를 입력하세요.":"sms"===i?r?`${r} 으로 보낸 SMS 인증 코드를 입력하세요.`:"등록된 휴대폰으로 보낸 SMS 인증 코드를 입력하세요.":r?`${r} 으로 보낸 이메일 인증 코드를 입력하세요.`:"등록된 이메일로 보낸 인증 코드를 입력하세요.",this.otpInput.setAttribute("length",n),this.otpInput.setAttribute("size",e),this.otpInput.setAttribute("value",this.getAttribute("code")||""),this.otpInput.toggleAttribute("disabled",s),this.otpInput.toggleAttribute("error",this.hasAttribute("error")),this.getAttribute("error-message")?this.otpInput.setAttribute("error-message",this.getAttribute("error-message")||""):this.otpInput.removeAttribute("error-message"),this.channelActions.hidden="app"===i,this.resendBtn.textContent=this.hasAttribute("sending")?"전송 중…":this.getAttribute("resend-label")||"코드 재전송",this.renderTimer(),this.hasAttribute("sending")&&(this.resendBtn.disabled=!0),this.verifyBtn.setAttribute("size",e),this.verifyBtn.textContent=this.getAttribute("verify-label")||"인증하기";const d=this.getAttribute("code")||"";this.verifyBtn.toggleAttribute("disabled",s||d.length<Number(n)),this.verifyBtn.toggleAttribute("loading",this.hasAttribute("verifying")),this.backupBtn.hidden=!this.hasAttribute("show-backup");const l=this.getAttribute("error-message")||"";this.errorEl.textContent=l,this.errorEl.hidden=!this.hasAttribute("error")||!l}requestVerify(){const t=(this.getAttribute("code")||this.otpInput.value).replace(/\D/g,""),e=Number(this.getAttribute("code-length")||6);t.length!==e||this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("db-verify",{detail:{method:this.method,code:t},bubbles:!0,composed:!0}))}}customElements.get("db-two-factor")||customElements.define("db-two-factor",DbTwoFactor);export{DbTwoFactor};