@designbasekorea/ui-wc 0.13.0 → 0.15.0

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

@@ -1 +1 @@
-import{inheritThemeScope as t}from"../core/theme-scope.js";import{createDbIcon as e}from"./db-icons.js";import{dbUid as s}from"../core/uid.js";import{createFocusTrap as i}from"../core/focus-trap.js";import{lockScroll as r,unlockScroll as n}from"../core/scroll-lock.js";import{labelFrom as a}from"../core/i18n.js";import{MODAL_SIZES as o}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";import{coerceToContract as l}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";const d=["default","tabs","segment"],h=["s","m","l"];class DbModal extends HTMLElement{constructor(){super(...arguments),this.titleId=s("db-modal-title"),this.isMounted=!1,this.internalTabId="",this.internalSegment="",this.exitTimerId=null,this.handleDocumentKeyDown=t=>{"Escape"===t.key&&this.open&&"false"!==this.getAttribute("close-on-escape")&&(t.preventDefault(),this.close())}}static get observedAttributes(){return["open","title","size","header-variant","tabs","segments","selected-tab-id","default-selected-tab-id","segment-value","default-segment-value","nav-size","segment-full-width","close-on-outside-click","close-on-escape","show-close-button","role","describedby","label-close"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open","true"):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-modal-host"),document.addEventListener("keydown",this.handleDocumentKeyDown),this.childObserver=new MutationObserver(()=>{this.open&&this.render()}),this.childObserver.observe(this,{childList:!0}),this.syncOpenState()}disconnectedCallback(){this.childObserver?.disconnect(),document.removeEventListener("keydown",this.handleDocumentKeyDown),this.exitTimerId&&clearTimeout(this.exitTimerId),this.teardown()}attributeChangedCallback(t,e,s){if(e!==s&&this.isConnected)if("open"!==t){if("selected-tab-id"===t||"segment-value"===t){const t=this.getClassifiedChildren();return this.renderBodyContent(t.body),void this.renderHeader(t.header)}this.render(),this.isMounted&&this.syncVisibility()}else this.syncOpenState()}resolvedSize(){return o.includes(this.size)?this.size:"m"}get size(){return l(this.getAttribute("size"),o,"m")}set size(t){t?this.setAttribute("size",t):this.removeAttribute("size")}resolvedHeaderVariant(){const t=this.getAttribute("header-variant")||"default";return d.includes(t)?t:"default"}parsedTabs(){const t=this.getAttribute("tabs");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}parsedSegments(){const t=this.getAttribute("segments");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}usesIntegratedNav(){const t=this.resolvedHeaderVariant();return"tabs"===t&&this.parsedTabs().length>0||"segment"===t&&this.parsedSegments().length>0}closeIconSize(){const t=this.resolvedSize();return"s"===t?16:"l"===t?20:"xl"===t?24:18}activeTabId(){return this.getAttribute("selected-tab-id")||this.internalTabId||this.getAttribute("default-selected-tab-id")||this.parsedTabs()[0]?.id||""}activeSegmentValue(){return this.getAttribute("segment-value")||this.internalSegment||this.getAttribute("default-segment-value")||this.parsedSegments()[0]?.value||""}collectUserChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"))}classifyChildren(t){const e=t.filter(t=>this.isHeaderPart(t)),s=t.filter(t=>this.isFooterPart(t)),i=t.filter(t=>this.isBodyPart(t)),r=t.filter(t=>!e.includes(t)&&!s.includes(t)&&!i.includes(t));return{header:e,body:[...i,...r],footer:s}}getClassifiedChildren(){const t=this.classifyChildren(this.collectUserChildren());if(t.header.length||t.body.length||t.footer.length)return t;return{header:Array.from(this.headerEl?.children||[]).filter(t=>t!==this.closeButton&&!t.classList.contains("designbase-wc-modal__header-row")&&("header"===t.getAttribute("data-modal-part")||t.classList.contains("designbase-wc-modal__header"))),body:this.collectContentParts("body"),footer:this.collectContentParts("footer")}}isHeaderPart(t){return t.classList.contains("designbase-wc-modal__header")||"header"===t.getAttribute("data-modal-part")}isBodyPart(t){return t.classList.contains("designbase-wc-modal__body")||"body"===t.getAttribute("data-modal-part")}isFooterContainer(t){return!(!t.classList.contains("designbase-wc-modal__footer")&&"footer"!==t.getAttribute("data-modal-part"))||"footer"===t.getAttribute("slot")&&("div"===t.localName||"footer"===t.localName)}isFooterPart(t){return this.isFooterContainer(t)||"footer"===t.getAttribute("slot")}collectContentParts(t){if(!this.contentEl)return[];const e=Array.from(this.contentEl.children).filter(e=>"body"===t?this.isBodyPart(e):this.isFooterPart(e));if(e.length>0)return e;const s="footer"===t?Array.from(this.contentEl.querySelectorAll(':scope > [data-wc-part="footer"] > [slot="footer"]')):[];return s.length>0?s:Array.from(this.children).filter(e=>"body"===t?this.isBodyPart(e):this.isFooterPart(e))}footerAnchor(){return this.contentEl?.querySelector(':scope > .designbase-wc-modal__footer, :scope > [data-modal-part="footer"], :scope > [data-wc-part="footer"]')||null}ensurePartShell(t){if(!this.contentEl)return null;const e=this.contentEl.querySelector(`:scope > [data-wc-part="${t}"]`);if(e)return e;const s=document.createElement("div");return s.className=`designbase-wc-modal__${t}`,s.setAttribute("data-modal-part",t),s.setAttribute("data-wc-part",t),s.setAttribute("data-wc-internal",""),"footer"===t?this.contentEl.append(s):this.contentEl.insertBefore(s,this.footerAnchor()),s}placeBodyParts(t){const e=this.contentEl;if(!e)return;const s=t.filter(t=>this.isBodyPart(t)),i=t.filter(t=>!this.isBodyPart(t)&&!this.isFooterPart(t));if(s.length>0){const t=e.querySelector(':scope > [data-wc-part="body"]');return s.forEach(t=>{t.parentElement!==e&&e.insertBefore(t,this.footerAnchor())}),void(t&&!s.includes(t)&&t.remove())}if(0===i.length)return;const r=this.ensurePartShell("body");r&&i.forEach(t=>{t.parentElement!==r&&r.append(t)})}placeFooterParts(t){const e=this.contentEl;if(!e)return;const s=t.filter(t=>this.isFooterContainer(t)),i=t.filter(t=>!this.isFooterContainer(t)&&"footer"===t.getAttribute("slot"));if(s.length>0){const t=e.querySelector(':scope > [data-wc-part="footer"]');return s.forEach(t=>{t.classList.add("designbase-wc-modal__footer"),t.hasAttribute("data-modal-part")||t.setAttribute("data-modal-part","footer"),t.parentElement!==e&&e.append(t)}),void(t&&!s.includes(t)&&t.remove())}if(0===i.length)return;const r=this.ensurePartShell("footer");r&&i.forEach(t=>{t.parentElement!==r&&r.append(t)})}restorePartsToHost(){this.contentEl&&(this.contentEl.querySelectorAll("[data-wc-part]").forEach(t=>{for(;t.firstChild;)this.append(t.firstChild)}),Array.from(this.contentEl.children).filter(t=>!t.classList.contains("designbase-wc-modal__integrated-content")&&!t.hasAttribute("data-wc-internal")).forEach(t=>{t.parentElement!==this&&this.append(t)}))}bindFooterActions(){if(!this.contentEl||"true"===this.contentEl.dataset.modalActionsBound)return;this.contentEl.dataset.modalActionsBound="true";const handleClose=t=>{const e=t.target?.closest("[data-modal-close]");e&&this.contentEl?.contains(e)&&this.close()};this.contentEl.addEventListener("click",handleClose),this.contentEl.addEventListener("db-click",handleClose)}ensureStructure(){this.root||(this.root=document.createElement("div"),this.root.className="designbase-wc-modal__overlay",this.root.setAttribute("data-wc-internal",""),this.root.addEventListener("click",t=>{t.target===this.root&&"false"!==this.getAttribute("close-on-outside-click")&&this.close()}),this.panel=document.createElement("div"),this.panel.className="designbase-wc-modal",this.panel.setAttribute("role",this.dialogRole()),this.panel.setAttribute("aria-modal","true"),this.panel.addEventListener("click",t=>t.stopPropagation()),this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-modal__header",this.headerContentEl=document.createElement("div"),this.headerContentEl.className="designbase-wc-modal__header-content",this.titleEl=document.createElement("h2"),this.titleEl.className="designbase-wc-modal__title",this.titleEl.id=this.titleId,this.closeButton=document.createElement("button"),this.closeButton.type="button",this.closeButton.className="designbase-wc-modal__close-button",this.closeButton.setAttribute("aria-label",a(this,"label-close","modal.close")),this.closeButton.addEventListener("click",()=>this.close()),this.navEl=document.createElement("div"),this.navEl.className="designbase-wc-modal__header-nav",this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-modal__content",this.panel.append(this.headerEl,this.contentEl),this.root.append(this.panel))}renderCloseButton(){if(!this.closeButton)return;const t=this.closeIconSize(),s=e("close",t);s.setAttribute("aria-hidden","true"),this.closeButton.replaceChildren(s),this.closeButton.setAttribute("aria-label",a(this,"label-close","modal.close")),this.closeButton.hidden="false"===this.getAttribute("show-close-button")}renderDefaultHeader(t){if(!(this.headerEl&&this.headerContentEl&&this.titleEl&&this.closeButton))return;if(this.headerEl.className="designbase-wc-modal__header",this.headerEl.replaceChildren(),t.length>0)return t.forEach(t=>this.headerEl.append(t)),void("false"!==this.getAttribute("show-close-button")&&this.headerEl.append(this.closeButton));const e=this.getAttribute("title")||"";this.titleEl.textContent=e,this.titleEl.hidden=!e,this.headerContentEl.replaceChildren(),e&&this.headerContentEl.append(this.titleEl),this.renderCloseButton(),this.headerEl.append(this.headerContentEl),"false"!==this.getAttribute("show-close-button")&&this.headerEl.append(this.closeButton),this.panel&&(e?this.panel.setAttribute("aria-labelledby",this.titleId):this.panel.removeAttribute("aria-labelledby"),this.panel.setAttribute("role",this.dialogRole()),this.syncDescribedBy())}renderNavHeader(){if(!(this.headerEl&&this.headerContentEl&&this.titleEl&&this.closeButton&&this.navEl))return;const t=this.resolvedHeaderVariant(),e=this.parsedTabs(),s=this.parsedSegments(),i=h.includes(this.getAttribute("nav-size")||"m")?this.getAttribute("nav-size")||"m":"s";this.headerEl.className=["designbase-wc-modal__header","tabs"===t&&"designbase-wc-modal__header--tabs","segment"===t&&"designbase-wc-modal__header--segment"].filter(Boolean).join(" ");const r=this.getAttribute("title")||"";this.titleEl.textContent=r,this.titleEl.hidden=!r,this.headerContentEl.replaceChildren(),r&&this.headerContentEl.append(this.titleEl),this.renderCloseButton();const n=document.createElement("div");if(n.className="designbase-wc-modal__header-row",n.append(this.headerContentEl),"false"!==this.getAttribute("show-close-button")&&n.append(this.closeButton),this.headerEl.replaceChildren(n),this.navEl.replaceChildren(),"tabs"===t&&e.length>0){const t=document.createElement("db-tabs");t.setAttribute("size",i),t.setAttribute("items",JSON.stringify(e.map(t=>({id:t.id,label:t.label,disabled:t.disabled})))),t.setAttribute("selected-id",this.activeTabId()),t.addEventListener("db-change",t=>{const e=t.detail?.id;e&&(this.hasAttribute("selected-tab-id")||(this.internalTabId=e),this.dispatchEvent(new CustomEvent("db-tab-change",{detail:{tabId:e},bubbles:!0,composed:!0})),this.renderBodyContent(this.getClassifiedChildren().body))}),this.tabsEl=t,this.navEl.append(t),this.headerEl.append(this.navEl)}if("segment"===t&&s.length>0){const t=document.createElement("db-segment-control");t.setAttribute("size",i),t.setAttribute("options",JSON.stringify(s.map(t=>({value:t.value,label:t.label,disabled:t.disabled})))),t.setAttribute("value",this.activeSegmentValue()),"false"!==this.getAttribute("segment-full-width")&&t.setAttribute("full-width",""),t.addEventListener("db-change",t=>{const e=t.detail?.value;e&&(this.hasAttribute("segment-value")||(this.internalSegment=e),this.dispatchEvent(new CustomEvent("db-segment-change",{detail:{value:e},bubbles:!0,composed:!0})),this.renderBodyContent(this.getClassifiedChildren().body))}),this.segmentEl=t,this.navEl.append(t),this.headerEl.append(this.navEl)}this.panel&&(r?this.panel.setAttribute("aria-labelledby",this.titleId):this.panel.removeAttribute("aria-labelledby"))}renderHeader(t){if(!this.headerEl)return;if(t.length>0)return this.headerEl.hidden=!1,void this.renderDefaultHeader(t);if(this.usesIntegratedNav())return this.headerEl.hidden=!1,void this.renderNavHeader();this.getAttribute("title")||""?(this.headerEl.hidden=!1,this.renderDefaultHeader([])):this.headerEl.hidden=!0}renderBodyContent(t=[]){if(!this.contentEl)return;let e=this.contentEl.querySelector(":scope > .designbase-wc-modal__integrated-content"),s="";if(this.usesIntegratedNav()){const t=this.resolvedHeaderVariant();if("tabs"===t){const t=this.parsedTabs().find(t=>t.id===this.activeTabId());s=t?.content||""}if("segment"===t){const t=this.parsedSegments().find(t=>t.value===this.activeSegmentValue());s=t?.content||""}}s?(e||(e=document.createElement("div"),e.className="designbase-wc-modal__integrated-content designbase-wc-modal__body",this.contentEl.insertBefore(e,this.contentEl.firstChild)),e.textContent=s):e?.remove(),this.placeBodyParts(t)}renderFooter(t){this.contentEl&&(this.placeFooterParts(t),t.forEach(t=>{t instanceof HTMLElement&&(t.hidden=!1)}),this.bindFooterActions())}render(){this.ensureStructure();const{header:t,body:e,footer:s}=this.getClassifiedChildren();o.forEach(t=>this.panel?.classList.remove(`designbase-wc-modal--${t}`)),this.panel?.classList.add(`designbase-wc-modal--${this.resolvedSize()}`),this.renderHeader(t),this.renderBodyContent(e),this.renderFooter(s)}syncVisibility(){if(this.root&&this.panel){if(this.open){if(["entering","entered"].includes(this.root.getAttribute("data-state")||""))return;return this.root.setAttribute("data-state","entering"),this.panel.setAttribute("data-state","entering"),void requestAnimationFrame(()=>{this.panel,requestAnimationFrame(()=>{this.open&&this.root&&this.panel&&(this.root.setAttribute("data-state","entered"),this.panel.setAttribute("data-state","entered"))})})}this.root.setAttribute("data-state","exiting"),this.panel.setAttribute("data-state","exiting")}}syncOpenState(){if(this.open){if(this.render(),this.root&&!this.root.isConnected){const e=this.closest(".designbase-wp-admin")||document.body;t(this,this.root),e.append(this.root)}return this.isMounted||r(),this.isMounted=!0,this.syncVisibility(),void this.activateFocusTrap()}this.isMounted&&(this.syncVisibility(),this.focusTrap?.deactivate(),this.focusTrap=void 0,this.exitTimerId&&clearTimeout(this.exitTimerId),this.exitTimerId=window.setTimeout(()=>{this.open||this.teardown()},200))}activateFocusTrap(){this.panel&&!this.focusTrap&&(this.focusTrap=i(this.panel,{initialFocus:()=>this.panel?.querySelector("[autofocus]")||null}),this.focusTrap.activate())}teardown(){this.focusTrap?.deactivate(),this.focusTrap=void 0,this.restorePartsToHost(),this.root?.remove(),this.isMounted&&n(),this.isMounted=!1}dialogRole(){return"alertdialog"===this.getAttribute("role")?"alertdialog":"dialog"}syncDescribedBy(){if(!this.panel)return;const t=this.getAttribute("describedby");t?this.panel.setAttribute("aria-describedby",t):this.contentEl&&(this.contentEl.textContent||"").trim()?(this.contentEl.id||(this.contentEl.id=s("db-modal-desc")),this.panel.setAttribute("aria-describedby",this.contentEl.id)):this.panel.removeAttribute("aria-describedby")}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}}customElements.get("db-modal")||customElements.define("db-modal",DbModal);export{DbModal};
+import"./db-tabs.js";import"./db-segment-control.js";import{inheritThemeScope as t}from"../core/theme-scope.js";import{createDbIcon as e}from"./db-icons.js";import{dbUid as s}from"../core/uid.js";import{createFocusTrap as i}from"../core/focus-trap.js";import{lockScroll as r,unlockScroll as n}from"../core/scroll-lock.js";import{labelFrom as a}from"../core/i18n.js";import{MODAL_SIZES as o}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";import{coerceToContract as l}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";const d=["default","tabs","segment"],h=["s","m","l"];class DbModal extends HTMLElement{constructor(){super(...arguments),this.titleId=s("db-modal-title"),this.isMounted=!1,this.internalTabId="",this.internalSegment="",this.exitTimerId=null,this.handleDocumentKeyDown=t=>{"Escape"===t.key&&this.open&&"false"!==this.getAttribute("close-on-escape")&&(t.preventDefault(),this.close())}}static get observedAttributes(){return["open","title","size","header-variant","tabs","segments","selected-tab-id","default-selected-tab-id","segment-value","default-segment-value","nav-size","segment-full-width","close-on-outside-click","close-on-escape","show-close-button","role","describedby","label-close"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open","true"):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-modal-host"),document.addEventListener("keydown",this.handleDocumentKeyDown),this.childObserver=new MutationObserver(()=>{this.open&&this.render()}),this.childObserver.observe(this,{childList:!0}),this.syncOpenState()}disconnectedCallback(){this.childObserver?.disconnect(),document.removeEventListener("keydown",this.handleDocumentKeyDown),this.exitTimerId&&clearTimeout(this.exitTimerId),this.teardown()}attributeChangedCallback(t,e,s){if(e!==s&&this.isConnected)if("open"!==t){if("selected-tab-id"===t||"segment-value"===t){const t=this.getClassifiedChildren();return this.renderBodyContent(t.body),void this.renderHeader(t.header)}this.render(),this.isMounted&&this.syncVisibility()}else this.syncOpenState()}resolvedSize(){return o.includes(this.size)?this.size:"m"}get size(){return l(this.getAttribute("size"),o,"m")}set size(t){t?this.setAttribute("size",t):this.removeAttribute("size")}resolvedHeaderVariant(){const t=this.getAttribute("header-variant")||"default";return d.includes(t)?t:"default"}parsedTabs(){const t=this.getAttribute("tabs");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}parsedSegments(){const t=this.getAttribute("segments");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}usesIntegratedNav(){const t=this.resolvedHeaderVariant();return"tabs"===t&&this.parsedTabs().length>0||"segment"===t&&this.parsedSegments().length>0}closeIconSize(){const t=this.resolvedSize();return"s"===t?16:"l"===t?20:"xl"===t?24:18}activeTabId(){return this.getAttribute("selected-tab-id")||this.internalTabId||this.getAttribute("default-selected-tab-id")||this.parsedTabs()[0]?.id||""}activeSegmentValue(){return this.getAttribute("segment-value")||this.internalSegment||this.getAttribute("default-segment-value")||this.parsedSegments()[0]?.value||""}collectUserChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"))}classifyChildren(t){const e=t.filter(t=>this.isHeaderPart(t)),s=t.filter(t=>this.isFooterPart(t)),i=t.filter(t=>this.isBodyPart(t)),r=t.filter(t=>!e.includes(t)&&!s.includes(t)&&!i.includes(t));return{header:e,body:[...i,...r],footer:s}}getClassifiedChildren(){const t=this.classifyChildren(this.collectUserChildren());if(t.header.length||t.body.length||t.footer.length)return t;return{header:Array.from(this.headerEl?.children||[]).filter(t=>t!==this.closeButton&&!t.classList.contains("designbase-wc-modal__header-row")&&("header"===t.getAttribute("data-modal-part")||t.classList.contains("designbase-wc-modal__header"))),body:this.collectContentParts("body"),footer:this.collectContentParts("footer")}}isHeaderPart(t){return t.classList.contains("designbase-wc-modal__header")||"header"===t.getAttribute("data-modal-part")}isBodyPart(t){return t.classList.contains("designbase-wc-modal__body")||"body"===t.getAttribute("data-modal-part")}isFooterContainer(t){return!(!t.classList.contains("designbase-wc-modal__footer")&&"footer"!==t.getAttribute("data-modal-part"))||"footer"===t.getAttribute("slot")&&("div"===t.localName||"footer"===t.localName)}isFooterPart(t){return this.isFooterContainer(t)||"footer"===t.getAttribute("slot")}collectContentParts(t){if(!this.contentEl)return[];const e=Array.from(this.contentEl.children).filter(e=>"body"===t?this.isBodyPart(e):this.isFooterPart(e));if(e.length>0)return e;const s="footer"===t?Array.from(this.contentEl.querySelectorAll(':scope > [data-wc-part="footer"] > [slot="footer"]')):[];return s.length>0?s:Array.from(this.children).filter(e=>"body"===t?this.isBodyPart(e):this.isFooterPart(e))}footerAnchor(){return this.contentEl?.querySelector(':scope > .designbase-wc-modal__footer, :scope > [data-modal-part="footer"], :scope > [data-wc-part="footer"]')||null}ensurePartShell(t){if(!this.contentEl)return null;const e=this.contentEl.querySelector(`:scope > [data-wc-part="${t}"]`);if(e)return e;const s=document.createElement("div");return s.className=`designbase-wc-modal__${t}`,s.setAttribute("data-modal-part",t),s.setAttribute("data-wc-part",t),s.setAttribute("data-wc-internal",""),"footer"===t?this.contentEl.append(s):this.contentEl.insertBefore(s,this.footerAnchor()),s}placeBodyParts(t){const e=this.contentEl;if(!e)return;const s=t.filter(t=>this.isBodyPart(t)),i=t.filter(t=>!this.isBodyPart(t)&&!this.isFooterPart(t));if(s.length>0){const t=e.querySelector(':scope > [data-wc-part="body"]');return s.forEach(t=>{t.parentElement!==e&&e.insertBefore(t,this.footerAnchor())}),void(t&&!s.includes(t)&&t.remove())}if(0===i.length)return;const r=this.ensurePartShell("body");r&&i.forEach(t=>{t.parentElement!==r&&r.append(t)})}placeFooterParts(t){const e=this.contentEl;if(!e)return;const s=t.filter(t=>this.isFooterContainer(t)),i=t.filter(t=>!this.isFooterContainer(t)&&"footer"===t.getAttribute("slot"));if(s.length>0){const t=e.querySelector(':scope > [data-wc-part="footer"]');return s.forEach(t=>{t.classList.add("designbase-wc-modal__footer"),t.hasAttribute("data-modal-part")||t.setAttribute("data-modal-part","footer"),t.parentElement!==e&&e.append(t)}),void(t&&!s.includes(t)&&t.remove())}if(0===i.length)return;const r=this.ensurePartShell("footer");r&&i.forEach(t=>{t.parentElement!==r&&r.append(t)})}restorePartsToHost(){this.contentEl&&(this.contentEl.querySelectorAll("[data-wc-part]").forEach(t=>{for(;t.firstChild;)this.append(t.firstChild)}),Array.from(this.contentEl.children).filter(t=>!t.classList.contains("designbase-wc-modal__integrated-content")&&!t.hasAttribute("data-wc-internal")).forEach(t=>{t.parentElement!==this&&this.append(t)}))}bindFooterActions(){if(!this.contentEl||"true"===this.contentEl.dataset.modalActionsBound)return;this.contentEl.dataset.modalActionsBound="true";const handleClose=t=>{const e=t.target?.closest("[data-modal-close]");e&&this.contentEl?.contains(e)&&this.close()};this.contentEl.addEventListener("click",handleClose),this.contentEl.addEventListener("db-click",handleClose)}ensureStructure(){this.root||(this.root=document.createElement("div"),this.root.className="designbase-wc-modal__overlay",this.root.setAttribute("data-wc-internal",""),this.root.addEventListener("click",t=>{t.target===this.root&&"false"!==this.getAttribute("close-on-outside-click")&&this.close()}),this.panel=document.createElement("div"),this.panel.className="designbase-wc-modal",this.panel.setAttribute("role",this.dialogRole()),this.panel.setAttribute("aria-modal","true"),this.panel.addEventListener("click",t=>t.stopPropagation()),this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-modal__header",this.headerContentEl=document.createElement("div"),this.headerContentEl.className="designbase-wc-modal__header-content",this.titleEl=document.createElement("h2"),this.titleEl.className="designbase-wc-modal__title",this.titleEl.id=this.titleId,this.closeButton=document.createElement("button"),this.closeButton.type="button",this.closeButton.className="designbase-wc-modal__close-button",this.closeButton.setAttribute("aria-label",a(this,"label-close","modal.close")),this.closeButton.addEventListener("click",()=>this.close()),this.navEl=document.createElement("div"),this.navEl.className="designbase-wc-modal__header-nav",this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-modal__content",this.panel.append(this.headerEl,this.contentEl),this.root.append(this.panel))}renderCloseButton(){if(!this.closeButton)return;const t=this.closeIconSize(),s=e("close",t);s.setAttribute("aria-hidden","true"),this.closeButton.replaceChildren(s),this.closeButton.setAttribute("aria-label",a(this,"label-close","modal.close")),this.closeButton.hidden="false"===this.getAttribute("show-close-button")}renderDefaultHeader(t){if(!(this.headerEl&&this.headerContentEl&&this.titleEl&&this.closeButton))return;if(this.headerEl.className="designbase-wc-modal__header",this.headerEl.replaceChildren(),t.length>0)return t.forEach(t=>this.headerEl.append(t)),void("false"!==this.getAttribute("show-close-button")&&this.headerEl.append(this.closeButton));const e=this.getAttribute("title")||"";this.titleEl.textContent=e,this.titleEl.hidden=!e,this.headerContentEl.replaceChildren(),e&&this.headerContentEl.append(this.titleEl),this.renderCloseButton(),this.headerEl.append(this.headerContentEl),"false"!==this.getAttribute("show-close-button")&&this.headerEl.append(this.closeButton),this.panel&&(e?this.panel.setAttribute("aria-labelledby",this.titleId):this.panel.removeAttribute("aria-labelledby"),this.panel.setAttribute("role",this.dialogRole()),this.syncDescribedBy())}renderNavHeader(){if(!(this.headerEl&&this.headerContentEl&&this.titleEl&&this.closeButton&&this.navEl))return;const t=this.resolvedHeaderVariant(),e=this.parsedTabs(),s=this.parsedSegments(),i=h.includes(this.getAttribute("nav-size")||"m")?this.getAttribute("nav-size")||"m":"s";this.headerEl.className=["designbase-wc-modal__header","tabs"===t&&"designbase-wc-modal__header--tabs","segment"===t&&"designbase-wc-modal__header--segment"].filter(Boolean).join(" ");const r=this.getAttribute("title")||"";this.titleEl.textContent=r,this.titleEl.hidden=!r,this.headerContentEl.replaceChildren(),r&&this.headerContentEl.append(this.titleEl),this.renderCloseButton();const n=document.createElement("div");if(n.className="designbase-wc-modal__header-row",n.append(this.headerContentEl),"false"!==this.getAttribute("show-close-button")&&n.append(this.closeButton),this.headerEl.replaceChildren(n),this.navEl.replaceChildren(),"tabs"===t&&e.length>0){const t=document.createElement("db-tabs");t.setAttribute("size",i),t.setAttribute("items",JSON.stringify(e.map(t=>({id:t.id,label:t.label,disabled:t.disabled})))),t.setAttribute("selected-id",this.activeTabId()),t.addEventListener("db-change",t=>{const e=t.detail?.id;e&&(this.hasAttribute("selected-tab-id")||(this.internalTabId=e),this.dispatchEvent(new CustomEvent("db-tab-change",{detail:{tabId:e},bubbles:!0,composed:!0})),this.renderBodyContent(this.getClassifiedChildren().body))}),this.tabsEl=t,this.navEl.append(t),this.headerEl.append(this.navEl)}if("segment"===t&&s.length>0){const t=document.createElement("db-segment-control");t.setAttribute("size",i),t.setAttribute("options",JSON.stringify(s.map(t=>({value:t.value,label:t.label,disabled:t.disabled})))),t.setAttribute("value",this.activeSegmentValue()),"false"!==this.getAttribute("segment-full-width")&&t.setAttribute("full-width",""),t.addEventListener("db-change",t=>{const e=t.detail?.value;e&&(this.hasAttribute("segment-value")||(this.internalSegment=e),this.dispatchEvent(new CustomEvent("db-segment-change",{detail:{value:e},bubbles:!0,composed:!0})),this.renderBodyContent(this.getClassifiedChildren().body))}),this.segmentEl=t,this.navEl.append(t),this.headerEl.append(this.navEl)}this.panel&&(r?this.panel.setAttribute("aria-labelledby",this.titleId):this.panel.removeAttribute("aria-labelledby"))}renderHeader(t){if(!this.headerEl)return;if(t.length>0)return this.headerEl.hidden=!1,void this.renderDefaultHeader(t);if(this.usesIntegratedNav())return this.headerEl.hidden=!1,void this.renderNavHeader();this.getAttribute("title")||""?(this.headerEl.hidden=!1,this.renderDefaultHeader([])):this.headerEl.hidden=!0}renderBodyContent(t=[]){if(!this.contentEl)return;let e=this.contentEl.querySelector(":scope > .designbase-wc-modal__integrated-content"),s="";if(this.usesIntegratedNav()){const t=this.resolvedHeaderVariant();if("tabs"===t){const t=this.parsedTabs().find(t=>t.id===this.activeTabId());s=t?.content||""}if("segment"===t){const t=this.parsedSegments().find(t=>t.value===this.activeSegmentValue());s=t?.content||""}}s?(e||(e=document.createElement("div"),e.className="designbase-wc-modal__integrated-content designbase-wc-modal__body",this.contentEl.insertBefore(e,this.contentEl.firstChild)),e.textContent=s):e?.remove(),this.placeBodyParts(t)}renderFooter(t){this.contentEl&&(this.placeFooterParts(t),t.forEach(t=>{t instanceof HTMLElement&&(t.hidden=!1)}),this.bindFooterActions())}render(){this.ensureStructure();const{header:t,body:e,footer:s}=this.getClassifiedChildren();o.forEach(t=>this.panel?.classList.remove(`designbase-wc-modal--${t}`)),this.panel?.classList.add(`designbase-wc-modal--${this.resolvedSize()}`),this.renderHeader(t),this.renderBodyContent(e),this.renderFooter(s)}syncVisibility(){if(this.root&&this.panel){if(this.open){if(["entering","entered"].includes(this.root.getAttribute("data-state")||""))return;return this.root.setAttribute("data-state","entering"),this.panel.setAttribute("data-state","entering"),void requestAnimationFrame(()=>{this.panel,requestAnimationFrame(()=>{this.open&&this.root&&this.panel&&(this.root.setAttribute("data-state","entered"),this.panel.setAttribute("data-state","entered"))})})}this.root.setAttribute("data-state","exiting"),this.panel.setAttribute("data-state","exiting")}}syncOpenState(){if(this.open){if(this.render(),this.root&&!this.root.isConnected){const e=this.closest(".designbase-wp-admin")||document.body;t(this,this.root),e.append(this.root)}return this.isMounted||r(),this.isMounted=!0,this.syncVisibility(),void this.activateFocusTrap()}this.isMounted&&(this.syncVisibility(),this.focusTrap?.deactivate(),this.focusTrap=void 0,this.exitTimerId&&clearTimeout(this.exitTimerId),this.exitTimerId=window.setTimeout(()=>{this.open||this.teardown()},200))}activateFocusTrap(){this.panel&&!this.focusTrap&&(this.focusTrap=i(this.panel,{initialFocus:()=>this.panel?.querySelector("[autofocus]")||null}),this.focusTrap.activate())}teardown(){this.focusTrap?.deactivate(),this.focusTrap=void 0,this.restorePartsToHost(),this.root?.remove(),this.isMounted&&n(),this.isMounted=!1}dialogRole(){return"alertdialog"===this.getAttribute("role")?"alertdialog":"dialog"}syncDescribedBy(){if(!this.panel)return;const t=this.getAttribute("describedby");t?this.panel.setAttribute("aria-describedby",t):this.contentEl&&(this.contentEl.textContent||"").trim()?(this.contentEl.id||(this.contentEl.id=s("db-modal-desc")),this.panel.setAttribute("aria-describedby",this.contentEl.id)):this.panel.removeAttribute("aria-describedby")}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}}customElements.get("db-modal")||customElements.define("db-modal",DbModal);export{DbModal};

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

@@ -1,3 +1,8 @@
+import './db-menu-item.js';
+import './db-logo.js';
+import './db-search-bar.js';
+import './db-avatar.js';
+import './db-button.js';
 import { BadgeVariant, BadgeType } from '../ui-contracts/dist/components.d.js';
 
 interface DbNavbarItem {

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

@@ -1 +1 @@
-import{setHostClasses as e}from"../core/host-class.js";import{subscribeDbLocale as t,dbText as a}from"../core/i18n.js";import{createDbIcon as n}from"./db-icons.js";import{sanitizeHref as s}from"../core/safe-url.js";import{NAVBAR_SIZES as i,NAVBAR_VARIANTS as r,NAVBAR_POSITIONS as c}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";function resolveIcon(e){if(e)return e}class DbNavbar extends HTMLElement{constructor(){super(...arguments),this.mobileMenuId="db-navbar-menu-"+ ++DbNavbar.nextId,this.mobileOpen=!1,this.escapeMenu=e=>{"Escape"===e.key&&this.mobileOpen&&(e.preventDefault(),this.mobileOpen=!1,this.render(),this.querySelector(".designbase-wc-navbar__mobile-toggle")?.focus())},this.userMenuOpen=!1,this.expandedMobile={},this.outsideHandler=null}static get observedAttributes(){return["logo-src","logo-alt","items","user-menu-items","user-profile","size","variant","position","is-authenticated","show-search","search-placeholder","full-width","shadow"]}connectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=t(()=>this.syncLocale()),this.render(),this.bindOutsideClick(),this.addEventListener("keydown",this.escapeMenu),this.containerObserver=new ResizeObserver(([e])=>{e.contentRect.width>=1024&&this.mobileOpen&&(this.mobileOpen=!1,this.render())}),this.containerObserver.observe(this),this.slotObserver=new MutationObserver(()=>{Array.from(this.children).some(e=>["brand","actions"].includes(e.getAttribute("slot")||""))&&this.render()}),this.slotObserver.observe(this,{childList:!0})}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.unbindOutsideClick(),this.slotObserver?.disconnect(),this.containerObserver?.disconnect(),this.removeEventListener("keydown",this.escapeMenu)}syncLocale(){const e=this.getAttribute("aria-label");e&&e!==this.autoNavLabel||(this.autoNavLabel=a("메인 네비게이션"),this.setAttribute("aria-label",this.autoNavLabel));const t=this.querySelector(".designbase-wc-navbar__logo db-logo");t&&t.setAttribute("alt",this.getAttribute("logo-alt")||a("홈")),this.querySelectorAll("[data-navbar-login]").forEach(e=>{e.textContent=a("로그인")}),this.querySelector(".designbase-wc-navbar__mobile-toggle")?.setAttribute("aria-label",a(this.mobileOpen?"메뉴 닫기":"메뉴 열기"))}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(),this.mobileOpen&&(this.mobileOpen=!1,this.render()))},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 t=this.getAttribute("size")||"m",a=this.getAttribute("variant")||"default",n=this.getAttribute("position")||"static";e(this,["designbase-wc-navbar",`designbase-wc-navbar--${i.includes(t)?t:"m"}`,`designbase-wc-navbar--${r.includes(a)?a:"default"}`,`designbase-wc-navbar--${c.includes(n)?n:"static"}`,this.hasAttribute("full-width")&&"designbase-wc-navbar--full-width",this.hasAttribute("shadow")&&"designbase-wc-navbar--shadow",this.mobileOpen&&"designbase-wc-navbar--mobile-open"])}isMegaMenu(e){return Boolean(e.megaMenu&&e.columns?.length)}createNavToggleButton(e,t){const a=document.createElement("button");a.type="button",a.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",e.active&&"designbase-wc-navbar__nav-link--active",e.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),a.disabled=Boolean(e.disabled);const s=resolveIcon(e.icon);s&&a.append(n(s,t)),a.append(document.createTextNode(e.label));const i=n("chevron-down",12);return i.classList.add("designbase-wc-navbar__chevron"),a.append(i),a}createMegaLink(e,t){const a=document.createElement("a");a.href=s(e.href,"#"),a.className=["designbase-wc-navbar__mega-link",e.active&&"designbase-wc-navbar__mega-link--active",e.disabled&&"designbase-wc-navbar__mega-link--disabled"].filter(Boolean).join(" ");const i=resolveIcon(e.icon);if(i){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-link-icon",e.append(n(i,t)),a.append(e)}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=e.label,r.append(c),e.description){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-link-desc",t.textContent=e.description,r.append(t)}return a.append(r),a.addEventListener("click",t=>{t.preventDefault(),e.disabled||this.dispatchItemClick(e,"nav")}),a}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",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(e,t){const a=document.createElement("a");a.href=s(e.href,"#"),a.className="designbase-wc-navbar__mega-featured",e.image&&(a.style.setProperty("--db-navbar-mega-featured-image",`url("${e.image}")`),a.classList.add("designbase-wc-navbar__mega-featured--image"));const i=resolveIcon(e.icon);if(i){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-icon",e.append(n(i,t+4)),a.append(e)}if(e.title){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-title",t.textContent=e.title,a.append(t)}if(e.description){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-desc",t.textContent=e.description,a.append(t)}if(e.ctaLabel){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-cta",t.append(document.createTextNode(e.ctaLabel)),t.append(n("chevron-right",14)),a.append(t)}return a.addEventListener("click",t=>{t.preventDefault(),this.dispatchItemClick({id:`${e.href||"featured"}`,label:e.title||"featured",href:e.href},"nav")}),a}createDesktopNavItem(e,t){if(this.isMegaMenu(e))return this.createMegaMenu(e,t);const a=document.createElement("li");a.className="designbase-wc-navbar__nav-item";if(Boolean(e.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",e.active&&"designbase-wc-navbar__nav-link--active",e.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),r.disabled=Boolean(e.disabled);const c=resolveIcon(e.icon);c&&r.append(n(c,t)),r.append(document.createTextNode(e.label));const d=n("chevron-down",12);d.classList.add("designbase-wc-navbar__chevron"),r.append(d);const o=document.createElement("ul");return o.className="designbase-wc-navbar__dropdown-menu",e.children.forEach(e=>{const a=document.createElement("li"),i=document.createElement("a");i.href=s(e.href,"#"),i.className=["designbase-wc-navbar__dropdown-item",e.active&&"designbase-wc-navbar__dropdown-item--active",e.disabled&&"designbase-wc-navbar__dropdown-item--disabled"].filter(Boolean).join(" ");const r=resolveIcon(e.icon);r&&i.append(n(r,t)),i.append(document.createTextNode(e.label)),i.addEventListener("click",t=>{e.disabled?t.preventDefault():(t.preventDefault(),this.dispatchItemClick(e,"nav"))}),a.append(i),o.append(a)}),i.append(r,o),a.append(i),a}const i=document.createElement("a");i.href=s(e.href,"#"),i.className=["designbase-wc-navbar__nav-link",e.active&&"designbase-wc-navbar__nav-link--active",e.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" ");const r=resolveIcon(e.icon);return r&&i.append(n(r,t)),i.append(document.createTextNode(e.label)),i.addEventListener("click",t=>{e.disabled?t.preventDefault():(t.preventDefault(),this.dispatchItemClick(e,"nav"))}),a.append(i),a}createUserMenuItemElement(e,t,a){const n=document.createElement("db-menu-item");n.setAttribute("label",e.label),n.setAttribute("type","block"),n.setAttribute("menu-style","dropdown"),n.setAttribute("size",t);const i=s(e.href,"");return i&&n.setAttribute("href",i),e.icon&&n.setAttribute("icon",e.icon),e.disabled&&n.setAttribute("disabled",""),n.addEventListener("db-navigate",t=>{e.disabled||(t.preventDefault(),this.mobileOpen=!1,this.dispatchItemClick(e,"mobile"),this.render())}),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,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",t);const c=s(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",""),n&&(r.setAttribute("expandable",""),c&&r.setAttribute("split-expand",""),r.subItems=a.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(n){const t=r.hasAttribute("expanded");this.expandedMobile[e.id]=t;const a=r.querySelector(":scope > .designbase-wc-menu-item__children--accordion");if(a&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){a.getAnimations().forEach(e=>e.cancel());const e=a.scrollHeight+"px";a.animate(t?[{maxHeight:"0px",opacity:0},{maxHeight:e,opacity:1}]:[{maxHeight:e,opacity:1},{maxHeight:"0px",opacity:0}],{duration:240,easing:"cubic-bezier(.22, 1, .36, 1)"})}return}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(){const e=this.querySelector(".designbase-wc-navbar__mobile-menu:not([data-exiting])"),t="true"===this.querySelector(".designbase-wc-navbar__mobile-toggle")?.getAttribute("aria-expanded")!==this.mobileOpen&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches,s=t?Array.from(this.querySelectorAll(".designbase-wc-navbar__mobile-toggle-line")).map(e=>({transform:getComputedStyle(e).transform,opacity:getComputedStyle(e).opacity})):[];this.syncHostClasses(),this.setAttribute("role","navigation"),this.syncLocale();const i=this.getAttribute("size")||"m",r=this.iconSize(i),c=this.parseItems(),d=this.parseItems("user-menu-items"),o=this.parseUserProfile(),l=this.hasAttribute("is-authenticated"),b=this.hasAttribute("show-search"),u=this.querySelector('[slot="brand"]'),m=this.querySelector('[slot="actions"]'),p=this.querySelector('[slot="mobile-footer"]');this.replaceChildren();const h=document.createElement("div");h.className=["designbase-wc-navbar__container",this.hasAttribute("full-width")&&"designbase-wc-navbar__container--full-width"].filter(Boolean).join(" ");const v=document.createElement("div");v.className="designbase-wc-navbar__left";const g=document.createElement("div");g.className="designbase-wc-navbar__brand";const _=document.createElement("div");_.className="designbase-wc-navbar__logo";const f=document.createElement("db-logo"),w=this.getAttribute("logo-src");f.setAttribute("type",w?"custom":"designbase"),w&&f.setAttribute("src",w),f.setAttribute("alt",this.getAttribute("logo-alt")||a("홈")),f.setAttribute("size","s"),f.setAttribute("clickable",""),f.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),_.append(f),g.append(u||_),v.append(g);const E=document.createElement("div");E.className="designbase-wc-navbar__right";const A=document.createElement("div");A.className="designbase-wc-navbar__nav designbase-wc-navbar__nav--desktop";const y=document.createElement("ul");if(y.className="designbase-wc-navbar__nav-list",c.forEach(e=>y.append(this.createDesktopNavItem(e,r))),A.append(y),E.append(A),b){const e=document.createElement("div");e.className="designbase-wc-navbar__search";const t=document.createElement("db-search-bar");t.setAttribute("variant","outlined"),t.setAttribute("size","s"===i?"s":"l"===i?"l":"m"),this.getAttribute("search-placeholder")&&t.setAttribute("placeholder",this.getAttribute("search-placeholder")),this.bindSearchEvents(t),e.append(t),E.append(e)}const N=document.createElement("div");if(N.className="designbase-wc-navbar__user-menu",l&&o){const e=document.createElement("div");e.className="designbase-wc-navbar__user-dropdown";const t=document.createElement("button");t.type="button",t.className="designbase-wc-navbar__user-toggle",t.setAttribute("aria-expanded",String(this.userMenuOpen));const a=document.createElement("db-avatar");this.applyAvatarProfile(a,o,i);const s=document.createElement("span");s.className="designbase-wc-navbar__user-name",s.textContent=o.name,t.append(a,s,n("chevron-down",12)),t.addEventListener("click",()=>{this.userMenuOpen=!this.userMenuOpen,t.setAttribute("aria-expanded",String(this.userMenuOpen)),this.updateUserMenuVisibility()});const r=document.createElement("ul");if(r.className="designbase-wc-navbar__user-dropdown-menu",r.hidden=!this.userMenuOpen,o.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=o.email,e.append(t),r.append(e)}d.forEach(e=>{const t=document.createElement("li");t.append(this.createUserMenuItemElement(e,i,()=>{this.userMenuOpen=!1,this.updateUserMenuVisibility()})),r.append(t)}),e.append(t,r),N.append(e)}else{const e=document.createElement("db-button");e.dataset.navbarLogin="",e.setAttribute("variant","primary"),e.setAttribute("size","s"===i?"s":"l"===i?"l":"m"),e.textContent=a("로그인"),e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),N.append(e)}E.append(m||N);const k=document.createElement("button");k.type="button",k.className="designbase-wc-navbar__mobile-toggle",k.setAttribute("aria-expanded",String(this.mobileOpen)),this.mobileOpen&&k.setAttribute("aria-controls",this.mobileMenuId),k.setAttribute("aria-label",a(this.mobileOpen?"메뉴 닫기":"메뉴 열기"));for(let e=0;e<3;e+=1){const e=document.createElement("span");e.className="designbase-wc-navbar__mobile-toggle-line",k.append(e)}if(k.addEventListener("click",()=>{this.mobileOpen=!this.mobileOpen,this.render(),this.querySelector(".designbase-wc-navbar__mobile-toggle")?.focus()}),h.append(v,E,k),this.append(h),this.mobileOpen){const e=document.createElement("div");if(e.className="designbase-wc-navbar__mobile-menu",e.id=this.mobileMenuId,e.addEventListener("keydown",e=>{"Escape"===e.key&&(this.mobileOpen=!1,this.render(),this.querySelector(".designbase-wc-navbar__mobile-toggle")?.focus())}),b){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",""),this.getAttribute("search-placeholder")&&a.setAttribute("placeholder",this.getAttribute("search-placeholder")),this.bindSearchEvents(a),t.append(a),e.append(t)}const n=document.createElement("div");n.className="designbase-wc-navbar__mobile-nav-list",e.append(n);const s=document.createElement("div");if(s.className="designbase-wc-navbar__mobile-user",l&&o){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-info";const t=document.createElement("db-avatar");this.applyAvatarProfile(t,o,"m");const a=document.createElement("div"),n=document.createElement("div");if(n.className="designbase-wc-navbar__mobile-user-name",n.textContent=o.name,a.append(n),o.email){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-email",e.textContent=o.email,a.append(e)}if(e.append(t,a),s.append(e),d.length){const e=document.createElement("ul");e.className="designbase-wc-navbar__mobile-user-menu",d.forEach(t=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(t,"m",()=>{this.mobileOpen=!1,this.render()})),e.append(a)}),s.append(e)}}else{const e=document.createElement("db-button");e.dataset.navbarLogin="",e.setAttribute("variant","primary"),e.setAttribute("size","m"),e.setAttribute("full-width",""),e.textContent=a("로그인"),e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),s.append(e)}p?(p.hidden=!1,e.append(p),e.addEventListener("click",e=>{e.target instanceof Element&&e.target.closest('[slot="mobile-footer"] a, [slot="mobile-footer"] db-button')&&queueMicrotask(()=>{this.mobileOpen&&(this.mobileOpen=!1,this.render())})})):m||e.append(s),this.append(e),this.renderMobileMenu(),t&&(e.animate([{opacity:0,transform:"translateY(-10px)",clipPath:"inset(0 0 100% 0)"},{opacity:1,transform:"translateY(0)",clipPath:"inset(0)"}],{duration:280,easing:"cubic-bezier(.22, 1, .36, 1)"}),n.animate([{opacity:0,transform:"translateY(-6px)"},{opacity:1,transform:"translateY(0)"}],{duration:240,delay:50,fill:"backwards",easing:"ease-out"}))}else if(t&&e){if(p){const t=p.cloneNode(!0);t.removeAttribute("slot"),e.append(t)}e.dataset.exiting="",e.removeAttribute("id"),e.inert=!0,e.setAttribute("aria-hidden","true"),e.style.pointerEvents="none",this.append(e);e.animate([{opacity:1,transform:"translateY(0)",clipPath:"inset(0)"},{opacity:0,transform:"translateY(-8px)",clipPath:"inset(0 0 100% 0)"}],{duration:180,easing:"ease-in",fill:"forwards"}).onfinish=()=>e.remove()}!this.mobileOpen&&p&&(p.hidden=!0,this.append(p)),t&&k.querySelectorAll(".designbase-wc-navbar__mobile-toggle-line").forEach((e,t)=>{s[t]&&e.animate([s[t],{transform:getComputedStyle(e).transform,opacity:getComputedStyle(e).opacity}],{duration:240,easing:"cubic-bezier(.22, 1, .36, 1)"})})}}DbNavbar.nextId=0,customElements.get("db-navbar")||customElements.define("db-navbar",DbNavbar);export{DbNavbar};
+import"./db-menu-item.js";import"./db-logo.js";import"./db-search-bar.js";import"./db-avatar.js";import"./db-button.js";import{setHostClasses as e}from"../core/host-class.js";import{subscribeDbLocale as t,dbText as a}from"../core/i18n.js";import{createDbIcon as n}from"./db-icons.js";import{sanitizeHref as s}from"../core/safe-url.js";import{NAVBAR_SIZES as i,NAVBAR_VARIANTS as r,NAVBAR_POSITIONS as c}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";function resolveIcon(e){if(e)return e}class DbNavbar extends HTMLElement{constructor(){super(...arguments),this.mobileMenuId="db-navbar-menu-"+ ++DbNavbar.nextId,this.mobileOpen=!1,this.escapeMenu=e=>{"Escape"===e.key&&this.mobileOpen&&(e.preventDefault(),this.mobileOpen=!1,this.render(),this.querySelector(".designbase-wc-navbar__mobile-toggle")?.focus())},this.userMenuOpen=!1,this.expandedMobile={},this.outsideHandler=null}static get observedAttributes(){return["logo-src","logo-alt","items","user-menu-items","user-profile","size","variant","position","is-authenticated","show-search","search-placeholder","full-width","shadow"]}connectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=t(()=>this.syncLocale()),this.render(),this.bindOutsideClick(),this.addEventListener("keydown",this.escapeMenu),this.containerObserver=new ResizeObserver(([e])=>{e.contentRect.width>=1024&&this.mobileOpen&&(this.mobileOpen=!1,this.render())}),this.containerObserver.observe(this),this.slotObserver=new MutationObserver(()=>{Array.from(this.children).some(e=>["brand","actions"].includes(e.getAttribute("slot")||""))&&this.render()}),this.slotObserver.observe(this,{childList:!0})}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.unbindOutsideClick(),this.slotObserver?.disconnect(),this.containerObserver?.disconnect(),this.removeEventListener("keydown",this.escapeMenu)}syncLocale(){const e=this.getAttribute("aria-label");e&&e!==this.autoNavLabel||(this.autoNavLabel=a("메인 네비게이션"),this.setAttribute("aria-label",this.autoNavLabel));const t=this.querySelector(".designbase-wc-navbar__logo db-logo");t&&t.setAttribute("alt",this.getAttribute("logo-alt")||a("홈")),this.querySelectorAll("[data-navbar-login]").forEach(e=>{e.textContent=a("로그인")}),this.querySelector(".designbase-wc-navbar__mobile-toggle")?.setAttribute("aria-label",a(this.mobileOpen?"메뉴 닫기":"메뉴 열기"))}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(),this.mobileOpen&&(this.mobileOpen=!1,this.render()))},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 t=this.getAttribute("size")||"m",a=this.getAttribute("variant")||"default",n=this.getAttribute("position")||"static";e(this,["designbase-wc-navbar",`designbase-wc-navbar--${i.includes(t)?t:"m"}`,`designbase-wc-navbar--${r.includes(a)?a:"default"}`,`designbase-wc-navbar--${c.includes(n)?n:"static"}`,this.hasAttribute("full-width")&&"designbase-wc-navbar--full-width",this.hasAttribute("shadow")&&"designbase-wc-navbar--shadow",this.mobileOpen&&"designbase-wc-navbar--mobile-open"])}isMegaMenu(e){return Boolean(e.megaMenu&&e.columns?.length)}createNavToggleButton(e,t){const a=document.createElement("button");a.type="button",a.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",e.active&&"designbase-wc-navbar__nav-link--active",e.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),a.disabled=Boolean(e.disabled);const s=resolveIcon(e.icon);s&&a.append(n(s,t)),a.append(document.createTextNode(e.label));const i=n("chevron-down",12);return i.classList.add("designbase-wc-navbar__chevron"),a.append(i),a}createMegaLink(e,t){const a=document.createElement("a");a.href=s(e.href,"#"),a.className=["designbase-wc-navbar__mega-link",e.active&&"designbase-wc-navbar__mega-link--active",e.disabled&&"designbase-wc-navbar__mega-link--disabled"].filter(Boolean).join(" ");const i=resolveIcon(e.icon);if(i){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-link-icon",e.append(n(i,t)),a.append(e)}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=e.label,r.append(c),e.description){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-link-desc",t.textContent=e.description,r.append(t)}return a.append(r),a.addEventListener("click",t=>{t.preventDefault(),e.disabled||this.dispatchItemClick(e,"nav")}),a}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",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(e,t){const a=document.createElement("a");a.href=s(e.href,"#"),a.className="designbase-wc-navbar__mega-featured",e.image&&(a.style.setProperty("--db-navbar-mega-featured-image",`url("${e.image}")`),a.classList.add("designbase-wc-navbar__mega-featured--image"));const i=resolveIcon(e.icon);if(i){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-icon",e.append(n(i,t+4)),a.append(e)}if(e.title){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-title",t.textContent=e.title,a.append(t)}if(e.description){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-desc",t.textContent=e.description,a.append(t)}if(e.ctaLabel){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-cta",t.append(document.createTextNode(e.ctaLabel)),t.append(n("chevron-right",14)),a.append(t)}return a.addEventListener("click",t=>{t.preventDefault(),this.dispatchItemClick({id:`${e.href||"featured"}`,label:e.title||"featured",href:e.href},"nav")}),a}createDesktopNavItem(e,t){if(this.isMegaMenu(e))return this.createMegaMenu(e,t);const a=document.createElement("li");a.className="designbase-wc-navbar__nav-item";if(Boolean(e.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",e.active&&"designbase-wc-navbar__nav-link--active",e.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),r.disabled=Boolean(e.disabled);const c=resolveIcon(e.icon);c&&r.append(n(c,t)),r.append(document.createTextNode(e.label));const d=n("chevron-down",12);d.classList.add("designbase-wc-navbar__chevron"),r.append(d);const o=document.createElement("ul");return o.className="designbase-wc-navbar__dropdown-menu",e.children.forEach(e=>{const a=document.createElement("li"),i=document.createElement("a");i.href=s(e.href,"#"),i.className=["designbase-wc-navbar__dropdown-item",e.active&&"designbase-wc-navbar__dropdown-item--active",e.disabled&&"designbase-wc-navbar__dropdown-item--disabled"].filter(Boolean).join(" ");const r=resolveIcon(e.icon);r&&i.append(n(r,t)),i.append(document.createTextNode(e.label)),i.addEventListener("click",t=>{e.disabled?t.preventDefault():(t.preventDefault(),this.dispatchItemClick(e,"nav"))}),a.append(i),o.append(a)}),i.append(r,o),a.append(i),a}const i=document.createElement("a");i.href=s(e.href,"#"),i.className=["designbase-wc-navbar__nav-link",e.active&&"designbase-wc-navbar__nav-link--active",e.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" ");const r=resolveIcon(e.icon);return r&&i.append(n(r,t)),i.append(document.createTextNode(e.label)),i.addEventListener("click",t=>{e.disabled?t.preventDefault():(t.preventDefault(),this.dispatchItemClick(e,"nav"))}),a.append(i),a}createUserMenuItemElement(e,t,a){const n=document.createElement("db-menu-item");n.setAttribute("label",e.label),n.setAttribute("type","block"),n.setAttribute("menu-style","dropdown"),n.setAttribute("size",t);const i=s(e.href,"");return i&&n.setAttribute("href",i),e.icon&&n.setAttribute("icon",e.icon),e.disabled&&n.setAttribute("disabled",""),n.addEventListener("db-navigate",t=>{e.disabled||(t.preventDefault(),this.mobileOpen=!1,this.dispatchItemClick(e,"mobile"),this.render())}),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,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",t);const c=s(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",""),n&&(r.setAttribute("expandable",""),c&&r.setAttribute("split-expand",""),r.subItems=a.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(n){const t=r.hasAttribute("expanded");this.expandedMobile[e.id]=t;const a=r.querySelector(":scope > .designbase-wc-menu-item__children--accordion");if(a&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){a.getAnimations().forEach(e=>e.cancel());const e=a.scrollHeight+"px";a.animate(t?[{maxHeight:"0px",opacity:0},{maxHeight:e,opacity:1}]:[{maxHeight:e,opacity:1},{maxHeight:"0px",opacity:0}],{duration:240,easing:"cubic-bezier(.22, 1, .36, 1)"})}return}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(){const e=this.querySelector(".designbase-wc-navbar__mobile-menu:not([data-exiting])"),t="true"===this.querySelector(".designbase-wc-navbar__mobile-toggle")?.getAttribute("aria-expanded")!==this.mobileOpen&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches,s=t?Array.from(this.querySelectorAll(".designbase-wc-navbar__mobile-toggle-line")).map(e=>({transform:getComputedStyle(e).transform,opacity:getComputedStyle(e).opacity})):[];this.syncHostClasses(),this.setAttribute("role","navigation"),this.syncLocale();const i=this.getAttribute("size")||"m",r=this.iconSize(i),c=this.parseItems(),d=this.parseItems("user-menu-items"),o=this.parseUserProfile(),l=this.hasAttribute("is-authenticated"),b=this.hasAttribute("show-search"),m=this.querySelector('[slot="brand"]'),u=this.querySelector('[slot="actions"]'),p=this.querySelector('[slot="mobile-footer"]');this.replaceChildren();const h=document.createElement("div");h.className=["designbase-wc-navbar__container",this.hasAttribute("full-width")&&"designbase-wc-navbar__container--full-width"].filter(Boolean).join(" ");const v=document.createElement("div");v.className="designbase-wc-navbar__left";const g=document.createElement("div");g.className="designbase-wc-navbar__brand";const _=document.createElement("div");_.className="designbase-wc-navbar__logo";const f=document.createElement("db-logo"),w=this.getAttribute("logo-src");f.setAttribute("type",w?"custom":"designbase"),w&&f.setAttribute("src",w),f.setAttribute("alt",this.getAttribute("logo-alt")||a("홈")),f.setAttribute("size","s"),f.setAttribute("clickable",""),f.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),_.append(f),g.append(m||_),v.append(g);const E=document.createElement("div");E.className="designbase-wc-navbar__right";const A=document.createElement("div");A.className="designbase-wc-navbar__nav designbase-wc-navbar__nav--desktop";const y=document.createElement("ul");if(y.className="designbase-wc-navbar__nav-list",c.forEach(e=>y.append(this.createDesktopNavItem(e,r))),A.append(y),E.append(A),b){const e=document.createElement("div");e.className="designbase-wc-navbar__search";const t=document.createElement("db-search-bar");t.setAttribute("variant","outlined"),t.setAttribute("size","s"===i?"s":"l"===i?"l":"m"),this.getAttribute("search-placeholder")&&t.setAttribute("placeholder",this.getAttribute("search-placeholder")),this.bindSearchEvents(t),e.append(t),E.append(e)}const N=document.createElement("div");if(N.className="designbase-wc-navbar__user-menu",l&&o){const e=document.createElement("div");e.className="designbase-wc-navbar__user-dropdown";const t=document.createElement("button");t.type="button",t.className="designbase-wc-navbar__user-toggle",t.setAttribute("aria-expanded",String(this.userMenuOpen));const a=document.createElement("db-avatar");this.applyAvatarProfile(a,o,i);const s=document.createElement("span");s.className="designbase-wc-navbar__user-name",s.textContent=o.name,t.append(a,s,n("chevron-down",12)),t.addEventListener("click",()=>{this.userMenuOpen=!this.userMenuOpen,t.setAttribute("aria-expanded",String(this.userMenuOpen)),this.updateUserMenuVisibility()});const r=document.createElement("ul");if(r.className="designbase-wc-navbar__user-dropdown-menu",r.hidden=!this.userMenuOpen,o.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=o.email,e.append(t),r.append(e)}d.forEach(e=>{const t=document.createElement("li");t.append(this.createUserMenuItemElement(e,i,()=>{this.userMenuOpen=!1,this.updateUserMenuVisibility()})),r.append(t)}),e.append(t,r),N.append(e)}else{const e=document.createElement("db-button");e.dataset.navbarLogin="",e.setAttribute("variant","primary"),e.setAttribute("size","s"===i?"s":"l"===i?"l":"m"),e.textContent=a("로그인"),e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),N.append(e)}E.append(u||N);const k=document.createElement("button");k.type="button",k.className="designbase-wc-navbar__mobile-toggle",k.setAttribute("aria-expanded",String(this.mobileOpen)),this.mobileOpen&&k.setAttribute("aria-controls",this.mobileMenuId),k.setAttribute("aria-label",a(this.mobileOpen?"메뉴 닫기":"메뉴 열기"));for(let e=0;e<3;e+=1){const e=document.createElement("span");e.className="designbase-wc-navbar__mobile-toggle-line",k.append(e)}if(k.addEventListener("click",()=>{this.mobileOpen=!this.mobileOpen,this.render(),this.querySelector(".designbase-wc-navbar__mobile-toggle")?.focus()}),h.append(v,E,k),this.append(h),this.mobileOpen){const e=document.createElement("div");if(e.className="designbase-wc-navbar__mobile-menu",e.id=this.mobileMenuId,e.addEventListener("keydown",e=>{"Escape"===e.key&&(this.mobileOpen=!1,this.render(),this.querySelector(".designbase-wc-navbar__mobile-toggle")?.focus())}),b){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",""),this.getAttribute("search-placeholder")&&a.setAttribute("placeholder",this.getAttribute("search-placeholder")),this.bindSearchEvents(a),t.append(a),e.append(t)}const n=document.createElement("div");n.className="designbase-wc-navbar__mobile-nav-list",e.append(n);const s=document.createElement("div");if(s.className="designbase-wc-navbar__mobile-user",l&&o){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-info";const t=document.createElement("db-avatar");this.applyAvatarProfile(t,o,"m");const a=document.createElement("div"),n=document.createElement("div");if(n.className="designbase-wc-navbar__mobile-user-name",n.textContent=o.name,a.append(n),o.email){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-email",e.textContent=o.email,a.append(e)}if(e.append(t,a),s.append(e),d.length){const e=document.createElement("ul");e.className="designbase-wc-navbar__mobile-user-menu",d.forEach(t=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(t,"m",()=>{this.mobileOpen=!1,this.render()})),e.append(a)}),s.append(e)}}else{const e=document.createElement("db-button");e.dataset.navbarLogin="",e.setAttribute("variant","primary"),e.setAttribute("size","m"),e.setAttribute("full-width",""),e.textContent=a("로그인"),e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),s.append(e)}p?(p.hidden=!1,e.append(p),e.addEventListener("click",e=>{e.target instanceof Element&&e.target.closest('[slot="mobile-footer"] a, [slot="mobile-footer"] db-button')&&queueMicrotask(()=>{this.mobileOpen&&(this.mobileOpen=!1,this.render())})})):u||e.append(s),this.append(e),this.renderMobileMenu(),t&&(e.animate([{opacity:0,transform:"translateY(-10px)",clipPath:"inset(0 0 100% 0)"},{opacity:1,transform:"translateY(0)",clipPath:"inset(0)"}],{duration:280,easing:"cubic-bezier(.22, 1, .36, 1)"}),n.animate([{opacity:0,transform:"translateY(-6px)"},{opacity:1,transform:"translateY(0)"}],{duration:240,delay:50,fill:"backwards",easing:"ease-out"}))}else if(t&&e){if(p){const t=p.cloneNode(!0);t.removeAttribute("slot"),e.append(t)}e.dataset.exiting="",e.removeAttribute("id"),e.inert=!0,e.setAttribute("aria-hidden","true"),e.style.pointerEvents="none",this.append(e);e.animate([{opacity:1,transform:"translateY(0)",clipPath:"inset(0)"},{opacity:0,transform:"translateY(-8px)",clipPath:"inset(0 0 100% 0)"}],{duration:180,easing:"ease-in",fill:"forwards"}).onfinish=()=>e.remove()}!this.mobileOpen&&p&&(p.hidden=!0,this.append(p)),t&&k.querySelectorAll(".designbase-wc-navbar__mobile-toggle-line").forEach((e,t)=>{s[t]&&e.animate([s[t],{transform:getComputedStyle(e).transform,opacity:getComputedStyle(e).opacity}],{duration:240,easing:"cubic-bezier(.22, 1, .36, 1)"})})}}DbNavbar.nextId=0,customElements.get("db-navbar")||customElements.define("db-navbar",DbNavbar);export{DbNavbar};

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

