@designbasekorea/ui-wc 0.8.8 → 0.8.11

package/dist/esm/components/db-animation-text.js

@@ -1 +1 @@
-const t="designbase-wc-animation-text";class DbAnimationText extends HTMLElement{constructor(){super(...arguments),this.timers=[],this.displayText="",this.isVisible=!1,this.isAnimating=!1,this.wordEls=[],this.rotateToken=0}static get observedAttributes(){return["text","texts","interval","trigger","type","speed","repeat","delay","direction","size","color","custom-color","weight","align","gradient-colors","wave-colors","glow-color","clickable","disabled"]}connectedCallback(){this.style.display="inline-block",this.ensureStructure(),this.syncFromAttributes(),this.setupTrigger()}disconnectedCallback(){this.clearTimers(),this.observer?.disconnect(),this.teardownScrollFill(),this.rotateObserver?.disconnect()}attributeChangedCallback(){this.isConnected&&(this.syncFromAttributes(),this.setupTrigger())}getText(){return this.getAttribute("text")||this.textContent?.trim()||""}getRotateTexts(){const t=this.getAttribute("texts");if(t){const e=t.split(",").map(t=>t.trim()).filter(Boolean);if(e.length)return e}const e=this.getText();return e?[e]:[]}getLongestText(){return this.getRotateTexts().reduce((t,e)=>e.length>t.length?e:t,"")}getType(){const t=this.getAttribute("type")||"fade";return["typing","fade","slide","bounce","shake","glow","gradient","wave","flip","scale","decode","roll","reveal","scroll-fill","text-rotate"].includes(t)?t:"fade"}getTrigger(){const t=this.getAttribute("trigger")||"mount";return["mount","hover","click","in-view"].includes(t)?t:"mount"}ensureStructure(){this.ghostEl||(this.ghostEl=document.createElement("span"),this.ghostEl.setAttribute("aria-hidden","true"),this.ghostEl.style.visibility="hidden",this.ghostEl.style.pointerEvents="none",this.ghostEl.style.userSelect="none",this.layerEl=document.createElement("span"),this.layerEl.style.position="absolute",this.layerEl.style.top="0",this.layerEl.style.left="0",this.append(this.ghostEl,this.layerEl),this.addEventListener("mouseenter",()=>{"hover"!==this.getTrigger()||this.hasAttribute("disabled")||"roll"!==this.getType()&&(this.isVisible=!0,this.startAnimation(),this.syncClasses())}),this.addEventListener("mouseleave",()=>{if("hover"!==this.getTrigger())return;if("roll"===this.getType())return;this.isVisible=!1,this.isAnimating=!1,this.clearTimers();const t=this.getType();"typing"!==t&&"decode"!==t||(this.displayText=this.getText()),this.renderLayer(),this.syncClasses()}),this.addEventListener("click",()=>{if(!this.hasAttribute("disabled")){if("click"===this.getTrigger()){if(this.isVisible=!this.isVisible,this.isVisible)this.startAnimation();else{this.isAnimating=!1,this.clearTimers();const t=this.getType();"typing"!==t&&"decode"!==t||(this.displayText=this.getText()),this.renderLayer()}this.syncClasses()}this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))}}))}clearTimers(){this.timers.forEach(t=>window.clearInterval(t)),this.timers.forEach(t=>window.clearTimeout(t)),this.timers=[]}syncFromAttributes(){const e=this.getText(),i=this.getType(),s=this.getTrigger(),r=Number(this.getAttribute("speed")||1e3),n=Number(this.getAttribute("repeat")||1),l=this.getAttribute("custom-color"),o=(this.getAttribute("gradient-colors")||"#667eea,#764ba2").split(","),a=(this.getAttribute("wave-colors")||"#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57").split(","),h=this.getAttribute("glow-color")||"#667eea";this.className=[t,"typing"!==i&&`${t}--${i}`,`${t}--${this.getAttribute("size")||"m"}`,`${t}--${this.getAttribute("color")||"primary"}`,`${t}--${this.getAttribute("weight")||"normal"}`,`${t}--${this.getAttribute("align")||"left"}`,`${t}--${this.getAttribute("direction")||"left"}`,this.isVisible&&`${t}--visible`,this.isAnimating&&`${t}--animating`,(this.hasAttribute("clickable")||"click"===s)&&`${t}--clickable`,this.hasAttribute("disabled")&&`${t}--disabled`].filter(Boolean).join(" "),this.style.setProperty("--db-animation-speed",`${Number.isFinite(r)?r:1e3}ms`),this.style.setProperty("--db-animation-iteration-count",0===n?"infinite":String(n)),l&&this.style.setProperty("--db-text-custom",l),this.style.setProperty("--db-wave-colors",a.join(", ")),this.style.setProperty("--db-glow-color",h),this.style.removeProperty("background"),this.style.removeProperty("background-size"),this.style.removeProperty("-webkit-background-clip"),this.style.removeProperty("-webkit-text-fill-color"),this.style.removeProperty("background-clip"),this.layerEl&&("gradient"===i&&o.length>=2?this.layerEl.style.backgroundImage=`linear-gradient(45deg, ${o.join(", ")})`:this.layerEl.style.removeProperty("background-image")),"typing"!==i&&"decode"!==i||"mount"!==s||this.isAnimating?this.isAnimating||(this.displayText=e):this.displayText="";const c="typing"===i||"decode"===i||"roll"===i||"text-rotate"===i,d="roll"===i||"text-rotate"===i?"nowrap":c?"pre-wrap":"";this.ghostEl&&(c?(this.ghostEl.textContent="text-rotate"===i?this.getLongestText():e,this.ghostEl.style.display="inline-block",this.ghostEl.style.whiteSpace=d,this.ghostEl.style.paddingRight="typing"===i?"0.25em":""):(this.ghostEl.textContent="",this.ghostEl.style.display="none")),this.layerEl&&(this.layerEl.className=[`${t}__layer`,"typing"===i&&`${t}--typing`,this.isAnimating&&"typing"===i&&`${t}--animating`].filter(Boolean).join(" "),c?(this.layerEl.style.position="absolute",this.layerEl.style.top="0",this.layerEl.style.left="0",this.layerEl.style.width="100%",this.layerEl.style.height="100%",this.layerEl.style.whiteSpace=d):(this.layerEl.style.position="static",this.layerEl.style.removeProperty("top"),this.layerEl.style.removeProperty("left"),this.layerEl.style.width="auto",this.layerEl.style.height="auto",this.layerEl.style.whiteSpace="")),this.renderLayer()}syncClasses(){this.classList.toggle(`${t}--visible`,this.isVisible),this.classList.toggle(`${t}--animating`,this.isAnimating)}setupTrigger(){this.clearTimers(),this.observer?.disconnect(),this.teardownScrollFill(),this.rotateObserver?.disconnect(),this.rotateObserver=void 0,this.rotateToken++;const t=this.getTrigger(),e=Number(this.getAttribute("delay")||0);if("scroll-fill"!==this.getType())if("text-rotate"!==this.getType()){if("mount"===t){const t=window.setTimeout(()=>{this.isVisible=!0,this.syncClasses(),this.startAnimation()},e);return void this.timers.push(t)}"in-view"===t&&(this.observer=new IntersectionObserver(t=>{t[0]?.isIntersecting&&(window.setTimeout(()=>{this.isVisible=!0,this.syncClasses(),this.startAnimation()},e),this.observer?.disconnect())}),this.observer.observe(this))}else this.setupTextRotate();else this.setupScrollFill()}setupTextRotate(){if(this.getRotateTexts().length<=1)return;const e=++this.rotateToken,start=()=>{if(e!==this.rotateToken||!this.isConnected||"text-rotate"!==this.getType())return;const i=this.layerEl?.querySelector(`.${t}__rotate-track`);if(!i||!i.firstElementChild)return;const s=Array.from(i.children),r=Number(this.getAttribute("speed")||500),n=Math.max(r+200,Number(this.getAttribute("interval")||2e3));let l=0;const apply=t=>{const e=s[0].getBoundingClientRect().height;if(!e)return;const n="cubic-bezier(0.22, 1, 0.36, 1)";var o;i.style.transition=t?`transform ${r}ms ${n}`:"none",i.style.transform=`translateY(-${l*e}px)`,this.style.transition=t?`width ${r}ms ${n}`:"none",this.style.width=`${o=l,s[o].getBoundingClientRect().width}px`};apply(!1);const o=window.setInterval(()=>{if(l+=1,apply(!0),l===s.length-1){const t=window.setTimeout(()=>{l=0,apply(!1)},r);this.timers.push(t)}},n);this.timers.push(o),this.rotateObserver?.disconnect();let a=!0;const h=new ResizeObserver(()=>{a?a=!1:apply(!1)});h.observe(s[0]),this.rotateObserver=h};"undefined"!=typeof document&&document.fonts?document.fonts.ready.then(()=>window.requestAnimationFrame(start)):window.requestAnimationFrame(start)}setupScrollFill(){this.scrollHandler=()=>{null==this.rafId&&(this.rafId=window.requestAnimationFrame(()=>{this.rafId=void 0,this.updateScrollFill()}))},window.addEventListener("scroll",this.scrollHandler,{passive:!0}),window.addEventListener("resize",this.scrollHandler,{passive:!0}),this.updateScrollFill()}teardownScrollFill(){this.scrollHandler&&(window.removeEventListener("scroll",this.scrollHandler),window.removeEventListener("resize",this.scrollHandler),this.scrollHandler=void 0),null!=this.rafId&&(window.cancelAnimationFrame(this.rafId),this.rafId=void 0)}updateScrollFill(){if("scroll-fill"!==this.getType()||0===this.wordEls.length)return;const clamp=t=>Math.max(0,Math.min(1,t)),t=this.getBoundingClientRect(),e=window.innerHeight||document.documentElement.clientHeight,i=.85*e,s=.35*e,r=clamp((i-t.top)/(i-s||1)),n=this.wordEls.length;this.wordEls.forEach((t,e)=>{const i=clamp((r*(n+4)-e)/4);t.style.opacity=String(.18+(1-.18)*i)})}startAnimation(){const t=this.getType(),e=this.getText();if(this.isAnimating=!0,this.syncClasses(),this.syncFromAttributes(),"typing"===t)return void this.startTyping(0);if("decode"===t)return void this.startDecoding(0);if("reveal"===t||"scroll-fill"===t||"roll"===t)return this.displayText=e,"roll"!==t&&this.renderLayer(),this.isAnimating=!1,void this.syncClasses();this.displayText=e,this.renderLayer();const i=Number(this.getAttribute("speed")||1e3),s=window.setTimeout(()=>{this.isAnimating=!1,this.syncClasses(),this.syncFromAttributes()},i);this.timers.push(s)}startTyping(t){const e=this.getText(),i=Number(this.getAttribute("speed")||1e3),s=Number(this.getAttribute("repeat")||1);this.displayText="",this.renderLayer();let r=0;const n=window.setInterval(()=>{if(r>=e.length)if(window.clearInterval(n),0===s||t<s-1){const e=window.setTimeout(()=>this.startTyping(t+1),500);this.timers.push(e)}else this.isAnimating=!1,this.syncClasses();else this.displayText=e.slice(0,r+1),this.renderLayer(),r+=1},Math.max(16,i/Math.max(e.length,1)));this.timers.push(n)}startDecoding(t){const e=this.getText(),i=Number(this.getAttribute("repeat")||1),s="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+";let r=0;const n=window.setInterval(()=>{if(this.displayText=e.split("").map((t,i)=>i<r?e[i]:s[Math.floor(74*Math.random())]||t).join(""),this.renderLayer(),r>=e.length)if(window.clearInterval(n),this.displayText=e,this.renderLayer(),0===i||t<i-1){const e=window.setTimeout(()=>this.startDecoding(t+1),500);this.timers.push(e)}else this.isAnimating=!1,this.syncClasses();r+=1/3},30);this.timers.push(n)}renderLayer(){if(!this.layerEl)return;const e=this.getType(),i=this.getText(),s=this.isVisible||this.isAnimating;if("reveal"===e||"scroll-fill"===e){this.wordEls=[];const s=document.createDocumentFragment(),r=i.split(/(\s+)/);let n=0;for(const i of r){if(""===i)continue;if(/^\s+$/.test(i)){s.appendChild(document.createTextNode(i));continue}const r=document.createElement("span");r.className=`${t}__word`,r.textContent=i,"reveal"===e&&(r.style.animationDelay=.06*n+"s"),this.wordEls.push(r),s.appendChild(r),n+=1}return this.layerEl.replaceChildren(s),void("scroll-fill"===e&&this.updateScrollFill())}if("text-rotate"===e){const e=this.getRotateTexts(),s=e.length?e:[i],r=document.createElement("span");r.className=`${t}__rotate-track`;const build=e=>{const i=document.createElement("span");return i.className=`${t}__rotate-item`,i.textContent=e,i};return s.forEach(t=>r.appendChild(build(t))),s.length>1&&r.appendChild(build(s[0])),void this.layerEl.replaceChildren(r)}if("roll"===e){const e=document.createElement("span");e.className=`${t}__roll-track`;const s=document.createElement("span");s.className=`${t}__roll-item`,s.textContent=i;const r=s.cloneNode(!0);return e.append(s,r),void this.layerEl.replaceChildren(e)}if("typing"!==e)"wave"!==e&&"shake"!==e||!s?this.layerEl.textContent=this.displayText||(s?i:""):this.layerEl.replaceChildren(...i.split("").map((t,e)=>{const i=document.createElement("span");return i.style.animationDelay=.05*e+"s",i.style.display="inline-block",i.textContent=" "===t?" ":t,i}));else if(this.layerEl.textContent=this.displayText,this.isAnimating){const e=document.createElement("span");e.className=`${t}__caret`,e.setAttribute("aria-hidden","true"),this.layerEl.appendChild(e)}}}customElements.get("db-animation-text")||customElements.define("db-animation-text",DbAnimationText);export{DbAnimationText};
+import{coerceToContract as t}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{ANIMATION_TEXT_SIZES as e,ANIMATION_TEXT_ALIGNS as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const s="designbase-wc-animation-text";class DbAnimationText extends HTMLElement{constructor(){super(...arguments),this.timers=[],this.displayText="",this.isVisible=!1,this.isAnimating=!1,this.wordEls=[],this.rotateToken=0}static get observedAttributes(){return["text","texts","interval","trigger","type","speed","repeat","delay","direction","size","color","custom-color","weight","align","gradient-colors","wave-colors","glow-color","clickable","disabled"]}connectedCallback(){this.style.display="inline-block",this.ensureStructure(),this.syncFromAttributes(),this.setupTrigger()}disconnectedCallback(){this.clearTimers(),this.observer?.disconnect(),this.teardownScrollFill(),this.rotateObserver?.disconnect()}attributeChangedCallback(){this.isConnected&&(this.syncFromAttributes(),this.setupTrigger())}getText(){return this.getAttribute("text")||this.textContent?.trim()||""}getRotateTexts(){const t=this.getAttribute("texts");if(t){const e=t.split(",").map(t=>t.trim()).filter(Boolean);if(e.length)return e}const e=this.getText();return e?[e]:[]}getLongestText(){return this.getRotateTexts().reduce((t,e)=>e.length>t.length?e:t,"")}getType(){const t=this.getAttribute("type")||"fade";return["typing","fade","slide","bounce","shake","glow","gradient","wave","flip","scale","decode","roll","reveal","scroll-fill","text-rotate"].includes(t)?t:"fade"}getTrigger(){const t=this.getAttribute("trigger")||"mount";return["mount","hover","click","in-view"].includes(t)?t:"mount"}ensureStructure(){this.ghostEl||(this.ghostEl=document.createElement("span"),this.ghostEl.setAttribute("aria-hidden","true"),this.ghostEl.style.visibility="hidden",this.ghostEl.style.pointerEvents="none",this.ghostEl.style.userSelect="none",this.layerEl=document.createElement("span"),this.layerEl.style.position="absolute",this.layerEl.style.top="0",this.layerEl.style.left="0",this.append(this.ghostEl,this.layerEl),this.addEventListener("mouseenter",()=>{"hover"!==this.getTrigger()||this.hasAttribute("disabled")||"roll"!==this.getType()&&(this.isVisible=!0,this.startAnimation(),this.syncClasses())}),this.addEventListener("mouseleave",()=>{if("hover"!==this.getTrigger())return;if("roll"===this.getType())return;this.isVisible=!1,this.isAnimating=!1,this.clearTimers();const t=this.getType();"typing"!==t&&"decode"!==t||(this.displayText=this.getText()),this.renderLayer(),this.syncClasses()}),this.addEventListener("click",()=>{if(!this.hasAttribute("disabled")){if("click"===this.getTrigger()){if(this.isVisible=!this.isVisible,this.isVisible)this.startAnimation();else{this.isAnimating=!1,this.clearTimers();const t=this.getType();"typing"!==t&&"decode"!==t||(this.displayText=this.getText()),this.renderLayer()}this.syncClasses()}this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))}}))}clearTimers(){this.timers.forEach(t=>window.clearInterval(t)),this.timers.forEach(t=>window.clearTimeout(t)),this.timers=[]}syncFromAttributes(){const r=this.getText(),n=this.getType(),l=this.getTrigger(),o=Number(this.getAttribute("speed")||1e3),a=Number(this.getAttribute("repeat")||1),h=this.getAttribute("custom-color"),c=(this.getAttribute("gradient-colors")||"#667eea,#764ba2").split(","),d=(this.getAttribute("wave-colors")||"#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57").split(","),g=this.getAttribute("glow-color")||"#667eea",m=t(this.getAttribute("size"),e,"m"),u=t(this.getAttribute("align"),i,"left");this.className=[s,"typing"!==n&&`${s}--${n}`,`${s}--${m}`,`${s}--${this.getAttribute("color")||"primary"}`,`${s}--${this.getAttribute("weight")||"normal"}`,`${s}--${u}`,`${s}--${this.getAttribute("direction")||"left"}`,this.isVisible&&`${s}--visible`,this.isAnimating&&`${s}--animating`,(this.hasAttribute("clickable")||"click"===l)&&`${s}--clickable`,this.hasAttribute("disabled")&&`${s}--disabled`].filter(Boolean).join(" "),this.style.setProperty("--db-animation-speed",`${Number.isFinite(o)?o:1e3}ms`),this.style.setProperty("--db-animation-iteration-count",0===a?"infinite":String(a)),h&&this.style.setProperty("--db-text-custom",h),this.style.setProperty("--db-wave-colors",d.join(", ")),this.style.setProperty("--db-glow-color",g),this.style.removeProperty("background"),this.style.removeProperty("background-size"),this.style.removeProperty("-webkit-background-clip"),this.style.removeProperty("-webkit-text-fill-color"),this.style.removeProperty("background-clip"),this.layerEl&&("gradient"===n&&c.length>=2?this.layerEl.style.backgroundImage=`linear-gradient(45deg, ${c.join(", ")})`:this.layerEl.style.removeProperty("background-image")),"typing"!==n&&"decode"!==n||"mount"!==l||this.isAnimating?this.isAnimating||(this.displayText=r):this.displayText="";const y="typing"===n||"decode"===n||"roll"===n||"text-rotate"===n,p="roll"===n||"text-rotate"===n?"nowrap":y?"pre-wrap":"";this.ghostEl&&(y?(this.ghostEl.textContent="text-rotate"===n?this.getLongestText():r,this.ghostEl.style.display="inline-block",this.ghostEl.style.whiteSpace=p,this.ghostEl.style.paddingRight="typing"===n?"0.25em":""):(this.ghostEl.textContent="",this.ghostEl.style.display="none")),this.layerEl&&(this.layerEl.className=[`${s}__layer`,"typing"===n&&`${s}--typing`,this.isAnimating&&"typing"===n&&`${s}--animating`].filter(Boolean).join(" "),y?(this.layerEl.style.position="absolute",this.layerEl.style.top="0",this.layerEl.style.left="0",this.layerEl.style.width="100%",this.layerEl.style.height="100%",this.layerEl.style.whiteSpace=p):(this.layerEl.style.position="static",this.layerEl.style.removeProperty("top"),this.layerEl.style.removeProperty("left"),this.layerEl.style.width="auto",this.layerEl.style.height="auto",this.layerEl.style.whiteSpace="")),this.renderLayer()}syncClasses(){this.classList.toggle(`${s}--visible`,this.isVisible),this.classList.toggle(`${s}--animating`,this.isAnimating)}setupTrigger(){this.clearTimers(),this.observer?.disconnect(),this.teardownScrollFill(),this.rotateObserver?.disconnect(),this.rotateObserver=void 0,this.rotateToken++;const t=this.getTrigger(),e=Number(this.getAttribute("delay")||0);if("scroll-fill"!==this.getType())if("text-rotate"!==this.getType()){if("mount"===t){const t=window.setTimeout(()=>{this.isVisible=!0,this.syncClasses(),this.startAnimation()},e);return void this.timers.push(t)}"in-view"===t&&(this.observer=new IntersectionObserver(t=>{t[0]?.isIntersecting&&(window.setTimeout(()=>{this.isVisible=!0,this.syncClasses(),this.startAnimation()},e),this.observer?.disconnect())}),this.observer.observe(this))}else this.setupTextRotate();else this.setupScrollFill()}setupTextRotate(){if(this.getRotateTexts().length<=1)return;const t=++this.rotateToken,start=()=>{if(t!==this.rotateToken||!this.isConnected||"text-rotate"!==this.getType())return;const e=this.layerEl?.querySelector(`.${s}__rotate-track`);if(!e||!e.firstElementChild)return;const i=Array.from(e.children),r=Number(this.getAttribute("speed")||500),n=Math.max(r+200,Number(this.getAttribute("interval")||2e3));let l=0;const apply=t=>{const s=i[0].getBoundingClientRect().height;if(!s)return;const n="cubic-bezier(0.22, 1, 0.36, 1)";var o;e.style.transition=t?`transform ${r}ms ${n}`:"none",e.style.transform=`translateY(-${l*s}px)`,this.style.transition=t?`width ${r}ms ${n}`:"none",this.style.width=`${o=l,i[o].getBoundingClientRect().width}px`};apply(!1);const o=window.setInterval(()=>{if(l+=1,apply(!0),l===i.length-1){const t=window.setTimeout(()=>{l=0,apply(!1)},r);this.timers.push(t)}},n);this.timers.push(o),this.rotateObserver?.disconnect();let a=!0;const h=new ResizeObserver(()=>{a?a=!1:apply(!1)});h.observe(i[0]),this.rotateObserver=h};"undefined"!=typeof document&&document.fonts?document.fonts.ready.then(()=>window.requestAnimationFrame(start)):window.requestAnimationFrame(start)}setupScrollFill(){this.scrollHandler=()=>{null==this.rafId&&(this.rafId=window.requestAnimationFrame(()=>{this.rafId=void 0,this.updateScrollFill()}))},window.addEventListener("scroll",this.scrollHandler,{passive:!0}),window.addEventListener("resize",this.scrollHandler,{passive:!0}),this.updateScrollFill()}teardownScrollFill(){this.scrollHandler&&(window.removeEventListener("scroll",this.scrollHandler),window.removeEventListener("resize",this.scrollHandler),this.scrollHandler=void 0),null!=this.rafId&&(window.cancelAnimationFrame(this.rafId),this.rafId=void 0)}updateScrollFill(){if("scroll-fill"!==this.getType()||0===this.wordEls.length)return;const clamp=t=>Math.max(0,Math.min(1,t)),t=this.getBoundingClientRect(),e=window.innerHeight||document.documentElement.clientHeight,i=.85*e,s=.35*e,r=clamp((i-t.top)/(i-s||1)),n=this.wordEls.length;this.wordEls.forEach((t,e)=>{const i=clamp((r*(n+4)-e)/4);t.style.opacity=String(.18+(1-.18)*i)})}startAnimation(){const t=this.getType(),e=this.getText();if(this.isAnimating=!0,this.syncClasses(),this.syncFromAttributes(),"typing"===t)return void this.startTyping(0);if("decode"===t)return void this.startDecoding(0);if("reveal"===t||"scroll-fill"===t||"roll"===t)return this.displayText=e,"roll"!==t&&this.renderLayer(),this.isAnimating=!1,void this.syncClasses();this.displayText=e,this.renderLayer();const i=Number(this.getAttribute("speed")||1e3),s=window.setTimeout(()=>{this.isAnimating=!1,this.syncClasses(),this.syncFromAttributes()},i);this.timers.push(s)}startTyping(t){const e=this.getText(),i=Number(this.getAttribute("speed")||1e3),s=Number(this.getAttribute("repeat")||1);this.displayText="",this.renderLayer();let r=0;const n=window.setInterval(()=>{if(r>=e.length)if(window.clearInterval(n),0===s||t<s-1){const e=window.setTimeout(()=>this.startTyping(t+1),500);this.timers.push(e)}else this.isAnimating=!1,this.syncClasses();else this.displayText=e.slice(0,r+1),this.renderLayer(),r+=1},Math.max(16,i/Math.max(e.length,1)));this.timers.push(n)}startDecoding(t){const e=this.getText(),i=Number(this.getAttribute("repeat")||1),s="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+";let r=0;const n=window.setInterval(()=>{if(this.displayText=e.split("").map((t,i)=>i<r?e[i]:s[Math.floor(74*Math.random())]||t).join(""),this.renderLayer(),r>=e.length)if(window.clearInterval(n),this.displayText=e,this.renderLayer(),0===i||t<i-1){const e=window.setTimeout(()=>this.startDecoding(t+1),500);this.timers.push(e)}else this.isAnimating=!1,this.syncClasses();r+=1/3},30);this.timers.push(n)}renderLayer(){if(!this.layerEl)return;const t=this.getType(),e=this.getText(),i=this.isVisible||this.isAnimating;if("reveal"===t||"scroll-fill"===t){this.wordEls=[];const i=document.createDocumentFragment(),r=e.split(/(\s+)/);let n=0;for(const e of r){if(""===e)continue;if(/^\s+$/.test(e)){i.appendChild(document.createTextNode(e));continue}const r=document.createElement("span");r.className=`${s}__word`,r.textContent=e,"reveal"===t&&(r.style.animationDelay=.06*n+"s"),this.wordEls.push(r),i.appendChild(r),n+=1}return this.layerEl.replaceChildren(i),void("scroll-fill"===t&&this.updateScrollFill())}if("text-rotate"===t){const t=this.getRotateTexts(),i=t.length?t:[e],r=document.createElement("span");r.className=`${s}__rotate-track`;const build=t=>{const e=document.createElement("span");return e.className=`${s}__rotate-item`,e.textContent=t,e};return i.forEach(t=>r.appendChild(build(t))),i.length>1&&r.appendChild(build(i[0])),void this.layerEl.replaceChildren(r)}if("roll"===t){const t=document.createElement("span");t.className=`${s}__roll-track`;const i=document.createElement("span");i.className=`${s}__roll-item`,i.textContent=e;const r=i.cloneNode(!0);return t.append(i,r),void this.layerEl.replaceChildren(t)}if("typing"!==t)"wave"!==t&&"shake"!==t||!i?this.layerEl.textContent=this.displayText||(i?e:""):this.layerEl.replaceChildren(...e.split("").map((t,e)=>{const i=document.createElement("span");return i.style.animationDelay=.05*e+"s",i.style.display="inline-block",i.textContent=" "===t?" ":t,i}));else if(this.layerEl.textContent=this.displayText,this.isAnimating){const t=document.createElement("span");t.className=`${s}__caret`,t.setAttribute("aria-hidden","true"),this.layerEl.appendChild(t)}}}customElements.get("db-animation-text")||customElements.define("db-animation-text",DbAnimationText);export{DbAnimationText};

