@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,322 @@
-import{createDbIcon as t}from"./db-icons.js";class DbOnboardingModal extends HTMLElement{constructor(){super(...arguments),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()}disconnectedCallback(){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||document.body.append(this.root),this.isMounted=!0,this.render()}unmount(){this.isMounted=!1,this.root?.remove()}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","닫기"),this.closeButtonEl.append(t("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","이전"),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)))}render(){if(!this.root||!this.isMounted)return;this.ensureStructure();const t=this.getSteps(),e=this.getCurrentStep(),i=t[e];if(!i)return;const s=!this.hasAttribute("show-close-button")||"false"!==this.getAttribute("show-close-button"),n=!this.hasAttribute("show-indicator")||"false"!==this.getAttribute("show-indicator"),o=this.getAttribute("indicator-type")||"dots",r=this.getAttribute("indicator-size")||"m",a=0===e,l=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=s?"":"none"),this.imageWrapEl&&this.imageEl&&(i.image?(this.imageEl.src=i.image,this.imageEl.alt=i.title||"온보딩 이미지",this.imageWrapEl.style.display=""):this.imageWrapEl.style.display="none"),this.titleEl&&(this.titleEl.textContent=i.title||"",this.titleEl.style.display=i.title?"":"none"),this.descriptionEl&&(this.descriptionEl.textContent=i.description||"",this.descriptionEl.style.display=i.description?"":"none"),this.prevButtonEl&&(this.prevButtonEl.textContent="이전",a?this.prevButtonEl.setAttribute("disabled",""):this.prevButtonEl.removeAttribute("disabled")),this.nextButtonEl&&(this.nextButtonEl.textContent=l?"완료":"다음",this.nextButtonEl.setAttribute("aria-label",l?"완료":"다음"),l?this.nextButtonEl.removeAttribute("end-icon"):this.nextButtonEl.setAttribute("end-icon","chevron-right")),this.indicatorEl){const i=n&&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",o),this.indicatorEl.setAttribute("size",r),this.indicatorEl.setAttribute("clickable",""))}}}customElements.get("db-onboarding-modal")||customElements.define("db-onboarding-modal",DbOnboardingModal);export{DbOnboardingModal};
+import { createDbIcon } from './db-icons.js';
+
+class DbOnboardingModal extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.internalStep = 0;
+        this.keyHandler = null;
+        this.isMounted = false;
+        this.handlePrev = () => {
+            if (this.getCurrentStep() > 0)
+                this.goToStep(this.getCurrentStep() - 1);
+        };
+        this.handleNext = () => {
+            const steps = this.getSteps();
+            const current = this.getCurrentStep();
+            if (current >= steps.length - 1) {
+                this.dispatchEvent(new CustomEvent('db-complete', { bubbles: true, composed: true }));
+                return;
+            }
+            this.goToStep(current + 1);
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'open',
+            'steps',
+            'current-step',
+            'show-close-button',
+            'show-indicator',
+            'indicator-type',
+            'indicator-size',
+        ];
+    }
+    get open() {
+        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
+    }
+    set open(value) {
+        if (value)
+            this.setAttribute('open', '');
+        else
+            this.removeAttribute('open');
+    }
+    get steps() {
+        return this.parseSteps();
+    }
+    set steps(value) {
+        const next = typeof value === 'string' ? value : JSON.stringify(value);
+        if (this.getAttribute('steps') === next)
+            return;
+        this.setAttribute('steps', next);
+    }
+    connectedCallback() {
+        this.style.display = 'contents';
+        this.syncStepFromAttribute();
+        this.syncOpenState();
+    }
+    disconnectedCallback() {
+        this.detachKeyHandler();
+        this.unmount();
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === 'open') {
+            this.syncOpenState();
+            return;
+        }
+        if (name === 'current-step') {
+            this.syncStepFromAttribute();
+        }
+        if (name === 'steps') {
+            if (this.isOpenRequested()) {
+                if (!this.isMounted)
+                    this.syncOpenState();
+                else
+                    this.render();
+            }
+            return;
+        }
+        if (this.isMounted)
+            this.render();
+    }
+    isOpenRequested() {
+        return this.open;
+    }
+    parseSteps() {
+        const raw = this.getAttribute('steps');
+        if (!raw)
+            return [];
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    syncStepFromAttribute() {
+        if (!this.hasAttribute('current-step'))
+            return;
+        const next = Number(this.getAttribute('current-step') || 0);
+        if (Number.isFinite(next))
+            this.internalStep = Math.max(0, next);
+    }
+    getSteps() {
+        return this.parseSteps();
+    }
+    getCurrentStep() {
+        const steps = this.getSteps();
+        if (!steps.length)
+            return 0;
+        return Math.min(Math.max(this.internalStep, 0), steps.length - 1);
+    }
+    close() {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
+    }
+    emitStepChange(step) {
+        this.dispatchEvent(new CustomEvent('db-step-change', {
+            bubbles: true,
+            composed: true,
+            detail: { step },
+        }));
+    }
+    goToStep(step) {
+        const steps = this.getSteps();
+        if (!steps.length)
+            return;
+        const next = Math.min(Math.max(step, 0), steps.length - 1);
+        this.internalStep = next;
+        this.emitStepChange(next);
+        this.render();
+    }
+    attachKeyHandler() {
+        if (this.keyHandler)
+            return;
+        this.keyHandler = (event) => {
+            if (event.key === 'Escape') {
+                this.close();
+                return;
+            }
+            if (event.key === 'ArrowLeft' && this.getCurrentStep() > 0) {
+                this.handlePrev();
+                return;
+            }
+            if (event.key === 'ArrowRight' && this.getCurrentStep() < this.getSteps().length - 1) {
+                this.handleNext();
+            }
+        };
+        document.addEventListener('keydown', this.keyHandler);
+    }
+    detachKeyHandler() {
+        if (!this.keyHandler)
+            return;
+        document.removeEventListener('keydown', this.keyHandler);
+        this.keyHandler = null;
+    }
+    syncOpenState() {
+        if (this.isOpenRequested()) {
+            this.mount();
+            this.attachKeyHandler();
+            return;
+        }
+        this.detachKeyHandler();
+        this.unmount();
+    }
+    mount() {
+        if (!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();
+        }
+        if (!this.root.isConnected) {
+            document.body.append(this.root);
+        }
+        this.isMounted = true;
+        this.render();
+    }
+    unmount() {
+        this.isMounted = false;
+        this.root?.remove();
+    }
+    ensureStructure() {
+        if (!this.root)
+            return;
+        if (this.contentEl && this.root.contains(this.contentEl))
+            return;
+        this.overlayEl = undefined;
+        this.contentEl = undefined;
+        this.closeButtonEl = undefined;
+        this.mainEl = undefined;
+        this.imageWrapEl = undefined;
+        this.imageEl = undefined;
+        this.textEl = undefined;
+        this.titleEl = undefined;
+        this.descriptionEl = undefined;
+        this.navigationEl = undefined;
+        this.prevButtonEl = undefined;
+        this.nextButtonEl = undefined;
+        this.indicatorEl = undefined;
+        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', '닫기');
+        this.closeButtonEl.append(createDbIcon('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', '이전');
+        this.prevButtonEl.addEventListener('db-click', this.handlePrev);
+        this.indicatorEl = document.createElement('db-indicator');
+        this.indicatorEl.addEventListener('db-step-click', (event) => {
+            const detail = event.detail;
+            this.goToStep(detail.index ?? detail.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);
+    }
+    render() {
+        if (!this.root || !this.isMounted)
+            return;
+        this.ensureStructure();
+        const steps = this.getSteps();
+        const current = this.getCurrentStep();
+        const step = steps[current];
+        if (!step)
+            return;
+        const showCloseButton = !this.hasAttribute('show-close-button') || this.getAttribute('show-close-button') !== 'false';
+        const showIndicator = !this.hasAttribute('show-indicator') || this.getAttribute('show-indicator') !== 'false';
+        const indicatorType = this.getAttribute('indicator-type') || 'dots';
+        const indicatorSize = this.getAttribute('indicator-size') || 'm';
+        const isFirst = current === 0;
+        const isLast = current === steps.length - 1;
+        this.root.setAttribute('aria-labelledby', 'onboarding-title');
+        this.root.setAttribute('aria-describedby', 'onboarding-description');
+        if (this.closeButtonEl)
+            this.closeButtonEl.style.display = showCloseButton ? '' : 'none';
+        if (this.imageWrapEl && this.imageEl) {
+            if (step.image) {
+                this.imageEl.src = step.image;
+                this.imageEl.alt = step.title || '온보딩 이미지';
+                this.imageWrapEl.style.display = '';
+            }
+            else {
+                this.imageWrapEl.style.display = 'none';
+            }
+        }
+        if (this.titleEl) {
+            this.titleEl.textContent = step.title || '';
+            this.titleEl.style.display = step.title ? '' : 'none';
+        }
+        if (this.descriptionEl) {
+            this.descriptionEl.textContent = step.description || '';
+            this.descriptionEl.style.display = step.description ? '' : 'none';
+        }
+        if (this.prevButtonEl) {
+            this.prevButtonEl.textContent = '이전';
+            if (isFirst)
+                this.prevButtonEl.setAttribute('disabled', '');
+            else
+                this.prevButtonEl.removeAttribute('disabled');
+        }
+        if (this.nextButtonEl) {
+            this.nextButtonEl.textContent = isLast ? '완료' : '다음';
+            this.nextButtonEl.setAttribute('aria-label', isLast ? '완료' : '다음');
+            if (isLast)
+                this.nextButtonEl.removeAttribute('end-icon');
+            else
+                this.nextButtonEl.setAttribute('end-icon', 'chevron-right');
+        }
+        if (this.indicatorEl) {
+            const shouldShowIndicator = showIndicator && steps.length > 1;
+            this.indicatorEl.style.display = shouldShowIndicator ? '' : 'none';
+            if (shouldShowIndicator) {
+                this.indicatorEl.setAttribute('total', String(steps.length));
+                this.indicatorEl.setAttribute('current', String(current));
+                this.indicatorEl.setAttribute('indicator-type', indicatorType);
+                this.indicatorEl.setAttribute('size', indicatorSize);
+                this.indicatorEl.setAttribute('clickable', '');
+            }
+        }
+    }
+}
+if (!customElements.get('db-onboarding-modal')) {
+    customElements.define('db-onboarding-modal', DbOnboardingModal);
+}
+
+export { DbOnboardingModal };

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

@@ -1 +1,312 @@
-const e=["default","minimal"],t=["center","left"];class DbPageHeader extends HTMLElement{constructor(){super(...arguments),this.internalTabId="",this.isRendering=!1,this.handleBack=()=>{const e=new CustomEvent("db-back",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented||function navigatePageHeaderBack(e="/"){if("undefined"==typeof window)return;const t=window.history.state?.idx;if("number"==typeof t&&t>0)return void window.history.back();(()=>{try{return!!document.referrer&&new URL(document.referrer).origin===window.location.origin}catch{return!1}})()||window.history.length>1?window.history.back():window.location.assign(e)}(this.getAttribute("back-fallback-href")||"/")},this.handleTabChange=e=>{const t=e.detail,a=t?.selectedId??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.hasAttribute("selected-tab-id")||(this.internalTabId=a),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:a}}))}}static get observedAttributes(){return["title","subtitle","description","breadcrumbs","variant","show-back-button","back-fallback-href","back-label","tabs","selected-tab-id","default-selected-tab-id","align"]}connectedCallback(){this.syncDefaultTab(),this.render(),this.childObserver=new MutationObserver(()=>{this.isRendering||this.hasPendingSlottedChildren()&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.childObserver?.disconnect()}attributeChangedCallback(e){this.isConnected&&("default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),this.render())}hasPendingSlottedChildren(){return Array.from(this.children).some(e=>{const t=e.getAttribute("slot");return"actions"===t||"meta"===t||"description"===t})}syncDefaultTab(){if(this.internalTabId)return;const e=this.parseTabs(),t=this.getAttribute("default-selected-tab-id");this.internalTabId=t||e[0]?.id||""}parseTabs(){try{const e=JSON.parse(this.getAttribute("tabs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBreadcrumbs(){try{const e=JSON.parse(this.getAttribute("breadcrumbs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}getActiveTabId(){return this.getAttribute("selected-tab-id")||this.internalTabId}getVariant(){const t=this.getAttribute("variant")||"default";return e.includes(t)?t:"default"}getAlign(){const e=this.getAttribute("align")||"center";return t.includes(e)?e:"center"}collectActions(){const e=Array.from(this.querySelectorAll(':scope > [slot="actions"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__cta");if(t?.children.length)return Array.from(t.children);const a=this.querySelector(".designbase-wc-page-header__actions");return a?.children.length?Array.from(a.children):[]}collectMeta(){const e=Array.from(this.querySelectorAll(':scope > [slot="meta"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__meta");return t?.children.length?Array.from(t.children):[]}renderMinimalAside(e,t){if(!e.length&&!t.length)return null;const a=document.createElement("div");if(a.className="designbase-wc-page-header__aside",e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__meta",e.forEach(e=>t.append(e)),a.append(t)}if(t.length){const e=document.createElement("div");e.className="designbase-wc-page-header__cta",t.forEach(t=>e.append(t)),a.append(e)}return a}collectDescriptionSlot(){const e=this.querySelector(':scope > [slot="description"]');if(e)return e;const t=this.querySelector(":scope .designbase-wc-page-header__description"),a=t?.firstElementChild;return a||null}renderTitleBlock(e){const t=document.createDocumentFragment(),a=this.getAttribute("title")||"",n=this.getAttribute("subtitle"),s=document.createElement("h1");if(s.className="designbase-wc-page-header__title",s.textContent=a,t.append(s),n){const e=document.createElement("h2");e.className="designbase-wc-page-header__subtitle",e.textContent=n,t.append(e)}const i=this.getAttribute("description");if(e||i){const a=document.createElement("div");a.className="designbase-wc-page-header__description",e?a.append(e):a.textContent=i,t.append(a)}return t}render(){this.isRendering=!0;const e=this.collectActions(),t=this.collectMeta(),a=this.collectDescriptionSlot(),n="minimal"===this.getVariant(),s=this.getAlign(),i=this.parseBreadcrumbs(),r=this.parseTabs(),c=r.length>0,d=this.hasAttribute("show-back-button");if(this.className=["designbase-wc-page-header",n?"designbase-wc-page-header--minimal":`designbase-wc-page-header--${s}`,n&&c?"designbase-wc-page-header--has-tabs":""].filter(Boolean).join(" "),this.replaceChildren(),i.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(i)),e.append(t),this.append(e)}const l=document.createElement("div");l.className="designbase-wc-page-header__main";const o=document.createElement("div");if(o.className="designbase-wc-page-header__content",n&&d){const e=document.createElement("div");e.className="designbase-wc-page-header__title-row";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 n=document.createElement("div");n.className="designbase-wc-page-header__title-group",n.append(this.renderTitleBlock(a)),e.append(n),o.append(e)}else o.append(this.renderTitleBlock(a));if(l.append(o),n){const a=this.renderMinimalAside(t,e);a&&l.append(a)}if(this.append(l),!n&&e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__actions",e.forEach(e=>t.append(e)),this.append(t)}this.renderMinimalTabs(n,c,r),queueMicrotask(()=>{this.isRendering=!1})}renderMinimalTabs(e,t,a){if(!e||!t)return;const n=document.createElement("div");n.className="designbase-wc-page-header__toolbar";const s=document.createElement("div");s.className="designbase-wc-page-header__tabs";const i=document.createElement("db-tabs");i.setAttribute("size","m"),i.setAttribute("items",JSON.stringify(a)),i.setAttribute("selected-id",this.getActiveTabId()),i.addEventListener("db-change",this.handleTabChange),s.append(i),n.append(s),this.append(n)}}customElements.get("db-page-header")||customElements.define("db-page-header",DbPageHeader);export{DbPageHeader};
+const VARIANTS = ['default', 'minimal'];
+const ALIGNS = ['center', 'left'];
+function navigatePageHeaderBack(fallbackHref = '/') {
+    if (typeof window === 'undefined')
+        return;
+    const historyIdx = window.history.state?.idx;
+    if (typeof historyIdx === 'number' && historyIdx > 0) {
+        window.history.back();
+        return;
+    }
+    const hasSameOriginReferrer = (() => {
+        try {
+            if (!document.referrer)
+                return false;
+            return new URL(document.referrer).origin === window.location.origin;
+        }
+        catch {
+            return false;
+        }
+    })();
+    if (hasSameOriginReferrer) {
+        window.history.back();
+        return;
+    }
+    if (window.history.length > 1) {
+        window.history.back();
+        return;
+    }
+    window.location.assign(fallbackHref);
+}
+class DbPageHeader extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.internalTabId = '';
+        this.isRendering = false;
+        this.handleBack = () => {
+            const event = new CustomEvent('db-back', { bubbles: true, composed: true, cancelable: true });
+            this.dispatchEvent(event);
+            if (event.defaultPrevented)
+                return;
+            navigatePageHeaderBack(this.getAttribute('back-fallback-href') || '/');
+        };
+        this.handleTabChange = (event) => {
+            const detail = event.detail;
+            const tabId = detail?.selectedId ??
+                this.parseTabs()[detail?.index ?? 0]?.id ??
+                String(detail?.index ?? 0);
+            if (!this.hasAttribute('selected-tab-id')) {
+                this.internalTabId = tabId;
+            }
+            this.dispatchEvent(new CustomEvent('db-tab-change', {
+                bubbles: true,
+                composed: true,
+                detail: { tabId },
+            }));
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'title',
+            'subtitle',
+            'description',
+            'breadcrumbs',
+            'variant',
+            'show-back-button',
+            'back-fallback-href',
+            'back-label',
+            'tabs',
+            'selected-tab-id',
+            'default-selected-tab-id',
+            'align',
+        ];
+    }
+    connectedCallback() {
+        this.syncDefaultTab();
+        this.render();
+        this.childObserver = new MutationObserver(() => {
+            if (this.isRendering)
+                return;
+            if (!this.hasPendingSlottedChildren())
+                return;
+            this.render();
+        });
+        this.childObserver.observe(this, { childList: true });
+    }
+    disconnectedCallback() {
+        this.childObserver?.disconnect();
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === 'default-selected-tab-id' || name === 'tabs') {
+            this.syncDefaultTab();
+        }
+        this.render();
+    }
+    /** React가 slot 자식을 host에 다시 붙였는지 감지 */
+    hasPendingSlottedChildren() {
+        return Array.from(this.children).some((child) => {
+            const slot = child.getAttribute('slot');
+            return slot === 'actions' || slot === 'meta' || slot === 'description';
+        });
+    }
+    syncDefaultTab() {
+        if (this.internalTabId)
+            return;
+        const tabs = this.parseTabs();
+        const defaultId = this.getAttribute('default-selected-tab-id');
+        this.internalTabId = defaultId || tabs[0]?.id || '';
+    }
+    parseTabs() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('tabs') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    parseBreadcrumbs() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('breadcrumbs') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    getActiveTabId() {
+        return this.getAttribute('selected-tab-id') || this.internalTabId;
+    }
+    getVariant() {
+        const raw = this.getAttribute('variant') || 'default';
+        return VARIANTS.includes(raw) ? raw : 'default';
+    }
+    getAlign() {
+        const raw = this.getAttribute('align') || 'center';
+        return ALIGNS.includes(raw) ? raw : 'center';
+    }
+    collectActions() {
+        const direct = Array.from(this.querySelectorAll(':scope > [slot="actions"]'));
+        if (direct.length)
+            return direct;
+        // aside > cta 로 이미 배치된 경우 (재렌더)
+        const cta = this.querySelector('.designbase-wc-page-header__cta');
+        if (cta?.children.length)
+            return Array.from(cta.children);
+        const actions = this.querySelector('.designbase-wc-page-header__actions');
+        if (actions?.children.length)
+            return Array.from(actions.children);
+        return [];
+    }
+    collectMeta() {
+        const direct = Array.from(this.querySelectorAll(':scope > [slot="meta"]'));
+        if (direct.length)
+            return direct;
+        // aside > meta 로 이미 배치된 경우 (재렌더)
+        const meta = this.querySelector('.designbase-wc-page-header__meta');
+        if (meta?.children.length)
+            return Array.from(meta.children);
+        return [];
+    }
+    renderMinimalAside(savedMeta, savedActions) {
+        if (!savedMeta.length && !savedActions.length)
+            return null;
+        const aside = document.createElement('div');
+        aside.className = 'designbase-wc-page-header__aside';
+        if (savedMeta.length) {
+            const meta = document.createElement('div');
+            meta.className = 'designbase-wc-page-header__meta';
+            savedMeta.forEach((node) => meta.append(node));
+            aside.append(meta);
+        }
+        if (savedActions.length) {
+            const cta = document.createElement('div');
+            cta.className = 'designbase-wc-page-header__cta';
+            savedActions.forEach((node) => cta.append(node));
+            aside.append(cta);
+        }
+        return aside;
+    }
+    collectDescriptionSlot() {
+        const slotted = this.querySelector(':scope > [slot="description"]');
+        if (slotted)
+            return slotted;
+        const description = this.querySelector(':scope .designbase-wc-page-header__description');
+        const child = description?.firstElementChild;
+        return child || null;
+    }
+    renderTitleBlock(descriptionSlot) {
+        const fragment = document.createDocumentFragment();
+        const title = this.getAttribute('title') || '';
+        const subtitle = this.getAttribute('subtitle');
+        const titleEl = document.createElement('h1');
+        titleEl.className = 'designbase-wc-page-header__title';
+        titleEl.textContent = title;
+        fragment.append(titleEl);
+        if (subtitle) {
+            const subtitleEl = document.createElement('h2');
+            subtitleEl.className = 'designbase-wc-page-header__subtitle';
+            subtitleEl.textContent = subtitle;
+            fragment.append(subtitleEl);
+        }
+        const description = this.getAttribute('description');
+        if (descriptionSlot || description) {
+            const descriptionEl = document.createElement('div');
+            descriptionEl.className = 'designbase-wc-page-header__description';
+            if (descriptionSlot) {
+                descriptionEl.append(descriptionSlot);
+            }
+            else {
+                descriptionEl.textContent = description;
+            }
+            fragment.append(descriptionEl);
+        }
+        return fragment;
+    }
+    render() {
+        this.isRendering = true;
+        const savedActions = this.collectActions();
+        const savedMeta = this.collectMeta();
+        const savedDescription = this.collectDescriptionSlot();
+        const variant = this.getVariant();
+        const isMinimal = variant === 'minimal';
+        const align = this.getAlign();
+        const breadcrumbs = this.parseBreadcrumbs();
+        const tabs = this.parseTabs();
+        const hasTabs = tabs.length > 0;
+        const showBackButton = this.hasAttribute('show-back-button');
+        this.className = [
+            'designbase-wc-page-header',
+            isMinimal ? 'designbase-wc-page-header--minimal' : `designbase-wc-page-header--${align}`,
+            isMinimal && hasTabs ? 'designbase-wc-page-header--has-tabs' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.replaceChildren();
+        if (breadcrumbs.length) {
+            const breadcrumbsWrap = document.createElement('div');
+            breadcrumbsWrap.className = 'designbase-wc-page-header__breadcrumbs';
+            const crumbs = document.createElement('db-breadcrumbs');
+            crumbs.setAttribute('size', 's');
+            crumbs.setAttribute('items', JSON.stringify(breadcrumbs));
+            breadcrumbsWrap.append(crumbs);
+            this.append(breadcrumbsWrap);
+        }
+        const main = document.createElement('div');
+        main.className = 'designbase-wc-page-header__main';
+        const content = document.createElement('div');
+        content.className = 'designbase-wc-page-header__content';
+        if (isMinimal && showBackButton) {
+            const titleRow = document.createElement('div');
+            titleRow.className = 'designbase-wc-page-header__title-row';
+            const backButton = document.createElement('db-button');
+            backButton.className = 'designbase-wc-page-header__back-button';
+            backButton.setAttribute('variant', 'tertiary');
+            backButton.setAttribute('size', 'm');
+            backButton.setAttribute('icon-only', '');
+            backButton.setAttribute('start-icon', 'chevron-left');
+            backButton.setAttribute('aria-label', this.getAttribute('back-label') || '뒤로가기');
+            backButton.setAttribute('tooltip', this.getAttribute('back-label') || '뒤로가기');
+            backButton.addEventListener('db-click', this.handleBack);
+            titleRow.append(backButton);
+            const titleGroup = document.createElement('div');
+            titleGroup.className = 'designbase-wc-page-header__title-group';
+            titleGroup.append(this.renderTitleBlock(savedDescription));
+            titleRow.append(titleGroup);
+            content.append(titleRow);
+        }
+        else {
+            content.append(this.renderTitleBlock(savedDescription));
+        }
+        main.append(content);
+        if (isMinimal) {
+            const aside = this.renderMinimalAside(savedMeta, savedActions);
+            if (aside)
+                main.append(aside);
+        }
+        this.append(main);
+        if (!isMinimal && savedActions.length) {
+            const actionsWrap = document.createElement('div');
+            actionsWrap.className = 'designbase-wc-page-header__actions';
+            savedActions.forEach((node) => actionsWrap.append(node));
+            this.append(actionsWrap);
+        }
+        this.renderMinimalTabs(isMinimal, hasTabs, tabs);
+        queueMicrotask(() => {
+            this.isRendering = false;
+        });
+    }
+    renderMinimalTabs(isMinimal, hasTabs, tabs) {
+        if (!isMinimal || !hasTabs)
+            return;
+        const toolbar = document.createElement('div');
+        toolbar.className = 'designbase-wc-page-header__toolbar';
+        const tabsWrap = document.createElement('div');
+        tabsWrap.className = 'designbase-wc-page-header__tabs';
+        const tabsEl = document.createElement('db-tabs');
+        tabsEl.setAttribute('size', 'm');
+        tabsEl.setAttribute('items', JSON.stringify(tabs));
+        tabsEl.setAttribute('selected-id', this.getActiveTabId());
+        tabsEl.addEventListener('db-change', this.handleTabChange);
+        tabsWrap.append(tabsEl);
+        toolbar.append(tabsWrap);
+        this.append(toolbar);
+    }
+}
+if (!customElements.get('db-page-header')) {
+    customElements.define('db-page-header', DbPageHeader);
+}
+
+export { DbPageHeader };