@@ -1,3 +1,6 @@
+import './db-button.js';
+import './db-indicator.js';
+
 type OnboardingStep = {
     id: string;
     image?: string;

package/dist/esm/components/db-onboarding-modal.js

@@ -1 +1 @@
-import{inheritThemeScope as t}from"../core/theme-scope.js";import{subscribeDbLocale as e,dbText as i}from"../core/i18n.js";import{createDbIcon as s}from"./db-icons.js";import{createFocusTrap as n}from"../core/focus-trap.js";import{lockScroll as o,unlockScroll as r}from"../core/scroll-lock.js";class DbOnboardingModal extends HTMLElement{constructor(){super(...arguments),this.scrollLocked=!1,this.internalStep=0,this.keyHandler=null,this.isMounted=!1,this.handlePrev=()=>{this.getCurrentStep()>0&&this.goToStep(this.getCurrentStep()-1)},this.handleNext=()=>{const t=this.getSteps(),e=this.getCurrentStep();e>=t.length-1?this.dispatchEvent(new CustomEvent("db-complete",{bubbles:!0,composed:!0})):this.goToStep(e+1)}}static get observedAttributes(){return["open","steps","current-step","show-close-button","show-indicator","indicator-type","indicator-size"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}get steps(){return this.parseSteps()}set steps(t){const e="string"==typeof t?t:JSON.stringify(t);this.getAttribute("steps")!==e&&this.setAttribute("steps",e)}connectedCallback(){this.style.display="contents",this.syncStepFromAttribute(),this.syncOpenState(),this.unsubscribeLocale?.(),this.unsubscribeLocale=e(()=>this.syncLocale())}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.detachKeyHandler(),this.unmount()}attributeChangedCallback(t){this.isConnected&&("open"!==t?("current-step"===t&&this.syncStepFromAttribute(),"steps"!==t?this.isMounted&&this.render():this.isOpenRequested()&&(this.isMounted?this.render():this.syncOpenState())):this.syncOpenState())}isOpenRequested(){return this.open}parseSteps(){const t=this.getAttribute("steps");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}syncStepFromAttribute(){if(!this.hasAttribute("current-step"))return;const t=Number(this.getAttribute("current-step")||0);Number.isFinite(t)&&(this.internalStep=Math.max(0,t))}getSteps(){return this.parseSteps()}getCurrentStep(){const t=this.getSteps();return t.length?Math.min(Math.max(this.internalStep,0),t.length-1):0}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}emitStepChange(t){this.dispatchEvent(new CustomEvent("db-step-change",{bubbles:!0,composed:!0,detail:{step:t}}))}goToStep(t){const e=this.getSteps();if(!e.length)return;const i=Math.min(Math.max(t,0),e.length-1);this.internalStep=i,this.emitStepChange(i),this.render()}attachKeyHandler(){this.keyHandler||(this.keyHandler=t=>{"Escape"!==t.key?"ArrowLeft"===t.key&&this.getCurrentStep()>0?this.handlePrev():"ArrowRight"===t.key&&this.getCurrentStep()<this.getSteps().length-1&&this.handleNext():this.close()},document.addEventListener("keydown",this.keyHandler))}detachKeyHandler(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}syncOpenState(){if(this.isOpenRequested())return this.mount(),void this.attachKeyHandler();this.detachKeyHandler(),this.unmount()}mount(){this.root||(this.root=document.createElement("div"),this.root.className="designbase-wc-onboarding-modal",this.root.setAttribute("role","dialog"),this.root.setAttribute("aria-modal","true"),this.root.tabIndex=-1,this.ensureStructure()),this.root.isConnected||(t(this,this.root),document.body.append(this.root)),this.isMounted=!0,this.render(),this.scrollLocked||(o(),this.scrollLocked=!0),this.root&&!this.focusTrap&&(this.focusTrap=n(this.root),requestAnimationFrame(()=>this.focusTrap?.activate()))}unmount(){this.isMounted=!1,this.focusTrap?.deactivate(),this.focusTrap=void 0,this.root?.remove(),this.scrollLocked&&(this.scrollLocked=!1,r())}ensureStructure(){this.root&&(this.contentEl&&this.root.contains(this.contentEl)||(this.overlayEl=void 0,this.contentEl=void 0,this.closeButtonEl=void 0,this.mainEl=void 0,this.imageWrapEl=void 0,this.imageEl=void 0,this.textEl=void 0,this.titleEl=void 0,this.descriptionEl=void 0,this.navigationEl=void 0,this.prevButtonEl=void 0,this.nextButtonEl=void 0,this.indicatorEl=void 0,this.root.replaceChildren(),this.overlayEl=document.createElement("div"),this.overlayEl.className="designbase-wc-onboarding-modal__overlay",this.overlayEl.addEventListener("click",()=>this.close()),this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-onboarding-modal__content",this.closeButtonEl=document.createElement("button"),this.closeButtonEl.type="button",this.closeButtonEl.className="designbase-wc-onboarding-modal__close-button",this.closeButtonEl.setAttribute("aria-label",i("닫기")),this.closeButtonEl.append(s("close",20)),this.closeButtonEl.addEventListener("click",()=>this.close()),this.mainEl=document.createElement("div"),this.mainEl.className="designbase-wc-onboarding-modal__main",this.imageWrapEl=document.createElement("div"),this.imageWrapEl.className="designbase-wc-onboarding-modal__image",this.imageEl=document.createElement("img"),this.imageWrapEl.append(this.imageEl),this.textEl=document.createElement("div"),this.textEl.className="designbase-wc-onboarding-modal__text",this.titleEl=document.createElement("h2"),this.titleEl.id="onboarding-title",this.titleEl.className="designbase-wc-onboarding-modal__title",this.descriptionEl=document.createElement("p"),this.descriptionEl.id="onboarding-description",this.descriptionEl.className="designbase-wc-onboarding-modal__description",this.textEl.append(this.titleEl,this.descriptionEl),this.mainEl.append(this.imageWrapEl,this.textEl),this.navigationEl=document.createElement("div"),this.navigationEl.className="designbase-wc-onboarding-modal__navigation",this.prevButtonEl=document.createElement("db-button"),this.prevButtonEl.setAttribute("variant","secondary"),this.prevButtonEl.setAttribute("size","m"),this.prevButtonEl.setAttribute("start-icon","chevron-left"),this.prevButtonEl.setAttribute("aria-label",i("이전")),this.prevButtonEl.addEventListener("db-click",this.handlePrev),this.indicatorEl=document.createElement("db-indicator"),this.indicatorEl.addEventListener("db-step-click",t=>{const e=t.detail;this.goToStep(e.index??e.current)}),this.nextButtonEl=document.createElement("db-button"),this.nextButtonEl.setAttribute("variant","primary"),this.nextButtonEl.setAttribute("size","m"),this.nextButtonEl.addEventListener("db-click",this.handleNext),this.navigationEl.append(this.prevButtonEl,this.indicatorEl,this.nextButtonEl),this.contentEl.append(this.closeButtonEl,this.mainEl,this.navigationEl),this.root.append(this.overlayEl,this.contentEl)))}syncLocale(){this.closeButtonEl?.setAttribute("aria-label",i("닫기")),this.prevButtonEl?.setAttribute("aria-label",i("이전")),this.prevButtonEl&&(this.prevButtonEl.textContent=i("이전"));const t=this.getSteps(),e=this.getCurrentStep(),s=i(e===t.length-1?"완료":"다음");this.nextButtonEl&&(this.nextButtonEl.textContent=s,this.nextButtonEl.setAttribute("aria-label",s)),this.imageEl&&t[e]?.image&&!t[e]?.title&&(this.imageEl.alt=i("온보딩 이미지"))}render(){if(!this.root||!this.isMounted)return;this.ensureStructure();const t=this.getSteps(),e=this.getCurrentStep(),s=t[e];if(!s)return;const n=!this.hasAttribute("show-close-button")||"false"!==this.getAttribute("show-close-button"),o=!this.hasAttribute("show-indicator")||"false"!==this.getAttribute("show-indicator"),r=this.getAttribute("indicator-type")||"dots",l=this.getAttribute("indicator-size")||"m",a=0===e,h=e===t.length-1;if(this.root.setAttribute("aria-labelledby","onboarding-title"),this.root.setAttribute("aria-describedby","onboarding-description"),this.closeButtonEl&&(this.closeButtonEl.style.display=n?"":"none"),this.imageWrapEl&&this.imageEl&&(s.image?(this.imageEl.src=s.image,this.imageEl.alt=s.title||i("온보딩 이미지"),this.imageWrapEl.style.display=""):this.imageWrapEl.style.display="none"),this.titleEl&&(this.titleEl.textContent=s.title||"",this.titleEl.style.display=s.title?"":"none"),this.descriptionEl&&(this.descriptionEl.textContent=s.description||"",this.descriptionEl.style.display=s.description?"":"none"),this.prevButtonEl&&(this.prevButtonEl.textContent=i("이전"),a?this.prevButtonEl.setAttribute("disabled",""):this.prevButtonEl.removeAttribute("disabled")),this.nextButtonEl&&(this.nextButtonEl.textContent=i(h?"완료":"다음"),this.nextButtonEl.setAttribute("aria-label",i(h?"완료":"다음")),h?this.nextButtonEl.removeAttribute("end-icon"):this.nextButtonEl.setAttribute("end-icon","chevron-right")),this.indicatorEl){const i=o&&t.length>1;this.indicatorEl.style.display=i?"":"none",i&&(this.indicatorEl.setAttribute("total",String(t.length)),this.indicatorEl.setAttribute("current",String(e)),this.indicatorEl.setAttribute("indicator-type",r),this.indicatorEl.setAttribute("size",l),this.indicatorEl.setAttribute("clickable",""))}}}customElements.get("db-onboarding-modal")||customElements.define("db-onboarding-modal",DbOnboardingModal);export{DbOnboardingModal};
+import"./db-button.js";import"./db-indicator.js";import{inheritThemeScope as t}from"../core/theme-scope.js";import{subscribeDbLocale as e,dbText as i}from"../core/i18n.js";import{createDbIcon as s}from"./db-icons.js";import{createFocusTrap as n}from"../core/focus-trap.js";import{lockScroll as o,unlockScroll as r}from"../core/scroll-lock.js";class DbOnboardingModal extends HTMLElement{constructor(){super(...arguments),this.scrollLocked=!1,this.internalStep=0,this.keyHandler=null,this.isMounted=!1,this.handlePrev=()=>{this.getCurrentStep()>0&&this.goToStep(this.getCurrentStep()-1)},this.handleNext=()=>{const t=this.getSteps(),e=this.getCurrentStep();e>=t.length-1?this.dispatchEvent(new CustomEvent("db-complete",{bubbles:!0,composed:!0})):this.goToStep(e+1)}}static get observedAttributes(){return["open","steps","current-step","show-close-button","show-indicator","indicator-type","indicator-size"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}get steps(){return this.parseSteps()}set steps(t){const e="string"==typeof t?t:JSON.stringify(t);this.getAttribute("steps")!==e&&this.setAttribute("steps",e)}connectedCallback(){this.style.display="contents",this.syncStepFromAttribute(),this.syncOpenState(),this.unsubscribeLocale?.(),this.unsubscribeLocale=e(()=>this.syncLocale())}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.detachKeyHandler(),this.unmount()}attributeChangedCallback(t){this.isConnected&&("open"!==t?("current-step"===t&&this.syncStepFromAttribute(),"steps"!==t?this.isMounted&&this.render():this.isOpenRequested()&&(this.isMounted?this.render():this.syncOpenState())):this.syncOpenState())}isOpenRequested(){return this.open}parseSteps(){const t=this.getAttribute("steps");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}syncStepFromAttribute(){if(!this.hasAttribute("current-step"))return;const t=Number(this.getAttribute("current-step")||0);Number.isFinite(t)&&(this.internalStep=Math.max(0,t))}getSteps(){return this.parseSteps()}getCurrentStep(){const t=this.getSteps();return t.length?Math.min(Math.max(this.internalStep,0),t.length-1):0}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}emitStepChange(t){this.dispatchEvent(new CustomEvent("db-step-change",{bubbles:!0,composed:!0,detail:{step:t}}))}goToStep(t){const e=this.getSteps();if(!e.length)return;const i=Math.min(Math.max(t,0),e.length-1);this.internalStep=i,this.emitStepChange(i),this.render()}attachKeyHandler(){this.keyHandler||(this.keyHandler=t=>{"Escape"!==t.key?"ArrowLeft"===t.key&&this.getCurrentStep()>0?this.handlePrev():"ArrowRight"===t.key&&this.getCurrentStep()<this.getSteps().length-1&&this.handleNext():this.close()},document.addEventListener("keydown",this.keyHandler))}detachKeyHandler(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}syncOpenState(){if(this.isOpenRequested())return this.mount(),void this.attachKeyHandler();this.detachKeyHandler(),this.unmount()}mount(){this.root||(this.root=document.createElement("div"),this.root.className="designbase-wc-onboarding-modal",this.root.setAttribute("role","dialog"),this.root.setAttribute("aria-modal","true"),this.root.tabIndex=-1,this.ensureStructure()),this.root.isConnected||(t(this,this.root),document.body.append(this.root)),this.isMounted=!0,this.render(),this.scrollLocked||(o(),this.scrollLocked=!0),this.root&&!this.focusTrap&&(this.focusTrap=n(this.root),requestAnimationFrame(()=>this.focusTrap?.activate()))}unmount(){this.isMounted=!1,this.focusTrap?.deactivate(),this.focusTrap=void 0,this.root?.remove(),this.scrollLocked&&(this.scrollLocked=!1,r())}ensureStructure(){this.root&&(this.contentEl&&this.root.contains(this.contentEl)||(this.overlayEl=void 0,this.contentEl=void 0,this.closeButtonEl=void 0,this.mainEl=void 0,this.imageWrapEl=void 0,this.imageEl=void 0,this.textEl=void 0,this.titleEl=void 0,this.descriptionEl=void 0,this.navigationEl=void 0,this.prevButtonEl=void 0,this.nextButtonEl=void 0,this.indicatorEl=void 0,this.root.replaceChildren(),this.overlayEl=document.createElement("div"),this.overlayEl.className="designbase-wc-onboarding-modal__overlay",this.overlayEl.addEventListener("click",()=>this.close()),this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-onboarding-modal__content",this.closeButtonEl=document.createElement("button"),this.closeButtonEl.type="button",this.closeButtonEl.className="designbase-wc-onboarding-modal__close-button",this.closeButtonEl.setAttribute("aria-label",i("닫기")),this.closeButtonEl.append(s("close",20)),this.closeButtonEl.addEventListener("click",()=>this.close()),this.mainEl=document.createElement("div"),this.mainEl.className="designbase-wc-onboarding-modal__main",this.imageWrapEl=document.createElement("div"),this.imageWrapEl.className="designbase-wc-onboarding-modal__image",this.imageEl=document.createElement("img"),this.imageWrapEl.append(this.imageEl),this.textEl=document.createElement("div"),this.textEl.className="designbase-wc-onboarding-modal__text",this.titleEl=document.createElement("h2"),this.titleEl.id="onboarding-title",this.titleEl.className="designbase-wc-onboarding-modal__title",this.descriptionEl=document.createElement("p"),this.descriptionEl.id="onboarding-description",this.descriptionEl.className="designbase-wc-onboarding-modal__description",this.textEl.append(this.titleEl,this.descriptionEl),this.mainEl.append(this.imageWrapEl,this.textEl),this.navigationEl=document.createElement("div"),this.navigationEl.className="designbase-wc-onboarding-modal__navigation",this.prevButtonEl=document.createElement("db-button"),this.prevButtonEl.setAttribute("variant","secondary"),this.prevButtonEl.setAttribute("size","m"),this.prevButtonEl.setAttribute("start-icon","chevron-left"),this.prevButtonEl.setAttribute("aria-label",i("이전")),this.prevButtonEl.addEventListener("db-click",this.handlePrev),this.indicatorEl=document.createElement("db-indicator"),this.indicatorEl.addEventListener("db-step-click",t=>{const e=t.detail;this.goToStep(e.index??e.current)}),this.nextButtonEl=document.createElement("db-button"),this.nextButtonEl.setAttribute("variant","primary"),this.nextButtonEl.setAttribute("size","m"),this.nextButtonEl.addEventListener("db-click",this.handleNext),this.navigationEl.append(this.prevButtonEl,this.indicatorEl,this.nextButtonEl),this.contentEl.append(this.closeButtonEl,this.mainEl,this.navigationEl),this.root.append(this.overlayEl,this.contentEl)))}syncLocale(){this.closeButtonEl?.setAttribute("aria-label",i("닫기")),this.prevButtonEl?.setAttribute("aria-label",i("이전")),this.prevButtonEl&&(this.prevButtonEl.textContent=i("이전"));const t=this.getSteps(),e=this.getCurrentStep(),s=i(e===t.length-1?"완료":"다음");this.nextButtonEl&&(this.nextButtonEl.textContent=s,this.nextButtonEl.setAttribute("aria-label",s)),this.imageEl&&t[e]?.image&&!t[e]?.title&&(this.imageEl.alt=i("온보딩 이미지"))}render(){if(!this.root||!this.isMounted)return;this.ensureStructure();const t=this.getSteps(),e=this.getCurrentStep(),s=t[e];if(!s)return;const n=!this.hasAttribute("show-close-button")||"false"!==this.getAttribute("show-close-button"),o=!this.hasAttribute("show-indicator")||"false"!==this.getAttribute("show-indicator"),r=this.getAttribute("indicator-type")||"dots",l=this.getAttribute("indicator-size")||"m",a=0===e,h=e===t.length-1;if(this.root.setAttribute("aria-labelledby","onboarding-title"),this.root.setAttribute("aria-describedby","onboarding-description"),this.closeButtonEl&&(this.closeButtonEl.style.display=n?"":"none"),this.imageWrapEl&&this.imageEl&&(s.image?(this.imageEl.src=s.image,this.imageEl.alt=s.title||i("온보딩 이미지"),this.imageWrapEl.style.display=""):this.imageWrapEl.style.display="none"),this.titleEl&&(this.titleEl.textContent=s.title||"",this.titleEl.style.display=s.title?"":"none"),this.descriptionEl&&(this.descriptionEl.textContent=s.description||"",this.descriptionEl.style.display=s.description?"":"none"),this.prevButtonEl&&(this.prevButtonEl.textContent=i("이전"),a?this.prevButtonEl.setAttribute("disabled",""):this.prevButtonEl.removeAttribute("disabled")),this.nextButtonEl&&(this.nextButtonEl.textContent=i(h?"완료":"다음"),this.nextButtonEl.setAttribute("aria-label",i(h?"완료":"다음")),h?this.nextButtonEl.removeAttribute("end-icon"):this.nextButtonEl.setAttribute("end-icon","chevron-right")),this.indicatorEl){const i=o&&t.length>1;this.indicatorEl.style.display=i?"":"none",i&&(this.indicatorEl.setAttribute("total",String(t.length)),this.indicatorEl.setAttribute("current",String(e)),this.indicatorEl.setAttribute("indicator-type",r),this.indicatorEl.setAttribute("size",l),this.indicatorEl.setAttribute("clickable",""))}}}customElements.get("db-onboarding-modal")||customElements.define("db-onboarding-modal",DbOnboardingModal);export{DbOnboardingModal};

package/dist/esm/components/db-page-header.d.ts

@@ -1,3 +1,6 @@
+import './db-breadcrumbs.js';
+import './db-button.js';
+import './db-tabs.js';
 import './db-badge.js';
 
 interface DbPageHeaderTabItem {

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

@@ -1 +1 @@
-import{sanitizeHref as e}from"../core/safe-url.js";import"./db-badge.js";import{PAGE_HEADER_VARIANTS as t,PAGE_HEADER_ALIGNS as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const s=new WeakMap;class DbPageHeader extends HTMLElement{constructor(){super(...arguments),this.internalTabId="",this.isRendering=!1,this.compact=!1,this.motionArmed=!1,this.expandedHeight=0,this.settling=!1,this.updateStickySpace=()=>{if(!this.stickySpacer)return;const e=this.getBoundingClientRect().height;this.compact||this.settling||(this.expandedHeight=e),this.stickySpacer.style.height=`${Math.max(0,this.expandedHeight-e)}px`},this.stickyOffset=0,this.refreshSticky=()=>this.observeSticky(),this.refreshOffset=()=>{this.stickyMarker&&(parseFloat(getComputedStyle(this).top)||0)!==this.stickyOffset&&this.observeSticky()},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 i=window.history.state?.idx;if("number"==typeof i&&i>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,i=t?.selectedId??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.hasAttribute("selected-tab-id")||(this.internalTabId=i),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:i}}))}}static get observedAttributes(){return["title","subtitle","subtitle-href","description","breadcrumbs","variant","show-back-button","back-fallback-href","back-label","tabs","selected-tab-id","default-selected-tab-id","align","sticky","compact-on-scroll","background","count"]}observeSticky(){if(this.stickyObserver?.disconnect(),!this.hasAttribute("sticky")||!this.hasAttribute("compact-on-scroll"))return this.stickyMarker?.remove(),this.stickyMarker=void 0,this.stickySpacer?.remove(),this.stickySpacer=void 0,this.sizeObserver?.disconnect(),void this.setCompact(!1);this.stickyMarker||(this.stickyMarker=document.createElement("span"),this.stickyMarker.setAttribute("aria-hidden","true"),this.stickyMarker.style.cssText="display:block;height:1px;margin-bottom:-1px;pointer-events:none;overflow-anchor:none",this.before(this.stickyMarker)),this.stickySpacer||(this.stickySpacer=document.createElement("span"),this.stickySpacer.setAttribute("aria-hidden","true"),this.stickySpacer.style.cssText="display:block;height:0;pointer-events:none;overflow-anchor:none",this.after(this.stickySpacer),this.expandedHeight=this.getBoundingClientRect().height,this.sizeObserver=new ResizeObserver(this.updateStickySpace),this.sizeObserver.observe(this));let e=this.parentElement;for(;e&&e!==document.body&&e!==document.documentElement&&!/(auto|scroll)/.test(getComputedStyle(e).overflowY);)e=e.parentElement;e!==document.body&&e!==document.documentElement||(e=null),this.scrollRoot=e||document.documentElement;const t=parseFloat(getComputedStyle(this).top)||0;this.stickyOffset=t,this.stickyObserver=new IntersectionObserver(([e])=>{this.setCompact(!e.isIntersecting&&e.boundingClientRect.top<(e.rootBounds?.top??t)),this.motionArmed||(this.motionArmed=!0,requestAnimationFrame(()=>requestAnimationFrame(()=>{this.isConnected&&this.motionArmed&&this.setAttribute("data-motion","")})))},{root:e,rootMargin:`-${t}px 0px 0px 0px`,threshold:0}),this.stickyObserver.observe(this.stickyMarker)}setCompact(e){if(this.compact===e)return;if(void 0!==this.motionFrame&&cancelAnimationFrame(this.motionFrame),this.releaseAnchor?.(),this.releaseAnchor=void 0,e&&!this.settling&&(this.expandedHeight=this.getBoundingClientRect().height),this.compact=e,this.settling=!!this.stickySpacer,this.settling&&(this.releaseAnchor=function holdScrollAnchor(e){let t=s.get(e);return t||(t={count:0,value:e.style.getPropertyValue("overflow-anchor"),priority:e.style.getPropertyPriority("overflow-anchor")},s.set(e,t),e.style.setProperty("overflow-anchor","none")),t.count++,()=>{const t=s.get(e);!t||--t.count>0||("none"===e.style.getPropertyValue("overflow-anchor")&&(t.value?e.style.setProperty("overflow-anchor",t.value,t.priority):e.style.removeProperty("overflow-anchor")),s.delete(e))}}(this.scrollRoot||document.documentElement)),this.toggleAttribute("data-compact",e),this.updateStickySpace(),!this.settling)return;let t=-1,i=0;const settle=()=>{this.updateStickySpace();const e=this.getBoundingClientRect().height,s=this.getAnimations({subtree:!0}).some(e=>e instanceof CSSTransition&&"running"===e.playState);i=!s&&Math.abs(e-t)<.1?i+1:0,t=e,i<2?this.motionFrame=requestAnimationFrame(settle):(this.motionFrame=void 0,this.settling=!1,this.updateStickySpace(),this.releaseAnchor?.(),this.releaseAnchor=void 0)};this.motionFrame=requestAnimationFrame(settle)}connectedCallback(){this.syncDefaultTab(),this.render(),this.observeSticky(),window.addEventListener("resize",this.refreshSticky),window.addEventListener("scroll",this.refreshOffset,!0),this.childObserver=new MutationObserver(()=>{this.isRendering||this.hasPendingSlottedChildren()&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.childObserver?.disconnect(),this.stickyObserver?.disconnect(),this.sizeObserver?.disconnect(),void 0!==this.motionFrame&&cancelAnimationFrame(this.motionFrame),this.motionFrame=void 0,this.settling=!1,this.compact=!1,this.motionArmed=!1,this.removeAttribute("data-compact"),this.removeAttribute("data-motion"),this.releaseAnchor?.(),this.releaseAnchor=void 0,this.stickySpacer?.remove(),this.stickySpacer=void 0,this.stickyMarker?.remove(),this.stickyMarker=void 0,window.removeEventListener("resize",this.refreshSticky),window.removeEventListener("scroll",this.refreshOffset,!0)}attributeChangedCallback(e){this.isConnected&&("default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),this.render(),"sticky"!==e&&"compact-on-scroll"!==e||this.observeSticky())}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 i.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 i=this.querySelector(".designbase-wc-page-header__actions");return i?.children.length?Array.from(i.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 i=document.createElement("div");if(i.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)),i.append(t)}if(t.length){const e=document.createElement("div");e.className="designbase-wc-page-header__cta",t.forEach(t=>e.append(t)),i.append(e)}return i}collectDescriptionSlot(){const e=this.querySelector(':scope > [slot="description"]');if(e)return e;const t=this.querySelector(":scope .designbase-wc-page-header__description"),i=t?.firstElementChild;return i||null}renderTitleBlock(t){const i=document.createDocumentFragment(),s=this.getAttribute("title")?.trim()||"",r=this.getAttribute("subtitle")?.trim()||"",n=this.getAttribute("description")?.trim()||"",a=Boolean(t&&(t.textContent?.trim()||t.children.length));if(s){const e=document.createElement("h1");if(e.className="designbase-wc-page-header__title",e.textContent=s,this.hasAttribute("count")){const t=document.createElement("db-badge");t.setAttribute("variant","secondary"),t.setAttribute("size","s"),t.setAttribute("aria-label",this.getAttribute("count")||"0"),t.textContent=this.getAttribute("count"),e.append(t)}i.append(e)}if(r){const t=e(this.getAttribute("subtitle-href"),""),s=document.createElement(t?"a":"h2");s instanceof HTMLAnchorElement&&(s.href=t),s.className="designbase-wc-page-header__subtitle",s.textContent=r,i.append(s)}if(a||n){const e=document.createElement("div");e.className="designbase-wc-page-header__description",a&&t?e.append(t):e.textContent=n,i.append(e)}return i}render(){this.isRendering=!0;const e=this.collectActions(),t=this.collectMeta(),i=this.collectLeading(),s=this.collectDescriptionSlot(),r="minimal"===this.getVariant(),n=this.getAlign(),a=this.parseBreadcrumbs(),c=this.parseTabs(),o=c.length>0,d=this.hasAttribute("show-back-button");if(this.className=["designbase-wc-page-header",r?"designbase-wc-page-header--minimal":`designbase-wc-page-header--${n}`,r&&o?"designbase-wc-page-header--has-tabs":""].filter(Boolean).join(" "),this.replaceChildren(),this.setCompact(this.compact),a.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(a)),e.append(t),this.append(e)}const h=document.createElement("div");h.className="designbase-wc-page-header__main";const l=document.createElement("div");if(l.className="designbase-wc-page-header__content",i.length||r&&d){const e=document.createElement("div");if(e.className="designbase-wc-page-header__title-row",i.length){const t=document.createElement("div");t.className="designbase-wc-page-header__leading",i.forEach(e=>t.append(e)),e.append(t)}if(d){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(s)),e.append(t),l.append(e)}else l.append(this.renderTitleBlock(s));if(h.append(l),r){const i=this.renderMinimalAside(t,e);i&&h.append(i)}if(this.append(h),!r&&e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__actions",e.forEach(e=>t.append(e)),this.append(t)}if(!r&&t.length){const e=document.createElement("div");e.className="designbase-wc-page-header__meta",t.forEach(t=>e.append(t)),this.append(e)}this.renderMinimalTabs(r,o,c),queueMicrotask(()=>{this.isRendering=!1})}renderMinimalTabs(e,t,i){if(!e||!t)return;const s=document.createElement("div");s.className="designbase-wc-page-header__toolbar";const r=document.createElement("div");r.className="designbase-wc-page-header__tabs";const n=document.createElement("db-tabs");n.setAttribute("size","m"),n.setAttribute("items",JSON.stringify(i)),n.setAttribute("selected-id",this.getActiveTabId()),n.addEventListener("db-change",this.handleTabChange),r.append(n),s.append(r),this.append(s)}}customElements.get("db-page-header")||customElements.define("db-page-header",DbPageHeader);export{DbPageHeader};
+import"./db-breadcrumbs.js";import"./db-button.js";import"./db-tabs.js";import{sanitizeHref as e}from"../core/safe-url.js";import"./db-badge.js";import{PAGE_HEADER_VARIANTS as t,PAGE_HEADER_ALIGNS as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const s=new WeakMap;class DbPageHeader extends HTMLElement{constructor(){super(...arguments),this.internalTabId="",this.isRendering=!1,this.compact=!1,this.motionArmed=!1,this.expandedHeight=0,this.settling=!1,this.updateStickySpace=()=>{if(!this.stickySpacer)return;const e=this.getBoundingClientRect().height;this.compact||this.settling||(this.expandedHeight=e),this.stickySpacer.style.height=`${Math.max(0,this.expandedHeight-e)}px`},this.stickyOffset=0,this.refreshSticky=()=>this.observeSticky(),this.refreshOffset=()=>{this.stickyMarker&&(parseFloat(getComputedStyle(this).top)||0)!==this.stickyOffset&&this.observeSticky()},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 i=window.history.state?.idx;if("number"==typeof i&&i>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,i=t?.selectedId??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.hasAttribute("selected-tab-id")||(this.internalTabId=i),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:i}}))}}static get observedAttributes(){return["title","subtitle","subtitle-href","description","breadcrumbs","variant","show-back-button","back-fallback-href","back-label","tabs","selected-tab-id","default-selected-tab-id","align","sticky","compact-on-scroll","background","count"]}observeSticky(){if(this.stickyObserver?.disconnect(),!this.hasAttribute("sticky")||!this.hasAttribute("compact-on-scroll"))return this.stickyMarker?.remove(),this.stickyMarker=void 0,this.stickySpacer?.remove(),this.stickySpacer=void 0,this.sizeObserver?.disconnect(),void this.setCompact(!1);this.stickyMarker||(this.stickyMarker=document.createElement("span"),this.stickyMarker.setAttribute("aria-hidden","true"),this.stickyMarker.style.cssText="display:block;height:1px;margin-bottom:-1px;pointer-events:none;overflow-anchor:none",this.before(this.stickyMarker)),this.stickySpacer||(this.stickySpacer=document.createElement("span"),this.stickySpacer.setAttribute("aria-hidden","true"),this.stickySpacer.style.cssText="display:block;height:0;pointer-events:none;overflow-anchor:none",this.after(this.stickySpacer),this.expandedHeight=this.getBoundingClientRect().height,this.sizeObserver=new ResizeObserver(this.updateStickySpace),this.sizeObserver.observe(this));let e=this.parentElement;for(;e&&e!==document.body&&e!==document.documentElement&&!/(auto|scroll)/.test(getComputedStyle(e).overflowY);)e=e.parentElement;e!==document.body&&e!==document.documentElement||(e=null),this.scrollRoot=e||document.documentElement;const t=parseFloat(getComputedStyle(this).top)||0;this.stickyOffset=t,this.stickyObserver=new IntersectionObserver(([e])=>{this.setCompact(!e.isIntersecting&&e.boundingClientRect.top<(e.rootBounds?.top??t)),this.motionArmed||(this.motionArmed=!0,requestAnimationFrame(()=>requestAnimationFrame(()=>{this.isConnected&&this.motionArmed&&this.setAttribute("data-motion","")})))},{root:e,rootMargin:`-${t}px 0px 0px 0px`,threshold:0}),this.stickyObserver.observe(this.stickyMarker)}setCompact(e){if(this.compact===e)return;if(void 0!==this.motionFrame&&cancelAnimationFrame(this.motionFrame),this.releaseAnchor?.(),this.releaseAnchor=void 0,e&&!this.settling&&(this.expandedHeight=this.getBoundingClientRect().height),this.compact=e,this.settling=!!this.stickySpacer,this.settling&&(this.releaseAnchor=function holdScrollAnchor(e){let t=s.get(e);return t||(t={count:0,value:e.style.getPropertyValue("overflow-anchor"),priority:e.style.getPropertyPriority("overflow-anchor")},s.set(e,t),e.style.setProperty("overflow-anchor","none")),t.count++,()=>{const t=s.get(e);!t||--t.count>0||("none"===e.style.getPropertyValue("overflow-anchor")&&(t.value?e.style.setProperty("overflow-anchor",t.value,t.priority):e.style.removeProperty("overflow-anchor")),s.delete(e))}}(this.scrollRoot||document.documentElement)),this.toggleAttribute("data-compact",e),this.updateStickySpace(),!this.settling)return;let t=-1,i=0;const settle=()=>{this.updateStickySpace();const e=this.getBoundingClientRect().height,s=this.getAnimations({subtree:!0}).some(e=>e instanceof CSSTransition&&"running"===e.playState);i=!s&&Math.abs(e-t)<.1?i+1:0,t=e,i<2?this.motionFrame=requestAnimationFrame(settle):(this.motionFrame=void 0,this.settling=!1,this.updateStickySpace(),this.releaseAnchor?.(),this.releaseAnchor=void 0)};this.motionFrame=requestAnimationFrame(settle)}connectedCallback(){this.syncDefaultTab(),this.render(),this.observeSticky(),window.addEventListener("resize",this.refreshSticky),window.addEventListener("scroll",this.refreshOffset,!0),this.childObserver=new MutationObserver(()=>{this.isRendering||this.hasPendingSlottedChildren()&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.childObserver?.disconnect(),this.stickyObserver?.disconnect(),this.sizeObserver?.disconnect(),void 0!==this.motionFrame&&cancelAnimationFrame(this.motionFrame),this.motionFrame=void 0,this.settling=!1,this.compact=!1,this.motionArmed=!1,this.removeAttribute("data-compact"),this.removeAttribute("data-motion"),this.releaseAnchor?.(),this.releaseAnchor=void 0,this.stickySpacer?.remove(),this.stickySpacer=void 0,this.stickyMarker?.remove(),this.stickyMarker=void 0,window.removeEventListener("resize",this.refreshSticky),window.removeEventListener("scroll",this.refreshOffset,!0)}attributeChangedCallback(e){this.isConnected&&("default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),this.render(),"sticky"!==e&&"compact-on-scroll"!==e||this.observeSticky())}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 i.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 i=this.querySelector(".designbase-wc-page-header__actions");return i?.children.length?Array.from(i.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 i=document.createElement("div");if(i.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)),i.append(t)}if(t.length){const e=document.createElement("div");e.className="designbase-wc-page-header__cta",t.forEach(t=>e.append(t)),i.append(e)}return i}collectDescriptionSlot(){const e=this.querySelector(':scope > [slot="description"]');if(e)return e;const t=this.querySelector(":scope .designbase-wc-page-header__description"),i=t?.firstElementChild;return i||null}renderTitleBlock(t){const i=document.createDocumentFragment(),s=this.getAttribute("title")?.trim()||"",r=this.getAttribute("subtitle")?.trim()||"",n=this.getAttribute("description")?.trim()||"",a=Boolean(t&&(t.textContent?.trim()||t.children.length));if(s){const e=document.createElement("h1");if(e.className="designbase-wc-page-header__title",e.textContent=s,this.hasAttribute("count")){const t=document.createElement("db-badge");t.setAttribute("variant","secondary"),t.setAttribute("size","s"),t.setAttribute("aria-label",this.getAttribute("count")||"0"),t.textContent=this.getAttribute("count"),e.append(t)}i.append(e)}if(r){const t=e(this.getAttribute("subtitle-href"),""),s=document.createElement(t?"a":"h2");s instanceof HTMLAnchorElement&&(s.href=t),s.className="designbase-wc-page-header__subtitle",s.textContent=r,i.append(s)}if(a||n){const e=document.createElement("div");e.className="designbase-wc-page-header__description",a&&t?e.append(t):e.textContent=n,i.append(e)}return i}render(){this.isRendering=!0;const e=this.collectActions(),t=this.collectMeta(),i=this.collectLeading(),s=this.collectDescriptionSlot(),r="minimal"===this.getVariant(),n=this.getAlign(),a=this.parseBreadcrumbs(),c=this.parseTabs(),o=c.length>0,d=this.hasAttribute("show-back-button");if(this.className=["designbase-wc-page-header",r?"designbase-wc-page-header--minimal":`designbase-wc-page-header--${n}`,r&&o?"designbase-wc-page-header--has-tabs":""].filter(Boolean).join(" "),this.replaceChildren(),this.setCompact(this.compact),a.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(a)),e.append(t),this.append(e)}const h=document.createElement("div");h.className="designbase-wc-page-header__main";const l=document.createElement("div");if(l.className="designbase-wc-page-header__content",i.length||r&&d){const e=document.createElement("div");if(e.className="designbase-wc-page-header__title-row",i.length){const t=document.createElement("div");t.className="designbase-wc-page-header__leading",i.forEach(e=>t.append(e)),e.append(t)}if(d){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(s)),e.append(t),l.append(e)}else l.append(this.renderTitleBlock(s));if(h.append(l),r){const i=this.renderMinimalAside(t,e);i&&h.append(i)}if(this.append(h),!r&&e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__actions",e.forEach(e=>t.append(e)),this.append(t)}if(!r&&t.length){const e=document.createElement("div");e.className="designbase-wc-page-header__meta",t.forEach(t=>e.append(t)),this.append(e)}this.renderMinimalTabs(r,o,c),queueMicrotask(()=>{this.isRendering=!1})}renderMinimalTabs(e,t,i){if(!e||!t)return;const s=document.createElement("div");s.className="designbase-wc-page-header__toolbar";const r=document.createElement("div");r.className="designbase-wc-page-header__tabs";const n=document.createElement("db-tabs");n.setAttribute("size","m"),n.setAttribute("items",JSON.stringify(i)),n.setAttribute("selected-id",this.getActiveTabId()),n.addEventListener("db-change",this.handleTabChange),r.append(n),s.append(r),this.append(s)}}customElements.get("db-page-header")||customElements.define("db-page-header",DbPageHeader);export{DbPageHeader};

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

@@ -1,3 +1,5 @@
+import './db-select.js';
+
 declare class DbPagination extends HTMLElement {
     static get observedAttributes(): string[];
     get currentPage(): number;

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

@@ -1 +1 @@
-import{dbText as t,dbFormat as e}from"../core/i18n.js";import{createDbIcon as a}from"./db-icons.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{PAGINATION_SIZES as n,PAGINATION_VARIANTS as s}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 e=i(this.getAttribute("size"),n,"m"),a=i(this.getAttribute("variant"),s,"default"),r=this.getAttribute("alignment")||"center",o=this.hasAttribute("disabled"),c=this.hasAttribute("show-first-last"),l="false"!==this.getAttribute("show-previous-next"),g=this.hasAttribute("show-page-size-selector"),u=this.hasAttribute("show-total"),b=this.hasAttribute("full-width")||g||u,d=Number(this.getAttribute("total-items")||0),p=Number(this.getAttribute("page-size")||10),m=this.currentPage,h=this.totalPages,A=m<=1,w=m>=h;this.className=["designbase-wc-pagination",`designbase-wc-pagination--${e}`,`designbase-wc-pagination--${a}`,`designbase-wc-pagination--${r}`,o&&"designbase-wc-pagination--disabled",b&&"designbase-wc-pagination--full-width"].filter(Boolean).join(" "),this.setAttribute("role","navigation"),this.setAttribute("aria-label",t("페이지 네비게이션")),this.replaceChildren();const f=document.createElement("div");if(f.className=["designbase-wc-pagination__container",b&&"designbase-wc-pagination__container--full-width"].filter(Boolean).join(" "),u&&d>0){const t=document.createElement("div");t.className="designbase-wc-pagination__total",t.textContent=this.getTotalLabel(d,p,m),f.append(t)}const _=document.createElement("nav");_.className="designbase-wc-pagination__nav",_.setAttribute("aria-label",t("페이지 네비게이션"));const N=document.createElement("ul");N.className="designbase-wc-pagination__list",c&&!A&&N.append(this.createIconButton("arrow-bar-left",1,"첫 페이지로 이동","first")),l&&!A&&N.append(this.createIconButton("chevron-left",m-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 N.append(t)}"number"==typeof t&&N.append(this.createPageButton(t,o))}),l&&!w&&N.append(this.createIconButton("chevron-right",m+1,"다음 페이지로 이동","next")),c&&!w&&N.append(this.createIconButton("arrow-bar-right",h,"마지막 페이지로 이동","last")),_.append(N),f.append(_),g&&f.append(this.createPageSizeSelector(e,p,o)),this.append(f)}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(e,a,i){const n=document.createElement("div");n.className="designbase-wc-pagination__page-size";const s=document.createElement("label");s.className="designbase-wc-pagination__page-size-label";const r=document.createElement("span");r.className="designbase-wc-pagination__page-size-text",r.textContent=t("페이지당");const o=document.createElement("db-select");return o.className="designbase-wc-pagination__page-size-select",o.setAttribute("size",e),o.setAttribute("show-clear-button","false"),o.setAttribute("searchable","false"),o.setAttribute("options",JSON.stringify(this.getPageSizeOptions().map(t=>({value:String(t),label:String(t)})))),o.setAttribute("value",String(a)),i&&o.setAttribute("disabled",""),o.addEventListener("db-change",t=>{const e=t.detail,i=Number(e?.value);Number.isNaN(i)||i===a||(this.setAttribute("page-size",String(i)),this.dispatchEvent(new CustomEvent("db-page-size-change",{detail:{pageSize:i},bubbles:!0,composed:!0})))}),s.append(r,o),n.append(s),n}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,a){const i=t===this.currentPage,n=document.createElement("li");n.className="designbase-wc-pagination__item";const s=document.createElement("button");return s.type="button",s.className=["designbase-wc-pagination__button",i&&"designbase-wc-pagination__button--active"].filter(Boolean).join(" "),s.textContent=String(t),s.disabled=a,i&&s.setAttribute("aria-current","page"),s.setAttribute("aria-label",e("페이지 {0}로 이동",[t])),s.addEventListener("click",()=>this.select(t)),n.append(s),n}createIconButton(t,e,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(a(t,this.iconSize())),r.addEventListener("click",()=>this.select(e)),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"./db-select.js";import{dbText as t,dbFormat as e}from"../core/i18n.js";import{createDbIcon as a}from"./db-icons.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{PAGINATION_SIZES as n,PAGINATION_VARIANTS as s}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 e=i(this.getAttribute("size"),n,"m"),a=i(this.getAttribute("variant"),s,"default"),r=this.getAttribute("alignment")||"center",o=this.hasAttribute("disabled"),c=this.hasAttribute("show-first-last"),l="false"!==this.getAttribute("show-previous-next"),g=this.hasAttribute("show-page-size-selector"),u=this.hasAttribute("show-total"),b=this.hasAttribute("full-width")||g||u,d=Number(this.getAttribute("total-items")||0),p=Number(this.getAttribute("page-size")||10),m=this.currentPage,h=this.totalPages,A=m<=1,w=m>=h;this.className=["designbase-wc-pagination",`designbase-wc-pagination--${e}`,`designbase-wc-pagination--${a}`,`designbase-wc-pagination--${r}`,o&&"designbase-wc-pagination--disabled",b&&"designbase-wc-pagination--full-width"].filter(Boolean).join(" "),this.setAttribute("role","navigation"),this.setAttribute("aria-label",t("페이지 네비게이션")),this.replaceChildren();const f=document.createElement("div");if(f.className=["designbase-wc-pagination__container",b&&"designbase-wc-pagination__container--full-width"].filter(Boolean).join(" "),u&&d>0){const t=document.createElement("div");t.className="designbase-wc-pagination__total",t.textContent=this.getTotalLabel(d,p,m),f.append(t)}const _=document.createElement("nav");_.className="designbase-wc-pagination__nav",_.setAttribute("aria-label",t("페이지 네비게이션"));const N=document.createElement("ul");N.className="designbase-wc-pagination__list",c&&!A&&N.append(this.createIconButton("arrow-bar-left",1,"첫 페이지로 이동","first")),l&&!A&&N.append(this.createIconButton("chevron-left",m-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 N.append(t)}"number"==typeof t&&N.append(this.createPageButton(t,o))}),l&&!w&&N.append(this.createIconButton("chevron-right",m+1,"다음 페이지로 이동","next")),c&&!w&&N.append(this.createIconButton("arrow-bar-right",h,"마지막 페이지로 이동","last")),_.append(N),f.append(_),g&&f.append(this.createPageSizeSelector(e,p,o)),this.append(f)}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(e,a,i){const n=document.createElement("div");n.className="designbase-wc-pagination__page-size";const s=document.createElement("label");s.className="designbase-wc-pagination__page-size-label";const r=document.createElement("span");r.className="designbase-wc-pagination__page-size-text",r.textContent=t("페이지당");const o=document.createElement("db-select");return o.className="designbase-wc-pagination__page-size-select",o.setAttribute("size",e),o.setAttribute("show-clear-button","false"),o.setAttribute("searchable","false"),o.setAttribute("options",JSON.stringify(this.getPageSizeOptions().map(t=>({value:String(t),label:String(t)})))),o.setAttribute("value",String(a)),i&&o.setAttribute("disabled",""),o.addEventListener("db-change",t=>{const e=t.detail,i=Number(e?.value);Number.isNaN(i)||i===a||(this.setAttribute("page-size",String(i)),this.dispatchEvent(new CustomEvent("db-page-size-change",{detail:{pageSize:i},bubbles:!0,composed:!0})))}),s.append(r,o),n.append(s),n}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,a){const i=t===this.currentPage,n=document.createElement("li");n.className="designbase-wc-pagination__item";const s=document.createElement("button");return s.type="button",s.className=["designbase-wc-pagination__button",i&&"designbase-wc-pagination__button--active"].filter(Boolean).join(" "),s.textContent=String(t),s.disabled=a,i&&s.setAttribute("aria-current","page"),s.setAttribute("aria-label",e("페이지 {0}로 이동",[t])),s.addEventListener("click",()=>this.select(t)),n.append(s),n}createIconButton(t,e,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(a(t,this.iconSize())),r.addEventListener("click",()=>this.select(e)),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-popover.d.ts

@@ -1,3 +1,5 @@
+import './db-button.js';
+
 declare class DbPopover extends HTMLElement {
     private unsubscribeLocale?;
     static get observedAttributes(): string[];

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

@@ -1 +1 @@
-import{inheritThemeScope as e}from"../core/theme-scope.js";import{subscribeDbLocale as t,dbText as i}from"../core/i18n.js";import{POPOVER_PLACEMENTS as s,POPOVER_TRIGGERS as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbPopover extends HTMLElement{constructor(){super(...arguments),this.onDocMouseDown=null,this.onDocKeyDown=null,this.onExternalTriggerClick=null,this.handleTriggerClick=e=>{"click"===this.resolvedTrigger()&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!this.isOpen()))},this.handleTriggerMouseEnter=()=>{"hover"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerMouseLeave=()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()},this.handleTriggerFocus=()=>{"focus"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerBlur=()=>{"focus"===this.resolvedTrigger()&&this.scheduleClose()},this.handleReposition=()=>{this.isOpen()&&(this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.repositionRaf=requestAnimationFrame(()=>{this.positionPanel(),this.repositionRaf=void 0}))}}static get observedAttributes(){return["open","placement","position","title","content","size","variant","trigger","delay","hide-delay","always-show","disabled","max-width","show-arrow","close-on-outside-click","close-on-escape","trigger-id"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-popover-host"),this.hasAttribute("placement")||this.hasAttribute("position")||this.setAttribute("placement","top"),this.render(),this.childObserver=new MutationObserver(()=>this.render()),this.childObserver.observe(this,{childList:!0}),this.bindExternalTrigger(),this.attachGlobalListeners(),this.syncOpenFromAttributes(),this.unsubscribeLocale?.(),this.unsubscribeLocale=t(()=>this.panel?.querySelector(".designbase-wc-popover__close-button")?.setAttribute("aria-label",i("팝오버 닫기")))}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.childObserver?.disconnect(),this.clearTimers(),this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.unbindExternalTrigger(),this.detachGlobalListeners(),this.removePanel()}attributeChangedCallback(e){this.isConnected&&("trigger-id"===e&&(this.unbindExternalTrigger(),this.bindExternalTrigger()),"open"!==e&&"always-show"!==e&&"disabled"!==e?("content"===e&&this.bodyEl&&(this.bodyEl.textContent=this.getAttribute("content")||""),this.isOpen()&&(this.updatePanelMetadata(),requestAnimationFrame(()=>this.positionPanel()))):this.syncOpenFromAttributes())}resolvedPlacement(){const e=this.getAttribute("position")||this.getAttribute("placement")||"top";return s.includes(e)?e:"top"}resolvedTrigger(){const e=this.getAttribute("trigger")||"click";return r.includes(e)?e:"click"}isControlled(){return this.hasAttribute("open")}isOpen(){return!this.hasAttribute("disabled")&&(!!this.hasAttribute("always-show")||(this.isControlled()?"false"!==this.getAttribute("open"):this.panel?.classList.contains("designbase-wc-popover--visible")??!1))}setOpen(e){this.hasAttribute("disabled")||this.hasAttribute("always-show")||(this.isControlled()?e?this.setAttribute("open",""):this.removeAttribute("open"):e?this.showPanel():this.hidePanel(),this.dispatchEvent(new CustomEvent("db-open-change",{bubbles:!0,composed:!0,detail:{open:e}})),e||this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))}syncOpenFromAttributes(){this.hasAttribute("always-show")?this.showPanel():this.isControlled()&&("false"!==this.getAttribute("open")?this.showPanel():this.hidePanel())}clearTimers(){this.showTimer&&clearTimeout(this.showTimer),this.hideTimer&&clearTimeout(this.hideTimer),this.showTimer=void 0,this.hideTimer=void 0}groupOf(e){return e.startsWith("top")?"top":e.startsWith("bottom")?"bottom":e.startsWith("left")?"left":"right"}collectTriggerChildren(){const isInternalNode=e=>e.hasAttribute("data-wc-internal")||"content"===e.getAttribute("slot")||e===this.triggerWrap,e=Array.from(this.children).filter(e=>!isInternalNode(e));return e.length>0?e:Array.from(this.triggerWrap?.children||[]).filter(e=>"content"!==e.getAttribute("slot"))}ensureTriggerWrap(){this.triggerWrap||(this.triggerWrap=document.createElement("span"),this.triggerWrap.className="designbase-wc-popover__trigger",this.triggerWrap.setAttribute("data-wc-internal",""),this.triggerWrap.tabIndex=this.hasAttribute("trigger-id")?-1:0,this.triggerWrap.addEventListener("click",this.handleTriggerClick),this.triggerWrap.addEventListener("mouseenter",this.handleTriggerMouseEnter),this.triggerWrap.addEventListener("mouseleave",this.handleTriggerMouseLeave),this.triggerWrap.addEventListener("focus",this.handleTriggerFocus),this.triggerWrap.addEventListener("blur",this.handleTriggerBlur))}mountTriggerChildren(e){this.triggerWrap&&e.forEach(e=>{e.parentElement!==this.triggerWrap&&this.triggerWrap.append(e)})}collectBodyChildren(){return[...Array.from(this.querySelectorAll(':scope > [slot="content"]')),...Array.from(this.bodyEl?.querySelectorAll(':scope > [slot="content"]')||[])]}bindExternalTrigger(){const e=this.getAttribute("trigger-id");e&&(this.triggerEl=document.getElementById(e),this.triggerEl&&(this.onExternalTriggerClick=()=>{"click"===this.resolvedTrigger()&&this.setOpen(!this.isOpen())},this.triggerEl.addEventListener("click",this.onExternalTriggerClick)))}unbindExternalTrigger(){this.triggerEl&&this.onExternalTriggerClick&&this.triggerEl.removeEventListener("click",this.onExternalTriggerClick),this.triggerEl=null,this.onExternalTriggerClick=null}attachGlobalListeners(){this.onDocMouseDown=e=>{if(!this.isOpen()||"false"===this.getAttribute("close-on-outside-click"))return;const t=e.target;this.panel?.contains(t)||this.triggerWrap?.contains(t)||this.triggerEl?.contains(t)||this.setOpen(!1)},this.onDocKeyDown=e=>{"Escape"===e.key&&this.isOpen()&&"false"!==this.getAttribute("close-on-escape")&&this.setOpen(!1)},document.addEventListener("mousedown",this.onDocMouseDown),document.addEventListener("keydown",this.onDocKeyDown)}detachGlobalListeners(){this.onDocMouseDown&&document.removeEventListener("mousedown",this.onDocMouseDown),this.onDocKeyDown&&document.removeEventListener("keydown",this.onDocKeyDown),this.onDocMouseDown=null,this.onDocKeyDown=null}scheduleOpen(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("delay")||0)):0;this.showTimer=setTimeout(()=>this.showPanel(),e)}scheduleClose(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("hide-delay")||80)):0;this.hideTimer=setTimeout(()=>this.setOpen(!1),e)}getTriggerRect(){const e=this.triggerEl||this.triggerWrap;return e?.getBoundingClientRect()}flipPlacementIfNeeded(e,t,i){const s=window.innerHeight,r=window.innerWidth,o=this.groupOf(e),n=t.top-i.height-8>=8,a=t.bottom+8+i.height<=s-8,h=t.left-i.width-8>=8,l=t.right+8+i.width<=r-8;return"top"===o&&!n&&a?e.replace(/^top/,"bottom"):"bottom"===o&&!a&&n?e.replace(/^bottom/,"top"):"left"===o&&!h&&l?e.replace(/^left/,"right"):"right"===o&&!l&&h?e.replace(/^right/,"left"):e}applyCoords(e,t,i){let s=0,r=0,o=0,n=0;const a=i.height,h=i.width,l=16;switch(e){case"top":s=t.top-i.height-8,r=t.left+t.width/2-i.width/2,o=a-5,n=h/2-5;break;case"top-start":s=t.top-i.height-8,r=t.left,o=a-5,n=11;break;case"top-end":s=t.top-i.height-8,r=t.right-i.width,o=a-5,n=h-l-5;break;case"bottom":s=t.bottom+8,r=t.left+t.width/2-i.width/2,o=-5,n=h/2-5;break;case"bottom-start":s=t.bottom+8,r=t.left,o=-5,n=11;break;case"bottom-end":s=t.bottom+8,r=t.right-i.width,o=-5,n=h-l-5;break;case"left":s=t.top+t.height/2-i.height/2,r=t.left-i.width-8,o=a/2-5,n=h-5;break;case"left-start":s=t.top,r=t.left-i.width-8,o=11,n=h-5;break;case"left-end":s=t.bottom-i.height,r=t.left-i.width-8,o=a-l-5,n=h-5;break;case"right":s=t.top+t.height/2-i.height/2,r=t.right+8,o=a/2-5,n=-5;break;case"right-start":s=t.top,r=t.right+8,o=11,n=-5;break;case"right-end":s=t.bottom-i.height,r=t.right+8,o=a-l-5,n=-5}const d=window.innerWidth,c=window.innerHeight;return r<8&&(r=8),r+i.width>d-8&&(r=d-i.width-8),s<8&&(s=8),s+i.height>c-8&&(s=c-i.height-8),{top:s,left:r,aTop:o,aLeft:n,placement:e}}positionPanel(){if(!this.panel)return;const e=this.getTriggerRect();if(!e)return;const t=Number(this.getAttribute("max-width")||300);this.panel.style.maxWidth=`${t}px`,this.panel.offsetHeight;const i=this.panel.getBoundingClientRect(),r=this.resolvedPlacement(),o=this.flipPlacementIfNeeded(r,e,i),{top:n,left:a,aTop:h,aLeft:l}=this.applyCoords(o,e,i);this.panel.style.top=`${n}px`,this.panel.style.left=`${a}px`,this.panel.dataset.placementGroup=this.groupOf(o),s.forEach(e=>{this.panel.classList.toggle(`designbase-wc-popover--${e}`,e===o)}),this.arrowEl&&(this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${o}`,this.arrowEl.style.top=`${h}px`,this.arrowEl.style.left=`${l}px`)}revealPanel(){this.panel&&(this.panel.classList.remove("designbase-wc-popover--visible"),this.positionPanel(),this.panel.offsetHeight,this.positionPanel(),this.panel.classList.add("designbase-wc-popover--visible"))}updatePanelMetadata(){if(!this.panel)return;const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",i=this.resolvedPlacement();this.panel.className=["designbase-wc-popover",`designbase-wc-popover--${e}`,`designbase-wc-popover--${t}`,`designbase-wc-popover--${i}`,this.isOpen()?"designbase-wc-popover--visible":"",this.hasAttribute("disabled")?"designbase-wc-popover--disabled":""].filter(Boolean).join(" ")}ensurePanel(){if(this.panel)return;const t=document.createElement("div");t.className="designbase-wc-popover",t.setAttribute("data-wc-internal",""),t.setAttribute("role","dialog"),t.setAttribute("aria-modal","false"),t.style.position="fixed",t.style.zIndex="9999";const s=document.createElement("div");s.className="designbase-wc-popover__content";const r=document.createElement("div");r.className="designbase-wc-popover__header";const o=document.createElement("h3");o.className="designbase-wc-popover__title";const n=document.createElement("db-button");n.className="designbase-wc-popover__close-button",n.setAttribute("variant","ghost"),n.setAttribute("size","s"),n.setAttribute("icon-only",""),n.setAttribute("start-icon","close"),n.setAttribute("aria-label",i("팝오버 닫기")),n.addEventListener("db-click",e=>{e.stopPropagation(),this.setOpen(!1)}),r.append(o,n),this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-popover__body",s.append(r,this.bodyEl),t.append(s),"false"!==this.getAttribute("show-arrow")&&(this.arrowEl=document.createElement("div"),this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${this.resolvedPlacement()}`,t.append(this.arrowEl)),this.panel=t,this.panel.querySelector(".designbase-wc-popover__title").textContent=this.getAttribute("title")||"",this.panel.querySelector(".designbase-wc-popover__title").hidden=!this.getAttribute("title"),e(this,t),document.body.append(t),t.addEventListener("mouseenter",()=>{"hover"===this.resolvedTrigger()&&this.clearTimers()}),t.addEventListener("mouseleave",()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()})}showPanel(){if(this.hasAttribute("disabled"))return;this.ensurePanel(),this.updatePanelMetadata();const e=this.collectBodyChildren();e.length>0?this.bodyEl.replaceChildren(...e):this.bodyEl.textContent=this.getAttribute("content")||"";const t=this.panel.querySelector(".designbase-wc-popover__title");t.textContent=this.getAttribute("title")||"",t.hidden=!this.getAttribute("title"),requestAnimationFrame(()=>{this.revealPanel(),window.addEventListener("scroll",this.handleReposition,{capture:!0,passive:!0}),window.addEventListener("resize",this.handleReposition)})}hidePanel(){this.panel?.classList.remove("designbase-wc-popover--visible"),window.removeEventListener("scroll",this.handleReposition,!0),window.removeEventListener("resize",this.handleReposition),this.hasAttribute("always-show")||this.removePanel()}removePanel(){this.bodyEl?.querySelectorAll(':scope > [slot="content"]').forEach(e=>this.append(e)),this.panel?.remove(),this.panel=void 0,this.bodyEl=void 0,this.arrowEl=void 0}render(){this.ensureTriggerWrap();const e=this.collectTriggerChildren();this.mountTriggerChildren(e);const t=Boolean(this.getAttribute("trigger-id"));this.triggerWrap&&(e.length>0||!t?this.triggerWrap.parentElement!==this&&this.append(this.triggerWrap):this.triggerWrap.parentElement===this&&this.triggerWrap.remove()),this.hasAttribute("always-show")&&this.showPanel()}}customElements.get("db-popover")||customElements.define("db-popover",DbPopover);export{DbPopover};
+import"./db-button.js";import{inheritThemeScope as e}from"../core/theme-scope.js";import{subscribeDbLocale as t,dbText as i}from"../core/i18n.js";import{POPOVER_PLACEMENTS as s,POPOVER_TRIGGERS as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbPopover extends HTMLElement{constructor(){super(...arguments),this.onDocMouseDown=null,this.onDocKeyDown=null,this.onExternalTriggerClick=null,this.handleTriggerClick=e=>{"click"===this.resolvedTrigger()&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!this.isOpen()))},this.handleTriggerMouseEnter=()=>{"hover"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerMouseLeave=()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()},this.handleTriggerFocus=()=>{"focus"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerBlur=()=>{"focus"===this.resolvedTrigger()&&this.scheduleClose()},this.handleReposition=()=>{this.isOpen()&&(this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.repositionRaf=requestAnimationFrame(()=>{this.positionPanel(),this.repositionRaf=void 0}))}}static get observedAttributes(){return["open","placement","position","title","content","size","variant","trigger","delay","hide-delay","always-show","disabled","max-width","show-arrow","close-on-outside-click","close-on-escape","trigger-id"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-popover-host"),this.hasAttribute("placement")||this.hasAttribute("position")||this.setAttribute("placement","top"),this.render(),this.childObserver=new MutationObserver(()=>this.render()),this.childObserver.observe(this,{childList:!0}),this.bindExternalTrigger(),this.attachGlobalListeners(),this.syncOpenFromAttributes(),this.unsubscribeLocale?.(),this.unsubscribeLocale=t(()=>this.panel?.querySelector(".designbase-wc-popover__close-button")?.setAttribute("aria-label",i("팝오버 닫기")))}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.childObserver?.disconnect(),this.clearTimers(),this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.unbindExternalTrigger(),this.detachGlobalListeners(),this.removePanel()}attributeChangedCallback(e){this.isConnected&&("trigger-id"===e&&(this.unbindExternalTrigger(),this.bindExternalTrigger()),"open"!==e&&"always-show"!==e&&"disabled"!==e?("content"===e&&this.bodyEl&&(this.bodyEl.textContent=this.getAttribute("content")||""),this.isOpen()&&(this.updatePanelMetadata(),requestAnimationFrame(()=>this.positionPanel()))):this.syncOpenFromAttributes())}resolvedPlacement(){const e=this.getAttribute("position")||this.getAttribute("placement")||"top";return s.includes(e)?e:"top"}resolvedTrigger(){const e=this.getAttribute("trigger")||"click";return r.includes(e)?e:"click"}isControlled(){return this.hasAttribute("open")}isOpen(){return!this.hasAttribute("disabled")&&(!!this.hasAttribute("always-show")||(this.isControlled()?"false"!==this.getAttribute("open"):this.panel?.classList.contains("designbase-wc-popover--visible")??!1))}setOpen(e){this.hasAttribute("disabled")||this.hasAttribute("always-show")||(this.isControlled()?e?this.setAttribute("open",""):this.removeAttribute("open"):e?this.showPanel():this.hidePanel(),this.dispatchEvent(new CustomEvent("db-open-change",{bubbles:!0,composed:!0,detail:{open:e}})),e||this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))}syncOpenFromAttributes(){this.hasAttribute("always-show")?this.showPanel():this.isControlled()&&("false"!==this.getAttribute("open")?this.showPanel():this.hidePanel())}clearTimers(){this.showTimer&&clearTimeout(this.showTimer),this.hideTimer&&clearTimeout(this.hideTimer),this.showTimer=void 0,this.hideTimer=void 0}groupOf(e){return e.startsWith("top")?"top":e.startsWith("bottom")?"bottom":e.startsWith("left")?"left":"right"}collectTriggerChildren(){const isInternalNode=e=>e.hasAttribute("data-wc-internal")||"content"===e.getAttribute("slot")||e===this.triggerWrap,e=Array.from(this.children).filter(e=>!isInternalNode(e));return e.length>0?e:Array.from(this.triggerWrap?.children||[]).filter(e=>"content"!==e.getAttribute("slot"))}ensureTriggerWrap(){this.triggerWrap||(this.triggerWrap=document.createElement("span"),this.triggerWrap.className="designbase-wc-popover__trigger",this.triggerWrap.setAttribute("data-wc-internal",""),this.triggerWrap.tabIndex=this.hasAttribute("trigger-id")?-1:0,this.triggerWrap.addEventListener("click",this.handleTriggerClick),this.triggerWrap.addEventListener("mouseenter",this.handleTriggerMouseEnter),this.triggerWrap.addEventListener("mouseleave",this.handleTriggerMouseLeave),this.triggerWrap.addEventListener("focus",this.handleTriggerFocus),this.triggerWrap.addEventListener("blur",this.handleTriggerBlur))}mountTriggerChildren(e){this.triggerWrap&&e.forEach(e=>{e.parentElement!==this.triggerWrap&&this.triggerWrap.append(e)})}collectBodyChildren(){return[...Array.from(this.querySelectorAll(':scope > [slot="content"]')),...Array.from(this.bodyEl?.querySelectorAll(':scope > [slot="content"]')||[])]}bindExternalTrigger(){const e=this.getAttribute("trigger-id");e&&(this.triggerEl=document.getElementById(e),this.triggerEl&&(this.onExternalTriggerClick=()=>{"click"===this.resolvedTrigger()&&this.setOpen(!this.isOpen())},this.triggerEl.addEventListener("click",this.onExternalTriggerClick)))}unbindExternalTrigger(){this.triggerEl&&this.onExternalTriggerClick&&this.triggerEl.removeEventListener("click",this.onExternalTriggerClick),this.triggerEl=null,this.onExternalTriggerClick=null}attachGlobalListeners(){this.onDocMouseDown=e=>{if(!this.isOpen()||"false"===this.getAttribute("close-on-outside-click"))return;const t=e.target;this.panel?.contains(t)||this.triggerWrap?.contains(t)||this.triggerEl?.contains(t)||this.setOpen(!1)},this.onDocKeyDown=e=>{"Escape"===e.key&&this.isOpen()&&"false"!==this.getAttribute("close-on-escape")&&this.setOpen(!1)},document.addEventListener("mousedown",this.onDocMouseDown),document.addEventListener("keydown",this.onDocKeyDown)}detachGlobalListeners(){this.onDocMouseDown&&document.removeEventListener("mousedown",this.onDocMouseDown),this.onDocKeyDown&&document.removeEventListener("keydown",this.onDocKeyDown),this.onDocMouseDown=null,this.onDocKeyDown=null}scheduleOpen(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("delay")||0)):0;this.showTimer=setTimeout(()=>this.showPanel(),e)}scheduleClose(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("hide-delay")||80)):0;this.hideTimer=setTimeout(()=>this.setOpen(!1),e)}getTriggerRect(){const e=this.triggerEl||this.triggerWrap;return e?.getBoundingClientRect()}flipPlacementIfNeeded(e,t,i){const s=window.innerHeight,r=window.innerWidth,o=this.groupOf(e),n=t.top-i.height-8>=8,a=t.bottom+8+i.height<=s-8,h=t.left-i.width-8>=8,l=t.right+8+i.width<=r-8;return"top"===o&&!n&&a?e.replace(/^top/,"bottom"):"bottom"===o&&!a&&n?e.replace(/^bottom/,"top"):"left"===o&&!h&&l?e.replace(/^left/,"right"):"right"===o&&!l&&h?e.replace(/^right/,"left"):e}applyCoords(e,t,i){let s=0,r=0,o=0,n=0;const a=i.height,h=i.width,l=16;switch(e){case"top":s=t.top-i.height-8,r=t.left+t.width/2-i.width/2,o=a-5,n=h/2-5;break;case"top-start":s=t.top-i.height-8,r=t.left,o=a-5,n=11;break;case"top-end":s=t.top-i.height-8,r=t.right-i.width,o=a-5,n=h-l-5;break;case"bottom":s=t.bottom+8,r=t.left+t.width/2-i.width/2,o=-5,n=h/2-5;break;case"bottom-start":s=t.bottom+8,r=t.left,o=-5,n=11;break;case"bottom-end":s=t.bottom+8,r=t.right-i.width,o=-5,n=h-l-5;break;case"left":s=t.top+t.height/2-i.height/2,r=t.left-i.width-8,o=a/2-5,n=h-5;break;case"left-start":s=t.top,r=t.left-i.width-8,o=11,n=h-5;break;case"left-end":s=t.bottom-i.height,r=t.left-i.width-8,o=a-l-5,n=h-5;break;case"right":s=t.top+t.height/2-i.height/2,r=t.right+8,o=a/2-5,n=-5;break;case"right-start":s=t.top,r=t.right+8,o=11,n=-5;break;case"right-end":s=t.bottom-i.height,r=t.right+8,o=a-l-5,n=-5}const d=window.innerWidth,c=window.innerHeight;return r<8&&(r=8),r+i.width>d-8&&(r=d-i.width-8),s<8&&(s=8),s+i.height>c-8&&(s=c-i.height-8),{top:s,left:r,aTop:o,aLeft:n,placement:e}}positionPanel(){if(!this.panel)return;const e=this.getTriggerRect();if(!e)return;const t=Number(this.getAttribute("max-width")||300);this.panel.style.maxWidth=`${t}px`,this.panel.offsetHeight;const i=this.panel.getBoundingClientRect(),r=this.resolvedPlacement(),o=this.flipPlacementIfNeeded(r,e,i),{top:n,left:a,aTop:h,aLeft:l}=this.applyCoords(o,e,i);this.panel.style.top=`${n}px`,this.panel.style.left=`${a}px`,this.panel.dataset.placementGroup=this.groupOf(o),s.forEach(e=>{this.panel.classList.toggle(`designbase-wc-popover--${e}`,e===o)}),this.arrowEl&&(this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${o}`,this.arrowEl.style.top=`${h}px`,this.arrowEl.style.left=`${l}px`)}revealPanel(){this.panel&&(this.panel.classList.remove("designbase-wc-popover--visible"),this.positionPanel(),this.panel.offsetHeight,this.positionPanel(),this.panel.classList.add("designbase-wc-popover--visible"))}updatePanelMetadata(){if(!this.panel)return;const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",i=this.resolvedPlacement();this.panel.className=["designbase-wc-popover",`designbase-wc-popover--${e}`,`designbase-wc-popover--${t}`,`designbase-wc-popover--${i}`,this.isOpen()?"designbase-wc-popover--visible":"",this.hasAttribute("disabled")?"designbase-wc-popover--disabled":""].filter(Boolean).join(" ")}ensurePanel(){if(this.panel)return;const t=document.createElement("div");t.className="designbase-wc-popover",t.setAttribute("data-wc-internal",""),t.setAttribute("role","dialog"),t.setAttribute("aria-modal","false"),t.style.position="fixed",t.style.zIndex="9999";const s=document.createElement("div");s.className="designbase-wc-popover__content";const r=document.createElement("div");r.className="designbase-wc-popover__header";const o=document.createElement("h3");o.className="designbase-wc-popover__title";const n=document.createElement("db-button");n.className="designbase-wc-popover__close-button",n.setAttribute("variant","ghost"),n.setAttribute("size","s"),n.setAttribute("icon-only",""),n.setAttribute("start-icon","close"),n.setAttribute("aria-label",i("팝오버 닫기")),n.addEventListener("db-click",e=>{e.stopPropagation(),this.setOpen(!1)}),r.append(o,n),this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-popover__body",s.append(r,this.bodyEl),t.append(s),"false"!==this.getAttribute("show-arrow")&&(this.arrowEl=document.createElement("div"),this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${this.resolvedPlacement()}`,t.append(this.arrowEl)),this.panel=t,this.panel.querySelector(".designbase-wc-popover__title").textContent=this.getAttribute("title")||"",this.panel.querySelector(".designbase-wc-popover__title").hidden=!this.getAttribute("title"),e(this,t),document.body.append(t),t.addEventListener("mouseenter",()=>{"hover"===this.resolvedTrigger()&&this.clearTimers()}),t.addEventListener("mouseleave",()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()})}showPanel(){if(this.hasAttribute("disabled"))return;this.ensurePanel(),this.updatePanelMetadata();const e=this.collectBodyChildren();e.length>0?this.bodyEl.replaceChildren(...e):this.bodyEl.textContent=this.getAttribute("content")||"";const t=this.panel.querySelector(".designbase-wc-popover__title");t.textContent=this.getAttribute("title")||"",t.hidden=!this.getAttribute("title"),requestAnimationFrame(()=>{this.revealPanel(),window.addEventListener("scroll",this.handleReposition,{capture:!0,passive:!0}),window.addEventListener("resize",this.handleReposition)})}hidePanel(){this.panel?.classList.remove("designbase-wc-popover--visible"),window.removeEventListener("scroll",this.handleReposition,!0),window.removeEventListener("resize",this.handleReposition),this.hasAttribute("always-show")||this.removePanel()}removePanel(){this.bodyEl?.querySelectorAll(':scope > [slot="content"]').forEach(e=>this.append(e)),this.panel?.remove(),this.panel=void 0,this.bodyEl=void 0,this.arrowEl=void 0}render(){this.ensureTriggerWrap();const e=this.collectTriggerChildren();this.mountTriggerChildren(e);const t=Boolean(this.getAttribute("trigger-id"));this.triggerWrap&&(e.length>0||!t?this.triggerWrap.parentElement!==this&&this.append(this.triggerWrap):this.triggerWrap.parentElement===this&&this.triggerWrap.remove()),this.hasAttribute("always-show")&&this.showPanel()}}customElements.get("db-popover")||customElements.define("db-popover",DbPopover);export{DbPopover};

package/dist/esm/components/db-search-bar.d.ts

@@ -1,3 +1,6 @@
+import './db-chip.js';
+import './db-badge.js';
+
 declare class DbSearchBar extends HTMLElement {
     private unsubscribeLocale?;
     static get observedAttributes(): string[];