@designbasekorea/ui-wc 0.8.8 → 0.8.11

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";import{NAVBAR_SIZES as t,NAVBAR_VARIANTS as a,NAVBAR_POSITIONS as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";function resolveIcon(e){if(e)return e}class DbNavbar extends HTMLElement{constructor(){super(...arguments),this.mobileOpen=!1,this.userMenuOpen=!1,this.expandedMobile={},this.outsideHandler=null}static get observedAttributes(){return["items","user-menu-items","user-profile","size","variant","position","is-authenticated","show-search","search-placeholder","full-width","shadow"]}connectedCallback(){this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick()}attributeChangedCallback(){this.isConnected&&this.render()}get items(){return this.parseItems("items")}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseItems("user-menu-items")}set userMenuItems(e){this.setAttribute("user-menu-items","string"==typeof e?e:JSON.stringify(e))}get userProfile(){return this.parseUserProfile()}set userProfile(e){null==e?this.removeAttribute("user-profile"):this.setAttribute("user-profile","string"==typeof e?e:JSON.stringify(e))}parseItems(e="items"){try{const t=JSON.parse(this.getAttribute(e)||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}iconSize(e){return"s"===e?16:"l"===e?24:20}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{this.contains(e.target)||(this.userMenuOpen=!1,this.updateUserMenuVisibility())},document.addEventListener("mousedown",this.outsideHandler))}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}dispatchItemClick(e,t){this.dispatchEvent(new CustomEvent("user"===t?"db-user-menu-item-click":"db-item-click",{bubbles:!0,composed:!0,detail:{item:e,source:t}}))}syncHostClasses(){const e=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",i=this.getAttribute("position")||"static";this.className=["designbase-wc-navbar",`designbase-wc-navbar--${t.includes(e)?e:"m"}`,`designbase-wc-navbar--${a.includes(s)?s:"default"}`,`designbase-wc-navbar--${n.includes(i)?i:"static"}`,this.hasAttribute("full-width")&&"designbase-wc-navbar--full-width",this.hasAttribute("shadow")&&"designbase-wc-navbar--shadow",this.mobileOpen&&"designbase-wc-navbar--mobile-open"].filter(Boolean).join(" ")}isMegaMenu(e){return Boolean(e.megaMenu&&e.columns?.length)}createNavToggleButton(t,a){const n=document.createElement("button");n.type="button",n.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),n.disabled=Boolean(t.disabled);const s=resolveIcon(t.icon);s&&n.append(e(s,a)),n.append(document.createTextNode(t.label));const i=e("chevron-down",12);return i.classList.add("designbase-wc-navbar__chevron"),n.append(i),n}createMegaLink(t,a){const n=document.createElement("a");n.href=t.href||"#",n.className=["designbase-wc-navbar__mega-link",t.active&&"designbase-wc-navbar__mega-link--active",t.disabled&&"designbase-wc-navbar__mega-link--disabled"].filter(Boolean).join(" ");const s=resolveIcon(t.icon);if(s){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-link-icon",t.append(e(s,a)),n.append(t)}const i=document.createElement("span");i.className="designbase-wc-navbar__mega-link-body";const r=document.createElement("span");if(r.className="designbase-wc-navbar__mega-link-label",r.textContent=t.label,i.append(r),t.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-link-desc",e.textContent=t.description,i.append(e)}return n.append(i),n.addEventListener("click",e=>{e.preventDefault(),t.disabled||this.dispatchItemClick(t,"nav")}),n}createMegaMenu(e,t){const a=document.createElement("li");a.className="designbase-wc-navbar__nav-item designbase-wc-navbar__nav-item--mega";const n=this.createNavToggleButton(e,t),s=document.createElement("div");s.className="designbase-wc-navbar__mega";const i=document.createElement("div");i.className="designbase-wc-navbar__mega-inner";const r=document.createElement("div");return r.className="designbase-wc-navbar__mega-columns",r.style.setProperty("--db-navbar-mega-columns",String(e.columns.length)),e.columns.forEach(e=>{const a=document.createElement("div");if(a.className="designbase-wc-navbar__mega-column",e.title){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-column-title",t.textContent=e.title,a.append(t)}const n=document.createElement("ul");n.className="designbase-wc-navbar__mega-list",e.items.forEach(e=>{const a=document.createElement("li");a.append(this.createMegaLink(e,t)),n.append(a)}),a.append(n),r.append(a)}),i.append(r),e.featured&&i.append(this.createMegaFeatured(e.featured,t)),s.append(i),a.append(n,s),a}createMegaFeatured(t,a){const n=document.createElement("a");n.href=t.href||"#",n.className="designbase-wc-navbar__mega-featured",t.image&&(n.style.setProperty("--db-navbar-mega-featured-image",`url("${t.image}")`),n.classList.add("designbase-wc-navbar__mega-featured--image"));const s=resolveIcon(t.icon);if(s){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-icon",t.append(e(s,a+4)),n.append(t)}if(t.title){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-title",e.textContent=t.title,n.append(e)}if(t.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-desc",e.textContent=t.description,n.append(e)}if(t.ctaLabel){const a=document.createElement("span");a.className="designbase-wc-navbar__mega-featured-cta",a.append(document.createTextNode(t.ctaLabel)),a.append(e("chevron-right",14)),n.append(a)}return n.addEventListener("click",e=>{e.preventDefault(),this.dispatchItemClick({id:`${t.href||"featured"}`,label:t.title||"featured",href:t.href},"nav")}),n}createDesktopNavItem(t,a){if(this.isMegaMenu(t))return this.createMegaMenu(t,a);const n=document.createElement("li");n.className="designbase-wc-navbar__nav-item";if(Boolean(t.children?.length)){const s=document.createElement("div");s.className="designbase-wc-navbar__dropdown";const i=document.createElement("button");i.type="button",i.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),i.disabled=Boolean(t.disabled);const r=resolveIcon(t.icon);r&&i.append(e(r,a)),i.append(document.createTextNode(t.label));const c=e("chevron-down",12);c.classList.add("designbase-wc-navbar__chevron"),i.append(c);const d=document.createElement("ul");return d.className="designbase-wc-navbar__dropdown-menu",t.children.forEach(t=>{const n=document.createElement("li"),s=document.createElement("a");s.href=t.href||"#",s.className=["designbase-wc-navbar__dropdown-item",t.active&&"designbase-wc-navbar__dropdown-item--active",t.disabled&&"designbase-wc-navbar__dropdown-item--disabled"].filter(Boolean).join(" ");const i=resolveIcon(t.icon);i&&s.append(e(i,a)),s.append(document.createTextNode(t.label)),s.addEventListener("click",e=>{t.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(t,"nav"))}),n.append(s),d.append(n)}),s.append(i,d),n.append(s),n}const s=document.createElement("a");s.href=t.href||"#",s.className=["designbase-wc-navbar__nav-link",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" ");const i=resolveIcon(t.icon);return i&&s.append(e(i,a)),s.append(document.createTextNode(t.label)),s.addEventListener("click",e=>{t.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(t,"nav"))}),n.append(s),n}createUserMenuItemElement(e,t,a){const n=document.createElement("db-menu-item");return n.setAttribute("label",e.label),n.setAttribute("type","block"),n.setAttribute("menu-style","dropdown"),n.setAttribute("size",t),e.href&&n.setAttribute("href",e.href),e.icon&&n.setAttribute("icon",e.icon),e.disabled&&n.setAttribute("disabled",""),n.addEventListener("db-click",()=>{e.disabled||(a(),this.dispatchItemClick(e,"user"))}),n}bindSearchEvents(e){e.addEventListener("db-search",e=>{const t=e.detail,a=t.query??t.value??"";this.dispatchEvent(new CustomEvent("db-search",{bubbles:!0,composed:!0,detail:{query:a,value:a}}))})}applyAvatarProfile(e,t,a){e.setAttribute("size","s"===a?"s":"l"===a?"l":"m"),e.setAttribute("initials",t.name),e.setAttribute("alt",t.name),t.avatar&&e.setAttribute("src",t.avatar),void 0!==t.badge&&e.setAttribute("badge",String(t.badge)),t.badgeVariant&&e.setAttribute("badge-variant",t.badgeVariant),t.badgeType&&e.setAttribute("badge-type",t.badgeType),t.badgeText&&e.setAttribute("badge-text",t.badgeText)}getMobileChildren(e){if(this.isMegaMenu(e)){const t=(e.columns||[]).flatMap(e=>e.items);return e.featured?.href&&t.push({id:`${e.id}-featured`,label:e.featured.title||e.featured.ctaLabel||e.label,href:e.featured.href,icon:e.featured.icon}),t}return e.children||[]}createMobileMenuItem(e,t){const a=this.getMobileChildren(e),n=a.length>0,s=Boolean(this.expandedMobile[e.id]),i=document.createElement("db-menu-item");return i.setAttribute("label",e.label),i.setAttribute("type","block"),i.setAttribute("menu-style","accordion"),i.setAttribute("size",t),e.href&&i.setAttribute("href",e.href),e.icon&&i.setAttribute("icon",e.icon),e.active&&i.setAttribute("active",""),e.disabled&&i.setAttribute("disabled",""),n&&(i.setAttribute("expandable",""),i.subItems=a.map(e=>({id:e.id,label:e.label,href:e.href,icon:e.icon,active:e.active,disabled:e.disabled})),s&&i.setAttribute("expanded","")),i.addEventListener("db-click",()=>{if(!e.disabled){if(n)return this.expandedMobile[e.id]=!s,void this.renderMobileMenu();this.mobileOpen=!1,this.dispatchItemClick(e,"mobile"),this.render()}}),i.addEventListener("db-child-click",e=>{const t=e.detail;this.mobileOpen=!1,this.dispatchItemClick(t.child,"mobile"),this.render()}),i}updateUserMenuVisibility(){const e=this.querySelector(".designbase-wc-navbar__user-dropdown-menu");e&&(e.hidden=!this.userMenuOpen)}renderMobileMenu(){const e=this.querySelector(".designbase-wc-navbar__mobile-nav-list");if(!e)return;const t=this.getAttribute("size")||"m",a=this.parseItems();e.replaceChildren(...a.map(e=>this.createMobileMenuItem(e,t)))}render(){this.syncHostClasses(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","메인 네비게이션");const t=this.getAttribute("size")||"m",a=this.iconSize(t),n=this.parseItems(),s=this.parseItems("user-menu-items"),i=this.parseUserProfile(),r=this.hasAttribute("is-authenticated"),c=this.hasAttribute("show-search");this.replaceChildren();const d=document.createElement("div");d.className=["designbase-wc-navbar__container",this.hasAttribute("full-width")&&"designbase-wc-navbar__container--full-width"].filter(Boolean).join(" ");const l=document.createElement("div");l.className="designbase-wc-navbar__left";const o=document.createElement("div");o.className="designbase-wc-navbar__brand";const b=document.createElement("div");b.className="designbase-wc-navbar__logo";const u=document.createElement("db-logo");u.setAttribute("type","designbase"),u.setAttribute("size","s"),u.setAttribute("clickable",""),u.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),b.append(u),o.append(b),l.append(o);const m=document.createElement("div");m.className="designbase-wc-navbar__right";const p=document.createElement("div");p.className="designbase-wc-navbar__nav designbase-wc-navbar__nav--desktop";const h=document.createElement("ul");if(h.className="designbase-wc-navbar__nav-list",n.forEach(e=>h.append(this.createDesktopNavItem(e,a))),p.append(h),m.append(p),c){const e=document.createElement("div");e.className="designbase-wc-navbar__search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),e.append(a),m.append(e)}const v=document.createElement("div");if(v.className="designbase-wc-navbar__user-menu",r&&i){const a=document.createElement("div");a.className="designbase-wc-navbar__user-dropdown";const n=document.createElement("button");n.type="button",n.className="designbase-wc-navbar__user-toggle",n.setAttribute("aria-expanded",String(this.userMenuOpen));const r=document.createElement("db-avatar");this.applyAvatarProfile(r,i,t);const c=document.createElement("span");c.className="designbase-wc-navbar__user-name",c.textContent=i.name,n.append(r,c,e("chevron-down",12)),n.addEventListener("click",()=>{this.userMenuOpen=!this.userMenuOpen,n.setAttribute("aria-expanded",String(this.userMenuOpen)),this.updateUserMenuVisibility()});const d=document.createElement("ul");if(d.className="designbase-wc-navbar__user-dropdown-menu",d.hidden=!this.userMenuOpen,i.email){const e=document.createElement("li");e.className="designbase-wc-navbar__user-info";const t=document.createElement("span");t.className="designbase-wc-navbar__user-email",t.textContent=i.email,e.append(t),d.append(e)}s.forEach(e=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(e,t,()=>{this.userMenuOpen=!1,this.updateUserMenuVisibility()})),d.append(a)}),a.append(n,d),v.append(a)}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),v.append(e)}m.append(v);const g=document.createElement("button");g.type="button",g.className="designbase-wc-navbar__mobile-toggle",g.setAttribute("aria-expanded",String(this.mobileOpen)),g.setAttribute("aria-label","메뉴 열기");for(let e=0;e<3;e+=1){const e=document.createElement("span");e.className="designbase-wc-navbar__mobile-toggle-line",g.append(e)}if(g.addEventListener("click",()=>{this.mobileOpen=!this.mobileOpen,this.render()}),d.append(l,m,g),this.append(d),this.mobileOpen){const e=document.createElement("div");if(e.className="designbase-wc-navbar__mobile-menu",c){const t=document.createElement("div");t.className="designbase-wc-navbar__mobile-search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"),a.setAttribute("full-width",""),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),t.append(a),e.append(t)}const t=document.createElement("ul");t.className="designbase-wc-navbar__mobile-nav-list",e.append(t);const a=document.createElement("div");if(a.className="designbase-wc-navbar__mobile-user",r&&i){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-info";const t=document.createElement("db-avatar");this.applyAvatarProfile(t,i,"m");const n=document.createElement("div"),r=document.createElement("div");if(r.className="designbase-wc-navbar__mobile-user-name",r.textContent=i.name,n.append(r),i.email){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-email",e.textContent=i.email,n.append(e)}if(e.append(t,n),a.append(e),s.length){const e=document.createElement("ul");e.className="designbase-wc-navbar__mobile-user-menu",s.forEach(t=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(t,"m",()=>{this.mobileOpen=!1,this.render()})),e.append(a)}),a.append(e)}}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","m"),e.setAttribute("full-width",""),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),a.append(e)}e.append(a),this.append(e),this.renderMobileMenu()}}}customElements.get("db-navbar")||customElements.define("db-navbar",DbNavbar);export{DbNavbar};
+import{createDbIcon as e}from"./db-icons.js";import{sanitizeHref as t}from"../core/safe-url.js";import{NAVBAR_SIZES as a,NAVBAR_VARIANTS as n,NAVBAR_POSITIONS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";function resolveIcon(e){if(e)return e}class DbNavbar extends HTMLElement{constructor(){super(...arguments),this.mobileOpen=!1,this.userMenuOpen=!1,this.expandedMobile={},this.outsideHandler=null}static get observedAttributes(){return["items","user-menu-items","user-profile","size","variant","position","is-authenticated","show-search","search-placeholder","full-width","shadow"]}connectedCallback(){this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick()}attributeChangedCallback(){this.isConnected&&this.render()}get items(){return this.parseItems("items")}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseItems("user-menu-items")}set userMenuItems(e){this.setAttribute("user-menu-items","string"==typeof e?e:JSON.stringify(e))}get userProfile(){return this.parseUserProfile()}set userProfile(e){null==e?this.removeAttribute("user-profile"):this.setAttribute("user-profile","string"==typeof e?e:JSON.stringify(e))}parseItems(e="items"){try{const t=JSON.parse(this.getAttribute(e)||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}iconSize(e){return"s"===e?16:"l"===e?24:20}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{this.contains(e.target)||(this.userMenuOpen=!1,this.updateUserMenuVisibility())},document.addEventListener("mousedown",this.outsideHandler))}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}dispatchItemClick(e,t){this.dispatchEvent(new CustomEvent("user"===t?"db-user-menu-item-click":"db-item-click",{bubbles:!0,composed:!0,detail:{item:e,source:t}}))}syncHostClasses(){const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",i=this.getAttribute("position")||"static";this.className=["designbase-wc-navbar",`designbase-wc-navbar--${a.includes(e)?e:"m"}`,`designbase-wc-navbar--${n.includes(t)?t:"default"}`,`designbase-wc-navbar--${s.includes(i)?i:"static"}`,this.hasAttribute("full-width")&&"designbase-wc-navbar--full-width",this.hasAttribute("shadow")&&"designbase-wc-navbar--shadow",this.mobileOpen&&"designbase-wc-navbar--mobile-open"].filter(Boolean).join(" ")}isMegaMenu(e){return Boolean(e.megaMenu&&e.columns?.length)}createNavToggleButton(t,a){const n=document.createElement("button");n.type="button",n.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),n.disabled=Boolean(t.disabled);const s=resolveIcon(t.icon);s&&n.append(e(s,a)),n.append(document.createTextNode(t.label));const i=e("chevron-down",12);return i.classList.add("designbase-wc-navbar__chevron"),n.append(i),n}createMegaLink(a,n){const s=document.createElement("a");s.href=t(a.href,"#"),s.className=["designbase-wc-navbar__mega-link",a.active&&"designbase-wc-navbar__mega-link--active",a.disabled&&"designbase-wc-navbar__mega-link--disabled"].filter(Boolean).join(" ");const i=resolveIcon(a.icon);if(i){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-link-icon",t.append(e(i,n)),s.append(t)}const r=document.createElement("span");r.className="designbase-wc-navbar__mega-link-body";const c=document.createElement("span");if(c.className="designbase-wc-navbar__mega-link-label",c.textContent=a.label,r.append(c),a.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-link-desc",e.textContent=a.description,r.append(e)}return s.append(r),s.addEventListener("click",e=>{e.preventDefault(),a.disabled||this.dispatchItemClick(a,"nav")}),s}createMegaMenu(e,t){const a=document.createElement("li");a.className="designbase-wc-navbar__nav-item designbase-wc-navbar__nav-item--mega";const n=this.createNavToggleButton(e,t),s=document.createElement("div");s.className="designbase-wc-navbar__mega";const i=document.createElement("div");i.className="designbase-wc-navbar__mega-inner";const r=document.createElement("div");return r.className="designbase-wc-navbar__mega-columns",r.style.setProperty("--db-navbar-mega-columns",String(e.columns.length)),e.columns.forEach(e=>{const a=document.createElement("div");if(a.className="designbase-wc-navbar__mega-column",e.title){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-column-title",t.textContent=e.title,a.append(t)}const n=document.createElement("ul");n.className="designbase-wc-navbar__mega-list",e.items.forEach(e=>{const a=document.createElement("li");a.append(this.createMegaLink(e,t)),n.append(a)}),a.append(n),r.append(a)}),i.append(r),e.featured&&i.append(this.createMegaFeatured(e.featured,t)),s.append(i),a.append(n,s),a}createMegaFeatured(a,n){const s=document.createElement("a");s.href=t(a.href,"#"),s.className="designbase-wc-navbar__mega-featured",a.image&&(s.style.setProperty("--db-navbar-mega-featured-image",`url("${a.image}")`),s.classList.add("designbase-wc-navbar__mega-featured--image"));const i=resolveIcon(a.icon);if(i){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-icon",t.append(e(i,n+4)),s.append(t)}if(a.title){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-title",e.textContent=a.title,s.append(e)}if(a.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-desc",e.textContent=a.description,s.append(e)}if(a.ctaLabel){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-cta",t.append(document.createTextNode(a.ctaLabel)),t.append(e("chevron-right",14)),s.append(t)}return s.addEventListener("click",e=>{e.preventDefault(),this.dispatchItemClick({id:`${a.href||"featured"}`,label:a.title||"featured",href:a.href},"nav")}),s}createDesktopNavItem(a,n){if(this.isMegaMenu(a))return this.createMegaMenu(a,n);const s=document.createElement("li");s.className="designbase-wc-navbar__nav-item";if(Boolean(a.children?.length)){const i=document.createElement("div");i.className="designbase-wc-navbar__dropdown";const r=document.createElement("button");r.type="button",r.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",a.active&&"designbase-wc-navbar__nav-link--active",a.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),r.disabled=Boolean(a.disabled);const c=resolveIcon(a.icon);c&&r.append(e(c,n)),r.append(document.createTextNode(a.label));const d=e("chevron-down",12);d.classList.add("designbase-wc-navbar__chevron"),r.append(d);const l=document.createElement("ul");return l.className="designbase-wc-navbar__dropdown-menu",a.children.forEach(a=>{const s=document.createElement("li"),i=document.createElement("a");i.href=t(a.href,"#"),i.className=["designbase-wc-navbar__dropdown-item",a.active&&"designbase-wc-navbar__dropdown-item--active",a.disabled&&"designbase-wc-navbar__dropdown-item--disabled"].filter(Boolean).join(" ");const r=resolveIcon(a.icon);r&&i.append(e(r,n)),i.append(document.createTextNode(a.label)),i.addEventListener("click",e=>{a.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(a,"nav"))}),s.append(i),l.append(s)}),i.append(r,l),s.append(i),s}const i=document.createElement("a");i.href=t(a.href,"#"),i.className=["designbase-wc-navbar__nav-link",a.active&&"designbase-wc-navbar__nav-link--active",a.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" ");const r=resolveIcon(a.icon);return r&&i.append(e(r,n)),i.append(document.createTextNode(a.label)),i.addEventListener("click",e=>{a.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(a,"nav"))}),s.append(i),s}createUserMenuItemElement(e,a,n){const s=document.createElement("db-menu-item");s.setAttribute("label",e.label),s.setAttribute("type","block"),s.setAttribute("menu-style","dropdown"),s.setAttribute("size",a);const i=t(e.href,"");return i&&s.setAttribute("href",i),e.icon&&s.setAttribute("icon",e.icon),e.disabled&&s.setAttribute("disabled",""),s.addEventListener("db-click",()=>{e.disabled||(n(),this.dispatchItemClick(e,"user"))}),s}bindSearchEvents(e){e.addEventListener("db-search",e=>{const t=e.detail,a=t.query??t.value??"";this.dispatchEvent(new CustomEvent("db-search",{bubbles:!0,composed:!0,detail:{query:a,value:a}}))})}applyAvatarProfile(e,t,a){e.setAttribute("size","s"===a?"s":"l"===a?"l":"m"),e.setAttribute("initials",t.name),e.setAttribute("alt",t.name),t.avatar&&e.setAttribute("src",t.avatar),void 0!==t.badge&&e.setAttribute("badge",String(t.badge)),t.badgeVariant&&e.setAttribute("badge-variant",t.badgeVariant),t.badgeType&&e.setAttribute("badge-type",t.badgeType),t.badgeText&&e.setAttribute("badge-text",t.badgeText)}getMobileChildren(e){if(this.isMegaMenu(e)){const t=(e.columns||[]).flatMap(e=>e.items);return e.featured?.href&&t.push({id:`${e.id}-featured`,label:e.featured.title||e.featured.ctaLabel||e.label,href:e.featured.href,icon:e.featured.icon}),t}return e.children||[]}createMobileMenuItem(e,a){const n=this.getMobileChildren(e),s=n.length>0,i=Boolean(this.expandedMobile[e.id]),r=document.createElement("db-menu-item");r.setAttribute("label",e.label),r.setAttribute("type","block"),r.setAttribute("menu-style","accordion"),r.setAttribute("size",a);const c=t(e.href,"");return c&&r.setAttribute("href",c),e.icon&&r.setAttribute("icon",e.icon),e.active&&r.setAttribute("active",""),e.disabled&&r.setAttribute("disabled",""),s&&(r.setAttribute("expandable",""),r.subItems=n.map(e=>({id:e.id,label:e.label,href:e.href,icon:e.icon,active:e.active,disabled:e.disabled})),i&&r.setAttribute("expanded","")),r.addEventListener("db-click",()=>{if(!e.disabled){if(s)return this.expandedMobile[e.id]=!i,void this.renderMobileMenu();this.mobileOpen=!1,this.dispatchItemClick(e,"mobile"),this.render()}}),r.addEventListener("db-child-click",e=>{const t=e.detail;this.mobileOpen=!1,this.dispatchItemClick(t.child,"mobile"),this.render()}),r}updateUserMenuVisibility(){const e=this.querySelector(".designbase-wc-navbar__user-dropdown-menu");e&&(e.hidden=!this.userMenuOpen)}renderMobileMenu(){const e=this.querySelector(".designbase-wc-navbar__mobile-nav-list");if(!e)return;const t=this.getAttribute("size")||"m",a=this.parseItems();e.replaceChildren(...a.map(e=>this.createMobileMenuItem(e,t)))}render(){this.syncHostClasses(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","메인 네비게이션");const t=this.getAttribute("size")||"m",a=this.iconSize(t),n=this.parseItems(),s=this.parseItems("user-menu-items"),i=this.parseUserProfile(),r=this.hasAttribute("is-authenticated"),c=this.hasAttribute("show-search");this.replaceChildren();const d=document.createElement("div");d.className=["designbase-wc-navbar__container",this.hasAttribute("full-width")&&"designbase-wc-navbar__container--full-width"].filter(Boolean).join(" ");const l=document.createElement("div");l.className="designbase-wc-navbar__left";const o=document.createElement("div");o.className="designbase-wc-navbar__brand";const b=document.createElement("div");b.className="designbase-wc-navbar__logo";const u=document.createElement("db-logo");u.setAttribute("type","designbase"),u.setAttribute("size","s"),u.setAttribute("clickable",""),u.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),b.append(u),o.append(b),l.append(o);const m=document.createElement("div");m.className="designbase-wc-navbar__right";const p=document.createElement("div");p.className="designbase-wc-navbar__nav designbase-wc-navbar__nav--desktop";const h=document.createElement("ul");if(h.className="designbase-wc-navbar__nav-list",n.forEach(e=>h.append(this.createDesktopNavItem(e,a))),p.append(h),m.append(p),c){const e=document.createElement("div");e.className="designbase-wc-navbar__search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),e.append(a),m.append(e)}const v=document.createElement("div");if(v.className="designbase-wc-navbar__user-menu",r&&i){const a=document.createElement("div");a.className="designbase-wc-navbar__user-dropdown";const n=document.createElement("button");n.type="button",n.className="designbase-wc-navbar__user-toggle",n.setAttribute("aria-expanded",String(this.userMenuOpen));const r=document.createElement("db-avatar");this.applyAvatarProfile(r,i,t);const c=document.createElement("span");c.className="designbase-wc-navbar__user-name",c.textContent=i.name,n.append(r,c,e("chevron-down",12)),n.addEventListener("click",()=>{this.userMenuOpen=!this.userMenuOpen,n.setAttribute("aria-expanded",String(this.userMenuOpen)),this.updateUserMenuVisibility()});const d=document.createElement("ul");if(d.className="designbase-wc-navbar__user-dropdown-menu",d.hidden=!this.userMenuOpen,i.email){const e=document.createElement("li");e.className="designbase-wc-navbar__user-info";const t=document.createElement("span");t.className="designbase-wc-navbar__user-email",t.textContent=i.email,e.append(t),d.append(e)}s.forEach(e=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(e,t,()=>{this.userMenuOpen=!1,this.updateUserMenuVisibility()})),d.append(a)}),a.append(n,d),v.append(a)}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),v.append(e)}m.append(v);const g=document.createElement("button");g.type="button",g.className="designbase-wc-navbar__mobile-toggle",g.setAttribute("aria-expanded",String(this.mobileOpen)),g.setAttribute("aria-label","메뉴 열기");for(let e=0;e<3;e+=1){const e=document.createElement("span");e.className="designbase-wc-navbar__mobile-toggle-line",g.append(e)}if(g.addEventListener("click",()=>{this.mobileOpen=!this.mobileOpen,this.render()}),d.append(l,m,g),this.append(d),this.mobileOpen){const e=document.createElement("div");if(e.className="designbase-wc-navbar__mobile-menu",c){const t=document.createElement("div");t.className="designbase-wc-navbar__mobile-search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"),a.setAttribute("full-width",""),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),t.append(a),e.append(t)}const t=document.createElement("ul");t.className="designbase-wc-navbar__mobile-nav-list",e.append(t);const a=document.createElement("div");if(a.className="designbase-wc-navbar__mobile-user",r&&i){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-info";const t=document.createElement("db-avatar");this.applyAvatarProfile(t,i,"m");const n=document.createElement("div"),r=document.createElement("div");if(r.className="designbase-wc-navbar__mobile-user-name",r.textContent=i.name,n.append(r),i.email){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-email",e.textContent=i.email,n.append(e)}if(e.append(t,n),a.append(e),s.length){const e=document.createElement("ul");e.className="designbase-wc-navbar__mobile-user-menu",s.forEach(t=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(t,"m",()=>{this.mobileOpen=!1,this.render()})),e.append(a)}),a.append(e)}}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","m"),e.setAttribute("full-width",""),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),a.append(e)}e.append(a),this.append(e),this.renderMobileMenu()}}}customElements.get("db-navbar")||customElements.define("db-navbar",DbNavbar);export{DbNavbar};

package/dist/esm/components/db-otp-input.js

@@ -1 +1 @@
-import{dbUid as t}from"../core/uid.js";import{OTP_INPUT_SIZES as e}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}class DbOtpInput extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals?.(),this.built=!1,this.digits=[],this.suppressSync=!1,this.initialValue="",this.lastCompleteValue="",this.onDigitFocus=t=>{const e=t.currentTarget;requestAnimationFrame(()=>e.select())},this.onDigitInput=t=>{if(this.suppressSync)return;const e=t.currentTarget,i=Number(e.dataset.index||0),s=e.value.replace(/\D/g,"");if(s.length>1){const t=this.digits.slice(0,i).map(t=>t.value).join("");return void this.applyValue(t+s,Math.min(this.length-1,t.length+s.length))}e.value=s.slice(-1),e.classList.toggle("designbase-wc-otp-input__digit--filled",Boolean(e.value));const a=this.digits.map(t=>t.value).join("");this.setAttribute("value",a),this.emit("db-input"),this.emit("db-change"),e.value&&i<this.digits.length-1&&this.focusAt(i+1)},this.onDigitKeydown=t=>{const e=t.currentTarget,i=Number(e.dataset.index||0);if("Backspace"!==t.key)return"ArrowLeft"===t.key?(t.preventDefault(),void this.focusAt(i-1)):"ArrowRight"===t.key?(t.preventDefault(),void this.focusAt(i+1)):void("Delete"===t.key&&(e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change")));if(e.value)e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change");else if(i>0){t.preventDefault(),this.focusAt(i-1);const e=this.digits[i-1];e&&(e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change"))}},this.onPaste=t=>{t.preventDefault();const e=t.clipboardData?.getData("text")||"",i=Number(t.currentTarget.dataset.index||0),s=this.digits.slice(0,i).map(t=>t.value).join("");this.applyValue(s+e,Math.min(this.length-1,s.length+e.replace(/\D/g,"").length))}}static get observedAttributes(){return["length","value","size","disabled","readonly","error","error-message","label","auto-focus","masked","name","required"]}get length(){const t=Number(this.getAttribute("length")||6);return Number.isFinite(t)?Math.min(8,Math.max(4,Math.round(t))):6}set length(t){this.setAttribute("length",String(t))}get value(){return this.digits.map(t=>t.value).join("")||this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}get size(){return function pick(t,e,i){return t.includes(e)?e:i}(e,this.getAttribute("size"),"m")}set size(t){this.setAttribute("size",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t)}connectedCallback(){this.built||(this.initialValue=this.getAttribute("value")||""),this.build(),this.sync(),this.hasAttribute("auto-focus")&&!this.disabled&&requestAnimationFrame(()=>this.focusFirstEmpty())}attributeChangedCallback(t){this.built&&("length"===t&&(this.built=!1,this.build()),this.sync())}focus(){this.disabled||this.focusFirstEmpty()}clear(){this.suppressSync=!0,this.digits.forEach(t=>{t.value=""}),this.suppressSync=!1,this.lastCompleteValue="",this.setValueAttribute(""),this.emit("db-input"),this.emit("db-change"),this.focusFirstEmpty()}formResetCallback(){this.lastCompleteValue="",this.value=this.initialValue}formDisabledCallback(t){this.toggleAttribute("disabled",t)}build(){this.replaceChildren(),this.digits=[];const e=this.length,i="designbase-wc-otp-input",s=this.getAttribute("label");if(s){const t=el("div",`${i}__label`);t.textContent=s,this.append(t)}const a=el("div",`${i}__row`);a.setAttribute("role","group"),a.setAttribute("aria-label",s||"인증 코드");for(let t=0;t<e;t+=1){const e=el("div",`${i}__cell`),s=document.createElement("input");s.className=`${i}__digit`,s.type=this.hasAttribute("masked")?"password":"text",s.inputMode="numeric",s.autocomplete=0===t?"one-time-code":"off",s.maxLength=1,s.pattern="[0-9]*",s.setAttribute("aria-label",`${t+1}번째 자리`),s.dataset.index=String(t),s.addEventListener("input",this.onDigitInput),s.addEventListener("keydown",this.onDigitKeydown),s.addEventListener("paste",this.onPaste),s.addEventListener("focus",this.onDigitFocus),e.append(s),a.append(e),this.digits.push(s)}this.append(a),this.errorEl=el("p",`${i}__error`),this.errorEl.id=`${this.id||t("db-otp")}-error`,this.errorEl.setAttribute("role","alert"),this.errorEl.hidden=!0,this.append(this.errorEl),this.built=!0}sync(){const t="designbase-wc-otp-input",e=this.size,i=this.hasAttribute("error"),s=this.disabled,a=this.readOnly,l=this.getAttribute("error-message")||"";this.className=[t,`${t}--${e}`,i&&`${t}--error`,s&&`${t}--disabled`].filter(Boolean).join(" ");const r=(this.getAttribute("value")||"").replace(/\D/g,"").slice(0,this.length);this.suppressSync=!0,this.digits.forEach((e,n)=>{e.value=r[n]||"",e.disabled=s,e.readOnly=a,e.type=this.hasAttribute("masked")?"password":"text",e.classList.toggle(`${t}__digit--filled`,Boolean(e.value)),e.setAttribute("aria-invalid",String(i)),i&&l?e.setAttribute("aria-describedby",this.errorEl?.id||""):e.removeAttribute("aria-describedby")}),this.suppressSync=!1,this.errorEl&&(this.errorEl.textContent=l,this.errorEl.hidden=!i||!l),this.setAttribute("role","group"),this.setAttribute("aria-disabled",String(s)),this.setAttribute("aria-invalid",String(i)),this.syncFormValue(r)}emit(t){const e=this.digits.map(t=>t.value).join("");if(this.setValueAttribute(e),this.dispatchEvent(new CustomEvent(t,{detail:{value:e},bubbles:!0,composed:!0})),"db-change"===t&&e.length===this.length&&/^\d+$/.test(e)){if(e===this.lastCompleteValue)return;this.lastCompleteValue=e,this.dispatchEvent(new CustomEvent("db-complete",{detail:{value:e},bubbles:!0,composed:!0}))}else e.length!==this.length&&(this.lastCompleteValue="")}setValueAttribute(t){this.getAttribute("value")!==t&&this.setAttribute("value",t),this.syncFormValue(t)}syncFormValue(t){this.internals?.setFormValue(t||null),this.internals&&(this.hasAttribute("error")?this.internals.setValidity({customError:!0},this.getAttribute("error-message")||"인증 코드가 올바르지 않습니다.",this.digits[0]):this.hasAttribute("required")&&t.length!==this.length?this.internals.setValidity({valueMissing:!0},"인증 코드를 모두 입력해 주세요.",this.digits.find(t=>!t.value)||this.digits[0]):this.internals.setValidity({}))}focusFirstEmpty(){const t=this.digits.find(t=>!t.value)||this.digits[this.digits.length-1];t?.focus(),t?.select()}focusAt(t){const e=this.digits[Math.max(0,Math.min(this.digits.length-1,t))];e?.focus(),e?.select()}applyValue(t,e){const i=t.replace(/\D/g,"").slice(0,this.length);this.suppressSync=!0,this.digits.forEach((t,e)=>{t.value=i[e]||"",t.classList.toggle("designbase-wc-otp-input__digit--filled",Boolean(t.value))}),this.suppressSync=!1,this.emit("db-input"),this.emit("db-change"),void 0!==e?this.focusAt(e):i.length<this.length?this.focusAt(i.length):this.focusAt(this.length-1)}}DbOtpInput.formAssociated=!0,customElements.get("db-otp-input")||customElements.define("db-otp-input",DbOtpInput);export{DbOtpInput};
+import{dbUid as t}from"../core/uid.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{OTP_INPUT_SIZES as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}class DbOtpInput extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals?.(),this.built=!1,this.digits=[],this.suppressSync=!1,this.initialValue="",this.lastCompleteValue="",this.onDigitFocus=t=>{const e=t.currentTarget;requestAnimationFrame(()=>e.select())},this.onDigitInput=t=>{if(this.suppressSync)return;const e=t.currentTarget,i=Number(e.dataset.index||0),s=e.value.replace(/\D/g,"");if(s.length>1){const t=this.digits.slice(0,i).map(t=>t.value).join("");return void this.applyValue(t+s,Math.min(this.length-1,t.length+s.length))}e.value=s.slice(-1),e.classList.toggle("designbase-wc-otp-input__digit--filled",Boolean(e.value));const a=this.digits.map(t=>t.value).join("");this.setAttribute("value",a),this.emit("db-input"),this.emit("db-change"),e.value&&i<this.digits.length-1&&this.focusAt(i+1)},this.onDigitKeydown=t=>{const e=t.currentTarget,i=Number(e.dataset.index||0);if("Backspace"!==t.key)return"ArrowLeft"===t.key?(t.preventDefault(),void this.focusAt(i-1)):"ArrowRight"===t.key?(t.preventDefault(),void this.focusAt(i+1)):void("Delete"===t.key&&(e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change")));if(e.value)e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change");else if(i>0){t.preventDefault(),this.focusAt(i-1);const e=this.digits[i-1];e&&(e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change"))}},this.onPaste=t=>{t.preventDefault();const e=t.clipboardData?.getData("text")||"",i=Number(t.currentTarget.dataset.index||0),s=this.digits.slice(0,i).map(t=>t.value).join("");this.applyValue(s+e,Math.min(this.length-1,s.length+e.replace(/\D/g,"").length))}}static get observedAttributes(){return["length","value","size","disabled","readonly","error","error-message","label","auto-focus","masked","name","required"]}get length(){const t=Number(this.getAttribute("length")||6);return Number.isFinite(t)?Math.min(8,Math.max(4,Math.round(t))):6}set length(t){this.setAttribute("length",String(t))}get value(){return this.digits.map(t=>t.value).join("")||this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}get size(){return e(this.getAttribute("size"),i,"m")}set size(t){this.setAttribute("size",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t)}connectedCallback(){this.built||(this.initialValue=this.getAttribute("value")||""),this.build(),this.sync(),this.hasAttribute("auto-focus")&&!this.disabled&&requestAnimationFrame(()=>this.focusFirstEmpty())}attributeChangedCallback(t){this.built&&("length"===t&&(this.built=!1,this.build()),this.sync())}focus(){this.disabled||this.focusFirstEmpty()}clear(){this.suppressSync=!0,this.digits.forEach(t=>{t.value=""}),this.suppressSync=!1,this.lastCompleteValue="",this.setValueAttribute(""),this.emit("db-input"),this.emit("db-change"),this.focusFirstEmpty()}formResetCallback(){this.lastCompleteValue="",this.value=this.initialValue}formDisabledCallback(t){this.toggleAttribute("disabled",t)}build(){this.replaceChildren(),this.digits=[];const e=this.length,i="designbase-wc-otp-input",s=this.getAttribute("label");if(s){const t=el("div",`${i}__label`);t.textContent=s,this.append(t)}const a=el("div",`${i}__row`);a.setAttribute("role","group"),a.setAttribute("aria-label",s||"인증 코드");for(let t=0;t<e;t+=1){const e=el("div",`${i}__cell`),s=document.createElement("input");s.className=`${i}__digit`,s.type=this.hasAttribute("masked")?"password":"text",s.inputMode="numeric",s.autocomplete=0===t?"one-time-code":"off",s.maxLength=1,s.pattern="[0-9]*",s.setAttribute("aria-label",`${t+1}번째 자리`),s.dataset.index=String(t),s.addEventListener("input",this.onDigitInput),s.addEventListener("keydown",this.onDigitKeydown),s.addEventListener("paste",this.onPaste),s.addEventListener("focus",this.onDigitFocus),e.append(s),a.append(e),this.digits.push(s)}this.append(a),this.errorEl=el("p",`${i}__error`),this.errorEl.id=`${this.id||t("db-otp")}-error`,this.errorEl.setAttribute("role","alert"),this.errorEl.hidden=!0,this.append(this.errorEl),this.built=!0}sync(){const t="designbase-wc-otp-input",e=this.size,i=this.hasAttribute("error"),s=this.disabled,a=this.readOnly,r=this.getAttribute("error-message")||"";this.className=[t,`${t}--${e}`,i&&`${t}--error`,s&&`${t}--disabled`].filter(Boolean).join(" ");const l=(this.getAttribute("value")||"").replace(/\D/g,"").slice(0,this.length);this.suppressSync=!0,this.digits.forEach((e,n)=>{e.value=l[n]||"",e.disabled=s,e.readOnly=a,e.type=this.hasAttribute("masked")?"password":"text",e.classList.toggle(`${t}__digit--filled`,Boolean(e.value)),e.setAttribute("aria-invalid",String(i)),i&&r?e.setAttribute("aria-describedby",this.errorEl?.id||""):e.removeAttribute("aria-describedby")}),this.suppressSync=!1,this.errorEl&&(this.errorEl.textContent=r,this.errorEl.hidden=!i||!r),this.setAttribute("role","group"),this.setAttribute("aria-disabled",String(s)),this.setAttribute("aria-invalid",String(i)),this.syncFormValue(l)}emit(t){const e=this.digits.map(t=>t.value).join("");if(this.setValueAttribute(e),this.dispatchEvent(new CustomEvent(t,{detail:{value:e},bubbles:!0,composed:!0})),"db-change"===t&&e.length===this.length&&/^\d+$/.test(e)){if(e===this.lastCompleteValue)return;this.lastCompleteValue=e,this.dispatchEvent(new CustomEvent("db-complete",{detail:{value:e},bubbles:!0,composed:!0}))}else e.length!==this.length&&(this.lastCompleteValue="")}setValueAttribute(t){this.getAttribute("value")!==t&&this.setAttribute("value",t),this.syncFormValue(t)}syncFormValue(t){this.internals?.setFormValue(t||null),this.internals&&(this.hasAttribute("error")?this.internals.setValidity({customError:!0},this.getAttribute("error-message")||"인증 코드가 올바르지 않습니다.",this.digits[0]):this.hasAttribute("required")&&t.length!==this.length?this.internals.setValidity({valueMissing:!0},"인증 코드를 모두 입력해 주세요.",this.digits.find(t=>!t.value)||this.digits[0]):this.internals.setValidity({}))}focusFirstEmpty(){const t=this.digits.find(t=>!t.value)||this.digits[this.digits.length-1];t?.focus(),t?.select()}focusAt(t){const e=this.digits[Math.max(0,Math.min(this.digits.length-1,t))];e?.focus(),e?.select()}applyValue(t,e){const i=t.replace(/\D/g,"").slice(0,this.length);this.suppressSync=!0,this.digits.forEach((t,e)=>{t.value=i[e]||"",t.classList.toggle("designbase-wc-otp-input__digit--filled",Boolean(t.value))}),this.suppressSync=!1,this.emit("db-input"),this.emit("db-change"),void 0!==e?this.focusAt(e):i.length<this.length?this.focusAt(i.length):this.focusAt(this.length-1)}}DbOtpInput.formAssociated=!0,customElements.get("db-otp-input")||customElements.define("db-otp-input",DbOtpInput);export{DbOtpInput};

