ov-components: Updated to Angular 19

openvidu-components-angular/angular.json

@@ -155,17 +155,19 @@
 			"sourceRoot": "src",
 			"architect": {
 				"build": {
-					"builder": "@angular-devkit/build-angular:browser",
+					"builder": "@angular-devkit/build-angular:application",
 					"options": {
-						"outputPath": "dist/openvidu-webcomponent-rc",
+						"outputPath": {
+              "base": "dist/openvidu-webcomponent-rc"
+            },
             "index": "src/index.html",
-						"main": "src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts",
 						"polyfills": ["zone.js"],
 						"tsConfig": "src/app/openvidu-webcomponent/tsconfig.openvidu-webcomponent.json",
 						"aot": true,
 						"assets": ["src/favicon.ico"],
 						"styles": ["src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss"],
-						"scripts": []
+            "scripts": [],
+            "browser": "src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts"
 					},
 					"configurations": {
 						"production": {
@@ -180,8 +182,6 @@
 							"sourceMap": false,
 							"namedChunks": false,
               "extractLicenses": true,
-							"vendorChunk": false,
-							"buildOptimizer": true,
 							"budgets": [
 								{
 									"type": "initial",

openvidu-components-angular/package.json

@@ -1,27 +1,27 @@
 {
   "dependencies": {
-    "@angular/animations": "18.2.5",
+    "@angular/animations": "19.2.8",
-    "@angular/cdk": "18.2.5",
+    "@angular/cdk": "19.2.11",
-    "@angular/common": "18.2.5",
+    "@angular/common": "19.2.8",
-    "@angular/core": "18.2.5",
+    "@angular/core": "19.2.8",
-    "@angular/forms": "18.2.5",
+    "@angular/forms": "19.2.8",
-    "@angular/material": "18.2.5",
+    "@angular/material": "19.2.11",
-    "@angular/platform-browser": "18.2.5",
+    "@angular/platform-browser": "19.2.8",
-    "@angular/platform-browser-dynamic": "18.2.5",
+    "@angular/platform-browser-dynamic": "19.2.8",
-    "@angular/router": "18.2.5",
+    "@angular/router": "19.2.8",
     "@livekit/track-processors": "0.3.2",
     "autolinker": "4.0.0",
     "livekit-client": "2.5.2",
     "rxjs": "7.8.1",
     "tslib": "2.7.0",
-    "zone.js": "^0.14.6"
+    "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "18.2.5",
+    "@angular-devkit/build-angular": "19.2.9",
-    "@angular/cli": "18.2.5",
+    "@angular/cli": "19.2.9",
-    "@angular/compiler": "18.2.5",
+    "@angular/compiler": "19.2.8",
-    "@angular/compiler-cli": "18.2.5",
+    "@angular/compiler-cli": "19.2.8",
-    "@angular/elements": "18.2.5",
+    "@angular/elements": "19.2.8",
     "@compodoc/compodoc": "^1.1.25",
     "@types/dom-mediacapture-transform": "0.1.9",
     "@types/dom-webcodecs": "0.1.11",
@@ -49,13 +49,13 @@
     "karma-mocha-reporter": "2.2.5",
     "karma-notify-reporter": "1.3.0",
     "lint-staged": "^15.2.10",
-    "ng-packagr": "18.2.1",
+    "ng-packagr": "19.2.2",
     "npm-watch": "^0.13.0",
     "prettier": "3.3.3",
     "selenium-webdriver": "4.25.0",
     "ts-node": "10.9.2",
     "tslint": "6.1.3",
-    "typescript": "5.4.5",
+    "typescript": "5.8.3",
     "webpack-bundle-analyzer": "^4.10.2"
   },
   "name": "openvidu-components-testapp",

openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.ts

@@ -8,7 +8,8 @@ import { RecordingService } from '../../services/recording/recording.service';
 @Component({
 	selector: 'ov-admin-dashboard',
 	templateUrl: './admin-dashboard.component.html',
-	styleUrls: ['./admin-dashboard.component.scss']
+	styleUrls: ['./admin-dashboard.component.scss'],
+	standalone: false
 })
 export class AdminDashboardComponent implements OnInit, OnDestroy {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.ts

@@ -7,7 +7,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
 @Component({
 	selector: 'ov-admin-login',
 	templateUrl: './admin-login.component.html',
-	styleUrls: ['./admin-login.component.scss']
+	styleUrls: ['./admin-login.component.scss'],
+	standalone: false
 })
 export class AdminLoginComponent implements OnInit {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.ts

@@ -10,6 +10,7 @@ import { Component } from '@angular/core';
 		<div class="stick loud play"></div>
 		<div class="stick normal play"></div>
 	</div>`,
-	styleUrls: ['./audio-wave.component.scss']
+	styleUrls: ['./audio-wave.component.scss'],
+	standalone: false
 })
 export class AudioWaveComponent {}

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/avatar-profile/avatar-profile.component.ts

@@ -13,7 +13,8 @@ import { Component, Input } from '@angular/core';
 			</div>
 		</div>
 	`,
-	styleUrls: ['./avatar-profile.component.scss']
+	styleUrls: ['./avatar-profile.component.scss'],
+	standalone: false
 })
 export class AvatarProfileComponent {
 	letter: string;

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts

@@ -36,7 +36,8 @@ import { MatDialogRef } from '@angular/material/dialog';
 				border-radius: var(--ov-surface-radius);
 			}
 		`
-	]
+    ],
+    standalone: false
 })
 export class DeleteDialogComponent {
 	constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>) {}

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts

@@ -33,7 +33,8 @@ import { DialogData } from '../../models/dialog.model';
 				border-radius: var(--ov-surface-radius);
 			}
 		`
-	]
+    ],
+    standalone: false
 })
 export class DialogTemplateComponent {
 	constructor(

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts

@@ -19,7 +19,8 @@ import { DialogData } from '../../models/dialog.model';
 			</button>
 			<button mat-button (click)="close()">{{'PANEL.CLOSE' | translate}}</button>
 		</div>
-	`
+	`,
+    standalone: false
 })
 export class ProFeatureDialogTemplateComponent {
 	constructor(public dialogRef: MatDialogRef<ProFeatureDialogTemplateComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts

@@ -38,7 +38,8 @@ import { RecordingDialogData } from '../../models/dialog.model';
 				border-radius: var(--ov-surface-radius);
 			}
 		`
-	]
+    ],
+    standalone: false
 })
 export class RecordingDialogComponent {
 	@ViewChild('videoElement', { static: true }) videoElement: ElementRef<HTMLVideoElement>;

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.ts

@@ -30,7 +30,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
 	selector: 'ov-layout',
 	templateUrl: './layout.component.html',
 	styleUrls: ['./layout.component.scss'],
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: false
 })
 export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.ts

@@ -18,7 +18,8 @@ import { Track } from 'livekit-client';
 			transition(':enter', [style({ opacity: 0 }), animate('100ms', style({ opacity: 1 }))]),
 			transition(':leave', [style({ opacity: 1 }), animate('200ms', style({ opacity: 0 }))])
 		])
-	]
+	],
+	standalone: false
 })
 export class MediaElementComponent implements AfterViewInit {
 	_track: Track;

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts

@@ -20,7 +20,8 @@ import { BroadcastingStartRequestedEvent, BroadcastingStopRequestedEvent } from
 	selector: 'ov-activities-panel',
 	templateUrl: './activities-panel.component.html',
 	styleUrls: ['../panel.component.scss', './activities-panel.component.scss'],
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: false
 })
 export class ActivitiesPanelComponent implements OnInit {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.ts

@@ -18,7 +18,8 @@ import { OpenViduService } from '../../../../services/openvidu/openvidu.service'
 	selector: 'ov-broadcasting-activity',
 	templateUrl: './broadcasting-activity.component.html',
 	styleUrls: ['./broadcasting-activity.component.scss', '../activities-panel.component.scss'],
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: false
 })
 
 // TODO: Allow to add more than one broadcast url

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts

@@ -24,7 +24,8 @@ import { LoggerService } from '../../../../services/logger/logger.service';
 	selector: 'ov-recording-activity',
 	templateUrl: './recording-activity.component.html',
 	styleUrls: ['./recording-activity.component.scss', '../activities-panel.component.scss'],
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: false
 })
 
 // TODO: Allow to add more than one recording type

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts

@@ -12,7 +12,8 @@ import { VirtualBackgroundService } from '../../../services/virtual-background/v
 	selector: 'ov-background-effects-panel',
 	templateUrl: './background-effects-panel.component.html',
 	styleUrls: ['../panel.component.scss', './background-effects-panel.component.scss'],
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: false
 })
 export class BackgroundEffectsPanelComponent implements OnInit {
 	backgroundSelectedId: string;
@@ -56,10 +57,6 @@ export class BackgroundEffectsPanelComponent implements OnInit {
 	}
 
 	async applyBackground(effect: BackgroundEffect) {
-		if (effect.type === EffectType.NONE) {
-			await this.backgroundService.removeBackground();
-		} else {
 		await this.backgroundService.applyBackground(effect);
 	}
 }
-}

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts

@@ -13,7 +13,8 @@ import { PanelService } from '../../../services/panel/panel.service';
 	selector: 'ov-chat-panel',
 	templateUrl: './chat-panel.component.html',
 	styleUrls: ['../panel.component.scss', './chat-panel.component.scss'],
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: false
 })
 export class ChatPanelComponent implements OnInit, AfterViewInit {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.ts

@@ -37,7 +37,8 @@ import { BackgroundEffect } from '../../models/background-effect.model';
 	selector: 'ov-panel',
 	templateUrl: './panel.component.html',
 	styleUrls: ['./panel.component.scss'],
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: false
 })
 export class PanelComponent implements OnInit {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts

@@ -15,7 +15,8 @@ import { ParticipantService } from '../../../../services/participant/participant
 	selector: 'ov-participant-panel-item',
 	templateUrl: './participant-panel-item.component.html',
 	styleUrls: ['./participant-panel-item.component.scss'],
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: false
 })
 export class ParticipantPanelItemComponent implements OnInit, OnDestroy {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts

@@ -25,7 +25,8 @@ import { ParticipantModel } from '../../../../models/participant.model';
 	selector: 'ov-participants-panel',
 	templateUrl: './participants-panel.component.html',
 	styleUrls: ['../../panel.component.scss', './participants-panel.component.scss'],
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: false
 })
 export class ParticipantsPanelComponent implements OnInit, OnDestroy, AfterViewInit {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.ts

@@ -13,7 +13,8 @@ import { LangOption } from '../../../models/lang.model';
 @Component({
 	selector: 'ov-settings-panel',
 	templateUrl: './settings-panel.component.html',
-	styleUrls: ['../panel.component.scss', './settings-panel.component.scss']
+	styleUrls: ['../panel.component.scss', './settings-panel.component.scss'],
+	standalone: false
 })
 export class SettingsPanelComponent implements OnInit {
 	@Output() onVideoEnabledChanged = new EventEmitter<boolean>();

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts

@@ -17,7 +17,8 @@ import { StorageService } from '../../services/storage/storage.service';
 @Component({
 	selector: 'ov-pre-join',
 	templateUrl: './pre-join.component.html',
-	styleUrls: ['./pre-join.component.scss']
+	styleUrls: ['./pre-join.component.scss'],
+	standalone: false
 })
 export class PreJoinComponent implements OnInit, OnDestroy {
 	@Input() set error(error: { name: string; message: string } | undefined) {

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts

@@ -57,7 +57,8 @@ import { ParticipantLeftEvent, ParticipantLeftReason, ParticipantModel } from '.
     templateUrl: './session.component.html',
     styleUrls: ['./session.component.scss'],
     animations: [trigger('sessionAnimation', [transition(':enter', [style({ opacity: 0 }), animate('50ms', style({ opacity: 1 }))])])],
-	changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
 })
 export class SessionComponent implements OnInit, OnDestroy {
 	@ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef<any>;

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts

@@ -12,7 +12,8 @@ import { ParticipantModel } from '../../../models/participant.model';
 @Component({
 	selector: 'ov-audio-devices-select',
 	templateUrl: './audio-devices.component.html',
-	styleUrls: ['./audio-devices.component.scss']
+	styleUrls: ['./audio-devices.component.scss'],
+	standalone: false
 })
 export class AudioDevicesComponent implements OnInit, OnDestroy {
 	@Output() onAudioDeviceChanged = new EventEmitter<CustomDevice>();

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts

@@ -12,7 +12,8 @@ import { Subscription } from 'rxjs';
 @Component({
 	selector: 'ov-lang-selector',
 	templateUrl: './lang-selector.component.html',
-	styleUrls: ['./lang-selector.component.scss']
+	styleUrls: ['./lang-selector.component.scss'],
+	standalone: false
 })
 export class LangSelectorComponent implements OnInit, OnDestroy {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.ts

@@ -9,7 +9,8 @@ import { StorageService } from '../../../services/storage/storage.service';
 @Component({
 	selector: 'ov-participant-name-input',
 	templateUrl: './participant-name-input.component.html',
-	styleUrls: ['./participant-name-input.component.scss']
+	styleUrls: ['./participant-name-input.component.scss'],
+	standalone: false
 })
 export class ParticipantNameInputComponent implements OnInit {
 	name: string;

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.ts

@@ -12,7 +12,8 @@ import { ParticipantModel } from '../../../models/participant.model';
 @Component({
 	selector: 'ov-video-devices-select',
 	templateUrl: './video-devices.component.html',
-	styleUrls: ['./video-devices.component.scss']
+	styleUrls: ['./video-devices.component.scss'],
+	standalone: false
 })
 export class VideoDevicesComponent implements OnInit, OnDestroy {
 	@Output() onVideoDeviceChanged = new EventEmitter<CustomDevice>();

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts

@@ -15,7 +15,8 @@ import { ParticipantTrackPublication } from '../../models/participant.model';
 @Component({
 	selector: 'ov-stream',
 	templateUrl: './stream.component.html',
-	styleUrls: ['./stream.component.scss']
+	styleUrls: ['./stream.component.scss'],
+	standalone: false
 })
 export class StreamComponent implements OnInit, OnDestroy {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts

@@ -58,7 +58,8 @@ import { ToolbarAdditionalButtonsPosition } from '../../models/toolbar.model';
 	selector: 'ov-toolbar',
 	templateUrl: './toolbar.component.html',
 	styleUrls: ['./toolbar.component.scss'],
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: false
 })
 export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.ts

@@ -54,7 +54,8 @@ import { LangOption } from '../../models/lang.model';
 			transition(':enter', [style({ opacity: 0 }), animate('300ms ease-out', style({ opacity: 1 }))])
 			// transition(':leave', [style({ opacity: 1 }), animate('50ms ease-in', style({ opacity: 0.9 }))])
 		])
-	]
+	],
+	standalone: false
 })
 export class VideoconferenceComponent implements OnDestroy, AfterViewInit {
 	// *** Toolbar ***

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/activities-panel.directive.ts

@@ -17,7 +17,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
  * <ov-activities-panel *ovActivitiesPanel [recordingActivity]="false"></ov-activities-panel>
  */
 @Directive({
-	selector: 'ov-videoconference[activitiesPanelRecordingActivity], ov-activities-panel[recordingActivity]'
+	selector: 'ov-videoconference[activitiesPanelRecordingActivity], ov-activities-panel[recordingActivity]',
+	standalone: false
 })
 export class ActivitiesPanelRecordingActivityDirective implements AfterViewInit, OnDestroy {
 	@Input() set activitiesPanelRecordingActivity(value: boolean) {
@@ -31,7 +32,10 @@ export class ActivitiesPanelRecordingActivityDirective implements AfterViewInit,
 
 	recordingActivityValue: boolean = true;
 
-	constructor(public elementRef: ElementRef, private libService: OpenViduComponentsConfigService) {}
+	constructor(
+		public elementRef: ElementRef,
+		private libService: OpenViduComponentsConfigService
+	) {}
 
 	ngAfterViewInit() {
 		this.update(this.recordingActivityValue);
@@ -67,7 +71,8 @@ export class ActivitiesPanelRecordingActivityDirective implements AfterViewInit,
  * <ov-activities-panel *ovActivitiesPanel [broadcastingActivity]="false"></ov-activities-panel>
  */
 @Directive({
-	selector: 'ov-videoconference[activitiesPanelBroadcastingActivity], ov-activities-panel[broadcastingActivity]'
+	selector: 'ov-videoconference[activitiesPanelBroadcastingActivity], ov-activities-panel[broadcastingActivity]',
+	standalone: false
 })
 export class ActivitiesPanelBroadcastingActivityDirective implements AfterViewInit, OnDestroy {
 	@Input() set activitiesPanelBroadcastingActivity(value: boolean) {
@@ -81,7 +86,10 @@ export class ActivitiesPanelBroadcastingActivityDirective implements AfterViewIn
 
 	broadcastingActivityValue: boolean = true;
 
-	constructor(public elementRef: ElementRef, private libService: OpenViduComponentsConfigService) {}
+	constructor(
+		public elementRef: ElementRef,
+		private libService: OpenViduComponentsConfigService
+	) {}
 
 	ngAfterViewInit() {
 		this.update(this.broadcastingActivityValue);
@@ -100,4 +108,3 @@ export class ActivitiesPanelBroadcastingActivityDirective implements AfterViewIn
 		}
 	}
 }
-

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/admin.directive.ts

@@ -12,7 +12,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
  *
  */
 @Directive({
-	selector: 'ov-admin-dashboard[recordingsList]'
+	selector: 'ov-admin-dashboard[recordingsList]',
+	standalone: false
 })
 export class AdminDashboardRecordingsListDirective implements AfterViewInit, OnDestroy {
 
@@ -53,7 +54,8 @@ export class AdminDashboardRecordingsListDirective implements AfterViewInit, OnD
  *
  */
 @Directive({
-	selector: 'ov-admin-dashboard[navbarTitle]'
+	selector: 'ov-admin-dashboard[navbarTitle]',
+	standalone: false
 })
 export class AdminDashboardTitleDirective implements AfterViewInit, OnDestroy {
 
@@ -95,7 +97,8 @@ export class AdminDashboardTitleDirective implements AfterViewInit, OnDestroy {
  *
  */
 @Directive({
-	selector: 'ov-admin-login[navbarTitle]'
+	selector: 'ov-admin-login[navbarTitle]',
+	standalone: false
 })
 export class AdminLoginTitleDirective implements AfterViewInit, OnDestroy {
 
@@ -138,7 +141,8 @@ export class AdminLoginTitleDirective implements AfterViewInit, OnDestroy {
  *
  */
  @Directive({
-	selector: 'ov-admin-login[error]'
+	selector: 'ov-admin-login[error]',
+	standalone: false
 })
 export class AdminLoginErrorDirective implements AfterViewInit, OnDestroy {
 

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts

@@ -1,7 +1,17 @@
 import { NgModule } from '@angular/core';
 import { ActivitiesPanelBroadcastingActivityDirective, ActivitiesPanelRecordingActivityDirective } from './activities-panel.directive';
-import { AdminLoginErrorDirective, AdminDashboardRecordingsListDirective, AdminLoginTitleDirective, AdminDashboardTitleDirective } from './admin.directive';
+import {
-import { LayoutRemoteParticipantsDirective, FallbackLogoDirective, ToolbarBrandingLogoDirective, PrejoinDisplayParticipantName } from './internals.directive';
+	AdminLoginErrorDirective,
+	AdminDashboardRecordingsListDirective,
+	AdminLoginTitleDirective,
+	AdminDashboardTitleDirective
+} from './admin.directive';
+import {
+	LayoutRemoteParticipantsDirective,
+	FallbackLogoDirective,
+	ToolbarBrandingLogoDirective,
+	PrejoinDisplayParticipantName
+} from './internals.directive';
 import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive';
 import {
 	StreamDisplayAudioDetectionDirective,
@@ -42,97 +52,54 @@ import {
 	VideoEnabledDirective
 } from './videoconference.directive';
 
+const directives = [
+	LivekitUrlDirective,
+	TokenDirective,
+	TokenErrorDirective,
+	MinimalDirective,
+	LangDirective,
+	LangOptionsDirective,
+	// CaptionsLangOptionsDirective,
+	// CaptionsLangDirective,
+	PrejoinDirective,
+	PrejoinDisplayParticipantName,
+	VideoEnabledDirective,
+	AudioEnabledDirective,
+	RecordingStreamBaseUrlDirective,
+	ToolbarCameraButtonDirective,
+	ToolbarMicrophoneButtonDirective,
+	ToolbarScreenshareButtonDirective,
+	ToolbarFullscreenButtonDirective,
+	ToolbarBackgroundEffectsButtonDirective,
+	// ToolbarCaptionsButtonDirective,
+	ToolbarLeaveButtonDirective,
+	ToolbarRecordingButtonDirective,
+	ToolbarBroadcastingButtonDirective,
+	ToolbarParticipantsPanelButtonDirective,
+	ToolbarChatPanelButtonDirective,
+	ToolbarActivitiesPanelButtonDirective,
+	ToolbarDisplayRoomNameDirective,
+	ToolbarDisplayLogoDirective,
+	ToolbarSettingsButtonDirective,
+	ToolbarAdditionalButtonsPossitionDirective,
+	StreamDisplayParticipantNameDirective,
+	StreamDisplayAudioDetectionDirective,
+	StreamVideoControlsDirective,
+	FallbackLogoDirective,
+	ToolbarBrandingLogoDirective,
+	ParticipantPanelItemMuteButtonDirective,
+	ParticipantNameDirective,
+	ActivitiesPanelRecordingActivityDirective,
+	ActivitiesPanelBroadcastingActivityDirective,
+	AdminDashboardRecordingsListDirective,
+	AdminLoginTitleDirective,
+	AdminLoginErrorDirective,
+	AdminDashboardTitleDirective,
+	LayoutRemoteParticipantsDirective
+];
 
 @NgModule({
-	declarations: [
+	declarations: [...directives],
-		LivekitUrlDirective,
+	exports: [...directives]
-		TokenDirective,
-		TokenErrorDirective,
-		MinimalDirective,
-		LangDirective,
-		LangOptionsDirective,
-		// CaptionsLangOptionsDirective,
-		// CaptionsLangDirective,
-		PrejoinDirective,
-		PrejoinDisplayParticipantName,
-		VideoEnabledDirective,
-		AudioEnabledDirective,
-		RecordingStreamBaseUrlDirective,
-		ToolbarCameraButtonDirective,
-		ToolbarMicrophoneButtonDirective,
-		ToolbarScreenshareButtonDirective,
-		ToolbarFullscreenButtonDirective,
-		ToolbarBackgroundEffectsButtonDirective,
-		// ToolbarCaptionsButtonDirective,
-		ToolbarLeaveButtonDirective,
-		ToolbarRecordingButtonDirective,
-		ToolbarBroadcastingButtonDirective,
-		ToolbarParticipantsPanelButtonDirective,
-		ToolbarChatPanelButtonDirective,
-		ToolbarActivitiesPanelButtonDirective,
-		ToolbarDisplayRoomNameDirective,
-		ToolbarDisplayLogoDirective,
-		ToolbarSettingsButtonDirective,
-		ToolbarAdditionalButtonsPossitionDirective,
-		StreamDisplayParticipantNameDirective,
-		StreamDisplayAudioDetectionDirective,
-		StreamVideoControlsDirective,
-		FallbackLogoDirective,
-		ToolbarBrandingLogoDirective,
-		ParticipantPanelItemMuteButtonDirective,
-		ParticipantNameDirective,
-		ActivitiesPanelRecordingActivityDirective,
-		ActivitiesPanelBroadcastingActivityDirective,
-		AdminDashboardRecordingsListDirective,
-		AdminLoginTitleDirective,
-		AdminLoginErrorDirective,
-		AdminDashboardTitleDirective,
-		LayoutRemoteParticipantsDirective
-	],
-	exports: [
-		LivekitUrlDirective,
-		TokenDirective,
-		TokenErrorDirective,
-		MinimalDirective,
-		LangDirective,
-		LangOptionsDirective,
-		// CaptionsLangOptionsDirective,
-		// CaptionsLangDirective,
-		PrejoinDirective,
-		PrejoinDisplayParticipantName,
-		VideoEnabledDirective,
-		AudioEnabledDirective,
-		RecordingStreamBaseUrlDirective,
-		ToolbarCameraButtonDirective,
-		ToolbarMicrophoneButtonDirective,
-		ToolbarScreenshareButtonDirective,
-		ToolbarFullscreenButtonDirective,
-		ToolbarBackgroundEffectsButtonDirective,
-		// ToolbarCaptionsButtonDirective,
-		ToolbarLeaveButtonDirective,
-		ToolbarRecordingButtonDirective,
-		ToolbarBroadcastingButtonDirective,
-		ToolbarParticipantsPanelButtonDirective,
-		ToolbarChatPanelButtonDirective,
-		ToolbarActivitiesPanelButtonDirective,
-		ToolbarDisplayRoomNameDirective,
-		ToolbarDisplayLogoDirective,
-		ToolbarSettingsButtonDirective,
-		ToolbarAdditionalButtonsPossitionDirective,
-		StreamDisplayParticipantNameDirective,
-		StreamDisplayAudioDetectionDirective,
-		StreamVideoControlsDirective,
-		FallbackLogoDirective,
-		ToolbarBrandingLogoDirective,
-		ParticipantPanelItemMuteButtonDirective,
-		ParticipantNameDirective,
-		ActivitiesPanelRecordingActivityDirective,
-		ActivitiesPanelBroadcastingActivityDirective,
-		AdminDashboardRecordingsListDirective,
-		AdminLoginTitleDirective,
-		AdminLoginErrorDirective,
-		AdminDashboardTitleDirective,
-		LayoutRemoteParticipantsDirective
-	]
 })
 export class ApiDirectiveModule {}

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts

@@ -9,7 +9,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
  * @internal
  */
 @Directive({
-	selector: 'img[ovLogo]'
+	selector: 'img[ovLogo]',
+	standalone: false
 })
 export class FallbackLogoDirective implements OnInit {
 	defaultLogo =
@@ -53,7 +54,8 @@ export class FallbackLogoDirective implements OnInit {
  * @internal
  */
 @Directive({
-	selector: 'ov-layout[ovRemoteParticipants]'
+	selector: 'ov-layout[ovRemoteParticipants]',
+	standalone: false
 })
 export class LayoutRemoteParticipantsDirective {
 	@Input() set ovRemoteParticipants(value: ParticipantModel[] | undefined) {
@@ -85,7 +87,8 @@ export class LayoutRemoteParticipantsDirective {
  * @internal
  */
 @Directive({
-	selector: 'ov-videoconference[brandingLogo], ov-toolbar[brandingLogo]'
+	selector: 'ov-videoconference[brandingLogo], ov-toolbar[brandingLogo]',
+	standalone: false
 })
 export class ToolbarBrandingLogoDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -127,7 +130,8 @@ export class ToolbarBrandingLogoDirective implements AfterViewInit, OnDestroy {
  * @internal
  */
 @Directive({
-	selector: 'ov-videoconference[prejoinDisplayParticipantName]'
+	selector: 'ov-videoconference[prejoinDisplayParticipantName]',
+	standalone: false
 })
 export class PrejoinDisplayParticipantName implements OnDestroy {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/participant-panel-item.directive.ts

@@ -17,7 +17,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
  * <ov-participant-panel-item [muteButton]="false"></ov-participant-panel-item>
  */
 @Directive({
-	selector: 'ov-videoconference[participantPanelItemMuteButton], ov-participant-panel-item[muteButton]'
+	selector: 'ov-videoconference[participantPanelItemMuteButton], ov-participant-panel-item[muteButton]',
+	standalone: false
 })
 export class ParticipantPanelItemMuteButtonDirective implements AfterViewInit, OnDestroy {
 	@Input() set participantPanelItemMuteButton(value: boolean) {

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/stream.directive.ts

@@ -17,7 +17,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
  * <ov-stream [displayParticipantName]="false"></ov-stream>
  */
 @Directive({
-	selector: 'ov-videoconference[streamDisplayParticipantName], ov-stream[displayParticipantName]'
+	selector: 'ov-videoconference[streamDisplayParticipantName], ov-stream[displayParticipantName]',
+	standalone: false
 })
 export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnDestroy {
 	@Input() set streamDisplayParticipantName(value: boolean) {
@@ -71,7 +72,8 @@ export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnD
  * <ov-stream [displayAudioDetection]="false"></ov-stream>
  */
 @Directive({
-	selector: 'ov-videoconference[streamDisplayAudioDetection], ov-stream[displayAudioDetection]'
+	selector: 'ov-videoconference[streamDisplayAudioDetection], ov-stream[displayAudioDetection]',
+	standalone: false
 })
 export class StreamDisplayAudioDetectionDirective implements AfterViewInit, OnDestroy {
 	@Input() set streamDisplayAudioDetection(value: boolean) {
@@ -123,7 +125,8 @@ export class StreamDisplayAudioDetectionDirective implements AfterViewInit, OnDe
  * <ov-stream [videoControls]="false"></ov-stream>
  */
 @Directive({
-	selector: 'ov-videoconference[streamVideoControls], ov-stream[videoControls]'
+	selector: 'ov-videoconference[streamVideoControls], ov-stream[videoControls]',
+	standalone: false
 })
 export class StreamVideoControlsDirective implements AfterViewInit, OnDestroy {
 	@Input() set streamVideoControls(value: boolean) {

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/toolbar.directive.ts

@@ -18,7 +18,8 @@ import { ToolbarAdditionalButtonsPosition } from '../../models/toolbar.model';
  * <ov-toolbar [cameraButton]="false"></ov-toolbar>
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarCameraButton], ov-toolbar[cameraButton]'
+	selector: 'ov-videoconference[toolbarCameraButton], ov-toolbar[cameraButton]',
+	standalone: false
 })
 export class ToolbarCameraButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -83,7 +84,8 @@ export class ToolbarCameraButtonDirective implements AfterViewInit, OnDestroy {
  * <ov-toolbar [microphoneButton]="false"></ov-toolbar>
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarMicrophoneButton], ov-toolbar[microphoneButton]'
+	selector: 'ov-videoconference[toolbarMicrophoneButton], ov-toolbar[microphoneButton]',
+	standalone: false
 })
 export class ToolbarMicrophoneButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -132,7 +134,6 @@ export class ToolbarMicrophoneButtonDirective implements AfterViewInit, OnDestro
 	}
 }
 
-
 /**
  * The **screenshareButton** directive allows show/hide the screenshare toolbar button.
  *
@@ -149,7 +150,8 @@ export class ToolbarMicrophoneButtonDirective implements AfterViewInit, OnDestro
  * <ov-toolbar [screenshareButton]="false"></ov-toolbar>
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarScreenshareButton], ov-toolbar[screenshareButton]'
+	selector: 'ov-videoconference[toolbarScreenshareButton], ov-toolbar[screenshareButton]',
+	standalone: false
 })
 export class ToolbarScreenshareButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -214,7 +216,8 @@ export class ToolbarScreenshareButtonDirective implements AfterViewInit, OnDestr
  * <ov-toolbar [recordingButton]="false"></ov-toolbar>
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarRecordingButton], ov-toolbar[recordingButton]'
+	selector: 'ov-videoconference[toolbarRecordingButton], ov-toolbar[recordingButton]',
+	standalone: false
 })
 export class ToolbarRecordingButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -277,7 +280,8 @@ export class ToolbarRecordingButtonDirective implements AfterViewInit, OnDestroy
  *
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarBroadcastingButton], ov-toolbar[broadcastingButton]'
+	selector: 'ov-videoconference[toolbarBroadcastingButton], ov-toolbar[broadcastingButton]',
+	standalone: false
 })
 export class ToolbarBroadcastingButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -339,7 +343,8 @@ export class ToolbarBroadcastingButtonDirective implements AfterViewInit, OnDest
  * <ov-toolbar [fullscreenButton]="false"></ov-toolbar>
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarFullscreenButton], ov-toolbar[fullscreenButton]'
+	selector: 'ov-videoconference[toolbarFullscreenButton], ov-toolbar[fullscreenButton]',
+	standalone: false
 })
 export class ToolbarFullscreenButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -401,7 +406,8 @@ export class ToolbarFullscreenButtonDirective implements AfterViewInit, OnDestro
  * <ov-toolbar [backgroundEffectsButton]="false"></ov-toolbar>
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarBackgroundEffectsButton], ov-toolbar[backgroundEffectsButton]'
+	selector: 'ov-videoconference[toolbarBackgroundEffectsButton], ov-toolbar[backgroundEffectsButton]',
+	standalone: false
 })
 export class ToolbarBackgroundEffectsButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -522,7 +528,8 @@ export class ToolbarBackgroundEffectsButtonDirective implements AfterViewInit, O
  * <ov-toolbar [settingsButton]="false"></ov-toolbar>
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarSettingsButton], ov-toolbar[settingsButton]'
+	selector: 'ov-videoconference[toolbarSettingsButton], ov-toolbar[settingsButton]',
+	standalone: false
 })
 export class ToolbarSettingsButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -584,7 +591,8 @@ export class ToolbarSettingsButtonDirective implements AfterViewInit, OnDestroy
  * <ov-toolbar [leaveButton]="false"></ov-toolbar>
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarLeaveButton], ov-toolbar[leaveButton]'
+	selector: 'ov-videoconference[toolbarLeaveButton], ov-toolbar[leaveButton]',
+	standalone: false
 })
 export class ToolbarLeaveButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -647,7 +655,8 @@ export class ToolbarLeaveButtonDirective implements AfterViewInit, OnDestroy {
  * <ov-toolbar [participantsPanelButton]="false"></ov-toolbar>
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarParticipantsPanelButton], ov-toolbar[participantsPanelButton]'
+	selector: 'ov-videoconference[toolbarParticipantsPanelButton], ov-toolbar[participantsPanelButton]',
+	standalone: false
 })
 export class ToolbarParticipantsPanelButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -711,7 +720,8 @@ export class ToolbarParticipantsPanelButtonDirective implements AfterViewInit, O
  * <ov-toolbar [chatPanelButton]="false"></ov-toolbar>
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarChatPanelButton], ov-toolbar[chatPanelButton]'
+	selector: 'ov-videoconference[toolbarChatPanelButton], ov-toolbar[chatPanelButton]',
+	standalone: false
 })
 export class ToolbarChatPanelButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -773,7 +783,8 @@ export class ToolbarChatPanelButtonDirective implements AfterViewInit, OnDestroy
  * <ov-toolbar [activitiesPanelButton]="false"></ov-toolbar>
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarActivitiesPanelButton], ov-toolbar[activitiesPanelButton]'
+	selector: 'ov-videoconference[toolbarActivitiesPanelButton], ov-toolbar[activitiesPanelButton]',
+	standalone: false
 })
 export class ToolbarActivitiesPanelButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -835,7 +846,8 @@ export class ToolbarActivitiesPanelButtonDirective implements AfterViewInit, OnD
  * <ov-toolbar [displayRoomName]="false"></ov-toolbar>
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarDisplayRoomName], ov-toolbar[displayRoomName]'
+	selector: 'ov-videoconference[toolbarDisplayRoomName], ov-toolbar[displayRoomName]',
+	standalone: false
 })
 export class ToolbarDisplayRoomNameDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -898,7 +910,8 @@ export class ToolbarDisplayRoomNameDirective implements AfterViewInit, OnDestroy
  * <ov-toolbar [displayLogo]="false"></ov-toolbar>
  */
 @Directive({
-	selector: 'ov-videoconference[toolbarDisplayLogo], ov-toolbar[displayLogo]'
+	selector: 'ov-videoconference[toolbarDisplayLogo], ov-toolbar[displayLogo]',
+	standalone: false
 })
 export class ToolbarDisplayLogoDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -958,7 +971,8 @@ export class ToolbarDisplayLogoDirective implements AfterViewInit, OnDestroy {
  *
  */
 @Directive({
-	selector: '[ovToolbarAdditionalButtonsPosition]'
+	selector: '[ovToolbarAdditionalButtonsPosition]',
+	standalone: false
 })
 export class ToolbarAdditionalButtonsPossitionDirective implements AfterViewInit, OnDestroy {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/videoconference.directive.ts

@@ -18,7 +18,8 @@ import { StorageService } from '../../services/storage/storage.service';
  * <ov-videoconference [livekitUrl]="http://localhost:1234"></ov-videoconference>
  */
 @Directive({
-	selector: 'ov-videoconference[livekitUrl]'
+	selector: 'ov-videoconference[livekitUrl]',
+	standalone: false
 })
 export class LivekitUrlDirective implements OnDestroy {
 	/**
@@ -70,7 +71,8 @@ export class LivekitUrlDirective implements OnDestroy {
  * <ov-videoconference [token]="token"></ov-videoconference>
  */
 @Directive({
-	selector: 'ov-videoconference[token]'
+	selector: 'ov-videoconference[token]',
+	standalone: false
 })
 export class TokenDirective implements OnDestroy {
 	/**
@@ -121,7 +123,8 @@ export class TokenDirective implements OnDestroy {
  * <ov-videoconference [tokenError]="error"></ov-videoconference>
  */
 @Directive({
-	selector: 'ov-videoconference[tokenError]'
+	selector: 'ov-videoconference[tokenError]',
+	standalone: false
 })
 export class TokenErrorDirective implements OnDestroy {
 	/**
@@ -172,7 +175,8 @@ export class TokenErrorDirective implements OnDestroy {
  * <ov-videoconference [minimal]="true"></ov-videoconference>
  */
 @Directive({
-	selector: 'ov-videoconference[minimal]'
+	selector: 'ov-videoconference[minimal]',
+	standalone: false
 })
 export class MinimalDirective implements OnDestroy {
 	/**
@@ -238,7 +242,8 @@ export class MinimalDirective implements OnDestroy {
  * <ov-videoconference [lang]="'es'"></ov-videoconference>
  */
 @Directive({
-	selector: 'ov-videoconference[lang]'
+	selector: 'ov-videoconference[lang]',
+	standalone: false
 })
 export class LangDirective implements OnDestroy {
 	/**
@@ -307,7 +312,8 @@ export class LangDirective implements OnDestroy {
  * <ov-videoconference [langOptions]="[{name:'Spanish', lang: 'es'}]"></ov-videoconference>
  */
 @Directive({
-	selector: 'ov-videoconference[langOptions]'
+	selector: 'ov-videoconference[langOptions]',
+	standalone: false
 })
 export class LangOptionsDirective implements OnDestroy {
 	/**
@@ -488,7 +494,8 @@ export class LangOptionsDirective implements OnDestroy {
  * <ov-videoconference [participantName]="'OpenVidu'"></ov-videoconference>
  */
 @Directive({
-	selector: 'ov-videoconference[participantName]'
+	selector: 'ov-videoconference[participantName]',
+	standalone: false
 })
 export class ParticipantNameDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -546,7 +553,8 @@ export class ParticipantNameDirective implements AfterViewInit, OnDestroy {
  * <ov-videoconference [prejoin]="false"></ov-videoconference>
  */
 @Directive({
-	selector: 'ov-videoconference[prejoin]'
+	selector: 'ov-videoconference[prejoin]',
+	standalone: false
 })
 export class PrejoinDirective implements OnDestroy {
 	/**
@@ -600,7 +608,8 @@ export class PrejoinDirective implements OnDestroy {
  * <ov-videoconference [videoEnabled]="false"></ov-videoconference>
  */
 @Directive({
-	selector: 'ov-videoconference[videoEnabled]'
+	selector: 'ov-videoconference[videoEnabled]',
+	standalone: false
 })
 export class VideoEnabledDirective implements OnDestroy {
 	/**
@@ -671,7 +680,8 @@ export class VideoEnabledDirective implements OnDestroy {
  */
 
 @Directive({
-	selector: 'ov-videoconference[audioEnabled]'
+	selector: 'ov-videoconference[audioEnabled]',
+	standalone: false
 })
 export class AudioEnabledDirective implements OnDestroy {
 	/**
@@ -745,7 +755,8 @@ export class AudioEnabledDirective implements OnDestroy {
  * </ov-videoconference>
  */
 @Directive({
-	selector: 'ov-videoconference[recordingStreamBaseUrl]'
+	selector: 'ov-videoconference[recordingStreamBaseUrl]',
+	standalone: false
 })
 export class RecordingStreamBaseUrlDirective implements AfterViewInit, OnDestroy {
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.ts

@@ -119,7 +119,8 @@ import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
  * You can run the associated tutorial [here](https://openvidu.io/latest/docs/tutorials/angular-components/openvidu-custom-toolbar/).
  */
 @Directive({
-	selector: '[ovToolbar]'
+	selector: '[ovToolbar]',
+	standalone: false
 })
 export class ToolbarDirective {
 	/**
@@ -258,7 +259,8 @@ export class ToolbarDirective {
  */
 
 @Directive({
-	selector: '[ovToolbarAdditionalButtons]'
+	selector: '[ovToolbarAdditionalButtons]',
+	standalone: false
 })
 export class ToolbarAdditionalButtonsDirective {
 	/**
@@ -380,7 +382,8 @@ export class ToolbarAdditionalButtonsDirective {
  * You can run the associated tutorial [here](https://openvidu.io/latest/docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/).
  */
 @Directive({
-	selector: '[ovToolbarAdditionalPanelButtons]'
+	selector: '[ovToolbarAdditionalPanelButtons]',
+	standalone: false
 })
 export class ToolbarAdditionalPanelButtonsDirective {
 	/**
@@ -529,7 +532,8 @@ export class ToolbarAdditionalPanelButtonsDirective {
  * For a comprehensive tutorial on implementing custom panels, please refer to the associated guide [here](https://openvidu.io/latest/docs/tutorials/angular-components/openvidu-custom-panels/).
  */
 @Directive({
-	selector: '[ovPanel]'
+	selector: '[ovPanel]',
+	standalone: false
 })
 export class PanelDirective {
 	/**
@@ -715,7 +719,8 @@ export class PanelDirective {
  * For detailed instructions, refer to the tutorial available [here](https://openvidu.io/latest/docs/tutorials/angular-components/openvidu-additional-panels/).
  */
 @Directive({
-	selector: '[ovAdditionalPanels]'
+	selector: '[ovAdditionalPanels]',
+	standalone: false
 })
 export class AdditionalPanelsDirective {
 	/**
@@ -892,7 +897,8 @@ export class AdditionalPanelsDirective {
  * check out our comprehensive guide: [Customizing the Chat Panel](https://openvidu.io/latest/docs/tutorials/angular-components/openvidu-custom-chat-panel/).
  */
 @Directive({
-	selector: '[ovChatPanel]'
+	selector: '[ovChatPanel]',
+	standalone: false
 })
 export class ChatPanelDirective {
 	constructor(
@@ -906,7 +912,8 @@ export class ChatPanelDirective {
  * @internal
  */
 @Directive({
-	selector: '[ovBackgroundEffectsPanel]'
+	selector: '[ovBackgroundEffectsPanel]',
+	standalone: false
 })
 export class BackgroundEffectsPanelDirective {
 	constructor(
@@ -1018,7 +1025,8 @@ export class BackgroundEffectsPanelDirective {
  * check out our comprehensive guide: [Customizing the Activities Panel](https://openvidu.io/latest/docs/tutorials/angular-components/openvidu-custom-activities-panel/).
  */
 @Directive({
-	selector: '[ovActivitiesPanel]'
+	selector: '[ovActivitiesPanel]',
+	standalone: false
 })
 export class ActivitiesPanelDirective {
 	constructor(
@@ -1188,7 +1196,8 @@ export class ActivitiesPanelDirective {
  */
 
 @Directive({
-	selector: '[ovParticipantsPanel]'
+	selector: '[ovParticipantsPanel]',
+	standalone: false
 })
 export class ParticipantsPanelDirective {
 	constructor(
@@ -1325,7 +1334,8 @@ export class ParticipantsPanelDirective {
  */
 
 @Directive({
-	selector: '[ovParticipantPanelItem]'
+	selector: '[ovParticipantPanelItem]',
+	standalone: false
 })
 export class ParticipantPanelItemDirective {
 	constructor(
@@ -1467,7 +1477,8 @@ export class ParticipantPanelItemDirective {
  */
 
 @Directive({
-	selector: '[ovParticipantPanelItemElements]'
+	selector: '[ovParticipantPanelItemElements]',
+	standalone: false
 })
 export class ParticipantPanelItemElementsDirective {
 	constructor(
@@ -1662,7 +1673,8 @@ export class ParticipantPanelItemElementsDirective {
  * For a comprehensive guide on implementing custom layouts, please refer to the associated tutorial [here](https://openvidu.io/latest/docs/tutorials/angular-components/openvidu-custom-layout/).
  */
 @Directive({
-	selector: '[ovLayout]'
+	selector: '[ovLayout]',
+	standalone: false
 })
 export class LayoutDirective {
 	constructor(
@@ -1793,7 +1805,8 @@ export class LayoutDirective {
  */
 
 @Directive({
-	selector: '[ovStream]'
+	selector: '[ovStream]',
+	standalone: false
 })
 export class StreamDirective {
 	constructor(

openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular-ui.module.ts

@@ -46,7 +46,6 @@ import { ApiDirectiveModule } from './directives/api/api.directive.module';
 import { OpenViduComponentsDirectiveModule } from './directives/template/openvidu-components-angular.directive.module';
 import { AppMaterialModule } from './openvidu-components-angular.material.module';
 
-// Declaraciones de componentes/pipes (públicos y privados)
 const publicComponents = [
   AdminDashboardComponent,
   AdminLoginComponent,

openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/linkify.pipe.ts

@@ -4,7 +4,7 @@ import { Linkifier } from '../models/linkifier.model';
 /**
  * @internal
  */
-@Pipe({ name: 'linkify' })
+@Pipe({ name: 'linkify', standalone: false })
 export class LinkifyPipe implements PipeTransform {
 	private linkifer: Linkifier;
 

openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/participant.pipe.ts

@@ -8,7 +8,7 @@ import { Track } from 'livekit-client';
  * This is used to display the tracks in the videoconference layout.
  * @returns {ParticipantTrackPublication[]} Array of tracks
  */
-@Pipe({ name: 'tracks' })
+@Pipe({ name: 'tracks', standalone: false })
 export class RemoteParticipantTracksPipe implements PipeTransform {
 	constructor() {}
 
@@ -20,7 +20,7 @@ export class RemoteParticipantTracksPipe implements PipeTransform {
 /**
  * @internal
  */
-@Pipe({ name: 'tracksPublishedTypes' })
+@Pipe({ name: 'tracksPublishedTypes', standalone: false })
 export class TrackPublishedTypesPipe implements PipeTransform {
 	constructor(private translateService: TranslateService) {}
 

openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/recording.pipe.ts

@@ -4,7 +4,8 @@ import { Pipe, PipeTransform } from '@angular/core';
  * @internal
  */
 @Pipe({
-	name: 'duration'
+	name: 'duration',
+	standalone: false
 })
 export class DurationFromSecondsPipe implements PipeTransform {
 	transform(durationInSeconds: number): string {
@@ -26,7 +27,8 @@ export class DurationFromSecondsPipe implements PipeTransform {
  * @internal
  */
 @Pipe({
-	name: 'searchByStringProperty'
+	name: 'searchByStringProperty',
+	standalone: false
 })
 export class SearchByStringPropertyPipe implements PipeTransform {
 	transform(items: any[], props: { properties: string[]; filter: string }): any {
@@ -57,7 +59,8 @@ export class SearchByStringPropertyPipe implements PipeTransform {
  * @internal
  */
 @Pipe({
-	name: 'thumbnailUrl'
+	name: 'thumbnailUrl',
+	standalone: false
 })
 export class ThumbnailFromUrlPipe implements PipeTransform {
 	transform(url: string): string {

openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/translate.pipe.ts

@@ -4,7 +4,10 @@ import { TranslateService } from '../services/translate/translate.service';
 /**
  * @internal
  */
-@Pipe({ name: 'translate', pure: false })
+@Pipe({
+    name: 'translate', pure: false,
+    standalone: false
+})
 export class TranslatePipe implements PipeTransform {
 	constructor(private translateService: TranslateService) {}
 

openvidu-components-angular/src/app/admin/admin-dashboard/admin-dashboard.component.ts

@@ -5,7 +5,8 @@ import { RestService } from 'src/app/services/rest.service';
 @Component({
     selector: 'app-admin-dashboard',
     templateUrl: './admin-dashboard.component.html',
-	styleUrls: ['./admin-dashboard.component.scss']
+    styleUrls: ['./admin-dashboard.component.scss'],
+    standalone: false
 })
 export class AdminDashboardComponent implements OnInit {
 	recordings: RecordingInfo[] = [];

openvidu-components-angular/src/app/app.component.ts

@@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
-	styleUrls: ['./app.component.scss']
+    styleUrls: ['./app.component.scss'],
+    standalone: false
 })
 export class AppComponent implements OnInit {
 	title = 'openvidu-components-angular';

openvidu-components-angular/src/app/dashboard/dashboard.component.ts

@@ -4,7 +4,8 @@ import { Router } from '@angular/router';
 @Component({
     selector: 'app-dashboard',
     templateUrl: './dashboard.component.html',
-	styleUrls: ['./dashboard.component.scss']
+    styleUrls: ['./dashboard.component.scss'],
+    standalone: false
 })
 export class DashboardComponent implements OnInit {
 	title = 'openvidu-components-angular';

openvidu-components-angular/src/app/openvidu-call/call.component.ts

@@ -17,7 +17,8 @@ import { ParticipantLeftEvent } from '../../../projects/openvidu-components-angu
 @Component({
     selector: 'app-call',
     templateUrl: './call.component.html',
-	styleUrls: ['./call.component.scss']
+    styleUrls: ['./call.component.scss'],
+    standalone: false
 })
 export class CallComponent implements OnInit {
 	roomName = 'daily-call';

openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss

@@ -1,13 +1,15 @@
 @use '@angular/material' as mat;
 
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
 // Define the theme
 $openvidu-theme: mat.define-theme();
 
 html {
 	// Emit theme-dependent styles for common features used across multiple components.
-	@include mat.core-theme($openvidu-theme);
+	@include mat.elevation-classes();
+	@include mat.app-background();
 	// @include mat.button-theme($theme);
 	@include mat.all-component-bases($openvidu-theme);
 	@include mat.all-component-colors($openvidu-theme);

openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts

@@ -28,7 +28,8 @@ import { LangOption } from '../../../projects/openvidu-components-angular/src/li
  *
  */
 @Component({
-	templateUrl: './openvidu-webcomponent.component.html'
+    templateUrl: './openvidu-webcomponent.component.html',
+    standalone: false
 })
 export class OpenviduWebComponentComponent {
 	/**

openvidu-components-angular/src/app/testing-app/testing.component.ts

@@ -50,7 +50,8 @@ export enum AttributeDirective {
 @Component({
     selector: 'app-testing',
     templateUrl: './testing.component.html',
-	styleUrls: ['./testing.component.scss']
+    styleUrls: ['./testing.component.scss'],
+    standalone: false
 })
 export class TestingComponent implements AfterViewInit {
 	roomName: string;

openvidu-components-angular/src/styles.scss

@@ -1,13 +1,15 @@
 @use '@angular/material' as mat;
 
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
 // Define the theme
 $openvidu-theme: mat.define-theme();
 
 html {
 	// Emit theme-dependent styles for common features used across multiple components.
-	@include mat.core-theme($openvidu-theme);
+	@include mat.elevation-classes();
+	@include mat.app-background();
 	// @include mat.button-theme($theme);
 	@include mat.all-component-bases($openvidu-theme);
 	@include mat.all-component-colors($openvidu-theme);