@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,385 +1 @@
-import { createShareIcon } from './db-share-icons.js';
-
-const VARIANTS = ['default', 'compact', 'minimal'];
-const SIZES = ['s', 'm', 'l'];
-const SOCIAL_ICON_MAP = {
-    youtube: 'youtube',
-    instagram: 'instagram',
-    x: 'x',
-    linkedin: 'linkedin',
-    facebook: 'facebook',
-    email: 'mail',
-};
-function parseJson(raw, fallback) {
-    if (!raw)
-        return fallback;
-    try {
-        const parsed = JSON.parse(raw);
-        return parsed ?? fallback;
-    }
-    catch {
-        return fallback;
-    }
-}
-class DbFooter extends HTMLElement {
-    static get observedAttributes() {
-        return [
-            'columns',
-            'legal-links',
-            'social-links',
-            'company-info',
-            'family-sites',
-            'tagline',
-            'copyright',
-            'logo-type',
-            'variant',
-            'size',
-            'full-width',
-            'show-logo',
-            'show-social',
-            'family-site-label',
-        ];
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback() {
-        if (!this.isConnected)
-            return;
-        this.render();
-    }
-    get columns() {
-        return parseJson(this.getAttribute('columns'), []);
-    }
-    set columns(value) {
-        this.setAttribute('columns', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get legalLinks() {
-        return parseJson(this.getAttribute('legal-links'), []);
-    }
-    set legalLinks(value) {
-        this.setAttribute('legal-links', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get socialLinks() {
-        return parseJson(this.getAttribute('social-links'), []);
-    }
-    set socialLinks(value) {
-        this.setAttribute('social-links', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get companyInfo() {
-        return parseJson(this.getAttribute('company-info'), {});
-    }
-    set companyInfo(value) {
-        this.setAttribute('company-info', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get familySites() {
-        return parseJson(this.getAttribute('family-sites'), []);
-    }
-    set familySites(value) {
-        this.setAttribute('family-sites', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    syncHostClasses() {
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const safeSize = SIZES.includes(size) ? size : 'm';
-        const safeVariant = VARIANTS.includes(variant) ? variant : 'default';
-        this.className = [
-            'designbase-wc-footer',
-            `designbase-wc-footer--${safeSize}`,
-            `designbase-wc-footer--${safeVariant}`,
-            this.hasAttribute('full-width') && 'designbase-wc-footer--full-width',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
-    dispatchLinkClick(link, source) {
-        this.dispatchEvent(new CustomEvent('db-link-click', {
-            bubbles: true,
-            composed: true,
-            detail: { link, source },
-        }));
-    }
-    createLink(link, className, source) {
-        const anchor = document.createElement('a');
-        anchor.href = link.href || '#';
-        anchor.className = [
-            className,
-            link.emphasize && `${className}--emphasize`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        anchor.textContent = link.label;
-        if (link.external) {
-            anchor.target = '_blank';
-            anchor.rel = 'noopener noreferrer';
-        }
-        anchor.addEventListener('click', (event) => {
-            event.preventDefault();
-            this.dispatchLinkClick(link, source);
-        });
-        return anchor;
-    }
-    createSocialLink(link, iconPx) {
-        const anchor = document.createElement('a');
-        anchor.href = link.href;
-        anchor.className = 'designbase-wc-footer__social-link';
-        anchor.target = '_blank';
-        anchor.rel = 'noopener noreferrer';
-        anchor.setAttribute('aria-label', link.label || link.platform);
-        const iconName = SOCIAL_ICON_MAP[link.platform] || 'share-alt';
-        anchor.append(createShareIcon(iconName, iconPx));
-        anchor.addEventListener('click', (event) => {
-            event.preventDefault();
-            this.dispatchEvent(new CustomEvent('db-social-click', {
-                bubbles: true,
-                composed: true,
-                detail: { link },
-            }));
-        });
-        return anchor;
-    }
-    createCompanyInfoRows(info) {
-        const rows = [];
-        const line1 = [];
-        if (info.companyName)
-            line1.push(info.companyName);
-        if (info.representative)
-            line1.push(`대표: ${info.representative}`);
-        if (info.businessNumber)
-            line1.push(`사업자등록번호: ${info.businessNumber}`);
-        if (line1.length)
-            rows.push(line1.join(' | '));
-        const line2 = [];
-        if (info.address)
-            line2.push(info.address);
-        if (info.phone)
-            line2.push(`대표전화: ${info.phone}`);
-        if (info.customerCenter)
-            line2.push(`고객센터: ${info.customerCenter}`);
-        if (line2.length)
-            rows.push(line2.join(' | '));
-        const line3 = [];
-        if (info.email)
-            line3.push(`이메일: ${info.email}`);
-        if (info.mailOrderNumber)
-            line3.push(`통신판매업신고: ${info.mailOrderNumber}`);
-        if (info.hostingProvider)
-            line3.push(`호스팅: ${info.hostingProvider}`);
-        if (line3.length)
-            rows.push(line3.join(' | '));
-        return rows;
-    }
-    showLogo() {
-        return !this.hasAttribute('show-logo') || this.getAttribute('show-logo') !== 'false';
-    }
-    createLogo() {
-        const logoWrap = document.createElement('div');
-        logoWrap.className = 'designbase-wc-footer__logo';
-        const logo = document.createElement('db-logo');
-        logo.setAttribute('type', this.getAttribute('logo-type') || 'designbase');
-        logo.setAttribute('size', 's');
-        logo.setAttribute('clickable', '');
-        logo.addEventListener('db-click', () => {
-            this.dispatchEvent(new CustomEvent('db-logo-click', { bubbles: true, composed: true }));
-        });
-        logoWrap.append(logo);
-        return logoWrap;
-    }
-    renderBrand(iconPx, options = {}) {
-        const { showTagline = true } = options;
-        const brand = document.createElement('div');
-        brand.className = 'designbase-wc-footer__brand';
-        if (this.showLogo()) {
-            brand.append(this.createLogo());
-        }
-        const tagline = this.getAttribute('tagline');
-        if (showTagline && tagline) {
-            const taglineEl = document.createElement('p');
-            taglineEl.className = 'designbase-wc-footer__tagline';
-            taglineEl.textContent = tagline;
-            brand.append(taglineEl);
-        }
-        const socialLinks = this.socialLinks;
-        if (socialLinks.length && (!this.hasAttribute('show-social') || this.getAttribute('show-social') !== 'false')) {
-            const social = document.createElement('div');
-            social.className = 'designbase-wc-footer__social';
-            socialLinks.forEach((link) => social.append(this.createSocialLink(link, iconPx)));
-            brand.append(social);
-        }
-        return brand;
-    }
-    renderColumns(columns) {
-        if (!columns.length)
-            return null;
-        const wrap = document.createElement('div');
-        wrap.className = 'designbase-wc-footer__columns';
-        wrap.style.setProperty('--db-footer-columns', String(Math.min(columns.length, 4)));
-        columns.forEach((column) => {
-            const col = document.createElement('div');
-            col.className = 'designbase-wc-footer__column';
-            const title = document.createElement('h3');
-            title.className = 'designbase-wc-footer__column-title';
-            title.textContent = column.title;
-            col.append(title);
-            const list = document.createElement('ul');
-            list.className = 'designbase-wc-footer__column-list';
-            column.items.forEach((item) => {
-                const li = document.createElement('li');
-                li.append(this.createLink(item, 'designbase-wc-footer__column-link', 'column'));
-                list.append(li);
-            });
-            col.append(list);
-            wrap.append(col);
-        });
-        return wrap;
-    }
-    createLegalNav(legalLinks) {
-        const nav = document.createElement('nav');
-        nav.className = 'designbase-wc-footer__legal-nav';
-        nav.setAttribute('aria-label', '법적 고지');
-        const list = document.createElement('ul');
-        list.className = 'designbase-wc-footer__legal-list';
-        legalLinks.forEach((link, index) => {
-            const li = document.createElement('li');
-            li.append(this.createLink(link, 'designbase-wc-footer__legal-link', 'legal'));
-            list.append(li);
-            if (index < legalLinks.length - 1) {
-                const divider = document.createElement('span');
-                divider.className = 'designbase-wc-footer__legal-divider';
-                divider.setAttribute('aria-hidden', 'true');
-                divider.textContent = '|';
-                li.append(divider);
-            }
-        });
-        nav.append(list);
-        return nav;
-    }
-    renderLegalBar(legalLinks, familySites) {
-        if (!legalLinks.length && !familySites.length)
-            return null;
-        const bar = document.createElement('div');
-        bar.className = 'designbase-wc-footer__legal-bar';
-        if (legalLinks.length) {
-            bar.append(this.createLegalNav(legalLinks));
-        }
-        if (familySites.length) {
-            const familyWrap = document.createElement('div');
-            familyWrap.className = 'designbase-wc-footer__family-site';
-            const select = document.createElement('select');
-            select.className = 'designbase-wc-footer__family-select';
-            select.setAttribute('aria-label', this.getAttribute('family-site-label') || '패밀리 사이트');
-            const placeholder = document.createElement('option');
-            placeholder.value = '';
-            placeholder.textContent = this.getAttribute('family-site-label') || '패밀리 사이트';
-            placeholder.disabled = true;
-            placeholder.selected = true;
-            select.append(placeholder);
-            familySites.forEach((site) => {
-                const option = document.createElement('option');
-                option.value = site.href;
-                option.textContent = site.label;
-                option.dataset.id = site.id;
-                select.append(option);
-            });
-            select.addEventListener('change', () => {
-                const selected = familySites.find((site) => site.href === select.value);
-                if (!selected)
-                    return;
-                select.selectedIndex = 0;
-                this.dispatchEvent(new CustomEvent('db-family-site-change', {
-                    bubbles: true,
-                    composed: true,
-                    detail: { site: selected },
-                }));
-            });
-            familyWrap.append(select);
-            bar.append(familyWrap);
-        }
-        return bar;
-    }
-    renderCompanyInfo(info) {
-        const rows = this.createCompanyInfoRows(info);
-        if (!rows.length)
-            return null;
-        const wrap = document.createElement('div');
-        wrap.className = 'designbase-wc-footer__company';
-        rows.forEach((row) => {
-            const line = document.createElement('p');
-            line.className = 'designbase-wc-footer__company-line';
-            line.textContent = row;
-            wrap.append(line);
-        });
-        return wrap;
-    }
-    createCopyright(copyright) {
-        const bottom = document.createElement('div');
-        bottom.className = 'designbase-wc-footer__bottom';
-        const copyrightEl = document.createElement('p');
-        copyrightEl.className = 'designbase-wc-footer__copyright';
-        copyrightEl.textContent = copyright;
-        bottom.append(copyrightEl);
-        return bottom;
-    }
-    renderMinimal(container, legalLinks, copyright) {
-        const bar = document.createElement('div');
-        bar.className = 'designbase-wc-footer__minimal-bar';
-        const start = document.createElement('div');
-        start.className = 'designbase-wc-footer__minimal-start';
-        if (this.showLogo())
-            start.append(this.createLogo());
-        bar.append(start);
-        if (legalLinks.length) {
-            const legalWrap = document.createElement('div');
-            legalWrap.className = 'designbase-wc-footer__minimal-legal';
-            legalWrap.append(this.createLegalNav(legalLinks));
-            bar.append(legalWrap);
-        }
-        container.append(bar);
-        container.append(this.createCopyright(copyright));
-    }
-    render() {
-        this.syncHostClasses();
-        this.setAttribute('role', 'contentinfo');
-        const variant = this.getAttribute('variant') || 'default';
-        const size = this.getAttribute('size') || 'm';
-        const iconPx = size === 's' ? 18 : size === 'l' ? 22 : 20;
-        const columns = variant === 'default' ? this.columns : [];
-        const legalLinks = this.legalLinks;
-        const companyInfo = this.companyInfo;
-        const familySites = this.familySites;
-        const copyright = this.getAttribute('copyright') || `© ${new Date().getFullYear()} Designbase. All rights reserved.`;
-        this.replaceChildren();
-        const container = document.createElement('div');
-        container.className = [
-            'designbase-wc-footer__container',
-            this.hasAttribute('full-width') && 'designbase-wc-footer__container--full-width',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        if (variant === 'minimal') {
-            this.renderMinimal(container, legalLinks, copyright);
-            this.append(container);
-            return;
-        }
-        const top = document.createElement('div');
-        top.className = 'designbase-wc-footer__top';
-        top.append(this.renderBrand(iconPx, { showTagline: variant !== 'compact' }));
-        const columnsEl = this.renderColumns(columns);
-        if (columnsEl)
-            top.append(columnsEl);
-        container.append(top);
-        const legalBar = this.renderLegalBar(legalLinks, familySites);
-        if (legalBar)
-            container.append(legalBar);
-        const companyEl = this.renderCompanyInfo(companyInfo);
-        if (companyEl)
-            container.append(companyEl);
-        container.append(this.createCopyright(copyright));
-        this.append(container);
-    }
-}
-if (!customElements.get('db-footer')) {
-    customElements.define('db-footer', DbFooter);
-}
-
-export { DbFooter };
+import{createShareIcon as e}from"./db-share-icons.js";const t=["default","compact","minimal"],s=["s","m","l"],n={youtube:"youtube",instagram:"instagram",x:"x",linkedin:"linkedin",facebook:"facebook",email:"mail"};function parseJson(e,t){if(!e)return t;try{return JSON.parse(e)??t}catch{return t}}class DbFooter extends HTMLElement{static get observedAttributes(){return["columns","legal-links","social-links","company-info","family-sites","tagline","copyright","logo-type","variant","size","full-width","show-logo","show-social","family-site-label"]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}get columns(){return parseJson(this.getAttribute("columns"),[])}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get legalLinks(){return parseJson(this.getAttribute("legal-links"),[])}set legalLinks(e){this.setAttribute("legal-links","string"==typeof e?e:JSON.stringify(e))}get socialLinks(){return parseJson(this.getAttribute("social-links"),[])}set socialLinks(e){this.setAttribute("social-links","string"==typeof e?e:JSON.stringify(e))}get companyInfo(){return parseJson(this.getAttribute("company-info"),{})}set companyInfo(e){this.setAttribute("company-info","string"==typeof e?e:JSON.stringify(e))}get familySites(){return parseJson(this.getAttribute("family-sites"),[])}set familySites(e){this.setAttribute("family-sites","string"==typeof e?e:JSON.stringify(e))}syncHostClasses(){const e=this.getAttribute("size")||"m",n=this.getAttribute("variant")||"default",a=s.includes(e)?e:"m",i=t.includes(n)?n:"default";this.className=["designbase-wc-footer",`designbase-wc-footer--${a}`,`designbase-wc-footer--${i}`,this.hasAttribute("full-width")&&"designbase-wc-footer--full-width"].filter(Boolean).join(" ")}dispatchLinkClick(e,t){this.dispatchEvent(new CustomEvent("db-link-click",{bubbles:!0,composed:!0,detail:{link:e,source:t}}))}createLink(e,t,s){const n=document.createElement("a");return n.href=e.href||"#",n.className=[t,e.emphasize&&`${t}--emphasize`].filter(Boolean).join(" "),n.textContent=e.label,e.external&&(n.target="_blank",n.rel="noopener noreferrer"),n.addEventListener("click",t=>{t.preventDefault(),this.dispatchLinkClick(e,s)}),n}createSocialLink(t,s){const a=document.createElement("a");a.href=t.href,a.className="designbase-wc-footer__social-link",a.target="_blank",a.rel="noopener noreferrer",a.setAttribute("aria-label",t.label||t.platform);const i=n[t.platform]||"share-alt";return a.append(e(i,s)),a.addEventListener("click",e=>{e.preventDefault(),this.dispatchEvent(new CustomEvent("db-social-click",{bubbles:!0,composed:!0,detail:{link:t}}))}),a}createCompanyInfoRows(e){const t=[],s=[];e.companyName&&s.push(e.companyName),e.representative&&s.push(`대표: ${e.representative}`),e.businessNumber&&s.push(`사업자등록번호: ${e.businessNumber}`),s.length&&t.push(s.join(" | "));const n=[];e.address&&n.push(e.address),e.phone&&n.push(`대표전화: ${e.phone}`),e.customerCenter&&n.push(`고객센터: ${e.customerCenter}`),n.length&&t.push(n.join(" | "));const a=[];return e.email&&a.push(`이메일: ${e.email}`),e.mailOrderNumber&&a.push(`통신판매업신고: ${e.mailOrderNumber}`),e.hostingProvider&&a.push(`호스팅: ${e.hostingProvider}`),a.length&&t.push(a.join(" | ")),t}showLogo(){return!this.hasAttribute("show-logo")||"false"!==this.getAttribute("show-logo")}createLogo(){const e=document.createElement("div");e.className="designbase-wc-footer__logo";const t=document.createElement("db-logo");return t.setAttribute("type",this.getAttribute("logo-type")||"designbase"),t.setAttribute("size","s"),t.setAttribute("clickable",""),t.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),e.append(t),e}renderBrand(e,t={}){const{showTagline:s=!0}=t,n=document.createElement("div");n.className="designbase-wc-footer__brand",this.showLogo()&&n.append(this.createLogo());const a=this.getAttribute("tagline");if(s&&a){const e=document.createElement("p");e.className="designbase-wc-footer__tagline",e.textContent=a,n.append(e)}const i=this.socialLinks;if(i.length&&(!this.hasAttribute("show-social")||"false"!==this.getAttribute("show-social"))){const t=document.createElement("div");t.className="designbase-wc-footer__social",i.forEach(s=>t.append(this.createSocialLink(s,e))),n.append(t)}return n}renderColumns(e){if(!e.length)return null;const t=document.createElement("div");return t.className="designbase-wc-footer__columns",t.style.setProperty("--db-footer-columns",String(Math.min(e.length,4))),e.forEach(e=>{const s=document.createElement("div");s.className="designbase-wc-footer__column";const n=document.createElement("h3");n.className="designbase-wc-footer__column-title",n.textContent=e.title,s.append(n);const a=document.createElement("ul");a.className="designbase-wc-footer__column-list",e.items.forEach(e=>{const t=document.createElement("li");t.append(this.createLink(e,"designbase-wc-footer__column-link","column")),a.append(t)}),s.append(a),t.append(s)}),t}createLegalNav(e){const t=document.createElement("nav");t.className="designbase-wc-footer__legal-nav",t.setAttribute("aria-label","법적 고지");const s=document.createElement("ul");return s.className="designbase-wc-footer__legal-list",e.forEach((t,n)=>{const a=document.createElement("li");if(a.append(this.createLink(t,"designbase-wc-footer__legal-link","legal")),s.append(a),n<e.length-1){const e=document.createElement("span");e.className="designbase-wc-footer__legal-divider",e.setAttribute("aria-hidden","true"),e.textContent="|",a.append(e)}}),t.append(s),t}renderLegalBar(e,t){if(!e.length&&!t.length)return null;const s=document.createElement("div");if(s.className="designbase-wc-footer__legal-bar",e.length&&s.append(this.createLegalNav(e)),t.length){const e=document.createElement("div");e.className="designbase-wc-footer__family-site";const n=document.createElement("select");n.className="designbase-wc-footer__family-select",n.setAttribute("aria-label",this.getAttribute("family-site-label")||"패밀리 사이트");const a=document.createElement("option");a.value="",a.textContent=this.getAttribute("family-site-label")||"패밀리 사이트",a.disabled=!0,a.selected=!0,n.append(a),t.forEach(e=>{const t=document.createElement("option");t.value=e.href,t.textContent=e.label,t.dataset.id=e.id,n.append(t)}),n.addEventListener("change",()=>{const e=t.find(e=>e.href===n.value);e&&(n.selectedIndex=0,this.dispatchEvent(new CustomEvent("db-family-site-change",{bubbles:!0,composed:!0,detail:{site:e}})))}),e.append(n),s.append(e)}return s}renderCompanyInfo(e){const t=this.createCompanyInfoRows(e);if(!t.length)return null;const s=document.createElement("div");return s.className="designbase-wc-footer__company",t.forEach(e=>{const t=document.createElement("p");t.className="designbase-wc-footer__company-line",t.textContent=e,s.append(t)}),s}createCopyright(e){const t=document.createElement("div");t.className="designbase-wc-footer__bottom";const s=document.createElement("p");return s.className="designbase-wc-footer__copyright",s.textContent=e,t.append(s),t}renderMinimal(e,t,s){const n=document.createElement("div");n.className="designbase-wc-footer__minimal-bar";const a=document.createElement("div");if(a.className="designbase-wc-footer__minimal-start",this.showLogo()&&a.append(this.createLogo()),n.append(a),t.length){const e=document.createElement("div");e.className="designbase-wc-footer__minimal-legal",e.append(this.createLegalNav(t)),n.append(e)}e.append(n),e.append(this.createCopyright(s))}render(){this.syncHostClasses(),this.setAttribute("role","contentinfo");const e=this.getAttribute("variant")||"default",t=this.getAttribute("size")||"m",s="s"===t?18:"l"===t?22:20,n="default"===e?this.columns:[],a=this.legalLinks,i=this.companyInfo,o=this.familySites,r=this.getAttribute("copyright")||`© ${(new Date).getFullYear()} Designbase. All rights reserved.`;this.replaceChildren();const l=document.createElement("div");if(l.className=["designbase-wc-footer__container",this.hasAttribute("full-width")&&"designbase-wc-footer__container--full-width"].filter(Boolean).join(" "),"minimal"===e)return this.renderMinimal(l,a,r),void this.append(l);const c=document.createElement("div");c.className="designbase-wc-footer__top",c.append(this.renderBrand(s,{showTagline:"compact"!==e}));const d=this.renderColumns(n);d&&c.append(d),l.append(c);const m=this.renderLegalBar(a,o);m&&l.append(m);const u=this.renderCompanyInfo(i);u&&l.append(u),l.append(this.createCopyright(r)),this.append(l)}}customElements.get("db-footer")||customElements.define("db-footer",DbFooter);export{DbFooter};