@designbasekorea/ui-wc 0.5.6 → 0.6.1

package/dist/esm/components/db-section-pricing.js

@@ -1,166 +1 @@
-import { applySectionBlockHeader } from './section-block-header-utils.js';
-import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
-
-const CLASS = 'designbase-wc-section-pricing';
-class DbSectionPricing extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-    }
-    static get observedAttributes() {
-        return [
-            'headline',
-            'subtitle',
-            'description',
-            'badge',
-            'plans',
-            'columns',
-            'align',
-            'content-padding',
-            'size',
-            'full-width',
-            'full-height',
-            'overflow-visible',
-        ];
-    }
-    connectedCallback() {
-        this.style.display = 'block';
-        if (!this.built) {
-            this.built = true;
-            this.build();
-        }
-        this.updateUI();
-    }
-    attributeChangedCallback() {
-        if (!this.built)
-            return;
-        this.updateUI();
-    }
-    parsePlans() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('plans') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    parseBadge() {
-        try {
-            const raw = this.getAttribute('badge');
-            if (!raw)
-                return null;
-            return JSON.parse(raw);
-        }
-        catch {
-            return null;
-        }
-    }
-    build() {
-        this.innerEl = document.createElement('div');
-        this.innerEl.className = `${CLASS}__inner`;
-        this.headerEl = document.createElement('div');
-        this.headerEl.className = 'designbase-wc-section-block-header';
-        this.headerEl.innerHTML = `
-            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>
-            <h2 class="designbase-wc-section-block-header__headline"></h2>
-            <p class="designbase-wc-section-block-header__subtitle"></p>
-            <p class="designbase-wc-section-block-header__description"></p>
-        `;
-        this.gridEl = document.createElement('div');
-        this.gridEl.className = `${CLASS}__grid`;
-        this.innerEl.append(this.headerEl, this.gridEl);
-        this.append(this.innerEl);
-    }
-    updateUI() {
-        const headline = this.getAttribute('headline') || '요금제';
-        const subtitle = this.getAttribute('subtitle') || '';
-        const description = this.getAttribute('description') || '';
-        const columns = this.getAttribute('columns') || '3';
-        const contentPadding = this.getAttribute('content-padding') || 'l';
-        const align = this.getAttribute('align') || 'center';
-        const badge = this.parseBadge();
-        const plans = this.parsePlans();
-        this.className = [CLASS, `${CLASS}--cols-${columns}`, `${CLASS}--padding-${contentPadding}`].join(' ');
-        syncMarketingBlockHost(this, CLASS);
-        if (this.headerEl) {
-            applySectionBlockHeader(this.headerEl, {
-                headline,
-                subtitle,
-                description,
-                badge,
-                align,
-            });
-        }
-        if (!this.gridEl)
-            return;
-        this.gridEl.replaceChildren();
-        plans.forEach((plan) => {
-            const card = document.createElement('article');
-            card.className = [
-                `${CLASS}__plan-card`,
-                plan.highlighted ? `${CLASS}__plan-card--highlighted` : '',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            const body = document.createElement('div');
-            body.className = `${CLASS}__plan-body`;
-            if (plan.badge) {
-                const planBadge = document.createElement('db-badge');
-                planBadge.setAttribute('variant', 'primary');
-                planBadge.setAttribute('badge-style', 'filled');
-                planBadge.setAttribute('size', 's');
-                planBadge.className = `${CLASS}__plan-badge`;
-                planBadge.textContent = plan.badge;
-                body.append(planBadge);
-            }
-            const name = document.createElement('h3');
-            name.className = `${CLASS}__plan-name`;
-            name.textContent = plan.name;
-            const priceRow = document.createElement('div');
-            priceRow.className = `${CLASS}__price-row`;
-            const price = document.createElement('span');
-            price.className = `${CLASS}__price`;
-            price.textContent = plan.price;
-            priceRow.append(price);
-            if (plan.period) {
-                const period = document.createElement('span');
-                period.className = `${CLASS}__period`;
-                period.textContent = `/ ${plan.period}`;
-                priceRow.append(period);
-            }
-            body.append(name, priceRow);
-            if (plan.description) {
-                const planDesc = document.createElement('p');
-                planDesc.className = `${CLASS}__plan-description`;
-                planDesc.textContent = plan.description;
-                body.append(planDesc);
-            }
-            const features = document.createElement('ul');
-            features.className = `${CLASS}__features`;
-            plan.features.forEach((feature) => {
-                const li = document.createElement('li');
-                li.textContent = feature;
-                features.append(li);
-            });
-            body.append(features);
-            const footer = document.createElement('div');
-            footer.className = `${CLASS}__plan-footer`;
-            const cta = document.createElement('db-button');
-            cta.className = `${CLASS}__cta`;
-            cta.setAttribute('variant', plan.cta.variant || (plan.highlighted ? 'primary' : 'tertiary'));
-            cta.setAttribute('size', 'm');
-            cta.setAttribute('full-width', '');
-            if (plan.cta.href)
-                cta.setAttribute('href', plan.cta.href);
-            cta.textContent = plan.cta.label;
-            footer.append(cta);
-            card.append(body, footer);
-            this.gridEl.append(card);
-        });
-    }
-}
-if (!customElements.get('db-section-pricing'))
-    customElements.define('db-section-pricing', DbSectionPricing);
-
-export { DbSectionPricing };
+import{applySectionBlockHeader as e}from"./section-block-header-utils.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const i="designbase-wc-section-pricing";class DbSectionPricing extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","plans","columns","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parsePlans(){try{const e=JSON.parse(this.getAttribute("plans")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${i}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.gridEl=document.createElement("div"),this.gridEl.className=`${i}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const n=this.getAttribute("headline")||"요금제",s=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",c=this.getAttribute("columns")||"3",r=this.getAttribute("content-padding")||"l",l=this.getAttribute("align")||"center",d=this.parseBadge(),o=this.parsePlans();this.className=[i,`${i}--cols-${c}`,`${i}--padding-${r}`].join(" "),t(this,i),this.headerEl&&e(this.headerEl,{headline:n,subtitle:s,description:a,badge:d,align:l}),this.gridEl&&(this.gridEl.replaceChildren(),o.forEach(e=>{const t=document.createElement("article");t.className=[`${i}__plan-card`,e.highlighted?`${i}__plan-card--highlighted`:""].filter(Boolean).join(" ");const n=document.createElement("div");if(n.className=`${i}__plan-body`,e.badge){const t=document.createElement("db-badge");t.setAttribute("variant","primary"),t.setAttribute("badge-style","filled"),t.setAttribute("size","s"),t.className=`${i}__plan-badge`,t.textContent=e.badge,n.append(t)}const s=document.createElement("h3");s.className=`${i}__plan-name`,s.textContent=e.name;const a=document.createElement("div");a.className=`${i}__price-row`;const c=document.createElement("span");if(c.className=`${i}__price`,c.textContent=e.price,a.append(c),e.period){const t=document.createElement("span");t.className=`${i}__period`,t.textContent=`/ ${e.period}`,a.append(t)}if(n.append(s,a),e.description){const t=document.createElement("p");t.className=`${i}__plan-description`,t.textContent=e.description,n.append(t)}const r=document.createElement("ul");r.className=`${i}__features`,e.features.forEach(e=>{const t=document.createElement("li");t.textContent=e,r.append(t)}),n.append(r);const l=document.createElement("div");l.className=`${i}__plan-footer`;const d=document.createElement("db-button");d.className=`${i}__cta`,d.setAttribute("variant",e.cta.variant||(e.highlighted?"primary":"tertiary")),d.setAttribute("size","m"),d.setAttribute("full-width",""),e.cta.href&&d.setAttribute("href",e.cta.href),d.textContent=e.cta.label,l.append(d),t.append(n,l),this.gridEl.append(t)}))}}customElements.get("db-section-pricing")||customElements.define("db-section-pricing",DbSectionPricing);export{DbSectionPricing};

