@designbasekorea/ui-wc 0.2.0 → 0.2.2

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

@@ -0,0 +1 @@
+import{getDbComponentIconSize as e,createDbIcon as t}from"./db-icons.js";import"./db-checkbox.js";const s=["s","m","l"];class DbSelect extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.built=!1,this.searchTerm="",this.focusedIndex=-1,this.handleTriggerClick=()=>{this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this.open=!this.open,this.open&&this.searchable&&setTimeout(()=>this.searchInput?.focus(),0))},this.handleTriggerFocus=()=>{this.trigger?.classList.add("designbase-wc-select__trigger--focused")},this.handleTriggerBlur=()=>{this.trigger?.classList.remove("designbase-wc-select__trigger--focused")},this.handleClear=e=>{e.stopPropagation();const t=[];this.setSelectedValues(t),this.syncTrigger(),this.syncOptions(),this.dispatchChange(t)},this.handleSearchInput=()=>{this.searchTerm=this.searchInput?.value||"",this.focusedIndex=-1,this.syncOptions()},this.handleDocumentMouseDown=e=>{this.contains(e.target)||(this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1,this.syncOptions())},this.handleDocumentKeyDown=e=>{if(!this.contains(document.activeElement))return;if(!this.open)return void("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open=!0));const t=this.getFilteredOptions();switch(e.key){case"Escape":e.preventDefault(),this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1,this.syncOptions();break;case"ArrowDown":e.preventDefault(),this.focusedIndex=Math.min(this.focusedIndex+1,t.length-1),this.syncOptions();break;case"ArrowUp":e.preventDefault(),this.focusedIndex=Math.max(this.focusedIndex-1,0),this.syncOptions();break;case"Enter":e.preventDefault(),this.focusedIndex>=0&&t[this.focusedIndex]&&this.selectOption(t[this.focusedIndex])}}}static get observedAttributes(){return["options","value","placeholder","label","size","full-width","disabled","readonly","required","error","error-message","helper-text","multiple","searchable","show-clear-button","open","max-height","position","dropdown-width","name"]}get name(){return this.getAttribute("name")??""}set name(e){this.setAttribute("name",e)}get open(){return this.hasAttribute("open")}set open(e){this.toggleAttribute("open",e),this.syncOpenState()}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value"),this.syncTrigger(),this.syncOptions()}connectedCallback(){this.built||this.build(),this.syncState(),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}formResetCallback(){this.removeAttribute("value"),this.internals.setFormValue(null),this.built&&(this.syncTrigger(),this.syncOptions())}formDisabledCallback(e){this.toggleAttribute("disabled",e)}attributeChangedCallback(e){if(this.built){if("open"!==e)return"value"===e?(this.syncTrigger(),void this.syncOptions()):void this.syncState();this.syncOpenState()}}get multiple(){return this.hasAttribute("multiple")}set multiple(e){this.toggleAttribute("multiple",Boolean(e))}get searchable(){return this.hasAttribute("searchable")}set searchable(e){this.toggleAttribute("searchable",Boolean(e))}get showClearButton(){return!this.hasAttribute("show-clear-button")||"false"!==this.getAttribute("show-clear-button")}parseOptions(){const e=this.getAttribute("options")||"[]";try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return e.split(",").map(e=>e.trim()).filter(Boolean).map(e=>({value:e,label:e}))}}parseSelectedValues(){const e=this.getAttribute("value")||"";if(!e)return[];if(this.multiple)try{const t=JSON.parse(e);return Array.isArray(t)?t.map(String):[]}catch{return e.split(",").map(e=>e.trim()).filter(Boolean)}return e?[e]:[]}setSelectedValues(e){this.multiple?e.length?this.setAttribute("value",JSON.stringify(e)):this.removeAttribute("value"):e[0]?this.setAttribute("value",e[0]):this.removeAttribute("value")}getIconSize(){const t=this.getAttribute("size")||"m";return e(s.includes(t)?t:"m")}syncIndicatorIcons(){const e=this.getIconSize();this.clearButton?.replaceChildren(t("close",e)),this.chevronEl&&this.chevronEl.replaceChildren(t(this.open?"chevron-up":"chevron-down",e))}build(){const e=this.getAttribute("id")||`db-select-${Math.random().toString(36).slice(2)}`,s=`${e}-listbox`;this.hasAttribute("id")||this.setAttribute("id",e),this.labelEl=document.createElement("label"),this.labelEl.className="designbase-wc-select__label",this.trigger=document.createElement("div"),this.trigger.className="designbase-wc-select__trigger",this.trigger.tabIndex=0,this.trigger.setAttribute("role","combobox"),this.trigger.setAttribute("aria-haspopup","listbox"),this.trigger.setAttribute("aria-controls",s),this.trigger.addEventListener("click",this.handleTriggerClick),this.trigger.addEventListener("focus",this.handleTriggerFocus),this.trigger.addEventListener("blur",this.handleTriggerBlur),this.valueEl=document.createElement("div"),this.valueEl.className="designbase-wc-select__value",this.indicatorsEl=document.createElement("div"),this.indicatorsEl.className="designbase-wc-select__indicators",this.clearButton=document.createElement("button"),this.clearButton.type="button",this.clearButton.className="designbase-wc-select__clear-button",this.clearButton.setAttribute("aria-label","모든 값 지우기"),this.clearButton.hidden=!0,this.clearButton.appendChild(t("close",this.getIconSize())),this.clearButton.addEventListener("click",this.handleClear),this.chevronEl=document.createElement("div"),this.chevronEl.className="designbase-wc-select__chevron",this.indicatorsEl.append(this.clearButton,this.chevronEl),this.trigger.append(this.valueEl,this.indicatorsEl),this.dropdown=document.createElement("div"),this.dropdown.className="designbase-wc-select__dropdown",this.searchWrap=document.createElement("div"),this.searchWrap.className="designbase-wc-select__search",this.searchWrap.hidden=!0,this.searchInput=document.createElement("input"),this.searchInput.type="text",this.searchInput.className="designbase-wc-select__search-input",this.searchInput.placeholder="옵션 검색",this.searchInput.addEventListener("input",this.handleSearchInput),this.searchInput.addEventListener("mousedown",e=>e.stopPropagation()),this.searchInput.addEventListener("click",e=>e.stopPropagation()),this.searchWrap.appendChild(this.searchInput),this.optionsEl=document.createElement("div"),this.optionsEl.className="designbase-wc-select__options",this.optionsEl.id=s,this.optionsEl.setAttribute("role","listbox"),this.dropdown.append(this.searchWrap,this.optionsEl),this.helperEl=document.createElement("p"),this.helperEl.className="designbase-wc-select__helper-text",this.errorEl=document.createElement("p"),this.errorEl.className="designbase-wc-select__error-message",this.append(this.labelEl,this.trigger,this.dropdown,this.helperEl,this.errorEl),this.built=!0}getFilteredOptions(){const e=this.parseOptions();if(!this.searchable||!this.searchTerm)return e;const t=this.searchTerm.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(t))}selectOption(e){if(e.disabled)return;const t=this.parseSelectedValues();let s;this.multiple?s=t.includes(e.value)?t.filter(t=>t!==e.value):[...t,e.value]:(s=[e.value],this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1),this.setSelectedValues(s),this.syncTrigger(),this.syncOptions(),this.dispatchChange(s)}dispatchChange(e){const t=this.parseOptions();if(this.multiple){const s=new FormData;return e.forEach(e=>s.append(this.name||"select",e)),this.internals.setFormValue(e.length?s:null),this.dispatchEvent(new Event("change",{bubbles:!0})),void this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e,labels:e.map(e=>t.find(t=>t.value===e)?.label||e)},bubbles:!0,composed:!0}))}const s=e[0]||"",i=t.find(e=>e.value===s)?.label||"";this.internals.setFormValue(s||null),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:s,label:i},bubbles:!0,composed:!0}))}syncState(){if(!this.trigger||!this.dropdown||!this.optionsEl)return;const e=s.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",t="top"===this.getAttribute("position")?"top":"bottom",i="full"===this.getAttribute("dropdown-width")?"full":"auto",n=Number(this.getAttribute("max-height")||200),a=this.getAttribute("label")||"",r=this.getAttribute("helper-text")||"",l=this.getAttribute("error-message")||"",h=this.hasAttribute("error"),c=this.getAttribute("id")||"";this.className=["designbase-wc-select",`designbase-wc-select--${e}`,this.open&&"designbase-wc-select--open",h&&"designbase-wc-select--error",this.hasAttribute("disabled")&&"designbase-wc-select--disabled",this.hasAttribute("readonly")&&"designbase-wc-select--readonly",this.hasAttribute("full-width")&&"designbase-wc-select--full-width",this.multiple&&"designbase-wc-select--multiple",this.searchable&&"designbase-wc-select--searchable"].filter(Boolean).join(" ");const o=this.parseSelectedValues();if(this.classList.toggle("designbase-wc-select--has-value",o.length>0),this.labelEl){const e=this.hasAttribute("required")?'<span class="designbase-wc-select__required" aria-hidden="true">*</span>':"";this.labelEl.innerHTML=a?`${this.escape(a)}${e}`:"",this.labelEl.hidden=!a}this.dropdown.className=["designbase-wc-select__dropdown",`designbase-wc-select__dropdown--${i}`,`designbase-wc-select__dropdown--${t}`,this.open&&"designbase-wc-select__dropdown--open"].filter(Boolean).join(" "),this.optionsEl.style.maxHeight=`${n}px`,this.searchWrap&&(this.searchWrap.hidden=!this.searchable);const d=`${c}-helper`,u=`${c}-error`;h&&l?(this.errorEl.id=u,this.errorEl.textContent=l,this.errorEl.hidden=!1,this.helperEl.hidden=!0,this.trigger.setAttribute("aria-describedby",u),this.trigger.setAttribute("aria-invalid","true")):r?(this.helperEl.id=d,this.helperEl.textContent=r,this.helperEl.hidden=!1,this.errorEl.hidden=!0,this.trigger.setAttribute("aria-describedby",d),this.trigger.removeAttribute("aria-invalid")):(this.helperEl.hidden=!0,this.errorEl.hidden=!0,this.trigger.removeAttribute("aria-describedby"),this.trigger.removeAttribute("aria-invalid")),this.hasAttribute("disabled")||this.hasAttribute("readonly")?this.trigger.tabIndex=-1:this.trigger.tabIndex=0,this.syncOpenState(),this.syncTrigger(),this.syncOptions(),this.syncIndicatorIcons()}syncOpenState(){this.trigger&&this.dropdown&&this.chevronEl&&(this.trigger.setAttribute("aria-expanded",String(this.open)),this.classList.toggle("designbase-wc-select--open",this.open),this.dropdown.classList.toggle("designbase-wc-select__dropdown--open",this.open),this.syncIndicatorIcons())}syncTrigger(){if(!this.valueEl||!this.clearButton)return;const e=this.parseOptions(),s=this.parseSelectedValues(),i=this.getAttribute("placeholder")||"선택하세요",n=s.length>0,a=n&&this.showClearButton&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");if(this.valueEl.replaceChildren(),this.multiple)if(0===s.length){const e=document.createElement("span");e.className="designbase-wc-select__placeholder",e.textContent=i,this.valueEl.appendChild(e)}else{const i=document.createElement("div");i.className="designbase-wc-select__tags",s.forEach(n=>{const a=e.find(e=>e.value===n),r=document.createElement("span");r.className="designbase-wc-select__tag";const l=document.createElement("span");l.className="designbase-wc-select__tag-label",l.textContent=a?.label||n;const h=document.createElement("button");h.type="button",h.className="designbase-wc-select__tag-remove",h.setAttribute("aria-label",`${a?.label||n} 제거`),h.appendChild(t("close",12)),h.addEventListener("click",e=>{e.stopPropagation();const t=s.filter(e=>e!==n);this.setSelectedValues(t),this.syncTrigger(),this.syncOptions(),this.dispatchChange(t)}),r.append(l,h),i.appendChild(r)}),this.valueEl.appendChild(i)}else{const t=document.createElement("span");t.className="designbase-wc-select__single-value";const a=e.find(e=>e.value===s[0]);t.textContent=n?a?.label||s[0]:i,n||t.classList.add("designbase-wc-select__placeholder"),this.valueEl.appendChild(t)}this.clearButton.hidden=!a,this.clearButton.setAttribute("aria-hidden",a?"false":"true"),this.classList.toggle("designbase-wc-select--has-value",n)}syncOptions(){if(!this.optionsEl)return;const e=this.getFilteredOptions(),t=this.parseSelectedValues(),s=this.getAttribute("id")||"db-select";if(this.optionsEl.replaceChildren(),0===e.length){const e=document.createElement("div");return e.className="designbase-wc-select__no-options",e.textContent=this.searchTerm?"검색 결과가 없습니다.":"옵션이 없습니다.",void this.optionsEl.appendChild(e)}e.forEach((e,i)=>{const n=t.includes(e.value),a=i===this.focusedIndex,r=document.createElement("div");if(r.className=["designbase-wc-select__option",n&&"designbase-wc-select__option--selected",a&&"designbase-wc-select__option--focused",e.disabled&&"designbase-wc-select__option--disabled"].filter(Boolean).join(" "),r.id=`${s}-option-${i}`,r.setAttribute("role","option"),r.setAttribute("aria-selected",String(n)),r.addEventListener("click",()=>this.selectOption(e)),this.multiple){const t=document.createElement("div");t.className="designbase-wc-select__checkbox";const s=document.createElement("db-checkbox");s.setAttribute("size","s"),s.setAttribute("has-label","false"),n&&s.setAttribute("checked",""),e.disabled&&s.setAttribute("disabled",""),t.appendChild(s),r.appendChild(t)}const l=document.createElement("span");l.className="designbase-wc-select__option-label",l.textContent=e.label,r.appendChild(l),this.optionsEl.appendChild(r)}),this.focusedIndex>=0?this.trigger?.setAttribute("aria-activedescendant",`${s}-option-${this.focusedIndex}`):this.trigger?.removeAttribute("aria-activedescendant")}escape(e){return e.replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[e]||e))}}DbSelect.formAssociated=!0,customElements.get("db-select")||customElements.define("db-select",DbSelect);export{DbSelect};

