@rtsee/ngx 0.0.58 → 0.0.59

package/projects/ngx/src/lib/components/rtsee-container/rtsee-container.component.ts

@@ -1,12 +1,11 @@
 import {Component, Input} from '@angular/core';
-import {RTSee, INavigationConfig} from "@rtsee/factory";
-import {NgClass, NgIf} from "@angular/common";
-import {RtseeSidenavComponent} from "./rtsee-sidenav/rtsee-sidenav.component";
+import {RTSee, INavigationConfig, IRouteConfig} from "@rtsee/factory";
+import {NgClass} from "@angular/common";
 import {RTSeeConferenceComponent} from "../rtsee/rtsee-conference.component";
 import {MessengerComponent} from "../rtsee-messenger/messenger/messenger.component";
 import {RtseeEventsDashboardComponent} from "../rtsee-events-dashboard/rtsee-events-dashboard.component";
 import {PresentationComponent} from "../rtsee-presentation/presentation/presentation.component";
-import {RtseeBottomNavComponent} from "./rtsee-bottom-nav/rtsee-bottom-nav.component";
+import {RtseeNavComponent} from "./rtsee-nav/rtsee-nav.component";
 
 
 @Component({
@@ -14,19 +13,17 @@ import {RtseeBottomNavComponent} from "./rtsee-bottom-nav/rtsee-bottom-nav.compo
   templateUrl: './rtsee-container.component.html',
   imports: [
     NgClass,
-    NgIf,
-    RtseeSidenavComponent,
     RTSeeConferenceComponent,
     MessengerComponent,
     RtseeEventsDashboardComponent,
     PresentationComponent,
-    RtseeBottomNavComponent
+    RtseeNavComponent
   ],
   standalone: true
 })
 export class RTSeeContainerComponent {
   @Input() rtsee!: RTSee;
-  @Input() public navigationConfig!: INavigationConfig;
+  @Input() public navigationConfig!: INavigationConfig<IRouteConfig>;
 
   isSidenavExpanded: boolean = true;
   isSidenavExpandededed: boolean = true;

package/projects/ngx/src/lib/components/rtsee-container/rtsee-nav/rtsee-nav.component.html

@@ -0,0 +1,25 @@
+<div class="rtsee-nav">
+  @if (config.siteLogo) {
+    <div class="rtsee-site-logo">
+      <p-image [src]="config.siteLogo.src" class="rtsee-site-logo-image"></p-image>
+      <p-divider class="rtsee-site-logo-divider" />
+    </div>
+  }
+  <div class="rtsee-nav-bar">
+    @for (route of config.routes; track route.name) {
+      <a [routerLink]="route.link"
+         routerLinkActive="rtsee-nav-item-active"
+         [ngClass]="{'rtsee-nav-item-hidden': !route.isEnabled || !route.iconClassName}"
+         [routerLinkActiveOptions]="{ exact: route.exactActiveLinkMatcher || false }"
+         class="rtsee-nav-item"
+      >
+        <span [ngClass]="route.iconClassName"
+          class="rtsee-nav-item-icon" >
+        </span>
+      </a>
+    }
+    <p-avatar [image]="'https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png'"
+              class="rtsee-nav-item rtsee-nav-image rtsee-nav-profile"
+    ></p-avatar>
+  </div>
+</div>

package/projects/ngx/src/lib/components/rtsee-container/rtsee-nav/rtsee-nav.component.ts

@@ -0,0 +1,26 @@
+import {Component, Input} from '@angular/core';
+import {INavigationConfig} from "@rtsee/factory/dist/factory/src/interfaces/NavigationConfig";
+import {RouterLink, RouterLinkActive} from "@angular/router";
+import {NgClass} from "@angular/common";
+import {IRouteConfig} from "@rtsee/factory/src/interfaces/NavigationConfig";
+import {Avatar} from "primeng/avatar";
+import {Image} from "primeng/image";
+import {Divider} from "primeng/divider";
+
+
+@Component({
+  selector: 'rtsee-nav',
+  templateUrl: './rtsee-nav.component.html',
+  imports: [
+    RouterLink,
+    RouterLinkActive,
+    NgClass,
+    Avatar,
+    Image,
+    Divider
+  ],
+  standalone: true
+})
+export class RtseeNavComponent {
+  @Input() public config!: INavigationConfig<IRouteConfig>;
+}

package/projects/ngx/src/lib/components/rtsee-presentation/presentation/presentation.component.html

@@ -3,22 +3,23 @@
     <rtsee-presentation-header [presentation]="presentation"
     ></rtsee-presentation-header>
   </div>
-  <div class="rtsee-presentation-stories-list"
-       *ngIf="!presentation.activeStory"
-  >
-    <div class="rtsee-presentation-story-thumbnail-container"
-         *ngFor="let story of presentation.stories"
-         (click)="presentation.setActiveStory(story)"
-    >
-      <rtsee-story-thumbnail
-        [story]="story"
-      ></rtsee-story-thumbnail>
+  @if (!presentation.activeStory) {
+    <div class="rtsee-presentation-stories-list">
+      @for (story of presentation.stories; track story.id) {
+        <div class="rtsee-presentation-story-thumbnail-container"
+             (click)="presentation.setActiveStory(story)"
+        >
+          <rtsee-story-thumbnail
+            [story]="story"
+          ></rtsee-story-thumbnail>
+        </div>
+      }
     </div>
-  </div>
-  <div class="rtsee-presentation-story-viewer-container"
-       *ngIf="presentation.activeStory"
-  >
-    <rtsee-story-player [story]="presentation.activeStory"
-    ></rtsee-story-player>
-  </div>
+  }
+  @if (presentation.activeStory) {
+    <div class="rtsee-presentation-story-viewer-container">
+      <rtsee-story-player [story]="presentation.activeStory"
+      ></rtsee-story-player>
+    </div>
+  }
 </div>

package/projects/ngx/src/lib/components/rtsee-presentation/presentation/presentation.component.ts

@@ -1,7 +1,6 @@
 import {Component, Input} from '@angular/core';
 import { RTSeePresentation } from "@rtsee/presentation";
 import {PresentationHeaderComponent} from "../presentation-header/presentation-header.component";
-import {NgForOf, NgIf} from "@angular/common";
 import {StoryThumbnailComponent} from "../story-thumbnail/story-thumbnail.component";
 import {StoryPlayerComponent} from "../story-player/story-player.component";
 
@@ -10,7 +9,6 @@ import {StoryPlayerComponent} from "../story-player/story-player.component";
   templateUrl: './presentation.component.html',
   imports: [
     PresentationHeaderComponent,
-    NgIf,
     StoryThumbnailComponent,
     StoryPlayerComponent
   ],

package/projects/ngx/src/lib/components/rtsee-presentation/slide/slide.component.html

@@ -1,29 +1,33 @@
 <div class="rtsee-presentation-slide">
-  <ng-template *ngIf="slide.widget" widgetHost></ng-template>
+  @if (slide.widget) {
+    <ng-template widgetHost></ng-template>
+  }
   <div class="rtsee-presentation-slide-default">
-    <div class="rtsee-presentation-slide-image-container"
-         [ngStyle]="" ]="{'background-image': 'url(' + slide.imageUrl + ')'}"
-         *ngIf="slide.imageUrl"
-    >
-    </div>
+    @if (slide.imageUrl) {
+      <div class="rtsee-presentation-slide-image-container"
+           [ngStyle]="{'background-image': 'url(' + slide.imageUrl + ')'}"
+      >
+      </div>
+    }
     <div class="rtsee-presentation-slide-text">
       <p>{{slide.text}}</p>
     </div>
     <div class="rtsee-presentation-slide-controls">
