@designbasekorea/ui-wc 0.5.0 → 0.5.1

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

@@ -18,6 +18,8 @@ declare class DbPageHeader extends HTMLElement {
     private handleBack;
     private handleTabChange;
     private collectActions;
+    private collectMeta;
+    private renderMinimalAside;
     private collectDescriptionSlot;
     private renderTitleBlock;
     private render;

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

@@ -1 +1 @@
-const e=["default","minimal"],t=["center","left"];class DbPageHeader extends HTMLElement{constructor(){super(...arguments),this.internalTabId="",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()}attributeChangedCallback(e){this.isConnected&&("default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),this.render())}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(":scope > .designbase-wc-page-header__cta")||this.querySelector(":scope > .designbase-wc-page-header__actions");return t?Array.from(t.children):[]}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")||"",s=this.getAttribute("subtitle"),n=document.createElement("h1");if(n.className="designbase-wc-page-header__title",n.textContent=a,t.append(n),s){const e=document.createElement("h2");e.className="designbase-wc-page-header__subtitle",e.textContent=s,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(){const e=this.collectActions(),t=this.collectDescriptionSlot(),a="minimal"===this.getVariant(),s=this.getAlign(),n=this.parseBreadcrumbs(),i=this.parseTabs(),r=i.length>0,c=this.hasAttribute("show-back-button");if(this.className=["designbase-wc-page-header",a?"designbase-wc-page-header--minimal":`designbase-wc-page-header--${s}`].filter(Boolean).join(" "),this.replaceChildren(),n.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(n)),e.append(t),this.append(e)}const d=document.createElement("div");d.className="designbase-wc-page-header__main";const l=document.createElement("div");if(l.className="designbase-wc-page-header__content",a&&c){const e=document.createElement("div");e.className="designbase-wc-page-header__title-row";const a=document.createElement("db-button");a.className="designbase-wc-page-header__back-button",a.setAttribute("variant","tertiary"),a.setAttribute("size","m"),a.setAttribute("icon-only",""),a.setAttribute("start-icon","chevron-left"),a.setAttribute("aria-label",this.getAttribute("back-label")||"뒤로가기"),a.setAttribute("tooltip",this.getAttribute("back-label")||"뒤로가기"),a.addEventListener("db-click",this.handleBack),e.append(a);const s=document.createElement("div");s.className="designbase-wc-page-header__title-group",s.append(this.renderTitleBlock(t)),e.append(s),l.append(e)}else l.append(this.renderTitleBlock(t));if(d.append(l),a&&e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__cta",e.forEach(e=>t.append(e)),d.append(t)}if(this.append(d),!a&&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(a,r,i)}renderMinimalTabs(e,t,a){if(!e||!t)return;const s=document.createElement("div");s.className="designbase-wc-page-header__toolbar";const n=document.createElement("div");n.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),n.append(i),s.append(n),this.append(s)}}customElements.get("db-page-header")||customElements.define("db-page-header",DbPageHeader);export{DbPageHeader};
+const e=["default","minimal"],t=["center","left"];class DbPageHeader extends HTMLElement{constructor(){super(...arguments),this.internalTabId="",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()}attributeChangedCallback(e){this.isConnected&&("default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),this.render())}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(":scope > .designbase-wc-page-header__cta");return t?Array.from(t.children):[]}collectMeta(){const e=Array.from(this.querySelectorAll(':scope > [slot="meta"]'));if(e.length)return e;const t=this.querySelector(":scope > .designbase-wc-page-header__meta");return t?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")||"",s=this.getAttribute("subtitle"),n=document.createElement("h1");if(n.className="designbase-wc-page-header__title",n.textContent=a,t.append(n),s){const e=document.createElement("h2");e.className="designbase-wc-page-header__subtitle",e.textContent=s,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(){const e=this.collectActions(),t=this.collectMeta(),a=this.collectDescriptionSlot(),s="minimal"===this.getVariant(),n=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",s?"designbase-wc-page-header--minimal":`designbase-wc-page-header--${n}`,s&&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",s&&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 s=document.createElement("div");s.className="designbase-wc-page-header__title-group",s.append(this.renderTitleBlock(a)),e.append(s),o.append(e)}else o.append(this.renderTitleBlock(a));if(l.append(o),s){const a=this.renderMinimalAside(t,e);a&&l.append(a)}if(this.append(l),!s&&e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__actions",e.forEach(e=>t.append(e)),this.append(t)}this.renderMinimalTabs(s,c,r)}renderMinimalTabs(e,t,a){if(!e||!t)return;const s=document.createElement("div");s.className="designbase-wc-page-header__toolbar";const n=document.createElement("div");n.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),n.append(i),s.append(n),this.append(s)}}customElements.get("db-page-header")||customElements.define("db-page-header",DbPageHeader);export{DbPageHeader};