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)}
`; } }