@designbasekorea/ui-wc 0.2.0 → 0.2.2

package/dist/esm/components/db-context-menu.js

@@ -0,0 +1 @@
+class DbContextMenu extends HTMLElement{constructor(){super(...arguments),this.externalTarget=null,this.activeSubMenu=null,this.onExternalContextMenu=null,this.handleDocumentMouseDown=e=>{if(!this.open)return;const t=e.target;this.menuEl?.contains(t)||this.targetWrap?.contains(t)||this.externalTarget?.contains(t)||this.close()},this.handleKeyDown=e=>{this.open&&"Escape"===e.key&&this.close()},this.handleContextMenu=e=>{this.hasAttribute("disabled")||(e.preventDefault(),e.stopPropagation(),this.openAt(e.clientX,e.clientY))}}static get observedAttributes(){return["open","x","y","items","target-id","disabled"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open","true"):this.removeAttribute("open")}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.renderTarget(),this.syncMenu()}),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleKeyDown),this.unbindExternalTarget(),this.menuEl?.remove(),this.menuEl=void 0}attributeChangedCallback(e){if(this.isConnected)return"target-id"===e?(this.unbindExternalTarget(),void this.bindExternalTarget()):void("open"!==e&&"x"!==e&&"y"!==e&&"items"!==e||this.syncMenu())}openAt(e,t){this.setAttribute("x",String(e)),this.setAttribute("y",String(t)),this.setAttribute("open","true"),this.dispatchEvent(new CustomEvent("db-open",{bubbles:!0,composed:!0,detail:{x:e,y:t}})),this.syncMenu()}close(){this.activeSubMenu=null,this.removeAttribute("open"),this.menuEl?.remove(),this.menuEl=void 0,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}collectTargetChildren(){const e=Array.from(this.children).filter(e=>!e.hasAttribute("data-wc-internal")&&e!==this.targetWrap);return e.length>0?e:Array.from(this.targetWrap?.children||[])}bindExternalTarget(){const e=this.getAttribute("target-id");e&&(this.externalTarget=document.getElementById(e),this.externalTarget&&(this.onExternalContextMenu=e=>this.handleContextMenu(e),this.externalTarget.addEventListener("contextmenu",this.onExternalContextMenu)))}unbindExternalTarget(){this.externalTarget&&this.onExternalContextMenu&&this.externalTarget.removeEventListener("contextmenu",this.onExternalContextMenu),this.externalTarget=null,this.onExternalContextMenu=null}renderTarget(){const e=this.collectTargetChildren();this.getAttribute("target-id")?(this.replaceChildren(),this.bindExternalTarget()):(this.targetWrap||(this.targetWrap=document.createElement("div"),this.targetWrap.className="designbase-wc-context-menu__target",this.targetWrap.addEventListener("contextmenu",this.handleContextMenu)),this.replaceChildren(),e.forEach(e=>this.targetWrap.append(e)),e.length>0&&this.append(this.targetWrap))}adjustPosition(){if(!this.menuEl)return;const e=Number(this.getAttribute("x")||0),t=Number(this.getAttribute("y")||0),n=this.menuEl.getBoundingClientRect();let i=e,s=t;e+n.width>window.innerWidth&&(i=e-n.width),t+n.height>window.innerHeight&&(s=t-n.height),this.menuEl.style.left=`${Math.max(0,i)}px`,this.menuEl.style.top=`${Math.max(0,s)}px`}createMenuItem(e){const t=document.createElement("db-menu-item");return t.setAttribute("label",e.label||e.id),t.setAttribute("type","block"),t.setAttribute("menu-style","dropdown"),e.icon&&t.setAttribute("icon",e.icon),e.disabled&&t.setAttribute("disabled",""),e.variant&&t.setAttribute("variant",e.variant),e.subItems?.length&&(t.setAttribute("sub-items",JSON.stringify(e.subItems)),t.setAttribute("expandable","")),t.addEventListener("db-click",()=>{e.disabled||e.subItems?.length||(this.dispatchEvent(new CustomEvent("db-select",{detail:{item:e},bubbles:!0,composed:!0})),this.close())}),t.addEventListener("db-child-click",e=>{const t=e.detail?.child;this.dispatchEvent(new CustomEvent("db-select",{detail:{item:t},bubbles:!0,composed:!0})),this.close()}),t}renderItem(e,t){if(e.divider||e.isDivider){const e=document.createElement("db-divider");return e.className="designbase-wc-divider",e}const n=document.createElement("div");n.className="designbase-wc-context-menu__item-wrapper",n.append(this.createMenuItem(e));if(Boolean(e.subItems?.length)){const t=document.createElement("div");t.className=["designbase-wc-context-menu__submenu",this.activeSubMenu===e.id&&"designbase-wc-context-menu__submenu--open"].filter(Boolean).join(" "),e.subItems?.forEach((e,n)=>{const i=this.renderItem(e,n);i&&t.append(i)}),n.addEventListener("mouseenter",()=>{this.activeSubMenu=e.id,t.classList.add("designbase-wc-context-menu__submenu--open")}),n.addEventListener("mouseleave",()=>{this.activeSubMenu=null,t.classList.remove("designbase-wc-context-menu__submenu--open")}),n.append(t)}return n}syncMenu(){if(this.menuEl?.remove(),this.menuEl=void 0,!this.open)return;const e=Number(this.getAttribute("x")||0),t=Number(this.getAttribute("y")||0),n=this.items,i=document.createElement("div");i.className="designbase-wc-context-menu",i.setAttribute("data-wc-internal",""),i.style.position="fixed",i.style.left=`${e}px`,i.style.top=`${t}px`,i.style.zIndex="1000",i.setAttribute("role","menu"),i.setAttribute("aria-orientation","vertical"),n.forEach((e,t)=>{const n=this.renderItem(e,t);n&&i.append(n)}),document.body.append(i),this.menuEl=i,requestAnimationFrame(()=>this.adjustPosition())}}customElements.get("db-context-menu")||customElements.define("db-context-menu",DbContextMenu);export{DbContextMenu};

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

@@ -0,0 +1,23 @@
+declare class DbCountdown extends HTMLElement {
+    private timer;
+    private targetTime;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private boolAttr;
+    private optionAttr;
+    private setupTargetTime;
+    private getRemaining;
+    private stop;
+    private start;
+    private two;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-countdown': DbCountdown;
+    }
+}
+
+export { DbCountdown };

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

@@ -0,0 +1 @@
+const t=["s","m","l"],e=["default","compact","minimal"];class DbCountdown extends HTMLElement{constructor(){super(...arguments),this.timer=null,this.targetTime=Date.now()}static get observedAttributes(){return["end-date","duration","size","variant","show-days","show-hours","show-minutes","show-seconds","show-labels"]}connectedCallback(){this.setupTargetTime(),this.start()}disconnectedCallback(){this.stop()}attributeChangedCallback(){this.setupTargetTime(),this.render()}boolAttr(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}optionAttr(t,e,s){const n=this.getAttribute(t);return n&&e.includes(n)?n:s}setupTargetTime(){const t=this.getAttribute("end-date"),e=Number(this.getAttribute("duration"));if(t){const e=new Date(t).getTime();return void(this.targetTime=Number.isFinite(e)?e:Date.now())}Number.isFinite(e)&&e>0?this.targetTime=Date.now()+1e3*e:this.targetTime=Date.now()}getRemaining(){const t=this.targetTime-Date.now();return t<=0?{days:0,hours:0,minutes:0,seconds:0,total:0}:{days:Math.floor(t/864e5),hours:Math.floor(t/36e5%24),minutes:Math.floor(t/6e4%60),seconds:Math.floor(t/1e3%60),total:t}}stop(){null!==this.timer&&(window.clearInterval(this.timer),this.timer=null)}start(){this.stop(),this.render(),this.timer=window.setInterval(()=>{const t=this.getRemaining();this.render(),this.dispatchEvent(new CustomEvent("db-tick",{detail:t,bubbles:!0,composed:!0})),t.total<=0&&(this.stop(),this.dispatchEvent(new CustomEvent("db-complete",{bubbles:!0,composed:!0})))},1e3)}two(t){return String(t).padStart(2,"0")}render(){const s=this.optionAttr("size",t,"m"),n=this.optionAttr("variant",e,"default"),o=this.boolAttr("show-labels",!0),i=this.getRemaining();this.className=["designbase-wc-countdown",`designbase-wc-countdown--${s}`,`designbase-wc-countdown--${n}`,o&&"designbase-wc-countdown--with-labels",i.total<=0&&"designbase-wc-countdown--expired"].filter(Boolean).join(" ");const a={days:this.getAttribute("label-days")||"일",hours:this.getAttribute("label-hours")||"시간",minutes:this.getAttribute("label-minutes")||"분",seconds:this.getAttribute("label-seconds")||"초"},r=[{key:"days",value:i.days,show:this.boolAttr("show-days",!0)},{key:"hours",value:i.hours,show:this.boolAttr("show-hours",!0)},{key:"minutes",value:i.minutes,show:this.boolAttr("show-minutes",!0)},{key:"seconds",value:i.seconds,show:this.boolAttr("show-seconds",!0)}].filter(t=>t.show),d=[];for(let t=0;t<r.length;t+=1){const e=r[t],s=document.createElement("div");s.className="designbase-wc-countdown__unit";const i=document.createElement("div");if(i.className="designbase-wc-countdown__value",i.textContent=this.two(e.value),s.append(i),o){const t=document.createElement("div");t.className="designbase-wc-countdown__label",t.textContent=a[e.key],s.append(t)}if(d.push(s),t<r.length-1&&"minimal"!==n){const t=document.createElement("div");t.className="designbase-wc-countdown__separator",t.textContent=":",d.push(t)}}this.replaceChildren(...d)}}customElements.get("db-countdown")||customElements.define("db-countdown",DbCountdown);export{DbCountdown};

package/dist/esm/components/db-cursor-follower.d.ts

@@ -0,0 +1,32 @@
+declare class DbCursorFollower extends HTMLElement {
+    private scopeEl?;
+    private portalRoot?;
+    private pillEl?;
+    private labelEl?;
+    private iconEl?;
+    private target;
+    private current;
+    private raf;
+    private enabled;
+    private desktopMq?;
+    private onDesktopChange?;
+    private onMouseMove?;
+    private isScoped;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private setupDesktopGate;
+    private ensureScope;
+    private isInScope;
+    private mountLayer;
+    private teardownLayer;
+    private teardown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-cursor-follower': DbCursorFollower;
+    }
+}
+
+export { DbCursorFollower };

package/dist/esm/components/db-cursor-follower.js

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-cursor-follower",s="designbase-wc-cursor-follower--hide-native";class DbCursorFollower extends HTMLElement{constructor(){super(...arguments),this.target={x:-9999,y:-9999},this.current={x:-9999,y:-9999},this.raf=0,this.enabled=!1,this.isScoped=!1}static get observedAttributes(){return["default-label","selector","smoothness","offset","hide-native-cursor","show-icon"]}connectedCallback(){this.style.display="contents",this.setupDesktopGate()}disconnectedCallback(){this.teardown()}attributeChangedCallback(){this.isConnected&&this.enabled&&this.mountLayer()}setupDesktopGate(){"undefined"!=typeof window&&(this.desktopMq=window.matchMedia("(pointer: fine) and (hover: hover) and (min-width: 769px)"),this.onDesktopChange=()=>{const t=this.desktopMq?.matches??!1;t!==this.enabled&&(this.enabled=t,t?(this.ensureScope(),this.mountLayer()):this.teardownLayer())},this.onDesktopChange(),this.desktopMq.addEventListener("change",this.onDesktopChange))}ensureScope(){if(this.scopeEl)return;if(this.childElementCount>0||this.textContent?.trim()){this.isScoped=!0,this.scopeEl=document.createElement("div"),this.scopeEl.className="designbase-wc-cursor-follower-scope";const t=document.createElement("slot");this.scopeEl.appendChild(t),this.appendChild(this.scopeEl)}}isInScope(t){return!!t&&(!this.isScoped||!this.scopeEl||this.scopeEl.contains(t))}mountLayer(){this.teardownLayer(),this.ensureScope();const i=this.getAttribute("default-label")||"See the project",o=this.getAttribute("selector")||'a[href], button:not(:disabled), [role="button"]:not([aria-disabled="true"]), [data-cursor], [data-cursor-label], input[type="submit"], input[type="button"]',n=Math.min(1,Math.max(.05,Number(this.getAttribute("smoothness")||.14))),r=function parseOffset(t){if(!t)return{x:18,y:18};try{const e=JSON.parse(t);return{x:Number(e.x??18),y:Number(e.y??18)}}catch{const[e,s]=t.split(",").map(t=>Number(t.trim()));return{x:Number.isFinite(e)?e:18,y:Number.isFinite(s)?s:18}}}(this.getAttribute("offset")),l=this.hasAttribute("hide-native-cursor")&&"false"!==this.getAttribute("hide-native-cursor"),a=!this.hasAttribute("show-icon")||"false"!==this.getAttribute("show-icon");l&&document.documentElement.classList.add(s),this.portalRoot=document.createElement("div"),this.portalRoot.className=e,this.portalRoot.setAttribute("aria-hidden","true"),this.pillEl=document.createElement("div"),this.pillEl.className=`${e}__pill`,this.labelEl=document.createElement("span"),this.labelEl.textContent=i,this.pillEl.appendChild(this.labelEl),a&&(this.iconEl=document.createElement("span"),this.iconEl.className=`${e}__icon`,this.iconEl.appendChild(t("arrow-right",14)),this.pillEl.appendChild(this.iconEl)),this.portalRoot.appendChild(this.pillEl),document.body.appendChild(this.portalRoot),this.onMouseMove=t=>{this.target={x:t.clientX+r.x,y:t.clientY+r.y};const s=document.elementFromPoint(t.clientX,t.clientY),n=s?.closest(o)??null;this.isInScope(n)&&n?(this.labelEl&&(this.labelEl.textContent=function getLabelFromElement(t,e){return t.getAttribute("data-cursor-label")||t.getAttribute("data-cursor")||t.getAttribute("aria-label")||e}(n,i)),this.pillEl?.classList.add(`${e}__pill--visible`)):this.pillEl?.classList.remove(`${e}__pill--visible`)},window.addEventListener("mousemove",this.onMouseMove,{passive:!0});const tick=()=>{this.current.x+=(this.target.x-this.current.x)*n,this.current.y+=(this.target.y-this.current.y)*n,this.portalRoot&&(this.portalRoot.style.transform=`translate3d(${this.current.x}px, ${this.current.y}px, 0)`),this.raf=requestAnimationFrame(tick)};this.raf=requestAnimationFrame(tick)}teardownLayer(){cancelAnimationFrame(this.raf),this.onMouseMove&&(window.removeEventListener("mousemove",this.onMouseMove),this.onMouseMove=void 0),document.documentElement.classList.remove(s),this.portalRoot?.remove(),this.portalRoot=void 0,this.pillEl=void 0,this.labelEl=void 0,this.iconEl=void 0}teardown(){this.teardownLayer(),this.desktopMq&&this.onDesktopChange&&this.desktopMq.removeEventListener("change",this.onDesktopChange),this.scopeEl?.remove(),this.scopeEl=void 0,this.isScoped=!1,this.enabled=!1}}customElements.get("db-cursor-follower")||customElements.define("db-cursor-follower",DbCursorFollower);export{DbCursorFollower};

package/dist/esm/components/db-date-picker.d.ts

@@ -0,0 +1,84 @@
+import './db-button.js';
+import './db-modal.js';
+
+type DatePickerMode = 'single' | 'range' | 'multiple';
+declare class DbDatePicker extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private labelEl?;
+    private triggerEl?;
+    private inputEl?;
+    private dropdownEl?;
+    private calendarHost?;
+    private isOpen;
+    private currentMonth;
+    private viewStartMonth;
+    private rangeStart;
+    private hoveredDate;
+    private selectedValue?;
+    private tempValue?;
+    private activePresetId;
+    private inputText;
+    private boundDocumentMouseDown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get value(): string;
+    set value(value: string);
+    get mode(): DatePickerMode;
+    set mode(value: DatePickerMode | string);
+    private get isPanelLayout();
+    private get effectiveMode();
+    get inline(): boolean;
+    set inline(value: boolean);
+    private get type();
+    private get locale();
+    private get startOfWeek();
+    private get showOutsideDays();
+    private get usesPendingValue();
+    private get today();
+    private get minDate();
+    private get maxDate();
+    private get presets();
+    private get events();
+    private build;
+    private readInitialValue;
+    private readAttributeValue;
+    private parseValue;
+    private serializeValue;
+    private formatDisplay;
+    private syncInputText;
+    private getWorkingValue;
+    private presetContext;
+    private isDateValid;
+    private emitChange;
+    private applyValue;
+    private handleDateClick;
+    private handlePresetSelect;
+    private handlePendingApply;
+    private handlePendingCancel;
+    private handleInputBlur;
+    private get disabled();
+    set disabled(value: boolean);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    private openPicker;
+    private closePicker;
+    private toggleOpen;
+    private handleDocumentMouseDown;
+    private isDateSelected;
+    private isInRange;
+    private renderDateCell;
+    private renderSingleMonth;
+    private renderDefaultCalendar;
+    private renderPanelCalendar;
+    private renderCalendar;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-date-picker': DbDatePicker;
+    }
+}
+
+export { DbDatePicker };