package/dist/esm/components/db-section-stats.js

@@ -1,129 +1 @@
-import { applySectionBlockHeader } from './section-block-header-utils.js';
-import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
-
-const CLASS = 'designbase-wc-section-stats';
-class DbSectionStats extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-    }
-    static get observedAttributes() {
-        return [
-            'headline',
-            'subtitle',
-            'description',
-            'badge',
-            'items',
-            'columns',
-            'tinted',
-            'align',
-            'content-padding',
-            'size',
-            'full-width',
-            'full-height',
-            'overflow-visible',
-        ];
-    }
-    connectedCallback() {
-        this.style.display = 'block';
-        if (!this.built) {
-            this.built = true;
-            this.build();
-        }
-        this.updateUI();
-    }
-    attributeChangedCallback() {
-        if (!this.built)
-            return;
-        this.updateUI();
-    }
-    parseItems() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('items') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    parseBadge() {
-        try {
-            const raw = this.getAttribute('badge');
-            if (!raw)
-                return null;
-            return JSON.parse(raw);
-        }
-        catch {
-            return null;
-        }
-    }
-    build() {
-        this.innerEl = document.createElement('div');
-        this.innerEl.className = `${CLASS}__inner`;
-        this.headerEl = document.createElement('div');
-        this.headerEl.className = 'designbase-wc-section-block-header';
-        this.headerEl.innerHTML = `
-            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>
-            <h2 class="designbase-wc-section-block-header__headline"></h2>
-            <p class="designbase-wc-section-block-header__subtitle"></p>
-            <p class="designbase-wc-section-block-header__description"></p>
-        `;
-        this.gridEl = document.createElement('div');
-        this.gridEl.className = `${CLASS}__grid`;
-        this.innerEl.append(this.headerEl, this.gridEl);
-        this.append(this.innerEl);
-    }
-    updateUI() {
-        const headline = this.getAttribute('headline') || '';
-        const subtitle = this.getAttribute('subtitle') || '';
-        const description = this.getAttribute('description') || '';
-        const columns = this.getAttribute('columns') || '4';
-        const contentPadding = this.getAttribute('content-padding') || 'l';
-        const align = this.getAttribute('align') || 'center';
-        const tinted = this.hasAttribute('tinted');
-        const badge = this.parseBadge();
-        const items = this.parseItems();
-        headline || subtitle || description || badge?.text;
-        this.className = [
-            CLASS,
-            `${CLASS}--cols-${columns}`,
-            `${CLASS}--padding-${contentPadding}`,
-            tinted && `${CLASS}--tinted`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        syncMarketingBlockHost(this, CLASS);
-        if (this.headerEl) {
-            const hasHeader = headline || subtitle || description || badge?.text;
-            this.headerEl.hidden = !hasHeader;
-            applySectionBlockHeader(this.headerEl, {
-                headline,
-                subtitle,
-                description,
-                badge,
-                align,
-            });
-        }
-        if (!this.gridEl)
-            return;
-        this.gridEl.replaceChildren();
-        items.forEach((item) => {
-            const stat = document.createElement('db-stat');
-            stat.setAttribute('value', String(item.value));
-            stat.setAttribute('label', item.label);
-            stat.setAttribute('variant', 'minimal');
-            stat.setAttribute('layout', 'vertical');
-            stat.setAttribute('size', 'l');
-            if (item.description) {
-                stat.setAttribute('description', item.description);
-                stat.setAttribute('show-description', '');
-            }
-            stat.className = `${CLASS}__stat`;
-            this.gridEl.append(stat);
-        });
-    }
-}
-if (!customElements.get('db-section-stats'))
-    customElements.define('db-section-stats', DbSectionStats);
-
-export { DbSectionStats };
+import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as e}from"./marketing-block-host-utils.js";const i="designbase-wc-section-stats";class DbSectionStats extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","items","columns","tinted","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseItems(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${i}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.gridEl=document.createElement("div"),this.gridEl.className=`${i}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const s=this.getAttribute("headline")||"",n=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",r=this.getAttribute("columns")||"4",l=this.getAttribute("content-padding")||"l",d=this.getAttribute("align")||"center",c=this.hasAttribute("tinted"),h=this.parseBadge(),o=this.parseItems();if(this.className=[i,`${i}--cols-${r}`,`${i}--padding-${l}`,c&&`${i}--tinted`].filter(Boolean).join(" "),e(this,i),this.headerEl){const e=s||n||a||h?.text;this.headerEl.hidden=!e,t(this.headerEl,{headline:s,subtitle:n,description:a,badge:h,align:d})}this.gridEl&&(this.gridEl.replaceChildren(),o.forEach(t=>{const e=document.createElement("db-stat");e.setAttribute("value",String(t.value)),e.setAttribute("label",t.label),e.setAttribute("variant","minimal"),e.setAttribute("layout","vertical"),e.setAttribute("size","l"),t.description&&(e.setAttribute("description",t.description),e.setAttribute("show-description","")),e.className=`${i}__stat`,this.gridEl.append(e)}))}}customElements.get("db-section-stats")||customElements.define("db-section-stats",DbSectionStats);export{DbSectionStats};

package/dist/esm/components/db-section-testimonials.js

@@ -1,252 +1 @@
-import { createDbIcon } from './db-icons.js';
-import { applySectionBlockHeader } from './section-block-header-utils.js';
-import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
-
-const CLASS = 'designbase-wc-section-testimonials';
-class DbSectionTestimonials extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-        this.carouselIndex = 0;
-    }
-    static get observedAttributes() {
-        return [
-            'headline',
-            'subtitle',
-            'description',
-            'badge',
-            'items',
-            'variant',
-            'columns',
-            'align',
-            'content-padding',
-            'size',
-            'full-width',
-            'full-height',
-            'overflow-visible',
-        ];
-    }
-    connectedCallback() {
-        this.style.display = 'block';
-        if (!this.built) {
-            this.built = true;
-            this.build();
-        }
-        this.updateUI();
-    }
-    disconnectedCallback() {
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = undefined;
-    }
-    attributeChangedCallback() {
-        if (!this.built)
-            return;
-        this.carouselIndex = 0;
-        this.updateUI();
-    }
-    parseItems() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('items') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    parseBadge() {
-        try {
-            const raw = this.getAttribute('badge');
-            if (!raw)
-                return null;
-            return JSON.parse(raw);
-        }
-        catch {
-            return null;
-        }
-    }
-    buildHeader(parent) {
-        this.headerEl = document.createElement('div');
-        this.headerEl.className = 'designbase-wc-section-block-header';
-        const badge = document.createElement('db-badge');
-        badge.className = 'designbase-wc-section-block-header__badge';
-        badge.hidden = true;
-        badge.dataset.role = 'badge';
-        const headline = document.createElement('h2');
-        headline.className = 'designbase-wc-section-block-header__headline';
-        headline.dataset.role = 'headline';
-        const subtitle = document.createElement('p');
-        subtitle.className = 'designbase-wc-section-block-header__subtitle';
-        subtitle.dataset.role = 'subtitle';
-        const description = document.createElement('p');
-        description.className = 'designbase-wc-section-block-header__description';
-        description.dataset.role = 'description';
-        this.headerEl.append(badge, headline, subtitle, description);
-        parent.append(this.headerEl);
-    }
-    build() {
-        this.innerEl = document.createElement('div');
-        this.innerEl.className = `${CLASS}__inner`;
-        this.buildHeader(this.innerEl);
-        this.contentEl = document.createElement('div');
-        this.contentEl.className = `${CLASS}__grid`;
-        this.innerEl.append(this.contentEl);
-        this.append(this.innerEl);
-    }
-    createTestimonialEl(item) {
-        const el = document.createElement('db-testimonial');
-        el.setAttribute('variant', 'card');
-        el.setAttribute('quote', item.quote);
-        el.setAttribute('author', item.author);
-        if (item.role)
-            el.setAttribute('role', item.role);
-        if (item.company)
-            el.setAttribute('company', item.company);
-        if (item.avatar)
-            el.setAttribute('avatar', item.avatar);
-        if (item.rating != null)
-            el.setAttribute('rating', String(item.rating));
-        el.setAttribute('align', 'center');
-        return el;
-    }
-    updateHeader() {
-        if (!this.headerEl)
-            return;
-        applySectionBlockHeader(this.headerEl, {
-            headline: this.getAttribute('headline') || '고객 후기',
-            subtitle: this.getAttribute('subtitle') || '',
-            description: this.getAttribute('description') || '',
-            badge: this.parseBadge(),
-            align: this.getAttribute('align') || 'center',
-        });
-    }
-    clampCarouselIndex(count) {
-        if (count <= 0) {
-            this.carouselIndex = 0;
-            return;
-        }
-        if (this.carouselIndex >= count)
-            this.carouselIndex = 0;
-        if (this.carouselIndex < 0)
-            this.carouselIndex = 0;
-    }
-    updateCarouselTransform() {
-        if (!this.carouselViewport || !this.carouselTrack)
-            return;
-        const width = this.carouselViewport.clientWidth;
-        this.carouselTrack.style.transform = `translate3d(-${this.carouselIndex * width}px, 0, 0)`;
-        if (this.carouselIndicator) {
-            this.carouselIndicator.setAttribute('current', String(this.carouselIndex));
-        }
-    }
-    goToCarouselSlide(index, count) {
-        if (count <= 0)
-            return;
-        this.carouselIndex = Math.max(0, Math.min(index, count - 1));
-        this.updateCarouselTransform();
-    }
-    renderGrid(items) {
-        if (!this.contentEl)
-            return;
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = undefined;
-        this.carouselViewport = undefined;
-        this.carouselTrack = undefined;
-        this.carouselIndicator = undefined;
-        this.contentEl.className = `${CLASS}__grid`;
-        this.contentEl.replaceChildren();
-        items.forEach((item) => {
-            this.contentEl.append(this.createTestimonialEl(item));
-        });
-    }
-    renderCarousel(items) {
-        if (!this.contentEl)
-            return;
-        this.contentEl.replaceChildren();
-        this.contentEl.className = `${CLASS}__carousel`;
-        this.clampCarouselIndex(items.length);
-        if (items.length === 0)
-            return;
-        const viewport = document.createElement('div');
-        viewport.className = `${CLASS}__carousel-viewport`;
-        const track = document.createElement('div');
-        track.className = `${CLASS}__carousel-track`;
-        items.forEach((item) => {
-            const slide = document.createElement('div');
-            slide.className = `${CLASS}__carousel-slide`;
-            slide.append(this.createTestimonialEl(item));
-            track.append(slide);
-        });
-        viewport.append(track);
-        this.carouselViewport = viewport;
-        this.carouselTrack = track;
-        if (items.length > 1) {
-            const prev = document.createElement('button');
-            prev.type = 'button';
-            prev.className = `${CLASS}__carousel-nav ${CLASS}__carousel-nav--prev`;
-            prev.setAttribute('aria-label', '이전 후기');
-            prev.append(createDbIcon('chevron-left', 20));
-            prev.addEventListener('click', () => {
-                const next = this.carouselIndex - 1;
-                this.goToCarouselSlide(next < 0 ? items.length - 1 : next, items.length);
-            });
-            const next = document.createElement('button');
-            next.type = 'button';
-            next.className = `${CLASS}__carousel-nav ${CLASS}__carousel-nav--next`;
-            next.setAttribute('aria-label', '다음 후기');
-            next.append(createDbIcon('chevron-right', 20));
-            next.addEventListener('click', () => {
-                const nextIndex = this.carouselIndex + 1;
-                this.goToCarouselSlide(nextIndex >= items.length ? 0 : nextIndex, items.length);
-            });
-            viewport.append(prev, next);
-            const controls = document.createElement('div');
-            controls.className = `${CLASS}__carousel-controls`;
-            const indicator = document.createElement('db-indicator');
-            indicator.className = `${CLASS}__carousel-indicator`;
-            indicator.setAttribute('current', String(this.carouselIndex));
-            indicator.setAttribute('total', String(items.length));
-            indicator.setAttribute('type', 'dots');
-            indicator.setAttribute('size', 's');
-            indicator.setAttribute('clickable', '');
-            indicator.addEventListener('db-step-click', ((event) => {
-                const customEvent = event;
-                this.goToCarouselSlide(customEvent.detail.index, items.length);
-            }));
-            this.carouselIndicator = indicator;
-            controls.append(indicator);
-            this.contentEl.append(viewport, controls);
-        }
-        else {
-            this.contentEl.append(viewport);
-        }
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = new ResizeObserver(() => this.updateCarouselTransform());
-        this.resizeObserver.observe(viewport);
-        requestAnimationFrame(() => this.updateCarouselTransform());
-    }
-    updateUI() {
-        const variant = this.getAttribute('variant') || 'grid';
-        const columns = this.getAttribute('columns') || '3';
-        const contentPadding = this.getAttribute('content-padding') || 'l';
-        const items = this.parseItems();
-        this.className = [
-            CLASS,
-            `${CLASS}--${variant}`,
-            `${CLASS}--cols-${columns}`,
-            `${CLASS}--padding-${contentPadding}`,
-        ].join(' ');
-        syncMarketingBlockHost(this, CLASS);
-        this.updateHeader();
-        if (variant === 'carousel') {
-            this.renderCarousel(items);
-        }
-        else {
-            this.renderGrid(items);
-        }
-    }
-}
-if (!customElements.get('db-section-testimonials')) {
-    customElements.define('db-section-testimonials', DbSectionTestimonials);
-}
-
-export { DbSectionTestimonials };
+import{createDbIcon as e}from"./db-icons.js";import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as s}from"./marketing-block-host-utils.js";const i="designbase-wc-section-testimonials";class DbSectionTestimonials extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.carouselIndex=0}static get observedAttributes(){return["headline","subtitle","description","badge","items","variant","columns","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.resizeObserver?.disconnect(),this.resizeObserver=void 0}attributeChangedCallback(){this.built&&(this.carouselIndex=0,this.updateUI())}parseItems(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}buildHeader(e){this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header";const t=document.createElement("db-badge");t.className="designbase-wc-section-block-header__badge",t.hidden=!0,t.dataset.role="badge";const s=document.createElement("h2");s.className="designbase-wc-section-block-header__headline",s.dataset.role="headline";const i=document.createElement("p");i.className="designbase-wc-section-block-header__subtitle",i.dataset.role="subtitle";const a=document.createElement("p");a.className="designbase-wc-section-block-header__description",a.dataset.role="description",this.headerEl.append(t,s,i,a),e.append(this.headerEl)}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${i}__inner`,this.buildHeader(this.innerEl),this.contentEl=document.createElement("div"),this.contentEl.className=`${i}__grid`,this.innerEl.append(this.contentEl),this.append(this.innerEl)}createTestimonialEl(e){const t=document.createElement("db-testimonial");return t.setAttribute("variant","card"),t.setAttribute("quote",e.quote),t.setAttribute("author",e.author),e.role&&t.setAttribute("role",e.role),e.company&&t.setAttribute("company",e.company),e.avatar&&t.setAttribute("avatar",e.avatar),null!=e.rating&&t.setAttribute("rating",String(e.rating)),t.setAttribute("align","center"),t}updateHeader(){this.headerEl&&t(this.headerEl,{headline:this.getAttribute("headline")||"고객 후기",subtitle:this.getAttribute("subtitle")||"",description:this.getAttribute("description")||"",badge:this.parseBadge(),align:this.getAttribute("align")||"center"})}clampCarouselIndex(e){e<=0?this.carouselIndex=0:(this.carouselIndex>=e&&(this.carouselIndex=0),this.carouselIndex<0&&(this.carouselIndex=0))}updateCarouselTransform(){if(!this.carouselViewport||!this.carouselTrack)return;const e=this.carouselViewport.clientWidth;this.carouselTrack.style.transform=`translate3d(-${this.carouselIndex*e}px, 0, 0)`,this.carouselIndicator&&this.carouselIndicator.setAttribute("current",String(this.carouselIndex))}goToCarouselSlide(e,t){t<=0||(this.carouselIndex=Math.max(0,Math.min(e,t-1)),this.updateCarouselTransform())}renderGrid(e){this.contentEl&&(this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.carouselViewport=void 0,this.carouselTrack=void 0,this.carouselIndicator=void 0,this.contentEl.className=`${i}__grid`,this.contentEl.replaceChildren(),e.forEach(e=>{this.contentEl.append(this.createTestimonialEl(e))}))}renderCarousel(t){if(!this.contentEl)return;if(this.contentEl.replaceChildren(),this.contentEl.className=`${i}__carousel`,this.clampCarouselIndex(t.length),0===t.length)return;const s=document.createElement("div");s.className=`${i}__carousel-viewport`;const a=document.createElement("div");if(a.className=`${i}__carousel-track`,t.forEach(e=>{const t=document.createElement("div");t.className=`${i}__carousel-slide`,t.append(this.createTestimonialEl(e)),a.append(t)}),s.append(a),this.carouselViewport=s,this.carouselTrack=a,t.length>1){const a=document.createElement("button");a.type="button",a.className=`${i}__carousel-nav ${i}__carousel-nav--prev`,a.setAttribute("aria-label","이전 후기"),a.append(e("chevron-left",20)),a.addEventListener("click",()=>{const e=this.carouselIndex-1;this.goToCarouselSlide(e<0?t.length-1:e,t.length)});const r=document.createElement("button");r.type="button",r.className=`${i}__carousel-nav ${i}__carousel-nav--next`,r.setAttribute("aria-label","다음 후기"),r.append(e("chevron-right",20)),r.addEventListener("click",()=>{const e=this.carouselIndex+1;this.goToCarouselSlide(e>=t.length?0:e,t.length)}),s.append(a,r);const n=document.createElement("div");n.className=`${i}__carousel-controls`;const l=document.createElement("db-indicator");l.className=`${i}__carousel-indicator`,l.setAttribute("current",String(this.carouselIndex)),l.setAttribute("total",String(t.length)),l.setAttribute("type","dots"),l.setAttribute("size","s"),l.setAttribute("clickable",""),l.addEventListener("db-step-click",e=>{const s=e;this.goToCarouselSlide(s.detail.index,t.length)}),this.carouselIndicator=l,n.append(l),this.contentEl.append(s,n)}else this.contentEl.append(s);this.resizeObserver?.disconnect(),this.resizeObserver=new ResizeObserver(()=>this.updateCarouselTransform()),this.resizeObserver.observe(s),requestAnimationFrame(()=>this.updateCarouselTransform())}updateUI(){const e=this.getAttribute("variant")||"grid",t=this.getAttribute("columns")||"3",a=this.getAttribute("content-padding")||"l",r=this.parseItems();this.className=[i,`${i}--${e}`,`${i}--cols-${t}`,`${i}--padding-${a}`].join(" "),s(this,i),this.updateHeader(),"carousel"===e?this.renderCarousel(r):this.renderGrid(r)}}customElements.get("db-section-testimonials")||customElements.define("db-section-testimonials",DbSectionTestimonials);export{DbSectionTestimonials};