package/dist/esm/components/db-page-header.js

@@ -1 +1 @@
-import{PAGE_HEADER_VARIANTS as e,PAGE_HEADER_ALIGNS as t}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbPageHeader extends HTMLElement{constructor(){super(...arguments),this.internalTabId="",this.isRendering=!1,this.handleBack=()=>{const e=new CustomEvent("db-back",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented||function navigatePageHeaderBack(e="/"){if("undefined"==typeof window)return;const t=window.history.state?.idx;if("number"==typeof t&&t>0)return void window.history.back();(()=>{try{return!!document.referrer&&new URL(document.referrer).origin===window.location.origin}catch{return!1}})()||window.history.length>1?window.history.back():window.location.assign(e)}(this.getAttribute("back-fallback-href")||"/")},this.handleTabChange=e=>{const t=e.detail,a=t?.selectedId??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.hasAttribute("selected-tab-id")||(this.internalTabId=a),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:a}}))}}static get observedAttributes(){return["title","subtitle","description","breadcrumbs","variant","show-back-button","back-fallback-href","back-label","tabs","selected-tab-id","default-selected-tab-id","align"]}connectedCallback(){this.syncDefaultTab(),this.render(),this.childObserver=new MutationObserver(()=>{this.isRendering||this.hasPendingSlottedChildren()&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.childObserver?.disconnect()}attributeChangedCallback(e){this.isConnected&&("default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),this.render())}hasPendingSlottedChildren(){return Array.from(this.children).some(e=>{const t=e.getAttribute("slot");return"actions"===t||"meta"===t||"description"===t||"leading"===t})}syncDefaultTab(){if(this.internalTabId)return;const e=this.parseTabs(),t=this.getAttribute("default-selected-tab-id");this.internalTabId=t||e[0]?.id||""}parseTabs(){try{const e=JSON.parse(this.getAttribute("tabs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBreadcrumbs(){try{const e=JSON.parse(this.getAttribute("breadcrumbs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}getActiveTabId(){return this.getAttribute("selected-tab-id")||this.internalTabId}getVariant(){const t=this.getAttribute("variant")||"default";return e.includes(t)?t:"default"}getAlign(){const e=this.getAttribute("align")||"center";return t.includes(e)?e:"center"}collectLeading(){const e=Array.from(this.querySelectorAll(':scope > [slot="leading"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__leading");return t?.children.length?Array.from(t.children):[]}collectActions(){const e=Array.from(this.querySelectorAll(':scope > [slot="actions"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__cta");if(t?.children.length)return Array.from(t.children);const a=this.querySelector(".designbase-wc-page-header__actions");return a?.children.length?Array.from(a.children):[]}collectMeta(){const e=Array.from(this.querySelectorAll(':scope > [slot="meta"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__meta");return t?.children.length?Array.from(t.children):[]}renderMinimalAside(e,t){if(!e.length&&!t.length)return null;const a=document.createElement("div");if(a.className="designbase-wc-page-header__aside",e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__meta",e.forEach(e=>t.append(e)),a.append(t)}if(t.length){const e=document.createElement("div");e.className="designbase-wc-page-header__cta",t.forEach(t=>e.append(t)),a.append(e)}return a}collectDescriptionSlot(){const e=this.querySelector(':scope > [slot="description"]');if(e)return e;const t=this.querySelector(":scope .designbase-wc-page-header__description"),a=t?.firstElementChild;return a||null}renderTitleBlock(e){const t=document.createDocumentFragment(),a=this.getAttribute("title")||"",n=this.getAttribute("subtitle"),s=document.createElement("h1");if(s.className="designbase-wc-page-header__title",s.textContent=a,t.append(s),n){const e=document.createElement("h2");e.className="designbase-wc-page-header__subtitle",e.textContent=n,t.append(e)}const i=this.getAttribute("description");if(e||i){const a=document.createElement("div");a.className="designbase-wc-page-header__description",e?a.append(e):a.textContent=i,t.append(a)}return t}render(){this.isRendering=!0;const e=this.collectActions(),t=this.collectMeta(),a=this.collectLeading(),n=this.collectDescriptionSlot(),s="minimal"===this.getVariant(),i=this.getAlign(),r=this.parseBreadcrumbs(),c=this.parseTabs(),d=c.length>0,l=this.hasAttribute("show-back-button");if(this.className=["designbase-wc-page-header",s?"designbase-wc-page-header--minimal":`designbase-wc-page-header--${i}`,s&&d?"designbase-wc-page-header--has-tabs":""].filter(Boolean).join(" "),this.replaceChildren(),r.length){const e=document.createElement("div");e.className="designbase-wc-page-header__breadcrumbs";const t=document.createElement("db-breadcrumbs");t.setAttribute("size","s"),t.setAttribute("items",JSON.stringify(r)),e.append(t),this.append(e)}const o=document.createElement("div");o.className="designbase-wc-page-header__main";const h=document.createElement("div");if(h.className="designbase-wc-page-header__content",s&&(l||a.length)){const e=document.createElement("div");if(e.className="designbase-wc-page-header__title-row",a.length){const t=document.createElement("div");t.className="designbase-wc-page-header__leading",a.forEach(e=>t.append(e)),e.append(t)}if(l){const t=document.createElement("db-button");t.className="designbase-wc-page-header__back-button",t.setAttribute("variant","tertiary"),t.setAttribute("size","m"),t.setAttribute("icon-only",""),t.setAttribute("start-icon","chevron-left"),t.setAttribute("aria-label",this.getAttribute("back-label")||"뒤로가기"),t.setAttribute("tooltip",this.getAttribute("back-label")||"뒤로가기"),t.addEventListener("db-click",this.handleBack),e.append(t)}const t=document.createElement("div");t.className="designbase-wc-page-header__title-group",t.append(this.renderTitleBlock(n)),e.append(t),h.append(e)}else h.append(this.renderTitleBlock(n));if(o.append(h),s){const a=this.renderMinimalAside(t,e);a&&o.append(a)}if(this.append(o),!s&&e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__actions",e.forEach(e=>t.append(e)),this.append(t)}this.renderMinimalTabs(s,d,c),queueMicrotask(()=>{this.isRendering=!1})}renderMinimalTabs(e,t,a){if(!e||!t)return;const n=document.createElement("div");n.className="designbase-wc-page-header__toolbar";const s=document.createElement("div");s.className="designbase-wc-page-header__tabs";const i=document.createElement("db-tabs");i.setAttribute("size","m"),i.setAttribute("items",JSON.stringify(a)),i.setAttribute("selected-id",this.getActiveTabId()),i.addEventListener("db-change",this.handleTabChange),s.append(i),n.append(s),this.append(n)}}customElements.get("db-page-header")||customElements.define("db-page-header",DbPageHeader);export{DbPageHeader};
+import{sanitizeHref as e}from"../core/safe-url.js";import{PAGE_HEADER_VARIANTS as t,PAGE_HEADER_ALIGNS as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbPageHeader extends HTMLElement{constructor(){super(...arguments),this.internalTabId="",this.isRendering=!1,this.handleBack=()=>{const t=new CustomEvent("db-back",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(t),t.defaultPrevented||function navigatePageHeaderBack(t="/"){if("undefined"==typeof window)return;const a=window.history.state?.idx;if("number"==typeof a&&a>0)return void window.history.back();(()=>{try{return!!document.referrer&&new URL(document.referrer).origin===window.location.origin}catch{return!1}})()||window.history.length>1?window.history.back():window.location.assign(e(t,"/"))}(this.getAttribute("back-fallback-href")||"/")},this.handleTabChange=e=>{const t=e.detail,a=t?.selectedId??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.hasAttribute("selected-tab-id")||(this.internalTabId=a),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:a}}))}}static get observedAttributes(){return["title","subtitle","description","breadcrumbs","variant","show-back-button","back-fallback-href","back-label","tabs","selected-tab-id","default-selected-tab-id","align"]}connectedCallback(){this.syncDefaultTab(),this.render(),this.childObserver=new MutationObserver(()=>{this.isRendering||this.hasPendingSlottedChildren()&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.childObserver?.disconnect()}attributeChangedCallback(e){this.isConnected&&("default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),this.render())}hasPendingSlottedChildren(){return Array.from(this.children).some(e=>{const t=e.getAttribute("slot");return"actions"===t||"meta"===t||"description"===t||"leading"===t})}syncDefaultTab(){if(this.internalTabId)return;const e=this.parseTabs(),t=this.getAttribute("default-selected-tab-id");this.internalTabId=t||e[0]?.id||""}parseTabs(){try{const e=JSON.parse(this.getAttribute("tabs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBreadcrumbs(){try{const e=JSON.parse(this.getAttribute("breadcrumbs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}getActiveTabId(){return this.getAttribute("selected-tab-id")||this.internalTabId}getVariant(){const e=this.getAttribute("variant")||"default";return t.includes(e)?e:"default"}getAlign(){const e=this.getAttribute("align")||"center";return a.includes(e)?e:"center"}collectLeading(){const e=Array.from(this.querySelectorAll(':scope > [slot="leading"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__leading");return t?.children.length?Array.from(t.children):[]}collectActions(){const e=Array.from(this.querySelectorAll(':scope > [slot="actions"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__cta");if(t?.children.length)return Array.from(t.children);const a=this.querySelector(".designbase-wc-page-header__actions");return a?.children.length?Array.from(a.children):[]}collectMeta(){const e=Array.from(this.querySelectorAll(':scope > [slot="meta"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__meta");return t?.children.length?Array.from(t.children):[]}renderMinimalAside(e,t){if(!e.length&&!t.length)return null;const a=document.createElement("div");if(a.className="designbase-wc-page-header__aside",e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__meta",e.forEach(e=>t.append(e)),a.append(t)}if(t.length){const e=document.createElement("div");e.className="designbase-wc-page-header__cta",t.forEach(t=>e.append(t)),a.append(e)}return a}collectDescriptionSlot(){const e=this.querySelector(':scope > [slot="description"]');if(e)return e;const t=this.querySelector(":scope .designbase-wc-page-header__description"),a=t?.firstElementChild;return a||null}renderTitleBlock(e){const t=document.createDocumentFragment(),a=this.getAttribute("title")?.trim()||"",n=this.getAttribute("subtitle")?.trim()||"",s=this.getAttribute("description")?.trim()||"",i=Boolean(e&&(e.textContent?.trim()||e.children.length));if(a){const e=document.createElement("h1");e.className="designbase-wc-page-header__title",e.textContent=a,t.append(e)}if(n){const e=document.createElement("h2");e.className="designbase-wc-page-header__subtitle",e.textContent=n,t.append(e)}if(i||s){const a=document.createElement("div");a.className="designbase-wc-page-header__description",i&&e?a.append(e):a.textContent=s,t.append(a)}return t}render(){this.isRendering=!0;const e=this.collectActions(),t=this.collectMeta(),a=this.collectLeading(),n=this.collectDescriptionSlot(),s="minimal"===this.getVariant(),i=this.getAlign(),r=this.parseBreadcrumbs(),c=this.parseTabs(),d=c.length>0,l=this.hasAttribute("show-back-button");if(this.className=["designbase-wc-page-header",s?"designbase-wc-page-header--minimal":`designbase-wc-page-header--${i}`,s&&d?"designbase-wc-page-header--has-tabs":""].filter(Boolean).join(" "),this.replaceChildren(),r.length){const e=document.createElement("div");e.className="designbase-wc-page-header__breadcrumbs";const t=document.createElement("db-breadcrumbs");t.setAttribute("size","s"),t.setAttribute("items",JSON.stringify(r)),e.append(t),this.append(e)}const o=document.createElement("div");o.className="designbase-wc-page-header__main";const h=document.createElement("div");if(h.className="designbase-wc-page-header__content",s&&(l||a.length)){const e=document.createElement("div");if(e.className="designbase-wc-page-header__title-row",a.length){const t=document.createElement("div");t.className="designbase-wc-page-header__leading",a.forEach(e=>t.append(e)),e.append(t)}if(l){const t=document.createElement("db-button");t.className="designbase-wc-page-header__back-button",t.setAttribute("variant","tertiary"),t.setAttribute("size","m"),t.setAttribute("icon-only",""),t.setAttribute("start-icon","chevron-left"),t.setAttribute("aria-label",this.getAttribute("back-label")||"뒤로가기"),t.setAttribute("tooltip",this.getAttribute("back-label")||"뒤로가기"),t.addEventListener("db-click",this.handleBack),e.append(t)}const t=document.createElement("div");t.className="designbase-wc-page-header__title-group",t.append(this.renderTitleBlock(n)),e.append(t),h.append(e)}else h.append(this.renderTitleBlock(n));if(o.append(h),s){const a=this.renderMinimalAside(t,e);a&&o.append(a)}if(this.append(o),!s&&e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__actions",e.forEach(e=>t.append(e)),this.append(t)}this.renderMinimalTabs(s,d,c),queueMicrotask(()=>{this.isRendering=!1})}renderMinimalTabs(e,t,a){if(!e||!t)return;const n=document.createElement("div");n.className="designbase-wc-page-header__toolbar";const s=document.createElement("div");s.className="designbase-wc-page-header__tabs";const i=document.createElement("db-tabs");i.setAttribute("size","m"),i.setAttribute("items",JSON.stringify(a)),i.setAttribute("selected-id",this.getActiveTabId()),i.addEventListener("db-change",this.handleTabChange),s.append(i),n.append(s),this.append(n)}}customElements.get("db-page-header")||customElements.define("db-page-header",DbPageHeader);export{DbPageHeader};

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

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";class DbPagination extends HTMLElement{static get observedAttributes(){return["current-page","total-pages","total-items","page-size","page-size-options","size","variant","alignment","show-first-last","show-previous-next","show-page-size-selector","show-total","sibling-count","boundary-count","disabled","full-width"]}get currentPage(){return Number(this.getAttribute("current-page")||1)}set currentPage(t){this.setAttribute("current-page",String(t))}get totalPages(){return Number(this.getAttribute("total-pages")||1)}set totalPages(t){this.setAttribute("total-pages",String(t))}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}iconSize(){const t=this.getAttribute("size")||"m";return"s"===t?12:"l"===t?16:14}render(){const t=this.getAttribute("size")||"m",e=this.getAttribute("variant")||"default",a=this.getAttribute("alignment")||"center",i=this.hasAttribute("disabled"),n=this.hasAttribute("show-first-last"),s="false"!==this.getAttribute("show-previous-next"),r=this.hasAttribute("show-page-size-selector"),o=this.hasAttribute("show-total"),c=this.hasAttribute("full-width")||r||o,l=Number(this.getAttribute("total-items")||0),g=Number(this.getAttribute("page-size")||10),u=this.currentPage,b=this.totalPages,d=u<=1,p=u>=b;this.className=["designbase-wc-pagination",`designbase-wc-pagination--${t}`,`designbase-wc-pagination--${e}`,`designbase-wc-pagination--${a}`,i&&"designbase-wc-pagination--disabled",c&&"designbase-wc-pagination--full-width"].filter(Boolean).join(" "),this.setAttribute("role","navigation"),this.setAttribute("aria-label","페이지 네비게이션"),this.replaceChildren();const h=document.createElement("div");if(h.className=["designbase-wc-pagination__container",c&&"designbase-wc-pagination__container--full-width"].filter(Boolean).join(" "),o&&l>0){const t=document.createElement("div");t.className="designbase-wc-pagination__total",t.textContent=this.getTotalLabel(l,g,u),h.append(t)}const m=document.createElement("nav");m.className="designbase-wc-pagination__nav",m.setAttribute("aria-label","페이지 네비게이션");const A=document.createElement("ul");A.className="designbase-wc-pagination__list",n&&!d&&A.append(this.createIconButton("arrow-bar-left",1,"첫 페이지로 이동","first")),s&&!d&&A.append(this.createIconButton("chevron-left",u-1,"이전 페이지로 이동","previous")),this.getPageNumbers().forEach((t,e)=>{if("..."===t){const t=document.createElement("li");t.className="designbase-wc-pagination__ellipsis";const e=document.createElement("span");return e.className="designbase-wc-pagination__ellipsis-text",e.textContent="...",t.append(e),void A.append(t)}"number"==typeof t&&A.append(this.createPageButton(t,i))}),s&&!p&&A.append(this.createIconButton("chevron-right",u+1,"다음 페이지로 이동","next")),n&&!p&&A.append(this.createIconButton("arrow-bar-right",b,"마지막 페이지로 이동","last")),m.append(A),h.append(m),r&&h.append(this.createPageSizeSelector(t,g,i)),this.append(h)}getPageSizeOptions(){const t=this.getAttribute("page-size-options");if(!t)return[10,20,50,100];try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(t=>Number(t)).filter(t=>!Number.isNaN(t))}catch{}return[10,20,50,100]}getTotalLabel(t,e,a){return`${(a-1)*e+1}-${Math.min(a*e,t)} / ${t}개`}createPageSizeSelector(t,e,a){const i=document.createElement("div");i.className="designbase-wc-pagination__page-size";const n=document.createElement("label");n.className="designbase-wc-pagination__page-size-label";const s=document.createElement("span");s.className="designbase-wc-pagination__page-size-text",s.textContent="페이지당";const r=document.createElement("db-select");return r.className="designbase-wc-pagination__page-size-select",r.setAttribute("size",t),r.setAttribute("show-clear-button","false"),r.setAttribute("searchable","false"),r.setAttribute("options",JSON.stringify(this.getPageSizeOptions().map(t=>({value:String(t),label:String(t)})))),r.setAttribute("value",String(e)),a&&r.setAttribute("disabled",""),r.addEventListener("db-change",t=>{const a=t.detail,i=Number(a?.value);Number.isNaN(i)||i===e||(this.setAttribute("page-size",String(i)),this.dispatchEvent(new CustomEvent("db-page-size-change",{detail:{pageSize:i},bubbles:!0,composed:!0})))}),n.append(s,r),i.append(n),i}getPageNumbers(){const t=Number(this.getAttribute("sibling-count")||1),e=Number(this.getAttribute("boundary-count")||1),a=this.totalPages,i=this.currentPage;if(a<=2*t+3+2)return Array.from({length:a},(t,e)=>e+1);const n=Math.max(i-t,e),s=Math.min(i+t,a-e+1),r=n>e+2,o=s<a-e-1;if(!r&&o){const e=3+2*t;return[...Array.from({length:e},(t,e)=>e+1),"...",a]}if(r&&!o){const e=3+2*t;return[1,"...",...Array.from({length:e},(t,i)=>a-e+i+1)]}if(r&&o){return[1,"...",...Array.from({length:s-n+1},(t,e)=>n+e),"...",a]}return Array.from({length:a},(t,e)=>e+1)}createPageButton(t,e){const a=t===this.currentPage,i=document.createElement("li");i.className="designbase-wc-pagination__item";const n=document.createElement("button");return n.type="button",n.className=["designbase-wc-pagination__button",a&&"designbase-wc-pagination__button--active"].filter(Boolean).join(" "),n.textContent=String(t),n.disabled=e,a&&n.setAttribute("aria-current","page"),n.setAttribute("aria-label",`페이지 ${t}로 이동`),n.addEventListener("click",()=>this.select(t)),i.append(n),i}createIconButton(e,a,i,n){const s=document.createElement("li");s.className="designbase-wc-pagination__item";const r=document.createElement("button");return r.type="button",r.className=`designbase-wc-pagination__button designbase-wc-pagination__button--${n}`,r.disabled=this.hasAttribute("disabled"),r.setAttribute("aria-label",i),r.append(t(e,this.iconSize())),r.addEventListener("click",()=>this.select(a)),s.append(r),s}select(t){this.hasAttribute("disabled")||t===this.currentPage||t<1||t>this.totalPages||(this.currentPage=t,this.dispatchEvent(new CustomEvent("db-change",{detail:{page:t},bubbles:!0,composed:!0})))}}customElements.get("db-pagination")||customElements.define("db-pagination",DbPagination);export{DbPagination};
+import{createDbIcon as t}from"./db-icons.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{PAGINATION_SIZES as a,PAGINATION_VARIANTS as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbPagination extends HTMLElement{static get observedAttributes(){return["current-page","total-pages","total-items","page-size","page-size-options","size","variant","alignment","show-first-last","show-previous-next","show-page-size-selector","show-total","sibling-count","boundary-count","disabled","full-width"]}get currentPage(){return Number(this.getAttribute("current-page")||1)}set currentPage(t){this.setAttribute("current-page",String(t))}get totalPages(){return Number(this.getAttribute("total-pages")||1)}set totalPages(t){this.setAttribute("total-pages",String(t))}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}iconSize(){const t=this.getAttribute("size")||"m";return"s"===t?12:"l"===t?16:14}render(){const t=e(this.getAttribute("size"),a,"m"),n=e(this.getAttribute("variant"),i,"default"),s=this.getAttribute("alignment")||"center",r=this.hasAttribute("disabled"),o=this.hasAttribute("show-first-last"),c="false"!==this.getAttribute("show-previous-next"),l=this.hasAttribute("show-page-size-selector"),g=this.hasAttribute("show-total"),u=this.hasAttribute("full-width")||l||g,b=Number(this.getAttribute("total-items")||0),d=Number(this.getAttribute("page-size")||10),p=this.currentPage,h=this.totalPages,m=p<=1,A=p>=h;this.className=["designbase-wc-pagination",`designbase-wc-pagination--${t}`,`designbase-wc-pagination--${n}`,`designbase-wc-pagination--${s}`,r&&"designbase-wc-pagination--disabled",u&&"designbase-wc-pagination--full-width"].filter(Boolean).join(" "),this.setAttribute("role","navigation"),this.setAttribute("aria-label","페이지 네비게이션"),this.replaceChildren();const w=document.createElement("div");if(w.className=["designbase-wc-pagination__container",u&&"designbase-wc-pagination__container--full-width"].filter(Boolean).join(" "),g&&b>0){const t=document.createElement("div");t.className="designbase-wc-pagination__total",t.textContent=this.getTotalLabel(b,d,p),w.append(t)}const f=document.createElement("nav");f.className="designbase-wc-pagination__nav",f.setAttribute("aria-label","페이지 네비게이션");const _=document.createElement("ul");_.className="designbase-wc-pagination__list",o&&!m&&_.append(this.createIconButton("arrow-bar-left",1,"첫 페이지로 이동","first")),c&&!m&&_.append(this.createIconButton("chevron-left",p-1,"이전 페이지로 이동","previous")),this.getPageNumbers().forEach((t,e)=>{if("..."===t){const t=document.createElement("li");t.className="designbase-wc-pagination__ellipsis";const e=document.createElement("span");return e.className="designbase-wc-pagination__ellipsis-text",e.textContent="...",t.append(e),void _.append(t)}"number"==typeof t&&_.append(this.createPageButton(t,r))}),c&&!A&&_.append(this.createIconButton("chevron-right",p+1,"다음 페이지로 이동","next")),o&&!A&&_.append(this.createIconButton("arrow-bar-right",h,"마지막 페이지로 이동","last")),f.append(_),w.append(f),l&&w.append(this.createPageSizeSelector(t,d,r)),this.append(w)}getPageSizeOptions(){const t=this.getAttribute("page-size-options");if(!t)return[10,20,50,100];try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(t=>Number(t)).filter(t=>!Number.isNaN(t))}catch{}return[10,20,50,100]}getTotalLabel(t,e,a){return`${(a-1)*e+1}-${Math.min(a*e,t)} / ${t}개`}createPageSizeSelector(t,e,a){const i=document.createElement("div");i.className="designbase-wc-pagination__page-size";const n=document.createElement("label");n.className="designbase-wc-pagination__page-size-label";const s=document.createElement("span");s.className="designbase-wc-pagination__page-size-text",s.textContent="페이지당";const r=document.createElement("db-select");return r.className="designbase-wc-pagination__page-size-select",r.setAttribute("size",t),r.setAttribute("show-clear-button","false"),r.setAttribute("searchable","false"),r.setAttribute("options",JSON.stringify(this.getPageSizeOptions().map(t=>({value:String(t),label:String(t)})))),r.setAttribute("value",String(e)),a&&r.setAttribute("disabled",""),r.addEventListener("db-change",t=>{const a=t.detail,i=Number(a?.value);Number.isNaN(i)||i===e||(this.setAttribute("page-size",String(i)),this.dispatchEvent(new CustomEvent("db-page-size-change",{detail:{pageSize:i},bubbles:!0,composed:!0})))}),n.append(s,r),i.append(n),i}getPageNumbers(){const t=Number(this.getAttribute("sibling-count")||1),e=Number(this.getAttribute("boundary-count")||1),a=this.totalPages,i=this.currentPage;if(a<=2*t+3+2)return Array.from({length:a},(t,e)=>e+1);const n=Math.max(i-t,e),s=Math.min(i+t,a-e+1),r=n>e+2,o=s<a-e-1;if(!r&&o){const e=3+2*t;return[...Array.from({length:e},(t,e)=>e+1),"...",a]}if(r&&!o){const e=3+2*t;return[1,"...",...Array.from({length:e},(t,i)=>a-e+i+1)]}if(r&&o){return[1,"...",...Array.from({length:s-n+1},(t,e)=>n+e),"...",a]}return Array.from({length:a},(t,e)=>e+1)}createPageButton(t,e){const a=t===this.currentPage,i=document.createElement("li");i.className="designbase-wc-pagination__item";const n=document.createElement("button");return n.type="button",n.className=["designbase-wc-pagination__button",a&&"designbase-wc-pagination__button--active"].filter(Boolean).join(" "),n.textContent=String(t),n.disabled=e,a&&n.setAttribute("aria-current","page"),n.setAttribute("aria-label",`페이지 ${t}로 이동`),n.addEventListener("click",()=>this.select(t)),i.append(n),i}createIconButton(e,a,i,n){const s=document.createElement("li");s.className="designbase-wc-pagination__item";const r=document.createElement("button");return r.type="button",r.className=`designbase-wc-pagination__button designbase-wc-pagination__button--${n}`,r.disabled=this.hasAttribute("disabled"),r.setAttribute("aria-label",i),r.append(t(e,this.iconSize())),r.addEventListener("click",()=>this.select(a)),s.append(r),s}select(t){this.hasAttribute("disabled")||t===this.currentPage||t<1||t>this.totalPages||(this.currentPage=t,this.dispatchEvent(new CustomEvent("db-change",{detail:{page:t},bubbles:!0,composed:!0})))}}customElements.get("db-pagination")||customElements.define("db-pagination",DbPagination);export{DbPagination};

package/dist/esm/components/db-phone-verify.js

@@ -1 +1 @@
-import{t}from"../core/i18n.js";import"./db-button.js";import"./db-input.js";import"./db-otp-input.js";import"./db-select.js";import{PHONE_VERIFY_SIZES as e}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const i=[{value:"skt",label:"SKT"},{value:"kt",label:"KT"},{value:"lgu",label:"LG U+"},{value:"mvno",label:"알뜰폰"}];function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}function formatPhone(t){const e=t.replace(/\D/g,"").slice(0,11);return e.length<=3?e:e.length<=7?`${e.slice(0,3)}-${e.slice(3)}`:`${e.slice(0,3)}-${e.slice(3,7)}-${e.slice(7)}`}class DbPhoneVerify extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.timerId=null,this.remaining=0}static get observedAttributes(){return["carrier","phone","code","step","size","disabled","error","error-message","carrier-options","countdown","title","description","send-label","resend-label","verify-label","code-length","manual","sending","verifying","auto-submit"]}get size(){return function pick(t,e,i){return t.includes(e)?e:i}(e,this.getAttribute("size"),"m")}set size(t){this.setAttribute("size",t)}get step(){const t=this.getAttribute("step");return"code"===t||"verified"===t?t:"phone"}set step(t){this.setAttribute("step",t)}get phone(){return(this.getAttribute("phone")||"").replace(/\D/g,"")}set phone(t){this.setAttribute("phone",formatPhone(t))}get carrier(){return this.getAttribute("carrier")||"skt"}set carrier(t){this.setAttribute("carrier",t)}get code(){return this.getAttribute("code")||""}set code(t){this.setAttribute("code",t)}get countdown(){const t=Number(this.getAttribute("countdown")||180);return Number.isFinite(t)&&t>0?t:180}set countdown(t){this.setAttribute("countdown",String(t))}connectedCallback(){this.build(),this.sync(),"code"===this.step&&this.startTimer(this.countdown)}disconnectedCallback(){this.clearTimer()}attributeChangedCallback(t,e,i){this.built&&(this.sync(),"step"===t&&e!==i&&("code"===this.step?this.startTimer(this.countdown):this.clearTimer()))}startCodeStep(){"code"===this.step?this.startTimer(this.countdown):this.step="code",requestAnimationFrame(()=>this.otpInput?.focus?.())}restartCountdown(){"code"===this.step&&this.startTimer(this.countdown)}markVerified(){this.step="verified",this.clearTimer()}clearTimer(){this.timerId&&clearInterval(this.timerId),this.timerId=null,this.remaining=0}startTimer(t){this.clearTimer(),this.remaining=t,this.renderTimer(),this.timerId=setInterval(()=>{this.remaining-=1,this.renderTimer(),this.remaining<=0&&(this.clearTimer(),this.resendBtn.disabled=!1,this.dispatchEvent(new CustomEvent("db-countdown-complete",{bubbles:!0,composed:!0})))},1e3)}renderTimer(){const t=Math.max(0,Math.floor(this.remaining/60)),e=Math.max(0,this.remaining%60);this.timerEl.textContent=`${String(t).padStart(2,"0")}:${String(e).padStart(2,"0")}`,this.timerEl.setAttribute("aria-label",`남은 시간 ${t}분 ${e}초`),this.resendBtn.disabled=this.remaining>0||this.hasAttribute("disabled")}build(){if(this.built)return;this.built=!0;const e="designbase-wc-phone-verify";this.replaceChildren();const i=el("div",`${e}__header`),s=el("h3",`${e}__title`);s.dataset.role="title";const r=el("p",`${e}__description`);r.dataset.role="description",i.append(s,r);const n=el("div",`${e}__field`);this.carrierSelect=document.createElement("db-select"),this.carrierSelect.setAttribute("label","통신사"),this.carrierSelect.setAttribute("full-width",""),this.carrierSelect.setAttribute("placeholder","통신사 선택"),this.carrierSelect.addEventListener("db-change",t=>{t.stopPropagation();const e=t.detail?.value??this.carrierSelect.value;this.carrier=String(e||""),this.dispatchEvent(new CustomEvent("db-carrier-change",{detail:{carrier:this.carrier},bubbles:!0,composed:!0}))}),n.append(this.carrierSelect);const o=el("div",`${e}__phone-row`);this.phoneInput=document.createElement("db-input"),this.phoneInput.setAttribute("type","tel"),this.phoneInput.setAttribute("label","휴대폰 번호"),this.phoneInput.setAttribute("placeholder","010-0000-0000"),this.phoneInput.setAttribute("full-width",""),this.phoneInput.setAttribute("start-icon","user"),this.phoneInput.addEventListener("db-input",t=>{t.stopPropagation();const e=formatPhone(String(t.detail?.value??this.phoneInput.value??""));this.phoneInput.value=e,this.setAttribute("phone",e),this.dispatchEvent(new CustomEvent("db-phone-change",{detail:{phone:e.replace(/\D/g,""),formatted:e},bubbles:!0,composed:!0}))}),this.sendBtn=document.createElement("db-button"),this.sendBtn.setAttribute("variant","primary"),this.sendBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.isPhoneValid()&&(this.dispatchEvent(new CustomEvent("db-send-code",{detail:{carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("manual")||this.startCodeStep())}),o.append(this.phoneInput,this.sendBtn),this.codeBlock=el("div",`${e}__code`);const h=el("div",`${e}__code-head`),a=el("span",`${e}__code-label`);a.textContent="인증번호",this.timerEl=el("span",`${e}__timer`),h.append(a,this.timerEl),this.otpInput=document.createElement("db-otp-input"),this.otpInput.addEventListener("db-change",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.setAttribute("code",e),this.dispatchEvent(new CustomEvent("db-code-change",{detail:{code:e},bubbles:!0,composed:!0}))}),this.otpInput.addEventListener("db-complete",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.dispatchEvent(new CustomEvent("db-code-complete",{detail:{code:e,carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("auto-submit")&&this.requestVerify()});const d=el("div",`${e}__code-actions`);this.resendBtn=el("button",`${e}__resend`),this.resendBtn.type="button",this.resendBtn.addEventListener("click",()=>{this.resendBtn.disabled||(this.dispatchEvent(new CustomEvent("db-resend",{detail:{carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("manual")||this.startTimer(this.countdown))}),this.verifyBtn=document.createElement("db-button"),this.verifyBtn.setAttribute("variant","primary"),this.verifyBtn.setAttribute("full-width",""),this.verifyBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.requestVerify()}),d.append(this.resendBtn,this.verifyBtn),this.codeBlock.append(h,this.otpInput,d),this.errorEl=el("p",`${e}__error`),this.errorEl.hidden=!0;const l=el("div",`${e}__verified`);l.dataset.role="verified";const c=el("span",`${e}__verified-badge`);c.textContent=t("verify.done");const u=document.createElement("p");u.className=`${e}__verified-text`,u.textContent=t("verify.phoneDone"),l.append(c,u),this.append(i,n,o,this.codeBlock,this.errorEl,l)}sync(){const t="designbase-wc-phone-verify",e=this.size,s=this.step,r=this.hasAttribute("disabled"),n=function parseCarriers(t){if(!t)return i;try{const e=JSON.parse(t);return Array.isArray(e)&&e.length?e:i}catch{return i}}(this.getAttribute("carrier-options")),o=this.getAttribute("code-length")||"6";this.className=[t,`${t}--${e}`,`${t}--step-${s}`,r&&`${t}--disabled`,this.hasAttribute("error")&&`${t}--error`].filter(Boolean).join(" ");const h=this.querySelector('[data-role="title"]'),a=this.querySelector('[data-role="description"]');h.textContent=this.getAttribute("title")||"휴대폰 인증",a.textContent=this.getAttribute("description")||"본인 명의의 휴대폰 번호를 입력하고 인증번호를 받아 주세요.",this.carrierSelect.setAttribute("options",JSON.stringify(n)),this.carrierSelect.setAttribute("value",this.carrier),this.carrierSelect.setAttribute("size",e),this.carrierSelect.toggleAttribute("disabled",r||"verified"===s);const d=this.getAttribute("phone")||"";this.phoneInput.value=d,this.phoneInput.setAttribute("size",e),this.phoneInput.toggleAttribute("disabled",r||"phone"!==s),this.phoneInput.toggleAttribute("error",this.hasAttribute("error")&&"phone"===s),this.sendBtn.setAttribute("size",e),this.sendBtn.textContent=this.getAttribute("send-label")||"인증번호 받기",this.sendBtn.toggleAttribute("disabled",r||"phone"!==s||!this.isPhoneValid()),this.sendBtn.toggleAttribute("loading",this.hasAttribute("sending")),this.otpInput.setAttribute("length",o),this.otpInput.setAttribute("size",e),this.otpInput.setAttribute("value",this.getAttribute("code")||""),this.otpInput.toggleAttribute("disabled",r||"code"!==s),this.otpInput.toggleAttribute("error",this.hasAttribute("error")&&"code"===s),this.resendBtn.textContent=this.getAttribute("resend-label")||"재전송",this.verifyBtn.setAttribute("size",e),this.verifyBtn.textContent=this.getAttribute("verify-label")||"인증하기",this.verifyBtn.toggleAttribute("disabled",r||(this.getAttribute("code")||"").length<Number(o)),this.verifyBtn.toggleAttribute("loading",this.hasAttribute("verifying")),this.codeBlock.hidden="phone"===s;this.querySelector('[data-role="verified"]').hidden="verified"!==s;const l=this.getAttribute("error-message")||"";this.errorEl.textContent=l,this.errorEl.hidden=!this.hasAttribute("error")||!l}isPhoneValid(){return/^01[016789]\d{7,8}$/.test(this.phone)&&Boolean(this.carrier)}requestVerify(){const t=(this.code||this.otpInput.value).replace(/\D/g,""),e=Number(this.getAttribute("code-length")||6);"code"!==this.step||t.length!==e||this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("db-verify",{detail:{carrier:this.carrier,phone:this.phone,code:t},bubbles:!0,composed:!0}))}}customElements.get("db-phone-verify")||customElements.define("db-phone-verify",DbPhoneVerify);export{DbPhoneVerify};
+import{t}from"../core/i18n.js";import"./db-button.js";import"./db-input.js";import"./db-otp-input.js";import"./db-select.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{PHONE_VERIFY_SIZES as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const s=[{value:"skt",label:"SKT"},{value:"kt",label:"KT"},{value:"lgu",label:"LG U+"},{value:"mvno",label:"알뜰폰"}];function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}function formatPhone(t){const e=t.replace(/\D/g,"").slice(0,11);return e.length<=3?e:e.length<=7?`${e.slice(0,3)}-${e.slice(3)}`:`${e.slice(0,3)}-${e.slice(3,7)}-${e.slice(7)}`}class DbPhoneVerify extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.timerId=null,this.remaining=0}static get observedAttributes(){return["carrier","phone","code","step","size","disabled","error","error-message","carrier-options","countdown","title","description","send-label","resend-label","verify-label","code-length","manual","sending","verifying","auto-submit"]}get size(){return e(this.getAttribute("size"),i,"m")}set size(t){this.setAttribute("size",t)}get step(){const t=this.getAttribute("step");return"code"===t||"verified"===t?t:"phone"}set step(t){this.setAttribute("step",t)}get phone(){return(this.getAttribute("phone")||"").replace(/\D/g,"")}set phone(t){this.setAttribute("phone",formatPhone(t))}get carrier(){return this.getAttribute("carrier")||"skt"}set carrier(t){this.setAttribute("carrier",t)}get code(){return this.getAttribute("code")||""}set code(t){this.setAttribute("code",t)}get countdown(){const t=Number(this.getAttribute("countdown")||180);return Number.isFinite(t)&&t>0?t:180}set countdown(t){this.setAttribute("countdown",String(t))}connectedCallback(){this.build(),this.sync(),"code"===this.step&&this.startTimer(this.countdown)}disconnectedCallback(){this.clearTimer()}attributeChangedCallback(t,e,i){this.built&&(this.sync(),"step"===t&&e!==i&&("code"===this.step?this.startTimer(this.countdown):this.clearTimer()))}startCodeStep(){"code"===this.step?this.startTimer(this.countdown):this.step="code",requestAnimationFrame(()=>this.otpInput?.focus?.())}restartCountdown(){"code"===this.step&&this.startTimer(this.countdown)}markVerified(){this.step="verified",this.clearTimer()}clearTimer(){this.timerId&&clearInterval(this.timerId),this.timerId=null,this.remaining=0}startTimer(t){this.clearTimer(),this.remaining=t,this.renderTimer(),this.timerId=setInterval(()=>{this.remaining-=1,this.renderTimer(),this.remaining<=0&&(this.clearTimer(),this.resendBtn.disabled=!1,this.dispatchEvent(new CustomEvent("db-countdown-complete",{bubbles:!0,composed:!0})))},1e3)}renderTimer(){const t=Math.max(0,Math.floor(this.remaining/60)),e=Math.max(0,this.remaining%60);this.timerEl.textContent=`${String(t).padStart(2,"0")}:${String(e).padStart(2,"0")}`,this.timerEl.setAttribute("aria-label",`남은 시간 ${t}분 ${e}초`),this.resendBtn.disabled=this.remaining>0||this.hasAttribute("disabled")}build(){if(this.built)return;this.built=!0;const e="designbase-wc-phone-verify";this.replaceChildren();const i=el("div",`${e}__header`),s=el("h3",`${e}__title`);s.dataset.role="title";const r=el("p",`${e}__description`);r.dataset.role="description",i.append(s,r);const n=el("div",`${e}__field`);this.carrierSelect=document.createElement("db-select"),this.carrierSelect.setAttribute("label","통신사"),this.carrierSelect.setAttribute("full-width",""),this.carrierSelect.setAttribute("placeholder","통신사 선택"),this.carrierSelect.addEventListener("db-change",t=>{t.stopPropagation();const e=t.detail?.value??this.carrierSelect.value;this.carrier=String(e||""),this.dispatchEvent(new CustomEvent("db-carrier-change",{detail:{carrier:this.carrier},bubbles:!0,composed:!0}))}),n.append(this.carrierSelect);const o=el("div",`${e}__phone-row`);this.phoneInput=document.createElement("db-input"),this.phoneInput.setAttribute("type","tel"),this.phoneInput.setAttribute("label","휴대폰 번호"),this.phoneInput.setAttribute("placeholder","010-0000-0000"),this.phoneInput.setAttribute("full-width",""),this.phoneInput.setAttribute("start-icon","user"),this.phoneInput.addEventListener("db-input",t=>{t.stopPropagation();const e=formatPhone(String(t.detail?.value??this.phoneInput.value??""));this.phoneInput.value=e,this.setAttribute("phone",e),this.dispatchEvent(new CustomEvent("db-phone-change",{detail:{phone:e.replace(/\D/g,""),formatted:e},bubbles:!0,composed:!0}))}),this.sendBtn=document.createElement("db-button"),this.sendBtn.setAttribute("variant","primary"),this.sendBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.isPhoneValid()&&(this.dispatchEvent(new CustomEvent("db-send-code",{detail:{carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("manual")||this.startCodeStep())}),o.append(this.phoneInput,this.sendBtn),this.codeBlock=el("div",`${e}__code`);const h=el("div",`${e}__code-head`),a=el("span",`${e}__code-label`);a.textContent="인증번호",this.timerEl=el("span",`${e}__timer`),h.append(a,this.timerEl),this.otpInput=document.createElement("db-otp-input"),this.otpInput.addEventListener("db-change",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.setAttribute("code",e),this.dispatchEvent(new CustomEvent("db-code-change",{detail:{code:e},bubbles:!0,composed:!0}))}),this.otpInput.addEventListener("db-complete",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.dispatchEvent(new CustomEvent("db-code-complete",{detail:{code:e,carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("auto-submit")&&this.requestVerify()});const d=el("div",`${e}__code-actions`);this.resendBtn=el("button",`${e}__resend`),this.resendBtn.type="button",this.resendBtn.addEventListener("click",()=>{this.resendBtn.disabled||(this.dispatchEvent(new CustomEvent("db-resend",{detail:{carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("manual")||this.startTimer(this.countdown))}),this.verifyBtn=document.createElement("db-button"),this.verifyBtn.setAttribute("variant","primary"),this.verifyBtn.setAttribute("full-width",""),this.verifyBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.requestVerify()}),d.append(this.resendBtn,this.verifyBtn),this.codeBlock.append(h,this.otpInput,d),this.errorEl=el("p",`${e}__error`),this.errorEl.hidden=!0;const l=el("div",`${e}__verified`);l.dataset.role="verified";const c=el("span",`${e}__verified-badge`);c.textContent=t("verify.done");const u=document.createElement("p");u.className=`${e}__verified-text`,u.textContent=t("verify.phoneDone"),l.append(c,u),this.append(i,n,o,this.codeBlock,this.errorEl,l)}sync(){const t="designbase-wc-phone-verify",e=this.size,i=this.step,r=this.hasAttribute("disabled"),n=function parseCarriers(t){if(!t)return s;try{const e=JSON.parse(t);return Array.isArray(e)&&e.length?e:s}catch{return s}}(this.getAttribute("carrier-options")),o=this.getAttribute("code-length")||"6";this.className=[t,`${t}--${e}`,`${t}--step-${i}`,r&&`${t}--disabled`,this.hasAttribute("error")&&`${t}--error`].filter(Boolean).join(" ");const h=this.querySelector('[data-role="title"]'),a=this.querySelector('[data-role="description"]');h.textContent=this.getAttribute("title")||"휴대폰 인증",a.textContent=this.getAttribute("description")||"본인 명의의 휴대폰 번호를 입력하고 인증번호를 받아 주세요.",this.carrierSelect.setAttribute("options",JSON.stringify(n)),this.carrierSelect.setAttribute("value",this.carrier),this.carrierSelect.setAttribute("size",e),this.carrierSelect.toggleAttribute("disabled",r||"verified"===i);const d=this.getAttribute("phone")||"";this.phoneInput.value=d,this.phoneInput.setAttribute("size",e),this.phoneInput.toggleAttribute("disabled",r||"phone"!==i),this.phoneInput.toggleAttribute("error",this.hasAttribute("error")&&"phone"===i),this.sendBtn.setAttribute("size",e),this.sendBtn.textContent=this.getAttribute("send-label")||"인증번호 받기",this.sendBtn.toggleAttribute("disabled",r||"phone"!==i||!this.isPhoneValid()),this.sendBtn.toggleAttribute("loading",this.hasAttribute("sending")),this.otpInput.setAttribute("length",o),this.otpInput.setAttribute("size",e),this.otpInput.setAttribute("value",this.getAttribute("code")||""),this.otpInput.toggleAttribute("disabled",r||"code"!==i),this.otpInput.toggleAttribute("error",this.hasAttribute("error")&&"code"===i),this.resendBtn.textContent=this.getAttribute("resend-label")||"재전송",this.verifyBtn.setAttribute("size",e),this.verifyBtn.textContent=this.getAttribute("verify-label")||"인증하기",this.verifyBtn.toggleAttribute("disabled",r||(this.getAttribute("code")||"").length<Number(o)),this.verifyBtn.toggleAttribute("loading",this.hasAttribute("verifying")),this.codeBlock.hidden="phone"===i;this.querySelector('[data-role="verified"]').hidden="verified"!==i;const l=this.getAttribute("error-message")||"";this.errorEl.textContent=l,this.errorEl.hidden=!this.hasAttribute("error")||!l}isPhoneValid(){return/^01[016789]\d{7,8}$/.test(this.phone)&&Boolean(this.carrier)}requestVerify(){const t=(this.code||this.otpInput.value).replace(/\D/g,""),e=Number(this.getAttribute("code-length")||6);"code"!==this.step||t.length!==e||this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("db-verify",{detail:{carrier:this.carrier,phone:this.phone,code:t},bubbles:!0,composed:!0}))}}customElements.get("db-phone-verify")||customElements.define("db-phone-verify",DbPhoneVerify);export{DbPhoneVerify};

package/dist/esm/components/db-progress-step.js

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";class DbProgressStep extends HTMLElement{static get observedAttributes(){return["items","size","layout","current-step","clickable","full-width","disabled"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}resolveStatus(e,t){const s=t.status??"pending";if("pending"!==s)return s;const n=Number(this.getAttribute("current-step")||0);return e<n?"completed":e===n?"active":"pending"}iconSize(e){return"s"===e?12:"l"===e?20:16}renderIndicatorContent(t,s,n){const i=document.createElement("div");if(i.className="designbase-wc-progress-step__icon","completed"===t)i.append(e("done",this.iconSize(n)));else if("error"===t)i.append(e("warning-filled",this.iconSize(n)));else{const e=document.createElement("span");e.className="designbase-wc-progress-step__number",e.textContent=String(s+1),i.append(e)}return i}handleStepClick(e,t){const s=this.hasAttribute("disabled"),n=this.hasAttribute("clickable");s||e.disabled||!n||this.dispatchEvent(new CustomEvent("db-step-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}render(){const e=this.getAttribute("size")||"m",t=this.getAttribute("layout")||"horizontal",s=this.hasAttribute("clickable"),n=this.hasAttribute("disabled"),i=this.items;this.className=["designbase-wc-progress-step",`designbase-wc-progress-step--${e}`,`designbase-wc-progress-step--${t}`,s&&"designbase-wc-progress-step--clickable",this.hasAttribute("full-width")&&"designbase-wc-progress-step--full-width",n&&"designbase-wc-progress-step--disabled"].filter(Boolean).join(" "),this.replaceChildren(),i.forEach((t,r)=>{const a=this.resolveStatus(r,t),c=r===i.length-1,d=s&&!n&&!t.disabled,o=s&&(n||Boolean(t.disabled)),p="completed"===(r>0?this.resolveStatus(r-1,i[r-1]):"pending")?"completed":a,l=document.createElement("div");l.className=["designbase-wc-progress-step__item",`designbase-wc-progress-step__item--${a}`,d&&"designbase-wc-progress-step__item--clickable",t.disabled&&"designbase-wc-progress-step__item--disabled"].filter(Boolean).join(" ");const b=document.createElement("div");b.className="designbase-wc-progress-step__indicator-container";const m=document.createElement("div");if(m.className="designbase-wc-progress-step__indicator",o&&(m.setAttribute("role","button"),m.setAttribute("aria-disabled","true")),d?(m.tabIndex=0,m.setAttribute("role","button"),m.setAttribute("aria-label",`${t.title} 단계로 이동`),m.addEventListener("click",()=>this.handleStepClick(t,r)),m.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleStepClick(t,r))})):m.tabIndex=-1,"active"===a){const e=document.createElement("div");e.className="designbase-wc-progress-step__pulse",m.append(e)}if(m.append(this.renderIndicatorContent(a,r,e)),b.append(m),!c){const e=document.createElement("div");e.className=["designbase-wc-progress-step__connector",`designbase-wc-progress-step__connector--${p}`].join(" "),b.append(e)}l.append(b);const g=document.createElement("div");g.className="designbase-wc-progress-step__content";const u=document.createElement("div");u.className="designbase-wc-progress-step__header";const h=document.createElement("h3");if(h.className="designbase-wc-progress-step__title",h.textContent=t.title,u.append(h),g.append(u),t.description){const e=document.createElement("p");e.className="designbase-wc-progress-step__description",e.textContent=t.description,g.append(e)}if(t.timestamp){const e=document.createElement("span");e.className="designbase-wc-progress-step__timestamp",e.textContent=t.timestamp,g.append(e)}l.append(g),this.append(l)})}}customElements.get("db-progress-step")||customElements.define("db-progress-step",DbProgressStep);export{DbProgressStep};
+import{createDbIcon as e}from"./db-icons.js";import{coerceToContract as t}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{PROGRESS_STEP_SIZES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbProgressStep extends HTMLElement{static get observedAttributes(){return["items","size","layout","current-step","clickable","full-width","disabled"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}resolveStatus(e,t){const s=t.status??"pending";if("pending"!==s)return s;const n=Number(this.getAttribute("current-step")||0);return e<n?"completed":e===n?"active":"pending"}iconSize(e){return"s"===e?12:"l"===e?20:16}renderIndicatorContent(t,s,n){const i=document.createElement("div");if(i.className="designbase-wc-progress-step__icon","completed"===t)i.append(e("done",this.iconSize(n)));else if("error"===t)i.append(e("warning-filled",this.iconSize(n)));else{const e=document.createElement("span");e.className="designbase-wc-progress-step__number",e.textContent=String(s+1),i.append(e)}return i}handleStepClick(e,t){const s=this.hasAttribute("disabled"),n=this.hasAttribute("clickable");s||e.disabled||!n||this.dispatchEvent(new CustomEvent("db-step-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}render(){const e=t(this.getAttribute("size"),s,"m"),n=this.getAttribute("layout")||"horizontal",i=this.hasAttribute("clickable"),r=this.hasAttribute("disabled"),a=this.items;this.className=["designbase-wc-progress-step",`designbase-wc-progress-step--${e}`,`designbase-wc-progress-step--${n}`,i&&"designbase-wc-progress-step--clickable",this.hasAttribute("full-width")&&"designbase-wc-progress-step--full-width",r&&"designbase-wc-progress-step--disabled"].filter(Boolean).join(" "),this.replaceChildren(),a.forEach((t,s)=>{const n=this.resolveStatus(s,t),c=s===a.length-1,d=i&&!r&&!t.disabled,o=i&&(r||Boolean(t.disabled)),p="completed"===(s>0?this.resolveStatus(s-1,a[s-1]):"pending")?"completed":n,l=document.createElement("div");l.className=["designbase-wc-progress-step__item",`designbase-wc-progress-step__item--${n}`,d&&"designbase-wc-progress-step__item--clickable",t.disabled&&"designbase-wc-progress-step__item--disabled"].filter(Boolean).join(" ");const m=document.createElement("div");m.className="designbase-wc-progress-step__indicator-container";const b=document.createElement("div");if(b.className="designbase-wc-progress-step__indicator",o&&(b.setAttribute("role","button"),b.setAttribute("aria-disabled","true")),d?(b.tabIndex=0,b.setAttribute("role","button"),b.setAttribute("aria-label",`${t.title} 단계로 이동`),b.addEventListener("click",()=>this.handleStepClick(t,s)),b.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleStepClick(t,s))})):b.tabIndex=-1,"active"===n){const e=document.createElement("div");e.className="designbase-wc-progress-step__pulse",b.append(e)}if(b.append(this.renderIndicatorContent(n,s,e)),m.append(b),!c){const e=document.createElement("div");e.className=["designbase-wc-progress-step__connector",`designbase-wc-progress-step__connector--${p}`].join(" "),m.append(e)}l.append(m);const g=document.createElement("div");g.className="designbase-wc-progress-step__content";const u=document.createElement("div");u.className="designbase-wc-progress-step__header";const h=document.createElement("h3");if(h.className="designbase-wc-progress-step__title",h.textContent=t.title,u.append(h),g.append(u),t.description){const e=document.createElement("p");e.className="designbase-wc-progress-step__description",e.textContent=t.description,g.append(e)}if(t.timestamp){const e=document.createElement("span");e.className="designbase-wc-progress-step__timestamp",e.textContent=t.timestamp,g.append(e)}l.append(g),this.append(l)})}}customElements.get("db-progress-step")||customElements.define("db-progress-step",DbProgressStep);export{DbProgressStep};

package/dist/esm/components/db-random-gradient.js

@@ -1 +1 @@
-import{createRandomGradientStyle as t,COLOR_PALETTES as e}from"./random-gradient-palettes.js";const i="designbase-wc-random-gradient";class DbRandomGradient extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["scheme","tone","width","height","blur","color-count","animated","animation-duration","overlay","overlay-opacity"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.stopAnimation()}attributeChangedCallback(){this.built&&this.updateUI()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}build(){this.backgroundEl=document.createElement("div"),this.backgroundEl.className=`${i}__background`,this.overlayEl=document.createElement("div"),this.overlayEl.className=`${i}__overlay`,this.contentEl=document.createElement("div"),this.contentEl.className=`${i}__content`,this.append(this.backgroundEl,this.overlayEl,this.contentEl)}stopAnimation(){this.animationTimer&&(window.clearInterval(this.animationTimer),this.animationTimer=void 0)}applyGradient(){const e=this.getAttribute("scheme")||"primary",i=this.getAttribute("tone")||"vivid",n=Number(this.getAttribute("color-count")||4),a=Number(this.getAttribute("blur")||80),s=this.getBool("animated"),r=Number(this.getAttribute("animation-duration")||10),o=t(e,i,n,a,s,r);this.backgroundEl&&Object.assign(this.backgroundEl.style,o)}syncContent(){if(!this.contentEl)return;Array.from(this.childNodes).filter(t=>t!==this.backgroundEl&&t!==this.overlayEl&&t!==this.contentEl&&!(t instanceof HTMLElement&&t.hasAttribute("data-wc-internal"))).forEach(t=>this.contentEl.append(t)),this.contentEl.hidden=0===this.contentEl.childNodes.length}updateUI(){const t=this.getAttribute("scheme")||"primary",n=this.getAttribute("tone")||"vivid",a=this.getAttribute("width")||"100%",s=this.getAttribute("height")||"600px",r=!this.hasAttribute("overlay")||"false"!==this.getAttribute("overlay"),o=Number(this.getAttribute("overlay-opacity")||.2),l=this.getBool("animated");if(this.className=[i,l&&`${i}--animated`,r&&`${i}--with-overlay`].filter(Boolean).join(" "),this.style.width=/^\d+$/.test(a)?`${a}px`:a,this.style.height=/^\d+$/.test(s)?`${s}px`:s,this.overlayEl&&(this.overlayEl.hidden=!r,r)){const i=e[t][n];Object.assign(this.overlayEl.style,{background:`linear-gradient(45deg, ${i[0]}, ${i[1]})`,opacity:String(o)})}if(this.stopAnimation(),this.applyGradient(),l){const t=Number(this.getAttribute("animation-duration")||10);this.animationTimer=window.setInterval(()=>this.applyGradient(),1e3*t)}this.syncContent()}}customElements.get("db-random-gradient")||customElements.define("db-random-gradient",DbRandomGradient);export{DbRandomGradient};
+import{createRandomGradientStyle as t,COLOR_PALETTES as e}from"./random-gradient-palettes.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{RANDOM_GRADIENT_TONES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const s="designbase-wc-random-gradient";class DbRandomGradient extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["scheme","tone","width","height","blur","color-count","animated","animation-duration","overlay","overlay-opacity"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.stopAnimation()}attributeChangedCallback(){this.built&&this.updateUI()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}build(){this.backgroundEl=document.createElement("div"),this.backgroundEl.className=`${s}__background`,this.overlayEl=document.createElement("div"),this.overlayEl.className=`${s}__overlay`,this.contentEl=document.createElement("div"),this.contentEl.className=`${s}__content`,this.append(this.backgroundEl,this.overlayEl,this.contentEl)}stopAnimation(){this.animationTimer&&(window.clearInterval(this.animationTimer),this.animationTimer=void 0)}applyGradient(){const e=this.getAttribute("scheme")||"primary",s=i(this.getAttribute("tone"),n,"vivid"),a=Number(this.getAttribute("color-count")||4),o=Number(this.getAttribute("blur")||80),r=this.getBool("animated"),l=Number(this.getAttribute("animation-duration")||10),d=t(e,s,a,o,r,l);this.backgroundEl&&Object.assign(this.backgroundEl.style,d)}syncContent(){if(!this.contentEl)return;Array.from(this.childNodes).filter(t=>t!==this.backgroundEl&&t!==this.overlayEl&&t!==this.contentEl&&!(t instanceof HTMLElement&&t.hasAttribute("data-wc-internal"))).forEach(t=>this.contentEl.append(t)),this.contentEl.hidden=0===this.contentEl.childNodes.length}updateUI(){const t=this.getAttribute("scheme")||"primary",a=i(this.getAttribute("tone"),n,"vivid"),o=this.getAttribute("width")||"100%",r=this.getAttribute("height")||"600px",l=!this.hasAttribute("overlay")||"false"!==this.getAttribute("overlay"),d=Number(this.getAttribute("overlay-opacity")||.2),h=this.getBool("animated");if(this.className=[s,h&&`${s}--animated`,l&&`${s}--with-overlay`].filter(Boolean).join(" "),this.style.width=/^\d+$/.test(o)?`${o}px`:o,this.style.height=/^\d+$/.test(r)?`${r}px`:r,this.overlayEl&&(this.overlayEl.hidden=!l,l)){const i=e[t][a];Object.assign(this.overlayEl.style,{background:`linear-gradient(45deg, ${i[0]}, ${i[1]})`,opacity:String(d)})}if(this.stopAnimation(),this.applyGradient(),h){const t=Number(this.getAttribute("animation-duration")||10);this.animationTimer=window.setInterval(()=>this.applyGradient(),1e3*t)}this.syncContent()}}customElements.get("db-random-gradient")||customElements.define("db-random-gradient",DbRandomGradient);export{DbRandomGradient};

package/dist/esm/components/db-range-slider.d.ts

@@ -15,7 +15,6 @@ declare class DbRangeSlider extends HTMLElement {
     private boundTrackClick;
     private boundPointerMove;
     private boundPointerUp;
-    private boundContainerKeyDown;
     private eventsBound;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/esm/components/db-range-slider.js

@@ -1 +1 @@
-import{rafThrottle as t}from"../core/dom.js";const e="designbase-wc-range-slider";class DbRangeSlider extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.headerEl=null,this.labelEl=null,this.valuesEl=null,this.containerEl=null,this.trackEl=null,this.fillEl=null,this.thumbEls=[],this.currentValue=50,this.currentRange=[25,75],this.isDragging=!1,this.activeThumb=null,this.boundTrackClick=t=>this.handleTrackClick(t),this.boundPointerMove=t=>this.handlePointerMove(t),this.boundPointerUp=()=>this.handlePointerUp(),this.boundContainerKeyDown=t=>this.handleKeyDown(t),this.eventsBound=!1,this.handlePointerMove=t(t=>{if(!this.isDragging||!this.isInteractive())return;const e=this.getTrackPercent(t.clientX,t.clientY),i=this.percentToValue(e);this.applyDragValue(i)})}static get observedAttributes(){return["value","range","min","max","step","size","variant","show-value","show-label","label","value-position","value-fixed","show-thumb-tooltip","show-marks","marks","mark-labels","disabled","readonly","full-width","vertical"]}connectedCallback(){this.built||(this.build(),this.built=!0),this.readAttributeValues(),this.syncClasses(),this.syncDomOrder(),this.syncStructure(),this.syncVisuals(),this.syncA11y(),this.bindEvents()}disconnectedCallback(){this.unbindEvents()}attributeChangedCallback(t){this.built&&(this.readAttributeValues(),this.syncClasses(),this.isStructuralAttribute(t)&&(this.syncDomOrder(),this.syncStructure()),this.syncVisuals(),this.syncA11y())}isStructuralAttribute(t){return["range","show-value","show-label","label","value-position","show-marks","marks","mark-labels","vertical"].includes(t)}get value(){return this.currentValue}set value(t){this.currentValue=this.clamp(t),this.setAttribute("value",String(this.currentValue)),this.syncVisuals()}get range(){if(this.hasAttribute("range"))return[...this.currentRange]}set range(t){if(null==t)return this.removeAttribute("range"),void(this.built&&(this.syncStructure(),this.syncVisuals()));const e=this.normalizeRangeInput(t);if(!e)return;const i=[Math.min(e[0],e[1]),Math.max(e[0],e[1])];this.currentRange=[this.clamp(i[0]),this.clamp(i[1])];const s=`${this.currentRange[0]},${this.currentRange[1]}`;this.getAttribute("range")!==s&&this.setAttribute("range",s),this.built&&this.syncVisuals()}build(){this.classList.add(e),this.headerEl=document.createElement("div"),this.headerEl.className=`${e}__header`,this.labelEl=document.createElement("span"),this.labelEl.className=`${e}__label`,this.valuesEl=document.createElement("div"),this.valuesEl.className=`${e}__values`,this.containerEl=document.createElement("div"),this.containerEl.className=`${e}__container`,this.containerEl.setAttribute("role","slider"),this.containerEl.setAttribute("tabindex","0"),this.trackEl=document.createElement("div"),this.trackEl.className=`${e}__track`,this.fillEl=document.createElement("div"),this.fillEl.className=`${e}__fill`,this.trackEl.appendChild(this.fillEl),this.containerEl.appendChild(this.trackEl)}getValuePosition(){const t=this.getAttribute("value-position");return t||(this.shouldShowLabel()?"top":"right")}shouldShowLabel(){return this.hasAttribute("show-label")&&Boolean(this.getAttribute("label")?.trim())}formatValue(t){const e=this.getAttribute("value-fixed");if(null!==e&&""!==e){const i=Number(e);if(Number.isFinite(i))return t.toFixed(i)}return String(t)}syncDomOrder(){if(!this.headerEl||!this.valuesEl||!this.containerEl)return;const t=this.getValuePosition(),e=this.shouldShowLabel(),i=this.hasAttribute("show-value"),s=this.hasAttribute("range");return this.replaceChildren(),this.labelEl&&(this.labelEl.textContent=this.getAttribute("label")?.trim()||""),s||"top"===t?(this.headerEl.replaceChildren(),e&&this.labelEl&&this.headerEl.appendChild(this.labelEl),i&&this.headerEl.appendChild(this.valuesEl),this.headerEl.childElementCount>0&&this.append(this.headerEl),void this.append(this.containerEl)):"bottom"===t?(e&&this.labelEl&&(this.headerEl.replaceChildren(this.labelEl),this.append(this.headerEl)),this.append(this.containerEl),void(i&&this.append(this.valuesEl))):void(i?this.append(this.valuesEl,this.containerEl):this.append(this.containerEl))}bindEvents(){this.eventsBound||(this.trackEl?.addEventListener("click",this.boundTrackClick),this.containerEl?.addEventListener("keydown",this.boundContainerKeyDown),this.eventsBound=!0)}unbindEvents(){this.eventsBound&&(this.trackEl?.removeEventListener("click",this.boundTrackClick),this.containerEl?.removeEventListener("keydown",this.boundContainerKeyDown),document.removeEventListener("pointermove",this.boundPointerMove),document.removeEventListener("pointerup",this.boundPointerUp),this.eventsBound=!1)}readAttributeValues(){const t=this.getNumberAttr("min",0),e=this.getNumberAttr("max",100),i=this.getNumberAttr("step",1);if(this.hasAttribute("range")){const s=this.parseRangeAttr(this.getAttribute("range"));s?this.currentRange=[this.clamp(s[0],t,e,i),this.clamp(s[1],t,e,i)]:this.currentRange.every(Number.isFinite)||(this.currentRange=[25,75])}else this.currentValue=this.clamp(this.getNumberAttr("value",50),t,e,i)}syncClasses(){const t=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",s=this.hasAttribute("range"),r=this.getValuePosition(),a=s?"top":r,n=this.hasAttribute("show-marks")&&this.parseMarks().length>0&&Object.keys(this.parseMarkLabels()).length>0,h=[e,`${e}--${t}`,`${e}--${i}`,`${e}--value-${a}`,this.shouldShowLabel()?`${e}--has-label`:"",this.hasAttribute("disabled")?`${e}--disabled`:"",this.hasAttribute("readonly")?`${e}--readonly`:"",this.hasAttribute("full-width")?`${e}--full-width`:"",this.hasAttribute("vertical")?`${e}--vertical`:"",this.hasAttribute("show-thumb-tooltip")?`${e}--show-tooltip`:"",s?`${e}--range`:"",n?`${e}--has-mark-labels`:""].filter(Boolean);if(this.className=h.join(" "),this.trackEl){const t=[`${e}__track`];this.hasAttribute("disabled")&&t.push(`${e}__track--disabled`),this.hasAttribute("readonly")&&t.push(`${e}__track--readonly`),this.trackEl.className=t.join(" ")}}syncStructure(){if(!this.valuesEl||!this.trackEl||!this.fillEl)return;const t=this.hasAttribute("show-value"),i=this.hasAttribute("range"),s=this.hasAttribute("show-marks");if(this.valuesEl.innerHTML="",this.valuesEl.hidden=!t,t)if(i){const t=document.createElement("span");t.className=`${e}__value ${e}__value--min`;const i=document.createElement("span");i.className=`${e}__value-separator`,i.textContent="~",i.setAttribute("aria-hidden","true");const s=document.createElement("span");s.className=`${e}__value ${e}__value--max`,this.valuesEl.append(t,i,s)}else{const t=document.createElement("span");t.className=`${e}__value ${e}__value--single`,this.valuesEl.appendChild(t)}if(this.thumbEls.forEach(t=>t.remove()),this.thumbEls=[],this.trackEl.querySelectorAll(`.${e}__mark`).forEach(t=>t.remove()),s){const t=this.parseMarks();if(t.length>0){const i=this.parseMarkLabels();t.forEach(t=>{const s=document.createElement("div");if(s.className=`${e}__mark`,s.setAttribute("aria-hidden","true"),this.isMarkActive(t)&&s.classList.add(`${e}__mark--active`),this.hasAttribute("vertical")?s.style.bottom=`${this.valueToPercent(t)}%`:s.style.left=`${this.valueToPercent(t)}%`,void 0!==i[t]){const r=document.createElement("span");r.className=`${e}__mark-label`,r.textContent=i[t],s.appendChild(r)}this.trackEl.insertBefore(s,this.fillEl)})}}const r=i?2:1,a=this.hasAttribute("disabled")||this.hasAttribute("readonly");for(let t=0;t<r;t++){const s=document.createElement("div");s.className=`${e}__thumb`,s.setAttribute("role","slider"),s.setAttribute("draggable","false"),s.setAttribute("tabindex",a?"-1":"0");const r=i?0===t?"min":"max":"single";i&&(s.dataset.thumb=r),s.addEventListener("pointerdown",t=>this.handleThumbPointerDown(t,r)),s.addEventListener("keydown",t=>this.handleKeyDown(t,r));const n=document.createElement("span");n.className=`${e}__thumb-tooltip`,n.setAttribute("aria-hidden","true"),n.hidden=!0,s.appendChild(n),this.trackEl.appendChild(s),this.thumbEls.push(s)}}isMarkActive(t){if(this.hasAttribute("range")){const[e,i]=this.currentRange;return t>=e&&t<=i}return t<=this.currentValue}syncVisuals(){if(!this.fillEl)return;const t=this.hasAttribute("range"),i=this.getNumberAttr("min",0),s=this.getNumberAttr("max",100);if(t){const[t,r]=this.currentRange,a=this.valueToPercent(t),n=this.valueToPercent(r);this.hasAttribute("vertical")?(this.fillEl.style.left="",this.fillEl.style.width="",this.fillEl.style.bottom=`${a}%`,this.fillEl.style.height=n-a+"%"):(this.fillEl.style.bottom="",this.fillEl.style.height="",this.fillEl.style.left=`${a}%`,this.fillEl.style.width=n-a+"%"),this.thumbEls[0]&&(this.setThumbPosition(this.thumbEls[0],a),this.thumbEls[0].setAttribute("aria-valuemin",String(i)),this.thumbEls[0].setAttribute("aria-valuemax",String(r)),this.thumbEls[0].setAttribute("aria-valuenow",String(t))),this.thumbEls[1]&&(this.setThumbPosition(this.thumbEls[1],n),this.thumbEls[1].setAttribute("aria-valuemin",String(t)),this.thumbEls[1].setAttribute("aria-valuemax",String(s)),this.thumbEls[1].setAttribute("aria-valuenow",String(r)));const h=this.valuesEl?.querySelector(`.${e}__value--min`),l=this.valuesEl?.querySelector(`.${e}__value--max`);h&&(h.textContent=this.formatValue(t)),l&&(l.textContent=this.formatValue(r))}else{const t=this.valueToPercent(this.currentValue);this.hasAttribute("vertical")?(this.fillEl.style.left="",this.fillEl.style.width="",this.fillEl.style.bottom="0",this.fillEl.style.height=`${t}%`):(this.fillEl.style.bottom="",this.fillEl.style.height="",this.fillEl.style.left="0",this.fillEl.style.width=`${t}%`),this.thumbEls[0]&&(this.setThumbPosition(this.thumbEls[0],t),this.thumbEls[0].setAttribute("aria-valuemin",String(i)),this.thumbEls[0].setAttribute("aria-valuemax",String(s)),this.thumbEls[0].setAttribute("aria-valuenow",String(this.currentValue)));const r=this.valuesEl?.querySelector(`.${e}__value--single`);r&&(r.textContent=this.formatValue(this.currentValue))}this.syncThumbTooltips(),this.trackEl?.querySelectorAll(`.${e}__mark`).forEach(t=>{const i=t instanceof HTMLElement?parseFloat(t.style.left):NaN,s=t instanceof HTMLElement?parseFloat(t.style.bottom):NaN,r=Number.isFinite(i)?i:s;if(!Number.isFinite(r))return;const a=this.percentToValue(r);t.classList.toggle(`${e}__mark--active`,this.isMarkActive(a))})}syncThumbTooltips(){const t=this.hasAttribute("range"),i=this.hasAttribute("show-thumb-tooltip");this.thumbEls.forEach((s,r)=>{const a=s.querySelector(`.${e}__thumb-tooltip`);if(!a)return;if(!i)return void(a.hidden=!0);a.hidden=!1;const n=t?0===r?this.currentRange[0]:this.currentRange[1]:this.currentValue;a.textContent=this.formatValue(n)})}syncA11y(){if(!this.containerEl)return;const t=this.getNumberAttr("min",0),e=this.getNumberAttr("max",100),i=this.hasAttribute("range"),s=this.hasAttribute("disabled"),r=this.hasAttribute("readonly");this.containerEl.setAttribute("aria-valuemin",String(t)),this.containerEl.setAttribute("aria-valuemax",String(e)),this.containerEl.setAttribute("aria-valuenow",String(i?this.currentRange[0]:this.currentValue)),this.containerEl.setAttribute("aria-valuetext",i?`${this.currentRange[0]} to ${this.currentRange[1]}`:String(this.currentValue)),this.containerEl.setAttribute("aria-disabled",String(s)),this.containerEl.setAttribute("aria-readonly",String(r)),this.containerEl.setAttribute("tabindex",s||r?"-1":"0")}setThumbPosition(t,e){this.hasAttribute("vertical")?(t.style.left="",t.style.bottom=`${e}%`):(t.style.bottom="",t.style.left=`${e}%`)}valueToPercent(t){const e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100);return i===e?0:(t-e)/(i-e)*100}percentToValue(t){const e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100),s=this.getNumberAttr("step",1),r=e+t/100*(i-e);return this.snapToStep(r,e,i,s)}snapToStep(t,e,i,s){const r=Math.round(t/s)*s;return Math.min(i,Math.max(e,r))}clamp(t,e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100),s=this.getNumberAttr("step",1)){return this.snapToStep(Math.min(i,Math.max(e,t)),e,i,s)}getNumberAttr(t,e){const i=this.getAttribute(t);if(null===i||""===i)return e;const s=Number(i);return Number.isFinite(s)?s:e}normalizeRangeInput(t){if("string"==typeof t)return this.parseRangeAttr(t);if(!Array.isArray(t)||t.length<2)return null;const e=Number(t[0]),i=Number(t[1]);return Number.isFinite(e)&&Number.isFinite(i)?[e,i]:null}parseRangeAttr(t){if(!t)return null;if(t.startsWith("[")){try{const e=JSON.parse(t);if(Array.isArray(e)&&2===e.length){const t=Number(e[0]),i=Number(e[1]);if(Number.isFinite(t)&&Number.isFinite(i))return[t,i]}}catch{return null}return null}const e=t.split(",").map(t=>Number(t.trim()));return 2!==e.length||e.some(t=>!Number.isFinite(t))?null:[e[0],e[1]]}parseMarks(){const t=this.getAttribute("marks");if(!t)return[];if(t.startsWith("[")){try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(t=>Number(t)).filter(t=>Number.isFinite(t))}catch{return[]}return[]}return t.split(",").map(t=>Number(t.trim())).filter(t=>Number.isFinite(t))}parseMarkLabels(){const t=this.getAttribute("mark-labels");if(!t)return{};try{const e=JSON.parse(t),i={};return Object.entries(e).forEach(([t,e])=>{i[Number(t)]=e}),i}catch{return{}}}isInteractive(){return!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")}getTrackPercent(t,e){if(!this.trackEl)return 0;const i=this.trackEl.getBoundingClientRect();if(this.hasAttribute("vertical")){const t=Math.max(i.top,Math.min(i.bottom,e));return(i.bottom-t)/i.height*100}return(Math.max(i.left,Math.min(i.right,t))-i.left)/i.width*100}handleThumbPointerDown(t,e){this.isInteractive()&&(t.preventDefault(),this.isDragging=!0,this.activeThumb=e,this.setThumbActive(e,!0),document.addEventListener("pointermove",this.boundPointerMove),document.addEventListener("pointerup",this.boundPointerUp))}handleTrackClick(t){if(!this.isInteractive()||!this.trackEl)return;if(t.target.closest(`.${e}__thumb`))return;const i=this.getTrackPercent(t.clientX,t.clientY),s=this.percentToValue(i);this.commitValueAtPosition(s)}handlePointerUp(){this.isDragging&&(this.activeThumb&&this.setThumbActive(this.activeThumb,!1),this.isDragging=!1,this.activeThumb=null,document.removeEventListener("pointermove",this.boundPointerMove),document.removeEventListener("pointerup",this.boundPointerUp),this.syncThumbTooltips(),this.hasAttribute("range")?this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`):this.setAttribute("value",String(this.currentValue)),this.syncA11y())}setThumbActive(t,i){if(this.hasAttribute("range")){const s=this.thumbEls["min"===t?0:1];return void s?.classList.toggle(`${e}__thumb--active`,i)}this.thumbEls[0]?.classList.toggle(`${e}__thumb--active`,i)}applyDragValue(t){const e=this.clamp(t);if(this.hasAttribute("range")){const[t,i]=this.currentRange;if("min"===this.activeThumb)this.currentRange=[Math.min(e,i),i];else if("max"===this.activeThumb)this.currentRange=[t,Math.max(e,t)];else{Math.abs(e-t)<=Math.abs(e-i)?(this.currentRange=[Math.min(e,i),i],this.activeThumb="min"):(this.currentRange=[t,Math.max(e,t)],this.activeThumb="max")}this.syncVisuals(),this.dispatchRangeChange()}else this.currentValue=e,this.syncVisuals(),this.syncA11y(),this.dispatchValueChange()}commitValueAtPosition(t){const e=this.clamp(t);if(this.hasAttribute("range")){const[t,i]=this.currentRange,s=Math.abs(e-t),r=Math.abs(e-i);this.currentRange=s<=r?[Math.min(e,i),i]:[t,Math.max(e,t)],this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`),this.syncVisuals(),this.dispatchRangeChange()}else this.currentValue=e,this.setAttribute("value",String(this.currentValue)),this.syncVisuals(),this.syncA11y(),this.dispatchValueChange()}handleKeyDown(t,e="single"){if(!this.isInteractive())return;const i=this.getNumberAttr("step",1),s=this.getNumberAttr("min",0),r=this.getNumberAttr("max",100);let a;if(this.hasAttribute("range")&&"single"!==e){const n="min"===e?this.currentRange[0]:this.currentRange[1];switch(t.key){case"ArrowLeft":case"ArrowDown":a=this.clamp(n-i,s,r);break;case"ArrowRight":case"ArrowUp":a=this.clamp(n+i,s,r);break;case"Home":a=s;break;case"End":a=r;break;default:return}const h=[...this.currentRange];if("min"===e?h[0]=a:h[1]=a,h[0]>h[1])return;return t.preventDefault(),this.currentRange=h,void this.afterKeyboard()}if(!this.hasAttribute("range")){switch(t.key){case"ArrowLeft":case"ArrowDown":a=this.clamp(this.currentValue-i,s,r);break;case"ArrowRight":case"ArrowUp":a=this.clamp(this.currentValue+i,s,r);break;case"Home":a=s;break;case"End":a=r;break;default:return}t.preventDefault(),this.currentValue=a,this.afterKeyboard()}}afterKeyboard(){this.hasAttribute("range")?(this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`),this.syncVisuals(),this.dispatchRangeChange()):(this.setAttribute("value",String(this.currentValue)),this.syncVisuals(),this.syncA11y(),this.dispatchValueChange())}dispatchValueChange(){this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{value:this.currentValue}}))}dispatchRangeChange(){this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{range:[...this.currentRange]}}))}}customElements.get("db-range-slider")||customElements.define("db-range-slider",DbRangeSlider);export{DbRangeSlider};
+import{rafThrottle as t}from"../core/dom.js";const e="designbase-wc-range-slider";class DbRangeSlider extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.headerEl=null,this.labelEl=null,this.valuesEl=null,this.containerEl=null,this.trackEl=null,this.fillEl=null,this.thumbEls=[],this.currentValue=50,this.currentRange=[25,75],this.isDragging=!1,this.activeThumb=null,this.boundTrackClick=t=>this.handleTrackClick(t),this.boundPointerMove=t=>this.handlePointerMove(t),this.boundPointerUp=()=>this.handlePointerUp(),this.eventsBound=!1,this.handlePointerMove=t(t=>{if(!this.isDragging||!this.isInteractive())return;const e=this.getTrackPercent(t.clientX,t.clientY),i=this.percentToValue(e);this.applyDragValue(i)})}static get observedAttributes(){return["value","range","min","max","step","size","variant","show-value","show-label","label","value-position","value-fixed","show-thumb-tooltip","show-marks","marks","mark-labels","disabled","readonly","full-width","vertical"]}connectedCallback(){this.built||(this.build(),this.built=!0),this.readAttributeValues(),this.syncClasses(),this.syncDomOrder(),this.syncStructure(),this.syncVisuals(),this.syncA11y(),this.bindEvents()}disconnectedCallback(){this.unbindEvents()}attributeChangedCallback(t){this.built&&(this.readAttributeValues(),this.syncClasses(),this.isStructuralAttribute(t)&&(this.syncDomOrder(),this.syncStructure()),this.syncVisuals(),this.syncA11y())}isStructuralAttribute(t){return["range","show-value","show-label","label","value-position","show-marks","marks","mark-labels","vertical"].includes(t)}get value(){return this.currentValue}set value(t){this.currentValue=this.clamp(t),this.setAttribute("value",String(this.currentValue)),this.syncVisuals()}get range(){if(this.hasAttribute("range"))return[...this.currentRange]}set range(t){if(null==t)return this.removeAttribute("range"),void(this.built&&(this.syncStructure(),this.syncVisuals()));const e=this.normalizeRangeInput(t);if(!e)return;const i=[Math.min(e[0],e[1]),Math.max(e[0],e[1])];this.currentRange=[this.clamp(i[0]),this.clamp(i[1])];const s=`${this.currentRange[0]},${this.currentRange[1]}`;this.getAttribute("range")!==s&&this.setAttribute("range",s),this.built&&this.syncVisuals()}build(){this.classList.add(e),this.headerEl=document.createElement("div"),this.headerEl.className=`${e}__header`,this.labelEl=document.createElement("span"),this.labelEl.className=`${e}__label`,this.valuesEl=document.createElement("div"),this.valuesEl.className=`${e}__values`,this.containerEl=document.createElement("div"),this.containerEl.className=`${e}__container`,this.trackEl=document.createElement("div"),this.trackEl.className=`${e}__track`,this.fillEl=document.createElement("div"),this.fillEl.className=`${e}__fill`,this.trackEl.appendChild(this.fillEl),this.containerEl.appendChild(this.trackEl)}getValuePosition(){const t=this.getAttribute("value-position");return t||(this.shouldShowLabel()?"top":"right")}shouldShowLabel(){return this.hasAttribute("show-label")&&Boolean(this.getAttribute("label")?.trim())}formatValue(t){const e=this.getAttribute("value-fixed");if(null!==e&&""!==e){const i=Number(e);if(Number.isFinite(i))return t.toFixed(i)}return String(t)}syncDomOrder(){if(!this.headerEl||!this.valuesEl||!this.containerEl)return;const t=this.getValuePosition(),e=this.shouldShowLabel(),i=this.hasAttribute("show-value"),s=this.hasAttribute("range");return this.replaceChildren(),this.labelEl&&(this.labelEl.textContent=this.getAttribute("label")?.trim()||""),s||"top"===t?(this.headerEl.replaceChildren(),e&&this.labelEl&&this.headerEl.appendChild(this.labelEl),i&&this.headerEl.appendChild(this.valuesEl),this.headerEl.childElementCount>0&&this.append(this.headerEl),void this.append(this.containerEl)):"bottom"===t?(e&&this.labelEl&&(this.headerEl.replaceChildren(this.labelEl),this.append(this.headerEl)),this.append(this.containerEl),void(i&&this.append(this.valuesEl))):void(i?this.append(this.valuesEl,this.containerEl):this.append(this.containerEl))}bindEvents(){this.eventsBound||(this.trackEl?.addEventListener("click",this.boundTrackClick),this.eventsBound=!0)}unbindEvents(){this.eventsBound&&(this.trackEl?.removeEventListener("click",this.boundTrackClick),document.removeEventListener("pointermove",this.boundPointerMove),document.removeEventListener("pointerup",this.boundPointerUp),this.eventsBound=!1)}readAttributeValues(){const t=this.getNumberAttr("min",0),e=this.getNumberAttr("max",100),i=this.getNumberAttr("step",1);if(this.hasAttribute("range")){const s=this.parseRangeAttr(this.getAttribute("range"));s?this.currentRange=[this.clamp(s[0],t,e,i),this.clamp(s[1],t,e,i)]:this.currentRange.every(Number.isFinite)||(this.currentRange=[25,75])}else this.currentValue=this.clamp(this.getNumberAttr("value",50),t,e,i)}syncClasses(){const t=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",s=this.hasAttribute("range"),r=this.getValuePosition(),a=s?"top":r,n=this.hasAttribute("show-marks")&&this.parseMarks().length>0&&Object.keys(this.parseMarkLabels()).length>0,h=[e,`${e}--${t}`,`${e}--${i}`,`${e}--value-${a}`,this.shouldShowLabel()?`${e}--has-label`:"",this.hasAttribute("disabled")?`${e}--disabled`:"",this.hasAttribute("readonly")?`${e}--readonly`:"",this.hasAttribute("full-width")?`${e}--full-width`:"",this.hasAttribute("vertical")?`${e}--vertical`:"",this.hasAttribute("show-thumb-tooltip")?`${e}--show-tooltip`:"",s?`${e}--range`:"",n?`${e}--has-mark-labels`:""].filter(Boolean);if(this.className=h.join(" "),this.trackEl){const t=[`${e}__track`];this.hasAttribute("disabled")&&t.push(`${e}__track--disabled`),this.hasAttribute("readonly")&&t.push(`${e}__track--readonly`),this.trackEl.className=t.join(" ")}}syncStructure(){if(!this.valuesEl||!this.trackEl||!this.fillEl)return;const t=this.hasAttribute("show-value"),i=this.hasAttribute("range"),s=this.hasAttribute("show-marks");if(this.valuesEl.innerHTML="",this.valuesEl.hidden=!t,t)if(i){const t=document.createElement("span");t.className=`${e}__value ${e}__value--min`;const i=document.createElement("span");i.className=`${e}__value-separator`,i.textContent="~",i.setAttribute("aria-hidden","true");const s=document.createElement("span");s.className=`${e}__value ${e}__value--max`,this.valuesEl.append(t,i,s)}else{const t=document.createElement("span");t.className=`${e}__value ${e}__value--single`,this.valuesEl.appendChild(t)}if(this.thumbEls.forEach(t=>t.remove()),this.thumbEls=[],this.trackEl.querySelectorAll(`.${e}__mark`).forEach(t=>t.remove()),s){const t=this.parseMarks();if(t.length>0){const i=this.parseMarkLabels();t.forEach(t=>{const s=document.createElement("div");if(s.className=`${e}__mark`,s.setAttribute("aria-hidden","true"),this.isMarkActive(t)&&s.classList.add(`${e}__mark--active`),this.hasAttribute("vertical")?s.style.bottom=`${this.valueToPercent(t)}%`:s.style.left=`${this.valueToPercent(t)}%`,void 0!==i[t]){const r=document.createElement("span");r.className=`${e}__mark-label`,r.textContent=i[t],s.appendChild(r)}this.trackEl.insertBefore(s,this.fillEl)})}}const r=i?2:1,a=this.hasAttribute("disabled")||this.hasAttribute("readonly");for(let t=0;t<r;t++){const s=document.createElement("div");s.className=`${e}__thumb`,s.setAttribute("role","slider"),s.setAttribute("draggable","false"),s.setAttribute("tabindex",a?"-1":"0");const r=i?0===t?"min":"max":"single";i&&(s.dataset.thumb=r),s.addEventListener("pointerdown",t=>this.handleThumbPointerDown(t,r)),s.addEventListener("keydown",t=>this.handleKeyDown(t,r));const n=document.createElement("span");n.className=`${e}__thumb-tooltip`,n.setAttribute("aria-hidden","true"),n.hidden=!0,s.appendChild(n),this.trackEl.appendChild(s),this.thumbEls.push(s)}}isMarkActive(t){if(this.hasAttribute("range")){const[e,i]=this.currentRange;return t>=e&&t<=i}return t<=this.currentValue}syncVisuals(){if(!this.fillEl)return;const t=this.hasAttribute("range"),i=this.getNumberAttr("min",0),s=this.getNumberAttr("max",100);if(t){const[t,r]=this.currentRange,a=this.valueToPercent(t),n=this.valueToPercent(r);this.hasAttribute("vertical")?(this.fillEl.style.left="",this.fillEl.style.width="",this.fillEl.style.bottom=`${a}%`,this.fillEl.style.height=n-a+"%"):(this.fillEl.style.bottom="",this.fillEl.style.height="",this.fillEl.style.left=`${a}%`,this.fillEl.style.width=n-a+"%"),this.thumbEls[0]&&(this.setThumbPosition(this.thumbEls[0],a),this.thumbEls[0].setAttribute("aria-valuemin",String(i)),this.thumbEls[0].setAttribute("aria-valuemax",String(r)),this.thumbEls[0].setAttribute("aria-valuenow",String(t))),this.thumbEls[1]&&(this.setThumbPosition(this.thumbEls[1],n),this.thumbEls[1].setAttribute("aria-valuemin",String(t)),this.thumbEls[1].setAttribute("aria-valuemax",String(s)),this.thumbEls[1].setAttribute("aria-valuenow",String(r)));const h=this.valuesEl?.querySelector(`.${e}__value--min`),l=this.valuesEl?.querySelector(`.${e}__value--max`);h&&(h.textContent=this.formatValue(t)),l&&(l.textContent=this.formatValue(r))}else{const t=this.valueToPercent(this.currentValue);this.hasAttribute("vertical")?(this.fillEl.style.left="",this.fillEl.style.width="",this.fillEl.style.bottom="0",this.fillEl.style.height=`${t}%`):(this.fillEl.style.bottom="",this.fillEl.style.height="",this.fillEl.style.left="0",this.fillEl.style.width=`${t}%`),this.thumbEls[0]&&(this.setThumbPosition(this.thumbEls[0],t),this.thumbEls[0].setAttribute("aria-valuemin",String(i)),this.thumbEls[0].setAttribute("aria-valuemax",String(s)),this.thumbEls[0].setAttribute("aria-valuenow",String(this.currentValue)));const r=this.valuesEl?.querySelector(`.${e}__value--single`);r&&(r.textContent=this.formatValue(this.currentValue))}this.syncThumbTooltips(),this.trackEl?.querySelectorAll(`.${e}__mark`).forEach(t=>{const i=t instanceof HTMLElement?parseFloat(t.style.left):NaN,s=t instanceof HTMLElement?parseFloat(t.style.bottom):NaN,r=Number.isFinite(i)?i:s;if(!Number.isFinite(r))return;const a=this.percentToValue(r);t.classList.toggle(`${e}__mark--active`,this.isMarkActive(a))})}syncThumbTooltips(){const t=this.hasAttribute("range"),i=this.hasAttribute("show-thumb-tooltip");this.thumbEls.forEach((s,r)=>{const a=s.querySelector(`.${e}__thumb-tooltip`);if(!a)return;if(!i)return void(a.hidden=!0);a.hidden=!1;const n=t?0===r?this.currentRange[0]:this.currentRange[1]:this.currentValue;a.textContent=this.formatValue(n)})}syncA11y(){if(!this.containerEl)return;const t=this.getNumberAttr("min",0),e=this.getNumberAttr("max",100),i=this.hasAttribute("range"),s=this.hasAttribute("disabled"),r=this.hasAttribute("readonly");this.containerEl.removeAttribute("role"),this.containerEl.removeAttribute("tabindex"),["aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","aria-disabled","aria-readonly"].forEach(t=>this.containerEl?.removeAttribute(t));const a=this.getAttribute("label")?.trim()||"값";this.thumbEls.forEach((n,h)=>{const l=i?0===h?this.currentRange[0]:this.currentRange[1]:this.currentValue,u=i?`${a} ${0===h?"최소값":"최대값"}`:a;n.setAttribute("aria-label",u),n.setAttribute("aria-valuemin",String(i&&1===h?this.currentRange[0]:t)),n.setAttribute("aria-valuemax",String(i&&0===h?this.currentRange[1]:e)),n.setAttribute("aria-valuenow",String(l)),n.setAttribute("aria-valuetext",String(l)),n.setAttribute("aria-disabled",String(s)),n.setAttribute("aria-readonly",String(r)),n.setAttribute("tabindex",s||r?"-1":"0")})}setThumbPosition(t,e){this.hasAttribute("vertical")?(t.style.left="",t.style.bottom=`${e}%`):(t.style.bottom="",t.style.left=`${e}%`)}valueToPercent(t){const e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100);return i===e?0:(t-e)/(i-e)*100}percentToValue(t){const e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100),s=this.getNumberAttr("step",1),r=e+t/100*(i-e);return this.snapToStep(r,e,i,s)}snapToStep(t,e,i,s){const r=Math.round(t/s)*s;return Math.min(i,Math.max(e,r))}clamp(t,e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100),s=this.getNumberAttr("step",1)){return this.snapToStep(Math.min(i,Math.max(e,t)),e,i,s)}getNumberAttr(t,e){const i=this.getAttribute(t);if(null===i||""===i)return e;const s=Number(i);return Number.isFinite(s)?s:e}normalizeRangeInput(t){if("string"==typeof t)return this.parseRangeAttr(t);if(!Array.isArray(t)||t.length<2)return null;const e=Number(t[0]),i=Number(t[1]);return Number.isFinite(e)&&Number.isFinite(i)?[e,i]:null}parseRangeAttr(t){if(!t)return null;if(t.startsWith("[")){try{const e=JSON.parse(t);if(Array.isArray(e)&&2===e.length){const t=Number(e[0]),i=Number(e[1]);if(Number.isFinite(t)&&Number.isFinite(i))return[t,i]}}catch{return null}return null}const e=t.split(",").map(t=>Number(t.trim()));return 2!==e.length||e.some(t=>!Number.isFinite(t))?null:[e[0],e[1]]}parseMarks(){const t=this.getAttribute("marks");if(!t)return[];if(t.startsWith("[")){try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(t=>Number(t)).filter(t=>Number.isFinite(t))}catch{return[]}return[]}return t.split(",").map(t=>Number(t.trim())).filter(t=>Number.isFinite(t))}parseMarkLabels(){const t=this.getAttribute("mark-labels");if(!t)return{};try{const e=JSON.parse(t),i={};return Object.entries(e).forEach(([t,e])=>{i[Number(t)]=e}),i}catch{return{}}}isInteractive(){return!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")}getTrackPercent(t,e){if(!this.trackEl)return 0;const i=this.trackEl.getBoundingClientRect();if(this.hasAttribute("vertical")){const t=Math.max(i.top,Math.min(i.bottom,e));return(i.bottom-t)/i.height*100}return(Math.max(i.left,Math.min(i.right,t))-i.left)/i.width*100}handleThumbPointerDown(t,e){this.isInteractive()&&(t.preventDefault(),this.isDragging=!0,this.activeThumb=e,this.setThumbActive(e,!0),document.addEventListener("pointermove",this.boundPointerMove),document.addEventListener("pointerup",this.boundPointerUp))}handleTrackClick(t){if(!this.isInteractive()||!this.trackEl)return;if(t.target.closest(`.${e}__thumb`))return;const i=this.getTrackPercent(t.clientX,t.clientY),s=this.percentToValue(i);this.commitValueAtPosition(s)}handlePointerUp(){this.isDragging&&(this.activeThumb&&this.setThumbActive(this.activeThumb,!1),this.isDragging=!1,this.activeThumb=null,document.removeEventListener("pointermove",this.boundPointerMove),document.removeEventListener("pointerup",this.boundPointerUp),this.syncThumbTooltips(),this.hasAttribute("range")?this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`):this.setAttribute("value",String(this.currentValue)),this.syncA11y())}setThumbActive(t,i){if(this.hasAttribute("range")){const s=this.thumbEls["min"===t?0:1];return void s?.classList.toggle(`${e}__thumb--active`,i)}this.thumbEls[0]?.classList.toggle(`${e}__thumb--active`,i)}applyDragValue(t){const e=this.clamp(t);if(this.hasAttribute("range")){const[t,i]=this.currentRange;if("min"===this.activeThumb)this.currentRange=[Math.min(e,i),i];else if("max"===this.activeThumb)this.currentRange=[t,Math.max(e,t)];else{Math.abs(e-t)<=Math.abs(e-i)?(this.currentRange=[Math.min(e,i),i],this.activeThumb="min"):(this.currentRange=[t,Math.max(e,t)],this.activeThumb="max")}this.syncVisuals(),this.dispatchRangeChange()}else this.currentValue=e,this.syncVisuals(),this.syncA11y(),this.dispatchValueChange()}commitValueAtPosition(t){const e=this.clamp(t);if(this.hasAttribute("range")){const[t,i]=this.currentRange,s=Math.abs(e-t),r=Math.abs(e-i);this.currentRange=s<=r?[Math.min(e,i),i]:[t,Math.max(e,t)],this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`),this.syncVisuals(),this.dispatchRangeChange()}else this.currentValue=e,this.setAttribute("value",String(this.currentValue)),this.syncVisuals(),this.syncA11y(),this.dispatchValueChange()}handleKeyDown(t,e="single"){if(!this.isInteractive())return;const i=this.getNumberAttr("step",1),s=this.getNumberAttr("min",0),r=this.getNumberAttr("max",100);let a;if(this.hasAttribute("range")&&"single"!==e){const n="min"===e?this.currentRange[0]:this.currentRange[1];switch(t.key){case"ArrowLeft":case"ArrowDown":a=this.clamp(n-i,s,r);break;case"ArrowRight":case"ArrowUp":a=this.clamp(n+i,s,r);break;case"Home":a=s;break;case"End":a=r;break;default:return}const h=[...this.currentRange];if("min"===e?h[0]=a:h[1]=a,h[0]>h[1])return;return t.preventDefault(),this.currentRange=h,void this.afterKeyboard()}if(!this.hasAttribute("range")){switch(t.key){case"ArrowLeft":case"ArrowDown":a=this.clamp(this.currentValue-i,s,r);break;case"ArrowRight":case"ArrowUp":a=this.clamp(this.currentValue+i,s,r);break;case"Home":a=s;break;case"End":a=r;break;default:return}t.preventDefault(),this.currentValue=a,this.afterKeyboard()}}afterKeyboard(){this.hasAttribute("range")?(this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`),this.syncVisuals(),this.dispatchRangeChange()):(this.setAttribute("value",String(this.currentValue)),this.syncVisuals(),this.syncA11y(),this.dispatchValueChange())}dispatchValueChange(){this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{value:this.currentValue}}))}dispatchRangeChange(){this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{range:[...this.currentRange]}}))}}customElements.get("db-range-slider")||customElements.define("db-range-slider",DbRangeSlider);export{DbRangeSlider};

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";import{rafThrottle as t}from"../core/dom.js";const s=["s","m","l"],i=["default","minimal","card","inline","large"],r=["stars","number","both","reviews","detailed"],a=["star","number","percentage","text"],n=["primary","secondary","success","warning","error","custom"];class DbRating extends HTMLElement{constructor(){super(...arguments),this.hoverValue=null,this.starsEl=null,this.handlePointerMove=t(e=>{if(!this.isInteractive()||!this.getBooleanAttr("hover-effect",!0))return;const t=e.target?.closest(".designbase-wc-rating__star");if(!t||!this.contains(t))return;const s=Number(t.dataset.index);if(!Number.isFinite(s))return;const i=this.getNumberAttr("max-value",5),r=this.getPointerValue(s,e.clientX,t,i);this.hoverValue!==r&&(this.hoverValue=r,this.classList.toggle("designbase-wc-rating--hovering",!0),this.refreshStars(),this.dispatchEvent(new CustomEvent("db-hover",{detail:{value:r},bubbles:!0,composed:!0})))}),this.handlePointerLeave=()=>{null!==this.hoverValue&&(this.hoverValue=null,this.classList.remove("designbase-wc-rating--hovering"),this.refreshStars())},this.handleClick=e=>{if(!this.isInteractive())return;const t=e.target?.closest(".designbase-wc-rating__star");if(!t||!this.contains(t))return;e.preventDefault();const s=Number(t.dataset.index);if(!Number.isFinite(s))return;const i=this.getNumberAttr("max-value",5),r=this.getPointerValue(s,e.clientX,t,i);this.hoverValue=null,this.classList.remove("designbase-wc-rating--hovering"),this.setAttribute("value",String(r)),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:r},bubbles:!0,composed:!0})),this.render()}}static get observedAttributes(){return["value","max-value","size","variant","type","display","review-count","rating-text","review-text","allow-half","readonly","disabled","clickable","color","custom-color","animated","hover-effect"]}connectedCallback(){this.addEventListener("mousemove",this.handlePointerMove),this.addEventListener("mouseleave",this.handlePointerLeave),this.addEventListener("click",this.handleClick),this.render()}disconnectedCallback(){this.removeEventListener("mousemove",this.handlePointerMove),this.removeEventListener("mouseleave",this.handlePointerLeave),this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.isConnected&&this.render()}getNumberAttr(e,t){const s=this.getAttribute(e);if(null===s||""===s)return t;const i=Number(s);return Number.isFinite(i)?i:t}getBooleanAttr(e,t=!1){if(!this.hasAttribute(e))return t;const s=this.getAttribute(e);return""===s||"true"===s}getOption(e,t,s){const i=this.getAttribute(e);return i&&t.includes(i)?i:s}normalizeSize(e){return"xs"===e||"s"===e?"s":"xl"===e||"l"===e?"l":"m"===e?"m":this.getOption("size",s,"m")}getStarIconSize(){const e=this.normalizeSize(this.getAttribute("size"));return"s"===e?16:"l"===e?24:20}supportsHalfSteps(){return this.getBooleanAttr("allow-half")||this.getBooleanAttr("clickable")}isInteractive(){return this.getBooleanAttr("clickable")&&!this.getBooleanAttr("readonly")&&!this.getBooleanAttr("disabled")}getStarFill(e,t,s){const i=e+1;return t>=i?1:s&&t>=i-.5?.5:0}getPointerValue(e,t,s,i){const r=s.getBoundingClientRect();let a;return a=this.supportsHalfSteps()&&t-r.left<r.width/2?e+.5:e+1,a/5*i}formatRating(e,t,s,i){const r=e/t*5;return"percentage"===s?`${Math.round(e/t*100)}%`:"number"===s?i?r.toFixed(1):String(Math.round(r)):"text"===s?r>=4.5?"매우 좋음":r>=3?"보통":"낮음":`${r.toFixed(1)}/5`}updateStarElement(t,s,i,r,a){t.className=["designbase-wc-rating__star",0===s&&"designbase-wc-rating__star--empty",s>0&&a&&"designbase-wc-rating__star--hover-preview",r&&"designbase-wc-rating__star--clickable",this.getBooleanAttr("animated")&&"designbase-wc-rating__star--animated"].filter(Boolean).join(" "),t.dataset.index=String(i);const n=1===s?"star-filled":.5===s?"star-half":"star",l=this.getStarIconSize(),o=t.querySelector("svg");o?.getAttribute("data-designbase-icon")===n&&o.getAttribute("width")===String(l)||t.replaceChildren(e(n,l))}refreshStars(){if(!this.starsEl)return;const e=this.getNumberAttr("value",0),t=this.getNumberAttr("max-value",5),s=this.getBooleanAttr("allow-half",!1),i=this.getBooleanAttr("hover-effect",!0),r=null!==this.hoverValue&&i,a=(r?this.hoverValue:e)/t*5,n=this.isInteractive(),l=s||r,o=Array.from(this.starsEl.querySelectorAll(":scope > .designbase-wc-rating__star"));for(let e=0;e<5;e+=1){const t=this.getStarFill(e,a,l),s=r&&t>0,i=o[e]??document.createElement("span");i.setAttribute("aria-hidden","true"),this.updateStarElement(i,t,e,n,s),o[e]||this.starsEl.append(i)}for(let e=o.length-1;e>=5;e-=1)o[e]?.remove()}render(){const e=this.getNumberAttr("value",0),t=this.getNumberAttr("max-value",5),s=this.normalizeSize(this.getAttribute("size")),l=this.getOption("variant",i,"default"),o=this.getOption("type",a,"star"),c=this.getOption("display",r,"stars"),h=this.getOption("color",n,"primary"),g=this.getNumberAttr("review-count",0),u=this.getBooleanAttr("allow-half",!1),d=this.getBooleanAttr("readonly",!1),m=this.getBooleanAttr("disabled",!1),b=this.getBooleanAttr("clickable",!1),v=this.getBooleanAttr("hover-effect",!0),p=null!==this.hoverValue&&v;this.className=["designbase-wc-rating",`designbase-wc-rating--size-${s}`,`designbase-wc-rating--variant-${l}`,`designbase-wc-rating--type-${o}`,`designbase-wc-rating--display-${c}`,`designbase-wc-rating--color-${h}`,d&&"designbase-wc-rating--readonly",m&&"designbase-wc-rating--disabled",b&&"designbase-wc-rating--clickable",this.getBooleanAttr("animated")&&"designbase-wc-rating--animated",p&&"designbase-wc-rating--hovering"].filter(Boolean).join(" ");const f=this.getAttribute("custom-color");"custom"===h&&f?this.style.setProperty("--rating-color",f):this.style.removeProperty("--rating-color");let w=this.querySelector(':scope > [role="img"]');w||(w=document.createElement("div"),this.replaceChildren(w)),w.setAttribute("role","img"),w.setAttribute("aria-label",`rating ${this.formatRating(e,t,o,u)}`);if("stars"===c||"both"===c||"detailed"===c){const e=w.querySelectorAll(":scope > .designbase-wc-rating__stars");e.forEach((e,t)=>{t>0&&e.remove()});const t=e[0];t?this.starsEl=t:(this.starsEl=document.createElement("div"),this.starsEl.className="designbase-wc-rating__stars",w.prepend(this.starsEl)),this.refreshStars()}else this.starsEl&&(this.starsEl.remove(),this.starsEl=null);const A=this.getAttribute("rating-text")||this.formatRating(e,t,o,u);let E=w.querySelector(".designbase-wc-rating__number-container");if("number"===c||"both"===c){if(!E){E=document.createElement("div"),E.className="designbase-wc-rating__number-container";const e=document.createElement("span");e.className="designbase-wc-rating__number",E.append(e),w.append(E)}const e=E.querySelector(".designbase-wc-rating__number");e&&(e.textContent=A)}else E?.remove();let _=w.querySelector(".designbase-wc-rating__review-count");if("reviews"===c||"detailed"===c){const e=this.getAttribute("review-text")||(g>0?`${g.toLocaleString()} 리뷰`:"");e?(_||(_=document.createElement("span"),_.className="designbase-wc-rating__review-count",w.append(_)),_.textContent=e):_?.remove()}else _?.remove()}}customElements.get("db-rating")||customElements.define("db-rating",DbRating);export{DbRating};
+import{createDbIcon as e}from"./db-icons.js";import{rafThrottle as t}from"../core/dom.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{RATING_SIZES as i,RATING_VARIANTS as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a=i,n=r,o=["stars","number","both","reviews","detailed"],l=["star","number","percentage","text"],c=["primary","secondary","success","warning","error","custom"];class DbRating extends HTMLElement{constructor(){super(...arguments),this.hoverValue=null,this.starsEl=null,this.handlePointerMove=t(e=>{if(!this.isInteractive()||!this.getBooleanAttr("hover-effect",!0))return;const t=e.target?.closest(".designbase-wc-rating__star");if(!t||!this.contains(t))return;const s=Number(t.dataset.index);if(!Number.isFinite(s))return;const i=this.getNumberAttr("max-value",5),r=this.getPointerValue(s,e.clientX,t,i);this.hoverValue!==r&&(this.hoverValue=r,this.classList.toggle("designbase-wc-rating--hovering",!0),this.refreshStars(),this.dispatchEvent(new CustomEvent("db-hover",{detail:{value:r},bubbles:!0,composed:!0})))}),this.handlePointerLeave=()=>{null!==this.hoverValue&&(this.hoverValue=null,this.classList.remove("designbase-wc-rating--hovering"),this.refreshStars())},this.handleClick=e=>{if(!this.isInteractive())return;const t=e.target?.closest(".designbase-wc-rating__star");if(!t||!this.contains(t))return;e.preventDefault();const s=Number(t.dataset.index);if(!Number.isFinite(s))return;const i=this.getNumberAttr("max-value",5),r=this.getPointerValue(s,e.clientX,t,i);this.hoverValue=null,this.classList.remove("designbase-wc-rating--hovering"),this.setAttribute("value",String(r)),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:r},bubbles:!0,composed:!0})),this.render()}}static get observedAttributes(){return["value","max-value","size","variant","type","display","review-count","rating-text","review-text","allow-half","readonly","disabled","clickable","color","custom-color","animated","hover-effect"]}connectedCallback(){this.addEventListener("mousemove",this.handlePointerMove),this.addEventListener("mouseleave",this.handlePointerLeave),this.addEventListener("click",this.handleClick),this.render()}disconnectedCallback(){this.removeEventListener("mousemove",this.handlePointerMove),this.removeEventListener("mouseleave",this.handlePointerLeave),this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.isConnected&&this.render()}getNumberAttr(e,t){const s=this.getAttribute(e);if(null===s||""===s)return t;const i=Number(s);return Number.isFinite(i)?i:t}getBooleanAttr(e,t=!1){if(!this.hasAttribute(e))return t;const s=this.getAttribute(e);return""===s||"true"===s}getOption(e,t,s){const i=this.getAttribute(e);return i&&t.includes(i)?i:s}normalizeSize(e){return"xs"===e||"s"===e?"s":"xl"===e||"l"===e?"l":"m"===e?"m":s(e,a,"m")}getStarIconSize(){const e=this.normalizeSize(this.getAttribute("size"));return"s"===e?16:"l"===e?24:20}supportsHalfSteps(){return this.getBooleanAttr("allow-half")||this.getBooleanAttr("clickable")}isInteractive(){return this.getBooleanAttr("clickable")&&!this.getBooleanAttr("readonly")&&!this.getBooleanAttr("disabled")}getStarFill(e,t,s){const i=e+1;return t>=i?1:s&&t>=i-.5?.5:0}getPointerValue(e,t,s,i){const r=s.getBoundingClientRect();let a;return a=this.supportsHalfSteps()&&t-r.left<r.width/2?e+.5:e+1,a/5*i}formatRating(e,t,s,i){const r=e/t*5;return"percentage"===s?`${Math.round(e/t*100)}%`:"number"===s?i?r.toFixed(1):String(Math.round(r)):"text"===s?r>=4.5?"매우 좋음":r>=3?"보통":"낮음":`${r.toFixed(1)}/5`}updateStarElement(t,s,i,r,a){t.className=["designbase-wc-rating__star",0===s&&"designbase-wc-rating__star--empty",s>0&&a&&"designbase-wc-rating__star--hover-preview",r&&"designbase-wc-rating__star--clickable",this.getBooleanAttr("animated")&&"designbase-wc-rating__star--animated"].filter(Boolean).join(" "),t.dataset.index=String(i);const n=1===s?"star-filled":.5===s?"star-half":"star",o=this.getStarIconSize(),l=t.querySelector("svg");l?.getAttribute("data-designbase-icon")===n&&l.getAttribute("width")===String(o)||t.replaceChildren(e(n,o))}refreshStars(){if(!this.starsEl)return;const e=this.getNumberAttr("value",0),t=this.getNumberAttr("max-value",5),s=this.getBooleanAttr("allow-half",!1),i=this.getBooleanAttr("hover-effect",!0),r=null!==this.hoverValue&&i,a=(r?this.hoverValue:e)/t*5,n=this.isInteractive(),o=s||r,l=Array.from(this.starsEl.querySelectorAll(":scope > .designbase-wc-rating__star"));for(let e=0;e<5;e+=1){const t=this.getStarFill(e,a,o),s=r&&t>0,i=l[e]??document.createElement("span");i.setAttribute("aria-hidden","true"),this.updateStarElement(i,t,e,n,s),l[e]||this.starsEl.append(i)}for(let e=l.length-1;e>=5;e-=1)l[e]?.remove()}render(){const e=this.getNumberAttr("value",0),t=this.getNumberAttr("max-value",5),s=this.normalizeSize(this.getAttribute("size")),i=this.getOption("variant",n,"default"),r=this.getOption("type",l,"star"),a=this.getOption("display",o,"stars"),h=this.getOption("color",c,"primary"),g=this.getNumberAttr("review-count",0),d=this.getBooleanAttr("allow-half",!1),u=this.getBooleanAttr("readonly",!1),m=this.getBooleanAttr("disabled",!1),b=this.getBooleanAttr("clickable",!1),v=this.getBooleanAttr("hover-effect",!0),p=null!==this.hoverValue&&v;this.className=["designbase-wc-rating",`designbase-wc-rating--size-${s}`,`designbase-wc-rating--variant-${i}`,`designbase-wc-rating--type-${r}`,`designbase-wc-rating--display-${a}`,`designbase-wc-rating--color-${h}`,u&&"designbase-wc-rating--readonly",m&&"designbase-wc-rating--disabled",b&&"designbase-wc-rating--clickable",this.getBooleanAttr("animated")&&"designbase-wc-rating--animated",p&&"designbase-wc-rating--hovering"].filter(Boolean).join(" ");const f=this.getAttribute("custom-color");"custom"===h&&f?this.style.setProperty("--rating-color",f):this.style.removeProperty("--rating-color");let w=this.querySelector(':scope > [role="img"]');w||(w=document.createElement("div"),this.replaceChildren(w)),w.setAttribute("role","img"),w.setAttribute("aria-label",`rating ${this.formatRating(e,t,r,d)}`);if("stars"===a||"both"===a||"detailed"===a){const e=w.querySelectorAll(":scope > .designbase-wc-rating__stars");e.forEach((e,t)=>{t>0&&e.remove()});const t=e[0];t?this.starsEl=t:(this.starsEl=document.createElement("div"),this.starsEl.className="designbase-wc-rating__stars",w.prepend(this.starsEl)),this.refreshStars()}else this.starsEl&&(this.starsEl.remove(),this.starsEl=null);const A=this.getAttribute("rating-text")||this.formatRating(e,t,r,d);let _=w.querySelector(".designbase-wc-rating__number-container");if("number"===a||"both"===a){if(!_){_=document.createElement("div"),_.className="designbase-wc-rating__number-container";const e=document.createElement("span");e.className="designbase-wc-rating__number",_.append(e),w.append(_)}const e=_.querySelector(".designbase-wc-rating__number");e&&(e.textContent=A)}else _?.remove();let E=w.querySelector(".designbase-wc-rating__review-count");if("reviews"===a||"detailed"===a){const e=this.getAttribute("review-text")||(g>0?`${g.toLocaleString()} 리뷰`:"");e?(E||(E=document.createElement("span"),E.className="designbase-wc-rating__review-count",w.append(E)),E.textContent=e):E?.remove()}else E?.remove()}}customElements.get("db-rating")||customElements.define("db-rating",DbRating);export{DbRating};

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["default","bordered","filled","minimal"],r=["s","m","l"],s=["vertical","horizontal"];class DbReorder extends HTMLElement{constructor(){super(...arguments),this.draggedIndex=-1,this.dropIndex=-1,this.handleContainerDragOver=e=>{if(this.draggedIndex<0)return;const t=e.target;if(t instanceof Element&&t.closest(".designbase-wc-reorder__item"))return;e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move");const r=this.getDropIndexFromContainerPointer(e);this.setDropIndex(this.isValidDropIndex(r)?r:-1)},this.handleContainerDrop=e=>{if(this.draggedIndex<0)return;const t=e.target;if(t instanceof Element&&t.closest(".designbase-wc-reorder__item"))return;e.preventDefault();const r=this.dropIndex>=0?this.dropIndex:this.getDropIndexFromContainerPointer(e);this.commitDrop(r)}}static get observedAttributes(){return["items","variant","size","orientation","selectable","multi-select","show-drag-handle","show-drag-icon","full-width","disabled"]}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.addEventListener("dragover",this.handleContainerDragOver),this.addEventListener("drop",this.handleContainerDrop),this.render()}disconnectedCallback(){this.removeEventListener("dragover",this.handleContainerDragOver),this.removeEventListener("drop",this.handleContainerDrop)}attributeChangedCallback(){this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const r=this.getAttribute(e);return""===r||"true"===r}getOption(e,t,r){const s=this.getAttribute(e);return s&&t.includes(s)?s:r}emitReorder(e){this.items=e,this.dispatchEvent(new CustomEvent("db-reorder",{detail:{items:e},bubbles:!0,composed:!0}))}getItemElements(){return Array.from(this.children).filter(e=>e instanceof HTMLElement&&e.classList.contains("designbase-wc-reorder__item"))}updateDragClasses(){const e=this.getOption("orientation",s,"vertical"),t=this.draggedIndex>=0,r=this.items.length,i=t&&this.isValidDropIndex(this.dropIndex);this.classList.toggle("designbase-wc-reorder--dragging",t),this.getItemElements().forEach((s,d)=>{const n=t&&this.draggedIndex===d,o=i&&this.dropIndex===d,a=i&&this.dropIndex===r&&d===r-1,g=o||a;s.classList.toggle("designbase-wc-reorder__item--dragged",n),s.classList.toggle("designbase-wc-reorder__item--drag-over",g),s.classList.toggle("designbase-wc-reorder__item--drag-down",o&&"vertical"===e),s.classList.toggle("designbase-wc-reorder__item--drag-up",a&&"vertical"===e),s.classList.toggle("designbase-wc-reorder__item--drag-right",o&&"horizontal"===e),s.classList.toggle("designbase-wc-reorder__item--drag-left",a&&"horizontal"===e)})}getAdjustedDropIndex(e=this.dropIndex){return this.draggedIndex<0||e<0?-1:e>this.draggedIndex?e-1:e}isValidDropIndex(e=this.dropIndex){const t=this.getAdjustedDropIndex(e);return t>=0&&t!==this.draggedIndex}getDropIndexFromPointer(e,t,r,s){const i=t.getBoundingClientRect();return("horizontal"===s?e.clientX-i.left:e.clientY-i.top)<("horizontal"===s?i.width/2:i.height/2)?r:r+1}getDropIndexFromContainerPointer(e){const t=this.getOption("orientation",s,"vertical"),r=this.getItemElements();if(0===r.length)return-1;const i="horizontal"===t?e.clientX:e.clientY;for(let e=0;e<r.length;e+=1){const s=r[e].getBoundingClientRect();if(i<("horizontal"===t?s.left:s.top)+("horizontal"===t?s.width:s.height)/2)return e}return r.length}commitDrop(e){const t=this.getAdjustedDropIndex(e);if(this.draggedIndex<0||t<0||t===this.draggedIndex)return void this.resetDragState();const r=[...this.items],[s]=r.splice(this.draggedIndex,1);r.splice(t,0,s),this.draggedIndex=-1,this.dropIndex=-1,this.emitReorder(r)}setDropIndex(e){this.dropIndex!==e&&(this.dropIndex=e,this.updateDragClasses())}resetDragState(){this.draggedIndex=-1,this.dropIndex=-1,this.updateDragClasses()}render(){const i=this.getOption("variant",t,"default"),d=this.getOption("size",r,"m"),n=this.getOption("orientation",s,"vertical"),o=this.getBool("disabled"),a=this.getBool("selectable"),g=this.getBool("multi-select"),l=this.getBool("show-drag-handle",!0),c=this.getBool("show-drag-icon",!0);this.className=["designbase-wc-reorder",`designbase-wc-reorder--${i}`,`designbase-wc-reorder--${d}`,`designbase-wc-reorder--${n}`,this.getBool("full-width")&&"designbase-wc-reorder--full-width",o&&"designbase-wc-reorder--disabled",a&&"designbase-wc-reorder--selectable"].filter(Boolean).join(" ");const h=document.createDocumentFragment();this.items.forEach((t,r)=>{const s=document.createElement("div"),i=o||!!t.disabled,m=this.draggedIndex===r,p=this.draggedIndex>=0&&this.isValidDropIndex(this.dropIndex),b=p&&this.dropIndex===r,u=p&&this.dropIndex===this.items.length&&r===this.items.length-1,x=b||u;if(s.className=["designbase-wc-reorder__item",t.selected&&"designbase-wc-reorder__item--selected",m&&"designbase-wc-reorder__item--dragged",i&&"designbase-wc-reorder__item--disabled",x&&"designbase-wc-reorder__item--drag-over",b&&"vertical"===n&&"designbase-wc-reorder__item--drag-down",u&&"vertical"===n&&"designbase-wc-reorder__item--drag-up",b&&"horizontal"===n&&"designbase-wc-reorder__item--drag-right",u&&"horizontal"===n&&"designbase-wc-reorder__item--drag-left"].filter(Boolean).join(" "),s.draggable=!i,s.addEventListener("dragstart",e=>{i||(this.draggedIndex=r,this.dropIndex=-1,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",t.id)),this.updateDragClasses())}),s.addEventListener("dragover",e=>{if(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this.draggedIndex<0)return void this.setDropIndex(-1);const t=this.getDropIndexFromPointer(e,s,r,n);this.setDropIndex(this.isValidDropIndex(t)?t:-1)}),s.addEventListener("dragleave",e=>{const t=s.getBoundingClientRect(),r=e.clientX-t.left,i=e.clientY-t.top;(r<0||r>t.width||i<0||i>t.height)&&this.setDropIndex(-1)}),s.addEventListener("drop",e=>{e.preventDefault();const t=this.dropIndex>=0?this.dropIndex:this.getDropIndexFromPointer(e,s,r,n);this.commitDrop(t)}),s.addEventListener("dragend",()=>{this.resetDragState()}),l&&!i){const t=document.createElement("div");if(t.className="designbase-wc-reorder__drag-handle",t.setAttribute("aria-hidden","true"),c){const r="horizontal"===n?"grip-horizontal":"grip-vertical",s="s"===d?14:"l"===d?18:16;t.append(e(r,s))}else t.textContent="≡";s.append(t)}if(a){const e=document.createElement("div");e.className="designbase-wc-reorder__checkbox";const r=document.createElement("input");r.type=g?"checkbox":"radio",r.checked=!!t.selected,r.disabled=i,r.className="designbase-wc-reorder__checkbox-input",r.addEventListener("change",()=>{const e=this.items.map(e=>e.id!==t.id?g?e:{...e,selected:!1}:{...e,selected:!g||!e.selected});this.items=e,this.dispatchEvent(new CustomEvent("db-select",{detail:{items:e.filter(e=>e.selected)},bubbles:!0,composed:!0})),this.render()}),e.append(r),s.append(e)}const I=document.createElement("div");I.className="designbase-wc-reorder__content",I.textContent=t.content,s.append(I),h.append(s)}),this.replaceChildren(h)}}customElements.get("db-reorder")||customElements.define("db-reorder",DbReorder);export{DbReorder};
+import{createDbIcon as e}from"./db-icons.js";import{coerceToContract as t}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{REORDER_VARIANTS as r,REORDER_SIZES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const i=r,d=s,n=["vertical","horizontal"];class DbReorder extends HTMLElement{constructor(){super(...arguments),this.draggedIndex=-1,this.dropIndex=-1,this.handleContainerDragOver=e=>{if(this.draggedIndex<0)return;const t=e.target;if(t instanceof Element&&t.closest(".designbase-wc-reorder__item"))return;e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move");const r=this.getDropIndexFromContainerPointer(e);this.setDropIndex(this.isValidDropIndex(r)?r:-1)},this.handleContainerDrop=e=>{if(this.draggedIndex<0)return;const t=e.target;if(t instanceof Element&&t.closest(".designbase-wc-reorder__item"))return;e.preventDefault();const r=this.dropIndex>=0?this.dropIndex:this.getDropIndexFromContainerPointer(e);this.commitDrop(r)}}static get observedAttributes(){return["items","variant","size","orientation","selectable","multi-select","show-drag-handle","show-drag-icon","full-width","disabled"]}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.addEventListener("dragover",this.handleContainerDragOver),this.addEventListener("drop",this.handleContainerDrop),this.render()}disconnectedCallback(){this.removeEventListener("dragover",this.handleContainerDragOver),this.removeEventListener("drop",this.handleContainerDrop)}attributeChangedCallback(){this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const r=this.getAttribute(e);return""===r||"true"===r}getOption(e,r,s){return t(this.getAttribute(e),r,s)}emitReorder(e){this.items=e,this.dispatchEvent(new CustomEvent("db-reorder",{detail:{items:e},bubbles:!0,composed:!0}))}getItemElements(){return Array.from(this.children).filter(e=>e instanceof HTMLElement&&e.classList.contains("designbase-wc-reorder__item"))}updateDragClasses(){const e=this.getOption("orientation",n,"vertical"),t=this.draggedIndex>=0,r=this.items.length,s=t&&this.isValidDropIndex(this.dropIndex);this.classList.toggle("designbase-wc-reorder--dragging",t),this.getItemElements().forEach((i,d)=>{const n=t&&this.draggedIndex===d,o=s&&this.dropIndex===d,a=s&&this.dropIndex===r&&d===r-1,g=o||a;i.classList.toggle("designbase-wc-reorder__item--dragged",n),i.classList.toggle("designbase-wc-reorder__item--drag-over",g),i.classList.toggle("designbase-wc-reorder__item--drag-down",o&&"vertical"===e),i.classList.toggle("designbase-wc-reorder__item--drag-up",a&&"vertical"===e),i.classList.toggle("designbase-wc-reorder__item--drag-right",o&&"horizontal"===e),i.classList.toggle("designbase-wc-reorder__item--drag-left",a&&"horizontal"===e)})}getAdjustedDropIndex(e=this.dropIndex){return this.draggedIndex<0||e<0?-1:e>this.draggedIndex?e-1:e}isValidDropIndex(e=this.dropIndex){const t=this.getAdjustedDropIndex(e);return t>=0&&t!==this.draggedIndex}getDropIndexFromPointer(e,t,r,s){const i=t.getBoundingClientRect();return("horizontal"===s?e.clientX-i.left:e.clientY-i.top)<("horizontal"===s?i.width/2:i.height/2)?r:r+1}getDropIndexFromContainerPointer(e){const t=this.getOption("orientation",n,"vertical"),r=this.getItemElements();if(0===r.length)return-1;const s="horizontal"===t?e.clientX:e.clientY;for(let e=0;e<r.length;e+=1){const i=r[e].getBoundingClientRect();if(s<("horizontal"===t?i.left:i.top)+("horizontal"===t?i.width:i.height)/2)return e}return r.length}commitDrop(e){const t=this.getAdjustedDropIndex(e);if(this.draggedIndex<0||t<0||t===this.draggedIndex)return void this.resetDragState();const r=[...this.items],[s]=r.splice(this.draggedIndex,1);r.splice(t,0,s),this.draggedIndex=-1,this.dropIndex=-1,this.emitReorder(r)}setDropIndex(e){this.dropIndex!==e&&(this.dropIndex=e,this.updateDragClasses())}resetDragState(){this.draggedIndex=-1,this.dropIndex=-1,this.updateDragClasses()}render(){const t=this.getOption("variant",i,"default"),r=this.getOption("size",d,"m"),s=this.getOption("orientation",n,"vertical"),o=this.getBool("disabled"),a=this.getBool("selectable"),g=this.getBool("multi-select"),c=this.getBool("show-drag-handle",!0),l=this.getBool("show-drag-icon",!0);this.className=["designbase-wc-reorder",`designbase-wc-reorder--${t}`,`designbase-wc-reorder--${r}`,`designbase-wc-reorder--${s}`,this.getBool("full-width")&&"designbase-wc-reorder--full-width",o&&"designbase-wc-reorder--disabled",a&&"designbase-wc-reorder--selectable"].filter(Boolean).join(" ");const h=document.createDocumentFragment();this.items.forEach((t,i)=>{const d=document.createElement("div"),n=o||!!t.disabled,m=this.draggedIndex===i,p=this.draggedIndex>=0&&this.isValidDropIndex(this.dropIndex),u=p&&this.dropIndex===i,b=p&&this.dropIndex===this.items.length&&i===this.items.length-1,x=u||b;if(d.className=["designbase-wc-reorder__item",t.selected&&"designbase-wc-reorder__item--selected",m&&"designbase-wc-reorder__item--dragged",n&&"designbase-wc-reorder__item--disabled",x&&"designbase-wc-reorder__item--drag-over",u&&"vertical"===s&&"designbase-wc-reorder__item--drag-down",b&&"vertical"===s&&"designbase-wc-reorder__item--drag-up",u&&"horizontal"===s&&"designbase-wc-reorder__item--drag-right",b&&"horizontal"===s&&"designbase-wc-reorder__item--drag-left"].filter(Boolean).join(" "),d.draggable=!n,d.addEventListener("dragstart",e=>{n||(this.draggedIndex=i,this.dropIndex=-1,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",t.id)),this.updateDragClasses())}),d.addEventListener("dragover",e=>{if(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this.draggedIndex<0)return void this.setDropIndex(-1);const t=this.getDropIndexFromPointer(e,d,i,s);this.setDropIndex(this.isValidDropIndex(t)?t:-1)}),d.addEventListener("dragleave",e=>{const t=d.getBoundingClientRect(),r=e.clientX-t.left,s=e.clientY-t.top;(r<0||r>t.width||s<0||s>t.height)&&this.setDropIndex(-1)}),d.addEventListener("drop",e=>{e.preventDefault();const t=this.dropIndex>=0?this.dropIndex:this.getDropIndexFromPointer(e,d,i,s);this.commitDrop(t)}),d.addEventListener("dragend",()=>{this.resetDragState()}),c&&!n){const t=document.createElement("div");if(t.className="designbase-wc-reorder__drag-handle",t.setAttribute("aria-hidden","true"),l){const i="horizontal"===s?"grip-horizontal":"grip-vertical",d="s"===r?14:"l"===r?18:16;t.append(e(i,d))}else t.textContent="≡";d.append(t)}if(a){const e=document.createElement("div");e.className="designbase-wc-reorder__checkbox";const r=document.createElement("input");r.type=g?"checkbox":"radio",r.checked=!!t.selected,r.disabled=n,r.className="designbase-wc-reorder__checkbox-input",r.addEventListener("change",()=>{const e=this.items.map(e=>e.id!==t.id?g?e:{...e,selected:!1}:{...e,selected:!g||!e.selected});this.items=e,this.dispatchEvent(new CustomEvent("db-select",{detail:{items:e.filter(e=>e.selected)},bubbles:!0,composed:!0})),this.render()}),e.append(r),d.append(e)}const I=document.createElement("div");I.className="designbase-wc-reorder__content",I.textContent=t.content,d.append(I),h.append(d)}),this.replaceChildren(h)}}customElements.get("db-reorder")||customElements.define("db-reorder",DbReorder);export{DbReorder};

