@designbasekorea/ui-wc 0.5.6 → 0.6.0

package/dist/esm/components/db-ad-banner.js

@@ -1,455 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const CLASS = 'designbase-wc-ad-banner';
-const DEFAULT_TITLES = {
-    hero: '지금 바로 시작하세요',
-    topbar: '🎉 신규 가입 시 10,000원 적립금 증정!',
-    card: '프리미엄 멤버십',
-    floating: '오늘만 특가!',
-};
-const DEFAULT_SUBTITLES = {
-    hero: '최대 50% 할인된 가격으로 프리미엄 서비스를 경험해보세요. 기간 한정 특별 혜택!',
-    topbar: '오늘 하루만 특별 혜택',
-    card: '무제한 서비스 이용권을 특별가에 만나보세요',
-    floating: '장바구니에 담긴 상품 추가 20% 할인',
-};
-const DEFAULT_CTA = {
-    hero: '자세히 보기',
-    topbar: '지금 가입하기',
-    card: '알아보기',
-    floating: '할인받기',
-};
-const TYPE_ICONS = {
-    hero: 'star',
-    topbar: 'trending-up',
-    card: 'star-filled',
-    floating: 'cart',
-};
-const VARIANT_SCHEMES = {
-    primary: 'primary',
-    secondary: 'secondary',
-    success: 'success',
-    warning: 'warning',
-    error: 'error',
-};
-class DbAdBanner extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-        this.visible = true;
-        this.progress = 100;
-    }
-    static get observedAttributes() {
-        return [
-            'type',
-            'variant',
-            'size',
-            'title',
-            'subtitle',
-            'cta-text',
-            'image',
-            'image-alt',
-            'href',
-            'target',
-            'auto-close',
-            'close-delay',
-            'background',
-            'animation-type',
-            'grid-type',
-            'use-random-gradient',
-            'gradient-scheme',
-            'gradient-tone',
-            'gradient-animated',
-            'countdown-end-date',
-            'show-countdown',
-            'open',
-        ];
-    }
-    connectedCallback() {
-        this.style.display = 'block';
-        if (!this.built) {
-            this.built = true;
-            this.build();
-        }
-        this.updateUI();
-    }
-    disconnectedCallback() {
-        this.stopAutoClose();
-    }
-    attributeChangedCallback(name) {
-        if (!this.built)
-            return;
-        if (name === 'open') {
-            this.visible = this.getAttribute('open') !== 'false';
-        }
-        this.updateUI();
-    }
-    getBool(name, fallback = false) {
-        if (!this.hasAttribute(name))
-            return fallback;
-        const value = this.getAttribute(name);
-        return value === '' || value === 'true';
-    }
-    getType() {
-        const type = this.getAttribute('type') || 'hero';
-        return ['hero', 'topbar', 'card', 'floating'].includes(type) ? type : 'hero';
-    }
-    getVariant() {
-        const variant = this.getAttribute('variant') || 'primary';
-        return ['primary', 'secondary', 'success', 'warning', 'error'].includes(variant)
-            ? variant
-            : 'primary';
-    }
-    getSize() {
-        const size = this.getAttribute('size') || 'm';
-        return ['s', 'm', 'l'].includes(size) ? size : 'm';
-    }
-    ctaButtonSize(type, size) {
-        if (type === 'card')
-            return 's';
-        if (type === 'floating')
-            return size === 's' ? 's' : 'm';
-        return size;
-    }
-    build() {
-        this.rootEl = document.createElement('div');
-        this.contentEl = document.createElement('div');
-        this.contentEl.className = `${CLASS}__content`;
-        this.closeBtn = document.createElement('button');
-        this.closeBtn.type = 'button';
-        this.closeBtn.className = `${CLASS}__close`;
-        this.closeBtn.setAttribute('aria-label', '닫기');
-        this.closeBtn.append(createDbIcon('close', 16));
-        this.closeBtn.addEventListener('click', (event) => {
-            event.stopPropagation();
-            this.handleClose();
-        });
-        this.imageEl = document.createElement('img');
-        this.imageEl.className = `${CLASS}__image`;
-        this.imageEl.loading = 'lazy';
-        const mainEl = document.createElement('div');
-        mainEl.className = `${CLASS}__main`;
-        this.mainEl = mainEl;
-        this.iconEl = document.createElement('div');
-        this.iconEl.className = `${CLASS}__icon`;
-        this.labelEl = document.createElement('span');
-        this.labelEl.className = `${CLASS}__label`;
-        this.labelEl.textContent = '특별 이벤트';
-        this.badgeEl = document.createElement('span');
-        this.badgeEl.className = `${CLASS}__badge`;
-        this.badgeEl.textContent = 'HOT DEAL';
-        this.titleEl = document.createElement('h2');
-        this.titleEl.className = `${CLASS}__title`;
-        this.subtitleEl = document.createElement('p');
-        this.subtitleEl.className = `${CLASS}__subtitle`;
-        const textEl = document.createElement('div');
-        textEl.className = `${CLASS}__text`;
-        this.textEl = textEl;
-        this.countdownWrapEl = document.createElement('div');
-        this.countdownWrapEl.className = `${CLASS}__countdown`;
-        textEl.append(this.titleEl, this.subtitleEl);
-        this.actionsEl = document.createElement('div');
-        this.actionsEl.className = `${CLASS}__actions`;
-        this.ctaEl = document.createElement('db-button');
-        this.ctaEl.className = `${CLASS}__cta`;
-        this.ctaEl.setAttribute('variant', 'primary');
-        this.ctaEl.setAttribute('end-icon', 'arrow-right');
-        this.ctaEl.addEventListener('click', (event) => {
-            event.stopPropagation();
-            this.dispatchEvent(new CustomEvent('db-cta-click', { bubbles: true, composed: true }));
-        });
-        this.actionsEl.append(this.ctaEl);
-        mainEl.append(textEl, this.actionsEl);
-        this.progressEl = document.createElement('div');
-        this.progressEl.className = `${CLASS}__progress`;
-        this.progressBarEl = document.createElement('div');
-        this.progressBarEl.className = `${CLASS}__progress-bar`;
-        this.progressEl.append(this.progressBarEl);
-        this.contentEl.append(this.closeBtn, mainEl, this.progressEl);
-        this.rootEl.append(this.contentEl);
-        this.append(this.rootEl);
-        // topbar 는 전체가 링크처럼 동작 (href 없을 때도 db-cta-click 발행)
-        this.contentEl.addEventListener('click', (event) => {
-            if (this.getType() !== 'topbar')
-                return;
-            if (event.target?.closest(`.${CLASS}__close`))
-                return;
-            this.dispatchEvent(new CustomEvent('db-cta-click', { bubbles: true, composed: true }));
-        });
-    }
-    handleClose() {
-        this.visible = false;
-        this.style.display = 'none';
-        this.setAttribute('open', 'false');
-        this.stopAutoClose();
-        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
-    }
-    stopAutoClose() {
-        if (this.autoCloseTimer) {
-            window.clearInterval(this.autoCloseTimer);
-            this.autoCloseTimer = undefined;
-        }
-    }
-    startAutoClose(delay) {
-        this.stopAutoClose();
-        this.progress = 100;
-        this.autoCloseTimer = window.setInterval(() => {
-            this.progress -= 100 / (delay / 100);
-            if (this.progressBarEl) {
-                this.progressBarEl.style.width = `${Math.max(this.progress, 0)}%`;
-            }
-            if (this.progress <= 0) {
-                this.handleClose();
-            }
-        }, 100);
-    }
-    getBackground() {
-        const explicit = this.getAttribute('background');
-        if (explicit && ['solid', 'gradient', 'animation', 'grid'].includes(explicit)) {
-            return explicit;
-        }
-        return this.getBool('use-random-gradient') ? 'gradient' : 'solid';
-    }
-    ensureAnimBg() {
-        if (!this.animBgEl) {
-            const wrap = document.createElement('div');
-            wrap.className = `${CLASS}__backdrop`;
-            const inner = document.createElement('db-animation-background');
-            inner.className = `${CLASS}__anim-bg`;
-            inner.setAttribute('width', '100%');
-            inner.setAttribute('height', '100%');
-            wrap.append(inner);
-            this.animBgEl = wrap;
-            this.animBgInner = inner;
-        }
-        return this.animBgEl;
-    }
-    ensureGridBg() {
-        if (!this.gridBgEl) {
-            const wrap = document.createElement('div');
-            wrap.className = `${CLASS}__backdrop`;
-            const inner = document.createElement('db-grid-background');
-            inner.className = `${CLASS}__grid-bg`;
-            inner.setAttribute('width', '100%');
-            inner.setAttribute('height', '100%');
-            wrap.append(inner);
-            this.gridBgEl = wrap;
-            this.gridBgInner = inner;
-        }
-        return this.gridBgEl;
-    }
-    /** 이전 배경 모드의 백드롭 엘리먼트를 정리한다. */
-    clearBackdrop(keep) {
-        if (keep !== 'gradient' && this.gradientEl) {
-            this.gradientEl.remove();
-            this.gradientEl = undefined;
-        }
-        if (keep !== 'animation' && this.animBgEl) {
-            this.animBgEl.remove();
-            this.animBgEl = undefined;
-            this.animBgInner = undefined;
-        }
-        if (keep !== 'grid' && this.gridBgEl) {
-            this.gridBgEl.remove();
-            this.gridBgEl = undefined;
-            this.gridBgInner = undefined;
-        }
-    }
-    renderBackground(background, variant) {
-        if (!this.rootEl || !this.contentEl)
-            return;
-        this.clearBackdrop(background);
-        if (background === 'gradient') {
-            if (!this.gradientEl) {
-                this.gradientEl = document.createElement('db-random-gradient');
-                this.gradientEl.className = `${CLASS}__gradient-bg`;
-                this.gradientEl.setAttribute('height', '100%');
-                this.gradientEl.setAttribute('width', '100%');
-            }
-            const gradientTone = this.getAttribute('gradient-tone') || 'vivid';
-            const gradientAnimated = !this.hasAttribute('gradient-animated') || this.getAttribute('gradient-animated') !== 'false';
-            this.gradientEl.setAttribute('scheme', this.getAttribute('gradient-scheme') || VARIANT_SCHEMES[variant]);
-            this.gradientEl.setAttribute('tone', gradientTone);
-            this.gradientEl.setAttribute('animated', gradientAnimated ? 'true' : 'false');
-            if (this.gradientEl.parentElement !== this.rootEl) {
-                this.rootEl.replaceChildren(this.gradientEl);
-            }
-            if (this.contentEl.parentElement !== this.gradientEl) {
-                this.gradientEl.append(this.contentEl);
-            }
-            return;
-        }
-        // solid / animation / grid → 백드롭은 절대 위치 형제, 콘텐츠는 그 위에
-        const layers = [];
-        if (background === 'animation') {
-            const wrap = this.ensureAnimBg();
-            this.animBgInner?.setAttribute('type', this.getAttribute('animation-type') || 'graphite');
-            this.animBgInner?.setAttribute('theme', 'dark');
-            layers.push(wrap);
-        }
-        else if (background === 'grid') {
-            const wrap = this.ensureGridBg();
-            this.gridBgInner?.setAttribute('type', this.getAttribute('grid-type') || 'lines');
-            this.gridBgInner?.setAttribute('color', 'var(--db-text-inverse-primary)');
-            this.gridBgInner?.setAttribute('opacity', '0.18');
-            this.gridBgInner?.setAttribute('fade', 'vignette');
-            this.gridBgInner?.setAttribute('animated', '');
-            layers.push(wrap);
-        }
-        // 구조가 이미 올바르면 재삽입하지 않는다 (백드롭 캔버스 애니메이션 재시작 방지)
-        const desired = [...layers, this.contentEl];
-        const current = Array.from(this.rootEl.children);
-        const same = current.length === desired.length && desired.every((node, i) => current[i] === node);
-        if (!same) {
-            this.rootEl.replaceChildren(...desired);
-        }
-    }
-    /** 장식 아이콘은 card 타입에서만 사용한다. */
-    syncIcon(type) {
-        if (!this.mainEl || !this.textEl || !this.iconEl)
-            return;
-        if (type !== 'card') {
-            this.iconEl.remove();
-            return;
-        }
-        this.iconEl.replaceChildren(createDbIcon(TYPE_ICONS.card, 32));
-        if (this.iconEl.parentElement !== this.mainEl) {
-            this.mainEl.insertBefore(this.iconEl, this.textEl);
-        }
-    }
-    /** floating 타입에서만 텍스트 상단에 배지 칩을 노출한다. */
-    syncBadge(type) {
-        if (!this.textEl || !this.badgeEl)
-            return;
-        if (type !== 'floating') {
-            this.badgeEl.remove();
-            return;
-        }
-        if (this.badgeEl.parentElement !== this.textEl) {
-            this.textEl.insertBefore(this.badgeEl, this.textEl.firstChild);
-        }
-    }
-    /** floating 타입에서 배너 이미지를 콘텐츠 상단(패딩 밖)에 렌더한다. */
-    syncImage(type, src) {
-        if (!this.contentEl || !this.imageEl || !this.mainEl)
-            return;
-        if (type !== 'floating' || !src) {
-            this.imageEl.remove();
-            return;
-        }
-        this.imageEl.src = src;
-        this.imageEl.alt = this.getAttribute('image-alt') || '';
-        if (this.imageEl.parentElement !== this.contentEl) {
-            this.contentEl.insertBefore(this.imageEl, this.mainEl);
-        }
-    }
-    /** topbar 타입에서 href 가 있으면 전체를 덮는 링크 오버레이를 렌더한다. */
-    syncLink(type, href) {
-        if (!this.contentEl)
-            return;
-        if (type !== 'topbar' || !href) {
-            this.linkEl?.remove();
-            return;
-        }
-        if (!this.linkEl) {
-            this.linkEl = document.createElement('a');
-            this.linkEl.className = `${CLASS}__link`;
-        }
-        this.linkEl.setAttribute('href', href);
-        const target = this.getAttribute('target');
-        if (target)
-            this.linkEl.setAttribute('target', target);
-        else
-            this.linkEl.removeAttribute('target');
-        this.linkEl.setAttribute('aria-label', this.titleEl?.textContent || '배너 링크');
-        if (this.linkEl.parentElement !== this.contentEl) {
-            this.contentEl.append(this.linkEl);
-        }
-    }
-    /** show-countdown + end-date 가 있을 때만 카운트다운을 마운트한다. */
-    syncCountdown(show, endDate) {
-        if (!this.textEl || !this.countdownWrapEl)
-            return;
-        if (!show || !endDate) {
-            this.countdownWrapEl.remove();
-            return;
-        }
-        if (!this.countdownEl) {
-            this.countdownEl = document.createElement('db-countdown');
-            this.countdownEl.setAttribute('size', 's');
-            this.countdownEl.setAttribute('variant', 'compact');
-            this.countdownEl.setAttribute('show-labels', 'false');
-            this.countdownWrapEl.replaceChildren(this.countdownEl);
-        }
-        this.countdownEl.setAttribute('end-date', endDate);
-        if (this.countdownWrapEl.parentElement !== this.textEl) {
-            this.textEl.append(this.countdownWrapEl);
-        }
-    }
-    updateUI() {
-        if (!this.visible || this.getAttribute('open') === 'false') {
-            this.style.display = 'none';
-            return;
-        }
-        this.style.display = 'block';
-        const type = this.getType();
-        const variant = this.getVariant();
-        const size = this.getSize();
-        const title = this.getAttribute('title') || DEFAULT_TITLES[type];
-        const subtitle = this.getAttribute('subtitle') || DEFAULT_SUBTITLES[type];
-        const ctaText = this.getAttribute('cta-text') || DEFAULT_CTA[type];
-        const autoClose = this.getBool('auto-close');
-        const closeDelay = Math.max(Number(this.getAttribute('close-delay') || 5000), 1000);
-        const background = this.getBackground();
-        const gradientTone = this.getAttribute('gradient-tone') || 'vivid';
-        const showCountdown = this.getBool('show-countdown');
-        const countdownEndDate = this.getAttribute('countdown-end-date');
-        if (this.rootEl) {
-            this.rootEl.className = [
-                CLASS,
-                `${CLASS}--type-${type}`,
-                `${CLASS}--variant-${variant}`,
-                `${CLASS}--size-${size}`,
-                `${CLASS}--bg-${background}`,
-                autoClose && `${CLASS}--auto-close`,
-                background === 'gradient' && `${CLASS}--with-gradient`,
-                background === 'gradient' && gradientTone === 'light' && `${CLASS}--gradient-light`,
-            ]
-                .filter(Boolean)
-                .join(' ');
-        }
-        this.renderBackground(background, variant);
-        this.syncIcon(type);
-        this.syncBadge(type);
-        this.syncImage(type, this.getAttribute('image'));
-        this.syncLink(type, this.getAttribute('href'));
-        if (this.titleEl)
-            this.titleEl.textContent = title;
-        if (this.subtitleEl)
-            this.subtitleEl.textContent = subtitle;
-        this.syncCountdown(showCountdown, countdownEndDate);
-        // topbar 는 전체가 링크이므로 CTA 버튼을 숨긴다.
-        if (this.actionsEl)
-            this.actionsEl.hidden = type === 'topbar';
-        if (this.ctaEl) {
-            this.ctaEl.textContent = ctaText;
-            this.ctaEl.setAttribute('size', this.ctaButtonSize(type, size));
-            if (type === 'floating')
-                this.ctaEl.setAttribute('full-width', '');
-            else
-                this.ctaEl.removeAttribute('full-width');
-        }
-        if (this.progressEl)
-            this.progressEl.hidden = !autoClose;
-        if (this.progressBarEl && autoClose) {
-            this.progressBarEl.style.width = `${this.progress}%`;
-        }
-        this.stopAutoClose();
-        if (autoClose)
-            this.startAutoClose(closeDelay);
-    }
-}
-if (!customElements.get('db-ad-banner'))
-    customElements.define('db-ad-banner', DbAdBanner);
-
-export { DbAdBanner };
+import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-ad-banner",i={hero:"지금 바로 시작하세요",topbar:"🎉 신규 가입 시 10,000원 적립금 증정!",card:"프리미엄 멤버십",floating:"오늘만 특가!"},s={hero:"최대 50% 할인된 가격으로 프리미엄 서비스를 경험해보세요. 기간 한정 특별 혜택!",topbar:"오늘 하루만 특별 혜택",card:"무제한 서비스 이용권을 특별가에 만나보세요",floating:"장바구니에 담긴 상품 추가 20% 할인"},n={hero:"자세히 보기",topbar:"지금 가입하기",card:"알아보기",floating:"할인받기"},r="star-filled",a={primary:"primary",secondary:"secondary",success:"success",warning:"warning",error:"error"};class DbAdBanner extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.visible=!0,this.progress=100}static get observedAttributes(){return["type","variant","size","title","subtitle","cta-text","image","image-alt","href","target","auto-close","close-delay","background","animation-type","grid-type","use-random-gradient","gradient-scheme","gradient-tone","gradient-animated","countdown-end-date","show-countdown","open"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.stopAutoClose()}attributeChangedCallback(t){this.built&&("open"===t&&(this.visible="false"!==this.getAttribute("open")),this.updateUI())}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}getType(){const t=this.getAttribute("type")||"hero";return["hero","topbar","card","floating"].includes(t)?t:"hero"}getVariant(){const t=this.getAttribute("variant")||"primary";return["primary","secondary","success","warning","error"].includes(t)?t:"primary"}getSize(){const t=this.getAttribute("size")||"m";return["s","m","l"].includes(t)?t:"m"}ctaButtonSize(t,e){return"card"===t?"s":"floating"===t?"s"===e?"s":"m":e}build(){this.rootEl=document.createElement("div"),this.contentEl=document.createElement("div"),this.contentEl.className=`${e}__content`,this.closeBtn=document.createElement("button"),this.closeBtn.type="button",this.closeBtn.className=`${e}__close`,this.closeBtn.setAttribute("aria-label","닫기"),this.closeBtn.append(t("close",16)),this.closeBtn.addEventListener("click",t=>{t.stopPropagation(),this.handleClose()}),this.imageEl=document.createElement("img"),this.imageEl.className=`${e}__image`,this.imageEl.loading="lazy";const i=document.createElement("div");i.className=`${e}__main`,this.mainEl=i,this.iconEl=document.createElement("div"),this.iconEl.className=`${e}__icon`,this.labelEl=document.createElement("span"),this.labelEl.className=`${e}__label`,this.labelEl.textContent="특별 이벤트",this.badgeEl=document.createElement("span"),this.badgeEl.className=`${e}__badge`,this.badgeEl.textContent="HOT DEAL",this.titleEl=document.createElement("h2"),this.titleEl.className=`${e}__title`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${e}__subtitle`;const s=document.createElement("div");s.className=`${e}__text`,this.textEl=s,this.countdownWrapEl=document.createElement("div"),this.countdownWrapEl.className=`${e}__countdown`,s.append(this.titleEl,this.subtitleEl),this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,this.ctaEl=document.createElement("db-button"),this.ctaEl.className=`${e}__cta`,this.ctaEl.setAttribute("variant","primary"),this.ctaEl.setAttribute("end-icon","arrow-right"),this.ctaEl.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-cta-click",{bubbles:!0,composed:!0}))}),this.actionsEl.append(this.ctaEl),i.append(s,this.actionsEl),this.progressEl=document.createElement("div"),this.progressEl.className=`${e}__progress`,this.progressBarEl=document.createElement("div"),this.progressBarEl.className=`${e}__progress-bar`,this.progressEl.append(this.progressBarEl),this.contentEl.append(this.closeBtn,i,this.progressEl),this.rootEl.append(this.contentEl),this.append(this.rootEl),this.contentEl.addEventListener("click",t=>{"topbar"===this.getType()&&(t.target?.closest(`.${e}__close`)||this.dispatchEvent(new CustomEvent("db-cta-click",{bubbles:!0,composed:!0})))})}handleClose(){this.visible=!1,this.style.display="none",this.setAttribute("open","false"),this.stopAutoClose(),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}stopAutoClose(){this.autoCloseTimer&&(window.clearInterval(this.autoCloseTimer),this.autoCloseTimer=void 0)}startAutoClose(t){this.stopAutoClose(),this.progress=100,this.autoCloseTimer=window.setInterval(()=>{this.progress-=100/(t/100),this.progressBarEl&&(this.progressBarEl.style.width=`${Math.max(this.progress,0)}%`),this.progress<=0&&this.handleClose()},100)}getBackground(){const t=this.getAttribute("background");return t&&["solid","gradient","animation","grid"].includes(t)?t:this.getBool("use-random-gradient")?"gradient":"solid"}ensureAnimBg(){if(!this.animBgEl){const t=document.createElement("div");t.className=`${e}__backdrop`;const i=document.createElement("db-animation-background");i.className=`${e}__anim-bg`,i.setAttribute("width","100%"),i.setAttribute("height","100%"),t.append(i),this.animBgEl=t,this.animBgInner=i}return this.animBgEl}ensureGridBg(){if(!this.gridBgEl){const t=document.createElement("div");t.className=`${e}__backdrop`;const i=document.createElement("db-grid-background");i.className=`${e}__grid-bg`,i.setAttribute("width","100%"),i.setAttribute("height","100%"),t.append(i),this.gridBgEl=t,this.gridBgInner=i}return this.gridBgEl}clearBackdrop(t){"gradient"!==t&&this.gradientEl&&(this.gradientEl.remove(),this.gradientEl=void 0),"animation"!==t&&this.animBgEl&&(this.animBgEl.remove(),this.animBgEl=void 0,this.animBgInner=void 0),"grid"!==t&&this.gridBgEl&&(this.gridBgEl.remove(),this.gridBgEl=void 0,this.gridBgInner=void 0)}renderBackground(t,i){if(!this.rootEl||!this.contentEl)return;if(this.clearBackdrop(t),"gradient"===t){this.gradientEl||(this.gradientEl=document.createElement("db-random-gradient"),this.gradientEl.className=`${e}__gradient-bg`,this.gradientEl.setAttribute("height","100%"),this.gradientEl.setAttribute("width","100%"));const t=this.getAttribute("gradient-tone")||"vivid",s=!this.hasAttribute("gradient-animated")||"false"!==this.getAttribute("gradient-animated");return this.gradientEl.setAttribute("scheme",this.getAttribute("gradient-scheme")||a[i]),this.gradientEl.setAttribute("tone",t),this.gradientEl.setAttribute("animated",s?"true":"false"),this.gradientEl.parentElement!==this.rootEl&&this.rootEl.replaceChildren(this.gradientEl),void(this.contentEl.parentElement!==this.gradientEl&&this.gradientEl.append(this.contentEl))}const s=[];if("animation"===t){const t=this.ensureAnimBg();this.animBgInner?.setAttribute("type",this.getAttribute("animation-type")||"graphite"),this.animBgInner?.setAttribute("theme","dark"),s.push(t)}else if("grid"===t){const t=this.ensureGridBg();this.gridBgInner?.setAttribute("type",this.getAttribute("grid-type")||"lines"),this.gridBgInner?.setAttribute("color","var(--db-text-inverse-primary)"),this.gridBgInner?.setAttribute("opacity","0.18"),this.gridBgInner?.setAttribute("fade","vignette"),this.gridBgInner?.setAttribute("animated",""),s.push(t)}const n=[...s,this.contentEl],r=Array.from(this.rootEl.children);r.length===n.length&&n.every((t,e)=>r[e]===t)||this.rootEl.replaceChildren(...n)}syncIcon(e){this.mainEl&&this.textEl&&this.iconEl&&("card"===e?(this.iconEl.replaceChildren(t(r,32)),this.iconEl.parentElement!==this.mainEl&&this.mainEl.insertBefore(this.iconEl,this.textEl)):this.iconEl.remove())}syncBadge(t){this.textEl&&this.badgeEl&&("floating"===t?this.badgeEl.parentElement!==this.textEl&&this.textEl.insertBefore(this.badgeEl,this.textEl.firstChild):this.badgeEl.remove())}syncImage(t,e){this.contentEl&&this.imageEl&&this.mainEl&&("floating"===t&&e?(this.imageEl.src=e,this.imageEl.alt=this.getAttribute("image-alt")||"",this.imageEl.parentElement!==this.contentEl&&this.contentEl.insertBefore(this.imageEl,this.mainEl)):this.imageEl.remove())}syncLink(t,i){if(!this.contentEl)return;if("topbar"!==t||!i)return void this.linkEl?.remove();this.linkEl||(this.linkEl=document.createElement("a"),this.linkEl.className=`${e}__link`),this.linkEl.setAttribute("href",i);const s=this.getAttribute("target");s?this.linkEl.setAttribute("target",s):this.linkEl.removeAttribute("target"),this.linkEl.setAttribute("aria-label",this.titleEl?.textContent||"배너 링크"),this.linkEl.parentElement!==this.contentEl&&this.contentEl.append(this.linkEl)}syncCountdown(t,e){this.textEl&&this.countdownWrapEl&&(t&&e?(this.countdownEl||(this.countdownEl=document.createElement("db-countdown"),this.countdownEl.setAttribute("size","s"),this.countdownEl.setAttribute("variant","compact"),this.countdownEl.setAttribute("show-labels","false"),this.countdownWrapEl.replaceChildren(this.countdownEl)),this.countdownEl.setAttribute("end-date",e),this.countdownWrapEl.parentElement!==this.textEl&&this.textEl.append(this.countdownWrapEl)):this.countdownWrapEl.remove())}updateUI(){if(!this.visible||"false"===this.getAttribute("open"))return void(this.style.display="none");this.style.display="block";const t=this.getType(),r=this.getVariant(),a=this.getSize(),l=this.getAttribute("title")||i[t],o=this.getAttribute("subtitle")||s[t],h=this.getAttribute("cta-text")||n[t],c=this.getBool("auto-close"),d=Math.max(Number(this.getAttribute("close-delay")||5e3),1e3),g=this.getBackground(),E=this.getAttribute("gradient-tone")||"vivid",u=this.getBool("show-countdown"),m=this.getAttribute("countdown-end-date");this.rootEl&&(this.rootEl.className=[e,`${e}--type-${t}`,`${e}--variant-${r}`,`${e}--size-${a}`,`${e}--bg-${g}`,c&&`${e}--auto-close`,"gradient"===g&&`${e}--with-gradient`,"gradient"===g&&"light"===E&&`${e}--gradient-light`].filter(Boolean).join(" ")),this.renderBackground(g,r),this.syncIcon(t),this.syncBadge(t),this.syncImage(t,this.getAttribute("image")),this.syncLink(t,this.getAttribute("href")),this.titleEl&&(this.titleEl.textContent=l),this.subtitleEl&&(this.subtitleEl.textContent=o),this.syncCountdown(u,m),this.actionsEl&&(this.actionsEl.hidden="topbar"===t),this.ctaEl&&(this.ctaEl.textContent=h,this.ctaEl.setAttribute("size",this.ctaButtonSize(t,a)),"floating"===t?this.ctaEl.setAttribute("full-width",""):this.ctaEl.removeAttribute("full-width")),this.progressEl&&(this.progressEl.hidden=!c),this.progressBarEl&&c&&(this.progressBarEl.style.width=`${this.progress}%`),this.stopAutoClose(),c&&this.startAutoClose(d)}}customElements.get("db-ad-banner")||customElements.define("db-ad-banner",DbAdBanner);export{DbAdBanner};

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

