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`
`;
@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`
String Array:
${this.stringArray.join(', ')}
Number Array:
${this.numberArray.join(', ')}
Complex Data:
${JSON.stringify(this.complexData, null, 2)}
Simple Object:
${JSON.stringify(this.simpleObject, null, 2)}
Date Property:
${this.dateProperty.toLocaleString()}
Function Property:
${typeof this.functionProperty}
`;
}
}