@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,88 @@
-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};
+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 };