@designbasekorea/ui-wc 0.13.0 → 0.15.0

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

@@ -1 +1 @@
-import{dbText as e}from"../core/i18n.js";import{createShareIcon as t}from"./db-share-icons.js";import{sanitizeHref as n}from"../core/safe-url.js";import{FOOTER_SIZES as s,FOOTER_VARIANTS as o}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a={youtube:"youtube",instagram:"instagram",x:"x",linkedin:"linkedin",facebook:"facebook",email:"mail"};function parseJson(e,t){if(!e)return t;try{return JSON.parse(e)??t}catch{return t}}class DbFooter extends HTMLElement{constructor(){super(...arguments),this.brandContent=null,this.bottomContent=null}static get observedAttributes(){return["columns","legal-links","social-links","company-info","family-sites","tagline","copyright","logo-type","variant","size","full-width","show-logo","show-social","family-site-label"]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}get columns(){return parseJson(this.getAttribute("columns"),[])}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get legalLinks(){return parseJson(this.getAttribute("legal-links"),[])}set legalLinks(e){this.setAttribute("legal-links","string"==typeof e?e:JSON.stringify(e))}get socialLinks(){return parseJson(this.getAttribute("social-links"),[])}set socialLinks(e){this.setAttribute("social-links","string"==typeof e?e:JSON.stringify(e))}get companyInfo(){return parseJson(this.getAttribute("company-info"),{})}set companyInfo(e){this.setAttribute("company-info","string"==typeof e?e:JSON.stringify(e))}get familySites(){return parseJson(this.getAttribute("family-sites"),[])}set familySites(e){this.setAttribute("family-sites","string"==typeof e?e:JSON.stringify(e))}syncHostClasses(){const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",n=s.includes(e)?e:"m",a=o.includes(t)?t:"default",i=[...this.classList].filter(e=>!e.startsWith("designbase-wc-footer"));this.className=[...i,"designbase-wc-footer",`designbase-wc-footer--${n}`,`designbase-wc-footer--${a}`,this.hasAttribute("full-width")&&"designbase-wc-footer--full-width"].filter(Boolean).join(" ")}dispatchLinkClick(e,t){this.dispatchEvent(new CustomEvent("db-link-click",{bubbles:!0,composed:!0,detail:{link:e,source:t}}))}createLink(e,t,s){const o=document.createElement("a");return o.href=n(e.href,"#"),o.className=[t,e.emphasize&&`${t}--emphasize`].filter(Boolean).join(" "),o.textContent=e.label,e.external&&(o.target="_blank",o.rel="noopener noreferrer"),o.addEventListener("click",t=>{t.metaKey||t.ctrlKey||t.shiftKey||t.altKey||0!==t.button||(t.preventDefault(),this.dispatchLinkClick(e,s))}),o}createSocialLink(e,s){const o=document.createElement("a");o.href=n(e.href,"#"),o.className="designbase-wc-footer__social-link",o.target="_blank",o.rel="noopener noreferrer",o.setAttribute("aria-label",e.label||e.platform);const i=a[e.platform]||"share-alt";return o.append(t(i,s)),o.addEventListener("click",t=>{t.preventDefault(),this.dispatchEvent(new CustomEvent("db-social-click",{bubbles:!0,composed:!0,detail:{link:e}}))}),o}createCompanyInfoRows(e){const t=[],n=[];e.companyName&&n.push(e.companyName),e.representative&&n.push(`대표: ${e.representative}`),e.businessNumber&&n.push(`사업자등록번호: ${e.businessNumber}`),n.length&&t.push(n.join(" | "));const s=[];e.address&&s.push(e.address),e.phone&&s.push(`대표전화: ${e.phone}`),e.customerCenter&&s.push(`고객센터: ${e.customerCenter}`),s.length&&t.push(s.join(" | "));const o=[];return e.email&&o.push(`이메일: ${e.email}`),e.mailOrderNumber&&o.push(`통신판매업신고: ${e.mailOrderNumber}`),e.hostingProvider&&o.push(`호스팅: ${e.hostingProvider}`),o.length&&t.push(o.join(" | ")),t}showLogo(){return!this.hasAttribute("show-logo")||"false"!==this.getAttribute("show-logo")}createLogo(){const e=document.createElement("div");e.className="designbase-wc-footer__logo";const t=document.createElement("db-logo");return t.setAttribute("type",this.getAttribute("logo-type")||"designbase"),t.setAttribute("size","s"),t.setAttribute("clickable",""),t.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),e.append(t),e}renderBrand(e,t={}){const{showTagline:n=!0}=t,s=document.createElement("div");if(s.className="designbase-wc-footer__brand",this.brandContent)return s.append(this.brandContent),s;this.showLogo()&&s.append(this.createLogo());const o=this.getAttribute("tagline");if(n&&o){const e=document.createElement("p");e.className="designbase-wc-footer__tagline",e.textContent=o,s.append(e)}const a=this.socialLinks;if(a.length&&(!this.hasAttribute("show-social")||"false"!==this.getAttribute("show-social"))){const t=document.createElement("div");t.className="designbase-wc-footer__social",a.forEach(n=>t.append(this.createSocialLink(n,e))),s.append(t)}return s}renderColumns(e){if(!e.length)return null;const t=document.createElement("div");return t.className="designbase-wc-footer__columns",t.style.setProperty("--db-footer-columns",String(Math.min(e.length,4))),e.forEach(e=>{const n=document.createElement("div");n.className="designbase-wc-footer__column";const s=document.createElement("h3");s.className="designbase-wc-footer__column-title",s.textContent=e.title,n.append(s);const o=document.createElement("ul");o.className="designbase-wc-footer__column-list",e.items.forEach(e=>{const t=document.createElement("li");t.append(this.createLink(e,"designbase-wc-footer__column-link","column")),o.append(t)}),n.append(o),t.append(n)}),t}createLegalNav(t){const n=document.createElement("nav");n.className="designbase-wc-footer__legal-nav",n.setAttribute("aria-label",e("법적 고지"));const s=document.createElement("ul");return s.className="designbase-wc-footer__legal-list",t.forEach((e,n)=>{const o=document.createElement("li");if(o.append(this.createLink(e,"designbase-wc-footer__legal-link","legal")),s.append(o),n<t.length-1){const e=document.createElement("span");e.className="designbase-wc-footer__legal-divider",e.setAttribute("aria-hidden","true"),e.textContent="|",o.append(e)}}),n.append(s),n}renderLegalBar(e,t){if(!e.length&&!t.length)return null;const n=document.createElement("div");if(n.className="designbase-wc-footer__legal-bar",e.length&&n.append(this.createLegalNav(e)),t.length){const e=document.createElement("div");e.className="designbase-wc-footer__family-site";const s=document.createElement("select");s.className="designbase-wc-footer__family-select",s.setAttribute("aria-label",this.getAttribute("family-site-label")||"패밀리 사이트");const o=document.createElement("option");o.value="",o.textContent=this.getAttribute("family-site-label")||"패밀리 사이트",o.disabled=!0,o.selected=!0,s.append(o),t.forEach(e=>{const t=document.createElement("option");t.value=e.href,t.textContent=e.label,t.dataset.id=e.id,s.append(t)}),s.addEventListener("change",()=>{const e=t.find(e=>e.href===s.value);e&&(s.selectedIndex=0,this.dispatchEvent(new CustomEvent("db-family-site-change",{bubbles:!0,composed:!0,detail:{site:e}})))}),e.append(s),n.append(e)}return n}renderCompanyInfo(e){const t=this.createCompanyInfoRows(e);if(!t.length)return null;const n=document.createElement("div");return n.className="designbase-wc-footer__company",t.forEach(e=>{const t=document.createElement("p");t.className="designbase-wc-footer__company-line",t.textContent=e,n.append(t)}),n}createCopyright(e){const t=document.createElement("div");t.className="designbase-wc-footer__bottom";const n=document.createElement("p");return n.className="designbase-wc-footer__copyright",n.textContent=e,t.append(n),this.bottomContent&&t.append(this.bottomContent),t}renderMinimal(e,t,n){const s=document.createElement("div");s.className="designbase-wc-footer__minimal-bar";const o=document.createElement("div");if(o.className="designbase-wc-footer__minimal-start",this.brandContent?o.append(this.brandContent):this.showLogo()&&o.append(this.createLogo()),s.append(o),t.length){const e=document.createElement("div");e.className="designbase-wc-footer__minimal-legal",e.append(this.createLegalNav(t)),s.append(e)}e.append(s),e.append(this.createCopyright(n))}render(){this.syncHostClasses(),this.setAttribute("role","contentinfo");const e=this.getAttribute("variant")||"default",t=this.getAttribute("size")||"m",n="s"===t?18:"l"===t?22:20,s="default"===e?this.columns:[],o=this.legalLinks,a=this.companyInfo,i=this.familySites,r=this.getAttribute("copyright")||`© ${(new Date).getFullYear()} Designbase. All rights reserved.`;this.brandContent=this.querySelector('[slot="brand"]'),this.bottomContent=this.querySelector('[slot="bottom"]'),this.brandContent?.remove(),this.bottomContent?.remove(),this.replaceChildren();const l=document.createElement("div");if(l.className=["designbase-wc-footer__container",this.hasAttribute("full-width")&&"designbase-wc-footer__container--full-width"].filter(Boolean).join(" "),"minimal"===e)return this.renderMinimal(l,o,r),void this.append(l);const c=document.createElement("div");c.className="designbase-wc-footer__top",c.append(this.renderBrand(n,{showTagline:"compact"!==e}));const d=this.renderColumns(s);d&&c.append(d),l.append(c);const m=this.renderLegalBar(o,i);m&&l.append(m);const u=this.renderCompanyInfo(a);u&&l.append(u),l.append(this.createCopyright(r)),this.append(l)}}customElements.get("db-footer")||customElements.define("db-footer",DbFooter);export{DbFooter};
+import"./db-logo.js";import{dbText as e}from"../core/i18n.js";import{createShareIcon as t}from"./db-share-icons.js";import{sanitizeHref as n}from"../core/safe-url.js";import{FOOTER_SIZES as s,FOOTER_VARIANTS as o}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a={youtube:"youtube",instagram:"instagram",x:"x",linkedin:"linkedin",facebook:"facebook",email:"mail"};function parseJson(e,t){if(!e)return t;try{return JSON.parse(e)??t}catch{return t}}class DbFooter extends HTMLElement{constructor(){super(...arguments),this.brandContent=null,this.bottomContent=null}static get observedAttributes(){return["columns","legal-links","social-links","company-info","family-sites","tagline","copyright","logo-type","variant","size","full-width","show-logo","show-social","family-site-label"]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}get columns(){return parseJson(this.getAttribute("columns"),[])}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get legalLinks(){return parseJson(this.getAttribute("legal-links"),[])}set legalLinks(e){this.setAttribute("legal-links","string"==typeof e?e:JSON.stringify(e))}get socialLinks(){return parseJson(this.getAttribute("social-links"),[])}set socialLinks(e){this.setAttribute("social-links","string"==typeof e?e:JSON.stringify(e))}get companyInfo(){return parseJson(this.getAttribute("company-info"),{})}set companyInfo(e){this.setAttribute("company-info","string"==typeof e?e:JSON.stringify(e))}get familySites(){return parseJson(this.getAttribute("family-sites"),[])}set familySites(e){this.setAttribute("family-sites","string"==typeof e?e:JSON.stringify(e))}syncHostClasses(){const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",n=s.includes(e)?e:"m",a=o.includes(t)?t:"default",i=[...this.classList].filter(e=>!e.startsWith("designbase-wc-footer"));this.className=[...i,"designbase-wc-footer",`designbase-wc-footer--${n}`,`designbase-wc-footer--${a}`,this.hasAttribute("full-width")&&"designbase-wc-footer--full-width"].filter(Boolean).join(" ")}dispatchLinkClick(e,t){this.dispatchEvent(new CustomEvent("db-link-click",{bubbles:!0,composed:!0,detail:{link:e,source:t}}))}createLink(e,t,s){const o=document.createElement("a");return o.href=n(e.href,"#"),o.className=[t,e.emphasize&&`${t}--emphasize`].filter(Boolean).join(" "),o.textContent=e.label,e.external&&(o.target="_blank",o.rel="noopener noreferrer"),o.addEventListener("click",t=>{t.metaKey||t.ctrlKey||t.shiftKey||t.altKey||0!==t.button||(t.preventDefault(),this.dispatchLinkClick(e,s))}),o}createSocialLink(e,s){const o=document.createElement("a");o.href=n(e.href,"#"),o.className="designbase-wc-footer__social-link",o.target="_blank",o.rel="noopener noreferrer",o.setAttribute("aria-label",e.label||e.platform);const i=a[e.platform]||"share-alt";return o.append(t(i,s)),o.addEventListener("click",t=>{t.preventDefault(),this.dispatchEvent(new CustomEvent("db-social-click",{bubbles:!0,composed:!0,detail:{link:e}}))}),o}createCompanyInfoRows(e){const t=[],n=[];e.companyName&&n.push(e.companyName),e.representative&&n.push(`대표: ${e.representative}`),e.businessNumber&&n.push(`사업자등록번호: ${e.businessNumber}`),n.length&&t.push(n.join(" | "));const s=[];e.address&&s.push(e.address),e.phone&&s.push(`대표전화: ${e.phone}`),e.customerCenter&&s.push(`고객센터: ${e.customerCenter}`),s.length&&t.push(s.join(" | "));const o=[];return e.email&&o.push(`이메일: ${e.email}`),e.mailOrderNumber&&o.push(`통신판매업신고: ${e.mailOrderNumber}`),e.hostingProvider&&o.push(`호스팅: ${e.hostingProvider}`),o.length&&t.push(o.join(" | ")),t}showLogo(){return!this.hasAttribute("show-logo")||"false"!==this.getAttribute("show-logo")}createLogo(){const e=document.createElement("div");e.className="designbase-wc-footer__logo";const t=document.createElement("db-logo");return t.setAttribute("type",this.getAttribute("logo-type")||"designbase"),t.setAttribute("size","s"),t.setAttribute("clickable",""),t.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),e.append(t),e}renderBrand(e,t={}){const{showTagline:n=!0}=t,s=document.createElement("div");if(s.className="designbase-wc-footer__brand",this.brandContent)return s.append(this.brandContent),s;this.showLogo()&&s.append(this.createLogo());const o=this.getAttribute("tagline");if(n&&o){const e=document.createElement("p");e.className="designbase-wc-footer__tagline",e.textContent=o,s.append(e)}const a=this.socialLinks;if(a.length&&(!this.hasAttribute("show-social")||"false"!==this.getAttribute("show-social"))){const t=document.createElement("div");t.className="designbase-wc-footer__social",a.forEach(n=>t.append(this.createSocialLink(n,e))),s.append(t)}return s}renderColumns(e){if(!e.length)return null;const t=document.createElement("div");return t.className="designbase-wc-footer__columns",t.style.setProperty("--db-footer-columns",String(Math.min(e.length,4))),e.forEach(e=>{const n=document.createElement("div");n.className="designbase-wc-footer__column";const s=document.createElement("h3");s.className="designbase-wc-footer__column-title",s.textContent=e.title,n.append(s);const o=document.createElement("ul");o.className="designbase-wc-footer__column-list",e.items.forEach(e=>{const t=document.createElement("li");t.append(this.createLink(e,"designbase-wc-footer__column-link","column")),o.append(t)}),n.append(o),t.append(n)}),t}createLegalNav(t){const n=document.createElement("nav");n.className="designbase-wc-footer__legal-nav",n.setAttribute("aria-label",e("법적 고지"));const s=document.createElement("ul");return s.className="designbase-wc-footer__legal-list",t.forEach((e,n)=>{const o=document.createElement("li");if(o.append(this.createLink(e,"designbase-wc-footer__legal-link","legal")),s.append(o),n<t.length-1){const e=document.createElement("span");e.className="designbase-wc-footer__legal-divider",e.setAttribute("aria-hidden","true"),e.textContent="|",o.append(e)}}),n.append(s),n}renderLegalBar(e,t){if(!e.length&&!t.length)return null;const n=document.createElement("div");if(n.className="designbase-wc-footer__legal-bar",e.length&&n.append(this.createLegalNav(e)),t.length){const e=document.createElement("div");e.className="designbase-wc-footer__family-site";const s=document.createElement("select");s.className="designbase-wc-footer__family-select",s.setAttribute("aria-label",this.getAttribute("family-site-label")||"패밀리 사이트");const o=document.createElement("option");o.value="",o.textContent=this.getAttribute("family-site-label")||"패밀리 사이트",o.disabled=!0,o.selected=!0,s.append(o),t.forEach(e=>{const t=document.createElement("option");t.value=e.href,t.textContent=e.label,t.dataset.id=e.id,s.append(t)}),s.addEventListener("change",()=>{const e=t.find(e=>e.href===s.value);e&&(s.selectedIndex=0,this.dispatchEvent(new CustomEvent("db-family-site-change",{bubbles:!0,composed:!0,detail:{site:e}})))}),e.append(s),n.append(e)}return n}renderCompanyInfo(e){const t=this.createCompanyInfoRows(e);if(!t.length)return null;const n=document.createElement("div");return n.className="designbase-wc-footer__company",t.forEach(e=>{const t=document.createElement("p");t.className="designbase-wc-footer__company-line",t.textContent=e,n.append(t)}),n}createCopyright(e){const t=document.createElement("div");t.className="designbase-wc-footer__bottom";const n=document.createElement("p");return n.className="designbase-wc-footer__copyright",n.textContent=e,t.append(n),this.bottomContent&&t.append(this.bottomContent),t}renderMinimal(e,t,n){const s=document.createElement("div");s.className="designbase-wc-footer__minimal-bar";const o=document.createElement("div");if(o.className="designbase-wc-footer__minimal-start",this.brandContent?o.append(this.brandContent):this.showLogo()&&o.append(this.createLogo()),s.append(o),t.length){const e=document.createElement("div");e.className="designbase-wc-footer__minimal-legal",e.append(this.createLegalNav(t)),s.append(e)}e.append(s),e.append(this.createCopyright(n))}render(){this.syncHostClasses(),this.setAttribute("role","contentinfo");const e=this.getAttribute("variant")||"default",t=this.getAttribute("size")||"m",n="s"===t?18:"l"===t?22:20,s="default"===e?this.columns:[],o=this.legalLinks,a=this.companyInfo,i=this.familySites,r=this.getAttribute("copyright")||`© ${(new Date).getFullYear()} Designbase. All rights reserved.`;this.brandContent=this.querySelector('[slot="brand"]'),this.bottomContent=this.querySelector('[slot="bottom"]'),this.brandContent?.remove(),this.bottomContent?.remove(),this.replaceChildren();const l=document.createElement("div");if(l.className=["designbase-wc-footer__container",this.hasAttribute("full-width")&&"designbase-wc-footer__container--full-width"].filter(Boolean).join(" "),"minimal"===e)return this.renderMinimal(l,o,r),void this.append(l);const c=document.createElement("div");c.className="designbase-wc-footer__top",c.append(this.renderBrand(n,{showTagline:"compact"!==e}));const d=this.renderColumns(s);d&&c.append(d),l.append(c);const m=this.renderLegalBar(o,i);m&&l.append(m);const u=this.renderCompanyInfo(a);u&&l.append(u),l.append(this.createCopyright(r)),this.append(l)}}customElements.get("db-footer")||customElements.define("db-footer",DbFooter);export{DbFooter};

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

@@ -1,3 +1,5 @@
+import './db-badge.js';
+
 type DbGanttAssignee = {
     name: string;
     initials?: string;

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

@@ -1 +1 @@
-import{dbText as e,subscribeDbLocale as t,dbFormat as a,getDbLocale as s}from"../core/i18n.js";import{createDbIcon as r}from"./db-icons.js";import{rafThrottle as n}from"../core/dom.js";const i=["day","week"],o=["#86efac","#fde047","#93c5fd","#c4b5fd","#f9a8d4","#5eead4","#fdba74","#a5b4fc"],d=["일","월","화","수","목","금","토"],l=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];function parseDate(e){const[t,a,s]=e.split("-").map(Number);return new Date(t,a-1,s)}function toDateKey(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`}function addDays(e,t){const a=new Date(e);return a.setDate(a.getDate()+t),a}function daysBetween(e,t){const a=Date.UTC(e.getFullYear(),e.getMonth(),e.getDate()),s=Date.UTC(t.getFullYear(),t.getMonth(),t.getDate());return Math.round((s-a)/864e5)}function clampDate(e,t,a){return e<t?new Date(t):e>a?new Date(a):e}class DbGantt extends HTMLElement{constructor(){super(...arguments),this.collapsedGroups=new Set,this.dragState=null,this.reorderState=null,this.reorderDropIndex=null,this.suppressRender=!1,this.didDrag=!1,this.handlePointerMove=n(e=>{if(this.reorderState&&e.pointerId===this.reorderState.pointerId)return void this.updateReorderDropTarget(e.clientY);if(!this.dragState||e.pointerId!==this.dragState.pointerId)return;const t=this.getOption("scale",i,"day"),a=this.getNumber("cell-width","week"===t?72:44),{start:s,end:r}=this.getViewRange(),n=Math.round((e.clientX-this.dragState.startX)/a);0!==n&&(this.didDrag=!0);let o=new Date(this.dragState.originalStart),d=new Date(this.dragState.originalEnd);if("move"===this.dragState.mode?(o=addDays(this.dragState.originalStart,n),d=addDays(this.dragState.originalEnd,n)):"resize-start"===this.dragState.mode?(o=addDays(this.dragState.originalStart,n),o>d&&(o=new Date(d))):(d=addDays(this.dragState.originalEnd,n),d<o&&(d=new Date(o))),o=clampDate(o,s,r),d=clampDate(d,s,r),o>d)return;const l=this.items.find(e=>e.id===this.dragState.itemId);l&&this.applyBarGeometry(this.dragState.barEl,{...l,startDate:toDateKey(o),endDate:toDateKey(d)},s,a)}),this.handlePointerUp=e=>{if(this.reorderState&&e.pointerId===this.reorderState.pointerId)return void this.finishReorderDrag(e);if(!this.dragState||e.pointerId!==this.dragState.pointerId)return;const t=this.getOption("scale",i,"day"),a=this.getNumber("cell-width","week"===t?72:44),{start:s,end:r}=this.getViewRange(),n=Math.round((e.clientX-this.dragState.startX)/a);let o=new Date(this.dragState.originalStart),d=new Date(this.dragState.originalEnd);const l=this.dragState.mode,c=this.dragState.itemId;"move"===l?(o=addDays(this.dragState.originalStart,n),d=addDays(this.dragState.originalEnd,n)):"resize-start"===l?(o=addDays(this.dragState.originalStart,n),o>d&&(o=new Date(d))):(d=addDays(this.dragState.originalEnd,n),d<o&&(d=new Date(o))),o=clampDate(o,s,r),d=clampDate(d,s,r),this.dragState.barEl.releasePointerCapture(e.pointerId),this.dragState.barEl.classList.remove("designbase-wc-gantt__bar--dragging"),this.dragState=null;const g=this.items.find(e=>e.id===c);if(!g)return;const p=toDateKey(o),h=toDateKey(d);p===g.startDate&&h===g.endDate||(this.updateItem(c,{startDate:p,endDate:h},"move"===l?"move":"resize"),this.render())}}static get observedAttributes(){return["groups","rows","items","start-date","end-date","today","scale","cell-width","show-weekends","show-today","sidebar-label","full-width","disabled","draggable","reorderable","locale"]}get groups(){return this.parseJson("groups",[])}set groups(e){this.setAttribute("groups","string"==typeof e?e:JSON.stringify(e))}get rows(){return this.parseJson("rows",[])}set rows(e){this.setAttribute("rows","string"==typeof e?e:JSON.stringify(e))}get items(){return this.parseJson("items",[])}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.setAttribute("role","region"),this.setAttribute("aria-label",e("프로젝트 타임라인")),this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("pointercancel",this.handlePointerUp),this.render(),this.unsubscribeLocale?.(),this.unsubscribeLocale=t(()=>this.refreshLocale())}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerUp)}attributeChangedCallback(){!this.isConnected||this.suppressRender||this.dragState||this.reorderState||this.render()}refreshLocale(){this.setAttribute("aria-label",e("프로젝트 타임라인"));const t=this.querySelector(".designbase-wc-gantt__corner");t&&!this.getAttribute("sidebar-label")&&(t.textContent=e("할 일")),this.querySelectorAll("[data-reorder-kind]").forEach(t=>{t.setAttribute("aria-label",e("group"===t.dataset.reorderKind?"그룹 순서 변경":"행 순서 변경"))}),this.querySelectorAll("[data-summary-count]").forEach(e=>{e.title=a("{0}개 태스크",[e.dataset.summaryCount])});const{start:s,end:r}=this.getViewRange(),n=this.getDateColumns(s,r),i=this.getMonthSegments(n);this.querySelectorAll(".designbase-wc-gantt__month-cell").forEach((e,t)=>{i[t]&&(e.textContent=i[t].label)});const o=this.getWeekdays();this.querySelectorAll(".designbase-wc-gantt__day-name").forEach((e,t)=>{n[t]&&(e.textContent=o[n[t].getDay()])})}parseJson(e,t){try{return JSON.parse(this.getAttribute(e)||"null")??t}catch{return t}}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const a=this.getAttribute(e);return""===a||"true"===a}getNumber(e,t){const a=Number(this.getAttribute(e));return Number.isFinite(a)&&a>0?a:t}getOption(e,t,a){const s=this.getAttribute(e);return s&&t.includes(s)?s:a}getLocale(){return this.getAttribute("locale")||("ko"===s()?"ko-KR":"en-US")}getWeekdays(){return this.getLocale().startsWith("ko")?d:l}getViewRange(){const e=this.getAttribute("start-date"),t=this.getAttribute("end-date");if(e&&t)return{start:parseDate(e),end:parseDate(t)};const a=this.items.flatMap(e=>[parseDate(e.startDate),parseDate(e.endDate)]);if(0===a.length){const e=new Date,t=new Date(e.getFullYear(),e.getMonth(),1);return{start:t,end:addDays(t,29)}}const s=new Date(Math.min(...a.map(e=>e.getTime()))),r=new Date(Math.max(...a.map(e=>e.getTime())));return{start:addDays(s,-2),end:addDays(r,2)}}getTodayDate(){const e=this.getAttribute("today");return e?parseDate(e):new Date}getDateColumns(e,t){const a=daysBetween(e,t)+1;return Array.from({length:a},(t,a)=>addDays(e,a))}getVisibleRows(){const e=this.groups,t=this.rows;if(0===e.length)return t.map(e=>({type:"row",row:e}));const a=[];for(const s of e)a.push({type:"group",group:s}),this.collapsedGroups.has(s.id)||t.filter(e=>e.groupId===s.id).forEach(e=>a.push({type:"row",row:e}));return t.filter(t=>!t.groupId||!e.some(e=>e.id===t.groupId)).forEach(e=>a.push({type:"row",row:e})),a}getMonthSegments(e){const t=[];let a="",s=0;for(const r of e){const e=`${r.getFullYear()}-${r.getMonth()}`;e!==a?(s>0&&t.push({label:a,span:s}),a=e,s=1):s+=1}return s>0&&t.push({label:a,span:s}),t.map(e=>{const[t,a]=e.label.split("-").map(Number);return{label:new Date(t,a,1).toLocaleDateString(this.getLocale(),{year:"numeric",month:"long"}),span:e.span}})}getInitials(e){return e.initials?e.initials:e.name.split(/\s+/).map(e=>e[0]).join("").slice(0,2).toUpperCase()}updateItem(e,t,a){const s=this.items.map(a=>a.id===e?{...a,...t}:a);this.emitItemsChange(s,a,e)}emitItemsChange(e,t,a){this.suppressRender=!0,this.items=e,this.suppressRender=!1;const s=e.find(e=>e.id===a);this.dispatchEvent(new CustomEvent("db-item-change",{detail:{item:s,items:e,action:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{groups:this.groups,rows:this.rows,items:e},bubbles:!0,composed:!0}))}applyBarGeometry(e,t,a,s){const r=parseDate(t.startDate),n=parseDate(t.endDate),i=daysBetween(a,r),o=daysBetween(r,n)+1;e.style.left=i*s+2+"px",e.style.width=`${Math.max(o*s-4,s-4)}px`}startBarDrag(e,t,a,s){!this.getBool("draggable",!0)||this.getBool("disabled")||t.disabled||(e.preventDefault(),e.stopPropagation(),this.didDrag=!1,s.setPointerCapture(e.pointerId),s.classList.add("designbase-wc-gantt__bar--dragging"),this.dragState={itemId:t.id,mode:a,pointerId:e.pointerId,startX:e.clientX,originalStart:parseDate(t.startDate),originalEnd:parseDate(t.endDate),barEl:s})}canReorder(){return this.getBool("reorderable",!0)&&!this.getBool("disabled")}createDragHandle(t,a,s){const n=document.createElement("span");return n.className="designbase-wc-gantt__drag-handle",n.setAttribute("role","button"),n.dataset.reorderKind=t,n.setAttribute("aria-label",e("group"===t?"그룹 순서 변경":"행 순서 변경")),n.append(r("grip-vertical",12)),this.canReorder()?(n.addEventListener("pointerdown",e=>{e.preventDefault(),e.stopPropagation(),this.startReorderDrag(e,t,a,s,n)}),n):n}getGroupIndex(e){return this.groups.findIndex(t=>t.id===e)}getRowScope(e){return this.rows.filter(t=>(t.groupId||"")===(e||""))}getRowIndexInScope(e,t){return this.getRowScope(t).findIndex(t=>t.id===e)}getReorderTargets(e,t){return Array.from(this.querySelectorAll("group"===e?".designbase-wc-gantt__label-cell--group":`.designbase-wc-gantt__label-cell--row[data-group-id="${t||""}"]`))}startReorderDrag(e,t,a,s,r){const n="group"===t?this.getGroupIndex(a):this.getRowIndexInScope(a,s);n<0||(r.setPointerCapture(e.pointerId),this.reorderState={kind:t,id:a,groupId:s,pointerId:e.pointerId,startY:e.clientY,fromIndex:n,captureEl:r},this.classList.add("designbase-wc-gantt--reordering"),this.updateReorderDropTarget(e.clientY))}updateReorderDropTarget(e){if(!this.reorderState)return;const t=this.getReorderTargets(this.reorderState.kind,this.reorderState.groupId);let a=null;t.forEach((t,s)=>{const r=t.getBoundingClientRect(),n=r.top+r.height/2,i=e>=r.top&&e<=r.bottom,o=e>n;t.classList.toggle("designbase-wc-gantt__label-cell--drag-over",i),t.classList.toggle("designbase-wc-gantt__label-cell--drag-over-before",i&&!o),t.classList.toggle("designbase-wc-gantt__label-cell--drag-over-after",i&&o),i&&(a=o?s+1:s)}),this.reorderDropIndex=a}clearReorderIndicators(){this.querySelectorAll(".designbase-wc-gantt__label-cell--drag-over").forEach(e=>{e.classList.remove("designbase-wc-gantt__label-cell--drag-over","designbase-wc-gantt__label-cell--drag-over-before","designbase-wc-gantt__label-cell--drag-over-after")})}finishReorderDrag(e){if(!this.reorderState)return;const{kind:t,id:a,groupId:s,fromIndex:r,captureEl:n}=this.reorderState;try{n.releasePointerCapture(this.reorderState.pointerId)}catch{}const i=this.reorderDropIndex;if(this.reorderState=null,this.reorderDropIndex=null,this.classList.remove("designbase-wc-gantt--reordering"),this.clearReorderIndicators(),null===i)return;const o=i>r?i-1:i;o<0||o===r||("group"===t?this.reorderGroups(r,o,a):this.reorderRows(r,o,a,s))}emitStructureChange(e,t,a,s){this.suppressRender=!0,this.groups=e,this.rows=t,this.suppressRender=!1,this.dispatchEvent(new CustomEvent(s,{detail:{...a,groups:e,rows:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{groups:e,rows:t,items:this.items},bubbles:!0,composed:!0})),this.render()}reorderGroups(e,t,a){const s=[...this.groups],[r]=s.splice(e,1);r&&(s.splice(t,0,r),this.emitStructureChange(s,this.rows,{groupId:a,fromIndex:e,toIndex:t},"db-group-reorder"))}reorderRows(e,t,a,s){const r=this.getRowScope(s),n=[...r],[i]=n.splice(e,1);if(!i)return;n.splice(t,0,i);const o=new Set(r.map(e=>e.id)),d=[];let l=!1;for(const e of this.rows)o.has(e.id)?l||(d.push(...n),l=!0):d.push(e);l||d.push(...n),this.emitStructureChange(this.groups,d,{rowId:a,groupId:s,fromIndex:e,toIndex:t},"db-row-reorder")}createGroupBadge(e){const t=document.createElement("db-badge");return t.className="designbase-wc-gantt__group-badge",t.setAttribute("type","dot"),t.setAttribute("size","s"),t.setAttribute("variant","primary"),t.setAttribute("aria-hidden","true"),e&&t.style.setProperty("--db-gantt-badge-color",e),t}createGroupChevron(e){const t=document.createElement("span");return t.className=["designbase-wc-gantt__group-chevron",e?"designbase-wc-gantt__group-chevron--collapsed":""].filter(Boolean).join(" "),t.append(r("chevron-down",12)),t}createAssignee(e){const t=document.createElement("span");if(t.className="designbase-wc-gantt__assignee",t.title=e.name,e.avatar){const a=document.createElement("img");a.src=e.avatar,a.alt=e.name,t.appendChild(a)}else t.textContent=this.getInitials(e);return t}createStatusIcon(e){const t=document.createElement("span");return t.className=`designbase-wc-gantt__status designbase-wc-gantt__status--${e}`,t.setAttribute("aria-hidden","true"),t.textContent="completed"===e?"✓":"!",t}deriveSummaryColor(e,t){if(0===e.length)return t||o[0];const a=e.filter(e=>e.color);if(0===a.length)return t||o[0];return a.reduce((e,t)=>{const a=daysBetween(parseDate(e.startDate),parseDate(e.endDate));return daysBetween(parseDate(t.startDate),parseDate(t.endDate))>a?t:e}).color||t||o[0]}getGroupSummary(e,t){const a=this.rows.filter(t=>t.groupId===e),s=this.items.filter(e=>a.some(t=>t.id===e.rowId));if(0===s.length)return null;const r=s.map(e=>parseDate(e.startDate).getTime()),n=s.map(e=>parseDate(e.endDate).getTime()),i=s.map(e=>e.progress).filter(e=>"number"==typeof e);return{startDate:toDateKey(new Date(Math.min(...r))),endDate:toDateKey(new Date(Math.max(...n))),color:this.deriveSummaryColor(s,t),progress:i.length>0?i.reduce((e,t)=>e+t,0)/i.length:0,count:s.length}}applyBarTone(e,t){const a=function deriveBarTone(e){return{base:`color-mix(in srgb, ${e} 42%, white)`,progress:`color-mix(in srgb, ${e} 58%, white)`}}(t);e.style.setProperty("--db-gantt-bar-color",t),e.style.setProperty("--db-gantt-bar-bg",a.base),e.style.setProperty("--db-gantt-bar-progress-bg",a.progress)}createGroupSummaryBar(e,t,s,r){const n=clampDate(parseDate(e.startDate),t,s),i=clampDate(parseDate(e.endDate),t,s);if(i<t||n>s)return null;const o=daysBetween(t,n),d=daysBetween(n,i)+1,l=Math.min(100,Math.max(0,e.progress)),c=document.createElement("div");if(c.className="designbase-wc-gantt__group-summary",c.setAttribute("aria-hidden","true"),c.dataset.summaryCount=String(e.count),c.title=a("{0}개 태스크",[e.count]),this.applyBarTone(c,e.color),c.style.left=o*r+2+"px",c.style.width=`${Math.max(d*r-4,r-4)}px`,l>0){const e=document.createElement("span");e.className="designbase-wc-gantt__group-summary-progress",e.style.width=`${l}%`,c.appendChild(e)}return c}createBar(e,t,a,s){const r=e.color||o[s%o.length],n=document.createElement("div");n.className="designbase-wc-gantt__bar",n.setAttribute("role","button"),n.setAttribute("tabindex",e.disabled?"-1":"0"),n.setAttribute("aria-disabled",String(Boolean(e.disabled)||this.getBool("disabled"))),n.setAttribute("aria-label",`${e.title}, ${e.startDate} – ${e.endDate}`),this.applyBarTone(n,r),e.disabled&&n.classList.add("designbase-wc-gantt__bar--disabled"),this.applyBarGeometry(n,e,t,a);const i="number"==typeof e.progress?Math.min(100,Math.max(0,e.progress)):0;if(i>0){const e=document.createElement("span");e.className="designbase-wc-gantt__bar-progress",e.style.width=`${i}%`,n.appendChild(e)}const d=document.createElement("div");d.className="designbase-wc-gantt__bar-body","delayed"!==e.status&&"at-risk"!==e.status||d.appendChild(this.createStatusIcon(e.status));const l=document.createElement("span");l.className="designbase-wc-gantt__bar-label",l.textContent=e.title,d.appendChild(l),e.assignee&&d.appendChild(this.createAssignee(e.assignee));const c=document.createElement("span");c.className="designbase-wc-gantt__bar-handle designbase-wc-gantt__bar-handle--start",c.setAttribute("aria-hidden","true");const g=document.createElement("span");return g.className="designbase-wc-gantt__bar-handle designbase-wc-gantt__bar-handle--end",g.setAttribute("aria-hidden","true"),n.append(c,d,g),e.disabled||!this.getBool("draggable",!0)||this.getBool("disabled")||(c.addEventListener("pointerdown",t=>this.startBarDrag(t,e,"resize-start",n)),g.addEventListener("pointerdown",t=>this.startBarDrag(t,e,"resize-end",n)),d.addEventListener("pointerdown",t=>{t.target.closest(".designbase-wc-gantt__bar-handle")||this.startBarDrag(t,e,"move",n)})),n.addEventListener("click",t=>{this.dragState||this.didDrag?this.didDrag=!1:(t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:e},bubbles:!0,composed:!0})))}),n}toggleGroup(e){this.collapsedGroups.has(e)?this.collapsedGroups.delete(e):this.collapsedGroups.add(e),this.dispatchEvent(new CustomEvent("db-group-toggle",{detail:{groupId:e,collapsed:this.collapsedGroups.has(e)},bubbles:!0,composed:!0})),this.render()}render(){const t=this.items,a=this.getOption("scale",i,"day"),s=this.getNumber("cell-width","week"===a?72:44),r=this.getBool("show-weekends",!0),n=this.getBool("show-today",!0),d=this.getAttribute("sidebar-label")||e("할 일"),l=this.getBool("disabled"),c=this.getBool("full-width",!0),g=this.getWeekdays(),{start:p,end:h}=this.getViewRange(),u=this.getDateColumns(p,h),m=toDateKey(this.getTodayDate()),b=u.findIndex(e=>toDateKey(e)===m),w=this.getVisibleRows(),D=u.length*s,y=document.createElement("div");y.className=["designbase-wc-gantt",c?"designbase-wc-gantt--full-width":"",l?"designbase-wc-gantt--disabled":"",this.getBool("draggable",!0)?"designbase-wc-gantt--draggable":""].filter(Boolean).join(" ");const _=document.createElement("div");_.className="designbase-wc-gantt__viewport";const f=document.createElement("div");f.className="designbase-wc-gantt__grid",f.style.setProperty("--db-gantt-chart-width",`${D}px`),f.style.setProperty("--db-gantt-cell-width",`${s}px`);const S=document.createElement("div");S.className="designbase-wc-gantt__corner",S.textContent=d,f.appendChild(S);const E=document.createElement("div");E.className="designbase-wc-gantt__date-header";const v=document.createElement("div");v.className="designbase-wc-gantt__month-row";for(const e of this.getMonthSegments(u)){const t=document.createElement("div");t.className="designbase-wc-gantt__month-cell",t.style.width=e.span*s+"px",t.textContent=e.label,v.appendChild(t)}E.appendChild(v);const C=document.createElement("div");C.className="designbase-wc-gantt__day-row";for(const e of u){const t=toDateKey(e)===m,a=0===e.getDay()||6===e.getDay(),i=document.createElement("div");i.className=["designbase-wc-gantt__day-cell",t&&n?"designbase-wc-gantt__day-cell--today":"",a&&r?"designbase-wc-gantt__day-cell--weekend":""].filter(Boolean).join(" "),i.style.width=`${s}px`;const o=document.createElement("span");o.className="designbase-wc-gantt__day-num",o.textContent=String(e.getDate());const d=document.createElement("span");d.className="designbase-wc-gantt__day-name",d.textContent=g[e.getDay()],i.append(o,d),C.appendChild(i)}E.appendChild(C),f.appendChild(E);const I=new Map;t.forEach((e,t)=>{const a=I.get(e.rowId)||[];a.push({...e,color:e.color||o[t%o.length]}),I.set(e.rowId,a)});let x=0;for(const e of w){if("group"===e.type){const{group:t}=e,a=this.collapsedGroups.has(t.id),n=document.createElement("button");n.type="button",n.className="designbase-wc-gantt__label-cell designbase-wc-gantt__label-cell--group",n.setAttribute("aria-expanded",String(!a)),n.dataset.groupId=t.id;const i=document.createElement("span");i.className="designbase-wc-gantt__group-title",i.textContent=t.title,n.append(this.createDragHandle("group",t.id),this.createGroupChevron(a),this.createGroupBadge(t.color),i),n.addEventListener("click",e=>{e.target.closest(".designbase-wc-gantt__drag-handle")||this.toggleGroup(t.id)}),f.appendChild(n);const o=document.createElement("div");if(o.className="designbase-wc-gantt__track-cell designbase-wc-gantt__track-cell--group",a){const e=this.getGroupSummary(t.id,t.color);if(e){const t=document.createElement("div");t.className="designbase-wc-gantt__grid-bg",u.forEach(e=>{const a=document.createElement("div"),n=0===e.getDay()||6===e.getDay();a.className=["designbase-wc-gantt__grid-cell",n&&r?"designbase-wc-gantt__grid-cell--weekend":""].filter(Boolean).join(" "),a.style.width=`${s}px`,t.appendChild(a)}),o.appendChild(t);const a=document.createElement("div");a.className="designbase-wc-gantt__group-summary-wrap";const n=this.createGroupSummaryBar(e,p,h,s);n&&a.appendChild(n),o.appendChild(a)}}f.appendChild(o);continue}const{row:t}=e,a=document.createElement("button");a.type="button",a.className="designbase-wc-gantt__label-cell designbase-wc-gantt__label-cell--row",a.dataset.groupId=t.groupId||"",a.dataset.rowId=t.id;const n=document.createElement("span");n.className="designbase-wc-gantt__row-title",n.textContent=t.label,a.append(this.createDragHandle("row",t.id,t.groupId),n),a.addEventListener("click",e=>{e.target.closest(".designbase-wc-gantt__drag-handle")||this.dispatchEvent(new CustomEvent("db-row-click",{detail:{row:t},bubbles:!0,composed:!0}))}),f.appendChild(a);const i=document.createElement("div");i.className="designbase-wc-gantt__track-cell";const o=document.createElement("div");o.className="designbase-wc-gantt__grid-bg",u.forEach(e=>{const t=document.createElement("div"),a=0===e.getDay()||6===e.getDay();t.className=["designbase-wc-gantt__grid-cell",a&&r?"designbase-wc-gantt__grid-cell--weekend":""].filter(Boolean).join(" "),t.style.width=`${s}px`,o.appendChild(t)}),i.appendChild(o);const d=document.createElement("div");d.className="designbase-wc-gantt__bars",(I.get(t.id)||[]).forEach(e=>{const t=clampDate(parseDate(e.startDate),p,h),a=clampDate(parseDate(e.endDate),p,h);a<p||t>h||d.appendChild(this.createBar({...e,startDate:toDateKey(t),endDate:toDateKey(a)},p,s,x++))}),i.appendChild(d),f.appendChild(i)}if(_.appendChild(f),n&&b>=0){const e=document.createElement("div");e.className="designbase-wc-gantt__today-line",e.style.left=`calc(var(--db-gantt-label-width) + ${b*s+s/2}px)`,f.appendChild(e)}y.appendChild(_),this.replaceChildren(y)}}customElements.get("db-gantt")||customElements.define("db-gantt",DbGantt);export{DbGantt};
+import"./db-badge.js";import{dbText as e,subscribeDbLocale as t,dbFormat as a,getDbLocale as s}from"../core/i18n.js";import{createDbIcon as r}from"./db-icons.js";import{rafThrottle as n}from"../core/dom.js";const i=["day","week"],o=["#86efac","#fde047","#93c5fd","#c4b5fd","#f9a8d4","#5eead4","#fdba74","#a5b4fc"],d=["일","월","화","수","목","금","토"],l=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];function parseDate(e){const[t,a,s]=e.split("-").map(Number);return new Date(t,a-1,s)}function toDateKey(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`}function addDays(e,t){const a=new Date(e);return a.setDate(a.getDate()+t),a}function daysBetween(e,t){const a=Date.UTC(e.getFullYear(),e.getMonth(),e.getDate()),s=Date.UTC(t.getFullYear(),t.getMonth(),t.getDate());return Math.round((s-a)/864e5)}function clampDate(e,t,a){return e<t?new Date(t):e>a?new Date(a):e}class DbGantt extends HTMLElement{constructor(){super(...arguments),this.collapsedGroups=new Set,this.dragState=null,this.reorderState=null,this.reorderDropIndex=null,this.suppressRender=!1,this.didDrag=!1,this.handlePointerMove=n(e=>{if(this.reorderState&&e.pointerId===this.reorderState.pointerId)return void this.updateReorderDropTarget(e.clientY);if(!this.dragState||e.pointerId!==this.dragState.pointerId)return;const t=this.getOption("scale",i,"day"),a=this.getNumber("cell-width","week"===t?72:44),{start:s,end:r}=this.getViewRange(),n=Math.round((e.clientX-this.dragState.startX)/a);0!==n&&(this.didDrag=!0);let o=new Date(this.dragState.originalStart),d=new Date(this.dragState.originalEnd);if("move"===this.dragState.mode?(o=addDays(this.dragState.originalStart,n),d=addDays(this.dragState.originalEnd,n)):"resize-start"===this.dragState.mode?(o=addDays(this.dragState.originalStart,n),o>d&&(o=new Date(d))):(d=addDays(this.dragState.originalEnd,n),d<o&&(d=new Date(o))),o=clampDate(o,s,r),d=clampDate(d,s,r),o>d)return;const l=this.items.find(e=>e.id===this.dragState.itemId);l&&this.applyBarGeometry(this.dragState.barEl,{...l,startDate:toDateKey(o),endDate:toDateKey(d)},s,a)}),this.handlePointerUp=e=>{if(this.reorderState&&e.pointerId===this.reorderState.pointerId)return void this.finishReorderDrag(e);if(!this.dragState||e.pointerId!==this.dragState.pointerId)return;const t=this.getOption("scale",i,"day"),a=this.getNumber("cell-width","week"===t?72:44),{start:s,end:r}=this.getViewRange(),n=Math.round((e.clientX-this.dragState.startX)/a);let o=new Date(this.dragState.originalStart),d=new Date(this.dragState.originalEnd);const l=this.dragState.mode,c=this.dragState.itemId;"move"===l?(o=addDays(this.dragState.originalStart,n),d=addDays(this.dragState.originalEnd,n)):"resize-start"===l?(o=addDays(this.dragState.originalStart,n),o>d&&(o=new Date(d))):(d=addDays(this.dragState.originalEnd,n),d<o&&(d=new Date(o))),o=clampDate(o,s,r),d=clampDate(d,s,r),this.dragState.barEl.releasePointerCapture(e.pointerId),this.dragState.barEl.classList.remove("designbase-wc-gantt__bar--dragging"),this.dragState=null;const g=this.items.find(e=>e.id===c);if(!g)return;const p=toDateKey(o),h=toDateKey(d);p===g.startDate&&h===g.endDate||(this.updateItem(c,{startDate:p,endDate:h},"move"===l?"move":"resize"),this.render())}}static get observedAttributes(){return["groups","rows","items","start-date","end-date","today","scale","cell-width","show-weekends","show-today","sidebar-label","full-width","disabled","draggable","reorderable","locale"]}get groups(){return this.parseJson("groups",[])}set groups(e){this.setAttribute("groups","string"==typeof e?e:JSON.stringify(e))}get rows(){return this.parseJson("rows",[])}set rows(e){this.setAttribute("rows","string"==typeof e?e:JSON.stringify(e))}get items(){return this.parseJson("items",[])}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.setAttribute("role","region"),this.setAttribute("aria-label",e("프로젝트 타임라인")),this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("pointercancel",this.handlePointerUp),this.render(),this.unsubscribeLocale?.(),this.unsubscribeLocale=t(()=>this.refreshLocale())}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerUp)}attributeChangedCallback(){!this.isConnected||this.suppressRender||this.dragState||this.reorderState||this.render()}refreshLocale(){this.setAttribute("aria-label",e("프로젝트 타임라인"));const t=this.querySelector(".designbase-wc-gantt__corner");t&&!this.getAttribute("sidebar-label")&&(t.textContent=e("할 일")),this.querySelectorAll("[data-reorder-kind]").forEach(t=>{t.setAttribute("aria-label",e("group"===t.dataset.reorderKind?"그룹 순서 변경":"행 순서 변경"))}),this.querySelectorAll("[data-summary-count]").forEach(e=>{e.title=a("{0}개 태스크",[e.dataset.summaryCount])});const{start:s,end:r}=this.getViewRange(),n=this.getDateColumns(s,r),i=this.getMonthSegments(n);this.querySelectorAll(".designbase-wc-gantt__month-cell").forEach((e,t)=>{i[t]&&(e.textContent=i[t].label)});const o=this.getWeekdays();this.querySelectorAll(".designbase-wc-gantt__day-name").forEach((e,t)=>{n[t]&&(e.textContent=o[n[t].getDay()])})}parseJson(e,t){try{return JSON.parse(this.getAttribute(e)||"null")??t}catch{return t}}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const a=this.getAttribute(e);return""===a||"true"===a}getNumber(e,t){const a=Number(this.getAttribute(e));return Number.isFinite(a)&&a>0?a:t}getOption(e,t,a){const s=this.getAttribute(e);return s&&t.includes(s)?s:a}getLocale(){return this.getAttribute("locale")||("ko"===s()?"ko-KR":"en-US")}getWeekdays(){return this.getLocale().startsWith("ko")?d:l}getViewRange(){const e=this.getAttribute("start-date"),t=this.getAttribute("end-date");if(e&&t)return{start:parseDate(e),end:parseDate(t)};const a=this.items.flatMap(e=>[parseDate(e.startDate),parseDate(e.endDate)]);if(0===a.length){const e=new Date,t=new Date(e.getFullYear(),e.getMonth(),1);return{start:t,end:addDays(t,29)}}const s=new Date(Math.min(...a.map(e=>e.getTime()))),r=new Date(Math.max(...a.map(e=>e.getTime())));return{start:addDays(s,-2),end:addDays(r,2)}}getTodayDate(){const e=this.getAttribute("today");return e?parseDate(e):new Date}getDateColumns(e,t){const a=daysBetween(e,t)+1;return Array.from({length:a},(t,a)=>addDays(e,a))}getVisibleRows(){const e=this.groups,t=this.rows;if(0===e.length)return t.map(e=>({type:"row",row:e}));const a=[];for(const s of e)a.push({type:"group",group:s}),this.collapsedGroups.has(s.id)||t.filter(e=>e.groupId===s.id).forEach(e=>a.push({type:"row",row:e}));return t.filter(t=>!t.groupId||!e.some(e=>e.id===t.groupId)).forEach(e=>a.push({type:"row",row:e})),a}getMonthSegments(e){const t=[];let a="",s=0;for(const r of e){const e=`${r.getFullYear()}-${r.getMonth()}`;e!==a?(s>0&&t.push({label:a,span:s}),a=e,s=1):s+=1}return s>0&&t.push({label:a,span:s}),t.map(e=>{const[t,a]=e.label.split("-").map(Number);return{label:new Date(t,a,1).toLocaleDateString(this.getLocale(),{year:"numeric",month:"long"}),span:e.span}})}getInitials(e){return e.initials?e.initials:e.name.split(/\s+/).map(e=>e[0]).join("").slice(0,2).toUpperCase()}updateItem(e,t,a){const s=this.items.map(a=>a.id===e?{...a,...t}:a);this.emitItemsChange(s,a,e)}emitItemsChange(e,t,a){this.suppressRender=!0,this.items=e,this.suppressRender=!1;const s=e.find(e=>e.id===a);this.dispatchEvent(new CustomEvent("db-item-change",{detail:{item:s,items:e,action:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{groups:this.groups,rows:this.rows,items:e},bubbles:!0,composed:!0}))}applyBarGeometry(e,t,a,s){const r=parseDate(t.startDate),n=parseDate(t.endDate),i=daysBetween(a,r),o=daysBetween(r,n)+1;e.style.left=i*s+2+"px",e.style.width=`${Math.max(o*s-4,s-4)}px`}startBarDrag(e,t,a,s){!this.getBool("draggable",!0)||this.getBool("disabled")||t.disabled||(e.preventDefault(),e.stopPropagation(),this.didDrag=!1,s.setPointerCapture(e.pointerId),s.classList.add("designbase-wc-gantt__bar--dragging"),this.dragState={itemId:t.id,mode:a,pointerId:e.pointerId,startX:e.clientX,originalStart:parseDate(t.startDate),originalEnd:parseDate(t.endDate),barEl:s})}canReorder(){return this.getBool("reorderable",!0)&&!this.getBool("disabled")}createDragHandle(t,a,s){const n=document.createElement("span");return n.className="designbase-wc-gantt__drag-handle",n.setAttribute("role","button"),n.dataset.reorderKind=t,n.setAttribute("aria-label",e("group"===t?"그룹 순서 변경":"행 순서 변경")),n.append(r("grip-vertical",12)),this.canReorder()?(n.addEventListener("pointerdown",e=>{e.preventDefault(),e.stopPropagation(),this.startReorderDrag(e,t,a,s,n)}),n):n}getGroupIndex(e){return this.groups.findIndex(t=>t.id===e)}getRowScope(e){return this.rows.filter(t=>(t.groupId||"")===(e||""))}getRowIndexInScope(e,t){return this.getRowScope(t).findIndex(t=>t.id===e)}getReorderTargets(e,t){return Array.from(this.querySelectorAll("group"===e?".designbase-wc-gantt__label-cell--group":`.designbase-wc-gantt__label-cell--row[data-group-id="${t||""}"]`))}startReorderDrag(e,t,a,s,r){const n="group"===t?this.getGroupIndex(a):this.getRowIndexInScope(a,s);n<0||(r.setPointerCapture(e.pointerId),this.reorderState={kind:t,id:a,groupId:s,pointerId:e.pointerId,startY:e.clientY,fromIndex:n,captureEl:r},this.classList.add("designbase-wc-gantt--reordering"),this.updateReorderDropTarget(e.clientY))}updateReorderDropTarget(e){if(!this.reorderState)return;const t=this.getReorderTargets(this.reorderState.kind,this.reorderState.groupId);let a=null;t.forEach((t,s)=>{const r=t.getBoundingClientRect(),n=r.top+r.height/2,i=e>=r.top&&e<=r.bottom,o=e>n;t.classList.toggle("designbase-wc-gantt__label-cell--drag-over",i),t.classList.toggle("designbase-wc-gantt__label-cell--drag-over-before",i&&!o),t.classList.toggle("designbase-wc-gantt__label-cell--drag-over-after",i&&o),i&&(a=o?s+1:s)}),this.reorderDropIndex=a}clearReorderIndicators(){this.querySelectorAll(".designbase-wc-gantt__label-cell--drag-over").forEach(e=>{e.classList.remove("designbase-wc-gantt__label-cell--drag-over","designbase-wc-gantt__label-cell--drag-over-before","designbase-wc-gantt__label-cell--drag-over-after")})}finishReorderDrag(e){if(!this.reorderState)return;const{kind:t,id:a,groupId:s,fromIndex:r,captureEl:n}=this.reorderState;try{n.releasePointerCapture(this.reorderState.pointerId)}catch{}const i=this.reorderDropIndex;if(this.reorderState=null,this.reorderDropIndex=null,this.classList.remove("designbase-wc-gantt--reordering"),this.clearReorderIndicators(),null===i)return;const o=i>r?i-1:i;o<0||o===r||("group"===t?this.reorderGroups(r,o,a):this.reorderRows(r,o,a,s))}emitStructureChange(e,t,a,s){this.suppressRender=!0,this.groups=e,this.rows=t,this.suppressRender=!1,this.dispatchEvent(new CustomEvent(s,{detail:{...a,groups:e,rows:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{groups:e,rows:t,items:this.items},bubbles:!0,composed:!0})),this.render()}reorderGroups(e,t,a){const s=[...this.groups],[r]=s.splice(e,1);r&&(s.splice(t,0,r),this.emitStructureChange(s,this.rows,{groupId:a,fromIndex:e,toIndex:t},"db-group-reorder"))}reorderRows(e,t,a,s){const r=this.getRowScope(s),n=[...r],[i]=n.splice(e,1);if(!i)return;n.splice(t,0,i);const o=new Set(r.map(e=>e.id)),d=[];let l=!1;for(const e of this.rows)o.has(e.id)?l||(d.push(...n),l=!0):d.push(e);l||d.push(...n),this.emitStructureChange(this.groups,d,{rowId:a,groupId:s,fromIndex:e,toIndex:t},"db-row-reorder")}createGroupBadge(e){const t=document.createElement("db-badge");return t.className="designbase-wc-gantt__group-badge",t.setAttribute("type","dot"),t.setAttribute("size","s"),t.setAttribute("variant","primary"),t.setAttribute("aria-hidden","true"),e&&t.style.setProperty("--db-gantt-badge-color",e),t}createGroupChevron(e){const t=document.createElement("span");return t.className=["designbase-wc-gantt__group-chevron",e?"designbase-wc-gantt__group-chevron--collapsed":""].filter(Boolean).join(" "),t.append(r("chevron-down",12)),t}createAssignee(e){const t=document.createElement("span");if(t.className="designbase-wc-gantt__assignee",t.title=e.name,e.avatar){const a=document.createElement("img");a.src=e.avatar,a.alt=e.name,t.appendChild(a)}else t.textContent=this.getInitials(e);return t}createStatusIcon(e){const t=document.createElement("span");return t.className=`designbase-wc-gantt__status designbase-wc-gantt__status--${e}`,t.setAttribute("aria-hidden","true"),t.textContent="completed"===e?"✓":"!",t}deriveSummaryColor(e,t){if(0===e.length)return t||o[0];const a=e.filter(e=>e.color);if(0===a.length)return t||o[0];return a.reduce((e,t)=>{const a=daysBetween(parseDate(e.startDate),parseDate(e.endDate));return daysBetween(parseDate(t.startDate),parseDate(t.endDate))>a?t:e}).color||t||o[0]}getGroupSummary(e,t){const a=this.rows.filter(t=>t.groupId===e),s=this.items.filter(e=>a.some(t=>t.id===e.rowId));if(0===s.length)return null;const r=s.map(e=>parseDate(e.startDate).getTime()),n=s.map(e=>parseDate(e.endDate).getTime()),i=s.map(e=>e.progress).filter(e=>"number"==typeof e);return{startDate:toDateKey(new Date(Math.min(...r))),endDate:toDateKey(new Date(Math.max(...n))),color:this.deriveSummaryColor(s,t),progress:i.length>0?i.reduce((e,t)=>e+t,0)/i.length:0,count:s.length}}applyBarTone(e,t){const a=function deriveBarTone(e){return{base:`color-mix(in srgb, ${e} 42%, white)`,progress:`color-mix(in srgb, ${e} 58%, white)`}}(t);e.style.setProperty("--db-gantt-bar-color",t),e.style.setProperty("--db-gantt-bar-bg",a.base),e.style.setProperty("--db-gantt-bar-progress-bg",a.progress)}createGroupSummaryBar(e,t,s,r){const n=clampDate(parseDate(e.startDate),t,s),i=clampDate(parseDate(e.endDate),t,s);if(i<t||n>s)return null;const o=daysBetween(t,n),d=daysBetween(n,i)+1,l=Math.min(100,Math.max(0,e.progress)),c=document.createElement("div");if(c.className="designbase-wc-gantt__group-summary",c.setAttribute("aria-hidden","true"),c.dataset.summaryCount=String(e.count),c.title=a("{0}개 태스크",[e.count]),this.applyBarTone(c,e.color),c.style.left=o*r+2+"px",c.style.width=`${Math.max(d*r-4,r-4)}px`,l>0){const e=document.createElement("span");e.className="designbase-wc-gantt__group-summary-progress",e.style.width=`${l}%`,c.appendChild(e)}return c}createBar(e,t,a,s){const r=e.color||o[s%o.length],n=document.createElement("div");n.className="designbase-wc-gantt__bar",n.setAttribute("role","button"),n.setAttribute("tabindex",e.disabled?"-1":"0"),n.setAttribute("aria-disabled",String(Boolean(e.disabled)||this.getBool("disabled"))),n.setAttribute("aria-label",`${e.title}, ${e.startDate} – ${e.endDate}`),this.applyBarTone(n,r),e.disabled&&n.classList.add("designbase-wc-gantt__bar--disabled"),this.applyBarGeometry(n,e,t,a);const i="number"==typeof e.progress?Math.min(100,Math.max(0,e.progress)):0;if(i>0){const e=document.createElement("span");e.className="designbase-wc-gantt__bar-progress",e.style.width=`${i}%`,n.appendChild(e)}const d=document.createElement("div");d.className="designbase-wc-gantt__bar-body","delayed"!==e.status&&"at-risk"!==e.status||d.appendChild(this.createStatusIcon(e.status));const l=document.createElement("span");l.className="designbase-wc-gantt__bar-label",l.textContent=e.title,d.appendChild(l),e.assignee&&d.appendChild(this.createAssignee(e.assignee));const c=document.createElement("span");c.className="designbase-wc-gantt__bar-handle designbase-wc-gantt__bar-handle--start",c.setAttribute("aria-hidden","true");const g=document.createElement("span");return g.className="designbase-wc-gantt__bar-handle designbase-wc-gantt__bar-handle--end",g.setAttribute("aria-hidden","true"),n.append(c,d,g),e.disabled||!this.getBool("draggable",!0)||this.getBool("disabled")||(c.addEventListener("pointerdown",t=>this.startBarDrag(t,e,"resize-start",n)),g.addEventListener("pointerdown",t=>this.startBarDrag(t,e,"resize-end",n)),d.addEventListener("pointerdown",t=>{t.target.closest(".designbase-wc-gantt__bar-handle")||this.startBarDrag(t,e,"move",n)})),n.addEventListener("click",t=>{this.dragState||this.didDrag?this.didDrag=!1:(t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:e},bubbles:!0,composed:!0})))}),n}toggleGroup(e){this.collapsedGroups.has(e)?this.collapsedGroups.delete(e):this.collapsedGroups.add(e),this.dispatchEvent(new CustomEvent("db-group-toggle",{detail:{groupId:e,collapsed:this.collapsedGroups.has(e)},bubbles:!0,composed:!0})),this.render()}render(){const t=this.items,a=this.getOption("scale",i,"day"),s=this.getNumber("cell-width","week"===a?72:44),r=this.getBool("show-weekends",!0),n=this.getBool("show-today",!0),d=this.getAttribute("sidebar-label")||e("할 일"),l=this.getBool("disabled"),c=this.getBool("full-width",!0),g=this.getWeekdays(),{start:p,end:h}=this.getViewRange(),u=this.getDateColumns(p,h),m=toDateKey(this.getTodayDate()),b=u.findIndex(e=>toDateKey(e)===m),w=this.getVisibleRows(),D=u.length*s,y=document.createElement("div");y.className=["designbase-wc-gantt",c?"designbase-wc-gantt--full-width":"",l?"designbase-wc-gantt--disabled":"",this.getBool("draggable",!0)?"designbase-wc-gantt--draggable":""].filter(Boolean).join(" ");const _=document.createElement("div");_.className="designbase-wc-gantt__viewport";const f=document.createElement("div");f.className="designbase-wc-gantt__grid",f.style.setProperty("--db-gantt-chart-width",`${D}px`),f.style.setProperty("--db-gantt-cell-width",`${s}px`);const S=document.createElement("div");S.className="designbase-wc-gantt__corner",S.textContent=d,f.appendChild(S);const E=document.createElement("div");E.className="designbase-wc-gantt__date-header";const v=document.createElement("div");v.className="designbase-wc-gantt__month-row";for(const e of this.getMonthSegments(u)){const t=document.createElement("div");t.className="designbase-wc-gantt__month-cell",t.style.width=e.span*s+"px",t.textContent=e.label,v.appendChild(t)}E.appendChild(v);const C=document.createElement("div");C.className="designbase-wc-gantt__day-row";for(const e of u){const t=toDateKey(e)===m,a=0===e.getDay()||6===e.getDay(),i=document.createElement("div");i.className=["designbase-wc-gantt__day-cell",t&&n?"designbase-wc-gantt__day-cell--today":"",a&&r?"designbase-wc-gantt__day-cell--weekend":""].filter(Boolean).join(" "),i.style.width=`${s}px`;const o=document.createElement("span");o.className="designbase-wc-gantt__day-num",o.textContent=String(e.getDate());const d=document.createElement("span");d.className="designbase-wc-gantt__day-name",d.textContent=g[e.getDay()],i.append(o,d),C.appendChild(i)}E.appendChild(C),f.appendChild(E);const I=new Map;t.forEach((e,t)=>{const a=I.get(e.rowId)||[];a.push({...e,color:e.color||o[t%o.length]}),I.set(e.rowId,a)});let x=0;for(const e of w){if("group"===e.type){const{group:t}=e,a=this.collapsedGroups.has(t.id),n=document.createElement("button");n.type="button",n.className="designbase-wc-gantt__label-cell designbase-wc-gantt__label-cell--group",n.setAttribute("aria-expanded",String(!a)),n.dataset.groupId=t.id;const i=document.createElement("span");i.className="designbase-wc-gantt__group-title",i.textContent=t.title,n.append(this.createDragHandle("group",t.id),this.createGroupChevron(a),this.createGroupBadge(t.color),i),n.addEventListener("click",e=>{e.target.closest(".designbase-wc-gantt__drag-handle")||this.toggleGroup(t.id)}),f.appendChild(n);const o=document.createElement("div");if(o.className="designbase-wc-gantt__track-cell designbase-wc-gantt__track-cell--group",a){const e=this.getGroupSummary(t.id,t.color);if(e){const t=document.createElement("div");t.className="designbase-wc-gantt__grid-bg",u.forEach(e=>{const a=document.createElement("div"),n=0===e.getDay()||6===e.getDay();a.className=["designbase-wc-gantt__grid-cell",n&&r?"designbase-wc-gantt__grid-cell--weekend":""].filter(Boolean).join(" "),a.style.width=`${s}px`,t.appendChild(a)}),o.appendChild(t);const a=document.createElement("div");a.className="designbase-wc-gantt__group-summary-wrap";const n=this.createGroupSummaryBar(e,p,h,s);n&&a.appendChild(n),o.appendChild(a)}}f.appendChild(o);continue}const{row:t}=e,a=document.createElement("button");a.type="button",a.className="designbase-wc-gantt__label-cell designbase-wc-gantt__label-cell--row",a.dataset.groupId=t.groupId||"",a.dataset.rowId=t.id;const n=document.createElement("span");n.className="designbase-wc-gantt__row-title",n.textContent=t.label,a.append(this.createDragHandle("row",t.id,t.groupId),n),a.addEventListener("click",e=>{e.target.closest(".designbase-wc-gantt__drag-handle")||this.dispatchEvent(new CustomEvent("db-row-click",{detail:{row:t},bubbles:!0,composed:!0}))}),f.appendChild(a);const i=document.createElement("div");i.className="designbase-wc-gantt__track-cell";const o=document.createElement("div");o.className="designbase-wc-gantt__grid-bg",u.forEach(e=>{const t=document.createElement("div"),a=0===e.getDay()||6===e.getDay();t.className=["designbase-wc-gantt__grid-cell",a&&r?"designbase-wc-gantt__grid-cell--weekend":""].filter(Boolean).join(" "),t.style.width=`${s}px`,o.appendChild(t)}),i.appendChild(o);const d=document.createElement("div");d.className="designbase-wc-gantt__bars",(I.get(t.id)||[]).forEach(e=>{const t=clampDate(parseDate(e.startDate),p,h),a=clampDate(parseDate(e.endDate),p,h);a<p||t>h||d.appendChild(this.createBar({...e,startDate:toDateKey(t),endDate:toDateKey(a)},p,s,x++))}),i.appendChild(d),f.appendChild(i)}if(_.appendChild(f),n&&b>=0){const e=document.createElement("div");e.className="designbase-wc-gantt__today-line",e.style.left=`calc(var(--db-gantt-label-width) + ${b*s+s/2}px)`,f.appendChild(e)}y.appendChild(_),this.replaceChildren(y)}}customElements.get("db-gantt")||customElements.define("db-gantt",DbGantt);export{DbGantt};

