@designbasekorea/ui-wc 0.5.6 → 0.6.1

package/dist/esm/components/db-ai-chat.d.ts

@@ -0,0 +1,159 @@
+import './db-chat-welcome.js';
+import { DbChatSuggestion } from './db-chat-suggestions.js';
+import './db-chat-message.js';
+import './db-chat-typing.js';
+import { DbChatTool, DbChatAttachOption, DbChatComposer } from './db-chat-composer.js';
+
+interface DbArtifactOptions {
+    /** 패널 헤더 제목 */
+    title?: string;
+    /** 헤더 부제(선택) */
+    subtitle?: string;
+    /** 본문 HTML (setArtifactContent 로 요소를 직접 넣을 수도 있음) */
+    html?: string;
+    /** 인라인 카드와 동기화할 id (toggle 용) */
+    id?: string;
+}
+/** 채팅 스레드 안에 노출되는 결과물(아티팩트) 카드 */
+interface DbChatArtifactRef {
+    id?: string;
+    title: string;
+    subtitle?: string;
+    icon?: string;
+    html?: string;
+}
+interface DbChatMessageData {
+    id?: string;
+    role?: 'user' | 'assistant' | 'system';
+    /** 평문 본문 */
+    text?: string;
+    /** HTML 본문 (text 대신) */
+    html?: string;
+    name?: string;
+    time?: string;
+    avatarSrc?: string;
+    avatarInitials?: string;
+    /** 말풍선 액션 (예: 'copy,regenerate,like,dislike') */
+    actions?: string;
+    status?: 'sending' | 'error';
+    variant?: 'bubble' | 'plain';
+    /** 스레드 인라인 결과물 카드 — 클릭 시 우측 아티팩트 패널 토글 */
+    artifact?: DbChatArtifactRef;
+}
+/**
+ * 전체 대화형 AI 채팅 화면. 시작 전(빈 상태)과 대화 중을 하나로 통합한 최상위 컴포넌트로,
+ * 채팅 프리미티브(`db-chat-welcome` · `db-chat-suggestions` · `db-chat-message`
+ * · `db-chat-typing` · `db-chat-composer`)를 조합합니다.
+ *
+ * - 메시지가 없으면 히어로(인사말 + 추천)를 중앙에 보여주고,
+ * - 메시지가 생기면 스크롤 스레드로 전환하며, 컴포저는 항상 하단에 고정됩니다.
+ *
+ * @fires db-send            - 전송 (detail: { value, attachments })
+ * @fires db-stop            - 생성 중지
+ * @fires db-tool-toggle     - 툴 토글 (detail: { id, active })
+ * @fires db-attach          - 첨부 종류 선택 (detail: { type })
+ * @fires db-attach-files    - 파일 선택 (detail: { type, files })
+ * @fires db-voice           - 음성 입력
+ * @fires db-suggestion-select - 추천 선택 (detail: { id, title, value })
+ * @fires db-message-action  - 말풍선 액션 (detail: { action, text })
+ *
+ * @example
+ *   const chat = document.querySelector('db-chat');
+ *   chat.suggestions = [{ title:'카피 작성', icon:'edit' }];
+ *   chat.tools = [{ id:'reason', label:'Reasoning', icon:'bulb' }];
+ *   chat.addEventListener('db-send', (e) => {
+ *     chat.addMessage({ role:'user', text: e.detail.value });
+ *     chat.setTyping(true);
+ *   });
+ */
+declare class DbAiChat extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private typing;
+    private _messages;
+    private _suggestions;
+    private _tools;
+    private _attachOptions;
+    private mainEl;
+    private scrollEl;
+    private dockEl;
+    private composer;
+    private threadEl;
+    private artifactEl;
+    private artifactTitleEl;
+    private artifactSubtitleEl;
+    private artifactBodyEl;
+    private activeArtifactId;
+    private artifactSeq;
+    set messages(v: DbChatMessageData[]);
+    get messages(): DbChatMessageData[];
+    set suggestions(v: DbChatSuggestion[]);
+    get suggestions(): DbChatSuggestion[];
+    set tools(v: DbChatTool[]);
+    get tools(): DbChatTool[];
+    set attachOptions(v: DbChatAttachOption[]);
+    get attachOptions(): DbChatAttachOption[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private build;
+    private buildArtifact;
+    private sync;
+    private syncArtifact;
+    private syncComposerToggles;
+    private renderContent;
+    private renderHero;
+    private renderThread;
+    private buildMessage;
+    private ensureArtifactId;
+    private buildArtifactCard;
+    private syncArtifactCardStates;
+    private toggleArtifactFromCard;
+    private buildTyping;
+    private renderDock;
+    private onSend;
+    private onSuggestionSelect;
+    private relay;
+    private scrollToEnd;
+    /** 메시지를 추가하고 스레드로 전환/스크롤. 추가된 메시지 id 반환 */
+    addMessage(msg: DbChatMessageData): string;
+    /** 특정 메시지 본문/속성 갱신 */
+    updateMessage(id: string, patch: Partial<DbChatMessageData>): void;
+    /** 스트리밍용: 마지막(또는 지정) 메시지 본문에 청크 이어붙이기 */
+    appendToMessage(id: string, chunk: string): void;
+    /** 전체 메시지 교체 */
+    setMessages(list: DbChatMessageData[]): void;
+    /** 대화를 비우고 히어로(빈 상태)로 복귀 */
+    clear(): void;
+    /** 생각 중(…) 표시 토글 */
+    setTyping(on: boolean): void;
+    /** 전송 중(정지 버튼) 상태 — 컴포저에 위임 */
+    setStreaming(on: boolean): void;
+    /** 입력창 포커스 */
+    focusInput(): void;
+    /** 컴포저 인스턴스 접근 */
+    getComposer(): DbChatComposer;
+    get artifactOpen(): boolean;
+    set artifactOpen(v: boolean);
+    /**
+     * 우측 아티팩트 패널을 엽니다(내용 지정 시 함께 세팅).
+     * 열리면 채팅 본문이 좌측으로 밀립니다.
+     * `id` 를 넘기면 스레드 인라인 카드 활성 상태가 동기화됩니다.
+     */
+    openArtifact(opts?: DbArtifactOptions): void;
+    /** 아티팩트 패널을 닫습니다. */
+    closeArtifact(): void;
+    /** 아티팩트 열림/닫힘 토글. */
+    toggleArtifact(): void;
+    /** 아티팩트 본문 요소(커스텀 콘텐츠를 직접 마운트할 때). */
+    getArtifactBody(): HTMLElement;
+    /** 아티팩트 본문을 요소로 교체합니다. */
+    setArtifactContent(node: Node): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-chat': DbAiChat;
+    }
+}
+
+export { DbAiChat };
+export type { DbArtifactOptions, DbChatArtifactRef, DbChatMessageData };

