feat(checkbox,switch): more output signals

libs/ui/checkbox/brain/src/lib/brn-checkbox.component.ts

@@ -8,19 +8,19 @@ import {
  computed,
  effect,
  ElementRef,
- EventEmitter,
  forwardRef,
  inject,
  input,
  Input,
  OnDestroy,
- Output,
+ output,
  PLATFORM_ID,
  Renderer2,
  signal,
  ViewChild,
  ViewEncapsulation,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { rxHostPressedListener } from '@spartan-ng/ui-core';
 
@@ -160,11 +160,12 @@ export class BrnCheckboxComponent implements AfterContentInit, OnDestroy {
  @ViewChild('checkBox', { static: true })
  public checkbox?: ElementRef<HTMLInputElement>;
 
- @Output()
- public readonly changed = new EventEmitter<boolean | 'indeterminate'>();
+ public readonly changed = output<boolean | 'indeterminate'>();
 
  constructor() {
- rxHostPressedListener().subscribe(() => this.handleChange());
+ rxHostPressedListener()
+ .pipe(takeUntilDestroyed())
+ .subscribe(() => this.handleChange());
  effect(() => {
  const parent = this._renderer.parentNode(this._elementRef.nativeElement);
  if (!parent) return;

libs/ui/checkbox/helm/src/lib/hlm-checkbox.component.ts

@@ -1,14 +1,4 @@
-import {
- Component,
- EventEmitter,
- Input,
- Output,
- booleanAttribute,
- computed,
- forwardRef,
- input,
- signal,
-} from '@angular/core';
+import { Component, Input, booleanAttribute, computed, forwardRef, input, output, signal } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BrnCheckboxComponent, indeterminateBooleanAttribute } from '@spartan-ng/ui-checkbox-brain';
 import { hlm } from '@spartan-ng/ui-core';
@@ -82,8 +72,7 @@ export class HlmCheckboxComponent {
  public readonly checkIconName = input<string>('lucideCheck');
  public readonly checkIconClass = input<string>('');
 
- @Output()
- public changed = new EventEmitter<boolean>();
+ public readonly changed = output<boolean>();
 
  protected _handleChange(): void {
  if (this.disabled()) return;

libs/ui/switch/brain/src/lib/brn-switch-ng-model.spec.ts

@@ -51,11 +51,9 @@ describe('BrnSwitchComponentNgModelIntegration', () => {
  expect(container.fixture.componentInstance.airplaneMode).toBe(true);
  });
 
- // TODO - why does this test not fail? it should be setup(false, true) but setup(false, false) still passes
  it('should do nothing when disabled', async () => {
  const { labelElement, user, container } = await setup(false, false);
 
- // TODO - using fireEvent.click here causes the test to fail, not sure why.
  await user.click(labelElement);
  await screen.findByDisplayValue('off');
  expect(container.fixture.componentInstance.airplaneMode).toBe(false);

libs/ui/switch/brain/src/lib/brn-switch.component.ts

@@ -8,19 +8,19 @@ import {
  Component,
  effect,
  ElementRef,
- EventEmitter,
  forwardRef,
  HostBinding,
  inject,
  Input,
  OnDestroy,
- Output,
+ output,
  PLATFORM_ID,
  Renderer2,
  signal,
  ViewChild,
  ViewEncapsulation,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { rxHostPressedListener } from '@spartan-ng/ui-core';
 
@@ -152,13 +152,13 @@ export class BrnSwitchComponent implements AfterContentInit, OnDestroy {
  @ViewChild('checkBox', { static: true })
  public checkbox?: ElementRef<HTMLInputElement>;
 
- @Output()
- public changed = new EventEmitter<boolean>();
- @Output()
- public touched = new EventEmitter<void>();
+ public readonly changed = output<boolean>();
+ public readonly touched = output<void>();
 
  constructor() {
- rxHostPressedListener().subscribe(() => this.handleChange());
+ rxHostPressedListener()
+ .pipe(takeUntilDestroyed())
+ .subscribe(() => this.handleChange());
  effect(() => {
  /** search for the label and set the disabled state */
  let parent = this._renderer.parentNode(this._elementRef.nativeElement);

libs/ui/switch/helm/src/lib/hlm-switch.component.ts

@@ -1,14 +1,4 @@
-import {
- Component,
- EventEmitter,
- Input,
- Output,
- booleanAttribute,
- computed,
- forwardRef,
- input,
- signal,
-} from '@angular/core';
+import { Component, Input, booleanAttribute, computed, forwardRef, input, output, signal } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnSwitchComponent, BrnSwitchThumbComponent } from '@spartan-ng/ui-switch-brain';
@@ -59,8 +49,7 @@ export class HlmSwitchComponent {
  ),
  );
 
- @Output()
- public changed = new EventEmitter<boolean>();
+ public readonly changed = output<boolean>();
 
  protected _handleChange(value: boolean): void {
  this._checked.set(value);