dees-wcctools/test/elements/test-complextypes.ts

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

interface IComplexData {
  name: string;
  age: number;
  tags: string[];
  metadata: {
    created: Date;
    modified: Date;
    author: string;
  };
}

@customElement('test-complextypes')
export class TestComplexTypes extends DeesElement {
  public static demo = () => html`
    <test-complextypes 
      .complexData=${{
        name: 'Test User',
        age: 25,
        tags: ['developer', 'designer'],
        metadata: {
          created: new Date(),
          modified: new Date(),
          author: 'System'
        }
      }}
    ></test-complextypes>
  `;

  @property({ type: Array })
  public stringArray: string[] = ['apple', 'banana', 'cherry'];

  @property({ type: Array })
  public numberArray: number[] = [1, 2, 3, 4, 5];

  @property({ attribute: false })
  public complexData: IComplexData = {
    name: 'Default Name',
    age: 0,
    tags: [],
    metadata: {
      created: new Date(),
      modified: new Date(),
      author: 'Unknown'
    }
  };

  @property({ type: Object })
  public simpleObject = {
    key1: 'value1',
    key2: 'value2',
    key3: 123
  };

  @property({ attribute: false })
  public functionProperty = () => {
    console.log('This is a function property');
  };

  @property({ type: Date })
  public dateProperty = new Date();

  public static styles = [
    css`
      :host {
        display: block;
        padding: 20px;
        background: #f5f5f5;
        border: 2px solid #ddd;
        border-radius: 8px;
        font-family: monospace;
      }
      .section {
        margin: 10px 0;
        padding: 10px;
        background: white;
        border-radius: 4px;
      }
      .label {
        font-weight: bold;
        color: #333;
      }
      .value {
        color: #666;
        margin-left: 10px;
      }
      pre {
        background: #f0f0f0;
        padding: 8px;
        border-radius: 4px;
        overflow-x: auto;
      }
    `
  ];

  public render() {
    return html`
      <div class="section">
        <span class="label">String Array:</span>
        <span class="value">${this.stringArray.join(', ')}</span>
      </div>
      
      <div class="section">
        <span class="label">Number Array:</span>
        <span class="value">${this.numberArray.join(', ')}</span>
      </div>
      
      <div class="section">
        <span class="label">Complex Data:</span>
        <pre>${JSON.stringify(this.complexData, null, 2)}</pre>
      </div>
      
      <div class="section">
        <span class="label">Simple Object:</span>
        <pre>${JSON.stringify(this.simpleObject, null, 2)}</pre>
      </div>
      
      <div class="section">
        <span class="label">Date Property:</span>
        <span class="value">${this.dateProperty.toLocaleString()}</span>
      </div>
      
      <div class="section">
        <span class="label">Function Property:</span>
        <span class="value">${typeof this.functionProperty}</span>
      </div>
    `;
  }
}