@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,440 +1 @@
-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 };
+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};

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

@@ -1,121 +1 @@
-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 };
+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};