import {
DeesElement,
customElement,
type TemplateResult,
html,
property,
css,
} from '@design.estate/dees-element';
@customElement('test-edgecases')
export class TestEdgeCases extends DeesElement {
public static demo = () => html``;
// Property with null value
@property({ type: String })
public nullableString: string | null = null;
// Property with undefined value
@property({ type: Number })
public undefinedNumber: number | undefined = undefined;
// Very long string
@property({ type: String })
public longString: string = 'Lorem ipsum '.repeat(50);
// Property with special characters
@property({ type: String })
public specialChars: string = '!@#$%^&*()_+-=[]{}|;\':",./<>?`~';
// Property that could cause rendering issues
@property({ type: String })
public htmlString: string = 'Bold text';
// Numeric edge cases
@property({ type: Number })
public infinityNumber: number = Infinity;
@property({ type: Number })
public nanNumber: number = NaN;
@property({ type: Number })
public veryLargeNumber: number = Number.MAX_SAFE_INTEGER;
@property({ type: Number })
public verySmallNumber: number = Number.MIN_SAFE_INTEGER;
@property({ type: Number })
public floatNumber: number = 3.14159265359;
// Boolean-like values
@property({ type: String })
public booleanString: string = 'false';
@property({ type: Number })
public booleanNumber: number = 0;
// Empty values
@property({ type: String })
public emptyString: string = '';
@property({ type: Array })
public emptyArray: any[] = [];
@property({ type: Object })
public emptyObject: {} = {};
// Circular reference (should not break properties panel)
@property({ attribute: false })
public circularRef: any = (() => {
const obj: any = { name: 'circular' };
obj.self = obj;
return obj;
})();
public static styles = [
css`
:host {
display: block;
padding: 20px;
background: #fff3e0;
border: 2px solid #ff9800;
border-radius: 8px;
font-family: monospace;
font-size: 12px;
}
.warning {
background: #ffe0b2;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
color: #e65100;
}
.property {
margin: 5px 0;
padding: 5px;
background: white;
border-radius: 2px;
word-break: break-all;
}
.label {
font-weight: bold;
color: #f57c00;
}
.value {
color: #666;
}
.special {
background: #ffccbc;
padding: 2px 4px;
border-radius: 2px;
}
`
];
private formatValue(value: any): string {
if (value === null) return 'null';
if (value === undefined) return 'undefined';
if (value === Infinity) return 'Infinity';
if (Number.isNaN(value)) return 'NaN';
if (typeof value === 'string' && value.length > 50) {
return value.substring(0, 50) + '...';
}
if (typeof value === 'object') {
try {
return JSON.stringify(value);
} catch (e) {
return '[Circular Reference]';
}
}
return String(value);
}
public render() {
return html`
⚠️ This element tests edge cases and problematic values
Nullable String:
${this.formatValue(this.nullableString)}
Undefined Number:
${this.formatValue(this.undefinedNumber)}
Long String:
${this.formatValue(this.longString)}
Special Characters:
${this.specialChars}
HTML String (escaped):
${this.htmlString}
Infinity:
${this.formatValue(this.infinityNumber)}
NaN:
${this.formatValue(this.nanNumber)}
Very Large Number:
${this.veryLargeNumber}
Float Number:
${this.floatNumber}
Empty String:
[empty]
Circular Reference:
${this.formatValue(this.circularRef)}
`;
}
}