@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,188 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const SIZES = ['xs', 's', 'm', 'l', 'xl', '2xl'];
-const VARIANTS = ['default', 'primary', 'success', 'warning', 'danger', 'info'];
-const STATUSES = ['online', 'offline', 'away', 'busy'];
-const LIGHT_COLORS = ['#E3F2FD', '#F3E5F5', '#E8F5E8', '#FFF3E0', '#FCE4EC', '#E0F2F1', '#FFF8E1', '#F1F8E9', '#E8EAF6', '#FFEBEE'];
-const DARK_COLORS = ['#1976D2', '#7B1FA2', '#388E3C', '#F57C00', '#C2185B', '#00796B', '#F9A825', '#689F38', '#3F51B5', '#D32F2F'];
-function initialsColor(text) {
-    let hash = 0;
-    for (let i = 0; i < text.length; i++) {
-        hash = text.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    const index = Math.abs(hash) % LIGHT_COLORS.length;
-    return { backgroundColor: LIGHT_COLORS[index], color: DARK_COLORS[index] };
-}
-function iconSize(size) {
-    if (size === 'xs')
-        return 12;
-    if (size === 's')
-        return 16;
-    if (size === 'm')
-        return 20;
-    if (size === 'l')
-        return 24;
-    if (size === 'xl')
-        return 32;
-    return 40;
-}
-class DbAvatar extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.imageFailed = false;
-        this.imageLoaded = false;
-        this.handleClick = () => {
-            if (this.hasAttribute('disabled') || !this.hasAttribute('clickable'))
-                return;
-            this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
-        };
-        this.handleKeyDown = (event) => {
-            if (!this.hasAttribute('clickable') || this.hasAttribute('disabled'))
-                return;
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                this.handleClick();
-            }
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'src',
-            'alt',
-            'initials',
-            'size',
-            'variant',
-            'status',
-            'disabled',
-            'clickable',
-            'badge',
-            'badge-max-count',
-            'badge-variant',
-            'badge-style',
-            'badge-text',
-        ];
-    }
-    connectedCallback() {
-        this.render();
-        this.addEventListener('click', this.handleClick);
-        this.addEventListener('keydown', this.handleKeyDown);
-    }
-    disconnectedCallback() {
-        this.removeEventListener('click', this.handleClick);
-        this.removeEventListener('keydown', this.handleKeyDown);
-    }
-    attributeChangedCallback(name) {
-        if (name === 'src') {
-            this.imageFailed = false;
-            this.imageLoaded = false;
-        }
-        this.render();
-    }
-    render() {
-        const size = SIZES.includes((this.getAttribute('size') || 'm'))
-            ? this.getAttribute('size') || 'm'
-            : 'm';
-        const variant = VARIANTS.includes((this.getAttribute('variant') || 'default'))
-            ? this.getAttribute('variant') || 'default'
-            : 'default';
-        const disabled = this.hasAttribute('disabled');
-        const clickable = this.hasAttribute('clickable');
-        const src = this.getAttribute('src');
-        const initials = this.getAttribute('initials') || '';
-        const showImage = Boolean(src && !this.imageFailed);
-        const showLoading = showImage && !this.imageLoaded;
-        this.className = [
-            'designbase-wc-avatar',
-            `designbase-wc-avatar--${size}`,
-            `designbase-wc-avatar--${variant}`,
-            clickable && 'designbase-wc-avatar--clickable',
-            disabled && 'designbase-wc-avatar--disabled',
-            showLoading && 'designbase-wc-avatar--loading',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        if (clickable && !disabled) {
-            this.setAttribute('role', 'button');
-            this.tabIndex = 0;
-        }
-        else {
-            this.removeAttribute('role');
-            this.removeAttribute('tabindex');
-        }
-        this.toggleAttribute('aria-disabled', disabled);
-        this.replaceChildren();
-        if (showLoading) {
-            const loading = document.createElement('div');
-            loading.className = 'designbase-wc-avatar__loading';
-            const skeleton = document.createElement('div');
-            skeleton.className = 'designbase-wc-avatar__skeleton';
-            loading.append(skeleton);
-            this.append(loading);
-        }
-        if (showImage) {
-            const image = document.createElement('img');
-            image.className = 'designbase-wc-avatar__image';
-            image.src = src;
-            image.alt = this.getAttribute('alt') || '아바타 이미지';
-            image.loading = 'lazy';
-            image.addEventListener('load', () => {
-                this.imageLoaded = true;
-                this.classList.remove('designbase-wc-avatar--loading');
-                this.querySelector('.designbase-wc-avatar__loading')?.remove();
-            });
-            image.addEventListener('error', () => {
-                this.imageFailed = true;
-                this.imageLoaded = false;
-                this.render();
-            });
-            this.append(image);
-        }
-        else if (initials) {
-            const initialsEl = document.createElement('div');
-            initialsEl.className = 'designbase-wc-avatar__initials';
-            if (variant === 'default') {
-                const colors = initialsColor(initials);
-                initialsEl.style.backgroundColor = colors.backgroundColor;
-                initialsEl.style.color = colors.color;
-            }
-            initialsEl.textContent = initials.charAt(0).toUpperCase();
-            this.append(initialsEl);
-        }
-        else {
-            const iconWrap = document.createElement('div');
-            iconWrap.className = 'designbase-wc-avatar__icon';
-            iconWrap.append(createDbIcon('user', iconSize(size)));
-            this.append(iconWrap);
-        }
-        const status = this.getAttribute('status') || '';
-        if (STATUSES.includes(status)) {
-            const statusElement = document.createElement('span');
-            statusElement.className = `designbase-wc-avatar__status designbase-wc-avatar__status--${status}`;
-            this.append(statusElement);
-        }
-        if (this.hasAttribute('badge')) {
-            const badgeWrap = document.createElement('div');
-            badgeWrap.className = 'designbase-wc-avatar__badge';
-            const badge = document.createElement('db-badge');
-            badge.setAttribute('count', this.getAttribute('badge') || '0');
-            const badgeStyle = this.getAttribute('badge-style') || 'number';
-            badge.setAttribute('badge-style', badgeStyle);
-            if (this.hasAttribute('badge-max-count')) {
-                badge.setAttribute('max-count', this.getAttribute('badge-max-count'));
-            }
-            badge.setAttribute('variant', this.getAttribute('badge-variant') || 'danger');
-            if (this.hasAttribute('badge-text')) {
-                badge.textContent = this.getAttribute('badge-text');
-            }
-            const badgeSize = size === 'xl' || size === '2xl' ? 'm' : 's';
-            badge.setAttribute('size', badgeSize);
-            badgeWrap.append(badge);
-            this.append(badgeWrap);
-        }
-    }
-}
-if (!customElements.get('db-avatar')) {
-    customElements.define('db-avatar', DbAvatar);
-}
-
-export { DbAvatar };
+import{createDbIcon as t}from"./db-icons.js";const e=["xs","s","m","l","xl","2xl"],a=["default","primary","success","warning","danger","info"],s=["online","offline","away","busy"],i=["#E3F2FD","#F3E5F5","#E8F5E8","#FFF3E0","#FCE4EC","#E0F2F1","#FFF8E1","#F1F8E9","#E8EAF6","#FFEBEE"],n=["#1976D2","#7B1FA2","#388E3C","#F57C00","#C2185B","#00796B","#F9A825","#689F38","#3F51B5","#D32F2F"];class DbAvatar extends HTMLElement{constructor(){super(...arguments),this.imageFailed=!1,this.imageLoaded=!1,this.handleClick=()=>{!this.hasAttribute("disabled")&&this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=t=>{this.hasAttribute("clickable")&&!this.hasAttribute("disabled")&&("Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleClick()))}}static get observedAttributes(){return["src","alt","initials","size","variant","status","disabled","clickable","badge","badge-max-count","badge-variant","badge-style","badge-text"]}connectedCallback(){this.render(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){"src"===t&&(this.imageFailed=!1,this.imageLoaded=!1),this.render()}render(){const r=e.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",d=a.includes(this.getAttribute("variant")||"default")&&this.getAttribute("variant")||"default",l=this.hasAttribute("disabled"),c=this.hasAttribute("clickable"),o=this.getAttribute("src"),b=this.getAttribute("initials")||"",h=Boolean(o&&!this.imageFailed),u=h&&!this.imageLoaded;if(this.className=["designbase-wc-avatar",`designbase-wc-avatar--${r}`,`designbase-wc-avatar--${d}`,c&&"designbase-wc-avatar--clickable",l&&"designbase-wc-avatar--disabled",u&&"designbase-wc-avatar--loading"].filter(Boolean).join(" "),c&&!l?(this.setAttribute("role","button"),this.tabIndex=0):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.toggleAttribute("aria-disabled",l),this.replaceChildren(),u){const t=document.createElement("div");t.className="designbase-wc-avatar__loading";const e=document.createElement("div");e.className="designbase-wc-avatar__skeleton",t.append(e),this.append(t)}if(h){const t=document.createElement("img");t.className="designbase-wc-avatar__image",t.src=o,t.alt=this.getAttribute("alt")||"아바타 이미지",t.loading="lazy",t.addEventListener("load",()=>{this.imageLoaded=!0,this.classList.remove("designbase-wc-avatar--loading"),this.querySelector(".designbase-wc-avatar__loading")?.remove()}),t.addEventListener("error",()=>{this.imageFailed=!0,this.imageLoaded=!1,this.render()}),this.append(t)}else if(b){const t=document.createElement("div");if(t.className="designbase-wc-avatar__initials","default"===d){const e=function initialsColor(t){let e=0;for(let a=0;a<t.length;a++)e=t.charCodeAt(a)+((e<<5)-e);const a=Math.abs(e)%i.length;return{backgroundColor:i[a],color:n[a]}}(b);t.style.backgroundColor=e.backgroundColor,t.style.color=e.color}t.textContent=b.charAt(0).toUpperCase(),this.append(t)}else{const e=document.createElement("div");e.className="designbase-wc-avatar__icon",e.append(t("user",function iconSize(t){return"xs"===t?12:"s"===t?16:"m"===t?20:"l"===t?24:"xl"===t?32:40}(r))),this.append(e)}const g=this.getAttribute("status")||"";if(s.includes(g)){const t=document.createElement("span");t.className=`designbase-wc-avatar__status designbase-wc-avatar__status--${g}`,this.append(t)}if(this.hasAttribute("badge")){const t=document.createElement("div");t.className="designbase-wc-avatar__badge";const e=document.createElement("db-badge");e.setAttribute("count",this.getAttribute("badge")||"0");const a=this.getAttribute("badge-style")||"number";e.setAttribute("badge-style",a),this.hasAttribute("badge-max-count")&&e.setAttribute("max-count",this.getAttribute("badge-max-count")),e.setAttribute("variant",this.getAttribute("badge-variant")||"danger"),this.hasAttribute("badge-text")&&(e.textContent=this.getAttribute("badge-text"));const s="xl"===r||"2xl"===r?"m":"s";e.setAttribute("size",s),t.append(e),this.append(t)}}}customElements.get("db-avatar")||customElements.define("db-avatar",DbAvatar);export{DbAvatar};

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

@@ -1,139 +1 @@
-const ANIMATIONS = ['fade', 'slide', 'zoom', 'none'];
-class DbBackdrop extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.keyHandler = null;
-        this.handlePortalClick = (event) => {
-            if (event.target !== this.portal)
-                return;
-            if (this.getAttribute('disable-backdrop-click') === 'true')
-                return;
-            this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
-            this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'open',
-            'blur',
-            'opacity',
-            'blur-amount',
-            'animation',
-            'animation-duration',
-            'z-index',
-            'background-color',
-            'disable-backdrop-click',
-            'disable-escape-key-down',
-        ];
-    }
-    get open() {
-        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
-    }
-    set open(value) {
-        if (value)
-            this.setAttribute('open', '');
-        else
-            this.removeAttribute('open');
-    }
-    connectedCallback() {
-        this.style.display = 'contents';
-        this.syncOpenState();
-    }
-    disconnectedCallback() {
-        this.detachListeners();
-        this.portal?.remove();
-        this.portal = undefined;
-        document.body.style.overflow = '';
-    }
-    attributeChangedCallback() {
-        if (!this.isConnected)
-            return;
-        this.syncOpenState();
-    }
-    isOpen() {
-        return this.open;
-    }
-    syncOpenState() {
-        if (this.isOpen()) {
-            this.render();
-            return;
-        }
-        document.body.style.overflow = '';
-        this.detachListeners();
-        this.portal?.remove();
-    }
-    collectChildren() {
-        return Array.from(this.children).filter((child) => !child.hasAttribute('data-wc-internal'));
-    }
-    attachListeners() {
-        if (this.keyHandler)
-            return;
-        this.keyHandler = (event) => {
-            if (event.key !== 'Escape')
-                return;
-            if (this.getAttribute('disable-escape-key-down') === 'true')
-                return;
-            this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
-            this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
-        };
-        document.addEventListener('keydown', this.keyHandler);
-    }
-    detachListeners() {
-        if (!this.keyHandler)
-            return;
-        document.removeEventListener('keydown', this.keyHandler);
-        this.keyHandler = null;
-    }
-    render() {
-        if (!this.isOpen()) {
-            this.syncOpenState();
-            return;
-        }
-        const blur = this.hasAttribute('blur');
-        const opacity = this.getAttribute('opacity') || '0.5';
-        const blurAmount = this.getAttribute('blur-amount') || '4';
-        const animation = ANIMATIONS.includes((this.getAttribute('animation') || 'fade'))
-            ? this.getAttribute('animation') || 'fade'
-            : 'fade';
-        const animationDuration = this.getAttribute('animation-duration') || '300';
-        const zIndex = this.getAttribute('z-index') || '1000';
-        const backgroundColor = this.getAttribute('background-color');
-        const userChildren = this.collectChildren();
-        document.body.style.overflow = 'hidden';
-        this.attachListeners();
-        if (!this.portal) {
-            this.portal = document.createElement('div');
-            this.portal.setAttribute('data-wc-internal', '');
-            this.portal.addEventListener('click', this.handlePortalClick);
-        }
-        this.portal.className = [
-            'designbase-wc-backdrop',
-            `designbase-wc-backdrop--${animation}`,
-            'designbase-wc-backdrop--open',
-            blur ? 'designbase-wc-backdrop--blur' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.portal.setAttribute('role', 'presentation');
-        this.portal.setAttribute('aria-hidden', 'false');
-        this.portal.style.setProperty('--backdrop-opacity', opacity);
-        this.portal.style.setProperty('--backdrop-blur-amount', `${blurAmount}px`);
-        this.portal.style.setProperty('--backdrop-animation-duration', `${animationDuration}ms`);
-        this.portal.style.setProperty('--backdrop-z-index', zIndex);
-        if (backgroundColor) {
-            this.portal.style.backgroundColor = backgroundColor;
-        }
-        else {
-            this.portal.style.removeProperty('background-color');
-        }
-        this.portal.replaceChildren(...userChildren);
-        if (!this.portal.isConnected) {
-            document.body.append(this.portal);
-        }
-    }
-}
-if (!customElements.get('db-backdrop')) {
-    customElements.define('db-backdrop', DbBackdrop);
-}
-
-export { DbBackdrop };
+const t=["fade","slide","zoom","none"];class DbBackdrop extends HTMLElement{constructor(){super(...arguments),this.keyHandler=null,this.handlePortalClick=t=>{t.target===this.portal&&"true"!==this.getAttribute("disable-backdrop-click")&&(this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))}}static get observedAttributes(){return["open","blur","opacity","blur-amount","animation","animation-duration","z-index","background-color","disable-backdrop-click","disable-escape-key-down"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}connectedCallback(){this.style.display="contents",this.syncOpenState()}disconnectedCallback(){this.detachListeners(),this.portal?.remove(),this.portal=void 0,document.body.style.overflow=""}attributeChangedCallback(){this.isConnected&&this.syncOpenState()}isOpen(){return this.open}syncOpenState(){this.isOpen()?this.render():(document.body.style.overflow="",this.detachListeners(),this.portal?.remove())}collectChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"))}attachListeners(){this.keyHandler||(this.keyHandler=t=>{"Escape"===t.key&&"true"!==this.getAttribute("disable-escape-key-down")&&(this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))},document.addEventListener("keydown",this.keyHandler))}detachListeners(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}render(){if(!this.isOpen())return void this.syncOpenState();const e=this.hasAttribute("blur"),s=this.getAttribute("opacity")||"0.5",i=this.getAttribute("blur-amount")||"4",r=t.includes(this.getAttribute("animation")||"fade")&&this.getAttribute("animation")||"fade",o=this.getAttribute("animation-duration")||"300",n=this.getAttribute("z-index")||"1000",a=this.getAttribute("background-color"),d=this.collectChildren();document.body.style.overflow="hidden",this.attachListeners(),this.portal||(this.portal=document.createElement("div"),this.portal.setAttribute("data-wc-internal",""),this.portal.addEventListener("click",this.handlePortalClick)),this.portal.className=["designbase-wc-backdrop",`designbase-wc-backdrop--${r}`,"designbase-wc-backdrop--open",e?"designbase-wc-backdrop--blur":""].filter(Boolean).join(" "),this.portal.setAttribute("role","presentation"),this.portal.setAttribute("aria-hidden","false"),this.portal.style.setProperty("--backdrop-opacity",s),this.portal.style.setProperty("--backdrop-blur-amount",`${i}px`),this.portal.style.setProperty("--backdrop-animation-duration",`${o}ms`),this.portal.style.setProperty("--backdrop-z-index",n),a?this.portal.style.backgroundColor=a:this.portal.style.removeProperty("background-color"),this.portal.replaceChildren(...d),this.portal.isConnected||document.body.append(this.portal)}}customElements.get("db-backdrop")||customElements.define("db-backdrop",DbBackdrop);export{DbBackdrop};

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

@@ -1,91 +1 @@
-const CLASS = 'designbase-wc-badge';
-const VARIANTS = ['primary', 'secondary', 'info', 'success', 'warning', 'danger'];
-const SIZES = ['s', 'm', 'l'];
-const STYLES = ['dot', 'number', 'text', 'outlined'];
-class DbBadge extends HTMLElement {
-    static get observedAttributes() {
-        return ['variant', 'size', 'badge-style', 'count', 'max-count', 'disabled'];
-    }
-    get variant() {
-        return this.getAttribute('variant') || 'primary';
-    }
-    set variant(value) {
-        this.setAttribute('variant', value);
-    }
-    get size() {
-        return this.getAttribute('size') || 'm';
-    }
-    set size(value) {
-        this.setAttribute('size', value);
-    }
-    get badgeStyle() {
-        return this.getAttribute('badge-style') || 'text';
-    }
-    set badgeStyle(value) {
-        this.setAttribute('badge-style', value);
-    }
-    get count() {
-        const value = this.getAttribute('count');
-        return value === null ? undefined : Number(value);
-    }
-    set count(value) {
-        if (value === undefined)
-            this.removeAttribute('count');
-        else
-            this.setAttribute('count', String(value));
-    }
-    get maxCount() {
-        return Number(this.getAttribute('max-count') || 99);
-    }
-    set maxCount(value) {
-        this.setAttribute('max-count', String(value));
-    }
-    get disabled() {
-        return this.hasAttribute('disabled');
-    }
-    set disabled(value) {
-        this.toggleAttribute('disabled', value);
-    }
-    connectedCallback() {
-        this.syncAttributes();
-    }
-    attributeChangedCallback(name, _oldValue, _newValue) {
-        if (name === 'count' || name === 'max-count' || name === 'badge-style') {
-            this.syncContent();
-        }
-        this.syncAttributes();
-    }
-    syncAttributes() {
-        this.classList.add(CLASS);
-        this.setAttribute('aria-disabled', String(this.disabled));
-        this.syncEnum('variant', this.variant, VARIANTS);
-        this.syncEnum('size', this.size, SIZES);
-        this.syncEnum('style', this.badgeStyle, STYLES);
-        this.classList.toggle(`${CLASS}--disabled`, this.disabled);
-        this.syncContent();
-    }
-    syncContent() {
-        if (this.badgeStyle === 'number' && this.count !== undefined) {
-            this.textContent =
-                this.count > this.maxCount ? `${this.maxCount}+` : String(this.count);
-            return;
-        }
-        if (this.badgeStyle === 'dot') {
-            this.textContent = '';
-        }
-    }
-    syncEnum(name, value, values) {
-        values.forEach((item) => this.classList.remove(`${CLASS}--${item}`));
-        if (values.includes(value)) {
-            this.classList.add(`${CLASS}--${value}`);
-        }
-        else if (name === 'style') {
-            this.classList.add(`${CLASS}--text`);
-        }
-    }
-}
-if (!customElements.get('db-badge')) {
-    customElements.define('db-badge', DbBadge);
-}
-
-export { DbBadge };
+const t="designbase-wc-badge",e=["primary","secondary","info","success","warning","danger"],s=["s","m","l"],i=["dot","number","text","outlined"];class DbBadge extends HTMLElement{static get observedAttributes(){return["variant","size","badge-style","count","max-count","disabled"]}get variant(){return this.getAttribute("variant")||"primary"}set variant(t){this.setAttribute("variant",t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}get badgeStyle(){return this.getAttribute("badge-style")||"text"}set badgeStyle(t){this.setAttribute("badge-style",t)}get count(){const t=this.getAttribute("count");return null===t?void 0:Number(t)}set count(t){void 0===t?this.removeAttribute("count"):this.setAttribute("count",String(t))}get maxCount(){return Number(this.getAttribute("max-count")||99)}set maxCount(t){this.setAttribute("max-count",String(t))}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}connectedCallback(){this.syncAttributes()}attributeChangedCallback(t,e,s){"count"!==t&&"max-count"!==t&&"badge-style"!==t||this.syncContent(),this.syncAttributes()}syncAttributes(){this.classList.add(t),this.setAttribute("aria-disabled",String(this.disabled)),this.syncEnum("variant",this.variant,e),this.syncEnum("size",this.size,s),this.syncEnum("style",this.badgeStyle,i),this.classList.toggle(`${t}--disabled`,this.disabled),this.syncContent()}syncContent(){"number"!==this.badgeStyle||void 0===this.count?"dot"===this.badgeStyle&&(this.textContent=""):this.textContent=this.count>this.maxCount?`${this.maxCount}+`:String(this.count)}syncEnum(e,s,i){i.forEach(e=>this.classList.remove(`${t}--${e}`)),i.includes(s)?this.classList.add(`${t}--${s}`):"style"===e&&this.classList.add(`${t}--text`)}}customElements.get("db-badge")||customElements.define("db-badge",DbBadge);export{DbBadge};

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

@@ -1,188 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const BUTTON_VARIANT_MAP = {
-    primary: 'primary',
-    secondary: 'secondary',
-    outline: 'tertiary',
-    ghost: 'ghost',
-};
-const BUTTON_SIZE_MAP = {
-    s: 's',
-    sm: 's',
-    m: 'm',
-    md: 'm',
-    l: 'l',
-    lg: 'l',
-};
-class DbBanner extends HTMLElement {
-    static get observedAttributes() {
-        return [
-            'title',
-            'description',
-            'icon',
-            'image',
-            'image-alt',
-            'actions',
-            'size',
-            'variant',
-            'background-image',
-        ];
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-    parseActions() {
-        const raw = this.getAttribute('actions');
-        if (!raw)
-            return [];
-        try {
-            const parsed = JSON.parse(raw);
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    getIconSize(size) {
-        if (size === 's')
-            return 16;
-        if (size === 'l')
-            return 24;
-        return 20;
-    }
-    getActionIconSize(size) {
-        if (size === 's')
-            return 16;
-        if (size === 'l')
-            return 20;
-        return 18;
-    }
-    resolveIconName(icon) {
-        if (!icon)
-            return undefined;
-        if (icon in { close: 1, 'info-filled': 1 })
-            return icon;
-        return undefined;
-    }
-    createActionControl(action, index, actionVariant, actionSize) {
-        const iconName = this.resolveIconName(action.icon);
-        const iconOnly = Boolean(action.iconOnly && iconName);
-        const bindClick = (element) => {
-            element.addEventListener('db-click', () => {
-                this.dispatchEvent(new CustomEvent('db-action', {
-                    bubbles: true,
-                    composed: true,
-                    detail: { index, action },
-                }));
-            });
-        };
-        if (action.href) {
-            const link = document.createElement('a');
-            link.className = `designbase-wc-button designbase-wc-button--${actionVariant} designbase-wc-button--${actionSize}`;
-            if (iconOnly)
-                link.classList.add('designbase-wc-button--icon-only');
-            link.href = action.href;
-            link.setAttribute('aria-label', action.text);
-            if (iconOnly && iconName) {
-                link.append(createDbIcon(iconName, this.getActionIconSize(actionSize)));
-            }
-            else {
-                link.textContent = action.text;
-            }
-            if (action.external) {
-                link.target = '_blank';
-                link.rel = 'noopener noreferrer';
-            }
-            return link;
-        }
-        const button = document.createElement('db-button');
-        button.setAttribute('variant', actionVariant);
-        button.setAttribute('size', actionSize);
-        if (iconOnly) {
-            button.setAttribute('icon-only', '');
-            button.setAttribute('aria-label', action.text);
-            if (iconName)
-                button.append(createDbIcon(iconName, this.getActionIconSize(actionSize)));
-        }
-        else {
-            button.textContent = action.text;
-        }
-        bindClick(button);
-        return button;
-    }
-    render() {
-        const title = this.getAttribute('title') || '';
-        const description = this.getAttribute('description') || '';
-        const iconName = this.getAttribute('icon');
-        const image = this.getAttribute('image');
-        const imageAlt = this.getAttribute('image-alt') || title || 'Banner image';
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'primary';
-        const backgroundImage = this.getAttribute('background-image');
-        const actions = this.parseActions();
-        this.className = `designbase-wc-banner designbase-wc-banner--${size} designbase-wc-banner--${variant}`;
-        this.replaceChildren();
-        if (variant === 'image' && backgroundImage) {
-            const background = document.createElement('div');
-            background.className = 'designbase-wc-banner__background';
-            background.style.backgroundImage = `url(${backgroundImage})`;
-            background.style.backgroundSize = 'cover';
-            background.style.backgroundPosition = 'center';
-            background.style.backgroundRepeat = 'no-repeat';
-            this.append(background);
-            const overlay = document.createElement('div');
-            overlay.className = 'designbase-wc-banner__overlay';
-            this.append(overlay);
-        }
-        const container = document.createElement('div');
-        container.className = 'designbase-wc-banner__container';
-        if (iconName) {
-            const iconWrap = document.createElement('div');
-            iconWrap.className = 'designbase-wc-banner__icon';
-            iconWrap.append(createDbIcon(iconName, this.getIconSize(size)));
-            container.append(iconWrap);
-        }
-        if (image) {
-            const imageWrap = document.createElement('div');
-            imageWrap.className = 'designbase-wc-banner__image';
-            const imageElement = document.createElement('img');
-            imageElement.src = image;
-            imageElement.alt = imageAlt;
-            imageWrap.append(imageElement);
-            container.append(imageWrap);
-        }
-        const content = document.createElement('div');
-        content.className = 'designbase-wc-banner__content';
-        if (title) {
-            const heading = document.createElement('h3');
-            heading.className = 'designbase-wc-banner__title';
-            heading.textContent = title;
-            content.append(heading);
-        }
-        if (description) {
-            const body = document.createElement('p');
-            body.className = 'designbase-wc-banner__description';
-            body.textContent = description;
-            content.append(body);
-        }
-        container.append(content);
-        if (actions.length > 0) {
-            const actionsWrap = document.createElement('div');
-            actionsWrap.className = 'designbase-wc-banner__actions';
-            actions.forEach((action, index) => {
-                const actionVariant = BUTTON_VARIANT_MAP[action.variant || 'primary'] || 'primary';
-                const actionSize = BUTTON_SIZE_MAP[action.size || 'sm'] || 's';
-                actionsWrap.append(this.createActionControl(action, index, actionVariant, actionSize));
-            });
-            container.append(actionsWrap);
-        }
-        this.append(container);
-    }
-}
-if (!customElements.get('db-banner'))
-    customElements.define('db-banner', DbBanner);
-
-export { DbBanner };
+import{createDbIcon as e}from"./db-icons.js";const t={primary:"primary",secondary:"secondary",outline:"tertiary",ghost:"ghost"},n={s:"s",sm:"s",m:"m",md:"m",l:"l",lg:"l"};class DbBanner extends HTMLElement{static get observedAttributes(){return["title","description","icon","image","image-alt","actions","size","variant","background-image"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}parseActions(){const e=this.getAttribute("actions");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}getIconSize(e){return"s"===e?16:"l"===e?24:20}getActionIconSize(e){return"s"===e?16:"l"===e?20:18}resolveIconName(e){if(e)return e in{close:1,"info-filled":1}?e:void 0}createActionControl(t,n,a,s){const i=this.resolveIconName(t.icon),r=Boolean(t.iconOnly&&i);if(t.href){const n=document.createElement("a");return n.className=`designbase-wc-button designbase-wc-button--${a} designbase-wc-button--${s}`,r&&n.classList.add("designbase-wc-button--icon-only"),n.href=t.href,n.setAttribute("aria-label",t.text),r&&i?n.append(e(i,this.getActionIconSize(s))):n.textContent=t.text,t.external&&(n.target="_blank",n.rel="noopener noreferrer"),n}const c=document.createElement("db-button");return c.setAttribute("variant",a),c.setAttribute("size",s),r?(c.setAttribute("icon-only",""),c.setAttribute("aria-label",t.text),i&&c.append(e(i,this.getActionIconSize(s)))):c.textContent=t.text,(e=>{e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-action",{bubbles:!0,composed:!0,detail:{index:n,action:t}}))})})(c),c}render(){const a=this.getAttribute("title")||"",s=this.getAttribute("description")||"",i=this.getAttribute("icon"),r=this.getAttribute("image"),c=this.getAttribute("image-alt")||a||"Banner image",o=this.getAttribute("size")||"m",d=this.getAttribute("variant")||"primary",b=this.getAttribute("background-image"),l=this.parseActions();if(this.className=`designbase-wc-banner designbase-wc-banner--${o} designbase-wc-banner--${d}`,this.replaceChildren(),"image"===d&&b){const e=document.createElement("div");e.className="designbase-wc-banner__background",e.style.backgroundImage=`url(${b})`,e.style.backgroundSize="cover",e.style.backgroundPosition="center",e.style.backgroundRepeat="no-repeat",this.append(e);const t=document.createElement("div");t.className="designbase-wc-banner__overlay",this.append(t)}const m=document.createElement("div");if(m.className="designbase-wc-banner__container",i){const t=document.createElement("div");t.className="designbase-wc-banner__icon",t.append(e(i,this.getIconSize(o))),m.append(t)}if(r){const e=document.createElement("div");e.className="designbase-wc-banner__image";const t=document.createElement("img");t.src=r,t.alt=c,e.append(t),m.append(e)}const g=document.createElement("div");if(g.className="designbase-wc-banner__content",a){const e=document.createElement("h3");e.className="designbase-wc-banner__title",e.textContent=a,g.append(e)}if(s){const e=document.createElement("p");e.className="designbase-wc-banner__description",e.textContent=s,g.append(e)}if(m.append(g),l.length>0){const e=document.createElement("div");e.className="designbase-wc-banner__actions",l.forEach((a,s)=>{const i=t[a.variant||"primary"]||"primary",r=n[a.size||"sm"]||"s";e.append(this.createActionControl(a,s,i,r))}),m.append(e)}this.append(m)}}customElements.get("db-banner")||customElements.define("db-banner",DbBanner);export{DbBanner};