From d96edcfec634d1b3067bf1393c30e445b48ea001 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Wed, 6 Jul 2022 13:47:13 +0200
Subject: [PATCH] openvidu-components: Deleted samples

---
 .../src/app/app.routing.module.ts             |  28 --
 .../additionalPanels-directive.component.ts   |  72 -----
 .../chatPanel-directive.component.ts          |  70 -----
 .../examples-dashboard.component.html         |  54 ----
 .../examples-dashboard.component.scss         | 291 ------------------
 .../examples-dashboard.component.ts           |  19 --
 .../layout-directive.component.ts             |  75 -----
 .../panel-directive.component.ts              |  44 ---
 ...articipantPanelItem-directive.component.ts |  35 ---
 ...ntPanelItemElements-directive.component.ts |  34 --
 .../participantsPanel-directive.component.ts  |  77 -----
 .../stream-directive.component.ts             |  40 ---
 .../toolbar-directive.component.ts            |  43 ---
 ...arAdditionalButtons-directive.component.ts |  43 ---
 ...itionalPanelButtons-directive.component.ts |  29 --
 15 files changed, 954 deletions(-)
 delete mode 100644 openvidu-components-angular/src/app/examples/additionalPanels-directive/additionalPanels-directive.component.ts
 delete mode 100644 openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.ts
 delete mode 100644 openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.html
 delete mode 100644 openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.scss
 delete mode 100644 openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.ts
 delete mode 100644 openvidu-components-angular/src/app/examples/layout-directive/layout-directive.component.ts
 delete mode 100644 openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts
 delete mode 100644 openvidu-components-angular/src/app/examples/participantPanelItem-directive/participantPanelItem-directive.component.ts
 delete mode 100644 openvidu-components-angular/src/app/examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component.ts
 delete mode 100644 openvidu-components-angular/src/app/examples/participantsPanel-directive/participantsPanel-directive.component.ts
 delete mode 100644 openvidu-components-angular/src/app/examples/stream-directive/stream-directive.component.ts
 delete mode 100644 openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.ts
 delete mode 100644 openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts
 delete mode 100644 openvidu-components-angular/src/app/examples/toolbarAdditionalPanelButtons-directive/toolbarAdditionalPanelButtons-directive.component.ts

diff --git a/openvidu-components-angular/src/app/app.routing.module.ts b/openvidu-components-angular/src/app/app.routing.module.ts
index 78f71719..7b9d69ba 100644
--- a/openvidu-components-angular/src/app/app.routing.module.ts
+++ b/openvidu-components-angular/src/app/app.routing.module.ts
@@ -3,19 +3,6 @@ import { Routes, RouterModule } from '@angular/router';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { CallComponent } from './openvidu-call/call.component';
 import { TestingComponent } from './testing-app/testing.component';
