@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,335 @@
-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};
+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 };

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

@@ -1 +1,162 @@
-const t="designbase-wc-testimonial",e=["list","card"];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","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.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.quoteEl,this.footerEl,this.extraEl),this.append(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"),h=Number(this.getAttribute("max-rating")||5),o=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),h):void 0,E=this.getVariant(),u=this.getAttribute("align")||"left",d=[t,`${t}--variant-${E}`,"left"!==u?`${t}--align-${u}`:""].filter(Boolean).join(" ");this.className=d,this.innerEl&&(this.innerEl.className=`${t}__inner`),this.quoteEl&&(this.quoteEl.textContent=e?`“${e}”`:""),this.authorEl&&(this.authorEl.textContent=i);const c=[a,r].filter(Boolean).join(" · ");this.roleEl&&(this.roleEl.textContent=c,this.roleEl.hidden=!c);const m=Boolean(s||l);this.avatarWrapEl&&(this.avatarWrapEl.hidden=!m),this.avatarEl&&m&&(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 o?(this.ratingEl.hidden=!1,this.ratingEl.setAttribute("value",String(o)),this.ratingEl.setAttribute("max-value",String(h)),this.ratingEl.setAttribute("size","s")):this.ratingEl.hidden=!0),this.syncExtraContent()}}customElements.get("db-testimonial")||customElements.define("db-testimonial",DbTestimonial);export{DbTestimonial};
+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 };