refactor: replace @output decorator with output() function

projects/ng-talk/src/lib/components/channel-list/ng-talk-channel-list.component.ts

@@ -3,15 +3,14 @@ import {
   Component,
   DestroyRef,
   ElementRef,
-  EventEmitter,
   forwardRef,
   HostBinding,
   HostListener,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
-  Output,
+  output,
   signal,
   SimpleChanges
 } from '@angular/core';
@@ -25,10 +24,10 @@ import {ChatMessage} from '../../models/chat-message';
 import {ChatUser} from '../../models/chat-user';
 import {FnPipe} from "../../pipes/fn.pipe";
 import {nameof} from '../../utils/utils';
+import {NgTalkChannelComponent} from "../channel/ng-talk-channel.component";
+import {NgTalkChannelPreviewComponent} from "../channel/preview/ng-talk-channel-preview.component";
 import {MessageLoadingMethod, NgTalkSettings} from '../ng-talk-settings';
 import {NG_TALK_CHANNEL_LIST_TOKEN} from "./ng-talk-channel-list-token";
-import {NgTalkChannelPreviewComponent} from "../channel/preview/ng-talk-channel-preview.component";
-import {NgTalkChannelComponent} from "../channel/ng-talk-channel.component";
 
 @Component({
   selector: 'ng-talk-channel-list',
@@ -46,12 +45,12 @@ export class NgTalkChannelListComponent implements OnInit, OnChanges, OnDestroy
   @Input() public user: ChatUser;
   @Input() public adapter: ChatAdapter;
   @Input() public settings = new NgTalkSettings();
-  @Output() public search = new EventEmitter<string>();
-  @Output() public channelChanged = new EventEmitter<ChatChannel | null>();
+  public search = output<string>();
+  public channelChanged = output<ChatChannel | null>();
 
   // Forwarded events from single channel
-  @Output() public messageSent = new EventEmitter<ChatMessage>();
-  @Output() public userClicked = new EventEmitter<ChatUser>();
+  public messageSent = output<ChatMessage>();
+  public userClicked = output<ChatUser>();
 
   @HostBinding('class')
   public displayMode: 'desktop' | 'mobile';

projects/ng-talk/src/lib/components/channel/ng-talk-channel.component.ts

@@ -1,6 +1,6 @@
 import {CdkDrag, CdkDragEnd, CdkDragMove} from '@angular/cdk/drag-drop';
 import {NgComponentOutlet} from "@angular/common";
-import {AfterViewInit, Component, DestroyRef, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, signal, SimpleChanges, ViewChild, viewChildren} from '@angular/core';
+import {AfterViewInit, Component, DestroyRef, ElementRef, Input, OnChanges, OnInit, output, signal, SimpleChanges, ViewChild, viewChildren} from '@angular/core';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {Subscription} from 'rxjs';
 import {InViewportDirective} from '../../directives/in-viewport.directive';
@@ -35,9 +35,9 @@ export class NgTalkChannelComponent implements OnInit, OnChanges, AfterViewInit
   @Input() public settings: NgTalkSettings;
   @Input() public disableRendering = false;
 
-  @Output() public messageSent = new EventEmitter<ChatMessage>();
-  @Output() public userClicked = new EventEmitter<ChatUser>();
-  @Output() public deleted = new EventEmitter<void>();
+  public messageSent = output<ChatMessage>();
+  public userClicked = output<ChatUser>();
+  public deleted = output<void>();
 
   @ViewChild('chatBox') private _chatBox: ElementRef<HTMLElement>;
   @ViewChild(NgTalkSendMessageComponent) private _sendMessageComponent: NgTalkSendMessageComponent;

projects/ng-talk/src/lib/components/channel/send/emoji/ng-talk-send-emoji.component.ts

@@ -1,5 +1,5 @@
 import {KeyValue, KeyValuePipe} from '@angular/common';
-import {Component, EventEmitter, Output} from '@angular/core';
+import {Component, output} from '@angular/core';
 import {FormsModule} from "@angular/forms";
 import {FnPipe} from "../../../../pipes/fn.pipe";
 import {NgTalkChannelComponent} from '../../ng-talk-channel.component';
@@ -52,7 +52,7 @@ import emoji from './emoji.json';
   `
 })
 export class NgTalkSendEmojiComponent {
-  @Output() public emojiSelected = new EventEmitter<string>();
+  public emojiSelected = output<string>();
 
   protected readonly emoji = emoji;
   protected searchQuery: string;

projects/ng-talk/src/lib/components/channel/send/gif/ng-talk-send-gif.component.ts

@@ -1,6 +1,6 @@
 import {AsyncPipe} from "@angular/common";
 import {HttpClient} from '@angular/common/http';
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {Component, OnInit, output} from '@angular/core';
 import {FormsModule} from "@angular/forms";
 import {debounceTime, map, Observable, Subject} from 'rxjs';
 import {FnPipe} from "../../../../pipes/fn.pipe";
@@ -57,7 +57,7 @@ import {NgTalkChannelComponent} from '../../ng-talk-channel.component';
   `
 })
 export class NgTalkSendGifComponent implements OnInit {
-  @Output() public gifSelected = new EventEmitter<string>();
+  public gifSelected = output<string>();
 
   protected searchQuery: string;
   protected gifs$: Observable<any>;

projects/ng-talk/src/lib/components/channel/send/ng-talk-send-message.component.ts

@@ -1,5 +1,4 @@
-import {Component, ElementRef, Inject, Optional, ViewChild} from '@angular/core';
-import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
+import {Component, DestroyRef, ElementRef, Inject, Optional, ViewChild} from '@angular/core';
 import {FormsModule} from "@angular/forms";
 import {ChatChannel} from '../../../models/chat-channel';
 import {ChatMessage, ChatMessageType} from '../../../models/chat-message';
@@ -144,9 +143,11 @@ export class NgTalkSendMessageComponent {
   protected showGifSelector = false;
 
   constructor(protected chat: NgTalkChannelComponent,
+              destroyRef: DestroyRef,
               @Optional() @Inject(NG_TALK_CHANNEL_LIST_TOKEN) channelList: NgTalkChannelListComponent) {
     if (channelList) { // Detectar cambio de canal si estamos en un listado
-      channelList.channelChanged.pipe(takeUntilDestroyed()).subscribe((c) => this._onChannelChanged(c));
+      const subscription = channelList.channelChanged.subscribe((c) => this._onChannelChanged(c));
+      destroyRef.onDestroy(() => subscription.unsubscribe());
     }
 
     chat.focus = () => this.focus();

projects/ng-talk/src/lib/directives/in-viewport.directive.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {Directive, ElementRef, Input, OnDestroy, OnInit, output} from '@angular/core';
 
 /**
  * From https://github.com/thisissoon/angular-inviewport
@@ -25,7 +25,7 @@ import {Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output} f
 })
 export class InViewportDirective implements OnDestroy, OnInit {
   @Input() public inViewportOptions: IntersectionObserverInit & { delay?: number };
-  @Output() public inViewportChange = new EventEmitter<boolean>();
+  public inViewportChange = output<boolean>();
 
   private _inViewport: boolean;
   protected observer: IntersectionObserver;