package/dist/esm/components/db-app-badge.js

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";import{activateOnKey as e}from"../core/a11y.js";const s="designbase-wc-app-badge",i={"app-store":{label:"다운로드",storeName:"App Store"},"google-play":{label:"다운로드",storeName:"Google Play"}};class DbAppBadge extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["store","href","label","store-name","size","theme"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}getStore(){return"google-play"===(this.getAttribute("store")||"app-store")?"google-play":"app-store"}getIconSize(){const t=this.getAttribute("size")||"m";return"s"===t?18:"l"===t?24:20}build(){this.iconWrapEl=document.createElement("span"),this.iconWrapEl.className=`${s}__icon`,this.iconWrapEl.setAttribute("aria-hidden","true");const t=document.createElement("span");t.className=`${s}__text`,this.labelEl=document.createElement("span"),this.labelEl.className=`${s}__label`,this.storeEl=document.createElement("span"),this.storeEl.className=`${s}__store`,t.append(this.labelEl,this.storeEl),this.append(this.iconWrapEl,t),this.addEventListener("click",t=>{this.getAttribute("href")||this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0,detail:{event:t}}))}),this.detachKeyActivation=e(this)}disconnectedCallback(){this.detachKeyActivation?.(),this.detachKeyActivation=void 0}updateUI(){const e=this.getStore(),a=i[e],l=this.getAttribute("size")||"m",o=this.getAttribute("theme")||"dark",r=this.getAttribute("label")||a.label,n=this.getAttribute("store-name")||a.storeName,h=this.getAttribute("href");this.className=[s,`${s}--${l}`,`${s}--${o}`,`${s}--${e}`].join(" "),h?(this.setAttribute("role","link"),this.tabIndex=0,this.onclick=()=>window.open(h,"_blank","noopener,noreferrer")):(this.setAttribute("role","button"),this.tabIndex=0),this.iconWrapEl&&this.iconWrapEl.replaceChildren(t("app-store"===e?"apple":"play-store",this.getIconSize())),this.labelEl&&(this.labelEl.textContent=r),this.storeEl&&(this.storeEl.textContent=n)}}customElements.get("db-app-badge")||customElements.define("db-app-badge",DbAppBadge);export{DbAppBadge};
+import{createDbIcon as t}from"./db-icons.js";import{activateOnKey as e}from"../core/a11y.js";import{sanitizeHref as s}from"../core/safe-url.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{APP_BADGE_SIZES as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const o="designbase-wc-app-badge",l={"app-store":{label:"다운로드",storeName:"App Store"},"google-play":{label:"다운로드",storeName:"Google Play"}};class DbAppBadge extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["store","href","label","store-name","size","theme"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}getStore(){return"google-play"===(this.getAttribute("store")||"app-store")?"google-play":"app-store"}getIconSize(){const t=i(this.getAttribute("size"),a,"m");return"s"===t?18:"l"===t?24:20}build(){this.iconWrapEl=document.createElement("span"),this.iconWrapEl.className=`${o}__icon`,this.iconWrapEl.setAttribute("aria-hidden","true");const t=document.createElement("span");t.className=`${o}__text`,this.labelEl=document.createElement("span"),this.labelEl.className=`${o}__label`,this.storeEl=document.createElement("span"),this.storeEl.className=`${o}__store`,t.append(this.labelEl,this.storeEl),this.append(this.iconWrapEl,t),this.addEventListener("click",t=>{this.getAttribute("href")||this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0,detail:{event:t}}))}),this.detachKeyActivation=e(this)}disconnectedCallback(){this.detachKeyActivation?.(),this.detachKeyActivation=void 0}updateUI(){const e=this.getStore(),r=l[e],n=i(this.getAttribute("size"),a,"m"),c=this.getAttribute("theme")||"dark",h=this.getAttribute("label")||r.label,p=this.getAttribute("store-name")||r.storeName,b=s(this.getAttribute("href"),"");this.className=[o,`${o}--${n}`,`${o}--${c}`,`${o}--${e}`].join(" "),b?(this.setAttribute("role","link"),this.tabIndex=0,this.onclick=()=>window.open(b,"_blank","noopener,noreferrer")):(this.onclick=null,this.setAttribute("role","button"),this.tabIndex=0),this.iconWrapEl&&this.iconWrapEl.replaceChildren(t("app-store"===e?"apple":"play-store",this.getIconSize())),this.labelEl&&(this.labelEl.textContent=h),this.storeEl&&(this.storeEl.textContent=p)}}customElements.get("db-app-badge")||customElements.define("db-app-badge",DbAppBadge);export{DbAppBadge};