package/dist/esm/components/db-share-icons.js

@@ -0,0 +1 @@
+const l={facebook:'<path fill="currentColor" d="M2.002 12.001c0 4.99 3.656 9.126 8.437 9.879v-6.988h-2.54v-2.891h2.54V9.798c0-2.508 1.493-3.891 3.776-3.891q1.095 0 2.24.195V8.56h-1.264c-1.24 0-1.628.772-1.628 1.563v1.875h2.771l-.443 2.891h-2.328v6.988C18.344 21.129 22 16.992 22 12.001c0-5.522-4.477-10-9.999-10-5.522.001-10 4.478-10 10"/>',x:'<path fill="currentColor" d="M17.801 3h3.066l-6.731 7.638L22 21h-6.171l-4.832-6.297L5.466 21H2.4l7.13-8.17L2 3h6.325l4.365 5.752zm-1.073 16.207h1.7L7.432 4.727H5.605z"/>',instagram:'<path fill="currentColor" fill-rule="evenodd" d="M7.376 12a4.623 4.623 0 1 0 9.246.002A4.623 4.623 0 0 0 7.376 12m1.619 0a3.003 3.003 0 1 1 6.007.001 3.003 3.003 0 0 1-6.007 0m8.889-4.793a1.078 1.078 0 1 0-2.156 0 1.078 1.078 0 0 0 2.156 0m.016-3.728a6.6 6.6 0 0 0-2.186-.42c-.963-.042-1.268-.054-3.71-.054s-2.755 0-3.71.054a6.6 6.6 0 0 0-2.184.42A4.6 4.6 0 0 0 3.477 6.11a6.6 6.6 0 0 0-.419 2.186c-.043.962-.056 1.267-.056 3.71s0 2.753.056 3.71c.015.748.156 1.486.419 2.187a4.6 4.6 0 0 0 2.634 2.632 6.6 6.6 0 0 0 2.185.45c.963.042 1.268.055 3.71.055s2.755 0 3.71-.055a6.6 6.6 0 0 0 2.186-.42 4.61 4.61 0 0 0 2.633-2.632c.263-.7.404-1.438.419-2.186.043-.962.056-1.267.056-3.71s0-2.753-.056-3.71a6.6 6.6 0 0 0-.421-2.217A4.6 4.6 0 0 0 17.9 3.479m1.104 13.852a2.99 2.99 0 0 1-1.712 1.71 5 5 0 0 1-1.67.312c-.95.044-1.218.055-3.654.055-2.438 0-2.687 0-3.655-.055a5 5 0 0 1-1.67-.311 2.99 2.99 0 0 1-1.718-1.711 5.1 5.1 0 0 1-.311-1.67c-.043-.95-.053-1.217-.053-3.653s0-2.686.053-3.655a5 5 0 0 1 .311-1.687c.305-.79.93-1.41 1.719-1.712a5 5 0 0 1 1.669-.311c.95-.043 1.218-.055 3.655-.055s2.687 0 3.654.055a5 5 0 0 1 1.67.31 3 3 0 0 1 1.712 1.713 5.1 5.1 0 0 1 .311 1.669c.043.95.054 1.218.054 3.655s0 2.698-.043 3.654h-.011v-.001a5 5 0 0 1-.311 1.688" clip-rule="evenodd"/>',linkedin:'<path fill="currentColor" fill-rule="evenodd" d="M17 21v-6.75c0-1.059-1.188-1.944-2.246-1.944-1.06 0-1.754.885-1.754 1.944V21H9V9h4v2c.662-1.071 2.356-1.763 3.525-1.763C18.997 9.237 21 11.28 21 13.75V21zM3 21V9h4v12zM7 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0" clip-rule="evenodd"/>',pinterest:'<path fill="currentColor" d="M12 2C6.474 2 2 6.478 2 12.008a10 10 0 0 0 6.351 9.316c-.09-.797-.165-1.999.03-2.87.18-.782 1.172-4.974 1.172-4.974s-.3-.601-.3-1.488c0-1.397.81-2.434 1.801-2.434.856 0 1.261.646 1.261 1.413 0 .856-.54 2.149-.825 3.335-.24.992.495 1.804 1.486 1.804 1.772 0 3.138-1.879 3.138-4.583 0-2.39-1.727-4.072-4.174-4.072-2.838 0-4.52 2.133-4.52 4.342 0 .857.33 1.788.751 2.284.075.105.09.18.075.286-.075.315-.24.991-.27 1.127-.045.18-.15.225-.33.135-1.247-.586-2.027-2.404-2.027-3.877 0-3.155 2.297-6.056 6.606-6.056 3.469 0 6.156 2.48 6.156 5.77 0 3.442-2.177 6.222-5.18 6.222-1.006 0-1.967-.526-2.297-1.142l-.616 2.374c-.225.871-.84 1.953-1.246 2.63.931.285 1.922.45 2.958.45 5.526 0 10-4.478 10-10.007C22 6.478 17.526 2 12 2"/>',whatsapp:'<path fill="currentColor" d="M12.042 2a9.92 9.92 0 0 1 7.044 2.906A9.83 9.83 0 0 1 22 11.918c-.003 5.464-4.47 9.91-9.958 9.91h-.005a10 10 0 0 1-4.758-1.206L2 22l1.413-5.136a9.86 9.86 0 0 1-1.329-4.954C2.086 6.446 6.553 2 12.042 2M8.516 7.333a.92.92 0 0 0-.663.31c-.228.249-.872.848-.872 2.066s.89 2.394 1.016 2.562c.124.165 1.722 2.746 4.251 3.739 2.101.825 2.53.661 2.985.62.457-.041 1.473-.6 1.68-1.178s.208-1.074.146-1.178-.229-.165-.478-.289-1.472-.723-1.7-.805-.394-.124-.56.124-.643.805-.788.97c-.145.166-.29.187-.539.063s-1.05-.386-2-1.23c-.74-.656-1.239-1.466-1.385-1.714s-.015-.383.11-.506c.111-.111.248-.29.373-.434.124-.144.166-.248.249-.413s.04-.31-.022-.434c-.062-.123-.545-1.348-.766-1.838-.187-.413-.383-.422-.56-.43z"/>',telegram:'<path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m4.08 6.012c-.375.008-.958.209-3.73 1.366-.975.408-2.915 1.248-5.829 2.514-.466.191-.716.375-.74.558-.042.35.457.458 1.081.657.517.167 1.2.358 1.558.367.325.008.682-.125 1.082-.4 2.72-1.838 4.118-2.77 4.213-2.789.066-.017.15-.033.208.017s.059.15.05.175c-.05.208-2.604 2.537-2.755 2.689-.566.583-1.208.94-.217 1.59.858.566 1.349.924 2.231 1.499.558.366 1 .799 1.583.749.266-.025.54-.275.682-1.024.333-1.765.982-5.603 1.132-7.185.017-.133 0-.308-.017-.392a.44.44 0 0 0-.141-.274c-.125-.1-.308-.117-.39-.117"/>',mail:'<path fill="currentColor" fill-rule="evenodd" d="m1.665 8.67.67-1.34L12 12.161l9.665-4.833.67 1.342L12 13.839z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M4 5.75c-.69 0-1.25.56-1.25 1.25v10c0 .69.56 1.25 1.25 1.25h16c.69 0 1.25-.56 1.25-1.25V7c0-.69-.56-1.25-1.25-1.25zM1.25 7A2.75 2.75 0 0 1 4 4.25h16A2.75 2.75 0 0 1 22.75 7v10A2.75 2.75 0 0 1 20 19.75H4A2.75 2.75 0 0 1 1.25 17z" clip-rule="evenodd"/>',link:'<path fill="currentColor" fill-rule="evenodd" d="m15.344 9.698-5.657 5.657-1.06-1.06 5.657-5.657z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M17.819 6.163a4.25 4.25 0 0 0-6.01 0l-1.415 1.414-1.06-1.06 1.414-1.414a5.75 5.75 0 0 1 8.132 8.132l-1.416 1.414-1.06-1.062 1.415-1.413a4.25 4.25 0 0 0 0-6.01M6.154 11.818l1.412-1.412-.53-.531-.53-.53-1.414 1.414-.003.003c-2.22 2.244-2.211 5.86.029 8.075 2.245 2.22 5.824 2.31 8.102.056l.003-.003 1.414-1.414-1.06-1.06-1.412 1.41v.002c-1.67 1.65-4.308 1.608-5.993-.057-1.645-1.627-1.659-4.293-.018-5.953" clip-rule="evenodd"/>',copy:'<path fill="currentColor" fill-rule="evenodd" d="M8 3.75a.25.25 0 0 0-.25.25v12c0 .138.112.25.25.25h12a.25.25 0 0 0 .25-.25V4a.25.25 0 0 0-.25-.25zM6.25 4c0-.966.784-1.75 1.75-1.75h12c.966 0 1.75.784 1.75 1.75v12A1.75 1.75 0 0 1 20 17.75H8A1.75 1.75 0 0 1 6.25 16z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M3.75 9v9A2.25 2.25 0 0 0 6 20.25h9v1.5H6A3.75 3.75 0 0 1 2.25 18V9z" clip-rule="evenodd"/>',"scan-qrcode":'<path fill="currentColor" d="M2.25 4c0-.964.786-1.75 1.75-1.75h3v1.5H4a.253.253 0 0 0-.25.25v3h-1.5zM20.25 4a.253.253 0 0 0-.25-.25h-3v-1.5h3c.964 0 1.75.786 1.75 1.75v3h-1.5zM20.25 20v-3h1.5v3c0 .964-.786 1.75-1.75 1.75h-3v-1.5h3c.136 0 .25-.114.25-.25M2.25 20v-3h1.5v3c0 .136.114.25.25.25h3v1.5H4c-.964 0-1.75-.786-1.75-1.75M9.5 7.5v2h-2v-2zM11 6H6v5h5zM16.5 7.5v2h-2v-2zM18 6h-5v5h5zM9.5 14.5v2h-2v-2zM11 13H6v5h5zM14.5 16.5H13V18h1.5zM18 15h-1.5v3H18z"/><path fill="currentColor" d="M18 15h-3v1.5h3zM14.5 13H13v1.5h1.5z"/>',"share-alt":'<path fill="currentColor" fill-rule="evenodd" d="M13.69 3.317a.75.75 0 0 1 .804.119l8 7a.75.75 0 0 1 0 1.128l-8 7A.75.75 0 0 1 13.25 18v-3.24c-1.925.051-3.579.315-5.062.932-1.659.692-3.157 1.85-4.588 3.758A.75.75 0 0 1 2.25 19c0-4.145 1.147-6.888 3.291-8.698 1.96-1.655 4.655-2.437 7.709-2.943V4a.75.75 0 0 1 .44-.683m1.06 2.336V8a.75.75 0 0 1-.638.742c-3.283.497-5.85 1.225-7.603 2.706-1.359 1.147-2.303 2.812-2.631 5.39 1.153-1.15 2.386-1.969 3.734-2.53 1.928-.804 4.04-1.058 6.388-1.058a.75.75 0 0 1 .75.75v2.347L20.861 11z" clip-rule="evenodd"/>'},e={facebook:"facebook",x:"x",instagram:"instagram",linkedin:"linkedin",pinterest:"pinterest",whatsapp:"whatsapp",telegram:"telegram",email:"mail",link:"link",qr:"scan-qrcode"};function createShareIcon(e,r=24){const c=document.createElement("template");return c.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="${r}" height="${r}" aria-hidden="true" focusable="false" data-designbase-icon="${e}">${l[e]}</svg>`,c.content.firstElementChild}function createSharePlatformIcon(l,r=24){return createShareIcon(e[l],r)}export{createShareIcon,createSharePlatformIcon};

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

@@ -0,0 +1,48 @@
+type DbSharePlatform = 'facebook' | 'x' | 'instagram' | 'linkedin' | 'pinterest' | 'whatsapp' | 'telegram' | 'email' | 'link' | 'qr';
+type DbShareVariant = 'button' | 'dropdown' | 'modal' | 'inline';
+declare class DbShare extends HTMLElement {
+    static get observedAttributes(): string[];
+    private isCopied;
+    private qrCodeData;
+    private copyResetTimer;
+    private modalEl;
+    private contentSlot;
+    private dropdownEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get open(): boolean;
+    set open(value: boolean);
+    private parseListAttribute;
+    private getResolvedUrl;
+    private getContext;
+    private getActivePlatforms;
+    private replaceUrlVariables;
+    private handleCopyLink;
+    private handleShowQrCode;
+    private handlePlatformShare;
+    private getPlacement;
+    private mapButtonSize;
+    private createTriggerButton;
+    private createPlatformIcon;
+    private createPlatformButton;
+    private createLinkInput;
+    private refreshLinkInputValue;
+    private createCopyButton;
+    private generateQrCodeUrl;
+    private createShareContent;
+    private populateShareContent;
+    private refreshContent;
+    private syncModalOpen;
+    private renderDropdown;
+    private renderModal;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-share': DbShare;
+    }
+}
+
+export { DbShare };
+export type { DbSharePlatform, DbShareVariant };

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

@@ -0,0 +1 @@
+import{createShareIcon as t,createSharePlatformIcon as e}from"./db-share-icons.js";const s=["facebook","x","linkedin","whatsapp","email","link"],n={facebook:{name:"Facebook",color:"#1877f2",shareUrl:"https://www.facebook.com/sharer/sharer.php?u={url}"},x:{name:"X",color:"#000000",shareUrl:"https://twitter.com/intent/tweet?url={url}&text={title}&hashtags={hashtags}"},instagram:{name:"Instagram",color:"#e4405f",shareUrl:"https://www.instagram.com/",customShare:()=>{window.alert("Instagram에 직접 공유하려면 링크를 복사하여 사용하세요.")}},linkedin:{name:"LinkedIn",color:"#0077b5",shareUrl:"https://www.linkedin.com/sharing/share-offsite/?url={url}"},pinterest:{name:"Pinterest",color:"#bd081c",shareUrl:"https://pinterest.com/pin/create/button/?url={url}&description={title}&media={imageUrl}"},whatsapp:{name:"WhatsApp",color:"#25d366",shareUrl:"https://wa.me/?text={title}%20{url}"},telegram:{name:"Telegram",color:"#0088cc",shareUrl:"https://t.me/share/url?url={url}&text={title}"},email:{name:"이메일",color:"#ea4335",shareUrl:"mailto:?subject={title}&body={description}%20{url}"},link:{name:"링크 복사",color:"#6c757d",shareUrl:""},qr:{name:"QR 코드",color:"#6c757d",shareUrl:""}};class DbShare extends HTMLElement{constructor(){super(...arguments),this.isCopied=!1,this.qrCodeData="",this.copyResetTimer=null,this.modalEl=null,this.contentSlot=null,this.dropdownEl=null}static get observedAttributes(){return["url","title","description","image-url","hashtags","variant","size","position","platforms","button-text","modal-title","show-qr-code","qr-code-size","copy-success-message","open"]}connectedCallback(){this.render()}disconnectedCallback(){this.copyResetTimer&&clearTimeout(this.copyResetTimer)}attributeChangedCallback(t){"open"===t&&"modal"===this.getAttribute("variant")&&this.modalEl?this.syncModalOpen():"url"===t&&this.contentSlot?this.refreshLinkInputValue():this.render()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open","true"):this.removeAttribute("open")}parseListAttribute(t){const e=this.getAttribute(t);if(!e)return[];try{const t=JSON.parse(e);if(Array.isArray(t))return t.map(t=>String(t).trim()).filter(Boolean)}catch{}return e.split(",").map(t=>t.trim()).filter(Boolean)}getResolvedUrl(){const t=this.getAttribute("url");return t||("undefined"!=typeof window&&window.location?.href?window.location.href:"")}getContext(){return{url:this.getResolvedUrl(),title:this.getAttribute("share-title")||this.getAttribute("title")||"",description:this.getAttribute("description")||"",imageUrl:this.getAttribute("image-url")||"",hashtags:this.parseListAttribute("hashtags"),host:this}}getActivePlatforms(){const t=this.parseListAttribute("platforms");return(t.length>0?t:s).filter(t=>t in n)}replaceUrlVariables(t,e){return t.replace("{url}",encodeURIComponent(e.url)).replace("{title}",encodeURIComponent(e.title)).replace("{description}",encodeURIComponent(e.description)).replace("{imageUrl}",encodeURIComponent(e.imageUrl)).replace("{hashtags}",e.hashtags.join(","))}async handleCopyLink(t){try{await navigator.clipboard.writeText(t.url),this.isCopied=!0,this.dispatchEvent(new CustomEvent("db-copy-success",{bubbles:!0,composed:!0,detail:{url:t.url}})),this.refreshContent(),this.copyResetTimer&&clearTimeout(this.copyResetTimer),this.copyResetTimer=setTimeout(()=>{this.isCopied=!1,this.refreshContent()},3e3)}catch(t){this.dispatchEvent(new CustomEvent("db-copy-error",{bubbles:!0,composed:!0,detail:{error:t}}))}}handleShowQrCode(t){if(this.qrCodeData=t.url,"modal"===this.getAttribute("variant"))return this.open=!0,void this.refreshContent();this.refreshContent()}handlePlatformShare(t){const e=this.getContext(),s=n[t];if(s)try{if("link"===t)this.handleCopyLink(e);else if("qr"===t)this.handleShowQrCode(e);else if(s.customShare)s.customShare(e);else if(s.shareUrl){const t=this.replaceUrlVariables(s.shareUrl,e);window.open(t,"_blank","width=600,height=400")}this.dispatchEvent(new CustomEvent("db-share",{bubbles:!0,composed:!0,detail:{platform:t,url:e.url}}))}catch(e){this.dispatchEvent(new CustomEvent("db-share-error",{bubbles:!0,composed:!0,detail:{platform:t,error:e}}))}}getPlacement(){const t=this.getAttribute("position")||"bottom";return"top"===t||"left"===t?"top-left":"right"===t?"bottom-right":"bottom-left"}mapButtonSize(){const t=this.getAttribute("size")||"m";return"s"===t?"s":"l"===t?"l":"m"}createTriggerButton(e){const s=document.createElement("db-button");return s.className=e||"designbase-wc-share__trigger",s.setAttribute("variant","secondary"),s.setAttribute("size",this.mapButtonSize()),s.textContent=this.getAttribute("button-text")||"공유",s.prepend(t("share-alt",16)),s.addEventListener("db-click",()=>{"modal"!==this.getAttribute("variant")?this.open=!this.open:this.open=!0}),s}createPlatformIcon(t){const s=document.createElement("span");return s.className="designbase-wc-share__platform-icon",s.append(e(t,24)),s}createPlatformButton(e){const s=n[e],r=document.createElement("button");r.type="button",r.className=["designbase-wc-share__platform-button",`designbase-wc-share__platform-button--${e}`,"link"===e&&this.isCopied?"designbase-wc-share__platform-button--copied":""].filter(Boolean).join(" "),r.style.setProperty("--platform-color",s.color),r.title=s.name,r.setAttribute("aria-label",`${s.name}에 공유하기`),r.append(this.createPlatformIcon(e));const a=document.createElement("span");if(a.className="designbase-wc-share__platform-name",a.textContent=s.name,r.append(a),"link"===e&&this.isCopied){const e=document.createElement("span");e.className="designbase-wc-share__copy-success",e.append(t("copy",12));const s=document.createElement("span");s.textContent="복사됨!",e.append(s),r.append(e)}return r.addEventListener("click",()=>this.handlePlatformShare(e)),r}createLinkInput(t){const e=document.createElement("db-input");return e.className="designbase-wc-share__link-input",e.setAttribute("type","text"),e.setAttribute("readonly",""),e.setAttribute("size","s"),e.setAttribute("full-width",""),e.setAttribute("value",t),customElements.whenDefined("db-input").then(()=>{e.setAttribute("value",t),e.value=t}),e}refreshLinkInputValue(){const t=this.getResolvedUrl(),e=this.contentSlot?.querySelector("db-input.designbase-wc-share__link-input");e&&(e.setAttribute("value",t),e.value=t)}createCopyButton(e){const s=document.createElement("db-button");s.className="designbase-wc-share__copy-button",s.setAttribute("size","s"),s.setAttribute("variant","primary");const n=document.createElement("span");return n.className="designbase-wc-button__start-icon",n.setAttribute("aria-hidden","true"),n.append(t(this.isCopied?"copy":"link",16)),s.append(n),s.append(document.createTextNode(this.isCopied?"복사됨!":"복사")),s.addEventListener("db-click",()=>{this.handleCopyLink(e)}),s}generateQrCodeUrl(){const t=Number(this.getAttribute("qr-code-size")||200);return`https://api.qrserver.com/v1/create-qr-code/?size=${t}x${t}&data=${encodeURIComponent(this.qrCodeData)}`}createShareContent(){const t=document.createElement("div");return t.className="designbase-wc-share__content",this.populateShareContent(t),t}populateShareContent(t){const e=document.createElement("div");e.className="designbase-wc-share__platforms",this.getActivePlatforms().forEach(t=>{e.append(this.createPlatformButton(t))}),t.append(e);if("false"!==this.getAttribute("show-qr-code")&&this.qrCodeData){const e=document.createElement("div");e.className="designbase-wc-share__qr-section";const s=document.createElement("h4");s.className="designbase-wc-share__qr-title",s.textContent="QR 코드",e.append(s);const n=document.createElement("div");n.className="designbase-wc-share__qr-code";const r=document.createElement("img"),a=Number(this.getAttribute("qr-code-size")||200);r.src=this.generateQrCodeUrl(),r.alt="QR Code",r.width=a,r.height=a,n.append(r),e.append(n);const i=document.createElement("p");i.className="designbase-wc-share__qr-description",i.textContent="QR 코드를 스캔하여 링크에 접속하세요",e.append(i),t.append(e)}const s=this.getContext(),n=document.createElement("div");n.className="designbase-wc-share__link-preview";const r=document.createElement("h4");r.className="designbase-wc-share__link-title",r.textContent="공유 링크",n.append(r);const a=document.createElement("div");a.className="designbase-wc-share__link-container",a.append(this.createLinkInput(s.url)),a.append(this.createCopyButton(s)),n.append(a),t.append(n)}refreshContent(){const t=this.getAttribute("variant");if("inline"===t){const t=this.querySelector(":scope > .designbase-wc-share__content");return void t?.replaceWith(this.createShareContent())}"modal"===t&&this.contentSlot&&(this.contentSlot.replaceChildren(),this.populateShareContent(this.contentSlot))}syncModalOpen(){this.modalEl&&(this.open?(this.refreshLinkInputValue(),this.modalEl.setAttribute("open","true")):this.modalEl.removeAttribute("open"))}renderDropdown(){const t=document.createElement("db-dropdown");t.className="designbase-wc-share__dropdown",t.setAttribute("placement",this.getPlacement()),t.setAttribute("label",this.getAttribute("button-text")||"공유"),t.setAttribute("trigger-variant","secondary"),t.setAttribute("trigger-icon","share-alt"),t.setAttribute("size",this.mapButtonSize()),t.setAttribute("items",JSON.stringify(this.getActivePlatforms().map(t=>({id:t,label:n[t].name})))),t.addEventListener("db-change",t=>{const e=t.detail,s=e?.id;s&&this.handlePlatformShare(s)}),this.dropdownEl=t,this.append(t)}renderModal(){const t=this.createTriggerButton();this.append(t);const e=document.createElement("db-modal");e.className="designbase-wc-share__modal",e.setAttribute("title",this.getAttribute("modal-title")||"공유하기"),e.setAttribute("size","m"),this.contentSlot=document.createElement("div"),this.contentSlot.className="designbase-wc-share designbase-wc-share__content",this.contentSlot.setAttribute("data-modal-part","body"),this.populateShareContent(this.contentSlot),e.append(this.contentSlot),e.addEventListener("db-close",()=>{this.open=!1,this.qrCodeData="",this.contentSlot&&(this.contentSlot.replaceChildren(),this.populateShareContent(this.contentSlot))}),this.modalEl=e,this.append(e),this.syncModalOpen()}render(){const t=this.getAttribute("variant")||"button";this.className=`designbase-wc-share designbase-wc-share--${t}`,this.replaceChildren(),this.modalEl=null,this.contentSlot=null,this.dropdownEl=null,"inline"!==t?"dropdown"!==t?"modal"!==t?this.append(this.createTriggerButton()):this.renderModal():this.renderDropdown():this.append(this.createShareContent())}}customElements.get("db-share")||customElements.define("db-share",DbShare);export{DbShare};

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

@@ -0,0 +1,59 @@
+interface DbSidebarItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: string;
+    active?: boolean;
+    disabled?: boolean;
+    badge?: string | number;
+    badgeColor?: string;
+    children?: DbSidebarItem[];
+}
+interface DbSidebarSection {
+    id: string;
+    title?: string;
+    items: DbSidebarItem[];
+}
+interface DbSidebarUserProfile {
+    name: string;
+    email?: string;
+    avatar?: string;
+}
+declare class DbSidebar extends HTMLElement {
+    private expandedItems;
+    private userMenuOpen;
+    private outsideHandler;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private seedExpanded;
+    get items(): DbSidebarItem[];
+    set items(value: DbSidebarItem[] | string);
+    get sections(): DbSidebarSection[];
+    set sections(value: DbSidebarSection[] | string);
+    get userMenuItems(): DbSidebarItem[];
+    set userMenuItems(value: DbSidebarItem[] | string);
+    get userProfile(): DbSidebarUserProfile | null;
+    set userProfile(value: DbSidebarUserProfile | string | null);
+    private parseSections;
+    private parseUserMenuItems;
+    private parseUserProfile;
+    private bindOutsideClick;
+    private unbindOutsideClick;
+    private syncHostClasses;
+    private dispatchItemClick;
+    private dispatchUserMenuItemClick;
+    private updateUserMenuVisibility;
+    private createSidebarMenuItem;
+    private renderNav;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-sidebar': DbSidebar;
+    }
+}
+
+export { DbSidebar };
+export type { DbSidebarItem, DbSidebarSection, DbSidebarUserProfile };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],s=["default","dark","light"],i=["left","right"];class DbSidebar extends HTMLElement{constructor(){super(...arguments),this.expandedItems=new Set,this.userMenuOpen=!1,this.outsideHandler=null}static get observedAttributes(){return["items","sections","user-menu-items","user-profile","default-expanded-ids","size","variant","position","collapsed","collapsible","show-logo","full-height","shadow"]}connectedCallback(){this.seedExpanded(),this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick()}attributeChangedCallback(e){this.isConnected&&("default-expanded-ids"===e&&this.seedExpanded(),"collapsed"===e&&this.hasAttribute("collapsed")&&(this.userMenuOpen=!1),this.render())}seedExpanded(){try{const e=JSON.parse(this.getAttribute("default-expanded-ids")||"[]");Array.isArray(e)&&(this.expandedItems=new Set(e))}catch{this.expandedItems=new Set}}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get sections(){return this.parseSections()}set sections(e){this.setAttribute("sections","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseUserMenuItems()}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))}parseSections(){const e=this.getAttribute("sections");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length)return t}catch{}try{const e=JSON.parse(this.getAttribute("items")||"[]");return[{id:"main",items:Array.isArray(e)?e:[]}]}catch{return[{id:"main",items:[]}]}}parseUserMenuItems(){try{const e=JSON.parse(this.getAttribute("user-menu-items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{const t=this.querySelector(".designbase-wc-sidebar__user");t&&!t.contains(e.target)&&(this.userMenuOpen=!1,this.updateUserMenuVisibility())},document.addEventListener("mousedown",this.outsideHandler))}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}syncHostClasses(){const e=this.getAttribute("size")||"m",a=this.getAttribute("variant")||"default",r=this.getAttribute("position")||"left";this.className=["designbase-wc-sidebar",`designbase-wc-sidebar--${t.includes(e)?e:"m"}`,`designbase-wc-sidebar--${s.includes(a)?a:"default"}`,`designbase-wc-sidebar--${i.includes(r)?r:"left"}`,this.hasAttribute("collapsed")&&"designbase-wc-sidebar--collapsed",this.hasAttribute("full-height")&&"designbase-wc-sidebar--full-height",this.hasAttribute("shadow")&&"designbase-wc-sidebar--shadow"].filter(Boolean).join(" ")}dispatchItemClick(e){this.dispatchEvent(new CustomEvent("db-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}dispatchUserMenuItemClick(e){this.dispatchEvent(new CustomEvent("db-user-menu-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}updateUserMenuVisibility(){const e=this.querySelector(".designbase-wc-sidebar__user-dropdown");e&&(e.hidden=!this.userMenuOpen)}createSidebarMenuItem(e,t,s=0){const i=Boolean(e.children?.length),a=this.expandedItems.has(e.id),r=this.hasAttribute("collapsed"),n=document.createElement("li");n.className="designbase-wc-sidebar__item";const d=document.createElement("db-menu-item");return d.setAttribute("label",e.label),d.setAttribute("type","block"),d.setAttribute("menu-style","accordion"),d.setAttribute("size",t),d.setAttribute("depth",String(s)),e.href&&d.setAttribute("href",e.href),e.icon&&d.setAttribute("icon",e.icon),e.active&&d.setAttribute("active",""),e.disabled&&d.setAttribute("disabled",""),void 0!==e.badge&&d.setAttribute("badge",String(e.badge)),e.badgeColor&&d.setAttribute("badge-color",e.badgeColor),i&&(d.setAttribute("expandable",""),d.subItems=(e.children||[]).map(e=>({id:e.id,label:e.label,href:e.href,icon:e.icon,active:e.active,disabled:e.disabled,badge:e.badge,badgeColor:e.badgeColor})),a&&!r&&d.setAttribute("expanded","")),d.addEventListener("db-click",()=>{if(!e.disabled)return i&&!r?(this.expandedItems.has(e.id)?this.expandedItems.delete(e.id):this.expandedItems.add(e.id),void this.renderNav()):void this.dispatchItemClick(e)}),d.addEventListener("db-child-click",e=>{const t=e.detail;this.dispatchItemClick(t.child)}),n.append(d),n}renderNav(){const e=this.querySelector(".designbase-wc-sidebar__nav");if(!e)return;const t=this.getAttribute("size")||"m",s=this.parseSections();e.replaceChildren(),s.forEach(s=>{const i=document.createElement("div");if(i.className="designbase-wc-sidebar__section",!this.hasAttribute("collapsed")&&s.title){const e=document.createElement("div");e.className="designbase-wc-sidebar__section-title",e.textContent=s.title,i.append(e)}const a=document.createElement("ul");a.className="designbase-wc-sidebar__nav-list",s.items.forEach(e=>a.append(this.createSidebarMenuItem(e,t))),i.append(a),e.append(i)})}render(){this.syncHostClasses(),this.setAttribute("role","complementary"),this.setAttribute("aria-label","사이드바 네비게이션");const t=this.getAttribute("size")||"m",s="false"!==this.getAttribute("collapsible"),i="false"!==this.getAttribute("show-logo"),a=this.hasAttribute("collapsed"),r=this.parseUserProfile(),n=this.parseUserMenuItems(),d="l"===t?"m":"s"===t?"xs":"s";this.replaceChildren();const c=document.createElement("div");if(c.className="designbase-wc-sidebar__container",s||i&&!a){const e=document.createElement("div");if(e.className=["designbase-wc-sidebar__header",(a||!i)&&"designbase-wc-sidebar__header--collapsed-only"].filter(Boolean).join(" "),!a&&i){const t=document.createElement("div");t.className="designbase-wc-sidebar__logo";const s=document.createElement("db-logo");s.setAttribute("type","designbase"),s.setAttribute("size",d),t.append(s),t.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),e.append(t)}if(s){const t=document.createElement("db-button");t.className="designbase-wc-sidebar__toggle",t.setAttribute("variant","tertiary"),t.setAttribute("size","s"),t.setAttribute("icon-only",""),t.setAttribute("start-icon",a?"arrow-bar-right":"arrow-bar-left"),t.setAttribute("aria-label",a?"사이드바 펼치기":"사이드바 접기"),t.addEventListener("db-click",()=>{const e=!this.hasAttribute("collapsed");e?this.setAttribute("collapsed",""):this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("db-toggle",{bubbles:!0,composed:!0,detail:{collapsed:e}}))}),e.append(t)}c.append(e)}const l=document.createElement("div");l.className="designbase-wc-sidebar__nav-wrapper";const u=document.createElement("nav");u.className="designbase-wc-sidebar__nav",u.setAttribute("aria-label","주 메뉴"),l.append(u),c.append(l);const o=document.createElement("div");if(o.className="designbase-wc-sidebar__footer",r&&!a){const t=document.createElement("div");t.className="designbase-wc-sidebar__user";const s=document.createElement("div");if(s.className="designbase-wc-sidebar__user-dropdown",s.setAttribute("role","menu"),s.setAttribute("aria-label","사용자 메뉴"),s.hidden=!this.userMenuOpen,n.length){const e=document.createElement("ul");e.className="designbase-wc-sidebar__user-menu",n.forEach(t=>{const s=document.createElement("li");s.className="designbase-wc-sidebar__user-menu-item";const i=document.createElement("db-menu-item");i.setAttribute("label",t.label),i.setAttribute("type","block"),i.setAttribute("menu-style","accordion"),i.setAttribute("size","s"),t.icon&&i.setAttribute("icon",t.icon),t.href&&i.setAttribute("href",t.href),i.addEventListener("db-click",()=>{this.userMenuOpen=!1,this.updateUserMenuVisibility(),this.dispatchUserMenuItemClick(t)}),s.append(i),e.append(s)}),s.append(e)}const i=document.createElement("div");i.className="designbase-wc-sidebar__user-info",i.setAttribute("role","button"),i.setAttribute("tabindex","0"),i.setAttribute("aria-expanded",String(this.userMenuOpen));const a=document.createElement("db-avatar");a.className="designbase-wc-sidebar__user-avatar",a.setAttribute("size","s"),a.setAttribute("initials",r.name),a.setAttribute("alt",r.name),r.avatar&&a.setAttribute("src",r.avatar);const d=document.createElement("div");d.className="designbase-wc-sidebar__user-details";const c=document.createElement("div");if(c.className="designbase-wc-sidebar__user-name",c.textContent=r.name,d.append(c),r.email){const e=document.createElement("div");e.className="designbase-wc-sidebar__user-email",e.textContent=r.email,d.append(e)}if(i.append(a,d),n.length){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-more",t.setAttribute("aria-hidden","true"),t.append(e("more-vertical",16)),i.append(t),i.setAttribute("aria-haspopup","menu")}i.addEventListener("click",()=>{n.length&&(this.userMenuOpen=!this.userMenuOpen,i.setAttribute("aria-expanded",String(this.userMenuOpen)),this.updateUserMenuVisibility())}),t.append(s,i),o.append(t)}else if(r&&a){const e=document.createElement("div");e.className="designbase-wc-sidebar__user-collapsed",e.setAttribute("role","button"),e.setAttribute("tabindex","0");const t=document.createElement("db-avatar");t.className="designbase-wc-sidebar__user-avatar-collapsed",t.setAttribute("size","m"),t.setAttribute("initials",r.name),t.setAttribute("alt",r.name),r.avatar&&t.setAttribute("src",r.avatar),e.append(t),o.append(e)}c.append(o),this.append(c),this.renderNav()}}customElements.get("db-sidebar")||customElements.define("db-sidebar",DbSidebar);export{DbSidebar};

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

@@ -0,0 +1,13 @@
+declare class DbSkeleton extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-skeleton': DbSkeleton;
+    }
+}
+
+export { DbSkeleton };

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

@@ -0,0 +1 @@
+const e=["text","circular","rectangular","rounded"],t=["xs","s","m","l","xl"];function getDefaultSize(e,t){if("circular"===e)switch(t){case"xs":return"16px";case"s":return"24px";case"l":return"48px";case"xl":return"64px";default:return"32px"}switch(t){case"xs":return"12px";case"s":return"16px";case"l":return"24px";case"xl":return"32px";default:return"20px"}}function toCssSize(e){return/^\d+$/.test(e)?`${e}px`:e}class DbSkeleton extends HTMLElement{static get observedAttributes(){return["variant","size","width","height","animation","lines","line-spacing","last-line-width","aria-label"]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}render(){const s=this.getAttribute("variant")||"text",i=this.getAttribute("size")||"m",n=this.getAttribute("animation")||"pulse",r=Number(this.getAttribute("lines")||1),a=this.getAttribute("width"),l=this.getAttribute("height"),c=this.getAttribute("line-spacing")||"8px",u=this.getAttribute("last-line-width")||"60%",o=e.includes(s)?s:"text",h=t.includes(i)?i:"m",d=["designbase-wc-skeleton",`designbase-wc-skeleton--${o}`,`designbase-wc-skeleton--${h}`,`designbase-wc-skeleton--${n}`,(a||l)&&"designbase-wc-skeleton--custom-size"].filter(Boolean).join(" ");this.className!==d&&(this.className=d);const b=this.getAttribute("aria-label")??`${o} 스켈레톤 로딩 중`;if(this.getAttribute("aria-label")!==b&&this.setAttribute("aria-label",b),this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.replaceChildren(),this.style.width=a?toCssSize(a):"circular"===o?getDefaultSize(o,h):"100%",this.style.height=l?toCssSize(l):"circular"===o?getDefaultSize(o,h):function getTextLineHeight(e){switch(e){case"xs":return"12px";case"s":return"16px";case"l":return"24px";case"xl":return"32px";default:return"20px"}}(h),"text"===o&&r>1)for(let e=1;e<r;e+=1){const t=document.createElement("div");t.className="designbase-wc-skeleton__line",t.style.marginTop=toCssSize(c),e===r-1&&(t.style.width=toCssSize(u)),this.append(t)}}}customElements.get("db-skeleton")||customElements.define("db-skeleton",DbSkeleton);export{DbSkeleton};

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

@@ -0,0 +1,27 @@
+declare class DbSpinner extends HTMLElement {
+    static get observedAttributes(): string[];
+    get type(): string;
+    set type(value: string);
+    get size(): string;
+    set size(value: string);
+    get color(): string;
+    set color(value: string);
+    get speed(): number;
+    set speed(value: number);
+    get label(): string;
+    set label(value: string);
+    get showLabel(): boolean;
+    set showLabel(value: boolean);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+    private renderSpinner;
+    private escape;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-spinner': DbSpinner;
+    }
+}
+
+export { DbSpinner };

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