package/dist/esm/components/db-date-picker.js

@@ -0,0 +1 @@
+import{createDbIcon as t,getDbComponentIconSize as e}from"./db-icons.js";import"./db-button.js";import"./db-modal.js";import{startOfDay as i,parseISODate as s,DEFAULT_DATE_PICKER_PRESETS as n,formatDisplayDate as a,toISODate as r,detectActivePresetId as l,addMonths as d,generateWeekdays as o,generateCalendarGrid as h,formatPanelInputDate as u}from"./date-picker-utils.js";const c="designbase-wc-date-picker",p=["s","m","l"],m=["default","outlined","filled"],isRangeValue=t=>Boolean(t)&&"object"==typeof t&&!Array.isArray(t)&&"start"in t&&"end"in t;class DbDatePicker extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.isOpen=!1,this.currentMonth=new Date,this.viewStartMonth=new Date,this.rangeStart=null,this.hoveredDate=null,this.activePresetId="custom",this.inputText="",this.boundDocumentMouseDown=t=>this.handleDocumentMouseDown(t)}static get observedAttributes(){return["mode","layout","type","inline","value","default-value","min-date","max-date","size","variant","disabled","readonly","label","full-width","error","locale","start-of-week","show-outside-days","dropdown-position","open","events"]}connectedCallback(){this.built||this.build(),this.readInitialValue(),this.render(),document.addEventListener("mousedown",this.boundDocumentMouseDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.boundDocumentMouseDown)}attributeChangedCallback(t){if(this.built){if("value"===t&&(this.readAttributeValue(),this.syncInputText()),"open"===t)return this.isOpen=this.hasAttribute("open"),void this.render();this.render()}}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}get mode(){const t=this.getAttribute("mode")||"single";return"range"===t?"range":"multiple"===t?"multiple":"single"}set mode(t){this.setAttribute("mode",t)}get isPanelLayout(){return"panel"===this.getAttribute("layout")}get effectiveMode(){return this.isPanelLayout?"range":this.mode}get inline(){return this.hasAttribute("inline")}set inline(t){this.toggleAttribute("inline",Boolean(t))}get type(){return"modal"===this.getAttribute("type")?"modal":"dropdown"}get locale(){return this.getAttribute("locale")||"ko-KR"}get startOfWeek(){return"monday"===this.getAttribute("start-of-week")?"monday":"sunday"}get showOutsideDays(){return"false"!==this.getAttribute("show-outside-days")}get usesPendingValue(){return this.isPanelLayout||"modal"===this.type}get today(){return i(new Date)}get minDate(){return s(this.getAttribute("min-date"))}get maxDate(){return s(this.getAttribute("max-date"))}get presets(){return this.isPanelLayout?n:[]}get events(){const t=this.getAttribute("events");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}build(){this.built=!0,this.labelEl=document.createElement("label"),this.labelEl.className=`${c}__label`,this.triggerEl=document.createElement("div"),this.triggerEl.className=`${c}__trigger`;const t=document.createElement("button");t.type="button",t.className=`${c}__icon-display`,t.setAttribute("aria-label","날짜 선택 열기"),t.addEventListener("click",()=>this.toggleOpen()),this.inputEl=document.createElement("input"),this.inputEl.type="text",this.inputEl.className=`${c}__input`,this.inputEl.setAttribute("aria-label","날짜 입력"),this.inputEl.addEventListener("click",()=>this.openPicker()),this.inputEl.addEventListener("blur",()=>this.handleInputBlur()),this.inputEl.addEventListener("input",()=>{this.inputText=this.inputEl?.value||""});const e=document.createElement("button");e.type="button",e.className=`${c}__toggle`,e.setAttribute("aria-label","날짜 선택 열기"),e.addEventListener("click",()=>this.toggleOpen()),this.triggerEl.append(t,this.inputEl,e),this.dropdownEl=document.createElement("div"),this.dropdownEl.className=`${c}__dropdown`,this.dropdownEl.setAttribute("role","dialog"),this.dropdownEl.setAttribute("aria-modal","false"),this.calendarHost=document.createElement("div"),this.dropdownEl.appendChild(this.calendarHost)}readInitialValue(){const t=this.getAttribute("value")??this.getAttribute("default-value");if(t&&(this.selectedValue=this.parseValue(t)),this.tempValue=this.selectedValue,this.syncInputText(),isRangeValue(this.selectedValue)){const t=s(this.selectedValue.start);t&&(this.viewStartMonth=new Date(t))}else if("string"==typeof this.selectedValue){const t=s(this.selectedValue);t&&(this.currentMonth=new Date(t))}}readAttributeValue(){const t=this.getAttribute("value");if(!t)return this.selectedValue=void 0,void(this.tempValue=void 0);this.selectedValue=this.parseValue(t),this.isOpen&&this.usesPendingValue||(this.tempValue=this.selectedValue)}parseValue(t){if(t){if("multiple"===this.effectiveMode||t.trim().startsWith("["))try{const e=JSON.parse(t);if(Array.isArray(e))return e.filter(t=>Boolean(s(t)))}catch{return}if("range"===this.effectiveMode||t.trim().startsWith("{"))try{const e=JSON.parse(t);if(e?.start&&e?.end)return{start:e.start,end:e.end}}catch{return}return s(t)?t:void 0}}serializeValue(t){return t?"string"==typeof t?t:JSON.stringify(t):""}formatDisplay(t){if(!t)return"";if("string"==typeof t){const e=s(t);return e?a(e,this.locale):""}if(Array.isArray(t))return t.map(t=>s(t)).filter(Boolean).map(t=>a(t,this.locale)).join(", ");const e=s(t.start),i=s(t.end);return e&&i?t.start===t.end?a(e,this.locale):`${a(e,this.locale)} ~ ${a(i,this.locale)}`:""}syncInputText(){this.inputText=this.formatDisplay(this.selectedValue),this.inputEl&&(this.inputEl.value=this.inputText)}getWorkingValue(){return"range"===this.effectiveMode&&this.rangeStart?this.tempValue??this.selectedValue:this.usesPendingValue&&(this.isOpen||this.inline)?this.tempValue:this.selectedValue}presetContext(){return{today:this.today,startOfWeek:this.startOfWeek,minDate:this.minDate??void 0,maxDate:this.maxDate??void 0}}isDateValid(t){return!(this.minDate&&t<this.minDate)&&!(this.maxDate&&t>this.maxDate)}emitChange(t){const e=this.serializeValue(t);e?this.setAttribute("value",e):this.removeAttribute("value"),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:t??null},bubbles:!0,composed:!0}))}applyValue(t,e=!this.usesPendingValue){if(e)return this.selectedValue=t,this.tempValue=t,this.syncInputText(),void this.emitChange(t);this.tempValue=t,this.renderCalendar()}handleDateClick(t){if(this.disabled||this.readonly||!this.isDateValid(t))return;this.isPanelLayout&&(this.activePresetId="custom");const e=this.getWorkingValue();if("single"===this.effectiveMode){const e=r(t);return this.applyValue(e,!this.usesPendingValue),this.inline||this.isPanelLayout||this.closePicker(),void this.render()}if("multiple"===this.effectiveMode){const i=r(t),s=Array.isArray(e)?e:[],n=s.includes(i)?s.filter(t=>t!==i):[...s,i];return this.applyValue(n,!this.usesPendingValue),void this.render()}if(!this.rangeStart)return this.rangeStart=t,this.applyValue({start:r(t),end:r(t)},!1),void this.renderCalendar();const i=this.rangeStart,s=t,n=i>s?{start:r(s),end:r(i)}:{start:r(i),end:r(s)};this.rangeStart=null,this.applyValue(n,!0),this.inline||this.isPanelLayout||this.closePicker(),this.render()}handlePresetSelect(t){if(this.activePresetId=t.id,this.rangeStart=null,"custom"===t.id)return void this.renderCalendar();const e=t.getRange(this.presetContext());if(!e)return;const i={start:r(e.start),end:r(e.end)};this.viewStartMonth=new Date(e.start),this.applyValue(i,!this.usesPendingValue),this.render()}handlePendingApply(){this.selectedValue=this.tempValue,this.syncInputText(),this.emitChange(this.tempValue),this.rangeStart=null,this.closePicker(),this.render()}handlePendingCancel(){this.tempValue=this.selectedValue,this.rangeStart=null,this.activePresetId=l(isRangeValue(this.selectedValue)?{start:s(this.selectedValue.start),end:s(this.selectedValue.end)}:void 0,this.presets,this.presetContext()),this.closePicker(),this.render()}handleInputBlur(){if(!this.inputEl)return;const t=this.inputEl.value.trim();if(t.match(/^(\d{4})-(\d{2})-(\d{2})$/)){const e=s(t);if(e&&this.isDateValid(e)){const t=r(e);return this.applyValue(t,!0),void this.render()}}this.syncInputText()}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",Boolean(t))}get readonly(){return this.hasAttribute("readonly")}set readonly(t){this.toggleAttribute("readonly",Boolean(t))}openPicker(){this.disabled||this.readonly||(this.isOpen=!0,this.usesPendingValue&&(this.tempValue=this.selectedValue,this.activePresetId=l(isRangeValue(this.selectedValue)?{start:s(this.selectedValue.start),end:s(this.selectedValue.end)}:void 0,this.presets,this.presetContext())),this.render())}closePicker(){this.isOpen=!1,this.rangeStart=null,this.hoveredDate=null,this.render()}toggleOpen(){this.isOpen?this.closePicker():this.openPicker()}handleDocumentMouseDown(t){this.isOpen&&!this.inline&&(this.contains(t.target)||(this.usesPendingValue&&(this.tempValue=this.selectedValue),this.closePicker()))}isDateSelected(t){const e=r(t),i=this.getWorkingValue();return"single"===this.effectiveMode?"string"==typeof i&&i===e:"multiple"===this.effectiveMode?Array.isArray(i)&&i.includes(e):!(!this.rangeStart||r(this.rangeStart)!==e)||!!isRangeValue(i)&&(i.start===e||i.end===e)}isInRange(t){if("range"!==this.effectiveMode)return!1;let e=null,i=null;if(this.rangeStart)e=this.rangeStart,i=this.hoveredDate;else{const t=this.getWorkingValue();isRangeValue(t)&&(e=s(t.start),i=s(t.end))}if(!e)return!1;const n=r(t),a=r(e),l=i?r(i):a;return n>=a&&n<=l}renderDateCell(t,e){const i=t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear(),n=t.toDateString()===this.today.toDateString(),a=this.isDateSelected(t),r=this.isInRange(t),l=0===t.getDay()||6===t.getDay(),d=this.events.filter(e=>{const i=s(e.date);return!!i&&i.toDateString()===t.toDateString()}),o=this.getWorkingValue(),h=isRangeValue(o)?s(o.end)?.toDateString():void 0,u=isRangeValue(o)?s(o.start)?.toDateString():void 0,p=document.createElement("button");p.type="button",p.className=[`${c}__date`,!i&&this.showOutsideDays&&`${c}__date--outside`,n&&`${c}__date--today`,a&&`${c}__date--selected`,r&&!a&&`${c}__date--in-range`,"range"===this.effectiveMode&&(this.rangeStart?.toDateString()===t.toDateString()||u===t.toDateString())&&`${c}__date--range-start`,"range"===this.effectiveMode&&h===t.toDateString()&&`${c}__date--range-end`,l&&`${c}__date--weekend`,!this.isDateValid(t)&&`${c}__date--disabled`,d.length>0&&`${c}__date--has-events`].filter(Boolean).join(" "),p.disabled=!this.isDateValid(t)||this.disabled||this.readonly,p.addEventListener("click",()=>this.handleDateClick(t));const m=document.createElement("span");if(m.className=`${c}__date-number`,m.textContent=String(t.getDate()),p.appendChild(m),d.length>0){const t=document.createElement("div");t.className=`${c}__events`,d.slice(0,3).forEach(e=>{const i=document.createElement("div");i.className=`${c}__event ${c}__event--${e.type||"dot"}`,e.color&&(i.style.backgroundColor=e.color),e.label&&(i.title=e.label),t.appendChild(i)}),p.appendChild(t)}return p}renderSingleMonth(i,s={}){const{showPrev:n=!1,showNext:a=!1}=s,r=this.getAttribute("size")||"m",l=e(r),u=document.createElement("div");u.className=`${c}__month`;const p=document.createElement("div");if(p.className=`${c}__header`,n){const e=document.createElement("button");e.type="button",e.className=`${c}__nav-button`,e.setAttribute("aria-label","이전 달"),e.disabled=this.disabled||this.readonly,e.appendChild(t("chevron-left",l)),e.addEventListener("click",()=>{this.isPanelLayout?this.viewStartMonth=d(this.viewStartMonth,-1):this.currentMonth=d(this.currentMonth,-1),this.renderCalendar()}),p.appendChild(e)}else{const t=document.createElement("span");t.className=`${c}__nav-spacer`,t.setAttribute("aria-hidden","true"),p.appendChild(t)}const m=document.createElement("div");if(m.className=`${c}__current-month`,m.textContent=i.toLocaleDateString(this.locale,{year:"numeric",month:"long"}),p.appendChild(m),a){const e=document.createElement("button");e.type="button",e.className=`${c}__nav-button`,e.setAttribute("aria-label","다음 달"),e.disabled=this.disabled||this.readonly,e.appendChild(t("chevron-right",l)),e.addEventListener("click",()=>{this.isPanelLayout?this.viewStartMonth=d(this.viewStartMonth,1):this.currentMonth=d(this.currentMonth,1),this.renderCalendar()}),p.appendChild(e)}else{const t=document.createElement("span");t.className=`${c}__nav-spacer`,t.setAttribute("aria-hidden","true"),p.appendChild(t)}u.appendChild(p);const g=document.createElement("div");g.className=`${c}__weekdays`,o(this.startOfWeek).forEach(t=>{const e=document.createElement("div");e.className=`${c}__weekday`,e.textContent=t,g.appendChild(e)}),u.appendChild(g);const b=document.createElement("div");b.className=`${c}__grid`;const v=this.isPanelLayout;return h(i,this.startOfWeek,v).forEach((t,e)=>{if(!t){const t=document.createElement("span");return t.className=`${c}__date ${c}__date--empty`,t.setAttribute("aria-hidden","true"),t.dataset.index=String(e),void b.appendChild(t)}const s=t.getMonth()===i.getMonth()&&t.getFullYear()===i.getFullYear();if(!this.showOutsideDays&&!s){const t=document.createElement("span");return t.className=`${c}__date ${c}__date--empty`,t.setAttribute("aria-hidden","true"),t.dataset.index=String(e),void b.appendChild(t)}b.appendChild(this.renderDateCell(t,i))}),u.appendChild(b),u}renderDefaultCalendar(){const t=document.createElement("div");t.className=`${c}__selector`;const e=this.isPanelLayout?this.viewStartMonth:this.currentMonth;if(t.appendChild(this.renderSingleMonth(e,{showPrev:!0,showNext:!0})),!this.isPanelLayout){const e=document.createElement("div");e.className=`${c}__footer`;const i=document.createElement("button");i.type="button",i.className=`${c}__today-button`,i.textContent="오늘",i.disabled=this.disabled||this.readonly,i.addEventListener("click",()=>{const t=new Date;this.isPanelLayout?this.viewStartMonth=t:this.currentMonth=t,this.renderCalendar()}),e.appendChild(i),t.appendChild(e)}return t}renderPanelCalendar(){const t=document.createElement("div");t.className=`${c}__panel`;const e=document.createElement("div");e.className=`${c}__presets`,e.setAttribute("role","listbox"),e.setAttribute("aria-label","기간 프리셋"),this.presets.forEach(t=>{const i=document.createElement("button");i.type="button",i.className=[`${c}__preset`,this.activePresetId===t.id&&`${c}__preset--active`].filter(Boolean).join(" "),i.setAttribute("role","option"),i.setAttribute("aria-selected",String(this.activePresetId===t.id)),i.textContent=t.label,i.addEventListener("click",()=>this.handlePresetSelect(t)),e.appendChild(i)}),t.appendChild(e);const i=document.createElement("div");i.className=`${c}__panel-main`;const n=document.createElement("div");n.className=`${c}__months ${c}__months--count-2`,[0,1].forEach(t=>{const e=d(this.viewStartMonth,t);n.appendChild(this.renderSingleMonth(e,{showPrev:0===t,showNext:1===t}))}),i.appendChild(n);const a=document.createElement("div");a.className=`${c}__panel-footer`;const r=isRangeValue(this.tempValue)?this.tempValue:void 0,l=document.createElement("div");l.className=`${c}__range-display`;const o=document.createElement("span");o.className=`${c}__range-text`,o.textContent=r?.start&&s(r.start)?u(s(r.start),this.locale):"시작일";const h=document.createElement("span");h.className=`${c}__range-separator`,h.textContent="–";const p=document.createElement("span");p.className=`${c}__range-text`,p.textContent=r?.end&&s(r.end)?u(s(r.end),this.locale):"종료일",l.append(o,h,p),a.appendChild(l);const m=document.createElement("div");m.className=`${c}__panel-actions`;const g=document.createElement("db-button");g.setAttribute("variant","secondary"),g.setAttribute("size","m"),g.textContent="취소",g.addEventListener("click",()=>this.handlePendingCancel());const b=document.createElement("db-button");return b.setAttribute("variant","primary"),b.setAttribute("size","m"),b.textContent="적용",b.addEventListener("click",()=>this.handlePendingApply()),m.append(g,b),a.appendChild(m),i.appendChild(a),t.appendChild(i),t}renderCalendar(){this.calendarHost&&(this.calendarHost.replaceChildren(),this.calendarHost.appendChild(this.isPanelLayout?this.renderPanelCalendar():this.renderDefaultCalendar()))}render(){const i=p.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",s=m.includes(this.getAttribute("variant")||"default")&&this.getAttribute("variant")||"default",n=this.getAttribute("dropdown-position")||"bottom-start",a=e(i);if(this.className=[c,this.inline?`${c}--size-${i}`:`${c}--${i}`,`${c}--variant-${s}`,this.hasAttribute("full-width")&&`${c}--full-width`,this.disabled&&`${c}--disabled`,this.readonly&&`${c}--readonly`,this.isOpen&&`${c}--open`,this.hasAttribute("error")&&`${c}--error`,this.isPanelLayout&&`${c}--panel`].filter(Boolean).join(" "),this.replaceChildren(),this.inline)return this.calendarHost=document.createElement("div"),this.appendChild(this.calendarHost),void this.renderCalendar();if(!(this.labelEl&&this.triggerEl&&this.inputEl&&this.dropdownEl))return;const r=this.getAttribute("label")||"";this.labelEl.textContent=r,this.labelEl.hidden=!r,this.inputEl.value=this.inputText,this.inputEl.placeholder=this.isPanelLayout?"기간을 선택하세요":"날짜를 선택하세요",this.inputEl.disabled=this.disabled,this.inputEl.readOnly=this.readonly;const l=this.triggerEl.querySelector(`.${c}__icon-display`);l&&(l.innerHTML="",l.appendChild(t("calendar",a)),l.disabled=this.disabled);const d=this.triggerEl.querySelector(`.${c}__toggle`);if(d&&(d.innerHTML="",d.appendChild(t("chevron-down",a)),d.disabled=this.disabled),this.dropdownEl.className=[`${c}__dropdown`,`${c}__dropdown--${n}`,this.isPanelLayout&&`${c}__dropdown--panel`].filter(Boolean).join(" "),this.dropdownEl.hidden=!this.isOpen||"modal"===this.type,this.calendarHost=document.createElement("div"),this.dropdownEl.replaceChildren(this.calendarHost),this.renderCalendar(),this.append(this.labelEl,this.triggerEl),this.isOpen&&"dropdown"===this.type&&this.appendChild(this.dropdownEl),this.isOpen&&"modal"===this.type){const t=document.createElement("db-modal");t.setAttribute("open","true"),t.setAttribute("title",this.isPanelLayout?"기간 선택":"날짜 선택"),t.setAttribute("size",this.isPanelLayout?"l":"s"),t.addEventListener("db-close",()=>this.handlePendingCancel());const e=document.createElement("div");if(this.calendarHost=e,this.renderCalendar(),t.append(e),this.usesPendingValue){const e=document.createElement("div");e.className=`${c}__modal-footer`;const i=document.createElement("db-button");i.setAttribute("variant","secondary"),i.setAttribute("size","m"),i.textContent="취소",i.addEventListener("click",()=>this.handlePendingCancel());const s=document.createElement("db-button");s.setAttribute("variant","primary"),s.setAttribute("size","m"),s.textContent="적용",s.addEventListener("click",()=>this.handlePendingApply()),e.append(i,s),t.append(e)}this.appendChild(t)}}}customElements.get("db-date-picker")||customElements.define("db-date-picker",DbDatePicker);export{DbDatePicker};

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

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

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