package/dist/esm/components/db-audio-player.js

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";import{t as e}from"../core/i18n.js";const s="designbase-wc-audio-player";class DbAudioPlayer extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.isPlaying=!1,this.isMuted=!1,this.volume=1,this.currentTime=0,this.duration=0,this.showSettingsMenu=!1,this.playbackRate=1,this.currentRepeatMode="none",this.isShuffle=!1,this.isLoading=!1,this.error=null,this.playlistIndex=0,this.shuffledPlaylist=[],this.boundKeyDown=t=>this.handleKeyDown(t)}static get observedAttributes(){return["src","title","artist","album","album-art","size","variant","theme","auto-play","loop","muted","show-controls","enable-keyboard","show-progress","show-time","show-volume","show-settings","playlist","current-index","playback-rates","default-playback-rate","repeat-mode","shuffle"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build(),this.bindAudioEvents()),this.syncFromAttributes(),this.updateUI(),this.getBool("enable-keyboard",!0)&&document.addEventListener("keydown",this.boundKeyDown)}disconnectedCallback(){document.removeEventListener("keydown",this.boundKeyDown)}attributeChangedCallback(t){if(this.built){if("current-index"===t)return this.playlistIndex=Number(this.getAttribute("current-index")||0),void this.loadCurrentTrack();"repeat-mode"===t&&(this.currentRepeatMode=this.getAttribute("repeat-mode")||"none"),"shuffle"===t&&(this.isShuffle=this.getBool("shuffle"),this.refreshShuffledPlaylist()),"default-playback-rate"===t&&(this.playbackRate=Number(this.getAttribute("default-playback-rate")||1),this.audioEl&&(this.audioEl.playbackRate=this.playbackRate)),this.updateUI()}}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}getPlaylist(){try{const t=this.getAttribute("playlist"),e=t?JSON.parse(t):[];return Array.isArray(e)?e:[]}catch{return[]}}getPlaybackRates(){try{const t=this.getAttribute("playback-rates"),e=t?JSON.parse(t):[.5,.75,1,1.25,1.5,2];return Array.isArray(e)&&e.length>0?e:[.5,.75,1,1.25,1.5,2]}catch{return[.5,.75,1,1.25,1.5,2]}}getIconSize(){const t=this.getAttribute("size")||"m";return"s"===t?16:"l"===t?24:"xl"===t?32:20}getCurrentTrack(){const t=this.getPlaylist();if(t.length>0){return t[this.isShuffle&&this.shuffledPlaylist.length>0?this.shuffledPlaylist[this.playlistIndex]??this.playlistIndex:this.playlistIndex]||t[0]}return{src:this.getAttribute("src")||"",title:this.getAttribute("title")||void 0,artist:this.getAttribute("artist")||void 0,album:this.getAttribute("album")||void 0,albumArt:this.getAttribute("album-art")||void 0}}refreshShuffledPlaylist(){const t=this.getPlaylist();if(t.length>0&&this.isShuffle){const e=Array.from({length:t.length},(t,e)=>e);this.shuffledPlaylist=[...e].sort(()=>Math.random()-.5)}else this.shuffledPlaylist=[]}formatTime(t){return`${Math.floor(t/60)}:${Math.floor(t%60).toString().padStart(2,"0")}`}syncFromAttributes(){this.playlistIndex=Number(this.getAttribute("current-index")||0),this.currentRepeatMode=this.getAttribute("repeat-mode")||"none",this.isShuffle=this.getBool("shuffle"),this.playbackRate=Number(this.getAttribute("default-playback-rate")||1),this.isMuted=this.getBool("muted"),this.volume=this.isMuted?0:1,this.refreshShuffledPlaylist(),this.loadCurrentTrack()}loadCurrentTrack(){if(!this.audioEl)return;const t=this.getCurrentTrack(),e=t?.src||this.getAttribute("src")||"";this.audioEl.src!==e&&e&&(this.audioEl.src=e,this.audioEl.load()),this.updateTrackInfo(),this.updatePlaylistActive()}bindAudioEvents(){const t=this.audioEl;t&&(t.addEventListener("play",()=>{this.isPlaying=!0,this.dispatchEvent(new CustomEvent("db-play",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("pause",()=>{this.isPlaying=!1,this.dispatchEvent(new CustomEvent("db-pause",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("timeupdate",()=>{this.currentTime=t.currentTime,this.duration=t.duration||0,this.dispatchEvent(new CustomEvent("db-time-update",{detail:{currentTime:this.currentTime,duration:this.duration},bubbles:!0,composed:!0})),this.updateProgress(),this.updateTime()}),t.addEventListener("volumechange",()=>{this.volume=t.volume,this.isMuted=t.muted,this.dispatchEvent(new CustomEvent("db-volume-change",{detail:{volume:this.volume},bubbles:!0,composed:!0})),this.updateVolumeUI()}),t.addEventListener("ended",()=>this.handleEnded()),t.addEventListener("error",()=>{this.error="오디오를 재생할 수 없습니다.",this.dispatchEvent(new CustomEvent("db-error",{detail:{error:this.error},bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("loadstart",()=>{this.isLoading=!0,this.error=null,this.updateUI()}),t.addEventListener("canplay",()=>{this.isLoading=!1,this.updateUI()}))}handleEnded(){this.isPlaying=!1,this.dispatchEvent(new CustomEvent("db-ended",{bubbles:!0,composed:!0}));const t=this.getPlaylist();if(t.length>0){if("one"===this.currentRepeatMode)this.audioEl&&(this.audioEl.currentTime=0,this.audioEl.play());else if("all"===this.currentRepeatMode||this.playlistIndex<t.length-1){const e=this.playlistIndex+1;e<t.length?this.setPlaylistIndex(e):"all"===this.currentRepeatMode&&this.setPlaylistIndex(0)}}else this.getBool("loop")&&this.audioEl&&(this.audioEl.currentTime=0,this.audioEl.play());this.updateUI()}setPlaylistIndex(t){this.playlistIndex=t,this.dispatchEvent(new CustomEvent("db-playlist-change",{detail:{index:t},bubbles:!0,composed:!0})),this.loadCurrentTrack(),this.audioEl&&this.audioEl.play()}togglePlay(){this.audioEl&&(this.isPlaying?this.audioEl.pause():this.audioEl.play())}toggleMute(){this.audioEl&&(this.audioEl.muted=!this.isMuted)}toggleRepeatMode(){const t=["none","one","all"],e=t[(t.indexOf(this.currentRepeatMode)+1)%t.length];this.currentRepeatMode=e,this.dispatchEvent(new CustomEvent("db-repeat-mode-change",{detail:{mode:e},bubbles:!0,composed:!0})),this.updateUI()}toggleShuffle(){this.isShuffle=!this.isShuffle,this.refreshShuffledPlaylist(),this.dispatchEvent(new CustomEvent("db-shuffle-change",{detail:{shuffle:this.isShuffle},bubbles:!0,composed:!0})),this.updateUI()}handlePlaybackRateChange(t){this.audioEl&&(this.audioEl.playbackRate=t,this.playbackRate=t,this.dispatchEvent(new CustomEvent("db-playback-rate-change",{detail:{rate:t},bubbles:!0,composed:!0})))}handleKeyDown(t){if(this.audioEl&&this.getBool("enable-keyboard",!0))switch(t.code){case"Space":t.preventDefault(),this.togglePlay();break;case"ArrowLeft":t.preventDefault(),this.audioEl.currentTime=Math.max(0,this.currentTime-10);break;case"ArrowRight":t.preventDefault(),this.audioEl.currentTime=Math.min(this.duration,this.currentTime+10);break;case"ArrowUp":t.preventDefault(),this.audioEl.volume=Math.min(1,this.volume+.1),this.audioEl.muted=!1;break;case"ArrowDown":t.preventDefault(),this.audioEl.volume=Math.max(0,this.volume-.1),this.audioEl.muted=0===this.audioEl.volume;break;case"KeyM":t.preventDefault(),this.toggleMute();break;case"KeyR":t.preventDefault(),this.toggleRepeatMode();break;case"KeyS":t.preventDefault(),this.toggleShuffle()}}iconButton(e,i,l,a){const n=document.createElement("button");return n.type="button",n.className=`${s}__control-button`,n.setAttribute("aria-label",i),n.append(t(e,this.getIconSize())),a?.disabled&&(n.disabled=!0),a?.data&&Object.entries(a.data).forEach(([t,e])=>n.setAttribute(`data-${t}`,e)),n.addEventListener("click",l),n}build(){const t=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",l=this.getAttribute("theme")||"auto";this.className=[s,`${s}--size-${t}`,`${s}--variant-${i}`,`${s}--theme-${l}`].join(" "),this.audioEl=document.createElement("audio"),this.audioEl.preload="metadata",this.audioEl.hidden=!0;const a=document.createElement("div");a.className=`${s}__loading`;const n=document.createElement("div");n.className=`${s}__spinner`,a.append(n);const o=document.createElement("div");o.className=`${s}__error`;const r=document.createElement("p");r.textContent="오디오를 재생할 수 없습니다.";const h=document.createElement("button");h.type="button",h.textContent="다시 시도",h.addEventListener("click",()=>window.location.reload()),o.append(r,h);const u=document.createElement("div");u.className=`${s}__album-art`,this.albumImgEl=document.createElement("img"),this.albumImgEl.addEventListener("error",()=>{this.albumImgEl&&(this.albumImgEl.style.display="none"),this.albumPlaceholderEl?.classList.remove("album-placeholder")}),this.albumPlaceholderEl=document.createElement("div"),this.albumPlaceholderEl.className="album-placeholder",this.albumPlaceholderEl.textContent="🎵",u.append(this.albumImgEl,this.albumPlaceholderEl);const d=document.createElement("div");d.className=`${s}__main`;const c=document.createElement("div");c.className=`${s}__info`,this.titleEl=document.createElement("div"),this.titleEl.className=`${s}__title`,this.artistEl=document.createElement("div"),this.artistEl.className=`${s}__artist`,this.albumEl=document.createElement("div"),this.albumEl.className=`${s}__album`,c.append(this.titleEl,this.artistEl,this.albumEl),this.progressEl=document.createElement("div"),this.progressEl.className=`${s}__progress`,this.progressBarEl=document.createElement("div"),this.progressBarEl.className=`${s}__progress-bar`,this.progressHandleEl=document.createElement("div"),this.progressHandleEl.className=`${s}__progress-handle`,this.progressEl.append(this.progressBarEl,this.progressHandleEl),this.progressEl.addEventListener("click",t=>{if(!this.audioEl||!this.progressEl)return;const e=this.progressEl.getBoundingClientRect(),s=(t.clientX-e.left)/e.width;this.audioEl.currentTime=s*(this.duration||0)});const m=document.createElement("div");m.className=`${s}__controls`;const p=document.createElement("div");p.className=`${s}__left-controls`;const E=document.createElement("div");E.className=`${s}__center-controls`;const g=document.createElement("div");g.className=`${s}__right-controls`,this.playButtonEl=document.createElement("button"),this.playButtonEl.type="button",this.playButtonEl.className=`${s}__play-button`,this.playButtonEl.addEventListener("click",()=>this.togglePlay()),E.append(this.playButtonEl),m.append(p,E,g);const b=document.createElement("div");b.className=`${s}__bottom-controls`;const y=document.createElement("div");y.className=`${s}__left-bottom`;const v=document.createElement("div");v.className=`${s}__right-bottom`;const f=document.createElement("div");f.className=`${s}__time`,this.timeCurrentEl=document.createElement("span");const _=document.createElement("span");_.textContent="/",this.timeDurationEl=document.createElement("span"),f.append(this.timeCurrentEl,_,this.timeDurationEl),y.append(f);const k=document.createElement("div");k.className=`${s}__volume`;const C=this.iconButton(this.isMuted||0===this.volume?"mute-filled":"volume-up",this.isMuted||0===this.volume?e("media.unmute"):e("media.mute"),()=>this.toggleMute());C.title=this.isMuted||0===this.volume?"음소거 해제":"음소거";const I=document.createElement("div");I.className=`${s}__volume-slider`;const $=document.createElement("div");$.className="volume-label";const A=document.createElement("span");A.textContent="🔊";const P=document.createElement("span");$.append(A,P),this.volumeInputEl=document.createElement("input"),this.volumeInputEl.type="range",this.volumeInputEl.min="0",this.volumeInputEl.max="1",this.volumeInputEl.step="0.1",this.volumeInputEl.addEventListener("input",()=>{if(!this.audioEl||!this.volumeInputEl)return;const t=parseFloat(this.volumeInputEl.value);this.audioEl.volume=t,this.audioEl.muted=0===t}),I.append($,this.volumeInputEl),k.append(C,I);const x=document.createElement("div");x.className=`${s}__settings`;const M=this.iconButton("settings",e("media.settings"),()=>{this.showSettingsMenu=!this.showSettingsMenu,this.updateSettingsMenu()});this.settingsMenuEl=document.createElement("div"),this.settingsMenuEl.className=`${s}__settings-menu`,this.settingsMenuEl.hidden=!0;const w=document.createElement("div");w.className=`${s}__setting-group`;const B=document.createElement("label");B.textContent="재생 속도";const N=document.createElement("select");N.addEventListener("change",()=>this.handlePlaybackRateChange(parseFloat(N.value))),w.append(B,N),this.settingsMenuEl.append(w),x.append(M,this.settingsMenuEl),v.append(k,x),b.append(y,v),d.append(c,this.progressEl,m,b);const T=document.createElement("div");T.className=`${s}__playlist`,T.hidden=!0;const S=document.createElement("h4");S.textContent="플레이리스트",this.playlistTracksEl=document.createElement("div"),this.playlistTracksEl.className=`${s}__playlist-tracks`,T.append(S,this.playlistTracksEl),this.append(this.audioEl,a,o,u,d,T),this._leftControls=p,this._rightControls=g,this._controls=m,this._time=f,this._volumeWrap=k,this._settings=x,this._playlist=T,this._rateSelect=N,this._volumePercent=P,this._muteButton=C}get leftControls(){return this._leftControls}get rightControls(){return this._rightControls}get controlsEl(){return this._controls}get timeEl(){return this._time}get volumeWrap(){return this._volumeWrap}get settingsEl(){return this._settings}get playlistEl(){return this._playlist}get rateSelect(){return this._rateSelect}get volumePercent(){return this._volumePercent}get muteButton(){return this._muteButton}updateTrackInfo(){const t=this.getCurrentTrack();this.titleEl&&(this.titleEl.textContent=t?.title||"Unknown Track"),this.artistEl&&(this.artistEl.textContent=t?.artist||"Unknown Artist"),this.albumEl&&(t?.album?(this.albumEl.textContent=t.album,this.albumEl.hidden=!1):this.albumEl.hidden=!0),this.albumImgEl&&this.albumPlaceholderEl&&(t?.albumArt?(this.albumImgEl.src=t.albumArt,this.albumImgEl.alt=t.title||"Album Art",this.albumImgEl.style.display=""):(this.albumImgEl.removeAttribute("src"),this.albumImgEl.style.display="none"),this.albumPlaceholderEl.className="album-placeholder")}updateProgress(){const t=this.duration>0?this.currentTime/this.duration*100:0;this.progressBarEl&&(this.progressBarEl.style.width=`${t}%`),this.progressHandleEl&&(this.progressHandleEl.style.left=`${t}%`,this.progressHandleEl.style.transform=t<=0?"translate(0, -50%)":t>=100?"translate(-100%, -50%)":"translate(-50%, -50%)")}updateTime(){this.timeCurrentEl&&(this.timeCurrentEl.textContent=this.formatTime(this.currentTime)),this.timeDurationEl&&(this.timeDurationEl.textContent=this.formatTime(this.duration))}updateVolumeUI(){this.volumeInputEl&&(this.volumeInputEl.value=String(this.volume)),this.volumePercent&&(this.volumePercent.textContent=`${Math.round(100*this.volume)}%`),this.muteButton&&(this.muteButton.replaceChildren(t(this.isMuted||0===this.volume?"mute-filled":"volume-up",this.getIconSize())),this.muteButton.title=this.isMuted||0===this.volume?"음소거 해제":"음소거")}updateSettingsMenu(){this.settingsMenuEl&&(this.settingsMenuEl.hidden=!this.showSettingsMenu)}rebuildControlButtons(){const s=this.getPlaylist(),i=1.2*this.getIconSize();this.leftControls.replaceChildren(),this.rightControls.replaceChildren(),s.length>0&&this.leftControls.append(this.iconButton("refresh",e("media.shuffle"),()=>this.toggleShuffle(),{data:{shuffle:"true"}})),this.leftControls.append(this.iconButton("chevron-left",e("media.previous"),()=>{if(s.length>0){const t=this.playlistIndex-1;t>=0&&this.setPlaylistIndex(t)}else this.audioEl&&(this.audioEl.currentTime=0)},{disabled:s.length>0&&0===this.playlistIndex})),this.playButtonEl&&this.playButtonEl.replaceChildren(t(this.isPlaying?"pause":"play",i)),this.rightControls.append(this.iconButton("chevron-right",e("media.next"),()=>{if(s.length>0){const t=this.playlistIndex+1;t<s.length&&this.setPlaylistIndex(t)}},{disabled:s.length>0&&this.playlistIndex===s.length-1})),s.length>0&&this.rightControls.append(this.iconButton("repeat",e("media.repeat"),()=>this.toggleRepeatMode(),{data:{repeat:"true"}}))}rebuildPlaylist(){if(!this.playlistTracksEl)return;const t=this.getPlaylist(),e=this.getAttribute("variant")||"default";this.playlistEl.hidden=!("full"===e&&t.length>0),this.playlistTracksEl.replaceChildren(),t.forEach((t,e)=>{const i=document.createElement("div");if(i.className=`${s}__playlist-track${e===this.playlistIndex?` ${s}__playlist-track--active`:""}`,i.addEventListener("click",()=>this.setPlaylistIndex(e)),t.albumArt){const e=document.createElement("img");e.src=t.albumArt,e.alt=t.title||"Album Art",i.append(e)}const l=document.createElement("div");l.className=`${s}__playlist-track-info`;const a=document.createElement("div");a.className=`${s}__playlist-track-title`,a.textContent=t.title||"Unknown Track";const n=document.createElement("div");n.className=`${s}__playlist-track-artist`,n.textContent=t.artist||"Unknown Artist",l.append(a,n),i.append(l),this.playlistTracksEl?.append(i)})}updatePlaylistActive(){this.playlistTracksEl&&Array.from(this.playlistTracksEl.children).forEach((t,e)=>{t.classList.toggle(`${s}__playlist-track--active`,e===this.playlistIndex)})}updateUI(){const t=this.getAttribute("size")||"m",e=this.getAttribute("variant")||"default",i=this.getAttribute("theme")||"auto",l=this.getBool("show-controls",!0),a=this.getBool("show-progress",!0),n=this.getBool("show-time",!0),o=this.getBool("show-volume",!0),r=this.getBool("show-settings",!1);this.className=[s,`${s}--size-${t}`,`${s}--variant-${e}`,`${s}--theme-${i}`,this.isPlaying&&`${s}--playing`,!this.isPlaying&&`${s}--paused`,this.isMuted&&`${s}--muted`,this.isLoading&&`${s}--loading`,this.error&&`${s}--error`,this.isShuffle&&`${s}--shuffle`,`${s}--repeat-${this.currentRepeatMode}`].filter(Boolean).join(" "),this.audioEl&&(this.audioEl.autoplay=this.getBool("auto-play"),this.audioEl.loop=this.getBool("loop"),this.audioEl.muted=this.getBool("muted"),this.audioEl.playbackRate=this.playbackRate),this.progressEl&&(this.progressEl.hidden=!a),this.controlsEl&&(this.controlsEl.hidden=!l),this.timeEl&&(this.timeEl.hidden=!n),this.volumeWrap&&(this.volumeWrap.hidden=!o),this.settingsEl&&(this.settingsEl.hidden=!r),this.rateSelect.replaceChildren(...this.getPlaybackRates().map(t=>{const e=document.createElement("option");return e.value=String(t),e.textContent=`${t}x`,t===this.playbackRate&&(e.selected=!0),e})),this.rebuildControlButtons(),this.updateTrackInfo(),this.updateProgress(),this.updateTime(),this.updateVolumeUI(),this.updateSettingsMenu(),this.rebuildPlaylist()}}customElements.get("db-audio-player")||customElements.define("db-audio-player",DbAudioPlayer);export{DbAudioPlayer};
+import{createDbIcon as t}from"./db-icons.js";import{t as e}from"../core/i18n.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{AUDIO_PLAYER_SIZES as i,AUDIO_PLAYER_VARIANTS as l}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a="designbase-wc-audio-player";class DbAudioPlayer extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.isPlaying=!1,this.isMuted=!1,this.volume=1,this.currentTime=0,this.duration=0,this.showSettingsMenu=!1,this.playbackRate=1,this.currentRepeatMode="none",this.isShuffle=!1,this.isLoading=!1,this.error=null,this.playlistIndex=0,this.shuffledPlaylist=[],this.boundKeyDown=t=>this.handleKeyDown(t)}static get observedAttributes(){return["src","title","artist","album","album-art","size","variant","theme","auto-play","loop","muted","show-controls","enable-keyboard","show-progress","show-time","show-volume","show-settings","playlist","current-index","playback-rates","default-playback-rate","repeat-mode","shuffle"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build(),this.bindAudioEvents()),this.syncFromAttributes(),this.updateUI(),this.getBool("enable-keyboard",!0)&&document.addEventListener("keydown",this.boundKeyDown)}disconnectedCallback(){document.removeEventListener("keydown",this.boundKeyDown)}attributeChangedCallback(t){if(this.built){if("current-index"===t)return this.playlistIndex=Number(this.getAttribute("current-index")||0),void this.loadCurrentTrack();"repeat-mode"===t&&(this.currentRepeatMode=this.getAttribute("repeat-mode")||"none"),"shuffle"===t&&(this.isShuffle=this.getBool("shuffle"),this.refreshShuffledPlaylist()),"default-playback-rate"===t&&(this.playbackRate=Number(this.getAttribute("default-playback-rate")||1),this.audioEl&&(this.audioEl.playbackRate=this.playbackRate)),this.updateUI()}}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}getPlaylist(){try{const t=this.getAttribute("playlist"),e=t?JSON.parse(t):[];return Array.isArray(e)?e:[]}catch{return[]}}getPlaybackRates(){try{const t=this.getAttribute("playback-rates"),e=t?JSON.parse(t):[.5,.75,1,1.25,1.5,2];return Array.isArray(e)&&e.length>0?e:[.5,.75,1,1.25,1.5,2]}catch{return[.5,.75,1,1.25,1.5,2]}}getIconSize(){const t=s(this.getAttribute("size"),i,"m");return"s"===t?16:"l"===t?24:"xl"===t?32:20}getCurrentTrack(){const t=this.getPlaylist();if(t.length>0){return t[this.isShuffle&&this.shuffledPlaylist.length>0?this.shuffledPlaylist[this.playlistIndex]??this.playlistIndex:this.playlistIndex]||t[0]}return{src:this.getAttribute("src")||"",title:this.getAttribute("title")||void 0,artist:this.getAttribute("artist")||void 0,album:this.getAttribute("album")||void 0,albumArt:this.getAttribute("album-art")||void 0}}refreshShuffledPlaylist(){const t=this.getPlaylist();if(t.length>0&&this.isShuffle){const e=Array.from({length:t.length},(t,e)=>e);this.shuffledPlaylist=[...e].sort(()=>Math.random()-.5)}else this.shuffledPlaylist=[]}formatTime(t){return`${Math.floor(t/60)}:${Math.floor(t%60).toString().padStart(2,"0")}`}syncFromAttributes(){this.playlistIndex=Number(this.getAttribute("current-index")||0),this.currentRepeatMode=this.getAttribute("repeat-mode")||"none",this.isShuffle=this.getBool("shuffle"),this.playbackRate=Number(this.getAttribute("default-playback-rate")||1),this.isMuted=this.getBool("muted"),this.volume=this.isMuted?0:1,this.refreshShuffledPlaylist(),this.loadCurrentTrack()}loadCurrentTrack(){if(!this.audioEl)return;const t=this.getCurrentTrack(),e=t?.src||this.getAttribute("src")||"";this.audioEl.src!==e&&e&&(this.audioEl.src=e,this.audioEl.load()),this.updateTrackInfo(),this.updatePlaylistActive()}bindAudioEvents(){const t=this.audioEl;t&&(t.addEventListener("play",()=>{this.isPlaying=!0,this.dispatchEvent(new CustomEvent("db-play",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("pause",()=>{this.isPlaying=!1,this.dispatchEvent(new CustomEvent("db-pause",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("timeupdate",()=>{this.currentTime=t.currentTime,this.duration=t.duration||0,this.dispatchEvent(new CustomEvent("db-time-update",{detail:{currentTime:this.currentTime,duration:this.duration},bubbles:!0,composed:!0})),this.updateProgress(),this.updateTime()}),t.addEventListener("volumechange",()=>{this.volume=t.volume,this.isMuted=t.muted,this.dispatchEvent(new CustomEvent("db-volume-change",{detail:{volume:this.volume},bubbles:!0,composed:!0})),this.updateVolumeUI()}),t.addEventListener("ended",()=>this.handleEnded()),t.addEventListener("error",()=>{this.error="오디오를 재생할 수 없습니다.",this.dispatchEvent(new CustomEvent("db-error",{detail:{error:this.error},bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("loadstart",()=>{this.isLoading=!0,this.error=null,this.updateUI()}),t.addEventListener("canplay",()=>{this.isLoading=!1,this.updateUI()}))}handleEnded(){this.isPlaying=!1,this.dispatchEvent(new CustomEvent("db-ended",{bubbles:!0,composed:!0}));const t=this.getPlaylist();if(t.length>0){if("one"===this.currentRepeatMode)this.audioEl&&(this.audioEl.currentTime=0,this.audioEl.play());else if("all"===this.currentRepeatMode||this.playlistIndex<t.length-1){const e=this.playlistIndex+1;e<t.length?this.setPlaylistIndex(e):"all"===this.currentRepeatMode&&this.setPlaylistIndex(0)}}else this.getBool("loop")&&this.audioEl&&(this.audioEl.currentTime=0,this.audioEl.play());this.updateUI()}setPlaylistIndex(t){this.playlistIndex=t,this.dispatchEvent(new CustomEvent("db-playlist-change",{detail:{index:t},bubbles:!0,composed:!0})),this.loadCurrentTrack(),this.audioEl&&this.audioEl.play()}togglePlay(){this.audioEl&&(this.isPlaying?this.audioEl.pause():this.audioEl.play())}toggleMute(){this.audioEl&&(this.audioEl.muted=!this.isMuted)}toggleRepeatMode(){const t=["none","one","all"],e=t[(t.indexOf(this.currentRepeatMode)+1)%t.length];this.currentRepeatMode=e,this.dispatchEvent(new CustomEvent("db-repeat-mode-change",{detail:{mode:e},bubbles:!0,composed:!0})),this.updateUI()}toggleShuffle(){this.isShuffle=!this.isShuffle,this.refreshShuffledPlaylist(),this.dispatchEvent(new CustomEvent("db-shuffle-change",{detail:{shuffle:this.isShuffle},bubbles:!0,composed:!0})),this.updateUI()}handlePlaybackRateChange(t){this.audioEl&&(this.audioEl.playbackRate=t,this.playbackRate=t,this.dispatchEvent(new CustomEvent("db-playback-rate-change",{detail:{rate:t},bubbles:!0,composed:!0})))}handleKeyDown(t){if(this.audioEl&&this.getBool("enable-keyboard",!0))switch(t.code){case"Space":t.preventDefault(),this.togglePlay();break;case"ArrowLeft":t.preventDefault(),this.audioEl.currentTime=Math.max(0,this.currentTime-10);break;case"ArrowRight":t.preventDefault(),this.audioEl.currentTime=Math.min(this.duration,this.currentTime+10);break;case"ArrowUp":t.preventDefault(),this.audioEl.volume=Math.min(1,this.volume+.1),this.audioEl.muted=!1;break;case"ArrowDown":t.preventDefault(),this.audioEl.volume=Math.max(0,this.volume-.1),this.audioEl.muted=0===this.audioEl.volume;break;case"KeyM":t.preventDefault(),this.toggleMute();break;case"KeyR":t.preventDefault(),this.toggleRepeatMode();break;case"KeyS":t.preventDefault(),this.toggleShuffle()}}iconButton(e,s,i,l){const n=document.createElement("button");return n.type="button",n.className=`${a}__control-button`,n.setAttribute("aria-label",s),n.append(t(e,this.getIconSize())),l?.disabled&&(n.disabled=!0),l?.data&&Object.entries(l.data).forEach(([t,e])=>n.setAttribute(`data-${t}`,e)),n.addEventListener("click",i),n}build(){const t=s(this.getAttribute("size"),i,"m"),n=s(this.getAttribute("variant"),l,"default"),o=this.getAttribute("theme")||"auto";this.className=[a,`${a}--size-${t}`,`${a}--variant-${n}`,`${a}--theme-${o}`].join(" "),this.audioEl=document.createElement("audio"),this.audioEl.preload="metadata",this.audioEl.hidden=!0;const r=document.createElement("div");r.className=`${a}__loading`;const h=document.createElement("div");h.className=`${a}__spinner`,r.append(h);const u=document.createElement("div");u.className=`${a}__error`;const d=document.createElement("p");d.textContent="오디오를 재생할 수 없습니다.";const c=document.createElement("button");c.type="button",c.textContent="다시 시도",c.addEventListener("click",()=>window.location.reload()),u.append(d,c);const m=document.createElement("div");m.className=`${a}__album-art`,this.albumImgEl=document.createElement("img"),this.albumImgEl.addEventListener("error",()=>{this.albumImgEl&&(this.albumImgEl.style.display="none"),this.albumPlaceholderEl?.classList.remove("album-placeholder")}),this.albumPlaceholderEl=document.createElement("div"),this.albumPlaceholderEl.className="album-placeholder",this.albumPlaceholderEl.textContent="🎵",m.append(this.albumImgEl,this.albumPlaceholderEl);const p=document.createElement("div");p.className=`${a}__main`;const E=document.createElement("div");E.className=`${a}__info`,this.titleEl=document.createElement("div"),this.titleEl.className=`${a}__title`,this.artistEl=document.createElement("div"),this.artistEl.className=`${a}__artist`,this.albumEl=document.createElement("div"),this.albumEl.className=`${a}__album`,E.append(this.titleEl,this.artistEl,this.albumEl),this.progressEl=document.createElement("div"),this.progressEl.className=`${a}__progress`,this.progressBarEl=document.createElement("div"),this.progressBarEl.className=`${a}__progress-bar`,this.progressHandleEl=document.createElement("div"),this.progressHandleEl.className=`${a}__progress-handle`,this.progressEl.append(this.progressBarEl,this.progressHandleEl),this.progressEl.addEventListener("click",t=>{if(!this.audioEl||!this.progressEl)return;const e=this.progressEl.getBoundingClientRect(),s=(t.clientX-e.left)/e.width;this.audioEl.currentTime=s*(this.duration||0)});const g=document.createElement("div");g.className=`${a}__controls`;const b=document.createElement("div");b.className=`${a}__left-controls`;const y=document.createElement("div");y.className=`${a}__center-controls`;const v=document.createElement("div");v.className=`${a}__right-controls`,this.playButtonEl=document.createElement("button"),this.playButtonEl.type="button",this.playButtonEl.className=`${a}__play-button`,this.playButtonEl.addEventListener("click",()=>this.togglePlay()),y.append(this.playButtonEl),g.append(b,y,v);const f=document.createElement("div");f.className=`${a}__bottom-controls`;const _=document.createElement("div");_.className=`${a}__left-bottom`;const k=document.createElement("div");k.className=`${a}__right-bottom`;const C=document.createElement("div");C.className=`${a}__time`,this.timeCurrentEl=document.createElement("span");const I=document.createElement("span");I.textContent="/",this.timeDurationEl=document.createElement("span"),C.append(this.timeCurrentEl,I,this.timeDurationEl),_.append(C);const $=document.createElement("div");$.className=`${a}__volume`;const A=this.iconButton(this.isMuted||0===this.volume?"mute-filled":"volume-up",this.isMuted||0===this.volume?e("media.unmute"):e("media.mute"),()=>this.toggleMute());A.title=this.isMuted||0===this.volume?"음소거 해제":"음소거";const P=document.createElement("div");P.className=`${a}__volume-slider`;const x=document.createElement("div");x.className="volume-label";const M=document.createElement("span");M.textContent="🔊";const w=document.createElement("span");x.append(M,w),this.volumeInputEl=document.createElement("input"),this.volumeInputEl.type="range",this.volumeInputEl.min="0",this.volumeInputEl.max="1",this.volumeInputEl.step="0.1",this.volumeInputEl.addEventListener("input",()=>{if(!this.audioEl||!this.volumeInputEl)return;const t=parseFloat(this.volumeInputEl.value);this.audioEl.volume=t,this.audioEl.muted=0===t}),P.append(x,this.volumeInputEl),$.append(A,P);const B=document.createElement("div");B.className=`${a}__settings`;const N=this.iconButton("settings",e("media.settings"),()=>{this.showSettingsMenu=!this.showSettingsMenu,this.updateSettingsMenu()});this.settingsMenuEl=document.createElement("div"),this.settingsMenuEl.className=`${a}__settings-menu`,this.settingsMenuEl.hidden=!0;const T=document.createElement("div");T.className=`${a}__setting-group`;const S=document.createElement("label");S.textContent="재생 속도";const R=document.createElement("select");R.addEventListener("change",()=>this.handlePlaybackRateChange(parseFloat(R.value))),T.append(S,R),this.settingsMenuEl.append(T),B.append(N,this.settingsMenuEl),k.append($,B),f.append(_,k),p.append(E,this.progressEl,g,f);const L=document.createElement("div");L.className=`${a}__playlist`,L.hidden=!0;const D=document.createElement("h4");D.textContent="플레이리스트",this.playlistTracksEl=document.createElement("div"),this.playlistTracksEl.className=`${a}__playlist-tracks`,L.append(D,this.playlistTracksEl),this.append(this.audioEl,r,u,m,p,L),this._leftControls=b,this._rightControls=v,this._controls=g,this._time=C,this._volumeWrap=$,this._settings=B,this._playlist=L,this._rateSelect=R,this._volumePercent=w,this._muteButton=A}get leftControls(){return this._leftControls}get rightControls(){return this._rightControls}get controlsEl(){return this._controls}get timeEl(){return this._time}get volumeWrap(){return this._volumeWrap}get settingsEl(){return this._settings}get playlistEl(){return this._playlist}get rateSelect(){return this._rateSelect}get volumePercent(){return this._volumePercent}get muteButton(){return this._muteButton}updateTrackInfo(){const t=this.getCurrentTrack();this.titleEl&&(this.titleEl.textContent=t?.title||"Unknown Track"),this.artistEl&&(this.artistEl.textContent=t?.artist||"Unknown Artist"),this.albumEl&&(t?.album?(this.albumEl.textContent=t.album,this.albumEl.hidden=!1):this.albumEl.hidden=!0),this.albumImgEl&&this.albumPlaceholderEl&&(t?.albumArt?(this.albumImgEl.src=t.albumArt,this.albumImgEl.alt=t.title||"Album Art",this.albumImgEl.style.display=""):(this.albumImgEl.removeAttribute("src"),this.albumImgEl.style.display="none"),this.albumPlaceholderEl.className="album-placeholder")}updateProgress(){const t=this.duration>0?this.currentTime/this.duration*100:0;this.progressBarEl&&(this.progressBarEl.style.width=`${t}%`),this.progressHandleEl&&(this.progressHandleEl.style.left=`${t}%`,this.progressHandleEl.style.transform=t<=0?"translate(0, -50%)":t>=100?"translate(-100%, -50%)":"translate(-50%, -50%)")}updateTime(){this.timeCurrentEl&&(this.timeCurrentEl.textContent=this.formatTime(this.currentTime)),this.timeDurationEl&&(this.timeDurationEl.textContent=this.formatTime(this.duration))}updateVolumeUI(){this.volumeInputEl&&(this.volumeInputEl.value=String(this.volume)),this.volumePercent&&(this.volumePercent.textContent=`${Math.round(100*this.volume)}%`),this.muteButton&&(this.muteButton.replaceChildren(t(this.isMuted||0===this.volume?"mute-filled":"volume-up",this.getIconSize())),this.muteButton.title=this.isMuted||0===this.volume?"음소거 해제":"음소거")}updateSettingsMenu(){this.settingsMenuEl&&(this.settingsMenuEl.hidden=!this.showSettingsMenu)}rebuildControlButtons(){const s=this.getPlaylist(),i=1.2*this.getIconSize();this.leftControls.replaceChildren(),this.rightControls.replaceChildren(),s.length>0&&this.leftControls.append(this.iconButton("refresh",e("media.shuffle"),()=>this.toggleShuffle(),{data:{shuffle:"true"}})),this.leftControls.append(this.iconButton("chevron-left",e("media.previous"),()=>{if(s.length>0){const t=this.playlistIndex-1;t>=0&&this.setPlaylistIndex(t)}else this.audioEl&&(this.audioEl.currentTime=0)},{disabled:s.length>0&&0===this.playlistIndex})),this.playButtonEl&&this.playButtonEl.replaceChildren(t(this.isPlaying?"pause":"play",i)),this.rightControls.append(this.iconButton("chevron-right",e("media.next"),()=>{if(s.length>0){const t=this.playlistIndex+1;t<s.length&&this.setPlaylistIndex(t)}},{disabled:s.length>0&&this.playlistIndex===s.length-1})),s.length>0&&this.rightControls.append(this.iconButton("repeat",e("media.repeat"),()=>this.toggleRepeatMode(),{data:{repeat:"true"}}))}rebuildPlaylist(){if(!this.playlistTracksEl)return;const t=this.getPlaylist(),e=s(this.getAttribute("variant"),l,"default");this.playlistEl.hidden=!("full"===e&&t.length>0),this.playlistTracksEl.replaceChildren(),t.forEach((t,e)=>{const s=document.createElement("div");if(s.className=`${a}__playlist-track${e===this.playlistIndex?` ${a}__playlist-track--active`:""}`,s.addEventListener("click",()=>this.setPlaylistIndex(e)),t.albumArt){const e=document.createElement("img");e.src=t.albumArt,e.alt=t.title||"Album Art",s.append(e)}const i=document.createElement("div");i.className=`${a}__playlist-track-info`;const l=document.createElement("div");l.className=`${a}__playlist-track-title`,l.textContent=t.title||"Unknown Track";const n=document.createElement("div");n.className=`${a}__playlist-track-artist`,n.textContent=t.artist||"Unknown Artist",i.append(l,n),s.append(i),this.playlistTracksEl?.append(s)})}updatePlaylistActive(){this.playlistTracksEl&&Array.from(this.playlistTracksEl.children).forEach((t,e)=>{t.classList.toggle(`${a}__playlist-track--active`,e===this.playlistIndex)})}updateUI(){const t=s(this.getAttribute("size"),i,"m"),e=s(this.getAttribute("variant"),l,"default"),n=this.getAttribute("theme")||"auto",o=this.getBool("show-controls",!0),r=this.getBool("show-progress",!0),h=this.getBool("show-time",!0),u=this.getBool("show-volume",!0),d=this.getBool("show-settings",!1);this.className=[a,`${a}--size-${t}`,`${a}--variant-${e}`,`${a}--theme-${n}`,this.isPlaying&&`${a}--playing`,!this.isPlaying&&`${a}--paused`,this.isMuted&&`${a}--muted`,this.isLoading&&`${a}--loading`,this.error&&`${a}--error`,this.isShuffle&&`${a}--shuffle`,`${a}--repeat-${this.currentRepeatMode}`].filter(Boolean).join(" "),this.audioEl&&(this.audioEl.autoplay=this.getBool("auto-play"),this.audioEl.loop=this.getBool("loop"),this.audioEl.muted=this.getBool("muted"),this.audioEl.playbackRate=this.playbackRate),this.progressEl&&(this.progressEl.hidden=!r),this.controlsEl&&(this.controlsEl.hidden=!o),this.timeEl&&(this.timeEl.hidden=!h),this.volumeWrap&&(this.volumeWrap.hidden=!u),this.settingsEl&&(this.settingsEl.hidden=!d),this.rateSelect.replaceChildren(...this.getPlaybackRates().map(t=>{const e=document.createElement("option");return e.value=String(t),e.textContent=`${t}x`,t===this.playbackRate&&(e.selected=!0),e})),this.rebuildControlButtons(),this.updateTrackInfo(),this.updateProgress(),this.updateTime(),this.updateVolumeUI(),this.updateSettingsMenu(),this.rebuildPlaylist()}}customElements.get("db-audio-player")||customElements.define("db-audio-player",DbAudioPlayer);export{DbAudioPlayer};

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

