@designbasekorea/ui-wc 0.8.13 → 0.9.2

package/dist/esm/components/db-progressive-blur.js

@@ -0,0 +1 @@
+import{coerceToContract as t}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{PROGRESSIVE_BLUR_POSITIONS as e,PROGRESSIVE_BLUR_SIZES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const i="designbase-wc-progressive-blur",r=[.5,1,2,4,8,16,32,64];class DbProgressiveBlur extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["position","height","width","size","blur-levels","tint"]}get position(){return t(this.getAttribute("position"),e,"bottom")}set position(t){this.setAttribute("position",t)}get size(){return t(this.getAttribute("size"),s,"m")}set size(t){this.setAttribute("size",t)}get height(){return this.getAttribute("height")||""}set height(t){this.setAttribute("height",t)}get width(){return this.getAttribute("width")||""}set width(t){this.setAttribute("width",t)}get tint(){return this.getAttribute("tint")||""}set tint(t){this.setAttribute("tint",t)}get blurLevels(){const t=this.getAttribute("blur-levels");if(!t)return r;try{if(t.startsWith("[")){const e=JSON.parse(t);if(Array.isArray(e)&&e.every(t=>"number"==typeof t))return e}const e=t.split(",").map(t=>parseFloat(t.trim())).filter(t=>Number.isFinite(t)&&t>=0);return e.length?e:r}catch{return r}}set blurLevels(t){this.setAttribute("blur-levels",JSON.stringify(t))}connectedCallback(){this.setAttribute("aria-hidden","true"),this.built||(this.build(),this.built=!0),this.sync()}disconnectedCallback(){}attributeChangedCallback(){this.built&&this.sync()}build(){this.classList.add(i)}createEdgePanel(t,e){const s=document.createElement("div");s.className=`${i}__edge ${i}__edge--${t}`;const r=e.length;if(e.forEach((e,n)=>{const o=document.createElement("div");o.className=`${i}__layer`;const a=`${e}px`;o.style.backdropFilter=`blur(${a})`,o.style.setProperty("-webkit-backdrop-filter",`blur(${a})`);const h=Math.max(0,Math.round(n/r*100)),l=Math.min(100,Math.round((n+1.5)/r*100)),u=`linear-gradient(to ${t}, rgba(0,0,0,0) ${h}%, rgba(0,0,0,1) ${l}%)`;o.style.maskImage=u,o.style.setProperty("-webkit-mask-image",u),s.appendChild(o)}),this.tint){const e=document.createElement("div");e.className=`${i}__tint`,e.style.background=`linear-gradient(to ${t}, transparent 0%, ${this.tint} 100%)`,s.appendChild(e)}return s}renderLayers(){this.replaceChildren();const t=this.position,e=this.blurLevels;"both"===t?(this.topPanel=this.createEdgePanel("top",e),this.bottomPanel=this.createEdgePanel("bottom",e),this.append(this.topPanel,this.bottomPanel)):(this.mainPanel=this.createEdgePanel(t,e),this.append(this.mainPanel))}sync(){e.forEach(t=>this.classList.remove(`${i}--${t}`)),s.forEach(t=>this.classList.remove(`${i}--${t}`)),this.classList.add(`${i}--${this.position}`),this.classList.add(`${i}--${this.size}`);const t=this.height;t?this.style.setProperty("--progressive-blur-height",t):this.style.removeProperty("--progressive-blur-height");const r=this.width;r?this.style.setProperty("--progressive-blur-width",r):this.style.removeProperty("--progressive-blur-width"),this.renderLayers()}}customElements.get("db-progressive-blur")||customElements.define("db-progressive-blur",DbProgressiveBlur);export{DbProgressiveBlur};

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

@@ -0,0 +1,37 @@
+import { DbPaperCard } from './paper-card.js';
+
+interface DbReceiptItem {
+    name: string;
+    quantity: number;
+    unitAmount: number;
+}
+interface DbReceiptLabels {
+    quantity: string;
+    subtotal: string;
+    discount: string;
+    tax: string;
+    total: string;
+    payment: string;
+    empty: string;
+    invalid: string;
+}
+/** Integer minor-unit amounts: KRW 3900 = ₩3,900; USD 3900 = $39.00. */
+declare class DbReceipt extends DbPaperCard {
+    static get observedAttributes(): string[];
+    private data;
+    private customLabels;
+    protected upgradeNames(): string[];
+    get items(): DbReceiptItem[];
+    set items(value: DbReceiptItem[]);
+    get labels(): DbReceiptLabels;
+    set labels(value: Partial<DbReceiptLabels>);
+    protected render(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-receipt': DbReceipt;
+    }
+}
+
+export { DbReceipt };
+export type { DbReceiptItem, DbReceiptLabels };

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

@@ -0,0 +1 @@
+import{t,getDbLocale as e}from"../core/i18n.js";import{DbPaperCard as a,paperJson as r,paperNode as i,paperDetails as s}from"./paper-card.js";const n={quantity:"수량",subtotal:"소계",discount:"할인",tax:"세금",total:"합계",payment:"결제수단",empty:"표시할 품목이 없습니다.",invalid:"품목과 금액 정보를 확인해주세요."},minor=t=>"number"==typeof t&&Number.isSafeInteger(t)&&t>=0;class DbReceipt extends a{constructor(){super(...arguments),this.data=void 0,this.customLabels={}}static get observedAttributes(){return["variant","code-image-src","code-alt","merchant","merchant-detail","reference","issued-at","items","currency","locale","discount-amount","tax-amount","payment-method","note","edge","action-label","disabled"]}upgradeNames(){return["items","labels"]}get items(){const t=this.data??r(this.attr("items"));return Array.isArray(t)?t.map(t=>({...t})):[]}set items(t){this.data=null==t?void 0:Array.isArray(t)?t.map(t=>({...t})):t,this.isConnected&&this.render()}get labels(){return{...Object.fromEntries(Object.entries(n).map(([e,a])=>[e,t(`receipt.${e}`,a)])),...this.customLabels}}set labels(t){this.customLabels={};for(const e of Object.keys(n))"string"==typeof t?.[e]&&(this.customLabels[e]=t[e]);this.isConnected&&this.render()}render(){const a="compact"===this.getAttribute("variant");this.dataset.variant=a?"compact":"default";const r=this.labels,n=i("section","db-paper__main");n.append(i("h3","db-paper__title",this.attr("merchant")||t("receipt.title"))),this.attr("merchant-detail")&&n.append(i("p","db-paper__description",this.attr("merchant-detail")));const o=i("div","db-paper__receipt-meta");let p;this.attr("issued-at")&&o.append(i("span","",this.attr("issued-at"))),!a&&this.attr("reference")&&o.append(i("span","",this.attr("reference"))),n.append(o);try{p=new Intl.NumberFormat(this.attr("locale")||("ko"===e()?"ko-KR":"en-US"),{style:"currency",currency:this.attr("currency")||"KRW"})}catch{p=new Intl.NumberFormat("ko"===e()?"ko-KR":"en-US",{style:"currency",currency:"KRW"})}const c=p.resolvedOptions().maximumFractionDigits||0,d=BigInt(10**c),m=new Intl.NumberFormat(p.resolvedOptions().locale,{useGrouping:!1,minimumIntegerDigits:Math.max(1,c),maximumFractionDigits:0}),money=t=>{const e=BigInt(t);return p.formatToParts(e/d).map(t=>"fraction"===t.type?m.format(e%d):t.value).join("")};let u=this.data;if(void 0===u)try{u=this.hasAttribute("items")?JSON.parse(this.attr("items")):[]}catch{u=null}const l=Array.isArray(u)?u:[];let b=Array.isArray(u),h=0;for(const t of l){if(!t||"string"!=typeof t.name||!Number.isSafeInteger(t.quantity)||t.quantity<=0||!minor(t.unitAmount)||!Number.isSafeInteger(t.quantity*t.unitAmount)){b=!1;break}if(h+=t.quantity*t.unitAmount,!Number.isSafeInteger(h)){b=!1;break}}const amount=t=>this.hasAttribute(t)&&""===this.attr(t).trim()?NaN:Number(this.getAttribute(t)??0),y=amount("discount-amount"),f=amount("tax-amount");b=b&&minor(y)&&minor(f)&&y<=h&&Number.isSafeInteger(h-y+f);const g=i("div","db-paper__receipt-items");if(b)if(l.length)for(const t of l){const e=i("div","db-paper__receipt-item"),a=i("div","");a.append(i("strong","",t.name),i("span","db-paper__label",`${r.quantity} ${t.quantity} × ${money(t.unitAmount)}`)),e.append(a,i("span","",money(t.unitAmount*t.quantity))),g.append(e)}else g.append(i("p","db-paper__note",r.empty));else{const t=i("p","db-paper__error",r.invalid);t.setAttribute("role","alert"),g.append(t)}n.append(g);const _=i("div","db-paper__stub"),v=a?n:_;if(b&&(!a||y||f)){const t=[{label:r.subtotal,value:money(h)}];y&&t.push({label:r.discount,value:"−"+money(y)}),f&&t.push({label:r.tax,value:money(f)}),v.append(s(t))}const A=i("div","db-paper__receipt-total");A.append(i("strong","",r.total),i("strong","db-paper__amount",b?money(h-y+f):"—")),v.append(A),this.attr("payment-method")&&v.append(s([{label:r.payment,value:this.attr("payment-method")}])),this.attr("note")&&v.append(i("p","db-paper__note",this.attr("note"))),(a||this.attr("code-image-src"))&&_.append(this.code(this.attr("reference")));const N=this.action(this.attr("reference"));N&&(N.toggleAttribute("disabled",!b||this.hasAttribute("disabled")),_.append(N)),this.replace(n,_)}}customElements.get("db-receipt")||customElements.define("db-receipt",DbReceipt);export{DbReceipt};

package/dist/esm/components/db-resizable-panels.js