@@ -0,0 +1 @@
+const t=["primary","secondary","success","warning","danger","muted"];class DbDivider extends HTMLElement{static get observedAttributes(){return["orientation","thickness","color","length","variant","margin"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("orientation")||"horizontal",i=this.getAttribute("variant")||"solid",s=Number(this.getAttribute("thickness")||1),r=this.getAttribute("color"),d=this.getAttribute("length"),n=this.getAttribute("margin");this.className=["designbase-wc-divider",`designbase-wc-divider--${e}`,`designbase-wc-divider--${i}`,r&&t.includes(r)?`designbase-wc-divider--${r}`:""].filter(Boolean).join(" "),this.setAttribute("role","separator"),this.setAttribute("aria-orientation",e),this.style.border="none",this.style.background="none",this.style.margin="",this.style.width="",this.style.height="","vertical"===e?(this.style.display="inline-block",this.style.borderLeft=`${s}px ${i} var(--db-border-base)`,this.style.verticalAlign="middle",d&&(this.style.height=d.endsWith("px")||d.endsWith("%")?d:`${d}px`)):(this.style.display="block",this.style.width="100%",this.style.borderTop=`${s}px ${i} var(--db-border-base)`),r&&!t.includes(r)&&("vertical"===e?this.style.borderLeftColor=r:this.style.borderTopColor=r),n&&(this.style.margin=/^\d+$/.test(n)?`${n}px`:n)}}customElements.get("db-divider")||customElements.define("db-divider",DbDivider);export{DbDivider};

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

@@ -0,0 +1,32 @@
+declare class DbDrawer extends HTMLElement {
+    static get observedAttributes(): string[];
+    private root?;
+    private overlay?;
+    private container?;
+    private contentEl?;
+    private isMounted;
+    private isActive;
+    private enterFrame?;
+    private exitTimer?;
+    private previousActiveElement;
+    private keyHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private isOpenRequested;
+    private clearTimers;
+    private attachEscape;
+    private detachEscape;
+    private close;
+    private collectChildren;
+    private syncOpenState;
+    private syncActiveClasses;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-drawer': DbDrawer;
+    }
+}
+
+export { DbDrawer };

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

