@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -0,0 +1,146 @@
+import './db-chat-orb.js';
+import './db-badge.js';
+import './db-chat-welcome.js';
+import './db-chat-composer.js';
+import { DbChatSuggestion } from './db-chat-suggestions.js';
+import './db-chat-message.js';
+import './db-chat-typing.js';
+import './db-avatar.js';
+
+declare const VIEWS: readonly ["home", "messages", "conversation", "help"];
+type ChatView = (typeof VIEWS)[number];
+declare const POSITIONS: readonly ["bottom-right", "bottom-left"];
+type ChatPosition = (typeof POSITIONS)[number];
+interface DbChatWidgetMessage {
+    id?: string;
+    /** `assistant`(상담원/봇) 또는 `user` */
+    role?: 'assistant' | 'user';
+    text: string;
+    name?: string;
+    time?: string;
+    avatarSrc?: string;
+    avatarInitials?: string;
+    /** 말풍선 액션 (예: 'copy,like,dislike') — db-chat-message 로 전달 */
+    actions?: string;
+}
+interface DbChatWidgetConversation {
+    id?: string;
+    name: string;
+    avatarSrc?: string;
+    avatarInitials?: string;
+    preview?: string;
+    time?: string;
+    unread?: number;
+    online?: boolean;
+}
+/**
+ * FAB 로 열고 닫는 우측 하단 채팅 상담 위젯(껍데기).
+ *
+ * 홈·메시지·대화·도움말 4개 화면을 하단 탭으로 전환하며, 본문은 AI 채팅 프리미티브
+ * (`db-chat-welcome` · `db-chat-message` · `db-chat-typing` · `db-chat-composer`
+ * · `db-chat-suggestions` · `db-chat-orb`)를 조합해 구성합니다. 실제 백엔드 연동
+ * 없이 UI 골격만 제공하고, 상호작용은 이벤트로 위임합니다.
+ *
+ * @fires db-open        - 패널 열림
+ * @fires db-close       - 패널 닫힘
+ * @fires db-toggle      - FAB 토글 (detail: { open })
+ * @fires db-view-change - 화면 전환 (detail: { view })
+ * @fires db-send        - 메시지 전송 (detail: { text })
+ * @fires db-menu-select - 홈 메뉴 선택 (detail: { id, value })
+ * @fires db-quick-reply - 빠른 답변 선택 (detail: { id, value })
+ * @fires db-article-select      - 도움말 문서 선택 (detail: { id, title })
+ * @fires db-conversation-select - 대화 목록 선택 (detail: { id })
+ * @fires db-message-action      - 말풍선 액션 (detail: { action, text })
+ *
+ * @example
+ *   const chat = document.createElement('db-chat-widget');
+ *   chat.setAttribute('agent-name', '디지털 상담원');
+ *   chat.setAttribute('unread', '2');
+ *   document.body.appendChild(chat);
+ *   chat.addEventListener('db-send', (e) => {
+ *     chat.setTyping(true);
+ *     setTimeout(() => {
+ *       chat.setTyping(false);
+ *       chat.addMessage({ role: 'assistant', text: '확인했어요!' });
+ *     }, 900);
+ *   });
+ */
+declare class DbChatWidget extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private typing;
+    private _messages;
+    private _conversations;
+    private _menuItems;
+    private _quickReplies;
+    private _articles;
+    private launcher;
+    private launcherBadge;
+    private panel;
+    private headerEl;
+    private bodyEl;
+    private footerEl;
+    private navEl;
+    private composer;
+    private threadEl;
+    get open(): boolean;
+    set open(v: boolean);
+    get view(): ChatView;
+    set view(v: ChatView);
+    get position(): ChatPosition;
+    set position(v: ChatPosition);
+    get unread(): number;
+    set unread(v: number);
+    set messages(v: DbChatWidgetMessage[]);
+    get messages(): DbChatWidgetMessage[];
+    set conversations(v: DbChatWidgetConversation[]);
+    get conversations(): DbChatWidgetConversation[];
+    set menuItems(v: DbChatSuggestion[]);
+    get menuItems(): DbChatSuggestion[];
+    set quickReplies(v: DbChatSuggestion[]);
+    get quickReplies(): DbChatSuggestion[];
+    set articles(v: DbChatSuggestion[]);
+    get articles(): DbChatSuggestion[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    private hydrateFromAttributes;
+    private build;
+    private sync;
+    private syncOpenState;
+    private renderBadge;
+    private renderHeader;
+    private iconButton;
+    private renderBody;
+    private renderHome;
+    private renderMessages;
+    private renderConversation;
+    private renderHelp;
+    private buildMessage;
+    private buildTyping;
+    private buildEmpty;
+    private renderFooter;
+    private renderNav;
+    private scrollThreadToEnd;
+    private nowLabel;
+    private dispatch;
+    openWidget(): void;
+    close(): void;
+    toggle(): void;
+    setView(view: ChatView): void;
+    /** 스레드에 메시지를 추가하고 대화 화면으로 전환/렌더 */
+    addMessage(msg: DbChatWidgetMessage): void;
+    /** 챗봇 입력중(...) 표시 토글 */
+    setTyping(on: boolean): void;
+    /** 전송 중(정지 버튼) 상태 — 컴포저에 위임 */
+    setStreaming(on: boolean): void;
+    /** 스레드 전체 교체 */
+    setMessages(messages: DbChatWidgetMessage[]): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-chat-widget': DbChatWidget;
+    }
+}
+
+export { DbChatWidget };
+export type { DbChatWidgetConversation, DbChatWidgetMessage };

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

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";import"./db-chat-orb.js";import"./db-badge.js";import"./db-chat-welcome.js";import"./db-chat-composer.js";import"./db-chat-suggestions.js";import"./db-chat-message.js";import"./db-chat-typing.js";import"./db-avatar.js";const e=["home","messages","conversation","help"],i=["bottom-right","bottom-left"],s=[{id:"products",title:"제품·정책 알아보기",description:"AI가 정확하게 안내해 드려요",icon:"sparkle"},{id:"services",title:"상담원과 대화하기",description:"지금 바로 대화를 시작하세요",icon:"mail"},{id:"status",title:"주문·배송 조회",description:"진행 상황을 확인해 보세요",icon:"package"}],a=[{id:"products",title:"제품·정책 알아보기"},{id:"services",title:"서비스 상담하기"}],r=[{id:"m1",role:"assistant",name:"상담원",text:"안녕하세요. 무엇을 도와드릴까요? 제품과 정책을 24시간 정확하게 안내해 드릴게요.",time:"오후 12:31"},{id:"m2",role:"assistant",name:"상담원",text:"아래에서 원하시는 도움을 선택하시거나, 자유롭게 메시지를 입력해 주세요.",time:"오후 12:31",actions:"like,dislike"}],n=[{id:"c1",name:"디지털 상담원",avatarInitials:"상",preview:"무엇을 도와드릴까요? 24시간 대기중이에요.",time:"방금",unread:1,online:!0},{id:"c2",name:"결제·환불 지원",avatarInitials:"결",preview:"환불 요청이 정상 접수되었습니다.",time:"어제"},{id:"c3",name:"온보딩 도우미",avatarInitials:"온",preview:"설치가 완료되면 알려드릴게요.",time:"3일 전"}],o=[{id:"a1",title:"시작하기 — 5분 만에 설정 완료",description:"계정 생성부터 첫 배포까지",icon:"sparkle"},{id:"a2",title:"요금제와 결제 안내",description:"플랜 비교 · 청구 주기",icon:"star"},{id:"a3",title:"팀원 초대와 권한 관리",description:"역할별 접근 권한 설정",icon:"user"},{id:"a4",title:"데이터 내보내기·백업",description:"안전하게 보관하는 방법",icon:"download"}],h={chat:'<path d="M4 5.5A1.5 1.5 0 0 1 5.5 4h13A1.5 1.5 0 0 1 20 5.5v9a1.5 1.5 0 0 1-1.5 1.5H9l-4 3.5V16H5.5A1.5 1.5 0 0 1 4 14.5z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>',home:'<path d="M4 10.5 12 4l8 6.5M6 9.5V19a1 1 0 0 0 1 1h3.5v-4.5a1.5 1.5 0 0 1 3 0V20H17a1 1 0 0 0 1-1V9.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>',help:'<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M9.6 9.4a2.5 2.5 0 0 1 4.9.6c0 1.7-2.5 2-2.5 3.6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="12" cy="16.6" r="0.95" fill="currentColor"/>',"close-x":'<path d="m6.5 6.5 11 11m0-11-11 11" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>'};function widgetIcon(t,e=20){const i=document.createElement("template");return i.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${e}" height="${e}" fill="none" aria-hidden="true" focusable="false">${h[t]}</svg>`,i.content.firstElementChild}function el(t,e,i){const s=document.createElement(t);return e&&(s.className=e),null!=i&&(s.textContent=i),s}function parseJson(t,e){if(!t)return e;try{const i=JSON.parse(t);return Array.isArray(i)?i:e}catch{return e}}const l="designbase-wc-chat";class DbChatWidget extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.typing=!1,this._messages=r,this._conversations=n,this._menuItems=s,this._quickReplies=a,this._articles=o,this.composer=null,this.threadEl=null}static get observedAttributes(){return["open","view","position","agent-name","agent-avatar","agent-status","greeting","title","subtitle","placeholder","unread","accent","orb-variant","launcher-label","search-enabled"]}get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",Boolean(t))}get view(){const t=this.getAttribute("view");return e.includes(t)?t:"home"}set view(t){this.setAttribute("view",t)}get position(){const t=this.getAttribute("position");return i.includes(t)?t:"bottom-right"}set position(t){this.setAttribute("position",t)}get unread(){return Number(this.getAttribute("unread")||0)}set unread(t){this.setAttribute("unread",String(t))}set messages(t){this._messages=Array.isArray(t)?t:[],this.built&&"conversation"===this.view&&this.renderBody()}get messages(){return this._messages}set conversations(t){this._conversations=Array.isArray(t)?t:[],this.built&&this.renderBody()}get conversations(){return this._conversations}set menuItems(t){this._menuItems=Array.isArray(t)?t:[],this.built&&"home"===this.view&&this.renderBody()}get menuItems(){return this._menuItems}set quickReplies(t){this._quickReplies=Array.isArray(t)?t:[],this.built&&"conversation"===this.view&&this.renderBody()}get quickReplies(){return this._quickReplies}set articles(t){this._articles=Array.isArray(t)?t:[],this.built&&"help"===this.view&&this.renderBody()}get articles(){return this._articles}connectedCallback(){this.hydrateFromAttributes(),this.build(),this.sync()}attributeChangedCallback(t,e,i){if(this.built&&e!==i){if("open"!==t)return"view"===t?(this.sync(),void this.dispatch("db-view-change",{view:this.view})):void this.sync();this.syncOpenState()}}hydrateFromAttributes(){this._messages=parseJson(this.getAttribute("messages"),this._messages),this._conversations=parseJson(this.getAttribute("conversations"),this._conversations),this._menuItems=parseJson(this.getAttribute("menu-items"),this._menuItems),this._quickReplies=parseJson(this.getAttribute("quick-replies"),this._quickReplies),this._articles=parseJson(this.getAttribute("articles"),this._articles)}build(){if(this.built)return;this.built=!0,this.classList.add(l),this.replaceChildren(),this.launcher=el("button",`${l}__launcher`),this.launcher.type="button",this.launcher.setAttribute("aria-haspopup","dialog");const t=el("span",`${l}__launcher-icon ${l}__launcher-icon--open`),e=el("db-chat-orb");e.setAttribute("size","s"),e.setAttribute("variant",this.getAttribute("orb-variant")||"violet"),e.setAttribute("state","idle"),t.append(e);const i=el("span",`${l}__launcher-icon ${l}__launcher-icon--close`);i.append(widgetIcon("close-x",24)),this.launcherBadge=document.createElement("db-badge"),this.launcherBadge.className=`${l}__launcher-badge`,this.launcherBadge.setAttribute("badge-style","number"),this.launcherBadge.setAttribute("variant","danger"),this.launcherBadge.setAttribute("size","s"),this.launcherBadge.setAttribute("max-count","99"),this.launcher.append(t,i,this.launcherBadge),this.launcher.addEventListener("click",()=>this.toggle()),this.panel=el("div",`${l}__panel`),this.panel.setAttribute("role","dialog"),this.panel.setAttribute("aria-modal","false"),this.headerEl=el("div",`${l}__header`),this.bodyEl=el("div",`${l}__body`),this.footerEl=el("div",`${l}__footer`),this.navEl=el("div",`${l}__nav`),this.panel.append(this.headerEl,this.bodyEl,this.footerEl,this.navEl),this.append(this.panel,this.launcher)}sync(){i.forEach(t=>this.classList.toggle(`${l}--${t}`,t===this.position)),e.forEach(t=>this.classList.toggle(`${l}--view-${t}`,t===this.view));const t=this.getAttribute("accent");t?this.style.setProperty("--dbchat-accent",t):this.style.removeProperty("--dbchat-accent"),this.renderBadge(),this.renderHeader(),this.renderBody(),this.renderFooter(),this.renderNav(),this.syncOpenState()}syncOpenState(){const t=this.open;this.classList.toggle(`${l}--open`,t),this.launcher.setAttribute("aria-expanded",String(t)),this.panel.setAttribute("aria-hidden",String(!t)),t?this.panel.removeAttribute("inert"):this.panel.setAttribute("inert",""),this.launcher.setAttribute("aria-label",this.getAttribute("launcher-label")||(t?"상담창 닫기":"상담 시작하기")),t&&"conversation"===this.view&&requestAnimationFrame(()=>this.composer?.focusInput())}renderBadge(){const t=this.unread;t>0?this.launcherBadge.setAttribute("count",String(t)):this.launcherBadge.removeAttribute("count"),this.launcherBadge.hidden=t<=0}renderHeader(){this.headerEl.replaceChildren();const e=this.view,i=this.getAttribute("agent-name")||"디지털 상담원",s=el("div",`${l}__header-bar`);if("conversation"===e){const e=this.iconButton(t("chevron-left",20),"뒤로",()=>this.setView("messages")),a=el("div",`${l}__header-identity`),r=el("db-chat-orb");r.className=`${l}__header-orb`,r.setAttribute("size","xs"),r.setAttribute("variant",this.getAttribute("orb-variant")||"violet");const n=el("div",`${l}__header-meta`);n.append(el("span",`${l}__header-name`,i),el("span",`${l}__header-status`,this.getAttribute("agent-status")||"보통 몇 분 내 응답")),a.append(r,n),s.append(e,a,this.iconButton(widgetIcon("close-x",20),"닫기",()=>this.close()))}else{const t="home"===e?"홈":"messages"===e?"메시지":"도움말";s.append(el("span",`${l}__header-title`,t),this.iconButton(widgetIcon("close-x",20),"닫기",()=>this.close()))}this.headerEl.append(s)}iconButton(t,e,i){const s=el("button",`${l}__icon-btn`);return s.type="button",s.setAttribute("aria-label",e),s.append(t),s.addEventListener("click",i),s}renderBody(){if(this.built)switch(this.threadEl=null,this.bodyEl.replaceChildren(),this.bodyEl.classList.toggle(`${l}__body--thread`,"conversation"===this.view),this.view){case"home":this.renderHome();break;case"messages":this.renderMessages();break;case"conversation":this.renderConversation();break;case"help":this.renderHelp()}}renderHome(){const e=el("db-chat-welcome",`${l}__welcome`);e.setAttribute("greeting",this.getAttribute("greeting")||"안녕하세요"),e.setAttribute("title",this.getAttribute("title")||"무엇을 도와드릴까요?"),e.setAttribute("highlight",this.getAttribute("highlight")||this.getAttribute("title")||"도와드릴까요"),e.setAttribute("subtitle",this.getAttribute("subtitle")||"제품·정책을 24시간 정확하게 안내해 드릴게요."),e.setAttribute("orb-variant",this.getAttribute("orb-variant")||"violet"),e.setAttribute("align","left"),e.setAttribute("orb-size","m"),this.bodyEl.append(e);const i=this._conversations[0];if(i){const e=el("button",`${l}__recent`);e.type="button";const s=el("db-avatar",`${l}__recent-avatar`);s.setAttribute("size","s"),s.setAttribute("variant","primary"),i.avatarSrc?s.setAttribute("src",i.avatarSrc):s.setAttribute("initials",i.avatarInitials||i.name.charAt(0)||"상"),i.online&&s.setAttribute("status","online"),i.unread&&(s.setAttribute("badge",String(i.unread)),s.setAttribute("badge-style","number"),s.setAttribute("badge-variant","primary"),s.setAttribute("badge-max-count","99"));const a=el("div",`${l}__recent-body`);a.append(el("span",`${l}__recent-title`,"최근 대화 이어가기"),el("span",`${l}__recent-preview`,i.preview||"")),e.append(s,a,t("chevron-right",18)),e.addEventListener("click",()=>{this.dispatch("db-conversation-select",{id:i.id}),this.setView("conversation")}),this.bodyEl.append(e)}if(this._menuItems.length){const t=el("db-chat-suggestions",`${l}__menu`);t.setAttribute("layout","card"),t.setAttribute("columns","1"),t.items=this._menuItems,t.addEventListener("db-select",t=>{t.stopPropagation();const e=t.detail;this.dispatch("db-menu-select",e),this.setView("conversation")}),this.bodyEl.append(t)}if("false"!==this.getAttribute("search-enabled")){const e=el("button",`${l}__search-entry`);e.type="button",e.append(t("search",18),el("span",void 0,"도움말 검색")),e.addEventListener("click",()=>this.setView("help")),this.bodyEl.append(e)}}renderMessages(){if(!this._conversations.length)return void this.bodyEl.append(this.buildEmpty("진행 중인 대화가 없어요","새 대화를 시작해 보세요."));const t=el("div",`${l}__conv-list`);this._conversations.forEach(e=>{const i=el("button",`${l}__conv`);i.type="button";const s=el("db-avatar",`${l}__conv-avatar`);s.setAttribute("size","m"),s.setAttribute("variant","primary"),e.avatarSrc?s.setAttribute("src",e.avatarSrc):s.setAttribute("initials",e.avatarInitials||e.name.charAt(0)||"?"),e.online&&s.setAttribute("status","online");const a=el("div",`${l}__conv-body`),r=el("div",`${l}__conv-top`);if(r.append(el("span",`${l}__conv-name`,e.name)),e.time&&r.append(el("span",`${l}__conv-time`,e.time)),a.append(r,el("span",`${l}__conv-preview`,e.preview||"")),i.append(s,a),e.unread){const t=el("db-badge",`${l}__conv-unread`);t.setAttribute("badge-style","number"),t.setAttribute("variant","primary"),t.setAttribute("size","s"),t.setAttribute("max-count","99"),t.setAttribute("count",String(e.unread)),i.append(t)}i.addEventListener("click",()=>{this.dispatch("db-conversation-select",{id:e.id}),this.setView("conversation")}),t.append(i)}),this.bodyEl.append(t)}renderConversation(){const t=el("div",`${l}__thread`);if(this._messages.forEach(e=>t.append(this.buildMessage(e))),this.threadEl=t,this.bodyEl.append(t),this.typing&&t.append(this.buildTyping()),this._quickReplies.length){const t=el("db-chat-suggestions");t.setAttribute("data-dbchat","quick"),t.setAttribute("layout","chip"),t.items=this._quickReplies,t.addEventListener("db-select",t=>{t.stopPropagation();const e=t.detail;this.dispatch("db-quick-reply",e),this.addMessage({role:"user",text:e.title,time:this.nowLabel()})}),this.bodyEl.append(t)}requestAnimationFrame(()=>this.scrollThreadToEnd())}renderHelp(){const e=el("div",`${l}__help-search`),i=el("span",`${l}__help-search-icon`);i.append(t("search",18));const s=el("input",`${l}__help-input`);if(s.type="search",s.placeholder="도움말 검색…",e.append(i,s),this.bodyEl.append(e),!this._articles.length)return void this.bodyEl.append(this.buildEmpty("문서가 없어요","검색어를 바꿔보세요."));const a=el("db-chat-suggestions",`${l}__articles`);a.setAttribute("layout","card"),a.setAttribute("columns","1"),a.items=this._articles,a.addEventListener("db-select",t=>{t.stopPropagation();const e=t.detail;this.dispatch("db-article-select",{id:e.id,title:e.title})}),this.bodyEl.append(a)}buildMessage(t){const e="user"===t.role?"user":"assistant",i=el("db-chat-message");return i.setAttribute("role",e),t.name&&i.setAttribute("name",t.name),t.time&&i.setAttribute("timestamp",t.time),t.avatarSrc&&i.setAttribute("avatar-src",t.avatarSrc),t.avatarInitials&&i.setAttribute("avatar-initials",t.avatarInitials),t.actions&&i.setAttribute("actions",t.actions),i.textContent=t.text,i.addEventListener("db-action",t=>{t.stopPropagation(),this.dispatch("db-message-action",t.detail)}),i}buildTyping(){const t=el("db-chat-typing",`${l}__typing`);return t.setAttribute("name",this.getAttribute("agent-name")||"상담원"),t.setAttribute("label","입력 중"),t}buildEmpty(t,e){const i=el("div",`${l}__empty`),s=el("db-chat-orb",`${l}__empty-orb`);return s.setAttribute("size","m"),s.setAttribute("variant",this.getAttribute("orb-variant")||"violet"),i.append(s,el("p",`${l}__empty-title`,t),el("p",`${l}__empty-desc`,e)),i}renderFooter(){const t="conversation"===this.view;if(this.footerEl.hidden=!t,!t)return this.composer=null,void this.footerEl.replaceChildren();if(!this.composer){this.footerEl.replaceChildren();const t=el("db-chat-composer",`${l}__composer`);t.setAttribute("placeholder",this.getAttribute("placeholder")||"메시지를 입력하세요…"),t.setAttribute("attach",""),t.setAttribute("voice",""),t.addEventListener("db-send",e=>{e.stopPropagation();const i=e.detail?.value?.trim();i&&(t.clear(),this.dispatch("db-send",{text:i}),this.addMessage({role:"user",text:i,time:this.nowLabel()}))}),t.addEventListener("db-stop",t=>{t.stopPropagation(),this.dispatch("db-stop")}),t.addEventListener("db-attach",t=>{t.stopPropagation(),this.dispatch("db-attach")}),t.addEventListener("db-voice",t=>{t.stopPropagation(),this.dispatch("db-voice")}),this.composer=t,this.footerEl.append(t)}}renderNav(){this.navEl.replaceChildren();const t="conversation"!==this.view;if(this.navEl.hidden=!t,!t)return;[{view:"home",icon:"home",label:"홈"},{view:"messages",icon:"chat",label:"메시지"},{view:"help",icon:"help",label:"도움말"}].forEach(t=>{const e=el("button",`${l}__tab`);e.type="button";const i=this.view===t.view;if(e.classList.toggle(`${l}__tab--active`,i),e.setAttribute("aria-current",String(i)),e.append(widgetIcon(t.icon,22),el("span",`${l}__tab-label`,t.label)),"messages"===t.view&&this.unread>0){const t=el("db-badge",`${l}__tab-badge`);t.setAttribute("badge-style","dot"),t.setAttribute("variant","danger"),t.setAttribute("size","s"),e.append(t)}e.addEventListener("click",()=>this.setView(t.view)),this.navEl.append(e)})}scrollThreadToEnd(){this.bodyEl.scrollTop=this.bodyEl.scrollHeight}nowLabel(){const t=new Date,e=t.getHours();return`${e<12?"오전":"오후"} ${e%12==0?12:e%12}:${t.getMinutes().toString().padStart(2,"0")}`}dispatch(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}openWidget(){this.open||(this.open=!0,this.dispatch("db-open"),this.dispatch("db-toggle",{open:!0}))}close(){this.open&&(this.open=!1,this.dispatch("db-close"),this.dispatch("db-toggle",{open:!1}))}toggle(){this.open?this.close():this.openWidget()}setView(t){this.view!==t&&(this.view=t)}addMessage(t){if(this._messages=[...this._messages,{id:`m${Date.now()}`,...t}],"conversation"===this.view)if(this.built&&this.threadEl){const e=this.threadEl.querySelector("db-chat-typing");this.threadEl.insertBefore(this.buildMessage(t),e),requestAnimationFrame(()=>this.scrollThreadToEnd())}else this.built&&this.renderBody();else this.view="conversation"}setTyping(t){if(this.typing=Boolean(t),!this.built||"conversation"!==this.view||!this.threadEl)return;const e=this.threadEl.querySelector("db-chat-typing");this.typing&&!e?(this.threadEl.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollThreadToEnd())):!this.typing&&e&&e.remove()}setStreaming(t){this.composer?.setStreaming(Boolean(t))}setMessages(t){this.messages=t}}customElements.get("db-chat-widget")||customElements.define("db-chat-widget",DbChatWidget);export{DbChatWidget};

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

@@ -1,202 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const SIZES = ['s', 'm', 'l'];
-const CHECK_ICON_SIZE = 16;
-class DbCheckbox extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-        this.handleChange = () => {
-            if (!this.input)
-                return;
-            const checked = this.input.checked;
-            this.toggleAttribute('checked', checked);
-            if (this.indeterminate) {
-                this.removeAttribute('indeterminate');
-                this.input.indeterminate = false;
-            }
-            this.syncVisual();
-            this.syncClasses();
-            this.dispatchEvent(new CustomEvent('db-change', {
-                detail: { checked, selected: checked },
-                bubbles: true,
-                composed: true,
-            }));
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'checked',
-            'selected',
-            'default-checked',
-            'default-selected',
-            'indeterminate',
-            'size',
-            'disabled',
-            'readonly',
-            'required',
-            'name',
-            'value',
-            'has-label',
-        ];
-    }
-    get checked() {
-        return this.input?.checked ?? (this.hasAttribute('checked') || this.hasAttribute('selected'));
-    }
-    set checked(value) {
-        this.toggleAttribute('checked', value);
-        if (this.input) {
-            this.input.checked = value;
-            this.syncVisual();
-            this.syncClasses();
-        }
-    }
-    get indeterminate() {
-        return this.hasAttribute('indeterminate');
-    }
-    set indeterminate(value) {
-        this.toggleAttribute('indeterminate', value);
-        if (this.input) {
-            this.input.indeterminate = value;
-            this.syncVisual();
-            this.syncClasses();
-        }
-    }
-    get disabled() {
-        return this.hasAttribute('disabled');
-    }
-    set disabled(value) {
-        this.toggleAttribute('disabled', value);
-        if (this.input)
-            this.input.disabled = value;
-        this.syncClasses();
-    }
-    get readOnly() {
-        return this.hasAttribute('readonly');
-    }
-    set readOnly(value) {
-        this.toggleAttribute('readonly', value);
-        if (this.input)
-            this.input.readOnly = value;
-        this.syncClasses();
-    }
-    get required() {
-        return this.hasAttribute('required');
-    }
-    set required(value) {
-        this.toggleAttribute('required', value);
-        if (this.input)
-            this.input.required = value;
-    }
-    get size() {
-        return this.getAttribute('size') || 'm';
-    }
-    set size(value) {
-        this.setAttribute('size', value);
-    }
-    connectedCallback() {
-        this.style.display = 'contents';
-        if (!this.built) {
-            this.build();
-        }
-        this.syncState();
-    }
-    attributeChangedCallback(name) {
-        if (!this.built)
-            return;
-        if (name === 'checked' || name === 'selected') {
-            if (this.input) {
-                this.input.checked = this.hasAttribute('checked') || this.hasAttribute('selected');
-            }
-            this.syncVisual();
-            this.syncClasses();
-            return;
-        }
-        this.syncState();
-    }
-    get hasLabel() {
-        return !this.hasAttribute('has-label') || this.getAttribute('has-label') !== 'false';
-    }
-    build() {
-        this.root = document.createElement('label');
-        this.root.className = 'designbase-wc-checkbox';
-        this.input = document.createElement('input');
-        this.input.type = 'checkbox';
-        this.input.className = 'designbase-wc-checkbox__input';
-        this.visual = document.createElement('span');
-        this.visual.className = 'designbase-wc-checkbox__visual';
-        this.visual.setAttribute('aria-hidden', 'true');
-        this.labelEl = document.createElement('span');
-        this.labelEl.className = 'designbase-wc-checkbox__label';
-        while (this.firstChild) {
-            this.labelEl.appendChild(this.firstChild);
-        }
-        this.root.append(this.input, this.visual, this.labelEl);
-        this.appendChild(this.root);
-        this.input.addEventListener('change', this.handleChange);
-        this.built = true;
-    }
-    syncState() {
-        if (!this.root || !this.input || !this.visual)
-            return;
-        const checked = this.hasAttribute('checked')
-            || this.hasAttribute('selected')
-            || (!this.hasAttribute('checked')
-                && !this.hasAttribute('selected')
-                && (this.hasAttribute('default-checked') || this.hasAttribute('default-selected')));
-        const indeterminate = this.hasAttribute('indeterminate');
-        this.input.checked = checked;
-        this.input.indeterminate = indeterminate;
-        this.input.disabled = this.disabled;
-        this.input.readOnly = this.readOnly;
-        this.input.required = this.required;
-        this.input.name = this.getAttribute('name') || '';
-        this.input.value = this.getAttribute('value') || '';
-        if (this.hasLabel) {
-            this.labelEl?.removeAttribute('hidden');
-        }
-        else {
-            this.labelEl?.setAttribute('hidden', '');
-        }
-        this.syncVisual();
-        this.syncClasses();
-    }
-    syncVisual() {
-        if (!this.visual || !this.input)
-            return;
-        this.visual.replaceChildren();
-        if (this.input.indeterminate) {
-            const iconHost = document.createElement('span');
-            iconHost.className = 'designbase-wc-checkbox__indeterminate-icon';
-            iconHost.appendChild(createDbIcon('minus', CHECK_ICON_SIZE));
-            this.visual.appendChild(iconHost);
-            return;
-        }
-        if (this.input.checked) {
-            const iconHost = document.createElement('span');
-            iconHost.className = 'designbase-wc-checkbox__check-icon';
-            iconHost.appendChild(createDbIcon('done', CHECK_ICON_SIZE));
-            this.visual.appendChild(iconHost);
-        }
-    }
-    syncClasses() {
-        if (!this.root || !this.input)
-            return;
-        const size = SIZES.includes(this.size) ? this.size : 'm';
-        const hasLabelText = this.hasLabel && Boolean(this.labelEl?.textContent?.trim());
-        this.root.className = [
-            'designbase-wc-checkbox',
-            `designbase-wc-checkbox--${size}`,
-            this.input.checked && 'designbase-wc-checkbox--selected',
-            this.input.indeterminate && 'designbase-wc-checkbox--indeterminate',
-            this.disabled && 'designbase-wc-checkbox--disabled',
-            this.readOnly && 'designbase-wc-checkbox--readonly',
-            !hasLabelText && 'designbase-wc-checkbox--no-label',
-        ].filter(Boolean).join(' ');
-    }
-}
-if (!customElements.get('db-checkbox')) {
-    customElements.define('db-checkbox', DbCheckbox);
-}
-
-export { DbCheckbox };
+import{createDbIcon as t}from"./db-icons.js";const e=["s","m","l"];class DbCheckbox extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.handleChange=()=>{if(!this.input)return;const t=this.input.checked;this.toggleAttribute("checked",t),this.indeterminate&&(this.removeAttribute("indeterminate"),this.input.indeterminate=!1),this.syncVisual(),this.syncClasses(),this.dispatchEvent(new CustomEvent("db-change",{detail:{checked:t,selected:t},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["checked","selected","default-checked","default-selected","indeterminate","size","disabled","readonly","required","name","value","has-label"]}get checked(){return this.input?.checked??(this.hasAttribute("checked")||this.hasAttribute("selected"))}set checked(t){this.toggleAttribute("checked",t),this.input&&(this.input.checked=t,this.syncVisual(),this.syncClasses())}get indeterminate(){return this.hasAttribute("indeterminate")}set indeterminate(t){this.toggleAttribute("indeterminate",t),this.input&&(this.input.indeterminate=t,this.syncVisual(),this.syncClasses())}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t),this.input&&(this.input.disabled=t),this.syncClasses()}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t),this.input&&(this.input.readOnly=t),this.syncClasses()}get required(){return this.hasAttribute("required")}set required(t){this.toggleAttribute("required",t),this.input&&(this.input.required=t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}connectedCallback(){this.style.display="contents",this.built||this.build(),this.syncState()}attributeChangedCallback(t){if(this.built)return"checked"===t||"selected"===t?(this.input&&(this.input.checked=this.hasAttribute("checked")||this.hasAttribute("selected")),this.syncVisual(),void this.syncClasses()):void this.syncState()}get hasLabel(){return!this.hasAttribute("has-label")||"false"!==this.getAttribute("has-label")}build(){for(this.root=document.createElement("label"),this.root.className="designbase-wc-checkbox",this.input=document.createElement("input"),this.input.type="checkbox",this.input.className="designbase-wc-checkbox__input",this.visual=document.createElement("span"),this.visual.className="designbase-wc-checkbox__visual",this.visual.setAttribute("aria-hidden","true"),this.labelEl=document.createElement("span"),this.labelEl.className="designbase-wc-checkbox__label";this.firstChild;)this.labelEl.appendChild(this.firstChild);this.root.append(this.input,this.visual,this.labelEl),this.appendChild(this.root),this.input.addEventListener("change",this.handleChange),this.built=!0}syncState(){if(!this.root||!this.input||!this.visual)return;const t=this.hasAttribute("checked")||this.hasAttribute("selected")||!this.hasAttribute("checked")&&!this.hasAttribute("selected")&&(this.hasAttribute("default-checked")||this.hasAttribute("default-selected")),e=this.hasAttribute("indeterminate");this.input.checked=t,this.input.indeterminate=e,this.input.disabled=this.disabled,this.input.readOnly=this.readOnly,this.input.required=this.required,this.input.name=this.getAttribute("name")||"",this.input.value=this.getAttribute("value")||"",this.hasLabel?this.labelEl?.removeAttribute("hidden"):this.labelEl?.setAttribute("hidden",""),this.syncVisual(),this.syncClasses()}syncVisual(){if(this.visual&&this.input){if(this.visual.replaceChildren(),this.input.indeterminate){const e=document.createElement("span");return e.className="designbase-wc-checkbox__indeterminate-icon",e.appendChild(t("minus",16)),void this.visual.appendChild(e)}if(this.input.checked){const e=document.createElement("span");e.className="designbase-wc-checkbox__check-icon",e.appendChild(t("done",16)),this.visual.appendChild(e)}}}syncClasses(){if(!this.root||!this.input)return;const t=e.includes(this.size)?this.size:"m",i=this.hasLabel&&Boolean(this.labelEl?.textContent?.trim());this.root.className=["designbase-wc-checkbox",`designbase-wc-checkbox--${t}`,this.input.checked&&"designbase-wc-checkbox--selected",this.input.indeterminate&&"designbase-wc-checkbox--indeterminate",this.disabled&&"designbase-wc-checkbox--disabled",this.readOnly&&"designbase-wc-checkbox--readonly",!i&&"designbase-wc-checkbox--no-label"].filter(Boolean).join(" ")}}customElements.get("db-checkbox")||customElements.define("db-checkbox",DbCheckbox);export{DbCheckbox};

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

@@ -1,104 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const SIZES = ['s', 'm', 'l'];
-const VARIANTS = ['default', 'primary', 'success', 'warning', 'danger', 'info', 'neutral'];
-class DbChip extends HTMLElement {
-    static get observedAttributes() {
-        return ['label', 'size', 'variant', 'deletable', 'disabled', 'selected', 'full-width', 'clickable', 'start-icon', 'end-icon'];
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-    iconSize(size) {
-        if (size === 's')
-            return 12;
-        if (size === 'l')
-            return 20;
-        return 16;
-    }
-    render() {
-        const label = this.getAttribute('label') || this.textContent?.trim() || '';
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const disabled = this.hasAttribute('disabled');
-        const deletable = this.hasAttribute('deletable');
-        const selected = this.hasAttribute('selected');
-        const fullWidth = this.hasAttribute('full-width');
-        const clickable = this.hasAttribute('clickable');
-        const startIcon = this.getAttribute('start-icon');
-        const endIcon = this.getAttribute('end-icon');
-        const resolvedSize = SIZES.includes(size) ? size : 'm';
-        const resolvedVariant = VARIANTS.includes(variant) ? variant : 'default';
-        const iconPx = this.iconSize(resolvedSize);
-        this.className = [
-            'designbase-wc-chip',
-            `designbase-wc-chip--${resolvedSize}`,
-            `designbase-wc-chip--${resolvedVariant}`,
-            deletable && 'designbase-wc-chip--deletable',
-            disabled && 'designbase-wc-chip--disabled',
-            selected && 'designbase-wc-chip--selected',
-            clickable && 'designbase-wc-chip--clickable',
-            fullWidth && 'designbase-wc-chip--full-width',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.replaceChildren();
-        if (clickable && !disabled) {
-            this.setAttribute('role', 'button');
-            this.tabIndex = 0;
-        }
-        else {
-            this.removeAttribute('role');
-            this.removeAttribute('tabindex');
-        }
-        if (startIcon) {
-            const iconWrap = document.createElement('span');
-            iconWrap.className = 'designbase-wc-chip__start-icon';
-            iconWrap.append(createDbIcon(startIcon, iconPx));
-            this.append(iconWrap);
-        }
-        const text = document.createElement('span');
-        text.className = 'designbase-wc-chip__label';
-        text.textContent = label;
-        this.append(text);
-        if (endIcon && !deletable) {
-            const iconWrap = document.createElement('span');
-            iconWrap.className = 'designbase-wc-chip__end-icon';
-            iconWrap.append(createDbIcon(endIcon, iconPx));
-            this.append(iconWrap);
-        }
-        if (deletable) {
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = 'designbase-wc-chip__delete-button';
-            button.disabled = disabled;
-            button.setAttribute('aria-label', `${label} 삭제`);
-            button.append(createDbIcon('close', iconPx));
-            button.addEventListener('click', (event) => {
-                event.stopPropagation();
-                if (!disabled) {
-                    this.dispatchEvent(new CustomEvent('db-delete', { bubbles: true, composed: true }));
-                }
-            });
-            this.append(button);
-        }
-        this.onclick = () => {
-            if (!disabled && clickable) {
-                this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
-            }
-        };
-        this.onkeydown = (event) => {
-            if ((event.key === 'Enter' || event.key === ' ') && !disabled && clickable) {
-                event.preventDefault();
-                this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
-            }
-        };
-    }
-}
-if (!customElements.get('db-chip'))
-    customElements.define('db-chip', DbChip);
-
-export { DbChip };
+import{isDbIconName as e,createDbIcon as t}from"./db-icons.js";const i=["s","m","l"],s=["default","primary","success","warning","danger","info","neutral"];class DbChip extends HTMLElement{static get observedAttributes(){return["label","size","variant","deletable","disabled","selected","full-width","clickable","start-icon","end-icon"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}iconSize(e){return"s"===e?12:"l"===e?20:16}render(){const n=this.getAttribute("label")||this.textContent?.trim()||"",c=this.getAttribute("size")||"m",a=this.getAttribute("variant")||"default",d=this.hasAttribute("disabled"),l=this.hasAttribute("deletable"),b=this.hasAttribute("selected"),h=this.hasAttribute("full-width"),r=this.hasAttribute("clickable"),o=this.getAttribute("start-icon"),p=this.getAttribute("end-icon"),u=i.includes(c)?c:"m",m=s.includes(a)?a:"default",g=this.iconSize(u);if(this.className=["designbase-wc-chip",`designbase-wc-chip--${u}`,`designbase-wc-chip--${m}`,l&&"designbase-wc-chip--deletable",d&&"designbase-wc-chip--disabled",b&&"designbase-wc-chip--selected",r&&"designbase-wc-chip--clickable",h&&"designbase-wc-chip--full-width"].filter(Boolean).join(" "),this.replaceChildren(),r&&!d?(this.setAttribute("role","button"),this.tabIndex=0):(this.removeAttribute("role"),this.removeAttribute("tabindex")),o&&e(o)){const e=document.createElement("span");e.className="designbase-wc-chip__start-icon",e.append(t(o,g)),this.append(e)}const w=document.createElement("span");if(w.className="designbase-wc-chip__label",w.textContent=n,this.append(w),p&&e(p)&&!l){const e=document.createElement("span");e.className="designbase-wc-chip__end-icon",e.append(t(p,g)),this.append(e)}if(l){const e=document.createElement("button");e.type="button",e.className="designbase-wc-chip__delete-button",e.disabled=d,e.setAttribute("aria-label",`${n} 삭제`),e.append(t("close",g)),e.addEventListener("click",e=>{e.stopPropagation(),d||this.dispatchEvent(new CustomEvent("db-delete",{bubbles:!0,composed:!0}))}),this.append(e)}this.onclick=()=>{!d&&r&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.onkeydown=e=>{"Enter"!==e.key&&" "!==e.key||d||!r||(e.preventDefault(),this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0})))}}}customElements.get("db-chip")||customElements.define("db-chip",DbChip);export{DbChip};