@designbasekorea/ui-wc 0.9.0 → 0.9.2

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.js

@@ -1 +1 @@
-import{createDbIcon as e,isDbIconName as t}from"./db-icons.js";import{sanitizeHref as s}from"../core/safe-url.js";import{SIDEBAR_CUSTOM_NAV_SLOTS as i,SIDEBAR_PANEL_MODES as a,SIDEBAR_TYPES as n,SIDEBAR_SIZES as r,SIDEBAR_THEMES as d,SIDEBAR_POSITIONS as o,SIDEBAR_VARIANTS as c}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const l="240px";class DbSidebar extends HTMLElement{constructor(){super(...arguments),this.expandedItems=new Set,this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.userFlyoutItemId=null,this.flyoutCloseTimer=null,this.userFlyoutCloseTimer=null,this.outsideHandler=null,this.panelMediaQuery=null,this.panelMediaHandler=null,this.resolvedPanelMode="adjacent"}collectCustomNavSlots(){const e=new Map;return i.forEach(t=>{const s=Array.from(this.children).filter(e=>e instanceof HTMLElement&&e.getAttribute("slot")===t),i=Array.from(this.querySelectorAll(`[data-sidebar-slot="${t}"]`)).flatMap(e=>Array.from(e.children).filter(e=>e instanceof HTMLElement&&e.getAttribute("slot")===t));e.set(t,[...new Set([...s,...i])])}),e}createCustomNavSlot(e){const t=document.createElement("div");return t.className=["designbase-wc-sidebar__custom-slot",`designbase-wc-sidebar__custom-slot--${e}`].join(" "),t.dataset.sidebarSlot=e,t}projectCustomNavSlots(e){i.forEach(t=>{const s=this.querySelector(`[data-sidebar-slot="${t}"]`),i=e.get(t)??[];s&&0!==i.length?s.append(...i):s?.remove()})}static get observedAttributes(){return["type","logo-src","logo-alt","items","sections","user-menu-items","user-profile","default-expanded-ids","expanded-ids","accordion-mode","projects","selected-project-id","project-manage-label","project-manage-href","project-section-label","project-empty-label","project-empty-trigger-label","bottom-items","bottom-sections","promo-banner","update-banner","header-type","back-label","back-href","panels","settings-sections","active-panel","panel-mode","panel-width","panel-breakpoint","size","theme","variant","position","collapsed","collapsible","show-logo","logo-type","logo-text","full-height","shadow"]}connectedCallback(){this.seedExpanded(),this.bindPanelMediaQuery(),this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick(),this.unbindPanelMediaQuery(),this.cancelFlyoutClose(),this.cancelUserFlyoutClose()}attributeChangedCallback(e,t,s){if(this.isConnected&&t!==s){if("default-expanded-ids"===e||"expanded-ids"===e||"accordion-mode"===e)return this.seedExpanded(),void this.syncAccordionState();if("collapsed"===e&&this.hasAttribute("collapsed")&&(this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.userFlyoutItemId=null,this.cancelFlyoutClose(),this.cancelUserFlyoutClose()),"panel-mode"!==e&&"panel-breakpoint"!==e||this.bindPanelMediaQuery(),this.render(),"active-panel"===e){const e=this.getActivePanelConfig();this.dispatchEvent(new CustomEvent("db-panel-change",{bubbles:!0,composed:!0,detail:{panel:e?.id??"main",panelConfig:e,mode:this.resolvedPanelMode}}))}}}bindPanelMediaQuery(){this.unbindPanelMediaQuery();const e=this.panelMode;if("auto"!==e)return void(this.resolvedPanelMode=e);if("undefined"==typeof window||"function"!=typeof window.matchMedia)return void(this.resolvedPanelMode="adjacent");const t=window.matchMedia(`(min-width: ${this.panelBreakpoint}px)`);this.panelMediaQuery=t,this.resolvedPanelMode=t.matches?"adjacent":"replace",this.panelMediaHandler=e=>{const t=e.matches?"adjacent":"replace";t!==this.resolvedPanelMode&&(this.resolvedPanelMode=t,this.render(),this.dispatchEvent(new CustomEvent("db-panel-mode-change",{bubbles:!0,composed:!0,detail:{mode:t}})))},t.addEventListener("change",this.panelMediaHandler)}unbindPanelMediaQuery(){this.panelMediaQuery&&this.panelMediaHandler&&this.panelMediaQuery.removeEventListener("change",this.panelMediaHandler),this.panelMediaQuery=null,this.panelMediaHandler=null}seedExpanded(){try{const e=JSON.parse(this.getAttribute("expanded-ids")??this.getAttribute("default-expanded-ids")??"[]"),t=Array.isArray(e)?[...new Set(e.filter(e=>"string"==typeof e))]:[];this.expandedItems=new Set("single"===this.accordionMode?t.slice(0,1):t)}catch{this.expandedItems=new Set}}get expandedIds(){return[...this.expandedItems]}set expandedIds(e){this.setAttribute("expanded-ids","string"==typeof e?e:JSON.stringify(e)),this.isConnected||this.seedExpanded()}get accordionMode(){return"multiple"===this.getAttribute("accordion-mode")?"multiple":"single"}set accordionMode(e){this.setAttribute("accordion-mode",e)}get hideExpandIcon(){return this.hasAttribute("hide-expand-icon")&&"false"!==this.getAttribute("hide-expand-icon")}set hideExpandIcon(e){this.toggleAttribute("hide-expand-icon",e)}get showDepthGuide(){return this.hasAttribute("show-depth-guide")&&"false"!==this.getAttribute("show-depth-guide")}set showDepthGuide(e){this.toggleAttribute("show-depth-guide",e)}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get sections(){return this.parseSections()}set sections(e){this.setAttribute("sections","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseUserMenuItems()}set userMenuItems(e){this.setAttribute("user-menu-items","string"==typeof e?e:JSON.stringify(e))}get userProfile(){return this.parseUserProfile()}set userProfile(e){null==e?this.removeAttribute("user-profile"):this.setAttribute("user-profile","string"==typeof e?e:JSON.stringify(e))}get projects(){return this.parseProjects()}set projects(e){this.setAttribute("projects","string"==typeof e?e:JSON.stringify(e))}get selectedProjectId(){return this.getAttribute("selected-project-id")||""}set selectedProjectId(e){e?this.setAttribute("selected-project-id",e):this.removeAttribute("selected-project-id")}get projectManageLabel(){return this.getAttribute("project-manage-label")||"프로젝트 관리"}set projectManageLabel(e){this.setAttribute("project-manage-label",e)}get projectManageHref(){return this.getAttribute("project-manage-href")||""}set projectManageHref(e){e?this.setAttribute("project-manage-href",e):this.removeAttribute("project-manage-href")}get projectSectionLabel(){return this.getAttribute("project-section-label")||"프로젝트"}set projectSectionLabel(e){this.setAttribute("project-section-label",e)}get projectEmptyLabel(){return this.getAttribute("project-empty-label")||"프로젝트를 추가해 주세요"}set projectEmptyLabel(e){this.setAttribute("project-empty-label",e)}get projectEmptyTriggerLabel(){return this.getAttribute("project-empty-trigger-label")||"프로젝트 추가"}set projectEmptyTriggerLabel(e){this.setAttribute("project-empty-trigger-label",e)}get bottomItems(){return this.parseBottomItems()}set bottomItems(e){this.setAttribute("bottom-items","string"==typeof e?e:JSON.stringify(e))}get bottomSections(){return this.parseBottomSections()}set bottomSections(e){this.setAttribute("bottom-sections","string"==typeof e?e:JSON.stringify(e))}get promoBanner(){return this.parsePromoBanner()}set promoBanner(e){null==e?this.removeAttribute("promo-banner"):this.setAttribute("promo-banner","string"==typeof e?e:JSON.stringify(e))}get updateBanner(){return this.parseUpdateBanner()}set updateBanner(e){null==e?this.removeAttribute("update-banner"):this.setAttribute("update-banner","string"==typeof e?e:JSON.stringify(e))}get headerType(){return"back"===this.getAttribute("header-type")?"back":"default"}set headerType(e){this.setAttribute("header-type",e)}get backLabel(){return this.getAttribute("back-label")||"뒤로가기"}set backLabel(e){this.setAttribute("back-label",e)}get backHref(){return this.getAttribute("back-href")||""}set backHref(e){e?this.setAttribute("back-href",e):this.removeAttribute("back-href")}get panels(){return this.parsePanels()}set panels(e){this.setAttribute("panels","string"==typeof e?e:JSON.stringify(e))}get settingsSections(){return this.parseSettingsSections()}set settingsSections(e){this.setAttribute("settings-sections","string"==typeof e?e:JSON.stringify(e))}get activePanel(){const e=this.getAttribute("active-panel")||"main";return"main"===e?"main":this.findPanel(e)?e:"main"}set activePanel(e){const t=e&&"main"!==e&&this.findPanel(e)?e:"main";this.setAttribute("active-panel",t)}get panelMode(){const e=this.getAttribute("panel-mode")||"auto";return a.includes(e)?e:"auto"}set panelMode(e){this.setAttribute("panel-mode",a.includes(e)?e:"auto")}get panelWidth(){return this.normalizeCssLength(this.getAttribute("panel-width")||l)}set panelWidth(e){this.setAttribute("panel-width",this.normalizeCssLength(e))}get panelBreakpoint(){const e=Number(this.getAttribute("panel-breakpoint"));return Number.isFinite(e)&&e>0?e:1024}set panelBreakpoint(e){const t=Number.isFinite(e)&&e>0?Math.round(e):1024;this.setAttribute("panel-breakpoint",String(t))}normalizeCssLength(e){if("number"==typeof e)return`${Math.max(0,e)}px`;const t=String(e??"").trim();return t?/^-?\d+(?:\.\d+)?$/.test(t)?`${Math.max(0,Number(t))}px`:t:l}parseSettingsSections(){try{const e=JSON.parse(this.getAttribute("settings-sections")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parsePanels(){let e=[];const t=this.getAttribute("panels");if(t)try{const s=JSON.parse(t);Array.isArray(s)&&(e=s.filter(e=>Boolean(e&&"string"==typeof e.id&&e.id.trim())).map(e=>({...e,id:e.id.trim(),title:String(e.title||e.id).trim(),sections:Array.isArray(e.sections)?e.sections:[]})))}catch{e=[]}const s=this.parseSettingsSections();return s.length&&!e.some(e=>"settings"===e.id)&&e.push({id:"settings",title:"Settings",backLabel:this.backLabel,sections:s}),e}hasPanels(){return this.parsePanels().length>0}findPanel(e){return e&&"main"!==e?this.parsePanels().find(t=>t.id===e)??null:null}getActivePanelConfig(){return this.findPanel(this.getAttribute("active-panel")||"main")}parseSections(){const e=this.getAttribute("sections");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length)return t}catch{}try{const e=JSON.parse(this.getAttribute("items")||"[]");return[{id:"main",items:Array.isArray(e)?e:[]}]}catch{return[{id:"main",items:[]}]}}parseUserMenuItems(){try{const e=JSON.parse(this.getAttribute("user-menu-items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}parseProjects(){try{const e=JSON.parse(this.getAttribute("projects")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBottomItems(){try{const e=JSON.parse(this.getAttribute("bottom-items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBottomSections(){const e=this.getAttribute("bottom-sections");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length)return t}catch{}const t=this.parseBottomItems();return t.length?[{id:"bottom",items:t}]:[]}parsePromoBanner(){const e=this.getAttribute("promo-banner");if(!e)return null;try{return JSON.parse(e)}catch{return null}}parseUpdateBanner(){const e=this.getAttribute("update-banner");if(!e)return null;try{return JSON.parse(e)}catch{return null}}getSelectedProject(){const e=this.parseProjects();if(!e.length)return null;const t=this.selectedProjectId;return e.find(e=>e.id===t)||e[0]}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{const t=e.target;if(this.contains(t))return;let s=!1;this.userMenuOpen&&(this.userMenuOpen=!1,this.userFlyoutItemId=null,s=!0),this.projectMenuOpen&&(this.projectMenuOpen=!1,s=!0),s&&this.render()},document.addEventListener("mousedown",this.outsideHandler))}closeOverlayMenus(){const e=this.projectMenuOpen,t=this.userMenuOpen;if(!e&&!t)return!1;this.projectMenuOpen=!1,this.userMenuOpen=!1,this.userFlyoutItemId=null,this.cancelUserFlyoutClose(),this.classList.remove("designbase-wc-sidebar--user-menu-open"),this.querySelector(".designbase-wc-sidebar__project-dropdown")?.remove(),this.querySelector(".designbase-wc-sidebar__project-selector")?.classList.remove("designbase-wc-sidebar__project-selector--open");const s=this.querySelector(".designbase-wc-sidebar__project-trigger");s?.setAttribute("aria-expanded","false");const i=this.querySelector(".designbase-wc-sidebar__user-dropdown");return i&&(i.hidden=!0),this.querySelector(".designbase-wc-sidebar__user-info")?.setAttribute("aria-expanded","false"),this.querySelector(".designbase-wc-sidebar__user-collapsed")?.setAttribute("aria-expanded","false"),this.querySelector(".designbase-wc-sidebar__user-collapsed")?.classList.remove("designbase-wc-sidebar__user-collapsed--open"),!0}syncAccordionState(){[...Array.from(this.querySelectorAll(".designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item")),...Array.from(this.querySelectorAll(".designbase-wc-sidebar__bottom-nav .designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item"))].forEach(e=>{const t=e.getAttribute("data-item-id");t&&(this.expandedItems.has(t)?e.setAttribute("expanded",""):e.removeAttribute("expanded"))})}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}cancelFlyoutClose(){this.flyoutCloseTimer&&(clearTimeout(this.flyoutCloseTimer),this.flyoutCloseTimer=null)}showFlyout(e){this.cancelFlyoutClose(),this.flyoutItemId!==e&&(this.flyoutItemId=e,this.renderNav(),this.renderBottomNav())}scheduleFlyoutClose(){this.cancelFlyoutClose(),this.flyoutCloseTimer=setTimeout(()=>{this.flyoutCloseTimer=null,this.flyoutItemId=null,this.renderNav(),this.renderBottomNav()},120)}cancelUserFlyoutClose(){this.userFlyoutCloseTimer&&(clearTimeout(this.userFlyoutCloseTimer),this.userFlyoutCloseTimer=null)}setUserFlyout(e){this.cancelUserFlyoutClose(),this.userFlyoutItemId=e,this.querySelectorAll(".designbase-wc-sidebar__user-menu-item").forEach(t=>{const s=Boolean(e&&t.dataset.itemId===e);t.classList.toggle("designbase-wc-sidebar__user-menu-item--flyout-active",s),t.querySelector(".designbase-wc-sidebar__user-menu-trigger")?.setAttribute("aria-expanded",String(s));const i=t.querySelector(".designbase-wc-sidebar__user-flyout");i&&(i.hidden=!s)})}scheduleUserFlyoutClose(){this.cancelUserFlyoutClose(),this.userFlyoutCloseTimer=setTimeout(()=>{this.userFlyoutCloseTimer=null,this.setUserFlyout(null)},120)}get sidebarType(){const e=this.getAttribute("type");return n.find(t=>t===e)||"app"}syncHostClasses(){const e=this.getAttribute("size")||"m",t=this.getAttribute("theme")||"default",s=this.getAttribute("variant")||"default",i=this.getAttribute("position")||"left",a=this.getActivePanelConfig(),n=Boolean(a),l=this.panelWidth;this.style.setProperty("--db-sidebar-panel-width",l),this.className=["designbase-wc-sidebar",`designbase-wc-sidebar--type-${this.sidebarType}`,`designbase-wc-sidebar--${r.includes(e)?e:"m"}`,`designbase-wc-sidebar--${d.includes(t)?t:"default"}`,`designbase-wc-sidebar--${o.includes(i)?i:"left"}`,`designbase-wc-sidebar--panel-${this.resolvedPanelMode}`,c.includes(s)&&"wrapper"===s&&"designbase-wc-sidebar--wrapper",this.hasAttribute("collapsed")&&"designbase-wc-sidebar--collapsed",this.hasAttribute("full-height")&&"designbase-wc-sidebar--full-height",this.hasAttribute("shadow")&&"designbase-wc-sidebar--shadow",this.userMenuOpen&&"designbase-wc-sidebar--user-menu-open",("back"===this.headerType||n&&"replace"===this.resolvedPanelMode)&&"designbase-wc-sidebar--header-back",n&&"designbase-wc-sidebar--panel-open",this.hasPanels()&&"designbase-wc-sidebar--has-panels"].filter(Boolean).join(" ")}navigateToPanel(e){const t="main"!==e&&e?this.findPanel(e)?.id:"main";t&&this.activePanel!==t&&("main"!==t&&"replace"===this.resolvedPanelMode&&this.hasAttribute("collapsed")&&this.removeAttribute("collapsed"),this.setAttribute("active-panel",t))}dispatchItemClick(e){this.dispatchEvent(new CustomEvent("db-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}dispatchUserMenuItemClick(e){this.dispatchEvent(new CustomEvent("db-user-menu-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}dispatchBackClick(){const e=this.getActivePanelConfig();e&&this.navigateToPanel("main");const t=new CustomEvent("db-back-click",{bubbles:!0,composed:!0,cancelable:!0,detail:{label:e?.backLabel||this.backLabel,href:this.backHref,panel:e}});this.dispatchEvent(t);const i=s(this.backHref,"");t.defaultPrevented||e||!i||"back"!==this.headerType||window.location.assign(i)}dispatchProjectChange(e){this.dispatchEvent(new CustomEvent("db-project-change",{bubbles:!0,composed:!0,detail:{project:e}}))}dispatchProjectManage(){this.dispatchEvent(new CustomEvent("db-project-manage",{bubbles:!0,composed:!0,detail:{}}))}dispatchPromoCtaClick(e){this.dispatchEvent(new CustomEvent("db-promo-cta-click",{bubbles:!0,composed:!0,detail:{banner:e}}))}dispatchUpdateCtaClick(e){this.dispatchEvent(new CustomEvent("db-update-cta-click",{bubbles:!0,composed:!0,detail:{banner:e}}))}createProjectAvatar(e,t="s"){const s=document.createElement("db-avatar");if(s.className="designbase-wc-sidebar__project-avatar",s.setAttribute("size",t),s.setAttribute("initials",(e.label||"?").trim()),s.setAttribute("alt",e.label),e.color){const applyColor=()=>{const t=s.querySelector(".designbase-wc-avatar__initials");return!!t&&(t.style.backgroundColor=e.color,t.style.color="#fff",!0)},t=new MutationObserver(()=>{applyColor()&&t.disconnect()});t.observe(s,{childList:!0,subtree:!0}),queueMicrotask(()=>{applyColor()&&t.disconnect()})}return s}createProjectEmptyMark(t="s"){const s=document.createElement("span");return s.className=["designbase-wc-sidebar__project-mark",`designbase-wc-sidebar__project-mark--${t}`,"designbase-wc-sidebar__project-mark--empty"].join(" "),s.setAttribute("aria-hidden","true"),s.append(e("plus","m"===t?16:14)),s}createProjectBadge(e){if(!e.badge)return null;const t=document.createElement("db-badge");return t.className="designbase-wc-sidebar__project-badge",t.setAttribute("size","s"),t.setAttribute("variant",e.badgeColor||"warning"),t.setAttribute("type","text"),t.textContent=e.badge,t}createProjectSelector(t){if(!this.hasAttribute("projects"))return null;const i=this.parseProjects(),a=0===i.length,n=this.getSelectedProject(),r=document.createElement("div");r.className=["designbase-wc-sidebar__project-selector",t&&"designbase-wc-sidebar__project-selector--collapsed",this.projectMenuOpen&&"designbase-wc-sidebar__project-selector--open",a&&"designbase-wc-sidebar__project-selector--empty"].filter(Boolean).join(" ");const d=this.getAttribute("project-section-label");if(!t&&d&&d.trim()){const e=document.createElement("div");e.className="designbase-wc-sidebar__project-section-label",e.textContent=d.trim(),r.append(e)}const o=document.createElement("button");if(o.type="button",o.className="designbase-wc-sidebar__project-trigger",o.setAttribute("aria-haspopup","menu"),o.setAttribute("aria-expanded",String(this.projectMenuOpen)),a||!n){if(o.setAttribute("aria-label",this.projectEmptyTriggerLabel),o.append(this.createProjectEmptyMark(t?"m":"s")),!t){const e=document.createElement("span");e.className="designbase-wc-sidebar__project-label",e.textContent=this.projectEmptyTriggerLabel,o.append(e)}}else if(o.setAttribute("aria-label",n.label),o.append(this.createProjectAvatar(n,t?"m":"s")),!t){const e=document.createElement("span");e.className="designbase-wc-sidebar__project-label",e.textContent=n.label,o.append(e)}const c=document.createElement("span");if(c.className="designbase-wc-sidebar__project-chevron",c.setAttribute("aria-hidden","true"),c.append(e("chevron-down",14)),o.append(c),o.addEventListener("click",()=>{this.projectMenuOpen=!this.projectMenuOpen,this.userMenuOpen=!1,this.render()}),r.append(o),this.projectMenuOpen){const t=document.createElement("div");if(t.className="designbase-wc-sidebar__project-dropdown",t.setAttribute("role","menu"),t.setAttribute("aria-label",this.projectSectionLabel),a){const e=document.createElement("div");e.className="designbase-wc-sidebar__project-empty",e.setAttribute("role","presentation");const s=document.createElement("p");s.className="designbase-wc-sidebar__project-empty-text",s.textContent=this.projectEmptyLabel,e.append(s),t.append(e)}else{const e=document.createElement("ul");e.className="designbase-wc-sidebar__project-list",i.forEach(t=>{const s=document.createElement("li");s.className="designbase-wc-sidebar__project-option";const i=document.createElement("button");i.type="button",i.className=["designbase-wc-sidebar__project-option-btn",n&&t.id===n.id&&"designbase-wc-sidebar__project-option-btn--active"].filter(Boolean).join(" "),i.setAttribute("role","menuitem"),i.append(this.createProjectAvatar(t,"s"));const a=document.createElement("span");a.className="designbase-wc-sidebar__project-option-label",a.textContent=t.label,i.append(a);const r=this.createProjectBadge(t);r&&i.append(r),i.addEventListener("click",()=>{this.projectMenuOpen=!1,this.setAttribute("selected-project-id",t.id),this.dispatchProjectChange(t),this.render()}),s.append(i),e.append(s)}),t.append(e)}const d=document.createElement("button");d.type="button",d.className="designbase-wc-sidebar__project-manage",d.setAttribute("role","menuitem"),d.append(e("plus",14));const o=document.createElement("span");o.textContent=this.projectManageLabel,d.append(o),d.addEventListener("click",()=>{this.projectMenuOpen=!1;const e=this.projectManageHref,t=s(e,"");t&&window.location.assign(t),this.dispatchProjectManage(),this.render()}),t.append(d),r.append(t)}return r}createFlyout(e,t){const i=this.getAttribute("position")||"left",a=document.createElement("div");a.className=["designbase-wc-sidebar__flyout","right"===i&&"designbase-wc-sidebar__flyout--align-left"].filter(Boolean).join(" "),a.setAttribute("role","menu"),a.setAttribute("aria-label",`${e.label} 하위 메뉴`),a.addEventListener("mouseenter",()=>this.cancelFlyoutClose()),a.addEventListener("mouseleave",()=>this.scheduleFlyoutClose());const n=document.createElement("div");n.className="designbase-wc-sidebar__flyout-title",n.textContent=e.label,a.append(n);const r=document.createElement("ul");return r.className="designbase-wc-sidebar__flyout-list",(e.children||[]).forEach(e=>{const i=document.createElement("li");i.className="designbase-wc-sidebar__flyout-item";const a=document.createElement("db-menu-item");a.setAttribute("label",e.label),a.setAttribute("type","block"),a.setAttribute("menu-style","dropdown"),a.setAttribute("size",t);const n=s(e.href,"");n&&a.setAttribute("href",n),e.active&&a.setAttribute("active",""),e.disabled&&a.setAttribute("disabled",""),void 0!==e.badge&&a.setAttribute("badge",String(e.badge)),e.badgeColor&&a.setAttribute("badge-color",e.badgeColor),a.addEventListener("db-click",()=>{e.disabled||(this.flyoutItemId=null,this.dispatchItemClick(e),this.renderNav(),this.renderBottomNav())}),i.append(a),r.append(i)}),a.append(r),a}createSidebarMenuItem(e,t,i=0){const a=Boolean(e.children?.length),n=this.expandedItems.has(e.id),r=this.hasAttribute("collapsed"),d=r&&a,o=document.createElement("li");o.className=["designbase-wc-sidebar__item",d&&this.flyoutItemId===e.id&&"designbase-wc-sidebar__item--flyout-active"].filter(Boolean).join(" "),d&&(o.addEventListener("mouseenter",()=>this.showFlyout(e.id)),o.addEventListener("mouseleave",()=>this.scheduleFlyoutClose()));const c=document.createElement("db-menu-item");c.setAttribute("data-item-id",e.id),c.setAttribute("label",e.label),c.setAttribute("type","block"),c.setAttribute("menu-style","accordion"),c.setAttribute("size",t),c.setAttribute("depth",String(i));const l=s(e.href,"");if(l&&c.setAttribute("href",l),e.icon&&c.setAttribute("icon",e.icon),(e.active||e.openPanel&&e.openPanel===this.activePanel)&&c.setAttribute("active",""),e.disabled&&c.setAttribute("disabled",""),void 0!==e.badge&&c.setAttribute("badge",String(e.badge)),e.badgeColor&&c.setAttribute("badge-color",e.badgeColor),a&&!d&&(c.setAttribute("expandable",""),c.subItems=(e.children||[]).map(e=>({id:e.id,label:e.label,href:e.href,active:e.active,disabled:e.disabled,badge:e.badge,badgeColor:e.badgeColor,icon:e.icon})),n&&!r&&c.setAttribute("expanded","")),c.addEventListener("db-click",t=>{if(!e.disabled){if(a&&!r){const s=t.detail?.expanded??!this.expandedItems.has(e.id);return this.closeOverlayMenus(),s?("single"===this.accordionMode&&this.expandedItems.clear(),this.expandedItems.add(e.id)):this.expandedItems.delete(e.id),this.expandedIds=[...this.expandedItems],this.syncAccordionState(),this.dispatchEvent(new CustomEvent("db-expanded-change",{detail:{itemId:e.id,expanded:s,expandedIds:this.expandedIds},bubbles:!0,composed:!0})),void("app"!==this.sidebarType&&this.dispatchItemClick(e))}if(d)return this.closeOverlayMenus(),void this.showFlyout(e.id);if(this.closeOverlayMenus(),e.openPanel&&this.findPanel(e.openPanel))return this.dispatchItemClick(e),void this.navigateToPanel(e.openPanel);this.dispatchItemClick(e)}}),c.addEventListener("db-child-click",e=>{const t=e.detail;this.dispatchItemClick(t.child)}),o.append(c),r&&void 0!==e.badge&&null!==e.badge&&""!==e.badge){const t=e.badgeColor||"primary",s=document.createElement("span");s.className=["designbase-wc-sidebar__collapsed-badge-dot",`designbase-wc-sidebar__collapsed-badge-dot--${t}`].join(" "),s.setAttribute("aria-hidden","true"),o.append(s)}if(r&&!a){const t=document.createElement("span");t.className="designbase-wc-sidebar__item-tooltip",t.textContent=e.label,t.setAttribute("role","tooltip"),o.append(t)}return d&&this.flyoutItemId===e.id&&o.append(this.createFlyout(e,t)),o}renderSectionList(e,t,s){const i=document.createDocumentFragment();return e.forEach(e=>{const a=document.createElement("div");if(a.className=["designbase-wc-sidebar__section",e.gap&&`designbase-wc-sidebar__section--gap-${e.gap}`].filter(Boolean).join(" "),!s&&e.title){const t=document.createElement("div");t.className="designbase-wc-sidebar__section-title",t.textContent=e.title,a.append(t)}const n=document.createElement("ul");n.className="designbase-wc-sidebar__nav-list",e.items.forEach(e=>n.append(this.createSidebarMenuItem(e,t))),a.append(n),i.append(a)}),i}renderNav(){const e=this.getAttribute("size")||"m",t=this.hasAttribute("collapsed"),s=this.querySelector('.designbase-wc-sidebar__nav[data-panel-nav="main"]');s&&s.replaceChildren(this.renderSectionList(this.parseSections(),e,t),this.createCustomNavSlot("nav"));const i=this.getActivePanelConfig(),a=this.querySelector('.designbase-wc-sidebar__nav[data-panel-nav="panel"]');a&&i&&a.replaceChildren(this.renderSectionList(i.sections,e,!1))}renderBottomNav(){const e=this.querySelector(".designbase-wc-sidebar__bottom-nav");if(!e)return;const t=this.getAttribute("size")||"m",s=this.hasAttribute("collapsed");e.replaceChildren(this.renderSectionList(this.parseBottomSections(),t,s))}createUserDropdown(i,a=!1){if(!i.length)return null;const n=this.getAttribute("position")||"left",r=document.createElement("div");r.className=["designbase-wc-sidebar__user-dropdown",a&&"designbase-wc-sidebar__user-dropdown--collapsed"].filter(Boolean).join(" "),r.setAttribute("role","menu"),r.setAttribute("aria-label","사용자 메뉴"),r.hidden=!this.userMenuOpen,r.addEventListener("keydown",e=>{"Escape"===e.key&&(e.stopPropagation(),this.userFlyoutItemId?this.setUserFlyout(null):(this.userMenuOpen=!1,this.render()))});const d=document.createElement("ul");return d.className="designbase-wc-sidebar__user-menu",i.forEach(i=>{const a=Boolean(i.children?.length),r=document.createElement("li");r.dataset.itemId=i.id,r.className=["designbase-wc-sidebar__user-menu-item",i.dividerBefore&&"designbase-wc-sidebar__user-menu-item--divider",i.disabled&&"designbase-wc-sidebar__user-menu-item--disabled",a&&"designbase-wc-sidebar__user-menu-item--has-children"].filter(Boolean).join(" ");const o=document.createElement("button");if(o.type="button",o.className="designbase-wc-sidebar__user-menu-trigger",o.setAttribute("role","menuitem"),o.disabled=Boolean(i.disabled),i.icon&&t(i.icon)){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-menu-icon",t.setAttribute("aria-hidden","true"),t.append(e(i.icon,16)),o.append(t)}const c=document.createElement("span");if(c.className="designbase-wc-sidebar__user-menu-label",c.textContent=i.label,o.append(c),i.value){const e=document.createElement("span");e.className="designbase-wc-sidebar__user-menu-value",e.textContent=i.value,o.append(e)}if(a){const a=document.createElement("span");a.className="designbase-wc-sidebar__user-menu-chevron",a.setAttribute("aria-hidden","true"),a.append(e("right"===n?"chevron-left":"chevron-right",16)),o.append(a),o.setAttribute("aria-haspopup","menu"),o.setAttribute("aria-expanded",String(this.userFlyoutItemId===i.id));const openFlyout=()=>this.setUserFlyout(i.id);r.addEventListener("mouseenter",openFlyout),r.addEventListener("mouseleave",()=>this.scheduleUserFlyoutClose()),r.addEventListener("focusin",openFlyout),r.addEventListener("focusout",e=>{const t=e.relatedTarget;t&&r.contains(t)||this.scheduleUserFlyoutClose()}),o.addEventListener("click",openFlyout);const d=document.createElement("div");d.className=["designbase-wc-sidebar__user-flyout","right"===n&&"designbase-wc-sidebar__user-flyout--align-left"].filter(Boolean).join(" "),d.setAttribute("role","menu"),d.setAttribute("aria-label",`${i.label} 하위 메뉴`),d.hidden=this.userFlyoutItemId!==i.id,d.addEventListener("mouseenter",()=>this.cancelUserFlyoutClose()),d.addEventListener("mouseleave",()=>this.scheduleUserFlyoutClose());const c=document.createElement("ul");c.className="designbase-wc-sidebar__user-flyout-list",(i.children||[]).forEach(i=>{const a=document.createElement("li");a.className="designbase-wc-sidebar__user-flyout-item";const n=document.createElement("button");if(n.type="button",n.className=["designbase-wc-sidebar__user-menu-trigger","designbase-wc-sidebar__user-flyout-trigger",i.selected&&"designbase-wc-sidebar__user-flyout-trigger--selected"].filter(Boolean).join(" "),n.setAttribute("role","menuitemradio"),n.setAttribute("aria-checked",String(Boolean(i.selected))),n.disabled=Boolean(i.disabled),i.icon&&t(i.icon)){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-menu-icon",t.setAttribute("aria-hidden","true"),t.append(e(i.icon,16)),n.append(t)}const r=document.createElement("span");if(r.className="designbase-wc-sidebar__user-menu-label",r.textContent=i.label,n.append(r),i.selected){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-menu-check",t.setAttribute("aria-hidden","true"),t.append(e("done",16)),n.append(t)}n.addEventListener("click",()=>{if(i.disabled)return;this.userFlyoutItemId=null,this.userMenuOpen=!1,this.dispatchUserMenuItemClick(i);const e=s(i.href,"");e&&window.location.assign(e),this.render()}),a.append(n),c.append(a)}),d.append(c),r.append(o,d)}else o.addEventListener("click",()=>{if(i.disabled)return;this.userFlyoutItemId=null,this.userMenuOpen=!1,this.dispatchUserMenuItemClick(i);const e=s(i.href,"");e&&window.location.assign(e),this.render()}),r.append(o);d.append(r)}),r.append(d),r}createUpdateBanner(e){if("back"===this.headerType)return null;const t=this.parseUpdateBanner();if(!t)return null;if(e)return null;const i=document.createElement("div");i.className="designbase-wc-sidebar__update";const a=document.createElement("db-banner");return a.className="designbase-wc-sidebar__update-banner",a.setAttribute("size","s"),a.setAttribute("variant",t.variant||"outline"),a.setAttribute("title",t.title),t.description&&a.setAttribute("description",t.description),t.icon&&a.setAttribute("icon",t.icon),a.setAttribute("clickable",""),a.setAttribute("aria-label",t.ctaLabel||t.title),a.addEventListener("db-click",()=>{const e=s(t.ctaHref,"");e&&window.location.assign(e),this.dispatchUpdateCtaClick(t)}),i.append(a),i}createPromoBanner(i){if("back"===this.headerType)return null;const a=this.parsePromoBanner();if(!a)return null;if(i){const s=document.createElement("button");s.type="button",s.className="designbase-wc-sidebar__promo-collapsed",s.setAttribute("aria-label",a.ctaLabel||a.title);const i=document.createElement("db-animation-background");i.className="designbase-wc-sidebar__promo-bg",i.setAttribute("type","aurora"),i.setAttribute("theme","light"),i.setAttribute("intensity","subtle"),i.setAttribute("blur","40"),i.setAttribute("speed","4000"),i.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8"])),s.append(i),s.append(e(a.icon&&t(a.icon)?a.icon:"sparkle",18)),s.addEventListener("click",()=>this.dispatchPromoCtaClick(a));const n=document.createElement("span");n.className="designbase-wc-sidebar__item-tooltip",n.textContent=a.title,n.setAttribute("role","tooltip");const r=document.createElement("div");return r.className="designbase-wc-sidebar__promo-collapsed-wrap",r.append(s,n),r}const n=document.createElement("div");n.className="designbase-wc-sidebar__promo";const r=document.createElement("db-animation-background");r.className="designbase-wc-sidebar__promo-bg",r.setAttribute("type","aurora"),r.setAttribute("theme","light"),r.setAttribute("intensity","subtle"),r.setAttribute("blur","60"),r.setAttribute("speed","5000"),r.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8","#bfdbfe"])),n.append(r);const d=document.createElement("div");d.className="designbase-wc-sidebar__promo-content";const o=document.createElement("div");o.className="designbase-wc-sidebar__promo-title-row";const c=document.createElement("span");c.className="designbase-wc-sidebar__promo-icon",c.setAttribute("aria-hidden","true"),c.append(e(a.icon&&t(a.icon)?a.icon:"sparkle",16));const l=document.createElement("div");if(l.className="designbase-wc-sidebar__promo-title",l.textContent=a.title,o.append(c,l),d.append(o),a.description){const e=document.createElement("div");e.className="designbase-wc-sidebar__promo-desc",e.textContent=a.description,d.append(e)}if(a.ctaLabel){const e=document.createElement("db-button");e.className="designbase-wc-sidebar__promo-action",e.setAttribute("variant","secondary"),e.setAttribute("size","s"),e.setAttribute("full-width",""),e.textContent=a.ctaLabel,e.addEventListener("db-click",()=>{const e=s(a.ctaHref,"");e&&window.location.assign(e),this.dispatchPromoCtaClick(a)}),d.append(e)}return n.append(d),n}createMainHeader(t){const{size:s,collapsible:i,showLogo:a,collapsed:n}=t,r="back"===this.headerType,d="l"===s?"m":"s"===s?"xs":"s";if(!r&&!i&&(!a||n))return null;const o=document.createElement("div");if(o.className=["designbase-wc-sidebar__header",(n||!a)&&!r&&"designbase-wc-sidebar__header--collapsed-only",r&&"designbase-wc-sidebar__header--back"].filter(Boolean).join(" "),r){const t=document.createElement("button");if(t.type="button",t.className=["designbase-wc-sidebar__back",n&&"designbase-wc-sidebar__back--collapsed"].filter(Boolean).join(" "),t.setAttribute("aria-label",this.backLabel),t.append(e("chevron-left",18)),!n){const e=document.createElement("span");e.textContent=this.backLabel,t.append(e)}t.addEventListener("click",()=>this.dispatchBackClick()),o.append(t)}else if(!n&&a){const e=document.createElement("div");e.className="designbase-wc-sidebar__logo";const t=this.getAttribute("logo-type")||"designbase",s=this.getAttribute("logo-text")||"",i=this.getAttribute("logo-src");if(i){const t=document.createElement("db-logo");t.setAttribute("type","custom"),t.setAttribute("src",i),t.setAttribute("alt",this.getAttribute("logo-alt")||"홈"),t.setAttribute("size",d),e.append(t)}else if("custom"===t&&s){const t=document.createElement("span");t.className="designbase-wc-sidebar__logo-text",t.textContent=s,e.append(t)}else{const i=document.createElement("db-logo");i.setAttribute("type",t),i.setAttribute("size",d),s&&i.setAttribute("text",s),e.append(i)}e.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),o.append(e)}if(i&&!r){const e=document.createElement("db-button");e.className="designbase-wc-sidebar__toggle",e.setAttribute("variant","tertiary"),e.setAttribute("size","s"),e.setAttribute("icon-only",""),e.setAttribute("start-icon",n?"arrow-bar-right":"arrow-bar-left"),e.setAttribute("aria-label",n?"사이드바 펼치기":"사이드바 접기"),e.addEventListener("db-click",()=>{const e=!this.hasAttribute("collapsed");e?this.setAttribute("collapsed",""):this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("db-toggle",{bubbles:!0,composed:!0,detail:{collapsed:e}}))}),o.append(e)}return o}createPanelHeader(t){const s="replace"===this.resolvedPanelMode,i=document.createElement("div");if(i.className=["designbase-wc-sidebar__panel-header",s&&"designbase-wc-sidebar__panel-header--replace"].filter(Boolean).join(" "),s){const s=document.createElement("button");s.type="button",s.className="designbase-wc-sidebar__panel-back",s.setAttribute("aria-label",t.backLabel||this.backLabel),s.append(e("chevron-left",18)),s.addEventListener("click",()=>this.dispatchBackClick()),i.append(s)}const a=document.createElement("div");a.className="designbase-wc-sidebar__panel-heading";const n=document.createElement("div");if(n.className="designbase-wc-sidebar__panel-title",n.textContent=t.title,a.append(n),t.description){const e=document.createElement("div");e.className="designbase-wc-sidebar__panel-description",e.textContent=t.description,a.append(e)}return i.append(a),i}createNavWrapper(e){const{mode:t,collapsed:s,includeProjects:i,includeBottom:a,panel:n}=e,r=document.createElement("div");if(r.className="designbase-wc-sidebar__nav-wrapper",i){const e=this.createProjectSelector(s);e&&r.append(e)}"main"===t&&r.append(this.createCustomNavSlot("nav-top"));const d=document.createElement("nav");if(d.className="designbase-wc-sidebar__nav",d.setAttribute("data-panel-nav",t),n&&(d.dataset.panelId=n.id),d.setAttribute("aria-label",n?.ariaLabel||n?.title||"주 메뉴"),r.append(d),"main"===t&&r.append(this.createCustomNavSlot("nav-bottom")),a){const e=document.createElement("nav");e.className="designbase-wc-sidebar__bottom-nav",e.setAttribute("aria-label","하단 메뉴"),r.append(e)}return r}createFooter(t){const{collapsed:s,userProfile:i,userMenuItems:a}=t,n=document.createElement("div");n.className="designbase-wc-sidebar__footer";const r=this.createUpdateBanner(s);r&&n.append(r);const d=this.createPromoBanner(s);if(d&&n.append(d),i&&!s){const t=document.createElement("div");t.className="designbase-wc-sidebar__user";const s=this.createUserDropdown(a);s&&t.append(s);const r=document.createElement("div");r.className="designbase-wc-sidebar__user-info",r.setAttribute("role","button"),r.setAttribute("tabindex","0"),r.setAttribute("aria-expanded",String(this.userMenuOpen));const d=document.createElement("db-avatar");d.className="designbase-wc-sidebar__user-avatar",d.setAttribute("size","s"),d.setAttribute("initials",i.name),d.setAttribute("alt",i.name),i.avatar&&d.setAttribute("src",i.avatar);const o=document.createElement("div");o.className="designbase-wc-sidebar__user-details";const c=document.createElement("div");if(c.className="designbase-wc-sidebar__user-name",c.textContent=i.name,o.append(c),i.email){const e=document.createElement("div");e.className="designbase-wc-sidebar__user-email",e.textContent=i.email,o.append(e)}if(r.append(d,o),a.length){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-more",t.setAttribute("aria-hidden","true"),t.append(e("more-vertical",16)),r.append(t),r.setAttribute("aria-haspopup","menu")}r.addEventListener("click",()=>{a.length&&(this.userMenuOpen=!this.userMenuOpen,this.userFlyoutItemId=null,this.cancelUserFlyoutClose(),this.projectMenuOpen=!1,this.render())}),r.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),r.click())}),t.append(r),n.append(t)}else if(i&&s){const e=document.createElement("div");e.className=["designbase-wc-sidebar__user-collapsed",this.userMenuOpen&&"designbase-wc-sidebar__user-collapsed--open"].filter(Boolean).join(" "),e.setAttribute("role","button"),e.setAttribute("tabindex","0"),e.setAttribute("aria-label",i.name),e.setAttribute("aria-expanded",String(this.userMenuOpen)),a.length&&e.setAttribute("aria-haspopup","menu");const t=document.createElement("db-avatar");if(t.className="designbase-wc-sidebar__user-avatar-collapsed",t.setAttribute("size","s"),t.setAttribute("initials",i.name),t.setAttribute("alt",i.name),i.avatar&&t.setAttribute("src",i.avatar),e.append(t),!this.userMenuOpen){const t=document.createElement("span");t.className="designbase-wc-sidebar__item-tooltip",t.textContent=i.name,t.setAttribute("role","tooltip"),e.append(t)}const s=this.createUserDropdown(a,!0);s&&e.append(s),e.addEventListener("click",e=>{a.length&&(e.target.closest(".designbase-wc-sidebar__user-dropdown")||(this.userMenuOpen=!this.userMenuOpen,this.userFlyoutItemId=null,this.cancelUserFlyoutClose(),this.projectMenuOpen=!1,this.render()))}),e.addEventListener("keydown",t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),e.click())}),n.append(e)}return n}render(){const e=this.getActivePanelConfig();this.syncHostClasses(),this.setAttribute("role","complementary"),this.setAttribute("aria-label","사이드바 네비게이션");const t=this.getAttribute("size")||"m",s="false"!==(this.getAttribute("collapsible")??("app"===this.sidebarType?"true":"false")),i="false"!==(this.getAttribute("show-logo")??("app"===this.sidebarType?"true":"false")),a=this.hasAttribute("collapsed"),n=this.parseUserProfile(),r=this.parseUserMenuItems(),d=this.parseBottomSections(),o=this.collectCustomNavSlots(),c=Boolean(e),l="replace"===this.resolvedPanelMode;this.replaceChildren();const u=document.createElement("div");u.className="designbase-wc-sidebar__container";const b=document.createElement("div");b.className="designbase-wc-sidebar__panel-viewport";const p=document.createElement("div");p.className="designbase-wc-sidebar__panel-track",p.dataset.active=c&&l?"main":c?"panel":"main";const m=document.createElement("div");m.className=["designbase-wc-sidebar__panel-slide","designbase-wc-sidebar__panel-slide--main"].join(" "),m.dataset.panel="main";const h=c&&l;m.toggleAttribute("inert",h),m.setAttribute("aria-hidden",String(h));const g=this.createMainHeader({size:t,collapsible:s,showLogo:i,collapsed:a});if(g&&m.append(g),m.append(this.createNavWrapper({mode:"main",collapsed:a,includeProjects:"back"!==this.headerType,includeBottom:d.length>0})),m.append(this.createFooter({collapsed:a,userProfile:n,userMenuItems:r})),p.append(m),e){const t=document.createElement("div");t.className=["designbase-wc-sidebar__panel-slide","designbase-wc-sidebar__panel-slide--secondary"].join(" "),t.dataset.panel=e.id,t.setAttribute("aria-hidden","false"),t.append(this.createPanelHeader(e)),t.append(this.createNavWrapper({mode:"panel",collapsed:!1,includeProjects:!1,includeBottom:!1,panel:e})),p.append(t)}b.append(p),u.append(b),this.append(u),this.renderNav(),this.renderBottomNav(),this.projectCustomNavSlots(o),c&&l&&requestAnimationFrame(()=>{this.isConnected&&this.activePanel===e?.id&&(p.dataset.active="panel")})}}customElements.get("db-sidebar")||customElements.define("db-sidebar",DbSidebar);export{DbSidebar};
+import{dbFormat as e,dbText as t}from"../core/i18n.js";import{createDbIcon as s,isDbIconName as i}from"./db-icons.js";import{sanitizeHref as a}from"../core/safe-url.js";import{SIDEBAR_CUSTOM_NAV_SLOTS as n,SIDEBAR_PANEL_MODES as r,SIDEBAR_TYPES as o,SIDEBAR_SIZES as d,SIDEBAR_THEMES as c,SIDEBAR_POSITIONS as l,SIDEBAR_VARIANTS as u}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const b="240px";class DbSidebar extends HTMLElement{constructor(){super(...arguments),this.expandedItems=new Set,this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.userFlyoutItemId=null,this.flyoutCloseTimer=null,this.userFlyoutCloseTimer=null,this.outsideHandler=null,this.panelMediaQuery=null,this.panelMediaHandler=null,this.resolvedPanelMode="adjacent"}collectCustomNavSlots(){const e=new Map;return n.forEach(t=>{const s=Array.from(this.children).filter(e=>e instanceof HTMLElement&&e.getAttribute("slot")===t),i=Array.from(this.querySelectorAll(`[data-sidebar-slot="${t}"]`)).flatMap(e=>Array.from(e.children).filter(e=>e instanceof HTMLElement&&e.getAttribute("slot")===t));e.set(t,[...new Set([...s,...i])])}),e}createCustomNavSlot(e){const t=document.createElement("div");return t.className=["designbase-wc-sidebar__custom-slot",`designbase-wc-sidebar__custom-slot--${e}`].join(" "),t.dataset.sidebarSlot=e,t}projectCustomNavSlots(e){n.forEach(t=>{const s=this.querySelector(`[data-sidebar-slot="${t}"]`),i=e.get(t)??[];s&&0!==i.length?s.append(...i):s?.remove()})}static get observedAttributes(){return["type","logo-src","logo-alt","items","sections","user-menu-items","user-profile","default-expanded-ids","expanded-ids","accordion-mode","projects","selected-project-id","project-manage-label","project-manage-href","project-section-label","project-empty-label","project-empty-trigger-label","bottom-items","bottom-sections","promo-banner","update-banner","header-type","back-label","back-href","panels","settings-sections","active-panel","panel-mode","panel-width","panel-breakpoint","size","theme","variant","position","collapsed","collapsible","show-logo","logo-type","logo-text","full-height","shadow"]}connectedCallback(){this.seedExpanded(),this.bindPanelMediaQuery(),this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick(),this.unbindPanelMediaQuery(),this.cancelFlyoutClose(),this.cancelUserFlyoutClose()}attributeChangedCallback(e,t,s){if(this.isConnected&&t!==s){if("default-expanded-ids"===e||"expanded-ids"===e||"accordion-mode"===e)return this.seedExpanded(),void this.syncAccordionState();if("collapsed"===e&&this.hasAttribute("collapsed")&&(this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.userFlyoutItemId=null,this.cancelFlyoutClose(),this.cancelUserFlyoutClose()),"panel-mode"!==e&&"panel-breakpoint"!==e||this.bindPanelMediaQuery(),this.render(),"active-panel"===e){const e=this.getActivePanelConfig();this.dispatchEvent(new CustomEvent("db-panel-change",{bubbles:!0,composed:!0,detail:{panel:e?.id??"main",panelConfig:e,mode:this.resolvedPanelMode}}))}}}bindPanelMediaQuery(){this.unbindPanelMediaQuery();const e=this.panelMode;if("auto"!==e)return void(this.resolvedPanelMode=e);if("undefined"==typeof window||"function"!=typeof window.matchMedia)return void(this.resolvedPanelMode="adjacent");const t=window.matchMedia(`(min-width: ${this.panelBreakpoint}px)`);this.panelMediaQuery=t,this.resolvedPanelMode=t.matches?"adjacent":"replace",this.panelMediaHandler=e=>{const t=e.matches?"adjacent":"replace";t!==this.resolvedPanelMode&&(this.resolvedPanelMode=t,this.render(),this.dispatchEvent(new CustomEvent("db-panel-mode-change",{bubbles:!0,composed:!0,detail:{mode:t}})))},t.addEventListener("change",this.panelMediaHandler)}unbindPanelMediaQuery(){this.panelMediaQuery&&this.panelMediaHandler&&this.panelMediaQuery.removeEventListener("change",this.panelMediaHandler),this.panelMediaQuery=null,this.panelMediaHandler=null}seedExpanded(){try{const e=JSON.parse(this.getAttribute("expanded-ids")??this.getAttribute("default-expanded-ids")??"[]"),t=Array.isArray(e)?[...new Set(e.filter(e=>"string"==typeof e))]:[];this.expandedItems=new Set("single"===this.accordionMode?t.slice(0,1):t)}catch{this.expandedItems=new Set}}get expandedIds(){return[...this.expandedItems]}set expandedIds(e){this.setAttribute("expanded-ids","string"==typeof e?e:JSON.stringify(e)),this.isConnected||this.seedExpanded()}get accordionMode(){return"multiple"===this.getAttribute("accordion-mode")?"multiple":"single"}set accordionMode(e){this.setAttribute("accordion-mode",e)}get hideExpandIcon(){return this.hasAttribute("hide-expand-icon")&&"false"!==this.getAttribute("hide-expand-icon")}set hideExpandIcon(e){this.toggleAttribute("hide-expand-icon",e)}get showDepthGuide(){return this.hasAttribute("show-depth-guide")&&"false"!==this.getAttribute("show-depth-guide")}set showDepthGuide(e){this.toggleAttribute("show-depth-guide",e)}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get sections(){return this.parseSections()}set sections(e){this.setAttribute("sections","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseUserMenuItems()}set userMenuItems(e){this.setAttribute("user-menu-items","string"==typeof e?e:JSON.stringify(e))}get userProfile(){return this.parseUserProfile()}set userProfile(e){null==e?this.removeAttribute("user-profile"):this.setAttribute("user-profile","string"==typeof e?e:JSON.stringify(e))}get projects(){return this.parseProjects()}set projects(e){this.setAttribute("projects","string"==typeof e?e:JSON.stringify(e))}get selectedProjectId(){return this.getAttribute("selected-project-id")||""}set selectedProjectId(e){e?this.setAttribute("selected-project-id",e):this.removeAttribute("selected-project-id")}get projectManageLabel(){return this.getAttribute("project-manage-label")||"프로젝트 관리"}set projectManageLabel(e){this.setAttribute("project-manage-label",e)}get projectManageHref(){return this.getAttribute("project-manage-href")||""}set projectManageHref(e){e?this.setAttribute("project-manage-href",e):this.removeAttribute("project-manage-href")}get projectSectionLabel(){return this.getAttribute("project-section-label")||"프로젝트"}set projectSectionLabel(e){this.setAttribute("project-section-label",e)}get projectEmptyLabel(){return this.getAttribute("project-empty-label")||"프로젝트를 추가해 주세요"}set projectEmptyLabel(e){this.setAttribute("project-empty-label",e)}get projectEmptyTriggerLabel(){return this.getAttribute("project-empty-trigger-label")||"프로젝트 추가"}set projectEmptyTriggerLabel(e){this.setAttribute("project-empty-trigger-label",e)}get bottomItems(){return this.parseBottomItems()}set bottomItems(e){this.setAttribute("bottom-items","string"==typeof e?e:JSON.stringify(e))}get bottomSections(){return this.parseBottomSections()}set bottomSections(e){this.setAttribute("bottom-sections","string"==typeof e?e:JSON.stringify(e))}get promoBanner(){return this.parsePromoBanner()}set promoBanner(e){null==e?this.removeAttribute("promo-banner"):this.setAttribute("promo-banner","string"==typeof e?e:JSON.stringify(e))}get updateBanner(){return this.parseUpdateBanner()}set updateBanner(e){null==e?this.removeAttribute("update-banner"):this.setAttribute("update-banner","string"==typeof e?e:JSON.stringify(e))}get headerType(){return"back"===this.getAttribute("header-type")?"back":"default"}set headerType(e){this.setAttribute("header-type",e)}get backLabel(){return this.getAttribute("back-label")||"뒤로가기"}set backLabel(e){this.setAttribute("back-label",e)}get backHref(){return this.getAttribute("back-href")||""}set backHref(e){e?this.setAttribute("back-href",e):this.removeAttribute("back-href")}get panels(){return this.parsePanels()}set panels(e){this.setAttribute("panels","string"==typeof e?e:JSON.stringify(e))}get settingsSections(){return this.parseSettingsSections()}set settingsSections(e){this.setAttribute("settings-sections","string"==typeof e?e:JSON.stringify(e))}get activePanel(){const e=this.getAttribute("active-panel")||"main";return"main"===e?"main":this.findPanel(e)?e:"main"}set activePanel(e){const t=e&&"main"!==e&&this.findPanel(e)?e:"main";this.setAttribute("active-panel",t)}get panelMode(){const e=this.getAttribute("panel-mode")||"auto";return r.includes(e)?e:"auto"}set panelMode(e){this.setAttribute("panel-mode",r.includes(e)?e:"auto")}get panelWidth(){return this.normalizeCssLength(this.getAttribute("panel-width")||b)}set panelWidth(e){this.setAttribute("panel-width",this.normalizeCssLength(e))}get panelBreakpoint(){const e=Number(this.getAttribute("panel-breakpoint"));return Number.isFinite(e)&&e>0?e:1024}set panelBreakpoint(e){const t=Number.isFinite(e)&&e>0?Math.round(e):1024;this.setAttribute("panel-breakpoint",String(t))}normalizeCssLength(e){if("number"==typeof e)return`${Math.max(0,e)}px`;const t=String(e??"").trim();return t?/^-?\d+(?:\.\d+)?$/.test(t)?`${Math.max(0,Number(t))}px`:t:b}parseSettingsSections(){try{const e=JSON.parse(this.getAttribute("settings-sections")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parsePanels(){let e=[];const t=this.getAttribute("panels");if(t)try{const s=JSON.parse(t);Array.isArray(s)&&(e=s.filter(e=>Boolean(e&&"string"==typeof e.id&&e.id.trim())).map(e=>({...e,id:e.id.trim(),title:String(e.title||e.id).trim(),sections:Array.isArray(e.sections)?e.sections:[]})))}catch{e=[]}const s=this.parseSettingsSections();return s.length&&!e.some(e=>"settings"===e.id)&&e.push({id:"settings",title:"Settings",backLabel:this.backLabel,sections:s}),e}hasPanels(){return this.parsePanels().length>0}findPanel(e){return e&&"main"!==e?this.parsePanels().find(t=>t.id===e)??null:null}getActivePanelConfig(){return this.findPanel(this.getAttribute("active-panel")||"main")}parseSections(){const e=this.getAttribute("sections");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length)return t}catch{}try{const e=JSON.parse(this.getAttribute("items")||"[]");return[{id:"main",items:Array.isArray(e)?e:[]}]}catch{return[{id:"main",items:[]}]}}parseUserMenuItems(){try{const e=JSON.parse(this.getAttribute("user-menu-items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}parseProjects(){try{const e=JSON.parse(this.getAttribute("projects")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBottomItems(){try{const e=JSON.parse(this.getAttribute("bottom-items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBottomSections(){const e=this.getAttribute("bottom-sections");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length)return t}catch{}const t=this.parseBottomItems();return t.length?[{id:"bottom",items:t}]:[]}parsePromoBanner(){const e=this.getAttribute("promo-banner");if(!e)return null;try{return JSON.parse(e)}catch{return null}}parseUpdateBanner(){const e=this.getAttribute("update-banner");if(!e)return null;try{return JSON.parse(e)}catch{return null}}getSelectedProject(){const e=this.parseProjects();if(!e.length)return null;const t=this.selectedProjectId;return e.find(e=>e.id===t)||e[0]}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{const t=e.target;if(this.contains(t))return;let s=!1;this.userMenuOpen&&(this.userMenuOpen=!1,this.userFlyoutItemId=null,s=!0),this.projectMenuOpen&&(this.projectMenuOpen=!1,s=!0),s&&this.render()},document.addEventListener("mousedown",this.outsideHandler))}closeOverlayMenus(){const e=this.projectMenuOpen,t=this.userMenuOpen;if(!e&&!t)return!1;this.projectMenuOpen=!1,this.userMenuOpen=!1,this.userFlyoutItemId=null,this.cancelUserFlyoutClose(),this.classList.remove("designbase-wc-sidebar--user-menu-open"),this.querySelector(".designbase-wc-sidebar__project-dropdown")?.remove(),this.querySelector(".designbase-wc-sidebar__project-selector")?.classList.remove("designbase-wc-sidebar__project-selector--open");const s=this.querySelector(".designbase-wc-sidebar__project-trigger");s?.setAttribute("aria-expanded","false");const i=this.querySelector(".designbase-wc-sidebar__user-dropdown");return i&&(i.hidden=!0),this.querySelector(".designbase-wc-sidebar__user-info")?.setAttribute("aria-expanded","false"),this.querySelector(".designbase-wc-sidebar__user-collapsed")?.setAttribute("aria-expanded","false"),this.querySelector(".designbase-wc-sidebar__user-collapsed")?.classList.remove("designbase-wc-sidebar__user-collapsed--open"),!0}syncAccordionState(){[...Array.from(this.querySelectorAll(".designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item")),...Array.from(this.querySelectorAll(".designbase-wc-sidebar__bottom-nav .designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item"))].forEach(e=>{const t=e.getAttribute("data-item-id");t&&(this.expandedItems.has(t)?e.setAttribute("expanded",""):e.removeAttribute("expanded"))})}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}cancelFlyoutClose(){this.flyoutCloseTimer&&(clearTimeout(this.flyoutCloseTimer),this.flyoutCloseTimer=null)}showFlyout(e){this.cancelFlyoutClose(),this.flyoutItemId!==e&&(this.flyoutItemId=e,this.renderNav(),this.renderBottomNav())}scheduleFlyoutClose(){this.cancelFlyoutClose(),this.flyoutCloseTimer=setTimeout(()=>{this.flyoutCloseTimer=null,this.flyoutItemId=null,this.renderNav(),this.renderBottomNav()},120)}cancelUserFlyoutClose(){this.userFlyoutCloseTimer&&(clearTimeout(this.userFlyoutCloseTimer),this.userFlyoutCloseTimer=null)}setUserFlyout(e){this.cancelUserFlyoutClose(),this.userFlyoutItemId=e,this.querySelectorAll(".designbase-wc-sidebar__user-menu-item").forEach(t=>{const s=Boolean(e&&t.dataset.itemId===e);t.classList.toggle("designbase-wc-sidebar__user-menu-item--flyout-active",s),t.querySelector(".designbase-wc-sidebar__user-menu-trigger")?.setAttribute("aria-expanded",String(s));const i=t.querySelector(".designbase-wc-sidebar__user-flyout");i&&(i.hidden=!s)})}scheduleUserFlyoutClose(){this.cancelUserFlyoutClose(),this.userFlyoutCloseTimer=setTimeout(()=>{this.userFlyoutCloseTimer=null,this.setUserFlyout(null)},120)}get sidebarType(){const e=this.getAttribute("type");return o.find(t=>t===e)||"app"}syncHostClasses(){const e=this.getAttribute("size")||"m",t=this.getAttribute("theme")||"default",s=this.getAttribute("variant")||"default",i=this.getAttribute("position")||"left",a=this.getActivePanelConfig(),n=Boolean(a),r=this.panelWidth;this.style.setProperty("--db-sidebar-panel-width",r),this.className=["designbase-wc-sidebar",`designbase-wc-sidebar--type-${this.sidebarType}`,`designbase-wc-sidebar--${d.includes(e)?e:"m"}`,`designbase-wc-sidebar--${c.includes(t)?t:"default"}`,`designbase-wc-sidebar--${l.includes(i)?i:"left"}`,`designbase-wc-sidebar--panel-${this.resolvedPanelMode}`,u.includes(s)&&"wrapper"===s&&"designbase-wc-sidebar--wrapper",this.hasAttribute("collapsed")&&"designbase-wc-sidebar--collapsed",this.hasAttribute("full-height")&&"designbase-wc-sidebar--full-height",this.hasAttribute("shadow")&&"designbase-wc-sidebar--shadow",this.userMenuOpen&&"designbase-wc-sidebar--user-menu-open",("back"===this.headerType||n&&"replace"===this.resolvedPanelMode)&&"designbase-wc-sidebar--header-back",n&&"designbase-wc-sidebar--panel-open",this.hasPanels()&&"designbase-wc-sidebar--has-panels"].filter(Boolean).join(" ")}navigateToPanel(e){const t="main"!==e&&e?this.findPanel(e)?.id:"main";t&&this.activePanel!==t&&("main"!==t&&"replace"===this.resolvedPanelMode&&this.hasAttribute("collapsed")&&this.removeAttribute("collapsed"),this.setAttribute("active-panel",t))}dispatchItemClick(e){this.dispatchEvent(new CustomEvent("db-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}dispatchUserMenuItemClick(e){this.dispatchEvent(new CustomEvent("db-user-menu-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}dispatchBackClick(){const e=this.getActivePanelConfig();e&&this.navigateToPanel("main");const t=new CustomEvent("db-back-click",{bubbles:!0,composed:!0,cancelable:!0,detail:{label:e?.backLabel||this.backLabel,href:this.backHref,panel:e}});this.dispatchEvent(t);const s=a(this.backHref,"");t.defaultPrevented||e||!s||"back"!==this.headerType||window.location.assign(s)}dispatchProjectChange(e){this.dispatchEvent(new CustomEvent("db-project-change",{bubbles:!0,composed:!0,detail:{project:e}}))}dispatchProjectManage(){this.dispatchEvent(new CustomEvent("db-project-manage",{bubbles:!0,composed:!0,detail:{}}))}dispatchPromoCtaClick(e){this.dispatchEvent(new CustomEvent("db-promo-cta-click",{bubbles:!0,composed:!0,detail:{banner:e}}))}dispatchUpdateCtaClick(e){this.dispatchEvent(new CustomEvent("db-update-cta-click",{bubbles:!0,composed:!0,detail:{banner:e}}))}createProjectAvatar(e,t="s"){const s=document.createElement("db-avatar");if(s.className="designbase-wc-sidebar__project-avatar",s.setAttribute("size",t),s.setAttribute("initials",(e.label||"?").trim()),s.setAttribute("alt",e.label),e.color){const applyColor=()=>{const t=s.querySelector(".designbase-wc-avatar__initials");return!!t&&(t.style.backgroundColor=e.color,t.style.color="#fff",!0)},t=new MutationObserver(()=>{applyColor()&&t.disconnect()});t.observe(s,{childList:!0,subtree:!0}),queueMicrotask(()=>{applyColor()&&t.disconnect()})}return s}createProjectEmptyMark(e="s"){const t=document.createElement("span");return t.className=["designbase-wc-sidebar__project-mark",`designbase-wc-sidebar__project-mark--${e}`,"designbase-wc-sidebar__project-mark--empty"].join(" "),t.setAttribute("aria-hidden","true"),t.append(s("plus","m"===e?16:14)),t}createProjectBadge(e){if(!e.badge)return null;const t=document.createElement("db-badge");return t.className="designbase-wc-sidebar__project-badge",t.setAttribute("size","s"),t.setAttribute("variant",e.badgeColor||"warning"),t.setAttribute("type","text"),t.textContent=e.badge,t}createProjectSelector(e){if(!this.hasAttribute("projects"))return null;const t=this.parseProjects(),i=0===t.length,n=this.getSelectedProject(),r=document.createElement("div");r.className=["designbase-wc-sidebar__project-selector",e&&"designbase-wc-sidebar__project-selector--collapsed",this.projectMenuOpen&&"designbase-wc-sidebar__project-selector--open",i&&"designbase-wc-sidebar__project-selector--empty"].filter(Boolean).join(" ");const o=this.getAttribute("project-section-label");if(!e&&o&&o.trim()){const e=document.createElement("div");e.className="designbase-wc-sidebar__project-section-label",e.textContent=o.trim(),r.append(e)}const d=document.createElement("button");if(d.type="button",d.className="designbase-wc-sidebar__project-trigger",d.setAttribute("aria-haspopup","menu"),d.setAttribute("aria-expanded",String(this.projectMenuOpen)),i||!n){if(d.setAttribute("aria-label",this.projectEmptyTriggerLabel),d.append(this.createProjectEmptyMark(e?"m":"s")),!e){const e=document.createElement("span");e.className="designbase-wc-sidebar__project-label",e.textContent=this.projectEmptyTriggerLabel,d.append(e)}}else if(d.setAttribute("aria-label",n.label),d.append(this.createProjectAvatar(n,e?"m":"s")),!e){const e=document.createElement("span");e.className="designbase-wc-sidebar__project-label",e.textContent=n.label,d.append(e)}const c=document.createElement("span");if(c.className="designbase-wc-sidebar__project-chevron",c.setAttribute("aria-hidden","true"),c.append(s("chevron-down",14)),d.append(c),d.addEventListener("click",()=>{this.projectMenuOpen=!this.projectMenuOpen,this.userMenuOpen=!1,this.render()}),r.append(d),this.projectMenuOpen){const e=document.createElement("div");if(e.className="designbase-wc-sidebar__project-dropdown",e.setAttribute("role","menu"),e.setAttribute("aria-label",this.projectSectionLabel),i){const t=document.createElement("div");t.className="designbase-wc-sidebar__project-empty",t.setAttribute("role","presentation");const s=document.createElement("p");s.className="designbase-wc-sidebar__project-empty-text",s.textContent=this.projectEmptyLabel,t.append(s),e.append(t)}else{const s=document.createElement("ul");s.className="designbase-wc-sidebar__project-list",t.forEach(e=>{const t=document.createElement("li");t.className="designbase-wc-sidebar__project-option";const i=document.createElement("button");i.type="button",i.className=["designbase-wc-sidebar__project-option-btn",n&&e.id===n.id&&"designbase-wc-sidebar__project-option-btn--active"].filter(Boolean).join(" "),i.setAttribute("role","menuitem"),i.append(this.createProjectAvatar(e,"s"));const a=document.createElement("span");a.className="designbase-wc-sidebar__project-option-label",a.textContent=e.label,i.append(a);const r=this.createProjectBadge(e);r&&i.append(r),i.addEventListener("click",()=>{this.projectMenuOpen=!1,this.setAttribute("selected-project-id",e.id),this.dispatchProjectChange(e),this.render()}),t.append(i),s.append(t)}),e.append(s)}const o=document.createElement("button");o.type="button",o.className="designbase-wc-sidebar__project-manage",o.setAttribute("role","menuitem"),o.append(s("plus",14));const d=document.createElement("span");d.textContent=this.projectManageLabel,o.append(d),o.addEventListener("click",()=>{this.projectMenuOpen=!1;const e=this.projectManageHref,t=a(e,"");t&&window.location.assign(t),this.dispatchProjectManage(),this.render()}),e.append(o),r.append(e)}return r}createFlyout(t,s){const i=this.getAttribute("position")||"left",n=document.createElement("div");n.className=["designbase-wc-sidebar__flyout","right"===i&&"designbase-wc-sidebar__flyout--align-left"].filter(Boolean).join(" "),n.setAttribute("role","menu"),n.setAttribute("aria-label",e("{0} 하위 메뉴",[t.label])),n.addEventListener("mouseenter",()=>this.cancelFlyoutClose()),n.addEventListener("mouseleave",()=>this.scheduleFlyoutClose());const r=document.createElement("div");r.className="designbase-wc-sidebar__flyout-title",r.textContent=t.label,n.append(r);const o=document.createElement("ul");return o.className="designbase-wc-sidebar__flyout-list",(t.children||[]).forEach(e=>{const t=document.createElement("li");t.className="designbase-wc-sidebar__flyout-item";const i=document.createElement("db-menu-item");i.setAttribute("label",e.label),i.setAttribute("type","block"),i.setAttribute("menu-style","dropdown"),i.setAttribute("size",s);const n=a(e.href,"");n&&i.setAttribute("href",n),e.active&&i.setAttribute("active",""),e.disabled&&i.setAttribute("disabled",""),void 0!==e.badge&&i.setAttribute("badge",String(e.badge)),e.badgeColor&&i.setAttribute("badge-color",e.badgeColor),i.addEventListener("db-click",()=>{e.disabled||(this.flyoutItemId=null,this.dispatchItemClick(e),this.renderNav(),this.renderBottomNav())}),t.append(i),o.append(t)}),n.append(o),n}createSidebarMenuItem(e,t,s=0){const i=Boolean(e.children?.length),n=this.expandedItems.has(e.id),r=this.hasAttribute("collapsed"),o=r&&i,d=document.createElement("li");d.className=["designbase-wc-sidebar__item",o&&this.flyoutItemId===e.id&&"designbase-wc-sidebar__item--flyout-active"].filter(Boolean).join(" "),o&&(d.addEventListener("mouseenter",()=>this.showFlyout(e.id)),d.addEventListener("mouseleave",()=>this.scheduleFlyoutClose()));const c=document.createElement("db-menu-item");c.setAttribute("data-item-id",e.id),c.setAttribute("label",e.label),c.setAttribute("type","block"),c.setAttribute("menu-style","accordion"),c.setAttribute("size",t),c.setAttribute("depth",String(s));const l=a(e.href,"");if(l&&c.setAttribute("href",l),e.icon&&c.setAttribute("icon",e.icon),(e.active||e.openPanel&&e.openPanel===this.activePanel)&&c.setAttribute("active",""),e.disabled&&c.setAttribute("disabled",""),void 0!==e.badge&&c.setAttribute("badge",String(e.badge)),e.badgeColor&&c.setAttribute("badge-color",e.badgeColor),i&&!o&&(c.setAttribute("expandable",""),c.subItems=(e.children||[]).map(e=>({id:e.id,label:e.label,href:e.href,active:e.active,disabled:e.disabled,badge:e.badge,badgeColor:e.badgeColor,icon:e.icon})),n&&!r&&c.setAttribute("expanded","")),c.addEventListener("db-click",t=>{if(!e.disabled){if(i&&!r){const s=t.detail?.expanded??!this.expandedItems.has(e.id);return this.closeOverlayMenus(),s?("single"===this.accordionMode&&this.expandedItems.clear(),this.expandedItems.add(e.id)):this.expandedItems.delete(e.id),this.expandedIds=[...this.expandedItems],this.syncAccordionState(),this.dispatchEvent(new CustomEvent("db-expanded-change",{detail:{itemId:e.id,expanded:s,expandedIds:this.expandedIds},bubbles:!0,composed:!0})),void("app"!==this.sidebarType&&this.dispatchItemClick(e))}if(o)return this.closeOverlayMenus(),void this.showFlyout(e.id);if(this.closeOverlayMenus(),e.openPanel&&this.findPanel(e.openPanel))return this.dispatchItemClick(e),void this.navigateToPanel(e.openPanel);this.dispatchItemClick(e)}}),c.addEventListener("db-child-click",e=>{const t=e.detail;this.dispatchItemClick(t.child)}),d.append(c),r&&void 0!==e.badge&&null!==e.badge&&""!==e.badge){const t=e.badgeColor||"primary",s=document.createElement("span");s.className=["designbase-wc-sidebar__collapsed-badge-dot",`designbase-wc-sidebar__collapsed-badge-dot--${t}`].join(" "),s.setAttribute("aria-hidden","true"),d.append(s)}if(r&&!i){const t=document.createElement("span");t.className="designbase-wc-sidebar__item-tooltip",t.textContent=e.label,t.setAttribute("role","tooltip"),d.append(t)}return o&&this.flyoutItemId===e.id&&d.append(this.createFlyout(e,t)),d}renderSectionList(e,t,s){const i=document.createDocumentFragment();return e.forEach(e=>{const a=document.createElement("div");if(a.className=["designbase-wc-sidebar__section",e.gap&&`designbase-wc-sidebar__section--gap-${e.gap}`].filter(Boolean).join(" "),!s&&e.title){const t=document.createElement("div");t.className="designbase-wc-sidebar__section-title",t.textContent=e.title,a.append(t)}const n=document.createElement("ul");n.className="designbase-wc-sidebar__nav-list",e.items.forEach(e=>n.append(this.createSidebarMenuItem(e,t))),a.append(n),i.append(a)}),i}renderNav(){const e=this.getAttribute("size")||"m",t=this.hasAttribute("collapsed"),s=this.querySelector('.designbase-wc-sidebar__nav[data-panel-nav="main"]');s&&s.replaceChildren(this.renderSectionList(this.parseSections(),e,t),this.createCustomNavSlot("nav"));const i=this.getActivePanelConfig(),a=this.querySelector('.designbase-wc-sidebar__nav[data-panel-nav="panel"]');a&&i&&a.replaceChildren(this.renderSectionList(i.sections,e,!1))}renderBottomNav(){const e=this.querySelector(".designbase-wc-sidebar__bottom-nav");if(!e)return;const t=this.getAttribute("size")||"m",s=this.hasAttribute("collapsed");e.replaceChildren(this.renderSectionList(this.parseBottomSections(),t,s))}createUserDropdown(n,r=!1){if(!n.length)return null;const o=this.getAttribute("position")||"left",d=document.createElement("div");d.className=["designbase-wc-sidebar__user-dropdown",r&&"designbase-wc-sidebar__user-dropdown--collapsed"].filter(Boolean).join(" "),d.setAttribute("role","menu"),d.setAttribute("aria-label",t("사용자 메뉴")),d.hidden=!this.userMenuOpen,d.addEventListener("keydown",e=>{"Escape"===e.key&&(e.stopPropagation(),this.userFlyoutItemId?this.setUserFlyout(null):(this.userMenuOpen=!1,this.render()))});const c=document.createElement("ul");return c.className="designbase-wc-sidebar__user-menu",n.forEach(t=>{const n=Boolean(t.children?.length),r=document.createElement("li");r.dataset.itemId=t.id,r.className=["designbase-wc-sidebar__user-menu-item",t.dividerBefore&&"designbase-wc-sidebar__user-menu-item--divider",t.disabled&&"designbase-wc-sidebar__user-menu-item--disabled",n&&"designbase-wc-sidebar__user-menu-item--has-children"].filter(Boolean).join(" ");const d=document.createElement("button");if(d.type="button",d.className="designbase-wc-sidebar__user-menu-trigger",d.setAttribute("role","menuitem"),d.disabled=Boolean(t.disabled),t.icon&&i(t.icon)){const e=document.createElement("span");e.className="designbase-wc-sidebar__user-menu-icon",e.setAttribute("aria-hidden","true"),e.append(s(t.icon,16)),d.append(e)}const l=document.createElement("span");if(l.className="designbase-wc-sidebar__user-menu-label",l.textContent=t.label,d.append(l),t.value){const e=document.createElement("span");e.className="designbase-wc-sidebar__user-menu-value",e.textContent=t.value,d.append(e)}if(n){const n=document.createElement("span");n.className="designbase-wc-sidebar__user-menu-chevron",n.setAttribute("aria-hidden","true"),n.append(s("right"===o?"chevron-left":"chevron-right",16)),d.append(n),d.setAttribute("aria-haspopup","menu"),d.setAttribute("aria-expanded",String(this.userFlyoutItemId===t.id));const openFlyout=()=>this.setUserFlyout(t.id);r.addEventListener("mouseenter",openFlyout),r.addEventListener("mouseleave",()=>this.scheduleUserFlyoutClose()),r.addEventListener("focusin",openFlyout),r.addEventListener("focusout",e=>{const t=e.relatedTarget;t&&r.contains(t)||this.scheduleUserFlyoutClose()}),d.addEventListener("click",openFlyout);const c=document.createElement("div");c.className=["designbase-wc-sidebar__user-flyout","right"===o&&"designbase-wc-sidebar__user-flyout--align-left"].filter(Boolean).join(" "),c.setAttribute("role","menu"),c.setAttribute("aria-label",e("{0} 하위 메뉴",[t.label])),c.hidden=this.userFlyoutItemId!==t.id,c.addEventListener("mouseenter",()=>this.cancelUserFlyoutClose()),c.addEventListener("mouseleave",()=>this.scheduleUserFlyoutClose());const l=document.createElement("ul");l.className="designbase-wc-sidebar__user-flyout-list",(t.children||[]).forEach(e=>{const t=document.createElement("li");t.className="designbase-wc-sidebar__user-flyout-item";const n=document.createElement("button");if(n.type="button",n.className=["designbase-wc-sidebar__user-menu-trigger","designbase-wc-sidebar__user-flyout-trigger",e.selected&&"designbase-wc-sidebar__user-flyout-trigger--selected"].filter(Boolean).join(" "),n.setAttribute("role","menuitemradio"),n.setAttribute("aria-checked",String(Boolean(e.selected))),n.disabled=Boolean(e.disabled),e.icon&&i(e.icon)){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-menu-icon",t.setAttribute("aria-hidden","true"),t.append(s(e.icon,16)),n.append(t)}const r=document.createElement("span");if(r.className="designbase-wc-sidebar__user-menu-label",r.textContent=e.label,n.append(r),e.selected){const e=document.createElement("span");e.className="designbase-wc-sidebar__user-menu-check",e.setAttribute("aria-hidden","true"),e.append(s("done",16)),n.append(e)}n.addEventListener("click",()=>{if(e.disabled)return;this.userFlyoutItemId=null,this.userMenuOpen=!1,this.dispatchUserMenuItemClick(e);const t=a(e.href,"");t&&window.location.assign(t),this.render()}),t.append(n),l.append(t)}),c.append(l),r.append(d,c)}else d.addEventListener("click",()=>{if(t.disabled)return;this.userFlyoutItemId=null,this.userMenuOpen=!1,this.dispatchUserMenuItemClick(t);const e=a(t.href,"");e&&window.location.assign(e),this.render()}),r.append(d);c.append(r)}),d.append(c),d}createUpdateBanner(e){if("back"===this.headerType)return null;const t=this.parseUpdateBanner();if(!t)return null;if(e)return null;const s=document.createElement("div");s.className="designbase-wc-sidebar__update";const i=document.createElement("db-banner");return i.className="designbase-wc-sidebar__update-banner",i.setAttribute("size","s"),i.setAttribute("variant",t.variant||"outline"),i.setAttribute("title",t.title),t.description&&i.setAttribute("description",t.description),t.icon&&i.setAttribute("icon",t.icon),i.setAttribute("clickable",""),i.setAttribute("aria-label",t.ctaLabel||t.title),i.addEventListener("db-click",()=>{const e=a(t.ctaHref,"");e&&window.location.assign(e),this.dispatchUpdateCtaClick(t)}),s.append(i),s}createPromoBanner(e){if("back"===this.headerType)return null;const t=this.parsePromoBanner();if(!t)return null;if(e){const e=document.createElement("button");e.type="button",e.className="designbase-wc-sidebar__promo-collapsed",e.setAttribute("aria-label",t.ctaLabel||t.title);const a=document.createElement("db-animation-background");a.className="designbase-wc-sidebar__promo-bg",a.setAttribute("type","aurora"),a.setAttribute("theme","light"),a.setAttribute("intensity","subtle"),a.setAttribute("blur","40"),a.setAttribute("speed","4000"),a.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8"])),e.append(a),e.append(s(t.icon&&i(t.icon)?t.icon:"sparkle",18)),e.addEventListener("click",()=>this.dispatchPromoCtaClick(t));const n=document.createElement("span");n.className="designbase-wc-sidebar__item-tooltip",n.textContent=t.title,n.setAttribute("role","tooltip");const r=document.createElement("div");return r.className="designbase-wc-sidebar__promo-collapsed-wrap",r.append(e,n),r}const n=document.createElement("div");n.className="designbase-wc-sidebar__promo";const r=document.createElement("db-animation-background");r.className="designbase-wc-sidebar__promo-bg",r.setAttribute("type","aurora"),r.setAttribute("theme","light"),r.setAttribute("intensity","subtle"),r.setAttribute("blur","60"),r.setAttribute("speed","5000"),r.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8","#bfdbfe"])),n.append(r);const o=document.createElement("div");o.className="designbase-wc-sidebar__promo-content";const d=document.createElement("div");d.className="designbase-wc-sidebar__promo-title-row";const c=document.createElement("span");c.className="designbase-wc-sidebar__promo-icon",c.setAttribute("aria-hidden","true"),c.append(s(t.icon&&i(t.icon)?t.icon:"sparkle",16));const l=document.createElement("div");if(l.className="designbase-wc-sidebar__promo-title",l.textContent=t.title,d.append(c,l),o.append(d),t.description){const e=document.createElement("div");e.className="designbase-wc-sidebar__promo-desc",e.textContent=t.description,o.append(e)}if(t.ctaLabel){const e=document.createElement("db-button");e.className="designbase-wc-sidebar__promo-action",e.setAttribute("variant","secondary"),e.setAttribute("size","s"),e.setAttribute("full-width",""),e.textContent=t.ctaLabel,e.addEventListener("db-click",()=>{const e=a(t.ctaHref,"");e&&window.location.assign(e),this.dispatchPromoCtaClick(t)}),o.append(e)}return n.append(o),n}createMainHeader(e){const{size:t,collapsible:i,showLogo:a,collapsed:n}=e,r="back"===this.headerType,o="l"===t?"m":"s"===t?"xs":"s";if(!r&&!i&&(!a||n))return null;const d=document.createElement("div");if(d.className=["designbase-wc-sidebar__header",(n||!a)&&!r&&"designbase-wc-sidebar__header--collapsed-only",r&&"designbase-wc-sidebar__header--back"].filter(Boolean).join(" "),r){const e=document.createElement("button");if(e.type="button",e.className=["designbase-wc-sidebar__back",n&&"designbase-wc-sidebar__back--collapsed"].filter(Boolean).join(" "),e.setAttribute("aria-label",this.backLabel),e.append(s("chevron-left",18)),!n){const t=document.createElement("span");t.textContent=this.backLabel,e.append(t)}e.addEventListener("click",()=>this.dispatchBackClick()),d.append(e)}else if(!n&&a){const e=document.createElement("div");e.className="designbase-wc-sidebar__logo";const t=this.getAttribute("logo-type")||"designbase",s=this.getAttribute("logo-text")||"",i=this.getAttribute("logo-src");if(i){const t=document.createElement("db-logo");t.setAttribute("type","custom"),t.setAttribute("src",i),t.setAttribute("alt",this.getAttribute("logo-alt")||"홈"),t.setAttribute("size",o),e.append(t)}else if("custom"===t&&s){const t=document.createElement("span");t.className="designbase-wc-sidebar__logo-text",t.textContent=s,e.append(t)}else{const i=document.createElement("db-logo");i.setAttribute("type",t),i.setAttribute("size",o),s&&i.setAttribute("text",s),e.append(i)}e.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),d.append(e)}if(i&&!r){const e=document.createElement("db-button");e.className="designbase-wc-sidebar__toggle",e.setAttribute("variant","tertiary"),e.setAttribute("size","s"),e.setAttribute("icon-only",""),e.setAttribute("start-icon",n?"arrow-bar-right":"arrow-bar-left"),e.setAttribute("aria-label",n?"사이드바 펼치기":"사이드바 접기"),e.addEventListener("db-click",()=>{const e=!this.hasAttribute("collapsed");e?this.setAttribute("collapsed",""):this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("db-toggle",{bubbles:!0,composed:!0,detail:{collapsed:e}}))}),d.append(e)}return d}createPanelHeader(e){const t="replace"===this.resolvedPanelMode,i=document.createElement("div");if(i.className=["designbase-wc-sidebar__panel-header",t&&"designbase-wc-sidebar__panel-header--replace"].filter(Boolean).join(" "),t){const t=document.createElement("button");t.type="button",t.className="designbase-wc-sidebar__panel-back",t.setAttribute("aria-label",e.backLabel||this.backLabel),t.append(s("chevron-left",18)),t.addEventListener("click",()=>this.dispatchBackClick()),i.append(t)}const a=document.createElement("div");a.className="designbase-wc-sidebar__panel-heading";const n=document.createElement("div");if(n.className="designbase-wc-sidebar__panel-title",n.textContent=e.title,a.append(n),e.description){const t=document.createElement("div");t.className="designbase-wc-sidebar__panel-description",t.textContent=e.description,a.append(t)}return i.append(a),i}createNavWrapper(e){const{mode:s,collapsed:i,includeProjects:a,includeBottom:n,panel:r}=e,o=document.createElement("div");if(o.className="designbase-wc-sidebar__nav-wrapper",a){const e=this.createProjectSelector(i);e&&o.append(e)}"main"===s&&o.append(this.createCustomNavSlot("nav-top"));const d=document.createElement("nav");if(d.className="designbase-wc-sidebar__nav",d.setAttribute("data-panel-nav",s),r&&(d.dataset.panelId=r.id),d.setAttribute("aria-label",r?.ariaLabel||r?.title||"주 메뉴"),o.append(d),"main"===s&&o.append(this.createCustomNavSlot("nav-bottom")),n){const e=document.createElement("nav");e.className="designbase-wc-sidebar__bottom-nav",e.setAttribute("aria-label",t("하단 메뉴")),o.append(e)}return o}createFooter(e){const{collapsed:t,userProfile:i,userMenuItems:a}=e,n=document.createElement("div");n.className="designbase-wc-sidebar__footer";const r=this.createUpdateBanner(t);r&&n.append(r);const o=this.createPromoBanner(t);if(o&&n.append(o),i&&!t){const e=document.createElement("div");e.className="designbase-wc-sidebar__user";const t=this.createUserDropdown(a);t&&e.append(t);const r=document.createElement("div");r.className="designbase-wc-sidebar__user-info",r.setAttribute("role","button"),r.setAttribute("tabindex","0"),r.setAttribute("aria-expanded",String(this.userMenuOpen));const o=document.createElement("db-avatar");o.className="designbase-wc-sidebar__user-avatar",o.setAttribute("size","s"),o.setAttribute("initials",i.name),o.setAttribute("alt",i.name),i.avatar&&o.setAttribute("src",i.avatar);const d=document.createElement("div");d.className="designbase-wc-sidebar__user-details";const c=document.createElement("div");if(c.className="designbase-wc-sidebar__user-name",c.textContent=i.name,d.append(c),i.email){const e=document.createElement("div");e.className="designbase-wc-sidebar__user-email",e.textContent=i.email,d.append(e)}if(r.append(o,d),a.length){const e=document.createElement("span");e.className="designbase-wc-sidebar__user-more",e.setAttribute("aria-hidden","true"),e.append(s("more-vertical",16)),r.append(e),r.setAttribute("aria-haspopup","menu")}r.addEventListener("click",()=>{a.length&&(this.userMenuOpen=!this.userMenuOpen,this.userFlyoutItemId=null,this.cancelUserFlyoutClose(),this.projectMenuOpen=!1,this.render())}),r.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),r.click())}),e.append(r),n.append(e)}else if(i&&t){const e=document.createElement("div");e.className=["designbase-wc-sidebar__user-collapsed",this.userMenuOpen&&"designbase-wc-sidebar__user-collapsed--open"].filter(Boolean).join(" "),e.setAttribute("role","button"),e.setAttribute("tabindex","0"),e.setAttribute("aria-label",i.name),e.setAttribute("aria-expanded",String(this.userMenuOpen)),a.length&&e.setAttribute("aria-haspopup","menu");const t=document.createElement("db-avatar");if(t.className="designbase-wc-sidebar__user-avatar-collapsed",t.setAttribute("size","s"),t.setAttribute("initials",i.name),t.setAttribute("alt",i.name),i.avatar&&t.setAttribute("src",i.avatar),e.append(t),!this.userMenuOpen){const t=document.createElement("span");t.className="designbase-wc-sidebar__item-tooltip",t.textContent=i.name,t.setAttribute("role","tooltip"),e.append(t)}const s=this.createUserDropdown(a,!0);s&&e.append(s),e.addEventListener("click",e=>{a.length&&(e.target.closest(".designbase-wc-sidebar__user-dropdown")||(this.userMenuOpen=!this.userMenuOpen,this.userFlyoutItemId=null,this.cancelUserFlyoutClose(),this.projectMenuOpen=!1,this.render()))}),e.addEventListener("keydown",t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),e.click())}),n.append(e)}return n}render(){const e=this.getActivePanelConfig();this.syncHostClasses(),this.setAttribute("role","complementary"),this.setAttribute("aria-label",t("사이드바 네비게이션"));const s=this.getAttribute("size")||"m",i="false"!==(this.getAttribute("collapsible")??("app"===this.sidebarType?"true":"false")),a="false"!==(this.getAttribute("show-logo")??("app"===this.sidebarType?"true":"false")),n=this.hasAttribute("collapsed"),r=this.parseUserProfile(),o=this.parseUserMenuItems(),d=this.parseBottomSections(),c=this.collectCustomNavSlots(),l=Boolean(e),u="replace"===this.resolvedPanelMode;this.replaceChildren();const b=document.createElement("div");b.className="designbase-wc-sidebar__container";const p=document.createElement("div");p.className="designbase-wc-sidebar__panel-viewport";const m=document.createElement("div");m.className="designbase-wc-sidebar__panel-track",m.dataset.active=l&&u?"main":l?"panel":"main";const h=document.createElement("div");h.className=["designbase-wc-sidebar__panel-slide","designbase-wc-sidebar__panel-slide--main"].join(" "),h.dataset.panel="main";const g=l&&u;h.toggleAttribute("inert",g),h.setAttribute("aria-hidden",String(g));const A=this.createMainHeader({size:s,collapsible:i,showLogo:a,collapsed:n});if(A&&h.append(A),h.append(this.createNavWrapper({mode:"main",collapsed:n,includeProjects:"back"!==this.headerType,includeBottom:d.length>0})),h.append(this.createFooter({collapsed:n,userProfile:r,userMenuItems:o})),m.append(h),e){const t=document.createElement("div");t.className=["designbase-wc-sidebar__panel-slide","designbase-wc-sidebar__panel-slide--secondary"].join(" "),t.dataset.panel=e.id,t.setAttribute("aria-hidden","false"),t.append(this.createPanelHeader(e)),t.append(this.createNavWrapper({mode:"panel",collapsed:!1,includeProjects:!1,includeBottom:!1,panel:e})),m.append(t)}p.append(m),b.append(p),this.append(b),this.renderNav(),this.renderBottomNav(),this.projectCustomNavSlots(c),l&&u&&requestAnimationFrame(()=>{this.isConnected&&this.activePanel===e?.id&&(m.dataset.active="panel")})}}customElements.get("db-sidebar")||customElements.define("db-sidebar",DbSidebar);export{DbSidebar};

package/dist/esm/components/db-split-view.js

@@ -1 +1 @@
-import{rafThrottle as e}from"../core/dom.js";class DbSplitView extends HTMLElement{constructor(){super(...arguments),this.panelSizes=[],this.draggingIndex=null,this.panelSources=[],this.isSyncing=!1,this.isObserving=!1,this.handleMouseDown=e=>t=>{t.preventDefault(),this.draggingIndex=e,document.body.style.cursor="horizontal"===this.getDirection()?"col-resize":"row-resize",document.body.style.userSelect="none"},this.handleMouseMove=e(e=>{if(null===this.draggingIndex||!this.panelSources.length)return;const t=this.getBoundingClientRect();this.resizeAt(this.draggingIndex,"horizontal"===this.getDirection()?e.clientX-t.left:e.clientY-t.top),this.classList.add("designbase-wc-split-view--dragging")}),this.handleSplitterKey=e=>t=>{if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;t.preventDefault();const i="horizontal"===this.getDirection()?this.clientWidth:this.clientHeight,s=this.readPanelConfig(this.panelSources[e],e,this.panelSources.length),n=this.readPanelConfig(this.panelSources[e+1],e+1,this.panelSources.length),l="fixed"===this.getMode()?1:i,r=s.flexible?i-this.panelSizes[e+1]*l-this.getSplitterSize():this.panelSizes[e]*l,o=s.flexible?i-(n.maxSize||i)-this.getSplitterSize():s.minSize||0,a=s.flexible?i-(n.minSize||0)-this.getSplitterSize():s.maxSize||i,h="Home"===t.key?o:"End"===t.key?a:r+("ArrowRight"===t.key||"ArrowDown"===t.key?1:-1)*(t.shiftKey?32:8);this.resizeAt(e,h)},this.handleMouseUp=()=>{null!==this.draggingIndex&&(this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect="",this.classList.toggle("designbase-wc-split-view--dragging",!1))}}static get observedAttributes(){return["direction","mode","splitter-size","splitter-color","splitter-hover-color","gap","full-width","full-height"]}connectedCallback(){this.style.display="flex",this.style.boxSizing="border-box",this.collectPanelSources(),this.initPanelSizes(),this.sync(),this.observer=new MutationObserver(()=>{this.isSyncing||(this.collectPanelSources(),this.initPanelSizes(),this.sync())}),this.startObserving(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp)}disconnectedCallback(){this.stopObserving(),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect=""}startObserving(){this.observer&&!this.isObserving&&(this.observer.observe(this,{childList:!0}),this.isObserving=!0)}stopObserving(){this.observer&&this.isObserving&&(this.observer.disconnect(),this.isObserving=!1)}attributeChangedCallback(){this.isConnected&&this.sync()}collectPanelSources(){this.panelSources=[];const e=Array.from(this.querySelectorAll('[slot="panel"]'));if(e.length)return void(this.panelSources=e);const t=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel > .designbase-wc-split-view__panel-body"));t.length&&(this.panelSources=t.map(e=>e.firstElementChild).filter(e=>e instanceof HTMLElement))}readPanelConfig(e,t,i){const s=e.getAttribute("data-size"),n=e.getAttribute("data-min-size"),l=e.getAttribute("data-max-size"),r=this.getMode();let o;return null!=s&&""!==s&&(o=Number(s)),{size:void 0!==o&&Number.isFinite(o)?o:"ratio"===r?1/i:200,minSize:n?Number(n):void 0,maxSize:l?Number(l):void 0,resizable:"false"!==e.getAttribute("data-resizable"),flexible:"false"!==e.getAttribute("data-flexible")&&(e.hasAttribute("data-flexible")||t===i-1)}}initPanelSizes(){const e=this.panelSources.length;if(!e)return;if(this.panelSizes.length===e)return;const t=this.getMode();this.panelSizes=this.panelSources.map((i,s)=>this.readPanelConfig(i,s,e).size??("ratio"===t?1/e:200))}getDirection(){return"vertical"===(this.getAttribute("direction")||"horizontal")?"vertical":"horizontal"}getMode(){return"fixed"===(this.getAttribute("mode")||"ratio")?"fixed":"ratio"}getSplitterSize(){return Number(this.getAttribute("splitter-size")||4)}getGap(){return Number(this.getAttribute("gap")||0)}resizeAt(e,t){const i=this.getBoundingClientRect(),s="horizontal"===this.getDirection()?i.width:i.height,n=this.getMode(),l=this.getSplitterSize(),r=this.readPanelConfig(this.panelSources[e],e,this.panelSources.length),o=this.readPanelConfig(this.panelSources[e+1],e+1,this.panelSources.length),px=e=>"fixed"===n?this.panelSizes[e]:this.panelSizes[e]*s;let a=0;for(let t=0;t<e;t++)a+=px(t)+l;if(r.flexible&&!o.flexible&&0===e&&2===this.panelSources.length){const i=Math.max(o.minSize||0,Math.min(o.maxSize||s,Math.max(0,s-t-l)));this.panelSizes[e+1]="fixed"===n?i:i/s}else{const i=o.flexible?s-(o.minSize||0)-l-a:s,h=Math.max(r.minSize||0,Math.min(r.maxSize||s,i,t-a));this.panelSizes[e]="fixed"===n?h:h/s}this.applyPanelSizes(),this.dispatchEvent(new CustomEvent("db-resize",{detail:{sizes:[...this.panelSizes]},bubbles:!0,composed:!0}))}applyPanelSizes(){if(!this.panelSources.length)return;const e=this.getDirection(),t=this.getMode();Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")).forEach((i,s)=>{const n=this.panelSources[s];if(!n)return;const l=this.readPanelConfig(n,s,this.panelSources.length),r=this.panelSizes[s],o=l.flexible;if(i.style.width="",i.style.height="",i.style.flexBasis="",i.style.flexGrow="",i.style.flexShrink="",i.style.minHeight="",i.style.minWidth="",o)i.style.flex="1 1 0","vertical"===e?i.style.minHeight="0":i.style.minWidth="0";else{const e="fixed"===t?`${r}px`:100*r+"%";i.style.flex=`0 0 ${e}`}i.classList.toggle("designbase-wc-split-view__panel--flexible",Boolean(o)),i.classList.toggle("designbase-wc-split-view__panel--fixed",!o)}),this.querySelectorAll(":scope > .designbase-wc-split-view__splitter").forEach((i,s)=>{const n=this.readPanelConfig(this.panelSources[s],s,this.panelSources.length).flexible?s+1:s,l=this.readPanelConfig(this.panelSources[n],n,this.panelSources.length),r="horizontal"===e?this.clientWidth:this.clientHeight;i.setAttribute("aria-valuenow",String(Math.round(this.panelSizes[n]*("fixed"===t?1:r)))),i.setAttribute("aria-valuemin",String(l.minSize||0)),i.setAttribute("aria-valuemax",String(l.maxSize||r))})}sync(){if(this.isSyncing=!0,this.stopObserving(),this.collectPanelSources(),this.initPanelSizes(),!this.panelSources.length)return this.isSyncing=!1,void this.startObserving();const e=this.getDirection(),t=this.getMode(),i=this.getGap(),s=this.getSplitterSize(),n=this.getAttribute("splitter-color"),l=this.getAttribute("splitter-hover-color");this.className=["designbase-wc-split-view",`designbase-wc-split-view--direction-${e}`,`designbase-wc-split-view--mode-${t}`,this.hasAttribute("full-width")&&"designbase-wc-split-view--full-width",this.hasAttribute("full-height")&&"designbase-wc-split-view--full-height",null!==this.draggingIndex&&"designbase-wc-split-view--dragging"].filter(Boolean).join(" "),this.style.setProperty("--splitter-size",`${s}px`),n?this.style.setProperty("--splitter-color",n):this.style.removeProperty("--splitter-color"),l?this.style.setProperty("--splitter-hover-color",l):this.style.removeProperty("--splitter-hover-color"),this.style.gap=i>0?`${i}px`:"";const r=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")),o=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__splitter"));r.forEach(e=>e.remove()),o.forEach(e=>e.remove()),this.panelSources.forEach((t,s)=>{const n=this.readPanelConfig(t,s,this.panelSources.length),l=s===this.panelSources.length-1,r=!1!==n.resizable&&!l,o=document.createElement("div");o.className="designbase-wc-split-view__panel";const a=document.createElement("div");if(a.className="designbase-wc-split-view__panel-body",t.parentElement!==a&&a.append(t),o.append(a),this.append(o),!l&&r&&0===i){const t=document.createElement("div");t.className=`designbase-wc-split-view__splitter designbase-wc-split-view__splitter--direction-${e}`,t.style.cursor="horizontal"===e?"col-resize":"row-resize",t.addEventListener("mousedown",this.handleMouseDown(s)),t.tabIndex=0,t.setAttribute("role","separator"),t.setAttribute("aria-label","패널 너비 조정"),t.setAttribute("aria-orientation","horizontal"===e?"vertical":"horizontal"),t.addEventListener("keydown",this.handleSplitterKey(s)),this.append(t)}}),this.applyPanelSizes(),this.isSyncing=!1,this.startObserving()}}customElements.get("db-split-view")||customElements.define("db-split-view",DbSplitView);export{DbSplitView};
+import{dbText as e}from"../core/i18n.js";import{rafThrottle as t}from"../core/dom.js";class DbSplitView extends HTMLElement{constructor(){super(...arguments),this.panelSizes=[],this.draggingIndex=null,this.panelSources=[],this.isSyncing=!1,this.isObserving=!1,this.handleMouseDown=e=>t=>{t.preventDefault(),this.draggingIndex=e,document.body.style.cursor="horizontal"===this.getDirection()?"col-resize":"row-resize",document.body.style.userSelect="none"},this.handleMouseMove=t(e=>{if(null===this.draggingIndex||!this.panelSources.length)return;const t=this.getBoundingClientRect();this.resizeAt(this.draggingIndex,"horizontal"===this.getDirection()?e.clientX-t.left:e.clientY-t.top),this.classList.add("designbase-wc-split-view--dragging")}),this.handleSplitterKey=e=>t=>{if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;t.preventDefault();const i="horizontal"===this.getDirection()?this.clientWidth:this.clientHeight,s=this.readPanelConfig(this.panelSources[e],e,this.panelSources.length),n=this.readPanelConfig(this.panelSources[e+1],e+1,this.panelSources.length),l="fixed"===this.getMode()?1:i,r=s.flexible?i-this.panelSizes[e+1]*l-this.getSplitterSize():this.panelSizes[e]*l,o=s.flexible?i-(n.maxSize||i)-this.getSplitterSize():s.minSize||0,a=s.flexible?i-(n.minSize||0)-this.getSplitterSize():s.maxSize||i,h="Home"===t.key?o:"End"===t.key?a:r+("ArrowRight"===t.key||"ArrowDown"===t.key?1:-1)*(t.shiftKey?32:8);this.resizeAt(e,h)},this.handleMouseUp=()=>{null!==this.draggingIndex&&(this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect="",this.classList.toggle("designbase-wc-split-view--dragging",!1))}}static get observedAttributes(){return["direction","mode","splitter-size","splitter-color","splitter-hover-color","gap","full-width","full-height"]}connectedCallback(){this.style.display="flex",this.style.boxSizing="border-box",this.collectPanelSources(),this.initPanelSizes(),this.sync(),this.observer=new MutationObserver(()=>{this.isSyncing||(this.collectPanelSources(),this.initPanelSizes(),this.sync())}),this.startObserving(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp)}disconnectedCallback(){this.stopObserving(),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect=""}startObserving(){this.observer&&!this.isObserving&&(this.observer.observe(this,{childList:!0}),this.isObserving=!0)}stopObserving(){this.observer&&this.isObserving&&(this.observer.disconnect(),this.isObserving=!1)}attributeChangedCallback(){this.isConnected&&this.sync()}collectPanelSources(){this.panelSources=[];const e=Array.from(this.querySelectorAll('[slot="panel"]'));if(e.length)return void(this.panelSources=e);const t=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel > .designbase-wc-split-view__panel-body"));t.length&&(this.panelSources=t.map(e=>e.firstElementChild).filter(e=>e instanceof HTMLElement))}readPanelConfig(e,t,i){const s=e.getAttribute("data-size"),n=e.getAttribute("data-min-size"),l=e.getAttribute("data-max-size"),r=this.getMode();let o;return null!=s&&""!==s&&(o=Number(s)),{size:void 0!==o&&Number.isFinite(o)?o:"ratio"===r?1/i:200,minSize:n?Number(n):void 0,maxSize:l?Number(l):void 0,resizable:"false"!==e.getAttribute("data-resizable"),flexible:"false"!==e.getAttribute("data-flexible")&&(e.hasAttribute("data-flexible")||t===i-1)}}initPanelSizes(){const e=this.panelSources.length;if(!e)return;if(this.panelSizes.length===e)return;const t=this.getMode();this.panelSizes=this.panelSources.map((i,s)=>this.readPanelConfig(i,s,e).size??("ratio"===t?1/e:200))}getDirection(){return"vertical"===(this.getAttribute("direction")||"horizontal")?"vertical":"horizontal"}getMode(){return"fixed"===(this.getAttribute("mode")||"ratio")?"fixed":"ratio"}getSplitterSize(){return Number(this.getAttribute("splitter-size")||4)}getGap(){return Number(this.getAttribute("gap")||0)}resizeAt(e,t){const i=this.getBoundingClientRect(),s="horizontal"===this.getDirection()?i.width:i.height,n=this.getMode(),l=this.getSplitterSize(),r=this.readPanelConfig(this.panelSources[e],e,this.panelSources.length),o=this.readPanelConfig(this.panelSources[e+1],e+1,this.panelSources.length),px=e=>"fixed"===n?this.panelSizes[e]:this.panelSizes[e]*s;let a=0;for(let t=0;t<e;t++)a+=px(t)+l;if(r.flexible&&!o.flexible&&0===e&&2===this.panelSources.length){const i=Math.max(o.minSize||0,Math.min(o.maxSize||s,Math.max(0,s-t-l)));this.panelSizes[e+1]="fixed"===n?i:i/s}else{const i=o.flexible?s-(o.minSize||0)-l-a:s,h=Math.max(r.minSize||0,Math.min(r.maxSize||s,i,t-a));this.panelSizes[e]="fixed"===n?h:h/s}this.applyPanelSizes(),this.dispatchEvent(new CustomEvent("db-resize",{detail:{sizes:[...this.panelSizes]},bubbles:!0,composed:!0}))}applyPanelSizes(){if(!this.panelSources.length)return;const e=this.getDirection(),t=this.getMode();Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")).forEach((i,s)=>{const n=this.panelSources[s];if(!n)return;const l=this.readPanelConfig(n,s,this.panelSources.length),r=this.panelSizes[s],o=l.flexible;if(i.style.width="",i.style.height="",i.style.flexBasis="",i.style.flexGrow="",i.style.flexShrink="",i.style.minHeight="",i.style.minWidth="",o)i.style.flex="1 1 0","vertical"===e?i.style.minHeight="0":i.style.minWidth="0";else{const e="fixed"===t?`${r}px`:100*r+"%";i.style.flex=`0 0 ${e}`}i.classList.toggle("designbase-wc-split-view__panel--flexible",Boolean(o)),i.classList.toggle("designbase-wc-split-view__panel--fixed",!o)}),this.querySelectorAll(":scope > .designbase-wc-split-view__splitter").forEach((i,s)=>{const n=this.readPanelConfig(this.panelSources[s],s,this.panelSources.length).flexible?s+1:s,l=this.readPanelConfig(this.panelSources[n],n,this.panelSources.length),r="horizontal"===e?this.clientWidth:this.clientHeight;i.setAttribute("aria-valuenow",String(Math.round(this.panelSizes[n]*("fixed"===t?1:r)))),i.setAttribute("aria-valuemin",String(l.minSize||0)),i.setAttribute("aria-valuemax",String(l.maxSize||r))})}sync(){if(this.isSyncing=!0,this.stopObserving(),this.collectPanelSources(),this.initPanelSizes(),!this.panelSources.length)return this.isSyncing=!1,void this.startObserving();const t=this.getDirection(),i=this.getMode(),s=this.getGap(),n=this.getSplitterSize(),l=this.getAttribute("splitter-color"),r=this.getAttribute("splitter-hover-color");this.className=["designbase-wc-split-view",`designbase-wc-split-view--direction-${t}`,`designbase-wc-split-view--mode-${i}`,this.hasAttribute("full-width")&&"designbase-wc-split-view--full-width",this.hasAttribute("full-height")&&"designbase-wc-split-view--full-height",null!==this.draggingIndex&&"designbase-wc-split-view--dragging"].filter(Boolean).join(" "),this.style.setProperty("--splitter-size",`${n}px`),l?this.style.setProperty("--splitter-color",l):this.style.removeProperty("--splitter-color"),r?this.style.setProperty("--splitter-hover-color",r):this.style.removeProperty("--splitter-hover-color"),this.style.gap=s>0?`${s}px`:"";const o=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")),a=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__splitter"));o.forEach(e=>e.remove()),a.forEach(e=>e.remove()),this.panelSources.forEach((i,n)=>{const l=this.readPanelConfig(i,n,this.panelSources.length),r=n===this.panelSources.length-1,o=!1!==l.resizable&&!r,a=document.createElement("div");a.className="designbase-wc-split-view__panel";const h=document.createElement("div");if(h.className="designbase-wc-split-view__panel-body",i.parentElement!==h&&h.append(i),a.append(h),this.append(a),!r&&o&&0===s){const i=document.createElement("div");i.className=`designbase-wc-split-view__splitter designbase-wc-split-view__splitter--direction-${t}`,i.style.cursor="horizontal"===t?"col-resize":"row-resize",i.addEventListener("mousedown",this.handleMouseDown(n)),i.tabIndex=0,i.setAttribute("role","separator"),i.setAttribute("aria-label",e("패널 너비 조정")),i.setAttribute("aria-orientation","horizontal"===t?"vertical":"horizontal"),i.addEventListener("keydown",this.handleSplitterKey(n)),this.append(i)}}),this.applyPanelSizes(),this.isSyncing=!1,this.startObserving()}}customElements.get("db-split-view")||customElements.define("db-split-view",DbSplitView);export{DbSplitView};

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

@@ -1,6 +1,3 @@
-/**
- * Stepper Web Component
- */
 declare class DbStepper extends HTMLElement {
     static get observedAttributes(): string[];
     private decrementBtn;

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

@@ -1 +1 @@
-const t="designbase-wc-stepper",e=["s","m","l"],i={display:"block",width:"100%",minWidth:"0",height:"auto",padding:"0",margin:"0",border:"0",background:"transparent",color:"inherit",fontFamily:"inherit",fontWeight:"600",lineHeight:"1",textAlign:"center",outline:"none",boxShadow:"none",boxSizing:"border-box",appearance:"none"};class DbStepper extends HTMLElement{constructor(){super(...arguments),this.decrementBtn=null,this.incrementBtn=null,this.valueWrapEl=null,this.valueTextEl=null,this.valueInputEl=null,this.descriptionEl=null,this.boundInputKeyDown=t=>this.handleInputKeyDown(t),this.boundInputInput=()=>this.handleInputInput(),this.boundInputPaste=t=>this.handleInputPaste(t),this.boundInputBlur=()=>this.commitInputValue()}static get observedAttributes(){return["value","min","max","step","size","editable","full-width","disabled","readonly"]}connectedCallback(){this.querySelector(`.${t}__button`)||this.build(),this.syncFromAttributes()}attributeChangedCallback(t){this.decrementBtn&&this.syncFromAttributes()}get value(){return Number(this.getAttribute("value")||0)}set value(t){this.setAttribute("value",String(t))}build(){this.decrementBtn=document.createElement("button"),this.decrementBtn.type="button",this.decrementBtn.className=`${t}__button ${t}__button--decrement`,this.decrementBtn.setAttribute("aria-label","감소"),this.decrementBtn.innerHTML='<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>',this.valueWrapEl=document.createElement("div"),this.valueWrapEl.className=`${t}__value`,this.valueTextEl=document.createElement("span"),this.valueTextEl.className=`${t}__value-text`,this.valueWrapEl.appendChild(this.valueTextEl),this.incrementBtn=document.createElement("button"),this.incrementBtn.type="button",this.incrementBtn.className=`${t}__button ${t}__button--increment`,this.incrementBtn.setAttribute("aria-label","증가"),this.incrementBtn.innerHTML='<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>',this.descriptionEl=document.createElement("div"),this.descriptionEl.id="stepper-description",this.descriptionEl.className="sr-only",this.decrementBtn.addEventListener("click",()=>this.change(this.value-this.getStep())),this.incrementBtn.addEventListener("click",()=>this.change(this.value+this.getStep())),this.append(this.decrementBtn,this.valueWrapEl,this.incrementBtn,this.descriptionEl)}isEditable(){return!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")&&"false"!==this.getAttribute("editable")}syncFromAttributes(){const i=this.getAttribute("size")||"m",n=this.hasAttribute("disabled"),s=this.hasAttribute("readonly"),l=this.getMin(),u=this.getMax(),a=this.getStep(),r=this.clamp(this.snapToStep(this.value));if(this.getAttribute("value")!==String(r)&&this.setAttribute("value",String(r)),this.className=[t,`${t}--${e.includes(i)?i:"m"}`,this.hasAttribute("full-width")&&`${t}--full-width`,this.isEditable()&&`${t}--editable`,n&&`${t}--disabled`,s&&`${t}--readonly`].filter(Boolean).join(" "),this.syncValueField(r),this.descriptionEl){const t=this.isEditable()?"값을 직접 입력할 수 있습니다. ":"";this.descriptionEl.textContent=`${t}숫자 조정기. +/- 버튼으로 값을 조정할 수 있습니다. 현재 값: ${r}, 최소값: ${l}, 최대값: ${u}, 단계: ${a}`}this.decrementBtn?.setAttribute("aria-describedby","stepper-description"),this.incrementBtn?.setAttribute("aria-describedby","stepper-description"),this.updateButtons()}applyValueInputAppearance(){this.valueInputEl&&(Object.assign(this.valueInputEl.style,i),this.valueInputEl.style.setProperty("-webkit-appearance","none"),this.valueInputEl.style.setProperty("-moz-appearance","textfield"))}syncValueField(e){if(this.valueWrapEl){if(this.isEditable())return this.valueInputEl||(this.valueInputEl=document.createElement("input"),this.valueInputEl.className=`${t}__value-input`,this.valueInputEl.type="text",this.valueInputEl.setAttribute("inputmode",this.allowsDecimal()?"decimal":"numeric"),this.valueInputEl.setAttribute("pattern",this.buildInputPattern()),this.valueInputEl.setAttribute("aria-label","값 입력"),this.valueInputEl.autocomplete="off",this.valueInputEl.spellcheck=!1,this.valueInputEl.addEventListener("keydown",this.boundInputKeyDown),this.valueInputEl.addEventListener("input",this.boundInputInput),this.valueInputEl.addEventListener("paste",this.boundInputPaste),this.valueInputEl.addEventListener("blur",this.boundInputBlur),this.applyValueInputAppearance()),this.applyValueInputAppearance(),this.valueInputEl.setAttribute("inputmode",this.allowsDecimal()?"decimal":"numeric"),this.valueInputEl.setAttribute("pattern",this.buildInputPattern()),this.valueInputEl.setAttribute("aria-valuemin",String(this.getMin())),this.valueInputEl.setAttribute("aria-valuemax",String(this.getMax())),this.valueInputEl.disabled=!1,document.activeElement!==this.valueInputEl&&(this.valueInputEl.value=String(e)),this.valueTextEl?.remove(),void(this.valueWrapEl.contains(this.valueInputEl)||this.valueWrapEl.appendChild(this.valueInputEl));this.valueInputEl&&(this.valueInputEl.removeEventListener("keydown",this.boundInputKeyDown),this.valueInputEl.removeEventListener("input",this.boundInputInput),this.valueInputEl.removeEventListener("paste",this.boundInputPaste),this.valueInputEl.removeEventListener("blur",this.boundInputBlur),this.valueInputEl.remove(),this.valueInputEl=null),this.valueTextEl||(this.valueTextEl=document.createElement("span"),this.valueTextEl.className=`${t}__value-text`),this.valueTextEl.textContent=String(e),this.valueWrapEl.contains(this.valueTextEl)||this.valueWrapEl.appendChild(this.valueTextEl)}}allowsNegative(){return this.getMin()<0}allowsDecimal(){const t=this.getStep();return!Number.isInteger(t)}buildInputPattern(){return`^${this.allowsNegative()?"-?":""}\\d*${this.allowsDecimal()?"(\\.\\d*)?":""}$`}sanitizeInputString(t){let e="",i=!1,n=!1;for(let s=0;s<t.length;s++){const l=t[s];"-"!==l||!this.allowsNegative()||0!==e.length||i?"."!==l||!this.allowsDecimal()||n?/\d/.test(l)&&(e+=l):(e+=l,n=!0):(e+=l,i=!0)}return e}parseInputValue(t){const e=t.trim();if(""===e||"-"===e||"."===e)return null;const i=Number(e);return Number.isFinite(i)?i:null}enforceInputBounds(t,e={}){const i=this.sanitizeInputString(t),n=this.parseInputValue(i);if(null===n)return i;const s=this.getMin(),l=this.getMax();return n>l?String(l):e.clampMin&&n<s?String(s):i}handleInputKeyDown(t){if(!["Backspace","Delete","Tab","Escape","ArrowLeft","ArrowRight","Home","End"].includes(t.key)){if("Enter"===t.key)return t.preventDefault(),this.commitInputValue(),void this.valueInputEl?.blur();if("-"===t.key&&this.allowsNegative()){const t=this.valueInputEl;if(t&&0===t.selectionStart&&0===t.selectionEnd&&!t.value.includes("-"))return}"."===t.key&&this.allowsDecimal()&&!this.valueInputEl?.value.includes(".")||/^\d$/.test(t.key)||t.preventDefault()}}handleInputInput(){if(!this.valueInputEl)return;const t=this.enforceInputBounds(this.valueInputEl.value);this.valueInputEl.value!==t&&(this.valueInputEl.value=t)}handleInputPaste(t){if(t.preventDefault(),!this.valueInputEl)return;const e=t.clipboardData?.getData("text")??"",i=this.enforceInputBounds(this.sanitizeInputString(this.valueInputEl.value+e));this.valueInputEl.value=i,this.handleInputInput()}commitInputValue(){if(!this.valueInputEl||!this.isEditable())return;const t=this.valueInputEl.value.trim();if(""===t||"-"===t||"."===t)return void(this.valueInputEl.value=String(this.value));const e=this.parseInputValue(t);if(null===e)return void(this.valueInputEl.value=String(this.value));const i=this.snapToStep(e);this.valueInputEl.value=String(i),this.change(i)}getMin(){return Number(this.getAttribute("min")??0)}getMax(){return Number(this.getAttribute("max")??100)}getStep(){return Number(this.getAttribute("step")??1)}snapToStep(t){const e=this.getStep(),i=Math.round(t/e)*e;return this.clamp(i)}clamp(t){return Math.max(this.getMin(),Math.min(this.getMax(),t))}updateButtons(){const e=this.getMin(),i=this.getMax(),n=this.hasAttribute("disabled"),s=this.hasAttribute("readonly"),l=this.value,u=l<=e,a=l>=i;if(this.decrementBtn){const e=n||s||u;this.decrementBtn.disabled=e,this.decrementBtn.classList.toggle(`${t}__button--disabled`,e)}if(this.incrementBtn){const e=n||s||a;this.incrementBtn.disabled=e,this.incrementBtn.classList.toggle(`${t}__button--disabled`,e)}}change(t){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;const e=this.getMin(),i=this.getMax(),n=this.clamp(this.snapToStep(t)),s=this.value;if(n!==s){if(this.setAttribute("value",String(n)),this.valueTextEl&&(this.valueTextEl.textContent=String(n)),this.valueInputEl&&(this.valueInputEl.value=String(n)),this.updateButtons(),this.descriptionEl){const t=this.getStep(),s=this.isEditable()?"값을 직접 입력할 수 있습니다. ":"";this.descriptionEl.textContent=`${s}숫자 조정기. +/- 버튼으로 값을 조정할 수 있습니다. 현재 값: ${n}, 최소값: ${e}, 최대값: ${i}, 단계: ${t}`}this.dispatchEvent(new CustomEvent("db-change",{detail:{value:n,minReached:n<=e,maxReached:n>=i},bubbles:!0,composed:!0})),n<=e&&s>e&&this.dispatchEvent(new CustomEvent("db-min-reached",{bubbles:!0,composed:!0,detail:{value:n}})),n>=i&&s<i&&this.dispatchEvent(new CustomEvent("db-max-reached",{bubbles:!0,composed:!0,detail:{value:n}}))}else this.valueInputEl&&(this.valueInputEl.value=String(n))}}customElements.get("db-stepper")||customElements.define("db-stepper",DbStepper);export{DbStepper};
+import{dbText as t,dbFormat as e}from"../core/i18n.js";const i="designbase-wc-stepper",n=["s","m","l"],s={display:"block",width:"100%",minWidth:"0",height:"auto",padding:"0",margin:"0",border:"0",background:"transparent",color:"inherit",fontFamily:"inherit",fontWeight:"600",lineHeight:"1",textAlign:"center",outline:"none",boxShadow:"none",boxSizing:"border-box",appearance:"none"};class DbStepper extends HTMLElement{constructor(){super(...arguments),this.decrementBtn=null,this.incrementBtn=null,this.valueWrapEl=null,this.valueTextEl=null,this.valueInputEl=null,this.descriptionEl=null,this.boundInputKeyDown=t=>this.handleInputKeyDown(t),this.boundInputInput=()=>this.handleInputInput(),this.boundInputPaste=t=>this.handleInputPaste(t),this.boundInputBlur=()=>this.commitInputValue()}static get observedAttributes(){return["value","min","max","step","size","editable","full-width","disabled","readonly"]}connectedCallback(){this.querySelector(`.${i}__button`)||this.build(),this.syncFromAttributes()}attributeChangedCallback(t){this.decrementBtn&&this.syncFromAttributes()}get value(){return Number(this.getAttribute("value")||0)}set value(t){this.setAttribute("value",String(t))}build(){this.decrementBtn=document.createElement("button"),this.decrementBtn.type="button",this.decrementBtn.className=`${i}__button ${i}__button--decrement`,this.decrementBtn.setAttribute("aria-label",t("감소")),this.decrementBtn.innerHTML='<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>',this.valueWrapEl=document.createElement("div"),this.valueWrapEl.className=`${i}__value`,this.valueTextEl=document.createElement("span"),this.valueTextEl.className=`${i}__value-text`,this.valueWrapEl.appendChild(this.valueTextEl),this.incrementBtn=document.createElement("button"),this.incrementBtn.type="button",this.incrementBtn.className=`${i}__button ${i}__button--increment`,this.incrementBtn.setAttribute("aria-label",t("증가")),this.incrementBtn.innerHTML='<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>',this.descriptionEl=document.createElement("div"),this.descriptionEl.id="stepper-description",this.descriptionEl.className="sr-only",this.decrementBtn.addEventListener("click",()=>this.change(this.value-this.getStep())),this.incrementBtn.addEventListener("click",()=>this.change(this.value+this.getStep())),this.append(this.decrementBtn,this.valueWrapEl,this.incrementBtn,this.descriptionEl)}isEditable(){return!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")&&"false"!==this.getAttribute("editable")}syncFromAttributes(){const t=this.getAttribute("size")||"m",s=this.hasAttribute("disabled"),l=this.hasAttribute("readonly"),u=this.getMin(),a=this.getMax(),r=this.getStep(),h=this.clamp(this.snapToStep(this.value));if(this.getAttribute("value")!==String(h)&&this.setAttribute("value",String(h)),this.className=[i,`${i}--${n.includes(t)?t:"m"}`,this.hasAttribute("full-width")&&`${i}--full-width`,this.isEditable()&&`${i}--editable`,s&&`${i}--disabled`,l&&`${i}--readonly`].filter(Boolean).join(" "),this.syncValueField(h),this.descriptionEl){const t=this.isEditable()?"값을 직접 입력할 수 있습니다. ":"";this.descriptionEl.textContent=e("{0}숫자 조정기. +/- 버튼으로 값을 조정할 수 있습니다. 현재 값: {1}, 최소값: {2}, 최대값: {3}, 단계: {4}",[t,h,u,a,r])}this.decrementBtn?.setAttribute("aria-describedby","stepper-description"),this.incrementBtn?.setAttribute("aria-describedby","stepper-description"),this.updateButtons()}applyValueInputAppearance(){this.valueInputEl&&(Object.assign(this.valueInputEl.style,s),this.valueInputEl.style.setProperty("-webkit-appearance","none"),this.valueInputEl.style.setProperty("-moz-appearance","textfield"))}syncValueField(e){if(this.valueWrapEl){if(this.isEditable())return this.valueInputEl||(this.valueInputEl=document.createElement("input"),this.valueInputEl.className=`${i}__value-input`,this.valueInputEl.type="text",this.valueInputEl.setAttribute("inputmode",this.allowsDecimal()?"decimal":"numeric"),this.valueInputEl.setAttribute("pattern",this.buildInputPattern()),this.valueInputEl.setAttribute("aria-label",t("값 입력")),this.valueInputEl.autocomplete="off",this.valueInputEl.spellcheck=!1,this.valueInputEl.addEventListener("keydown",this.boundInputKeyDown),this.valueInputEl.addEventListener("input",this.boundInputInput),this.valueInputEl.addEventListener("paste",this.boundInputPaste),this.valueInputEl.addEventListener("blur",this.boundInputBlur),this.applyValueInputAppearance()),this.applyValueInputAppearance(),this.valueInputEl.setAttribute("inputmode",this.allowsDecimal()?"decimal":"numeric"),this.valueInputEl.setAttribute("pattern",this.buildInputPattern()),this.valueInputEl.setAttribute("aria-valuemin",String(this.getMin())),this.valueInputEl.setAttribute("aria-valuemax",String(this.getMax())),this.valueInputEl.disabled=!1,document.activeElement!==this.valueInputEl&&(this.valueInputEl.value=String(e)),this.valueTextEl?.remove(),void(this.valueWrapEl.contains(this.valueInputEl)||this.valueWrapEl.appendChild(this.valueInputEl));this.valueInputEl&&(this.valueInputEl.removeEventListener("keydown",this.boundInputKeyDown),this.valueInputEl.removeEventListener("input",this.boundInputInput),this.valueInputEl.removeEventListener("paste",this.boundInputPaste),this.valueInputEl.removeEventListener("blur",this.boundInputBlur),this.valueInputEl.remove(),this.valueInputEl=null),this.valueTextEl||(this.valueTextEl=document.createElement("span"),this.valueTextEl.className=`${i}__value-text`),this.valueTextEl.textContent=String(e),this.valueWrapEl.contains(this.valueTextEl)||this.valueWrapEl.appendChild(this.valueTextEl)}}allowsNegative(){return this.getMin()<0}allowsDecimal(){const t=this.getStep();return!Number.isInteger(t)}buildInputPattern(){return`^${this.allowsNegative()?"-?":""}\\d*${this.allowsDecimal()?"(\\.\\d*)?":""}$`}sanitizeInputString(t){let e="",i=!1,n=!1;for(let s=0;s<t.length;s++){const l=t[s];"-"!==l||!this.allowsNegative()||0!==e.length||i?"."!==l||!this.allowsDecimal()||n?/\d/.test(l)&&(e+=l):(e+=l,n=!0):(e+=l,i=!0)}return e}parseInputValue(t){const e=t.trim();if(""===e||"-"===e||"."===e)return null;const i=Number(e);return Number.isFinite(i)?i:null}enforceInputBounds(t,e={}){const i=this.sanitizeInputString(t),n=this.parseInputValue(i);if(null===n)return i;const s=this.getMin(),l=this.getMax();return n>l?String(l):e.clampMin&&n<s?String(s):i}handleInputKeyDown(t){if(!["Backspace","Delete","Tab","Escape","ArrowLeft","ArrowRight","Home","End"].includes(t.key)){if("Enter"===t.key)return t.preventDefault(),this.commitInputValue(),void this.valueInputEl?.blur();if("-"===t.key&&this.allowsNegative()){const t=this.valueInputEl;if(t&&0===t.selectionStart&&0===t.selectionEnd&&!t.value.includes("-"))return}"."===t.key&&this.allowsDecimal()&&!this.valueInputEl?.value.includes(".")||/^\d$/.test(t.key)||t.preventDefault()}}handleInputInput(){if(!this.valueInputEl)return;const t=this.enforceInputBounds(this.valueInputEl.value);this.valueInputEl.value!==t&&(this.valueInputEl.value=t)}handleInputPaste(t){if(t.preventDefault(),!this.valueInputEl)return;const e=t.clipboardData?.getData("text")??"",i=this.enforceInputBounds(this.sanitizeInputString(this.valueInputEl.value+e));this.valueInputEl.value=i,this.handleInputInput()}commitInputValue(){if(!this.valueInputEl||!this.isEditable())return;const t=this.valueInputEl.value.trim();if(""===t||"-"===t||"."===t)return void(this.valueInputEl.value=String(this.value));const e=this.parseInputValue(t);if(null===e)return void(this.valueInputEl.value=String(this.value));const i=this.snapToStep(e);this.valueInputEl.value=String(i),this.change(i)}getMin(){return Number(this.getAttribute("min")??0)}getMax(){return Number(this.getAttribute("max")??100)}getStep(){return Number(this.getAttribute("step")??1)}snapToStep(t){const e=this.getStep(),i=Math.round(t/e)*e;return this.clamp(i)}clamp(t){return Math.max(this.getMin(),Math.min(this.getMax(),t))}updateButtons(){const t=this.getMin(),e=this.getMax(),n=this.hasAttribute("disabled"),s=this.hasAttribute("readonly"),l=this.value,u=l<=t,a=l>=e;if(this.decrementBtn){const t=n||s||u;this.decrementBtn.disabled=t,this.decrementBtn.classList.toggle(`${i}__button--disabled`,t)}if(this.incrementBtn){const t=n||s||a;this.incrementBtn.disabled=t,this.incrementBtn.classList.toggle(`${i}__button--disabled`,t)}}change(t){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;const i=this.getMin(),n=this.getMax(),s=this.clamp(this.snapToStep(t)),l=this.value;if(s!==l){if(this.setAttribute("value",String(s)),this.valueTextEl&&(this.valueTextEl.textContent=String(s)),this.valueInputEl&&(this.valueInputEl.value=String(s)),this.updateButtons(),this.descriptionEl){const t=this.getStep(),l=this.isEditable()?"값을 직접 입력할 수 있습니다. ":"";this.descriptionEl.textContent=e("{0}숫자 조정기. +/- 버튼으로 값을 조정할 수 있습니다. 현재 값: {1}, 최소값: {2}, 최대값: {3}, 단계: {4}",[l,s,i,n,t])}this.dispatchEvent(new CustomEvent("db-change",{detail:{value:s,minReached:s<=i,maxReached:s>=n},bubbles:!0,composed:!0})),s<=i&&l>i&&this.dispatchEvent(new CustomEvent("db-min-reached",{bubbles:!0,composed:!0,detail:{value:s}})),s>=n&&l<n&&this.dispatchEvent(new CustomEvent("db-max-reached",{bubbles:!0,composed:!0,detail:{value:s}}))}else this.valueInputEl&&(this.valueInputEl.value=String(s))}}customElements.get("db-stepper")||customElements.define("db-stepper",DbStepper);export{DbStepper};

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";import{TABLE_SIZES as t,TABLE_VARIANTS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbTable extends HTMLElement{constructor(){super(...arguments),this.internalSelectedRows=[],this.internalSortDirection=null,this.internalPage=1}static get observedAttributes(){return["columns","data","title","size","variant","empty-message","sortable","sort-column","sort-direction","selectable","multi-select","selected-rows","row-key","loading","pagination","page","page-size","total-items","show-count-badge","clickable"]}get columns(){try{return JSON.parse(this.getAttribute("columns")||"[]")}catch{return[]}}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get data(){try{return JSON.parse(this.getAttribute("data")||"[]")}catch{return[]}}set data(e){this.setAttribute("data","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(e){"selected-rows"===e&&this.syncSelectedRowsFromAttribute(),"sort-column"!==e&&"sort-direction"!==e||this.syncSortFromAttributes(),"page"===e&&(this.internalPage=Number(this.getAttribute("page")||1)),this.render()}syncSelectedRowsFromAttribute(){try{this.internalSelectedRows=JSON.parse(this.getAttribute("selected-rows")||"[]")}catch{this.internalSelectedRows=[]}}syncSortFromAttributes(){const e=this.getAttribute("sort-column"),t=this.getAttribute("sort-direction");this.internalSortColumn=e||void 0,this.internalSortDirection="asc"===t||"desc"===t?t:null}getRowKey(e,t){const s=e[this.getAttribute("row-key")||"id"];return String(null!=s?s:t)}getSortedData(){const e=this.data,t=this.getAttribute("sort-column")||this.internalSortColumn,s=this.getAttribute("sort-direction")||this.internalSortDirection;if(!t||!s)return e;const n=this.columns.find(e=>e.key===t);return n?.sortable?[...e].sort((e,n)=>{const a=e[t],i=n[t];return a===i?0:null==a?1:null==i?-1:a<i?"asc"===s?-1:1:"asc"===s?1:-1}):e}handleSort(e){if(!this.hasAttribute("sortable")||!e.sortable)return;let t="asc";this.internalSortColumn===e.key&&("asc"===this.internalSortDirection?t="desc":"desc"===this.internalSortDirection&&(t=null)),this.internalSortColumn=t?e.key:void 0,this.internalSortDirection=t,this.dispatchEvent(new CustomEvent("db-sort-change",{bubbles:!0,composed:!0,detail:{column:e.key,direction:t}})),this.render()}handleRowSelect(e,t,s){s?.stopPropagation();let n;n=this.hasAttribute("multi-select")?t?[...this.internalSelectedRows,e]:this.internalSelectedRows.filter(t=>t!==e):t?[e]:[],this.internalSelectedRows=n,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:n}})),this.render()}handleSelectAll(e){const t=e?this.data.map((e,t)=>this.getRowKey(e,t)):[];this.internalSelectedRows=t,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:t}})),this.render()}getPaginatedData(){const e=this.getSortedData();if(!this.hasAttribute("pagination"))return e;const t=Number(this.getAttribute("page-size")||10),s=Number(this.getAttribute("total-items")||e.length),n=Math.max(1,Math.ceil(s/t)),a=(Math.min(this.internalPage,n)-1)*t;return e.slice(a,a+t)}createSortIcon(t){const s=document.createElement("span");s.className="designbase-wc-table__sort-icon";if(!(this.internalSortColumn===t.key&&Boolean(this.internalSortDirection))){s.classList.add("designbase-wc-table__sort-icon--idle");const t=document.createElement("span");return t.className="designbase-wc-table__sort-icon-stack",t.append(e("chevron-up",10),e("chevron-down",10)),s.append(t),s}return s.classList.add("asc"===this.internalSortDirection?"designbase-wc-table__sort-icon--asc":"designbase-wc-table__sort-icon--desc"),s.append(e("asc"===this.internalSortDirection?"chevron-up":"chevron-down",14)),s}createCheckbox(e){const t=document.createElement("db-checkbox");return t.setAttribute("size","s"),t.setAttribute("has-label","false"),e.checked&&t.setAttribute("checked",""),e.indeterminate&&t.setAttribute("indeterminate",""),e.stopPropagation&&t.addEventListener("click",e=>e.stopPropagation()),t.addEventListener("db-change",t=>{const s=t.detail;e.onChange?.(s.checked)}),t}render(){const e=this.getAttribute("size")||"m",n=this.getAttribute("variant")||"default",a=t.includes(e)?e:"m",i=s.includes(n)?n:"default",c=this.columns,r=this.getPaginatedData(),o=this.getSortedData(),l=this.hasAttribute("loading");l?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy");const d=this.hasAttribute("selectable"),b=this.hasAttribute("sortable"),h=this.getAttribute("empty-message")||"데이터가 없습니다.";if(this.className=["designbase-wc-table",`designbase-wc-table--${a}`,`designbase-wc-table--${i}`,d&&"designbase-wc-table--selectable",b&&"designbase-wc-table--sortable",l&&"designbase-wc-table--loading"].filter(Boolean).join(" "),this.replaceChildren(),l){const e=document.createElement("div");e.className="designbase-wc-table__loading";const t=document.createElement("div");t.className="designbase-wc-table__loading-spinner";const s=document.createElement("span");return s.textContent="로딩 중...",e.append(t,s),void this.append(e)}const u=this.getAttribute("title"),m=this.hasAttribute("show-count-badge");if(u||m){const e=document.createElement("div");e.className="designbase-wc-table__header";const t=document.createElement("div");if(t.className="designbase-wc-table__header-left",u){const e=document.createElement("h3");e.className="designbase-wc-table__title",e.textContent=u,t.append(e)}if(m){const e=document.createElement("db-badge");e.setAttribute("count",String(this.data.length)),e.setAttribute("type","number"),e.setAttribute("variant","primary"),e.setAttribute("size","s"),t.append(e)}e.append(t),this.append(e)}const g=document.createElement("div");g.className="designbase-wc-table__container";const p=document.createElement("table");p.className="designbase-wc-table__table";const w=document.createElement("thead");w.className="designbase-wc-table__thead";const _=document.createElement("tr");_.className="designbase-wc-table__tr";const A=r.map((e,t)=>this.getRowKey(e,t)),S=A.filter(e=>this.internalSelectedRows.includes(e)),E=this.hasAttribute("clickable");if(d){const e=document.createElement("th");e.className="designbase-wc-table__th designbase-wc-table__th--checkbox";const t=this.createCheckbox({checked:A.length>0&&S.length===A.length,indeterminate:S.length>0&&S.length<A.length,onChange:e=>this.handleSelectAll(e)});e.append(t),_.append(e)}c.forEach(e=>{const t=document.createElement("th");t.className=["designbase-wc-table__th",`designbase-wc-table__th--${e.align||"left"}`,b&&e.sortable&&"designbase-wc-table__th--sortable",this.internalSortColumn===e.key&&this.internalSortDirection&&"designbase-wc-table__th--sorted"].filter(Boolean).join(" "),e.width&&(t.style.width="number"==typeof e.width?`${e.width}px`:e.width);const s=document.createElement("div");s.className="designbase-wc-table__th-content";const n=document.createElement("span");n.className="designbase-wc-table__th-text",n.textContent=e.header,s.append(n),b&&e.sortable&&s.append(this.createSortIcon(e)),t.append(s),b&&e.sortable&&t.addEventListener("click",()=>this.handleSort(e)),_.append(t)}),w.append(_);const f=document.createElement("tbody");if(f.className="designbase-wc-table__tbody",0===o.length){const e=document.createElement("tr");e.className="designbase-wc-table__tr";const t=document.createElement("td");t.className="designbase-wc-table__td designbase-wc-table__td--empty",t.colSpan=Math.max(c.length+(d?1:0),1);const s=document.createElement("db-empty-state");s.setAttribute("title","데이터가 없습니다"),s.setAttribute("description",h),s.setAttribute("variant","no-data"),s.setAttribute("size","m"),t.append(s),e.append(t),f.append(e)}else r.forEach((e,t)=>{const s=this.getRowKey(e,t),n=this.internalSelectedRows.includes(s),a=document.createElement("tr");if(a.className=["designbase-wc-table__tr",E&&"designbase-wc-table__tr--clickable",n&&"designbase-wc-table__tr--selected"].filter(Boolean).join(" "),E&&a.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-row-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}),d){const e=document.createElement("td");e.className="designbase-wc-table__td designbase-wc-table__td--checkbox";const t=this.createCheckbox({checked:n,stopPropagation:!0,onChange:e=>this.handleRowSelect(s,e)});e.append(t),a.append(e)}c.forEach(t=>{const s=document.createElement("td");s.className=["designbase-wc-table__td",`designbase-wc-table__td--${t.align||"left"}`].join(" "),s.textContent=String(e[t.key]??""),a.append(s)}),f.append(a)});if(p.append(w,f),g.append(p),this.append(g),this.hasAttribute("pagination")){const e=Number(this.getAttribute("page-size")||10),t=Number(this.getAttribute("total-items")||o.length),s=Math.max(1,Math.ceil(t/e)),n=document.createElement("div");n.className="designbase-wc-table__footer";const i=document.createElement("db-pagination");i.setAttribute("current-page",String(this.internalPage)),i.setAttribute("total-pages",String(s)),i.setAttribute("size",a),i.setAttribute("show-first-last",""),i.addEventListener("db-change",e=>{const t=Number(e.detail?.page||1);this.internalPage=t,this.dispatchEvent(new CustomEvent("db-page-change",{bubbles:!0,composed:!0,detail:{page:t}})),this.render()}),n.append(i),this.append(n)}}}customElements.get("db-table")||customElements.define("db-table",DbTable);export{DbTable};
+import{dbText as e}from"../core/i18n.js";import{createDbIcon as t}from"./db-icons.js";import{TABLE_SIZES as s,TABLE_VARIANTS as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbTable extends HTMLElement{constructor(){super(...arguments),this.internalSelectedRows=[],this.internalSortDirection=null,this.internalPage=1}static get observedAttributes(){return["columns","data","title","size","variant","empty-message","sortable","sort-column","sort-direction","selectable","multi-select","selected-rows","row-key","loading","pagination","page","page-size","total-items","show-count-badge","clickable"]}get columns(){try{return JSON.parse(this.getAttribute("columns")||"[]")}catch{return[]}}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get data(){try{return JSON.parse(this.getAttribute("data")||"[]")}catch{return[]}}set data(e){this.setAttribute("data","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(e){"selected-rows"===e&&this.syncSelectedRowsFromAttribute(),"sort-column"!==e&&"sort-direction"!==e||this.syncSortFromAttributes(),"page"===e&&(this.internalPage=Number(this.getAttribute("page")||1)),this.render()}syncSelectedRowsFromAttribute(){try{this.internalSelectedRows=JSON.parse(this.getAttribute("selected-rows")||"[]")}catch{this.internalSelectedRows=[]}}syncSortFromAttributes(){const e=this.getAttribute("sort-column"),t=this.getAttribute("sort-direction");this.internalSortColumn=e||void 0,this.internalSortDirection="asc"===t||"desc"===t?t:null}getRowKey(e,t){const s=e[this.getAttribute("row-key")||"id"];return String(null!=s?s:t)}getSortedData(){const e=this.data,t=this.getAttribute("sort-column")||this.internalSortColumn,s=this.getAttribute("sort-direction")||this.internalSortDirection;if(!t||!s)return e;const n=this.columns.find(e=>e.key===t);return n?.sortable?[...e].sort((e,n)=>{const a=e[t],i=n[t];return a===i?0:null==a?1:null==i?-1:a<i?"asc"===s?-1:1:"asc"===s?1:-1}):e}handleSort(e){if(!this.hasAttribute("sortable")||!e.sortable)return;let t="asc";this.internalSortColumn===e.key&&("asc"===this.internalSortDirection?t="desc":"desc"===this.internalSortDirection&&(t=null)),this.internalSortColumn=t?e.key:void 0,this.internalSortDirection=t,this.dispatchEvent(new CustomEvent("db-sort-change",{bubbles:!0,composed:!0,detail:{column:e.key,direction:t}})),this.render()}handleRowSelect(e,t,s){s?.stopPropagation();let n;n=this.hasAttribute("multi-select")?t?[...this.internalSelectedRows,e]:this.internalSelectedRows.filter(t=>t!==e):t?[e]:[],this.internalSelectedRows=n,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:n}})),this.render()}handleSelectAll(e){const t=e?this.data.map((e,t)=>this.getRowKey(e,t)):[];this.internalSelectedRows=t,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:t}})),this.render()}getPaginatedData(){const e=this.getSortedData();if(!this.hasAttribute("pagination"))return e;const t=Number(this.getAttribute("page-size")||10),s=Number(this.getAttribute("total-items")||e.length),n=Math.max(1,Math.ceil(s/t)),a=(Math.min(this.internalPage,n)-1)*t;return e.slice(a,a+t)}createSortIcon(e){const s=document.createElement("span");s.className="designbase-wc-table__sort-icon";if(!(this.internalSortColumn===e.key&&Boolean(this.internalSortDirection))){s.classList.add("designbase-wc-table__sort-icon--idle");const e=document.createElement("span");return e.className="designbase-wc-table__sort-icon-stack",e.append(t("chevron-up",10),t("chevron-down",10)),s.append(e),s}return s.classList.add("asc"===this.internalSortDirection?"designbase-wc-table__sort-icon--asc":"designbase-wc-table__sort-icon--desc"),s.append(t("asc"===this.internalSortDirection?"chevron-up":"chevron-down",14)),s}createCheckbox(e){const t=document.createElement("db-checkbox");return t.setAttribute("size","s"),t.setAttribute("has-label","false"),e.checked&&t.setAttribute("checked",""),e.indeterminate&&t.setAttribute("indeterminate",""),e.stopPropagation&&t.addEventListener("click",e=>e.stopPropagation()),t.addEventListener("db-change",t=>{const s=t.detail;e.onChange?.(s.checked)}),t}render(){const t=this.getAttribute("size")||"m",a=this.getAttribute("variant")||"default",i=s.includes(t)?t:"m",c=n.includes(a)?a:"default",r=this.columns,o=this.getPaginatedData(),l=this.getSortedData(),d=this.hasAttribute("loading");d?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy");const b=this.hasAttribute("selectable"),h=this.hasAttribute("sortable"),u=this.getAttribute("empty-message")||"데이터가 없습니다.";if(this.className=["designbase-wc-table",`designbase-wc-table--${i}`,`designbase-wc-table--${c}`,b&&"designbase-wc-table--selectable",h&&"designbase-wc-table--sortable",d&&"designbase-wc-table--loading"].filter(Boolean).join(" "),this.replaceChildren(),d){const t=document.createElement("div");t.className="designbase-wc-table__loading";const s=document.createElement("div");s.className="designbase-wc-table__loading-spinner";const n=document.createElement("span");return n.textContent=e("로딩 중..."),t.append(s,n),void this.append(t)}const m=this.getAttribute("title"),g=this.hasAttribute("show-count-badge");if(m||g){const e=document.createElement("div");e.className="designbase-wc-table__header";const t=document.createElement("div");if(t.className="designbase-wc-table__header-left",m){const e=document.createElement("h3");e.className="designbase-wc-table__title",e.textContent=m,t.append(e)}if(g){const e=document.createElement("db-badge");e.setAttribute("count",String(this.data.length)),e.setAttribute("type","number"),e.setAttribute("variant","primary"),e.setAttribute("size","s"),t.append(e)}e.append(t),this.append(e)}const p=document.createElement("div");p.className="designbase-wc-table__container";const w=document.createElement("table");w.className="designbase-wc-table__table";const _=document.createElement("thead");_.className="designbase-wc-table__thead";const A=document.createElement("tr");A.className="designbase-wc-table__tr";const S=o.map((e,t)=>this.getRowKey(e,t)),E=S.filter(e=>this.internalSelectedRows.includes(e)),f=this.hasAttribute("clickable");if(b){const e=document.createElement("th");e.className="designbase-wc-table__th designbase-wc-table__th--checkbox";const t=this.createCheckbox({checked:S.length>0&&E.length===S.length,indeterminate:E.length>0&&E.length<S.length,onChange:e=>this.handleSelectAll(e)});e.append(t),A.append(e)}r.forEach(e=>{const t=document.createElement("th");t.className=["designbase-wc-table__th",`designbase-wc-table__th--${e.align||"left"}`,h&&e.sortable&&"designbase-wc-table__th--sortable",this.internalSortColumn===e.key&&this.internalSortDirection&&"designbase-wc-table__th--sorted"].filter(Boolean).join(" "),e.width&&(t.style.width="number"==typeof e.width?`${e.width}px`:e.width);const s=document.createElement("div");s.className="designbase-wc-table__th-content";const n=document.createElement("span");n.className="designbase-wc-table__th-text",n.textContent=e.header,s.append(n),h&&e.sortable&&s.append(this.createSortIcon(e)),t.append(s),h&&e.sortable&&t.addEventListener("click",()=>this.handleSort(e)),A.append(t)}),_.append(A);const y=document.createElement("tbody");if(y.className="designbase-wc-table__tbody",0===l.length){const t=document.createElement("tr");t.className="designbase-wc-table__tr";const s=document.createElement("td");s.className="designbase-wc-table__td designbase-wc-table__td--empty",s.colSpan=Math.max(r.length+(b?1:0),1);const n=document.createElement("db-empty-state");n.setAttribute("title",e("데이터가 없습니다")),n.setAttribute("description",u),n.setAttribute("variant","no-data"),n.setAttribute("size","m"),s.append(n),t.append(s),y.append(t)}else o.forEach((e,t)=>{const s=this.getRowKey(e,t),n=this.internalSelectedRows.includes(s),a=document.createElement("tr");if(a.className=["designbase-wc-table__tr",f&&"designbase-wc-table__tr--clickable",n&&"designbase-wc-table__tr--selected"].filter(Boolean).join(" "),f&&a.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-row-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}),b){const e=document.createElement("td");e.className="designbase-wc-table__td designbase-wc-table__td--checkbox";const t=this.createCheckbox({checked:n,stopPropagation:!0,onChange:e=>this.handleRowSelect(s,e)});e.append(t),a.append(e)}r.forEach(t=>{const s=document.createElement("td");s.className=["designbase-wc-table__td",`designbase-wc-table__td--${t.align||"left"}`].join(" "),s.textContent=String(e[t.key]??""),a.append(s)}),y.append(a)});if(w.append(_,y),p.append(w),this.append(p),this.hasAttribute("pagination")){const e=Number(this.getAttribute("page-size")||10),t=Number(this.getAttribute("total-items")||l.length),s=Math.max(1,Math.ceil(t/e)),n=document.createElement("div");n.className="designbase-wc-table__footer";const a=document.createElement("db-pagination");a.setAttribute("current-page",String(this.internalPage)),a.setAttribute("total-pages",String(s)),a.setAttribute("size",i),a.setAttribute("show-first-last",""),a.addEventListener("db-change",e=>{const t=Number(e.detail?.page||1);this.internalPage=t,this.dispatchEvent(new CustomEvent("db-page-change",{bubbles:!0,composed:!0,detail:{page:t}})),this.render()}),n.append(a),this.append(n)}}}customElements.get("db-table")||customElements.define("db-table",DbTable);export{DbTable};

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

@@ -1 +1 @@
-import{TESTIMONIAL_VARIANTS as t}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const e="designbase-wc-testimonial";class DbTestimonial extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["quote","author","role","company","avatar","avatar-initials","rating","max-rating","variant","logo","logo-alt","image","image-alt","tone","align"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}build(){this.innerEl=document.createElement("div"),this.quoteEl=document.createElement("p"),this.quoteEl.className=`${e}__quote`,this.backgroundEl=document.createElement("div"),this.backgroundEl.className=`${e}__background`,this.backgroundEl.hidden=!0,this.backgroundEl.setAttribute("aria-hidden","true"),this.logoWrapEl=document.createElement("div"),this.logoWrapEl.className=`${e}__logo`,this.logoWrapEl.hidden=!0,this.logoEl=document.createElement("img"),this.logoEl.alt="",this.logoWrapEl.append(this.logoEl),this.footerEl=document.createElement("div"),this.footerEl.className=`${e}__footer`,this.avatarWrapEl=document.createElement("div"),this.avatarWrapEl.className=`${e}__avatar`,this.avatarEl=document.createElement("db-avatar"),this.avatarEl.className=`${e}__avatar-image`,this.avatarWrapEl.append(this.avatarEl);const t=document.createElement("div");t.className=`${e}__meta`,this.authorEl=document.createElement("span"),this.authorEl.className=`${e}__author`,this.roleEl=document.createElement("span"),this.roleEl.className=`${e}__role`,this.ratingEl=document.createElement("db-rating"),this.ratingEl.className=`${e}__rating`,this.ratingEl.setAttribute("display","stars"),this.ratingEl.setAttribute("variant","inline"),this.ratingEl.setAttribute("allow-half",""),this.ratingEl.setAttribute("readonly",""),this.ratingEl.setAttribute("hover-effect","false"),this.ratingEl.setAttribute("color","primary"),this.ratingEl.hidden=!0,t.append(this.authorEl,this.roleEl,this.ratingEl),this.footerEl.append(this.avatarWrapEl,t),this.extraEl=document.createElement("div"),this.extraEl.className=`${e}__extra`,this.extraEl.hidden=!0,this.innerEl.append(this.logoWrapEl,this.quoteEl,this.footerEl,this.extraEl),this.append(this.backgroundEl,this.innerEl)}getVariant(){const e=this.getAttribute("variant")||"card";return t.includes(e)?e:"card"}getAvatarSize(){return"list"===this.getVariant()?"s":"m"}syncExtraContent(){if(!this.extraEl)return;const t=Array.from(this.childNodes).filter(t=>t!==this.innerEl&&t!==this.backgroundEl&&(t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&Boolean(t.textContent?.trim())));if(0===t.length)return this.extraEl.hidden=!0,void this.extraEl.replaceChildren();this.extraEl.hidden=!1,this.extraEl.replaceChildren(...t.map(t=>t.cloneNode(!0)))}updateUI(){const t=this.getAttribute("quote")||"",i=this.getAttribute("author")||"",a=this.getAttribute("role")||"",r=this.getAttribute("company")||"",l=this.getAttribute("avatar")||"",s=this.getAttribute("avatar-initials")||"",n=this.getAttribute("rating"),o=Number(this.getAttribute("max-rating")||5),h=null!==n&&""!==n?function clampRating(t,e){if("number"==typeof t&&!Number.isNaN(t))return t<0?0:t>e?e:Math.round(10*t)/10}(Number(n),o):void 0,u=this.getVariant(),E=this.getAttribute("logo")||"",d=this.getAttribute("logo-alt")||"",g=this.getAttribute("image")||"",c=this.getAttribute("image-alt")||"",m=this.getAttribute("tone")||"violet",b=this.getAttribute("align")||"left",v=[e,`${e}--variant-${u}`,`${e}--tone-${m}`,"left"!==b?`${e}--align-${b}`:""].filter(Boolean).join(" ");if(this.className=v,this.innerEl&&(this.innerEl.className=`${e}__inner`),this.quoteEl&&(this.quoteEl.textContent=t?`“${t}”`:""),this.backgroundEl){const t="image"===u&&Boolean(g);this.backgroundEl.hidden=!t,t?(this.backgroundEl.style.backgroundImage=`url("${g}")`,this.backgroundEl.setAttribute("role","img"),this.backgroundEl.setAttribute("aria-label",c||"Testimonial background"),this.backgroundEl.removeAttribute("aria-hidden")):(this.backgroundEl.style.removeProperty("background-image"),this.backgroundEl.removeAttribute("role"),this.backgroundEl.removeAttribute("aria-label"),this.backgroundEl.setAttribute("aria-hidden","true"))}if(this.logoWrapEl&&this.logoEl){const t="logo"===u&&Boolean(E);this.logoWrapEl.hidden=!t,t?(this.logoEl.src=E,this.logoEl.alt=d||"logo"):(this.logoEl.removeAttribute("src"),this.logoEl.alt="")}this.authorEl&&(this.authorEl.textContent=i);const p=[a,r].filter(Boolean).join(" · ");this.roleEl&&(this.roleEl.textContent=p,this.roleEl.hidden=!p);const A=Boolean(l||s);this.avatarWrapEl&&(this.avatarWrapEl.hidden=!A),this.avatarEl&&A&&(this.avatarEl.setAttribute("size",this.getAvatarSize()),l?this.avatarEl.setAttribute("src",l):this.avatarEl.removeAttribute("src"),s?this.avatarEl.setAttribute("initials",s):this.avatarEl.removeAttribute("initials"),this.avatarEl.setAttribute("alt",`${i} 프로필 이미지`)),this.ratingEl&&("number"==typeof h?(this.ratingEl.hidden=!1,this.ratingEl.removeAttribute("hidden"),this.ratingEl.style.removeProperty("display"),this.ratingEl.setAttribute("value",String(h)),this.ratingEl.setAttribute("max-value",String(o)),this.ratingEl.setAttribute("size","s")):(this.ratingEl.hidden=!0,this.ratingEl.setAttribute("hidden",""),this.ratingEl.style.display="none",this.ratingEl.removeAttribute("value"))),this.syncExtraContent()}}customElements.get("db-testimonial")||customElements.define("db-testimonial",DbTestimonial);export{DbTestimonial};
+import{dbFormat as t}from"../core/i18n.js";import{TESTIMONIAL_VARIANTS as e}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const i="designbase-wc-testimonial";class DbTestimonial extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["quote","author","role","company","avatar","avatar-initials","rating","max-rating","variant","logo","logo-alt","image","image-alt","tone","align"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}build(){this.innerEl=document.createElement("div"),this.quoteEl=document.createElement("p"),this.quoteEl.className=`${i}__quote`,this.backgroundEl=document.createElement("div"),this.backgroundEl.className=`${i}__background`,this.backgroundEl.hidden=!0,this.backgroundEl.setAttribute("aria-hidden","true"),this.logoWrapEl=document.createElement("div"),this.logoWrapEl.className=`${i}__logo`,this.logoWrapEl.hidden=!0,this.logoEl=document.createElement("img"),this.logoEl.alt="",this.logoWrapEl.append(this.logoEl),this.footerEl=document.createElement("div"),this.footerEl.className=`${i}__footer`,this.avatarWrapEl=document.createElement("div"),this.avatarWrapEl.className=`${i}__avatar`,this.avatarEl=document.createElement("db-avatar"),this.avatarEl.className=`${i}__avatar-image`,this.avatarWrapEl.append(this.avatarEl);const t=document.createElement("div");t.className=`${i}__meta`,this.authorEl=document.createElement("span"),this.authorEl.className=`${i}__author`,this.roleEl=document.createElement("span"),this.roleEl.className=`${i}__role`,this.ratingEl=document.createElement("db-rating"),this.ratingEl.className=`${i}__rating`,this.ratingEl.setAttribute("display","stars"),this.ratingEl.setAttribute("variant","inline"),this.ratingEl.setAttribute("allow-half",""),this.ratingEl.setAttribute("readonly",""),this.ratingEl.setAttribute("hover-effect","false"),this.ratingEl.setAttribute("color","primary"),this.ratingEl.hidden=!0,t.append(this.authorEl,this.roleEl,this.ratingEl),this.footerEl.append(this.avatarWrapEl,t),this.extraEl=document.createElement("div"),this.extraEl.className=`${i}__extra`,this.extraEl.hidden=!0,this.innerEl.append(this.logoWrapEl,this.quoteEl,this.footerEl,this.extraEl),this.append(this.backgroundEl,this.innerEl)}getVariant(){const t=this.getAttribute("variant")||"card";return e.includes(t)?t:"card"}getAvatarSize(){return"list"===this.getVariant()?"s":"m"}syncExtraContent(){if(!this.extraEl)return;const t=Array.from(this.childNodes).filter(t=>t!==this.innerEl&&t!==this.backgroundEl&&(t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&Boolean(t.textContent?.trim())));if(0===t.length)return this.extraEl.hidden=!0,void this.extraEl.replaceChildren();this.extraEl.hidden=!1,this.extraEl.replaceChildren(...t.map(t=>t.cloneNode(!0)))}updateUI(){const e=this.getAttribute("quote")||"",a=this.getAttribute("author")||"",r=this.getAttribute("role")||"",l=this.getAttribute("company")||"",s=this.getAttribute("avatar")||"",n=this.getAttribute("avatar-initials")||"",o=this.getAttribute("rating"),h=Number(this.getAttribute("max-rating")||5),u=null!==o&&""!==o?function clampRating(t,e){if("number"==typeof t&&!Number.isNaN(t))return t<0?0:t>e?e:Math.round(10*t)/10}(Number(o),h):void 0,E=this.getVariant(),d=this.getAttribute("logo")||"",g=this.getAttribute("logo-alt")||"",c=this.getAttribute("image")||"",m=this.getAttribute("image-alt")||"",b=this.getAttribute("tone")||"violet",v=this.getAttribute("align")||"left",p=[i,`${i}--variant-${E}`,`${i}--tone-${b}`,"left"!==v?`${i}--align-${v}`:""].filter(Boolean).join(" ");if(this.className=p,this.innerEl&&(this.innerEl.className=`${i}__inner`),this.quoteEl&&(this.quoteEl.textContent=e?`“${e}”`:""),this.backgroundEl){const t="image"===E&&Boolean(c);this.backgroundEl.hidden=!t,t?(this.backgroundEl.style.backgroundImage=`url("${c}")`,this.backgroundEl.setAttribute("role","img"),this.backgroundEl.setAttribute("aria-label",m||"Testimonial background"),this.backgroundEl.removeAttribute("aria-hidden")):(this.backgroundEl.style.removeProperty("background-image"),this.backgroundEl.removeAttribute("role"),this.backgroundEl.removeAttribute("aria-label"),this.backgroundEl.setAttribute("aria-hidden","true"))}if(this.logoWrapEl&&this.logoEl){const t="logo"===E&&Boolean(d);this.logoWrapEl.hidden=!t,t?(this.logoEl.src=d,this.logoEl.alt=g||"logo"):(this.logoEl.removeAttribute("src"),this.logoEl.alt="")}this.authorEl&&(this.authorEl.textContent=a);const A=[r,l].filter(Boolean).join(" · ");this.roleEl&&(this.roleEl.textContent=A,this.roleEl.hidden=!A);const _=Boolean(s||n);this.avatarWrapEl&&(this.avatarWrapEl.hidden=!_),this.avatarEl&&_&&(this.avatarEl.setAttribute("size",this.getAvatarSize()),s?this.avatarEl.setAttribute("src",s):this.avatarEl.removeAttribute("src"),n?this.avatarEl.setAttribute("initials",n):this.avatarEl.removeAttribute("initials"),this.avatarEl.setAttribute("alt",t("{0} 프로필 이미지",[a]))),this.ratingEl&&("number"==typeof u?(this.ratingEl.hidden=!1,this.ratingEl.removeAttribute("hidden"),this.ratingEl.style.removeProperty("display"),this.ratingEl.setAttribute("value",String(u)),this.ratingEl.setAttribute("max-value",String(h)),this.ratingEl.setAttribute("size","s")):(this.ratingEl.hidden=!0,this.ratingEl.setAttribute("hidden",""),this.ratingEl.style.display="none",this.ratingEl.removeAttribute("value"))),this.syncExtraContent()}}customElements.get("db-testimonial")||customElements.define("db-testimonial",DbTestimonial);export{DbTestimonial};