@designbasekorea/ui-wc 0.5.6 → 0.6.0

package/dist/esm/components/db-section-app-download.js

@@ -1,101 +1 @@
-import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
-
-const CLASS = 'designbase-wc-section-app-download';
-class DbSectionAppDownload extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-    }
-    static get observedAttributes() {
-        return [
-            'title',
-            'description',
-            'stores',
-            'align',
-            '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();
-    }
-    get stores() {
-        return this.parseStores();
-    }
-    set stores(value) {
-        this.setAttribute('stores', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    parseStores() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('stores') || '[]');
-            if (Array.isArray(parsed) && parsed.length > 0)
-                return parsed;
-        }
-        catch {
-            /* use default */
-        }
-        return [
-            { store: 'app-store', href: '#' },
-            { store: 'google-play', href: '#' },
-        ];
-    }
-    build() {
-        this.innerEl = document.createElement('div');
-        this.innerEl.className = `${CLASS}__inner`;
-        this.titleEl = document.createElement('h2');
-        this.titleEl.className = `${CLASS}__title`;
-        this.descriptionEl = document.createElement('p');
-        this.descriptionEl.className = `${CLASS}__description`;
-        this.badgesEl = document.createElement('div');
-        this.badgesEl.className = `${CLASS}__badges`;
-        this.innerEl.append(this.titleEl, this.descriptionEl, this.badgesEl);
-        this.append(this.innerEl);
-    }
-    updateUI() {
-        const title = this.getAttribute('title') || '지금 바로 시작하세요';
-        const description = this.getAttribute('description') || '앱을 다운로드하고 바로 이용해 보세요.';
-        const align = this.getAttribute('align') || 'center';
-        const stores = this.parseStores();
-        this.className = [CLASS, `${CLASS}--${align}`].join(' ');
-        syncMarketingBlockHost(this, CLASS);
-        if (this.titleEl)
-            this.titleEl.textContent = title;
-        if (this.descriptionEl) {
-            this.descriptionEl.textContent = description;
-            this.descriptionEl.hidden = !description;
-        }
-        if (this.badgesEl) {
-            this.badgesEl.replaceChildren();
-            stores.forEach((store) => {
-                const badge = document.createElement('db-app-badge');
-                badge.setAttribute('store', store.store);
-                badge.setAttribute('size', store.size || 'm');
-                badge.setAttribute('theme', store.theme || 'dark');
-                if (store.href)
-                    badge.setAttribute('href', store.href);
-                if (store.label)
-                    badge.setAttribute('label', store.label);
-                if (store.storeName)
-                    badge.setAttribute('store-name', store.storeName);
-                this.badgesEl.append(badge);
-            });
-        }
-    }
-}
-if (!customElements.get('db-section-app-download')) {
-    customElements.define('db-section-app-download', DbSectionAppDownload);
-}
-
-export { DbSectionAppDownload };
+import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="designbase-wc-section-app-download";class DbSectionAppDownload extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","description","stores","align","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()}get stores(){return this.parseStores()}set stores(t){this.setAttribute("stores","string"==typeof t?t:JSON.stringify(t))}parseStores(){try{const t=JSON.parse(this.getAttribute("stores")||"[]");if(Array.isArray(t)&&t.length>0)return t}catch{}return[{store:"app-store",href:"#"},{store:"google-play",href:"#"}]}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${e}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${e}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${e}__description`,this.badgesEl=document.createElement("div"),this.badgesEl.className=`${e}__badges`,this.innerEl.append(this.titleEl,this.descriptionEl,this.badgesEl),this.append(this.innerEl)}updateUI(){const s=this.getAttribute("title")||"지금 바로 시작하세요",i=this.getAttribute("description")||"앱을 다운로드하고 바로 이용해 보세요.",r=this.getAttribute("align")||"center",l=this.parseStores();this.className=[e,`${e}--${r}`].join(" "),t(this,e),this.titleEl&&(this.titleEl.textContent=s),this.descriptionEl&&(this.descriptionEl.textContent=i,this.descriptionEl.hidden=!i),this.badgesEl&&(this.badgesEl.replaceChildren(),l.forEach(t=>{const e=document.createElement("db-app-badge");e.setAttribute("store",t.store),e.setAttribute("size",t.size||"m"),e.setAttribute("theme",t.theme||"dark"),t.href&&e.setAttribute("href",t.href),t.label&&e.setAttribute("label",t.label),t.storeName&&e.setAttribute("store-name",t.storeName),this.badgesEl.append(e)}))}}customElements.get("db-section-app-download")||customElements.define("db-section-app-download",DbSectionAppDownload);export{DbSectionAppDownload};

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

@@ -1,102 +1 @@
-import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
-
-const CLASS = 'designbase-wc-section-contact';
-const DEFAULT_EMAIL = 'contact@designbase.co.kr';
-class DbSectionContact extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-    }
-    static get observedAttributes() {
-        return [
-            'title',
-            'description',
-            'action',
-            'align',
-            'accent',
-            '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();
-    }
-    parseAction() {
-        try {
-            const raw = this.getAttribute('action');
-            if (raw)
-                return JSON.parse(raw);
-        }
-        catch {
-            /* use default */
-        }
-        return { label: DEFAULT_EMAIL, href: `mailto:${DEFAULT_EMAIL}` };
-    }
-    build() {
-        this.innerEl = document.createElement('div');
-        this.innerEl.className = `${CLASS}__inner`;
-        this.titleEl = document.createElement('h2');
-        this.titleEl.className = `${CLASS}__title`;
-        this.descriptionEl = document.createElement('p');
-        this.descriptionEl.className = `${CLASS}__description`;
-        this.actionEl = document.createElement('db-button');
-        this.actionEl.className = `${CLASS}__action`;
-        this.actionEl.setAttribute('variant', 'primary');
-        this.actionEl.setAttribute('size', 'm');
-        this.actionEl.setAttribute('radius', 'pill');
-        this.actionEl.setAttribute('start-icon', 'mail');
-        this.actionEl.addEventListener('click', (event) => {
-            event.stopPropagation();
-            this.dispatchEvent(new CustomEvent('db-action', { detail: { action: this.parseAction() }, bubbles: true, composed: true }));
-        });
-        this.innerEl.append(this.titleEl, this.descriptionEl, this.actionEl);
-        this.append(this.innerEl);
-    }
-    updateUI() {
-        const title = this.getAttribute('title') || '문의하기';
-        const description = this.getAttribute('description') || '궁금한 점이 있으시면 언제든지 연락주세요.';
-        const align = this.getAttribute('align') || 'center';
-        const contentPadding = this.getAttribute('content-padding') || 'l';
-        const accent = !this.hasAttribute('accent') || this.getAttribute('accent') !== 'false';
-        const action = this.parseAction();
-        this.className = [
-            CLASS,
-            `${CLASS}--${align}`,
-            `${CLASS}--padding-${contentPadding}`,
-            accent && `${CLASS}--accent`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        syncMarketingBlockHost(this, CLASS);
-        if (this.titleEl)
-            this.titleEl.textContent = title;
-        if (this.descriptionEl) {
-            this.descriptionEl.textContent = description;
-            this.descriptionEl.hidden = !description;
-        }
-        if (this.actionEl) {
-            this.actionEl.textContent = action.label;
-            if (action.href)
-                this.actionEl.setAttribute('href', action.href);
-            else
-                this.actionEl.removeAttribute('href');
-        }
-    }
-}
-if (!customElements.get('db-section-contact'))
-    customElements.define('db-section-contact', DbSectionContact);
-
-export { DbSectionContact };
+import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const i="designbase-wc-section-contact",e="contact@designbase.co.kr";class DbSectionContact extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","description","action","align","accent","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()}parseAction(){try{const t=this.getAttribute("action");if(t)return JSON.parse(t)}catch{}return{label:e,href:`mailto:${e}`}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${i}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${i}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${i}__description`,this.actionEl=document.createElement("db-button"),this.actionEl.className=`${i}__action`,this.actionEl.setAttribute("variant","primary"),this.actionEl.setAttribute("size","m"),this.actionEl.setAttribute("radius","pill"),this.actionEl.setAttribute("start-icon","mail"),this.actionEl.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:this.parseAction()},bubbles:!0,composed:!0}))}),this.innerEl.append(this.titleEl,this.descriptionEl,this.actionEl),this.append(this.innerEl)}updateUI(){const e=this.getAttribute("title")||"문의하기",s=this.getAttribute("description")||"궁금한 점이 있으시면 언제든지 연락주세요.",n=this.getAttribute("align")||"center",c=this.getAttribute("content-padding")||"l",a=!this.hasAttribute("accent")||"false"!==this.getAttribute("accent"),l=this.parseAction();this.className=[i,`${i}--${n}`,`${i}--padding-${c}`,a&&`${i}--accent`].filter(Boolean).join(" "),t(this,i),this.titleEl&&(this.titleEl.textContent=e),this.descriptionEl&&(this.descriptionEl.textContent=s,this.descriptionEl.hidden=!s),this.actionEl&&(this.actionEl.textContent=l.label,l.href?this.actionEl.setAttribute("href",l.href):this.actionEl.removeAttribute("href"))}}customElements.get("db-section-contact")||customElements.define("db-section-contact",DbSectionContact);export{DbSectionContact};

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