@@ -0,0 +1 @@
+const s=["circular","dots","bars","pulse","ripple"],e=["xs","s","m","l","xl"];class DbSpinner extends HTMLElement{static get observedAttributes(){return["type","size","color","speed","label","show-label"]}get type(){return this.getAttribute("type")||"circular"}set type(s){this.setAttribute("type",s)}get size(){return this.getAttribute("size")||"m"}set size(s){this.setAttribute("size",s)}get color(){return this.getAttribute("color")||""}set color(s){s?this.setAttribute("color",s):this.removeAttribute("color")}get speed(){return Number(this.getAttribute("speed")||1)}set speed(s){this.setAttribute("speed",String(s))}get label(){return this.getAttribute("label")||"로딩 중..."}set label(s){this.setAttribute("label",s)}get showLabel(){return this.hasAttribute("show-label")}set showLabel(s){this.toggleAttribute("show-label",s)}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){this.className=Array.from(this.classList).filter(s=>!s.startsWith("designbase-wc-spinner")).join(" "),this.classList.add("designbase-wc-spinner"),this.classList.add(`designbase-wc-spinner--${s.includes(this.type)?this.type:"circular"}`),this.classList.add(`designbase-wc-spinner--${e.includes(this.size)?this.size:"m"}`),this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.setAttribute("aria-busy","true"),this.showLabel&&this.setAttribute("aria-label",this.label),this.style.setProperty("--spinner-speed",`${this.speed}s`),this.color?this.style.setProperty("--spinner-color",this.color):this.style.removeProperty("--spinner-color"),this.innerHTML=`${this.renderSpinner()}${this.showLabel&&this.label?`<span class="designbase-wc-spinner__label" aria-hidden="true">${this.escape(this.label)}</span>`:""}`}renderSpinner(){switch(this.type){case"dots":return'<span class="designbase-wc-spinner__dots" aria-hidden="true"><span class="designbase-wc-spinner__dot"></span><span class="designbase-wc-spinner__dot"></span><span class="designbase-wc-spinner__dot"></span></span>';case"bars":return'<span class="designbase-wc-spinner__bars" aria-hidden="true"><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span></span>';case"pulse":return'<span class="designbase-wc-spinner__pulse" aria-hidden="true"></span>';case"ripple":return'<span class="designbase-wc-spinner__ripple" aria-hidden="true"><span class="designbase-wc-spinner__ripple-circle"></span><span class="designbase-wc-spinner__ripple-circle"></span></span>';default:return'<svg class="designbase-wc-spinner__circular" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="designbase-wc-spinner__circular-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle><circle class="designbase-wc-spinner__circular-indicator" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></circle></svg>'}}escape(s){return s.replace(/[&<>"']/g,s=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[s]||s))}}customElements.get("db-spinner")||customElements.define("db-spinner",DbSpinner);export{DbSpinner};

package/dist/esm/components/db-split-view.d.ts

@@ -0,0 +1,33 @@
+declare class DbSplitView extends HTMLElement {
+    static get observedAttributes(): string[];
+    private panelSizes;
+    private draggingIndex;
+    private panelSources;
+    private observer?;
+    private isSyncing;
+    private isObserving;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private startObserving;
+    private stopObserving;
+    attributeChangedCallback(): void;
+    private collectPanelSources;
+    private readPanelConfig;
+    private initPanelSizes;
+    private getDirection;
+    private getMode;
+    private getSplitterSize;
+    private getGap;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private applyPanelSizes;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-split-view': DbSplitView;
+    }
+}
+
+export { DbSplitView };

package/dist/esm/components/db-split-view.js

@@ -0,0 +1 @@
+class DbSplitView extends HTMLElement{constructor(){super(...arguments),this.panelSizes=[],this.draggingIndex=null,this.panelSources=[],this.isSyncing=!1,this.isObserving=!1,this.handleMouseDown=e=>t=>{t.preventDefault(),this.draggingIndex=e,document.body.style.cursor="horizontal"===this.getDirection()?"col-resize":"row-resize",document.body.style.userSelect="none"},this.handleMouseMove=e=>{if(null===this.draggingIndex)return;if(!this.panelSources.length)return;const t=this.getDirection(),i=this.getMode(),s=this.getSplitterSize(),n=this.getBoundingClientRect(),l=this.panelSources[this.draggingIndex];if(!l)return;const r=this.readPanelConfig(l,this.draggingIndex,this.panelSources.length);let o=this.panelSizes[this.draggingIndex];if("horizontal"===t){const t=n.width,l=e.clientX-n.left;let a=0;for(let e=0;e<this.draggingIndex;e++){const n=this.panelSizes[e];a+="fixed"===i?n:n*t,a+=s}const h=l-a;if("fixed"===i)o=Math.max(r.minSize||0,Math.min(r.maxSize||t,h));else{o=h/t;const e=r.minSize?r.minSize/t:0,i=r.maxSize?r.maxSize/t:1;o=Math.max(e,Math.min(i,o))}}else{const t=n.height,l=e.clientY-n.top;let a=0;for(let e=0;e<this.draggingIndex;e++){const n=this.panelSizes[e];a+="fixed"===i?n:n*t,a+=s}const h=l-a;if("fixed"===i)o=Math.max(r.minSize||0,Math.min(r.maxSize||t,h));else{o=h/t;const e=r.minSize?r.minSize/t:0,i=r.maxSize?r.maxSize/t:1;o=Math.max(e,Math.min(i,o))}}this.panelSizes[this.draggingIndex]=o,this.applyPanelSizes(),this.classList.toggle("designbase-wc-split-view--dragging",!0)},this.handleMouseUp=()=>{null!==this.draggingIndex&&(this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect="",this.classList.toggle("designbase-wc-split-view--dragging",!1))}}static get observedAttributes(){return["direction","mode","splitter-size","splitter-color","splitter-hover-color","gap","full-width","full-height"]}connectedCallback(){this.style.display="flex",this.style.boxSizing="border-box",this.collectPanelSources(),this.initPanelSizes(),this.sync(),this.observer=new MutationObserver(()=>{this.isSyncing||(this.collectPanelSources(),this.initPanelSizes(),this.sync())}),this.startObserving(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp)}disconnectedCallback(){this.stopObserving(),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect=""}startObserving(){this.observer&&!this.isObserving&&(this.observer.observe(this,{childList:!0}),this.isObserving=!0)}stopObserving(){this.observer&&this.isObserving&&(this.observer.disconnect(),this.isObserving=!1)}attributeChangedCallback(){this.isConnected&&this.sync()}collectPanelSources(){this.panelSources=[];const e=Array.from(this.querySelectorAll('[slot="panel"]'));if(e.length)return void(this.panelSources=e);const t=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel > .designbase-wc-split-view__panel-body"));t.length&&(this.panelSources=t.map(e=>e.firstElementChild).filter(e=>e instanceof HTMLElement))}readPanelConfig(e,t,i){const s=e.getAttribute("data-size"),n=e.getAttribute("data-min-size"),l=e.getAttribute("data-max-size"),r=this.getMode();let o;return null!=s&&""!==s&&(o=Number(s)),{size:void 0!==o&&Number.isFinite(o)?o:"ratio"===r?1/i:200,minSize:n?Number(n):void 0,maxSize:l?Number(l):void 0,resizable:"false"!==e.getAttribute("data-resizable"),flexible:e.hasAttribute("data-flexible")||"false"!==e.getAttribute("data-flexible")&&t===i-1}}initPanelSizes(){const e=this.panelSources.length;if(!e)return;if(this.panelSizes.length===e)return;const t=this.getMode();this.panelSizes=this.panelSources.map((i,s)=>this.readPanelConfig(i,s,e).size??("ratio"===t?1/e:200))}getDirection(){return"vertical"===(this.getAttribute("direction")||"horizontal")?"vertical":"horizontal"}getMode(){return"fixed"===(this.getAttribute("mode")||"ratio")?"fixed":"ratio"}getSplitterSize(){return Number(this.getAttribute("splitter-size")||4)}getGap(){return Number(this.getAttribute("gap")||0)}applyPanelSizes(){if(!this.panelSources.length)return;const e=this.getDirection(),t=this.getMode();Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")).forEach((i,s)=>{const n=this.panelSources[s];if(!n)return;const l=this.readPanelConfig(n,s,this.panelSources.length),r=this.panelSizes[s],o=l.flexible;if(i.style.width="",i.style.height="",i.style.flexBasis="",i.style.flexGrow="",i.style.flexShrink="",i.style.minHeight="",i.style.minWidth="",o)i.style.flex="1 1 0","vertical"===e?i.style.minHeight="0":i.style.minWidth="0";else{const e="fixed"===t?`${r}px`:100*r+"%";i.style.flex=`0 0 ${e}`}i.classList.toggle("designbase-wc-split-view__panel--flexible",Boolean(o)),i.classList.toggle("designbase-wc-split-view__panel--fixed",!o)})}sync(){if(this.isSyncing=!0,this.stopObserving(),this.collectPanelSources(),this.initPanelSizes(),!this.panelSources.length)return this.isSyncing=!1,void this.startObserving();const e=this.getDirection(),t=this.getMode(),i=this.getGap(),s=this.getSplitterSize(),n=this.getAttribute("splitter-color"),l=this.getAttribute("splitter-hover-color");this.className=["designbase-wc-split-view",`designbase-wc-split-view--direction-${e}`,`designbase-wc-split-view--mode-${t}`,this.hasAttribute("full-width")&&"designbase-wc-split-view--full-width",this.hasAttribute("full-height")&&"designbase-wc-split-view--full-height",null!==this.draggingIndex&&"designbase-wc-split-view--dragging"].filter(Boolean).join(" "),this.style.setProperty("--splitter-size",`${s}px`),n?this.style.setProperty("--splitter-color",n):this.style.removeProperty("--splitter-color"),l?this.style.setProperty("--splitter-hover-color",l):this.style.removeProperty("--splitter-hover-color"),this.style.gap=i>0?`${i}px`:"";const r=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")),o=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__splitter"));r.forEach(e=>e.remove()),o.forEach(e=>e.remove()),this.panelSources.forEach((t,s)=>{const n=this.readPanelConfig(t,s,this.panelSources.length),l=s===this.panelSources.length-1,r=!1!==n.resizable&&!l,o=document.createElement("div");o.className="designbase-wc-split-view__panel";const a=document.createElement("div");if(a.className="designbase-wc-split-view__panel-body",t.parentElement!==a&&a.append(t),o.append(a),this.append(o),!l&&r&&0===i){const t=document.createElement("div");t.className=`designbase-wc-split-view__splitter designbase-wc-split-view__splitter--direction-${e}`,t.style.cursor="horizontal"===e?"col-resize":"row-resize",t.addEventListener("mousedown",this.handleMouseDown(s)),this.append(t)}}),this.applyPanelSizes(),this.isSyncing=!1,this.startObserving()}}customElements.get("db-split-view")||customElements.define("db-split-view",DbSplitView);export{DbSplitView};

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