@@ -1 +1 @@
-const e=["both","horizontal","vertical"],t=["bottom-right","bottom-left","top-right","top-left","right","bottom"];class DbResizablePanels extends HTMLElement{constructor(){super(...arguments),this.isResizing=!1,this.startSize={width:0,height:0},this.startPos={x:0,y:0},this.currentSize={width:0,height:0},this.rafId=0,this.pendingPoint=null,this.onMouseDown=e=>{e.preventDefault(),this.startResize(e.clientX,e.clientY),document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onMouseUp)},this.onTouchStart=e=>{e.preventDefault();const t=e.touches[0];this.startResize(t.clientX,t.clientY),document.addEventListener("touchmove",this.onTouchMove,{passive:!1}),document.addEventListener("touchend",this.onTouchEnd)},this.onMouseMove=e=>{this.scheduleResize(e.clientX,e.clientY)},this.onTouchMove=e=>{e.preventDefault();const t=e.touches[0];this.scheduleResize(t.clientX,t.clientY)},this.onMouseUp=()=>{this.endResize(),document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mouseup",this.onMouseUp)},this.onTouchEnd=()=>{this.endResize(),document.removeEventListener("touchmove",this.onTouchMove),document.removeEventListener("touchend",this.onTouchEnd)}}static get observedAttributes(){return["initial-width","initial-height","min-width","min-height","max-width","max-height","direction","handle-position","handle-size","handle-color","handle-hover-color","snap-to-grid","show-guides","show-size-indicator","show-constraints","show-border","shadow","background-color","border-radius"]}connectedCallback(){this.ensureStructure(),this.initializeSize(),this.render()}disconnectedCallback(){this.detachDragListeners(),this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=0)}detachDragListeners(){document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mouseup",this.onMouseUp),document.removeEventListener("touchmove",this.onTouchMove),document.removeEventListener("touchend",this.onTouchEnd)}attributeChangedCallback(){this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const i=this.getAttribute(e);return""===i||"true"===i}getNumber(e,t){const i=Number(this.getAttribute(e)??t);return Number.isFinite(i)?i:t}getDirection(){const t=this.getAttribute("direction");return t&&e.includes(t)?t:"both"}getHandlePosition(){const e=this.getAttribute("handle-position");return e&&t.includes(e)?e:"bottom-right"}initializeSize(){const e=this.parentElement?.getBoundingClientRect();if(!e)return;const t=this.getAttribute("initial-width")||"100%",i=this.getAttribute("initial-height")||"100%";this.currentSize={width:"string"==typeof t&&t.endsWith("%")?e.width*Number(t.replace("%",""))/100:Number(t)||e.width,height:"string"==typeof i&&i.endsWith("%")?e.height*Number(i.replace("%",""))/100:Number(i)||e.height}}getMinSize(){return{width:this.getNumber("min-width",200),height:this.getNumber("min-height",150)}}getMaxSize(){const e=this.parentElement?.getBoundingClientRect();if(!e)return{width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY};const t=this.getAttribute("max-width")||"100vw",i=this.getAttribute("max-height")||"100vh",toSize=(e,t,i)=>{if("100vw"===e||"100vh"===e)return t;if("100%"===e)return i;const s=Number(e);return Number.isFinite(s)?s:Number.POSITIVE_INFINITY};return{width:toSize(t,window.innerWidth,e.width),height:toSize(i,window.innerHeight,e.height)}}ensureStructure(){if(this.container)return;this.container=document.createElement("div"),this.container.className="designbase-wc-resizable-panels",this.guidesEl=document.createElement("div"),this.guidesEl.className="designbase-wc-resizable-panels__guides";const e=document.createElement("div");e.className="designbase-wc-resizable-panels__guide designbase-wc-resizable-panels__guide--horizontal";const t=document.createElement("div");t.className="designbase-wc-resizable-panels__guide designbase-wc-resizable-panels__guide--vertical",this.guidesEl.append(e,t),this.sizeIndicatorEl=document.createElement("div"),this.sizeIndicatorEl.className="designbase-wc-resizable-panels__size-indicator",this.constraintsEl=document.createElement("div"),this.constraintsEl.className="designbase-wc-resizable-panels__constraints",this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-resizable-panels__content",this.handleEl=document.createElement("div"),this.handleEl.className="designbase-wc-resizable-panels__handle",this.handleEl.addEventListener("mousedown",this.onMouseDown),this.handleEl.addEventListener("touchstart",this.onTouchStart,{passive:!1}),this.container.append(this.guidesEl,this.sizeIndicatorEl,this.constraintsEl,this.contentEl,this.handleEl),this.replaceChildren(this.container)}startResize(e,t){this.isResizing=!0,this.startSize={...this.currentSize},this.startPos={x:e,y:t},this.dispatchEvent(new CustomEvent("db-resize-start",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render()}scheduleResize(e,t){this.pendingPoint={x:e,y:t},this.rafId||(this.rafId=requestAnimationFrame(()=>{this.rafId=0;const e=this.pendingPoint;this.pendingPoint=null,e&&this.applyResize(e.x,e.y)}))}applyResize(e,t){if(!this.isResizing)return;const i=e-this.startPos.x,s=t-this.startPos.y,n=this.getDirection();let h=this.startSize.width,r=this.startSize.height;"both"!==n&&"horizontal"!==n||(h+=i),"both"!==n&&"vertical"!==n||(r+=s);const o=this.getNumber("snap-to-grid",0);o>0&&(h=Math.round(h/o)*o,r=Math.round(r/o)*o);const a=this.getMinSize(),l=this.getMaxSize();h=Math.max(a.width,Math.min(l.width,h)),r=Math.max(a.height,Math.min(l.height,r)),this.currentSize={width:h,height:r},this.dispatchEvent(new CustomEvent("db-resize",{detail:this.currentSize,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-size-change",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render()}endResize(){this.isResizing&&(this.isResizing=!1,this.dispatchEvent(new CustomEvent("db-resize-end",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render())}renderHandleStyle(){if(!this.handleEl)return;const e=this.getDirection(),t=this.getHandlePosition(),i=this.getAttribute("handle-color"),s=this.getAttribute("handle-hover-color");i?this.handleEl.style.setProperty("--db-resize-handle-color",i):this.handleEl.style.removeProperty("--db-resize-handle-color"),s?this.handleEl.style.setProperty("--db-resize-handle-hover-color",s):this.handleEl.style.removeProperty("--db-resize-handle-hover-color"),this.handleEl.style.top="",this.handleEl.style.right="",this.handleEl.style.bottom="",this.handleEl.style.left="",this.handleEl.style.transform="",this.handleEl.style.width="",this.handleEl.style.height="",this.handleEl.style.backgroundColor="",this.handleEl.onmouseenter=null,this.handleEl.onmouseleave=null;let n=`corner-${t}`;"vertical"===e?n="edge-bottom":"horizontal"===e&&(n="edge-right"),this.handleEl.className=`designbase-wc-resizable-panels__handle designbase-wc-resizable-panels__handle--${n}`,this.handleEl.setAttribute("role","separator"),this.handleEl.setAttribute("aria-label","크기 조절"),this.handleEl.replaceChildren()}render(){if(this.ensureStructure(),!(this.container&&this.contentEl&&this.guidesEl&&this.sizeIndicatorEl&&this.constraintsEl))return;const e=["designbase-wc-resizable-panels",this.isResizing&&"designbase-wc-resizable-panels--resizing",this.getBool("show-border",!0)&&"designbase-wc-resizable-panels--border",this.getBool("shadow",!0)&&"designbase-wc-resizable-panels--shadow"].filter(Boolean).join(" ");this.container.className=e,this.container.style.width=`${this.currentSize.width}px`,this.container.style.height=`${this.currentSize.height}px`;const t=this.getAttribute("background-color");this.container.style.backgroundColor=t||"";const i=this.getAttribute("border-radius")||"8px";if(this.container.style.borderRadius=/^\d+$/.test(i)?`${i}px`:i,0===this.contentEl.children.length){const e=Array.from(this.childNodes).filter(e=>e!==this.container);this.contentEl.append(...e)}if(this.guidesEl.style.display=this.getBool("show-guides",!0)&&this.isResizing?"":"none",this.sizeIndicatorEl.style.display=this.getBool("show-size-indicator",!0)&&this.isResizing?"":"none",this.sizeIndicatorEl.textContent=`${Math.round(this.currentSize.width)} × ${Math.round(this.currentSize.height)}`,this.constraintsEl.style.display=this.getBool("show-constraints",!0)&&this.isResizing?"":"none",this.constraintsEl.replaceChildren(),"none"!==this.constraintsEl.style.display){const e=this.getMinSize(),t=this.getMaxSize();this.currentSize.width<=e.width&&this.constraintsEl.append(this.makeConstraint("최소 너비 도달","min")),this.currentSize.height<=e.height&&this.constraintsEl.append(this.makeConstraint("최소 높이 도달","min")),this.currentSize.width>=t.width&&this.constraintsEl.append(this.makeConstraint("최대 너비 도달","max")),this.currentSize.height>=t.height&&this.constraintsEl.append(this.makeConstraint("최대 높이 도달","max"))}this.renderHandleStyle()}makeConstraint(e,t){const i=document.createElement("div");return i.className=`designbase-wc-resizable-panels__constraint designbase-wc-resizable-panels__constraint--${t}`,i.textContent=e,i}}customElements.get("db-resizable-panels")||customElements.define("db-resizable-panels",DbResizablePanels);export{DbResizablePanels};
+import{dbText as e}from"../core/i18n.js";const t=["both","horizontal","vertical"],i=["bottom-right","bottom-left","top-right","top-left","right","bottom"];class DbResizablePanels extends HTMLElement{constructor(){super(...arguments),this.isResizing=!1,this.startSize={width:0,height:0},this.startPos={x:0,y:0},this.currentSize={width:0,height:0},this.rafId=0,this.pendingPoint=null,this.onMouseDown=e=>{e.preventDefault(),this.startResize(e.clientX,e.clientY),document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onMouseUp)},this.onTouchStart=e=>{e.preventDefault();const t=e.touches[0];this.startResize(t.clientX,t.clientY),document.addEventListener("touchmove",this.onTouchMove,{passive:!1}),document.addEventListener("touchend",this.onTouchEnd)},this.onMouseMove=e=>{this.scheduleResize(e.clientX,e.clientY)},this.onTouchMove=e=>{e.preventDefault();const t=e.touches[0];this.scheduleResize(t.clientX,t.clientY)},this.onMouseUp=()=>{this.endResize(),document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mouseup",this.onMouseUp)},this.onTouchEnd=()=>{this.endResize(),document.removeEventListener("touchmove",this.onTouchMove),document.removeEventListener("touchend",this.onTouchEnd)}}static get observedAttributes(){return["initial-width","initial-height","min-width","min-height","max-width","max-height","direction","handle-position","handle-size","handle-color","handle-hover-color","snap-to-grid","show-guides","show-size-indicator","show-constraints","show-border","shadow","background-color","border-radius"]}connectedCallback(){this.ensureStructure(),this.initializeSize(),this.render()}disconnectedCallback(){this.detachDragListeners(),this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=0)}detachDragListeners(){document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mouseup",this.onMouseUp),document.removeEventListener("touchmove",this.onTouchMove),document.removeEventListener("touchend",this.onTouchEnd)}attributeChangedCallback(){this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const i=this.getAttribute(e);return""===i||"true"===i}getNumber(e,t){const i=Number(this.getAttribute(e)??t);return Number.isFinite(i)?i:t}getDirection(){const e=this.getAttribute("direction");return e&&t.includes(e)?e:"both"}getHandlePosition(){const e=this.getAttribute("handle-position");return e&&i.includes(e)?e:"bottom-right"}initializeSize(){const e=this.parentElement?.getBoundingClientRect();if(!e)return;const t=this.getAttribute("initial-width")||"100%",i=this.getAttribute("initial-height")||"100%";this.currentSize={width:"string"==typeof t&&t.endsWith("%")?e.width*Number(t.replace("%",""))/100:Number(t)||e.width,height:"string"==typeof i&&i.endsWith("%")?e.height*Number(i.replace("%",""))/100:Number(i)||e.height}}getMinSize(){return{width:this.getNumber("min-width",200),height:this.getNumber("min-height",150)}}getMaxSize(){const e=this.parentElement?.getBoundingClientRect();if(!e)return{width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY};const t=this.getAttribute("max-width")||"100vw",i=this.getAttribute("max-height")||"100vh",toSize=(e,t,i)=>{if("100vw"===e||"100vh"===e)return t;if("100%"===e)return i;const s=Number(e);return Number.isFinite(s)?s:Number.POSITIVE_INFINITY};return{width:toSize(t,window.innerWidth,e.width),height:toSize(i,window.innerHeight,e.height)}}ensureStructure(){if(this.container)return;this.container=document.createElement("div"),this.container.className="designbase-wc-resizable-panels",this.guidesEl=document.createElement("div"),this.guidesEl.className="designbase-wc-resizable-panels__guides";const e=document.createElement("div");e.className="designbase-wc-resizable-panels__guide designbase-wc-resizable-panels__guide--horizontal";const t=document.createElement("div");t.className="designbase-wc-resizable-panels__guide designbase-wc-resizable-panels__guide--vertical",this.guidesEl.append(e,t),this.sizeIndicatorEl=document.createElement("div"),this.sizeIndicatorEl.className="designbase-wc-resizable-panels__size-indicator",this.constraintsEl=document.createElement("div"),this.constraintsEl.className="designbase-wc-resizable-panels__constraints",this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-resizable-panels__content",this.handleEl=document.createElement("div"),this.handleEl.className="designbase-wc-resizable-panels__handle",this.handleEl.addEventListener("mousedown",this.onMouseDown),this.handleEl.addEventListener("touchstart",this.onTouchStart,{passive:!1}),this.container.append(this.guidesEl,this.sizeIndicatorEl,this.constraintsEl,this.contentEl,this.handleEl),this.replaceChildren(this.container)}startResize(e,t){this.isResizing=!0,this.startSize={...this.currentSize},this.startPos={x:e,y:t},this.dispatchEvent(new CustomEvent("db-resize-start",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render()}scheduleResize(e,t){this.pendingPoint={x:e,y:t},this.rafId||(this.rafId=requestAnimationFrame(()=>{this.rafId=0;const e=this.pendingPoint;this.pendingPoint=null,e&&this.applyResize(e.x,e.y)}))}applyResize(e,t){if(!this.isResizing)return;const i=e-this.startPos.x,s=t-this.startPos.y,n=this.getDirection();let h=this.startSize.width,r=this.startSize.height;"both"!==n&&"horizontal"!==n||(h+=i),"both"!==n&&"vertical"!==n||(r+=s);const o=this.getNumber("snap-to-grid",0);o>0&&(h=Math.round(h/o)*o,r=Math.round(r/o)*o);const a=this.getMinSize(),l=this.getMaxSize();h=Math.max(a.width,Math.min(l.width,h)),r=Math.max(a.height,Math.min(l.height,r)),this.currentSize={width:h,height:r},this.dispatchEvent(new CustomEvent("db-resize",{detail:this.currentSize,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-size-change",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render()}endResize(){this.isResizing&&(this.isResizing=!1,this.dispatchEvent(new CustomEvent("db-resize-end",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render())}renderHandleStyle(){if(!this.handleEl)return;const t=this.getDirection(),i=this.getHandlePosition(),s=this.getAttribute("handle-color"),n=this.getAttribute("handle-hover-color");s?this.handleEl.style.setProperty("--db-resize-handle-color",s):this.handleEl.style.removeProperty("--db-resize-handle-color"),n?this.handleEl.style.setProperty("--db-resize-handle-hover-color",n):this.handleEl.style.removeProperty("--db-resize-handle-hover-color"),this.handleEl.style.top="",this.handleEl.style.right="",this.handleEl.style.bottom="",this.handleEl.style.left="",this.handleEl.style.transform="",this.handleEl.style.width="",this.handleEl.style.height="",this.handleEl.style.backgroundColor="",this.handleEl.onmouseenter=null,this.handleEl.onmouseleave=null;let h=`corner-${i}`;"vertical"===t?h="edge-bottom":"horizontal"===t&&(h="edge-right"),this.handleEl.className=`designbase-wc-resizable-panels__handle designbase-wc-resizable-panels__handle--${h}`,this.handleEl.setAttribute("role","separator"),this.handleEl.setAttribute("aria-label",e("크기 조절")),this.handleEl.replaceChildren()}render(){if(this.ensureStructure(),!(this.container&&this.contentEl&&this.guidesEl&&this.sizeIndicatorEl&&this.constraintsEl))return;const e=["designbase-wc-resizable-panels",this.isResizing&&"designbase-wc-resizable-panels--resizing",this.getBool("show-border",!0)&&"designbase-wc-resizable-panels--border",this.getBool("shadow",!0)&&"designbase-wc-resizable-panels--shadow"].filter(Boolean).join(" ");this.container.className=e,this.container.style.width=`${this.currentSize.width}px`,this.container.style.height=`${this.currentSize.height}px`;const t=this.getAttribute("background-color");this.container.style.backgroundColor=t||"";const i=this.getAttribute("border-radius")||"8px";if(this.container.style.borderRadius=/^\d+$/.test(i)?`${i}px`:i,0===this.contentEl.children.length){const e=Array.from(this.childNodes).filter(e=>e!==this.container);this.contentEl.append(...e)}if(this.guidesEl.style.display=this.getBool("show-guides",!0)&&this.isResizing?"":"none",this.sizeIndicatorEl.style.display=this.getBool("show-size-indicator",!0)&&this.isResizing?"":"none",this.sizeIndicatorEl.textContent=`${Math.round(this.currentSize.width)} × ${Math.round(this.currentSize.height)}`,this.constraintsEl.style.display=this.getBool("show-constraints",!0)&&this.isResizing?"":"none",this.constraintsEl.replaceChildren(),"none"!==this.constraintsEl.style.display){const e=this.getMinSize(),t=this.getMaxSize();this.currentSize.width<=e.width&&this.constraintsEl.append(this.makeConstraint("최소 너비 도달","min")),this.currentSize.height<=e.height&&this.constraintsEl.append(this.makeConstraint("최소 높이 도달","min")),this.currentSize.width>=t.width&&this.constraintsEl.append(this.makeConstraint("최대 너비 도달","max")),this.currentSize.height>=t.height&&this.constraintsEl.append(this.makeConstraint("최대 높이 도달","max"))}this.renderHandleStyle()}makeConstraint(e,t){const i=document.createElement("div");return i.className=`designbase-wc-resizable-panels__constraint designbase-wc-resizable-panels__constraint--${t}`,i.textContent=e,i}}customElements.get("db-resizable-panels")||customElements.define("db-resizable-panels",DbResizablePanels);export{DbResizablePanels};

package/dist/esm/components/db-search-bar.js

@@ -1 +1 @@
-import{getDbComponentIconSize as e,createDbIcon as t}from"./db-icons.js";import{SEARCH_BAR_SIZES as s,SEARCH_BAR_RECENT_LAYOUTS as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbSearchBar extends HTMLElement{constructor(){super(...arguments),this.recentSearches=[],this.isFocused=!1,this.currentSuggestion=0,this.scrollParents=[]}static get observedAttributes(){return["value","default-value","placeholder","size","appearance","disabled","readonly","full-width","show-shortcut","shortcut-label","enable-recent-searches","recent-searches-key","recent-searches-layout","suggested-searches","suggestion-rolling-interval","categories","selected-category","search-results","empty-state-message"]}getResolvedSize(){const e=this.getAttribute("size")||"m";return s.includes(e)?e:"m"}getIconPx(){return e(this.getResolvedSize())}syncIcons(){const e=this.getIconPx();this.querySelector(".designbase-wc-search-bar__search-icon")?.replaceChildren(t("search",e)),this.clearButton?.replaceChildren(t("close",e))}hasInputValue(){return Boolean((this.input?.value??this.getAttribute("value")??"").trim())}get value(){return this.input?.value??this.getAttribute("value")??""}set value(e){this.setAttribute("value",e),this.input&&(this.input.value=e)}connectedCallback(){this.loadRecentSearches(),this.render(),this.bindGlobalShortcut()}disconnectedCallback(){this.clearSuggestionInterval(),this.unbindGlobalShortcut(),this.detachDropdownPortal(),this.blurTimer&&clearTimeout(this.blurTimer)}attributeChangedCallback(e){if(this.isConnected)return"value"===e&&this.input?(this.input.value=this.getAttribute("value")||"",this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),void this.syncSuggestionRolling()):"disabled"===e||"readonly"===e||"placeholder"===e||"show-shortcut"===e||"shortcut-label"===e||"selected-category"===e||"search-results"===e||"empty-state-message"===e||"suggested-searches"===e?(this.syncAttributes(),this.syncPlaceholder(),this.updateDropdown(),void this.syncSuggestionRolling()):"enable-recent-searches"===e||"recent-searches-key"===e?(this.loadRecentSearches(),void this.updateDropdown()):void("categories"!==e&&"recent-searches-layout"!==e?this.render():this.updateDropdown())}focus(){this.input?.focus()}parseJsonArray(e){try{const t=JSON.parse(this.getAttribute(e)||"[]");return Array.isArray(t)?t:[]}catch{return[]}}getRecentSearchesKey(){return this.getAttribute("recent-searches-key")||"searchbar-recent-searches"}loadRecentSearches(){if(this.hasAttribute("enable-recent-searches"))try{const e=localStorage.getItem(this.getRecentSearchesKey());this.recentSearches=e?JSON.parse(e):[],Array.isArray(this.recentSearches)||(this.recentSearches=[])}catch{this.recentSearches=[]}else this.recentSearches=[]}saveRecentSearches(){try{localStorage.setItem(this.getRecentSearchesKey(),JSON.stringify(this.recentSearches))}catch{}}clearSuggestionInterval(){this.suggestionInterval&&(clearInterval(this.suggestionInterval),this.suggestionInterval=void 0)}syncSuggestionRolling(){this.clearSuggestionInterval();const e=this.parseJsonArray("suggested-searches"),t=this.hasInputValue(),s=Number(this.getAttribute("suggestion-rolling-interval")||5e3);e.length>0&&!t&&(this.suggestionInterval=setInterval(()=>{this.currentSuggestion=(this.currentSuggestion+1)%e.length,this.syncPlaceholder(),this.updateDropdown()},s))}syncPlaceholder(){if(!this.input)return;const e=this.parseJsonArray("suggested-searches"),t=this.hasInputValue(),s=this.getAttribute("placeholder")||"검색...";e.length>0&&!t?this.input.placeholder=e[this.currentSuggestion]||s:this.input.placeholder=s}syncValueState(){const e=this.hasInputValue();this.classList.toggle("designbase-wc-search-bar--has-value",e),this.clearButton&&(this.clearButton.hidden=!e||this.hasAttribute("disabled")||this.hasAttribute("readonly")),this.shortcutBadge&&(this.shortcutBadge.hidden=!this.hasAttribute("show-shortcut")||e||this.hasAttribute("disabled")||this.hasAttribute("readonly")),this.syncIcons()}syncAttributes(){const e=this.getAttribute("size")||"m",t=this.hasAttribute("disabled"),a=this.hasAttribute("readonly"),n=this.hasAttribute("show-shortcut");this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${s.includes(e)?e:"m"}`,"pill"===this.getAttribute("appearance")&&"designbase-wc-search-bar--appearance-pill",t&&"designbase-wc-search-bar--disabled",a&&"designbase-wc-search-bar--readonly",this.hasAttribute("full-width")&&"designbase-wc-search-bar--full-width",Boolean(this.hasInputValue())&&"designbase-wc-search-bar--has-value"].filter(Boolean).join(" "),this.input&&(this.input.disabled=t,this.input.readOnly=a),this.shortcutBadge&&(this.shortcutBadge.hidden=!n||this.hasInputValue()||t||a,this.shortcutBadge.textContent=this.getAttribute("shortcut-label")||"⌘K"),this.syncValueState()}bindGlobalShortcut(){this.unbindGlobalShortcut(),!this.hasAttribute("show-shortcut")||this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this.globalKeyHandler=e=>{const t=e.metaKey||e.ctrlKey;let s="k";const a=(this.getAttribute("shortcut-label")||"⌘K").slice(-1).toLowerCase();a&&(s=a),t&&e.key.toLowerCase()===s&&(e.preventDefault(),this.focus())},window.addEventListener("keydown",this.globalKeyHandler))}unbindGlobalShortcut(){this.globalKeyHandler&&(window.removeEventListener("keydown",this.globalKeyHandler),this.globalKeyHandler=void 0)}positionDropdown(){if(!this.dropdown||this.dropdown.hidden)return;const e=this.getBoundingClientRect(),t=this.input?.getBoundingClientRect(),s=t??e;this.dropdown.style.top=`${s.bottom+4}px`,this.dropdown.style.left=`${e.left}px`,this.dropdown.style.width=`${e.width}px`,this.dropdown.style.right="auto"}bindRepositionListeners(){if(this.repositionHandler)return;this.repositionHandler=()=>{requestAnimationFrame(()=>this.positionDropdown())},window.addEventListener("scroll",this.repositionHandler,{capture:!0,passive:!0}),window.addEventListener("resize",this.repositionHandler),this.scrollParents=[];let e=this.parentElement;for(;e&&e!==document.body;){const t=getComputedStyle(e),s=/(auto|scroll|overlay)/.test(t.overflowY),a=/(auto|scroll|overlay)/.test(t.overflow);(s||a)&&e.scrollHeight>e.clientHeight&&(e.addEventListener("scroll",this.repositionHandler,{passive:!0}),this.scrollParents.push(e)),e=e.parentElement}}unbindRepositionListeners(){this.repositionHandler&&(window.removeEventListener("scroll",this.repositionHandler,!0),window.removeEventListener("resize",this.repositionHandler),this.scrollParents.forEach(e=>e.removeEventListener("scroll",this.repositionHandler)),this.scrollParents=[],this.repositionHandler=void 0)}attachDropdownPortal(){this.dropdown&&!this.dropdown.hidden&&(this.dropdown.classList.add("designbase-wc-search-bar__dropdown--portal"),this.dropdown.parentElement!==document.body&&document.body.append(this.dropdown),requestAnimationFrame(()=>this.positionDropdown()),this.repositionHandler||this.bindRepositionListeners())}detachDropdownPortal(){this.unbindRepositionListeners(),this.dropdown&&(this.dropdown.classList.remove("designbase-wc-search-bar__dropdown--portal"),this.dropdown.style.top="",this.dropdown.style.left="",this.dropdown.style.width="",this.dropdown.style.right="",this.dropdown.parentElement===document.body&&this.isConnected&&this.append(this.dropdown))}shouldShowDropdown(){const e=this.hasInputValue(),t=this.parseJsonArray("categories"),s=this.parseJsonArray("suggested-searches"),a=this.getAttribute("search-results"),n=this.getAttribute("empty-state-message");return this.isFocused&&(t.length>0||this.hasAttribute("enable-recent-searches")&&this.recentSearches.length>0&&!e||s.length>0&&!e||null!==a&&e||Boolean(n)&&!e&&(!this.hasAttribute("enable-recent-searches")||0===this.recentSearches.length)&&0===s.length)}formatSearchResult(e){if("string"==typeof e||"number"==typeof e)return String(e);if(e&&"object"==typeof e){const t=e;if("string"==typeof t.title)return t.title;if("string"==typeof t.label)return t.label}return String(e)}handleSearch(e){const t=(e??this.value).trim();t&&(this.dispatchEvent(new CustomEvent("db-search",{detail:{value:t},bubbles:!0,composed:!0})),this.hasAttribute("enable-recent-searches")&&(this.recentSearches=[t,...this.recentSearches.filter(e=>e!==t)].slice(0,10),this.saveRecentSearches(),this.updateDropdown()))}updateDropdown(){if(!this.dropdown)return;const s=this.shouldShowDropdown();if(this.dropdown.hidden=!s,this.classList.toggle("designbase-wc-search-bar--dropdown-open",s),!s)return this.dropdown.replaceChildren(),void this.detachDropdownPortal();this.dropdown.replaceChildren();const n=this.hasInputValue(),r=this.parseJsonArray("categories"),i=this.parseJsonArray("suggested-searches"),o=this.getAttribute("selected-category")||"",c=this.parseJsonArray("search-results"),h=this.getAttribute("empty-state-message"),d=a.includes(this.getAttribute("recent-searches-layout")||"vertical")&&this.getAttribute("recent-searches-layout")||"vertical";if(r.length>0){const e=document.createElement("div");e.className="designbase-wc-search-bar__categories",r.forEach(t=>{const s=document.createElement("db-chip");s.setAttribute("label",t),s.setAttribute("size","s"),s.setAttribute("variant",t===o?"primary":"default"),s.setAttribute("clickable",""),s.addEventListener("mousedown",e=>{e.preventDefault(),this.setAttribute("selected-category",t),this.dispatchEvent(new CustomEvent("db-category-change",{detail:{category:t},bubbles:!0,composed:!0})),this.updateDropdown()}),e.append(s)}),this.dropdown.append(e)}if(n&&this.hasAttribute("search-results")){const e=document.createElement("div");if(e.className="designbase-wc-search-bar__results",c.length>0){const t=document.createElement("ul");t.className="designbase-wc-search-bar__results-list",c.forEach((e,s)=>{const a=document.createElement("li");a.className="designbase-wc-search-bar__result-item",a.textContent=this.formatSearchResult(e),a.addEventListener("mousedown",t=>{t.preventDefault(),this.isFocused=!1,this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-search-result-click",{detail:{result:e,index:s},bubbles:!0,composed:!0}))}),t.append(a)}),e.append(t)}else{const t=document.createElement("div");t.className="designbase-wc-search-bar__results-empty",t.textContent="검색 결과가 없습니다.",e.append(t)}return this.dropdown.append(e),void this.attachDropdownPortal()}if(this.hasAttribute("enable-recent-searches")&&!n&&this.recentSearches.length>0){const s=document.createElement("div");s.className=`designbase-wc-search-bar__recent-searches designbase-wc-search-bar__recent-searches--${d}`;const a=document.createElement("div");a.className="designbase-wc-search-bar__recent-header";const n=document.createElement("span");n.className="designbase-wc-search-bar__recent-title",n.textContent="최근 검색어";const r=document.createElement("button");r.type="button",r.className="designbase-wc-search-bar__clear-all-button",r.setAttribute("aria-label","모든 최근 검색어 삭제"),r.textContent="전체 삭제",r.addEventListener("mousedown",e=>{e.preventDefault(),this.recentSearches=[];try{localStorage.removeItem(this.getRecentSearchesKey())}catch{}this.updateDropdown()}),a.append(n,r);const i=document.createElement("div");i.className="designbase-wc-search-bar__recent-list",this.recentSearches.forEach(s=>{const a=document.createElement("div");a.className="designbase-wc-search-bar__recent-item";const n=document.createElement("button");n.type="button",n.className="designbase-wc-search-bar__recent-search-button",n.textContent=s,n.addEventListener("mousedown",e=>{if(e.preventDefault(),!this.input)return;this.input.value=s,this.setAttribute("value",s),this.syncValueState(),this.syncPlaceholder(),this.handleSearch(s);const t={value:s};this.dispatchEvent(new CustomEvent("db-input",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:t,bubbles:!0,composed:!0})),this.isFocused=!1,this.updateDropdown()});const r=document.createElement("button");r.type="button",r.className="designbase-wc-search-bar__recent-remove-button",r.setAttribute("aria-label",`${s} 삭제`),r.append(t("close",e("s"))),r.addEventListener("mousedown",e=>{e.preventDefault(),this.recentSearches=this.recentSearches.filter(e=>e!==s),this.saveRecentSearches(),this.updateDropdown()}),a.append(n,r),i.append(a)}),s.append(a,i),this.dropdown.append(s)}if(i.length>0&&!n){const e=document.createElement("div");e.className="designbase-wc-search-bar__suggestions";const t=document.createElement("div");t.className="designbase-wc-search-bar__suggestions-header";const s=document.createElement("span");s.className="designbase-wc-search-bar__suggestions-title",s.textContent="추천 검색어",t.append(s);const a=document.createElement("div");a.className="designbase-wc-search-bar__suggestions-list",i.forEach((e,t)=>{const s=document.createElement("button");s.type="button",s.className=["designbase-wc-search-bar__suggestion-item",t===this.currentSuggestion&&"designbase-wc-search-bar__suggestion-item--active"].filter(Boolean).join(" "),s.textContent=e,s.addEventListener("mousedown",t=>{if(t.preventDefault(),!this.input)return;this.clearSuggestionInterval(),this.input.value=e,this.setAttribute("value",e),this.syncValueState(),this.syncPlaceholder(),this.handleSearch(e);const s={value:e};this.dispatchEvent(new CustomEvent("db-input",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:s,bubbles:!0,composed:!0})),this.isFocused=!1,this.updateDropdown()}),a.append(s)}),e.append(t,a),this.dropdown.append(e)}if(h&&!n&&(!this.hasAttribute("enable-recent-searches")||0===this.recentSearches.length)&&0===i.length){const e=document.createElement("div");e.className="designbase-wc-search-bar__empty-state",e.textContent=h,this.dropdown.append(e)}this.attachDropdownPortal()}render(){const e=this.getAttribute("size")||"m",a=this.hasAttribute("disabled"),n=this.hasAttribute("readonly"),r=this.hasAttribute("full-width"),i=this.hasAttribute("show-shortcut"),o=this.getAttribute("value")??this.getAttribute("default-value")??"",c=Boolean(o.trim()),h=this.getIconPx();this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${s.includes(e)?e:"m"}`,"pill"===this.getAttribute("appearance")&&"designbase-wc-search-bar--appearance-pill",a&&"designbase-wc-search-bar--disabled",n&&"designbase-wc-search-bar--readonly",r&&"designbase-wc-search-bar--full-width",c&&"designbase-wc-search-bar--has-value",this.shouldShowDropdown()&&"designbase-wc-search-bar--dropdown-open"].filter(Boolean).join(" "),this.setAttribute("role","search"),this.clearSuggestionInterval(),this.detachDropdownPortal(),this.replaceChildren();const d=document.createElement("div");d.className="designbase-wc-search-bar__container";const l=document.createElement("div");l.className="designbase-wc-search-bar__search-icon",l.setAttribute("aria-hidden","true"),l.append(t("search",h));const u=document.createElement("input");if(u.type="text",u.className="designbase-wc-search-bar__input",u.value=o,u.disabled=a,u.readOnly=n,u.setAttribute("aria-label","검색어 입력"),this.input=u,i){const t=document.createElement("db-badge");t.className="designbase-wc-search-bar__shortcut-badge",t.setAttribute("size","l"===e?"m":"s"),t.setAttribute("variant","secondary"),t.setAttribute("type","text"),t.setAttribute("aria-hidden","true"),t.textContent=this.getAttribute("shortcut-label")||"⌘K",t.hidden=c||a||n,this.shortcutBadge=t,d.append(l,u,t)}else d.append(l,u);const b=document.createElement("button");b.type="button",b.className="designbase-wc-search-bar__clear-button",b.setAttribute("aria-label","검색어 지우기"),b.hidden=!c||a||n,b.append(t("close",h)),this.clearButton=b,d.append(b);const p=document.createElement("div");p.className="designbase-wc-search-bar__dropdown",p.hidden=!0,p.addEventListener("mousedown",e=>{e.preventDefault()}),this.dropdown=p,u.addEventListener("input",()=>{this.setAttribute("value",u.value),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling();const e={value:u.value};this.dispatchEvent(new CustomEvent("db-input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0}))}),u.addEventListener("keydown",e=>{"Enter"===e.key&&this.handleSearch()}),u.addEventListener("focus",()=>{this.isFocused=!0,this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-focus",{bubbles:!0,composed:!0}))}),u.addEventListener("blur",()=>{this.isFocused=!1,this.blurTimer&&clearTimeout(this.blurTimer),this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-blur",{bubbles:!0,composed:!0}))}),b.addEventListener("click",()=>{u.value="",this.setAttribute("value",""),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling(),u.focus(),this.dispatchEvent(new CustomEvent("db-clear",{bubbles:!0,composed:!0}));const e={value:""};this.dispatchEvent(new CustomEvent("db-input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0}))}),this.append(d,p),this.syncIcons(),this.syncPlaceholder(),this.syncSuggestionRolling(),this.bindGlobalShortcut(),this.updateDropdown()}}customElements.get("db-search-bar")||customElements.define("db-search-bar",DbSearchBar);export{DbSearchBar};
+import{dbText as e,dbFormat as t}from"../core/i18n.js";import{getDbComponentIconSize as s,createDbIcon as a}from"./db-icons.js";import{SEARCH_BAR_SIZES as n,SEARCH_BAR_RECENT_LAYOUTS as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbSearchBar extends HTMLElement{constructor(){super(...arguments),this.recentSearches=[],this.isFocused=!1,this.currentSuggestion=0,this.scrollParents=[]}static get observedAttributes(){return["value","default-value","placeholder","size","appearance","disabled","readonly","full-width","show-shortcut","shortcut-label","enable-recent-searches","recent-searches-key","recent-searches-layout","suggested-searches","suggestion-rolling-interval","categories","selected-category","search-results","empty-state-message"]}getResolvedSize(){const e=this.getAttribute("size")||"m";return n.includes(e)?e:"m"}getIconPx(){return s(this.getResolvedSize())}syncIcons(){const e=this.getIconPx();this.querySelector(".designbase-wc-search-bar__search-icon")?.replaceChildren(a("search",e)),this.clearButton?.replaceChildren(a("close",e))}hasInputValue(){return Boolean((this.input?.value??this.getAttribute("value")??"").trim())}get value(){return this.input?.value??this.getAttribute("value")??""}set value(e){this.setAttribute("value",e),this.input&&(this.input.value=e)}connectedCallback(){this.loadRecentSearches(),this.render(),this.bindGlobalShortcut()}disconnectedCallback(){this.clearSuggestionInterval(),this.unbindGlobalShortcut(),this.detachDropdownPortal(),this.blurTimer&&clearTimeout(this.blurTimer)}attributeChangedCallback(e){if(this.isConnected)return"value"===e&&this.input?(this.input.value=this.getAttribute("value")||"",this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),void this.syncSuggestionRolling()):"disabled"===e||"readonly"===e||"placeholder"===e||"show-shortcut"===e||"shortcut-label"===e||"selected-category"===e||"search-results"===e||"empty-state-message"===e||"suggested-searches"===e?(this.syncAttributes(),this.syncPlaceholder(),this.updateDropdown(),void this.syncSuggestionRolling()):"enable-recent-searches"===e||"recent-searches-key"===e?(this.loadRecentSearches(),void this.updateDropdown()):void("categories"!==e&&"recent-searches-layout"!==e?this.render():this.updateDropdown())}focus(){this.input?.focus()}parseJsonArray(e){try{const t=JSON.parse(this.getAttribute(e)||"[]");return Array.isArray(t)?t:[]}catch{return[]}}getRecentSearchesKey(){return this.getAttribute("recent-searches-key")||"searchbar-recent-searches"}loadRecentSearches(){if(this.hasAttribute("enable-recent-searches"))try{const e=localStorage.getItem(this.getRecentSearchesKey());this.recentSearches=e?JSON.parse(e):[],Array.isArray(this.recentSearches)||(this.recentSearches=[])}catch{this.recentSearches=[]}else this.recentSearches=[]}saveRecentSearches(){try{localStorage.setItem(this.getRecentSearchesKey(),JSON.stringify(this.recentSearches))}catch{}}clearSuggestionInterval(){this.suggestionInterval&&(clearInterval(this.suggestionInterval),this.suggestionInterval=void 0)}syncSuggestionRolling(){this.clearSuggestionInterval();const e=this.parseJsonArray("suggested-searches"),t=this.hasInputValue(),s=Number(this.getAttribute("suggestion-rolling-interval")||5e3);e.length>0&&!t&&(this.suggestionInterval=setInterval(()=>{this.currentSuggestion=(this.currentSuggestion+1)%e.length,this.syncPlaceholder(),this.updateDropdown()},s))}syncPlaceholder(){if(!this.input)return;const e=this.parseJsonArray("suggested-searches"),t=this.hasInputValue(),s=this.getAttribute("placeholder")||"검색...";e.length>0&&!t?this.input.placeholder=e[this.currentSuggestion]||s:this.input.placeholder=s}syncValueState(){const e=this.hasInputValue();this.classList.toggle("designbase-wc-search-bar--has-value",e),this.clearButton&&(this.clearButton.hidden=!e||this.hasAttribute("disabled")||this.hasAttribute("readonly")),this.shortcutBadge&&(this.shortcutBadge.hidden=!this.hasAttribute("show-shortcut")||e||this.hasAttribute("disabled")||this.hasAttribute("readonly")),this.syncIcons()}syncAttributes(){const e=this.getAttribute("size")||"m",t=this.hasAttribute("disabled"),s=this.hasAttribute("readonly"),a=this.hasAttribute("show-shortcut");this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${n.includes(e)?e:"m"}`,"pill"===this.getAttribute("appearance")&&"designbase-wc-search-bar--appearance-pill",t&&"designbase-wc-search-bar--disabled",s&&"designbase-wc-search-bar--readonly",this.hasAttribute("full-width")&&"designbase-wc-search-bar--full-width",Boolean(this.hasInputValue())&&"designbase-wc-search-bar--has-value"].filter(Boolean).join(" "),this.input&&(this.input.disabled=t,this.input.readOnly=s),this.shortcutBadge&&(this.shortcutBadge.hidden=!a||this.hasInputValue()||t||s,this.shortcutBadge.textContent=this.getAttribute("shortcut-label")||"⌘K"),this.syncValueState()}bindGlobalShortcut(){this.unbindGlobalShortcut(),!this.hasAttribute("show-shortcut")||this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this.globalKeyHandler=e=>{if(e.defaultPrevented||e.isComposing||!this.getClientRects().length)return;const t=e.metaKey||e.ctrlKey;let s="k";const a=(this.getAttribute("shortcut-label")||"⌘K").slice(-1).toLowerCase();a&&(s=a),t&&e.key.toLowerCase()===s&&(e.preventDefault(),this.focus())},window.addEventListener("keydown",this.globalKeyHandler))}unbindGlobalShortcut(){this.globalKeyHandler&&(window.removeEventListener("keydown",this.globalKeyHandler),this.globalKeyHandler=void 0)}positionDropdown(){if(!this.dropdown||this.dropdown.hidden)return;const e=this.getBoundingClientRect(),t=this.input?.getBoundingClientRect(),s=t??e;this.dropdown.style.top=`${s.bottom+4}px`,this.dropdown.style.left=`${e.left}px`,this.dropdown.style.width=`${e.width}px`,this.dropdown.style.right="auto"}bindRepositionListeners(){if(this.repositionHandler)return;this.repositionHandler=()=>{requestAnimationFrame(()=>this.positionDropdown())},window.addEventListener("scroll",this.repositionHandler,{capture:!0,passive:!0}),window.addEventListener("resize",this.repositionHandler),this.scrollParents=[];let e=this.parentElement;for(;e&&e!==document.body;){const t=getComputedStyle(e),s=/(auto|scroll|overlay)/.test(t.overflowY),a=/(auto|scroll|overlay)/.test(t.overflow);(s||a)&&e.scrollHeight>e.clientHeight&&(e.addEventListener("scroll",this.repositionHandler,{passive:!0}),this.scrollParents.push(e)),e=e.parentElement}}unbindRepositionListeners(){this.repositionHandler&&(window.removeEventListener("scroll",this.repositionHandler,!0),window.removeEventListener("resize",this.repositionHandler),this.scrollParents.forEach(e=>e.removeEventListener("scroll",this.repositionHandler)),this.scrollParents=[],this.repositionHandler=void 0)}attachDropdownPortal(){this.dropdown&&!this.dropdown.hidden&&(this.dropdown.classList.add("designbase-wc-search-bar__dropdown--portal"),this.dropdown.parentElement!==document.body&&document.body.append(this.dropdown),requestAnimationFrame(()=>this.positionDropdown()),this.repositionHandler||this.bindRepositionListeners())}detachDropdownPortal(){this.unbindRepositionListeners(),this.dropdown&&(this.dropdown.classList.remove("designbase-wc-search-bar__dropdown--portal"),this.dropdown.style.top="",this.dropdown.style.left="",this.dropdown.style.width="",this.dropdown.style.right="",this.dropdown.parentElement===document.body&&this.isConnected&&this.append(this.dropdown))}shouldShowDropdown(){const e=this.hasInputValue(),t=this.parseJsonArray("categories"),s=this.parseJsonArray("suggested-searches"),a=this.getAttribute("search-results"),n=this.getAttribute("empty-state-message");return this.isFocused&&(t.length>0||this.hasAttribute("enable-recent-searches")&&this.recentSearches.length>0&&!e||s.length>0&&!e||null!==a&&e||Boolean(n)&&!e&&(!this.hasAttribute("enable-recent-searches")||0===this.recentSearches.length)&&0===s.length)}formatSearchResult(e){if("string"==typeof e||"number"==typeof e)return String(e);if(e&&"object"==typeof e){const t=e;if("string"==typeof t.title)return t.title;if("string"==typeof t.label)return t.label}return String(e)}handleSearch(e){const t=(e??this.value).trim();t&&(this.dispatchEvent(new CustomEvent("db-search",{detail:{value:t},bubbles:!0,composed:!0})),this.hasAttribute("enable-recent-searches")&&(this.recentSearches=[t,...this.recentSearches.filter(e=>e!==t)].slice(0,10),this.saveRecentSearches(),this.updateDropdown()))}updateDropdown(){if(!this.dropdown)return;const n=this.shouldShowDropdown();if(this.dropdown.hidden=!n,this.classList.toggle("designbase-wc-search-bar--dropdown-open",n),!n)return this.dropdown.replaceChildren(),void this.detachDropdownPortal();this.dropdown.replaceChildren();const i=this.hasInputValue(),o=this.parseJsonArray("categories"),c=this.parseJsonArray("suggested-searches"),h=this.getAttribute("selected-category")||"",d=this.parseJsonArray("search-results"),l=this.getAttribute("empty-state-message"),u=r.includes(this.getAttribute("recent-searches-layout")||"vertical")&&this.getAttribute("recent-searches-layout")||"vertical";if(o.length>0){const e=document.createElement("div");e.className="designbase-wc-search-bar__categories",o.forEach(t=>{const s=document.createElement("db-chip");s.setAttribute("label",t),s.setAttribute("size","s"),s.setAttribute("variant",t===h?"primary":"default"),s.setAttribute("clickable",""),s.addEventListener("mousedown",e=>{e.preventDefault(),this.setAttribute("selected-category",t),this.dispatchEvent(new CustomEvent("db-category-change",{detail:{category:t},bubbles:!0,composed:!0})),this.updateDropdown()}),e.append(s)}),this.dropdown.append(e)}if(i&&this.hasAttribute("search-results")){const t=document.createElement("div");if(t.className="designbase-wc-search-bar__results",d.length>0){const e=document.createElement("ul");e.className="designbase-wc-search-bar__results-list",d.forEach((t,s)=>{const a=document.createElement("li");a.className="designbase-wc-search-bar__result-item",a.textContent=this.formatSearchResult(t),a.addEventListener("mousedown",e=>{e.preventDefault(),this.isFocused=!1,this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-search-result-click",{detail:{result:t,index:s},bubbles:!0,composed:!0}))}),e.append(a)}),t.append(e)}else{const s=document.createElement("div");s.className="designbase-wc-search-bar__results-empty",s.textContent=e("검색 결과가 없습니다."),t.append(s)}return this.dropdown.append(t),void this.attachDropdownPortal()}if(this.hasAttribute("enable-recent-searches")&&!i&&this.recentSearches.length>0){const n=document.createElement("div");n.className=`designbase-wc-search-bar__recent-searches designbase-wc-search-bar__recent-searches--${u}`;const r=document.createElement("div");r.className="designbase-wc-search-bar__recent-header";const i=document.createElement("span");i.className="designbase-wc-search-bar__recent-title",i.textContent=e("최근 검색어");const o=document.createElement("button");o.type="button",o.className="designbase-wc-search-bar__clear-all-button",o.setAttribute("aria-label",e("모든 최근 검색어 삭제")),o.textContent=e("전체 삭제"),o.addEventListener("mousedown",e=>{e.preventDefault(),this.recentSearches=[];try{localStorage.removeItem(this.getRecentSearchesKey())}catch{}this.updateDropdown()}),r.append(i,o);const c=document.createElement("div");c.className="designbase-wc-search-bar__recent-list",this.recentSearches.forEach(e=>{const n=document.createElement("div");n.className="designbase-wc-search-bar__recent-item";const r=document.createElement("button");r.type="button",r.className="designbase-wc-search-bar__recent-search-button",r.textContent=e,r.addEventListener("mousedown",t=>{if(t.preventDefault(),!this.input)return;this.input.value=e,this.setAttribute("value",e),this.syncValueState(),this.syncPlaceholder(),this.handleSearch(e);const s={value:e};this.dispatchEvent(new CustomEvent("db-input",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:s,bubbles:!0,composed:!0})),this.isFocused=!1,this.updateDropdown()});const i=document.createElement("button");i.type="button",i.className="designbase-wc-search-bar__recent-remove-button",i.setAttribute("aria-label",t("{0} 삭제",[e])),i.append(a("close",s("s"))),i.addEventListener("mousedown",t=>{t.preventDefault(),this.recentSearches=this.recentSearches.filter(t=>t!==e),this.saveRecentSearches(),this.updateDropdown()}),n.append(r,i),c.append(n)}),n.append(r,c),this.dropdown.append(n)}if(c.length>0&&!i){const t=document.createElement("div");t.className="designbase-wc-search-bar__suggestions";const s=document.createElement("div");s.className="designbase-wc-search-bar__suggestions-header";const a=document.createElement("span");a.className="designbase-wc-search-bar__suggestions-title",a.textContent=e("추천 검색어"),s.append(a);const n=document.createElement("div");n.className="designbase-wc-search-bar__suggestions-list",c.forEach((e,t)=>{const s=document.createElement("button");s.type="button",s.className=["designbase-wc-search-bar__suggestion-item",t===this.currentSuggestion&&"designbase-wc-search-bar__suggestion-item--active"].filter(Boolean).join(" "),s.textContent=e,s.addEventListener("mousedown",t=>{if(t.preventDefault(),!this.input)return;this.clearSuggestionInterval(),this.input.value=e,this.setAttribute("value",e),this.syncValueState(),this.syncPlaceholder(),this.handleSearch(e);const s={value:e};this.dispatchEvent(new CustomEvent("db-input",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:s,bubbles:!0,composed:!0})),this.isFocused=!1,this.updateDropdown()}),n.append(s)}),t.append(s,n),this.dropdown.append(t)}if(l&&!i&&(!this.hasAttribute("enable-recent-searches")||0===this.recentSearches.length)&&0===c.length){const e=document.createElement("div");e.className="designbase-wc-search-bar__empty-state",e.textContent=l,this.dropdown.append(e)}this.attachDropdownPortal()}render(){const t=this.getAttribute("size")||"m",s=this.hasAttribute("disabled"),r=this.hasAttribute("readonly"),i=this.hasAttribute("full-width"),o=this.hasAttribute("show-shortcut"),c=this.getAttribute("value")??this.getAttribute("default-value")??"",h=Boolean(c.trim()),d=this.getIconPx();this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${n.includes(t)?t:"m"}`,"pill"===this.getAttribute("appearance")&&"designbase-wc-search-bar--appearance-pill",s&&"designbase-wc-search-bar--disabled",r&&"designbase-wc-search-bar--readonly",i&&"designbase-wc-search-bar--full-width",h&&"designbase-wc-search-bar--has-value",this.shouldShowDropdown()&&"designbase-wc-search-bar--dropdown-open"].filter(Boolean).join(" "),this.setAttribute("role","search"),this.clearSuggestionInterval(),this.detachDropdownPortal(),this.replaceChildren();const l=document.createElement("div");l.className="designbase-wc-search-bar__container";const u=document.createElement("div");u.className="designbase-wc-search-bar__search-icon",u.setAttribute("aria-hidden","true"),u.append(a("search",d));const b=document.createElement("input");if(b.type="text",b.className="designbase-wc-search-bar__input",b.value=c,b.disabled=s,b.readOnly=r,b.setAttribute("aria-label",e("검색어 입력")),this.input=b,o){const e=document.createElement("db-badge");e.className="designbase-wc-search-bar__shortcut-badge",e.setAttribute("size","l"===t?"m":"s"),e.setAttribute("variant","secondary"),e.setAttribute("type","text"),e.setAttribute("aria-hidden","true"),e.textContent=this.getAttribute("shortcut-label")||"⌘K",e.hidden=h||s||r,this.shortcutBadge=e,l.append(u,b,e)}else l.append(u,b);const p=document.createElement("button");p.type="button",p.className="designbase-wc-search-bar__clear-button",p.setAttribute("aria-label",e("검색어 지우기")),p.hidden=!h||s||r,p.append(a("close",d)),this.clearButton=p,l.append(p);const g=document.createElement("div");g.className="designbase-wc-search-bar__dropdown",g.hidden=!0,g.addEventListener("mousedown",e=>{e.preventDefault()}),this.dropdown=g,b.addEventListener("input",()=>{this.setAttribute("value",b.value),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling();const e={value:b.value};this.dispatchEvent(new CustomEvent("db-input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0}))}),b.addEventListener("keydown",e=>{"Enter"===e.key&&this.handleSearch()}),b.addEventListener("focus",()=>{this.isFocused=!0,this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-focus",{bubbles:!0,composed:!0}))}),b.addEventListener("blur",()=>{this.isFocused=!1,this.blurTimer&&clearTimeout(this.blurTimer),this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-blur",{bubbles:!0,composed:!0}))}),p.addEventListener("click",()=>{b.value="",this.setAttribute("value",""),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling(),b.focus(),this.dispatchEvent(new CustomEvent("db-clear",{bubbles:!0,composed:!0}));const e={value:""};this.dispatchEvent(new CustomEvent("db-input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0}))}),this.append(l,g),this.syncIcons(),this.syncPlaceholder(),this.syncSuggestionRolling(),this.bindGlobalShortcut(),this.updateDropdown()}}customElements.get("db-search-bar")||customElements.define("db-search-bar",DbSearchBar);export{DbSearchBar};