@@ -1,150 +1 @@
-import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
-
-const CLASS = 'designbase-wc-section-cta';
-class DbSectionCta extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-    }
-    static get observedAttributes() {
-        return [
-            'title',
-            'headline',
-            'subtitle',
-            'description',
-            'badge',
-            'buttons',
-            'variant',
-            'theme',
-            '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();
-    }
-    parseBadge() {
-        try {
-            const raw = this.getAttribute('badge');
-            if (!raw)
-                return null;
-            return JSON.parse(raw);
-        }
-        catch {
-            return null;
-        }
-    }
-    parseButtons() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('buttons') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    build() {
-        this.wrapEl = document.createElement('div');
-        this.wrapEl.className = `${CLASS}__inner`;
-        this.headerEl = document.createElement('div');
-        this.headerEl.className = 'designbase-wc-section-block-header';
-        this.badgeEl = document.createElement('db-badge');
-        this.badgeEl.className = 'designbase-wc-section-block-header__badge';
-        this.badgeEl.hidden = true;
-        this.headlineEl = document.createElement('h2');
-        this.headlineEl.className = 'designbase-wc-section-block-header__headline';
-        this.subtitleEl = document.createElement('p');
-        this.subtitleEl.className = 'designbase-wc-section-block-header__subtitle';
-        this.descriptionEl = document.createElement('p');
-        this.descriptionEl.className = 'designbase-wc-section-block-header__description';
-        this.headerEl.append(this.badgeEl, this.headlineEl, this.subtitleEl, this.descriptionEl);
-        this.actionsEl = document.createElement('div');
-        this.actionsEl.className = `${CLASS}__actions`;
-        this.wrapEl.append(this.headerEl, this.actionsEl);
-        this.append(this.wrapEl);
-    }
-    updateUI() {
-        const headline = this.getAttribute('headline') || this.getAttribute('title') || '';
-        const subtitle = this.getAttribute('subtitle') || '';
-        const description = this.getAttribute('description') || '';
-        const variant = this.getAttribute('variant') || 'default';
-        const theme = this.getAttribute('theme') || 'gradient';
-        const align = this.getAttribute('align') || 'center';
-        const contentPadding = this.getAttribute('content-padding') || 'l';
-        const badge = this.parseBadge();
-        const buttons = this.parseButtons();
-        this.className = [
-            CLASS,
-            `${CLASS}--${variant}`,
-            `${CLASS}--${theme}`,
-            `${CLASS}--${align}`,
-            `${CLASS}--padding-${contentPadding}`,
-        ].join(' ');
-        syncMarketingBlockHost(this, CLASS);
-        if (this.headerEl) {
-            this.headerEl.className = [
-                'designbase-wc-section-block-header',
-                `designbase-wc-section-block-header--${align}`,
-                `${CLASS}__header`,
-            ].join(' ');
-        }
-        if (this.badgeEl) {
-            if (badge?.text) {
-                this.badgeEl.hidden = false;
-                this.badgeEl.style.display = '';
-                this.badgeEl.setAttribute('variant', badge.variant || 'primary');
-                this.badgeEl.setAttribute('badge-style', badge.style || 'text');
-                this.badgeEl.setAttribute('size', badge.size || 'm');
-                this.badgeEl.textContent = badge.text;
-            }
-            else {
-                this.badgeEl.hidden = true;
-                this.badgeEl.style.display = 'none';
-                this.badgeEl.textContent = '';
-            }
-        }
-        if (this.headlineEl) {
-            this.headlineEl.textContent = headline;
-            this.headlineEl.hidden = !headline;
-        }
-        if (this.subtitleEl) {
-            this.subtitleEl.textContent = subtitle;
-            this.subtitleEl.hidden = !subtitle;
-        }
-        if (this.descriptionEl) {
-            this.descriptionEl.textContent = description;
-            this.descriptionEl.hidden = !description;
-        }
-        if (this.actionsEl) {
-            this.actionsEl.replaceChildren();
-            buttons.forEach((button, index) => {
-                const el = document.createElement('db-button');
-                el.setAttribute('variant', button.variant || (index === 0 ? 'primary' : 'tertiary'));
-                el.setAttribute('size', button.size || 'm');
-                if (button.href)
-                    el.setAttribute('href', button.href);
-                el.textContent = button.text;
-                this.actionsEl.append(el);
-            });
-            this.actionsEl.hidden = buttons.length === 0;
-        }
-    }
-}
-if (!customElements.get('db-section-cta'))
-    customElements.define('db-section-cta', DbSectionCta);
-
-export { DbSectionCta };
+import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="designbase-wc-section-cta";class DbSectionCta extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","headline","subtitle","description","badge","buttons","variant","theme","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()}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}parseButtons(){try{const t=JSON.parse(this.getAttribute("buttons")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.wrapEl=document.createElement("div"),this.wrapEl.className=`${e}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.badgeEl=document.createElement("db-badge"),this.badgeEl.className="designbase-wc-section-block-header__badge",this.badgeEl.hidden=!0,this.headlineEl=document.createElement("h2"),this.headlineEl.className="designbase-wc-section-block-header__headline",this.subtitleEl=document.createElement("p"),this.subtitleEl.className="designbase-wc-section-block-header__subtitle",this.descriptionEl=document.createElement("p"),this.descriptionEl.className="designbase-wc-section-block-header__description",this.headerEl.append(this.badgeEl,this.headlineEl,this.subtitleEl,this.descriptionEl),this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,this.wrapEl.append(this.headerEl,this.actionsEl),this.append(this.wrapEl)}updateUI(){const i=this.getAttribute("headline")||this.getAttribute("title")||"",s=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",n=this.getAttribute("variant")||"default",l=this.getAttribute("theme")||"gradient",h=this.getAttribute("align")||"center",d=this.getAttribute("content-padding")||"l",r=this.parseBadge(),c=this.parseButtons();this.className=[e,`${e}--${n}`,`${e}--${l}`,`${e}--${h}`,`${e}--padding-${d}`].join(" "),t(this,e),this.headerEl&&(this.headerEl.className=["designbase-wc-section-block-header",`designbase-wc-section-block-header--${h}`,`${e}__header`].join(" ")),this.badgeEl&&(r?.text?(this.badgeEl.hidden=!1,this.badgeEl.style.display="",this.badgeEl.setAttribute("variant",r.variant||"primary"),this.badgeEl.setAttribute("badge-style",r.style||"text"),this.badgeEl.setAttribute("size",r.size||"m"),this.badgeEl.textContent=r.text):(this.badgeEl.hidden=!0,this.badgeEl.style.display="none",this.badgeEl.textContent="")),this.headlineEl&&(this.headlineEl.textContent=i,this.headlineEl.hidden=!i),this.subtitleEl&&(this.subtitleEl.textContent=s,this.subtitleEl.hidden=!s),this.descriptionEl&&(this.descriptionEl.textContent=a,this.descriptionEl.hidden=!a),this.actionsEl&&(this.actionsEl.replaceChildren(),c.forEach((t,e)=>{const i=document.createElement("db-button");i.setAttribute("variant",t.variant||(0===e?"primary":"tertiary")),i.setAttribute("size",t.size||"m"),t.href&&i.setAttribute("href",t.href),i.textContent=t.text,this.actionsEl.append(i)}),this.actionsEl.hidden=0===c.length)}}customElements.get("db-section-cta")||customElements.define("db-section-cta",DbSectionCta);export{DbSectionCta};

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

@@ -1,120 +1 @@
-import { applySectionBlockHeader } from './section-block-header-utils.js';
-import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
-
-const CLASS = 'designbase-wc-section-faq';
-class DbSectionFaq extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-    }
-    static get observedAttributes() {
-        return [
-            'headline',
-            'subtitle',
-            'description',
-            'badge',
-            'items',
-            'allow-multiple',
-            '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.accordionEl = document.createElement('db-accordion');
-        this.accordionEl.className = `${CLASS}__accordion`;
-        this.innerEl.append(this.headerEl, this.accordionEl);
-        this.append(this.innerEl);
-    }
-    updateUI() {
-        const headline = this.getAttribute('headline') || '자주 묻는 질문';
-        const subtitle = this.getAttribute('subtitle') || '';
-        const description = this.getAttribute('description') || '';
-        const contentPadding = this.getAttribute('content-padding') || 'l';
-        const align = this.getAttribute('align') || 'center';
-        const allowMultiple = this.hasAttribute('allow-multiple');
-        const badge = this.parseBadge();
-        const items = this.parseItems();
-        this.className = [CLASS, `${CLASS}--padding-${contentPadding}`].join(' ');
-        syncMarketingBlockHost(this, CLASS);
-        if (this.headerEl) {
-            applySectionBlockHeader(this.headerEl, {
-                headline,
-                subtitle,
-                description,
-                badge,
-                align,
-            });
-        }
-        if (!this.accordionEl)
-            return;
-        const accordionItems = items.map((item) => ({
-            id: item.id,
-            title: item.question,
-            content: item.answer,
-            itemType: 'question',
-        }));
-        this.accordionEl.setAttribute('items', JSON.stringify(accordionItems));
-        this.accordionEl.setAttribute('variant', 'separated');
-        this.accordionEl.setAttribute('size', 'm');
-        this.accordionEl.setAttribute('default-item-type', 'question');
-        if (allowMultiple) {
-            this.accordionEl.setAttribute('allow-multiple', '');
-            this.accordionEl.setAttribute('expand-mode', 'multiple');
-        }
-        else {
-            this.accordionEl.removeAttribute('allow-multiple');
-            this.accordionEl.setAttribute('expand-mode', 'single');
-        }
-    }
-}
-if (!customElements.get('db-section-faq'))
-    customElements.define('db-section-faq', DbSectionFaq);
-
-export { DbSectionFaq };
+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-faq";class DbSectionFaq extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","items","allow-multiple","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.accordionEl=document.createElement("db-accordion"),this.accordionEl.className=`${i}__accordion`,this.innerEl.append(this.headerEl,this.accordionEl),this.append(this.innerEl)}updateUI(){const s=this.getAttribute("headline")||"자주 묻는 질문",n=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",l=this.getAttribute("content-padding")||"l",r=this.getAttribute("align")||"center",c=this.hasAttribute("allow-multiple"),d=this.parseBadge(),o=this.parseItems();if(this.className=[i,`${i}--padding-${l}`].join(" "),e(this,i),this.headerEl&&t(this.headerEl,{headline:s,subtitle:n,description:a,badge:d,align:r}),!this.accordionEl)return;const h=o.map(t=>({id:t.id,title:t.question,content:t.answer,itemType:"question"}));this.accordionEl.setAttribute("items",JSON.stringify(h)),this.accordionEl.setAttribute("variant","separated"),this.accordionEl.setAttribute("size","m"),this.accordionEl.setAttribute("default-item-type","question"),c?(this.accordionEl.setAttribute("allow-multiple",""),this.accordionEl.setAttribute("expand-mode","multiple")):(this.accordionEl.removeAttribute("allow-multiple"),this.accordionEl.setAttribute("expand-mode","single"))}}customElements.get("db-section-faq")||customElements.define("db-section-faq",DbSectionFaq);export{DbSectionFaq};

package/dist/esm/components/db-section-feature-grid.js

@@ -1,137 +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-feature-grid';
-const ICON_ATTR_MAP = {
-    sparkles: 'sparkle',
-    rocket: 'package',
-    shield: 'award',
-    chart: 'trending-up',
-    users: 'user',
-    bolt: 'bulb',
-};
-class DbSectionFeatureGrid 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') || '3';
-        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();
-        this.className = [
-            CLASS,
-            `${CLASS}--cols-${columns}`,
-            `${CLASS}--padding-${contentPadding}`,
-            tinted && `${CLASS}--tinted`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        syncMarketingBlockHost(this, CLASS);
-        if (this.headerEl) {
-            applySectionBlockHeader(this.headerEl, {
-                headline,
-                subtitle,
-                description,
-                badge,
-                align,
-            });
-        }
-        if (!this.gridEl)
-            return;
-        this.gridEl.replaceChildren();
-        items.forEach((item) => {
-            const card = document.createElement('article');
-            card.className = `${CLASS}__card`;
-            const iconWrap = document.createElement('div');
-            iconWrap.className = `${CLASS}__card-icon`;
-            iconWrap.append(createDbIcon(ICON_ATTR_MAP[item.iconName || 'sparkles'] || 'sparkle', 24));
-            const title = document.createElement('h3');
-            title.className = `${CLASS}__card-title`;
-            title.textContent = item.title;
-            const desc = document.createElement('p');
-            desc.className = `${CLASS}__card-description`;
-            desc.textContent = item.description;
-            card.append(iconWrap, title, desc);
-            this.gridEl.append(card);
-        });
-    }
-}
-if (!customElements.get('db-section-feature-grid')) {
-    customElements.define('db-section-feature-grid', DbSectionFeatureGrid);
-}
-
-export { DbSectionFeatureGrid };
+import{createDbIcon as e}from"./db-icons.js";import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as i}from"./marketing-block-host-utils.js";const s="designbase-wc-section-feature-grid",n={sparkles:"sparkle",rocket:"package",shield:"award",chart:"trending-up",users:"user",bolt:"bulb"};class DbSectionFeatureGrid 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 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}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${s}__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=`${s}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const a=this.getAttribute("headline")||"주요 기능",r=this.getAttribute("subtitle")||"",d=this.getAttribute("description")||"",l=this.getAttribute("columns")||"3",c=this.getAttribute("content-padding")||"l",o=this.getAttribute("align")||"center",h=this.hasAttribute("tinted"),u=this.parseBadge(),b=this.parseItems();this.className=[s,`${s}--cols-${l}`,`${s}--padding-${c}`,h&&`${s}--tinted`].filter(Boolean).join(" "),i(this,s),this.headerEl&&t(this.headerEl,{headline:a,subtitle:r,description:d,badge:u,align:o}),this.gridEl&&(this.gridEl.replaceChildren(),b.forEach(t=>{const i=document.createElement("article");i.className=`${s}__card`;const a=document.createElement("div");a.className=`${s}__card-icon`,a.append(e(n[t.iconName||"sparkles"]||"sparkle",24));const r=document.createElement("h3");r.className=`${s}__card-title`,r.textContent=t.title;const d=document.createElement("p");d.className=`${s}__card-description`,d.textContent=t.description,i.append(a,r,d),this.gridEl.append(i)}))}}customElements.get("db-section-feature-grid")||customElements.define("db-section-feature-grid",DbSectionFeatureGrid);export{DbSectionFeatureGrid};