From cdf7cfa340678b8f9a7baa2965a942dd2ef3c147 Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Sun, 20 Oct 2024 13:17:35 +0200 Subject: [PATCH 01/12] improve imports --- src/app/components/toggleswitch/toggleswitch.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/toggleswitch/toggleswitch.ts b/src/app/components/toggleswitch/toggleswitch.ts index 5a634858be2..a3cfebb05c9 100755 --- a/src/app/components/toggleswitch/toggleswitch.ts +++ b/src/app/components/toggleswitch/toggleswitch.ts @@ -1,4 +1,4 @@ -import { CommonModule } from '@angular/common'; +import { NgClass, NgStyle } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, @@ -194,7 +194,7 @@ export class ToggleSwitch extends BaseComponent { } @NgModule({ - imports: [CommonModule, AutoFocusModule], + imports: [NgClass, NgStyle, AutoFocusModule], exports: [ToggleSwitch], declarations: [ToggleSwitch], }) From 5b6b4f1ec14938dc685ac625c8930473d166d4a6 Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Sun, 20 Oct 2024 13:25:42 +0200 Subject: [PATCH 02/12] convert to modern input --- .../components/toggleswitch/toggleswitch.ts | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/src/app/components/toggleswitch/toggleswitch.ts b/src/app/components/toggleswitch/toggleswitch.ts index a3cfebb05c9..355b3f4fad5 100755 --- a/src/app/components/toggleswitch/toggleswitch.ts +++ b/src/app/components/toggleswitch/toggleswitch.ts @@ -7,7 +7,8 @@ import { EventEmitter, forwardRef, inject, - Input, + input, + model, NgModule, numberAttribute, Output, @@ -35,30 +36,30 @@ export const TOGGLESWITCH_VALUE_ACCESSOR: any = {
@@ -72,62 +73,62 @@ export class ToggleSwitch extends BaseComponent { * Inline style of the component. * @group Props */ - @Input() style: { [klass: string]: any } | null | undefined; + style = input<{ [klass: string]: any } | null>(); /** * Style class of the component. * @group Props */ - @Input() styleClass: string | undefined; + styleClass = input(); /** * Index of the element in tabbing order. * @group Props */ - @Input({ transform: numberAttribute }) tabindex: number | undefined; + tabindex = input(undefined, { transform: numberAttribute }); /** * Identifier of the input element. * @group Props */ - @Input() inputId: string | undefined; + inputId = input(); /** * Name of the input element. * @group Props */ - @Input() name: string | undefined; + name = input(); /** * When present, it specifies that the element should be disabled. * @group Props */ - @Input({ transform: booleanAttribute }) disabled: boolean | undefined; + disabled = model(); /** * When present, it specifies that the component cannot be edited. * @group Props */ - @Input({ transform: booleanAttribute }) readonly: boolean | undefined; + readonly = input(undefined, { transform: booleanAttribute }); /** * Value in checked state. * @group Props */ - @Input() trueValue: any = true; + trueValue = input(true, { transform: booleanAttribute }); /** * Value in unchecked state. * @group Props */ - @Input() falseValue: any = false; + falseValue = input(false, { transform: booleanAttribute }); /** * Used to define a string that autocomplete attribute the current element. * @group Props */ - @Input() ariaLabel: string | undefined; + ariaLabel = input(); /** * Establishes relationships between the component and label(s) where its value should be one or more element IDs. * @group Props */ - @Input() ariaLabelledBy: string | undefined; + ariaLabelledBy = input(); /** * When present, it specifies that the component should automatically get focus on load. * @group Props */ - @Input({ transform: booleanAttribute }) autofocus: boolean | undefined; + autofocus = input(undefined, { transform: booleanAttribute }); /** * Callback to invoke when the on value change. * @param {ToggleSwitchChangeEvent} event - Custom change event. @@ -148,8 +149,8 @@ export class ToggleSwitch extends BaseComponent { _componentStyle = inject(ToggleSwitchStyle); onClick(event: Event) { - if (!this.disabled && !this.readonly) { - this.modelValue = this.checked() ? this.falseValue : this.trueValue; + if (!this.disabled && !this.readonly()) { + this.modelValue = this.checked() ? this.falseValue() : this.trueValue(); this.onModelChange(this.modelValue); this.onChange.emit({ @@ -184,12 +185,11 @@ export class ToggleSwitch extends BaseComponent { } setDisabledState(val: boolean): void { - this.disabled = val; - this.cd.markForCheck(); + this.disabled.set(val); } checked() { - return this.modelValue === this.trueValue; + return this.modelValue === this.trueValue(); } } From 42028737302e83c8bdedaef91dd1583a1663670a Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Sun, 20 Oct 2024 13:25:55 +0200 Subject: [PATCH 03/12] convert to modern input --- src/app/components/toggleswitch/toggleswitch.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/toggleswitch/toggleswitch.ts b/src/app/components/toggleswitch/toggleswitch.ts index 355b3f4fad5..882882851f1 100755 --- a/src/app/components/toggleswitch/toggleswitch.ts +++ b/src/app/components/toggleswitch/toggleswitch.ts @@ -149,7 +149,7 @@ export class ToggleSwitch extends BaseComponent { _componentStyle = inject(ToggleSwitchStyle); onClick(event: Event) { - if (!this.disabled && !this.readonly()) { + if (!this.disabled() && !this.readonly()) { this.modelValue = this.checked() ? this.falseValue() : this.trueValue(); this.onModelChange(this.modelValue); From 0d09f198553154afabd4ccf0eec88ef305c7dd04 Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Sun, 20 Oct 2024 13:29:53 +0200 Subject: [PATCH 04/12] convert vars to signals to improve change detection --- .../components/toggleswitch/toggleswitch.ts | 29 ++++++++----------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/src/app/components/toggleswitch/toggleswitch.ts b/src/app/components/toggleswitch/toggleswitch.ts index 882882851f1..6d7239a16e0 100755 --- a/src/app/components/toggleswitch/toggleswitch.ts +++ b/src/app/components/toggleswitch/toggleswitch.ts @@ -9,11 +9,14 @@ import { inject, input, model, + signal, + computed, NgModule, numberAttribute, Output, ViewChild, ViewEncapsulation, + WritableSignal, } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { AutoFocusModule } from 'primeng/autofocus'; @@ -138,9 +141,9 @@ export class ToggleSwitch extends BaseComponent { @ViewChild('input') input!: ElementRef; - modelValue: any = false; + modelValue: WritableSignal = signal(false); - focused: boolean = false; + focused: WritableSignal = signal(false); onModelChange: Function = () => {}; @@ -150,30 +153,24 @@ export class ToggleSwitch extends BaseComponent { onClick(event: Event) { if (!this.disabled() && !this.readonly()) { - this.modelValue = this.checked() ? this.falseValue() : this.trueValue(); - - this.onModelChange(this.modelValue); - this.onChange.emit({ - originalEvent: event, - checked: this.modelValue, - }); - + this.modelValue.set(this.checked() ? this.falseValue() : this.trueValue()); + this.onModelChange(this.modelValue()); + this.onChange.emit({ originalEvent: event, checked: this.modelValue() }); this.input.nativeElement.focus(); } } onFocus() { - this.focused = true; + this.focused.set(true); } onBlur() { - this.focused = false; + this.focused.set(false); this.onModelTouched(); } writeValue(value: any): void { - this.modelValue = value; - this.cd.markForCheck(); + this.modelValue.set(value); } registerOnChange(fn: Function): void { @@ -188,9 +185,7 @@ export class ToggleSwitch extends BaseComponent { this.disabled.set(val); } - checked() { - return this.modelValue === this.trueValue(); - } + checked = computed(() => this.modelValue() === this.trueValue()); } @NgModule({ From f01dc82a38013cce88d5e3aa7a177329c8d9a3e7 Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Sun, 20 Oct 2024 13:31:06 +0200 Subject: [PATCH 05/12] convert to modern output --- src/app/components/toggleswitch/toggleswitch.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/toggleswitch/toggleswitch.ts b/src/app/components/toggleswitch/toggleswitch.ts index 6d7239a16e0..f9e9631e2bd 100755 --- a/src/app/components/toggleswitch/toggleswitch.ts +++ b/src/app/components/toggleswitch/toggleswitch.ts @@ -4,7 +4,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, - EventEmitter, + OutputEmitterRef, forwardRef, inject, input, @@ -13,7 +13,7 @@ import { computed, NgModule, numberAttribute, - Output, + output, ViewChild, ViewEncapsulation, WritableSignal, @@ -137,7 +137,7 @@ export class ToggleSwitch extends BaseComponent { * @param {ToggleSwitchChangeEvent} event - Custom change event. * @group Emits */ - @Output() onChange: EventEmitter = new EventEmitter(); + onChange: OutputEmitterRef = output(); @ViewChild('input') input!: ElementRef; From c31a366893e8f96c81703bb32c32e5605a2674d3 Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Sun, 20 Oct 2024 13:33:09 +0200 Subject: [PATCH 06/12] convert to modern view child --- src/app/components/toggleswitch/toggleswitch.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/toggleswitch/toggleswitch.ts b/src/app/components/toggleswitch/toggleswitch.ts index f9e9631e2bd..1babf131923 100755 --- a/src/app/components/toggleswitch/toggleswitch.ts +++ b/src/app/components/toggleswitch/toggleswitch.ts @@ -14,7 +14,7 @@ import { NgModule, numberAttribute, output, - ViewChild, + viewChild, ViewEncapsulation, WritableSignal, } from '@angular/core'; @@ -139,7 +139,7 @@ export class ToggleSwitch extends BaseComponent { */ onChange: OutputEmitterRef = output(); - @ViewChild('input') input!: ElementRef; + input = viewChild.required('input'); modelValue: WritableSignal = signal(false); @@ -156,7 +156,7 @@ export class ToggleSwitch extends BaseComponent { this.modelValue.set(this.checked() ? this.falseValue() : this.trueValue()); this.onModelChange(this.modelValue()); this.onChange.emit({ originalEvent: event, checked: this.modelValue() }); - this.input.nativeElement.focus(); + this.input().nativeElement.focus(); } } From 4567cdc1898129f685c782f7ff1d2adbe63c0d1f Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Sun, 20 Oct 2024 13:52:06 +0200 Subject: [PATCH 07/12] add test cases --- .../toggleswitch/toggleswitch.spec.ts | 184 ++++++------------ 1 file changed, 63 insertions(+), 121 deletions(-) diff --git a/src/app/components/toggleswitch/toggleswitch.spec.ts b/src/app/components/toggleswitch/toggleswitch.spec.ts index 247905c1ce4..7c56db2ea2a 100755 --- a/src/app/components/toggleswitch/toggleswitch.spec.ts +++ b/src/app/components/toggleswitch/toggleswitch.spec.ts @@ -1,171 +1,113 @@ -import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing'; +import { ComponentRef } from '@angular/core'; +import { TestBed, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { InputSwitch } from './inputswitch'; +import { ToggleSwitch, ToggleSwitchModule } from './toggleswitch'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -describe('InputSwitch', () => { - let inputswitch: InputSwitch; - let fixture: ComponentFixture; +describe('ToggleSwitch', () => { + let toggleSwitch: ToggleSwitch; + let fixture: ComponentFixture; + let toggleSwitchRef: ComponentRef; beforeEach(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule], - declarations: [InputSwitch], + imports: [NoopAnimationsModule, ToggleSwitchModule], }); - fixture = TestBed.createComponent(InputSwitch); - inputswitch = fixture.componentInstance; - }); - - it('should created by default', () => { + fixture = TestBed.createComponent(ToggleSwitch); + toggleSwitch = fixture.componentInstance; + toggleSwitchRef = fixture.componentRef; fixture.detectChanges(); - - const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement; - expect(inputSwitchEl).toBeTruthy(); }); - it('should disabled', () => { - inputswitch.disabled = true; - fixture.detectChanges(); - - const onClickSpy = spyOn(inputswitch, 'onClick').and.callThrough(); - const onModelChangeSpy = spyOn(inputswitch, 'onModelChange').and.callThrough(); - const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement; - const inputEl = fixture.debugElement.query(By.css('input')).nativeElement; - inputSwitchEl.click(); - fixture.detectChanges(); - - expect(inputSwitchEl.className).toContain('p-disabled'); - expect(inputEl.disabled).toEqual(true); - expect(onClickSpy).toHaveBeenCalled(); - expect(onModelChangeSpy).not.toHaveBeenCalled(); + it('should render the ToggleSwitch with default values', () => { + const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]')); + expect(inputElement).toBeTruthy(); + expect(inputElement.nativeElement.checked).toBeFalse(); }); - it('should change style and styleClass', () => { - inputswitch.style = { height: '300px' }; - inputswitch.styleClass = 'Primeng ROCKS!'; + it('should reflect the correct state when checked', () => { + toggleSwitch.modelValue.set(true); fixture.detectChanges(); - - const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement; - expect(inputSwitchEl.className).toContain('Primeng ROCKS!'); - expect(inputSwitchEl.style.height).toContain('300px'); + const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]')); + expect(inputElement.nativeElement.checked).toBeTrue(); }); - it('should get a name inputId and tabindex', () => { - inputswitch.tabindex = 5; - inputswitch.inputId = 'Primeng!'; - inputswitch.name = 'Primeng ROCKS!'; + it('should not allow interaction when disabled', () => { + toggleSwitch.disabled.set(true); fixture.detectChanges(); - - const inputSwitchEl = fixture.debugElement.query(By.css('input')).nativeElement; - expect(inputSwitchEl.tabIndex).toEqual(5); - expect(inputSwitchEl.name).toEqual('Primeng ROCKS!'); - expect(inputSwitchEl.id).toEqual('Primeng!'); + const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]')); + expect(inputElement.nativeElement.disabled).toBeTrue(); }); - it('should checked when click', () => { + it('should autofocus the input element if autofocus is true', () => { + toggleSwitchRef.setInput('autofocus', true); fixture.detectChanges(); - - const onClickSpy = spyOn(inputswitch, 'onClick').and.callThrough(); - const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement; - let data; - inputswitch.onChange.subscribe((value) => (data = value)); - inputSwitchEl.click(); + const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]')); + inputElement.nativeElement.focus(); // Manually trigger focus fixture.detectChanges(); - expect(inputswitch.checked()).toEqual(true); - expect(data.checked).toEqual(true); - expect(onClickSpy).toHaveBeenCalled(); + expect(document.activeElement).toBe(inputElement.nativeElement); }); - it('should listen event emitter', () => { + it('should toggle the checked state on click and emit onChange', () => { + spyOn(toggleSwitch.onChange, 'emit'); fixture.detectChanges(); - let data; - inputswitch.onChange.subscribe((value) => (data = value)); - const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement; - inputSwitchEl.click(); + const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]')); + inputElement.nativeElement.click(); fixture.detectChanges(); - expect(data.checked).toEqual(true); - inputSwitchEl.click(); - expect(data.checked).toEqual(false); + expect(toggleSwitch.modelValue()).toBeTrue(); + expect(toggleSwitch.onChange.emit).toHaveBeenCalled(); }); - it('should change focused', () => { + it('should not toggle when readonly is true', () => { + toggleSwitchRef.setInput('readonly', true); fixture.detectChanges(); - const onFocusSpy = spyOn(inputswitch, 'onFocus').and.callThrough(); - const onBlurSpy = spyOn(inputswitch, 'onBlur').and.callThrough(); - const onModelTouchedSpy = spyOn(inputswitch, 'onModelTouched').and.callThrough(); - const inputEl = fixture.debugElement.query(By.css('input')).nativeElement; - const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement; - inputEl.dispatchEvent(new Event('focus')); + const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]')); + inputElement.nativeElement.click(); fixture.detectChanges(); - expect(inputSwitchEl.className).toContain('p-focus'); - expect(inputswitch.focused).toEqual(true); - expect(onFocusSpy).toHaveBeenCalled(); - inputEl.dispatchEvent(new Event('blur')); - fixture.detectChanges(); - - expect(inputswitch.focused).toEqual(false); - expect(inputSwitchEl.className).not.toContain('p-focus'); - expect(onBlurSpy).toHaveBeenCalled(); - expect(onModelTouchedSpy).toHaveBeenCalled(); + expect(toggleSwitch.modelValue()).toBeFalse(); // default state }); - it('should change disabled', () => { + it('should apply correct aria-label and aria-labelledby attributes', () => { + toggleSwitchRef.setInput('ariaLabel', 'Toggle Switch'); + toggleSwitchRef.setInput('ariaLabelledBy', 'toggleSwitchLabel'); fixture.detectChanges(); - inputswitch.setDisabledState(true); - fixture.detectChanges(); + const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]')); + expect(inputElement.nativeElement.getAttribute('aria-label')).toBe('Toggle Switch'); + expect(inputElement.nativeElement.getAttribute('aria-labelledby')).toBe('toggleSwitchLabel'); + }); - const onClickSpy = spyOn(inputswitch, 'onClick').and.callThrough(); - const onModelChangeSpy = spyOn(inputswitch, 'onModelChange').and.callThrough(); - const inputSwitchEl = fixture.debugElement.query(By.css('div')).nativeElement; - const inputEl = fixture.debugElement.query(By.css('input')).nativeElement; - inputSwitchEl.click(); + it('should apply the correct tabindex attribute', () => { + toggleSwitchRef.setInput('tabindex', 3); fixture.detectChanges(); - expect(inputSwitchEl.className).toContain('p-disabled'); - expect(inputEl.disabled).toEqual(true); - expect(onClickSpy).toHaveBeenCalled(); - expect(onModelChangeSpy).not.toHaveBeenCalled(); + const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]')); + expect(inputElement.nativeElement.getAttribute('tabindex')).toBe('3'); // Should reflect tabindex value }); - it('should toggle the modelValue and call necessary functions when not disabled and not readonly', () => { - const onClickSpy = spyOn(inputswitch, 'onClick').and.callThrough(); - const onChangeSpy = spyOn(inputswitch.onChange, 'emit').and.callThrough(); - const onModelChangeSpy = spyOn(inputswitch, 'onModelChange').and.callThrough(); - - const divElement: HTMLElement = fixture.debugElement.query(By.css('div')).nativeElement; - divElement.click(); + it('should initialize with the correct checked state based on modelValue', () => { + toggleSwitch.modelValue.set(true); // Set initial value to true fixture.detectChanges(); - expect(onClickSpy).toHaveBeenCalledWith(jasmine.anything()); + const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]')); + expect(inputElement.nativeElement.checked).toBeTrue(); // Should reflect true state + }); - const initialModelValue = inputswitch.modelValue; - inputswitch.onClick(new Event('click')); + it('should emit onChange event with the correct value on click', () => { + spyOn(fixture.componentInstance.onChange, 'emit'); + fixture.detectChanges(); - expect(inputswitch.modelValue).toEqual(initialModelValue ? inputswitch.falseValue : inputswitch.trueValue); - expect(onModelChangeSpy).toHaveBeenCalled(); - expect(onChangeSpy).toHaveBeenCalledWith({ - originalEvent: jasmine.anything(), - checked: inputswitch.modelValue, - }); - }); + const inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]')); + inputElement.nativeElement.click(); // Toggle to true + fixture.detectChanges(); - it('should not toggle the modelValue when disabled or readonly', () => { - inputswitch.disabled = true; - let initialModelValue = inputswitch.modelValue; - inputswitch.onClick(new Event('click')); - expect(inputswitch.modelValue).toEqual(initialModelValue); - - inputswitch.disabled = false; - inputswitch.readonly = true; - initialModelValue = inputswitch.modelValue; - inputswitch.onClick(new Event('click')); - expect(inputswitch.modelValue).toEqual(initialModelValue); + expect(fixture.componentInstance.modelValue()).toBeTrue(); + expect(fixture.componentInstance.onChange.emit).toHaveBeenCalledWith({ originalEvent: jasmine.any(Event), checked: true }); }); }); From ea39681776b139884da8b66f80c02bb32b97941c Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Sun, 20 Oct 2024 17:55:56 +0200 Subject: [PATCH 08/12] use component directly --- src/app/components/toggleswitch/toggleswitch.spec.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/components/toggleswitch/toggleswitch.spec.ts b/src/app/components/toggleswitch/toggleswitch.spec.ts index 7c56db2ea2a..16b3bafe238 100755 --- a/src/app/components/toggleswitch/toggleswitch.spec.ts +++ b/src/app/components/toggleswitch/toggleswitch.spec.ts @@ -1,17 +1,17 @@ import { ComponentRef } from '@angular/core'; import { TestBed, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { ToggleSwitch, ToggleSwitchModule } from './toggleswitch'; +import { ToggleSwitch } from './toggleswitch'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -describe('ToggleSwitch', () => { +fdescribe('ToggleSwitch', () => { let toggleSwitch: ToggleSwitch; let fixture: ComponentFixture; let toggleSwitchRef: ComponentRef; beforeEach(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, ToggleSwitchModule], + imports: [NoopAnimationsModule, ToggleSwitch], }); fixture = TestBed.createComponent(ToggleSwitch); @@ -107,7 +107,7 @@ describe('ToggleSwitch', () => { inputElement.nativeElement.click(); // Toggle to true fixture.detectChanges(); - expect(fixture.componentInstance.modelValue()).toBeTrue(); - expect(fixture.componentInstance.onChange.emit).toHaveBeenCalledWith({ originalEvent: jasmine.any(Event), checked: true }); + expect(toggleSwitch.modelValue()).toBeTrue(); + expect(toggleSwitch.onChange.emit).toHaveBeenCalledWith({ originalEvent: jasmine.any(Event), checked: true }); }); }); From 1dc83c87a4803f533f2c226ddf9ba521cc34a5da Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Sun, 20 Oct 2024 19:45:49 +0200 Subject: [PATCH 09/12] correct error --- src/app/components/toggleswitch/toggleswitch.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/toggleswitch/toggleswitch.spec.ts b/src/app/components/toggleswitch/toggleswitch.spec.ts index 16b3bafe238..d2d576749f6 100755 --- a/src/app/components/toggleswitch/toggleswitch.spec.ts +++ b/src/app/components/toggleswitch/toggleswitch.spec.ts @@ -4,7 +4,7 @@ import { By } from '@angular/platform-browser'; import { ToggleSwitch } from './toggleswitch'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -fdescribe('ToggleSwitch', () => { +describe('ToggleSwitch', () => { let toggleSwitch: ToggleSwitch; let fixture: ComponentFixture; let toggleSwitchRef: ComponentRef; From 5ecf4d307e26819a2e8736c51844520c6fbd153c Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Mon, 21 Oct 2024 01:36:29 +0200 Subject: [PATCH 10/12] values type could be any --- src/app/components/toggleswitch/toggleswitch.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/toggleswitch/toggleswitch.ts b/src/app/components/toggleswitch/toggleswitch.ts index e02b075ba02..3b4a29f7c4f 100755 --- a/src/app/components/toggleswitch/toggleswitch.ts +++ b/src/app/components/toggleswitch/toggleswitch.ts @@ -113,12 +113,12 @@ export class ToggleSwitch extends BaseComponent { * Value in checked state. * @group Props */ - trueValue = input(true, { transform: booleanAttribute }); + trueValue = input(true); /** * Value in unchecked state. * @group Props */ - falseValue = input(false, { transform: booleanAttribute }); + falseValue = input(false); /** * Used to define a string that autocomplete attribute the current element. * @group Props @@ -143,7 +143,7 @@ export class ToggleSwitch extends BaseComponent { input = viewChild.required('input'); - modelValue: WritableSignal = signal(false); + modelValue: WritableSignal = signal(false); focused: WritableSignal = signal(false); From 7395d0e74fc1bb2df65102e0c31d3d28127baa7d Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Fri, 1 Nov 2024 16:37:33 +0100 Subject: [PATCH 11/12] handle conflict --- .../components/toggleswitch/toggleswitch.ts | 40 +++++++++++-------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/src/app/components/toggleswitch/toggleswitch.ts b/src/app/components/toggleswitch/toggleswitch.ts index ce05ee98fe0..a71424732aa 100755 --- a/src/app/components/toggleswitch/toggleswitch.ts +++ b/src/app/components/toggleswitch/toggleswitch.ts @@ -1,6 +1,5 @@ -import { NgClass, NgStyle } from '@angular/common'; +import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common'; import { - AfterContentInit, booleanAttribute, ChangeDetectionStrategy, Component, @@ -50,7 +49,7 @@ export const TOGGLESWITCH_VALUE_ACCESSOR: any = { @Component({ selector: 'p-toggleswitch, p-toggleSwitch', standalone: true, - imports: [NgClass, NgStyle, AutoFocus, SharedModule], + imports: [NgClass, NgStyle, NgTemplateOutlet, AutoFocus, SharedModule], template: `
- @if (handleTemplate()) { - + @if (customHandleTemplate()) { + }
@@ -173,8 +172,25 @@ export class ToggleSwitch extends BaseComponent { * @group Templates */ handleTemplate = contentChild | undefined>('handle'); - - templates = contentChildren(PrimeTemplate); + /** + * List of PrimeTemplate instances provided by the content. + * @group Templates + */ + sTemplates = contentChildren(PrimeTemplate); + /** + * Computes the custom input template if available. + * @returns {TemplateRef | undefined} The custom input template or undefined if not available. + */ + customHandleTemplate = computed>(() => { + if (this.sTemplates()) { + const templates = this.sTemplates().reduce<{ [key: string]: TemplateRef }>((prev, curr) => { + prev[curr.getType()] = curr.template; + return prev; + }, {}); + return templates['handle']; + } + return this.handleTemplate(); + }); modelValue: WritableSignal = signal(false); @@ -186,16 +202,6 @@ export class ToggleSwitch extends BaseComponent { _componentStyle = inject(ToggleSwitchStyle); - ngAfterContentInit() { - this.templates().forEach((item) => { - switch (item.getType()) { - case 'handle': - this.handleTemplate = item.template; - break; - } - }); - } - onClick(event: Event) { if (!this.disabled() && !this.readonly()) { this.modelValue.set(this.checked() ? this.falseValue() : this.trueValue()); From 6ba1e42f743051d066244821a6b6f6b57660c58e Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Sun, 17 Nov 2024 09:33:53 +0100 Subject: [PATCH 12/12] correct toggleswitch.ts --- packages/primeng/src/toggleswitch/toggleswitch.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/primeng/src/toggleswitch/toggleswitch.ts b/packages/primeng/src/toggleswitch/toggleswitch.ts index d0c3055773e..b711957591f 100755 --- a/packages/primeng/src/toggleswitch/toggleswitch.ts +++ b/packages/primeng/src/toggleswitch/toggleswitch.ts @@ -22,7 +22,7 @@ import { WritableSignal } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { SharedModule } from 'primeng/api'; +import { PrimeTemplate, SharedModule } from 'primeng/api'; import { AutoFocus } from 'primeng/autofocus'; import { BaseComponent } from 'primeng/basecomponent'; import { ToggleSwitchStyle } from './style/toggleswitchstyle';