@@ -0,0 +1,43 @@
+import { DbIconName } from './db-icons.js';
+
+interface DbAiChatItem {
+    id: string;
+    /** 대화 제목 */
+    title: string;
+    /** 그룹 라벨 (예: '오늘', '어제', '지난 7일'). 없으면 '최근 항목' */
+    group?: string;
+    /** 행 아이콘(선택) */
+    icon?: DbIconName;
+}
+/**
+ * AI 대화 이력 목록. 상단 '새 대화' 버튼 + 그룹별 최근 대화 리스트로 구성됩니다.
+ * (사람 간 대화 목록은 `db-chat-list` 를 사용하세요.)
+ *
+ * @fires db-new    - 새 대화 시작
+ * @fires db-select - 대화 선택 (detail: { id, title })
+ *
+ * @example
+ *   const list = document.querySelector('db-ai-chat-list');
+ *   list.items = [{ id:'1', title:'다운로드 진행바 컴포넌트', group:'오늘' }];
+ *   list.addEventListener('db-new', () => {});
+ *   list.addEventListener('db-select', (e) => console.log(e.detail.id));
+ */
+declare class DbAiChatList extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _items;
+    get items(): DbAiChatItem[];
+    set items(v: DbAiChatItem[]);
+    get selectedId(): string;
+    set selectedId(v: string);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-chat-list': DbAiChatList;
+    }
+}
+
+export { DbAiChatList };
+export type { DbAiChatItem };

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