@@ -0,0 +1,13 @@
+declare class DbStack extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private syncClasses;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-stack': DbStack;
+    }
+}
+
+export { DbStack };

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

@@ -0,0 +1 @@
+const t=["vertical","horizontal"],s=["start","center","end","stretch"],e=["start","center","end","space-between","space-around","space-evenly"],a=["none","xs","s","m","l","xl"];class DbStack extends HTMLElement{static get observedAttributes(){return["direction","alignment","justify","spacing","full-width","full-height","wrap"]}connectedCallback(){this.syncClasses()}attributeChangedCallback(){this.syncClasses()}syncClasses(){const i=this.getAttribute("direction")||"vertical",c=this.getAttribute("alignment")||"start",n=this.getAttribute("justify")||"start",l=this.getAttribute("spacing")||"m",r=a.includes(l)?l:"m";this.className=["designbase-wc-stack",`designbase-wc-stack--direction-${t.includes(i)?i:"vertical"}`,`designbase-wc-stack--alignment-${s.includes(c)?c:"start"}`,`designbase-wc-stack--justify-${e.includes(n)?n:"start"}`,`designbase-wc-stack--spacing-${{none:"none",xs:"xs",s:"sm",m:"md",l:"lg",xl:"xl"}[r]||"md"}`,this.hasAttribute("full-width")&&"designbase-wc-stack--full-width",this.hasAttribute("full-height")&&"designbase-wc-stack--full-height",this.hasAttribute("wrap")&&"designbase-wc-stack--wrap"].filter(Boolean).join(" ")}}customElements.get("db-stack")||customElements.define("db-stack",DbStack);export{DbStack};

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

