monorepo/music-player/client/src/components/TrackCard.ts

import { TextField } from "./TextField";

export class TrackCard extends HTMLElement {
  trackNumberContainer: TextField;
  nameContainer: TextField;
  albumContainer: TextField;
  artistContainer: TextField;
  durationContainer: TextField;

  static get observedAttributes() {
    return ["trackId", "trackNumber", "name", "album", "artist", "duration"];
  }

  constructor() {
    super();

    this.trackNumberContainer = document.createElement("text-field");

    this.nameContainer = document.createElement("text-field");
    this.nameContainer.classList.add("track-card__name");

    this.albumContainer = document.createElement("text-field");
    this.albumContainer.classList.add("track-card__album");

    this.artistContainer = document.createElement("text-field");
    this.artistContainer.classList.add("track-card__artist");

    this.durationContainer = document.createElement("text-field");
    this.durationContainer.classList.add("track-card__duration");
  }

  get trackId(): string | null {
    return this.getAttribute("id");
  }

  set trackId(id: string | null) {
    if (id) {
      this.setAttribute("trackId", id);
    } else {
      this.removeAttribute("trackId");
    }
  }

  get name(): string | null {
    return this.getAttribute("name");
  }

  set name(name: string | null) {
    if (name) {
      this.setAttribute("name", name);
      this.nameContainer.text = name;
    } else {
      this.removeAttribute("open");
      this.nameContainer.text = null;
    }
  }

  get artist(): string | null {
    return this.getAttribute("artist");
  }

  set artist(artist: string | null) {
    if (artist) {
      this.setAttribute("artist", artist);
      this.artistContainer.text = artist;
    } else {
      this.removeAttribute("open");
      this.artistContainer.text = null;
    }
  }

  get album(): string | null {
    return this.getAttribute("album");
  }

  set album(album: string | null) {
    if (album) {
      this.setAttribute("album", album);
      this.albumContainer.text = album;
    } else {
      this.removeAttribute("open");
      this.albumContainer.text = null;
    }
  }

  get duration(): string | null {
    return this.getAttribute("duration");
  }

  set duration(duration: string | null) {
    if (duration) {
      this.setAttribute("duration", duration);
      this.durationContainer.text = duration;
    } else {
      this.removeAttribute("open");
      this.durationContainer.text = null;
    }
  }

  connectedCallback() {
    const container = document.createElement("data-card");
    container.classList.add("track-card");

    // this.appendChild(this.trackNumberContainer);
    container.appendChild(this.nameContainer);
    container.appendChild(this.albumContainer);
    container.appendChild(this.artistContainer);
    container.appendChild(this.durationContainer);

    this.appendChild(container);
  }
}