-import { ExamplesDashboardComponent } from './examples/examples-dashboard/examples-dashboard.component';
-import { ToolbarDirectiveComponent } from './examples/toolbar-directive/toolbar-directive.component';
-import { ToolbarAdditionalButtonsDirectiveComponent } from './examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component';
-import { LayoutDirectiveComponent } from './examples/layout-directive/layout-directive.component';
-import { StreamDirectiveComponent } from './examples/stream-directive/stream-directive.component';
-import { PanelDirectiveComponent } from './examples/panel-directive/panel-directive.component';
-import { ParticipantsPanelDirectiveComponent } from './examples/participantsPanel-directive/participantsPanel-directive.component';
-import { ChatPanelDirectiveComponent } from './examples/chatPanel-directive/chatPanel-directive.component';
-
-import { ParticipantPanelItemElementsDirectiveComponent } from './examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component';
-import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component';
-import { ToolbarAdditionalPanelButtonsDirectiveComponent } from './examples/toolbarAdditionalPanelButtons-directive/toolbarAdditionalPanelButtons-directive.component';
-import { AdditionalPanelsDirectiveComponent } from './examples/additionalPanels-directive/additionalPanels-directive.component';
 import { AdminDashboardComponent } from './admin/admin-dashboard/admin-dashboard.component';
 
 const routes: Routes = [
@@ -23,21 +10,6 @@ const routes: Routes = [
 	{ path: 'call', component: CallComponent },
 	{ path: 'testing', component: TestingComponent },
 	{ path: 'admin', component: AdminDashboardComponent },
-
-	{ path: 'examples', component: ExamplesDashboardComponent},
-	{ path: 'examples/toolbarDirective', component: ToolbarDirectiveComponent },
-	{ path: 'examples/toolbarAdditionalButtonsDirective', component: ToolbarAdditionalButtonsDirectiveComponent },
-	{ path: 'examples/toolbarAdditionalPanelButtonsDirective', component: ToolbarAdditionalPanelButtonsDirectiveComponent },
-
-	{ path: 'examples/layoutDirective', component: LayoutDirectiveComponent },
-	{ path: 'examples/streamDirective', component: StreamDirectiveComponent },
-
-	{ path: 'examples/panelDirective', component: PanelDirectiveComponent },
-	{ path: 'examples/additionalPanelsDirective', component: AdditionalPanelsDirectiveComponent },
-	{ path: 'examples/participantsPanelDirective', component: ParticipantsPanelDirectiveComponent },
-	{ path: 'examples/chatPanelDirective', component: ChatPanelDirectiveComponent },
-	{ path: 'examples/participantPanelItemDirective', component: ParticipantPanelItemDirectiveComponent },
-	{ path: 'examples/participantPanelItemElementsDirective', component: ParticipantPanelItemElementsDirectiveComponent },
 ];
 @NgModule({
 	imports: [RouterModule.forRoot(routes, { useHash: true })],
diff --git a/openvidu-components-angular/src/app/examples/additionalPanels-directive/additionalPanels-directive.component.ts b/openvidu-components-angular/src/app/examples/additionalPanels-directive/additionalPanels-directive.component.ts
deleted file mode 100644
index cf1302b7..00000000
--- a/openvidu-components-angular/src/app/examples/additionalPanels-directive/additionalPanels-directive.component.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { PanelService, TokenModel, PanelType } from 'openvidu-angular';
-import { RestService } from 'src/app/services/rest.service';
-
-@Component({
-	selector: 'app-chatPanel-directive',
-	template: `
-		<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
-			<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
-				<button (click)="toggleMyPanel('my-panel')">MY PANEL</button>
-				<button (click)="toggleMyPanel('my-panel2')">OTHER PANEL</button>
-			</div>
-			<div *ovAdditionalPanels id="my-panels">
-				<div id="my-panel1" *ngIf="showExternalPanel">
-					<h2>NEW PANEL</h2>
-					<p>This is my new additional panel</p>
-				</div>
-				<div id="my-panel2" *ngIf="showExternalPanel2">
-					<h2>NEW PANEL 2</h2>
-					<p>This is other new panel</p>
-				</div>
-			</div>
-		</ov-videoconference>
-	`,
-	styles: [
-		`
-			#my-panels {
-				height: 100%;
-				overflow: hidden;
-			}
-			#my-panel1, #my-panel2 {
-				text-align: center;
-				height: calc(100% - 40px);
-				margin: 20px;
-			}
-			#my-panel1 {
-				background: #c9ffb2;
-			}
-			#my-panel2 {
-				background: #ddf2ff;
-			}
-		`
-	]
-})
-export class AdditionalPanelsDirectiveComponent implements OnInit {
-	tokens: TokenModel;
-	sessionId = 'chat-panel-directive-example';
-	OPENVIDU_URL = 'https://localhost:4443';
-	OPENVIDU_SECRET = 'MY_SECRET';
-	showExternalPanel: boolean = false;
-	showExternalPanel2: boolean = false;
-	constructor(private restService: RestService, private panelService: PanelService) {}
-
-	ngOnInit() {
-		this.subscribeToPanelToggling();
-	}
-	subscribeToPanelToggling() {
-		this.panelService.panelOpenedObs.subscribe((ev: { opened: boolean; type?: PanelType | string }) => {
-			this.showExternalPanel = ev.opened && ev.type === 'my-panel';
-			this.showExternalPanel2 = ev.opened && ev.type === 'my-panel2';
-		});
-	}
-	async onJoinButtonClicked() {
-		this.tokens = {
-			webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
-			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
-		};
-	}
-	toggleMyPanel(type: string) {
-		this.panelService.togglePanel(type);
-	}
-}
diff --git a/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.ts b/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.ts
deleted file mode 100644
index afbab86e..00000000
--- a/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Component } from '@angular/core';
-import { TokenModel, Signal } from 'openvidu-angular';
-import { Session, SignalOptions } from 'openvidu-browser';
-import { RestService } from 'src/app/services/rest.service';
-
-@Component({
-	selector: 'app-chatPanel-directive',
-	template: `
-		<ov-videoconference
-			(onJoinButtonClicked)="onJoinButtonClicked()"
-			(onSessionCreated)="onSessionCreated($event)"
-			[tokens]="tokens"
-			[toolbarDisplaySessionName]="false"
-		>
-			<div *ovChatPanel id="my-panel">
-				<h3>Chat</h3>
-				<div>
-					<ul>
-						<li *ngFor="let msg of messages">{{ msg }}</li>
-					</ul>
-				</div>
-				<input value="Hello" #input />
-				<button (click)="send(input.value)">Send</button>
-			</div>
-		</ov-videoconference>
-	`,
-	styles: [
-		`
-			#my-panel {
-				background: #aafffc;
-				height: 100%;
-				overflow: hidden;
-				text-align: center;
-			}
-		`
-	]
-})
-export class ChatPanelDirectiveComponent {
-	tokens: TokenModel;
-	sessionId = 'chat-panel-directive-example';
-	OPENVIDU_URL = 'https://localhost:4443';
-	OPENVIDU_SECRET = 'MY_SECRET';
-	session: Session;
-	messages: string[] = [];
-	constructor(private restService: RestService) {}
-
-	async onJoinButtonClicked() {
-		this.tokens = {
-			webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
-			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
-		};
-	}
-
-	onSessionCreated(session: Session) {
-		this.session = session;
-		this.session.on(`signal:${Signal.CHAT}`, (event: any) => {
-			const msg = JSON.parse(event.data).message;
-			this.messages.push(msg);
-		});
-	}
-
-	send(message: string): void {
-		const signalOptions: SignalOptions = {
-			data: JSON.stringify({ message }),
-			type: Signal.CHAT,
-			to: undefined
-		};
-		this.session.signal(signalOptions);
-	}
-}
diff --git a/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.html b/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.html
deleted file mode 100644
index 82f91f4b..00000000
--- a/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<div class="content" role="main">
-	<div class="card-container">
-		<div class="card card-small" (click)="goTo('toolbarDirective')" tabindex="0">
-			<span>ToolbarDirective</span>
-		</div>
-
-		<div class="card card-small" (click)="goTo('toolbarAdditionalButtonsDirective')" tabindex="0">
-			<span>ToolbarAdditionalButtonsDirective</span>
-		</div>
-		<div class="card card-small" (click)="goTo('toolbarAdditionalPanelButtonsDirective')" tabindex="0">
-			<span>ToolbarAdditionalPanelButtonsDirective</span>
-		</div>
-	</div>
-
-	<div class="card-container">
-		<div class="card card-small" (click)="goTo('layoutDirective')" tabindex="0">
-			<span>LayoutDirective</span>
-		</div>
-
-		<div class="card card-small" (click)="goTo('streamDirective')" tabindex="0">
-			<span>StreamDirective</span>
-		</div>
-	</div>
-
-	<div class="card-container">
-
-
-
-		<div class="card card-small" (click)="goTo('panelDirective')" tabindex="0">
-			<span>PanelDirective</span>
-		</div>
-
-		<div class="card card-small" (click)="goTo('additionalPanelsDirective')" tabindex="0">
-			<span>AdditionalPanelsDirective</span>
-		</div>
-
-		<div class="card card-small" (click)="goTo('participantsPanelDirective')" tabindex="0">
-			<span>ParticipantsPanelDirective</span>
-		</div>
-
-		<div class="card card-small" (click)="goTo('chatPanelDirective')" tabindex="0">
-			<span>ChatPanelDirective</span>
-		</div>
-
-		<div class="card card-small" (click)="goTo('participantPanelItemElementsDirective')" tabindex="0">
-			<span>ParticipantPanelItemElementsDirective</span>
-		</div>
-
-		<div class="card card-small" (click)="goTo('participantPanelItemDirective')" tabindex="0">
-			<span>ParticipantPanelItemDirective</span>
-		</div>
-
-	</div>
-</div>
diff --git a/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.scss b/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.scss
deleted file mode 100644
index c66c0657..00000000
--- a/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.scss
+++ /dev/null
@@ -1,291 +0,0 @@
-:host {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    font-size: 14px;
-    color: #333;
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 8px 0;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .toolbar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    background-color: #3c3f3e;
-    color: white;
-    font-weight: 600;
-  }
-
-  .content {
-    display: flex;
-    margin: 62px auto;
-    padding: 0px;
-    max-width: 960px;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .dashboard-section {
-    height: 45%; width: 100%; text-align: center;
-  }
-
-  #call-app, #testing-app {
-    height: 95%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  #call-app {
-    border-bottom: 3px solid;
-
-  }
-
-  #call-app-btn {
-    background-color: #0088AA;
-    color: #ffffff;
-    font-weight: bold;
-
-  }
-
-  #testing-app-btn {
-    background-color: #FFCC00;
-    color: #080808;
-    font-weight: bold;
-  }
-
-  svg.material-icons {
-    height: 24px;
-    width: auto;
-  }
-
-  svg.material-icons:not(:last-child) {
-    margin-right: 8px;
-  }
-
-  .card svg.material-icons path {
-    fill: #888;
-  }
-
-  .card-container {
-
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin-top: 16px;
-  }
-
-  .card {
-    width: fit-content !important;
-    border-radius: 4px;
-    border: 1px solid #eee;
-    background-color: #fafafa;
-    height: 40px;
-    width: 200px;
-    margin: 0 8px 16px;
-    padding: 16px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    transition: all 0.2s ease-in-out;
-    line-height: 24px;
-  }
-
-  .card-container .card:not(:last-child) {
-    margin-right: 0;
-  }
-
-  .card.card-small {
-    height: 16px;
-    width: 168px;
-  }
-
-  .card-container .card:not(.highlight-card) {
-    cursor: pointer;
-  }
-
-  .card-container .card:not(.highlight-card):hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
-  }
-
-  .card-container .card:not(.highlight-card):hover .material-icons path {
-    fill: rgb(105, 103, 103);
-  }
-
-  .card.highlight-card {
-    background-color: #1976d2;
-    color: white;
-    font-weight: 600;
-    border: none;
-    width: auto;
-    min-width: 30%;
-    position: relative;
-  }
-
-  .card.card.highlight-card span {
-    margin-left: 60px;
-  }
-
-  svg#rocket {
-    width: 80px;
-    position: absolute;
-    left: -10px;
-    top: -24px;
-  }
-
-  svg#rocket-smoke {
-    height: calc(100vh - 95px);
-    position: absolute;
-    top: 10px;
-    right: 180px;
-    z-index: -10;
-  }
-
-  a,
-  a:visited,
-  a:hover {
-    color: #1976d2;
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: #125699;
-  }
-
-  .terminal {
-    position: relative;
-    width: 80%;
-    max-width: 600px;
-    border-radius: 6px;
-    padding-top: 45px;
-    margin-top: 8px;
-    overflow: hidden;
-    background-color: rgb(15, 15, 16);
-  }
-
-  .terminal::before {
-    content: "\2022 \2022 \2022";
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 4px;
-    background: rgb(58, 58, 58);
-    color: #c2c3c4;
-    width: 100%;
-    font-size: 2rem;
-    line-height: 0;
-    padding: 14px 0;
-    text-indent: 4px;
-  }
-
-  .terminal pre {
-    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
-    color: white;
-    padding: 0 1rem 1rem;
-    margin: 0;
-  }
-
-  .circle-link {
-    height: 40px;
-    width: 40px;
-    border-radius: 40px;
-    margin: 8px;
-    background-color: white;
-    border: 1px solid #eeeeee;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    transition: 1s ease-out;
-  }
-
-  .circle-link:hover {
-    transform: translateY(-0.25rem);
-    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-  }
-
-  .github-star-badge {
-    color: #24292e;
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    padding: 3px 10px;
-    border: 1px solid rgba(27,31,35,.2);
-    border-radius: 3px;
-    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
-    margin-left: 4px;
-    font-weight: 600;
-    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  }
-
-  .github-star-badge:hover {
-    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
-    border-color: rgba(27,31,35,.35);
-    background-position: -.5em;
-  }
-
-  .github-star-badge .material-icons {
-    height: 16px;
-    width: 16px;
-    margin-right: 4px;
-  }
-
-  svg#clouds {
-    position: fixed;
-    bottom: -160px;
-    left: -230px;
-    z-index: -10;
-    width: 1920px;
-  }
-
-
-  /* Responsive Styles */
-  @media screen and (max-width: 767px) {
-
-    .card-container > *:not(.circle-link) ,
-    .terminal {
-      width: 100%;
-    }
-
-    .card:not(.highlight-card) {
-      height: 16px;
-      margin: 8px 0;
-    }
-
-    .card.highlight-card span {
-      margin-left: 72px;
-    }
-
-    svg#rocket-smoke {
-      right: 120px;
-      transform: rotate(-5deg);
-    }
-  }
-
-  @media screen and (max-width: 575px) {
-    svg#rocket-smoke {
-      display: none;
-      visibility: hidden;
-    }
-  }
diff --git a/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.ts b/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.ts
deleted file mode 100644
index fc9e2ad0..00000000
--- a/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-
-@Component({
-  selector: 'app-examples-dashboard',
-  templateUrl: './examples-dashboard.component.html',
-  styleUrls: ['./examples-dashboard.component.scss']
-})
-export class ExamplesDashboardComponent implements OnInit {
-
-  constructor(private router: Router) { }
-
-  ngOnInit(): void {}
-
-  goTo(path: string) {
-    this.router.navigate([`examples/${path}`]);
-  }
-
-}
diff --git a/openvidu-components-angular/src/app/examples/layout-directive/layout-directive.component.ts b/openvidu-components-angular/src/app/examples/layout-directive/layout-directive.component.ts
deleted file mode 100644
index d6087661..00000000
--- a/openvidu-components-angular/src/app/examples/layout-directive/layout-directive.component.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
-import { Subscription } from 'rxjs';
-import { RestService } from 'src/app/services/rest.service';
-
-@Component({
-	selector: 'app-layout-directive',
-	styles: [
-		`
-			.container {
-				display: flex;
-				flex-wrap: wrap;
-				justify-content: space-between;
-			}
-
-			.item {
-				flex: 0 50%;
-				height: 250px;
-				margin-bottom: 2%;
-			}
-		`
-	],
-	template: `
-		<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
-			<div *ovLayout>
-				<div class="container">
-					<div class="item" *ngFor="let stream of localParticipant | streams">
-						<ov-stream [stream]="stream"></ov-stream>
-					</div>
-
-					<div class="item" *ngFor="let stream of remoteParticipants | streams">
-						<ov-stream [stream]="stream"></ov-stream>
-					</div>
-				</div>
-			</div>
-		</ov-videoconference>
-	`
-})
-export class LayoutDirectiveComponent implements OnInit, OnDestroy {
-	tokens: TokenModel;
-	sessionId = 'layout-directive-example';
-	OPENVIDU_URL = 'https://localhost:4443';
-	OPENVIDU_SECRET = 'MY_SECRET';
-	localParticipant: ParticipantAbstractModel;
-	remoteParticipants: ParticipantAbstractModel[];
-	localParticipantSubs: Subscription;
-	remoteParticipantsSubs: Subscription;
-
-	constructor(private restService: RestService, private participantService: ParticipantService) {}
-
-	ngOnInit(): void {
-		this.subscribeToParticipants();
-	}
-
-	ngOnDestroy() {
-		this.localParticipantSubs.unsubscribe();
-		this.remoteParticipantsSubs.unsubscribe();
-	}
-	subscribeToParticipants() {
-		this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
-			this.localParticipant = p;
-		});
-
-		this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
-			this.remoteParticipants = participants;
-		});
-	}
-
-	async onJoinButtonClicked() {
-		this.tokens = {
-			webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
-			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
-		};
-	}
-}
diff --git a/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts b/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts
deleted file mode 100644
index de560d8d..00000000
--- a/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { TokenModel } from 'openvidu-angular';
-import { RestService } from 'src/app/services/rest.service';
-
-@Component({
-	selector: 'app-panel-directive',
-	template: `
-		<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
-			<ov-panel *ovPanel>
-				<div *ovChatPanel id="my-chat-panel">This is my custom chat panel</div>
-				<div *ovParticipantsPanel id="my-participants-panel">This is my custom participants panel</div>
-			</ov-panel>
-		</ov-videoconference>
-	`,
-	styles: [
-		`
-			#my-chat-panel, #my-participants-panel {
-				text-align: center;
-				height: calc(100% - 40px);
-				margin: 20px;
-			}
-			#my-chat-panel {
-				background: #c9ffb2;
-			}
-			#my-participants-panel {
-				background: #ddf2ff;
-			}
-		`
-	]
-})
-export class PanelDirectiveComponent {
-	tokens: TokenModel;
-	sessionId = 'panel-directive-example';
-	OPENVIDU_URL = 'https://localhost:4443';
-	OPENVIDU_SECRET = 'MY_SECRET';
-	constructor(private restService: RestService) {}
-
-	async onJoinButtonClicked() {
-		this.tokens = {
-			webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
-			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
-		};
-	}
-}
diff --git a/openvidu-components-angular/src/app/examples/participantPanelItem-directive/participantPanelItem-directive.component.ts b/openvidu-components-angular/src/app/examples/participantPanelItem-directive/participantPanelItem-directive.component.ts
deleted file mode 100644
index cbca5d2b..00000000
--- a/openvidu-components-angular/src/app/examples/participantPanelItem-directive/participantPanelItem-directive.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Component } from '@angular/core';
-import { TokenModel } from 'openvidu-angular';
-import { RestService } from 'src/app/services/rest.service';
-
-@Component({
-	selector: 'app-participantPanelItem-directive',
-	template: `
-		<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
-			<div *ovParticipantPanelItem="let participant" style="display: flex">
-				<p>{{ participant.nickname }}</p>
-				<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
-				<mat-menu #menu="matMenu">
-					<button mat-menu-item>Button 1</button>
-					<button mat-menu-item>Button 2</button>
-				</mat-menu>
-			</div>
-		</ov-videoconference>
-	`,
-	styles: [``]
-})
-export class ParticipantPanelItemDirectiveComponent {
-	tokens: TokenModel;
-	sessionId = 'participants-panel-directive-example';
-	OPENVIDU_URL = 'https://localhost:4443';
-	OPENVIDU_SECRET = 'MY_SECRET';
-
-	constructor(private restService: RestService) {}
-
-	async onJoinButtonClicked() {
-		this.tokens = {
-			webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
-			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
-		};
-	}
-}
diff --git a/openvidu-components-angular/src/app/examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component.ts b/openvidu-components-angular/src/app/examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component.ts
deleted file mode 100644
index 64c99cb0..00000000
--- a/openvidu-components-angular/src/app/examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Component } from '@angular/core';
-import { OpenViduService, TokenModel } from 'openvidu-angular';
-import { RestService } from 'src/app/services/rest.service';
-
-@Component({
-	selector: 'app-participantPanelItemElements-directive',
-	template: `
-		<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
-			<div *ovParticipantPanelItemElements="let participant">
-				<button *ngIf="participant.local" (click)="leaveSession()">Leave</button>
-			</div>
-		</ov-videoconference>
-	`,
-	styles: [``]
-})
-export class ParticipantPanelItemElementsDirectiveComponent {
-	tokens: TokenModel;
-	sessionId = 'participants-panel-directive-example';
-	OPENVIDU_URL = 'https://localhost:4443';
-	OPENVIDU_SECRET = 'MY_SECRET';
-
-	constructor(private restService: RestService, private openviduService: OpenViduService) {}
-
-	async onJoinButtonClicked() {
-		this.tokens = {
-			webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
-			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
-		};
-	}
-
-	leaveSession() {
-		this.openviduService.disconnect();
-	}
-}
diff --git a/openvidu-components-angular/src/app/examples/participantsPanel-directive/participantsPanel-directive.component.ts b/openvidu-components-angular/src/app/examples/participantsPanel-directive/participantsPanel-directive.component.ts
deleted file mode 100644
index 36d14ab8..00000000
--- a/openvidu-components-angular/src/app/examples/participantsPanel-directive/participantsPanel-directive.component.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Component, OnDestroy, OnInit,  } from '@angular/core';
-import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
-import { Subscription } from 'rxjs';
-import { RestService } from 'src/app/services/rest.service';
-
-@Component({
-	selector: 'app-participantsPanel-directive',
-	template: `
-		<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
-			<div *ovParticipantsPanel id="my-panel">
-				<ul id="local">
-					<li>{{localParticipant.nickname}}</li>
-				</ul>
-
-				<ul id="remote">
-					<li *ngFor="let p of remoteParticipants">{{p.nickname}}</li>
-				</ul>
-			</div>
-		</ov-videoconference>
-	`,
-	styles: [
-		`
-			#my-panel {
-				background: #faff7f;
-				height: 100%;
-				overflow: hidden;
-			}
-			#my-panel > #local {
-				background: #a184ff;
-			}
-			#my-panel > #remote {
-				background: #7fb8ff;
-			}
-		`
-	]
-})
-export class ParticipantsPanelDirectiveComponent implements OnInit, OnDestroy {
-	tokens: TokenModel;
-	sessionId = 'participants-panel-directive-example';
-	OPENVIDU_URL = 'https://localhost:4443';
-	OPENVIDU_SECRET = 'MY_SECRET';
-	localParticipant: ParticipantAbstractModel;
-	remoteParticipants: ParticipantAbstractModel[];
-	localParticipantSubs: Subscription;
-	remoteParticipantsSubs: Subscription;
-
-	constructor(
-		private restService: RestService,
-		private participantService: ParticipantService
-	) {}
-
-	ngOnInit(): void {
-		this.subscribeToParticipants();
-	}
-
-	ngOnDestroy() {
-		this.localParticipantSubs.unsubscribe();
-		this.remoteParticipantsSubs.unsubscribe();
-	}
-
-	async onJoinButtonClicked() {
-		this.tokens = {
-			webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
-			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
-		};
-	}
-
-	subscribeToParticipants() {
-		this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
-			this.localParticipant = p;
-		});
-
-		this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
-			this.remoteParticipants = participants;
-		});
-	}
-}
diff --git a/openvidu-components-angular/src/app/examples/stream-directive/stream-directive.component.ts b/openvidu-components-angular/src/app/examples/stream-directive/stream-directive.component.ts
deleted file mode 100644
index 8e73b2e6..00000000
--- a/openvidu-components-angular/src/app/examples/stream-directive/stream-directive.component.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Component } from '@angular/core';
-import { TokenModel } from 'openvidu-angular';
-import { RestService } from 'src/app/services/rest.service';
-
-@Component({
-	selector: 'app-stream-directive',
-	styles: [
-		`
-			p {
-				position: absolute;
-				bottom: 0;
-				border: 2px solid;
-				background: #000000;
-			}
-		`
-	],
-	template: `
-		<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
-			<div *ovStream="let stream">
-				<ov-stream [stream]="stream" [displayParticipantName]="false"></ov-stream>
-				<p>{{ stream.participant.nickname }}</p>
-			</div>
-		</ov-videoconference>
-	`
-})
-export class StreamDirectiveComponent {
-	tokens: TokenModel;
-	sessionId = 'toolbar-directive-example';
-	OPENVIDU_URL = 'https://localhost:4443';
-	OPENVIDU_SECRET = 'MY_SECRET';
-
-	constructor(private restService: RestService) {}
-
-	async onJoinButtonClicked() {
-		this.tokens = {
-			webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
-			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
-		};
-	}
-}
diff --git a/openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.ts b/openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.ts
deleted file mode 100644
index b0f95bf1..00000000
--- a/openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { OpenViduService, TokenModel } from 'openvidu-angular';
-import { RestService } from 'src/app/services/rest.service';
-
-@Component({
-	selector: 'app-toolbar-directive',
-	template: `
-		<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
-			<div *ovToolbar style="text-align: center;">
-				<button (click)="toggleVideo()">Toggle Video</button>
-				<button (click)="toggleAudio()">Toggle Audio</button>
-			</div>
-		</ov-videoconference>
-	`
-})
-export class ToolbarDirectiveComponent implements OnInit {
-	tokens: TokenModel;
-	sessionId = 'toolbar-directive-example';
-	OPENVIDU_URL = 'https://localhost:4443';
-	OPENVIDU_SECRET = 'MY_SECRET';
-	publishVideo = true;
-	publishAudio = true;
-	constructor(private restService: RestService, private openviduService: OpenViduService) { }
-
-	ngOnInit(): void { }
-
-	async onJoinButtonClicked() {
-		this.tokens = {
-			webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
-			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
-		};
-	}
-
-	async toggleVideo(): Promise<void> {
-		this.publishVideo = !this.publishVideo;
-		await this.openviduService.publishVideo(this.publishVideo);
-	}
-
-	async toggleAudio(): Promise<void> {
-		this.publishAudio = !this.publishAudio;
-		await this.openviduService.publishAudio(this.publishAudio);
-	}
-}
diff --git a/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts b/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts
deleted file mode 100644
index 6639c73a..00000000
--- a/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Component } from '@angular/core';
-import { OpenViduService, ParticipantService, TokenModel } from 'openvidu-angular';
-import { RestService } from 'src/app/services/rest.service';
-
-@Component({
-	selector: 'app-toolbarAdditionalButtons-directive',
-	template: `
-		<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
-			<div *ovToolbarAdditionalButtons style="text-align: center;">
-				<button (click)="toggleVideo()">Toggle Video</button>
-				<button (click)="toggleAudio()">Toggle Audio</button>
-			</div>
-		</ov-videoconference>
-	`
-})
-export class ToolbarAdditionalButtonsDirectiveComponent {
-	tokens: TokenModel;
-	sessionId = 'toolbar-additionalbtn-directive-example';
-	OPENVIDU_URL = 'https://localhost:4443';
-	OPENVIDU_SECRET = 'MY_SECRET';
-	constructor(
-		private restService: RestService,
-		private openviduService: OpenViduService,
-		private participantService: ParticipantService
-	) { }
-
-	async onJoinButtonClicked() {
-		this.tokens = {
-			webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
-			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
-		};
-	}
-
-	async toggleVideo() {
-		const publishVideo = !this.participantService.isMyVideoActive();
-		await this.openviduService.publishVideo(publishVideo);
-	}
-
-	async toggleAudio() {
-		const publishAudio = !this.participantService.isMyAudioActive();
-		await this.openviduService.publishAudio(publishAudio);
-	}
-}
diff --git a/openvidu-components-angular/src/app/examples/toolbarAdditionalPanelButtons-directive/toolbarAdditionalPanelButtons-directive.component.ts b/openvidu-components-angular/src/app/examples/toolbarAdditionalPanelButtons-directive/toolbarAdditionalPanelButtons-directive.component.ts
deleted file mode 100644
index 5656b355..00000000
--- a/openvidu-components-angular/src/app/examples/toolbarAdditionalPanelButtons-directive/toolbarAdditionalPanelButtons-directive.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component } from '@angular/core';
-import { TokenModel } from 'openvidu-angular';
-import { RestService } from 'src/app/services/rest.service';
-
-@Component({
-	selector: 'app-toolbarAdditionalButtons-directive',
-	template: `
-		<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
-			<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
-				<button>MY PANEL</button>
-			</div>
-		</ov-videoconference>
-	`
-})
-export class ToolbarAdditionalPanelButtonsDirectiveComponent {
-	tokens: TokenModel;
-	sessionId = 'toolbar-additionalPanelbtn';
-	OPENVIDU_URL = 'https://localhost:4443';
-	OPENVIDU_SECRET = 'MY_SECRET';
-
-	constructor(private restService: RestService) {}
-
-	async onJoinButtonClicked() {
-		this.tokens = {
-			webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
-			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
-		};
-	}
-}