@@ -0,0 +1,26 @@
+interface DbStatChange {
+    value: number;
+    type: 'increase' | 'decrease';
+    period?: string;
+}
+declare class DbStat extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private handleClick;
+    private handleKeyDown;
+    private parseChange;
+    private getChangeText;
+    private resolveIconName;
+    private getProgressVariant;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-stat': DbStat;
+    }
+}
+
+export { DbStat };
+export type { DbStatChange };

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

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";const e=["s","m","l"],s=["default","minimal","card","colored","iconBox"],i=["horizontal","vertical","reverse"],a=["primary","secondary","success","warning","error","info","custom"],n={s:16,m:20,l:24};class DbStat extends HTMLElement{constructor(){super(...arguments),this.handleClick=()=>{!this.hasAttribute("disabled")&&this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=t=>{this.hasAttribute("clickable")&&!this.hasAttribute("disabled")&&("Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleClick()))}}static get observedAttributes(){return["value","label","icon","icon-position","size","variant","layout","color","custom-color","progress","show-progress","change","show-change","description","show-description","clickable","disabled","animated"]}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.render()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(){this.render()}parseChange(){const t=this.getAttribute("change");if(!t)return null;try{const e=JSON.parse(t);if(e&&"number"==typeof e.value&&e.type)return e}catch{}return null}getChangeText(t){const e="increase"===t.type?"+":"-",s=t.period?` ${t.period}`:"";return`${e}${Math.abs(t.value)}%${s}`}resolveIconName(t){if(!t)return;return t in{user:1,sparkle:1,award:1,bulb:1,edit:1,search:1}?t:void 0}getProgressVariant(t){return"primary"===t?"primary":"success"===t?"success":"warning"===t?"warning":"error"===t?"danger":"default"}render(){const r=this.getAttribute("value")??"",c=this.getAttribute("label")||"",o=this.getAttribute("icon")||"",d=this.getAttribute("icon-position")||"left",l=this.getAttribute("size")||"m",h=e.includes(l)?l:"m",b=this.getAttribute("variant")||"default",u=s.includes(b)?b:"default",g=this.getAttribute("layout")||"horizontal",m=i.includes(g)?g:"horizontal",p=this.getAttribute("color")||"primary",w=a.includes(p)?p:"primary",v=this.getAttribute("custom-color")||"",A=this.getAttribute("progress"),y=null!==A?Number(A):NaN,_=this.hasAttribute("show-progress"),k=this.parseChange(),E=this.hasAttribute("show-change"),f=this.getAttribute("description")||"",N=this.hasAttribute("show-description"),C=this.hasAttribute("clickable"),x=this.hasAttribute("disabled"),$=this.hasAttribute("animated");this.className=["designbase-wc-stat",`designbase-wc-stat--size-${h}`,`designbase-wc-stat--variant-${u}`,`designbase-wc-stat--layout-${m}`,`designbase-wc-stat--color-${w}`,C&&"designbase-wc-stat--clickable",x&&"designbase-wc-stat--disabled",$&&"designbase-wc-stat--animated",_&&"designbase-wc-stat--with-progress",E&&k&&"designbase-wc-stat--with-change",N&&f&&"designbase-wc-stat--with-description"].filter(Boolean).join(" "),v?this.style.setProperty("--stat-color",v):this.style.removeProperty("--stat-color"),C&&!x?(this.setAttribute("role","button"),this.setAttribute("tabindex","0")):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.replaceChildren();const z=document.createElement("div");z.className="designbase-wc-stat__body";const D=this.resolveIconName(o);if(D){const e=document.createElement("div");e.className=`designbase-wc-stat__icon designbase-wc-stat__icon--${d}`;const s="iconBox"===u?n[h]:20;e.append(t(D,s)),z.append(e)}const S=document.createElement("div");S.className="designbase-wc-stat__content";const L=document.createElement("div");L.className="designbase-wc-stat__main";const M=document.createElement("div");M.className="designbase-wc-stat__label",M.textContent=c;const P=document.createElement("div");if(P.className="designbase-wc-stat__value",P.textContent=String(r),L.append(M,P),S.append(L),E&&k){const t=document.createElement("div");t.className=["designbase-wc-stat__change","increase"===k.type?"designbase-wc-stat__change--increase":"designbase-wc-stat__change--decrease"].join(" "),t.textContent=this.getChangeText(k),S.append(t)}if(N&&f){const t=document.createElement("div");t.className="designbase-wc-stat__description",t.textContent=f,S.append(t)}if(z.append(S),this.append(z),_&&!Number.isNaN(y)){const t=Math.min(Math.max(y,0),100),e=document.createElement("div");e.className="designbase-wc-stat__progress";const s=document.createElement("db-progressbar");s.setAttribute("value",String(t)),s.setAttribute("size","s"),s.setAttribute("variant",this.getProgressVariant(w)),s.setAttribute("full-width",""),e.append(s),this.append(e)}}}customElements.get("db-stat")||customElements.define("db-stat",DbStat);export{DbStat};

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

