openvidu-components: Updated doc

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

@@ -52,7 +52,7 @@ export class MinimalDirective implements OnDestroy {
 }
 
 /**
- * The **participantName** directive sets the participant name. It can be useful for aplications which doesn't need the prejoin page or applications which uses the **openvidu-webcomponent**
+ * The **participantName** directive sets the participant name. It can be useful for aplications which doesn't need the prejoin page.
  *
  * It is only available for {@link VideoconferenceComponent}.
  *

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

@@ -10,7 +10,8 @@ export interface TokenModel {
 
 /**
  *
- * **OpenviduWebComponentComponent** is a wrapped of the {@link VideoconferenceComponent} which allows to generate and export the OpenVidu Webcomponent
+ * **OpenviduWebComponentComponent** is a wrapper of the {@link VideoconferenceComponent} which allows to generate and export the OpenVidu Webcomponent.
+ * **It is not included in the library**.
  */
 @Component({
 	templateUrl: './openvidu-webcomponent.component.html'
@@ -85,52 +86,220 @@ export class OpenviduWebComponentComponent implements OnInit {
 	 */
 	_participantPanelItemMuteButton: boolean = true;
 
+	/**
+	 * The **minimal** attribute applies a minimal UI hiding all controls except for cam and mic.
+	 *
+	 * Default: `false`
+	 *
+	 * @example
+	 * <openvidu-webcomponent minimal="true"></openvidu-webcomponent>
+	 */
 	@Input() set minimal(value: string | boolean) {
 		this._minimal = this.castToBoolean(value);
 	}
+	/**
+	 * The **participantName** attribute sets the participant name. It can be useful for aplications which doesn't need the prejoin page.
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent participant-name="MY_NAME"></openvidu-webcomponent>
+	 */
 	@Input() set participantName(value: string) {
 		this._participantName = value;
 	}
+	/**
+	 * The **prejoin** attribute allows show/hide the prejoin page for selecting media devices.
+	 *
+	 * Default: `true`
+	 *
+	 * @example
+	 * <openvidu-webcomponent prejoin="false"></openvidu-webcomponent>
+	 */
 	@Input() set prejoin(value: string | boolean) {
 		this._prejoin = this.castToBoolean(value);
 	}
+	/**
+	 * The **videoMuted** attribute allows to join the session with camera muted/unmuted.
+	 *
+	 * Default: `false`
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent video-muted="false"></openvidu-webcomponent>
+	 */
 	@Input() set videoMuted(value: string | boolean) {
 		this._videoMuted = this.castToBoolean(value);
 	}
+	/**
+	 * The **audioMuted** attribute allows to join the session with microphone muted/unmuted.
+	 *
+	 * Default: `false`
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent audio-muted="false"></openvidu-webcomponent>
+	 */
 	@Input() set audioMuted(value: string | boolean) {
 		this._audioMuted = this.castToBoolean(value);
 	}
 
+	/**
+	 * The **toolbarScreenshareButton** attribute allows show/hide the screenshare toolbar button.
+	 *
+	 * Default: `true`
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent toolbar-screenshare-button="false"></openvidu-webcomponent>
+	 */
 	@Input() set toolbarScreenshareButton(value: string | boolean) {
 		this._toolbarScreenshareButton = this.castToBoolean(value);
 	}
+	/**
+	 * The **toolbarFullscreenButton** attribute allows show/hide the fullscreen toolbar button.
+	 *
+	 * Default: `true`
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent toolbar-fullscreen-button="false"></openvidu-webcomponent>
+	 */
 	@Input() set toolbarFullscreenButton(value: string | boolean) {
 		this._toolbarFullscreenButton = this.castToBoolean(value);
 	}
+	/**
+	 * The **toolbarLeaveButton** attribute allows show/hide the leave toolbar button.
+	 *
+	 * Default: `true`
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent toolbar-leave-button="false"></openvidu-webcomponent>
+	 */
 	@Input() set toolbarLeaveButton(value: string | boolean) {
 		this._toolbarLeaveButton = this.castToBoolean(value);
 	}
+	/**
+	 * The **toolbarChatPanelButton** attribute allows show/hide the chat panel toolbar button.
+	 *
+	 * Default: `true`
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent toolbar-chat-panel-button="false"></openvidu-webcomponent>
+	 */
 	@Input() set toolbarChatPanelButton(value: string | boolean) {
 		this._toolbarChatPanelButton = this.castToBoolean(value);
 	}
+	/**
+	 * The **toolbarParticipantsPanelButton** attribute allows show/hide the participants panel toolbar button.
+	 *
+	 * Default: `true`
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent toolbar-participants-panel-button="false"></openvidu-webcomponent>
+	 */
 	@Input() set toolbarParticipantsPanelButton(value: string | boolean) {
 		this._toolbarParticipantsPanelButton = this.castToBoolean(value);
 	}
+	/**
+	 * The **toolbarDisplayLogo** attribute allows show/hide the branding logo.
+	 *
+	 * Default: `true`
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent toolbar-display-logo="false"></openvidu-webcomponent>
+	 */
 	@Input() set toolbarDisplayLogo(value: string | boolean) {
 		this._toolbarDisplayLogo = this.castToBoolean(value);
 	}
+	/**
+	 * The **toolbarDisplaySessionName** attribute allows show/hide the session name.
+	 *
+	 * Default: `true`
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent toolbar-display-session-name="false"></openvidu-webcomponent>
+	 */
 	@Input() set toolbarDisplaySessionName(value: string | boolean) {
 		this._toolbarDisplaySessionName = this.castToBoolean(value);
 	}
+	/**
+	 * The **streamDisplayParticipantName** attribute allows show/hide the participants name in stream component.
+	 *
+	 * Default: `true`
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent stream-display-participant-name="false"></openvidu-webcomponent>
+	 */
 	@Input() set streamDisplayParticipantName(value: string | boolean) {
 		this._streamDisplayParticipantName = this.castToBoolean(value);
 	}
+	/**
+	 * The **streamDisplayAudioDetection** attribute allows show/hide the participants audio detection in stream component.
+	 *
+	 * Default: `true`
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent stream-display-audio-detection="false"></openvidu-webcomponent>
+	 */
 	@Input() set streamDisplayAudioDetection(value: string | boolean) {
 		this._streamDisplayAudioDetection = this.castToBoolean(value);
 	}
+	/**
+	 * The **streamSettingsButton** attribute allows show/hide the participants settings button in stream component.
+	 *
+	 * Default: `true`
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent stream-settings-button="false"></openvidu-webcomponent>
+	 */
 	@Input() set streamSettingsButton(value: string | boolean) {
 		this._streamSettingsButton = this.castToBoolean(value);
 	}
+	/**
+	 * The **participantPanelItemMuteButton** attribute allows show/hide the muted button in participant panel item component.
+	 *
+	 * Default: `true`
+	 *
+	 * <div class="warn-container">
+	 * 	<span>WARNING</span>: If you want to use this parameter to OpenVidu Web Component statically, you have to replace the <strong>camelCase</strong> with a <strong>hyphen between words</strong>.</div>
+	 *
+	 * @example
+	 * <openvidu-webcomponent participant-panel-item-mute-button="false"></openvidu-webcomponent>
+	 */
 	@Input() set participantPanelItemMuteButton(value: string | boolean) {
 		this._participantPanelItemMuteButton = this.castToBoolean(value);
 	}
@@ -162,6 +331,10 @@ export class OpenviduWebComponentComponent implements OnInit {
 
 	ngOnInit(): void {}
 
+	/**
+	 * @example
+	 * <openvidu-webcomponent tokens='{"webcam":"TOKEN1", "screen":"TOKEN2"}'></openvidu-webcomponent>
+	 */
 	@Input('tokens')
 	set tokens(value: TokenModel | string) {
 		this.log.d('Webcomponent tokens: ', value);

openvidu-components-angular/src/doc/style.css

@@ -48,7 +48,8 @@ code {
  nav a[href*="license.html"],
  nav a[href*="properties.html"],
  nav a[href*="overview.html"],
- nav a[href*="index.html"] {
+ nav a[href*="index.html"],
+ section[data-compodoc="block-accessors"] {
 	display: none !important;
 }
 
@@ -69,12 +70,11 @@ code {
 }
 
 .warn-container, .info-container {
-	display: table;
     border-radius: 5px;
     width: 100%;
-    margin-top: 30px;
+    margin-top: 5px;
-    margin-bottom: 25px;
+    margin-bottom: 5px;
-    padding: 5px 0 5px 0;
+    padding: 10px;
 }
 
 .info-container > span, .warn-container >span {

openvidu-components-angular/src/doc/tsconfig.doc.json

@@ -4,7 +4,7 @@
 		"../../projects/openvidu-angular/src/lib/directives/**/*.ts",
 		"../../projects/openvidu-angular/src/lib/services/**/*.ts",
 		"../../projects/openvidu-angular/src/lib/models/**/*.ts",
-		"../app/openvidu-webcomponent/openvidu-webcomponent.component.ts"
+		"../app/openvidu-webcomponent/**/*.ts"
 	],
 	"exclude": [
 		"src/test.ts",