@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,179 +1 @@
-import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
-
-const CLASS = 'designbase-wc-section-feature';
-class DbSectionFeature extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-    }
-    static get observedAttributes() {
-        return [
-            'headline',
-            'subtitle',
-            'description',
-            'badge',
-            'image',
-            'image-alt',
-            'media-position',
-            'actions',
-            'tinted',
-            '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;
-        }
-    }
-    get actions() {
-        return this.parseActions();
-    }
-    set actions(value) {
-        this.setAttribute('actions', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    parseActions() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('actions') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    build() {
-        this.innerEl = document.createElement('div');
-        this.innerEl.className = `${CLASS}__inner`;
-        const content = document.createElement('div');
-        content.className = `${CLASS}__content`;
-        this.contentEl = content;
-        this.headlineEl = document.createElement('h2');
-        this.headlineEl.className = `${CLASS}__headline`;
-        this.subtitleEl = document.createElement('p');
-        this.subtitleEl.className = `${CLASS}__subtitle`;
-        this.descriptionEl = document.createElement('p');
-        this.descriptionEl.className = `${CLASS}__description`;
-        this.actionsEl = document.createElement('div');
-        this.actionsEl.className = `${CLASS}__actions`;
-        content.append(this.headlineEl, this.subtitleEl, this.descriptionEl, this.actionsEl);
-        this.mediaEl = document.createElement('div');
-        this.mediaEl.className = `${CLASS}__media`;
-        this.imageEl = document.createElement('img');
-        this.imageEl.className = `${CLASS}__image`;
-        this.mediaEl.append(this.imageEl);
-        this.innerEl.append(content, this.mediaEl);
-        this.append(this.innerEl);
-    }
-    updateUI() {
-        const headline = this.getAttribute('headline') || '';
-        const subtitle = this.getAttribute('subtitle') || '';
-        const description = this.getAttribute('description') || '';
-        const image = this.getAttribute('image') || '';
-        const imageAlt = this.getAttribute('image-alt') || headline || 'feature';
-        const mediaPosition = this.getAttribute('media-position') || 'right';
-        const contentPadding = this.getAttribute('content-padding') || 'l';
-        const tinted = this.hasAttribute('tinted');
-        const badge = this.parseBadge();
-        const actions = this.parseActions();
-        this.className = [
-            CLASS,
-            `${CLASS}--media-${mediaPosition}`,
-            `${CLASS}--padding-${contentPadding}`,
-            tinted && `${CLASS}--tinted`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        syncMarketingBlockHost(this, CLASS);
-        if (this.contentEl && this.headlineEl) {
-            const badgeText = badge?.text?.trim();
-            if (badgeText) {
-                if (!this.badgeEl) {
-                    this.badgeEl = document.createElement('db-badge');
-                    this.badgeEl.className = `${CLASS}__badge`;
-                }
-                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 = badgeText;
-                if (!this.badgeEl.isConnected) {
-                    this.contentEl.insertBefore(this.badgeEl, this.headlineEl);
-                }
-            }
-            else if (this.badgeEl) {
-                this.badgeEl.remove();
-            }
-        }
-        if (this.headlineEl)
-            this.headlineEl.textContent = 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.mediaEl && this.imageEl) {
-            if (image) {
-                this.mediaEl.hidden = false;
-                this.imageEl.src = image;
-                this.imageEl.alt = imageAlt;
-            }
-            else {
-                this.mediaEl.hidden = true;
-            }
-        }
-        if (this.actionsEl) {
-            this.actionsEl.replaceChildren();
-            if (actions.length > 0) {
-                actions.forEach((action) => {
-                    const button = document.createElement('db-button');
-                    button.setAttribute('variant', action.variant || 'primary');
-                    button.setAttribute('size', action.size || 'm');
-                    if (action.href)
-                        button.setAttribute('href', action.href);
-                    button.textContent = action.label;
-                    button.addEventListener('click', (event) => {
-                        event.stopPropagation();
-                        this.dispatchEvent(new CustomEvent('db-action', {
-                            detail: { action },
-                            bubbles: true,
-                            composed: true,
-                        }));
-                    });
-                    this.actionsEl.append(button);
-                });
-                this.actionsEl.hidden = false;
-            }
-            else {
-                this.actionsEl.hidden = true;
-            }
-        }
-    }
-}
-if (!customElements.get('db-section-feature'))
-    customElements.define('db-section-feature', DbSectionFeature);
-
-export { DbSectionFeature };
+import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="designbase-wc-section-feature";class DbSectionFeature extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","image","image-alt","media-position","actions","tinted","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}}get actions(){return this.parseActions()}set actions(t){this.setAttribute("actions","string"==typeof t?t:JSON.stringify(t))}parseActions(){try{const t=JSON.parse(this.getAttribute("actions")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${e}__inner`;const t=document.createElement("div");t.className=`${e}__content`,this.contentEl=t,this.headlineEl=document.createElement("h2"),this.headlineEl.className=`${e}__headline`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${e}__subtitle`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${e}__description`,this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,t.append(this.headlineEl,this.subtitleEl,this.descriptionEl,this.actionsEl),this.mediaEl=document.createElement("div"),this.mediaEl.className=`${e}__media`,this.imageEl=document.createElement("img"),this.imageEl.className=`${e}__image`,this.mediaEl.append(this.imageEl),this.innerEl.append(t,this.mediaEl),this.append(this.innerEl)}updateUI(){const i=this.getAttribute("headline")||"",s=this.getAttribute("subtitle")||"",n=this.getAttribute("description")||"",a=this.getAttribute("image")||"",l=this.getAttribute("image-alt")||i||"feature",h=this.getAttribute("media-position")||"right",d=this.getAttribute("content-padding")||"l",r=this.hasAttribute("tinted"),c=this.parseBadge(),o=this.parseActions();if(this.className=[e,`${e}--media-${h}`,`${e}--padding-${d}`,r&&`${e}--tinted`].filter(Boolean).join(" "),t(this,e),this.contentEl&&this.headlineEl){const t=c?.text?.trim();t?(this.badgeEl||(this.badgeEl=document.createElement("db-badge"),this.badgeEl.className=`${e}__badge`),this.badgeEl.setAttribute("variant",c.variant||"primary"),this.badgeEl.setAttribute("badge-style",c.style||"text"),this.badgeEl.setAttribute("size",c.size||"m"),this.badgeEl.textContent=t,this.badgeEl.isConnected||this.contentEl.insertBefore(this.badgeEl,this.headlineEl)):this.badgeEl&&this.badgeEl.remove()}this.headlineEl&&(this.headlineEl.textContent=i),this.subtitleEl&&(this.subtitleEl.textContent=s,this.subtitleEl.hidden=!s),this.descriptionEl&&(this.descriptionEl.textContent=n,this.descriptionEl.hidden=!n),this.mediaEl&&this.imageEl&&(a?(this.mediaEl.hidden=!1,this.imageEl.src=a,this.imageEl.alt=l):this.mediaEl.hidden=!0),this.actionsEl&&(this.actionsEl.replaceChildren(),o.length>0?(o.forEach(t=>{const e=document.createElement("db-button");e.setAttribute("variant",t.variant||"primary"),e.setAttribute("size",t.size||"m"),t.href&&e.setAttribute("href",t.href),e.textContent=t.label,e.addEventListener("click",e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:t},bubbles:!0,composed:!0}))}),this.actionsEl.append(e)}),this.actionsEl.hidden=!1):this.actionsEl.hidden=!0)}}customElements.get("db-section-feature")||customElements.define("db-section-feature",DbSectionFeature);export{DbSectionFeature};

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

@@ -1,243 +1 @@
-const CLASS = 'designbase-wc-section-hero';
-function mapButtonVariant(variant) {
-    if (variant === 'outline')
-        return 'tertiary';
-    if (variant === 'ghost')
-        return 'ghost';
-    if (variant === 'secondary')
-        return 'secondary';
-    if (variant === 'tertiary')
-        return 'tertiary';
-    return 'primary';
-}
-class DbSectionHero extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-    }
-    static get observedAttributes() {
-        return [
-            'title',
-            'subtitle',
-            'description',
-            'background-image',
-            'background-video',
-            'overlay-color',
-            'overlay-opacity',
-            'buttons',
-            'variant',
-            'theme',
-            'alignment',
-            'animated',
-            'full-height',
-            'min-height',
-            'max-height',
-            'content-max-width',
-        ];
-    }
-    connectedCallback() {
-        this.style.display = 'block';
-        if (!this.built) {
-            this.built = true;
-            this.build();
-        }
-        this.updateUI();
-    }
-    attributeChangedCallback() {
-        if (!this.built)
-            return;
-        this.updateUI();
-    }
-    get buttons() {
-        return this.parseButtons();
-    }
-    set buttons(value) {
-        this.setAttribute('buttons', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    parseButtons() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('buttons') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    build() {
-        this.backgroundVideoEl = document.createElement('video');
-        this.backgroundVideoEl.className = `${CLASS}__background-video`;
-        this.backgroundVideoEl.autoplay = true;
-        this.backgroundVideoEl.muted = true;
-        this.backgroundVideoEl.loop = true;
-        this.backgroundVideoEl.playsInline = true;
-        this.backgroundVideoEl.hidden = true;
-        this.backgroundImageEl = document.createElement('div');
-        this.backgroundImageEl.className = `${CLASS}__background-image`;
-        this.backgroundImageEl.hidden = true;
-        this.overlayEl = document.createElement('div');
-        this.overlayEl.className = `${CLASS}__overlay`;
-        this.overlayEl.hidden = true;
-        const container = document.createElement('div');
-        container.className = `${CLASS}__container`;
-        const content = document.createElement('div');
-        content.className = `${CLASS}__content`;
-        this.titleEl = document.createElement('h1');
-        this.titleEl.className = `${CLASS}__title`;
-        this.subtitleEl = document.createElement('p');
-        this.subtitleEl.className = `${CLASS}__subtitle`;
-        this.descriptionEl = document.createElement('p');
-        this.descriptionEl.className = `${CLASS}__description`;
-        this.buttonsEl = document.createElement('div');
-        this.buttonsEl.className = `${CLASS}__buttons`;
-        content.append(this.titleEl, this.subtitleEl, this.descriptionEl, this.buttonsEl);
-        container.append(content);
-        this.append(this.backgroundVideoEl, this.backgroundImageEl, this.overlayEl, container);
-    }
-    updateUI() {
-        const title = this.getAttribute('title') || '';
-        const subtitle = this.getAttribute('subtitle') || '';
-        const description = this.getAttribute('description') || '';
-        const backgroundImage = this.getAttribute('background-image') || '';
-        const backgroundVideo = this.getAttribute('background-video') || '';
-        const overlayColor = this.getAttribute('overlay-color') || '';
-        const overlayOpacity = Number(this.getAttribute('overlay-opacity') || 0.5);
-        const variant = this.getAttribute('variant') || 'default';
-        const theme = this.getAttribute('theme') || 'light';
-        const alignment = this.getAttribute('alignment') || 'left';
-        const animated = this.hasAttribute('animated');
-        const fullHeight = this.hasAttribute('full-height');
-        const minHeight = this.getAttribute('min-height');
-        const maxHeight = this.getAttribute('max-height');
-        const contentMaxWidth = this.getAttribute('content-max-width');
-        const buttons = this.parseButtons();
-        const hasMediaBackground = Boolean(backgroundImage || backgroundVideo);
-        const isOnMedia = theme === 'dark' ||
-            theme === 'gradient' ||
-            (hasMediaBackground && (variant === 'overlay' || theme === 'image'));
-        this.className = [
-            CLASS,
-            `${CLASS}--variant-${variant}`,
-            `${CLASS}--theme-${theme}`,
-            `${CLASS}--alignment-${alignment}`,
-            animated && `${CLASS}--animated`,
-            fullHeight && `${CLASS}--full-height`,
-            isOnMedia && `${CLASS}--on-media`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.style.minHeight = minHeight || '';
-        this.style.maxHeight = maxHeight || '';
-        if (this.titleEl)
-            this.titleEl.textContent = title;
-        if (this.subtitleEl) {
-            this.subtitleEl.textContent = subtitle;
-            this.subtitleEl.hidden = !subtitle;
-        }
-        if (this.descriptionEl) {
-            this.descriptionEl.textContent = description;
-            this.descriptionEl.hidden = !description;
-        }
-        const content = this.querySelector(`.${CLASS}__content`);
-        if (content) {
-            if (contentMaxWidth) {
-                content.style.maxWidth = /^\d+$/.test(contentMaxWidth) ? `${contentMaxWidth}px` : contentMaxWidth;
-            }
-            else {
-                content.style.removeProperty('max-width');
-            }
-        }
-        if (this.backgroundVideoEl) {
-            if (backgroundVideo) {
-                this.backgroundVideoEl.hidden = false;
-                this.backgroundVideoEl.replaceChildren();
-                const source = document.createElement('source');
-                source.src = backgroundVideo;
-                source.type = 'video/mp4';
-                this.backgroundVideoEl.append(source);
-            }
-            else {
-                this.backgroundVideoEl.hidden = true;
-            }
-        }
-        if (this.backgroundImageEl) {
-            if (backgroundImage) {
-                this.backgroundImageEl.hidden = false;
-                this.backgroundImageEl.style.backgroundImage = `url(${backgroundImage})`;
-                this.backgroundImageEl.style.backgroundSize = 'cover';
-                this.backgroundImageEl.style.backgroundPosition = 'center';
-                this.backgroundImageEl.style.backgroundRepeat = 'no-repeat';
-            }
-            else {
-                this.backgroundImageEl.hidden = true;
-            }
-        }
-        if (this.overlayEl) {
-            if (hasMediaBackground) {
-                this.overlayEl.hidden = false;
-                if (overlayColor) {
-                    this.overlayEl.style.background = overlayColor;
-                    this.overlayEl.style.opacity = String(overlayOpacity);
-                }
-                else {
-                    this.overlayEl.style.background = `linear-gradient(180deg, rgba(0, 0, 0, ${overlayOpacity * 0.35}) 0%, rgba(0, 0, 0, ${overlayOpacity}) 100%)`;
-                    this.overlayEl.style.opacity = '1';
-                }
-            }
-            else {
-                this.overlayEl.hidden = true;
-            }
-        }
-        if (this.buttonsEl) {
-            this.buttonsEl.replaceChildren();
-            if (buttons.length > 0) {
-                buttons.forEach((button) => {
-                    const el = document.createElement('db-button');
-                    el.setAttribute('variant', mapButtonVariant(button.variant));
-                    el.setAttribute('size', button.size || 'm');
-                    if (button.href)
-                        el.setAttribute('href', button.href);
-                    if (button.external) {
-                        el.setAttribute('target', '_blank');
-                        el.setAttribute('rel', 'noopener noreferrer');
-                    }
-                    if (button.startIcon) {
-                        el.setAttribute('start-icon', button.startIcon);
-                        el.textContent = button.text;
-                    }
-                    else if (button.icon) {
-                        const content = document.createElement('span');
-                        content.className = `${CLASS}__button-content`;
-                        const iconSpan = document.createElement('span');
-                        iconSpan.className = `${CLASS}__button-icon`;
-                        iconSpan.setAttribute('aria-hidden', 'true');
-                        iconSpan.textContent = button.icon;
-                        const textSpan = document.createElement('span');
-                        textSpan.textContent = button.text;
-                        content.append(iconSpan, textSpan);
-                        el.append(content);
-                    }
-                    else {
-                        el.textContent = button.text;
-                    }
-                    el.addEventListener('click', (event) => {
-                        event.stopPropagation();
-                        this.dispatchEvent(new CustomEvent('db-button-click', {
-                            detail: { button },
-                            bubbles: true,
-                            composed: true,
-                        }));
-                    });
-                    this.buttonsEl.append(el);
-                });
-                this.buttonsEl.hidden = false;
-            }
-            else {
-                this.buttonsEl.hidden = true;
-            }
-        }
-    }
-}
-if (!customElements.get('db-section-hero'))
-    customElements.define('db-section-hero', DbSectionHero);
-
-export { DbSectionHero };
+const t="designbase-wc-section-hero";class DbSectionHero extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","subtitle","description","background-image","background-video","overlay-color","overlay-opacity","buttons","variant","theme","alignment","animated","full-height","min-height","max-height","content-max-width"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}get buttons(){return this.parseButtons()}set buttons(t){this.setAttribute("buttons","string"==typeof t?t:JSON.stringify(t))}parseButtons(){try{const t=JSON.parse(this.getAttribute("buttons")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.backgroundVideoEl=document.createElement("video"),this.backgroundVideoEl.className=`${t}__background-video`,this.backgroundVideoEl.autoplay=!0,this.backgroundVideoEl.muted=!0,this.backgroundVideoEl.loop=!0,this.backgroundVideoEl.playsInline=!0,this.backgroundVideoEl.hidden=!0,this.backgroundImageEl=document.createElement("div"),this.backgroundImageEl.className=`${t}__background-image`,this.backgroundImageEl.hidden=!0,this.overlayEl=document.createElement("div"),this.overlayEl.className=`${t}__overlay`,this.overlayEl.hidden=!0;const e=document.createElement("div");e.className=`${t}__container`;const i=document.createElement("div");i.className=`${t}__content`,this.titleEl=document.createElement("h1"),this.titleEl.className=`${t}__title`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${t}__subtitle`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${t}__description`,this.buttonsEl=document.createElement("div"),this.buttonsEl.className=`${t}__buttons`,i.append(this.titleEl,this.subtitleEl,this.descriptionEl,this.buttonsEl),e.append(i),this.append(this.backgroundVideoEl,this.backgroundImageEl,this.overlayEl,e)}updateUI(){const e=this.getAttribute("title")||"",i=this.getAttribute("subtitle")||"",s=this.getAttribute("description")||"",n=this.getAttribute("background-image")||"",a=this.getAttribute("background-video")||"",o=this.getAttribute("overlay-color")||"",r=Number(this.getAttribute("overlay-opacity")||.5),l=this.getAttribute("variant")||"default",d=this.getAttribute("theme")||"light",c=this.getAttribute("alignment")||"left",h=this.hasAttribute("animated"),u=this.hasAttribute("full-height"),b=this.getAttribute("min-height"),g=this.getAttribute("max-height"),m=this.getAttribute("content-max-width"),E=this.parseButtons(),p=Boolean(n||a),y="dark"===d||"gradient"===d||p&&("overlay"===l||"image"===d);this.className=[t,`${t}--variant-${l}`,`${t}--theme-${d}`,`${t}--alignment-${c}`,h&&`${t}--animated`,u&&`${t}--full-height`,y&&`${t}--on-media`].filter(Boolean).join(" "),this.style.minHeight=b||"",this.style.maxHeight=g||"",this.titleEl&&(this.titleEl.textContent=e),this.subtitleEl&&(this.subtitleEl.textContent=i,this.subtitleEl.hidden=!i),this.descriptionEl&&(this.descriptionEl.textContent=s,this.descriptionEl.hidden=!s);const k=this.querySelector(`.${t}__content`);if(k&&(m?k.style.maxWidth=/^\d+$/.test(m)?`${m}px`:m:k.style.removeProperty("max-width")),this.backgroundVideoEl)if(a){this.backgroundVideoEl.hidden=!1,this.backgroundVideoEl.replaceChildren();const t=document.createElement("source");t.src=a,t.type="video/mp4",this.backgroundVideoEl.append(t)}else this.backgroundVideoEl.hidden=!0;this.backgroundImageEl&&(n?(this.backgroundImageEl.hidden=!1,this.backgroundImageEl.style.backgroundImage=`url(${n})`,this.backgroundImageEl.style.backgroundSize="cover",this.backgroundImageEl.style.backgroundPosition="center",this.backgroundImageEl.style.backgroundRepeat="no-repeat"):this.backgroundImageEl.hidden=!0),this.overlayEl&&(p?(this.overlayEl.hidden=!1,o?(this.overlayEl.style.background=o,this.overlayEl.style.opacity=String(r)):(this.overlayEl.style.background=`linear-gradient(180deg, rgba(0, 0, 0, ${.35*r}) 0%, rgba(0, 0, 0, ${r}) 100%)`,this.overlayEl.style.opacity="1")):this.overlayEl.hidden=!0),this.buttonsEl&&(this.buttonsEl.replaceChildren(),E.length>0?(E.forEach(e=>{const i=document.createElement("db-button");if(i.setAttribute("variant",function mapButtonVariant(t){return"outline"===t?"tertiary":"ghost"===t?"ghost":"secondary"===t?"secondary":"tertiary"===t?"tertiary":"primary"}(e.variant)),i.setAttribute("size",e.size||"m"),e.href&&i.setAttribute("href",e.href),e.external&&(i.setAttribute("target","_blank"),i.setAttribute("rel","noopener noreferrer")),e.startIcon)i.setAttribute("start-icon",e.startIcon),i.textContent=e.text;else if(e.icon){const s=document.createElement("span");s.className=`${t}__button-content`;const n=document.createElement("span");n.className=`${t}__button-icon`,n.setAttribute("aria-hidden","true"),n.textContent=e.icon;const a=document.createElement("span");a.textContent=e.text,s.append(n,a),i.append(s)}else i.textContent=e.text;i.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-button-click",{detail:{button:e},bubbles:!0,composed:!0}))}),this.buttonsEl.append(i)}),this.buttonsEl.hidden=!1):this.buttonsEl.hidden=!0)}}customElements.get("db-section-hero")||customElements.define("db-section-hero",DbSectionHero);export{DbSectionHero};

package/dist/esm/components/db-section-logo-cloud.js

@@ -1,138 +1 @@
-import { applySectionBlockHeader } from './section-block-header-utils.js';
-import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
-
-const CLASS = 'designbase-wc-section-logo-cloud';
-class DbSectionLogoCloud extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-    }
-    static get observedAttributes() {
-        return [
-            'headline',
-            'subtitle',
-            'description',
-            'badge',
-            'logos',
-            'variant',
-            '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();
-    }
-    parseLogos() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('logos') || '[]');
-            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.contentEl = document.createElement('div');
-        this.innerEl.append(this.headerEl, this.contentEl);
-        this.append(this.innerEl);
-    }
-    updateUI() {
-        const headline = this.getAttribute('headline') || '함께하는 파트너';
-        const subtitle = this.getAttribute('subtitle') || '';
-        const description = this.getAttribute('description') || '';
-        const variant = this.getAttribute('variant') || 'grid';
-        const contentPadding = this.getAttribute('content-padding') || 'm';
-        const align = this.getAttribute('align') || 'center';
-        const badge = this.parseBadge();
-        const logos = this.parseLogos();
-        this.className = [
-            CLASS,
-            `${CLASS}--${variant}`,
-            `${CLASS}--padding-${contentPadding}`,
-        ].join(' ');
-        syncMarketingBlockHost(this, CLASS);
-        if (this.headerEl) {
-            applySectionBlockHeader(this.headerEl, {
-                headline,
-                subtitle,
-                description,
-                badge,
-                align,
-            });
-        }
-        if (!this.contentEl)
-            return;
-        this.contentEl.replaceChildren();
-        if (variant === 'marquee') {
-            this.contentEl.className = `${CLASS}__marquee`;
-            const marquee = document.createElement('db-marquee');
-            marquee.setAttribute('items', JSON.stringify(logos.map((l) => l.label ?? l.alt)));
-            this.contentEl.append(marquee);
-            return;
-        }
-        this.contentEl.className = `${CLASS}__grid`;
-        logos.forEach((logo) => {
-            const item = document.createElement(logo.href ? 'a' : 'div');
-            item.className = `${CLASS}__item`;
-            if (logo.href && item instanceof HTMLAnchorElement) {
-                item.href = logo.href;
-                item.target = '_blank';
-                item.rel = 'noopener noreferrer';
-            }
-            if (logo.src) {
-                const img = document.createElement('img');
-                img.src = logo.src;
-                img.alt = logo.alt;
-                img.className = `${CLASS}__image`;
-                item.append(img);
-            }
-            else {
-                const label = document.createElement('span');
-                label.className = `${CLASS}__label`;
-                label.textContent = logo.label ?? logo.alt;
-                item.append(label);
-            }
-            this.contentEl.append(item);
-        });
-    }
-}
-if (!customElements.get('db-section-logo-cloud')) {
-    customElements.define('db-section-logo-cloud', DbSectionLogoCloud);
-}
-
-export { DbSectionLogoCloud };
+import{applySectionBlockHeader as e}from"./section-block-header-utils.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const s="designbase-wc-section-logo-cloud";class DbSectionLogoCloud extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","logos","variant","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()}parseLogos(){try{const e=JSON.parse(this.getAttribute("logos")||"[]");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.contentEl=document.createElement("div"),this.innerEl.append(this.headerEl,this.contentEl),this.append(this.innerEl)}updateUI(){const i=this.getAttribute("headline")||"함께하는 파트너",n=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",l=this.getAttribute("variant")||"grid",r=this.getAttribute("content-padding")||"m",c=this.getAttribute("align")||"center",o=this.parseBadge(),d=this.parseLogos();if(this.className=[s,`${s}--${l}`,`${s}--padding-${r}`].join(" "),t(this,s),this.headerEl&&e(this.headerEl,{headline:i,subtitle:n,description:a,badge:o,align:c}),this.contentEl){if(this.contentEl.replaceChildren(),"marquee"===l){this.contentEl.className=`${s}__marquee`;const e=document.createElement("db-marquee");return e.setAttribute("items",JSON.stringify(d.map(e=>e.label??e.alt))),void this.contentEl.append(e)}this.contentEl.className=`${s}__grid`,d.forEach(e=>{const t=document.createElement(e.href?"a":"div");if(t.className=`${s}__item`,e.href&&t instanceof HTMLAnchorElement&&(t.href=e.href,t.target="_blank",t.rel="noopener noreferrer"),e.src){const i=document.createElement("img");i.src=e.src,i.alt=e.alt,i.className=`${s}__image`,t.append(i)}else{const i=document.createElement("span");i.className=`${s}__label`,i.textContent=e.label??e.alt,t.append(i)}this.contentEl.append(t)})}}}customElements.get("db-section-logo-cloud")||customElements.define("db-section-logo-cloud",DbSectionLogoCloud);export{DbSectionLogoCloud};