@@ -0,0 +1 @@
+const t=["left","right","top","bottom"],e=["s","m","l","xl","full"];class DbDrawer extends HTMLElement{constructor(){super(...arguments),this.isMounted=!1,this.isActive=!1,this.previousActiveElement=null,this.keyHandler=null}static get observedAttributes(){return["open","title","position","size","show-close-button","close-on-backdrop-click","close-on-escape","animation-duration","show-overlay","overlay-closable","z-index","trap-focus","drawer-id"]}connectedCallback(){this.style.display="contents",this.render(),this.syncOpenState()}disconnectedCallback(){this.clearTimers(),this.detachEscape(),this.root?.remove(),this.root=void 0,document.body.style.overflow="",this.previousActiveElement&&this.previousActiveElement.focus()}attributeChangedCallback(t){this.isConnected&&("open"!==t?(this.render(),this.isMounted&&this.syncActiveClasses()):this.syncOpenState())}isOpenRequested(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}clearTimers(){null!=this.enterFrame&&(cancelAnimationFrame(this.enterFrame),this.enterFrame=void 0),this.exitTimer&&(clearTimeout(this.exitTimer),this.exitTimer=void 0)}attachEscape(){this.keyHandler||(this.keyHandler=t=>{"Escape"===t.key&&"false"!==this.getAttribute("close-on-escape")&&this.close()},document.addEventListener("keydown",this.keyHandler))}detachEscape(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}close(){this.setAttribute("open","false"),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}collectChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"))}syncOpenState(){const t=this.isOpenRequested(),e=Number(this.getAttribute("animation-duration")||300);if(this.clearTimers(),t)return this.render(),this.isMounted=!0,this.isActive=!1,this.syncActiveClasses(),this.root&&!this.root.isConnected&&document.body.append(this.root),"false"!==this.getAttribute("trap-focus")&&(this.previousActiveElement=document.activeElement),this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=void 0,this.isActive=!0,this.syncActiveClasses(),"false"!==this.getAttribute("trap-focus")&&this.container?.focus()})}),document.body.style.overflow="hidden",void this.attachEscape();this.isActive=!1,this.syncActiveClasses(),this.exitTimer=setTimeout(()=>{this.exitTimer=void 0,this.isMounted=!1,this.syncActiveClasses(),this.root?.remove(),document.body.style.overflow="",this.detachEscape(),"false"!==this.getAttribute("trap-focus")&&this.previousActiveElement&&(this.previousActiveElement.focus(),this.previousActiveElement=null)},e),this.detachEscape()}syncActiveClasses(){this.root&&(this.root.classList.toggle("designbase-wc-drawer--open",this.isActive),this.root.classList.toggle("designbase-wc-drawer--closing",this.isMounted&&!this.isActive),this.overlay?.classList.toggle("designbase-wc-drawer__overlay--open",this.isActive),this.container?.classList.toggle("designbase-wc-drawer__container--open",this.isActive))}render(){const i=t.includes(this.getAttribute("position")||"right")&&this.getAttribute("position")||"right",s=e.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",r=this.getAttribute("title"),n="false"!==this.getAttribute("show-close-button"),o="false"!==this.getAttribute("show-overlay"),a=this.getAttribute("animation-duration")||"300",c=this.getAttribute("z-index")||"1000",l=this.getAttribute("drawer-id")||"drawer",h=this.collectChildren();this.root||(this.root=document.createElement("div"),this.root.setAttribute("data-wc-internal",""),this.overlay=document.createElement("div"),this.overlay.className="designbase-wc-drawer__overlay",this.overlay.setAttribute("aria-hidden","true"),this.overlay.addEventListener("click",t=>{if(t.target!==this.overlay)return;const e="false"!==this.getAttribute("overlay-closable"),i="false"!==this.getAttribute("close-on-backdrop-click");e&&i&&this.close()}),this.container=document.createElement("div"),this.container.className=`designbase-wc-drawer__container designbase-wc-drawer__container--${i}`,this.container.setAttribute("role","dialog"),this.container.setAttribute("aria-modal","true"),this.container.tabIndex=-1,this.container.addEventListener("click",t=>t.stopPropagation()),this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-drawer__content",this.container.append(this.contentEl)),this.root.className=["designbase-wc-drawer",`designbase-wc-drawer--${i}`,`designbase-wc-drawer--${s}`].join(" "),this.root.style.setProperty("--drawer-animation-duration",`${a}ms`),this.root.style.setProperty("--drawer-z-index",c),this.container.className=`designbase-wc-drawer__container designbase-wc-drawer__container--${i}`,this.container.id=l,r?this.container.setAttribute("aria-labelledby",`${l}-title`):this.container.removeAttribute("aria-labelledby"),this.contentEl.id=`${l}-content`,this.root.replaceChildren(),o&&this.overlay&&this.root.append(this.overlay);if(Boolean(r)||n){const t=document.createElement("div");if(t.className="designbase-wc-drawer__header",r){const e=document.createElement("h2");e.className="designbase-wc-drawer__title",e.id=`${l}-title`,e.textContent=r,t.append(e)}if(n){const e=document.createElement("db-button");e.className="designbase-wc-drawer__close-button",e.setAttribute("variant","ghost"),e.setAttribute("size","s"),e.setAttribute("icon-only",""),e.setAttribute("start-icon","close"),e.setAttribute("aria-label","닫기"),e.addEventListener("db-click",t=>{t.stopPropagation(),this.close()}),t.append(e)}this.container.replaceChildren(t,this.contentEl)}else this.container.replaceChildren(this.contentEl);this.contentEl.replaceChildren(...h),this.root.append(this.container),this.isMounted&&!this.root.isConnected&&document.body.append(this.root)}}customElements.get("db-drawer")||customElements.define("db-drawer",DbDrawer);export{DbDrawer};

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

@@ -0,0 +1,70 @@
+interface DbDropdownItem {
+    id: string;
+    label?: string;
+    icon?: string;
+    disabled?: boolean;
+    divider?: boolean;
+}
+declare class DbDropdown extends HTMLElement {
+    static get observedAttributes(): string[];
+    private triggerWrap?;
+    private defaultTrigger?;
+    private menu?;
+    private focusedIndex;
+    private onTriggerActivate;
+    private lastTriggerSignature;
+    get parsedItems(): DbDropdownItem[];
+    get options(): string[] | string;
+    set options(value: string[] | string);
+    get items(): DbDropdownItem[] | string;
+    set items(value: DbDropdownItem[] | string);
+    get value(): string;
+    set value(value: string);
+    get open(): boolean;
+    set open(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get size(): string;
+    set size(value: string);
+    get placement(): string;
+    set placement(value: string);
+    get placeholder(): string;
+    set placeholder(value: string);
+    get label(): string;
+    set label(value: string);
+    get fullWidth(): boolean;
+    set fullWidth(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private resolvedSize;
+    private resolvedPlacement;
+    private menuItemIconSize;
+    private triggerLabel;
+    private enabledItems;
+    private collectTriggerChildren;
+    private hasCustomTrigger;
+    private bindTrigger;
+    private unbindTrigger;
+    private toggleOpen;
+    private triggerSignature;
+    private renderDefaultTrigger;
+    private syncDefaultTriggerState;
+    private ensureStructure;
+    private renderTrigger;
+    private renderMenu;
+    private render;
+    private selectItem;
+    private focusItem;
+    private handleTriggerKeyDown;
+    private handleDocumentKeyDown;
+    private handleDocumentMouseDown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-dropdown': DbDropdown;
+    }
+}
+
+export { DbDropdown };
+export type { DbDropdownItem };

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

@@ -0,0 +1 @@
+import{isDbIconName as e,createDbIcon as t}from"./db-icons.js";const i=["s","m","l"],r=["bottom-left","bottom-right","top-left","top-right"],s=["primary","secondary","tertiary","danger","ghost"];class DbDropdown extends HTMLElement{constructor(){super(...arguments),this.focusedIndex=-1,this.onTriggerActivate=null,this.lastTriggerSignature="",this.handleTriggerKeyDown=e=>{if(("Enter"===e.key||" "===e.key||"ArrowDown"===e.key)&&!this.open)return e.preventDefault(),this.open=!0,requestAnimationFrame(()=>this.focusItem(0)),void this.render();"Escape"===e.key&&this.open&&(e.preventDefault(),this.open=!1,this.render())},this.handleDocumentKeyDown=e=>{if(!this.open)return;if("Escape"===e.key)return e.preventDefault(),this.open=!1,this.render(),void this.triggerWrap?.querySelector("[aria-haspopup]")?.focus();const t=this.enabledItems();if(!t.length)return;const i=t.findIndex(e=>this.parsedItems.indexOf(e)===this.focusedIndex);switch(e.key){case"ArrowDown":e.preventDefault(),this.focusItem(i<0?0:this.parsedItems.indexOf(t[(i+1)%t.length]));break;case"ArrowUp":e.preventDefault(),this.focusItem(i<0?0:this.parsedItems.indexOf(t[(i-1+t.length)%t.length]));break;case"Home":e.preventDefault(),this.focusItem(this.parsedItems.indexOf(t[0]));break;case"End":e.preventDefault(),this.focusItem(this.parsedItems.indexOf(t[t.length-1]));break;case"Enter":case" ":{e.preventDefault();const t=this.parsedItems[this.focusedIndex];!t||t.divider||t.disabled||this.selectItem(t);break}}},this.handleDocumentMouseDown=e=>{this.open&&(this.contains(e.target)||(this.open=!1,this.render()))}}static get observedAttributes(){return["options","items","placeholder","label","value","size","placement","full-width","disabled","open","trigger-variant","trigger-icon","icon-only"]}get parsedItems(){const e=this.getAttribute("items");if(e)try{const t=JSON.parse(e);if(Array.isArray(t))return t}catch{}return(this.getAttribute("options")||"").split(",").map(e=>e.trim()).filter(Boolean).map((e,t)=>({id:`option-${t}`,label:e}))}get options(){return this.parsedItems.map(e=>e.label||e.id)}set options(e){this.setAttribute("options",Array.isArray(e)?e.join(","):e)}get items(){return this.parsedItems}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value")}get open(){return this.hasAttribute("open")}set open(e){const t=this.open;this.toggleAttribute("open",e),t!==e&&this.dispatchEvent(new CustomEvent("db-open",{detail:{open:e},bubbles:!0,composed:!0}))}get disabled(){return this.hasAttribute("disabled")}set disabled(e){this.toggleAttribute("disabled",e)}get size(){return this.getAttribute("size")||"m"}set size(e){this.setAttribute("size",e)}get placement(){return this.getAttribute("placement")||"bottom-left"}set placement(e){this.setAttribute("placement",e)}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(e){e?this.setAttribute("placeholder",e):this.removeAttribute("placeholder")}get label(){return this.getAttribute("label")||""}set label(e){e?this.setAttribute("label",e):this.removeAttribute("label")}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(e){this.toggleAttribute("full-width",e)}connectedCallback(){requestAnimationFrame(()=>this.render()),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),this.unbindTrigger()}attributeChangedCallback(e){this.isConnected&&("open"!==e||this.open||(this.focusedIndex=-1),this.render())}resolvedSize(){return i.includes(this.size)?this.size:"m"}resolvedPlacement(){return r.includes(this.placement)?this.placement:"bottom-left"}menuItemIconSize(){const e=this.resolvedSize();return"s"===e?14:"l"===e?18:16}triggerLabel(){return this.label?this.label:this.placeholder?this.placeholder:this.value?this.value:"메뉴"}enabledItems(){return this.parsedItems.filter(e=>!e.disabled&&!e.divider)}collectTriggerChildren(){const isInternalNode=e=>e.hasAttribute("data-wc-internal")||e===this.triggerWrap||e===this.menu||e===this.defaultTrigger,e=Array.from(this.children).filter(e=>!isInternalNode(e));return e.length>0?e:Array.from(this.triggerWrap?.children||[]).filter(e=>!isInternalNode(e))}hasCustomTrigger(){return this.collectTriggerChildren().length>0}bindTrigger(){this.triggerWrap&&(this.unbindTrigger(),this.onTriggerActivate=e=>{this.disabled||(e.preventDefault(),e.stopPropagation(),this.toggleOpen())},this.triggerWrap.addEventListener("click",this.onTriggerActivate),this.triggerWrap.addEventListener("keydown",this.handleTriggerKeyDown))}unbindTrigger(){this.triggerWrap&&this.onTriggerActivate&&this.triggerWrap.removeEventListener("click",this.onTriggerActivate),this.triggerWrap&&this.triggerWrap.removeEventListener("keydown",this.handleTriggerKeyDown),this.onTriggerActivate=null}toggleOpen(){this.disabled||(this.open=!this.open,this.open&&requestAnimationFrame(()=>this.focusItem(0)),this.render())}triggerSignature(){return[this.resolvedSize(),this.getAttribute("trigger-variant")||"tertiary",this.hasAttribute("icon-only")?"1":"0",this.getAttribute("trigger-icon")||"",this.fullWidth?"1":"0"].join("|")}renderDefaultTrigger(){const t=this.resolvedSize(),i=this.getAttribute("trigger-variant")||"tertiary",r=s.includes(i)?i:"tertiary",n=this.hasAttribute("icon-only"),a=this.getAttribute("trigger-icon"),o=document.createElement("db-button");if(o.setAttribute("type","button"),o.setAttribute("variant",r),o.setAttribute("size",t),o.className="designbase-wc-dropdown__trigger",o.setAttribute("aria-haspopup","menu"),o.setAttribute("aria-label",this.triggerLabel()),this.fullWidth&&o.setAttribute("full-width",""),n)o.setAttribute("icon-only",""),o.setAttribute("start-icon",a&&e(a)?a:"edit"),o.removeAttribute("end-icon");else{o.removeAttribute("icon-only"),a&&e(a)?o.setAttribute("start-icon",a):o.removeAttribute("start-icon");const t=document.createElement("span");t.className="designbase-wc-dropdown__trigger-label",t.textContent=this.triggerLabel(),o.append(t),o.setAttribute("end-icon","chevron-down")}return o}syncDefaultTriggerState(e){e.setAttribute("aria-expanded",String(this.open)),e.setAttribute("aria-label",this.triggerLabel()),e.classList.toggle("designbase-wc-dropdown__trigger--open",this.open),this.disabled?e.setAttribute("disabled",""):e.removeAttribute("disabled");const t=e.querySelector(".designbase-wc-dropdown__trigger-label");t&&(t.textContent=this.triggerLabel())}ensureStructure(){this.triggerWrap||(this.triggerWrap=document.createElement("div"),this.triggerWrap.className="designbase-wc-dropdown__trigger-wrap",this.triggerWrap.setAttribute("data-wc-internal","")),this.menu||(this.menu=document.createElement("div"),this.menu.className="designbase-wc-dropdown__menu",this.menu.setAttribute("data-wc-internal",""),this.menu.setAttribute("role","menu")),this.contains(this.triggerWrap)||this.append(this.triggerWrap),this.triggerWrap.contains(this.menu)||this.triggerWrap.append(this.menu),Array.from(this.children).forEach(e=>{e===this.triggerWrap||e.hasAttribute("data-wc-internal")||this.triggerWrap.insertBefore(e,this.menu)})}renderTrigger(){const e=this.collectTriggerChildren();if(e.length>0){this.defaultTrigger?.remove(),this.defaultTrigger=void 0;Array.from(this.triggerWrap.children).filter(e=>e!==this.menu&&e!==this.defaultTrigger).forEach(e=>e.remove()),e.forEach(e=>{e.setAttribute("aria-haspopup","menu"),e.setAttribute("aria-expanded",String(this.open)),e.classList.toggle("designbase-wc-dropdown__trigger--open",this.open),this.triggerWrap.insertBefore(e,this.menu||null)})}else{Array.from(this.triggerWrap.children).filter(e=>e!==this.menu&&e!==this.defaultTrigger).forEach(e=>e.remove()),this.defaultTrigger&&this.triggerSignature()===this.lastTriggerSignature?this.syncDefaultTriggerState(this.defaultTrigger):(this.defaultTrigger?.remove(),this.defaultTrigger=this.renderDefaultTrigger(),this.lastTriggerSignature=this.triggerSignature(),this.triggerWrap.insertBefore(this.defaultTrigger,this.menu||null))}this.bindTrigger()}renderMenu(){const e=this.resolvedPlacement();this.menu.className=`designbase-wc-dropdown__menu designbase-wc-dropdown__menu--${e}${this.open?" designbase-wc-dropdown__menu--open":""}`,this.menu.setAttribute("aria-hidden",String(!this.open)),this.menu.setAttribute("aria-label",this.triggerLabel()),this.menu.replaceChildren();const i=this.menuItemIconSize();this.parsedItems.forEach((e,r)=>{if(e.divider){const e=document.createElement("div");return e.className="designbase-wc-dropdown__divider",e.setAttribute("role","separator"),void this.menu?.append(e)}e.id||e.label||String(r);const s=e.label||e.id,n=Boolean(e.disabled||this.disabled),a=this.focusedIndex===r,o=document.createElement("button");if(o.type="button",o.className=["designbase-wc-dropdown__item",n&&"designbase-wc-dropdown__item--disabled",a&&"designbase-wc-dropdown__item--focused"].filter(Boolean).join(" "),o.setAttribute("role","menuitem"),o.disabled=n,o.tabIndex=a?0:-1,o.dataset.index=String(r),e.icon){const r=t(e.icon,i);r.classList.add("designbase-wc-dropdown__item-icon"),o.append(r)}const d=document.createElement("span");d.className="designbase-wc-dropdown__item-label",d.textContent=s,o.append(d),o.addEventListener("click",t=>{t.stopPropagation(),this.selectItem(e)}),this.menu?.append(o)})}render(){const e=this.resolvedSize();this.className=["designbase-wc-dropdown",`designbase-wc-dropdown--${e}`,this.open&&"designbase-wc-dropdown--open",this.fullWidth&&"designbase-wc-dropdown--full-width",this.disabled&&"designbase-wc-dropdown--disabled"].filter(Boolean).join(" "),this.ensureStructure(),this.renderTrigger(),this.renderMenu()}selectItem(e){e.disabled||e.divider||(this.open=!1,this.focusedIndex=-1,this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e.label||e.id,id:e.id,item:e},bubbles:!0,composed:!0})),this.render(),this.triggerWrap?.querySelector("[aria-haspopup]")?.focus())}focusItem(e){const t=this.enabledItems();if(!t.length)return;const i=t[Math.max(0,Math.min(e,t.length-1))],r=this.parsedItems.indexOf(i);this.focusedIndex=r;Array.from(this.menu?.querySelectorAll(".designbase-wc-dropdown__item")||[]).forEach(e=>{const t=Number(e.dataset.index)===r;e.classList.toggle("designbase-wc-dropdown__item--focused",t),e.tabIndex=t?0:-1,t&&e.focus()})}}customElements.get("db-dropdown")||customElements.define("db-dropdown",DbDropdown);export{DbDropdown};

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

@@ -0,0 +1,29 @@
+declare class DbDropzone extends HTMLElement {
+    static get observedAttributes(): string[];
+    private fileInput?;
+    private internalDragOver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private ensureInput;
+    private isDisabled;
+    private isDragOver;
+    private validateFile;
+    private emitFiles;
+    private handleFileInputChange;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
+    private handleClick;
+    private getDescriptionText;
+    private collectChildren;
+    private syncClasses;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-dropzone': DbDropzone;
+    }
+}
+
+export { DbDropzone };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],i=["default","outlined","filled"];class DbDropzone extends HTMLElement{constructor(){super(...arguments),this.internalDragOver=!1,this.handleFileInputChange=()=>{this.emitFiles(this.fileInput?.files??null),this.fileInput&&(this.fileInput.value="")},this.handleDragOver=e=>{e.preventDefault(),e.stopPropagation(),this.isDisabled()||(this.internalDragOver=!0,this.syncClasses(),this.dispatchEvent(new CustomEvent("db-drag-over",{bubbles:!0,composed:!0,detail:{event:e}})))},this.handleDragLeave=e=>{e.preventDefault(),e.stopPropagation(),this.isDisabled()||(this.internalDragOver=!1,this.syncClasses(),this.dispatchEvent(new CustomEvent("db-drag-leave",{bubbles:!0,composed:!0,detail:{event:e}})))},this.handleDrop=e=>{e.preventDefault(),e.stopPropagation(),this.isDisabled()||(this.internalDragOver=!1,this.syncClasses(),this.emitFiles(e.dataTransfer?.files??null),this.dispatchEvent(new CustomEvent("db-drop",{bubbles:!0,composed:!0,detail:{event:e}})))},this.handleClick=e=>{this.isDisabled()||e.target.closest(".designbase-wc-dropzone__button")||(this.fileInput?.click(),this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0,detail:{event:e}})))}}static get observedAttributes(){return["size","variant","show-icon","icon","image","title","description","button-text","show-button","accept","max-size","multiple","drag-over","disabled","readonly"]}connectedCallback(){this.ensureInput(),this.sync(),this.addEventListener("dragover",this.handleDragOver),this.addEventListener("dragleave",this.handleDragLeave),this.addEventListener("drop",this.handleDrop),this.addEventListener("click",this.handleClick)}disconnectedCallback(){this.removeEventListener("dragover",this.handleDragOver),this.removeEventListener("dragleave",this.handleDragLeave),this.removeEventListener("drop",this.handleDrop),this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.isConnected&&this.sync()}ensureInput(){this.fileInput||(this.fileInput=document.createElement("input"),this.fileInput.type="file",this.fileInput.style.display="none",this.fileInput.setAttribute("data-wc-internal",""),this.fileInput.addEventListener("change",this.handleFileInputChange),this.append(this.fileInput))}isDisabled(){return this.hasAttribute("disabled")||this.hasAttribute("readonly")}isDragOver(){return this.hasAttribute("drag-over")?"false"!==this.getAttribute("drag-over"):this.internalDragOver}validateFile(e){const t=this.getAttribute("accept");if(t){const i=t.split(",").map(e=>e.trim()),s=e.type,n=`.${e.name.split(".").pop()?.toLowerCase()}`;if(!i.some(e=>e.startsWith(".")?n===e.toLowerCase():s===e||s.startsWith(e.replace("*",""))))return!1}const i=Number(this.getAttribute("max-size")||0);return!(i>0&&e.size>i)}emitFiles(e){if(!e||0===e.length)return;const t=Array.from(e).filter(e=>this.validateFile(e));t.length&&this.dispatchEvent(new CustomEvent("db-file-select",{bubbles:!0,composed:!0,detail:{files:t}}))}getDescriptionText(){const e=this.getAttribute("description");if(e)return e;const t=this.getAttribute("accept");if(!t)return"모든 파일 형식 지원";let i=t.split(",").map(e=>{const t=e.trim();return t.startsWith(".")?t.toUpperCase():t.includes("*")?t.replace("*","").toUpperCase():t}).join(", ");const s=Number(this.getAttribute("max-size")||0);if(s>0){const e=1024,t=["Bytes","KB","MB","GB"],n=Math.floor(Math.log(s)/Math.log(e));i+=` (최대 ${`${parseFloat((s/e**n).toFixed(2))} ${t[n]}`})`}return i}collectChildren(){return Array.from(this.children).filter(e=>e!==this.fileInput&&!e.hasAttribute("data-wc-internal"))}syncClasses(){const e=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",n=t.includes(e)?e:"m",a=i.includes(s)?s:"default";this.className=["designbase-wc-dropzone",`designbase-wc-dropzone--size-${n}`,`designbase-wc-dropzone--variant-${a}`,this.isDragOver()&&"designbase-wc-dropzone--drag-over",this.hasAttribute("disabled")&&"designbase-wc-dropzone--disabled",this.hasAttribute("readonly")&&"designbase-wc-dropzone--readonly"].filter(Boolean).join(" ")}sync(){this.ensureInput(),this.syncClasses();const i=this.getAttribute("accept"),s=this.hasAttribute("multiple");this.fileInput&&(i?this.fileInput.setAttribute("accept",i):this.fileInput.removeAttribute("accept"),this.fileInput.toggleAttribute("multiple",s),this.fileInput.disabled=this.isDisabled());const n=this.collectChildren(),a=this.querySelector(":scope > .designbase-wc-dropzone__content[data-wc-internal]");if(n.length)return void a?.remove();let r=a;r||(r=document.createElement("div"),r.className="designbase-wc-dropzone__content",r.setAttribute("data-wc-internal",""),this.append(r)),r.replaceChildren();const l=this.getAttribute("size")||"m",o=t.includes(l)?l:"m",d=this.getAttribute("image"),c="false"!==this.getAttribute("show-icon"),h=this.getAttribute("icon")||"gallery",p=this.getAttribute("title")||"파일을 드래그하여 업로드하거나 클릭하여 선택하세요",u=this.getDescriptionText(),b=this.hasAttribute("show-button"),g=this.getAttribute("button-text")||"파일 선택";if(d){const e=document.createElement("div");e.className="designbase-wc-dropzone__image";const t=document.createElement("img");t.src=d,t.alt="Upload illustration",e.append(t),r.append(e)}else if(c){const t=document.createElement("div");t.className="designbase-wc-dropzone__icon";const i="s"===o?32:"l"===o?56:48;t.append(e(h,i)),r.append(t)}if(p){const e=document.createElement("div");e.className="designbase-wc-dropzone__title",e.textContent=p,r.append(e)}if(u){const e=document.createElement("div");e.className="designbase-wc-dropzone__description",e.textContent=u,r.append(e)}if(b){const e=document.createElement("button");e.type="button",e.className="designbase-wc-dropzone__button",e.textContent=g,e.disabled=this.isDisabled(),e.addEventListener("click",e=>{e.stopPropagation(),this.isDisabled()||this.fileInput?.click()}),r.append(e)}}}customElements.get("db-dropzone")||customElements.define("db-dropzone",DbDropzone);export{DbDropzone};

package/dist/esm/components/db-empty-state.d.ts

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

package/dist/esm/components/db-empty-state.js

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";class DbEmptyState extends HTMLElement{static get observedAttributes(){return["variant","size","title","description","action-text","secondary-action-text","image","image-alt"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}getIconName(t){return"no-results"===t?"search":"no-access"===t?"user":"error"===t?"cloud-close":"onboarding"===t?"bulb":"plus"}render(){const e=this.getAttribute("variant")||"no-data",s=this.getAttribute("size")||"m",a=this.getAttribute("title")||"",n=this.getAttribute("description")||"",i=this.getAttribute("action-text"),c=this.getAttribute("secondary-action-text"),d=this.getAttribute("image"),o=this.getAttribute("image-alt")||a,r="s"===s?24:"l"===s?48:32;this.className=`designbase-wc-empty-state designbase-wc-empty-state--${e} designbase-wc-empty-state--${s}`,this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.replaceChildren();const m=document.createElement("div");if(m.className="designbase-wc-empty-state__content",d){const t=document.createElement("div");t.className="designbase-wc-empty-state__image";const e=document.createElement("img");e.className="designbase-wc-empty-state__image-element",e.src=d,e.alt=o,t.append(e),m.append(t)}else{const s=document.createElement("div");s.className="designbase-wc-empty-state__icon",s.append(t(this.getIconName(e),r)),m.append(s)}const b=document.createElement("h3");if(b.className="designbase-wc-empty-state__title",b.textContent=a,m.append(b),n){const t=document.createElement("p");t.className="designbase-wc-empty-state__description",t.textContent=n,m.append(t)}if(i||c){const t=document.createElement("div");if(t.className="designbase-wc-empty-state__actions",i){const a=document.createElement("db-button");a.setAttribute("variant","onboarding"===e?"primary":"secondary"),a.setAttribute("size",s),a.textContent=i,a.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-action",{bubbles:!0,composed:!0}))}),t.append(a)}if(c){const e=document.createElement("db-button");e.setAttribute("variant","tertiary"),e.setAttribute("size",s),e.textContent=c,e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-secondary-action",{bubbles:!0,composed:!0}))}),t.append(e)}m.append(t)}this.append(m)}}customElements.get("db-empty-state")||customElements.define("db-empty-state",DbEmptyState);export{DbEmptyState};

package/dist/esm/components/db-file-uploader.d.ts

@@ -0,0 +1,27 @@
+declare class DbFileUploader extends HTMLElement {
+    static get observedAttributes(): string[];
+    private dropzone?;
+    private uploadedFiles;
+    private uploadIntervals;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private isDisabled;
+    private ensureDropzone;
+    private formatFileSize;
+    private handleFileSelect;
+    private simulateUpload;
+    private updateFile;
+    private handleRemove;
+    private handleRetry;
+    private sync;
+    private renderStatusIcon;
+    private renderFileList;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-file-uploader': DbFileUploader;
+    }
+}
+
+export { DbFileUploader };