package/dist/esm/components/db-ai-chat.js

@@ -0,0 +1 @@
+import"./db-chat-welcome.js";import"./db-chat-suggestions.js";import"./db-chat-message.js";import"./db-chat-typing.js";import"./db-chat-composer.js";import{createDbIcon as t,isDbIconName as e}from"./db-icons.js";const i="designbase-wc-ai-chat";let s=0;function el(t,e,i){const s=document.createElement(t);return e&&(s.className=e),null!=i&&(s.textContent=i),s}class DbAiChat extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.typing=!1,this._messages=[],this._suggestions=[],this._tools=[],this._attachOptions=null,this.threadEl=null,this.activeArtifactId=null,this.artifactSeq=0,this.onSend=t=>{t.stopPropagation();const e=t.detail;this.dispatchEvent(new CustomEvent("db-send",{detail:e,bubbles:!0,composed:!0}))},this.onSuggestionSelect=t=>{t.stopPropagation();const e=t.detail,i=new CustomEvent("db-suggestion-select",{detail:e,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i)&&(this.composer.value=e.value,this.composer.focusInput())}}static get observedAttributes(){return["greeting","title","highlight","subtitle","placeholder","orb-variant","suggestions-layout","suggestions-columns","disclaimer","voice","attach","max-width","artifact-open","artifact-title"]}set messages(t){this._messages=Array.isArray(t)?t.map(t=>({id:`m${s+=1}`,...t})):[],this.built&&this.renderContent()}get messages(){return this._messages}set suggestions(t){this._suggestions=Array.isArray(t)?t:[],this.built&&0===this._messages.length&&this.renderContent()}get suggestions(){return this._suggestions}set tools(t){this._tools=Array.isArray(t)?t:[],this.built&&(this.composer.tools=this._tools)}get tools(){return this._tools}set attachOptions(t){this._attachOptions=Array.isArray(t)?t:null,this.built&&this._attachOptions&&(this.composer.attachOptions=this._attachOptions)}get attachOptions(){return this._attachOptions??this.composer?.attachOptions??[]}connectedCallback(){this.built||this.build(),this.sync()}attributeChangedCallback(t){this.built&&("placeholder"!==t?"voice"!==t&&"attach"!==t?"disclaimer"!==t?"artifact-open"!==t?"artifact-title"!==t?this.sync():this.artifactTitleEl.textContent=this.getAttribute("artifact-title")||"":this.syncArtifact(!0):this.renderDock():this.syncComposerToggles():this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||""))}build(){this.built=!0,this.classList.add(i),this.replaceChildren(),this.mainEl=el("div",`${i}__main`),this.scrollEl=el("div",`${i}__scroll`),this.dockEl=el("div",`${i}__dock`),this.composer=document.createElement("db-chat-composer"),this.composer.className=`${i}__composer`,this.composer.addEventListener("db-send",this.onSend),this.composer.addEventListener("db-stop",t=>this.relay(t,"db-stop")),this.composer.addEventListener("db-tool-toggle",t=>this.relay(t,"db-tool-toggle")),this.composer.addEventListener("db-attach",t=>this.relay(t,"db-attach")),this.composer.addEventListener("db-attach-files",t=>this.relay(t,"db-attach-files")),this.composer.addEventListener("db-voice",t=>this.relay(t,"db-voice")),this.mainEl.append(this.scrollEl,this.dockEl),this.buildArtifact(),this.append(this.mainEl,this.artifactEl)}buildArtifact(){this.artifactEl=el("aside",`${i}__artifact`),this.artifactEl.setAttribute("aria-hidden","true");const e=el("div",`${i}__artifact-panel`),s=el("div",`${i}__artifact-header`),a=el("div",`${i}__artifact-titles`);this.artifactTitleEl=el("div",`${i}__artifact-title`),this.artifactSubtitleEl=el("div",`${i}__artifact-subtitle`),this.artifactSubtitleEl.hidden=!0,a.append(this.artifactTitleEl,this.artifactSubtitleEl);const r=el("button",`${i}__artifact-close`);r.type="button",r.setAttribute("aria-label","아티팩트 닫기"),r.append(t("close",18)),r.addEventListener("click",()=>this.closeArtifact()),s.append(a,r),this.artifactBodyEl=el("div",`${i}__artifact-body`),e.append(s,this.artifactBodyEl),this.artifactEl.append(e)}sync(){const t=this.getAttribute("max-width")||"100%";this.style.setProperty("--dbchat-max",t),this.syncComposerToggles(),this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||"무엇이든 물어보세요…"),this._tools.length&&(this.composer.tools=this._tools),this._attachOptions&&(this.composer.attachOptions=this._attachOptions);const e=this.getAttribute("artifact-title");null!=e&&(this.artifactTitleEl.textContent=e),this.renderContent(),this.renderDock(),this.syncArtifact(!1)}syncArtifact(t){const e=this.hasAttribute("artifact-open");this.classList.toggle(`${i}--artifact-open`,e),this.artifactEl.setAttribute("aria-hidden",String(!e)),this.artifactEl.toggleAttribute("inert",!e),e||(this.activeArtifactId=null),this.syncArtifactCardStates(),t&&this.dispatchEvent(new CustomEvent(e?"db-artifact-open":"db-artifact-close",{detail:e?{id:this.activeArtifactId}:{id:null},bubbles:!0,composed:!0}))}syncComposerToggles(){this.composer.toggleAttribute("voice",this.hasAttribute("voice")),this.composer.toggleAttribute("attach","false"!==this.getAttribute("attach"))}renderContent(){this.scrollEl.replaceChildren(),this.threadEl=null;const t=0===this._messages.length;this.classList.toggle(`${i}--empty`,t),t?this.renderHero():this.renderThread()}renderHero(){const t=el("div",`${i}__hero`),e=document.createElement("db-chat-welcome");if(e.className=`${i}__welcome`,this.getAttribute("greeting")&&e.setAttribute("greeting",this.getAttribute("greeting")),e.setAttribute("title",this.getAttribute("title")||"무엇을 도와드릴까요?"),this.getAttribute("highlight")&&e.setAttribute("highlight",this.getAttribute("highlight")),this.getAttribute("subtitle")&&e.setAttribute("subtitle",this.getAttribute("subtitle")),e.setAttribute("orb-variant",this.getAttribute("orb-variant")||"aurora"),e.setAttribute("align","center"),t.append(e),this._suggestions.length){const e=document.createElement("db-chat-suggestions");e.className=`${i}__suggestions`,e.setAttribute("layout",this.getAttribute("suggestions-layout")||"card"),e.setAttribute("columns",this.getAttribute("suggestions-columns")||"3"),e.items=this._suggestions,e.addEventListener("db-select",this.onSuggestionSelect),t.append(e)}this.scrollEl.append(t)}renderThread(){const t=el("div",`${i}__thread`);this._messages.forEach(e=>t.append(this.buildMessage(e))),this.threadEl=t,this.scrollEl.append(t),this.typing&&t.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())}buildMessage(t){const e=el("div",`${i}__turn`);e.dataset.id=t.id||"";const s=el("db-chat-message");return s.dataset.id=t.id||"",s.setAttribute("role",t.role||"assistant"),t.name&&s.setAttribute("name",t.name),t.time&&s.setAttribute("timestamp",t.time),t.avatarSrc&&s.setAttribute("avatar-src",t.avatarSrc),t.avatarInitials&&s.setAttribute("avatar-initials",t.avatarInitials),t.actions&&s.setAttribute("actions",t.actions),t.status&&s.setAttribute("status",t.status),t.variant&&s.setAttribute("variant",t.variant),null!=t.html?s.innerHTML=t.html:s.textContent=t.text||"",s.addEventListener("db-action",t=>this.relay(t,"db-message-action")),e.append(s),t.artifact&&(this.ensureArtifactId(t.artifact),e.append(this.buildArtifactCard(t.artifact))),e}ensureArtifactId(t){return t.id||(t.id=`art-${this.artifactSeq+=1}`),t.id}buildArtifactCard(s){const a=this.ensureArtifactId(s),r=el("button",`${i}__artifact-card`);r.type="button",r.dataset.artifactId=a,r.setAttribute("aria-pressed","false"),r.setAttribute("aria-label",`${s.title} 아티팩트 열기`);const n=el("span",`${i}__artifact-card-icon`),c=s.icon&&e(s.icon)?s.icon:"code";n.append(t(c,18));const l=el("div",`${i}__artifact-card-meta`);l.append(el("div",`${i}__artifact-card-title`,s.title)),s.subtitle&&l.append(el("div",`${i}__artifact-card-subtitle`,s.subtitle));const o=el("span",`${i}__artifact-card-chevron`);return o.append(t("chevron-right",16)),r.append(n,l,o),r.addEventListener("click",()=>this.toggleArtifactFromCard(s)),r}syncArtifactCardStates(){this.querySelectorAll(`.${i}__artifact-card`).forEach(t=>{const e=t,s=this.artifactOpen&&e.dataset.artifactId===this.activeArtifactId;e.classList.toggle(`${i}__artifact-card--active`,s),e.setAttribute("aria-pressed",String(s))})}toggleArtifactFromCard(t){const e=this.ensureArtifactId(t);this.artifactOpen&&this.activeArtifactId===e?this.closeArtifact():this.openArtifact({id:e,title:t.title,subtitle:t.subtitle,html:t.html})}buildTyping(){const t=el("db-chat-typing",`${i}__typing`),e=this.getAttribute("title")||"AI";return t.setAttribute("name",this.getAttribute("agent-name")||e),t.setAttribute("label","생각 중…"),t.setAttribute("avatar-initials","AI"),t}renderDock(){this.dockEl.replaceChildren(),this.dockEl.append(this.composer);const t=this.getAttribute("disclaimer");t&&this.dockEl.append(el("p",`${i}__disclaimer`,t))}relay(t,e){t.stopPropagation(),this.dispatchEvent(new CustomEvent(e,{detail:t.detail,bubbles:!0,composed:!0}))}scrollToEnd(){this.scrollEl.scrollTop=this.scrollEl.scrollHeight}addMessage(t){const e={id:`m${s+=1}`,...t},i=0===this._messages.length;if(this._messages.push(e),i||!this.threadEl)this.renderContent();else{const t=this.threadEl.querySelector("db-chat-typing"),i=this.buildMessage(e);t?this.threadEl.insertBefore(i,t):this.threadEl.append(i),requestAnimationFrame(()=>this.scrollToEnd())}return e.id}updateMessage(t,e){const s=this._messages.find(e=>e.id===t);if(!s)return;Object.assign(s,e);const a=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`);if(!a)return;const r=a.querySelector(".designbase-wc-chat-message__content");if(!r||null==e.html&&null==e.text||(null!=e.html?r.innerHTML=e.html:r.textContent=e.text||""),e.status&&a.setAttribute("status",e.status),void 0!==e.artifact){const t=a.closest(`.${i}__turn`)||a.parentElement;t?.querySelector(`.${i}__artifact-card`)?.remove(),e.artifact&&t&&(this.ensureArtifactId(e.artifact),t.append(this.buildArtifactCard(e.artifact)),this.syncArtifactCardStates())}requestAnimationFrame(()=>this.scrollToEnd())}appendToMessage(t,e){const i=this._messages.find(e=>e.id===t);if(!i)return;i.text=(i.text||"")+e;const s=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`),a=s?.querySelector(".designbase-wc-chat-message__content");a&&(a.textContent=i.text),requestAnimationFrame(()=>this.scrollToEnd())}setMessages(t){this.messages=t}clear(){this._messages=[],this.typing=!1,this.closeArtifact(),this.built&&this.renderContent()}setTyping(t){if(this.typing=Boolean(t),!this.built||!this.threadEl)return;const e=this.threadEl.querySelector("db-chat-typing");this.typing&&!e?(this.threadEl.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())):!this.typing&&e&&e.remove()}setStreaming(t){this.composer?.setStreaming(Boolean(t))}focusInput(){this.composer?.focusInput()}getComposer(){return this.composer}get artifactOpen(){return this.hasAttribute("artifact-open")}set artifactOpen(t){this.toggleAttribute("artifact-open",t)}openArtifact(t={}){null!=t.title&&(this.artifactTitleEl.textContent=t.title),null!=t.subtitle&&(this.artifactSubtitleEl.textContent=t.subtitle,this.artifactSubtitleEl.hidden=!t.subtitle),null!=t.html&&(this.artifactBodyEl.innerHTML=t.html),null!=t.id&&(this.activeArtifactId=t.id);const e=this.artifactOpen;this.artifactOpen=!0,e&&this.syncArtifactCardStates()}closeArtifact(){this.activeArtifactId=null;const t=this.artifactOpen;this.artifactOpen=!1,t||this.syncArtifactCardStates()}toggleArtifact(){this.artifactOpen?this.closeArtifact():this.artifactOpen=!0}getArtifactBody(){return this.artifactBodyEl}setArtifactContent(t){this.artifactBodyEl.replaceChildren(t)}}customElements.get("db-ai-chat")||customElements.define("db-ai-chat",DbAiChat);export{DbAiChat};

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