@@ -0,0 +1 @@
+import{createDbIcon as t,isDbIconName as e}from"./db-icons.js";class DbAiChatList extends HTMLElement{constructor(){super(...arguments),this._items=[]}static get observedAttributes(){return["selected-id","new-label","title-label"]}get items(){return this._items}set items(t){this._items=Array.isArray(t)?t:[],this.render()}get selectedId(){return this.getAttribute("selected-id")||""}set selectedId(t){t?this.setAttribute("selected-id",t):this.removeAttribute("selected-id")}connectedCallback(){if(!this._items.length&&this.hasAttribute("items"))try{this._items=JSON.parse(this.getAttribute("items")||"[]")}catch{this._items=[]}this.render()}attributeChangedCallback(){this.render()}render(){this.className="designbase-wc-ai-chat-list",this.replaceChildren();const s=document.createElement("button");s.type="button",s.className="designbase-wc-ai-chat-list__new";const i=document.createElement("span");i.className="designbase-wc-ai-chat-list__new-icon",i.append(t("plus",18));const n=document.createElement("span");if(n.textContent=this.getAttribute("new-label")||"새 대화",s.append(i,n),s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-new",{bubbles:!0,composed:!0}))}),this.append(s),!this._items.length)return;const a=new Map,c=this.getAttribute("title-label")||"최근 항목";for(const t of this._items){const e=t.group||c;a.has(e)||a.set(e,[]),a.get(e).push(t)}const d=this.selectedId,l=document.createElement("div");l.className="designbase-wc-ai-chat-list__scroll";for(const[s,i]of a){const n=document.createElement("div");n.className="designbase-wc-ai-chat-list__group";const a=document.createElement("div");a.className="designbase-wc-ai-chat-list__group-title",a.textContent=s,n.append(a);for(const s of i){const i=document.createElement("button");if(i.type="button",i.className=["designbase-wc-ai-chat-list__item",s.id===d&&"designbase-wc-ai-chat-list__item--selected"].filter(Boolean).join(" "),s.icon&&e(s.icon)){const e=document.createElement("span");e.className="designbase-wc-ai-chat-list__item-icon",e.append(t(s.icon,16)),i.append(e)}const a=document.createElement("span");a.className="designbase-wc-ai-chat-list__item-title",a.textContent=s.title,i.append(a),i.addEventListener("click",()=>{this.selectedId=s.id,this.dispatchEvent(new CustomEvent("db-select",{detail:{id:s.id,title:s.title},bubbles:!0,composed:!0}))}),n.append(i)}l.append(n)}this.append(l)}}customElements.get("db-ai-chat-list")||customElements.define("db-ai-chat-list",DbAiChatList);export{DbAiChatList};