@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,335 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const SIZES = ['s', 'm', 'l'];
-const ORIENTATIONS = ['horizontal', 'vertical'];
-const VARIANTS = ['default', 'pills'];
-class DbTabs extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.tabButtons = [];
-        this.inactivePanels = document.createDocumentFragment();
-        this.isRendering = false;
-        this.handleListScroll = () => {
-            if (!this.list)
-                return;
-            const isScrollable = this.list.scrollWidth > this.list.clientWidth;
-            const isScrolledToEnd = this.list.scrollLeft + this.list.clientWidth >= this.list.scrollWidth - 5;
-            this.list.classList.toggle('designbase-wc-tabs__list--show-gradient', isScrollable && !isScrolledToEnd && this.orientation === 'horizontal');
-        };
-    }
-    static get observedAttributes() {
-        return ['labels', 'items', 'active-index', 'selected-id', 'orientation', 'size', 'variant', 'full-width'];
-    }
-    get labels() {
-        const fromItems = this.tabItems.map((item) => item.label);
-        if (fromItems.length)
-            return fromItems;
-        return (this.getAttribute('labels') || '')
-            .split(',')
-            .map((label) => label.trim())
-            .filter(Boolean);
-    }
-    set labels(value) {
-        this.setAttribute('labels', Array.isArray(value) ? value.join(',') : value);
-    }
-    get tabItems() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('items') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    get items() {
-        return this.tabItems;
-    }
-    set items(value) {
-        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    set tabItems(value) {
-        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get activeIndex() {
-        const selectedId = this.getAttribute('selected-id');
-        if (selectedId) {
-            const index = this.tabItems.findIndex((item, idx) => (item.id || String(idx)) === selectedId);
-            if (index >= 0)
-                return index;
-        }
-        return Number(this.getAttribute('active-index') || 0);
-    }
-    set activeIndex(value) {
-        this.setAttribute('active-index', String(value));
-    }
-    get orientation() {
-        return this.getAttribute('orientation') || 'horizontal';
-    }
-    set orientation(value) {
-        this.setAttribute('orientation', value);
-    }
-    get size() {
-        return this.getAttribute('size') || 'm';
-    }
-    set size(value) {
-        this.setAttribute('size', value);
-    }
-    get variant() {
-        return this.getAttribute('variant') || 'default';
-    }
-    set variant(value) {
-        this.setAttribute('variant', value);
-    }
-    get fullWidth() {
-        return this.hasAttribute('full-width');
-    }
-    set fullWidth(value) {
-        this.toggleAttribute('full-width', Boolean(value));
-    }
-    connectedCallback() {
-        this.render();
-        this.list?.addEventListener('scroll', this.handleListScroll, { passive: true });
-        window.addEventListener('resize', this.handleListScroll);
-        this.childObserver = new MutationObserver((mutations) => {
-            if (this.isRendering)
-                return;
-            const hasPanelChange = mutations.some((mutation) => Array.from(mutation.addedNodes).some((node) => node instanceof HTMLElement &&
-                (node.hasAttribute('slot') || node.dataset.panelIndex !== undefined)));
-            if (hasPanelChange)
-                this.render();
-        });
-        this.childObserver.observe(this, { childList: true });
-    }
-    disconnectedCallback() {
-        this.list?.removeEventListener('scroll', this.handleListScroll);
-        window.removeEventListener('resize', this.handleListScroll);
-        this.childObserver?.disconnect();
-    }
-    attributeChangedCallback() {
-        if (!this.isConnected)
-            return;
-        this.render();
-    }
-    collectPanelContent() {
-        const map = new Map();
-        const register = (node, index) => {
-            if (!(node instanceof HTMLElement) || node.tagName === 'SLOT')
-                return;
-            if (!map.has(index))
-                map.set(index, []);
-            const list = map.get(index);
-            if (!list.includes(node))
-                list.push(node);
-        };
-        Array.from(this.children).forEach((child) => {
-            const slotMatch = child.getAttribute('slot')?.match(/^panel-(\d+)$/);
-            if (slotMatch) {
-                register(child, Number(slotMatch[1]));
-                return;
-            }
-            const panelIndex = child.dataset.panelIndex;
-            if (panelIndex !== undefined)
-                register(child, Number(panelIndex));
-        });
-        this.panel
-            ?.querySelectorAll(':scope > .designbase-wc-tabs__panel-inner > [data-panel-index]')
-            .forEach((child) => {
-            if (child instanceof HTMLElement) {
-                register(child, Number(child.dataset.panelIndex));
-            }
-        });
-        Array.from(this.inactivePanels.children).forEach((child) => {
-            if (child instanceof HTMLElement && child.dataset.panelIndex !== undefined) {
-                register(child, Number(child.dataset.panelIndex));
-            }
-        });
-        return map;
-    }
-    render() {
-        this.isRendering = true;
-        const panelContent = this.collectPanelContent();
-        const labels = this.labels;
-        const tabItems = this.tabItems;
-        const activeIndex = Math.min(Math.max(this.activeIndex, 0), Math.max(labels.length - 1, 0));
-        const resolvedSize = SIZES.includes(this.size) ? this.size : 'm';
-        const resolvedOrientation = ORIENTATIONS.includes(this.orientation)
-            ? this.orientation
-            : 'horizontal';
-        const resolvedVariant = VARIANTS.includes(this.variant)
-            ? this.variant
-            : 'default';
-        const showIndicator = resolvedVariant === 'default';
-        this.className = [
-            'designbase-wc-tabs',
-            `designbase-wc-tabs--${resolvedOrientation}`,
-            `designbase-wc-tabs--${resolvedSize}`,
-            `designbase-wc-tabs--${resolvedVariant}`,
-            this.fullWidth && 'designbase-wc-tabs--full-width',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.querySelectorAll(':scope > .designbase-wc-tabs__list, :scope > .designbase-wc-tabs__panel').forEach((node) => node.remove());
-        this.list = document.createElement('div');
-        this.list.className = [
-            'designbase-wc-tabs__list',
-            `designbase-wc-tabs__list--${resolvedOrientation}`,
-            this.fullWidth && 'designbase-wc-tabs__list--full-width',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.list.setAttribute('role', 'tablist');
-        this.list.setAttribute('aria-orientation', resolvedOrientation);
-        this.list.setAttribute('aria-label', '탭 목록');
-        this.tabButtons = [];
-        labels.forEach((label, index) => {
-            const config = tabItems[index];
-            const disabled = Boolean(config?.disabled);
-            const isSelected = index === activeIndex;
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = [
-                'designbase-wc-tabs__tab',
-                isSelected && 'designbase-wc-tabs__tab--selected',
-                disabled && 'designbase-wc-tabs__tab--disabled',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            button.setAttribute('role', 'tab');
-            button.setAttribute('aria-selected', String(isSelected));
-            button.setAttribute('aria-controls', `panel-${index}`);
-            button.id = `tab-${index}`;
-            button.tabIndex = isSelected ? 0 : -1;
-            button.disabled = disabled;
-            if (config?.icon) {
-                const iconWrap = document.createElement('span');
-                iconWrap.className = 'designbase-wc-tabs__tab-icon';
-                const iconSize = resolvedSize === 's' ? 16 : resolvedSize === 'l' ? 20 : 18;
-                iconWrap.append(createDbIcon(config.icon, iconSize));
-                button.append(iconWrap);
-            }
-            const labelEl = document.createElement('span');
-            labelEl.className = 'designbase-wc-tabs__tab-label';
-            labelEl.textContent = label;
-            button.append(labelEl);
-            button.addEventListener('click', () => this.select(index));
-            button.addEventListener('keydown', (event) => this.handleKeyDown(event, index));
-            this.list?.append(button);
-            this.tabButtons.push(button);
-        });
-        if (showIndicator) {
-            this.indicator = document.createElement('span');
-            this.indicator.className = 'designbase-wc-tabs__indicator designbase-wc-tabs__indicator--no-transition';
-            this.list.append(this.indicator);
-            requestAnimationFrame(() => this.updateIndicator(false));
-        }
-        else {
-            this.indicator = undefined;
-        }
-        this.panel = document.createElement('div');
-        this.panel.className = 'designbase-wc-tabs__panel';
-        this.panel.setAttribute('role', 'tabpanel');
-        this.panel.id = `panel-${activeIndex}`;
-        this.panel.setAttribute('aria-labelledby', `tab-${activeIndex}`);
-        this.panel.tabIndex = 0;
-        const panelInner = document.createElement('div');
-        panelInner.className = 'designbase-wc-tabs__panel-inner';
-        panelContent.forEach((nodes, index) => {
-            nodes.forEach((node) => {
-                node.removeAttribute('slot');
-                node.dataset.panelIndex = String(index);
-                if (index === activeIndex) {
-                    panelInner.append(node);
-                }
-                else {
-                    this.inactivePanels.append(node);
-                }
-            });
-        });
-        this.panel.append(panelInner);
-        this.append(this.list, this.panel);
-        requestAnimationFrame(() => {
-            this.handleListScroll();
-            if (showIndicator)
-                this.updateIndicator(false);
-        });
-        this.isRendering = false;
-    }
-    select(index) {
-        const labels = this.labels;
-        const tabItems = this.tabItems;
-        if (!labels[index] || tabItems[index]?.disabled)
-            return;
-        this.activeIndex = index;
-        const id = tabItems[index]?.id || String(index);
-        this.setAttribute('selected-id', id);
-        this.dispatchEvent(new CustomEvent('db-change', {
-            detail: { index, label: labels[index], id },
-            bubbles: true,
-            composed: true,
-        }));
-        this.render();
-    }
-    handleKeyDown(event, index) {
-        const labels = this.labels;
-        const tabItems = this.tabItems;
-        let nextIndex = index;
-        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
-            nextIndex = (index + 1) % labels.length;
-        }
-        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
-            nextIndex = (index - 1 + labels.length) % labels.length;
-        }
-        else if (event.key === 'Home') {
-            nextIndex = 0;
-        }
-        else if (event.key === 'End') {
-            nextIndex = labels.length - 1;
-        }
-        else if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.select(index);
-            return;
-        }
-        else {
-            return;
-        }
-        event.preventDefault();
-        let attempts = 0;
-        while (tabItems[nextIndex]?.disabled && attempts < labels.length) {
-            if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
-                nextIndex = (nextIndex - 1 + labels.length) % labels.length;
-            }
-            else {
-                nextIndex = (nextIndex + 1) % labels.length;
-            }
-            attempts += 1;
-        }
-        this.tabButtons[nextIndex]?.focus();
-    }
-    updateIndicator(animate = false) {
-        const active = this.list?.querySelector('.designbase-wc-tabs__tab--selected');
-        if (!active || !this.indicator)
-            return;
-        const isVertical = this.orientation === 'vertical';
-        this.indicator.classList.toggle('designbase-wc-tabs__indicator--no-transition', !animate);
-        this.indicator.classList.add(isVertical
-            ? 'designbase-wc-tabs__indicator--vertical'
-            : 'designbase-wc-tabs__indicator--horizontal');
-        this.indicator.classList.add('designbase-wc-tabs__indicator--ready');
-        if (isVertical) {
-            this.indicator.style.width = '2px';
-            this.indicator.style.height = `${active.offsetHeight}px`;
-            this.indicator.style.transform = `translate3d(0, ${active.offsetTop}px, 0)`;
-        }
-        else {
-            this.indicator.style.width = `${active.offsetWidth}px`;
-            this.indicator.style.height = '2px';
-            this.indicator.style.transform = `translate3d(${active.offsetLeft}px, 0, 0)`;
-        }
-    }
-}
-if (!customElements.get('db-tabs')) {
-    customElements.define('db-tabs', DbTabs);
-}
-
-export { DbTabs };
+import{createDbIcon as t}from"./db-icons.js";const e=["s","m","l"],s=["horizontal","vertical"],i=["default","pills"];class DbTabs extends HTMLElement{constructor(){super(...arguments),this.tabButtons=[],this.inactivePanels=document.createDocumentFragment(),this.isRendering=!1,this.handleListScroll=()=>{if(!this.list)return;const t=this.list.scrollWidth>this.list.clientWidth,e=this.list.scrollLeft+this.list.clientWidth>=this.list.scrollWidth-5;this.list.classList.toggle("designbase-wc-tabs__list--show-gradient",t&&!e&&"horizontal"===this.orientation)}}static get observedAttributes(){return["labels","items","active-index","selected-id","orientation","size","variant","full-width"]}get labels(){const t=this.tabItems.map(t=>t.label);return t.length?t:(this.getAttribute("labels")||"").split(",").map(t=>t.trim()).filter(Boolean)}set labels(t){this.setAttribute("labels",Array.isArray(t)?t.join(","):t)}get tabItems(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}get items(){return this.tabItems}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}set tabItems(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}get activeIndex(){const t=this.getAttribute("selected-id");if(t){const e=this.tabItems.findIndex((e,s)=>(e.id||String(s))===t);if(e>=0)return e}return Number(this.getAttribute("active-index")||0)}set activeIndex(t){this.setAttribute("active-index",String(t))}get orientation(){return this.getAttribute("orientation")||"horizontal"}set orientation(t){this.setAttribute("orientation",t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}get variant(){return this.getAttribute("variant")||"default"}set variant(t){this.setAttribute("variant",t)}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(t){this.toggleAttribute("full-width",Boolean(t))}connectedCallback(){this.render(),this.list?.addEventListener("scroll",this.handleListScroll,{passive:!0}),window.addEventListener("resize",this.handleListScroll),this.childObserver=new MutationObserver(t=>{if(this.isRendering)return;t.some(t=>Array.from(t.addedNodes).some(t=>t instanceof HTMLElement&&(t.hasAttribute("slot")||void 0!==t.dataset.panelIndex)))&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.list?.removeEventListener("scroll",this.handleListScroll),window.removeEventListener("resize",this.handleListScroll),this.childObserver?.disconnect()}attributeChangedCallback(){this.isConnected&&this.render()}collectPanelContent(){const t=new Map,register=(e,s)=>{if(!(e instanceof HTMLElement)||"SLOT"===e.tagName)return;t.has(s)||t.set(s,[]);const i=t.get(s);i.includes(e)||i.push(e)};return Array.from(this.children).forEach(t=>{const e=t.getAttribute("slot")?.match(/^panel-(\d+)$/);if(e)return void register(t,Number(e[1]));const s=t.dataset.panelIndex;void 0!==s&&register(t,Number(s))}),this.panel?.querySelectorAll(":scope > .designbase-wc-tabs__panel-inner > [data-panel-index]").forEach(t=>{t instanceof HTMLElement&&register(t,Number(t.dataset.panelIndex))}),Array.from(this.inactivePanels.children).forEach(t=>{t instanceof HTMLElement&&void 0!==t.dataset.panelIndex&&register(t,Number(t.dataset.panelIndex))}),t}render(){this.isRendering=!0;const a=this.collectPanelContent(),n=this.labels,r=this.tabItems,l=Math.min(Math.max(this.activeIndex,0),Math.max(n.length-1,0)),d=e.includes(this.size)?this.size:"m",o=s.includes(this.orientation)?this.orientation:"horizontal",c=i.includes(this.variant)?this.variant:"default",h="default"===c;this.className=["designbase-wc-tabs",`designbase-wc-tabs--${o}`,`designbase-wc-tabs--${d}`,`designbase-wc-tabs--${c}`,this.fullWidth&&"designbase-wc-tabs--full-width"].filter(Boolean).join(" "),this.querySelectorAll(":scope > .designbase-wc-tabs__list, :scope > .designbase-wc-tabs__panel").forEach(t=>t.remove()),this.list=document.createElement("div"),this.list.className=["designbase-wc-tabs__list",`designbase-wc-tabs__list--${o}`,this.fullWidth&&"designbase-wc-tabs__list--full-width"].filter(Boolean).join(" "),this.list.setAttribute("role","tablist"),this.list.setAttribute("aria-orientation",o),this.list.setAttribute("aria-label","탭 목록"),this.tabButtons=[],n.forEach((e,s)=>{const i=r[s],a=Boolean(i?.disabled),n=s===l,o=document.createElement("button");if(o.type="button",o.className=["designbase-wc-tabs__tab",n&&"designbase-wc-tabs__tab--selected",a&&"designbase-wc-tabs__tab--disabled"].filter(Boolean).join(" "),o.setAttribute("role","tab"),o.setAttribute("aria-selected",String(n)),o.setAttribute("aria-controls",`panel-${s}`),o.id=`tab-${s}`,o.tabIndex=n?0:-1,o.disabled=a,i?.icon){const e=document.createElement("span");e.className="designbase-wc-tabs__tab-icon";const s="s"===d?16:"l"===d?20:18;e.append(t(i.icon,s)),o.append(e)}const c=document.createElement("span");c.className="designbase-wc-tabs__tab-label",c.textContent=e,o.append(c),o.addEventListener("click",()=>this.select(s)),o.addEventListener("keydown",t=>this.handleKeyDown(t,s)),this.list?.append(o),this.tabButtons.push(o)}),h?(this.indicator=document.createElement("span"),this.indicator.className="designbase-wc-tabs__indicator designbase-wc-tabs__indicator--no-transition",this.list.append(this.indicator),requestAnimationFrame(()=>this.updateIndicator(!1))):this.indicator=void 0,this.panel=document.createElement("div"),this.panel.className="designbase-wc-tabs__panel",this.panel.setAttribute("role","tabpanel"),this.panel.id=`panel-${l}`,this.panel.setAttribute("aria-labelledby",`tab-${l}`),this.panel.tabIndex=0;const b=document.createElement("div");b.className="designbase-wc-tabs__panel-inner",a.forEach((t,e)=>{t.forEach(t=>{t.removeAttribute("slot"),t.dataset.panelIndex=String(e),e===l?b.append(t):this.inactivePanels.append(t)})}),this.panel.append(b),this.append(this.list,this.panel),requestAnimationFrame(()=>{this.handleListScroll(),h&&this.updateIndicator(!1)}),this.isRendering=!1}select(t){const e=this.labels,s=this.tabItems;if(!e[t]||s[t]?.disabled)return;this.activeIndex=t;const i=s[t]?.id||String(t);this.setAttribute("selected-id",i),this.dispatchEvent(new CustomEvent("db-change",{detail:{index:t,label:e[t],id:i},bubbles:!0,composed:!0})),this.render()}handleKeyDown(t,e){const s=this.labels,i=this.tabItems;let a=e;if("ArrowRight"===t.key||"ArrowDown"===t.key)a=(e+1)%s.length;else if("ArrowLeft"===t.key||"ArrowUp"===t.key)a=(e-1+s.length)%s.length;else if("Home"===t.key)a=0;else{if("End"!==t.key)return"Enter"===t.key||" "===t.key?(t.preventDefault(),void this.select(e)):void 0;a=s.length-1}t.preventDefault();let n=0;for(;i[a]?.disabled&&n<s.length;)a="ArrowLeft"===t.key||"ArrowUp"===t.key?(a-1+s.length)%s.length:(a+1)%s.length,n+=1;this.tabButtons[a]?.focus()}updateIndicator(t=!1){const e=this.list?.querySelector(".designbase-wc-tabs__tab--selected");if(!e||!this.indicator)return;const s="vertical"===this.orientation;this.indicator.classList.toggle("designbase-wc-tabs__indicator--no-transition",!t),this.indicator.classList.add(s?"designbase-wc-tabs__indicator--vertical":"designbase-wc-tabs__indicator--horizontal"),this.indicator.classList.add("designbase-wc-tabs__indicator--ready"),s?(this.indicator.style.width="2px",this.indicator.style.height=`${e.offsetHeight}px`,this.indicator.style.transform=`translate3d(0, ${e.offsetTop}px, 0)`):(this.indicator.style.width=`${e.offsetWidth}px`,this.indicator.style.height="2px",this.indicator.style.transform=`translate3d(${e.offsetLeft}px, 0, 0)`)}}customElements.get("db-tabs")||customElements.define("db-tabs",DbTabs);export{DbTabs};

package/dist/esm/components/db-testimonial.d.ts

@@ -3,6 +3,8 @@ declare class DbTestimonial extends HTMLElement {
     private built;
     private innerEl?;
     private quoteEl?;
+    private backgroundEl?;
+    private logoEl?;
     private footerEl?;
     private extraEl?;
     private avatarWrapEl?;

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

@@ -1,162 +1 @@
-const CLASS = 'designbase-wc-testimonial';
-const VARIANTS = ['list', 'card'];
-function clampRating(rating, maxRating) {
-    if (typeof rating !== 'number' || Number.isNaN(rating))
-        return undefined;
-    if (rating < 0)
-        return 0;
-    if (rating > maxRating)
-        return maxRating;
-    return Math.round(rating * 10) / 10;
-}
-class DbTestimonial extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-    }
-    static get observedAttributes() {
-        return [
-            'quote',
-            'author',
-            'role',
-            'company',
-            'avatar',
-            'avatar-initials',
-            'rating',
-            'max-rating',
-            'variant',
-            'align',
-        ];
-    }
-    connectedCallback() {
-        if (!this.built) {
-            this.built = true;
-            this.build();
-        }
-        this.updateUI();
-    }
-    attributeChangedCallback() {
-        if (!this.built)
-            return;
-        this.updateUI();
-    }
-    build() {
-        this.innerEl = document.createElement('div');
-        this.quoteEl = document.createElement('p');
-        this.quoteEl.className = `${CLASS}__quote`;
-        this.footerEl = document.createElement('div');
-        this.footerEl.className = `${CLASS}__footer`;
-        this.avatarWrapEl = document.createElement('div');
-        this.avatarWrapEl.className = `${CLASS}__avatar`;
-        this.avatarEl = document.createElement('db-avatar');
-        this.avatarEl.className = `${CLASS}__avatar-image`;
-        this.avatarWrapEl.append(this.avatarEl);
-        const meta = document.createElement('div');
-        meta.className = `${CLASS}__meta`;
-        this.authorEl = document.createElement('span');
-        this.authorEl.className = `${CLASS}__author`;
-        this.roleEl = document.createElement('span');
-        this.roleEl.className = `${CLASS}__role`;
-        this.ratingEl = document.createElement('db-rating');
-        this.ratingEl.className = `${CLASS}__rating`;
-        this.ratingEl.setAttribute('display', 'stars');
-        this.ratingEl.setAttribute('variant', 'inline');
-        this.ratingEl.setAttribute('allow-half', '');
-        this.ratingEl.setAttribute('readonly', '');
-        this.ratingEl.setAttribute('hover-effect', 'false');
-        this.ratingEl.setAttribute('color', 'primary');
-        this.ratingEl.hidden = true;
-        meta.append(this.authorEl, this.roleEl, this.ratingEl);
-        this.footerEl.append(this.avatarWrapEl, meta);
-        this.extraEl = document.createElement('div');
-        this.extraEl.className = `${CLASS}__extra`;
-        this.extraEl.hidden = true;
-        this.innerEl.append(this.quoteEl, this.footerEl, this.extraEl);
-        this.append(this.innerEl);
-    }
-    getVariant() {
-        const value = this.getAttribute('variant') || 'card';
-        return VARIANTS.includes(value) ? value : 'card';
-    }
-    getAvatarSize() {
-        return this.getVariant() === 'list' ? 's' : 'm';
-    }
-    syncExtraContent() {
-        if (!this.extraEl)
-            return;
-        const slotted = Array.from(this.childNodes).filter((node) => node !== this.innerEl &&
-            (node.nodeType === Node.ELEMENT_NODE ||
-                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
-        if (slotted.length === 0) {
-            this.extraEl.hidden = true;
-            this.extraEl.replaceChildren();
-            return;
-        }
-        this.extraEl.hidden = false;
-        this.extraEl.replaceChildren(...slotted.map((node) => node.cloneNode(true)));
-    }
-    updateUI() {
-        const quote = this.getAttribute('quote') || '';
-        const author = this.getAttribute('author') || '';
-        const role = this.getAttribute('role') || '';
-        const company = this.getAttribute('company') || '';
-        const avatar = this.getAttribute('avatar') || '';
-        const avatarInitials = this.getAttribute('avatar-initials') || '';
-        const ratingRaw = this.getAttribute('rating');
-        const maxRating = Number(this.getAttribute('max-rating') || 5);
-        const rating = ratingRaw !== null && ratingRaw !== '' ? clampRating(Number(ratingRaw), maxRating) : undefined;
-        const variant = this.getVariant();
-        const align = this.getAttribute('align') || 'left';
-        const className = [
-            CLASS,
-            `${CLASS}--variant-${variant}`,
-            align !== 'left' ? `${CLASS}--align-${align}` : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.className = className;
-        if (this.innerEl)
-            this.innerEl.className = `${CLASS}__inner`;
-        if (this.quoteEl) {
-            this.quoteEl.textContent = quote ? `“${quote}”` : '';
-        }
-        if (this.authorEl)
-            this.authorEl.textContent = author;
-        const roleText = [role, company].filter(Boolean).join(' · ');
-        if (this.roleEl) {
-            this.roleEl.textContent = roleText;
-            this.roleEl.hidden = !roleText;
-        }
-        const shouldRenderAvatar = Boolean(avatar || avatarInitials);
-        if (this.avatarWrapEl)
-            this.avatarWrapEl.hidden = !shouldRenderAvatar;
-        if (this.avatarEl && shouldRenderAvatar) {
-            this.avatarEl.setAttribute('size', this.getAvatarSize());
-            if (avatar)
-                this.avatarEl.setAttribute('src', avatar);
-            else
-                this.avatarEl.removeAttribute('src');
-            if (avatarInitials)
-                this.avatarEl.setAttribute('initials', avatarInitials);
-            else
-                this.avatarEl.removeAttribute('initials');
-            this.avatarEl.setAttribute('alt', `${author} 프로필 이미지`);
-        }
-        if (this.ratingEl) {
-            if (typeof rating === 'number') {
-                this.ratingEl.hidden = false;
-                this.ratingEl.setAttribute('value', String(rating));
-                this.ratingEl.setAttribute('max-value', String(maxRating));
-                this.ratingEl.setAttribute('size', 's');
-            }
-            else {
-                this.ratingEl.hidden = true;
-            }
-        }
-        this.syncExtraContent();
-    }
-}
-if (!customElements.get('db-testimonial'))
-    customElements.define('db-testimonial', DbTestimonial);
-
-export { DbTestimonial };
+const t="designbase-wc-testimonial",e=["list","card","logo","image","text"];class DbTestimonial extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["quote","author","role","company","avatar","avatar-initials","rating","max-rating","variant","logo","logo-alt","image","image-alt","tone","align"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}build(){this.innerEl=document.createElement("div"),this.quoteEl=document.createElement("p"),this.quoteEl.className=`${t}__quote`,this.backgroundEl=document.createElement("img"),this.backgroundEl.className=`${t}__background`,this.backgroundEl.hidden=!0,this.logoEl=document.createElement("img"),this.logoEl.className=`${t}__logo`,this.logoEl.hidden=!0,this.footerEl=document.createElement("div"),this.footerEl.className=`${t}__footer`,this.avatarWrapEl=document.createElement("div"),this.avatarWrapEl.className=`${t}__avatar`,this.avatarEl=document.createElement("db-avatar"),this.avatarEl.className=`${t}__avatar-image`,this.avatarWrapEl.append(this.avatarEl);const e=document.createElement("div");e.className=`${t}__meta`,this.authorEl=document.createElement("span"),this.authorEl.className=`${t}__author`,this.roleEl=document.createElement("span"),this.roleEl.className=`${t}__role`,this.ratingEl=document.createElement("db-rating"),this.ratingEl.className=`${t}__rating`,this.ratingEl.setAttribute("display","stars"),this.ratingEl.setAttribute("variant","inline"),this.ratingEl.setAttribute("allow-half",""),this.ratingEl.setAttribute("readonly",""),this.ratingEl.setAttribute("hover-effect","false"),this.ratingEl.setAttribute("color","primary"),this.ratingEl.hidden=!0,e.append(this.authorEl,this.roleEl,this.ratingEl),this.footerEl.append(this.avatarWrapEl,e),this.extraEl=document.createElement("div"),this.extraEl.className=`${t}__extra`,this.extraEl.hidden=!0,this.innerEl.append(this.logoEl,this.quoteEl,this.footerEl,this.extraEl),this.append(this.backgroundEl,this.innerEl)}getVariant(){const t=this.getAttribute("variant")||"card";return e.includes(t)?t:"card"}getAvatarSize(){return"list"===this.getVariant()?"s":"m"}syncExtraContent(){if(!this.extraEl)return;const t=Array.from(this.childNodes).filter(t=>t!==this.innerEl&&(t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent?.trim()));if(0===t.length)return this.extraEl.hidden=!0,void this.extraEl.replaceChildren();this.extraEl.hidden=!1,this.extraEl.replaceChildren(...t.map(t=>t.cloneNode(!0)))}updateUI(){const e=this.getAttribute("quote")||"",i=this.getAttribute("author")||"",a=this.getAttribute("role")||"",r=this.getAttribute("company")||"",s=this.getAttribute("avatar")||"",l=this.getAttribute("avatar-initials")||"",n=this.getAttribute("rating"),o=Number(this.getAttribute("max-rating")||5),h=null!==n&&""!==n?function clampRating(t,e){if("number"==typeof t&&!Number.isNaN(t))return t<0?0:t>e?e:Math.round(10*t)/10}(Number(n),o):void 0,E=this.getVariant(),u=this.getAttribute("logo")||"",d=this.getAttribute("logo-alt")||"",g=this.getAttribute("image")||"",c=this.getAttribute("image-alt")||"",m=this.getAttribute("tone")||"violet",b=this.getAttribute("align")||"left",v=[t,`${t}--variant-${E}`,`${t}--tone-${m}`,"left"!==b?`${t}--align-${b}`:""].filter(Boolean).join(" ");this.className=v,this.innerEl&&(this.innerEl.className=`${t}__inner`),this.quoteEl&&(this.quoteEl.textContent=e?`“${e}”`:""),this.backgroundEl&&(this.backgroundEl.hidden="image"!==E||!g,g&&(this.backgroundEl.src=g,this.backgroundEl.alt=c)),this.logoEl&&(this.logoEl.hidden="logo"!==E||!u,u&&(this.logoEl.src=u,this.logoEl.alt=d)),this.authorEl&&(this.authorEl.textContent=i);const p=[a,r].filter(Boolean).join(" · ");this.roleEl&&(this.roleEl.textContent=p,this.roleEl.hidden=!p);const A=Boolean(s||l);this.avatarWrapEl&&(this.avatarWrapEl.hidden=!A),this.avatarEl&&A&&(this.avatarEl.setAttribute("size",this.getAvatarSize()),s?this.avatarEl.setAttribute("src",s):this.avatarEl.removeAttribute("src"),l?this.avatarEl.setAttribute("initials",l):this.avatarEl.removeAttribute("initials"),this.avatarEl.setAttribute("alt",`${i} 프로필 이미지`)),this.ratingEl&&("number"==typeof h?(this.ratingEl.hidden=!1,this.ratingEl.setAttribute("value",String(h)),this.ratingEl.setAttribute("max-value",String(o)),this.ratingEl.setAttribute("size","s")):this.ratingEl.hidden=!0),this.syncExtraContent()}}customElements.get("db-testimonial")||customElements.define("db-testimonial",DbTestimonial);export{DbTestimonial};