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

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

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

declare global {
  interface HTMLElementTagNameMap {
    'dees-heading': DeesHeading;
  }
}

@customElement('dees-heading')
export class DeesHeading extends DeesElement {
  // demo
  public static demo = demoFunc;

  // properties
  /**
   * Heading level: 1-6 for h1-h6, or 'hr' for horizontal rule style
   */
  @property({ type: String, reflect: true })
  public level: '1' | '2' | '3' | '4' | '5' | '6' | 'hr' | 'hr-small' = '1';

  // STATIC STYLES
  public static styles: CSSResult[] = [
    cssManager.defaultStyles,
    css`
      /* Heading styles */
      h1, h2, h3, h4, h5, h6 {
        margin: 16px 0 8px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#000', '#fff')};
      }
      h1 { font-size: 32px; font-family: 'Cal Sans'; letter-spacing: 0.025em;}
      h2 { font-size: 28px; }
      h3 { font-size: 24px; }
      h4 { font-size: 20px; }
      h5 { font-size: 16px; }
      h6 { font-size: 14px; }
      /* Horizontal rule style heading */
      .heading-hr {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 16px 0;
        color: ${cssManager.bdTheme('#000', '#fff')};
      }
      /* Fade lines toward and away from text for hr style */
      .heading-hr::before {
        content: '';
        flex: 1;
        height: 1px;
        /* fade in toward center */
        background: ${cssManager.bdTheme(
          'linear-gradient(to right, transparent, #ccc)',
          'linear-gradient(to right, transparent, #333)'
        )};
        margin: 0 8px;
      }
      .heading-hr::after {
        content: '';
        flex: 1;
        height: 1px;
        /* fade out away from center */
        background: ${cssManager.bdTheme(
          'linear-gradient(to right, #ccc, transparent)',
          'linear-gradient(to right, #333, transparent)'
        )};
        margin: 0 8px;
      }
      /* Small hr variant with reduced margins */
      .heading-hr.heading-hr-small {
        margin: 8px 0;
        font-size: 12px;
      }
      .heading-hr.heading-hr-small::before,
      .heading-hr.heading-hr-small::after {
        margin: 0 8px;
      }
    `,
  ];


  // INSTANCE
  public render(): TemplateResult {
    switch (this.level) {
      case '1':
        return html`<h1><slot></slot></h1>`;
      case '2':
        return html`<h2><slot></slot></h2>`;
      case '3':
        return html`<h3><slot></slot></h3>`;
      case '4':
        return html`<h4><slot></slot></h4>`;
      case '5':
        return html`<h5><slot></slot></h5>`;
      case '6':
        return html`<h6><slot></slot></h6>`;
      case 'hr':
        return html`<div class="heading-hr"><slot></slot></div>`;
      case 'hr-small':
        return html`<div class="heading-hr heading-hr-small"><slot></slot></div>`;
      default:
        return html`<h1><slot></slot></h1>`;
    }
  }
}