fix(DB Switch): double event firing with Angular signals

.gitignore

@@ -38,6 +38,7 @@ packages/components/src/**/*.css.map
 
 .cache
 **/playwright-report
+**/blob-report/
 /.parcel-cache/
 /output/docs.json
 showcases/patternhub/public/iframe-resizer/*

packages/components/src/utils/form-components.ts

@@ -4,9 +4,14 @@ export const handleFrameworkEventAngular = (
 	event: any,
 	modelValue: string = 'value'
 ): void => {
-	// Change event to work with reactive and template driven forms
+	// Handle user-initiated change events for Angular forms integration
+	// According to Angular's ControlValueAccessor pattern:
+	// - propagateChange: notifies Angular forms of view → model updates (user interactions)
+	// - writeValue: should only be used for model → view updates (programmatic changes)
+	// 
+	// For user-initiated events, propagateChange is sufficient. Calling writeValue
+	// during user events can cause double change detection cycles and redundant updates.
 	component.propagateChange(event.target[modelValue]);
-	component.writeValue(event.target[modelValue]);
 };
 
 export const handleFrameworkEventVue = (

showcases/angular-showcase/src/app/components/form/form.component.html

@@ -200,6 +200,14 @@
 				</db-button>
 			</fieldset>
 		</form>
+
+		<p>Switch with Angular signals</p>
+		<db-switch
+			[checked]="checkedSignal()"
+			(change)="handleChange($event)"
+			label="My Switch"
+		>
+		</db-switch>
 	</div>
 	<div>
 		<h1>Output</h1>

showcases/angular-showcase/src/app/components/form/form.component.ts

@@ -1,7 +1,8 @@
 import {
 	Component,
 	CUSTOM_ELEMENTS_SCHEMA,
-	NO_ERRORS_SCHEMA
+	NO_ERRORS_SCHEMA,
+	signal
 } from '@angular/core';
 import {
 	FormControl,
@@ -16,6 +17,7 @@ import {
 	DBInput,
 	DBRadio,
 	DBSelect,
+	DBSwitch,
 	DBTabItem,
 	DBTabList,
 	DBTabPanel,
@@ -44,12 +46,16 @@ import { environment } from '../../../environments/environment';
 				DBTabs,
 				DBTabList,
 				DBTabItem,
-				DBTabPanel
+				DBTabPanel,
+				DBSwitch
 			],
 	standalone: true,
 	schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
 })
 export class FormComponent {
+	// DB Switch with Angular signals
+	checkedSignal = signal(false);
+
 	array = ['X', 'Y', 'Z'];
 	radio = '';
 	input = '';
@@ -150,4 +156,9 @@ export class FormComponent {
 			})
 		);
 	}
+
+	handleChange(event: any) {
+		console.log('Change event fired'); // Logged twice!
+		this.checkedSignal.set(event.target.checked);
+	}
 }