feat: add types for wrapper event emitters

libs/docs/ui5-webcomponents/button/examples/button-sample.ts

@@ -1,5 +1,7 @@
 import { Component, signal } from '@angular/core';
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
+
 import '@ui5/webcomponents-icons/dist/AllIcons.js';
 
 @Component({
@@ -17,7 +19,7 @@ import '@ui5/webcomponents-icons/dist/AllIcons.js';
 })
 export class ButtonExample {
     // Example click handler
-    onButtonClick(event: any, buttonLabel: string): void {
+    onButtonClick(event: UI5WrapperCustomEvent<Button, 'ui5Click'>, buttonLabel: string): void {
         console.log(`${buttonLabel} clicked`, event);
     }
 

libs/docs/ui5-webcomponents/calendar/examples/calendar-sample.html

@@ -2,7 +2,7 @@
     <div class="fd-section__header">
         <h2 id="calendar-basic" class="fd-section__title">Calendar</h2>
     </div>
-    <ui5-calendar (ui5selectionChange)="onSelectionChange($event)" aria-label="Basic calendar example"> </ui5-calendar>
+    <ui5-calendar (ui5SelectionChange)="onSelectionChange($event)" aria-label="Basic calendar example"> </ui5-calendar>
     <p class="fd-margin-top--sm"><strong>Selected Dates:</strong> {{ selectedDatesDisplay() }}</p>
     <p class="fd-margin-top--tiny"><strong>Selection Mode:</strong> {{ currentSelectionMode() }}</p>
 </section>
@@ -41,7 +41,7 @@ <h3 class="fd-margin-top--sm fd-margin-bottom--tiny">Quick Actions</h3>
         [formatPattern]="formatPattern()"
         [minDate]="minDate()"
         [maxDate]="maxDate()"
-        (ui5selectionChange)="onSelectionChange($event)"
+        (ui5SelectionChange)="onSelectionChange($event)"
         aria-label="Configured calendar example"
     >
         @if (currentSelectionMode() !== 'Range') { @for (date of selectedDates(); track date) {
@@ -66,7 +66,7 @@ <h2 id="calendar-range" class="fd-section__title">Range Selection Calendar</h2>
     </div>
     <ui5-calendar
         selectionMode="Range"
-        (ui5selectionChange)="onSelectionChange($event)"
+        (ui5SelectionChange)="onSelectionChange($event)"
         aria-label="Range selection calendar"
     >
     </ui5-calendar>
@@ -83,7 +83,7 @@ <h2 id="calendar-multiple" class="fd-section__title">Multiple Selection Calendar
     </div>
     <ui5-calendar
         selectionMode="Multiple"
-        (ui5selectionChange)="onSelectionChange($event)"
+        (ui5SelectionChange)="onSelectionChange($event)"
         aria-label="Multiple selection calendar"
     >
     </ui5-calendar>
@@ -104,7 +104,7 @@ <h2 id="calendar-restricted" class="fd-section__title">Calendar with Date Restri
         minDate="2024-06-01"
         maxDate="2024-12-31"
         formatPattern="MM/dd/yyyy"
-        (ui5selectionChange)="onSelectionChange($event)"
+        (ui5SelectionChange)="onSelectionChange($event)"
         aria-label="Date restricted calendar"
     >
     </ui5-calendar>
@@ -129,7 +129,7 @@ <h3 class="fd-panel__title">Gregorian Calendar</h3>
                         <ui5-calendar
                             primaryCalendarType="Gregorian"
                             selectionMode="Single"
-                            (ui5selectionChange)="onSelectionChange($event)"
+                            (ui5SelectionChange)="onSelectionChange($event)"
                             aria-label="Gregorian calendar"
                         >
                         </ui5-calendar>
@@ -146,7 +146,7 @@ <h3 class="fd-panel__title">Islamic Calendar</h3>
                         <ui5-calendar
                             primaryCalendarType="Islamic"
                             selectionMode="Single"
-                            (ui5selectionChange)="onSelectionChange($event)"
+                            (ui5SelectionChange)="onSelectionChange($event)"
                             aria-label="Islamic calendar"
                         >
                         </ui5-calendar>
@@ -163,7 +163,7 @@ <h3 class="fd-panel__title">Japanese Calendar</h3>
                         <ui5-calendar
                             primaryCalendarType="Japanese"
                             selectionMode="Single"
-                            (ui5selectionChange)="onSelectionChange($event)"
+                            (ui5SelectionChange)="onSelectionChange($event)"
                             aria-label="Japanese calendar"
                         >
                         </ui5-calendar>
@@ -180,7 +180,7 @@ <h3 class="fd-panel__title">Buddhist Calendar</h3>
                         <ui5-calendar
                             primaryCalendarType="Buddhist"
                             selectionMode="Single"
-                            (ui5selectionChange)="onSelectionChange($event)"
+                            (ui5SelectionChange)="onSelectionChange($event)"
                             aria-label="Buddhist calendar"
                         >
                         </ui5-calendar>
@@ -199,7 +199,7 @@ <h2 id="calendar-dual" class="fd-section__title">Dual Calendar Type</h2>
         primaryCalendarType="Gregorian"
         secondaryCalendarType="Islamic"
         selectionMode="Single"
-        (ui5selectionChange)="onSelectionChange($event)"
+        (ui5SelectionChange)="onSelectionChange($event)"
         aria-label="Dual calendar type example"
     >
     </ui5-calendar>

libs/docs/ui5-webcomponents/calendar/examples/calendar-sample.ts

@@ -1,4 +1,5 @@
 import { Component, computed, effect, signal } from '@angular/core';
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { Calendar } from '@fundamental-ngx/ui5-webcomponents/calendar';
 import { CalendarDate } from '@fundamental-ngx/ui5-webcomponents/calendar-date';
@@ -79,10 +80,9 @@ export class CalendarExample {
     }
 
     // Event handlers using Angular 20 patterns
-    onSelectionChange(event: any): void {
-        const calendarEvent = event.detail;
+    onSelectionChange(event: UI5WrapperCustomEvent<Calendar, 'ui5SelectionChange'>): void {
         // Extract selectedValues (date strings) instead of selectedDates (timestamps)
-        const dates = calendarEvent.selectedValues || [];
+        const dates = event.detail.selectedValues || [];
         this.selectedDates.set(dates);
         console.log('Calendar selection changed:', dates);
     }
@@ -98,7 +98,7 @@ export class CalendarExample {
     }
 
     // Event handlers for UI5 segmented buttons
-    onSelectionModeChange(event: any): void {
+    onSelectionModeChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         console.log('onSelectionModeChange called', event.detail);
         const selectedItems = event.detail.selectedItems;
         if (selectedItems && selectedItems.length > 0) {
@@ -107,7 +107,7 @@ export class CalendarExample {
         }
     }
 
-    onCalendarTypeChange(event: any): void {
+    onCalendarTypeChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         console.log('onCalendarTypeChange called:', event.detail.selectedItems[0].innerText);
         const selectedItems = event.detail.selectedItems;
         if (selectedItems && selectedItems.length > 0) {

libs/docs/ui5-webcomponents/carousel/examples/carousel-sample.ts

@@ -1,4 +1,5 @@
 import { Component, computed, effect, signal } from '@angular/core';
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { Card } from '@fundamental-ngx/ui5-webcomponents/card';
 import { CardHeader } from '@fundamental-ngx/ui5-webcomponents/card-header';
@@ -16,6 +17,7 @@ import {
     CarouselArrowsPlacement,
     CarouselPageIndicatorType
 } from '@fundamental-ngx/ui5-webcomponents/types';
+
 import '@ui5/webcomponents-icons/dist/AllIcons.js';
 
 // Import Fundamental Styles
@@ -166,32 +168,32 @@ export class CarouselExample {
     }
 
     // Navigation event handlers
-    onBasicNavigate(event: any): void {
+    onBasicNavigate(event: UI5WrapperCustomEvent<Carousel, 'ui5Navigate'>): void {
         const detail = event.detail;
         this.basicCurrentPage.set(detail.selectedIndex);
         console.log('Basic carousel navigated to page:', detail.selectedIndex);
     }
 
-    onImageNavigate(event: any): void {
+    onImageNavigate(event: UI5WrapperCustomEvent<Carousel, 'ui5Navigate'>): void {
         const detail = event.detail;
         this.currentImagePage.set(detail.selectedIndex);
         console.log('Image carousel navigated to page:', detail.selectedIndex);
     }
 
-    onProductNavigate(event: any): void {
+    onProductNavigate(event: UI5WrapperCustomEvent<Carousel, 'ui5Navigate'>): void {
         const detail = event.detail;
         this.currentProductPage.set(detail.selectedIndex);
         console.log('Product carousel navigated to page:', detail.selectedIndex);
     }
 
-    onFeatureNavigate(event: any): void {
+    onFeatureNavigate(event: UI5WrapperCustomEvent<Carousel, 'ui5Navigate'>): void {
         const detail = event.detail;
         this.currentFeaturePage.set(detail.selectedIndex);
         console.log('Feature carousel navigated to page:', detail.selectedIndex);
     }
 
     // Configuration change handlers
-    onPageIndicatorTypeChange(event: any): void {
+    onPageIndicatorTypeChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         if (selectedItems.length > 0) {
@@ -200,16 +202,7 @@ export class CarouselExample {
         }
     }
 
-    onBackgroundDesignChange(event: any): void {
-        const detail = event.detail;
-        const selectedItems = detail.selectedItems || [];
-        if (selectedItems.length > 0) {
-            const selectedDesign = selectedItems[0].innerText as BackgroundDesign;
-            this.backgroundDesign.set(selectedDesign);
-        }
-    }
-
-    onArrowsPlacementChange(event: any): void {
+    onArrowsPlacementChange(event: UI5WrapperCustomEvent<SegmentedButton, 'ui5SelectionChange'>): void {
         const detail = event.detail;
         const selectedItems = detail.selectedItems || [];
         if (selectedItems.length > 0) {
@@ -276,30 +269,30 @@ export class CarouselExample {
         return types[status] || '1';
     }
 
-    getImageStyle(image: any): string {
+    getImageStyle(image: { url: string; title: string; description: string; gradient: string }): string {
         return `
-            height: 500px; 
-            background: ${image.gradient}; 
-            background-image: url('${image.url}'); 
-            background-size: cover; 
-            background-position: center; 
-            background-blend-mode: overlay; 
-            display: flex; 
-            align-items: center; 
+            height: 500px;
+            background: ${image.gradient};
+            background-image: url('${image.url}');
+            background-size: cover;
+            background-position: center;
+            background-blend-mode: overlay;
+            display: flex;
+            align-items: center;
             justify-content: center;
         `;
     }
 
-    getCardImageStyle(image: any): string {
+    getCardImageStyle(image: { url: string; title: string; description: string; gradient: string }): string {
         return `
-            height: 250px; 
-            background: ${image.gradient}; 
-            background-image: url('${image.url}'); 
-            background-size: cover; 
-            background-position: center; 
-            background-blend-mode: overlay; 
-            display: flex; 
-            align-items: center; 
+            height: 250px;
+            background: ${image.gradient};
+            background-image: url('${image.url}');
+            background-size: cover;
+            background-position: center;
+            background-blend-mode: overlay;
+            display: flex;
+            align-items: center;
             justify-content: center;
         `;
     }

libs/docs/ui5-webcomponents/form/examples/validation.ts

@@ -1,6 +1,7 @@
 import { JsonPipe } from '@angular/common';
 import { Component, computed, effect, signal } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import { CheckBox } from '@fundamental-ngx/ui5-webcomponents/check-box';
 import { Form } from '@fundamental-ngx/ui5-webcomponents/form';
@@ -11,11 +12,6 @@ import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { MessageStrip } from '@fundamental-ngx/ui5-webcomponents/message-strip';
 import { TextArea } from '@fundamental-ngx/ui5-webcomponents/text-area';
 
-// Import UI5 custom event types
-import { UI5CustomEvent } from '@ui5/webcomponents-base';
-import { default as _Input } from '@ui5/webcomponents/dist/Input.js';
-import { default as _TextArea } from '@ui5/webcomponents/dist/TextArea.js';
-
 // Import Fundamental Styles
 import 'fundamental-styles/dist/layout-grid.css';
 import 'fundamental-styles/dist/margins.css';
@@ -185,20 +181,20 @@ export class FormValidationSample {
         return 'Invalid input';
     }
 
-    onInputChange(fieldName: string, event: UI5CustomEvent<_Input, 'input'>): void {
+    onInputChange(fieldName: string, event: UI5WrapperCustomEvent<Input, 'ui5Input'>): void {
         const value = (event.target as any)?.value;
         this.registrationForm.get(fieldName)?.setValue(value);
         this.registrationForm.get(fieldName)?.markAsDirty();
     }
 
-    onTextAreaChange(fieldName: string, event: UI5CustomEvent<_TextArea, 'input'>): void {
+    onTextAreaChange(fieldName: string, event: UI5WrapperCustomEvent<TextArea, 'ui5Input'>): void {
         const value = (event.target as any)?.value;
         this.registrationForm.get(fieldName)?.setValue(value);
         this.registrationForm.get(fieldName)?.markAsDirty();
     }
 
-    onCheckboxChange(fieldName: string, event: any): void {
-        const checked = event.target.checked;
+    onCheckboxChange(fieldName: string, event: UI5WrapperCustomEvent<CheckBox, 'ui5Change'>): void {
+        const checked = (event.target as any)?.checked;
         this.registrationForm.get(fieldName)?.setValue(checked);
         this.registrationForm.get(fieldName)?.markAsDirty();
     }

libs/docs/ui5-webcomponents/list/examples/drag-and-drop.ts

@@ -1,11 +1,9 @@
 import { Component, signal } from '@angular/core';
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { MovePlacement } from '@fundamental-ngx/ui5-webcomponents-base/types';
 import { List } from '@fundamental-ngx/ui5-webcomponents/list';
 import { ListItemStandard } from '@fundamental-ngx/ui5-webcomponents/list-item-standard';
 
-import { UI5CustomEvent } from '@ui5/webcomponents-base';
-import { default as _List } from '@ui5/webcomponents/dist/List.js';
-
 // Import the icon used in this example
 import '@ui5/webcomponents-icons/dist/checklist-item.js';
 
@@ -18,7 +16,7 @@ import '@ui5/webcomponents-icons/dist/checklist-item.js';
 export class ListDragAndDropExample {
     readonly items = signal(['Item #1', 'Item #2', 'Item #3', 'Item #4']);
 
-    onItemMove(event: any): void {
+    onItemMove(event: UI5WrapperCustomEvent<List, 'ui5Move'>): void {
         const { destination, source } = event.detail;
 
         switch (destination.placement) {
@@ -34,7 +32,7 @@ export class ListDragAndDropExample {
         }
     }
 
-    onItemMoveOver(event: UI5CustomEvent<_List, 'move-over'>): void {
+    onItemMoveOver(event: UI5WrapperCustomEvent<List, 'ui5MoveOver'>): void {
         const { source } = event.detail;
 
         if (!(event.target as HTMLElement).contains(source.element)) {
@@ -44,7 +42,7 @@ export class ListDragAndDropExample {
         this.handleBeforeItemMove(event);
     }
 
-    private handleBeforeItemMove(event: UI5CustomEvent<_List, 'move-over'>): void {
+    private handleBeforeItemMove(event: UI5WrapperCustomEvent<List, 'ui5MoveOver'>): void {
         const { destination } = event.detail;
 
         if (destination.placement === 'Before' || destination.placement === 'After') {

libs/docs/ui5-webcomponents/time-picker/examples/basic-sample.ts

@@ -1,7 +1,7 @@
 import { NgStyle } from '@angular/common';
 import { Component, signal } from '@angular/core';
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { TimePicker } from '@fundamental-ngx/ui5-webcomponents/time-picker';
-import { TimePickerChangeEventDetail } from '@ui5/webcomponents/dist/TimePicker.js';
 
 // Ensure CLDR data is available for all time-picker components
 import '@ui5/webcomponents-localization/dist/Assets.js';
@@ -21,15 +21,15 @@ export class TimePickerBasicSample {
     readonly placeholderValue = signal('');
     readonly formattedValue = signal('14:30:00');
 
-    onBasicValueChange(event: CustomEvent<TimePickerChangeEventDetail>): void {
+    onBasicValueChange(event: UI5WrapperCustomEvent<TimePicker, 'ui5Change'>): void {
         this.basicValue.set(event.detail.value);
     }
 
-    onPlaceholderValueChange(event: CustomEvent<TimePickerChangeEventDetail>): void {
+    onPlaceholderValueChange(event: UI5WrapperCustomEvent<TimePicker, 'ui5Input'>): void {
         this.placeholderValue.set(event.detail.value);
     }
 
-    onFormattedValueChange(event: CustomEvent<TimePickerChangeEventDetail>): void {
+    onFormattedValueChange(event: UI5WrapperCustomEvent<TimePicker, 'ui5Change'>): void {
         this.formattedValue.set(event.detail.value);
     }
 }