dss/admin-ui/js/components/ds-badge.js

/**
 * DS Badge - Web Component
 *
 * Usage:
 *   <ds-badge>Default</ds-badge>
 *   <ds-badge variant="success">Active</ds-badge>
 *   <ds-badge variant="warning" dot>Pending</ds-badge>
 *
 * Attributes:
 *   - variant: default | secondary | outline | destructive | success | warning
 *   - dot: boolean (shows status dot)
 */

class DsBadge extends HTMLElement {
  static get observedAttributes() {
    return ['variant', 'dot'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  disconnectedCallback() {
    // Cleanup for consistency with other components
    // This badge has no event listeners, but disconnectedCallback
    // is present for future extensibility and pattern consistency
  }

  attributeChangedCallback() {
    if (this.shadowRoot.innerHTML) {
      this.render();
    }
  }

  get variant() {
    return this.getAttribute('variant') || 'default';
  }

  get dot() {
    return this.hasAttribute('dot');
  }

  getVariantClass() {
    const variants = {
      default: 'ds-badge--default',
      secondary: 'ds-badge--secondary',
      outline: 'ds-badge--outline',
      destructive: 'ds-badge--destructive',
      success: 'ds-badge--success',
      warning: 'ds-badge--warning'
    };
    return variants[this.variant] || variants.default;
  }

  render() {
    const variantClass = this.getVariantClass();

    this.shadowRoot.innerHTML = `
      <style>

        :host {
          display: inline-block;
        }
      </style>
      <span class="ds-badge ${variantClass}">
        ${this.dot ? '<span class="ds-badge__dot"></span>' : ''}
        <slot></slot>
      </span>
    `;
  }
}

customElements.define('ds-badge', DsBadge);

export default DsBadge;