@@ -1,149 +1 @@
-import './db-button.js';
-import { createDbIcon } from './db-icons.js';
-
-const CLASS = 'designbase-wc-alert';
-class DbAlert extends HTMLElement {
-    static get observedAttributes() {
-        return [
-            'title',
-            'message',
-            'variant',
-            'size',
-            'show-icon',
-            'closable',
-            'action-label',
-            'action-variant',
-            'action-buttons',
-        ];
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-    getIconName(variant) {
-        if (variant === 'success')
-            return 'circle-checked';
-        if (variant === 'warning')
-            return 'warning-filled';
-        if (variant === 'danger')
-            return 'error-filled';
-        return 'info-filled';
-    }
-    parseActionButtons() {
-        const raw = this.getAttribute('action-buttons');
-        if (!raw)
-            return [];
-        try {
-            const parsed = JSON.parse(raw);
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    render() {
-        const variant = this.getAttribute('variant') || 'default';
-        const size = this.getAttribute('size') || 'm';
-        const showIcon = this.getAttribute('show-icon') !== 'false';
-        const closable = this.getAttribute('closable') !== 'false';
-        const title = this.getAttribute('title')?.trim() || '';
-        const messageAttr = this.getAttribute('message')?.trim() || '';
-        const actionLabel = this.getAttribute('action-label');
-        const actionVariant = this.getAttribute('action-variant') || 'tertiary';
-        const actionButtons = this.parseActionButtons();
-        const hasMessage = Boolean(messageAttr);
-        const hasTitle = Boolean(title);
-        const isSingleLine = (hasTitle && !hasMessage) || (!hasTitle && hasMessage);
-        const actions = actionButtons.length > 0
-            ? actionButtons
-            : actionLabel
-                ? [{ label: actionLabel, variant: actionVariant }]
-                : [];
-        this.className = [
-            CLASS,
-            `${CLASS}--${variant}`,
-            `${CLASS}--${size}`,
-            showIcon && `${CLASS}--with-icon`,
-            closable && `${CLASS}--closable`,
-            isSingleLine && `${CLASS}--text-single`,
-            actions.length > 0 && `${CLASS}--has-actions`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.setAttribute('role', 'alert');
-        this.setAttribute('aria-live', 'polite');
-        this.querySelector(`.${CLASS}__content`)?.remove();
-        this.querySelector(`.${CLASS}__actions`)?.remove();
-        Array.from(this.childNodes).forEach((node) => {
-            if (node.nodeType === Node.TEXT_NODE) {
-                node.remove();
-            }
-        });
-        const content = document.createElement('div');
-        content.className = `${CLASS}__content`;
-        if (showIcon) {
-            const icon = document.createElement('div');
-            icon.className = `${CLASS}__icon`;
-            icon.append(createDbIcon(this.getIconName(variant), size === 's' ? 16 : size === 'l' ? 24 : 20));
-            content.append(icon);
-        }
-        const body = document.createElement('div');
-        body.className = `${CLASS}__body`;
-        if (hasTitle) {
-            const heading = document.createElement('div');
-            heading.className = `${CLASS}__title`;
-            heading.textContent = title;
-            body.append(heading);
-        }
-        if (hasMessage) {
-            const text = document.createElement('div');
-            text.className = `${CLASS}__message`;
-            text.textContent = messageAttr;
-            body.append(text);
-        }
-        content.append(body);
-        if (actions.length > 0) {
-            const actionsEl = document.createElement('div');
-            actionsEl.className = `${CLASS}__actions`;
-            const buttonsWrap = document.createElement('div');
-            buttonsWrap.className = `${CLASS}__action-buttons`;
-            actions.forEach((action, index) => {
-                const button = document.createElement('db-button');
-                button.setAttribute('variant', action.variant || 'tertiary');
-                button.setAttribute('size', action.size || size);
-                button.textContent = action.label;
-                if (action.disabled)
-                    button.setAttribute('disabled', '');
-                button.addEventListener('db-click', () => {
-                    this.dispatchEvent(new CustomEvent('db-action', {
-                        bubbles: true,
-                        composed: true,
-                        detail: { index, label: action.label },
-                    }));
-                });
-                buttonsWrap.append(button);
-            });
-            actionsEl.append(buttonsWrap);
-            content.append(actionsEl);
-        }
-        if (closable) {
-            const close = document.createElement('button');
-            close.type = 'button';
-            close.className = `${CLASS}__close`;
-            close.setAttribute('aria-label', '알림 닫기');
-            close.append(createDbIcon('close', 20));
-            close.addEventListener('click', () => {
-                this.hidden = true;
-                this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
-            });
-            content.append(close);
-        }
-        this.replaceChildren(content);
-    }
-}
-if (!customElements.get('db-alert'))
-    customElements.define('db-alert', DbAlert);
-
-export { DbAlert };
+import"./db-button.js";import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-alert";class DbAlert extends HTMLElement{static get observedAttributes(){return["title","message","variant","size","show-icon","closable","action-label","action-variant","action-buttons"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}getIconName(t){return"success"===t?"circle-checked":"warning"===t?"warning-filled":"danger"===t?"error-filled":"info-filled"}parseActionButtons(){const t=this.getAttribute("action-buttons");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}render(){const n=this.getAttribute("variant")||"default",s=this.getAttribute("size")||"m",a="false"!==this.getAttribute("show-icon"),i="false"!==this.getAttribute("closable"),r=this.getAttribute("title")?.trim()||"",o=this.getAttribute("message")?.trim()||"",c=this.getAttribute("action-label"),l=this.getAttribute("action-variant")||"tertiary",d=this.parseActionButtons(),b=Boolean(o),m=Boolean(r),u=m&&!b||!m&&b,h=d.length>0?d:c?[{label:c,variant:l}]:[];this.className=[e,`${e}--${n}`,`${e}--${s}`,a&&`${e}--with-icon`,i&&`${e}--closable`,u&&`${e}--text-single`,h.length>0&&`${e}--has-actions`].filter(Boolean).join(" "),this.setAttribute("role","alert"),this.setAttribute("aria-live","polite"),this.querySelector(`.${e}__content`)?.remove(),this.querySelector(`.${e}__actions`)?.remove(),Array.from(this.childNodes).forEach(t=>{t.nodeType===Node.TEXT_NODE&&t.remove()});const p=document.createElement("div");if(p.className=`${e}__content`,a){const a=document.createElement("div");a.className=`${e}__icon`,a.append(t(this.getIconName(n),"s"===s?16:"l"===s?24:20)),p.append(a)}const g=document.createElement("div");if(g.className=`${e}__body`,m){const t=document.createElement("div");t.className=`${e}__title`,t.textContent=r,g.append(t)}if(b){const t=document.createElement("div");t.className=`${e}__message`,t.textContent=o,g.append(t)}if(p.append(g),h.length>0){const t=document.createElement("div");t.className=`${e}__actions`;const n=document.createElement("div");n.className=`${e}__action-buttons`,h.forEach((t,e)=>{const a=document.createElement("db-button");a.setAttribute("variant",t.variant||"tertiary"),a.setAttribute("size",t.size||s),a.textContent=t.label,t.disabled&&a.setAttribute("disabled",""),a.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-action",{bubbles:!0,composed:!0,detail:{index:e,label:t.label}}))}),n.append(a)}),t.append(n),p.append(t)}if(i){const n=document.createElement("button");n.type="button",n.className=`${e}__close`,n.setAttribute("aria-label","알림 닫기"),n.append(t("close",20)),n.addEventListener("click",()=>{this.hidden=!0,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}),p.append(n)}this.replaceChildren(p)}}customElements.get("db-alert")||customElements.define("db-alert",DbAlert);export{DbAlert};