package/dist/esm/components/db-file-uploader.js

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],s=["default","outlined","filled"];class DbFileUploader extends HTMLElement{constructor(){super(...arguments),this.uploadedFiles=[],this.uploadIntervals=new Map,this.handleFileSelect=e=>{if(this.isDisabled())return;const t=e.detail,s=t?.files??[];if(!s.length)return;const i=s.map(e=>({file:e,id:`${Date.now()}-${Math.random()}`,status:"pending",progress:0}));this.hasAttribute("multiple")?this.uploadedFiles=[...this.uploadedFiles,...i]:this.uploadedFiles=i,this.dispatchEvent(new CustomEvent("db-upload",{bubbles:!0,composed:!0,detail:{files:i}})),this.simulateUpload(i),this.renderFileList()},this.handleRemove=e=>{if(this.isDisabled())return;const t=this.uploadIntervals.get(e);t&&(clearInterval(t),this.uploadIntervals.delete(e)),this.uploadedFiles=this.uploadedFiles.filter(t=>t.id!==e),this.dispatchEvent(new CustomEvent("db-remove",{bubbles:!0,composed:!0,detail:{fileId:e}})),this.renderFileList()},this.handleRetry=e=>{if(this.isDisabled())return;const t=this.uploadedFiles.find(t=>t.id===e);t&&(this.updateFile(e,{status:"pending",progress:0,error:void 0}),this.dispatchEvent(new CustomEvent("db-retry",{bubbles:!0,composed:!0,detail:{fileId:e}})),this.simulateUpload([t]),this.renderFileList())}}static get observedAttributes(){return["size","variant","accept","max-size","multiple","show-file-list","show-progress","disabled","readonly"]}connectedCallback(){this.ensureDropzone(),this.sync(),this.dropzone?.addEventListener("db-file-select",this.handleFileSelect)}disconnectedCallback(){this.dropzone?.removeEventListener("db-file-select",this.handleFileSelect),this.uploadIntervals.forEach(e=>clearInterval(e)),this.uploadIntervals.clear()}attributeChangedCallback(){this.isConnected&&this.sync()}isDisabled(){return this.hasAttribute("disabled")||this.hasAttribute("readonly")}ensureDropzone(){this.dropzone||(this.dropzone=document.createElement("db-dropzone"),this.dropzone.setAttribute("data-wc-internal",""),this.prepend(this.dropzone))}formatFileSize(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(1024));return`${parseFloat((e/1024**t).toFixed(2))} ${["Bytes","KB","MB","GB"][t]}`}simulateUpload(e){e.forEach((e,t)=>{this.updateFile(e.id,{status:"uploading",progress:0});let s=0;const i=setInterval(()=>{if(s+=20*Math.random(),s>=100)return s=100,clearInterval(i),this.uploadIntervals.delete(e.id),this.updateFile(e.id,{status:"success",progress:100}),void this.renderFileList();this.updateFile(e.id,{progress:s}),this.renderFileList()},100+50*t);this.uploadIntervals.set(e.id,i)})}updateFile(e,t){this.uploadedFiles=this.uploadedFiles.map(s=>s.id===e?{...s,...t}:s)}sync(){if(this.ensureDropzone(),!this.dropzone)return;const e=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",l=t.includes(e)?e:"m",a=s.includes(i)?i:"default";this.className=["designbase-wc-file-uploader",`designbase-wc-file-uploader--size-${l}`,`designbase-wc-file-uploader--variant-${a}`,this.hasAttribute("disabled")&&"designbase-wc-file-uploader--disabled",this.hasAttribute("readonly")&&"designbase-wc-file-uploader--readonly"].filter(Boolean).join(" "),this.dropzone.setAttribute("size",l),this.dropzone.setAttribute("variant",a),this.getAttribute("accept")?this.dropzone.setAttribute("accept",this.getAttribute("accept")):this.dropzone.removeAttribute("accept"),this.getAttribute("max-size")?this.dropzone.setAttribute("max-size",this.getAttribute("max-size")):this.dropzone.removeAttribute("max-size"),this.dropzone.toggleAttribute("multiple",this.hasAttribute("multiple")),this.dropzone.toggleAttribute("disabled",this.hasAttribute("disabled")),this.dropzone.toggleAttribute("readonly",this.hasAttribute("readonly")),this.renderFileList()}renderStatusIcon(t){if("uploading"===t){const e=document.createElement("db-spinner");return e.setAttribute("type","circular"),e.setAttribute("size","s"),e}return e("success"===t?"done":"error"===t?"error-filled":"gallery",20)}renderFileList(){const e=!this.hasAttribute("show-file-list")||"false"!==this.getAttribute("show-file-list"),t=!this.hasAttribute("show-progress")||"false"!==this.getAttribute("show-progress");if(this.querySelector(":scope > .designbase-wc-file-uploader__file-list")?.remove(),!e||!this.uploadedFiles.length)return;const s=document.createElement("div");s.className="designbase-wc-file-uploader__file-list";const i=document.createElement("div");i.className="designbase-wc-file-uploader__file-list-title",i.textContent=`업로드된 파일들 (${this.uploadedFiles.length}개)`,s.append(i);const l=document.createElement("div");l.className="designbase-wc-file-uploader__file-items",this.uploadedFiles.forEach(e=>{const s=document.createElement("div");s.className=`designbase-wc-file-uploader__file-item designbase-wc-file-uploader__file-item--${e.status}`;const i=document.createElement("div");i.className="designbase-wc-file-uploader__file-info";const a=document.createElement("div");a.className="designbase-wc-file-uploader__file-icon",a.append(this.renderStatusIcon(e.status));const d=document.createElement("div");d.className="designbase-wc-file-uploader__file-details";const r=document.createElement("div");r.className="designbase-wc-file-uploader__file-name",r.textContent=e.file.name;const n=document.createElement("div");if(n.className="designbase-wc-file-uploader__file-size",n.textContent=this.formatFileSize(e.file.size),d.append(r,n),e.error){const t=document.createElement("div");t.className="designbase-wc-file-uploader__file-error",t.textContent=e.error,d.append(t)}if(i.append(a,d),s.append(i),t&&"uploading"===e.status){const t=document.createElement("div");t.className="designbase-wc-file-uploader__progress";const i=document.createElement("db-progressbar");i.setAttribute("value",String(Math.round(e.progress||0))),i.setAttribute("size","s"),i.setAttribute("variant","primary"),i.setAttribute("bar-style","solid"),i.setAttribute("show-label",""),i.setAttribute("label-position","inside"),i.setAttribute("full-width",""),t.append(i),s.append(t)}const o=document.createElement("div");if(o.className="designbase-wc-file-uploader__file-actions","error"===e.status){const t=document.createElement("button");t.type="button",t.className="designbase-wc-file-uploader__retry-button",t.textContent="재시도",t.disabled=this.isDisabled(),t.addEventListener("click",()=>this.handleRetry(e.id)),o.append(t)}const u=document.createElement("button");u.type="button",u.className="designbase-wc-file-uploader__remove-button",u.textContent="삭제",u.disabled=this.isDisabled(),u.addEventListener("click",()=>this.handleRemove(e.id)),o.append(u),s.append(o),l.append(s)}),s.append(l),this.append(s)}}customElements.get("db-file-uploader")||customElements.define("db-file-uploader",DbFileUploader);export{DbFileUploader};

package/dist/esm/components/db-floating-action-button.d.ts

@@ -0,0 +1,24 @@
+declare class DbFloatingActionButton extends HTMLElement {
+    static get observedAttributes(): string[];
+    get size(): string;
+    set size(value: string);
+    get variant(): string;
+    set variant(value: string);
+    get loading(): boolean;
+    set loading(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private handleClick;
+    private resolveIconName;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-floating-action-button': DbFloatingActionButton;
+    }
+}
+
+export { DbFloatingActionButton };

package/dist/esm/components/db-floating-action-button.js

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";const e=["s","m","l"],i=["primary","secondary","tertiary"],s={s:12,m:16,l:20},n={s:"xs",m:"s",l:"m"};class DbFloatingActionButton extends HTMLElement{constructor(){super(...arguments),this.handleClick=t=>{if(this.disabled||this.loading)return t.preventDefault(),void t.stopPropagation();this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))}}static get observedAttributes(){return["size","variant","icon","loading","disabled","aria-label"]}get size(){const t=this.getAttribute("size")||"m";return e.includes(t)?t:"m"}set size(t){this.setAttribute("size",t)}get variant(){const t=this.getAttribute("variant")||"primary";return i.includes(t)?t:"primary"}set variant(t){this.setAttribute("variant",t)}get loading(){return this.hasAttribute("loading")}set loading(t){this.toggleAttribute("loading",Boolean(t))}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",Boolean(t))}connectedCallback(){"button"!==this.getAttribute("role")&&this.setAttribute("role","button"),this.hasAttribute("type")||this.setAttribute("type","button"),this.addEventListener("click",this.handleClick),this.sync()}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.isConnected&&this.sync()}resolveIconName(t){if(!t)return;return t in{plus:1,search:1,settings:1,edit:1,close:1}?t:void 0}sync(){this.className=["designbase-wc-fab",`designbase-wc-fab--${this.size}`,`designbase-wc-fab--${this.variant}`,this.disabled&&"designbase-wc-fab--disabled",this.loading&&"designbase-wc-fab--loading"].filter(Boolean).join(" ");const e=this.getAttribute("aria-label")||"Floating action button";this.getAttribute("aria-label")!==e&&this.setAttribute("aria-label",e);const i=String(this.loading);this.getAttribute("aria-busy")!==i&&this.setAttribute("aria-busy",i);const a=String(this.disabled||this.loading);this.getAttribute("aria-disabled")!==a&&this.setAttribute("aria-disabled",a);let r=this.querySelector(":scope > .designbase-wc-fab__icon");if(r||(r=document.createElement("div"),r.className="designbase-wc-fab__icon",this.append(r)),r.replaceChildren(),this.loading){const t=document.createElement("span");return t.className=`designbase-wc-spinner designbase-wc-spinner--circular designbase-wc-spinner--${n[this.size]}`,t.setAttribute("aria-hidden","true"),t.innerHTML='<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>',void r.append(t)}const c=this.getAttribute("icon"),o=this.resolveIconName(c);if(o)return void r.append(t(o,s[this.size]));const l=Array.from(this.children).find(t=>t!==r&&!t.hasAttribute("data-wc-internal"));l&&!l.isConnected&&r.append(l)}}customElements.get("db-floating-action-button")||customElements.define("db-floating-action-button",DbFloatingActionButton);export{DbFloatingActionButton};