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/card/examples/card-sample.ts

@@ -154,41 +154,13 @@ export class CardExample {
         console.log(`Action clicked: ${action}`);
     }
 
-    onProductSelect(product: any): void {
-        console.log('Product selected:', product.name);
-    }
-
-    onTeamMemberClick(member: any): void {
-        console.log('Team member clicked:', member.name);
-    }
-
     // Configuration methods
     toggleLoading(): void {
         console.log('toggleLoading called, current value:', this.showLoading());
         this.showLoading.update((loading) => !loading);
         console.log('toggleLoading new value:', this.showLoading());
     }
 
-    toggleInteractive(): void {
-        console.log('toggleInteractive called, current value:', this.interactive());
-        this.interactive.update((interactive) => !interactive);
-        console.log('toggleInteractive new value:', this.interactive());
-    }
-
-    onViewChange(event: any): void {
-        console.log('onViewChange called, event:', event);
-        const selectedText = event.detail.selectedItem.textContent?.toLowerCase().trim() || 'overview';
-        console.log('selectedText:', selectedText);
-        this.currentView.set(selectedText);
-    }
-
-    onLoadingDelayChange(event: any): void {
-        console.log('onLoadingDelayChange called, event:', event);
-        const delayText = event.detail.selectedItem.textContent?.replace('ms', '') || '500';
-        console.log('delayText:', delayText);
-        this.loadingDelay.set(Number(delayText));
-    }
-
     refreshData(): void {
         this.refreshing.set(true);
     }
@@ -201,15 +173,6 @@ export class CardExample {
         }).format(value);
     }
 
-    getStatusColor(status: string): string {
-        const colors = {
-            online: 'var(--sapSuccessColor)',
-            busy: 'var(--sapCriticalColor)',
-            offline: 'var(--sapNeutralColor)'
-        };
-        return colors[status] || 'var(--sapNeutralColor)';
-    }
-
     getStatusState(status: string): ObjectStatus {
         const states: Record<string, ObjectStatus> = {
             online: 'positive',
@@ -227,31 +190,4 @@ export class CardExample {
         };
         return icons[status] || 'circle-task';
     }
-
-    getPriorityColor(priority: string): string {
-        const colors = {
-            high: 'var(--sapErrorColor)',
-            medium: 'var(--sapCriticalColor)',
-            low: 'var(--sapSuccessColor)'
-        };
-        return colors[priority] || 'var(--sapNeutralColor)';
-    }
-
-    getTrendIcon(trend: string): string {
-        return trend === 'up' ? 'sap-icon://trend-up' : 'sap-icon://trend-down';
-    }
-
-    getTrendColor(trend: string): string {
-        return trend === 'up' ? 'var(--sapSuccessColor)' : 'var(--sapErrorColor)';
-    }
-
-    getStockStatus(stock: number): { text: string; color: string } {
-        if (stock < 5) {
-            return { text: 'Critical', color: 'var(--sapErrorColor)' };
-        }
-        if (stock < 10) {
-            return { text: 'Low', color: 'var(--sapCriticalColor)' };
-        }
-        return { text: 'Good', color: 'var(--sapSuccessColor)' };
-    }
 }

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
@@ -25,6 +27,13 @@ import 'fundamental-styles/dist/paddings.css';
 import 'fundamental-styles/dist/panel.css';
 import 'fundamental-styles/dist/section.css';
 
+interface ImageStyle {
+    url: string;
+    title: string;
+    description: string;
+    gradient: string;
+}
+
 @Component({
     selector: 'ui5-carousel-sample',
     templateUrl: './carousel-sample.html',
@@ -58,7 +67,7 @@ export class CarouselExample {
     readonly arrowsPlacements = computed(() => Object.values(CarouselArrowsPlacement));
 
     // Sample data signals
-    readonly images = signal<Array<{ url: string; title: string; description: string; gradient: string }>>([
+    readonly images = signal<Array<ImageStyle>>([
         {
             url: 'https://picsum.photos/800/500?id=1',
             title: 'Nature Landscape',
@@ -166,32 +175,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 +209,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 +276,30 @@ export class CarouselExample {
         return types[status] || '1';
     }
 
-    getImageStyle(image: any): string {
+    getImageStyle(image: ImageStyle): 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: ImageStyle): 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/check-box/examples/basic-sample.ts

@@ -1,5 +1,6 @@
 import { Component, signal } from '@angular/core';
 
+import { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base';
 import { CheckBox } from '@fundamental-ngx/ui5-webcomponents/check-box';
 
 @Component({
@@ -32,7 +33,7 @@ import { CheckBox } from '@fundamental-ngx/ui5-webcomponents/check-box';
 export class BasicCheckBoxSample {
     checked = signal(false);
 
-    onCheckboxChange(event: any): void {
+    onCheckboxChange(event: UI5WrapperCustomEvent<CheckBox, 'ui5Change'>): void {
         this.checked.set(event.target?.['checked']);
     }
 }