package/dist/esm/components/db-section-app-download.js

@@ -1 +1 @@
-import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="designbase-wc-section-app-download";class DbSectionAppDownload extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","description","stores","align","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}get stores(){return this.parseStores()}set stores(t){this.setAttribute("stores","string"==typeof t?t:JSON.stringify(t))}parseStores(){try{const t=JSON.parse(this.getAttribute("stores")||"[]");if(Array.isArray(t)&&t.length>0)return t}catch{}return[{store:"app-store",href:"#"},{store:"google-play",href:"#"}]}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${e}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${e}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${e}__description`,this.badgesEl=document.createElement("div"),this.badgesEl.className=`${e}__badges`,this.innerEl.append(this.titleEl,this.descriptionEl,this.badgesEl),this.append(this.innerEl)}updateUI(){const s=this.getAttribute("title")||"지금 바로 시작하세요",i=this.getAttribute("description")||"앱을 다운로드하고 바로 이용해 보세요.",r=this.getAttribute("align")||"center",l=this.parseStores();this.className=[e,`${e}--${r}`].join(" "),t(this,e),this.titleEl&&(this.titleEl.textContent=s),this.descriptionEl&&(this.descriptionEl.textContent=i,this.descriptionEl.hidden=!i),this.badgesEl&&(this.badgesEl.replaceChildren(),l.forEach(t=>{const e=document.createElement("db-app-badge");e.setAttribute("store",t.store),e.setAttribute("size",t.size||"m"),e.setAttribute("theme",t.theme||"dark"),t.href&&e.setAttribute("href",t.href),t.label&&e.setAttribute("label",t.label),t.storeName&&e.setAttribute("store-name",t.storeName),this.badgesEl.append(e)}))}}customElements.get("db-section-app-download")||customElements.define("db-section-app-download",DbSectionAppDownload);export{DbSectionAppDownload};
+import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{sanitizeHref as e}from"../core/safe-url.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as i,SECTION_APP_DOWNLOAD_SIZES as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const o="designbase-wc-section-app-download";class DbSectionAppDownload extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","description","stores","align","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}get stores(){return this.parseStores()}set stores(t){this.setAttribute("stores","string"==typeof t?t:JSON.stringify(t))}parseStores(){try{const t=JSON.parse(this.getAttribute("stores")||"[]");if(Array.isArray(t)&&t.length>0)return t}catch{}return[{store:"app-store",href:"#"},{store:"google-play",href:"#"}]}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${o}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${o}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${o}__description`,this.badgesEl=document.createElement("div"),this.badgesEl.className=`${o}__badges`,this.innerEl.append(this.titleEl,this.descriptionEl,this.badgesEl),this.append(this.innerEl)}updateUI(){const l=this.getAttribute("title")||"지금 바로 시작하세요",n=this.getAttribute("description")||"앱을 다운로드하고 바로 이용해 보세요.",a=s(this.getAttribute("align"),i,"center"),d=s(this.getAttribute("size"),r,"m"),c=this.parseStores();this.className=[o,`${o}--${a}`,`${o}--size-${d}`].join(" "),t(this,o),this.titleEl&&(this.titleEl.textContent=l),this.descriptionEl&&(this.descriptionEl.textContent=n,this.descriptionEl.hidden=!n),this.badgesEl&&(this.badgesEl.replaceChildren(),c.forEach(t=>{const s=document.createElement("db-app-badge");s.setAttribute("store",t.store),s.setAttribute("size",t.size||"m"),s.setAttribute("theme",t.theme||"dark");const i=e(t.href,"");i&&s.setAttribute("href",i),t.label&&s.setAttribute("label",t.label),t.storeName&&s.setAttribute("store-name",t.storeName),this.badgesEl.append(s)}))}}customElements.get("db-section-app-download")||customElements.define("db-section-app-download",DbSectionAppDownload);export{DbSectionAppDownload};

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

