@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,266 @@
-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};
+import { createDbIcon } from './db-icons.js';
+
+const SIZES = ['s', 'm', 'l'];
+const VARIANTS = ['default', 'outlined', 'filled'];
+class DbDropzone extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.internalDragOver = false;
+        this.handleFileInputChange = () => {
+            this.emitFiles(this.fileInput?.files ?? null);
+            if (this.fileInput)
+                this.fileInput.value = '';
+        };
+        this.handleDragOver = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.isDisabled())
+                return;
+            this.internalDragOver = true;
+            this.syncClasses();
+            this.dispatchEvent(new CustomEvent('db-drag-over', { bubbles: true, composed: true, detail: { event } }));
+        };
+        this.handleDragLeave = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.isDisabled())
+                return;
+            this.internalDragOver = false;
+            this.syncClasses();
+            this.dispatchEvent(new CustomEvent('db-drag-leave', { bubbles: true, composed: true, detail: { event } }));
+        };
+        this.handleDrop = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.isDisabled())
+                return;
+            this.internalDragOver = false;
+            this.syncClasses();
+            this.emitFiles(event.dataTransfer?.files ?? null);
+            this.dispatchEvent(new CustomEvent('db-drop', { bubbles: true, composed: true, detail: { event } }));
+        };
+        this.handleClick = (event) => {
+            if (this.isDisabled())
+                return;
+            if (event.target.closest('.designbase-wc-dropzone__button'))
+                return;
+            this.fileInput?.click();
+            this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true, detail: { event } }));
+        };
+    }
+    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() {
+        if (this.isConnected)
+            this.sync();
+    }
+    ensureInput() {
+        if (this.fileInput)
+            return;
+        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() {
+        if (this.hasAttribute('drag-over')) {
+            return this.getAttribute('drag-over') !== 'false';
+        }
+        return this.internalDragOver;
+    }
+    validateFile(file) {
+        const accept = this.getAttribute('accept');
+        if (accept) {
+            const acceptedTypes = accept.split(',').map((type) => type.trim());
+            const fileType = file.type;
+            const fileExtension = `.${file.name.split('.').pop()?.toLowerCase()}`;
+            const isValidType = acceptedTypes.some((type) => {
+                if (type.startsWith('.'))
+                    return fileExtension === type.toLowerCase();
+                return fileType === type || fileType.startsWith(type.replace('*', ''));
+            });
+            if (!isValidType)
+                return false;
+        }
+        const maxSize = Number(this.getAttribute('max-size') || 0);
+        if (maxSize > 0 && file.size > maxSize)
+            return false;
+        return true;
+    }
+    emitFiles(files) {
+        if (!files || files.length === 0)
+            return;
+        const validFiles = Array.from(files).filter((file) => this.validateFile(file));
+        if (!validFiles.length)
+            return;
+        this.dispatchEvent(new CustomEvent('db-file-select', {
+            bubbles: true,
+            composed: true,
+            detail: { files: validFiles },
+        }));
+    }
+    getDescriptionText() {
+        const description = this.getAttribute('description');
+        if (description)
+            return description;
+        const accept = this.getAttribute('accept');
+        if (!accept)
+            return '모든 파일 형식 지원';
+        const types = accept.split(',').map((type) => {
+            const trimmed = type.trim();
+            if (trimmed.startsWith('.'))
+                return trimmed.toUpperCase();
+            if (trimmed.includes('*'))
+                return trimmed.replace('*', '').toUpperCase();
+            return trimmed;
+        });
+        let desc = types.join(', ');
+        const maxSize = Number(this.getAttribute('max-size') || 0);
+        if (maxSize > 0) {
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(maxSize) / Math.log(k));
+            const sizeText = `${parseFloat((maxSize / k ** i).toFixed(2))} ${sizes[i]}`;
+            desc += ` (최대 ${sizeText})`;
+        }
+        return desc;
+    }
+    collectChildren() {
+        return Array.from(this.children).filter((child) => child !== this.fileInput && !child.hasAttribute('data-wc-internal'));
+    }
+    syncClasses() {
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const safeSize = SIZES.includes(size) ? size : 'm';
+        const safeVariant = VARIANTS.includes(variant) ? variant : 'default';
+        this.className = [
+            'designbase-wc-dropzone',
+            `designbase-wc-dropzone--size-${safeSize}`,
+            `designbase-wc-dropzone--variant-${safeVariant}`,
+            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 accept = this.getAttribute('accept');
+        const multiple = this.hasAttribute('multiple');
+        if (this.fileInput) {
+            if (accept)
+                this.fileInput.setAttribute('accept', accept);
+            else
+                this.fileInput.removeAttribute('accept');
+            this.fileInput.toggleAttribute('multiple', multiple);
+            this.fileInput.disabled = this.isDisabled();
+        }
+        const userChildren = this.collectChildren();
+        const defaultContent = this.querySelector(':scope > .designbase-wc-dropzone__content[data-wc-internal]');
+        if (userChildren.length) {
+            defaultContent?.remove();
+            return;
+        }
+        let content = defaultContent;
+        if (!content) {
+            content = document.createElement('div');
+            content.className = 'designbase-wc-dropzone__content';
+            content.setAttribute('data-wc-internal', '');
+            this.append(content);
+        }
+        content.replaceChildren();
+        const size = this.getAttribute('size') || 'm';
+        const safeSize = SIZES.includes(size) ? size : 'm';
+        const image = this.getAttribute('image');
+        const showIcon = this.getAttribute('show-icon') !== 'false';
+        const iconName = this.getAttribute('icon') || 'gallery';
+        const title = this.getAttribute('title') || '파일을 드래그하여 업로드하거나 클릭하여 선택하세요';
+        const description = this.getDescriptionText();
+        const showButton = this.hasAttribute('show-button');
+        const buttonText = this.getAttribute('button-text') || '파일 선택';
+        if (image) {
+            const imageWrap = document.createElement('div');
+            imageWrap.className = 'designbase-wc-dropzone__image';
+            const img = document.createElement('img');
+            img.src = image;
+            img.alt = 'Upload illustration';
+            imageWrap.append(img);
+            content.append(imageWrap);
+        }
+        else if (showIcon) {
+            const iconWrap = document.createElement('div');
+            iconWrap.className = 'designbase-wc-dropzone__icon';
+            const iconSize = safeSize === 's' ? 32 : safeSize === 'l' ? 56 : 48;
+            iconWrap.append(createDbIcon(iconName, iconSize));
+            content.append(iconWrap);
+        }
+        if (title) {
+            const titleEl = document.createElement('div');
+            titleEl.className = 'designbase-wc-dropzone__title';
+            titleEl.textContent = title;
+            content.append(titleEl);
+        }
+        if (description) {
+            const descriptionEl = document.createElement('div');
+            descriptionEl.className = 'designbase-wc-dropzone__description';
+            descriptionEl.textContent = description;
+            content.append(descriptionEl);
+        }
+        if (showButton) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'designbase-wc-dropzone__button';
+            button.textContent = buttonText;
+            button.disabled = this.isDisabled();
+            button.addEventListener('click', (event) => {
+                event.stopPropagation();
+                if (!this.isDisabled())
+                    this.fileInput?.click();
+            });
+            content.append(button);
+        }
+    }
+}
+if (!customElements.get('db-dropzone')) {
+    customElements.define('db-dropzone', DbDropzone);
+}
+
+export { DbDropzone };

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

