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

/**
 * DS Card - Web Component
 *
 * Usage:
 *   <ds-card>
 *     <ds-card-header>
 *       <ds-card-title>Title</ds-card-title>
 *       <ds-card-description>Description</ds-card-description>
 *     </ds-card-header>
 *     <ds-card-content>Content here</ds-card-content>
 *     <ds-card-footer>Footer actions</ds-card-footer>
 *   </ds-card>
 *
 * Attributes:
 *   - interactive: boolean (adds hover effect)
 */

class DsCard extends HTMLElement {
  static get observedAttributes() {
    return ['interactive'];
  }

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

  connectedCallback() {
    this.render();
  }

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

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

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

  render() {
    const interactiveClass = this.interactive ? 'ds-card--interactive' : '';

    this.shadowRoot.innerHTML = `
      <style>

        :host {
          display: block;
        }
      </style>
      <div class="ds-card ${interactiveClass}">
        <slot></slot>
      </div>
    `;
  }
}

class DsCardHeader extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
      </style>
      <div class="ds-card__header">
        <slot></slot>
      </div>
    `;
  }

  disconnectedCallback() {
    // Cleanup for consistency with other components
  }
}

class DsCardTitle extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
      </style>
      <h3 class="ds-card__title">
        <slot></slot>
      </h3>
    `;
  }

  disconnectedCallback() {
    // Cleanup for consistency with other components
  }
}

class DsCardDescription extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
      </style>
      <p class="ds-card__description">
        <slot></slot>
      </p>
    `;
  }

  disconnectedCallback() {
    // Cleanup for consistency with other components
  }
}

class DsCardContent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
      </style>
      <div class="ds-card__content">
        <slot></slot>
      </div>
    `;
  }

  disconnectedCallback() {
    // Cleanup for consistency with other components
  }
}

class DsCardFooter extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
      </style>
      <div class="ds-card__footer">
        <slot></slot>
      </div>
    `;
  }

  disconnectedCallback() {
    // Cleanup for consistency with other components
  }
}

customElements.define('ds-card', DsCard);
customElements.define('ds-card-header', DsCardHeader);
customElements.define('ds-card-title', DsCardTitle);
customElements.define('ds-card-description', DsCardDescription);
customElements.define('ds-card-content', DsCardContent);
customElements.define('ds-card-footer', DsCardFooter);

export { DsCard, DsCardHeader, DsCardTitle, DsCardDescription, DsCardContent, DsCardFooter };