@@ -1 +1 @@
-import{BADGE_VARIANTS as t,BADGE_SIZES as e,BADGE_TYPES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const i="designbase-wc-badge";class DbBadge extends HTMLElement{static get observedAttributes(){return["variant","size","type","count","max-count","disabled"]}get variant(){return this.getAttribute("variant")||"primary"}set variant(t){this.setAttribute("variant",t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}get type(){return this.getAttribute("type")||"text"}set type(t){this.setAttribute("type",t)}get count(){const t=this.getAttribute("count");return null===t?void 0:Number(t)}set count(t){void 0===t?this.removeAttribute("count"):this.setAttribute("count",String(t))}get maxCount(){return Number(this.getAttribute("max-count")||99)}set maxCount(t){this.setAttribute("max-count",String(t))}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}connectedCallback(){this.syncAttributes()}attributeChangedCallback(t,e,s){"count"!==t&&"max-count"!==t&&"type"!==t||this.syncContent(),this.syncAttributes()}syncAttributes(){this.classList.add(i),this.setAttribute("aria-disabled",String(this.disabled)),this.syncEnum("variant",this.variant,t),this.syncEnum("size",this.size,e),this.syncEnum("type",this.type,s),this.classList.toggle(`${i}--disabled`,this.disabled),this.syncContent()}syncContent(){"number"!==this.type||void 0===this.count?"dot"===this.type&&(this.textContent=""):this.textContent=this.count>this.maxCount?`${this.maxCount}+`:String(this.count)}syncEnum(t,e,s){s.forEach(t=>this.classList.remove(`${i}--${t}`)),s.includes(e)?this.classList.add(`${i}--${e}`):"type"===t&&this.classList.add(`${i}--text`)}}customElements.get("db-badge")||customElements.define("db-badge",DbBadge);export{DbBadge};
+import{coerceToContract as t}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{BADGE_VARIANTS as e,BADGE_SIZES as s,BADGE_TYPES as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const n="designbase-wc-badge";class DbBadge extends HTMLElement{static get observedAttributes(){return["variant","size","type","count","max-count","disabled"]}get variant(){return t(this.getAttribute("variant"),e,"primary")}set variant(t){this.setAttribute("variant",t)}get size(){return t(this.getAttribute("size"),s,"m")}set size(t){this.setAttribute("size",t)}get type(){return t(this.getAttribute("type"),i,"text")}set type(t){this.setAttribute("type",t)}get count(){const t=this.getAttribute("count");return null===t?void 0:Number(t)}set count(t){void 0===t?this.removeAttribute("count"):this.setAttribute("count",String(t))}get maxCount(){return Number(this.getAttribute("max-count")||99)}set maxCount(t){this.setAttribute("max-count",String(t))}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}connectedCallback(){this.syncAttributes()}attributeChangedCallback(t,e,s){"count"!==t&&"max-count"!==t&&"type"!==t||this.syncContent(),this.syncAttributes()}syncAttributes(){this.classList.add(n),this.setAttribute("aria-disabled",String(this.disabled)),this.syncEnum("variant",this.variant,e),this.syncEnum("size",this.size,s),this.syncEnum("type",this.type,i),this.classList.toggle(`${n}--disabled`,this.disabled),this.syncContent()}syncContent(){"number"!==this.type||void 0===this.count?"dot"===this.type&&(this.textContent=""):this.textContent=this.count>this.maxCount?`${this.maxCount}+`:String(this.count)}syncEnum(t,e,s){s.forEach(t=>this.classList.remove(`${n}--${t}`)),s.includes(e)?this.classList.add(`${n}--${e}`):"type"===t&&this.classList.add(`${n}--text`)}}customElements.get("db-badge")||customElements.define("db-badge",DbBadge);export{DbBadge};

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";const t={primary:"primary",secondary:"secondary",outline:"tertiary",ghost:"ghost"},n={s:"s",sm:"s",m:"m",md:"m",l:"l",lg:"l"};class DbBanner extends HTMLElement{static get observedAttributes(){return["title","description","icon","image","image-alt","actions","size","variant","background-image","href","target","clickable","closable","close-label"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}parseActions(){const e=this.getAttribute("actions");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}getIconSize(e){return"s"===e?16:"l"===e?24:20}getActionIconSize(e){return"s"===e?16:"l"===e?20:18}resolveIconName(e){if(e)return e in{close:1,"info-filled":1}?e:void 0}createActionControl(t,n,i,s){const a=this.resolveIconName(t.icon),r=Boolean(t.iconOnly&&a);if(t.href){const n=document.createElement("a");return n.className=`designbase-wc-button designbase-wc-button--${i} designbase-wc-button--${s}`,r&&n.classList.add("designbase-wc-button--icon-only"),n.href=t.href,n.setAttribute("aria-label",t.text),n.addEventListener("click",e=>e.stopPropagation()),r&&a?n.append(e(a,this.getActionIconSize(s))):n.textContent=t.text,t.external&&(n.target="_blank",n.rel="noopener noreferrer"),n}const c=document.createElement("db-button");return c.setAttribute("variant",i),c.setAttribute("size",s),r?(c.setAttribute("icon-only",""),c.setAttribute("aria-label",t.text),a&&c.append(e(a,this.getActionIconSize(s)))):c.textContent=t.text,(e=>{e.addEventListener("click",e=>e.stopPropagation()),e.addEventListener("db-click",e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{bubbles:!0,composed:!0,detail:{index:n,action:t}}))})})(c),c}render(){const i=this.getAttribute("title")||"",s=this.getAttribute("description")||"",a=this.getAttribute("icon"),r=this.getAttribute("image"),c=this.getAttribute("image-alt")||i||"Banner image",o=this.getAttribute("size")||"m",l=this.getAttribute("variant")||"primary",d=this.getAttribute("background-image"),b=this.parseActions(),m=this.getAttribute("href"),u=this.hasAttribute("clickable")||Boolean(m),h=this.hasAttribute("closable");if(this.className=["designbase-wc-banner",`designbase-wc-banner--${o}`,`designbase-wc-banner--${l}`,u&&"designbase-wc-banner--clickable"].filter(Boolean).join(" "),this.replaceChildren(),this.setupInteractivity(u,m),"image"===l&&d){const e=document.createElement("div");e.className="designbase-wc-banner__background",e.style.backgroundImage=`url(${d})`,e.style.backgroundSize="cover",e.style.backgroundPosition="center",e.style.backgroundRepeat="no-repeat",this.append(e);const t=document.createElement("div");t.className="designbase-wc-banner__overlay",this.append(t)}const p=document.createElement("div");if(p.className="designbase-wc-banner__container",a){const t=document.createElement("div");t.className="designbase-wc-banner__icon",t.append(e(a,this.getIconSize(o))),p.append(t)}if(r){const e=document.createElement("div");e.className="designbase-wc-banner__image";const t=document.createElement("img");t.src=r,t.alt=c,e.append(t),p.append(e)}const g=document.createElement("div");if(g.className="designbase-wc-banner__content",i){const e=document.createElement("h3");e.className="designbase-wc-banner__title",e.textContent=i,g.append(e)}if(s){const e=document.createElement("p");e.className="designbase-wc-banner__description",e.textContent=s,g.append(e)}if(p.append(g),b.length>0){const e=document.createElement("div");e.className="designbase-wc-banner__actions",b.forEach((i,s)=>{const a=t[i.variant||"primary"]||"primary",r=n[i.size||"sm"]||"s";e.append(this.createActionControl(i,s,a,r))}),p.append(e)}h&&p.append(this.createCloseButton(o)),this.append(p)}createCloseButton(t){const n=this.getAttribute("close-label")||"Close",i=document.createElement("button");return i.type="button",i.className="designbase-wc-banner__close",i.setAttribute("aria-label",n),i.append(e("close","l"===t?20:16)),i.addEventListener("click",e=>{e.stopPropagation(),this.handleClose()}),i}handleClose(){const e=new CustomEvent("db-close",{bubbles:!0,composed:!0,cancelable:!0,detail:{}});this.dispatchEvent(e)&&this.remove()}setupInteractivity(e,t){if(this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0),this.keydownHandler&&(this.removeEventListener("keydown",this.keydownHandler),this.keydownHandler=void 0),!e)return this.removeAttribute("role"),void this.removeAttribute("tabindex");this.setAttribute("role","button"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0");const activate=()=>{const e=this.getAttribute("target")||"_self";this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0,detail:{href:t}})),t&&("_blank"===e?window.open(t,"_blank","noopener,noreferrer"):window.location.assign(t))};this.clickHandler=()=>activate(),this.keydownHandler=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),activate())},this.addEventListener("click",this.clickHandler),this.addEventListener("keydown",this.keydownHandler)}}customElements.get("db-banner")||customElements.define("db-banner",DbBanner);export{DbBanner};
+import{createDbIcon as e}from"./db-icons.js";import{sanitizeHref as t}from"../core/safe-url.js";import{coerceToContract as n}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{BANNER_SIZES as s,BANNER_VARIANTS as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a={primary:"primary",secondary:"secondary",outline:"tertiary",ghost:"ghost"},r={s:"s",sm:"s",m:"m",md:"m",l:"l",lg:"l"};class DbBanner extends HTMLElement{static get observedAttributes(){return["title","description","icon","image","image-alt","actions","size","variant","background-image","href","target","clickable","closable","close-label"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}parseActions(){const e=this.getAttribute("actions");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}getIconSize(e){return"s"===e?16:"l"===e?24:20}getActionIconSize(e){return"s"===e?16:"l"===e?20:18}resolveIconName(e){if(e)return e in{close:1,"info-filled":1}?e:void 0}createActionControl(n,s,i,a){const r=this.resolveIconName(n.icon),o=Boolean(n.iconOnly&&r),c=t(n.href,"");if(c){const t=document.createElement("a");return t.className=`designbase-wc-button designbase-wc-button--${i} designbase-wc-button--${a}`,o&&t.classList.add("designbase-wc-button--icon-only"),t.href=c,t.setAttribute("aria-label",n.text),t.addEventListener("click",e=>e.stopPropagation()),o&&r?t.append(e(r,this.getActionIconSize(a))):t.textContent=n.text,n.external&&(t.target="_blank",t.rel="noopener noreferrer"),t}const l=document.createElement("db-button");return l.setAttribute("variant",i),l.setAttribute("size",a),o?(l.setAttribute("icon-only",""),l.setAttribute("aria-label",n.text),r&&l.append(e(r,this.getActionIconSize(a)))):l.textContent=n.text,(e=>{e.addEventListener("click",e=>e.stopPropagation()),e.addEventListener("db-click",e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{bubbles:!0,composed:!0,detail:{index:s,action:n}}))})})(l),l}render(){const o=this.getAttribute("title")||"",c=this.getAttribute("description")||"",l=this.getAttribute("icon"),d=this.getAttribute("image"),b=this.getAttribute("image-alt")||o||"Banner image",m=n(this.getAttribute("size"),s,"m"),u=n(this.getAttribute("variant"),i,"primary"),p=this.getAttribute("background-image"),h=this.parseActions(),g=this.getAttribute("href"),v=t(g,""),k=this.hasAttribute("clickable")||Boolean(v),A=this.hasAttribute("closable");if(this.className=["designbase-wc-banner",`designbase-wc-banner--${m}`,`designbase-wc-banner--${u}`,k&&"designbase-wc-banner--clickable"].filter(Boolean).join(" "),this.replaceChildren(),this.setupInteractivity(k,v),"image"===u&&p){const e=document.createElement("div");e.className="designbase-wc-banner__background",e.style.backgroundImage=`url(${p})`,e.style.backgroundSize="cover",e.style.backgroundPosition="center",e.style.backgroundRepeat="no-repeat",this.append(e);const t=document.createElement("div");t.className="designbase-wc-banner__overlay",this.append(t)}const w=document.createElement("div");if(w.className="designbase-wc-banner__container",l){const t=document.createElement("div");t.className="designbase-wc-banner__icon",t.append(e(l,this.getIconSize(m))),w.append(t)}if(d){const e=document.createElement("div");e.className="designbase-wc-banner__image";const t=document.createElement("img");t.src=d,t.alt=b,e.append(t),w.append(e)}const E=document.createElement("div");if(E.className="designbase-wc-banner__content",o){const e=document.createElement("h3");e.className="designbase-wc-banner__title",e.textContent=o,E.append(e)}if(c){const e=document.createElement("p");e.className="designbase-wc-banner__description",e.textContent=c,E.append(e)}if(w.append(E),h.length>0){const e=document.createElement("div");e.className="designbase-wc-banner__actions",h.forEach((t,n)=>{const s=a[t.variant||"primary"]||"primary",i=r[t.size||"sm"]||"s";e.append(this.createActionControl(t,n,s,i))}),w.append(e)}A&&w.append(this.createCloseButton(m)),this.append(w)}createCloseButton(t){const n=this.getAttribute("close-label")||"Close",s=document.createElement("button");return s.type="button",s.className="designbase-wc-banner__close",s.setAttribute("aria-label",n),s.append(e("close","l"===t?20:16)),s.addEventListener("click",e=>{e.stopPropagation(),this.handleClose()}),s}handleClose(){const e=new CustomEvent("db-close",{bubbles:!0,composed:!0,cancelable:!0,detail:{}});this.dispatchEvent(e)&&this.remove()}setupInteractivity(e,t){if(this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0),this.keydownHandler&&(this.removeEventListener("keydown",this.keydownHandler),this.keydownHandler=void 0),!e)return this.removeAttribute("role"),void this.removeAttribute("tabindex");this.setAttribute("role","button"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0");const activate=()=>{const e=this.getAttribute("target")||"_self";this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0,detail:{href:t}})),t&&("_blank"===e?window.open(t,"_blank","noopener,noreferrer"):window.location.assign(t))};this.clickHandler=()=>activate(),this.keydownHandler=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),activate())},this.addEventListener("click",this.clickHandler),this.addEventListener("keydown",this.keydownHandler)}}customElements.get("db-banner")||customElements.define("db-banner",DbBanner);export{DbBanner};

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";const t={s:12,m:14,l:16};class DbBreadcrumbs extends HTMLElement{constructor(){super(...arguments),this.openMenuId=null,this.onDocumentMouseDown=null,this.onDocumentKeyDown=null}static get observedAttributes(){return["items","size","variant","breadcrumb-style","max-items","menu-dropdown","max-label-length"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}disconnectedCallback(){this.removeGlobalListeners()}attributeChangedCallback(){this.isConnected&&(this.openMenuId=null,this.render())}get menuDropdown(){return this.hasAttribute("menu-dropdown")}get maxLabelLength(){const e=Number(this.getAttribute("max-label-length"));return Number.isFinite(e)&&e>0?e:12}get resolvedVariant(){return this.getAttribute("variant")||this.getAttribute("breadcrumb-style")||"default"}itemId(e,t){return e.id||`item-${t}`}menuItemId(e,t){return e.id||`menu-${t}`}visibleItems(){const e=this.items,t=Number(this.getAttribute("max-items")||0);if(!t||e.length<=t)return e;const n=e[0],s=e[e.length-1],a=e.slice(1,-1),r=t-2;if(r<=0)return[n,s];const i=Math.floor(a.length/2)-Math.floor(r/2);return[n,...a.slice(i,i+r),s]}shouldUseDropdown(e){return this.menuDropdown&&Boolean(e.menu?.length)}closeMenu(){this.openMenuId&&(this.openMenuId=null,this.removeGlobalListeners(),this.updateDropdownStates())}openMenu(e){this.openMenuId=e,this.addGlobalListeners(),this.updateDropdownStates()}toggleMenu(e){this.openMenuId===e?this.closeMenu():this.openMenu(e)}addGlobalListeners(){this.onDocumentMouseDown||(this.onDocumentMouseDown=e=>{this.contains(e.target)||this.closeMenu()},this.onDocumentKeyDown=e=>{"Escape"===e.key&&this.closeMenu()},document.addEventListener("mousedown",this.onDocumentMouseDown),document.addEventListener("keydown",this.onDocumentKeyDown))}removeGlobalListeners(){this.onDocumentMouseDown&&(document.removeEventListener("mousedown",this.onDocumentMouseDown),this.onDocumentMouseDown=null),this.onDocumentKeyDown&&(document.removeEventListener("keydown",this.onDocumentKeyDown),this.onDocumentKeyDown=null)}updateDropdownStates(){this.querySelectorAll("[data-breadcrumb-dropdown]").forEach(e=>{const t=e.dataset.breadcrumbDropdown||"",n=this.openMenuId===t;e.classList.toggle("designbase-wc-breadcrumbs__dropdown--open",n);const s=e.querySelector(".designbase-wc-breadcrumbs__trigger");s&&s.setAttribute("aria-expanded",String(n))})}createLabel(e){const t=function formatBreadcrumbLabel(e,t){return!t||e.length<=t?{text:e,full:e,truncated:!1}:{text:`${e.slice(0,t)}...`,full:e,truncated:!0}}(e,this.maxLabelLength),n=document.createElement("span");return n.className="designbase-wc-breadcrumbs__label",n.textContent=t.text,t.truncated&&n.setAttribute("title",t.full),n}createMenuItem(t,n,s){const a=t.href&&!t.disabled?document.createElement("a"):document.createElement("button");if(a.className=["designbase-wc-breadcrumbs__menu-item",t.active&&"designbase-wc-breadcrumbs__menu-item--active",t.disabled&&"designbase-wc-breadcrumbs__menu-item--disabled"].filter(Boolean).join(" "),a.setAttribute("role","menuitem"),a instanceof HTMLButtonElement?(a.type="button",a.disabled=Boolean(t.disabled)):a.href=t.href||"#",t.icon){const n=document.createElement("span");n.className="designbase-wc-breadcrumbs__icon",n.append(e(t.icon,16)),a.append(n)}return a.append(this.createLabel(t.label)),a.addEventListener("click",e=>{t.disabled?e.preventDefault():(this.closeMenu(),this.dispatchEvent(new CustomEvent("db-menu-click",{detail:{menuItem:{...t,id:this.menuItemId(t,n)},parentItem:s},bubbles:!0,composed:!0})))}),a}createDropdownItem(t,n,s,a){const r=this.itemId(t,n),i=this.openMenuId===r,d=document.createElement("div");d.className=["designbase-wc-breadcrumbs__dropdown",i&&"designbase-wc-breadcrumbs__dropdown--open"].filter(Boolean).join(" "),d.dataset.breadcrumbDropdown=r;const o=document.createElement("button");if(o.type="button",o.className=["designbase-wc-breadcrumbs__trigger",(s||t.active)&&"designbase-wc-breadcrumbs__trigger--active",t.disabled&&"designbase-wc-breadcrumbs__trigger--disabled"].filter(Boolean).join(" "),o.setAttribute("aria-haspopup","menu"),o.setAttribute("aria-expanded",String(i)),o.disabled=Boolean(t.disabled),t.icon){const n=document.createElement("span");n.className="designbase-wc-breadcrumbs__icon",n.append(e(t.icon,16)),o.append(n)}o.append(this.createLabel(t.label));const c=document.createElement("span");c.className="designbase-wc-breadcrumbs__chevron",c.setAttribute("aria-hidden","true"),c.append(e("chevron-down",a)),o.append(c),o.addEventListener("click",e=>{e.stopPropagation(),t.disabled||this.toggleMenu(r)}),d.append(o);const u=document.createElement("div");return u.className="designbase-wc-breadcrumbs__menu",u.setAttribute("role","menu"),t.menu?.forEach((e,n)=>{u.append(this.createMenuItem(e,n,t))}),d.append(u),d}createStandardItem(t,n,s){const a=!t.href||s||t.disabled?document.createElement("span"):document.createElement("a");if(a.className=a instanceof HTMLAnchorElement?["designbase-wc-breadcrumbs__link",t.active&&"designbase-wc-breadcrumbs__link--active",t.disabled&&"designbase-wc-breadcrumbs__link--disabled"].filter(Boolean).join(" "):["designbase-wc-breadcrumbs__text",s&&"designbase-wc-breadcrumbs__text--active",t.disabled&&"designbase-wc-breadcrumbs__text--disabled"].filter(Boolean).join(" "),t.icon){const n=document.createElement("span");n.className="designbase-wc-breadcrumbs__icon",n.append(e(t.icon,16)),a.append(n)}return a.append(this.createLabel(t.label)),a instanceof HTMLAnchorElement&&(a.href=t.href||"#"),a.addEventListener("click",e=>{(t.disabled||t.active||s)&&e.preventDefault(),this.dispatchEvent(new CustomEvent("db-click",{detail:{item:t},bubbles:!0,composed:!0}))}),a}render(){const n=this.getAttribute("size")||"m",s=this.resolvedVariant,a=this.visibleItems(),r=a.length<this.items.length,i=t[n]||14;this.className=["designbase-wc-breadcrumbs",`designbase-wc-breadcrumbs--${n}`,`designbase-wc-breadcrumbs--${s}`,r&&"designbase-wc-breadcrumbs--collapsed"].filter(Boolean).join(" "),this.setAttribute("role","navigation"),this.setAttribute("aria-label","브레드크럼 네비게이션"),this.replaceChildren();const d=document.createElement("ol");d.className="designbase-wc-breadcrumbs__list",a.forEach((t,n)=>{const s=n===a.length-1,r=document.createElement("li");if(r.className="designbase-wc-breadcrumbs__item",this.shouldUseDropdown(t)?r.append(this.createDropdownItem(t,n,s,i)):r.append(this.createStandardItem(t,n,s)),!s){const t=document.createElement("span");t.className="designbase-wc-breadcrumbs__separator",t.setAttribute("aria-hidden","true"),t.append(e("chevron-right",16)),r.append(t)}d.append(r)}),this.append(d)}}customElements.get("db-breadcrumbs")||customElements.define("db-breadcrumbs",DbBreadcrumbs);export{DbBreadcrumbs};
+import{createDbIcon as e}from"./db-icons.js";import{sanitizeHref as t}from"../core/safe-url.js";import{coerceToContract as n}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{BREADCRUMBS_VARIANTS as s,BREADCRUMBS_SIZES as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const r={s:12,m:14,l:16};class DbBreadcrumbs extends HTMLElement{constructor(){super(...arguments),this.openMenuId=null,this.onDocumentMouseDown=null,this.onDocumentKeyDown=null}static get observedAttributes(){return["items","size","variant","breadcrumb-style","max-items","menu-dropdown","max-label-length"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}disconnectedCallback(){this.removeGlobalListeners()}attributeChangedCallback(){this.isConnected&&(this.openMenuId=null,this.render())}get menuDropdown(){return this.hasAttribute("menu-dropdown")}get maxLabelLength(){const e=Number(this.getAttribute("max-label-length"));return Number.isFinite(e)&&e>0?e:12}get resolvedVariant(){return n(this.getAttribute("variant")||this.getAttribute("breadcrumb-style"),s,"default")}itemId(e,t){return e.id||`item-${t}`}menuItemId(e,t){return e.id||`menu-${t}`}visibleItems(){const e=this.items,t=Number(this.getAttribute("max-items")||0);if(!t||e.length<=t)return e;const n=e[0],s=e[e.length-1],a=e.slice(1,-1),r=t-2;if(r<=0)return[n,s];const i=Math.floor(a.length/2)-Math.floor(r/2);return[n,...a.slice(i,i+r),s]}shouldUseDropdown(e){return this.menuDropdown&&Boolean(e.menu?.length)}closeMenu(){this.openMenuId&&(this.openMenuId=null,this.removeGlobalListeners(),this.updateDropdownStates())}openMenu(e){this.openMenuId=e,this.addGlobalListeners(),this.updateDropdownStates()}toggleMenu(e){this.openMenuId===e?this.closeMenu():this.openMenu(e)}addGlobalListeners(){this.onDocumentMouseDown||(this.onDocumentMouseDown=e=>{this.contains(e.target)||this.closeMenu()},this.onDocumentKeyDown=e=>{"Escape"===e.key&&this.closeMenu()},document.addEventListener("mousedown",this.onDocumentMouseDown),document.addEventListener("keydown",this.onDocumentKeyDown))}removeGlobalListeners(){this.onDocumentMouseDown&&(document.removeEventListener("mousedown",this.onDocumentMouseDown),this.onDocumentMouseDown=null),this.onDocumentKeyDown&&(document.removeEventListener("keydown",this.onDocumentKeyDown),this.onDocumentKeyDown=null)}updateDropdownStates(){this.querySelectorAll("[data-breadcrumb-dropdown]").forEach(e=>{const t=e.dataset.breadcrumbDropdown||"",n=this.openMenuId===t;e.classList.toggle("designbase-wc-breadcrumbs__dropdown--open",n);const s=e.querySelector(".designbase-wc-breadcrumbs__trigger");s&&s.setAttribute("aria-expanded",String(n))})}createLabel(e){const t=function formatBreadcrumbLabel(e,t){return!t||e.length<=t?{text:e,full:e,truncated:!1}:{text:`${e.slice(0,t)}...`,full:e,truncated:!0}}(e,this.maxLabelLength),n=document.createElement("span");return n.className="designbase-wc-breadcrumbs__label",n.textContent=t.text,t.truncated&&n.setAttribute("title",t.full),n}createMenuItem(n,s,a){const r=n.href&&!n.disabled?document.createElement("a"):document.createElement("button");if(r.className=["designbase-wc-breadcrumbs__menu-item",n.active&&"designbase-wc-breadcrumbs__menu-item--active",n.disabled&&"designbase-wc-breadcrumbs__menu-item--disabled"].filter(Boolean).join(" "),r.setAttribute("role","menuitem"),r instanceof HTMLButtonElement?(r.type="button",r.disabled=Boolean(n.disabled)):r.href=t(n.href,"#"),n.icon){const t=document.createElement("span");t.className="designbase-wc-breadcrumbs__icon",t.append(e(n.icon,16)),r.append(t)}return r.append(this.createLabel(n.label)),r.addEventListener("click",e=>{n.disabled?e.preventDefault():(this.closeMenu(),this.dispatchEvent(new CustomEvent("db-menu-click",{detail:{menuItem:{...n,id:this.menuItemId(n,s)},parentItem:a},bubbles:!0,composed:!0})))}),r}createDropdownItem(t,n,s,a){const r=this.itemId(t,n),i=this.openMenuId===r,o=document.createElement("div");o.className=["designbase-wc-breadcrumbs__dropdown",i&&"designbase-wc-breadcrumbs__dropdown--open"].filter(Boolean).join(" "),o.dataset.breadcrumbDropdown=r;const d=document.createElement("button");if(d.type="button",d.className=["designbase-wc-breadcrumbs__trigger",(s||t.active)&&"designbase-wc-breadcrumbs__trigger--active",t.disabled&&"designbase-wc-breadcrumbs__trigger--disabled"].filter(Boolean).join(" "),d.setAttribute("aria-haspopup","menu"),d.setAttribute("aria-expanded",String(i)),d.disabled=Boolean(t.disabled),t.icon){const n=document.createElement("span");n.className="designbase-wc-breadcrumbs__icon",n.append(e(t.icon,16)),d.append(n)}d.append(this.createLabel(t.label));const c=document.createElement("span");c.className="designbase-wc-breadcrumbs__chevron",c.setAttribute("aria-hidden","true"),c.append(e("chevron-down",a)),d.append(c),d.addEventListener("click",e=>{e.stopPropagation(),t.disabled||this.toggleMenu(r)}),o.append(d);const u=document.createElement("div");return u.className="designbase-wc-breadcrumbs__menu",u.setAttribute("role","menu"),t.menu?.forEach((e,n)=>{u.append(this.createMenuItem(e,n,t))}),o.append(u),o}createStandardItem(n,s,a){const r=!n.href||a||n.disabled?document.createElement("span"):document.createElement("a");if(r.className=r instanceof HTMLAnchorElement?["designbase-wc-breadcrumbs__link",n.active&&"designbase-wc-breadcrumbs__link--active",n.disabled&&"designbase-wc-breadcrumbs__link--disabled"].filter(Boolean).join(" "):["designbase-wc-breadcrumbs__text",a&&"designbase-wc-breadcrumbs__text--active",n.disabled&&"designbase-wc-breadcrumbs__text--disabled"].filter(Boolean).join(" "),n.icon){const t=document.createElement("span");t.className="designbase-wc-breadcrumbs__icon",t.append(e(n.icon,16)),r.append(t)}return r.append(this.createLabel(n.label)),r instanceof HTMLAnchorElement&&(r.href=t(n.href,"#")),r.addEventListener("click",e=>{(n.disabled||n.active||a)&&e.preventDefault(),this.dispatchEvent(new CustomEvent("db-click",{detail:{item:n},bubbles:!0,composed:!0}))}),r}render(){const t=n(this.getAttribute("size"),a,"m"),s=this.resolvedVariant,i=this.visibleItems(),o=i.length<this.items.length,d=r[t]||14;this.className=["designbase-wc-breadcrumbs",`designbase-wc-breadcrumbs--${t}`,`designbase-wc-breadcrumbs--${s}`,o&&"designbase-wc-breadcrumbs--collapsed"].filter(Boolean).join(" "),this.setAttribute("role","navigation"),this.setAttribute("aria-label","브레드크럼 네비게이션"),this.replaceChildren();const c=document.createElement("ol");c.className="designbase-wc-breadcrumbs__list",i.forEach((t,n)=>{const s=n===i.length-1,a=document.createElement("li");if(a.className="designbase-wc-breadcrumbs__item",this.shouldUseDropdown(t)?a.append(this.createDropdownItem(t,n,s,d)):a.append(this.createStandardItem(t,n,s)),!s){const t=document.createElement("span");t.className="designbase-wc-breadcrumbs__separator",t.setAttribute("aria-hidden","true"),t.append(e("chevron-right",16)),a.append(t)}c.append(a)}),this.append(c)}}customElements.get("db-breadcrumbs")||customElements.define("db-breadcrumbs",DbBreadcrumbs);export{DbBreadcrumbs};

package/dist/esm/components/db-button.d.ts

@@ -21,6 +21,8 @@ declare class DbButton extends HTMLElement {
     set accentStyle(value: string);
     get type(): string;
     set type(value: string);
+    get href(): string;
+    set href(value: string);
     get loadingText(): string;
     set loadingText(value: string);
     get disabled(): boolean;

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

@@ -1 +1 @@
-import{isDbIconName as t,createDbIcon as e}from"./db-icons.js";import{coerceWithAliases as s,coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{BUTTON_RADII as n,BUTTON_SIZES as a,BUTTON_ACCENT_STYLES as r,BUTTON_VARIANT_ALIASES as c,BUTTON_VARIANTS as o}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const d=["disabled","loading","icon-only","full-width"];class DbButton extends HTMLElement{constructor(){super(...arguments),this.handleClick=t=>{if(this.disabled||this.loading)return t.preventDefault(),void t.stopPropagation();this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.disabled||this.loading||this.classList.add("designbase-wc-button--pressed"),this.click())},this.handleKeyUp=t=>{"Enter"!==t.key&&" "!==t.key||this.classList.remove("designbase-wc-button--pressed")},this.handlePointerDown=()=>{this.disabled||this.loading||this.classList.add("designbase-wc-button--pressed")},this.handlePointerUp=()=>{this.classList.remove("designbase-wc-button--pressed")}}static get observedAttributes(){return["variant","size","radius","accent-style","type","loading-text","start-icon","end-icon",...d]}get variant(){return s(this.getAttribute("variant"),o,c,"primary")}set variant(t){this.setAttribute("variant",t)}get size(){return i(this.getAttribute("size"),a,"m")}set size(t){this.setAttribute("size",t)}get radius(){const t=this.getAttribute("radius");return t?i(t,n,n[0]):""}set radius(t){t?this.setAttribute("radius",t):this.removeAttribute("radius")}get accentStyle(){return i(this.getAttribute("accent-style"),r,"solid")}set accentStyle(t){t?this.setAttribute("accent-style",t):this.removeAttribute("accent-style")}get type(){return this.getAttribute("type")||"button"}set type(t){this.setAttribute("type",t)}get loadingText(){return this.getAttribute("loading-text")||""}set loadingText(t){t?this.setAttribute("loading-text",t):this.removeAttribute("loading-text")}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get loading(){return this.hasAttribute("loading")}set loading(t){this.toggleAttribute("loading",t)}get iconOnly(){return this.hasAttribute("icon-only")}set iconOnly(t){this.toggleAttribute("icon-only",t)}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(t){this.toggleAttribute("full-width",t)}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("keyup",this.handleKeyUp),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("pointerleave",this.handlePointerUp),this.addEventListener("pointercancel",this.handlePointerUp),this.syncAttributes()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("keyup",this.handleKeyUp),this.removeEventListener("pointerdown",this.handlePointerDown),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointerleave",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerUp)}attributeChangedCallback(){this.syncAttributes()}syncAttributes(){this.classList.add("designbase-wc-button"),this.setAttribute("role","button"),this.setAttribute("aria-disabled",String(this.disabled||this.loading)),this.loading?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy"),this.disabled||this.loading?this.removeAttribute("tabindex"):this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.syncModifier("variant",this.variant),this.syncModifier("size",this.size),this.syncRadius(),this.syncAccentStyle(),this.syncAccentField(),this.syncAccentRing(),this.syncBooleanModifier("disabled"),this.syncBooleanModifier("icon-only"),this.syncBooleanModifier("full-width"),this.syncLoadingVisual(),this.loading?(this.querySelector(":scope > .designbase-wc-button__start-icon")?.remove(),this.querySelector(":scope > .designbase-wc-button__end-icon")?.remove()):this.syncIcons()}getIconSize(){return"s"===this.size?16:"l"===this.size?24:20}resolveIconName(e){if(e&&t(e))return e}isManagedIconNode(t){return t instanceof HTMLElement&&(t.classList.contains("designbase-wc-button__start-icon")||t.classList.contains("designbase-wc-button__end-icon")||t.classList.contains("designbase-wc-button__spinner")||t.classList.contains("designbase-wc-button__accent-field")||t.classList.contains("designbase-wc-button__accent-glass")||t.classList.contains("designbase-wc-button__accent-orb")||t.classList.contains("designbase-wc-button__accent-ring"))}syncIcons(){const t=this.resolveIconName(this.getAttribute("start-icon")),s=this.resolveIconName(this.getAttribute("end-icon")),i=this.getIconSize();let n=this.querySelector(":scope > .designbase-wc-button__start-icon");if(t){if(!n){n=document.createElement("span"),n.className="designbase-wc-button__start-icon",n.setAttribute("aria-hidden","true");const t=Array.from(this.childNodes).find(t=>!this.isManagedIconNode(t));t?this.insertBefore(n,t):this.append(n)}n.replaceChildren(e(t,i))}else n?.remove();let a=this.querySelector(":scope > .designbase-wc-button__end-icon");s?(a||(a=document.createElement("span"),a.className="designbase-wc-button__end-icon",a.setAttribute("aria-hidden","true")),a.replaceChildren(e(s,i)),this.append(a)):a?.remove()}getDefaultRadiusClass(){if(n.includes(this.radius))return`designbase-wc-button--radius-${this.radius}`;const t=a.includes(this.size)?this.size:"m";return`designbase-wc-button--radius-${"s"===t||"l"===t?t:"m"}`}syncRadius(){n.forEach(t=>this.classList.remove(`designbase-wc-button--radius-${t}`)),this.classList.add(this.getDefaultRadiusClass())}syncAccentStyle(){if(r.forEach(t=>this.classList.remove(`designbase-wc-button--accent-${t}`)),"accent"!==this.variant)return;const t=this.accentStyle,e=r.includes(t)?t:"solid";this.classList.add(`designbase-wc-button--accent-${e}`)}syncAccentRing(){const t="accent"===this.variant&&"outline"===this.accentStyle,e=this.querySelector(":scope > .designbase-wc-button__accent-ring");if(!t)return void e?.remove();if(e)return;const s=document.createElement("span");s.className="designbase-wc-button__accent-ring",s.setAttribute("aria-hidden","true");const i=document.createElement("span");i.className="designbase-wc-button__accent-ring-spin",s.appendChild(i),this.insertBefore(s,this.firstChild)}syncAccentField(){const t="accent"===this.variant&&"gradient"===this.accentStyle,e=this.querySelector(":scope > .designbase-wc-button__accent-field"),s=this.querySelector(":scope > .designbase-wc-button__accent-glass");if(!t)return e?.remove(),void s?.remove();let i=e;if(!i){i=document.createElement("span"),i.className="designbase-wc-button__accent-field",i.setAttribute("aria-hidden","true");for(let t=1;t<=5;t+=1){const e=document.createElement("span");e.className=`designbase-wc-button__accent-orb designbase-wc-button__accent-orb--${t}`,i.appendChild(e)}this.insertBefore(i,this.firstChild)}if(!s){const t=document.createElement("span");t.className="designbase-wc-button__accent-glass",t.setAttribute("aria-hidden","true"),i.insertAdjacentElement("afterend",t)}}syncModifier(t,e){if(Array.from(this.classList).filter(e=>e.startsWith(`designbase-wc-button--${t}-`)).forEach(t=>this.classList.remove(t)),"variant"===t||"size"===t){("variant"===t?o:a).forEach(t=>this.classList.remove(`designbase-wc-button--${t}`)),this.classList.add(`designbase-wc-button--${e}`)}}syncBooleanModifier(t){const e=`designbase-wc-button--${t}`;this.classList.toggle(e,this.hasAttribute(t))}getSpinnerSize(){return a.includes(this.size)?this.size:"m"}syncLoadingVisual(){this.classList.toggle("designbase-wc-button--loading",this.loading);const t=this.querySelector(":scope > .designbase-wc-button__spinner");if(!this.loading)return void t?.remove();const e=`designbase-wc-button__spinner designbase-wc-spinner designbase-wc-spinner--circular designbase-wc-spinner--${this.getSpinnerSize()}`;if(t)return t.className=e,void t.setAttribute("aria-hidden","true");const s=document.createElement("span");s.className=e,s.setAttribute("aria-hidden","true"),s.innerHTML='<svg class="designbase-wc-spinner__circular" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="designbase-wc-spinner__circular-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle><circle class="designbase-wc-spinner__circular-indicator" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></circle></svg>',this.insertBefore(s,this.firstChild)}}customElements.get("db-button")||customElements.define("db-button",DbButton);export{DbButton};
+import{isDbIconName as t,createDbIcon as e}from"./db-icons.js";import{sanitizeHref as s}from"../core/safe-url.js";import{coerceWithAliases as i,coerceToContract as n}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{BUTTON_RADII as r,BUTTON_SIZES as a,BUTTON_ACCENT_STYLES as c,BUTTON_VARIANTS as o,BUTTON_VARIANT_ALIASES as d}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const l=["disabled","loading","icon-only","full-width"];class DbButton extends HTMLElement{constructor(){super(...arguments),this.handleClick=t=>{if(this.disabled||this.loading)return t.preventDefault(),void t.stopPropagation();this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}));const e=this.href;if(e){"_blank"===(this.getAttribute("target")||"_self")?window.open(e,"_blank","noopener,noreferrer"):window.location.assign(e)}},this.handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.disabled||this.loading||this.classList.add("designbase-wc-button--pressed"),this.click())},this.handleKeyUp=t=>{"Enter"!==t.key&&" "!==t.key||this.classList.remove("designbase-wc-button--pressed")},this.handlePointerDown=()=>{this.disabled||this.loading||this.classList.add("designbase-wc-button--pressed")},this.handlePointerUp=()=>{this.classList.remove("designbase-wc-button--pressed")}}static get observedAttributes(){return["variant","size","radius","accent-style","type","href","loading-text","start-icon","end-icon",...l]}get variant(){return i(this.getAttribute("variant"),o,d,"primary")}set variant(t){this.setAttribute("variant",t)}get size(){return n(this.getAttribute("size"),a,"m")}set size(t){this.setAttribute("size",t)}get radius(){const t=this.getAttribute("radius");return t?n(t,r,r[0]):""}set radius(t){t?this.setAttribute("radius",t):this.removeAttribute("radius")}get accentStyle(){return n(this.getAttribute("accent-style"),c,"solid")}set accentStyle(t){t?this.setAttribute("accent-style",t):this.removeAttribute("accent-style")}get type(){return this.getAttribute("type")||"button"}set type(t){this.setAttribute("type",t)}get href(){return s(this.getAttribute("href"),"")}set href(t){t?this.setAttribute("href",t):this.removeAttribute("href")}get loadingText(){return this.getAttribute("loading-text")||""}set loadingText(t){t?this.setAttribute("loading-text",t):this.removeAttribute("loading-text")}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get loading(){return this.hasAttribute("loading")}set loading(t){this.toggleAttribute("loading",t)}get iconOnly(){return this.hasAttribute("icon-only")}set iconOnly(t){this.toggleAttribute("icon-only",t)}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(t){this.toggleAttribute("full-width",t)}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("keyup",this.handleKeyUp),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("pointerleave",this.handlePointerUp),this.addEventListener("pointercancel",this.handlePointerUp),this.syncAttributes()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("keyup",this.handleKeyUp),this.removeEventListener("pointerdown",this.handlePointerDown),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointerleave",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerUp)}attributeChangedCallback(){this.syncAttributes()}syncAttributes(){this.classList.add("designbase-wc-button"),this.setAttribute("role","button"),this.setAttribute("aria-disabled",String(this.disabled||this.loading)),this.loading?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy"),this.disabled||this.loading?this.removeAttribute("tabindex"):this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.syncModifier("variant",this.variant),this.syncModifier("size",this.size),this.syncRadius(),this.syncAccentStyle(),this.syncAccentField(),this.syncAccentRing(),this.syncBooleanModifier("disabled"),this.syncBooleanModifier("icon-only"),this.syncBooleanModifier("full-width"),this.syncLoadingVisual(),this.loading?(this.querySelector(":scope > .designbase-wc-button__start-icon")?.remove(),this.querySelector(":scope > .designbase-wc-button__end-icon")?.remove()):this.syncIcons()}getIconSize(){return"s"===this.size?16:"l"===this.size?24:20}resolveIconName(e){if(e&&t(e))return e}isManagedIconNode(t){return t instanceof HTMLElement&&(t.classList.contains("designbase-wc-button__start-icon")||t.classList.contains("designbase-wc-button__end-icon")||t.classList.contains("designbase-wc-button__spinner")||t.classList.contains("designbase-wc-button__accent-field")||t.classList.contains("designbase-wc-button__accent-glass")||t.classList.contains("designbase-wc-button__accent-orb")||t.classList.contains("designbase-wc-button__accent-ring"))}syncIcons(){const t=this.resolveIconName(this.getAttribute("start-icon")),s=this.resolveIconName(this.getAttribute("end-icon")),i=this.getIconSize();let n=this.querySelector(":scope > .designbase-wc-button__start-icon");if(t){if(!n){n=document.createElement("span"),n.className="designbase-wc-button__start-icon",n.setAttribute("aria-hidden","true");const t=Array.from(this.childNodes).find(t=>!this.isManagedIconNode(t));t?this.insertBefore(n,t):this.append(n)}n.replaceChildren(e(t,i))}else n?.remove();let r=this.querySelector(":scope > .designbase-wc-button__end-icon");s?(r||(r=document.createElement("span"),r.className="designbase-wc-button__end-icon",r.setAttribute("aria-hidden","true")),r.replaceChildren(e(s,i)),this.append(r)):r?.remove()}getDefaultRadiusClass(){if(r.includes(this.radius))return`designbase-wc-button--radius-${this.radius}`;const t=a.includes(this.size)?this.size:"m";return`designbase-wc-button--radius-${"s"===t||"l"===t?t:"m"}`}syncRadius(){r.forEach(t=>this.classList.remove(`designbase-wc-button--radius-${t}`)),this.classList.add(this.getDefaultRadiusClass())}syncAccentStyle(){if(c.forEach(t=>this.classList.remove(`designbase-wc-button--accent-${t}`)),"accent"!==this.variant)return;const t=this.accentStyle,e=c.includes(t)?t:"solid";this.classList.add(`designbase-wc-button--accent-${e}`)}syncAccentRing(){const t="accent"===this.variant&&"outline"===this.accentStyle,e=this.querySelector(":scope > .designbase-wc-button__accent-ring");if(!t)return void e?.remove();if(e)return;const s=document.createElement("span");s.className="designbase-wc-button__accent-ring",s.setAttribute("aria-hidden","true");const i=document.createElement("span");i.className="designbase-wc-button__accent-ring-spin",s.appendChild(i),this.insertBefore(s,this.firstChild)}syncAccentField(){const t="accent"===this.variant&&"gradient"===this.accentStyle,e=this.querySelector(":scope > .designbase-wc-button__accent-field"),s=this.querySelector(":scope > .designbase-wc-button__accent-glass");if(!t)return e?.remove(),void s?.remove();let i=e;if(!i){i=document.createElement("span"),i.className="designbase-wc-button__accent-field",i.setAttribute("aria-hidden","true");for(let t=1;t<=5;t+=1){const e=document.createElement("span");e.className=`designbase-wc-button__accent-orb designbase-wc-button__accent-orb--${t}`,i.appendChild(e)}this.insertBefore(i,this.firstChild)}if(!s){const t=document.createElement("span");t.className="designbase-wc-button__accent-glass",t.setAttribute("aria-hidden","true"),i.insertAdjacentElement("afterend",t)}}syncModifier(t,e){if(Array.from(this.classList).filter(e=>e.startsWith(`designbase-wc-button--${t}-`)).forEach(t=>this.classList.remove(t)),"variant"===t||"size"===t){("variant"===t?o:a).forEach(t=>this.classList.remove(`designbase-wc-button--${t}`)),this.classList.add(`designbase-wc-button--${e}`)}}syncBooleanModifier(t){const e=`designbase-wc-button--${t}`;this.classList.toggle(e,this.hasAttribute(t))}getSpinnerSize(){return a.includes(this.size)?this.size:"m"}syncLoadingVisual(){this.classList.toggle("designbase-wc-button--loading",this.loading);const t=this.querySelector(":scope > .designbase-wc-button__spinner");if(!this.loading)return void t?.remove();const e=`designbase-wc-button__spinner designbase-wc-spinner designbase-wc-spinner--circular designbase-wc-spinner--${this.getSpinnerSize()}`;if(t)return t.className=e,void t.setAttribute("aria-hidden","true");const s=document.createElement("span");s.className=e,s.setAttribute("aria-hidden","true"),s.innerHTML='<svg class="designbase-wc-spinner__circular" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="designbase-wc-spinner__circular-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle><circle class="designbase-wc-spinner__circular-indicator" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></circle></svg>',this.insertBefore(s,this.firstChild)}}customElements.get("db-button")||customElements.define("db-button",DbButton);export{DbButton};

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

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";import{t as e}from"../core/i18n.js";class DbCarousel extends HTMLElement{constructor(){super(...arguments),this.currentIndex=0,this.timer=null,this.isAutoPlaying=!1}static get observedAttributes(){return["items","size","variant","theme","transition","auto-play","auto-play-interval","infinite","show-navigation","show-indicators","indicator-style","show-auto-play-control","show-title","show-description","disabled","readonly"]}get items(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}connectedCallback(){this.style.display="block",this.clampCurrentIndex(),this.isAutoPlaying=this.getBool("auto-play"),this.startAutoPlay(),this.render()}disconnectedCallback(){this.stopAutoPlay()}attributeChangedCallback(t){"items"===t&&this.clampCurrentIndex(),"auto-play"!==t&&"auto-play-interval"!==t||(this.isAutoPlaying=this.getBool("auto-play"),this.startAutoPlay()),this.render()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}clampCurrentIndex(){this.currentIndex>=this.items.length&&(this.currentIndex=0)}stopAutoPlay(){this.timer&&(window.clearInterval(this.timer),this.timer=null)}startAutoPlay(){if(this.stopAutoPlay(),!this.isAutoPlaying||this.items.length<=1)return;const t=Math.max(1e3,Number(this.getAttribute("auto-play-interval")||5e3));this.timer=window.setInterval(()=>this.goToNext(),t)}getIndicatorType(){if(this.getBool("show-auto-play-control",!0)&&this.getBool("show-indicators",!0)&&this.items.length>1)return"combined";const t=this.getAttribute("indicator-style")||"dots";return"lines"===t?"line":"numbers"===t?"numbers":"dots"}getIndicatorSize(){const t=this.getAttribute("size")||"m";return"l"===t||"xl"===t?"m":"s"}goTo(t){t<0||t>=this.items.length||(this.currentIndex=t,this.dispatchEvent(new CustomEvent("db-slide-change",{detail:{index:t},bubbles:!0,composed:!0})),this.render())}goToPrev(){if(0===this.items.length)return;const t=this.getBool("infinite",!0),e=this.currentIndex-1;e<0?this.goTo(t?this.items.length-1:0):this.goTo(e)}goToNext(){if(0===this.items.length)return;const t=this.getBool("infinite",!0),e=this.currentIndex+1;e>=this.items.length?this.goTo(t?0:this.items.length-1):this.goTo(e)}render(){const s=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",n=this.getAttribute("theme")||"light",a=this.getAttribute("transition")||"slide",o=this.getBool("show-navigation",!0),r=this.getBool("show-indicators",!0),l=this.getBool("show-auto-play-control",!0),c=this.getBool("show-title",!0),d=this.getBool("show-description",!0),u=this.getBool("disabled"),h=this.getBool("readonly"),g=this.getAttribute("indicator-style")||"dots",m=l&&r&&this.items.length>1;this.className=["designbase-wc-carousel",`designbase-wc-carousel--size-${s}`,`designbase-wc-carousel--variant-${i}`,`designbase-wc-carousel--theme-${n}`,`designbase-wc-carousel--transition-${a}`,`designbase-wc-carousel--indicator-${g}`,u&&"designbase-wc-carousel--disabled",h&&"designbase-wc-carousel--readonly"].filter(Boolean).join(" ");const b=document.createElement("div");b.className="designbase-wc-carousel__container";const p=document.createElement("div");if(p.className="designbase-wc-carousel__track",p.style.transform=`translateX(-${100*this.currentIndex}%)`,this.items.forEach((t,e)=>{const s=document.createElement("div");s.className="designbase-wc-carousel__slide"+(e===this.currentIndex?" designbase-wc-carousel__slide--active":""),s.style.flex="0 0 100%",s.style.width="100%",s.style.height="100%",s.style.minWidth="0";const i=t.image?"#ffffff":"";if(i&&(s.style.color=i),t.image){const i=document.createElement("div");i.className="designbase-wc-carousel__slide-image";const n=document.createElement("img");n.className="designbase-wc-carousel__slide-img",n.src=t.image,n.alt=t.alt||t.title||`Slide ${e+1}`,i.append(n),s.append(i)}if(c&&t.title||d&&t.description){const e=document.createElement("div");if(e.className="designbase-wc-carousel__slide-info",i&&(e.style.color=i),c&&t.title){const s=document.createElement("h3");s.className="designbase-wc-carousel__slide-title",s.textContent=t.title,i&&(s.style.color=i),e.append(s)}if(d&&t.description){const s=document.createElement("p");s.className="designbase-wc-carousel__slide-description",s.textContent=t.description,i&&(s.style.color=i),e.append(s)}s.append(e)}s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:t,index:e},bubbles:!0,composed:!0}))}),p.append(s)}),b.append(p),o&&this.items.length>1){const s=document.createElement("button");s.className="designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--prev",s.type="button",s.setAttribute("aria-label",e("carousel.previous")),s.append(t("chevron-left",20)),s.disabled=u||h,s.addEventListener("click",()=>this.goToPrev());const i=document.createElement("button");i.className="designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--next",i.type="button",i.setAttribute("aria-label",e("carousel.next")),i.append(t("chevron-right",20)),i.disabled=u||h,i.addEventListener("click",()=>this.goToNext()),b.append(s,i)}const y=[b];if(r&&this.items.length>1){const t=document.createElement("div");t.className="designbase-wc-carousel__controls";const e=document.createElement("div");e.className="designbase-wc-carousel__indicators";const s=document.createElement("db-indicator");s.setAttribute("current",String(this.currentIndex)),s.setAttribute("total",String(this.items.length)),s.setAttribute("type",this.getIndicatorType()),s.setAttribute("size",this.getIndicatorSize()),s.setAttribute("clickable",""),m&&(s.setAttribute("timer",""),s.setAttribute("timer-duration",String(Math.max(1e3,Number(this.getAttribute("auto-play-interval")||5e3)))),s.setAttribute("auto-roll","false"),this.isAutoPlaying?s.setAttribute("playing",""):s.removeAttribute("playing"),(u||h)&&s.setAttribute("playback-disabled","")),s.addEventListener("db-step-click",t=>{const e=t;this.goTo(e.detail.index)}),s.addEventListener("db-playing-change",t=>{const e=t;this.isAutoPlaying=e.detail.playing,this.startAutoPlay(),this.render()}),e.append(s),t.append(e),y.push(t)}this.replaceChildren(...y)}}customElements.get("db-carousel")||customElements.define("db-carousel",DbCarousel);export{DbCarousel};
+import{createDbIcon as t}from"./db-icons.js";import{t as e}from"../core/i18n.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{CAROUSEL_SIZES as i,CAROUSEL_VARIANTS as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbCarousel extends HTMLElement{constructor(){super(...arguments),this.currentIndex=0,this.timer=null,this.isAutoPlaying=!1}static get observedAttributes(){return["items","size","variant","theme","transition","auto-play","auto-play-interval","infinite","show-navigation","show-indicators","indicator-style","show-auto-play-control","show-title","show-description","disabled","readonly"]}get items(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}connectedCallback(){this.style.display="block",this.clampCurrentIndex(),this.isAutoPlaying=this.getBool("auto-play"),this.startAutoPlay(),this.render()}disconnectedCallback(){this.stopAutoPlay()}attributeChangedCallback(t){"items"===t&&this.clampCurrentIndex(),"auto-play"!==t&&"auto-play-interval"!==t||(this.isAutoPlaying=this.getBool("auto-play"),this.startAutoPlay()),this.render()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}clampCurrentIndex(){this.currentIndex>=this.items.length&&(this.currentIndex=0)}stopAutoPlay(){this.timer&&(window.clearInterval(this.timer),this.timer=null)}startAutoPlay(){if(this.stopAutoPlay(),!this.isAutoPlaying||this.items.length<=1)return;const t=Math.max(1e3,Number(this.getAttribute("auto-play-interval")||5e3));this.timer=window.setInterval(()=>this.goToNext(),t)}getIndicatorType(){if(this.getBool("show-auto-play-control",!0)&&this.getBool("show-indicators",!0)&&this.items.length>1)return"combined";const t=this.getAttribute("indicator-style")||"dots";return"lines"===t?"line":"numbers"===t?"numbers":"dots"}getIndicatorSize(){const t=s(this.getAttribute("size"),i,"m");return"l"===t||"xl"===t?"m":"s"}goTo(t){t<0||t>=this.items.length||(this.currentIndex=t,this.dispatchEvent(new CustomEvent("db-slide-change",{detail:{index:t},bubbles:!0,composed:!0})),this.render())}goToPrev(){if(0===this.items.length)return;const t=this.getBool("infinite",!0),e=this.currentIndex-1;e<0?this.goTo(t?this.items.length-1:0):this.goTo(e)}goToNext(){if(0===this.items.length)return;const t=this.getBool("infinite",!0),e=this.currentIndex+1;e>=this.items.length?this.goTo(t?0:this.items.length-1):this.goTo(e)}render(){const o=s(this.getAttribute("size"),i,"m"),a=s(this.getAttribute("variant"),n,"default"),r=this.getAttribute("theme")||"light",l=this.getAttribute("transition")||"slide",c=this.getBool("show-navigation",!0),d=this.getBool("show-indicators",!0),u=this.getBool("show-auto-play-control",!0),h=this.getBool("show-title",!0),m=this.getBool("show-description",!0),g=this.getBool("disabled"),b=this.getBool("readonly"),p=this.getAttribute("indicator-style")||"dots",y=u&&d&&this.items.length>1;this.className=["designbase-wc-carousel",`designbase-wc-carousel--size-${o}`,`designbase-wc-carousel--variant-${a}`,`designbase-wc-carousel--theme-${r}`,`designbase-wc-carousel--transition-${l}`,`designbase-wc-carousel--indicator-${p}`,g&&"designbase-wc-carousel--disabled",b&&"designbase-wc-carousel--readonly"].filter(Boolean).join(" ");const w=document.createElement("div");w.className="designbase-wc-carousel__container";const A=document.createElement("div");if(A.className="designbase-wc-carousel__track",A.style.transform=`translateX(-${100*this.currentIndex}%)`,this.items.forEach((t,e)=>{const s=document.createElement("div");s.className="designbase-wc-carousel__slide"+(e===this.currentIndex?" designbase-wc-carousel__slide--active":""),s.style.flex="0 0 100%",s.style.width="100%",s.style.height="100%",s.style.minWidth="0";const i=t.image?"#ffffff":"";if(i&&(s.style.color=i),t.image){const i=document.createElement("div");i.className="designbase-wc-carousel__slide-image";const n=document.createElement("img");n.className="designbase-wc-carousel__slide-img",n.src=t.image,n.alt=t.alt||t.title||`Slide ${e+1}`,i.append(n),s.append(i)}if(h&&t.title||m&&t.description){const e=document.createElement("div");if(e.className="designbase-wc-carousel__slide-info",i&&(e.style.color=i),h&&t.title){const s=document.createElement("h3");s.className="designbase-wc-carousel__slide-title",s.textContent=t.title,i&&(s.style.color=i),e.append(s)}if(m&&t.description){const s=document.createElement("p");s.className="designbase-wc-carousel__slide-description",s.textContent=t.description,i&&(s.style.color=i),e.append(s)}s.append(e)}s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:t,index:e},bubbles:!0,composed:!0}))}),A.append(s)}),w.append(A),c&&this.items.length>1){const s=document.createElement("button");s.className="designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--prev",s.type="button",s.setAttribute("aria-label",e("carousel.previous")),s.append(t("chevron-left",20)),s.disabled=g||b,s.addEventListener("click",()=>this.goToPrev());const i=document.createElement("button");i.className="designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--next",i.type="button",i.setAttribute("aria-label",e("carousel.next")),i.append(t("chevron-right",20)),i.disabled=g||b,i.addEventListener("click",()=>this.goToNext()),w.append(s,i)}const v=[w];if(d&&this.items.length>1){const t=document.createElement("div");t.className="designbase-wc-carousel__controls";const e=document.createElement("div");e.className="designbase-wc-carousel__indicators";const s=document.createElement("db-indicator");s.setAttribute("current",String(this.currentIndex)),s.setAttribute("total",String(this.items.length)),s.setAttribute("type",this.getIndicatorType()),s.setAttribute("size",this.getIndicatorSize()),s.setAttribute("clickable",""),y&&(s.setAttribute("timer",""),s.setAttribute("timer-duration",String(Math.max(1e3,Number(this.getAttribute("auto-play-interval")||5e3)))),s.setAttribute("auto-roll","false"),this.isAutoPlaying?s.setAttribute("playing",""):s.removeAttribute("playing"),(g||b)&&s.setAttribute("playback-disabled","")),s.addEventListener("db-step-click",t=>{const e=t;this.goTo(e.detail.index)}),s.addEventListener("db-playing-change",t=>{const e=t;this.isAutoPlaying=e.detail.playing,this.startAutoPlay(),this.render()}),e.append(s),t.append(e),v.push(t)}this.replaceChildren(...v)}}customElements.get("db-carousel")||customElements.define("db-carousel",DbCarousel);export{DbCarousel};