@@ -1 +1,97 @@
-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};
+import { createDbIcon } 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(variant) {
+        if (variant === 'no-results')
+            return 'search';
+        if (variant === 'no-access')
+            return 'user';
+        if (variant === 'error')
+            return 'cloud-close';
+        if (variant === 'onboarding')
+            return 'bulb';
+        return 'plus';
+    }
+    render() {
+        const variant = this.getAttribute('variant') || 'no-data';
+        const size = this.getAttribute('size') || 'm';
+        const title = this.getAttribute('title') || '';
+        const description = this.getAttribute('description') || '';
+        const actionText = this.getAttribute('action-text');
+        const secondaryActionText = this.getAttribute('secondary-action-text');
+        const image = this.getAttribute('image');
+        const imageAlt = this.getAttribute('image-alt') || title;
+        const iconSize = size === 's' ? 24 : size === 'l' ? 48 : 32;
+        this.className = `designbase-wc-empty-state designbase-wc-empty-state--${variant} designbase-wc-empty-state--${size}`;
+        this.setAttribute('role', 'status');
+        this.setAttribute('aria-live', 'polite');
+        this.replaceChildren();
+        const content = document.createElement('div');
+        content.className = 'designbase-wc-empty-state__content';
+        if (image) {
+            const imageWrap = document.createElement('div');
+            imageWrap.className = 'designbase-wc-empty-state__image';
+            const imageElement = document.createElement('img');
+            imageElement.className = 'designbase-wc-empty-state__image-element';
+            imageElement.src = image;
+            imageElement.alt = imageAlt;
+            imageWrap.append(imageElement);
+            content.append(imageWrap);
+        }
+        else {
+            const icon = document.createElement('div');
+            icon.className = 'designbase-wc-empty-state__icon';
+            icon.append(createDbIcon(this.getIconName(variant), iconSize));
+            content.append(icon);
+        }
+        const heading = document.createElement('h3');
+        heading.className = 'designbase-wc-empty-state__title';
+        heading.textContent = title;
+        content.append(heading);
+        if (description) {
+            const body = document.createElement('p');
+            body.className = 'designbase-wc-empty-state__description';
+            body.textContent = description;
+            content.append(body);
+        }
+        if (actionText || secondaryActionText) {
+            const actions = document.createElement('div');
+            actions.className = 'designbase-wc-empty-state__actions';
+            if (actionText) {
+                const action = document.createElement('db-button');
+                action.setAttribute('variant', variant === 'onboarding' ? 'primary' : 'secondary');
+                action.setAttribute('size', size);
+                action.textContent = actionText;
+                action.addEventListener('db-click', () => {
+                    this.dispatchEvent(new CustomEvent('db-action', { bubbles: true, composed: true }));
+                });
+                actions.append(action);
+            }
+            if (secondaryActionText) {
+                const action = document.createElement('db-button');
+                action.setAttribute('variant', 'tertiary');
+                action.setAttribute('size', size);
+                action.textContent = secondaryActionText;
+                action.addEventListener('db-click', () => {
+                    this.dispatchEvent(new CustomEvent('db-secondary-action', { bubbles: true, composed: true }));
+                });
+                actions.append(action);
+            }
+            content.append(actions);
+        }
+        this.append(content);
+    }
+}
+if (!customElements.get('db-empty-state'))
+    customElements.define('db-empty-state', DbEmptyState);
+
+export { DbEmptyState };

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

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