@@ -0,0 +1,49 @@
+/**
+ * Stepper Web Component
+ */
+declare class DbStepper extends HTMLElement {
+    static get observedAttributes(): string[];
+    private decrementBtn;
+    private incrementBtn;
+    private valueWrapEl;
+    private valueTextEl;
+    private valueInputEl;
+    private descriptionEl;
+    private boundInputKeyDown;
+    private boundInputInput;
+    private boundInputPaste;
+    private boundInputBlur;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get value(): number;
+    set value(value: number);
+    private build;
+    private isEditable;
+    private syncFromAttributes;
+    private applyValueInputAppearance;
+    private syncValueField;
+    private allowsNegative;
+    private allowsDecimal;
+    private buildInputPattern;
+    private sanitizeInputString;
+    private parseInputValue;
+    private enforceInputBounds;
+    private handleInputKeyDown;
+    private handleInputInput;
+    private handleInputPaste;
+    private commitInputValue;
+    private getMin;
+    private getMax;
+    private getStep;
+    private snapToStep;
+    private clamp;
+    private updateButtons;
+    private change;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-stepper': DbStepper;
+    }
+}
+
+export { DbStepper };

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

@@ -0,0 +1 @@
+const t="designbase-wc-stepper",e=["s","m","l"],i={display:"block",width:"100%",minWidth:"0",height:"auto",padding:"0",margin:"0",border:"0",background:"transparent",color:"inherit",fontFamily:"inherit",fontWeight:"600",lineHeight:"1",textAlign:"center",outline:"none",boxShadow:"none",boxSizing:"border-box",appearance:"none"};class DbStepper extends HTMLElement{constructor(){super(...arguments),this.decrementBtn=null,this.incrementBtn=null,this.valueWrapEl=null,this.valueTextEl=null,this.valueInputEl=null,this.descriptionEl=null,this.boundInputKeyDown=t=>this.handleInputKeyDown(t),this.boundInputInput=()=>this.handleInputInput(),this.boundInputPaste=t=>this.handleInputPaste(t),this.boundInputBlur=()=>this.commitInputValue()}static get observedAttributes(){return["value","min","max","step","size","editable","full-width","disabled","readonly"]}connectedCallback(){this.querySelector(`.${t}__button`)||this.build(),this.syncFromAttributes()}attributeChangedCallback(t){this.decrementBtn&&this.syncFromAttributes()}get value(){return Number(this.getAttribute("value")||0)}set value(t){this.setAttribute("value",String(t))}build(){this.decrementBtn=document.createElement("button"),this.decrementBtn.type="button",this.decrementBtn.className=`${t}__button ${t}__button--decrement`,this.decrementBtn.setAttribute("aria-label","감소"),this.decrementBtn.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>',this.valueWrapEl=document.createElement("div"),this.valueWrapEl.className=`${t}__value`,this.valueTextEl=document.createElement("span"),this.valueTextEl.className=`${t}__value-text`,this.valueWrapEl.appendChild(this.valueTextEl),this.incrementBtn=document.createElement("button"),this.incrementBtn.type="button",this.incrementBtn.className=`${t}__button ${t}__button--increment`,this.incrementBtn.setAttribute("aria-label","증가"),this.incrementBtn.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>',this.descriptionEl=document.createElement("div"),this.descriptionEl.id="stepper-description",this.descriptionEl.className="sr-only",this.decrementBtn.addEventListener("click",()=>this.change(this.value-this.getStep())),this.incrementBtn.addEventListener("click",()=>this.change(this.value+this.getStep())),this.append(this.decrementBtn,this.valueWrapEl,this.incrementBtn,this.descriptionEl)}isEditable(){return!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")&&"false"!==this.getAttribute("editable")}syncFromAttributes(){const i=this.getAttribute("size")||"m",n=this.hasAttribute("disabled"),s=this.hasAttribute("readonly"),l=this.getMin(),u=this.getMax(),a=this.getStep(),r=this.clamp(this.snapToStep(this.value));if(this.getAttribute("value")!==String(r)&&this.setAttribute("value",String(r)),this.className=[t,`${t}--${e.includes(i)?i:"m"}`,this.hasAttribute("full-width")&&`${t}--full-width`,this.isEditable()&&`${t}--editable`,n&&`${t}--disabled`,s&&`${t}--readonly`].filter(Boolean).join(" "),this.syncValueField(r),this.descriptionEl){const t=this.isEditable()?"값을 직접 입력할 수 있습니다. ":"";this.descriptionEl.textContent=`${t}숫자 조정기. +/- 버튼으로 값을 조정할 수 있습니다. 현재 값: ${r}, 최소값: ${l}, 최대값: ${u}, 단계: ${a}`}this.decrementBtn?.setAttribute("aria-describedby","stepper-description"),this.incrementBtn?.setAttribute("aria-describedby","stepper-description"),this.updateButtons()}applyValueInputAppearance(){this.valueInputEl&&(Object.assign(this.valueInputEl.style,i),this.valueInputEl.style.setProperty("-webkit-appearance","none"),this.valueInputEl.style.setProperty("-moz-appearance","textfield"))}syncValueField(e){if(this.valueWrapEl){if(this.isEditable())return this.valueInputEl||(this.valueInputEl=document.createElement("input"),this.valueInputEl.className=`${t}__value-input`,this.valueInputEl.type="text",this.valueInputEl.setAttribute("inputmode",this.allowsDecimal()?"decimal":"numeric"),this.valueInputEl.setAttribute("pattern",this.buildInputPattern()),this.valueInputEl.setAttribute("aria-label","값 입력"),this.valueInputEl.autocomplete="off",this.valueInputEl.spellcheck=!1,this.valueInputEl.addEventListener("keydown",this.boundInputKeyDown),this.valueInputEl.addEventListener("input",this.boundInputInput),this.valueInputEl.addEventListener("paste",this.boundInputPaste),this.valueInputEl.addEventListener("blur",this.boundInputBlur),this.applyValueInputAppearance()),this.applyValueInputAppearance(),this.valueInputEl.setAttribute("inputmode",this.allowsDecimal()?"decimal":"numeric"),this.valueInputEl.setAttribute("pattern",this.buildInputPattern()),this.valueInputEl.setAttribute("aria-valuemin",String(this.getMin())),this.valueInputEl.setAttribute("aria-valuemax",String(this.getMax())),this.valueInputEl.disabled=!1,document.activeElement!==this.valueInputEl&&(this.valueInputEl.value=String(e)),this.valueTextEl?.remove(),void(this.valueWrapEl.contains(this.valueInputEl)||this.valueWrapEl.appendChild(this.valueInputEl));this.valueInputEl&&(this.valueInputEl.removeEventListener("keydown",this.boundInputKeyDown),this.valueInputEl.removeEventListener("input",this.boundInputInput),this.valueInputEl.removeEventListener("paste",this.boundInputPaste),this.valueInputEl.removeEventListener("blur",this.boundInputBlur),this.valueInputEl.remove(),this.valueInputEl=null),this.valueTextEl||(this.valueTextEl=document.createElement("span"),this.valueTextEl.className=`${t}__value-text`),this.valueTextEl.textContent=String(e),this.valueWrapEl.contains(this.valueTextEl)||this.valueWrapEl.appendChild(this.valueTextEl)}}allowsNegative(){return this.getMin()<0}allowsDecimal(){const t=this.getStep();return!Number.isInteger(t)}buildInputPattern(){return`^${this.allowsNegative()?"-?":""}\\d*${this.allowsDecimal()?"(\\.\\d*)?":""}$`}sanitizeInputString(t){let e="",i=!1,n=!1;for(let s=0;s<t.length;s++){const l=t[s];"-"!==l||!this.allowsNegative()||0!==e.length||i?"."!==l||!this.allowsDecimal()||n?/\d/.test(l)&&(e+=l):(e+=l,n=!0):(e+=l,i=!0)}return e}parseInputValue(t){const e=t.trim();if(""===e||"-"===e||"."===e)return null;const i=Number(e);return Number.isFinite(i)?i:null}enforceInputBounds(t,e={}){const i=this.sanitizeInputString(t),n=this.parseInputValue(i);if(null===n)return i;const s=this.getMin(),l=this.getMax();return n>l?String(l):e.clampMin&&n<s?String(s):i}handleInputKeyDown(t){if(!["Backspace","Delete","Tab","Escape","ArrowLeft","ArrowRight","Home","End"].includes(t.key)){if("Enter"===t.key)return t.preventDefault(),this.commitInputValue(),void this.valueInputEl?.blur();if("-"===t.key&&this.allowsNegative()){const t=this.valueInputEl;if(t&&0===t.selectionStart&&0===t.selectionEnd&&!t.value.includes("-"))return}"."===t.key&&this.allowsDecimal()&&!this.valueInputEl?.value.includes(".")||/^\d$/.test(t.key)||t.preventDefault()}}handleInputInput(){if(!this.valueInputEl)return;const t=this.enforceInputBounds(this.valueInputEl.value);this.valueInputEl.value!==t&&(this.valueInputEl.value=t)}handleInputPaste(t){if(t.preventDefault(),!this.valueInputEl)return;const e=t.clipboardData?.getData("text")??"",i=this.enforceInputBounds(this.sanitizeInputString(this.valueInputEl.value+e));this.valueInputEl.value=i,this.handleInputInput()}commitInputValue(){if(!this.valueInputEl||!this.isEditable())return;const t=this.valueInputEl.value.trim();if(""===t||"-"===t||"."===t)return void(this.valueInputEl.value=String(this.value));const e=this.parseInputValue(t);if(null===e)return void(this.valueInputEl.value=String(this.value));const i=this.snapToStep(e);this.valueInputEl.value=String(i),this.change(i)}getMin(){return Number(this.getAttribute("min")??0)}getMax(){return Number(this.getAttribute("max")??100)}getStep(){return Number(this.getAttribute("step")??1)}snapToStep(t){const e=this.getStep(),i=Math.round(t/e)*e;return this.clamp(i)}clamp(t){return Math.max(this.getMin(),Math.min(this.getMax(),t))}updateButtons(){const e=this.getMin(),i=this.getMax(),n=this.hasAttribute("disabled"),s=this.hasAttribute("readonly"),l=this.value,u=l<=e,a=l>=i;if(this.decrementBtn){const e=n||s||u;this.decrementBtn.disabled=e,this.decrementBtn.classList.toggle(`${t}__button--disabled`,e)}if(this.incrementBtn){const e=n||s||a;this.incrementBtn.disabled=e,this.incrementBtn.classList.toggle(`${t}__button--disabled`,e)}}change(t){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;const e=this.getMin(),i=this.getMax(),n=this.clamp(this.snapToStep(t)),s=this.value;if(n!==s){if(this.setAttribute("value",String(n)),this.valueTextEl&&(this.valueTextEl.textContent=String(n)),this.valueInputEl&&(this.valueInputEl.value=String(n)),this.updateButtons(),this.descriptionEl){const t=this.getStep(),s=this.isEditable()?"값을 직접 입력할 수 있습니다. ":"";this.descriptionEl.textContent=`${s}숫자 조정기. +/- 버튼으로 값을 조정할 수 있습니다. 현재 값: ${n}, 최소값: ${e}, 최대값: ${i}, 단계: ${t}`}this.dispatchEvent(new CustomEvent("db-change",{detail:{value:n,minReached:n<=e,maxReached:n>=i},bubbles:!0,composed:!0})),n<=e&&s>e&&this.dispatchEvent(new CustomEvent("db-min-reached",{bubbles:!0,composed:!0,detail:{value:n}})),n>=i&&s<i&&this.dispatchEvent(new CustomEvent("db-max-reached",{bubbles:!0,composed:!0,detail:{value:n}}))}else this.valueInputEl&&(this.valueInputEl.value=String(n))}}customElements.get("db-stepper")||customElements.define("db-stepper",DbStepper);export{DbStepper};

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

@@ -0,0 +1,39 @@
+interface TableColumn {
+    key: string;
+    header: string;
+    align?: 'left' | 'center' | 'right';
+    width?: string | number;
+    sortable?: boolean;
+}
+type RowData = Record<string, unknown>;
+declare class DbTable extends HTMLElement {
+    static get observedAttributes(): string[];
+    private internalSelectedRows;
+    private internalSortColumn;
+    private internalSortDirection;
+    private internalPage;
+    get columns(): TableColumn[];
+    set columns(value: TableColumn[] | string);
+    get data(): RowData[];
+    set data(value: RowData[] | string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private syncSelectedRowsFromAttribute;
+    private syncSortFromAttributes;
+    private getRowKey;
+    private getSortedData;
+    private handleSort;
+    private handleRowSelect;
+    private handleSelectAll;
+    private getPaginatedData;
+    private createSortIcon;
+    private createCheckbox;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-table': DbTable;
+    }
+}
+
+export { DbTable };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],s=["default","striped","hoverable"];class DbTable extends HTMLElement{constructor(){super(...arguments),this.internalSelectedRows=[],this.internalSortDirection=null,this.internalPage=1}static get observedAttributes(){return["columns","data","title","size","variant","empty-message","sortable","sort-column","sort-direction","selectable","multi-select","selected-rows","row-key","loading","pagination","page","page-size","total-items","show-count-badge","clickable"]}get columns(){try{return JSON.parse(this.getAttribute("columns")||"[]")}catch{return[]}}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get data(){try{return JSON.parse(this.getAttribute("data")||"[]")}catch{return[]}}set data(e){this.setAttribute("data","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(e){"selected-rows"===e&&this.syncSelectedRowsFromAttribute(),"sort-column"!==e&&"sort-direction"!==e||this.syncSortFromAttributes(),"page"===e&&(this.internalPage=Number(this.getAttribute("page")||1)),this.render()}syncSelectedRowsFromAttribute(){try{this.internalSelectedRows=JSON.parse(this.getAttribute("selected-rows")||"[]")}catch{this.internalSelectedRows=[]}}syncSortFromAttributes(){const e=this.getAttribute("sort-column"),t=this.getAttribute("sort-direction");this.internalSortColumn=e||void 0,this.internalSortDirection="asc"===t||"desc"===t?t:null}getRowKey(e,t){const s=e[this.getAttribute("row-key")||"id"];return String(null!=s?s:t)}getSortedData(){const e=this.data,t=this.getAttribute("sort-column")||this.internalSortColumn,s=this.getAttribute("sort-direction")||this.internalSortDirection;if(!t||!s)return e;const n=this.columns.find(e=>e.key===t);return n?.sortable?[...e].sort((e,n)=>{const a=e[t],i=n[t];return a===i?0:null==a?1:null==i?-1:a<i?"asc"===s?-1:1:"asc"===s?1:-1}):e}handleSort(e){if(!this.hasAttribute("sortable")||!e.sortable)return;let t="asc";this.internalSortColumn===e.key&&("asc"===this.internalSortDirection?t="desc":"desc"===this.internalSortDirection&&(t=null)),this.internalSortColumn=t?e.key:void 0,this.internalSortDirection=t,this.dispatchEvent(new CustomEvent("db-sort-change",{bubbles:!0,composed:!0,detail:{column:e.key,direction:t}})),this.render()}handleRowSelect(e,t,s){s?.stopPropagation();let n;n=this.hasAttribute("multi-select")?t?[...this.internalSelectedRows,e]:this.internalSelectedRows.filter(t=>t!==e):t?[e]:[],this.internalSelectedRows=n,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:n}})),this.render()}handleSelectAll(e){const t=e?this.data.map((e,t)=>this.getRowKey(e,t)):[];this.internalSelectedRows=t,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:t}})),this.render()}getPaginatedData(){const e=this.getSortedData();if(!this.hasAttribute("pagination"))return e;const t=Number(this.getAttribute("page-size")||10),s=Number(this.getAttribute("total-items")||e.length),n=Math.max(1,Math.ceil(s/t)),a=(Math.min(this.internalPage,n)-1)*t;return e.slice(a,a+t)}createSortIcon(t){const s=document.createElement("span");s.className="designbase-wc-table__sort-icon";if(!(this.internalSortColumn===t.key&&Boolean(this.internalSortDirection))){s.classList.add("designbase-wc-table__sort-icon--idle");const t=document.createElement("span");return t.className="designbase-wc-table__sort-icon-stack",t.append(e("chevron-up",10),e("chevron-down",10)),s.append(t),s}return s.classList.add("asc"===this.internalSortDirection?"designbase-wc-table__sort-icon--asc":"designbase-wc-table__sort-icon--desc"),s.append(e("asc"===this.internalSortDirection?"chevron-up":"chevron-down",14)),s}createCheckbox(e){const t=document.createElement("db-checkbox");return t.setAttribute("size","s"),t.setAttribute("has-label","false"),e.checked&&t.setAttribute("checked",""),e.indeterminate&&t.setAttribute("indeterminate",""),e.stopPropagation&&t.addEventListener("click",e=>e.stopPropagation()),t.addEventListener("db-change",t=>{const s=t.detail;e.onChange?.(s.checked)}),t}render(){const e=this.getAttribute("size")||"m",n=this.getAttribute("variant")||"default",a=t.includes(e)?e:"m",i=s.includes(n)?n:"default",c=this.columns,r=this.getPaginatedData(),l=this.getSortedData(),o=this.hasAttribute("loading"),d=this.hasAttribute("selectable"),b=this.hasAttribute("sortable"),h=this.getAttribute("empty-message")||"데이터가 없습니다.";if(this.className=["designbase-wc-table",`designbase-wc-table--${a}`,`designbase-wc-table--${i}`,d&&"designbase-wc-table--selectable",b&&"designbase-wc-table--sortable",o&&"designbase-wc-table--loading"].filter(Boolean).join(" "),this.replaceChildren(),o){const e=document.createElement("div");e.className="designbase-wc-table__loading";const t=document.createElement("div");t.className="designbase-wc-table__loading-spinner";const s=document.createElement("span");return s.textContent="로딩 중...",e.append(t,s),void this.append(e)}const u=this.getAttribute("title"),m=this.hasAttribute("show-count-badge");if(u||m){const e=document.createElement("div");e.className="designbase-wc-table__header";const t=document.createElement("div");if(t.className="designbase-wc-table__header-left",u){const e=document.createElement("h3");e.className="designbase-wc-table__title",e.textContent=u,t.append(e)}if(m){const e=document.createElement("db-badge");e.setAttribute("count",String(this.data.length)),e.setAttribute("badge-style","number"),e.setAttribute("variant","primary"),e.setAttribute("size","s"),t.append(e)}e.append(t),this.append(e)}const g=document.createElement("div");g.className="designbase-wc-table__container";const p=document.createElement("table");p.className="designbase-wc-table__table";const w=document.createElement("thead");w.className="designbase-wc-table__thead";const _=document.createElement("tr");_.className="designbase-wc-table__tr";const A=r.map((e,t)=>this.getRowKey(e,t)),S=A.filter(e=>this.internalSelectedRows.includes(e)),E=this.hasAttribute("clickable");if(d){const e=document.createElement("th");e.className="designbase-wc-table__th designbase-wc-table__th--checkbox";const t=this.createCheckbox({checked:A.length>0&&S.length===A.length,indeterminate:S.length>0&&S.length<A.length,onChange:e=>this.handleSelectAll(e)});e.append(t),_.append(e)}c.forEach(e=>{const t=document.createElement("th");t.className=["designbase-wc-table__th",`designbase-wc-table__th--${e.align||"left"}`,b&&e.sortable&&"designbase-wc-table__th--sortable",this.internalSortColumn===e.key&&this.internalSortDirection&&"designbase-wc-table__th--sorted"].filter(Boolean).join(" "),e.width&&(t.style.width="number"==typeof e.width?`${e.width}px`:e.width);const s=document.createElement("div");s.className="designbase-wc-table__th-content";const n=document.createElement("span");n.className="designbase-wc-table__th-text",n.textContent=e.header,s.append(n),b&&e.sortable&&s.append(this.createSortIcon(e)),t.append(s),b&&e.sortable&&t.addEventListener("click",()=>this.handleSort(e)),_.append(t)}),w.append(_);const f=document.createElement("tbody");if(f.className="designbase-wc-table__tbody",0===l.length){const e=document.createElement("tr");e.className="designbase-wc-table__tr";const t=document.createElement("td");t.className="designbase-wc-table__td designbase-wc-table__td--empty",t.colSpan=Math.max(c.length+(d?1:0),1);const s=document.createElement("db-empty-state");s.setAttribute("title","데이터가 없습니다"),s.setAttribute("description",h),s.setAttribute("variant","no-data"),s.setAttribute("size","m"),t.append(s),e.append(t),f.append(e)}else r.forEach((e,t)=>{const s=this.getRowKey(e,t),n=this.internalSelectedRows.includes(s),a=document.createElement("tr");if(a.className=["designbase-wc-table__tr",E&&"designbase-wc-table__tr--clickable",n&&"designbase-wc-table__tr--selected"].filter(Boolean).join(" "),E&&a.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-row-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}),d){const e=document.createElement("td");e.className="designbase-wc-table__td designbase-wc-table__td--checkbox";const t=this.createCheckbox({checked:n,stopPropagation:!0,onChange:e=>this.handleRowSelect(s,e)});e.append(t),a.append(e)}c.forEach(t=>{const s=document.createElement("td");s.className=["designbase-wc-table__td",`designbase-wc-table__td--${t.align||"left"}`].join(" "),s.textContent=String(e[t.key]??""),a.append(s)}),f.append(a)});if(p.append(w,f),g.append(p),this.append(g),this.hasAttribute("pagination")){const e=Number(this.getAttribute("page-size")||10),t=Number(this.getAttribute("total-items")||l.length),s=Math.max(1,Math.ceil(t/e)),n=document.createElement("div");n.className="designbase-wc-table__footer";const i=document.createElement("db-pagination");i.setAttribute("current-page",String(this.internalPage)),i.setAttribute("total-pages",String(s)),i.setAttribute("size",a),i.setAttribute("show-first-last",""),i.addEventListener("db-change",e=>{const t=Number(e.detail?.page||1);this.internalPage=t,this.dispatchEvent(new CustomEvent("db-page-change",{bubbles:!0,composed:!0,detail:{page:t}})),this.render()}),n.append(i),this.append(n)}}}customElements.get("db-table")||customElements.define("db-table",DbTable);export{DbTable};

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

@@ -0,0 +1,48 @@
+interface TabItemConfig {
+    id?: string;
+    label: string;
+    disabled?: boolean;
+    icon?: string;
+}
+declare class DbTabs extends HTMLElement {
+    static get observedAttributes(): string[];
+    private list?;
+    private indicator?;
+    private panel?;
+    private tabButtons;
+    private inactivePanels;
+    private isRendering;
+    private childObserver?;
+    get labels(): string[] | string;
+    set labels(value: string[] | string);
+    get tabItems(): TabItemConfig[];
+    get items(): TabItemConfig[];
+    set items(value: TabItemConfig[] | string);
+    set tabItems(value: TabItemConfig[] | string);
+    get activeIndex(): number;
+    set activeIndex(value: number);
+    get orientation(): string;
+    set orientation(value: string);
+    get size(): string;
+    set size(value: string);
+    get variant(): string;
+    set variant(value: string);
+    get fullWidth(): boolean;
+    set fullWidth(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private handleListScroll;
+    private collectPanelContent;
+    private render;
+    private select;
+    private handleKeyDown;
+    private updateIndicator;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-tabs': DbTabs;
+    }
+}
+
+export { DbTabs };