-      <button class="slide-navigation-btn navigation-prev"
-              (click)="slideRewindClicked(false)"
-              *ngIf="story.activeSlideNumber !== 1"
-      >
-        <span class="rtsee-story-thumbnail-info-time-icon material-icons-outlined"
-        >arrow_back_ios</span>
-      </button>
-      <button class="slide-navigation-btn navigation-next"
-              (click)="slideRewindClicked(true)"
-              *ngIf="story.activeSlideNumber !== this.story.totalSlides"
-      >
+      @if (story.activeSlideNumber !== 1) {
+        <button class="slide-navigation-btn navigation-prev"
+                (click)="slideRewindClicked(false)"
+        >
+          <span class="rtsee-story-thumbnail-info-time-icon material-icons-outlined">arrow_back_ios</span>
+        </button>
+      }
+      @if (story.activeSlideNumber !== this.story.totalSlides) {
+        <button class="slide-navigation-btn navigation-next"
+                (click)="slideRewindClicked(true)"
+        >
         <span class="rtsee-story-thumbnail-info-time-icon material-icons-outlined"
         >arrow_forward_ios</span>
-      </button>
+        </button>
+      }
     </div>
   </div>
 </div>

package/projects/ngx/src/lib/components/rtsee-presentation/slide/slide.component.ts

