\r\n \r\n \r\n
\r\n \r\n
\r\n `\r\n})\r\nexport class UserListWidget implements OnWidgetInit, OnWidgetReady {\r\n @xproperty() searchQuery: string = '';\r\n @xproperty() selectedUserId: number | null = null;\r\n\r\n @xinject(UserService)\r\n private userService: UserService;\r\n\r\n @xcomputed({ dependencies: ['userService.users'] })\r\n get userCount(): number {\r\n return this.userService.getUsers().length;\r\n }\r\n\r\n @xcomputed({ dependencies: ['userService.users', 'searchQuery'] })\r\n get filteredUsers(): User[] {\r\n if (!this.searchQuery) {\r\n return this.userService.getUsers();\r\n }\r\n\r\n const query = this.searchQuery.toLowerCase();\r\n return this.userService.getUsers().filter(user =>\r\n user.name.toLowerCase().includes(query)\r\n );\r\n }\r\n\r\n onWidgetInit(): void {\r\n console.log('UserListWidget initialized');\r\n }\r\n\r\n async onWidgetReady(templateReady: boolean): PromiseUser List ()
\r\n- \r\n \r\n
- \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n `\r\n})\r\nexport class ContentWidget {\r\n @xproperty() articleContent: string = 'Title
Content text
';\r\n \r\n // Example of creating safe HTML content\r\n setSafeContent(userInput: string): void {\r\n // Sanitize content first\r\n this.articleContent = this.sanitizeHtml(userInput);\r\n }\r\n \r\n private sanitizeHtml(html: string): string {\r\n // Use HTML sanitization library (e.g., DOMPurify)\r\n // return DOMPurify.sanitize(html);\r\n return html;\r\n }\r\n}\r\n```\r\n\r\n### Directives\r\n\r\n#### Conditional Rendering (x:if)\r\n```html\r\nThis content is visible
\r\n 0\">Counter is greater than zero
\r\n```\r\n\r\n#### List Rendering (x:for)\r\n```html\r\n\r\n \r\n\r\n\r\n\r\n\r\n \r\n : \r\n
\r\n\r\n```\r\n\r\n#### Switch Cases (x:switch)\r\n```html\r\n\r\n
\r\n```\r\n\r\n#### Event Binding (x:on:*)\r\n```html\r\n\r\n\r\n\r\n\r\n```\r\n\r\n#### Attribute Binding (x:attr:*)\r\n```html\r\n\r\nLoading...
\r\n Successful!
\r\n An error occurred
\r\n Unknown state
\r\nContent
\r\n\r\n```\r\n\r\n#### Two-Way Binding (x:model)\r\n```html\r\n\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n#### Isolation (x:isolate)\r\nEnsures child widgets maintain their own independent binding contexts:\r\n\r\n```html\r\n\r\n```\r\n\r\n## API Reference\r\n\r\n### Decorators\r\n\r\n#### @Widget(config)\r\nWidget class decorator:\r\n\r\n```typescript\r\n@Widget({\r\n selector: string, // CSS selector (required)\r\n widgetName?: string, // Widget name\r\n template?: string, // Inline HTML template\r\n templateUrl?: string, // External HTML file path\r\n styles?: string[], // Inline CSS styles\r\n styleUrls?: string[], // External CSS file paths\r\n encapsulation?: EncapsulationMode, // Style encapsulation mode\r\n initMode?: InitializationMode, // Initialization mode\r\n logger?: IWidgetLoggerConfig // Logger configuration\r\n})\r\n```\r\n\r\n#### @xproperty(config?)\r\nReactive property decorator:\r\n\r\n```typescript\r\n@xproperty({\r\n autoUpdate?: boolean, // Auto update (default: true)\r\n deepWatch?: boolean // Deep watching (default: false)\r\n})\r\n```\r\n\r\n#### @xcomputed(config?)\r\nComputed property decorator:\r\n\r\n```typescript\r\n@xcomputed({\r\n dependencies?: string[], // Explicit dependencies\r\n autoDetectDependencies?: boolean // Auto dependency detection (default: true)\r\n})\r\n```\r\n\r\n#### @xinject(token)\r\nService injection decorator:\r\n\r\n```typescript\r\n@xinject(ServiceClass) // Inject by class\r\n@xinject('ServiceToken') // Inject by token\r\n```\r\n\r\n#### @xinjectable(config?)\r\nService registration decorator:\r\n\r\n```typescript\r\n@xinjectable({\r\n scope?: 'singleton' | 'transient', // Service scope (default: 'singleton')\r\n providedIn?: 'root' // Auto registration in root\r\n})\r\n```\r\n\r\n### Lifecycle Interfaces\r\n\r\n```typescript\r\ninterface OnWidgetInit {\r\n onWidgetInit(): void;\r\n}\r\n\r\ninterface OnWidgetReady {\r\n onWidgetReady(templateReady: boolean): void;\r\n}\r\n\r\ninterface OnWidgetDestroy {\r\n onWidgetDestroy(): void;\r\n}\r\n\r\ninterface OnWidgetRendered {\r\n onWidgetRendered(container: HTMLElement): void;\r\n}\r\n\r\ninterface OnWidgetDataUpdated {\r\n onWidgetDataUpdated(): void;\r\n}\r\n\r\ninterface OnWidgetResize {\r\n onWidgetResize(): void;\r\n}\r\n\r\ninterface OnWidgetEditModeChanged {\r\n onWidgetEditModeChanged(): void;\r\n}\r\n\r\ninterface OnWidgetMobileModeChanged {\r\n onWidgetMobileModeChanged(): void;\r\n}\r\n\r\ninterface OnWidgetPropertyChanged {\r\n onWidgetPropertyChanged(propertyKey?: string, oldValue?: any, newValue?: any): void;\r\n}\r\n\r\ninterface OnWidgetInitializationError {\r\n onWidgetInitializationError(error: any): void;\r\n}\r\n```\r\n\r\n### Bootstrap API\r\n\r\n```typescript\r\n// Bootstrap configuration\r\ninterface BootstrapConfig {\r\n rootWidget?: any; // Single root widget\r\n widgets?: BootstrapWidget[]; // Widget list\r\n services?: BootstrapService[]; // Services to register\r\n providers?: BootstrapProvider[]; // Custom providers\r\n}\r\n\r\n// Start the application\r\nXConBootstrap.run(config: BootstrapConfig): Promise