package/dist/esm/components/db-image-list.d.ts

@@ -1,3 +1,6 @@
+import './db-image.js';
+import './db-lightbox.js';
+
 interface DbImageListItem {
     id?: string;
     src: string;

package/dist/esm/components/db-image-list.js

@@ -1 +1 @@
-import{subscribeDbLocale as e,dbFormat as t,dbText as i}from"../core/i18n.js";import{b as s}from"../node_modules/@designbasekorea/carousel/dist/chunks/chunk-AGE5BHQ4.js";const a=["grid","list","gallery","carousel"],l=["1","2","3","4","5","6"],n=["xs","s","m","l","xl"];class DbImageList extends HTMLElement{constructor(){super(...arguments),this.lightboxEl=null,this.selectedIndex=null}static get observedAttributes(){return["images","layout","columns","spacing","ratio","fit","rounded","shadow","hover","clickable","lightbox","loading","responsive"]}connectedCallback(){this.render(),this.unsubscribeLocale?.(),this.unsubscribeLocale=e(()=>this.syncLocale())}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.carouselEngine?.destroy(),this.carouselEngine=void 0}attributeChangedCallback(){this.isConnected&&this.render()}syncLocale(){this.querySelectorAll("[data-default-alt-index]").forEach(e=>{e.setAttribute("alt",t("이미지 {0}",[e.dataset.defaultAltIndex]))}),this.autoCarouselLabel&&this.getAttribute("aria-label")===this.autoCarouselLabel&&(this.autoCarouselLabel=i("이미지 목록"),this.setAttribute("aria-label",this.autoCarouselLabel))}parseImages(){const e=this.getAttribute("images");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}mapRoundedAttr(){const e=this.getAttribute("rounded");if(e&&"false"!==e)return"true"===e||""===e?"m":e}createImageItem(e,i){const s=document.createElement("div");s.className="designbase-wc-image-list__item";const a=document.createElement("db-image");a.className="designbase-wc-image-list__image",a.setAttribute("src",e.thumbnail||e.src),a.setAttribute("alt",e.alt||e.title||t("이미지 {0}",[i+1])),e.alt||e.title||(a.dataset.defaultAltIndex=String(i+1)),a.setAttribute("ratio",this.getAttribute("ratio")||"16:9"),a.setAttribute("fit",this.getAttribute("fit")||"cover"),a.setAttribute("loading",this.getAttribute("loading")||"lazy"),a.setAttribute("full-width","");const l=this.mapRoundedAttr();l&&a.setAttribute("rounded",l);const n=this.getAttribute("shadow");if(n&&"false"!==n&&a.setAttribute("shadow","true"===n?"":n),"false"!==this.getAttribute("hover")&&a.setAttribute("hover",""),e.thumbnail&&e.thumbnail!==e.src&&a.setAttribute("fallback-src",e.src),a.addEventListener("db-load",()=>{this.dispatchEvent(new CustomEvent("db-image-load",{bubbles:!0,composed:!0,detail:{image:e,index:i}}))}),a.addEventListener("db-error",()=>{this.dispatchEvent(new CustomEvent("db-image-error",{bubbles:!0,composed:!0,detail:{image:e,index:i}}))}),s.append(a),e.title||e.description){const t=document.createElement("div");if(t.className="designbase-wc-image-list__overlay",e.title){const i=document.createElement("h3");i.className="designbase-wc-image-list__title",i.textContent=e.title,t.append(i)}if(e.description){const i=document.createElement("p");i.className="designbase-wc-image-list__description",i.textContent=e.description,t.append(i)}s.append(t)}if(e.metadata?.date||e.metadata?.size){const t=document.createElement("div");if(t.className="designbase-wc-image-list__metadata",e.metadata.date){const i=document.createElement("span");i.className="designbase-wc-image-list__date",i.textContent=e.metadata.date,t.append(i)}if(e.metadata.size){const i=document.createElement("span");i.className="designbase-wc-image-list__size",i.textContent=e.metadata.size,t.append(i)}s.append(t)}return"false"!==this.getAttribute("clickable")&&s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-image-click",{bubbles:!0,composed:!0,detail:{image:e,index:i}})),"false"!==this.getAttribute("lightbox")&&this.openLightbox(i)}),s}openLightbox(e){this.selectedIndex=e,this.lightboxEl||(this.lightboxEl=document.createElement("db-lightbox"),this.lightboxEl.addEventListener("db-close",()=>{this.selectedIndex=null,this.lightboxEl?.removeAttribute("open")}),this.lightboxEl.addEventListener("db-image-change",e=>{const t=e.detail;"number"==typeof t?.index&&(this.selectedIndex=t.index)}),this.append(this.lightboxEl));const t=this.parseImages();this.lightboxEl.setAttribute("images",JSON.stringify(t.map((e,t)=>({id:e.id||`image-${t}`,src:e.src,alt:e.alt||e.title||"",title:e.title,description:e.description,thumbnail:e.thumbnail})))),this.lightboxEl.setAttribute("current-index",String(e)),this.lightboxEl.setAttribute("open","")}render(){this.carouselEngine?.destroy(),this.carouselEngine=void 0;const e=this.parseImages(),t=this.getAttribute("layout")||"grid",r=this.getAttribute("columns")||"3",d=this.getAttribute("spacing")||"m",c="false"!==this.getAttribute("responsive");this.className=["designbase-wc-image-list",`designbase-wc-image-list--${a.includes(t)?t:"grid"}`,`designbase-wc-image-list--columns-${l.includes(r)?r:"3"}`,`designbase-wc-image-list--spacing-${n.includes(d)?d:"m"}`,c&&"designbase-wc-image-list--responsive","false"!==this.getAttribute("clickable")&&"designbase-wc-image-list--clickable","false"!==this.getAttribute("hover")&&"designbase-wc-image-list--hover"].filter(Boolean).join(" ");const o=this.lightboxEl;if(this.replaceChildren(),"carousel"===t){const t=document.createElement("div");t.className="designbase-wc-image-list__carousel db-slide__viewport",e.forEach((e,i)=>{const s=document.createElement("div");s.className="designbase-wc-image-list__carousel-item",s.append(this.createImageItem(e,i)),t.append(s)}),this.append(t),this.hasAttribute("aria-label")?this.getAttribute("aria-label")!==this.autoCarouselLabel&&(this.autoCarouselLabel=void 0):this.autoCarouselLabel=i("이미지 목록"),this.carouselEngine=s(this,{slidesPerView:"auto",gap:0,label:i("이미지 목록")})}else e.forEach((e,t)=>{this.append(this.createImageItem(e,t))});o&&(this.lightboxEl=o,this.append(o),null!==this.selectedIndex&&(o.setAttribute("current-index",String(this.selectedIndex)),o.setAttribute("open","")))}}customElements.get("db-image-list")||customElements.define("db-image-list",DbImageList);export{DbImageList};
+import"./db-image.js";import"./db-lightbox.js";import{subscribeDbLocale as e,dbFormat as t,dbText as i}from"../core/i18n.js";import{b as s}from"../node_modules/@designbasekorea/carousel/dist/chunks/chunk-AGE5BHQ4.js";const a=["grid","list","gallery","carousel"],l=["1","2","3","4","5","6"],n=["xs","s","m","l","xl"];class DbImageList extends HTMLElement{constructor(){super(...arguments),this.lightboxEl=null,this.selectedIndex=null}static get observedAttributes(){return["images","layout","columns","spacing","ratio","fit","rounded","shadow","hover","clickable","lightbox","loading","responsive"]}connectedCallback(){this.render(),this.unsubscribeLocale?.(),this.unsubscribeLocale=e(()=>this.syncLocale())}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.carouselEngine?.destroy(),this.carouselEngine=void 0}attributeChangedCallback(){this.isConnected&&this.render()}syncLocale(){this.querySelectorAll("[data-default-alt-index]").forEach(e=>{e.setAttribute("alt",t("이미지 {0}",[e.dataset.defaultAltIndex]))}),this.autoCarouselLabel&&this.getAttribute("aria-label")===this.autoCarouselLabel&&(this.autoCarouselLabel=i("이미지 목록"),this.setAttribute("aria-label",this.autoCarouselLabel))}parseImages(){const e=this.getAttribute("images");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}mapRoundedAttr(){const e=this.getAttribute("rounded");if(e&&"false"!==e)return"true"===e||""===e?"m":e}createImageItem(e,i){const s=document.createElement("div");s.className="designbase-wc-image-list__item";const a=document.createElement("db-image");a.className="designbase-wc-image-list__image",a.setAttribute("src",e.thumbnail||e.src),a.setAttribute("alt",e.alt||e.title||t("이미지 {0}",[i+1])),e.alt||e.title||(a.dataset.defaultAltIndex=String(i+1)),a.setAttribute("ratio",this.getAttribute("ratio")||"16:9"),a.setAttribute("fit",this.getAttribute("fit")||"cover"),a.setAttribute("loading",this.getAttribute("loading")||"lazy"),a.setAttribute("full-width","");const l=this.mapRoundedAttr();l&&a.setAttribute("rounded",l);const n=this.getAttribute("shadow");if(n&&"false"!==n&&a.setAttribute("shadow","true"===n?"":n),"false"!==this.getAttribute("hover")&&a.setAttribute("hover",""),e.thumbnail&&e.thumbnail!==e.src&&a.setAttribute("fallback-src",e.src),a.addEventListener("db-load",()=>{this.dispatchEvent(new CustomEvent("db-image-load",{bubbles:!0,composed:!0,detail:{image:e,index:i}}))}),a.addEventListener("db-error",()=>{this.dispatchEvent(new CustomEvent("db-image-error",{bubbles:!0,composed:!0,detail:{image:e,index:i}}))}),s.append(a),e.title||e.description){const t=document.createElement("div");if(t.className="designbase-wc-image-list__overlay",e.title){const i=document.createElement("h3");i.className="designbase-wc-image-list__title",i.textContent=e.title,t.append(i)}if(e.description){const i=document.createElement("p");i.className="designbase-wc-image-list__description",i.textContent=e.description,t.append(i)}s.append(t)}if(e.metadata?.date||e.metadata?.size){const t=document.createElement("div");if(t.className="designbase-wc-image-list__metadata",e.metadata.date){const i=document.createElement("span");i.className="designbase-wc-image-list__date",i.textContent=e.metadata.date,t.append(i)}if(e.metadata.size){const i=document.createElement("span");i.className="designbase-wc-image-list__size",i.textContent=e.metadata.size,t.append(i)}s.append(t)}return"false"!==this.getAttribute("clickable")&&s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-image-click",{bubbles:!0,composed:!0,detail:{image:e,index:i}})),"false"!==this.getAttribute("lightbox")&&this.openLightbox(i)}),s}openLightbox(e){this.selectedIndex=e,this.lightboxEl||(this.lightboxEl=document.createElement("db-lightbox"),this.lightboxEl.addEventListener("db-close",()=>{this.selectedIndex=null,this.lightboxEl?.removeAttribute("open")}),this.lightboxEl.addEventListener("db-image-change",e=>{const t=e.detail;"number"==typeof t?.index&&(this.selectedIndex=t.index)}),this.append(this.lightboxEl));const t=this.parseImages();this.lightboxEl.setAttribute("images",JSON.stringify(t.map((e,t)=>({id:e.id||`image-${t}`,src:e.src,alt:e.alt||e.title||"",title:e.title,description:e.description,thumbnail:e.thumbnail})))),this.lightboxEl.setAttribute("current-index",String(e)),this.lightboxEl.setAttribute("open","")}render(){this.carouselEngine?.destroy(),this.carouselEngine=void 0;const e=this.parseImages(),t=this.getAttribute("layout")||"grid",r=this.getAttribute("columns")||"3",d=this.getAttribute("spacing")||"m",o="false"!==this.getAttribute("responsive");this.className=["designbase-wc-image-list",`designbase-wc-image-list--${a.includes(t)?t:"grid"}`,`designbase-wc-image-list--columns-${l.includes(r)?r:"3"}`,`designbase-wc-image-list--spacing-${n.includes(d)?d:"m"}`,o&&"designbase-wc-image-list--responsive","false"!==this.getAttribute("clickable")&&"designbase-wc-image-list--clickable","false"!==this.getAttribute("hover")&&"designbase-wc-image-list--hover"].filter(Boolean).join(" ");const c=this.lightboxEl;if(this.replaceChildren(),"carousel"===t){const t=document.createElement("div");t.className="designbase-wc-image-list__carousel db-slide__viewport",e.forEach((e,i)=>{const s=document.createElement("div");s.className="designbase-wc-image-list__carousel-item",s.append(this.createImageItem(e,i)),t.append(s)}),this.append(t),this.hasAttribute("aria-label")?this.getAttribute("aria-label")!==this.autoCarouselLabel&&(this.autoCarouselLabel=void 0):this.autoCarouselLabel=i("이미지 목록"),this.carouselEngine=s(this,{slidesPerView:"auto",gap:0,label:i("이미지 목록")})}else e.forEach((e,t)=>{this.append(this.createImageItem(e,t))});c&&(this.lightboxEl=c,this.append(c),null!==this.selectedIndex&&(c.setAttribute("current-index",String(this.selectedIndex)),c.setAttribute("open","")))}}customElements.get("db-image-list")||customElements.define("db-image-list",DbImageList);export{DbImageList};

package/dist/esm/components/db-keyframe-editor.d.ts

@@ -71,6 +71,11 @@ declare class DbKeyframeEditor extends HTMLElement {
     private cancel;
     private key;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-keyframe-editor': DbKeyframeEditor;
+    }
+}
 
 export { DbKeyframeEditor, EditorKeyframe };
 export type { KeyframeEditDetail };

package/dist/esm/components/db-layer-list.d.ts

@@ -0,0 +1,71 @@
+import './db-button.js';
+import { DbElement } from '../core/base-element.js';
+import { DbIconName } from './db-icons.js';
+
+interface LayerListAction {
+    id: string;
+    label: string;
+    icon: DbIconName;
+    disabled?: boolean;
+}
+interface LayerListItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: DbIconName;
+    visible?: boolean;
+    locked?: boolean;
+    removable?: boolean;
+    actions?: LayerListAction[];
+}
+interface LayerListChangeDetail {
+    items: LayerListItem[];
+    itemId: string;
+    action: 'reorder' | 'visibility' | 'lock' | 'delete';
+    fromIndex?: number;
+    toIndex?: number;
+}
+/** Stateful UI. Persist db-change.items in the owning document; IDs are stable across reorder. */
+declare class DbLayerList extends DbElement {
+    private data;
+    private selected;
+    private defaultLabel;
+    private drag?;
+    private raf;
+    private unsubscribe?;
+    static get observedAttributes(): string[];
+    get items(): LayerListItem[];
+    set items(value: LayerListItem[] | string);
+    get selectedId(): string;
+    set selectedId(value: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    private get disabled();
+    private rows;
+    private select;
+    private syncSelection;
+    private emitChange;
+    private handleClick;
+    private action;
+    private focusControl;
+    private down;
+    private move;
+    private preview;
+    private autoScroll;
+    private up;
+    private cancel;
+    private cancelDrag;
+    private reorder;
+    private key;
+    private button;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-layer-list': DbLayerList;
+    }
+}
+
+export { DbLayerList };
+export type { LayerListAction, LayerListChangeDetail, LayerListItem };

package/dist/esm/components/db-layer-list.js

@@ -0,0 +1 @@
+import"./db-button.js";import{DbElement as t}from"../core/base-element.js";import{createDbIcon as e}from"./db-icons.js";import{subscribeDbLocale as i,t as s}from"../core/i18n.js";class DbLayerList extends t{constructor(){super(...arguments),this.data=[],this.selected="",this.defaultLabel="",this.raf=0,this.handleClick=t=>{const e=t.target;if(this.disabled||e.closest("db-button"))return;const i=e.closest(".db-layer-list__row");i&&this.select(i.dataset.id)},this.action=t=>{const e=t.target.closest("db-button[data-action]");if(!e||!this.contains(e))return;if(t.stopPropagation(),this.disabled)return;const i=e.dataset.id,s=e.dataset.action,a=this.data.find(t=>t.id===i);if(a){if("custom"===s){const t=a.actions?.find(t=>t.id===e.dataset.custom);return void(t&&!t.disabled&&this.dbEmit("action",{itemId:i,actionId:t.id}))}("delete"!==s||!a.locked&&!1!==a.removable)&&("visibility"===s&&(a.visible=!1===a.visible),"lock"===s&&(a.locked=!a.locked),"delete"===s&&(this.data=this.data.filter(t=>t.id!==i),this.selected===i&&this.select("")),this.emitChange(i,s),this.render(),this.focusControl(i,s))}},this.down=t=>{if(0!==t.button||!t.isPrimary||this.disabled||this.drag)return;const e=t.target,i=e.closest(".db-layer-list__row");if(!i||e.closest("db-button"))return;const s=this.data.find(t=>t.id===i.dataset.id);s&&!s.locked&&("row"===this.getAttribute("drag-mode")||e.closest("[data-drag-handle]"))&&(t.preventDefault(),this.select(s.id),i.focus({preventScroll:!0}),this.drag={pointer:t.pointerId,id:s.id,y:t.clientY,x:t.clientX,currentY:t.clientY,active:!1,drop:this.data.findIndex(t=>t.id===s.id)},this.setPointerCapture(t.pointerId))},this.move=t=>{const e=this.drag;e&&e.pointer===t.pointerId&&(e.currentY=t.clientY,!e.active&&Math.hypot(t.clientY-e.y,t.clientX-e.x)<4||(e.active=!0,t.preventDefault(),this.preview(),this.raf||(this.raf=requestAnimationFrame(this.autoScroll))))},this.autoScroll=()=>{this.raf=0;const t=this.drag;if(!t?.active)return;let e=this;for(;e;){if(e.scrollHeight>e.clientHeight&&/(auto|scroll)/.test(getComputedStyle(e).overflowY)){const i=e.getBoundingClientRect(),s=t.currentY<i.top+28?-10:t.currentY>i.bottom-28?10:0;s&&(e.scrollTop+=s,this.preview());break}e=e.parentElement}this.raf=requestAnimationFrame(this.autoScroll)},this.up=t=>{const e=this.drag;if(!e||e.pointer!==t.pointerId)return;const{id:i,drop:s,active:a}=e;this.cancelDrag(),a&&this.reorder(i,s)},this.cancel=t=>{this.drag?.pointer===t.pointerId&&("lostpointercapture"!==t.type||t.target===this&&!this.hasPointerCapture(t.pointerId))&&this.cancelDrag()},this.key=t=>{if("Escape"===t.key&&this.drag)return t.preventDefault(),void this.cancelDrag();const e=t.target;if(e.closest("db-button")||this.disabled)return;const i=e.closest(".db-layer-list__row");if(!i)return;const s=i.dataset.id,a=this.data.find(t=>t.id===s);!t.altKey||"ArrowUp"!==t.key&&"ArrowDown"!==t.key?"Enter"===t.key||" "===t.key?(t.preventDefault(),this.select(s)):"ArrowUp"===t.key||"ArrowDown"===t.key?(t.preventDefault(),this.rows()[Math.max(0,Math.min(this.data.length-1,this.data.indexOf(a)+("ArrowUp"===t.key?-1:1)))]?.focus()):"Delete"!==t.key&&"Backspace"!==t.key||a.locked||!1===a.removable||this.hasAttribute("hide-delete")||(t.preventDefault(),this.data=this.data.filter(t=>t.id!==s),this.selected===s&&this.select(""),this.render(),this.focusControl(s),this.emitChange(s,"delete")):(t.preventDefault(),this.reorder(s,this.data.indexOf(a)+("ArrowUp"===t.key?-1:1)))}}static get observedAttributes(){return["items","selected-id","drag-mode","disabled","hide-visibility","hide-lock","hide-delete","actions-visibility","aria-label"]}get items(){return this.data.map(t=>({...t,actions:t.actions?.map(t=>({...t}))}))}set items(t){let e=t;if("string"==typeof e)try{e=JSON.parse(e)}catch{e=[]}const i=new Set,s=Array.isArray(e)?e.filter(t=>!(!t||"string"!=typeof t.id||!t.id||i.has(t.id)||"string"!=typeof t.label)&&(i.add(t.id),!0)).map(t=>({...t,actions:Array.isArray(t.actions)?t.actions.filter(t=>t&&"string"==typeof t.id&&"string"==typeof t.label).map(t=>({...t})):void 0})):[];JSON.stringify(s)!==JSON.stringify(this.data)&&(this.cancelDrag(),this.data=s,this.data.some(t=>t.id===this.selected)||(this.selected=""),this.isConnected&&this.render())}get selectedId(){return this.selected}set selectedId(t){this.selected=String(t||""),this.isConnected&&this.syncSelection()}connectedCallback(){this.upgradeProperties(["items","selectedId"]),this.hasAttribute("items")&&(this.items=this.getAttribute("items")),this.hasAttribute("selected-id")&&(this.selected=this.getAttribute("selected-id")),this.cleanups.listen(this,"pointerdown",this.down),this.cleanups.listen(this,"pointermove",this.move),this.cleanups.listen(this,"pointerup",this.up),this.cleanups.listen(this,"pointercancel",this.cancel),this.cleanups.listen(this,"lostpointercapture",this.cancel),this.cleanups.listen(this,"keydown",this.key),this.cleanups.listen(this,"db-click",this.action),this.cleanups.listen(this,"click",this.handleClick),this.unsubscribe=i(()=>this.render()),this.render()}disconnectedCallback(){this.cancelDrag(),this.unsubscribe?.(),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if("items"!==t)return"selected-id"===t?(this.selected=i||"",void(this.isConnected&&this.syncSelection())):void(this.isConnected&&(this.cancelDrag(),this.render()));this.items=i||"[]"}get disabled(){return this.hasAttribute("disabled")&&"false"!==this.getAttribute("disabled")}rows(){return Array.from(this.querySelectorAll(".db-layer-list__row"))}select(t){this.selected!==t&&(this.selected=t,this.syncSelection(),this.dbEmit("selection-change",{itemId:t}))}syncSelection(){for(const t of this.rows()){const e=t.dataset.id===this.selected;t.dataset.selected=String(e),t.setAttribute("aria-current",String(e))}}emitChange(t,e,i={}){this.dbEmit("change",{items:this.items,itemId:t,action:e,...i})}focusControl(t,e){const i=this.rows().find(e=>e.dataset.id===t)||this.rows()[0],s=e?Array.from(i?.querySelectorAll("db-button")||[]).find(t=>t.dataset.action===e):void 0;(s||i)?.focus({preventScroll:!0})}preview(){const t=this.drag;if(!t)return;const e=this.rows().filter(e=>e.dataset.id!==t.id);t.drop=e.findIndex(e=>{const i=e.getBoundingClientRect();return t.currentY<i.top+i.height/2}),t.drop<0&&(t.drop=e.length),this.dataset.dragging="true";for(const e of this.rows())e.dataset.dragged=String(e.dataset.id===t.id),delete e.dataset.drop;e[t.drop]?e[t.drop].dataset.drop="before":e.length&&(e[e.length-1].dataset.drop="after")}cancelDrag(){const t=this.drag;this.drag=void 0,cancelAnimationFrame(this.raf),this.raf=0,t&&this.hasPointerCapture(t.pointer)&&this.releasePointerCapture(t.pointer),delete this.dataset.dragging;for(const t of this.rows())delete t.dataset.dragged,delete t.dataset.drop}reorder(t,e){const i=this.data.findIndex(e=>e.id===t);if(i<0||this.data[i].locked||this.disabled)return;const s=Math.max(0,Math.min(this.data.length-1,e));if(i===s)return;const[a]=this.data.splice(i,1);this.data.splice(s,0,a),this.render(),this.focusControl(t),this.emitChange(t,"reorder",{fromIndex:i,toIndex:s}),this.dbEmit("reorder",{items:this.items,itemId:t,fromIndex:i,toIndex:s})}button(t,e,i,s,a,r=!1){const d=document.createElement("db-button");return d.setAttribute("size","s"),d.setAttribute("variant","ghost"),d.setAttribute("icon-only",""),d.setAttribute("start-icon",i),d.setAttribute("aria-label",s),d.setAttribute("title",s),d.dataset.action=e,d.dataset.id=t,void 0!==a&&d.setAttribute("aria-pressed",String(a)),(this.disabled||r)&&d.setAttribute("disabled",""),d}render(){if(this.drag)return;this.classList.add("db-layer-list"),this.setAttribute("role","list"),this.hasAttribute("aria-label")&&this.getAttribute("aria-label")!==this.defaultLabel||(this.defaultLabel=s("layerList.label"),this.getAttribute("aria-label")!==this.defaultLabel&&this.setAttribute("aria-label",this.defaultLabel)),this.dataset.mode="row"===this.getAttribute("drag-mode")?"row":"handle",this.setAttribute("aria-disabled",String(this.disabled));const t=document.createDocumentFragment();for(const i of this.data){const a=document.createElement("div");if(a.className="db-layer-list__row",a.dataset.id=i.id,a.dataset.locked=String(!!i.locked),a.dataset.visible=String(!1!==i.visible),a.tabIndex=this.disabled?-1:0,a.setAttribute("role","listitem"),"handle"===this.dataset.mode){const t=document.createElement("span");t.className="db-layer-list__handle",t.dataset.dragHandle="",t.setAttribute("aria-hidden","true");const i=e("grip-vertical",14);i&&t.append(i),a.append(t)}if(i.icon){const t=e(i.icon,16);t&&(t.classList.add("db-layer-list__icon"),a.append(t))}const r=document.createElement("span");r.className="db-layer-list__text";const d=document.createElement("span");if(d.className="db-layer-list__label",d.textContent=i.label,r.append(d),i.description){const t=document.createElement("small");t.textContent=i.description,r.append(t)}a.append(r);const n=document.createElement("span");n.className="db-layer-list__actions";for(const t of i.actions||[]){const e=this.button(i.id,"custom",t.icon,t.label,void 0,t.disabled);e.dataset.custom=t.id,n.append(e)}this.hasAttribute("hide-delete")||!1===i.removable||n.append(this.button(i.id,"delete","trash",s("layerList.delete").replace("{name}",i.label),void 0,!!i.locked)),this.hasAttribute("hide-lock")||n.append(this.button(i.id,"lock",i.locked?"lock":"unlock",s(i.locked?"layerList.unlock":"layerList.lock").replace("{name}",i.label),!!i.locked)),this.hasAttribute("hide-visibility")||n.append(this.button(i.id,"visibility",!1===i.visible?"hide":"show",s(!1===i.visible?"layerList.show":"layerList.hide").replace("{name}",i.label),!1!==i.visible)),a.append(n),t.append(a)}if(!this.data.length){const e=document.createElement("p");e.className="db-layer-list__empty",e.textContent=s("layerList.empty"),t.append(e)}this.replaceChildren(t),this.syncSelection()}}customElements.get("db-layer-list")||customElements.define("db-layer-list",DbLayerList);export{DbLayerList};

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

@@ -1,3 +1,7 @@
+import './db-button.js';
+import './db-badge.js';
+import './db-spinner.js';
+
 interface DbLightboxImage {
     id: string;
     src: string;

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

@@ -1 +1 @@
-import{inheritThemeScope as e}from"../core/theme-scope.js";import{subscribeDbLocale as t,dbText as s,dbFormat as i}from"../core/i18n.js";import{b as n}from"../node_modules/@designbasekorea/carousel/dist/chunks/chunk-AGE5BHQ4.js";import{createDbIcon as r}from"./db-icons.js";import{createFocusTrap as a}from"../core/focus-trap.js";import{lockScroll as o,unlockScroll as l}from"../core/scroll-lock.js";import{dbUid as c}from"../core/uid.js";import{LIGHTBOX_SIZES as h}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbLightbox extends HTMLElement{constructor(){super(...arguments),this.portalEl=null,this.scrollLocked=!1,this.titleId=c("db-lightbox-title"),this.imageEl=null,this.carouselViewport=null,this.slideSignature="",this.loadingEl=null,this.errorEl=null,this.counterBadge=null,this.prevNav=null,this.nextNav=null,this.currentIndex=0,this.imageLoaded=!1,this.imageError=!1,this.keydownHandler=null,this.boundSrc="",this.thumbnailSignature="",this.handleImageLoad=()=>{this.imageLoaded=!0,this.imageError=!1,this.syncImageLayers()},this.handleImageError=()=>{this.imageLoaded=!1,this.imageError=!0,this.syncImageLayers()}}static get observedAttributes(){return["images","current-index","size","open","enable-keyboard","show-thumbnails","show-counter","show-close-button","show-navigation-buttons","show-toolbar","close-on-backdrop-click","close-on-escape"]}connectedCallback(){this.classList.add("designbase-wc-lightbox-host"),this.syncOpenState(),this.unsubscribeLocale?.(),this.unsubscribeLocale=t(()=>this.syncLocale())}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.unmount()}attributeChangedCallback(e,t,s){if("current-index"===e)return this.currentIndex=Number(s||0),this.resetImageState(),void(this.open&&(this.carouselEngine&&this.carouselEngine.getState().index!==this.currentIndex&&this.carouselEngine.goTo(this.currentIndex,"instant"),this.refreshView()));"open"!==e?"images"===e&&this.open&&this.refreshView():this.syncOpenState()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}parseImages(){const e=this.getAttribute("images");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}getCurrentImage(){return this.parseImages()[this.currentIndex]||null}resetImageState(){this.imageLoaded=!1,this.imageError=!1,this.boundSrc=""}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}goTo(e){this.carouselEngine?.goTo(e)}syncLocale(){const e=this.portalEl;if(!e)return;e.querySelector(".designbase-wc-lightbox__close-button")?.setAttribute("aria-label",s("닫기")),this.prevNav?.setAttribute("aria-label",s("이전 이미지")),this.nextNav?.setAttribute("aria-label",s("다음 이미지"));const t=e.querySelector(".designbase-wc-lightbox__error-text");t&&(t.textContent=s("이미지를 불러올 수 없습니다")),this.loadingEl?.querySelector("db-spinner")?.setAttribute("label",s("이미지 로딩 중...")),this.carouselViewport?.parentElement?.setAttribute("aria-label",s("이미지 갤러리"));const n=this.parseImages();this.carouselViewport?.querySelectorAll("img.designbase-wc-lightbox__image").forEach((e,t)=>{const s=n[t];s&&e.setAttribute("alt",s.alt||s.title||i("이미지 {0}",[t+1]))}),e.querySelectorAll(".designbase-wc-lightbox__thumbnail").forEach((e,t)=>{const s=n[t];s&&(e.title=s.title||i("이미지 {0}",[t+1]),e.setAttribute("aria-label",s.alt||s.title||i("이미지 {0}",[t+1])))})}ensureCarousel(e){const t=this.carouselViewport;if(!t||!this.portalEl)return;const r=JSON.stringify(e.map(e=>[e.id,e.src]));if(this.carouselEngine&&r===this.slideSignature)return;this.carouselEngine?.destroy(),this.slideSignature=r,this.currentIndex=Math.max(0,Math.min(this.currentIndex,e.length-1)),this.resetImageState(),t.replaceChildren(),e.forEach((e,s)=>{const n=document.createElement("div");n.className="designbase-wc-lightbox__slide";const r=document.createElement("img");r.className="designbase-wc-lightbox__image",r.src=e.src,r.alt=e.alt||e.title||i("이미지 {0}",[s+1]),r.draggable=!1,r.loading=s===this.currentIndex?"eager":"lazy",r.addEventListener("load",()=>{r.classList.add("designbase-wc-lightbox__image--loaded"),s===this.currentIndex&&this.handleImageLoad()}),r.addEventListener("error",()=>{s===this.currentIndex&&this.handleImageError()}),n.append(r),t.append(n)}),this.carouselEngine=n(t.parentElement,{startIndex:this.currentIndex,slidesPerView:1,gap:0,rewind:!0,keyboard:!1,label:s("이미지 갤러리")});const sync=()=>{const e=this.carouselEngine.getState().index;e!==this.currentIndex&&(this.currentIndex=e,this.setAttribute("current-index",String(e)),this.dispatchEvent(new CustomEvent("db-image-change",{detail:{index:e},bubbles:!0,composed:!0})))};this.carouselEngine.on("change",sync),this.carouselEngine.on("refresh",sync)}createIconButton(e,t,s,i,n={}){const r=document.createElement("db-button");return r.className=e,r.setAttribute("variant",n.variant||"ghost"),r.setAttribute("size",n.size||"m"),r.setAttribute("icon-only",""),r.setAttribute("start-icon",t),r.setAttribute("aria-label",s),n.radius&&r.setAttribute("radius",n.radius),r.addEventListener("db-click",i),r}buildPortal(){const e=this.getAttribute("size")||"l",t=h.includes(e)?e:"l",i=document.createElement("div");i.className=`designbase-wc-lightbox designbase-wc-lightbox--size-${t}`,i.setAttribute("data-wc-internal","");const n=document.createElement("div");n.className="designbase-wc-lightbox__overlay";const a=document.createElement("div");a.className="designbase-wc-lightbox__modal",a.setAttribute("role","dialog"),a.setAttribute("aria-modal","true"),a.setAttribute("aria-labelledby",this.titleId);const o=document.createElement("div");o.className="designbase-wc-lightbox__header";const l=document.createElement("div");l.className="designbase-wc-lightbox__title";const c=document.createElement("h3");c.className="designbase-wc-lightbox__title-text",c.id=this.titleId;const d=document.createElement("db-badge");d.className="designbase-wc-lightbox__counter",d.setAttribute("size","s"),d.setAttribute("variant","secondary"),d.setAttribute("type","text"),l.append(c,d);const u=document.createElement("div");u.className="designbase-wc-lightbox__header-actions","false"!==this.getAttribute("show-close-button")&&u.append(this.createIconButton("designbase-wc-lightbox__close-button","close",s("닫기"),()=>this.close())),o.append(l,u);const g=document.createElement("div");g.className="designbase-wc-lightbox__content",this.prevNav=this.createIconButton("designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--prev","chevron-left",s("이전 이미지"),()=>this.carouselEngine?.prev(),{radius:"pill",size:"l"}),this.nextNav=this.createIconButton("designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--next","chevron-right",s("다음 이미지"),()=>this.carouselEngine?.next(),{radius:"pill",size:"l"});const b=document.createElement("div");b.className="designbase-wc-lightbox__image-container",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-lightbox__error",this.errorEl.hidden=!0;const m=r("gallery",24);m.classList.add("designbase-wc-lightbox__error-icon"),this.errorEl.append(m);const p=document.createElement("p");p.className="designbase-wc-lightbox__error-text",p.textContent=s("이미지를 불러올 수 없습니다"),this.errorEl.append(p),this.loadingEl=document.createElement("div"),this.loadingEl.className="designbase-wc-lightbox__loading";const E=document.createElement("db-spinner");E.setAttribute("type","circular"),E.setAttribute("size","m"),E.setAttribute("show-label",""),E.setAttribute("label",s("이미지 로딩 중...")),this.loadingEl.append(E),this.carouselViewport=document.createElement("div"),this.carouselViewport.className="designbase-wc-lightbox__viewport db-slide__viewport",b.append(this.carouselViewport,this.errorEl,this.loadingEl);const x=document.createElement("div");x.className="designbase-wc-lightbox__description";const _=document.createElement("p");_.className="designbase-wc-lightbox__description-text",x.append(_),"false"!==this.getAttribute("show-navigation-buttons")&&g.append(this.prevNav,this.nextNav),g.append(b,x);const w=document.createElement("div");w.className="designbase-wc-lightbox__thumbnails";const v=document.createElement("div");return v.className="designbase-wc-lightbox__thumbnails-container",w.append(v),a.append(o,g,w),n.append(a),i.append(n),n.addEventListener("click",e=>{e.target===n&&"false"!==this.getAttribute("close-on-backdrop-click")&&this.close()}),this.portalEl=i,this.counterBadge=d,i}syncImageLayers(){this.imageEl&&this.loadingEl&&this.errorEl&&(this.imageEl.classList.toggle("designbase-wc-lightbox__image--loaded",this.imageLoaded),this.loadingEl.hidden=this.imageLoaded||this.imageError,this.errorEl.hidden=!this.imageError,this.imageEl.hidden=this.imageError)}updateThumbnails(){if(!this.portalEl)return;const e=this.portalEl.querySelector(".designbase-wc-lightbox__thumbnails-container"),t=this.portalEl.querySelector(".designbase-wc-lightbox__thumbnails");if(!e||!t)return;const s=this.parseImages(),n="false"!==this.getAttribute("show-thumbnails")&&s.length>1;if(t.hidden=!n,!n)return e.replaceChildren(),void(this.thumbnailSignature="");const r=s.map(e=>e.thumbnail||e.src).join("|");r!==this.thumbnailSignature||e.childElementCount!==s.length?(this.thumbnailSignature=r,e.replaceChildren(),s.forEach((t,s)=>{const n=document.createElement("button");n.type="button",n.className=["designbase-wc-lightbox__thumbnail",s===this.currentIndex&&"designbase-wc-lightbox__thumbnail--active"].filter(Boolean).join(" "),n.title=t.title||i("이미지 {0}",[s+1]),n.setAttribute("aria-label",t.alt||t.title||i("이미지 {0}",[s+1])),n.setAttribute("aria-current",s===this.currentIndex?"true":"false");const r=document.createElement("img");r.className="designbase-wc-lightbox__thumbnail-image",r.src=t.thumbnail||t.src,r.alt="",r.draggable=!1,r.loading="lazy",r.decoding="async",n.append(r),n.addEventListener("click",()=>this.goTo(s)),e.append(n)})):Array.from(e.children).forEach((e,t)=>{const s=e,i=t===this.currentIndex;s.classList.toggle("designbase-wc-lightbox__thumbnail--active",i),s.setAttribute("aria-current",i?"true":"false")})}loadCurrentImage(){if(this.imageEl=this.carouselViewport?.children[this.currentIndex]?.querySelector("img")||null,!this.imageEl)return;const e=this.getCurrentImage();if(!e?.src)return this.imageEl.removeAttribute("src"),this.resetImageState(),void this.syncImageLayers();this.boundSrc!==e.src&&(this.resetImageState(),this.boundSrc=e.src,this.imageEl.src=e.src,this.imageEl.alt=e.alt||e.title||i("이미지 {0}",[this.currentIndex+1]),this.syncImageLayers(),this.imageEl.complete&&this.imageEl.naturalWidth>0&&this.handleImageLoad())}refreshView(){if(!this.portalEl)return;const e=this.parseImages();this.ensureCarousel(e);const t=this.getCurrentImage(),s=this.portalEl.querySelector(".designbase-wc-lightbox__title-text"),i=this.portalEl.querySelector(".designbase-wc-lightbox__description-text"),n=this.portalEl.querySelector(".designbase-wc-lightbox__description");if(s&&(s.textContent=t?.title||"",s.hidden=!t?.title),this.counterBadge){const t="false"!==this.getAttribute("show-counter")&&e.length>1?`${this.currentIndex+1} / ${e.length}`:"";this.counterBadge.textContent=t,this.counterBadge.hidden=!t}n&&i&&(i.textContent=t?.description||"",n.hidden=!t?.description);const r="false"!==this.getAttribute("show-navigation-buttons")&&e.length>1;this.prevNav&&(this.prevNav.hidden=!r),this.nextNav&&(this.nextNav.hidden=!r),this.loadCurrentImage(),this.updateThumbnails()}mount(){this.portalEl||(this.portalEl=this.buildPortal()),this.portalEl.isConnected||(e(this,this.portalEl),document.body.append(this.portalEl)),this.scrollLocked||(o(),this.scrollLocked=!0);const t=this.portalEl.querySelector(".designbase-wc-lightbox__modal");t&&!this.focusTrap&&(this.focusTrap=a(t),requestAnimationFrame(()=>this.focusTrap?.activate())),this.keydownHandler||(this.keydownHandler=e=>{this.open&&"false"!==this.getAttribute("enable-keyboard")&&("Escape"===e.key&&"false"!==this.getAttribute("close-on-escape")&&(e.preventDefault(),this.close()),"ArrowLeft"===e.key&&(e.preventDefault(),this.carouselEngine?.prev()),"ArrowRight"===e.key&&(e.preventDefault(),this.carouselEngine?.next()))},document.addEventListener("keydown",this.keydownHandler)),this.currentIndex=Number(this.getAttribute("current-index")||0),this.refreshView()}unmount(){this.carouselEngine?.destroy(),this.carouselEngine=void 0,this.focusTrap?.deactivate(),this.focusTrap=void 0,this.portalEl?.remove(),this.scrollLocked&&(this.scrollLocked=!1,l()),this.keydownHandler&&(document.removeEventListener("keydown",this.keydownHandler),this.keydownHandler=null)}syncOpenState(){this.open?this.mount():this.unmount()}}customElements.get("db-lightbox")||customElements.define("db-lightbox",DbLightbox);export{DbLightbox};
+import"./db-button.js";import"./db-badge.js";import"./db-spinner.js";import{inheritThemeScope as e}from"../core/theme-scope.js";import{subscribeDbLocale as t,dbText as s,dbFormat as i}from"../core/i18n.js";import{b as n}from"../node_modules/@designbasekorea/carousel/dist/chunks/chunk-AGE5BHQ4.js";import{createDbIcon as r}from"./db-icons.js";import{createFocusTrap as a}from"../core/focus-trap.js";import{lockScroll as o,unlockScroll as l}from"../core/scroll-lock.js";import{dbUid as c}from"../core/uid.js";import{LIGHTBOX_SIZES as h}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbLightbox extends HTMLElement{constructor(){super(...arguments),this.portalEl=null,this.scrollLocked=!1,this.titleId=c("db-lightbox-title"),this.imageEl=null,this.carouselViewport=null,this.slideSignature="",this.loadingEl=null,this.errorEl=null,this.counterBadge=null,this.prevNav=null,this.nextNav=null,this.currentIndex=0,this.imageLoaded=!1,this.imageError=!1,this.keydownHandler=null,this.boundSrc="",this.thumbnailSignature="",this.handleImageLoad=()=>{this.imageLoaded=!0,this.imageError=!1,this.syncImageLayers()},this.handleImageError=()=>{this.imageLoaded=!1,this.imageError=!0,this.syncImageLayers()}}static get observedAttributes(){return["images","current-index","size","open","enable-keyboard","show-thumbnails","show-counter","show-close-button","show-navigation-buttons","show-toolbar","close-on-backdrop-click","close-on-escape"]}connectedCallback(){this.classList.add("designbase-wc-lightbox-host"),this.syncOpenState(),this.unsubscribeLocale?.(),this.unsubscribeLocale=t(()=>this.syncLocale())}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.unmount()}attributeChangedCallback(e,t,s){if("current-index"===e)return this.currentIndex=Number(s||0),this.resetImageState(),void(this.open&&(this.carouselEngine&&this.carouselEngine.getState().index!==this.currentIndex&&this.carouselEngine.goTo(this.currentIndex,"instant"),this.refreshView()));"open"!==e?"images"===e&&this.open&&this.refreshView():this.syncOpenState()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}parseImages(){const e=this.getAttribute("images");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}getCurrentImage(){return this.parseImages()[this.currentIndex]||null}resetImageState(){this.imageLoaded=!1,this.imageError=!1,this.boundSrc=""}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}goTo(e){this.carouselEngine?.goTo(e)}syncLocale(){const e=this.portalEl;if(!e)return;e.querySelector(".designbase-wc-lightbox__close-button")?.setAttribute("aria-label",s("닫기")),this.prevNav?.setAttribute("aria-label",s("이전 이미지")),this.nextNav?.setAttribute("aria-label",s("다음 이미지"));const t=e.querySelector(".designbase-wc-lightbox__error-text");t&&(t.textContent=s("이미지를 불러올 수 없습니다")),this.loadingEl?.querySelector("db-spinner")?.setAttribute("label",s("이미지 로딩 중...")),this.carouselViewport?.parentElement?.setAttribute("aria-label",s("이미지 갤러리"));const n=this.parseImages();this.carouselViewport?.querySelectorAll("img.designbase-wc-lightbox__image").forEach((e,t)=>{const s=n[t];s&&e.setAttribute("alt",s.alt||s.title||i("이미지 {0}",[t+1]))}),e.querySelectorAll(".designbase-wc-lightbox__thumbnail").forEach((e,t)=>{const s=n[t];s&&(e.title=s.title||i("이미지 {0}",[t+1]),e.setAttribute("aria-label",s.alt||s.title||i("이미지 {0}",[t+1])))})}ensureCarousel(e){const t=this.carouselViewport;if(!t||!this.portalEl)return;const r=JSON.stringify(e.map(e=>[e.id,e.src]));if(this.carouselEngine&&r===this.slideSignature)return;this.carouselEngine?.destroy(),this.slideSignature=r,this.currentIndex=Math.max(0,Math.min(this.currentIndex,e.length-1)),this.resetImageState(),t.replaceChildren(),e.forEach((e,s)=>{const n=document.createElement("div");n.className="designbase-wc-lightbox__slide";const r=document.createElement("img");r.className="designbase-wc-lightbox__image",r.src=e.src,r.alt=e.alt||e.title||i("이미지 {0}",[s+1]),r.draggable=!1,r.loading=s===this.currentIndex?"eager":"lazy",r.addEventListener("load",()=>{r.classList.add("designbase-wc-lightbox__image--loaded"),s===this.currentIndex&&this.handleImageLoad()}),r.addEventListener("error",()=>{s===this.currentIndex&&this.handleImageError()}),n.append(r),t.append(n)}),this.carouselEngine=n(t.parentElement,{startIndex:this.currentIndex,slidesPerView:1,gap:0,rewind:!0,keyboard:!1,label:s("이미지 갤러리")});const sync=()=>{const e=this.carouselEngine.getState().index;e!==this.currentIndex&&(this.currentIndex=e,this.setAttribute("current-index",String(e)),this.dispatchEvent(new CustomEvent("db-image-change",{detail:{index:e},bubbles:!0,composed:!0})))};this.carouselEngine.on("change",sync),this.carouselEngine.on("refresh",sync)}createIconButton(e,t,s,i,n={}){const r=document.createElement("db-button");return r.className=e,r.setAttribute("variant",n.variant||"ghost"),r.setAttribute("size",n.size||"m"),r.setAttribute("icon-only",""),r.setAttribute("start-icon",t),r.setAttribute("aria-label",s),n.radius&&r.setAttribute("radius",n.radius),r.addEventListener("db-click",i),r}buildPortal(){const e=this.getAttribute("size")||"l",t=h.includes(e)?e:"l",i=document.createElement("div");i.className=`designbase-wc-lightbox designbase-wc-lightbox--size-${t}`,i.setAttribute("data-wc-internal","");const n=document.createElement("div");n.className="designbase-wc-lightbox__overlay";const a=document.createElement("div");a.className="designbase-wc-lightbox__modal",a.setAttribute("role","dialog"),a.setAttribute("aria-modal","true"),a.setAttribute("aria-labelledby",this.titleId);const o=document.createElement("div");o.className="designbase-wc-lightbox__header";const l=document.createElement("div");l.className="designbase-wc-lightbox__title";const c=document.createElement("h3");c.className="designbase-wc-lightbox__title-text",c.id=this.titleId;const d=document.createElement("db-badge");d.className="designbase-wc-lightbox__counter",d.setAttribute("size","s"),d.setAttribute("variant","secondary"),d.setAttribute("type","text"),l.append(c,d);const u=document.createElement("div");u.className="designbase-wc-lightbox__header-actions","false"!==this.getAttribute("show-close-button")&&u.append(this.createIconButton("designbase-wc-lightbox__close-button","close",s("닫기"),()=>this.close())),o.append(l,u);const g=document.createElement("div");g.className="designbase-wc-lightbox__content",this.prevNav=this.createIconButton("designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--prev","chevron-left",s("이전 이미지"),()=>this.carouselEngine?.prev(),{radius:"pill",size:"l"}),this.nextNav=this.createIconButton("designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--next","chevron-right",s("다음 이미지"),()=>this.carouselEngine?.next(),{radius:"pill",size:"l"});const b=document.createElement("div");b.className="designbase-wc-lightbox__image-container",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-lightbox__error",this.errorEl.hidden=!0;const m=r("gallery",24);m.classList.add("designbase-wc-lightbox__error-icon"),this.errorEl.append(m);const p=document.createElement("p");p.className="designbase-wc-lightbox__error-text",p.textContent=s("이미지를 불러올 수 없습니다"),this.errorEl.append(p),this.loadingEl=document.createElement("div"),this.loadingEl.className="designbase-wc-lightbox__loading";const E=document.createElement("db-spinner");E.setAttribute("type","circular"),E.setAttribute("size","m"),E.setAttribute("show-label",""),E.setAttribute("label",s("이미지 로딩 중...")),this.loadingEl.append(E),this.carouselViewport=document.createElement("div"),this.carouselViewport.className="designbase-wc-lightbox__viewport db-slide__viewport",b.append(this.carouselViewport,this.errorEl,this.loadingEl);const x=document.createElement("div");x.className="designbase-wc-lightbox__description";const _=document.createElement("p");_.className="designbase-wc-lightbox__description-text",x.append(_),"false"!==this.getAttribute("show-navigation-buttons")&&g.append(this.prevNav,this.nextNav),g.append(b,x);const w=document.createElement("div");w.className="designbase-wc-lightbox__thumbnails";const v=document.createElement("div");return v.className="designbase-wc-lightbox__thumbnails-container",w.append(v),a.append(o,g,w),n.append(a),i.append(n),n.addEventListener("click",e=>{e.target===n&&"false"!==this.getAttribute("close-on-backdrop-click")&&this.close()}),this.portalEl=i,this.counterBadge=d,i}syncImageLayers(){this.imageEl&&this.loadingEl&&this.errorEl&&(this.imageEl.classList.toggle("designbase-wc-lightbox__image--loaded",this.imageLoaded),this.loadingEl.hidden=this.imageLoaded||this.imageError,this.errorEl.hidden=!this.imageError,this.imageEl.hidden=this.imageError)}updateThumbnails(){if(!this.portalEl)return;const e=this.portalEl.querySelector(".designbase-wc-lightbox__thumbnails-container"),t=this.portalEl.querySelector(".designbase-wc-lightbox__thumbnails");if(!e||!t)return;const s=this.parseImages(),n="false"!==this.getAttribute("show-thumbnails")&&s.length>1;if(t.hidden=!n,!n)return e.replaceChildren(),void(this.thumbnailSignature="");const r=s.map(e=>e.thumbnail||e.src).join("|");r!==this.thumbnailSignature||e.childElementCount!==s.length?(this.thumbnailSignature=r,e.replaceChildren(),s.forEach((t,s)=>{const n=document.createElement("button");n.type="button",n.className=["designbase-wc-lightbox__thumbnail",s===this.currentIndex&&"designbase-wc-lightbox__thumbnail--active"].filter(Boolean).join(" "),n.title=t.title||i("이미지 {0}",[s+1]),n.setAttribute("aria-label",t.alt||t.title||i("이미지 {0}",[s+1])),n.setAttribute("aria-current",s===this.currentIndex?"true":"false");const r=document.createElement("img");r.className="designbase-wc-lightbox__thumbnail-image",r.src=t.thumbnail||t.src,r.alt="",r.draggable=!1,r.loading="lazy",r.decoding="async",n.append(r),n.addEventListener("click",()=>this.goTo(s)),e.append(n)})):Array.from(e.children).forEach((e,t)=>{const s=e,i=t===this.currentIndex;s.classList.toggle("designbase-wc-lightbox__thumbnail--active",i),s.setAttribute("aria-current",i?"true":"false")})}loadCurrentImage(){if(this.imageEl=this.carouselViewport?.children[this.currentIndex]?.querySelector("img")||null,!this.imageEl)return;const e=this.getCurrentImage();if(!e?.src)return this.imageEl.removeAttribute("src"),this.resetImageState(),void this.syncImageLayers();this.boundSrc!==e.src&&(this.resetImageState(),this.boundSrc=e.src,this.imageEl.src=e.src,this.imageEl.alt=e.alt||e.title||i("이미지 {0}",[this.currentIndex+1]),this.syncImageLayers(),this.imageEl.complete&&this.imageEl.naturalWidth>0&&this.handleImageLoad())}refreshView(){if(!this.portalEl)return;const e=this.parseImages();this.ensureCarousel(e);const t=this.getCurrentImage(),s=this.portalEl.querySelector(".designbase-wc-lightbox__title-text"),i=this.portalEl.querySelector(".designbase-wc-lightbox__description-text"),n=this.portalEl.querySelector(".designbase-wc-lightbox__description");if(s&&(s.textContent=t?.title||"",s.hidden=!t?.title),this.counterBadge){const t="false"!==this.getAttribute("show-counter")&&e.length>1?`${this.currentIndex+1} / ${e.length}`:"";this.counterBadge.textContent=t,this.counterBadge.hidden=!t}n&&i&&(i.textContent=t?.description||"",n.hidden=!t?.description);const r="false"!==this.getAttribute("show-navigation-buttons")&&e.length>1;this.prevNav&&(this.prevNav.hidden=!r),this.nextNav&&(this.nextNav.hidden=!r),this.loadCurrentImage(),this.updateThumbnails()}mount(){this.portalEl||(this.portalEl=this.buildPortal()),this.portalEl.isConnected||(e(this,this.portalEl),document.body.append(this.portalEl)),this.scrollLocked||(o(),this.scrollLocked=!0);const t=this.portalEl.querySelector(".designbase-wc-lightbox__modal");t&&!this.focusTrap&&(this.focusTrap=a(t),requestAnimationFrame(()=>this.focusTrap?.activate())),this.keydownHandler||(this.keydownHandler=e=>{this.open&&"false"!==this.getAttribute("enable-keyboard")&&("Escape"===e.key&&"false"!==this.getAttribute("close-on-escape")&&(e.preventDefault(),this.close()),"ArrowLeft"===e.key&&(e.preventDefault(),this.carouselEngine?.prev()),"ArrowRight"===e.key&&(e.preventDefault(),this.carouselEngine?.next()))},document.addEventListener("keydown",this.keydownHandler)),this.currentIndex=Number(this.getAttribute("current-index")||0),this.refreshView()}unmount(){this.carouselEngine?.destroy(),this.carouselEngine=void 0,this.focusTrap?.deactivate(),this.focusTrap=void 0,this.portalEl?.remove(),this.scrollLocked&&(this.scrollLocked=!1,l()),this.keydownHandler&&(document.removeEventListener("keydown",this.keydownHandler),this.keydownHandler=null)}syncOpenState(){this.open?this.mount():this.unmount()}}customElements.get("db-lightbox")||customElements.define("db-lightbox",DbLightbox);export{DbLightbox};

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

@@ -1,3 +1,5 @@
+import './db-badge.js';
+
 interface DbListItemData {
     id: string;
     title: string;

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";import{dbUid as t}from"../core/uid.js";import{subscribeDbLocale as s,dbText as i}from"../core/i18n.js";import{coerceToContract as n}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{LIST_SIZES as a,LIST_VARIANTS as c}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbList extends HTMLElement{constructor(){super(...arguments),this.groupName=t("db-list")}static get observedAttributes(){return["items","size","variant","layout","spacing","selectable","multiple","selected-items","empty-message","show-description","show-arrow","show-badge","loading","loading-count"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get selectedItems(){const e=this.getAttribute("selected-items")||"[]";try{const t=JSON.parse(e);return Array.isArray(t)?t.map(String):[]}catch{return[]}}set selectedItems(e){this.setAttribute("selected-items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=s(()=>{const e=this.querySelector(".designbase-wc-list__empty");e&&(e.textContent=this.getAttribute("empty-message")||i("항목이 없습니다."))}),this.render()}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0}attributeChangedCallback(e){this.isConnected&&("selected-items"!==e?this.render():this.syncSelectionState())}flag(e,t=!0){return this.hasAttribute(e)?"false"!==this.getAttribute(e):t}controlSize(){return"l"===n(this.getAttribute("size"),a,"m")?"m":"s"}parseBadge(e){return e?"string"==typeof e?{text:e,variant:"primary",style:"text"}:{text:e.text,variant:e.variant||"primary",style:e.style||"text"}:null}isSelected(e){return e.selected||this.selectedItems.includes(e.id)}setSelection(e){const t=JSON.stringify(e);this.getAttribute("selected-items")!==t?(this.setAttribute("selected-items",t),this.syncSelectionState(),this.dispatchEvent(new CustomEvent("db-select",{detail:{selectedItems:e},bubbles:!0,composed:!0}))):this.syncSelectionState()}toggleSelection(e){const t=this.hasAttribute("multiple"),s=this.selectedItems;let i;i=t?s.includes(e)?s.filter(t=>t!==e):[...s,e]:s.includes(e)?[]:[e],this.setSelection(i)}syncSelectionState(){const e=new Set(this.selectedItems);this.querySelectorAll(":scope > .designbase-wc-list__item").forEach(t=>{const s=t.dataset.itemId;if(!s)return;const i=e.has(s);t.classList.toggle("designbase-wc-list__item--selected",i),t.setAttribute("aria-selected",String(i));const n=t.querySelector("db-checkbox, db-radio");n&&(i?n.setAttribute("checked",""):n.removeAttribute("checked"))})}createSelectControl(e,t){const s=document.createElement("div");s.className="designbase-wc-list__item-select";const i=document.createElement(t?"db-checkbox":"db-radio");return i.setAttribute("has-label","false"),i.setAttribute("size",this.controlSize()),i.setAttribute("value",e.id),t||i.setAttribute("name",this.groupName),this.isSelected(e)&&i.setAttribute("checked",""),e.disabled&&i.setAttribute("disabled",""),i.addEventListener("click",e=>e.stopPropagation()),i.addEventListener("db-change",t=>{t.stopPropagation(),e.disabled||this.toggleSelection(e.id)}),s.append(i),s}createBadge(e){const t=document.createElement("db-badge");return t.setAttribute("size","s"),t.setAttribute("variant",e.variant),t.setAttribute("type",e.style),"number"===e.style?t.setAttribute("count",e.text):t.textContent=e.text,t}render(){const t=n(this.getAttribute("size"),a,"m"),s=n(this.getAttribute("variant"),c,"navigation"),l=this.getAttribute("layout")||"vertical",d=this.getAttribute("spacing")||"s",r=this.hasAttribute("selectable"),o=this.hasAttribute("multiple"),m=this.hasAttribute("loading");m?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy");const b=Number(this.getAttribute("loading-count")||3),u=this.flag("show-description",!1),g=this.flag("show-arrow",!0),h=this.flag("show-badge",!0),p=this.items,_="s"===t?16:"l"===t?24:20;if(this.className=["designbase-wc-list",`designbase-wc-list--size-${t}`,`designbase-wc-list--variant-${s}`,`designbase-wc-list--layout-${l}`,`designbase-wc-list--spacing-${d}`,r&&"designbase-wc-list--selectable",o&&"designbase-wc-list--multiple",m&&"designbase-wc-list--loading"].filter(Boolean).join(" "),this.replaceChildren(),m)for(let e=0;e<b;e+=1){const e=document.createElement("div");e.className="designbase-wc-list__item designbase-wc-list__item--loading",e.innerHTML='\n                    <div class="designbase-wc-list__item-skeleton">\n                        <div class="designbase-wc-list__item-skeleton-icon"></div>\n                        <div class="designbase-wc-list__item-skeleton-content">\n                            <div class="designbase-wc-list__item-skeleton-title"></div>\n                            <div class="designbase-wc-list__item-skeleton-description"></div>\n                        </div>\n                    </div>\n                ',this.append(e)}else{if(0===p.length){const e=document.createElement("div");return e.className="designbase-wc-list__empty",e.textContent=this.getAttribute("empty-message")||i("항목이 없습니다."),void this.append(e)}p.forEach((i,n)=>{const a=this.isSelected(i),c=u&&Boolean(i.description),m=Boolean(i.meta?.length),b=this.parseBadge(i.badge),p=Boolean(h&&b||g),w=document.createElement("div");if(w.className=["designbase-wc-list__item",`designbase-wc-list__item--size-${t}`,`designbase-wc-list__item--variant-${s}`,`designbase-wc-list__item--layout-${l}`,`designbase-wc-list__item--spacing-${d}`,a&&"designbase-wc-list__item--selected",i.disabled&&"designbase-wc-list__item--disabled",(r||!i.disabled)&&"designbase-wc-list__item--clickable",i.icon&&"designbase-wc-list__item--with-leading",(c||m)&&"designbase-wc-list__item--with-secondary",p&&"designbase-wc-list__item--with-trailing"].filter(Boolean).join(" "),w.dataset.itemId=i.id,w.tabIndex=i.disabled?-1:0,r&&w.setAttribute("aria-selected",String(a)),r&&w.append(this.createSelectControl(i,o)),i.icon){const t=document.createElement("div");t.className="designbase-wc-list__item-icon",t.append(e(i.icon,_)),w.append(t)}else if(i.image){const e=document.createElement("div");e.className="designbase-wc-list__item-image";const t=document.createElement("img");t.src=i.image,t.alt=i.title,e.append(t),w.append(e)}const v=document.createElement("div");v.className="designbase-wc-list__item-content";const A=document.createElement("div");A.className="designbase-wc-list__item-header";const y=document.createElement("h4");if(y.className="designbase-wc-list__item-title",y.textContent=i.title,A.append(y),v.append(A),c){const e=document.createElement("p");e.className="designbase-wc-list__item-description",e.textContent=i.description||"",v.append(e)}if(m&&i.meta){const e=document.createElement("div");e.className="designbase-wc-list__item-meta",i.meta.forEach(t=>{const s=document.createElement("div");s.className="designbase-wc-list__item-meta-item";const i=document.createElement("span");i.className="designbase-wc-list__item-meta-label",i.textContent=`${t.label}:`;const n=document.createElement("span");n.className="designbase-wc-list__item-meta-value",n.textContent=t.value,s.append(i,n),e.append(s)}),v.append(e)}if(w.append(v),p){const t=document.createElement("div");if(t.className="designbase-wc-list__item-trailing",h&&b&&t.append(this.createBadge(b)),g){const s=document.createElement("div");s.className="designbase-wc-list__item-arrow",s.setAttribute("aria-hidden","true"),s.append(e("chevron-right",16)),t.append(s)}w.append(t)}const handleActivate=()=>{i.disabled||(this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:i,index:n},bubbles:!0,composed:!0})),r&&this.toggleSelection(i.id))};w.addEventListener("click",handleActivate),w.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),handleActivate())}),this.append(w)})}}}customElements.get("db-list")||customElements.define("db-list",DbList);export{DbList};
+import"./db-badge.js";import{createDbIcon as e}from"./db-icons.js";import{dbUid as t}from"../core/uid.js";import{subscribeDbLocale as s,dbText as i}from"../core/i18n.js";import{coerceToContract as n}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{LIST_SIZES as a,LIST_VARIANTS as c}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbList extends HTMLElement{constructor(){super(...arguments),this.groupName=t("db-list")}static get observedAttributes(){return["items","size","variant","layout","spacing","selectable","multiple","selected-items","empty-message","show-description","show-arrow","show-badge","loading","loading-count"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get selectedItems(){const e=this.getAttribute("selected-items")||"[]";try{const t=JSON.parse(e);return Array.isArray(t)?t.map(String):[]}catch{return[]}}set selectedItems(e){this.setAttribute("selected-items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=s(()=>{const e=this.querySelector(".designbase-wc-list__empty");e&&(e.textContent=this.getAttribute("empty-message")||i("항목이 없습니다."))}),this.render()}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0}attributeChangedCallback(e){this.isConnected&&("selected-items"!==e?this.render():this.syncSelectionState())}flag(e,t=!0){return this.hasAttribute(e)?"false"!==this.getAttribute(e):t}controlSize(){return"l"===n(this.getAttribute("size"),a,"m")?"m":"s"}parseBadge(e){return e?"string"==typeof e?{text:e,variant:"primary",style:"text"}:{text:e.text,variant:e.variant||"primary",style:e.style||"text"}:null}isSelected(e){return e.selected||this.selectedItems.includes(e.id)}setSelection(e){const t=JSON.stringify(e);this.getAttribute("selected-items")!==t?(this.setAttribute("selected-items",t),this.syncSelectionState(),this.dispatchEvent(new CustomEvent("db-select",{detail:{selectedItems:e},bubbles:!0,composed:!0}))):this.syncSelectionState()}toggleSelection(e){const t=this.hasAttribute("multiple"),s=this.selectedItems;let i;i=t?s.includes(e)?s.filter(t=>t!==e):[...s,e]:s.includes(e)?[]:[e],this.setSelection(i)}syncSelectionState(){const e=new Set(this.selectedItems);this.querySelectorAll(":scope > .designbase-wc-list__item").forEach(t=>{const s=t.dataset.itemId;if(!s)return;const i=e.has(s);t.classList.toggle("designbase-wc-list__item--selected",i),t.setAttribute("aria-selected",String(i));const n=t.querySelector("db-checkbox, db-radio");n&&(i?n.setAttribute("checked",""):n.removeAttribute("checked"))})}createSelectControl(e,t){const s=document.createElement("div");s.className="designbase-wc-list__item-select";const i=document.createElement(t?"db-checkbox":"db-radio");return i.setAttribute("has-label","false"),i.setAttribute("size",this.controlSize()),i.setAttribute("value",e.id),t||i.setAttribute("name",this.groupName),this.isSelected(e)&&i.setAttribute("checked",""),e.disabled&&i.setAttribute("disabled",""),i.addEventListener("click",e=>e.stopPropagation()),i.addEventListener("db-change",t=>{t.stopPropagation(),e.disabled||this.toggleSelection(e.id)}),s.append(i),s}createBadge(e){const t=document.createElement("db-badge");return t.setAttribute("size","s"),t.setAttribute("variant",e.variant),t.setAttribute("type",e.style),"number"===e.style?t.setAttribute("count",e.text):t.textContent=e.text,t}render(){const t=n(this.getAttribute("size"),a,"m"),s=n(this.getAttribute("variant"),c,"navigation"),l=this.getAttribute("layout")||"vertical",d=this.getAttribute("spacing")||"s",r=this.hasAttribute("selectable"),o=this.hasAttribute("multiple"),m=this.hasAttribute("loading");m?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy");const b=Number(this.getAttribute("loading-count")||3),u=this.flag("show-description",!1),g=this.flag("show-arrow",!0),h=this.flag("show-badge",!0),p=this.items,_="s"===t?16:"l"===t?24:20;if(this.className=["designbase-wc-list",`designbase-wc-list--size-${t}`,`designbase-wc-list--variant-${s}`,`designbase-wc-list--layout-${l}`,`designbase-wc-list--spacing-${d}`,r&&"designbase-wc-list--selectable",o&&"designbase-wc-list--multiple",m&&"designbase-wc-list--loading"].filter(Boolean).join(" "),this.replaceChildren(),m)for(let e=0;e<b;e+=1){const e=document.createElement("div");e.className="designbase-wc-list__item designbase-wc-list__item--loading",e.innerHTML='\n                    <div class="designbase-wc-list__item-skeleton">\n                        <div class="designbase-wc-list__item-skeleton-icon"></div>\n                        <div class="designbase-wc-list__item-skeleton-content">\n                            <div class="designbase-wc-list__item-skeleton-title"></div>\n                            <div class="designbase-wc-list__item-skeleton-description"></div>\n                        </div>\n                    </div>\n                ',this.append(e)}else{if(0===p.length){const e=document.createElement("div");return e.className="designbase-wc-list__empty",e.textContent=this.getAttribute("empty-message")||i("항목이 없습니다."),void this.append(e)}p.forEach((i,n)=>{const a=this.isSelected(i),c=u&&Boolean(i.description),m=Boolean(i.meta?.length),b=this.parseBadge(i.badge),p=Boolean(h&&b||g),w=document.createElement("div");if(w.className=["designbase-wc-list__item",`designbase-wc-list__item--size-${t}`,`designbase-wc-list__item--variant-${s}`,`designbase-wc-list__item--layout-${l}`,`designbase-wc-list__item--spacing-${d}`,a&&"designbase-wc-list__item--selected",i.disabled&&"designbase-wc-list__item--disabled",(r||!i.disabled)&&"designbase-wc-list__item--clickable",i.icon&&"designbase-wc-list__item--with-leading",(c||m)&&"designbase-wc-list__item--with-secondary",p&&"designbase-wc-list__item--with-trailing"].filter(Boolean).join(" "),w.dataset.itemId=i.id,w.tabIndex=i.disabled?-1:0,r&&w.setAttribute("aria-selected",String(a)),r&&w.append(this.createSelectControl(i,o)),i.icon){const t=document.createElement("div");t.className="designbase-wc-list__item-icon",t.append(e(i.icon,_)),w.append(t)}else if(i.image){const e=document.createElement("div");e.className="designbase-wc-list__item-image";const t=document.createElement("img");t.src=i.image,t.alt=i.title,e.append(t),w.append(e)}const v=document.createElement("div");v.className="designbase-wc-list__item-content";const A=document.createElement("div");A.className="designbase-wc-list__item-header";const y=document.createElement("h4");if(y.className="designbase-wc-list__item-title",y.textContent=i.title,A.append(y),v.append(A),c){const e=document.createElement("p");e.className="designbase-wc-list__item-description",e.textContent=i.description||"",v.append(e)}if(m&&i.meta){const e=document.createElement("div");e.className="designbase-wc-list__item-meta",i.meta.forEach(t=>{const s=document.createElement("div");s.className="designbase-wc-list__item-meta-item";const i=document.createElement("span");i.className="designbase-wc-list__item-meta-label",i.textContent=`${t.label}:`;const n=document.createElement("span");n.className="designbase-wc-list__item-meta-value",n.textContent=t.value,s.append(i,n),e.append(s)}),v.append(e)}if(w.append(v),p){const t=document.createElement("div");if(t.className="designbase-wc-list__item-trailing",h&&b&&t.append(this.createBadge(b)),g){const s=document.createElement("div");s.className="designbase-wc-list__item-arrow",s.setAttribute("aria-hidden","true"),s.append(e("chevron-right",16)),t.append(s)}w.append(t)}const handleActivate=()=>{i.disabled||(this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:i,index:n},bubbles:!0,composed:!0})),r&&this.toggleSelection(i.id))};w.addEventListener("click",handleActivate),w.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),handleActivate())}),this.append(w)})}}}customElements.get("db-list")||customElements.define("db-list",DbList);export{DbList};

