dees-catalog/ts_web/elements/dees-badge.ts

import {
  DeesElement,
  css,
  cssManager,
  customElement,
  html,
  property,
  type CSSResult,
  type TemplateResult,
} from '@design.estate/dees-element';

import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-badge.demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-badge': DeesBadge;
  }
}

@customElement('dees-badge')
export class DeesBadge extends DeesElement {
  public static demo = demoFunc;

  @property({ type: String })
  public type: 'default' | 'primary' | 'success' | 'warning' | 'error' = 'default';

  @property({ type: String })
  public text: string = '';

  @property({ type: Boolean })
  public rounded: boolean = false;

  constructor() {
    super();
    domtools.elementBasic.setup();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: inline-block;
      }

      .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 8px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        border-radius: 4px;
        white-space: nowrap;
      }

      .badge.rounded {
        border-radius: 12px;
      }

      .badge.default {
        background: ${cssManager.bdTheme('#f5f5f5', '#333')};
        color: ${cssManager.bdTheme('#666', '#ccc')};
      }

      .badge.primary {
        background: #0050b9;
        color: #ffffff;
      }

      .badge.success {
        background: #2e7d32;
        color: #ffffff;
      }

      .badge.warning {
        background: #ed6c02;
        color: #ffffff;
      }

      .badge.error {
        background: #e4002b;
        color: #ffffff;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="badge ${this.type} ${this.rounded ? 'rounded' : ''}">
        ${this.text}
      </div>
    `;
  }
}