@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,440 @@
-const t=["top","bottom","left","right","top-start","top-end","bottom-start","bottom-end","left-start","left-end","right-start","right-end"],e=["s","m","l"],i=["default","primary","success","warning","danger","info"],s=-10;class DbTooltip extends HTMLElement{constructor(){super(...arguments),this.tooltipId=`db-tooltip-${Math.random().toString(36).slice(2,9)}`,this.visible=!1,this.handleShow=()=>{this.disabled||this.alwaysShow||(this.clearTimers(),this.showTimer=setTimeout(()=>this.setVisible(!0),Math.max(0,this.delay)))},this.handleHide=()=>{this.alwaysShow||(this.clearTimers(),this.hideTimer=setTimeout(()=>this.setVisible(!1),Math.max(0,this.hideDelay)))},this.handleKeyDown=t=>{"Escape"===t.key&&(this.clearTimers(),this.setVisible(!1))},this.handleReposition=()=>{(this.visible||this.alwaysShow)&&(this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.repositionRaf=requestAnimationFrame(()=>this.calculatePosition()))}}static get observedAttributes(){return["content","position","size","variant","disabled","always-show","delay","hide-delay","max-width","show-arrow"]}get content(){return this.getAttribute("content")||""}set content(t){this.setAttribute("content",t)}get position(){return this.getAttribute("position")||"top"}set position(t){this.setAttribute("position",t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}get variant(){return this.getAttribute("variant")||"default"}set variant(t){this.setAttribute("variant",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get alwaysShow(){return this.hasAttribute("always-show")}set alwaysShow(t){this.toggleAttribute("always-show",t)}get delay(){return Number(this.getAttribute("delay")??"200")}get hideDelay(){return Number(this.getAttribute("hide-delay")??"80")}get maxWidth(){return Number(this.getAttribute("max-width")??"240")}get showArrow(){return"false"!==this.getAttribute("show-arrow")}connectedCallback(){this.render(),this.childObserver=new MutationObserver(()=>this.render()),this.childObserver.observe(this,{childList:!0}),window.addEventListener("scroll",this.handleReposition,!0),window.addEventListener("resize",this.handleReposition)}disconnectedCallback(){this.childObserver?.disconnect(),this.clearTimers(),this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.enterRaf&&cancelAnimationFrame(this.enterRaf),this.removalTimer&&clearTimeout(this.removalTimer),window.removeEventListener("scroll",this.handleReposition,!0),window.removeEventListener("resize",this.handleReposition),this.tooltip?.remove(),this.tooltip=void 0}attributeChangedCallback(){this.isConnected&&(this.render(),this.alwaysShow?this.setVisible(!0):this.visible||this.removeTooltip())}clearTimers(){this.showTimer&&clearTimeout(this.showTimer),this.hideTimer&&clearTimeout(this.hideTimer),this.showTimer=void 0,this.hideTimer=void 0}groupOf(t){return t.startsWith("top")?"top":t.startsWith("bottom")?"bottom":t.startsWith("left")?"left":"right"}resolvedPosition(){return t.includes(this.position)?this.position:"top"}collectTriggerChildren(){const isInternalNode=t=>t.hasAttribute("data-wc-internal")||t===this.trigger,t=Array.from(this.children).filter(t=>!isInternalNode(t));return t.length>0?t:Array.from(this.trigger?.children||[])}ensureTrigger(){this.trigger||(this.trigger=document.createElement("span"),this.trigger.className="designbase-wc-tooltip__trigger",this.trigger.setAttribute("data-wc-internal",""),this.trigger.tabIndex=0,this.trigger.addEventListener("mouseenter",this.handleShow),this.trigger.addEventListener("mouseleave",this.handleHide),this.trigger.addEventListener("focus",this.handleShow),this.trigger.addEventListener("blur",this.handleHide),this.trigger.addEventListener("keydown",this.handleKeyDown)),this.trigger.parentElement!==this&&this.append(this.trigger)}mountTriggerChildren(t){this.trigger&&t.forEach(t=>{t.parentElement!==this.trigger&&this.trigger.append(t)})}render(){this.ensureTrigger(),this.mountTriggerChildren(this.collectTriggerChildren()),this.alwaysShow&&this.setVisible(!0)}ensureTooltip(){this.tooltip||(this.tooltip=document.createElement("div"),this.tooltip.className="designbase-wc-tooltip",this.tooltip.setAttribute("data-wc-internal",""),this.tooltip.setAttribute("role","tooltip"),this.tooltip.id=this.tooltipId,this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-tooltip__content",this.arrow=document.createElement("div"),this.arrow.className="designbase-wc-tooltip__arrow",this.tooltip.append(this.contentEl,this.arrow),document.body.append(this.tooltip))}syncTooltipClasses(t=this.visible||this.alwaysShow){if(!this.tooltip||!this.arrow)return;const s=this.resolvedPosition(),o=e.includes(this.size)?this.size:"m",r=i.includes(this.variant)?this.variant:"default";this.tooltip.className=["designbase-wc-tooltip",`designbase-wc-tooltip--${o}`,`designbase-wc-tooltip--${r}`,`designbase-wc-tooltip--${s}`,t&&"designbase-wc-tooltip--visible",this.disabled&&"designbase-wc-tooltip--disabled"].filter(Boolean).join(" "),this.arrow.className=`designbase-wc-tooltip__arrow designbase-wc-tooltip__arrow--${s}`,this.arrow.hidden=!this.showArrow,this.tooltip.setAttribute("data-placement-group",this.groupOf(s)),this.tooltip.setAttribute("aria-hidden",String(!t)),this.tooltip.style.maxWidth=`${this.maxWidth}px`,this.tooltip.style.zIndex="9999",this.tooltip.style.pointerEvents="none",this.contentEl&&(this.contentEl.textContent=this.content)}calculatePosition(){if(!this.trigger||!this.tooltip||!this.arrow)return;const t=this.resolvedPosition(),e=this.trigger.getBoundingClientRect(),i=this.tooltip.offsetWidth,o=this.tooltip.offsetHeight;let r=0,a=0,h=0,n=0;switch(t){case"top":r=e.top-o-8,a=e.left+e.width/2-i/2,h=o-2,n=i/2-6;break;case"top-start":r=e.top-o-8,a=e.left,h=o-2,n=8;break;case"top-end":r=e.top-o-8,a=e.right-i,h=o-2,n=i-8-6;break;case"bottom":r=e.bottom+8,a=e.left+e.width/2-i/2,h=s,n=i/2-6;break;case"bottom-start":r=e.bottom+8,a=e.left,h=s,n=8;break;case"bottom-end":r=e.bottom+8,a=e.right-i,h=s,n=i-8-6;break;case"left":r=e.top+e.height/2-o/2,a=e.left-i-8,h=o/2-6,n=i-2;break;case"left-start":r=e.top,a=e.left-i-8,h=8,n=i-2;break;case"left-end":r=e.bottom-o,a=e.left-i-8,h=o-8-6,n=i-2;break;case"right":r=e.top+e.height/2-o/2,a=e.right+8,h=o/2-6,n=s;break;case"right-start":r=e.top,a=e.right+8,h=8,n=s;break;case"right-end":r=e.bottom-o,a=e.right+8,h=o-8-6,n=s}const l=window.innerWidth,d=window.innerHeight;a<8&&(a=8),a+i>l-8&&(a=l-i-8),r<8&&(r=8),r+o>d-8&&(r=d-o-8);const c=this.groupOf(t);if("top"===c||"bottom"===c){const t=e.left+e.width/2-a-6;n=Math.min(i-8-6,Math.max(8,t))}else{const t=e.top+e.height/2-r-6;h=Math.min(o-8-6,Math.max(8,t))}this.tooltip.style.position="fixed",this.tooltip.style.top=`${r}px`,this.tooltip.style.left=`${a}px`,this.arrow.style.position="absolute",this.arrow.style.top=`${h}px`,this.arrow.style.left=`${n}px`}setVisible(t){if(!this.disabled||!t){if(this.visible=t,!t&&!this.alwaysShow)return this.hideTooltip(),void this.trigger?.removeAttribute("aria-describedby");this.removalTimer&&(clearTimeout(this.removalTimer),this.removalTimer=void 0),this.enterRaf&&(cancelAnimationFrame(this.enterRaf),this.enterRaf=void 0),this.ensureTooltip(),this.syncTooltipClasses(!1),this.calculatePosition(),this.trigger?.setAttribute("aria-describedby",this.tooltipId),this.enterRaf=requestAnimationFrame(()=>{this.enterRaf=requestAnimationFrame(()=>{this.enterRaf=void 0,this.syncTooltipClasses(!0),this.calculatePosition()})})}}hideTooltip(){if(this.enterRaf&&(cancelAnimationFrame(this.enterRaf),this.enterRaf=void 0),!this.tooltip)return;const t=this.tooltip;t.classList.remove("designbase-wc-tooltip--visible"),t.setAttribute("aria-hidden","true");const finish=()=>{t.removeEventListener("transitionend",onEnd),this.removalTimer&&(clearTimeout(this.removalTimer),this.removalTimer=void 0),this.visible||this.tooltip!==t||this.removeTooltip()},onEnd=e=>{e.target===t&&"opacity"===e.propertyName&&finish()};t.addEventListener("transitionend",onEnd),this.removalTimer=setTimeout(finish,400)}removeTooltip(){this.removalTimer&&(clearTimeout(this.removalTimer),this.removalTimer=void 0),this.tooltip?.remove(),this.tooltip=void 0,this.contentEl=void 0,this.arrow=void 0}}customElements.get("db-tooltip")||customElements.define("db-tooltip",DbTooltip);export{DbTooltip};
+const POSITIONS = [
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'top-start',
+    'top-end',
+    'bottom-start',
+    'bottom-end',
+    'left-start',
+    'left-end',
+    'right-start',
+    'right-end',
+];
+const SIZES = ['s', 'm', 'l'];
+const VARIANTS = ['default', 'primary', 'success', 'warning', 'danger', 'info'];
+const GAP = 8;
+const ARW = 6;
+const PAD = 8;
+const OUT = -10;
+const INSET = 2;
+class DbTooltip extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.tooltipId = `db-tooltip-${Math.random().toString(36).slice(2, 9)}`;
+        this.visible = false;
+        this.handleShow = () => {
+            if (this.disabled || this.alwaysShow)
+                return;
+            this.clearTimers();
+            this.showTimer = setTimeout(() => this.setVisible(true), Math.max(0, this.delay));
+        };
+        this.handleHide = () => {
+            if (this.alwaysShow)
+                return;
+            this.clearTimers();
+            this.hideTimer = setTimeout(() => this.setVisible(false), Math.max(0, this.hideDelay));
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                this.clearTimers();
+                this.setVisible(false);
+            }
+        };
+        this.handleReposition = () => {
+            if (!this.visible && !this.alwaysShow)
+                return;
+            if (this.repositionRaf)
+                cancelAnimationFrame(this.repositionRaf);
+            this.repositionRaf = requestAnimationFrame(() => this.calculatePosition());
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'content',
+            'position',
+            'size',
+            'variant',
+            'disabled',
+            'always-show',
+            'delay',
+            'hide-delay',
+            'max-width',
+            'show-arrow',
+        ];
+    }
+    get content() {
+        return this.getAttribute('content') || '';
+    }
+    set content(value) {
+        this.setAttribute('content', value);
+    }
+    get position() {
+        return this.getAttribute('position') || 'top';
+    }
+    set position(value) {
+        this.setAttribute('position', value);
+    }
+    get size() {
+        return this.getAttribute('size') || 'm';
+    }
+    set size(value) {
+        this.setAttribute('size', value);
+    }
+    get variant() {
+        return this.getAttribute('variant') || 'default';
+    }
+    set variant(value) {
+        this.setAttribute('variant', value);
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        this.toggleAttribute('disabled', value);
+    }
+    get alwaysShow() {
+        return this.hasAttribute('always-show');
+    }
+    set alwaysShow(value) {
+        this.toggleAttribute('always-show', value);
+    }
+    get delay() {
+        return Number(this.getAttribute('delay') ?? '200');
+    }
+    get hideDelay() {
+        return Number(this.getAttribute('hide-delay') ?? '80');
+    }
+    get maxWidth() {
+        return Number(this.getAttribute('max-width') ?? '240');
+    }
+    get showArrow() {
+        return this.getAttribute('show-arrow') !== 'false';
+    }
+    connectedCallback() {
+        this.render();
+        this.childObserver = new MutationObserver(() => this.render());
+        this.childObserver.observe(this, { childList: true });
+        window.addEventListener('scroll', this.handleReposition, true);
+        window.addEventListener('resize', this.handleReposition);
+    }
+    disconnectedCallback() {
+        this.childObserver?.disconnect();
+        this.clearTimers();
+        if (this.repositionRaf)
+            cancelAnimationFrame(this.repositionRaf);
+        if (this.enterRaf)
+            cancelAnimationFrame(this.enterRaf);
+        if (this.removalTimer)
+            clearTimeout(this.removalTimer);
+        window.removeEventListener('scroll', this.handleReposition, true);
+        window.removeEventListener('resize', this.handleReposition);
+        this.tooltip?.remove();
+        this.tooltip = undefined;
+    }
+    attributeChangedCallback() {
+        if (!this.isConnected)
+            return;
+        this.render();
+        if (this.alwaysShow) {
+            this.setVisible(true);
+        }
+        else if (!this.visible) {
+            this.removeTooltip();
+        }
+    }
+    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';
+    }
+    resolvedPosition() {
+        return POSITIONS.includes(this.position) ? this.position : 'top';
+    }
+    collectTriggerChildren() {
+        const isInternalNode = (child) => child.hasAttribute('data-wc-internal') || child === this.trigger;
+        const fromHost = Array.from(this.children).filter((child) => !isInternalNode(child));
+        if (fromHost.length > 0)
+            return fromHost;
+        return Array.from(this.trigger?.children || []);
+    }
+    ensureTrigger() {
+        if (!this.trigger) {
+            this.trigger = document.createElement('span');
+            this.trigger.className = 'designbase-wc-tooltip__trigger';
+            this.trigger.setAttribute('data-wc-internal', '');
+            this.trigger.tabIndex = 0;
+            this.trigger.addEventListener('mouseenter', this.handleShow);
+            this.trigger.addEventListener('mouseleave', this.handleHide);
+            this.trigger.addEventListener('focus', this.handleShow);
+            this.trigger.addEventListener('blur', this.handleHide);
+            this.trigger.addEventListener('keydown', this.handleKeyDown);
+        }
+        if (this.trigger.parentElement !== this) {
+            this.append(this.trigger);
+        }
+    }
+    mountTriggerChildren(children) {
+        if (!this.trigger)
+            return;
+        children.forEach((child) => {
+            if (child.parentElement !== this.trigger) {
+                this.trigger.append(child);
+            }
+        });
+    }
+    render() {
+        this.ensureTrigger();
+        this.mountTriggerChildren(this.collectTriggerChildren());
+        if (this.alwaysShow) {
+            this.setVisible(true);
+        }
+    }
+    ensureTooltip() {
+        if (this.tooltip)
+            return;
+        this.tooltip = document.createElement('div');
+        this.tooltip.className = 'designbase-wc-tooltip';
+        this.tooltip.setAttribute('data-wc-internal', '');
+        this.tooltip.setAttribute('role', 'tooltip');
+        this.tooltip.id = this.tooltipId;
+        this.contentEl = document.createElement('div');
+        this.contentEl.className = 'designbase-wc-tooltip__content';
+        this.arrow = document.createElement('div');
+        this.arrow.className = 'designbase-wc-tooltip__arrow';
+        this.tooltip.append(this.contentEl, this.arrow);
+        document.body.append(this.tooltip);
+    }
+    syncTooltipClasses(showVisible = this.visible || this.alwaysShow) {
+        if (!this.tooltip || !this.arrow)
+            return;
+        const position = this.resolvedPosition();
+        const size = SIZES.includes(this.size) ? this.size : 'm';
+        const variant = VARIANTS.includes(this.variant) ? this.variant : 'default';
+        this.tooltip.className = [
+            'designbase-wc-tooltip',
+            `designbase-wc-tooltip--${size}`,
+            `designbase-wc-tooltip--${variant}`,
+            `designbase-wc-tooltip--${position}`,
+            showVisible && 'designbase-wc-tooltip--visible',
+            this.disabled && 'designbase-wc-tooltip--disabled',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.arrow.className = `designbase-wc-tooltip__arrow designbase-wc-tooltip__arrow--${position}`;
+        this.arrow.hidden = !this.showArrow;
+        this.tooltip.setAttribute('data-placement-group', this.groupOf(position));
+        this.tooltip.setAttribute('aria-hidden', String(!showVisible));
+        this.tooltip.style.maxWidth = `${this.maxWidth}px`;
+        this.tooltip.style.zIndex = '9999';
+        this.tooltip.style.pointerEvents = 'none';
+        if (this.contentEl) {
+            this.contentEl.textContent = this.content;
+        }
+    }
+    calculatePosition() {
+        if (!this.trigger || !this.tooltip || !this.arrow)
+            return;
+        const position = this.resolvedPosition();
+        const tRect = this.trigger.getBoundingClientRect();
+        // offsetWidth/Height 는 transform(스케일/이동) 영향을 받지 않으므로
+        // 등장 트랜지션 중에도 정확한 크기로 위치를 계산할 수 있다.
+        const pRect = { width: this.tooltip.offsetWidth, height: this.tooltip.offsetHeight };
+        let top = 0;
+        let left = 0;
+        let aTop = 0;
+        let aLeft = 0;
+        switch (position) {
+            case 'top':
+                top = tRect.top - pRect.height - GAP;
+                left = tRect.left + tRect.width / 2 - pRect.width / 2;
+                aTop = pRect.height - INSET;
+                aLeft = pRect.width / 2 - ARW;
+                break;
+            case 'top-start':
+                top = tRect.top - pRect.height - GAP;
+                left = tRect.left;
+                aTop = pRect.height - INSET;
+                aLeft = PAD;
+                break;
+            case 'top-end':
+                top = tRect.top - pRect.height - GAP;
+                left = tRect.right - pRect.width;
+                aTop = pRect.height - INSET;
+                aLeft = pRect.width - PAD - ARW;
+                break;
+            case 'bottom':
+                top = tRect.bottom + GAP;
+                left = tRect.left + tRect.width / 2 - pRect.width / 2;
+                aTop = OUT;
+                aLeft = pRect.width / 2 - ARW;
+                break;
+            case 'bottom-start':
+                top = tRect.bottom + GAP;
+                left = tRect.left;
+                aTop = OUT;
+                aLeft = PAD;
+                break;
+            case 'bottom-end':
+                top = tRect.bottom + GAP;
+                left = tRect.right - pRect.width;
+                aTop = OUT;
+                aLeft = pRect.width - PAD - ARW;
+                break;
+            case 'left':
+                top = tRect.top + tRect.height / 2 - pRect.height / 2;
+                left = tRect.left - pRect.width - GAP;
+                aTop = pRect.height / 2 - ARW;
+                aLeft = pRect.width - INSET;
+                break;
+            case 'left-start':
+                top = tRect.top;
+                left = tRect.left - pRect.width - GAP;
+                aTop = PAD;
+                aLeft = pRect.width - INSET;
+                break;
+            case 'left-end':
+                top = tRect.bottom - pRect.height;
+                left = tRect.left - pRect.width - GAP;
+                aTop = pRect.height - PAD - ARW;
+                aLeft = pRect.width - INSET;
+                break;
+            case 'right':
+                top = tRect.top + tRect.height / 2 - pRect.height / 2;
+                left = tRect.right + GAP;
+                aTop = pRect.height / 2 - ARW;
+                aLeft = OUT;
+                break;
+            case 'right-start':
+                top = tRect.top;
+                left = tRect.right + GAP;
+                aTop = PAD;
+                aLeft = OUT;
+                break;
+            case 'right-end':
+                top = tRect.bottom - pRect.height;
+                left = tRect.right + GAP;
+                aTop = pRect.height - PAD - ARW;
+                aLeft = OUT;
+                break;
+        }
+        const EDGE = 8;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        if (left < EDGE)
+            left = EDGE;
+        if (left + pRect.width > vw - EDGE)
+            left = vw - pRect.width - EDGE;
+        if (top < EDGE)
+            top = EDGE;
+        if (top + pRect.height > vh - EDGE)
+            top = vh - pRect.height - EDGE;
+        const group = this.groupOf(position);
+        if (group === 'top' || group === 'bottom') {
+            const triggerCenterX = tRect.left + tRect.width / 2;
+            const localX = triggerCenterX - left - ARW;
+            aLeft = Math.min(pRect.width - PAD - ARW, Math.max(PAD, localX));
+        }
+        else {
+            const triggerCenterY = tRect.top + tRect.height / 2;
+            const localY = triggerCenterY - top - ARW;
+            aTop = Math.min(pRect.height - PAD - ARW, Math.max(PAD, localY));
+        }
+        this.tooltip.style.position = 'fixed';
+        this.tooltip.style.top = `${top}px`;
+        this.tooltip.style.left = `${left}px`;
+        this.arrow.style.position = 'absolute';
+        this.arrow.style.top = `${aTop}px`;
+        this.arrow.style.left = `${aLeft}px`;
+    }
+    setVisible(next) {
+        if (this.disabled && next)
+            return;
+        this.visible = next;
+        if (!next && !this.alwaysShow) {
+            this.hideTooltip();
+            this.trigger?.removeAttribute('aria-describedby');
+            return;
+        }
+        // 퇴장 애니메이션 중 다시 나타나는 경우 예약된 제거를 취소
+        if (this.removalTimer) {
+            clearTimeout(this.removalTimer);
+            this.removalTimer = undefined;
+        }
+        if (this.enterRaf) {
+            cancelAnimationFrame(this.enterRaf);
+            this.enterRaf = undefined;
+        }
+        this.ensureTooltip();
+        // 1) 먼저 "숨김" 상태로 마운트하고 위치를 잡는다.
+        this.syncTooltipClasses(false);
+        this.calculatePosition();
+        this.trigger?.setAttribute('aria-describedby', this.tooltipId);
+        // 2) 다음 프레임에 visible 로 전환해야 등장 트랜지션이 실제로 재생된다.
+        this.enterRaf = requestAnimationFrame(() => {
+            this.enterRaf = requestAnimationFrame(() => {
+                this.enterRaf = undefined;
+                this.syncTooltipClasses(true);
+                this.calculatePosition();
+            });
+        });
+    }
+    hideTooltip() {
+        if (this.enterRaf) {
+            cancelAnimationFrame(this.enterRaf);
+            this.enterRaf = undefined;
+        }
+        if (!this.tooltip)
+            return;
+        const el = this.tooltip;
+        el.classList.remove('designbase-wc-tooltip--visible');
+        el.setAttribute('aria-hidden', 'true');
+        const finish = () => {
+            el.removeEventListener('transitionend', onEnd);
+            if (this.removalTimer) {
+                clearTimeout(this.removalTimer);
+                this.removalTimer = undefined;
+            }
+            // 퇴장이 끝나기 전에 다시 보이게 되었다면 제거하지 않는다.
+            if (!this.visible && this.tooltip === el) {
+                this.removeTooltip();
+            }
+        };
+        const onEnd = (event) => {
+            if (event.target !== el || event.propertyName !== 'opacity')
+                return;
+            finish();
+        };
+        el.addEventListener('transitionend', onEnd);
+        // transitionend 가 발생하지 않는 경우를 대비한 안전장치
+        this.removalTimer = setTimeout(finish, 400);
+    }
+    removeTooltip() {
+        if (this.removalTimer) {
+            clearTimeout(this.removalTimer);
+            this.removalTimer = undefined;
+        }
+        this.tooltip?.remove();
+        this.tooltip = undefined;
+        this.contentEl = undefined;
+        this.arrow = undefined;
+    }
+}
+if (!customElements.get('db-tooltip')) {
+    customElements.define('db-tooltip', DbTooltip);
+}
+
+export { DbTooltip };

package/dist/esm/components/db-top-banner.js

@@ -1 +1,121 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["primary","white","dark"];class DbTopBanner extends HTMLElement{static get observedAttributes(){return["badge-text","content","image","link-text","variant","fixed","dismissed"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}isDarkBg(e){return"primary"===e||"dark"===e}createLinkButton(t,n){const s=this.isDarkBg(t),a=document.createElement("db-button");a.setAttribute("variant",s?"secondary":"ghost"),a.setAttribute("size","s"),a.classList.add("designbase-wc-top-banner__link");const i=document.createElement("span");i.textContent=n;const r=document.createElement("span");return r.className="designbase-wc-button__end-icon",r.append(e("chevron-right",16)),a.append(i,r),a.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-link",{bubbles:!0,composed:!0}))}),a}createCloseButton(){const t=document.createElement("db-button");return t.setAttribute("variant","ghost"),t.setAttribute("size","m"),t.setAttribute("icon-only",""),t.setAttribute("aria-label","닫기"),t.classList.add("designbase-wc-top-banner__close"),t.append(e("close",20)),t.addEventListener("db-click",()=>{this.setAttribute("dismissed",""),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})),this.render()}),t}createBadge(e,t){const n=document.createElement("db-badge");return n.setAttribute("size","s"),n.setAttribute("variant",t?"secondary":"primary"),n.setAttribute("badge-style","text"),n.textContent=e,n.classList.add("designbase-wc-top-banner__badge"),n}render(){if(this.hasAttribute("dismissed"))return this.replaceChildren(),this.className="designbase-wc-top-banner designbase-wc-top-banner--dismissed",void(this.style.display="none");this.style.display="";const e=this.getAttribute("badge-text")||"",n=this.getAttribute("content")||"",s=this.getAttribute("image")||"",a=this.getAttribute("link-text")||"",i=this.getAttribute("variant")||"primary",r=t.includes(i)?i:"primary",d=this.hasAttribute("fixed"),c=this.isDarkBg(r);if(this.className=["designbase-wc-top-banner",`designbase-wc-top-banner--${r}`,d&&"designbase-wc-top-banner--fixed",s&&"designbase-wc-top-banner--has-image"].filter(Boolean).join(" "),this.setAttribute("role","alert"),s?this.style.setProperty("--db-top-banner-bg-image",`url("${s}")`):this.style.removeProperty("--db-top-banner-bg-image"),this.replaceChildren(),s){const e=document.createElement("div");e.className="designbase-wc-top-banner__background",e.setAttribute("aria-hidden","true");const t=document.createElement("div");t.className="designbase-wc-top-banner__overlay",t.setAttribute("aria-hidden","true"),this.append(e,t)}const o=document.createElement("div");o.className="designbase-wc-top-banner__container";const b=document.createElement("div");b.className="designbase-wc-top-banner__content",e&&b.append(this.createBadge(e,c));const l=document.createElement("span");l.className="designbase-wc-top-banner__text",l.textContent=n,b.append(l),a&&b.append(this.createLinkButton(r,a)),o.append(b),o.append(this.createCloseButton()),this.append(o)}}customElements.get("db-top-banner")||customElements.define("db-top-banner",DbTopBanner);export{DbTopBanner};
+import { createDbIcon } from './db-icons.js';
+
+const VARIANTS = ['primary', 'white', 'dark'];
+class DbTopBanner extends HTMLElement {
+    static get observedAttributes() {
+        return ['badge-text', 'content', 'image', 'link-text', 'variant', 'fixed', 'dismissed'];
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+    isDarkBg(variant) {
+        return variant === 'primary' || variant === 'dark';
+    }
+    createLinkButton(variant, linkText) {
+        const isDarkBg = this.isDarkBg(variant);
+        const button = document.createElement('db-button');
+        button.setAttribute('variant', isDarkBg ? 'secondary' : 'ghost');
+        button.setAttribute('size', 's');
+        button.classList.add('designbase-wc-top-banner__link');
+        const label = document.createElement('span');
+        label.textContent = linkText;
+        const endIcon = document.createElement('span');
+        endIcon.className = 'designbase-wc-button__end-icon';
+        endIcon.append(createDbIcon('chevron-right', 16));
+        button.append(label, endIcon);
+        button.addEventListener('db-click', () => {
+            this.dispatchEvent(new CustomEvent('db-link', { bubbles: true, composed: true }));
+        });
+        return button;
+    }
+    createCloseButton() {
+        const button = document.createElement('db-button');
+        button.setAttribute('variant', 'ghost');
+        button.setAttribute('size', 'm');
+        button.setAttribute('icon-only', '');
+        button.setAttribute('aria-label', '닫기');
+        button.classList.add('designbase-wc-top-banner__close');
+        button.append(createDbIcon('close', 20));
+        button.addEventListener('db-click', () => {
+            this.setAttribute('dismissed', '');
+            this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
+            this.render();
+        });
+        return button;
+    }
+    createBadge(badgeText, isDarkBg) {
+        const badge = document.createElement('db-badge');
+        badge.setAttribute('size', 's');
+        badge.setAttribute('variant', isDarkBg ? 'secondary' : 'primary');
+        badge.setAttribute('badge-style', 'text');
+        badge.textContent = badgeText;
+        badge.classList.add('designbase-wc-top-banner__badge');
+        return badge;
+    }
+    render() {
+        if (this.hasAttribute('dismissed')) {
+            this.replaceChildren();
+            this.className = 'designbase-wc-top-banner designbase-wc-top-banner--dismissed';
+            this.style.display = 'none';
+            return;
+        }
+        this.style.display = '';
+        const badgeText = this.getAttribute('badge-text') || '';
+        const content = this.getAttribute('content') || '';
+        const image = this.getAttribute('image') || '';
+        const linkText = this.getAttribute('link-text') || '';
+        const rawVariant = this.getAttribute('variant') || 'primary';
+        const variant = VARIANTS.includes(rawVariant) ? rawVariant : 'primary';
+        const fixed = this.hasAttribute('fixed');
+        const isDarkBg = this.isDarkBg(variant);
+        this.className = [
+            'designbase-wc-top-banner',
+            `designbase-wc-top-banner--${variant}`,
+            fixed && 'designbase-wc-top-banner--fixed',
+            image && 'designbase-wc-top-banner--has-image',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.setAttribute('role', 'alert');
+        if (image) {
+            this.style.setProperty('--db-top-banner-bg-image', `url("${image}")`);
+        }
+        else {
+            this.style.removeProperty('--db-top-banner-bg-image');
+        }
+        this.replaceChildren();
+        if (image) {
+            const background = document.createElement('div');
+            background.className = 'designbase-wc-top-banner__background';
+            background.setAttribute('aria-hidden', 'true');
+            const overlay = document.createElement('div');
+            overlay.className = 'designbase-wc-top-banner__overlay';
+            overlay.setAttribute('aria-hidden', 'true');
+            this.append(background, overlay);
+        }
+        const container = document.createElement('div');
+        container.className = 'designbase-wc-top-banner__container';
+        const contentWrap = document.createElement('div');
+        contentWrap.className = 'designbase-wc-top-banner__content';
+        if (badgeText) {
+            contentWrap.append(this.createBadge(badgeText, isDarkBg));
+        }
+        const text = document.createElement('span');
+        text.className = 'designbase-wc-top-banner__text';
+        text.textContent = content;
+        contentWrap.append(text);
+        if (linkText) {
+            contentWrap.append(this.createLinkButton(variant, linkText));
+        }
+        container.append(contentWrap);
+        container.append(this.createCloseButton());
+        this.append(container);
+    }
+}
+if (!customElements.get('db-top-banner'))
+    customElements.define('db-top-banner', DbTopBanner);
+
+export { DbTopBanner };