package/dist/esm/components/db-menu-item.d.ts

@@ -1,3 +1,5 @@
+import './db-badge.js';
+
 interface DbMenuItemChildData {
     id: string;
     label: string;

package/dist/esm/components/db-menu-item.js

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";import{sanitizeHref as t}from"../core/safe-url.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{MENU_ITEM_SIZES as n,MENU_ITEM_VARIANTS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbMenuItem extends HTMLElement{constructor(){super(...arguments),this.childrenId="db-menu-children-"+ ++DbMenuItem.nextId}static get observedAttributes(){return["label","href","icon","active","disabled","badge","badge-color","size","variant","type","menu-style","expanded","expandable","split-expand","sub-items","depth"]}get subItems(){try{return JSON.parse(this.getAttribute("sub-items")||"[]")}catch{return[]}}set subItems(e){this.setAttribute("sub-items","string"==typeof e?e:JSON.stringify(e))}get expanded(){return this.hasAttribute("expanded")}set expanded(e){this.toggleAttribute("expanded",e)}connectedCallback(){this.render()}iconSize(e){return"s"===e?16:"l"===e?24:16}render(){const a=this.getAttribute("label")||"",d=t(this.getAttribute("href"),""),r=this.getAttribute("icon"),c=i(this.getAttribute("size"),n,"m"),b=i(this.getAttribute("variant"),s,"default"),u=this.getAttribute("type")||"block",o=this.getAttribute("menu-style")||"accordion",m=Number(this.getAttribute("depth")||0),l=this.hasAttribute("active"),h=this.hasAttribute("disabled"),p=(this.getAttribute("badge")||"").trim(),g=this.getAttribute("badge-color")||"primary",A=this.subItems,w=A.length>0,x=this.hasAttribute("expandable")||w,v=this.expanded,_=w&&!!d&&this.hasAttribute("split-expand"),f=this.iconSize(c),E="accordion"===o&&w;this.className=["designbase-wc-menu-item",`designbase-wc-menu-item--${u}`,`designbase-wc-menu-item--${c}`,`designbase-wc-menu-item--${b}`,`designbase-wc-menu-item--${o}`,`designbase-wc-menu-item--depth-${m}`,l&&"designbase-wc-menu-item--active",h&&"designbase-wc-menu-item--disabled",x&&"designbase-wc-menu-item--expandable",v&&"designbase-wc-menu-item--expanded",w&&"designbase-wc-menu-item--with-children",p&&"designbase-wc-menu-item--with-badge",r&&"designbase-wc-menu-item--with-icon"].filter(Boolean).join(" "),this.replaceChildren();const y=document.createElement(_?"a":"button");if(y instanceof HTMLButtonElement?y.type="button":h||(y.href=d),y.title=a,y instanceof HTMLButtonElement?y.disabled=h:h&&y.setAttribute("aria-disabled","true"),l&&y.setAttribute("aria-current","page"),w&&!_&&(y.setAttribute("aria-expanded",String(v)),(E||v)&&y.setAttribute("aria-controls",this.childrenId)),y.addEventListener("keydown",e=>{!w||h||_||("ArrowRight"===e.key&&!this.expanded||"ArrowLeft"===e.key&&this.expanded)&&(e.preventDefault(),y.click())}),y.className=["designbase-wc-menu-item__content","designbase-wc-menu-item__content--clickable"].join(" "),r){const t=document.createElement("div");t.className=["designbase-wc-menu-item__icon",`designbase-wc-menu-item__icon--${b}`,l&&"designbase-wc-menu-item__icon--active",h&&"designbase-wc-menu-item__icon--disabled"].filter(Boolean).join(" "),t.append(e(r,f)),y.append(t)}const k=document.createElement("span");if(k.className="designbase-wc-menu-item__label",k.textContent=a,y.append(k),p){const e=document.createElement("db-badge");e.setAttribute("size","s"),e.setAttribute("variant",g),Number.isFinite(Number(p))?(e.setAttribute("type","number"),e.setAttribute("count",p),e.setAttribute("max-count","999")):(e.setAttribute("type","text"),e.textContent=p),y.append(e)}if(w&&!_){const t=document.createElement("div");t.className="designbase-wc-menu-item__expand-icon",t.append(e(v?"chevron-up":"chevron-down",16)),y.append(t)}if(y.addEventListener("click",e=>{if(h)e.preventDefault();else{if(_){const t=new CustomEvent("db-navigate",{detail:{label:a,href:d},bubbles:!0,composed:!0,cancelable:!0});return void(this.dispatchEvent(t)||e.preventDefault())}w&&x?(e.preventDefault(),this.expanded=!this.expanded):d&&(window.location.href=d),this.dispatchEvent(new CustomEvent("db-click",{detail:{label:a,href:d,expanded:this.expanded},bubbles:!0,composed:!0}))}}),_){const t=document.createElement("div");t.className="designbase-wc-menu-item__split-row";const i=document.createElement("button");i.type="button",i.className="designbase-wc-menu-item__expand-icon designbase-wc-menu-item__expand-toggle",i.disabled=h,i.setAttribute("aria-label",a),i.setAttribute("aria-expanded",String(v)),i.setAttribute("aria-controls",this.childrenId),i.append(e(v?"chevron-up":"chevron-down",16)),i.addEventListener("click",()=>{h||(this.expanded=!this.expanded,this.dispatchEvent(new CustomEvent("db-click",{detail:{label:a,href:d,expanded:this.expanded},bubbles:!0,composed:!0})))}),t.append(y,i),this.append(t)}else this.append(y);if(w&&(v||E)){const e=document.createElement("div");e.className=`designbase-wc-menu-item__children designbase-wc-menu-item__children--${o}`,e.id=this.childrenId,e.inert=!v||h,E&&e.setAttribute("aria-hidden",v?"false":"true"),A.forEach(i=>{const n=document.createElement("db-menu-item");n.setAttribute("label",i.label),n.setAttribute("type","block"),n.setAttribute("menu-style",o),n.setAttribute("size",c),n.setAttribute("depth",String(m+1));const s=t(i.href,"");s&&n.setAttribute("href",s),i.icon&&n.setAttribute("icon",i.icon),i.active&&n.setAttribute("active",""),i.disabled&&n.setAttribute("disabled",""),void 0!==i.badge&&n.setAttribute("badge",String(i.badge)),i.badgeColor&&n.setAttribute("badge-color",i.badgeColor),i.variant&&n.setAttribute("variant",i.variant),n.addEventListener("db-click",e=>{e.stopPropagation(),i.disabled||this.dispatchEvent(new CustomEvent("db-child-click",{detail:{child:i},bubbles:!0,composed:!0}))}),e.append(n)}),this.append(e)}}attributeChangedCallback(e){this.isConnected&&("expanded"!==e||"accordion"!==this.getAttribute("menu-style")?this.render():this.syncExpandedState())}syncExpandedState(){const t=this.expanded;this.classList.toggle("designbase-wc-menu-item--expanded",t),this.querySelector(this.hasAttribute("split-expand")?":scope > .designbase-wc-menu-item__split-row > .designbase-wc-menu-item__expand-toggle":":scope > .designbase-wc-menu-item__content")?.setAttribute("aria-expanded",String(t));const i=this.querySelector(".designbase-wc-menu-item__expand-icon");i&&i.replaceChildren(e(t?"chevron-up":"chevron-down",16));const n=this.querySelector(".designbase-wc-menu-item__children--accordion");n?(n.inert=!t||this.hasAttribute("disabled"),n.setAttribute("aria-hidden",t?"false":"true")):t&&this.subItems.length&&this.render()}}DbMenuItem.nextId=0,customElements.get("db-menu-item")||customElements.define("db-menu-item",DbMenuItem);export{DbMenuItem};
+import"./db-badge.js";import{createDbIcon as e}from"./db-icons.js";import{sanitizeHref as t}from"../core/safe-url.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{MENU_ITEM_SIZES as n,MENU_ITEM_VARIANTS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbMenuItem extends HTMLElement{constructor(){super(...arguments),this.childrenId="db-menu-children-"+ ++DbMenuItem.nextId}static get observedAttributes(){return["label","href","icon","active","disabled","badge","badge-color","size","variant","type","menu-style","expanded","expandable","split-expand","sub-items","depth"]}get subItems(){try{return JSON.parse(this.getAttribute("sub-items")||"[]")}catch{return[]}}set subItems(e){this.setAttribute("sub-items","string"==typeof e?e:JSON.stringify(e))}get expanded(){return this.hasAttribute("expanded")}set expanded(e){this.toggleAttribute("expanded",e)}connectedCallback(){this.render()}iconSize(e){return"s"===e?16:"l"===e?24:16}render(){const a=this.getAttribute("label")||"",d=t(this.getAttribute("href"),""),r=this.getAttribute("icon"),c=i(this.getAttribute("size"),n,"m"),b=i(this.getAttribute("variant"),s,"default"),u=this.getAttribute("type")||"block",o=this.getAttribute("menu-style")||"accordion",m=Number(this.getAttribute("depth")||0),l=this.hasAttribute("active"),p=this.hasAttribute("disabled"),h=(this.getAttribute("badge")||"").trim(),g=this.getAttribute("badge-color")||"primary",A=this.subItems,w=A.length>0,x=this.hasAttribute("expandable")||w,v=this.expanded,_=w&&!!d&&this.hasAttribute("split-expand"),f=this.iconSize(c),E="accordion"===o&&w;this.className=["designbase-wc-menu-item",`designbase-wc-menu-item--${u}`,`designbase-wc-menu-item--${c}`,`designbase-wc-menu-item--${b}`,`designbase-wc-menu-item--${o}`,`designbase-wc-menu-item--depth-${m}`,l&&"designbase-wc-menu-item--active",p&&"designbase-wc-menu-item--disabled",x&&"designbase-wc-menu-item--expandable",v&&"designbase-wc-menu-item--expanded",w&&"designbase-wc-menu-item--with-children",h&&"designbase-wc-menu-item--with-badge",r&&"designbase-wc-menu-item--with-icon"].filter(Boolean).join(" "),this.replaceChildren();const y=document.createElement(_?"a":"button");if(y instanceof HTMLButtonElement?y.type="button":p||(y.href=d),y.title=a,y instanceof HTMLButtonElement?y.disabled=p:p&&y.setAttribute("aria-disabled","true"),l&&y.setAttribute("aria-current","page"),w&&!_&&(y.setAttribute("aria-expanded",String(v)),(E||v)&&y.setAttribute("aria-controls",this.childrenId)),y.addEventListener("keydown",e=>{!w||p||_||("ArrowRight"===e.key&&!this.expanded||"ArrowLeft"===e.key&&this.expanded)&&(e.preventDefault(),y.click())}),y.className=["designbase-wc-menu-item__content","designbase-wc-menu-item__content--clickable"].join(" "),r){const t=document.createElement("div");t.className=["designbase-wc-menu-item__icon",`designbase-wc-menu-item__icon--${b}`,l&&"designbase-wc-menu-item__icon--active",p&&"designbase-wc-menu-item__icon--disabled"].filter(Boolean).join(" "),t.append(e(r,f)),y.append(t)}const k=document.createElement("span");if(k.className="designbase-wc-menu-item__label",k.textContent=a,y.append(k),h){const e=document.createElement("db-badge");e.setAttribute("size","s"),e.setAttribute("variant",g),Number.isFinite(Number(h))?(e.setAttribute("type","number"),e.setAttribute("count",h),e.setAttribute("max-count","999")):(e.setAttribute("type","text"),e.textContent=h),y.append(e)}if(w&&!_){const t=document.createElement("div");t.className="designbase-wc-menu-item__expand-icon",t.append(e(v?"chevron-up":"chevron-down",16)),y.append(t)}if(y.addEventListener("click",e=>{if(p)e.preventDefault();else{if(_){const t=new CustomEvent("db-navigate",{detail:{label:a,href:d},bubbles:!0,composed:!0,cancelable:!0});return void(this.dispatchEvent(t)||e.preventDefault())}w&&x?(e.preventDefault(),this.expanded=!this.expanded):d&&(window.location.href=d),this.dispatchEvent(new CustomEvent("db-click",{detail:{label:a,href:d,expanded:this.expanded},bubbles:!0,composed:!0}))}}),_){const t=document.createElement("div");t.className="designbase-wc-menu-item__split-row";const i=document.createElement("button");i.type="button",i.className="designbase-wc-menu-item__expand-icon designbase-wc-menu-item__expand-toggle",i.disabled=p,i.setAttribute("aria-label",a),i.setAttribute("aria-expanded",String(v)),i.setAttribute("aria-controls",this.childrenId),i.append(e(v?"chevron-up":"chevron-down",16)),i.addEventListener("click",()=>{p||(this.expanded=!this.expanded,this.dispatchEvent(new CustomEvent("db-click",{detail:{label:a,href:d,expanded:this.expanded},bubbles:!0,composed:!0})))}),t.append(y,i),this.append(t)}else this.append(y);if(w&&(v||E)){const e=document.createElement("div");e.className=`designbase-wc-menu-item__children designbase-wc-menu-item__children--${o}`,e.id=this.childrenId,e.inert=!v||p,E&&e.setAttribute("aria-hidden",v?"false":"true"),A.forEach(i=>{const n=document.createElement("db-menu-item");n.setAttribute("label",i.label),n.setAttribute("type","block"),n.setAttribute("menu-style",o),n.setAttribute("size",c),n.setAttribute("depth",String(m+1));const s=t(i.href,"");s&&n.setAttribute("href",s),i.icon&&n.setAttribute("icon",i.icon),i.active&&n.setAttribute("active",""),i.disabled&&n.setAttribute("disabled",""),void 0!==i.badge&&n.setAttribute("badge",String(i.badge)),i.badgeColor&&n.setAttribute("badge-color",i.badgeColor),i.variant&&n.setAttribute("variant",i.variant),n.addEventListener("db-click",e=>{e.stopPropagation(),i.disabled||this.dispatchEvent(new CustomEvent("db-child-click",{detail:{child:i},bubbles:!0,composed:!0}))}),e.append(n)}),this.append(e)}}attributeChangedCallback(e){this.isConnected&&("expanded"!==e||"accordion"!==this.getAttribute("menu-style")?this.render():this.syncExpandedState())}syncExpandedState(){const t=this.expanded;this.classList.toggle("designbase-wc-menu-item--expanded",t),this.querySelector(this.hasAttribute("split-expand")?":scope > .designbase-wc-menu-item__split-row > .designbase-wc-menu-item__expand-toggle":":scope > .designbase-wc-menu-item__content")?.setAttribute("aria-expanded",String(t));const i=this.querySelector(".designbase-wc-menu-item__expand-icon");i&&i.replaceChildren(e(t?"chevron-up":"chevron-down",16));const n=this.querySelector(".designbase-wc-menu-item__children--accordion");n?(n.inert=!t||this.hasAttribute("disabled"),n.setAttribute("aria-hidden",t?"false":"true")):t&&this.subItems.length&&this.render()}}DbMenuItem.nextId=0,customElements.get("db-menu-item")||customElements.define("db-menu-item",DbMenuItem);export{DbMenuItem};

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

@@ -1,3 +1,6 @@
+import './db-tabs.js';
+import './db-segment-control.js';
+
 declare class DbModal extends HTMLElement {
     static get observedAttributes(): string[];
     private root?;