@designbasekorea/ui-wc 0.5.6 → 0.6.1

package/dist/esm/components/db-app-badge.js

@@ -1,88 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const CLASS = 'designbase-wc-app-badge';
-const STORE_DEFAULTS = {
-    'app-store': { label: '다운로드', storeName: 'App Store' },
-    'google-play': { label: '다운로드', storeName: 'Google Play' },
-};
-class DbAppBadge extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-    }
-    static get observedAttributes() {
-        return ['store', 'href', 'label', 'store-name', 'size', 'theme'];
-    }
-    connectedCallback() {
-        if (!this.built) {
-            this.built = true;
-            this.build();
-        }
-        this.updateUI();
-    }
-    attributeChangedCallback() {
-        if (!this.built)
-            return;
-        this.updateUI();
-    }
-    getStore() {
-        const store = this.getAttribute('store') || 'app-store';
-        return store === 'google-play' ? 'google-play' : 'app-store';
-    }
-    getIconSize() {
-        const size = this.getAttribute('size') || 'm';
-        if (size === 's')
-            return 18;
-        if (size === 'l')
-            return 24;
-        return 20;
-    }
-    build() {
-        this.iconWrapEl = document.createElement('span');
-        this.iconWrapEl.className = `${CLASS}__icon`;
-        this.iconWrapEl.setAttribute('aria-hidden', 'true');
-        const text = document.createElement('span');
-        text.className = `${CLASS}__text`;
-        this.labelEl = document.createElement('span');
-        this.labelEl.className = `${CLASS}__label`;
-        this.storeEl = document.createElement('span');
-        this.storeEl.className = `${CLASS}__store`;
-        text.append(this.labelEl, this.storeEl);
-        this.append(this.iconWrapEl, text);
-        this.addEventListener('click', (event) => {
-            if (!this.getAttribute('href')) {
-                this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true, detail: { event } }));
-            }
-        });
-    }
-    updateUI() {
-        const store = this.getStore();
-        const defaults = STORE_DEFAULTS[store];
-        const size = this.getAttribute('size') || 'm';
-        const theme = this.getAttribute('theme') || 'dark';
-        const label = this.getAttribute('label') || defaults.label;
-        const storeName = this.getAttribute('store-name') || defaults.storeName;
-        const href = this.getAttribute('href');
-        this.className = [CLASS, `${CLASS}--${size}`, `${CLASS}--${theme}`, `${CLASS}--${store}`].join(' ');
-        if (href) {
-            this.setAttribute('role', 'link');
-            this.tabIndex = 0;
-            this.onclick = () => window.open(href, '_blank', 'noopener,noreferrer');
-        }
-        else {
-            this.setAttribute('role', 'button');
-            this.tabIndex = 0;
-        }
-        if (this.iconWrapEl) {
-            this.iconWrapEl.replaceChildren(createDbIcon(store === 'app-store' ? 'apple' : 'play-store', this.getIconSize()));
-        }
-        if (this.labelEl)
-            this.labelEl.textContent = label;
-        if (this.storeEl)
-            this.storeEl.textContent = storeName;
-    }
-}
-if (!customElements.get('db-app-badge'))
-    customElements.define('db-app-badge', DbAppBadge);
-
-export { DbAppBadge };
+import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-app-badge",s={"app-store":{label:"다운로드",storeName:"App Store"},"google-play":{label:"다운로드",storeName:"Google Play"}};class DbAppBadge extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["store","href","label","store-name","size","theme"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}getStore(){return"google-play"===(this.getAttribute("store")||"app-store")?"google-play":"app-store"}getIconSize(){const t=this.getAttribute("size")||"m";return"s"===t?18:"l"===t?24:20}build(){this.iconWrapEl=document.createElement("span"),this.iconWrapEl.className=`${e}__icon`,this.iconWrapEl.setAttribute("aria-hidden","true");const t=document.createElement("span");t.className=`${e}__text`,this.labelEl=document.createElement("span"),this.labelEl.className=`${e}__label`,this.storeEl=document.createElement("span"),this.storeEl.className=`${e}__store`,t.append(this.labelEl,this.storeEl),this.append(this.iconWrapEl,t),this.addEventListener("click",t=>{this.getAttribute("href")||this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0,detail:{event:t}}))})}updateUI(){const i=this.getStore(),a=s[i],l=this.getAttribute("size")||"m",r=this.getAttribute("theme")||"dark",o=this.getAttribute("label")||a.label,n=this.getAttribute("store-name")||a.storeName,p=this.getAttribute("href");this.className=[e,`${e}--${l}`,`${e}--${r}`,`${e}--${i}`].join(" "),p?(this.setAttribute("role","link"),this.tabIndex=0,this.onclick=()=>window.open(p,"_blank","noopener,noreferrer")):(this.setAttribute("role","button"),this.tabIndex=0),this.iconWrapEl&&this.iconWrapEl.replaceChildren(t("app-store"===i?"apple":"play-store",this.getIconSize())),this.labelEl&&(this.labelEl.textContent=o),this.storeEl&&(this.storeEl.textContent=n)}}customElements.get("db-app-badge")||customElements.define("db-app-badge",DbAppBadge);export{DbAppBadge};