@@ -1,13 +1,14 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component,  Input } from '@angular/core';
 import {RTSeeStory, RTSeeStorySlide} from "@rtsee/presentation";
-import {NgIf, NgStyle} from "@angular/common";
+import { NgStyle } from "@angular/common";
+import {WidgetDirective} from "../../../directives/widget.directive";
 
 @Component({
   selector: 'rtsee-slide',
   templateUrl: './slide.component.html',
   imports: [
     NgStyle,
-    NgIf
+    WidgetDirective
   ],
   standalone: true
 })

package/projects/ngx/src/lib/ngx.module.ts

@@ -42,13 +42,23 @@ import { SignInComponent } from "./components/rtsee-auth/sign-in/sign-in.compone
 import { ForgotPasswordComponent } from "./components/rtsee-auth/forgot-password/forgot-password.component";
 import { VendorsComponent } from "./components/rtsee-auth/vendors/vendors.component";
 import { RTSeeAuthComponent } from './components/rtsee-auth/auth/auth.component';
-import { RtseeSidenavComponent } from './components/rtsee-container/rtsee-sidenav/rtsee-sidenav.component';
-import { RtseeBottomNavComponent } from './components/rtsee-container/rtsee-bottom-nav/rtsee-bottom-nav.component';
 import { RouterLink, RouterLinkActive } from "@angular/router";
 import { ResetPasswordComponent } from './components/rtsee-auth/reset-password/reset-password.component';
 import { PresentationHeaderComponent } from './components/rtsee-presentation/presentation-header/presentation-header.component';
+import { NgxCaptchaModule } from "ngx-captcha";
+import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
+import { providePrimeNG } from "primeng/config";
+import Aura from '@primeuix/themes/aura';
 
 @NgModule({
+  providers: [
+    provideAnimationsAsync(),
+    providePrimeNG({
+      theme: {
+        preset: Aura
+      }
+    })
+  ],
   declarations: [],
   imports: [
     RTSeeAuthComponent,
@@ -80,7 +90,6 @@ import { PresentationHeaderComponent } from './components/rtsee-presentation/pre
     RtseePeerComponent,
     RtseeSoundbarComponent,
     RtseeSettingsComponent,
-    RtseeSidenavComponent,
     MessengerHeaderComponent,
     ChatsListComponent,
     ProfileComponent,
@@ -92,7 +101,6 @@ import { PresentationHeaderComponent } from './components/rtsee-presentation/pre
     StoryPlayerComponent,
     SlideComponent,
     StoryThumbnailComponent,
-    RtseeBottomNavComponent,
     PresentationHeaderComponent,
     CommonModule,
     ReactiveFormsModule,
@@ -102,6 +110,7 @@ import { PresentationHeaderComponent } from './components/rtsee-presentation/pre
     NgOptimizedImage,
     RouterLink,
     RouterLinkActive,
+    NgxCaptchaModule
   ],
   exports: [
     RTSeeConferenceComponent,
@@ -113,7 +122,6 @@ import { PresentationHeaderComponent } from './components/rtsee-presentation/pre
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA,
-  ],
-
+  ]
 })
 export class RTSeeModule {}

package/projects/ngx/src/lib/theme/auth/auth-container.scss

@@ -1,186 +1,198 @@
 @import "./variables";
 @import "../common-variables";
 
