ov-components: refactor leave button implementation for improved template handling

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.html

@@ -199,17 +199,17 @@
 
 <!-- Leave session button -->
 @if (showLeaveButtonDirect()) {
-	@if (toolbarLeaveButtonTemplate) {
+	<button
-		<ng-container *ngTemplateOutlet="toolbarLeaveButtonTemplate"></ng-container>
+		mat-icon-button
-	} @else {
+		(click)="onLeaveClick()"
-		<button
+		id="leave-btn"
-			mat-icon-button
+		[class.mobile-btn]="isMobileView()"
-			(click)="onLeaveClick()"
+		matTooltip="{{ 'TOOLBAR.LEAVE' | translate }}"
-			id="leave-btn"
+	>
-			[class.mobile-btn]="isMobileView()"
+		<mat-icon>call_end</mat-icon>
-			matTooltip="{{ 'TOOLBAR.LEAVE' | translate }}"
+	</button>
-		>
+}
-			<mat-icon>call_end</mat-icon>
+
-		</button>
+@if (toolbarLeaveButtonTemplate) {
-	}
+	<ng-container *ngTemplateOutlet="toolbarLeaveButtonTemplate"></ng-container>
 }

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

@@ -223,13 +223,12 @@ export class ParticipantPanelAfterLocalParticipantDirective {
 }
 
 /**
- * The ***ovLeaveButton** directive allows you to replace the default leave button with a custom template.
+ * The ***ovLeaveButton** directive allows you to inject a custom leave button template. You can use the toolbarLeaveButton = false for
- * Use this directive to provide your own button, confirm dialogs, or any custom leave logic while keeping
+ * replacing the default leave button with your custom one.
- * the internal leave flow intact.
  *
  * Usage example:
  * ```html
- * <ov-videoconference>
+ * <ov-videoconference [toolbarLeaveButton]="false">
  *   <ng-container *ovLeaveButton>
  *     <button class="my-leave-button" (click)="customLeave()">
  *       Leave meeting