package/dist/esm/components/db-section-testimonials.d.ts

@@ -5,10 +5,8 @@ declare class DbSectionTestimonials extends HTMLElement {
     private innerEl?;
     private headerEl?;
     private contentEl?;
-    private carouselViewport?;
-    private carouselTrack?;
+    private carouselEngine?;
     private carouselIndicator?;
-    private resizeObserver?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
@@ -19,7 +17,6 @@ declare class DbSectionTestimonials extends HTMLElement {
     private createTestimonialEl;
     private updateHeader;
     private clampCarouselIndex;
-    private updateCarouselTransform;
     private goToCarouselSlide;
     private renderGrid;
     private renderCarousel;

package/dist/esm/components/db-section-testimonials.js

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as s}from"./marketing-block-host-utils.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as r,SECTION_TESTIMONIALS_VARIANTS as a,SECTION_TESTIMONIALS_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const o="designbase-wc-section-testimonials";class DbSectionTestimonials extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.carouselIndex=0}static get observedAttributes(){return["headline","subtitle","description","badge","items","variant","columns","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.resizeObserver?.disconnect(),this.resizeObserver=void 0}attributeChangedCallback(){this.built&&(this.carouselIndex=0,this.updateUI())}parseItems(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}buildHeader(e){this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header";const t=document.createElement("db-badge");t.className="designbase-wc-section-block-header__badge",t.hidden=!0,t.dataset.role="badge";const s=document.createElement("h2");s.className="designbase-wc-section-block-header__headline",s.dataset.role="headline";const i=document.createElement("p");i.className="designbase-wc-section-block-header__subtitle",i.dataset.role="subtitle";const r=document.createElement("p");r.className="designbase-wc-section-block-header__description",r.dataset.role="description",this.headerEl.append(t,s,i,r),e.append(this.headerEl)}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${o}__inner`,this.buildHeader(this.innerEl),this.contentEl=document.createElement("div"),this.contentEl.className=`${o}__grid`,this.innerEl.append(this.contentEl),this.append(this.innerEl)}createTestimonialEl(e){const t=document.createElement("db-testimonial");return t.setAttribute("variant","card"),t.setAttribute("quote",e.quote),t.setAttribute("author",e.author),e.role&&t.setAttribute("role",e.role),e.company&&t.setAttribute("company",e.company),e.avatar&&t.setAttribute("avatar",e.avatar),null!=e.rating&&t.setAttribute("rating",String(e.rating)),t}updateHeader(){this.headerEl&&t(this.headerEl,{headline:this.getAttribute("headline")||"고객 후기",subtitle:this.getAttribute("subtitle")||"",description:this.getAttribute("description")||"",badge:this.parseBadge(),align:i(this.getAttribute("align"),r,"center")})}clampCarouselIndex(e){e<=0?this.carouselIndex=0:(this.carouselIndex>=e&&(this.carouselIndex=0),this.carouselIndex<0&&(this.carouselIndex=0))}updateCarouselTransform(){if(!this.carouselViewport||!this.carouselTrack)return;const e=this.carouselViewport.clientWidth;this.carouselTrack.style.transform=`translate3d(-${this.carouselIndex*e}px, 0, 0)`,this.carouselIndicator&&this.carouselIndicator.setAttribute("current",String(this.carouselIndex))}goToCarouselSlide(e,t){t<=0||(this.carouselIndex=Math.max(0,Math.min(e,t-1)),this.updateCarouselTransform())}renderGrid(e){this.contentEl&&(this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.carouselViewport=void 0,this.carouselTrack=void 0,this.carouselIndicator=void 0,this.contentEl.className=`${o}__grid`,this.contentEl.replaceChildren(),e.forEach(e=>{this.contentEl.append(this.createTestimonialEl(e))}))}renderCarousel(t){if(!this.contentEl)return;if(this.contentEl.replaceChildren(),this.contentEl.className=`${o}__carousel`,this.clampCarouselIndex(t.length),0===t.length)return;const s=document.createElement("div");s.className=`${o}__carousel-viewport`;const i=document.createElement("div");if(i.className=`${o}__carousel-track`,t.forEach(e=>{const t=document.createElement("div");t.className=`${o}__carousel-slide`,t.append(this.createTestimonialEl(e)),i.append(t)}),s.append(i),this.carouselViewport=s,this.carouselTrack=i,t.length>1){const i=document.createElement("button");i.type="button",i.className=`${o}__carousel-nav ${o}__carousel-nav--prev`,i.setAttribute("aria-label","이전 후기"),i.append(e("chevron-left",20)),i.addEventListener("click",()=>{const e=this.carouselIndex-1;this.goToCarouselSlide(e<0?t.length-1:e,t.length)});const r=document.createElement("button");r.type="button",r.className=`${o}__carousel-nav ${o}__carousel-nav--next`,r.setAttribute("aria-label","다음 후기"),r.append(e("chevron-right",20)),r.addEventListener("click",()=>{const e=this.carouselIndex+1;this.goToCarouselSlide(e>=t.length?0:e,t.length)}),s.append(i,r);const a=document.createElement("div");a.className=`${o}__carousel-controls`;const n=document.createElement("db-indicator");n.className=`${o}__carousel-indicator`,n.setAttribute("current",String(this.carouselIndex)),n.setAttribute("total",String(t.length)),n.setAttribute("type","dots"),n.setAttribute("size","s"),n.setAttribute("clickable",""),n.addEventListener("db-step-click",e=>{const s=e;this.goToCarouselSlide(s.detail.index,t.length)}),this.carouselIndicator=n,a.append(n),this.contentEl.append(s,a)}else this.contentEl.append(s);this.resizeObserver?.disconnect(),this.resizeObserver=new ResizeObserver(()=>this.updateCarouselTransform()),this.resizeObserver.observe(s),requestAnimationFrame(()=>this.updateCarouselTransform())}updateUI(){const e=i(this.getAttribute("variant"),a,"grid"),t=i(this.getAttribute("size"),n,"m"),r=this.getAttribute("columns")||"3",l=this.getAttribute("content-padding")||"l",c=this.parseItems();this.className=[o,`${o}--${e}`,`${o}--cols-${r}`,`${o}--padding-${l}`,`${o}--size-${t}`].join(" "),s(this,o),this.updateHeader(),"carousel"===e?this.renderCarousel(c):this.renderGrid(c)}}customElements.get("db-section-testimonials")||customElements.define("db-section-testimonials",DbSectionTestimonials);export{DbSectionTestimonials};
+import{dbText as e}from"../core/i18n.js";import{b as t}from"../node_modules/@designbasekorea/carousel/dist/chunks/chunk-AGE5BHQ4.js";import{createDbIcon as s}from"./db-icons.js";import{applySectionBlockHeader as i}from"./section-block-header-utils.js";import{syncMarketingBlockHost as n}from"./marketing-block-host-utils.js";import{coerceToContract as a}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as r,SECTION_TESTIMONIALS_VARIANTS as o,SECTION_TESTIMONIALS_SIZES as c}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const l="designbase-wc-section-testimonials";class DbSectionTestimonials extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.carouselIndex=0}static get observedAttributes(){return["headline","subtitle","description","badge","items","variant","columns","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.carouselEngine?.destroy(),this.carouselEngine=void 0}attributeChangedCallback(){this.built&&(this.carouselIndex=0,this.updateUI())}parseItems(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}buildHeader(e){this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header";const t=document.createElement("db-badge");t.className="designbase-wc-section-block-header__badge",t.hidden=!0,t.dataset.role="badge";const s=document.createElement("h2");s.className="designbase-wc-section-block-header__headline",s.dataset.role="headline";const i=document.createElement("p");i.className="designbase-wc-section-block-header__subtitle",i.dataset.role="subtitle";const n=document.createElement("p");n.className="designbase-wc-section-block-header__description",n.dataset.role="description",this.headerEl.append(t,s,i,n),e.append(this.headerEl)}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${l}__inner`,this.buildHeader(this.innerEl),this.contentEl=document.createElement("div"),this.contentEl.className=`${l}__grid`,this.innerEl.append(this.contentEl),this.append(this.innerEl)}createTestimonialEl(e){const t=document.createElement("db-testimonial");return t.setAttribute("variant","card"),t.setAttribute("quote",e.quote),t.setAttribute("author",e.author),e.role&&t.setAttribute("role",e.role),e.company&&t.setAttribute("company",e.company),e.avatar&&t.setAttribute("avatar",e.avatar),null!=e.rating&&t.setAttribute("rating",String(e.rating)),t}updateHeader(){this.headerEl&&i(this.headerEl,{headline:this.getAttribute("headline")||"고객 후기",subtitle:this.getAttribute("subtitle")||"",description:this.getAttribute("description")||"",badge:this.parseBadge(),align:a(this.getAttribute("align"),r,"center")})}clampCarouselIndex(e){e<=0?this.carouselIndex=0:(this.carouselIndex>=e&&(this.carouselIndex=0),this.carouselIndex<0&&(this.carouselIndex=0))}goToCarouselSlide(e){this.carouselEngine?.goTo(e)}renderGrid(e){this.contentEl&&(this.carouselEngine?.destroy(),this.carouselEngine=void 0,this.carouselIndicator=void 0,this.contentEl.className=`${l}__grid`,this.contentEl.replaceChildren(),e.forEach(e=>{this.contentEl.append(this.createTestimonialEl(e))}))}renderCarousel(i){if(!this.contentEl)return;if(this.contentEl.replaceChildren(),this.contentEl.className=`${l}__carousel`,this.clampCarouselIndex(i.length),0===i.length)return;const n=document.createElement("div");n.className=`${l}__carousel-viewport`;const a=document.createElement("div");if(a.className=`${l}__carousel-track db-slide__viewport`,i.forEach(e=>{const t=document.createElement("div");t.className=`${l}__carousel-slide`,t.append(this.createTestimonialEl(e)),a.append(t)}),n.append(a),i.length>1){const t=document.createElement("button");t.type="button",t.className=`${l}__carousel-nav ${l}__carousel-nav--prev`,t.setAttribute("aria-label",e("이전 후기")),t.append(s("chevron-left",20)),t.addEventListener("click",()=>this.carouselEngine?.prev());const a=document.createElement("button");a.type="button",a.className=`${l}__carousel-nav ${l}__carousel-nav--next`,a.setAttribute("aria-label",e("다음 후기")),a.append(s("chevron-right",20)),a.addEventListener("click",()=>this.carouselEngine?.next()),n.append(t,a);const r=document.createElement("div");r.className=`${l}__carousel-controls`;const o=document.createElement("db-indicator");o.className=`${l}__carousel-indicator`,o.setAttribute("current",String(this.carouselIndex)),o.setAttribute("total",String(i.length)),o.setAttribute("type","dots"),o.setAttribute("size","s"),o.setAttribute("clickable",""),o.addEventListener("db-step-click",e=>{const t=e;this.goToCarouselSlide(t.detail.index)}),this.carouselIndicator=o,r.append(o),this.contentEl.append(n,r)}else this.contentEl.append(n);this.carouselEngine=t(this.contentEl,{startIndex:this.carouselIndex,slidesPerView:1,gap:0,rewind:!0,label:this.getAttribute("headline")||"고객 후기"});const sync=()=>{this.carouselIndex=this.carouselEngine.getState().index,this.carouselIndicator?.getAttribute("current")!==String(this.carouselIndex)&&this.carouselIndicator?.setAttribute("current",String(this.carouselIndex))};this.carouselEngine.on("change",sync),this.carouselEngine.on("refresh",sync),sync()}updateUI(){this.carouselEngine?.destroy(),this.carouselEngine=void 0;const e=a(this.getAttribute("variant"),o,"grid"),t=a(this.getAttribute("size"),c,"m"),s=this.getAttribute("columns")||"3",i=this.getAttribute("content-padding")||"l",r=this.parseItems();this.className=[l,`${l}--${e}`,`${l}--cols-${s}`,`${l}--padding-${i}`,`${l}--size-${t}`].join(" "),n(this,l),this.updateHeader(),"carousel"===e?this.renderCarousel(r):this.renderGrid(r)}}customElements.get("db-section-testimonials")||customElements.define("db-section-testimonials",DbSectionTestimonials);export{DbSectionTestimonials};

package/dist/esm/components/db-segment-control.d.ts

@@ -1,7 +1,3 @@
-/**
- * SegmentControl Web Component
- * packages/ui SegmentControl.tsx와 DOM·동작·스타일 1:1 동기화
- */
 interface DbSegmentOptionData {
     value: string;
     label: string;

package/dist/esm/components/db-segment-control.js

@@ -1 +1 @@
-const e="designbase-wc-segment-control",t={bar:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="12" width="4" height="8"/><rect x="10" y="8" width="4" height="12"/><rect x="17" y="4" width="4" height="16"/></svg>',line:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 16 9 10 14 13 20 6"/></svg>',pie:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v10l8.66 5"/><circle cx="12" cy="12" r="10"/></svg>',donut:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg>',radar:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 20 8 17 20 7 20 4 8"/></svg>'};class DbSegmentControl extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.indicatorEl=null,this.segmentButtons=[],this.focusedIndex=-1,this.boundKeyDown=e=>this.handleKeyDown(e),this.boundResize=()=>this.updateIndicator(),this.resizeObserver=null}static get observedAttributes(){return["options","value","default-value","size","variant","appearance","full-width","disabled"]}connectedCallback(){this.built||(this.built=!0),this.render(),this.addEventListener("keydown",this.boundKeyDown),window.addEventListener("resize",this.boundResize),this.resizeObserver=new ResizeObserver(()=>this.updateIndicator()),this.resizeObserver.observe(this)}disconnectedCallback(){this.removeEventListener("keydown",this.boundKeyDown),window.removeEventListener("resize",this.boundResize),this.resizeObserver?.disconnect(),this.resizeObserver=null}attributeChangedCallback(e){this.built&&("value"!==e?this.render():this.updateSelection())}get options(){return this.parseOptions(this.getAttribute("options"))}set options(e){const t="string"==typeof e?e:JSON.stringify(e);this.getAttribute("options")!==t&&this.setAttribute("options",t)}get value(){return this.getAttribute("value")||this.getAttribute("default-value")||this.options[0]?.value||""}set value(e){this.setAttribute("value",e)}parseOptions(e){if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}render(){const i=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",n=this.getAttribute("appearance")||"default",r=this.hasAttribute("disabled"),a=this.options,o=this.value;this.className=[e,`${e}--${i}`,`${e}--${s}`,"pill"===n&&`${e}--appearance-pill`,"rounded"===n&&`${e}--appearance-rounded`,this.hasAttribute("full-width")&&`${e}--full-width`,r&&`${e}--disabled`].filter(Boolean).join(" "),this.setAttribute("role","tablist"),this.setAttribute("aria-label","세그먼트 컨트롤"),this.replaceChildren(),this.segmentButtons=[],a.forEach((i,n)=>{const a=i.value===o,l=Boolean(r||i.disabled),d=document.createElement("button");if(d.type="button",d.className=[`${e}__segment`,a&&`${e}__segment--selected`,l&&`${e}__segment--disabled`].filter(Boolean).join(" "),d.setAttribute("role","tab"),d.setAttribute("aria-selected",String(a)),d.setAttribute("aria-disabled",String(l)),d.setAttribute("tabindex",a?"0":"-1"),d.disabled=l,i.icon&&t[i.icon]){const s=document.createElement("span");s.className=`${e}__segment-icon`,s.innerHTML=t[i.icon],d.appendChild(s)}const h=document.createElement("span");h.className=`${e}__segment-label`,h.textContent=i.label,"icon-only"===s&&h.setAttribute("aria-label",i.label),d.appendChild(h),d.addEventListener("click",()=>this.select(i.value)),d.addEventListener("focus",()=>{this.focusedIndex=n,d.classList.add(`${e}__segment--focused`)}),d.addEventListener("blur",()=>{this.focusedIndex=-1,d.classList.remove(`${e}__segment--focused`)}),this.appendChild(d),this.segmentButtons.push(d)}),this.indicatorEl=document.createElement("div"),this.indicatorEl.className=`${e}__indicator`,this.appendChild(this.indicatorEl),this.updateSelection()}updateSelection(){const t=this.options,i=this.value,s=t.findIndex(e=>e.value===i);this.segmentButtons.forEach((s,n)=>{const r=t[n],a=r?.value===i;s.classList.toggle(`${e}__segment--selected`,a),s.setAttribute("aria-selected",String(a)),s.setAttribute("tabindex",a?"0":"-1")}),this.indicatorEl&&t.length>0&&s>=0&&requestAnimationFrame(()=>this.updateIndicator())}updateIndicator(){const e=this.options.findIndex(e=>e.value===this.value),t=this.segmentButtons[e];this.indicatorEl&&t&&(this.indicatorEl.style.width=`${t.offsetWidth}px`,this.indicatorEl.style.transform=`translateX(${t.offsetLeft}px)`)}select(e){if(this.hasAttribute("disabled"))return;const t=this.options.find(t=>t.value===e);t&&!t.disabled&&(this.setAttribute("value",e),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e},bubbles:!0,composed:!0})))}handleKeyDown(e){if(this.hasAttribute("disabled"))return;const t=this.options,i=t.findIndex(e=>e.value===this.value);if(-1===i)return;let s=i;switch(e.key){case"ArrowLeft":e.preventDefault(),s=i>0?i-1:t.length-1;break;case"ArrowRight":e.preventDefault(),s=i<t.length-1?i+1:0;break;case"Home":e.preventDefault(),s=0;break;case"End":e.preventDefault(),s=t.length-1;break;case"Enter":case" ":return e.preventDefault(),void this.select(t[s]?.value??this.value);default:return}for(;s!==i;){const i=t[s];if(i&&!i.disabled){this.segmentButtons[s]?.focus();break}s="ArrowLeft"===e.key||"Home"===e.key?s>0?s-1:t.length-1:s<t.length-1?s+1:0}}}customElements.get("db-segment-control")||customElements.define("db-segment-control",DbSegmentControl);export{DbSegmentControl};
+import{dbText as e}from"../core/i18n.js";import{createDbIcon as t}from"./db-icons.js";const i="designbase-wc-segment-control",s={bar:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="12" width="4" height="8"/><rect x="10" y="8" width="4" height="12"/><rect x="17" y="4" width="4" height="16"/></svg>',line:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 16 9 10 14 13 20 6"/></svg>',pie:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v10l8.66 5"/><circle cx="12" cy="12" r="10"/></svg>',donut:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg>',radar:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 20 8 17 20 7 20 4 8"/></svg>'};class DbSegmentControl extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.indicatorEl=null,this.segmentButtons=[],this.focusedIndex=-1,this.boundKeyDown=e=>this.handleKeyDown(e),this.boundResize=()=>this.updateIndicator(),this.resizeObserver=null}static get observedAttributes(){return["options","value","default-value","size","variant","appearance","full-width","disabled"]}connectedCallback(){this.built||(this.built=!0),this.render(),this.addEventListener("keydown",this.boundKeyDown),window.addEventListener("resize",this.boundResize),this.resizeObserver=new ResizeObserver(()=>this.updateIndicator()),this.resizeObserver.observe(this)}disconnectedCallback(){this.removeEventListener("keydown",this.boundKeyDown),window.removeEventListener("resize",this.boundResize),this.resizeObserver?.disconnect(),this.resizeObserver=null}attributeChangedCallback(e){this.built&&("value"!==e?this.render():this.updateSelection())}get options(){return this.parseOptions(this.getAttribute("options"))}set options(e){const t="string"==typeof e?e:JSON.stringify(e);this.getAttribute("options")!==t&&this.setAttribute("options",t)}get value(){return this.getAttribute("value")||this.getAttribute("default-value")||this.options[0]?.value||""}set value(e){this.setAttribute("value",e)}parseOptions(e){if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}render(){const n=this.getAttribute("size")||"m",r=this.getAttribute("variant")||"default",a=this.getAttribute("appearance")||"default",o=this.hasAttribute("disabled"),l=this.options,d=this.value;this.className=[i,`${i}--${n}`,`${i}--${r}`,"pill"===a&&`${i}--appearance-pill`,"rounded"===a&&`${i}--appearance-rounded`,this.hasAttribute("full-width")&&`${i}--full-width`,o&&`${i}--disabled`].filter(Boolean).join(" "),this.setAttribute("role","tablist"),this.hasAttribute("aria-label")||this.setAttribute("aria-label",e("세그먼트 컨트롤")),this.replaceChildren(),this.segmentButtons=[],l.forEach((e,n)=>{const a=e.value===d,l=Boolean(o||e.disabled),h=document.createElement("button");if(h.type="button",h.className=[`${i}__segment`,a&&`${i}__segment--selected`,l&&`${i}__segment--disabled`].filter(Boolean).join(" "),h.setAttribute("role","tab"),h.setAttribute("aria-selected",String(a)),h.setAttribute("aria-disabled",String(l)),h.setAttribute("tabindex",a?"0":"-1"),h.disabled=l,e.icon&&(s[e.icon]||["desktop","tablet","mobile"].includes(e.icon))){const n=document.createElement("span");n.className=`${i}__segment-icon`,"desktop"===e.icon||"tablet"===e.icon||"mobile"===e.icon?n.append(t(e.icon,18)):n.innerHTML=s[e.icon],h.appendChild(n)}const u=document.createElement("span");u.className=`${i}__segment-label`,u.textContent=e.label,"icon-only"===r&&(h.setAttribute("aria-label",e.label),h.title=e.label,u.setAttribute("aria-label",e.label)),h.appendChild(u),h.addEventListener("click",()=>this.select(e.value)),h.addEventListener("focus",()=>{this.focusedIndex=n,h.classList.add(`${i}__segment--focused`)}),h.addEventListener("blur",()=>{this.focusedIndex=-1,h.classList.remove(`${i}__segment--focused`)}),this.appendChild(h),this.segmentButtons.push(h)}),this.indicatorEl=document.createElement("div"),this.indicatorEl.className=`${i}__indicator`,this.appendChild(this.indicatorEl),this.updateSelection()}updateSelection(){const e=this.options,t=this.value,s=e.findIndex(e=>e.value===t);this.segmentButtons.forEach((s,n)=>{const r=e[n],a=r?.value===t;s.classList.toggle(`${i}__segment--selected`,a),s.setAttribute("aria-selected",String(a)),s.setAttribute("tabindex",a?"0":"-1")}),this.indicatorEl&&e.length>0&&s>=0&&requestAnimationFrame(()=>this.updateIndicator())}updateIndicator(){const e=this.options.findIndex(e=>e.value===this.value),t=this.segmentButtons[e];this.indicatorEl&&t&&(this.indicatorEl.style.width=`${t.offsetWidth}px`,this.indicatorEl.style.transform=`translateX(${t.offsetLeft}px)`)}select(e){if(this.hasAttribute("disabled"))return;const t=this.options.find(t=>t.value===e);t&&!t.disabled&&(this.setAttribute("value",e),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e},bubbles:!0,composed:!0})))}handleKeyDown(e){if(this.hasAttribute("disabled"))return;const t=this.options,i=this.focusedIndex>=0?this.focusedIndex:t.findIndex(e=>e.value===this.value);if(-1===i)return;let s=i;switch(e.key){case"ArrowLeft":e.preventDefault(),s=i>0?i-1:t.length-1;break;case"ArrowRight":e.preventDefault(),s=i<t.length-1?i+1:0;break;case"Home":e.preventDefault(),s=0;break;case"End":e.preventDefault(),s=t.length-1;break;case"Enter":case" ":return e.preventDefault(),void this.select(t[s]?.value??this.value);default:return}for(;s!==i;){const i=t[s];if(i&&!i.disabled){this.segmentButtons[s]?.focus();break}s="ArrowLeft"===e.key||"Home"===e.key?s>0?s-1:t.length-1:s<t.length-1?s+1:0}}}customElements.get("db-segment-control")||customElements.define("db-segment-control",DbSegmentControl);export{DbSegmentControl};

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

@@ -1 +1 @@
-import{getDbComponentIconSize as e,createDbIcon as t}from"./db-icons.js";import"./db-checkbox.js";import{dbUid as s}from"../core/uid.js";import{labelFrom as i,t as r}from"../core/i18n.js";import{SELECT_SIZES as a,SELECT_POSITIONS as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";import{coerceToContract as l}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";class DbSelect extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.built=!1,this.searchTerm="",this.focusedIndex=-1,this.handleTriggerClick=()=>{this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this.open=!this.open,this.open&&this.searchable&&setTimeout(()=>this.searchInput?.focus(),0))},this.handleTriggerFocus=()=>{this.trigger?.classList.add("designbase-wc-select__trigger--focused")},this.handleTriggerBlur=()=>{this.trigger?.classList.remove("designbase-wc-select__trigger--focused")},this.handleClear=e=>{e.stopPropagation();const t=[];this.setSelectedValues(t),this.syncTrigger(),this.syncOptions(),this.dispatchChange(t)},this.handleSearchInput=()=>{this.searchTerm=this.searchInput?.value||"",this.focusedIndex=-1,this.syncOptions()},this.handleDocumentMouseDown=e=>{this.contains(e.target)||(this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1,this.syncOptions())},this.handleDocumentKeyDown=e=>{if(!this.contains(document.activeElement))return;if(!this.open)return void("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open=!0));const t=this.getFilteredOptions();switch(e.key){case"Escape":e.preventDefault(),this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1,this.syncOptions();break;case"ArrowDown":e.preventDefault(),this.focusedIndex=Math.min(this.focusedIndex+1,t.length-1),this.syncOptions();break;case"ArrowUp":e.preventDefault(),this.focusedIndex=Math.max(this.focusedIndex-1,0),this.syncOptions();break;case"Enter":e.preventDefault(),this.focusedIndex>=0&&t[this.focusedIndex]&&this.selectOption(t[this.focusedIndex])}}}static get observedAttributes(){return["options","value","placeholder","label","size","full-width","disabled","readonly","required","error","error-message","helper-text","multiple","searchable","show-clear-button","open","max-height","position","dropdown-width","name"]}get name(){return this.getAttribute("name")??""}set name(e){this.setAttribute("name",e)}get open(){return this.hasAttribute("open")}set open(e){this.toggleAttribute("open",e),this.syncOpenState()}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value"),this.syncTrigger(),this.syncOptions(),this.syncFormValue()}connectedCallback(){this.built||this.build(),this.syncState(),queueMicrotask(()=>{this.isConnected&&this.syncFormValue()}),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}formAssociatedCallback(){this.syncFormValue()}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}formResetCallback(){this.removeAttribute("value"),this.internals.setFormValue(null),this.built&&(this.syncTrigger(),this.syncOptions(),this.syncFormValue())}formDisabledCallback(e){this.toggleAttribute("disabled",e)}attributeChangedCallback(e){if(this.built){if("open"!==e)return"value"===e?(this.syncTrigger(),this.syncOptions(),void this.syncFormValue()):void this.syncState();this.syncOpenState()}}get multiple(){return this.hasAttribute("multiple")}set multiple(e){this.toggleAttribute("multiple",Boolean(e))}get searchable(){return this.hasAttribute("searchable")}set searchable(e){this.toggleAttribute("searchable",Boolean(e))}get showClearButton(){return!this.hasAttribute("show-clear-button")||"false"!==this.getAttribute("show-clear-button")}parseOptions(){const e=this.getAttribute("options")||"[]";try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return e.split(",").map(e=>e.trim()).filter(Boolean).map(e=>({value:e,label:e}))}}parseSelectedValues(){const e=this.getAttribute("value")||"";if(!e)return[];if(this.multiple)try{const t=JSON.parse(e);return Array.isArray(t)?t.map(String):[]}catch{return e.split(",").map(e=>e.trim()).filter(Boolean)}return e?[e]:[]}setSelectedValues(e){this.multiple?e.length?this.setAttribute("value",JSON.stringify(e)):this.removeAttribute("value"):e[0]?this.setAttribute("value",e[0]):this.removeAttribute("value")}syncFormValue(){const e=this.parseSelectedValues();if(this.multiple){const t=new FormData;return e.forEach(e=>t.append(this.name||"select",e)),void this.internals.setFormValue(e.length?t:null)}this.internals.setFormValue(e[0]||null)}getIconSize(){const t=this.getAttribute("size")||"m";return e(a.includes(t)?t:"m")}syncIndicatorIcons(){const e=this.getIconSize();this.clearButton?.replaceChildren(t("close",e)),this.chevronEl&&this.chevronEl.replaceChildren(t(this.open?"chevron-up":"chevron-down",e))}build(){const e=this.getAttribute("id")||s("db-select"),r=`${e}-listbox`;this.hasAttribute("id")||this.setAttribute("id",e),this.labelEl=document.createElement("label"),this.labelEl.className="designbase-wc-select__label",this.trigger=document.createElement("div"),this.trigger.className="designbase-wc-select__trigger",this.trigger.tabIndex=0,this.trigger.setAttribute("role","combobox"),this.trigger.setAttribute("aria-haspopup","listbox"),this.trigger.setAttribute("aria-controls",r),this.trigger.addEventListener("click",this.handleTriggerClick),this.trigger.addEventListener("focus",this.handleTriggerFocus),this.trigger.addEventListener("blur",this.handleTriggerBlur),this.valueEl=document.createElement("div"),this.valueEl.className="designbase-wc-select__value",this.indicatorsEl=document.createElement("div"),this.indicatorsEl.className="designbase-wc-select__indicators",this.clearButton=document.createElement("button"),this.clearButton.type="button",this.clearButton.className="designbase-wc-select__clear-button",this.clearButton.setAttribute("aria-label",i(this,"label-clear","clearAll")),this.clearButton.hidden=!0,this.clearButton.appendChild(t("close",this.getIconSize())),this.clearButton.addEventListener("click",this.handleClear),this.chevronEl=document.createElement("div"),this.chevronEl.className="designbase-wc-select__chevron",this.indicatorsEl.append(this.clearButton,this.chevronEl),this.trigger.append(this.valueEl,this.indicatorsEl),this.dropdown=document.createElement("div"),this.dropdown.className="designbase-wc-select__dropdown",this.searchWrap=document.createElement("div"),this.searchWrap.className="designbase-wc-select__search",this.searchWrap.hidden=!0,this.searchInput=document.createElement("input"),this.searchInput.type="text",this.searchInput.className="designbase-wc-select__search-input",this.searchInput.placeholder=i(this,"label-search","search.label"),this.searchInput.addEventListener("input",this.handleSearchInput),this.searchInput.addEventListener("mousedown",e=>e.stopPropagation()),this.searchInput.addEventListener("click",e=>e.stopPropagation()),this.searchWrap.appendChild(this.searchInput),this.optionsEl=document.createElement("div"),this.optionsEl.className="designbase-wc-select__options",this.optionsEl.id=r,this.optionsEl.setAttribute("role","listbox"),this.dropdown.append(this.searchWrap,this.optionsEl),this.helperEl=document.createElement("p"),this.helperEl.className="designbase-wc-select__helper-text",this.errorEl=document.createElement("p"),this.errorEl.className="designbase-wc-select__error-message",this.append(this.labelEl,this.trigger,this.dropdown,this.helperEl,this.errorEl),this.built=!0}getFilteredOptions(){const e=this.parseOptions();if(!this.searchable||!this.searchTerm)return e;const t=this.searchTerm.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(t))}selectOption(e){if(e.disabled)return;const t=this.parseSelectedValues();let s;this.multiple?s=t.includes(e.value)?t.filter(t=>t!==e.value):[...t,e.value]:(s=[e.value],this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1),this.setSelectedValues(s),this.syncTrigger(),this.syncOptions(),this.dispatchChange(s)}dispatchChange(e){const t=this.parseOptions();if(this.multiple)return this.syncFormValue(),this.dispatchEvent(new Event("change",{bubbles:!0})),void this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e,labels:e.map(e=>t.find(t=>t.value===e)?.label||e)},bubbles:!0,composed:!0}));const s=e[0]||"",i=t.find(e=>e.value===s)?.label||"";this.syncFormValue(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:s,label:i},bubbles:!0,composed:!0}))}syncAccessibleName(e){if(!this.trigger)return;if(e&&this.labelEl)return this.labelEl.id||(this.labelEl.id=s("db-select-label")),this.trigger.setAttribute("aria-labelledby",this.labelEl.id),void this.trigger.removeAttribute("aria-label");this.trigger.removeAttribute("aria-labelledby");const t=this.getAttribute("aria-label")||this.getAttribute("placeholder")||r("select.placeholder");this.trigger.setAttribute("aria-label",t)}syncState(){if(!this.trigger||!this.dropdown||!this.optionsEl)return;const e=l(this.getAttribute("size"),a,"m"),t=l(this.getAttribute("position"),n,"bottom"),s="full"===this.getAttribute("dropdown-width")?"full":"auto",i=Number(this.getAttribute("max-height")||200),r=this.getAttribute("label")||"",h=this.getAttribute("helper-text")||"",c=this.getAttribute("error-message")||"",o=this.hasAttribute("error"),d=this.getAttribute("id")||"";this.className=["designbase-wc-select",`designbase-wc-select--${e}`,this.open&&"designbase-wc-select--open",o&&"designbase-wc-select--error",this.hasAttribute("disabled")&&"designbase-wc-select--disabled",this.hasAttribute("readonly")&&"designbase-wc-select--readonly",this.hasAttribute("full-width")&&"designbase-wc-select--full-width",this.multiple&&"designbase-wc-select--multiple",this.searchable&&"designbase-wc-select--searchable"].filter(Boolean).join(" ");const u=this.parseSelectedValues();if(this.classList.toggle("designbase-wc-select--has-value",u.length>0),this.labelEl){const e=this.hasAttribute("required")?'<span class="designbase-wc-select__required" aria-hidden="true">*</span>':"";this.labelEl.innerHTML=r?`${this.escape(r)}${e}`:"",this.labelEl.hidden=!r}this.syncAccessibleName(r),this.dropdown.className=["designbase-wc-select__dropdown",`designbase-wc-select__dropdown--${s}`,`designbase-wc-select__dropdown--${t}`,this.open&&"designbase-wc-select__dropdown--open"].filter(Boolean).join(" "),this.optionsEl.style.maxHeight=`${i}px`,this.searchWrap&&(this.searchWrap.hidden=!this.searchable);const p=`${d}-helper`,b=`${d}-error`;o&&c?(this.errorEl.id=b,this.errorEl.textContent=c,this.errorEl.hidden=!1,this.helperEl.hidden=!0,this.trigger.setAttribute("aria-describedby",b),this.trigger.setAttribute("aria-invalid","true")):h?(this.helperEl.id=p,this.helperEl.textContent=h,this.helperEl.hidden=!1,this.errorEl.hidden=!0,this.trigger.setAttribute("aria-describedby",p),this.trigger.removeAttribute("aria-invalid")):(this.helperEl.hidden=!0,this.errorEl.hidden=!0,this.trigger.removeAttribute("aria-describedby"),this.trigger.removeAttribute("aria-invalid")),this.hasAttribute("disabled")||this.hasAttribute("readonly")?this.trigger.tabIndex=-1:this.trigger.tabIndex=0,this.syncOpenState(),this.syncTrigger(),this.syncOptions(),this.syncFormValue(),this.syncIndicatorIcons()}syncOpenState(){this.trigger&&this.dropdown&&this.chevronEl&&(this.trigger.setAttribute("aria-expanded",String(this.open)),this.classList.toggle("designbase-wc-select--open",this.open),this.dropdown.classList.toggle("designbase-wc-select__dropdown--open",this.open),this.syncIndicatorIcons())}syncTrigger(){if(!this.valueEl||!this.clearButton)return;const e=this.parseOptions(),s=this.parseSelectedValues(),i=this.getAttribute("placeholder")||r("select.placeholder"),a=s.length>0,n=a&&this.showClearButton&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");if(this.valueEl.replaceChildren(),this.multiple)if(0===s.length){const e=document.createElement("span");e.className="designbase-wc-select__placeholder",e.textContent=i,this.valueEl.appendChild(e)}else{const i=document.createElement("div");i.className="designbase-wc-select__tags",s.forEach(r=>{const a=e.find(e=>e.value===r),n=document.createElement("span");n.className="designbase-wc-select__tag";const l=document.createElement("span");l.className="designbase-wc-select__tag-label",l.textContent=a?.label||r;const h=document.createElement("button");h.type="button",h.className="designbase-wc-select__tag-remove",h.setAttribute("aria-label",`${a?.label||r} 제거`),h.appendChild(t("close",12)),h.addEventListener("click",e=>{e.stopPropagation();const t=s.filter(e=>e!==r);this.setSelectedValues(t),this.syncTrigger(),this.syncOptions(),this.dispatchChange(t)}),n.append(l,h),i.appendChild(n)}),this.valueEl.appendChild(i)}else{const t=document.createElement("span");t.className="designbase-wc-select__single-value";const r=e.find(e=>e.value===s[0]);t.textContent=a?r?.label||s[0]:i,a||t.classList.add("designbase-wc-select__placeholder"),this.valueEl.appendChild(t)}this.clearButton.hidden=!n,this.clearButton.setAttribute("aria-hidden",n?"false":"true"),this.classList.toggle("designbase-wc-select--has-value",a)}syncOptions(){if(!this.optionsEl)return;const e=this.getFilteredOptions(),t=this.parseSelectedValues(),s=this.getAttribute("id")||"db-select";if(this.optionsEl.replaceChildren(),0===e.length){const e=document.createElement("div");return e.className="designbase-wc-select__no-options",e.textContent=this.searchTerm?i(this,"label-no-results","select.noResults"):i(this,"label-empty","select.noResults"),void this.optionsEl.appendChild(e)}e.forEach((e,i)=>{const r=t.includes(e.value),a=i===this.focusedIndex,n=document.createElement("div");if(n.className=["designbase-wc-select__option",r&&"designbase-wc-select__option--selected",a&&"designbase-wc-select__option--focused",e.disabled&&"designbase-wc-select__option--disabled"].filter(Boolean).join(" "),n.id=`${s}-option-${i}`,n.setAttribute("role","option"),n.setAttribute("aria-selected",String(r)),n.addEventListener("click",()=>this.selectOption(e)),this.multiple){const t=document.createElement("div");t.className="designbase-wc-select__checkbox";const s=document.createElement("db-checkbox");s.setAttribute("size","s"),s.setAttribute("has-label","false"),r&&s.setAttribute("checked",""),e.disabled&&s.setAttribute("disabled",""),t.appendChild(s),n.appendChild(t)}const l=document.createElement("span");l.className="designbase-wc-select__option-label",l.textContent=e.label,n.appendChild(l),this.optionsEl.appendChild(n)}),this.focusedIndex>=0?this.trigger?.setAttribute("aria-activedescendant",`${s}-option-${this.focusedIndex}`):this.trigger?.removeAttribute("aria-activedescendant")}escape(e){return e.replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[e]||e))}}DbSelect.formAssociated=!0,customElements.get("db-select")||customElements.define("db-select",DbSelect);export{DbSelect};
+import{labelFrom as e,t,dbFormat as s}from"../core/i18n.js";import{getDbComponentIconSize as i,createDbIcon as a}from"./db-icons.js";import"./db-checkbox.js";import{dbUid as r}from"../core/uid.js";import{SELECT_SIZES as n,SELECT_POSITIONS as l}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";import{coerceToContract as h}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";class DbSelect extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.built=!1,this.searchTerm="",this.focusedIndex=-1,this.handleTriggerClick=()=>{this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this.open=!this.open,this.open&&this.searchable&&setTimeout(()=>this.searchInput?.focus(),0))},this.handleTriggerFocus=()=>{this.trigger?.classList.add("designbase-wc-select__trigger--focused")},this.handleTriggerBlur=()=>{this.trigger?.classList.remove("designbase-wc-select__trigger--focused")},this.handleClear=e=>{e.stopPropagation();const t=[];this.setSelectedValues(t),this.syncTrigger(),this.syncOptions(),this.dispatchChange(t)},this.handleSearchInput=()=>{this.searchTerm=this.searchInput?.value||"",this.focusedIndex=-1,this.syncOptions()},this.handleDocumentMouseDown=e=>{this.contains(e.target)||(this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1,this.syncOptions())},this.handleDocumentKeyDown=e=>{if(!this.contains(document.activeElement))return;if(!this.open)return void("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open=!0));const t=this.getFilteredOptions();switch(e.key){case"Escape":e.preventDefault(),this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1,this.syncOptions();break;case"ArrowDown":e.preventDefault(),this.focusedIndex=Math.min(this.focusedIndex+1,t.length-1),this.syncOptions();break;case"ArrowUp":e.preventDefault(),this.focusedIndex=Math.max(this.focusedIndex-1,0),this.syncOptions();break;case"Enter":e.preventDefault(),this.focusedIndex>=0&&t[this.focusedIndex]&&this.selectOption(t[this.focusedIndex])}}}static get observedAttributes(){return["options","value","placeholder","label","size","full-width","disabled","readonly","required","error","error-message","helper-text","multiple","searchable","show-clear-button","open","max-height","position","dropdown-width","name"]}get name(){return this.getAttribute("name")??""}set name(e){this.setAttribute("name",e)}get open(){return this.hasAttribute("open")}set open(e){this.toggleAttribute("open",e),this.syncOpenState()}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value"),this.syncTrigger(),this.syncOptions(),this.syncFormValue()}connectedCallback(){this.built||this.build(),this.syncState(),queueMicrotask(()=>{this.isConnected&&this.syncFormValue()}),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}formAssociatedCallback(){this.syncFormValue()}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}formResetCallback(){this.removeAttribute("value"),this.internals.setFormValue(null),this.built&&(this.syncTrigger(),this.syncOptions(),this.syncFormValue())}formDisabledCallback(e){this.toggleAttribute("disabled",e)}attributeChangedCallback(e){if(this.built){if("open"!==e)return"value"===e?(this.syncTrigger(),this.syncOptions(),void this.syncFormValue()):void this.syncState();this.syncOpenState()}}get multiple(){return this.hasAttribute("multiple")}set multiple(e){this.toggleAttribute("multiple",Boolean(e))}get searchable(){return this.hasAttribute("searchable")}set searchable(e){this.toggleAttribute("searchable",Boolean(e))}get showClearButton(){return!this.hasAttribute("show-clear-button")||"false"!==this.getAttribute("show-clear-button")}parseOptions(){const e=this.getAttribute("options")||"[]";try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return e.split(",").map(e=>e.trim()).filter(Boolean).map(e=>({value:e,label:e}))}}parseSelectedValues(){const e=this.getAttribute("value")||"";if(!e)return[];if(this.multiple)try{const t=JSON.parse(e);return Array.isArray(t)?t.map(String):[]}catch{return e.split(",").map(e=>e.trim()).filter(Boolean)}return e?[e]:[]}setSelectedValues(e){this.multiple?e.length?this.setAttribute("value",JSON.stringify(e)):this.removeAttribute("value"):e[0]?this.setAttribute("value",e[0]):this.removeAttribute("value")}syncFormValue(){const e=this.parseSelectedValues();if(this.multiple){const t=new FormData;return e.forEach(e=>t.append(this.name||"select",e)),void this.internals.setFormValue(e.length?t:null)}this.internals.setFormValue(e[0]||null)}getIconSize(){const e=this.getAttribute("size")||"m";return i(n.includes(e)?e:"m")}syncIndicatorIcons(){const e=this.getIconSize();this.clearButton?.replaceChildren(a("close",e)),this.chevronEl&&this.chevronEl.replaceChildren(a(this.open?"chevron-up":"chevron-down",e))}build(){const t=this.getAttribute("id")||r("db-select"),s=`${t}-listbox`;this.hasAttribute("id")||this.setAttribute("id",t),this.labelEl=document.createElement("label"),this.labelEl.className="designbase-wc-select__label",this.trigger=document.createElement("div"),this.trigger.className="designbase-wc-select__trigger",this.trigger.tabIndex=0,this.trigger.setAttribute("role","combobox"),this.trigger.setAttribute("aria-haspopup","listbox"),this.trigger.setAttribute("aria-controls",s),this.trigger.addEventListener("click",this.handleTriggerClick),this.trigger.addEventListener("focus",this.handleTriggerFocus),this.trigger.addEventListener("blur",this.handleTriggerBlur),this.valueEl=document.createElement("div"),this.valueEl.className="designbase-wc-select__value",this.indicatorsEl=document.createElement("div"),this.indicatorsEl.className="designbase-wc-select__indicators",this.clearButton=document.createElement("button"),this.clearButton.type="button",this.clearButton.className="designbase-wc-select__clear-button",this.clearButton.setAttribute("aria-label",e(this,"label-clear","clearAll")),this.clearButton.hidden=!0,this.clearButton.appendChild(a("close",this.getIconSize())),this.clearButton.addEventListener("click",this.handleClear),this.chevronEl=document.createElement("div"),this.chevronEl.className="designbase-wc-select__chevron",this.indicatorsEl.append(this.clearButton,this.chevronEl),this.trigger.append(this.valueEl,this.indicatorsEl),this.dropdown=document.createElement("div"),this.dropdown.className="designbase-wc-select__dropdown",this.searchWrap=document.createElement("div"),this.searchWrap.className="designbase-wc-select__search",this.searchWrap.hidden=!0,this.searchInput=document.createElement("input"),this.searchInput.type="text",this.searchInput.className="designbase-wc-select__search-input",this.searchInput.placeholder=e(this,"label-search","search.label"),this.searchInput.addEventListener("input",this.handleSearchInput),this.searchInput.addEventListener("mousedown",e=>e.stopPropagation()),this.searchInput.addEventListener("click",e=>e.stopPropagation()),this.searchWrap.appendChild(this.searchInput),this.optionsEl=document.createElement("div"),this.optionsEl.className="designbase-wc-select__options",this.optionsEl.id=s,this.optionsEl.setAttribute("role","listbox"),this.dropdown.append(this.searchWrap,this.optionsEl),this.helperEl=document.createElement("p"),this.helperEl.className="designbase-wc-select__helper-text",this.errorEl=document.createElement("p"),this.errorEl.className="designbase-wc-select__error-message",this.append(this.labelEl,this.trigger,this.dropdown,this.helperEl,this.errorEl),this.built=!0}getFilteredOptions(){const e=this.parseOptions();if(!this.searchable||!this.searchTerm)return e;const t=this.searchTerm.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(t))}selectOption(e){if(e.disabled)return;const t=this.parseSelectedValues();let s;this.multiple?s=t.includes(e.value)?t.filter(t=>t!==e.value):[...t,e.value]:(s=[e.value],this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1),this.setSelectedValues(s),this.syncTrigger(),this.syncOptions(),this.dispatchChange(s)}dispatchChange(e){const t=this.parseOptions();if(this.multiple)return this.syncFormValue(),this.dispatchEvent(new Event("change",{bubbles:!0})),void this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e,labels:e.map(e=>t.find(t=>t.value===e)?.label||e)},bubbles:!0,composed:!0}));const s=e[0]||"",i=t.find(e=>e.value===s)?.label||"";this.syncFormValue(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:s,label:i},bubbles:!0,composed:!0}))}syncAccessibleName(e){if(!this.trigger)return;if(e&&this.labelEl)return this.labelEl.id||(this.labelEl.id=r("db-select-label")),this.trigger.setAttribute("aria-labelledby",this.labelEl.id),void this.trigger.removeAttribute("aria-label");this.trigger.removeAttribute("aria-labelledby");const s=this.getAttribute("aria-label")||this.getAttribute("placeholder")||t("select.placeholder");this.trigger.setAttribute("aria-label",s)}syncState(){if(!this.trigger||!this.dropdown||!this.optionsEl)return;const e=h(this.getAttribute("size"),n,"m"),t=h(this.getAttribute("position"),l,"bottom"),s="full"===this.getAttribute("dropdown-width")?"full":"auto",i=Number(this.getAttribute("max-height")||200),a=this.getAttribute("label")||"",r=this.getAttribute("helper-text")||"",c=this.getAttribute("error-message")||"",o=this.hasAttribute("error"),d=this.getAttribute("id")||"";this.className=["designbase-wc-select",`designbase-wc-select--${e}`,this.open&&"designbase-wc-select--open",o&&"designbase-wc-select--error",this.hasAttribute("disabled")&&"designbase-wc-select--disabled",this.hasAttribute("readonly")&&"designbase-wc-select--readonly",this.hasAttribute("full-width")&&"designbase-wc-select--full-width",this.multiple&&"designbase-wc-select--multiple",this.searchable&&"designbase-wc-select--searchable"].filter(Boolean).join(" ");const u=this.parseSelectedValues();if(this.classList.toggle("designbase-wc-select--has-value",u.length>0),this.labelEl){const e=this.hasAttribute("required")?'<span class="designbase-wc-select__required" aria-hidden="true">*</span>':"";this.labelEl.innerHTML=a?`${this.escape(a)}${e}`:"",this.labelEl.hidden=!a}this.syncAccessibleName(a),this.dropdown.className=["designbase-wc-select__dropdown",`designbase-wc-select__dropdown--${s}`,`designbase-wc-select__dropdown--${t}`,this.open&&"designbase-wc-select__dropdown--open"].filter(Boolean).join(" "),this.optionsEl.style.maxHeight=`${i}px`,this.searchWrap&&(this.searchWrap.hidden=!this.searchable);const p=`${d}-helper`,b=`${d}-error`;o&&c?(this.errorEl.id=b,this.errorEl.textContent=c,this.errorEl.hidden=!1,this.helperEl.hidden=!0,this.trigger.setAttribute("aria-describedby",b),this.trigger.setAttribute("aria-invalid","true")):r?(this.helperEl.id=p,this.helperEl.textContent=r,this.helperEl.hidden=!1,this.errorEl.hidden=!0,this.trigger.setAttribute("aria-describedby",p),this.trigger.removeAttribute("aria-invalid")):(this.helperEl.hidden=!0,this.errorEl.hidden=!0,this.trigger.removeAttribute("aria-describedby"),this.trigger.removeAttribute("aria-invalid")),this.hasAttribute("disabled")||this.hasAttribute("readonly")?this.trigger.tabIndex=-1:this.trigger.tabIndex=0,this.syncOpenState(),this.syncTrigger(),this.syncOptions(),this.syncFormValue(),this.syncIndicatorIcons()}syncOpenState(){this.trigger&&this.dropdown&&this.chevronEl&&(this.trigger.setAttribute("aria-expanded",String(this.open)),this.classList.toggle("designbase-wc-select--open",this.open),this.dropdown.classList.toggle("designbase-wc-select__dropdown--open",this.open),this.syncIndicatorIcons())}syncTrigger(){if(!this.valueEl||!this.clearButton)return;const e=this.parseOptions(),i=this.parseSelectedValues(),r=this.getAttribute("placeholder")||t("select.placeholder"),n=i.length>0,l=n&&this.showClearButton&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");if(this.valueEl.replaceChildren(),this.multiple)if(0===i.length){const e=document.createElement("span");e.className="designbase-wc-select__placeholder",e.textContent=r,this.valueEl.appendChild(e)}else{const t=document.createElement("div");t.className="designbase-wc-select__tags",i.forEach(r=>{const n=e.find(e=>e.value===r),l=document.createElement("span");l.className="designbase-wc-select__tag";const h=document.createElement("span");h.className="designbase-wc-select__tag-label",h.textContent=n?.label||r;const c=document.createElement("button");c.type="button",c.className="designbase-wc-select__tag-remove",c.setAttribute("aria-label",s("{0} 제거",[n?.label||r])),c.appendChild(a("close",12)),c.addEventListener("click",e=>{e.stopPropagation();const t=i.filter(e=>e!==r);this.setSelectedValues(t),this.syncTrigger(),this.syncOptions(),this.dispatchChange(t)}),l.append(h,c),t.appendChild(l)}),this.valueEl.appendChild(t)}else{const t=document.createElement("span");t.className="designbase-wc-select__single-value";const s=e.find(e=>e.value===i[0]);t.textContent=n?s?.label||i[0]:r,n||t.classList.add("designbase-wc-select__placeholder"),this.valueEl.appendChild(t)}this.clearButton.hidden=!l,this.clearButton.setAttribute("aria-hidden",l?"false":"true"),this.classList.toggle("designbase-wc-select--has-value",n)}syncOptions(){if(!this.optionsEl)return;const t=this.getFilteredOptions(),s=this.parseSelectedValues(),i=this.getAttribute("id")||"db-select";if(this.optionsEl.replaceChildren(),0===t.length){const t=document.createElement("div");return t.className="designbase-wc-select__no-options",t.textContent=this.searchTerm?e(this,"label-no-results","select.noResults"):e(this,"label-empty","select.noResults"),void this.optionsEl.appendChild(t)}t.forEach((e,t)=>{const a=s.includes(e.value),r=t===this.focusedIndex,n=document.createElement("div");if(n.className=["designbase-wc-select__option",a&&"designbase-wc-select__option--selected",r&&"designbase-wc-select__option--focused",e.disabled&&"designbase-wc-select__option--disabled"].filter(Boolean).join(" "),n.id=`${i}-option-${t}`,n.setAttribute("role","option"),n.setAttribute("aria-selected",String(a)),n.setAttribute("aria-disabled",String(Boolean(e.disabled))),n.addEventListener("click",()=>this.selectOption(e)),this.multiple){const t=document.createElement("div");t.className="designbase-wc-select__checkbox";const s=document.createElement("db-checkbox");s.setAttribute("size","s"),s.setAttribute("has-label","false"),a&&s.setAttribute("checked",""),e.disabled&&s.setAttribute("disabled",""),t.appendChild(s),n.appendChild(t)}const l=document.createElement("span");l.className="designbase-wc-select__option-label",l.textContent=e.label,n.appendChild(l),this.optionsEl.appendChild(n)}),this.focusedIndex>=0?this.trigger?.setAttribute("aria-activedescendant",`${i}-option-${this.focusedIndex}`):this.trigger?.removeAttribute("aria-activedescendant")}escape(e){return e.replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[e]||e))}}DbSelect.formAssociated=!0,customElements.get("db-select")||customElements.define("db-select",DbSelect);export{DbSelect};

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

@@ -1 +1 @@
-import{createShareIcon as e,createSharePlatformIcon as t}from"./db-share-icons.js";import{sanitizeHref as s}from"../core/safe-url.js";import{coerceToContract as n}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SHARE_VARIANTS as r,SHARE_SIZES as a,SHARE_POSITIONS as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const o=["facebook","x","linkedin","whatsapp","email","link"],l={facebook:{name:"Facebook",color:"#1877f2",shareUrl:"https://www.facebook.com/sharer/sharer.php?u={url}"},x:{name:"X",color:"#000000",shareUrl:"https://twitter.com/intent/tweet?url={url}&text={title}&hashtags={hashtags}"},instagram:{name:"Instagram",color:"#e4405f",shareUrl:"https://www.instagram.com/",customShare:()=>{window.alert("Instagram에 직접 공유하려면 링크를 복사하여 사용하세요.")}},linkedin:{name:"LinkedIn",color:"#0077b5",shareUrl:"https://www.linkedin.com/sharing/share-offsite/?url={url}"},pinterest:{name:"Pinterest",color:"#bd081c",shareUrl:"https://pinterest.com/pin/create/button/?url={url}&description={title}&media={imageUrl}"},whatsapp:{name:"WhatsApp",color:"#25d366",shareUrl:"https://wa.me/?text={title}%20{url}"},telegram:{name:"Telegram",color:"#0088cc",shareUrl:"https://t.me/share/url?url={url}&text={title}"},email:{name:"이메일",color:"#ea4335",shareUrl:"mailto:?subject={title}&body={description}%20{url}"},link:{name:"링크 복사",color:"#6c757d",shareUrl:""},qr:{name:"QR 코드",color:"#6c757d",shareUrl:""}};class DbShare extends HTMLElement{constructor(){super(...arguments),this.isCopied=!1,this.qrCodeData="",this.copyResetTimer=null,this.modalEl=null,this.contentSlot=null,this.dropdownEl=null}static get observedAttributes(){return["url","title","description","image-url","hashtags","variant","size","position","platforms","button-text","modal-title","show-qr-code","qr-code-size","copy-success-message","open"]}connectedCallback(){this.render()}disconnectedCallback(){this.copyResetTimer&&clearTimeout(this.copyResetTimer)}getVariant(){return n(this.getAttribute("variant"),r,"button")}getSize(){return n(this.getAttribute("size"),a,"m")}getPosition(){return n(this.getAttribute("position"),i,"bottom")}attributeChangedCallback(e){"open"===e&&"modal"===this.getVariant()&&this.modalEl?this.syncModalOpen():"url"===e&&this.contentSlot?this.refreshLinkInputValue():this.render()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open","true"):this.removeAttribute("open")}parseListAttribute(e){const t=this.getAttribute(e);if(!t)return[];try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(e=>String(e).trim()).filter(Boolean)}catch{}return t.split(",").map(e=>e.trim()).filter(Boolean)}getResolvedUrl(){const e=this.getAttribute("url");return e?s(e,""):"undefined"!=typeof window&&window.location?.href?s(window.location.href,""):""}getContext(){return{url:this.getResolvedUrl(),title:this.getAttribute("share-title")||this.getAttribute("title")||"",description:this.getAttribute("description")||"",imageUrl:this.getAttribute("image-url")||"",hashtags:this.parseListAttribute("hashtags"),host:this}}getActivePlatforms(){const e=this.parseListAttribute("platforms");return(e.length>0?e:o).filter(e=>e in l)}replaceUrlVariables(e,t){return e.replace("{url}",encodeURIComponent(t.url)).replace("{title}",encodeURIComponent(t.title)).replace("{description}",encodeURIComponent(t.description)).replace("{imageUrl}",encodeURIComponent(t.imageUrl)).replace("{hashtags}",t.hashtags.join(","))}async handleCopyLink(e){try{await navigator.clipboard.writeText(e.url),this.isCopied=!0,this.dispatchEvent(new CustomEvent("db-copy-success",{bubbles:!0,composed:!0,detail:{url:e.url}})),this.refreshContent(),this.copyResetTimer&&clearTimeout(this.copyResetTimer),this.copyResetTimer=setTimeout(()=>{this.isCopied=!1,this.refreshContent()},3e3)}catch(e){this.dispatchEvent(new CustomEvent("db-copy-error",{bubbles:!0,composed:!0,detail:{error:e}}))}}handleShowQrCode(e){if(this.qrCodeData=e.url,"modal"===this.getVariant())return this.open=!0,void this.refreshContent();this.refreshContent()}handlePlatformShare(e){const t=this.getContext(),n=l[e];if(n)try{if("link"===e)this.handleCopyLink(t);else if("qr"===e)this.handleShowQrCode(t);else if(n.customShare)n.customShare(t);else if(n.shareUrl){const e=this.replaceUrlVariables(n.shareUrl,t),r=s(e,"");if(!r)throw new Error("Invalid share URL");window.open(r,"_blank","noopener,noreferrer,width=600,height=400")}this.dispatchEvent(new CustomEvent("db-share",{bubbles:!0,composed:!0,detail:{platform:e,url:t.url}}))}catch(t){this.dispatchEvent(new CustomEvent("db-share-error",{bubbles:!0,composed:!0,detail:{platform:e,error:t}}))}}getPlacement(){const e=this.getPosition();return"top"===e||"left"===e?"top-left":"right"===e?"bottom-right":"bottom-left"}mapButtonSize(){const e=this.getSize();return"s"===e?"s":"l"===e?"l":"m"}createTriggerButton(t){const s=document.createElement("db-button");return s.className=t||"designbase-wc-share__trigger",s.setAttribute("variant","secondary"),s.setAttribute("size",this.mapButtonSize()),s.textContent=this.getAttribute("button-text")||"공유",s.prepend(e("share-alt",16)),s.addEventListener("db-click",()=>{"modal"!==this.getVariant()?this.open=!this.open:this.open=!0}),s}createPlatformIcon(e){const s=document.createElement("span");return s.className="designbase-wc-share__platform-icon",s.append(t(e,24)),s}createPlatformButton(t){const s=l[t],n=document.createElement("button");n.type="button",n.className=["designbase-wc-share__platform-button",`designbase-wc-share__platform-button--${t}`,"link"===t&&this.isCopied?"designbase-wc-share__platform-button--copied":""].filter(Boolean).join(" "),n.style.setProperty("--platform-color",s.color),n.title=s.name,n.setAttribute("aria-label",`${s.name}에 공유하기`),n.append(this.createPlatformIcon(t));const r=document.createElement("span");if(r.className="designbase-wc-share__platform-name",r.textContent=s.name,n.append(r),"link"===t&&this.isCopied){const t=document.createElement("span");t.className="designbase-wc-share__copy-success",t.append(e("copy",12));const s=document.createElement("span");s.textContent="복사됨!",t.append(s),n.append(t)}return n.addEventListener("click",()=>this.handlePlatformShare(t)),n}createLinkInput(e){const t=document.createElement("db-input");return t.className="designbase-wc-share__link-input",t.setAttribute("type","text"),t.setAttribute("readonly",""),t.setAttribute("size","s"),t.setAttribute("full-width",""),t.setAttribute("value",e),customElements.whenDefined("db-input").then(()=>{t.setAttribute("value",e),t.value=e}),t}refreshLinkInputValue(){const e=this.getResolvedUrl(),t=this.contentSlot?.querySelector("db-input.designbase-wc-share__link-input");t&&(t.setAttribute("value",e),t.value=e)}createCopyButton(t){const s=document.createElement("db-button");s.className="designbase-wc-share__copy-button",s.setAttribute("size","s"),s.setAttribute("variant","primary");const n=document.createElement("span");return n.className="designbase-wc-button__start-icon",n.setAttribute("aria-hidden","true"),n.append(e(this.isCopied?"copy":"link",16)),s.append(n),s.append(document.createTextNode(this.isCopied?"복사됨!":"복사")),s.addEventListener("db-click",()=>{this.handleCopyLink(t)}),s}generateQrCodeUrl(){const e=Number(this.getAttribute("qr-code-size")||200);return`https://api.qrserver.com/v1/create-qr-code/?size=${e}x${e}&data=${encodeURIComponent(this.qrCodeData)}`}createShareContent(){const e=document.createElement("div");return e.className="designbase-wc-share__content",this.populateShareContent(e),e}populateShareContent(e){const t=document.createElement("div");t.className="designbase-wc-share__platforms",this.getActivePlatforms().forEach(e=>{t.append(this.createPlatformButton(e))}),e.append(t);if("false"!==this.getAttribute("show-qr-code")&&this.qrCodeData){const t=document.createElement("div");t.className="designbase-wc-share__qr-section";const s=document.createElement("h4");s.className="designbase-wc-share__qr-title",s.textContent="QR 코드",t.append(s);const n=document.createElement("div");n.className="designbase-wc-share__qr-code";const r=document.createElement("img"),a=Number(this.getAttribute("qr-code-size")||200);r.src=this.generateQrCodeUrl(),r.alt="QR Code",r.width=a,r.height=a,n.append(r),t.append(n);const i=document.createElement("p");i.className="designbase-wc-share__qr-description",i.textContent="QR 코드를 스캔하여 링크에 접속하세요",t.append(i),e.append(t)}const s=this.getContext(),n=document.createElement("div");n.className="designbase-wc-share__link-preview";const r=document.createElement("h4");r.className="designbase-wc-share__link-title",r.textContent="공유 링크",n.append(r);const a=document.createElement("div");a.className="designbase-wc-share__link-container",a.append(this.createLinkInput(s.url)),a.append(this.createCopyButton(s)),n.append(a),e.append(n)}refreshContent(){const e=this.getVariant();if("inline"===e){const e=this.querySelector(":scope > .designbase-wc-share__content");return void e?.replaceWith(this.createShareContent())}"modal"===e&&this.contentSlot&&(this.contentSlot.replaceChildren(),this.populateShareContent(this.contentSlot))}syncModalOpen(){this.modalEl&&(this.open?(this.refreshLinkInputValue(),this.modalEl.setAttribute("open","true")):this.modalEl.removeAttribute("open"))}renderDropdown(){const e=document.createElement("db-dropdown");e.className="designbase-wc-share__dropdown",e.setAttribute("placement",this.getPlacement()),e.setAttribute("label",this.getAttribute("button-text")||"공유"),e.setAttribute("trigger-variant","secondary"),e.setAttribute("trigger-icon","share-alt"),e.setAttribute("size",this.mapButtonSize()),e.setAttribute("items",JSON.stringify(this.getActivePlatforms().map(e=>({id:e,label:l[e].name})))),e.addEventListener("db-change",e=>{const t=e.detail,s=t?.id;s&&this.handlePlatformShare(s)}),this.dropdownEl=e,this.append(e)}renderModal(){const e=this.createTriggerButton();this.append(e);const t=document.createElement("db-modal");t.className="designbase-wc-share__modal",t.setAttribute("title",this.getAttribute("modal-title")||"공유하기"),t.setAttribute("size","m"),this.contentSlot=document.createElement("div"),this.contentSlot.className="designbase-wc-share designbase-wc-share__content",this.contentSlot.setAttribute("data-modal-part","body"),this.populateShareContent(this.contentSlot),t.append(this.contentSlot),t.addEventListener("db-close",()=>{this.open=!1,this.qrCodeData="",this.contentSlot&&(this.contentSlot.replaceChildren(),this.populateShareContent(this.contentSlot))}),this.modalEl=t,this.append(t),this.syncModalOpen()}render(){const e=this.getVariant();this.className=`designbase-wc-share designbase-wc-share--${e}`,this.replaceChildren(),this.modalEl=null,this.contentSlot=null,this.dropdownEl=null,"inline"!==e?"dropdown"!==e?"modal"!==e?this.append(this.createTriggerButton()):this.renderModal():this.renderDropdown():this.append(this.createShareContent())}}customElements.get("db-share")||customElements.define("db-share",DbShare);export{DbShare};
+import{dbFormat as e,dbText as t}from"../core/i18n.js";import{createShareIcon as s,createSharePlatformIcon as r}from"./db-share-icons.js";import{sanitizeHref as n}from"../core/safe-url.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SHARE_VARIANTS as a,SHARE_SIZES as o,SHARE_POSITIONS as l}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const c=["facebook","x","linkedin","whatsapp","email","link"],h={facebook:{name:"Facebook",color:"#1877f2",shareUrl:"https://www.facebook.com/sharer/sharer.php?u={url}"},x:{name:"X",color:"#000000",shareUrl:"https://twitter.com/intent/tweet?url={url}&text={title}&hashtags={hashtags}"},instagram:{name:"Instagram",color:"#e4405f",shareUrl:"https://www.instagram.com/",customShare:()=>{window.alert("Instagram에 직접 공유하려면 링크를 복사하여 사용하세요.")}},linkedin:{name:"LinkedIn",color:"#0077b5",shareUrl:"https://www.linkedin.com/sharing/share-offsite/?url={url}"},pinterest:{name:"Pinterest",color:"#bd081c",shareUrl:"https://pinterest.com/pin/create/button/?url={url}&description={title}&media={imageUrl}"},whatsapp:{name:"WhatsApp",color:"#25d366",shareUrl:"https://wa.me/?text={title}%20{url}"},telegram:{name:"Telegram",color:"#0088cc",shareUrl:"https://t.me/share/url?url={url}&text={title}"},email:{name:"이메일",color:"#ea4335",shareUrl:"mailto:?subject={title}&body={description}%20{url}"},link:{name:"링크 복사",color:"#6c757d",shareUrl:""},qr:{name:"QR 코드",color:"#6c757d",shareUrl:""}};class DbShare extends HTMLElement{constructor(){super(...arguments),this.isCopied=!1,this.qrCodeData="",this.copyResetTimer=null,this.modalEl=null,this.contentSlot=null,this.dropdownEl=null}static get observedAttributes(){return["url","title","description","image-url","hashtags","variant","size","position","platforms","button-text","modal-title","show-qr-code","qr-code-size","copy-success-message","open"]}connectedCallback(){this.render()}disconnectedCallback(){this.copyResetTimer&&clearTimeout(this.copyResetTimer)}getVariant(){return i(this.getAttribute("variant"),a,"button")}getSize(){return i(this.getAttribute("size"),o,"m")}getPosition(){return i(this.getAttribute("position"),l,"bottom")}attributeChangedCallback(e){"open"===e&&"modal"===this.getVariant()&&this.modalEl?this.syncModalOpen():"url"===e&&this.contentSlot?this.refreshLinkInputValue():this.render()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open","true"):this.removeAttribute("open")}parseListAttribute(e){const t=this.getAttribute(e);if(!t)return[];try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(e=>String(e).trim()).filter(Boolean)}catch{}return t.split(",").map(e=>e.trim()).filter(Boolean)}getResolvedUrl(){const e=this.getAttribute("url");return e?n(e,""):"undefined"!=typeof window&&window.location?.href?n(window.location.href,""):""}getContext(){return{url:this.getResolvedUrl(),title:this.getAttribute("share-title")||this.getAttribute("title")||"",description:this.getAttribute("description")||"",imageUrl:this.getAttribute("image-url")||"",hashtags:this.parseListAttribute("hashtags"),host:this}}getActivePlatforms(){const e=this.parseListAttribute("platforms");return(e.length>0?e:c).filter(e=>e in h)}replaceUrlVariables(e,t){return e.replace("{url}",encodeURIComponent(t.url)).replace("{title}",encodeURIComponent(t.title)).replace("{description}",encodeURIComponent(t.description)).replace("{imageUrl}",encodeURIComponent(t.imageUrl)).replace("{hashtags}",t.hashtags.join(","))}async handleCopyLink(e){try{await navigator.clipboard.writeText(e.url),this.isCopied=!0,this.dispatchEvent(new CustomEvent("db-copy-success",{bubbles:!0,composed:!0,detail:{url:e.url}})),this.refreshContent(),this.copyResetTimer&&clearTimeout(this.copyResetTimer),this.copyResetTimer=setTimeout(()=>{this.isCopied=!1,this.refreshContent()},3e3)}catch(e){this.dispatchEvent(new CustomEvent("db-copy-error",{bubbles:!0,composed:!0,detail:{error:e}}))}}handleShowQrCode(e){if(this.qrCodeData=e.url,"modal"===this.getVariant())return this.open=!0,void this.refreshContent();this.refreshContent()}handlePlatformShare(e){const t=this.getContext(),s=h[e];if(s)try{if("link"===e)this.handleCopyLink(t);else if("qr"===e)this.handleShowQrCode(t);else if(s.customShare)s.customShare(t);else if(s.shareUrl){const e=this.replaceUrlVariables(s.shareUrl,t),r=n(e,"");if(!r)throw new Error("Invalid share URL");window.open(r,"_blank","noopener,noreferrer,width=600,height=400")}this.dispatchEvent(new CustomEvent("db-share",{bubbles:!0,composed:!0,detail:{platform:e,url:t.url}}))}catch(t){this.dispatchEvent(new CustomEvent("db-share-error",{bubbles:!0,composed:!0,detail:{platform:e,error:t}}))}}getPlacement(){const e=this.getPosition();return"top"===e||"left"===e?"top-left":"right"===e?"bottom-right":"bottom-left"}mapButtonSize(){const e=this.getSize();return"s"===e?"s":"l"===e?"l":"m"}createTriggerButton(e){const t=document.createElement("db-button");return t.className=e||"designbase-wc-share__trigger",t.setAttribute("variant","secondary"),t.setAttribute("size",this.mapButtonSize()),t.textContent=this.getAttribute("button-text")||"공유",t.prepend(s("share-alt",16)),t.addEventListener("db-click",()=>{"modal"!==this.getVariant()?this.open=!this.open:this.open=!0}),t}createPlatformIcon(e){const t=document.createElement("span");return t.className="designbase-wc-share__platform-icon",t.append(r(e,24)),t}createPlatformButton(r){const n=h[r],i=document.createElement("button");i.type="button",i.className=["designbase-wc-share__platform-button",`designbase-wc-share__platform-button--${r}`,"link"===r&&this.isCopied?"designbase-wc-share__platform-button--copied":""].filter(Boolean).join(" "),i.style.setProperty("--platform-color",n.color),i.title=n.name,i.setAttribute("aria-label",e("{0}에 공유하기",[n.name])),i.append(this.createPlatformIcon(r));const a=document.createElement("span");if(a.className="designbase-wc-share__platform-name",a.textContent=n.name,i.append(a),"link"===r&&this.isCopied){const e=document.createElement("span");e.className="designbase-wc-share__copy-success",e.append(s("copy",12));const r=document.createElement("span");r.textContent=t("복사됨!"),e.append(r),i.append(e)}return i.addEventListener("click",()=>this.handlePlatformShare(r)),i}createLinkInput(e){const t=document.createElement("db-input");return t.className="designbase-wc-share__link-input",t.setAttribute("type","text"),t.setAttribute("readonly",""),t.setAttribute("size","s"),t.setAttribute("full-width",""),t.setAttribute("value",e),customElements.whenDefined("db-input").then(()=>{t.setAttribute("value",e),t.value=e}),t}refreshLinkInputValue(){const e=this.getResolvedUrl(),t=this.contentSlot?.querySelector("db-input.designbase-wc-share__link-input");t&&(t.setAttribute("value",e),t.value=e)}createCopyButton(e){const t=document.createElement("db-button");t.className="designbase-wc-share__copy-button",t.setAttribute("size","s"),t.setAttribute("variant","primary");const r=document.createElement("span");return r.className="designbase-wc-button__start-icon",r.setAttribute("aria-hidden","true"),r.append(s(this.isCopied?"copy":"link",16)),t.append(r),t.append(document.createTextNode(this.isCopied?"복사됨!":"복사")),t.addEventListener("db-click",()=>{this.handleCopyLink(e)}),t}generateQrCodeUrl(){const e=Number(this.getAttribute("qr-code-size")||200);return`https://api.qrserver.com/v1/create-qr-code/?size=${e}x${e}&data=${encodeURIComponent(this.qrCodeData)}`}createShareContent(){const e=document.createElement("div");return e.className="designbase-wc-share__content",this.populateShareContent(e),e}populateShareContent(e){const s=document.createElement("div");s.className="designbase-wc-share__platforms",this.getActivePlatforms().forEach(e=>{s.append(this.createPlatformButton(e))}),e.append(s);if("false"!==this.getAttribute("show-qr-code")&&this.qrCodeData){const s=document.createElement("div");s.className="designbase-wc-share__qr-section";const r=document.createElement("h4");r.className="designbase-wc-share__qr-title",r.textContent=t("QR 코드"),s.append(r);const n=document.createElement("div");n.className="designbase-wc-share__qr-code";const i=document.createElement("img"),a=Number(this.getAttribute("qr-code-size")||200);i.src=this.generateQrCodeUrl(),i.alt="QR Code",i.width=a,i.height=a,n.append(i),s.append(n);const o=document.createElement("p");o.className="designbase-wc-share__qr-description",o.textContent=t("QR 코드를 스캔하여 링크에 접속하세요"),s.append(o),e.append(s)}const r=this.getContext(),n=document.createElement("div");n.className="designbase-wc-share__link-preview";const i=document.createElement("h4");i.className="designbase-wc-share__link-title",i.textContent=t("공유 링크"),n.append(i);const a=document.createElement("div");a.className="designbase-wc-share__link-container",a.append(this.createLinkInput(r.url)),a.append(this.createCopyButton(r)),n.append(a),e.append(n)}refreshContent(){const e=this.getVariant();if("inline"===e){const e=this.querySelector(":scope > .designbase-wc-share__content");return void e?.replaceWith(this.createShareContent())}"modal"===e&&this.contentSlot&&(this.contentSlot.replaceChildren(),this.populateShareContent(this.contentSlot))}syncModalOpen(){this.modalEl&&(this.open?(this.refreshLinkInputValue(),this.modalEl.setAttribute("open","true")):this.modalEl.removeAttribute("open"))}renderDropdown(){const e=document.createElement("db-dropdown");e.className="designbase-wc-share__dropdown",e.setAttribute("placement",this.getPlacement()),e.setAttribute("label",this.getAttribute("button-text")||"공유"),e.setAttribute("trigger-variant","secondary"),e.setAttribute("trigger-icon","share-alt"),e.setAttribute("size",this.mapButtonSize()),e.setAttribute("items",JSON.stringify(this.getActivePlatforms().map(e=>({id:e,label:h[e].name})))),e.addEventListener("db-change",e=>{const t=e.detail,s=t?.id;s&&this.handlePlatformShare(s)}),this.dropdownEl=e,this.append(e)}renderModal(){const e=this.createTriggerButton();this.append(e);const t=document.createElement("db-modal");t.className="designbase-wc-share__modal",t.setAttribute("title",this.getAttribute("modal-title")||"공유하기"),t.setAttribute("size","m"),this.contentSlot=document.createElement("div"),this.contentSlot.className="designbase-wc-share designbase-wc-share__content",this.contentSlot.setAttribute("data-modal-part","body"),this.populateShareContent(this.contentSlot),t.append(this.contentSlot),t.addEventListener("db-close",()=>{this.open=!1,this.qrCodeData="",this.contentSlot&&(this.contentSlot.replaceChildren(),this.populateShareContent(this.contentSlot))}),this.modalEl=t,this.append(t),this.syncModalOpen()}render(){const e=this.getVariant();this.className=`designbase-wc-share designbase-wc-share--${e}`,this.replaceChildren(),this.modalEl=null,this.contentSlot=null,this.dropdownEl=null,"inline"!==e?"dropdown"!==e?"modal"!==e?this.append(this.createTriggerButton()):this.renderModal():this.renderDropdown():this.append(this.createShareContent())}}customElements.get("db-share")||customElements.define("db-share",DbShare);export{DbShare};

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

@@ -1,3 +1,5 @@
+import { SIDEBAR_ACCORDION_MODES } from '../ui-contracts/dist/components.d.js';
+
 interface DbSidebarItem {
     id: string;
     label: string;
@@ -96,6 +98,15 @@ declare class DbSidebar extends HTMLElement {
     private bindPanelMediaQuery;
     private unbindPanelMediaQuery;
     private seedExpanded;
+    /** Open navigation groups. Accepts an array or JSON, independently of active selection. */
+    get expandedIds(): string[];
+    set expandedIds(value: string[] | string);
+    get accordionMode(): (typeof SIDEBAR_ACCORDION_MODES)[number];
+    set accordionMode(value: (typeof SIDEBAR_ACCORDION_MODES)[number]);
+    get hideExpandIcon(): boolean;
+    set hideExpandIcon(value: boolean);
+    get showDepthGuide(): boolean;
+    set showDepthGuide(value: boolean);
     get items(): DbSidebarItem[];
     set items(value: DbSidebarItem[] | string);
     get sections(): DbSidebarSection[];
@@ -164,7 +175,7 @@ declare class DbSidebar extends HTMLElement {
     private getSelectedProject;
     private bindOutsideClick;
     private closeOverlayMenus;
-    private syncExclusiveAccordion;
+    private syncAccordionState;
     private unbindOutsideClick;
     private cancelFlyoutClose;
     private showFlyout;
@@ -172,6 +183,8 @@ declare class DbSidebar extends HTMLElement {
     private cancelUserFlyoutClose;
     private setUserFlyout;
     private scheduleUserFlyoutClose;
+    /** Content role; visual wrapper variants remain independent. */
+    private get sidebarType();
     private syncHostClasses;
     private navigateToPanel;
     private dispatchItemClick;