package/dist/esm/components/db-chat-message.js

@@ -1 +1 @@
-import{createDbIcon as t,isDbIconName as e}from"./db-icons.js";import"./db-avatar.js";import{CHAT_MESSAGE_ROLES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a={copy:"copy",regenerate:"refresh",like:"thumb-up",dislike:"thumb-down",edit:"edit"},i={copy:"복사",regenerate:"다시 생성",like:"좋아요",dislike:"싫어요",edit:"편집"};class DbChatMessage extends HTMLElement{constructor(){super(...arguments),this.built=!1,this._attachments=[]}static get observedAttributes(){return["role","name","avatar-src","avatar-initials","timestamp","status","actions","variant"]}get role(){return s.includes(this.getAttribute("role"))?this.getAttribute("role"):"assistant"}set role(t){this.setAttribute("role",t)}get attachments(){return this._attachments.map(t=>({...t}))}set attachments(t){this._attachments=Array.isArray(t)?t:[],this.built&&this.renderAttachments()}connectedCallback(){this.built||this.build(),this.sync()}attributeChangedCallback(t){this.built&&("actions"===t&&this.renderActions(),this.sync())}build(){for(this.built=!0,this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-chat-message__content";this.firstChild;)this.contentEl.append(this.firstChild);this.mediaEl=document.createElement("div"),this.mediaEl.className="designbase-wc-chat-message__media",this.mediaEl.hidden=!0,this.avatarWrap=document.createElement("div"),this.avatarWrap.className="designbase-wc-chat-message__avatar";const t=document.createElement("div");t.className="designbase-wc-chat-message__bubble",this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-chat-message__header",this.nameEl=document.createElement("span"),this.nameEl.className="designbase-wc-chat-message__name",this.timeEl=document.createElement("span"),this.timeEl.className="designbase-wc-chat-message__time",this.headerEl.append(this.nameEl,this.timeEl),this.actionsEl=document.createElement("div"),this.actionsEl.className="designbase-wc-chat-message__actions",t.append(this.headerEl,this.mediaEl,this.contentEl,this.actionsEl),this.append(this.avatarWrap,t),this.renderAvatar(),this.renderActions(),this.renderAttachments()}sync(){this.className=["designbase-wc-chat-message",`designbase-wc-chat-message--${this.role}`,`designbase-wc-chat-message--${this.getAttribute("variant")||"bubble"}`,this.getAttribute("status")&&`designbase-wc-chat-message--${this.getAttribute("status")}`].filter(Boolean).join(" ");const t=this.getAttribute("name")||"";this.nameEl.textContent=t,this.nameEl.hidden=!t;const e=this.getAttribute("timestamp")||"";this.timeEl.textContent=e,this.timeEl.hidden=!e,this.headerEl.hidden=!t&&!e;const s=Boolean(this.contentEl.textContent?.trim()||this.contentEl.children.length);this.contentEl.hidden=!s&&this._attachments.length>0,this.renderAvatar()}renderAttachments(){if(!this.mediaEl)return;this.mediaEl.replaceChildren(),this.mediaEl.hidden=0===this._attachments.length;for(const e of this._attachments){const s=e.kind||(e.mime?.startsWith("image/")?"image":e.mime?.startsWith("video/")?"video":"file");if("image"===s&&e.url){const t=document.createElement("a");t.className="designbase-wc-chat-message__image",t.href=e.url,t.target="_blank",t.rel="noopener noreferrer";const s=document.createElement("img");s.src=e.url,s.alt=e.name,s.loading="lazy",t.append(s),this.mediaEl.append(t);continue}const a=document.createElement(e.url?"a":"div");a.className="designbase-wc-chat-message__file",e.url&&a instanceof HTMLAnchorElement&&(a.href=e.url,a.target="_blank",a.rel="noopener noreferrer",a.download=e.name);const i=document.createElement("span");i.textContent=e.name,a.append(t("video"===s?"video":"file-new",16),i),this.mediaEl.append(a)}const e=Boolean(this.contentEl.textContent?.trim()||this.contentEl.children.length);this.contentEl.hidden=!e&&this._attachments.length>0}renderAvatar(){const t=this.getAttribute("avatar-src"),e=this.getAttribute("avatar-initials"),s="assistant"===this.role||Boolean(t||e);if(this.avatarWrap.hidden=!s,!s)return void this.avatarWrap.replaceChildren();let a=this.avatarWrap.querySelector("db-avatar");a||(a=document.createElement("db-avatar"),this.avatarWrap.append(a)),a.setAttribute("size","s"),t?a.setAttribute("src",t):a.removeAttribute("src"),e?a.setAttribute("initials",e):a.removeAttribute("initials"),"assistant"!==this.role||t||e||a.setAttribute("variant","primary")}renderActions(){this.actionsEl.replaceChildren();const s=(this.getAttribute("actions")||"").split(",").map(t=>t.trim()).filter(Boolean);for(const n of s){const s=document.createElement("button");s.type="button",s.className="designbase-wc-chat-message__action",s.setAttribute("aria-label",i[n]||n);const r=a[n];s.append(t(r&&e(r)?r:"sparkle",16)),s.addEventListener("click",()=>this.handleAction(n,s)),this.actionsEl.append(s)}this.actionsEl.hidden=0===s.length}handleAction(t,e){if("copy"===t){const t=this.contentEl.textContent||"";navigator.clipboard?.writeText(t).catch(()=>{})}"like"!==t&&"dislike"!==t||e.classList.toggle("designbase-wc-chat-message__action--active"),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:t,text:this.contentEl.textContent||""},bubbles:!0,composed:!0}))}}customElements.get("db-chat-message")||customElements.define("db-chat-message",DbChatMessage);export{DbChatMessage};
+import{createDbIcon as t,isDbIconName as e}from"./db-icons.js";import"./db-avatar.js";import{sanitizeHref as s}from"../core/safe-url.js";import{CHAT_MESSAGE_ROLES as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const i={copy:"copy",regenerate:"refresh",like:"thumb-up",dislike:"thumb-down",edit:"edit"},n={copy:"복사",regenerate:"다시 생성",like:"좋아요",dislike:"싫어요",edit:"편집"};class DbChatMessage extends HTMLElement{constructor(){super(...arguments),this.built=!1,this._attachments=[]}static get observedAttributes(){return["role","name","avatar-src","avatar-initials","timestamp","status","actions","variant"]}get role(){return a.includes(this.getAttribute("role"))?this.getAttribute("role"):"assistant"}set role(t){this.setAttribute("role",t)}get attachments(){return this._attachments.map(t=>({...t}))}set attachments(t){this._attachments=Array.isArray(t)?t:[],this.built&&this.renderAttachments()}connectedCallback(){this.built||this.build(),this.sync()}attributeChangedCallback(t){this.built&&("actions"===t&&this.renderActions(),this.sync())}build(){for(this.built=!0,this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-chat-message__content";this.firstChild;)this.contentEl.append(this.firstChild);this.mediaEl=document.createElement("div"),this.mediaEl.className="designbase-wc-chat-message__media",this.mediaEl.hidden=!0,this.avatarWrap=document.createElement("div"),this.avatarWrap.className="designbase-wc-chat-message__avatar";const t=document.createElement("div");t.className="designbase-wc-chat-message__bubble",this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-chat-message__header",this.nameEl=document.createElement("span"),this.nameEl.className="designbase-wc-chat-message__name",this.timeEl=document.createElement("span"),this.timeEl.className="designbase-wc-chat-message__time",this.headerEl.append(this.nameEl,this.timeEl),this.actionsEl=document.createElement("div"),this.actionsEl.className="designbase-wc-chat-message__actions",t.append(this.headerEl,this.mediaEl,this.contentEl,this.actionsEl),this.append(this.avatarWrap,t),this.renderAvatar(),this.renderActions(),this.renderAttachments()}sync(){this.className=["designbase-wc-chat-message",`designbase-wc-chat-message--${this.role}`,`designbase-wc-chat-message--${this.getAttribute("variant")||"bubble"}`,this.getAttribute("status")&&`designbase-wc-chat-message--${this.getAttribute("status")}`].filter(Boolean).join(" ");const t=this.getAttribute("name")||"";this.nameEl.textContent=t,this.nameEl.hidden=!t;const e=this.getAttribute("timestamp")||"";this.timeEl.textContent=e,this.timeEl.hidden=!e,this.headerEl.hidden=!t&&!e;const s=Boolean(this.contentEl.textContent?.trim()||this.contentEl.children.length);this.contentEl.hidden=!s&&this._attachments.length>0,this.renderAvatar()}renderAttachments(){if(!this.mediaEl)return;this.mediaEl.replaceChildren(),this.mediaEl.hidden=0===this._attachments.length;for(const e of this._attachments){const a=e.kind||(e.mime?.startsWith("image/")?"image":e.mime?.startsWith("video/")?"video":"file");if("image"===a&&e.url){const t=document.createElement("a");t.className="designbase-wc-chat-message__image",t.href=s(e.url,"#"),t.target="_blank",t.rel="noopener noreferrer";const a=document.createElement("img");a.src=e.url,a.alt=e.name,a.loading="lazy",t.append(a),this.mediaEl.append(t);continue}const i=document.createElement(e.url?"a":"div");i.className="designbase-wc-chat-message__file",e.url&&i instanceof HTMLAnchorElement&&(i.href=s(e.url,"#"),i.target="_blank",i.rel="noopener noreferrer",i.download=e.name);const n=document.createElement("span");n.textContent=e.name,i.append(t("video"===a?"video":"file-new",16),n),this.mediaEl.append(i)}const e=Boolean(this.contentEl.textContent?.trim()||this.contentEl.children.length);this.contentEl.hidden=!e&&this._attachments.length>0}renderAvatar(){const t=this.getAttribute("avatar-src"),e=this.getAttribute("avatar-initials"),s="assistant"===this.role||Boolean(t||e);if(this.avatarWrap.hidden=!s,!s)return void this.avatarWrap.replaceChildren();let a=this.avatarWrap.querySelector("db-avatar");a||(a=document.createElement("db-avatar"),this.avatarWrap.append(a)),a.setAttribute("size","s"),t?a.setAttribute("src",t):a.removeAttribute("src"),e?a.setAttribute("initials",e):a.removeAttribute("initials"),"assistant"!==this.role||t||e||a.setAttribute("variant","primary")}renderActions(){this.actionsEl.replaceChildren();const s=(this.getAttribute("actions")||"").split(",").map(t=>t.trim()).filter(Boolean);for(const a of s){const s=document.createElement("button");s.type="button",s.className="designbase-wc-chat-message__action",s.setAttribute("aria-label",n[a]||a);const r=i[a];s.append(t(r&&e(r)?r:"sparkle",16)),s.addEventListener("click",()=>this.handleAction(a,s)),this.actionsEl.append(s)}this.actionsEl.hidden=0===s.length}handleAction(t,e){if("copy"===t){const t=this.contentEl.textContent||"";navigator.clipboard?.writeText(t).catch(()=>{})}"like"!==t&&"dislike"!==t||e.classList.toggle("designbase-wc-chat-message__action--active"),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:t,text:this.contentEl.textContent||""},bubbles:!0,composed:!0}))}}customElements.get("db-chat-message")||customElements.define("db-chat-message",DbChatMessage);export{DbChatMessage};

