@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,256 +1 @@
-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 };
+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.js

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