@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -0,0 +1 @@
+import"./db-button.js";import"./db-input.js";import"./db-otp-input.js";import"./db-select.js";const t=[{value:"skt",label:"SKT"},{value:"kt",label:"KT"},{value:"lgu",label:"LG U+"},{value:"mvno",label:"알뜰폰"}],e=["s","m","l"];function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}function formatPhone(t){const e=t.replace(/\D/g,"").slice(0,11);return e.length<=3?e:e.length<=7?`${e.slice(0,3)}-${e.slice(3)}`:`${e.slice(0,3)}-${e.slice(3,7)}-${e.slice(7)}`}class DbPhoneVerify extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.timerId=null,this.remaining=0}static get observedAttributes(){return["carrier","phone","code","step","size","disabled","error","error-message","carrier-options","countdown","title","description","send-label","resend-label","verify-label","code-length","manual","sending","verifying","auto-submit"]}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||"verified"===t?t:"phone"}set step(t){this.setAttribute("step",t)}get phone(){return(this.getAttribute("phone")||"").replace(/\D/g,"")}set phone(t){this.setAttribute("phone",formatPhone(t))}get carrier(){return this.getAttribute("carrier")||"skt"}set carrier(t){this.setAttribute("carrier",t)}get code(){return this.getAttribute("code")||""}set code(t){this.setAttribute("code",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.step&&this.startTimer(this.countdown)}disconnectedCallback(){this.clearTimer()}attributeChangedCallback(t,e,i){this.built&&(this.sync(),"step"===t&&e!==i&&("code"===this.step?this.startTimer(this.countdown):this.clearTimer()))}startCodeStep(){"code"===this.step?this.startTimer(this.countdown):this.step="code",requestAnimationFrame(()=>this.otpInput?.focus?.())}restartCountdown(){"code"===this.step&&this.startTimer(this.countdown)}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 t="designbase-wc-phone-verify";this.replaceChildren();const e=el("div",`${t}__header`),i=el("h3",`${t}__title`);i.dataset.role="title";const s=el("p",`${t}__description`);s.dataset.role="description",e.append(i,s);const r=el("div",`${t}__field`);this.carrierSelect=document.createElement("db-select"),this.carrierSelect.setAttribute("label","통신사"),this.carrierSelect.setAttribute("full-width",""),this.carrierSelect.setAttribute("placeholder","통신사 선택"),this.carrierSelect.addEventListener("db-change",t=>{t.stopPropagation();const e=t.detail?.value??this.carrierSelect.value;this.carrier=String(e||""),this.dispatchEvent(new CustomEvent("db-carrier-change",{detail:{carrier:this.carrier},bubbles:!0,composed:!0}))}),r.append(this.carrierSelect);const n=el("div",`${t}__phone-row`);this.phoneInput=document.createElement("db-input"),this.phoneInput.setAttribute("type","tel"),this.phoneInput.setAttribute("label","휴대폰 번호"),this.phoneInput.setAttribute("placeholder","010-0000-0000"),this.phoneInput.setAttribute("full-width",""),this.phoneInput.setAttribute("start-icon","user"),this.phoneInput.addEventListener("db-input",t=>{t.stopPropagation();const e=formatPhone(String(t.detail?.value??this.phoneInput.value??""));this.phoneInput.value=e,this.setAttribute("phone",e),this.dispatchEvent(new CustomEvent("db-phone-change",{detail:{phone:e.replace(/\D/g,""),formatted: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.isPhoneValid()&&(this.dispatchEvent(new CustomEvent("db-send-code",{detail:{carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("manual")||this.startCodeStep())}),n.append(this.phoneInput,this.sendBtn),this.codeBlock=el("div",`${t}__code`);const o=el("div",`${t}__code-head`),h=el("span",`${t}__code-label`);h.textContent="인증번호",this.timerEl=el("span",`${t}__timer`),o.append(h,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,carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("auto-submit")&&this.requestVerify()});const a=el("div",`${t}__code-actions`);this.resendBtn=el("button",`${t}__resend`),this.resendBtn.type="button",this.resendBtn.addEventListener("click",()=>{this.resendBtn.disabled||(this.dispatchEvent(new CustomEvent("db-resend",{detail:{carrier:this.carrier,phone:this.phone},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()}),a.append(this.resendBtn,this.verifyBtn),this.codeBlock.append(o,this.otpInput,a),this.errorEl=el("p",`${t}__error`),this.errorEl.hidden=!0;const d=el("div",`${t}__verified`);d.dataset.role="verified",d.innerHTML=`<span class="${t}__verified-badge">인증 완료</span><p class="${t}__verified-text">휴대폰 번호 인증이 완료되었습니다.</p>`,this.append(e,r,n,this.codeBlock,this.errorEl,d)}sync(){const e="designbase-wc-phone-verify",i=this.size,s=this.step,r=this.hasAttribute("disabled"),n=function parseCarriers(e){if(!e)return t;try{const i=JSON.parse(e);return Array.isArray(i)&&i.length?i:t}catch{return t}}(this.getAttribute("carrier-options")),o=this.getAttribute("code-length")||"6";this.className=[e,`${e}--${i}`,`${e}--step-${s}`,r&&`${e}--disabled`,this.hasAttribute("error")&&`${e}--error`].filter(Boolean).join(" ");const h=this.querySelector('[data-role="title"]'),a=this.querySelector('[data-role="description"]');h.textContent=this.getAttribute("title")||"휴대폰 인증",a.textContent=this.getAttribute("description")||"본인 명의의 휴대폰 번호를 입력하고 인증번호를 받아 주세요.",this.carrierSelect.setAttribute("options",JSON.stringify(n)),this.carrierSelect.setAttribute("value",this.carrier),this.carrierSelect.setAttribute("size",i),this.carrierSelect.toggleAttribute("disabled",r||"verified"===s);const d=this.getAttribute("phone")||"";this.phoneInput.value=d,this.phoneInput.setAttribute("size",i),this.phoneInput.toggleAttribute("disabled",r||"phone"!==s),this.phoneInput.toggleAttribute("error",this.hasAttribute("error")&&"phone"===s),this.sendBtn.setAttribute("size",i),this.sendBtn.textContent=this.getAttribute("send-label")||"인증번호 받기",this.sendBtn.toggleAttribute("disabled",r||"phone"!==s||!this.isPhoneValid()),this.sendBtn.toggleAttribute("loading",this.hasAttribute("sending")),this.otpInput.setAttribute("length",o),this.otpInput.setAttribute("size",i),this.otpInput.setAttribute("value",this.getAttribute("code")||""),this.otpInput.toggleAttribute("disabled",r||"code"!==s),this.otpInput.toggleAttribute("error",this.hasAttribute("error")&&"code"===s),this.resendBtn.textContent=this.getAttribute("resend-label")||"재전송",this.verifyBtn.setAttribute("size",i),this.verifyBtn.textContent=this.getAttribute("verify-label")||"인증하기",this.verifyBtn.toggleAttribute("disabled",r||(this.getAttribute("code")||"").length<Number(o)),this.verifyBtn.toggleAttribute("loading",this.hasAttribute("verifying")),this.codeBlock.hidden="phone"===s;this.querySelector('[data-role="verified"]').hidden="verified"!==s;const l=this.getAttribute("error-message")||"";this.errorEl.textContent=l,this.errorEl.hidden=!this.hasAttribute("error")||!l}isPhoneValid(){return/^01[016789]\d{7,8}$/.test(this.phone)&&Boolean(this.carrier)}requestVerify(){const t=(this.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:{carrier:this.carrier,phone:this.phone,code:t},bubbles:!0,composed:!0}))}}customElements.get("db-phone-verify")||customElements.define("db-phone-verify",DbPhoneVerify);export{DbPhoneVerify};

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

@@ -1,580 +1 @@
-const PLACEMENTS = [
-    'top',
-    'bottom',
-    'left',
-    'right',
-    'top-start',
-    'top-end',
-    'bottom-start',
-    'bottom-end',
-    'left-start',
-    'left-end',
-    'right-start',
-    'right-end',
-];
-const TRIGGERS = ['click', 'hover', 'focus', 'manual'];
-const GAP = 8;
-class DbPopover extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.onDocMouseDown = null;
-        this.onDocKeyDown = null;
-        this.onExternalTriggerClick = null;
-        this.handleTriggerClick = (event) => {
-            if (this.resolvedTrigger() !== 'click')
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-            this.setOpen(!this.isOpen());
-        };
-        this.handleTriggerMouseEnter = () => {
-            if (this.resolvedTrigger() === 'hover')
-                this.scheduleOpen();
-        };
-        this.handleTriggerMouseLeave = () => {
-            if (this.resolvedTrigger() === 'hover')
-                this.scheduleClose();
-        };
-        this.handleTriggerFocus = () => {
-            if (this.resolvedTrigger() === 'focus')
-                this.scheduleOpen();
-        };
-        this.handleTriggerBlur = () => {
-            if (this.resolvedTrigger() === 'focus')
-                this.scheduleClose();
-        };
-        this.handleReposition = () => {
-            if (!this.isOpen())
-                return;
-            if (this.repositionRaf)
-                cancelAnimationFrame(this.repositionRaf);
-            this.repositionRaf = requestAnimationFrame(() => {
-                this.positionPanel();
-                this.repositionRaf = undefined;
-            });
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'open',
-            'placement',
-            'position',
-            'title',
-            'content',
-            'size',
-            'variant',
-            'trigger',
-            'delay',
-            'hide-delay',
-            'always-show',
-            'disabled',
-            'max-width',
-            'show-arrow',
-            'close-on-outside-click',
-            'close-on-escape',
-            'trigger-id',
-        ];
-    }
-    get open() {
-        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
-    }
-    set open(value) {
-        if (value)
-            this.setAttribute('open', '');
-        else
-            this.removeAttribute('open');
-    }
-    connectedCallback() {
-        this.classList.add('designbase-wc-popover-host');
-        if (!this.hasAttribute('placement') && !this.hasAttribute('position')) {
-            this.setAttribute('placement', 'top');
-        }
-        this.render();
-        this.childObserver = new MutationObserver(() => this.render());
-        this.childObserver.observe(this, { childList: true });
-        this.bindExternalTrigger();
-        this.attachGlobalListeners();
-        this.syncOpenFromAttributes();
-    }
-    disconnectedCallback() {
-        this.childObserver?.disconnect();
-        this.clearTimers();
-        if (this.repositionRaf)
-            cancelAnimationFrame(this.repositionRaf);
-        this.unbindExternalTrigger();
-        this.detachGlobalListeners();
-        this.removePanel();
-    }
-    attributeChangedCallback(name) {
-        if (!this.isConnected)
-            return;
-        if (name === 'trigger-id') {
-            this.unbindExternalTrigger();
-            this.bindExternalTrigger();
-        }
-        if (name === 'open' || name === 'always-show' || name === 'disabled') {
-            this.syncOpenFromAttributes();
-            return;
-        }
-        if (name === 'content' && this.bodyEl) {
-            this.bodyEl.textContent = this.getAttribute('content') || '';
-        }
-        if (this.isOpen()) {
-            this.updatePanelMetadata();
-            requestAnimationFrame(() => this.positionPanel());
-        }
-    }
-    resolvedPlacement() {
-        const value = this.getAttribute('position') || this.getAttribute('placement') || 'top';
-        return PLACEMENTS.includes(value) ? value : 'top';
-    }
-    resolvedTrigger() {
-        const value = this.getAttribute('trigger') || 'click';
-        return TRIGGERS.includes(value) ? value : 'click';
-    }
-    isControlled() {
-        return this.hasAttribute('open');
-    }
-    isOpen() {
-        if (this.hasAttribute('disabled'))
-            return false;
-        if (this.hasAttribute('always-show'))
-            return true;
-        if (this.isControlled()) {
-            return this.getAttribute('open') !== 'false';
-        }
-        return this.panel?.classList.contains('designbase-wc-popover--visible') ?? false;
-    }
-    setOpen(next) {
-        if (this.hasAttribute('disabled') || this.hasAttribute('always-show'))
-            return;
-        if (this.isControlled()) {
-            if (next)
-                this.setAttribute('open', '');
-            else
-                this.removeAttribute('open');
-        }
-        else if (next) {
-            this.showPanel();
-        }
-        else {
-            this.hidePanel();
-        }
-        this.dispatchEvent(new CustomEvent('db-open-change', {
-            bubbles: true,
-            composed: true,
-            detail: { open: next },
-        }));
-        if (!next) {
-            this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
-        }
-    }
-    syncOpenFromAttributes() {
-        if (this.hasAttribute('always-show')) {
-            this.showPanel();
-            return;
-        }
-        if (this.isControlled()) {
-            if (this.getAttribute('open') !== 'false')
-                this.showPanel();
-            else
-                this.hidePanel();
-        }
-    }
-    clearTimers() {
-        if (this.showTimer)
-            clearTimeout(this.showTimer);
-        if (this.hideTimer)
-            clearTimeout(this.hideTimer);
-        this.showTimer = undefined;
-        this.hideTimer = undefined;
-    }
-    groupOf(position) {
-        if (position.startsWith('top'))
-            return 'top';
-        if (position.startsWith('bottom'))
-            return 'bottom';
-        if (position.startsWith('left'))
-            return 'left';
-        return 'right';
-    }
-    collectTriggerChildren() {
-        const isInternalNode = (child) => child.hasAttribute('data-wc-internal') || child === this.triggerWrap;
-        const fromHost = Array.from(this.children).filter((child) => !isInternalNode(child));
-        if (fromHost.length > 0)
-            return fromHost;
-        return Array.from(this.triggerWrap?.children || []);
-    }
-    ensureTriggerWrap() {
-        if (!this.triggerWrap) {
-            this.triggerWrap = document.createElement('span');
-            this.triggerWrap.className = 'designbase-wc-popover__trigger';
-            this.triggerWrap.setAttribute('data-wc-internal', '');
-            this.triggerWrap.tabIndex = 0;
-            this.triggerWrap.addEventListener('click', this.handleTriggerClick);
-            this.triggerWrap.addEventListener('mouseenter', this.handleTriggerMouseEnter);
-            this.triggerWrap.addEventListener('mouseleave', this.handleTriggerMouseLeave);
-            this.triggerWrap.addEventListener('focus', this.handleTriggerFocus);
-            this.triggerWrap.addEventListener('blur', this.handleTriggerBlur);
-        }
-    }
-    mountTriggerChildren(children) {
-        if (!this.triggerWrap)
-            return;
-        children.forEach((child) => {
-            if (child.parentElement !== this.triggerWrap) {
-                this.triggerWrap.append(child);
-            }
-        });
-    }
-    collectBodyChildren() {
-        return Array.from(this.querySelectorAll('[slot="content"]'));
-    }
-    bindExternalTrigger() {
-        const triggerId = this.getAttribute('trigger-id');
-        if (!triggerId)
-            return;
-        this.triggerEl = document.getElementById(triggerId);
-        if (!this.triggerEl)
-            return;
-        this.onExternalTriggerClick = () => {
-            if (this.resolvedTrigger() !== 'click')
-                return;
-            this.setOpen(!this.isOpen());
-        };
-        this.triggerEl.addEventListener('click', this.onExternalTriggerClick);
-    }
-    unbindExternalTrigger() {
-        if (this.triggerEl && this.onExternalTriggerClick) {
-            this.triggerEl.removeEventListener('click', this.onExternalTriggerClick);
-        }
-        this.triggerEl = null;
-        this.onExternalTriggerClick = null;
-    }
-    attachGlobalListeners() {
-        this.onDocMouseDown = (event) => {
-            if (!this.isOpen() || this.getAttribute('close-on-outside-click') === 'false')
-                return;
-            const target = event.target;
-            if (this.panel?.contains(target))
-                return;
-            if (this.triggerWrap?.contains(target))
-                return;
-            if (this.triggerEl?.contains(target))
-                return;
-            this.setOpen(false);
-        };
-        this.onDocKeyDown = (event) => {
-            if (event.key === 'Escape' && this.isOpen() && this.getAttribute('close-on-escape') !== 'false') {
-                this.setOpen(false);
-            }
-        };
-        document.addEventListener('mousedown', this.onDocMouseDown);
-        document.addEventListener('keydown', this.onDocKeyDown);
-    }
-    detachGlobalListeners() {
-        if (this.onDocMouseDown)
-            document.removeEventListener('mousedown', this.onDocMouseDown);
-        if (this.onDocKeyDown)
-            document.removeEventListener('keydown', this.onDocKeyDown);
-        this.onDocMouseDown = null;
-        this.onDocKeyDown = null;
-    }
-    scheduleOpen() {
-        this.clearTimers();
-        const trigger = this.resolvedTrigger();
-        const delay = trigger === 'hover' ? Math.max(0, Number(this.getAttribute('delay') || 0)) : 0;
-        this.showTimer = setTimeout(() => this.showPanel(), delay);
-    }
-    scheduleClose() {
-        this.clearTimers();
-        const trigger = this.resolvedTrigger();
-        const hideDelay = trigger === 'hover' ? Math.max(0, Number(this.getAttribute('hide-delay') || 80)) : 0;
-        this.hideTimer = setTimeout(() => this.setOpen(false), hideDelay);
-    }
-    getTriggerRect() {
-        const target = this.triggerEl || this.triggerWrap;
-        return target?.getBoundingClientRect();
-    }
-    flipPlacementIfNeeded(placement, tRect, pRect) {
-        const margin = 8;
-        const vh = window.innerHeight;
-        const vw = window.innerWidth;
-        const group = this.groupOf(placement);
-        const fitsTop = tRect.top - pRect.height - GAP >= margin;
-        const fitsBottom = tRect.bottom + GAP + pRect.height <= vh - margin;
-        const fitsLeft = tRect.left - pRect.width - GAP >= margin;
-        const fitsRight = tRect.right + GAP + pRect.width <= vw - margin;
-        if (group === 'top' && !fitsTop && fitsBottom) {
-            return placement.replace(/^top/, 'bottom');
-        }
-        if (group === 'bottom' && !fitsBottom && fitsTop) {
-            return placement.replace(/^bottom/, 'top');
-        }
-        if (group === 'left' && !fitsLeft && fitsRight) {
-            return placement.replace(/^left/, 'right');
-        }
-        if (group === 'right' && !fitsRight && fitsLeft) {
-            return placement.replace(/^right/, 'left');
-        }
-        return placement;
-    }
-    applyCoords(placement, tRect, pRect) {
-        let top = 0;
-        let left = 0;
-        let aTop = 0;
-        let aLeft = 0;
-        // 회전한 정사각형 화살표(10px)의 중심을 패널 가장자리에 맞춤 (half = 5)
-        const H = pRect.height;
-        const W = pRect.width;
-        const EDGE = 16; // start/end 앵커 중심 위치
-        const HALF = 5;
-        switch (placement) {
-            case 'top':
-                top = tRect.top - pRect.height - GAP;
-                left = tRect.left + tRect.width / 2 - pRect.width / 2;
-                aTop = H - HALF;
-                aLeft = W / 2 - HALF;
-                break;
-            case 'top-start':
-                top = tRect.top - pRect.height - GAP;
-                left = tRect.left;
-                aTop = H - HALF;
-                aLeft = EDGE - HALF;
-                break;
-            case 'top-end':
-                top = tRect.top - pRect.height - GAP;
-                left = tRect.right - pRect.width;
-                aTop = H - HALF;
-                aLeft = W - EDGE - HALF;
-                break;
-            case 'bottom':
-                top = tRect.bottom + GAP;
-                left = tRect.left + tRect.width / 2 - pRect.width / 2;
-                aTop = -HALF;
-                aLeft = W / 2 - HALF;
-                break;
-            case 'bottom-start':
-                top = tRect.bottom + GAP;
-                left = tRect.left;
-                aTop = -HALF;
-                aLeft = EDGE - HALF;
-                break;
-            case 'bottom-end':
-                top = tRect.bottom + GAP;
-                left = tRect.right - pRect.width;
-                aTop = -HALF;
-                aLeft = W - EDGE - HALF;
-                break;
-            case 'left':
-                top = tRect.top + tRect.height / 2 - pRect.height / 2;
-                left = tRect.left - pRect.width - GAP;
-                aTop = H / 2 - HALF;
-                aLeft = W - HALF;
-                break;
-            case 'left-start':
-                top = tRect.top;
-                left = tRect.left - pRect.width - GAP;
-                aTop = EDGE - HALF;
-                aLeft = W - HALF;
-                break;
-            case 'left-end':
-                top = tRect.bottom - pRect.height;
-                left = tRect.left - pRect.width - GAP;
-                aTop = H - EDGE - HALF;
-                aLeft = W - HALF;
-                break;
-            case 'right':
-                top = tRect.top + tRect.height / 2 - pRect.height / 2;
-                left = tRect.right + GAP;
-                aTop = H / 2 - HALF;
-                aLeft = -HALF;
-                break;
-            case 'right-start':
-                top = tRect.top;
-                left = tRect.right + GAP;
-                aTop = EDGE - HALF;
-                aLeft = -HALF;
-                break;
-            case 'right-end':
-                top = tRect.bottom - pRect.height;
-                left = tRect.right + GAP;
-                aTop = H - EDGE - HALF;
-                aLeft = -HALF;
-                break;
-        }
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        if (left < 8)
-            left = 8;
-        if (left + pRect.width > vw - 8)
-            left = vw - pRect.width - 8;
-        if (top < 8)
-            top = 8;
-        if (top + pRect.height > vh - 8)
-            top = vh - pRect.height - 8;
-        return { top, left, aTop, aLeft, placement };
-    }
-    positionPanel() {
-        if (!this.panel)
-            return;
-        const tRect = this.getTriggerRect();
-        if (!tRect)
-            return;
-        // maxWidth를 측정 전에 적용해야 패널 폭이 확정되어 위치가 어긋나지 않음
-        const maxWidth = Number(this.getAttribute('max-width') || 300);
-        this.panel.style.maxWidth = `${maxWidth}px`;
-        // 레이아웃 확정 후 측정 (첫 페인트 높이 0 방지)
-        void this.panel.offsetHeight;
-        const pRect = this.panel.getBoundingClientRect();
-        const preferred = this.resolvedPlacement();
-        const placement = this.flipPlacementIfNeeded(preferred, tRect, pRect);
-        const { top, left, aTop, aLeft } = this.applyCoords(placement, tRect, pRect);
-        this.panel.style.top = `${top}px`;
-        this.panel.style.left = `${left}px`;
-        this.panel.dataset.placementGroup = this.groupOf(placement);
-        PLACEMENTS.forEach((name) => {
-            this.panel.classList.toggle(`designbase-wc-popover--${name}`, name === placement);
-        });
-        if (this.arrowEl) {
-            this.arrowEl.className = `designbase-wc-popover__arrow designbase-wc-popover__arrow--${placement}`;
-            this.arrowEl.style.top = `${aTop}px`;
-            this.arrowEl.style.left = `${aLeft}px`;
-        }
-    }
-    revealPanel() {
-        if (!this.panel)
-            return;
-        this.panel.classList.remove('designbase-wc-popover--visible');
-        this.positionPanel();
-        void this.panel.offsetHeight;
-        this.positionPanel();
-        this.panel.classList.add('designbase-wc-popover--visible');
-    }
-    updatePanelMetadata() {
-        if (!this.panel)
-            return;
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const placement = this.resolvedPlacement();
-        this.panel.className = [
-            'designbase-wc-popover',
-            `designbase-wc-popover--${size}`,
-            `designbase-wc-popover--${variant}`,
-            `designbase-wc-popover--${placement}`,
-            this.isOpen() ? 'designbase-wc-popover--visible' : '',
-            this.hasAttribute('disabled') ? 'designbase-wc-popover--disabled' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
-    ensurePanel() {
-        if (this.panel)
-            return;
-        const panel = document.createElement('div');
-        panel.className = 'designbase-wc-popover';
-        panel.setAttribute('data-wc-internal', '');
-        panel.setAttribute('role', 'dialog');
-        panel.setAttribute('aria-modal', 'false');
-        panel.style.position = 'fixed';
-        panel.style.zIndex = '9999';
-        const inner = document.createElement('div');
-        inner.className = 'designbase-wc-popover__content';
-        const header = document.createElement('div');
-        header.className = 'designbase-wc-popover__header';
-        const title = document.createElement('h3');
-        title.className = 'designbase-wc-popover__title';
-        const close = document.createElement('db-button');
-        close.className = 'designbase-wc-popover__close-button';
-        close.setAttribute('variant', 'ghost');
-        close.setAttribute('size', 's');
-        close.setAttribute('icon-only', '');
-        close.setAttribute('start-icon', 'close');
-        close.setAttribute('aria-label', '팝오버 닫기');
-        close.addEventListener('db-click', (event) => {
-            event.stopPropagation();
-            this.setOpen(false);
-        });
-        header.append(title, close);
-        this.bodyEl = document.createElement('div');
-        this.bodyEl.className = 'designbase-wc-popover__body';
-        inner.append(header, this.bodyEl);
-        panel.append(inner);
-        if (this.getAttribute('show-arrow') !== 'false') {
-            this.arrowEl = document.createElement('div');
-            this.arrowEl.className = `designbase-wc-popover__arrow designbase-wc-popover__arrow--${this.resolvedPlacement()}`;
-            panel.append(this.arrowEl);
-        }
-        this.panel = panel;
-        this.panel.querySelector('.designbase-wc-popover__title').textContent = this.getAttribute('title') || '';
-        this.panel.querySelector('.designbase-wc-popover__title').hidden = !this.getAttribute('title');
-        document.body.append(panel);
-        panel.addEventListener('mouseenter', () => {
-            if (this.resolvedTrigger() === 'hover')
-                this.clearTimers();
-        });
-        panel.addEventListener('mouseleave', () => {
-            if (this.resolvedTrigger() === 'hover')
-                this.scheduleClose();
-        });
-    }
-    showPanel() {
-        if (this.hasAttribute('disabled'))
-            return;
-        this.ensurePanel();
-        this.updatePanelMetadata();
-        const slotContent = this.collectBodyChildren();
-        if (slotContent.length > 0) {
-            this.bodyEl.replaceChildren(...slotContent.map((node) => node.cloneNode(true)));
-        }
-        else {
-            this.bodyEl.textContent = this.getAttribute('content') || '';
-        }
-        const titleEl = this.panel.querySelector('.designbase-wc-popover__title');
-        titleEl.textContent = this.getAttribute('title') || '';
-        titleEl.hidden = !this.getAttribute('title');
-        requestAnimationFrame(() => {
-            this.revealPanel();
-            window.addEventListener('scroll', this.handleReposition, true);
-            window.addEventListener('resize', this.handleReposition);
-        });
-    }
-    hidePanel() {
-        this.panel?.classList.remove('designbase-wc-popover--visible');
-        window.removeEventListener('scroll', this.handleReposition, true);
-        window.removeEventListener('resize', this.handleReposition);
-        if (!this.hasAttribute('always-show')) {
-            this.removePanel();
-        }
-    }
-    removePanel() {
-        this.panel?.remove();
-        this.panel = undefined;
-        this.bodyEl = undefined;
-        this.arrowEl = undefined;
-    }
-    render() {
-        this.ensureTriggerWrap();
-        const triggerChildren = this.collectTriggerChildren();
-        this.mountTriggerChildren(triggerChildren);
-        const hasExternalTrigger = Boolean(this.getAttribute('trigger-id'));
-        if (this.triggerWrap) {
-            if (triggerChildren.length > 0 || !hasExternalTrigger) {
-                if (this.triggerWrap.parentElement !== this) {
-                    this.append(this.triggerWrap);
-                }
-            }
-            else if (this.triggerWrap.parentElement === this) {
-                this.triggerWrap.remove();
-            }
-        }
-        if (this.hasAttribute('always-show')) {
-            this.showPanel();
-        }
-    }
-}
-if (!customElements.get('db-popover')) {
-    customElements.define('db-popover', DbPopover);
-}
-
-export { DbPopover };
+const e=["top","bottom","left","right","top-start","top-end","bottom-start","bottom-end","left-start","left-end","right-start","right-end"],t=["click","hover","focus","manual"];class DbPopover extends HTMLElement{constructor(){super(...arguments),this.onDocMouseDown=null,this.onDocKeyDown=null,this.onExternalTriggerClick=null,this.handleTriggerClick=e=>{"click"===this.resolvedTrigger()&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!this.isOpen()))},this.handleTriggerMouseEnter=()=>{"hover"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerMouseLeave=()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()},this.handleTriggerFocus=()=>{"focus"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerBlur=()=>{"focus"===this.resolvedTrigger()&&this.scheduleClose()},this.handleReposition=()=>{this.isOpen()&&(this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.repositionRaf=requestAnimationFrame(()=>{this.positionPanel(),this.repositionRaf=void 0}))}}static get observedAttributes(){return["open","placement","position","title","content","size","variant","trigger","delay","hide-delay","always-show","disabled","max-width","show-arrow","close-on-outside-click","close-on-escape","trigger-id"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-popover-host"),this.hasAttribute("placement")||this.hasAttribute("position")||this.setAttribute("placement","top"),this.render(),this.childObserver=new MutationObserver(()=>this.render()),this.childObserver.observe(this,{childList:!0}),this.bindExternalTrigger(),this.attachGlobalListeners(),this.syncOpenFromAttributes()}disconnectedCallback(){this.childObserver?.disconnect(),this.clearTimers(),this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.unbindExternalTrigger(),this.detachGlobalListeners(),this.removePanel()}attributeChangedCallback(e){this.isConnected&&("trigger-id"===e&&(this.unbindExternalTrigger(),this.bindExternalTrigger()),"open"!==e&&"always-show"!==e&&"disabled"!==e?("content"===e&&this.bodyEl&&(this.bodyEl.textContent=this.getAttribute("content")||""),this.isOpen()&&(this.updatePanelMetadata(),requestAnimationFrame(()=>this.positionPanel()))):this.syncOpenFromAttributes())}resolvedPlacement(){const t=this.getAttribute("position")||this.getAttribute("placement")||"top";return e.includes(t)?t:"top"}resolvedTrigger(){const e=this.getAttribute("trigger")||"click";return t.includes(e)?e:"click"}isControlled(){return this.hasAttribute("open")}isOpen(){return!this.hasAttribute("disabled")&&(!!this.hasAttribute("always-show")||(this.isControlled()?"false"!==this.getAttribute("open"):this.panel?.classList.contains("designbase-wc-popover--visible")??!1))}setOpen(e){this.hasAttribute("disabled")||this.hasAttribute("always-show")||(this.isControlled()?e?this.setAttribute("open",""):this.removeAttribute("open"):e?this.showPanel():this.hidePanel(),this.dispatchEvent(new CustomEvent("db-open-change",{bubbles:!0,composed:!0,detail:{open:e}})),e||this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))}syncOpenFromAttributes(){this.hasAttribute("always-show")?this.showPanel():this.isControlled()&&("false"!==this.getAttribute("open")?this.showPanel():this.hidePanel())}clearTimers(){this.showTimer&&clearTimeout(this.showTimer),this.hideTimer&&clearTimeout(this.hideTimer),this.showTimer=void 0,this.hideTimer=void 0}groupOf(e){return e.startsWith("top")?"top":e.startsWith("bottom")?"bottom":e.startsWith("left")?"left":"right"}collectTriggerChildren(){const isInternalNode=e=>e.hasAttribute("data-wc-internal")||e===this.triggerWrap,e=Array.from(this.children).filter(e=>!isInternalNode(e));return e.length>0?e:Array.from(this.triggerWrap?.children||[])}ensureTriggerWrap(){this.triggerWrap||(this.triggerWrap=document.createElement("span"),this.triggerWrap.className="designbase-wc-popover__trigger",this.triggerWrap.setAttribute("data-wc-internal",""),this.triggerWrap.tabIndex=0,this.triggerWrap.addEventListener("click",this.handleTriggerClick),this.triggerWrap.addEventListener("mouseenter",this.handleTriggerMouseEnter),this.triggerWrap.addEventListener("mouseleave",this.handleTriggerMouseLeave),this.triggerWrap.addEventListener("focus",this.handleTriggerFocus),this.triggerWrap.addEventListener("blur",this.handleTriggerBlur))}mountTriggerChildren(e){this.triggerWrap&&e.forEach(e=>{e.parentElement!==this.triggerWrap&&this.triggerWrap.append(e)})}collectBodyChildren(){return Array.from(this.querySelectorAll('[slot="content"]'))}bindExternalTrigger(){const e=this.getAttribute("trigger-id");e&&(this.triggerEl=document.getElementById(e),this.triggerEl&&(this.onExternalTriggerClick=()=>{"click"===this.resolvedTrigger()&&this.setOpen(!this.isOpen())},this.triggerEl.addEventListener("click",this.onExternalTriggerClick)))}unbindExternalTrigger(){this.triggerEl&&this.onExternalTriggerClick&&this.triggerEl.removeEventListener("click",this.onExternalTriggerClick),this.triggerEl=null,this.onExternalTriggerClick=null}attachGlobalListeners(){this.onDocMouseDown=e=>{if(!this.isOpen()||"false"===this.getAttribute("close-on-outside-click"))return;const t=e.target;this.panel?.contains(t)||this.triggerWrap?.contains(t)||this.triggerEl?.contains(t)||this.setOpen(!1)},this.onDocKeyDown=e=>{"Escape"===e.key&&this.isOpen()&&"false"!==this.getAttribute("close-on-escape")&&this.setOpen(!1)},document.addEventListener("mousedown",this.onDocMouseDown),document.addEventListener("keydown",this.onDocKeyDown)}detachGlobalListeners(){this.onDocMouseDown&&document.removeEventListener("mousedown",this.onDocMouseDown),this.onDocKeyDown&&document.removeEventListener("keydown",this.onDocKeyDown),this.onDocMouseDown=null,this.onDocKeyDown=null}scheduleOpen(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("delay")||0)):0;this.showTimer=setTimeout(()=>this.showPanel(),e)}scheduleClose(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("hide-delay")||80)):0;this.hideTimer=setTimeout(()=>this.setOpen(!1),e)}getTriggerRect(){const e=this.triggerEl||this.triggerWrap;return e?.getBoundingClientRect()}flipPlacementIfNeeded(e,t,i){const s=window.innerHeight,r=window.innerWidth,o=this.groupOf(e),n=t.top-i.height-8>=8,a=t.bottom+8+i.height<=s-8,h=t.left-i.width-8>=8,l=t.right+8+i.width<=r-8;return"top"===o&&!n&&a?e.replace(/^top/,"bottom"):"bottom"===o&&!a&&n?e.replace(/^bottom/,"top"):"left"===o&&!h&&l?e.replace(/^left/,"right"):"right"===o&&!l&&h?e.replace(/^right/,"left"):e}applyCoords(e,t,i){let s=0,r=0,o=0,n=0;const a=i.height,h=i.width,l=16;switch(e){case"top":s=t.top-i.height-8,r=t.left+t.width/2-i.width/2,o=a-5,n=h/2-5;break;case"top-start":s=t.top-i.height-8,r=t.left,o=a-5,n=11;break;case"top-end":s=t.top-i.height-8,r=t.right-i.width,o=a-5,n=h-l-5;break;case"bottom":s=t.bottom+8,r=t.left+t.width/2-i.width/2,o=-5,n=h/2-5;break;case"bottom-start":s=t.bottom+8,r=t.left,o=-5,n=11;break;case"bottom-end":s=t.bottom+8,r=t.right-i.width,o=-5,n=h-l-5;break;case"left":s=t.top+t.height/2-i.height/2,r=t.left-i.width-8,o=a/2-5,n=h-5;break;case"left-start":s=t.top,r=t.left-i.width-8,o=11,n=h-5;break;case"left-end":s=t.bottom-i.height,r=t.left-i.width-8,o=a-l-5,n=h-5;break;case"right":s=t.top+t.height/2-i.height/2,r=t.right+8,o=a/2-5,n=-5;break;case"right-start":s=t.top,r=t.right+8,o=11,n=-5;break;case"right-end":s=t.bottom-i.height,r=t.right+8,o=a-l-5,n=-5}const d=window.innerWidth,c=window.innerHeight;return r<8&&(r=8),r+i.width>d-8&&(r=d-i.width-8),s<8&&(s=8),s+i.height>c-8&&(s=c-i.height-8),{top:s,left:r,aTop:o,aLeft:n,placement:e}}positionPanel(){if(!this.panel)return;const t=this.getTriggerRect();if(!t)return;const i=Number(this.getAttribute("max-width")||300);this.panel.style.maxWidth=`${i}px`,this.panel.offsetHeight;const s=this.panel.getBoundingClientRect(),r=this.resolvedPlacement(),o=this.flipPlacementIfNeeded(r,t,s),{top:n,left:a,aTop:h,aLeft:l}=this.applyCoords(o,t,s);this.panel.style.top=`${n}px`,this.panel.style.left=`${a}px`,this.panel.dataset.placementGroup=this.groupOf(o),e.forEach(e=>{this.panel.classList.toggle(`designbase-wc-popover--${e}`,e===o)}),this.arrowEl&&(this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${o}`,this.arrowEl.style.top=`${h}px`,this.arrowEl.style.left=`${l}px`)}revealPanel(){this.panel&&(this.panel.classList.remove("designbase-wc-popover--visible"),this.positionPanel(),this.panel.offsetHeight,this.positionPanel(),this.panel.classList.add("designbase-wc-popover--visible"))}updatePanelMetadata(){if(!this.panel)return;const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",i=this.resolvedPlacement();this.panel.className=["designbase-wc-popover",`designbase-wc-popover--${e}`,`designbase-wc-popover--${t}`,`designbase-wc-popover--${i}`,this.isOpen()?"designbase-wc-popover--visible":"",this.hasAttribute("disabled")?"designbase-wc-popover--disabled":""].filter(Boolean).join(" ")}ensurePanel(){if(this.panel)return;const e=document.createElement("div");e.className="designbase-wc-popover",e.setAttribute("data-wc-internal",""),e.setAttribute("role","dialog"),e.setAttribute("aria-modal","false"),e.style.position="fixed",e.style.zIndex="9999";const t=document.createElement("div");t.className="designbase-wc-popover__content";const i=document.createElement("div");i.className="designbase-wc-popover__header";const s=document.createElement("h3");s.className="designbase-wc-popover__title";const r=document.createElement("db-button");r.className="designbase-wc-popover__close-button",r.setAttribute("variant","ghost"),r.setAttribute("size","s"),r.setAttribute("icon-only",""),r.setAttribute("start-icon","close"),r.setAttribute("aria-label","팝오버 닫기"),r.addEventListener("db-click",e=>{e.stopPropagation(),this.setOpen(!1)}),i.append(s,r),this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-popover__body",t.append(i,this.bodyEl),e.append(t),"false"!==this.getAttribute("show-arrow")&&(this.arrowEl=document.createElement("div"),this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${this.resolvedPlacement()}`,e.append(this.arrowEl)),this.panel=e,this.panel.querySelector(".designbase-wc-popover__title").textContent=this.getAttribute("title")||"",this.panel.querySelector(".designbase-wc-popover__title").hidden=!this.getAttribute("title"),document.body.append(e),e.addEventListener("mouseenter",()=>{"hover"===this.resolvedTrigger()&&this.clearTimers()}),e.addEventListener("mouseleave",()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()})}showPanel(){if(this.hasAttribute("disabled"))return;this.ensurePanel(),this.updatePanelMetadata();const e=this.collectBodyChildren();e.length>0?this.bodyEl.replaceChildren(...e.map(e=>e.cloneNode(!0))):this.bodyEl.textContent=this.getAttribute("content")||"";const t=this.panel.querySelector(".designbase-wc-popover__title");t.textContent=this.getAttribute("title")||"",t.hidden=!this.getAttribute("title"),requestAnimationFrame(()=>{this.revealPanel(),window.addEventListener("scroll",this.handleReposition,!0),window.addEventListener("resize",this.handleReposition)})}hidePanel(){this.panel?.classList.remove("designbase-wc-popover--visible"),window.removeEventListener("scroll",this.handleReposition,!0),window.removeEventListener("resize",this.handleReposition),this.hasAttribute("always-show")||this.removePanel()}removePanel(){this.panel?.remove(),this.panel=void 0,this.bodyEl=void 0,this.arrowEl=void 0}render(){this.ensureTriggerWrap();const e=this.collectTriggerChildren();this.mountTriggerChildren(e);const t=Boolean(this.getAttribute("trigger-id"));this.triggerWrap&&(e.length>0||!t?this.triggerWrap.parentElement!==this&&this.append(this.triggerWrap):this.triggerWrap.parentElement===this&&this.triggerWrap.remove()),this.hasAttribute("always-show")&&this.showPanel()}}customElements.get("db-popover")||customElements.define("db-popover",DbPopover);export{DbPopover};