package/dist/esm/components/db-chat-orb.js

@@ -1 +1 @@
-import{CHAT_ORB_SIZES as t,CHAT_ORB_VARIANTS as e,CHAT_ORB_STATES as i,CHAT_ORB_THEMES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";function pick(t,e,i){return t.includes(e)?e:i}const a={aurora:{core:[22,20,52],lights:[[236,92,220],[70,140,250],[42,208,158]],rim:[199,210,254],glow:[120,110,240]},ocean:{core:[10,32,62],lights:[[56,189,248],[34,211,238],[96,165,250]],rim:[165,243,252],glow:[59,130,246]},emerald:{core:[6,42,38],lights:[[52,211,153],[74,222,128],[163,230,53]],rim:[187,247,208],glow:[34,197,94]},violet:{core:[40,12,82],lights:[[192,132,252],[168,85,247],[240,171,252]],rim:[245,208,254],glow:[139,92,246]},mono:{core:[30,34,44],lights:[[229,231,235],[156,163,175],[249,250,251]],rim:[255,255,255],glow:[156,163,175]}},r={aurora:{core:[240,240,250],lights:[[235,96,224],[74,144,246],[26,196,150]],rim:[150,130,210],glow:[138,128,244]},ocean:{core:[226,248,255],lights:[[14,165,233],[34,211,238],[96,165,250]],rim:[64,150,181],glow:[56,189,248]},emerald:{core:[228,250,240],lights:[[16,185,129],[74,222,128],[163,230,53]],rim:[57,145,111],glow:[52,211,153]},violet:{core:[246,233,255],lights:[[168,85,247],[217,70,239],[240,171,252]],rim:[143,91,183],glow:[192,132,252]},mono:{core:[243,246,250],lights:[[148,163,184],[203,213,225],[255,255,255]],rim:[100,116,139],glow:[148,163,184]}},n={idle:{speed:1.55,amp:.38,turb:.95,glow:1.15,breatheSpeed:1.9,breatheAmt:.055,lightAlpha:.95,autoRipple:0},thinking:{speed:3.2,amp:.5,turb:1.45,glow:1.85,breatheSpeed:4.2,breatheAmt:.075,lightAlpha:1.35,autoRipple:0},listening:{speed:1.45,amp:.32,turb:.9,glow:1.2,breatheSpeed:2.1,breatheAmt:.035,lightAlpha:.95,autoRipple:1.7}};function rgba(t,e){return`rgba(${t[0]},${t[1]},${t[2]},${e})`}function mix(t,e,i){return[t[0]+(e[0]-t[0])*i,t[1]+(e[1]-t[1])*i,t[2]+(e[2]-t[2])*i]}function clamp(t,e,i){return Math.min(i,Math.max(e,t))}function numberAttribute(t,e,i,s,a){const r=t.getAttribute(e);if(null===r||""===r.trim())return i;const n=Number(r);return Number.isFinite(n)?clamp(n,s,a):i}const h=2*Math.PI;function prefersReducedMotion(){return"undefined"!=typeof window&&"function"==typeof window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}const o=new Set;let l=0;function tick(t){o.forEach(e=>e.frame(t)),l=o.size?requestAnimationFrame(tick):0}class DbChatOrb extends HTMLElement{constructor(){super(...arguments),this.dpr=1,this.cssW=0,this.cssH=0,this.t0=0,this.lastFrame=0,this.resizeObs=null,this.io=null,this.themeObserver=null,this.themeMedia=null,this.visible=!1,this.hover={x:0,y:0,tx:0,ty:0},this.ripples=[],this.lastAutoRipple=0,this.lastVoiceRipple=0,this.previousVoiceLevel=0,this.displayedVoiceLevel=0,this.inputStream=null,this.audioContext=null,this.audioSource=null,this.analyser=null,this.analyserData=null,this.onPointerMove=t=>{const e=this.getBoundingClientRect();e.width&&(this.hover.tx=Math.max(-1,Math.min(1,2*((t.clientX-e.left)/e.width-.5))),this.hover.ty=Math.max(-1,Math.min(1,2*((t.clientY-e.top)/e.height-.5))))},this.onPointerLeave=()=>{this.hover.tx=0,this.hover.ty=0},this.onPointerDown=()=>{this.addRipple(performance.now(),1)},this.onThemeChange=()=>{prefersReducedMotion()&&this.frame(performance.now())}}static get observedAttributes(){return["size","variant","state","theme","voice-level","min-scale","max-scale"]}get size(){return pick(t,this.getAttribute("size"),"l")}set size(t){this.setAttribute("size",t)}get variant(){return pick(e,this.getAttribute("variant"),"aurora")}set variant(t){this.setAttribute("variant",t)}get state(){return pick(i,this.getAttribute("state"),"idle")}set state(t){this.setAttribute("state",t)}get theme(){return pick(s,this.getAttribute("theme"),"auto")}set theme(t){this.setAttribute("theme",t)}get voiceLevel(){return numberAttribute(this,"voice-level",0,0,1)}set voiceLevel(t){const e=Number(t);this.setAttribute("voice-level",String(clamp(Number.isFinite(e)?e:0,0,1)))}get minScale(){return numberAttribute(this,"min-scale",.88,.5,1.5)}set minScale(t){const e=Number(t);this.setAttribute("min-scale",String(clamp(Number.isFinite(e)?e:.88,.5,1.5)))}get maxScale(){return Math.max(this.minScale,numberAttribute(this,"max-scale",1.18,.5,1.7))}set maxScale(t){const e=Number(t);this.setAttribute("max-scale",String(clamp(Number.isFinite(e)?e:1.18,.5,1.7)))}get audioStream(){return this.inputStream}set audioStream(t){(t!==this.inputStream||null!==t&&!this.analyser)&&(this.stopAudioAnalysis(),this.inputStream=t&&"function"==typeof t.getAudioTracks?t:null,this.isConnected&&this.inputStream&&this.startAudioAnalysis(this.inputStream))}connectedCallback(){this.syncClasses(),this.setAttribute("aria-hidden","true"),this.canvas||this.build(),this.t0=performance.now(),this.lastFrame=0,this.observeTheme(),this.inputStream&&this.startAudioAnalysis(this.inputStream),"undefined"!=typeof ResizeObserver&&(this.resizeObs=new ResizeObserver(()=>this.resize()),this.resizeObs.observe(this)),this.resize(),prefersReducedMotion()?this.frame(this.t0+1600):"undefined"!=typeof IntersectionObserver?(this.io=new IntersectionObserver(t=>{for(const e of t)this.setVisible(e.isIntersecting)},{threshold:.01}),this.io.observe(this)):this.setVisible(!0)}disconnectedCallback(){this.setVisible(!1),this.resizeObs?.disconnect(),this.resizeObs=null,this.io?.disconnect(),this.io=null,this.themeObserver?.disconnect(),this.themeObserver=null,this.themeMedia?.removeEventListener("change",this.onThemeChange),this.themeMedia=null,this.stopAudioAnalysis()}attributeChangedCallback(t){this.canvas&&("size"!==t&&"variant"!==t&&"state"!==t||this.syncClasses(),prefersReducedMotion()&&this.frame(performance.now()))}setVisible(t){t!==this.visible&&(this.visible=t,t?(o.add(this),function ensureTicking(){l||!o.size||prefersReducedMotion()||(l=requestAnimationFrame(tick))}()):o.delete(this))}syncClasses(){this.className=["designbase-wc-chat-orb",`designbase-wc-chat-orb--${this.size}`,`designbase-wc-chat-orb--${this.variant}`,`designbase-wc-chat-orb--${this.state}`].join(" ")}build(){this.replaceChildren(),this.canvas=document.createElement("canvas"),this.canvas.className="designbase-wc-chat-orb__canvas",this.ctx=this.canvas.getContext("2d"),this.append(this.canvas),this.addEventListener("pointermove",this.onPointerMove),this.addEventListener("pointerleave",this.onPointerLeave),this.addEventListener("pointerdown",this.onPointerDown)}addRipple(t,e){this.ripples.push({start:t,strength:clamp(e,.2,1)})}observeTheme(){"undefined"==typeof MutationObserver||this.themeObserver||(this.themeObserver=new MutationObserver(this.onThemeChange),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme","data-color-mode","class"]})),"function"!=typeof window.matchMedia||this.themeMedia||(this.themeMedia=window.matchMedia("(prefers-color-scheme: dark)"),this.themeMedia.addEventListener("change",this.onThemeChange))}isDarkContext(){if("dark"===this.theme)return!0;if("light"===this.theme)return!1;const t=this.parentElement?.closest("[data-theme], [data-color-mode]"),e=t?.getAttribute("data-color-mode");if("dark"===e)return!0;if("light"===e)return!1;const i=t?.getAttribute("data-theme");if("dark"===i)return!0;if("light"===i)return!1;const s=document.documentElement,a=s.getAttribute("data-color-mode");if("dark"===a)return!0;if("light"===a)return!1;const r=s.getAttribute("data-theme");return"dark"===r||"light"!==r&&(this.themeMedia?.matches??!1)}startAudioAnalysis(t){if(this.analyser)return;const e=window.AudioContext??window.webkitAudioContext;if(e)try{const i=new e,s=i.createAnalyser();s.fftSize=512,s.smoothingTimeConstant=.58;const a=i.createMediaStreamSource(t);a.connect(s),this.audioContext=i,this.audioSource=a,this.analyser=s,this.analyserData=new Float32Array(s.fftSize),"suspended"===i.state&&i.resume().catch(()=>{})}catch{this.stopAudioAnalysis()}}stopAudioAnalysis(){try{this.audioSource?.disconnect(),this.analyser?.disconnect()}catch{}this.audioContext&&this.audioContext.close().catch(()=>{}),this.audioContext=null,this.audioSource=null,this.analyser=null,this.analyserData=null}sampleVoiceLevel(t){if(this.analyser&&this.analyserData){this.analyser.getFloatTimeDomainData(this.analyserData);let t=0;for(const e of this.analyserData)t+=e*e;return{level:clamp((Math.sqrt(t/this.analyserData.length)-.01)/.11,0,1),hasInput:!0}}if(this.hasAttribute("voice-level"))return{level:this.voiceLevel,hasInput:!0};return{level:clamp(.16+.12*(Math.sin(2.05*t)+1)+.42*Math.pow(Math.max(0,Math.sin(.86*t+.7)),5),0,1),hasInput:!1}}resize(){this.canvas&&(this.dpr=Math.min(2,window.devicePixelRatio||1),this.cssW=this.clientWidth||72,this.cssH=this.clientHeight||this.cssW,this.canvas.width=Math.round(this.cssW*this.dpr),this.canvas.height=Math.round(this.cssH*this.dpr),prefersReducedMotion()&&this.frame(this.t0+1600))}frame(t){const e=this.ctx;if(!e||!this.cssW)return;const i=this.lastFrame?Math.min((t-this.lastFrame)/1e3,.1):1/60;this.lastFrame=t;const s=(t-this.t0)/1e3,o=this.cssW,l=this.cssH,c=o/2,d=l/2,u=Math.min(o,l)/2,m=this.isDarkContext(),p=m?a[this.variant]:r[this.variant],g=n[this.state];this.hover.x+=.08*(this.hover.tx-this.hover.x),this.hover.y+=.08*(this.hover.ty-this.hover.y);const b="listening"===this.state?this.sampleVoiceLevel(s):{level:0,hasInput:!1},v=b.level>this.displayedVoiceLevel?19:7;this.displayedVoiceLevel+=(b.level-this.displayedVoiceLevel)*(1-Math.exp(-v*i)),"listening"!==this.state&&this.displayedVoiceLevel<.001&&(this.displayedVoiceLevel=0);const f=Math.pow(clamp(this.displayedVoiceLevel,0,1),.72),y="listening"===this.state?this.minScale+(this.maxScale-this.minScale)*f:1,w=g.breatheAmt*("listening"===this.state?.55:1),M=1+Math.sin(s*g.breatheSpeed)*w,A="listening"===this.state?f:"thinking"===this.state?1:.55,S="thinking"===this.state?1.38:1,C=.68*u*M*y*("thinking"===this.state?1.1:1),x=.99*u;e.setTransform(this.dpr,0,0,this.dpr,0,0),e.clearRect(0,0,o,l),e.globalCompositeOperation="source-over",e.filter="none";const k="thinking"===this.state?m?.42:.22:m?.28:.5,O=m?mix(p.core,p.lights[0],k):"thinking"===this.state?mix(p.core,p.lights[0],.35):mix(p.core,[255,255,255],.5),R=mix(p.core,p.lights[1],m?"thinking"===this.state?.35:0:"thinking"===this.state?.28:.12),z=e.createRadialGradient(c,d-.12*C,.1*C,c,d,C);z.addColorStop(0,rgba(O,m?1:.96)),z.addColorStop(.72,rgba(R,m?1:.9)),z.addColorStop(.93,rgba(R,m?.72:.5)),z.addColorStop(1,rgba(R,0)),e.fillStyle=z,e.beginPath(),e.arc(c,d,C,0,h),e.fill(),e.globalCompositeOperation=m?"lighter":"source-over";const L=p.lights.length;for(let t=0;t<L;t+=1){const i=2.1*t,a=g.turb*(.85+.55*A),r=Math.sin(s*g.speed+i)*g.amp+Math.sin(s*g.speed*1.7+1.4*i)*g.amp*a*.75+Math.sin(s*g.speed*.45+.7*i)*g.amp*.35,n=Math.cos(s*g.speed*.9+1.3*i)*g.amp+Math.cos(s*g.speed*2+i)*g.amp*a*.75+Math.cos(s*g.speed*.55+.9*i)*g.amp*.35,o="thinking"===this.state?.42:.28,l=t/L*h-.5*Math.PI+s*g.speed*o,u=C*("thinking"===this.state?.52:.44),b=c+Math.cos(l)*u+r*C+this.hover.x*C*.12,v=d+Math.sin(l)*u+n*C+this.hover.y*C*.12,f=C*S*(.92+.28*A+.12*Math.sin(s*g.speed*1.3+i)),y="thinking"===this.state?mix(p.lights[t],m?[255,255,255]:p.core,m?.1:.18):p.lights[t],w=(m?.62:.78)*g.lightAlpha*(.85+.28*A)*("thinking"===this.state?1.22:1);e.save(),e.filter=`blur(${C*(m?.15:.18)*("thinking"===this.state?.92:1)}px)`;const M=e.createRadialGradient(b,v,0,b,v,f);M.addColorStop(0,rgba(y,Math.min(1,w))),M.addColorStop(.48,rgba(y,Math.min(1,.5*w))),M.addColorStop(1,rgba(y,0)),e.fillStyle=M,e.beginPath(),e.arc(b,v,f,0,h),e.fill(),e.restore()}e.filter="none",e.globalCompositeOperation="destination-in";const D=e.createRadialGradient(c,d,.6*C,c,d,C);D.addColorStop(0,"rgba(0,0,0,1)"),D.addColorStop(.86,"rgba(0,0,0,1)"),D.addColorStop(1,"rgba(0,0,0,0)"),e.fillStyle=D,e.beginPath(),e.arc(c,d,C,0,h),e.fill(),e.globalCompositeOperation="source-atop";const V=c-.22*C+this.hover.x*C*.1,F=d-.28*C+this.hover.y*C*.1,E=e.createRadialGradient(V,F,0,V,F,.95*C);E.addColorStop(0,`rgba(255,255,255,${m?.12:.2})`),E.addColorStop(1,"rgba(255,255,255,0)"),e.fillStyle=E,e.fillRect(c-C,d-C,2*C,2*C),e.globalCompositeOperation="destination-over";const P=e.createRadialGradient(c,d,.7*C,c,d,x),T=(m?.32:.14)*g.glow*(.85+.28*A);P.addColorStop(0,rgba(p.glow,T)),P.addColorStop(1,rgba(p.glow,0)),e.fillStyle=P,e.beginPath(),e.arc(c,d,x,0,h),e.fill(),e.globalCompositeOperation="source-over",e.filter="none"}}customElements.get("db-chat-orb")||customElements.define("db-chat-orb",DbChatOrb);export{DbChatOrb};
+import{coerceToContract as t}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{CHAT_ORB_SIZES as e,CHAT_ORB_VARIANTS as i,CHAT_ORB_STATES as s,CHAT_ORB_THEMES as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const r={aurora:{core:[22,20,52],lights:[[236,92,220],[70,140,250],[42,208,158]],rim:[199,210,254],glow:[120,110,240]},ocean:{core:[10,32,62],lights:[[56,189,248],[34,211,238],[96,165,250]],rim:[165,243,252],glow:[59,130,246]},emerald:{core:[6,42,38],lights:[[52,211,153],[74,222,128],[163,230,53]],rim:[187,247,208],glow:[34,197,94]},violet:{core:[40,12,82],lights:[[192,132,252],[168,85,247],[240,171,252]],rim:[245,208,254],glow:[139,92,246]},mono:{core:[30,34,44],lights:[[229,231,235],[156,163,175],[249,250,251]],rim:[255,255,255],glow:[156,163,175]}},n={aurora:{core:[240,240,250],lights:[[235,96,224],[74,144,246],[26,196,150]],rim:[150,130,210],glow:[138,128,244]},ocean:{core:[226,248,255],lights:[[14,165,233],[34,211,238],[96,165,250]],rim:[64,150,181],glow:[56,189,248]},emerald:{core:[228,250,240],lights:[[16,185,129],[74,222,128],[163,230,53]],rim:[57,145,111],glow:[52,211,153]},violet:{core:[246,233,255],lights:[[168,85,247],[217,70,239],[240,171,252]],rim:[143,91,183],glow:[192,132,252]},mono:{core:[243,246,250],lights:[[148,163,184],[203,213,225],[255,255,255]],rim:[100,116,139],glow:[148,163,184]}},o={idle:{speed:1.55,amp:.38,turb:.95,glow:1.15,breatheSpeed:1.9,breatheAmt:.055,lightAlpha:.95,autoRipple:0},thinking:{speed:3.2,amp:.5,turb:1.45,glow:1.85,breatheSpeed:4.2,breatheAmt:.075,lightAlpha:1.35,autoRipple:0},listening:{speed:1.45,amp:.32,turb:.9,glow:1.2,breatheSpeed:2.1,breatheAmt:.035,lightAlpha:.95,autoRipple:1.7}};function rgba(t,e){return`rgba(${t[0]},${t[1]},${t[2]},${e})`}function mix(t,e,i){return[t[0]+(e[0]-t[0])*i,t[1]+(e[1]-t[1])*i,t[2]+(e[2]-t[2])*i]}function clamp(t,e,i){return Math.min(i,Math.max(e,t))}function numberAttribute(t,e,i,s,a){const r=t.getAttribute(e);if(null===r||""===r.trim())return i;const n=Number(r);return Number.isFinite(n)?clamp(n,s,a):i}const h=2*Math.PI;function prefersReducedMotion(){return"undefined"!=typeof window&&"function"==typeof window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}const l=new Set;let c=0;function tick(t){l.forEach(e=>e.frame(t)),c=l.size?requestAnimationFrame(tick):0}class DbChatOrb extends HTMLElement{constructor(){super(...arguments),this.dpr=1,this.cssW=0,this.cssH=0,this.t0=0,this.lastFrame=0,this.resizeObs=null,this.io=null,this.themeObserver=null,this.themeMedia=null,this.visible=!1,this.hover={x:0,y:0,tx:0,ty:0},this.ripples=[],this.lastAutoRipple=0,this.lastVoiceRipple=0,this.previousVoiceLevel=0,this.displayedVoiceLevel=0,this.inputStream=null,this.audioContext=null,this.audioSource=null,this.analyser=null,this.analyserData=null,this.onPointerMove=t=>{const e=this.getBoundingClientRect();e.width&&(this.hover.tx=Math.max(-1,Math.min(1,2*((t.clientX-e.left)/e.width-.5))),this.hover.ty=Math.max(-1,Math.min(1,2*((t.clientY-e.top)/e.height-.5))))},this.onPointerLeave=()=>{this.hover.tx=0,this.hover.ty=0},this.onPointerDown=()=>{this.addRipple(performance.now(),1)},this.onThemeChange=()=>{prefersReducedMotion()&&this.frame(performance.now())}}static get observedAttributes(){return["size","variant","state","theme","voice-level","min-scale","max-scale"]}get size(){return t(this.getAttribute("size"),e,"l")}set size(t){this.setAttribute("size",t)}get variant(){return t(this.getAttribute("variant"),i,"aurora")}set variant(t){this.setAttribute("variant",t)}get state(){return t(this.getAttribute("state"),s,"idle")}set state(t){this.setAttribute("state",t)}get theme(){return t(this.getAttribute("theme"),a,"auto")}set theme(t){this.setAttribute("theme",t)}get voiceLevel(){return numberAttribute(this,"voice-level",0,0,1)}set voiceLevel(t){const e=Number(t);this.setAttribute("voice-level",String(clamp(Number.isFinite(e)?e:0,0,1)))}get minScale(){return numberAttribute(this,"min-scale",.88,.5,1.5)}set minScale(t){const e=Number(t);this.setAttribute("min-scale",String(clamp(Number.isFinite(e)?e:.88,.5,1.5)))}get maxScale(){return Math.max(this.minScale,numberAttribute(this,"max-scale",1.18,.5,1.7))}set maxScale(t){const e=Number(t);this.setAttribute("max-scale",String(clamp(Number.isFinite(e)?e:1.18,.5,1.7)))}get audioStream(){return this.inputStream}set audioStream(t){(t!==this.inputStream||null!==t&&!this.analyser)&&(this.stopAudioAnalysis(),this.inputStream=t&&"function"==typeof t.getAudioTracks?t:null,this.isConnected&&this.inputStream&&this.startAudioAnalysis(this.inputStream))}connectedCallback(){this.syncClasses(),this.setAttribute("aria-hidden","true"),this.canvas||this.build(),this.t0=performance.now(),this.lastFrame=0,this.observeTheme(),this.inputStream&&this.startAudioAnalysis(this.inputStream),"undefined"!=typeof ResizeObserver&&(this.resizeObs=new ResizeObserver(()=>this.resize()),this.resizeObs.observe(this)),this.resize(),prefersReducedMotion()?this.frame(this.t0+1600):"undefined"!=typeof IntersectionObserver?(this.io=new IntersectionObserver(t=>{for(const e of t)this.setVisible(e.isIntersecting)},{threshold:.01}),this.io.observe(this)):this.setVisible(!0)}disconnectedCallback(){this.setVisible(!1),this.resizeObs?.disconnect(),this.resizeObs=null,this.io?.disconnect(),this.io=null,this.themeObserver?.disconnect(),this.themeObserver=null,this.themeMedia?.removeEventListener("change",this.onThemeChange),this.themeMedia=null,this.stopAudioAnalysis()}attributeChangedCallback(t){this.canvas&&("size"!==t&&"variant"!==t&&"state"!==t||this.syncClasses(),prefersReducedMotion()&&this.frame(performance.now()))}setVisible(t){t!==this.visible&&(this.visible=t,t?(l.add(this),function ensureTicking(){c||!l.size||prefersReducedMotion()||(c=requestAnimationFrame(tick))}()):l.delete(this))}syncClasses(){this.className=["designbase-wc-chat-orb",`designbase-wc-chat-orb--${this.size}`,`designbase-wc-chat-orb--${this.variant}`,`designbase-wc-chat-orb--${this.state}`].join(" ")}build(){this.replaceChildren(),this.canvas=document.createElement("canvas"),this.canvas.className="designbase-wc-chat-orb__canvas",this.ctx=this.canvas.getContext("2d"),this.append(this.canvas),this.addEventListener("pointermove",this.onPointerMove),this.addEventListener("pointerleave",this.onPointerLeave),this.addEventListener("pointerdown",this.onPointerDown)}addRipple(t,e){this.ripples.push({start:t,strength:clamp(e,.2,1)})}observeTheme(){"undefined"==typeof MutationObserver||this.themeObserver||(this.themeObserver=new MutationObserver(this.onThemeChange),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme","data-color-mode","class"]})),"function"!=typeof window.matchMedia||this.themeMedia||(this.themeMedia=window.matchMedia("(prefers-color-scheme: dark)"),this.themeMedia.addEventListener("change",this.onThemeChange))}isDarkContext(){if("dark"===this.theme)return!0;if("light"===this.theme)return!1;const t=this.parentElement?.closest("[data-theme], [data-color-mode]"),e=t?.getAttribute("data-color-mode");if("dark"===e)return!0;if("light"===e)return!1;const i=t?.getAttribute("data-theme");if("dark"===i)return!0;if("light"===i)return!1;const s=document.documentElement,a=s.getAttribute("data-color-mode");if("dark"===a)return!0;if("light"===a)return!1;const r=s.getAttribute("data-theme");return"dark"===r||"light"!==r&&(this.themeMedia?.matches??!1)}startAudioAnalysis(t){if(this.analyser)return;const e=window.AudioContext??window.webkitAudioContext;if(e)try{const i=new e,s=i.createAnalyser();s.fftSize=512,s.smoothingTimeConstant=.58;const a=i.createMediaStreamSource(t);a.connect(s),this.audioContext=i,this.audioSource=a,this.analyser=s,this.analyserData=new Float32Array(s.fftSize),"suspended"===i.state&&i.resume().catch(()=>{})}catch{this.stopAudioAnalysis()}}stopAudioAnalysis(){try{this.audioSource?.disconnect(),this.analyser?.disconnect()}catch{}this.audioContext&&this.audioContext.close().catch(()=>{}),this.audioContext=null,this.audioSource=null,this.analyser=null,this.analyserData=null}sampleVoiceLevel(t){if(this.analyser&&this.analyserData){this.analyser.getFloatTimeDomainData(this.analyserData);let t=0;for(const e of this.analyserData)t+=e*e;return{level:clamp((Math.sqrt(t/this.analyserData.length)-.01)/.11,0,1),hasInput:!0}}if(this.hasAttribute("voice-level"))return{level:this.voiceLevel,hasInput:!0};return{level:clamp(.16+.12*(Math.sin(2.05*t)+1)+.42*Math.pow(Math.max(0,Math.sin(.86*t+.7)),5),0,1),hasInput:!1}}resize(){this.canvas&&(this.dpr=Math.min(2,window.devicePixelRatio||1),this.cssW=this.clientWidth||72,this.cssH=this.clientHeight||this.cssW,this.canvas.width=Math.round(this.cssW*this.dpr),this.canvas.height=Math.round(this.cssH*this.dpr),prefersReducedMotion()&&this.frame(this.t0+1600))}frame(t){const e=this.ctx;if(!e||!this.cssW)return;const i=this.lastFrame?Math.min((t-this.lastFrame)/1e3,.1):1/60;this.lastFrame=t;const s=(t-this.t0)/1e3,a=this.cssW,l=this.cssH,c=a/2,d=l/2,m=Math.min(a,l)/2,u=this.isDarkContext(),p=u?r[this.variant]:n[this.variant],g=o[this.state];this.hover.x+=.08*(this.hover.tx-this.hover.x),this.hover.y+=.08*(this.hover.ty-this.hover.y);const b="listening"===this.state?this.sampleVoiceLevel(s):{level:0},v=b.level>this.displayedVoiceLevel?19:7;this.displayedVoiceLevel+=(b.level-this.displayedVoiceLevel)*(1-Math.exp(-v*i)),"listening"!==this.state&&this.displayedVoiceLevel<.001&&(this.displayedVoiceLevel=0);const f=Math.pow(clamp(this.displayedVoiceLevel,0,1),.72),y="listening"===this.state?this.minScale+(this.maxScale-this.minScale)*f:1,w=g.breatheAmt*("listening"===this.state?.55:1),M=1+Math.sin(s*g.breatheSpeed)*w,A="listening"===this.state?f:"thinking"===this.state?1:.55,S="thinking"===this.state?1.38:1,C=.68*m*M*y*("thinking"===this.state?1.1:1),x=.99*m;e.setTransform(this.dpr,0,0,this.dpr,0,0),e.clearRect(0,0,a,l),e.globalCompositeOperation="source-over",e.filter="none";const k="thinking"===this.state?u?.42:.22:u?.28:.5,O=u?mix(p.core,p.lights[0],k):"thinking"===this.state?mix(p.core,p.lights[0],.35):mix(p.core,[255,255,255],.5),R=mix(p.core,p.lights[1],u?"thinking"===this.state?.35:0:"thinking"===this.state?.28:.12),z=e.createRadialGradient(c,d-.12*C,.1*C,c,d,C);z.addColorStop(0,rgba(O,u?1:.96)),z.addColorStop(.72,rgba(R,u?1:.9)),z.addColorStop(.93,rgba(R,u?.72:.5)),z.addColorStop(1,rgba(R,0)),e.fillStyle=z,e.beginPath(),e.arc(c,d,C,0,h),e.fill(),e.globalCompositeOperation=u?"lighter":"source-over";const L=p.lights.length;for(let t=0;t<L;t+=1){const i=2.1*t,a=g.turb*(.85+.55*A),r=Math.sin(s*g.speed+i)*g.amp+Math.sin(s*g.speed*1.7+1.4*i)*g.amp*a*.75+Math.sin(s*g.speed*.45+.7*i)*g.amp*.35,n=Math.cos(s*g.speed*.9+1.3*i)*g.amp+Math.cos(s*g.speed*2+i)*g.amp*a*.75+Math.cos(s*g.speed*.55+.9*i)*g.amp*.35,o="thinking"===this.state?.42:.28,l=t/L*h-.5*Math.PI+s*g.speed*o,m=C*("thinking"===this.state?.52:.44),b=c+Math.cos(l)*m+r*C+this.hover.x*C*.12,v=d+Math.sin(l)*m+n*C+this.hover.y*C*.12,f=C*S*(.92+.28*A+.12*Math.sin(s*g.speed*1.3+i)),y="thinking"===this.state?mix(p.lights[t],u?[255,255,255]:p.core,u?.1:.18):p.lights[t],w=(u?.62:.78)*g.lightAlpha*(.85+.28*A)*("thinking"===this.state?1.22:1);e.save(),e.filter=`blur(${C*(u?.15:.18)*("thinking"===this.state?.92:1)}px)`;const M=e.createRadialGradient(b,v,0,b,v,f);M.addColorStop(0,rgba(y,Math.min(1,w))),M.addColorStop(.48,rgba(y,Math.min(1,.5*w))),M.addColorStop(1,rgba(y,0)),e.fillStyle=M,e.beginPath(),e.arc(b,v,f,0,h),e.fill(),e.restore()}e.filter="none",e.globalCompositeOperation="destination-in";const D=e.createRadialGradient(c,d,.6*C,c,d,C);D.addColorStop(0,"rgba(0,0,0,1)"),D.addColorStop(.86,"rgba(0,0,0,1)"),D.addColorStop(1,"rgba(0,0,0,0)"),e.fillStyle=D,e.beginPath(),e.arc(c,d,C,0,h),e.fill(),e.globalCompositeOperation="source-atop";const V=c-.22*C+this.hover.x*C*.1,F=d-.28*C+this.hover.y*C*.1,E=e.createRadialGradient(V,F,0,V,F,.95*C);E.addColorStop(0,`rgba(255,255,255,${u?.12:.2})`),E.addColorStop(1,"rgba(255,255,255,0)"),e.fillStyle=E,e.fillRect(c-C,d-C,2*C,2*C),e.globalCompositeOperation="destination-over";const P=e.createRadialGradient(c,d,.7*C,c,d,x),T=(u?.32:.14)*g.glow*(.85+.28*A);P.addColorStop(0,rgba(p.glow,T)),P.addColorStop(1,rgba(p.glow,0)),e.fillStyle=P,e.beginPath(),e.arc(c,d,x,0,h),e.fill(),e.globalCompositeOperation="source-over",e.filter="none"}}customElements.get("db-chat-orb")||customElements.define("db-chat-orb",DbChatOrb);export{DbChatOrb};

package/dist/esm/components/db-chat-room.d.ts

@@ -8,6 +8,7 @@ interface DbChatRoomMessage {
     /** 내가 보낸 메시지면 true(우측 정렬). 아니면 상대(좌측) */
     mine?: boolean;
     text?: string;
+    /** 허용 목록으로 정제할 HTML 본문 (text 대신) */
     html?: string;
     time?: string;
     /** 상대 이름(그룹 채팅에서 유용) */

package/dist/esm/components/db-chat-room.js

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";import"./db-avatar.js";import"./db-chat-message.js";import"./db-chat-typing.js";import"./db-chat-composer.js";const e="designbase-wc-chat-room";let s=0;function el(t,e,s){const a=document.createElement(t);return e&&(a.className=e),null!=s&&(a.textContent=s),a}class DbChatRoom extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.typing=!1,this.dragDepth=0,this._messages=[],this.handleDragEnter=t=>{this.hasDragFiles(t)&&(t.preventDefault(),this.dragDepth+=1,this.showDropOverlay(!0))},this.handleDragOver=t=>{this.hasDragFiles(t)&&(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="copy"))},this.handleDragLeave=()=>{this.dragDepth=Math.max(0,this.dragDepth-1),0===this.dragDepth&&this.showDropOverlay(!1)},this.handleDrop=t=>{if(!this.hasDragFiles(t))return;t.preventDefault(),t.stopPropagation(),this.dragDepth=0,this.showDropOverlay(!1);const e=Array.from(t.dataTransfer?.files||[]);e.length&&this.composer&&(this.composer.addFiles(e,"drop"),this.composer.focusInput())}}static get observedAttributes(){return["peer-name","peer-avatar","peer-initials","peer-status","placeholder","online","show-back"]}set messages(t){this._messages=Array.isArray(t)?t.map(t=>({id:`r${s+=1}`,...t})):[],this.built&&this.renderThread()}get messages(){return this._messages}connectedCallback(){this.built||this.build(),this.sync(),this.addEventListener("dragenter",this.handleDragEnter),this.addEventListener("dragover",this.handleDragOver),this.addEventListener("dragleave",this.handleDragLeave),this.addEventListener("drop",this.handleDrop)}disconnectedCallback(){this.removeEventListener("dragenter",this.handleDragEnter),this.removeEventListener("dragover",this.handleDragOver),this.removeEventListener("dragleave",this.handleDragLeave),this.removeEventListener("drop",this.handleDrop)}attributeChangedCallback(){this.built&&this.sync()}build(){this.built=!0,this.className=e,this.replaceChildren(),this.headerEl=el("div",`${e}__header`),this.scrollEl=el("div",`${e}__scroll`),this.threadEl=el("div",`${e}__thread`),this.scrollEl.append(this.threadEl),this.dockEl=el("div",`${e}__dock`),this.dropOverlay=el("div",`${e}__drop-overlay`),this.dropOverlay.hidden=!0,this.dropOverlay.setAttribute("aria-hidden","true"),this.dropOverlay.append(el("span",`${e}__drop-label`,"파일을 놓으면 첨부됩니다")),this.composer=document.createElement("db-chat-composer"),this.composer.setAttribute("attach",""),this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||"메시지 보내기…"),this.composer.addEventListener("db-send",t=>{t.stopPropagation();const e=t.detail,s=e?.value?.trim()||"",a=e?.attachments||[];if(!s&&!a.length)return;const r=a.map(t=>({name:t.name,kind:t.kind,mime:t.mime,url:t.file?URL.createObjectURL(t.file):t.preview}));this.dispatchEvent(new CustomEvent("db-send",{detail:{value:s,attachments:r},bubbles:!0,composed:!0})),this.addMessage({mine:!0,text:s,time:this.nowLabel(),attachments:r.length?r:void 0})}),this.dockEl.append(this.composer),this.append(this.headerEl,this.scrollEl,this.dockEl,this.dropOverlay),this.renderThread()}sync(){this.renderHeader(),this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||"메시지 보내기…")}renderHeader(){if(this.headerEl.replaceChildren(),this.hasAttribute("show-back")){const s=el("button",`${e}__back`);s.type="button",s.setAttribute("aria-label","뒤로"),s.append(t("chevron-left",20)),s.addEventListener("click",()=>this.dispatchEvent(new CustomEvent("db-back",{bubbles:!0,composed:!0}))),this.headerEl.append(s)}const s=document.createElement("db-avatar");s.className=`${e}__avatar`,s.setAttribute("size","m"),s.setAttribute("variant","primary");const a=this.getAttribute("peer-avatar"),r=this.getAttribute("peer-initials");a?s.setAttribute("src",a):r&&s.setAttribute("initials",r),this.hasAttribute("online")&&s.setAttribute("status","online");const i=el("div",`${e}__meta`);i.append(el("span",`${e}__name`,this.getAttribute("peer-name")||"대화"));const n=this.getAttribute("peer-status")||(this.hasAttribute("online")?"온라인":"");n&&i.append(el("span",`${e}__status`,n)),this.headerEl.append(s,i)}renderThread(){this.threadEl.replaceChildren(),this._messages.forEach(t=>this.threadEl.append(this.buildMessage(t))),this.typing&&this.threadEl.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())}buildMessage(t){const e=el("db-chat-message");return e.dataset.id=t.id||"",e.setAttribute("role",t.mine?"user":"assistant"),!t.mine&&t.name&&e.setAttribute("name",t.name),t.time&&e.setAttribute("timestamp",t.time),!t.mine&&t.avatarSrc&&e.setAttribute("avatar-src",t.avatarSrc),!t.mine&&t.avatarInitials&&e.setAttribute("avatar-initials",t.avatarInitials),null!=t.html?e.innerHTML=t.html:e.textContent=t.text||"",t.attachments?.length&&(e.attachments=t.attachments),e}buildTyping(){const t=el("db-chat-typing");return t.setAttribute("name",this.getAttribute("peer-name")||""),t.setAttribute("avatar-initials",this.getAttribute("peer-initials")||""),t}scrollToEnd(){this.scrollEl.scrollTop=this.scrollEl.scrollHeight}nowLabel(){const t=new Date,e=t.getHours();return`${e<12?"오전":"오후"} ${e%12==0?12:e%12}:${t.getMinutes().toString().padStart(2,"0")}`}hasDragFiles(t){return Array.from(t.dataTransfer?.types||[]).includes("Files")}showDropOverlay(t){this.dropOverlay.hidden=!t,this.classList.toggle(`${e}--drop-active`,t)}addMessage(t){const e={id:`r${s+=1}`,...t};this._messages.push(e);const a=this.threadEl.querySelector("db-chat-typing"),r=this.buildMessage(e);return a?this.threadEl.insertBefore(r,a):this.threadEl.append(r),requestAnimationFrame(()=>this.scrollToEnd()),e.id}setMessages(t){this.messages=t}setTyping(t){if(this.typing=Boolean(t),!this.built)return;const e=this.threadEl.querySelector("db-chat-typing");this.typing&&!e?(this.threadEl.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())):!this.typing&&e&&e.remove()}focusInput(){this.composer?.focusInput()}getComposer(){return this.composer}}customElements.get("db-chat-room")||customElements.define("db-chat-room",DbChatRoom);export{DbChatRoom};
+import{createDbIcon as t}from"./db-icons.js";import{sanitizeHtmlFragment as e}from"../core/safe-html.js";import"./db-avatar.js";import"./db-chat-message.js";import"./db-chat-typing.js";import"./db-chat-composer.js";const s="designbase-wc-chat-room";let a=0;function el(t,e,s){const a=document.createElement(t);return e&&(a.className=e),null!=s&&(a.textContent=s),a}class DbChatRoom extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.typing=!1,this.dragDepth=0,this._messages=[],this.handleDragEnter=t=>{this.hasDragFiles(t)&&(t.preventDefault(),this.dragDepth+=1,this.showDropOverlay(!0))},this.handleDragOver=t=>{this.hasDragFiles(t)&&(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="copy"))},this.handleDragLeave=()=>{this.dragDepth=Math.max(0,this.dragDepth-1),0===this.dragDepth&&this.showDropOverlay(!1)},this.handleDrop=t=>{if(!this.hasDragFiles(t))return;t.preventDefault(),t.stopPropagation(),this.dragDepth=0,this.showDropOverlay(!1);const e=Array.from(t.dataTransfer?.files||[]);e.length&&this.composer&&(this.composer.addFiles(e,"drop"),this.composer.focusInput())}}static get observedAttributes(){return["peer-name","peer-avatar","peer-initials","peer-status","placeholder","online","show-back"]}set messages(t){this._messages=Array.isArray(t)?t.map(t=>({id:`r${a+=1}`,...t})):[],this.built&&this.renderThread()}get messages(){return this._messages}connectedCallback(){this.built||this.build(),this.sync(),this.addEventListener("dragenter",this.handleDragEnter),this.addEventListener("dragover",this.handleDragOver),this.addEventListener("dragleave",this.handleDragLeave),this.addEventListener("drop",this.handleDrop)}disconnectedCallback(){this.removeEventListener("dragenter",this.handleDragEnter),this.removeEventListener("dragover",this.handleDragOver),this.removeEventListener("dragleave",this.handleDragLeave),this.removeEventListener("drop",this.handleDrop)}attributeChangedCallback(){this.built&&this.sync()}build(){this.built=!0,this.className=s,this.replaceChildren(),this.headerEl=el("div",`${s}__header`),this.scrollEl=el("div",`${s}__scroll`),this.threadEl=el("div",`${s}__thread`),this.scrollEl.append(this.threadEl),this.dockEl=el("div",`${s}__dock`),this.dropOverlay=el("div",`${s}__drop-overlay`),this.dropOverlay.hidden=!0,this.dropOverlay.setAttribute("aria-hidden","true"),this.dropOverlay.append(el("span",`${s}__drop-label`,"파일을 놓으면 첨부됩니다")),this.composer=document.createElement("db-chat-composer"),this.composer.setAttribute("attach",""),this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||"메시지 보내기…"),this.composer.addEventListener("db-send",t=>{t.stopPropagation();const e=t.detail,s=e?.value?.trim()||"",a=e?.attachments||[];if(!s&&!a.length)return;const r=a.map(t=>({name:t.name,kind:t.kind,mime:t.mime,url:t.file?URL.createObjectURL(t.file):t.preview}));this.dispatchEvent(new CustomEvent("db-send",{detail:{value:s,attachments:r},bubbles:!0,composed:!0})),this.addMessage({mine:!0,text:s,time:this.nowLabel(),attachments:r.length?r:void 0})}),this.dockEl.append(this.composer),this.append(this.headerEl,this.scrollEl,this.dockEl,this.dropOverlay),this.renderThread()}sync(){this.renderHeader(),this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||"메시지 보내기…")}renderHeader(){if(this.headerEl.replaceChildren(),this.hasAttribute("show-back")){const e=el("button",`${s}__back`);e.type="button",e.setAttribute("aria-label","뒤로"),e.append(t("chevron-left",20)),e.addEventListener("click",()=>this.dispatchEvent(new CustomEvent("db-back",{bubbles:!0,composed:!0}))),this.headerEl.append(e)}const e=document.createElement("db-avatar");e.className=`${s}__avatar`,e.setAttribute("size","m"),e.setAttribute("variant","primary");const a=this.getAttribute("peer-avatar"),r=this.getAttribute("peer-initials");a?e.setAttribute("src",a):r&&e.setAttribute("initials",r),this.hasAttribute("online")&&e.setAttribute("status","online");const i=el("div",`${s}__meta`);i.append(el("span",`${s}__name`,this.getAttribute("peer-name")||"대화"));const n=this.getAttribute("peer-status")||(this.hasAttribute("online")?"온라인":"");n&&i.append(el("span",`${s}__status`,n)),this.headerEl.append(e,i)}renderThread(){this.threadEl.replaceChildren(),this._messages.forEach(t=>this.threadEl.append(this.buildMessage(t))),this.typing&&this.threadEl.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())}buildMessage(t){const s=el("db-chat-message");return s.dataset.id=t.id||"",s.setAttribute("role",t.mine?"user":"assistant"),!t.mine&&t.name&&s.setAttribute("name",t.name),t.time&&s.setAttribute("timestamp",t.time),!t.mine&&t.avatarSrc&&s.setAttribute("avatar-src",t.avatarSrc),!t.mine&&t.avatarInitials&&s.setAttribute("avatar-initials",t.avatarInitials),null!=t.html?s.replaceChildren(e(t.html)):s.textContent=t.text||"",t.attachments?.length&&(s.attachments=t.attachments),s}buildTyping(){const t=el("db-chat-typing");return t.setAttribute("name",this.getAttribute("peer-name")||""),t.setAttribute("avatar-initials",this.getAttribute("peer-initials")||""),t}scrollToEnd(){this.scrollEl.scrollTop=this.scrollEl.scrollHeight}nowLabel(){const t=new Date,e=t.getHours();return`${e<12?"오전":"오후"} ${e%12==0?12:e%12}:${t.getMinutes().toString().padStart(2,"0")}`}hasDragFiles(t){return Array.from(t.dataTransfer?.types||[]).includes("Files")}showDropOverlay(t){this.dropOverlay.hidden=!t,this.classList.toggle(`${s}--drop-active`,t)}addMessage(t){const e={id:`r${a+=1}`,...t};this._messages.push(e);const s=this.threadEl.querySelector("db-chat-typing"),r=this.buildMessage(e);return s?this.threadEl.insertBefore(r,s):this.threadEl.append(r),requestAnimationFrame(()=>this.scrollToEnd()),e.id}setMessages(t){this.messages=t}setTyping(t){if(this.typing=Boolean(t),!this.built)return;const e=this.threadEl.querySelector("db-chat-typing");this.typing&&!e?(this.threadEl.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())):!this.typing&&e&&e.remove()}focusInput(){this.composer?.focusInput()}getComposer(){return this.composer}}customElements.get("db-chat-room")||customElements.define("db-chat-room",DbChatRoom);export{DbChatRoom};

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

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";import{CleanupBag as e}from"../core/dom.js";import{CHECKBOX_SIZES as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";class DbCheckbox extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.userInteracted=!1,this.cleanups=new e,this.handleChange=()=>{if(!this.input)return;this.userInteracted=!0;const t=this.input.checked;this.toggleAttribute("checked",t),this.indeterminate&&(this.removeAttribute("indeterminate"),this.input.indeterminate=!1),this.syncVisual(),this.syncClasses(),this.syncValidity(),this.dispatchEvent(new CustomEvent("db-change",{detail:{checked:t,selected:t},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["checked","selected","default-checked","default-selected","indeterminate","size","disabled","readonly","required","name","value","has-label"]}get checked(){return this.input?.checked??(this.hasAttribute("checked")||this.hasAttribute("selected"))}set checked(t){this.toggleAttribute("checked",t),this.input&&(this.input.checked=t,this.syncVisual(),this.syncClasses())}get indeterminate(){return this.hasAttribute("indeterminate")}set indeterminate(t){this.toggleAttribute("indeterminate",t),this.input&&(this.input.indeterminate=t,this.syncVisual(),this.syncClasses())}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t),this.input&&(this.input.disabled=t),this.syncClasses()}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t),this.input&&(this.input.readOnly=t),this.syncClasses()}get required(){return this.hasAttribute("required")}set required(t){this.toggleAttribute("required",t),this.input&&(this.input.required=t)}get size(){return s(this.getAttribute("size"),i,"m")}set size(t){this.setAttribute("size",t)}connectedCallback(){this.style.display="contents",this.built||this.build(),this.syncState();const t=this.input?.form;t&&this.cleanups.listen(t,"reset",()=>{window.setTimeout(()=>this.syncAfterReset(),0)})}disconnectedCallback(){this.cleanups.run()}syncAfterReset(){this.input&&(this.toggleAttribute("checked",this.input.checked),this.removeAttribute("selected"),this.syncVisual(),this.syncClasses())}attributeChangedCallback(t){if(this.built)return"checked"===t||"selected"===t?(this.input&&(this.input.checked=this.hasAttribute("checked")||this.hasAttribute("selected")),this.syncVisual(),void this.syncClasses()):void this.syncState()}get hasLabel(){return!this.hasAttribute("has-label")||"false"!==this.getAttribute("has-label")}build(){for(this.root=document.createElement("label"),this.root.className="designbase-wc-checkbox",this.input=document.createElement("input"),this.input.type="checkbox",this.input.className="designbase-wc-checkbox__input",this.visual=document.createElement("span"),this.visual.className="designbase-wc-checkbox__visual",this.visual.setAttribute("aria-hidden","true"),this.labelEl=document.createElement("span"),this.labelEl.className="designbase-wc-checkbox__label";this.firstChild;)this.labelEl.appendChild(this.firstChild);this.root.append(this.input,this.visual,this.labelEl),this.appendChild(this.root),this.input.addEventListener("change",this.handleChange),this.built=!0}syncValidity(){if(!this.input)return;const t=!this.input.checkValidity();this.input.setAttribute("aria-invalid",String(t)),this.classList.toggle("designbase-wc-checkbox--invalid",t)}syncState(){if(!this.root||!this.input||!this.visual)return;const t=this.hasAttribute("checked")||this.hasAttribute("selected")||!this.userInteracted&&(this.hasAttribute("default-checked")||this.hasAttribute("default-selected")),e=this.hasAttribute("indeterminate");this.input.checked=t,this.input.defaultChecked=this.hasAttribute("default-checked")||this.hasAttribute("default-selected")||this.hasAttribute("checked")||this.hasAttribute("selected"),this.input.indeterminate=e,this.input.disabled=this.disabled,this.input.readOnly=this.readOnly,this.input.required=this.required,this.input.name=this.getAttribute("name")||"",this.input.value=this.getAttribute("value")||"",this.hasLabel?this.labelEl?.removeAttribute("hidden"):this.labelEl?.setAttribute("hidden",""),this.syncVisual(),this.syncClasses()}syncVisual(){if(this.visual&&this.input){if(this.visual.replaceChildren(),this.input.indeterminate){const e=document.createElement("span");return e.className="designbase-wc-checkbox__indeterminate-icon",e.appendChild(t("minus",16)),void this.visual.appendChild(e)}if(this.input.checked){const e=document.createElement("span");e.className="designbase-wc-checkbox__check-icon",e.appendChild(t("done",16)),this.visual.appendChild(e)}}}syncClasses(){if(!this.root||!this.input)return;const t=i.includes(this.size)?this.size:"m",e=this.hasLabel&&Boolean(this.labelEl?.textContent?.trim());this.root.className=["designbase-wc-checkbox",`designbase-wc-checkbox--${t}`,this.input.checked&&"designbase-wc-checkbox--selected",this.input.indeterminate&&"designbase-wc-checkbox--indeterminate",this.disabled&&"designbase-wc-checkbox--disabled",this.readOnly&&"designbase-wc-checkbox--readonly",!e&&"designbase-wc-checkbox--no-label"].filter(Boolean).join(" ")}}customElements.get("db-checkbox")||customElements.define("db-checkbox",DbCheckbox);export{DbCheckbox};
+import{createDbIcon as t}from"./db-icons.js";import{CleanupBag as e}from"../core/dom.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{CHECKBOX_SIZES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbCheckbox extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.userInteracted=!1,this.cleanups=new e,this.handleChange=()=>{if(!this.input)return;this.userInteracted=!0;const t=this.input.checked;this.toggleAttribute("checked",t),this.indeterminate&&(this.removeAttribute("indeterminate"),this.input.indeterminate=!1),this.syncVisual(),this.syncClasses(),this.syncValidity(),this.dispatchEvent(new CustomEvent("db-change",{detail:{checked:t,selected:t},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["checked","selected","default-checked","default-selected","indeterminate","size","disabled","readonly","required","name","value","has-label"]}get checked(){return this.input?.checked??(this.hasAttribute("checked")||this.hasAttribute("selected"))}set checked(t){this.toggleAttribute("checked",t),this.input&&(this.input.checked=t,this.syncVisual(),this.syncClasses())}get indeterminate(){return this.hasAttribute("indeterminate")}set indeterminate(t){this.toggleAttribute("indeterminate",t),this.input&&(this.input.indeterminate=t,this.syncVisual(),this.syncClasses())}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t),this.input&&(this.input.disabled=t),this.syncClasses()}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t),this.input&&(this.input.readOnly=t),this.syncClasses()}get required(){return this.hasAttribute("required")}set required(t){this.toggleAttribute("required",t),this.input&&(this.input.required=t)}get size(){return i(this.getAttribute("size"),s,"m")}set size(t){this.setAttribute("size",t)}connectedCallback(){this.style.display="contents",this.built||this.build(),this.syncState();const t=this.input?.form;t&&this.cleanups.listen(t,"reset",()=>{window.setTimeout(()=>this.syncAfterReset(),0)})}disconnectedCallback(){this.cleanups.run()}syncAfterReset(){this.input&&(this.toggleAttribute("checked",this.input.checked),this.removeAttribute("selected"),this.syncVisual(),this.syncClasses())}attributeChangedCallback(t){if(this.built)return"checked"===t||"selected"===t?(this.input&&(this.input.checked=this.hasAttribute("checked")||this.hasAttribute("selected")),this.syncVisual(),void this.syncClasses()):void this.syncState()}get hasLabel(){return!this.hasAttribute("has-label")||"false"!==this.getAttribute("has-label")}build(){for(this.root=document.createElement("label"),this.root.className="designbase-wc-checkbox",this.input=document.createElement("input"),this.input.type="checkbox",this.input.className="designbase-wc-checkbox__input",this.visual=document.createElement("span"),this.visual.className="designbase-wc-checkbox__visual",this.visual.setAttribute("aria-hidden","true"),this.labelEl=document.createElement("span"),this.labelEl.className="designbase-wc-checkbox__label";this.firstChild;)this.labelEl.appendChild(this.firstChild);this.root.append(this.input,this.visual,this.labelEl),this.appendChild(this.root),this.input.addEventListener("change",this.handleChange),this.built=!0}syncValidity(){if(!this.input)return;const t=!this.input.checkValidity();this.input.setAttribute("aria-invalid",String(t)),this.classList.toggle("designbase-wc-checkbox--invalid",t)}syncState(){if(!this.root||!this.input||!this.visual)return;const t=this.hasAttribute("checked")||this.hasAttribute("selected")||!this.userInteracted&&(this.hasAttribute("default-checked")||this.hasAttribute("default-selected")),e=this.hasAttribute("indeterminate");this.input.checked=t,this.input.defaultChecked=this.hasAttribute("default-checked")||this.hasAttribute("default-selected")||this.hasAttribute("checked")||this.hasAttribute("selected"),this.input.indeterminate=e,this.input.disabled=this.disabled,this.input.readOnly=this.readOnly,this.input.required=this.required,this.input.name=this.getAttribute("name")||"",this.input.value=this.getAttribute("value")||"",this.hasLabel?this.labelEl?.removeAttribute("hidden"):this.labelEl?.setAttribute("hidden",""),this.syncVisual(),this.syncClasses()}syncVisual(){if(this.visual&&this.input){if(this.visual.replaceChildren(),this.input.indeterminate){const e=document.createElement("span");return e.className="designbase-wc-checkbox__indeterminate-icon",e.appendChild(t("minus",16)),void this.visual.appendChild(e)}if(this.input.checked){const e=document.createElement("span");e.className="designbase-wc-checkbox__check-icon",e.appendChild(t("done",16)),this.visual.appendChild(e)}}}syncClasses(){if(!this.root||!this.input)return;const t=s.includes(this.size)?this.size:"m",e=this.hasLabel&&Boolean(this.labelEl?.textContent?.trim());this.root.className=["designbase-wc-checkbox",`designbase-wc-checkbox--${t}`,this.input.checked&&"designbase-wc-checkbox--selected",this.input.indeterminate&&"designbase-wc-checkbox--indeterminate",this.disabled&&"designbase-wc-checkbox--disabled",this.readOnly&&"designbase-wc-checkbox--readonly",!e&&"designbase-wc-checkbox--no-label"].filter(Boolean).join(" ")}}customElements.get("db-checkbox")||customElements.define("db-checkbox",DbCheckbox);export{DbCheckbox};