-.auth-container {
-  max-width: $max-width-container;
-  margin: $btn-margin-top auto;
-  padding: $auth-container-padding;
-  text-align: center;
-  background: linear-gradient(to bottom, $light-blue-gray 0%, $white 100%);
-  border-radius: $auth-container-border-radius;
+.rtsee-auth {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
-  .auth-logo {
-    width: $auth-logo-width;
-    height: $auth-logo-height;
-    margin-bottom: $logo-bottom-margin;
-    border-radius: $auth-container-border-radius;
-  }
-
-  .auth-title {
-    margin-bottom: $auth-title-text-margin-bottom;
-    font-size: $auth-title-text-font-size;
-    font-weight: bold;
-    color: $dark-blue-gray;
-    text-shadow: $auth-title-text-shadow;
-  }
-
-  .auth-title-description {
-    margin: $auth-title-description-text-margin;
-    font-size: $auth-title-description-text-font-size;
-    color: $medium-blue-gray;
-  }
-
-  .auth-form {
-    padding: $form-padding;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    border-radius: $auth-container-border-radius;
-    background-color: $white;
-    box-shadow: $auth-form-box-shadow;
-
-    .auth-input-container {
-      width: 100%;
-      margin-bottom: $input-bottom-margin;
-
-      input {
-        width: 100%;
-        padding: $auth-form-input-padding;
-        border: $auth-form-input-border;
-        border-radius: $auth-container-border-radius;
-        font-size: $auth-title-description-text-font-size;
-
-        &:focus {
-          border-color: $dark-blue-gray;
-          outline: none;
-          box-shadow: $auth-form-input-focus-shadow;
-        }
-      }
-    }
-
-    .auth-sm-medium {
-      margin-bottom: $label-bottom-margin;
-      font-size: $auth-sm-medium-font-side;
-      color: $dark-blue-gray;
-    }
-
-    .auth-options {
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
-      align-items: center;
-      margin: $auth-options-margin;
-
-      .auth-checkbox-label {
-        display: flex;
-        align-items: center;
-
-        .auth-remember-checkbox {
-          margin-right: $auth-options-remember-check-box-margin;
-          accent-color: $dark-blue-gray;
-        }
-
-        label {
-          font-size: $auth-sm-medium-font-side;
-          color: $dark-blue-gray;
-        }
-      }
-
-      a {
-        font-size: $auth-sm-medium-font-side;
-        color: $deep-blue;
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-
-    .auth-btn-container {
-      width: 100%;
-      padding: $auth-button-padding;
-      text-align: center;
-      font-size: $auth-button-font-size;
-      background-color: $deep-blue;
-      color: $white;
-      border: none;
-      border-radius: $auth-button-border-radius;
-      cursor: pointer;
-      transition: $auth-button-transition;
-
-      &:hover {
-        background-color: darken($deep-blue, 10%);
-      }
-
-      &:disabled {
-        background-color: $medium-blue-gray;
-        cursor: not-allowed;
-        box-shadow: none;
-        transform: none;
-      }
-    }
-  }
-
-  .auth-media-blue-gray-sm-normal {
-    margin-top: $auth-new-account-text-margin;
-    font-size: $auth-new-account-text-font-size;
-    color: $medium-blue-gray;
-
-    .auth-deep-blue-sm-medium {
-      text-decoration: none;
-      color: $deep-blue;
-
-      &:hover {
-        text-decoration: underline;
-        opacity: 0.8;
-      }
-    }
+  .auth-container {
+    max-width: 420px;
   }
 }
 
-/* Mobile Styles */
-@media (max-width: 480px) {
-  .auth-container {
-    padding: $auth-container-mobile-padding;
-
-    .auth-form {
-      padding: $auth-form-mobile-padding;
 
-      .auth-input-container {
-        margin-bottom: $auth-input-container-mobile-margin;
 
-        input {
-          padding: $auth-input-mobile-padding;
-          font-size: $auth-mobile-font-size;
-        }
-      }
-
-      .auth-btn-container {
-        padding: $auth-button-container-mobile-padding;
-        font-size: $auth-mobile-font-size;
-      }
-
-      .auth-options {
-        flex-direction: column;
-        align-items: flex-start;
-
-        .auth-checkbox-label {
-          margin-bottom: $auth-check-box-label-mobile-margin;
-        }
-
-        a {
-          font-size: $auth-mobile-font-size;
-        }
-      }
-    }
-
-    .auth-media-blue-gray-sm-normal {
-      font-size: $auth-mobile-font-size;
-
-      .auth-deep-blue-sm-medium {
-        font-size: $auth-mobile-font-size;
-      }
-    }
-  }
-}
+//.auth-container {
+//  max-width: $max-width-container;
+//  margin: $btn-margin-top auto;
+//  padding: $rts-offset-md;
+//  background: linear-gradient(to bottom, $light-blue-gray 0%, $white 100%);
+//  border-radius: $rts-default-border-radius;
+//
+//  .auth-logo {
+//    width: $auth-logo-width;
+//    height: $auth-logo-height;
+//    border-radius: $rts-default-border-radius;
+//  }
+//
+//  .auth-title {
+//    margin-bottom: $auth-title-text-margin-bottom;
+//    font-size: $auth-title-text-font-size;
+//    font-weight: bold;
+//    color: $dark-blue-gray;
+//    text-shadow: $auth-title-text-shadow;
+//  }
+//
+//  .auth-title-description {
+//    margin: $auth-title-description-text-margin;
+//    font-size: $auth-title-description-text-font-size;
+//    color: $medium-blue-gray;
+//  }
+//
+//  .auth-form {
+//    padding: $rts-offset-md;
+//    display: flex;
+//    flex-direction: column;
+//    align-items: center;
+//    border-radius: $rts-default-border-radius;
+//    background-color: $white;
+//    box-shadow: $auth-form-box-shadow;
+//
+//    .auth-input-container {
+//      width: 100%;
+//      margin-bottom: $input-bottom-margin;
+//
+//      input {
+//        width: 100%;
+//        padding: $auth-form-input-padding;
+//        border: $auth-form-input-border;
+//        border-radius: $rts-default-border-radius;
+//        font-size: $auth-title-description-text-font-size;
+//
+//        &:focus {
+//          border-color: $dark-blue-gray;
+//          outline: none;
+//          box-shadow: $auth-form-input-focus-shadow;
+//        }
+//      }
+//    }
+//
+//    .auth-sm-medium {
+//      margin-bottom: $label-bottom-margin;
+//      font-size: $auth-sm-medium-font-side;
+//      color: $dark-blue-gray;
+//    }
+//
+//    .auth-options {
+//      display: flex;
+//      justify-content: space-between;
+//      width: 100%;
+//      align-items: center;
+//      margin: $auth-options-margin;
+//
+//      .auth-checkbox-label {
+//        display: flex;
+//        align-items: center;
+//
+//        .auth-remember-checkbox {
+//          margin-right: $auth-options-remember-check-box-margin;
+//          accent-color: $dark-blue-gray;
+//        }
+//
+//        label {
+//          font-size: $auth-sm-medium-font-side;
+//          color: $dark-blue-gray;
+//        }
+//      }
+//
+//      a {
+//        font-size: $auth-sm-medium-font-side;
+//        color: $deep-blue;
+//        text-decoration: none;
+//
+//        &:hover {
+//          text-decoration: underline;
+//        }
+//      }
+//    }
+//
+//    .auth-btn-container {
+//      width: 100%;
+//      padding: $auth-button-padding;
+//      text-align: center;
+//      font-size: $auth-button-font-size;
+//      background-color: $deep-blue;
+//      color: $white;
+//      border: none;
+//      border-radius: $auth-button-border-radius;
+//      cursor: pointer;
+//      transition: $auth-button-transition;
+//
+//      &:hover {
+//        background-color: darken($deep-blue, 10%);
+//      }
+//
+//      &:disabled {
+//        background-color: $medium-blue-gray;
+//        cursor: not-allowed;
+//        box-shadow: none;
+//        transform: none;
+//      }
+//    }
+//  }
+//
+//  .auth-media-blue-gray-sm-normal {
+//    margin-top: $auth-new-account-text-margin;
+//    font-size: $auth-new-account-text-font-size;
+//    color: $medium-blue-gray;
+//
+//    .auth-deep-blue-sm-medium {
+//      text-decoration: none;
+//      color: $deep-blue;
+//
+//      &:hover {
+//        text-decoration: underline;
+//        opacity: 0.8;
+//      }
+//    }
+//  }
+//}
+//
+///* Mobile Styles */
+//@media (max-width: 480px) {
+//  .auth-container {
+//    padding: $auth-container-mobile-padding;
+//
+//    .auth-form {
+//      padding: $auth-form-mobile-padding;
+//
+//      .auth-input-container {
+//        margin-bottom: $auth-input-container-mobile-margin;
+//
+//        input {
+//          padding: $auth-input-mobile-padding;
+//          font-size: $auth-mobile-font-size;
+//        }
+//      }
+//
+//      .auth-btn-container {
+//        padding: $auth-button-container-mobile-padding;
+//        font-size: $auth-mobile-font-size;
+//      }
+//
+//      .auth-options {
+//        flex-direction: column;
+//        align-items: flex-start;
+//
+//        .auth-checkbox-label {
+//          margin-bottom: $auth-check-box-label-mobile-margin;
+//        }
+//
+//        a {
+//          font-size: $auth-mobile-font-size;
+//        }
+//      }
+//    }
+//
+//    .auth-media-blue-gray-sm-normal {
+//      font-size: $auth-mobile-font-size;
+//
+//      .auth-deep-blue-sm-medium {
+//        font-size: $auth-mobile-font-size;
+//      }
+//    }
+//  }
+//}

package/projects/ngx/src/lib/theme/auth/index.scss

@@ -1,2 +1 @@
-@import "./auth";
 @import "./auth-container";