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

import * as plugins from './00plugins.js';
import * as colors from './00colors.js';

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

import { demoFunc } from './dees-label.demo.js';

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

  // INSTANCE

  @property({
    type: String,
    reflect: true,
  })
  public label = '';

  @property({
    type: String,
    reflect: true,
  })
  public description: string;

  @property({
    type: Boolean,
    reflect: true,
  })
  public required: boolean = false;

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      }

      .label {
        display: inline-block;
        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 6px;
        cursor: default;
        user-select: none;
        letter-spacing: -0.01em;
      }

      .required {
        color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
        margin-left: 2px;
      }

      dees-icon {
        display: inline-block;
        font-size: 12px;
        transform: translateY(1px);
        margin-left: 4px;
        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
        cursor: help;
      }
    `,
  ];

  public render() {
    return html`
      ${this.label
        ? html`
            <div class="label">
              ${this.label}
              ${this.required ? html`<span class="required">*</span>` : ''}
              ${this.description
                ? html`
                    <dees-icon .icon=${'lucide:info'}></dees-icon>
                    <dees-speechbubble .text=${this.description}></dees-speechbubble>
                  `
                : html``}
            </div>
          `
        : html``}
    `;
  }
}