@@ -1 +1 @@
-import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const i="designbase-wc-section-contact",e="contact@designbase.co.kr";class DbSectionContact extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","description","action","align","accent","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseAction(){try{const t=this.getAttribute("action");if(t)return JSON.parse(t)}catch{}return{label:e,href:`mailto:${e}`}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${i}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${i}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${i}__description`,this.actionEl=document.createElement("db-button"),this.actionEl.className=`${i}__action`,this.actionEl.setAttribute("variant","primary"),this.actionEl.setAttribute("size","m"),this.actionEl.setAttribute("radius","pill"),this.actionEl.setAttribute("start-icon","mail"),this.actionEl.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:this.parseAction()},bubbles:!0,composed:!0}))}),this.innerEl.append(this.titleEl,this.descriptionEl,this.actionEl),this.append(this.innerEl)}updateUI(){const e=this.getAttribute("title")||"문의하기",s=this.getAttribute("description")||"궁금한 점이 있으시면 언제든지 연락주세요.",n=this.getAttribute("align")||"center",c=this.getAttribute("content-padding")||"l",a=!this.hasAttribute("accent")||"false"!==this.getAttribute("accent"),l=this.parseAction();this.className=[i,`${i}--${n}`,`${i}--padding-${c}`,a&&`${i}--accent`].filter(Boolean).join(" "),t(this,i),this.titleEl&&(this.titleEl.textContent=e),this.descriptionEl&&(this.descriptionEl.textContent=s,this.descriptionEl.hidden=!s),this.actionEl&&(this.actionEl.textContent=l.label,l.href?this.actionEl.setAttribute("href",l.href):this.actionEl.removeAttribute("href"))}}customElements.get("db-section-contact")||customElements.define("db-section-contact",DbSectionContact);export{DbSectionContact};
+import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{sanitizeHref as i}from"../core/safe-url.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as s,SECTION_CONTACT_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const c="designbase-wc-section-contact",o="contact@designbase.co.kr";class DbSectionContact extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","description","action","align","accent","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseAction(){try{const t=this.getAttribute("action");if(t)return JSON.parse(t)}catch{}return{label:o,href:`mailto:${o}`}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${c}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${c}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${c}__description`,this.actionEl=document.createElement("db-button"),this.actionEl.className=`${c}__action`,this.actionEl.setAttribute("variant","primary"),this.actionEl.setAttribute("size","m"),this.actionEl.setAttribute("radius","pill"),this.actionEl.setAttribute("start-icon","mail"),this.actionEl.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:this.parseAction()},bubbles:!0,composed:!0}))}),this.innerEl.append(this.titleEl,this.descriptionEl,this.actionEl),this.append(this.innerEl)}updateUI(){const o=this.getAttribute("title")||"문의하기",a=this.getAttribute("description")||"궁금한 점이 있으시면 언제든지 연락주세요.",l=e(this.getAttribute("align"),s,"center"),r=e(this.getAttribute("size"),n,"m"),h=this.getAttribute("content-padding")||"l",d=!this.hasAttribute("accent")||"false"!==this.getAttribute("accent"),u=this.parseAction();if(this.className=[c,`${c}--${l}`,`${c}--size-${r}`,`${c}--padding-${h}`,d&&`${c}--accent`].filter(Boolean).join(" "),t(this,c),this.titleEl&&(this.titleEl.textContent=o),this.descriptionEl&&(this.descriptionEl.textContent=a,this.descriptionEl.hidden=!a),this.actionEl){this.actionEl.textContent=u.label;const t=i(u.href,"");t?this.actionEl.setAttribute("href",t):this.actionEl.removeAttribute("href")}}}customElements.get("db-section-contact")||customElements.define("db-section-contact",DbSectionContact);export{DbSectionContact};