tango-app-ui-shared 3.7.3-dev6-demo6 → 3.7.3-dev6-demo7

package/src/lib/modules/layout/scroll-top/scroll-top.component.ts

@@ -0,0 +1,75 @@
+import { Component, OnInit, OnDestroy, HostBinding } from '@angular/core';
+import { NavigationCancel, NavigationEnd, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import {
+  StickyComponent,
+  ScrollTopComponent,
+  MenuComponent,
+  ToggleComponent,
+  DrawerComponent,
+} from 'tango-app-ui-global';
+
+@Component({
+  selector: 'lib-scroll-top',
+  templateUrl: './scroll-top.component.html',
+})
+export class LayoutScrollTopComponent implements OnInit, OnDestroy {
+  @HostBinding('class') class = 'kt_scrolltop';
+  @HostBinding('id') id = 'scrolltop';
+  @HostBinding('attr.data-kt-scrolltop') dataKtScrolltop = 'true';
+
+  private unsubscribe: Subscription[] = [];
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.routingChanges();
+  }
+
+  routingChanges() {
+    const routerSubscription = this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
+        this.pluginsReinitialization();
+        this.updateHeaderSticky();
+        setTimeout(() => {
+          this.scrollTop();
+        }, 0);
+      }
+    });
+    this.unsubscribe.push(routerSubscription);
+  }
+
+  updateHeaderSticky() {
+    const stickyHeader = document.body.querySelectorAll(
+      `[data-kt-sticky-name="header"]`
+    );
+    if (stickyHeader && stickyHeader.length > 0) {
+      const sticky = StickyComponent.getInstance(
+        stickyHeader[0] as HTMLElement
+      );
+      if (sticky) {
+        sticky.update();
+      }
+    }
+  }
+
+  scrollTop() {
+    ScrollTopComponent.goTop();
+  }
+
+  pluginsReinitialization() {
+    setTimeout(() => {
+      // ScrollTopComponent.reinitialization()
+      MenuComponent.reinitialization();
+      StickyComponent.reInitialization();
+      setTimeout(() => {
+        ToggleComponent.reinitialization();
+        DrawerComponent.reinitialization();
+        // ScrollComponent.reinitialization()
+      }, 70);
+    }, 140);
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+}

package/src/lib/modules/layout/sidebar/sidebar-footer/sidebar-footer.component.html

@@ -0,0 +1,70 @@
+<div class="container-with-overflow">
+  <div id="kt_app_sidebar_menu_scroll" class="" data-kt-scroll="false" data-kt-scroll-activate="false"
+    data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_app_sidebar_logo, #kt_app_sidebar_footer"
+    data-kt-scroll-wrappers="#kt_app_sidebar_menu" data-kt-scroll-offset="5px" data-kt-scroll-save-state="true">
+    <div class="menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6" id="kt_app_sidebar_menu"
+      data-kt-menu="true" data-kt-menu-expand="false">
+      <div class="menu-item menu-accordion w-100 px-3" id="#kt_app_sidebar_menu" [ngClass]="{'active': isSubMenuActive}"
+        data-kt-menu-trigger="click"  (mouseover)="setArrowDirection(true)"
+        (mouseleave)="setArrowDirection(false)" >
+        <span class="menu-link without-sub">
+          <span class="menu-icon">
+            <img class="img-src" *ngIf="userProfileData?.userProfile" (error)="userProfileData.userProfile = null" [src]="userProfileData?.userProfile ? userProfileData?.userProfile :'./assets/tango/Images/userProfile.svg'" alt="Profile Image">
+            <img class="img-src" *ngIf="!userProfileData?.userProfile" src="assets/tango/Images/userProfile.svg">
+          </span>
+          <span class="menu-title overflow-hidden ms-2" data-link="/crafted/account">{{ userValue.userName | titlecase}}<br>
+          {{ userValue.email | titlecase}}</span>
+          <span class="menu-arrow"></span>
+        </span>
+        <div class="menu-sub menu-sub-accordion w-100" #accordion [class.show]="isSubMenuActive" [ngClass]="{'menu-sub-top': isSubMenuActive}"
+          routerLinkActive="menu-active-bg" >
+          <!-- <div class="menu-item px-3 border-profile-first">
+            <a class="menu-link without-sub"  (click)="profileUrl()" >
+              <span class="menu-bullet">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <path
+                    d="M11.8574 3.83162C11.8574 5.94799 10.0668 7.66324 7.85742 7.66324C5.64805 7.66324 3.85742 5.94799 3.85742 3.83162C3.85742 1.71525 5.64805 0 7.85742 0C10.0668 0 11.8574 1.71525 11.8574 3.83162Z"
+                    fill="#98A2B3" />
+                  <path
+                    d="M6.36786 9.38452C2.85 9.38452 0 11.9226 0 15.0554C0 15.577 0.475 16.0001 1.06071 16.0001H14.9393C15.525 16.0001 16 15.577 16 15.0554C16 11.9226 13.15 9.38452 9.63214 9.38452H6.36786Z"
+                    fill="#667085" />
+                </svg>
+              </span>
+              <span class="menu-title overflow-hidden">Profile</span>
+            </a>
+          </div> -->
+          <!-- <div class="menu-item px-3" style="border-radius: 0px;">
+            <a class="menu-link without-sub" routerLinkActive="active">
+              <span class="menu-bullet">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <path opacity="0.3"
+                    d="M14.2222 11.5556V8C14.2222 4.56356 11.4364 1.77778 8 1.77778C4.56356 1.77778 1.77778 4.56356 1.77778 8V11.5556H14.2222ZM16 11.5556H0V8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8V11.5556Z"
+                    fill="#D0D5DD" />
+                  <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M1.77778 9.77759H2.66667C3.64851 9.77759 4.44444 10.5735 4.44444 11.5554V14.222C4.44444 15.2039 3.64851 15.9998 2.66667 15.9998H1.77778C0.795938 15.9998 0 15.2039 0 14.222V11.5554C0 10.5735 0.795938 9.77759 1.77778 9.77759ZM13.3333 9.77759H14.2222C15.2041 9.77759 16 10.5735 16 11.5554V14.222C16 15.2039 15.2041 15.9998 14.2222 15.9998H13.3333C12.3515 15.9998 11.5556 15.2039 11.5556 14.222V11.5554C11.5556 10.5735 12.3515 9.77759 13.3333 9.77759Z"
+                    fill="#667085" />
+                </svg>
+              </span>
+              <span class="menu-title overflow-hidden">Support</span>
+            </a>
+          </div> -->
+          <div class="menu-item px-3" style="border-radius: 0px;">
+            <a class="menu-link without-sub" (click)="logout()" routerLinkActive="active">
+              <span class="menu-bullet">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                  <path
+                    d="M5 13H2.33333C1.97971 13 1.64057 12.8595 1.39052 12.6095C1.14048 12.3594 1 12.0203 1 11.6667V2.33333C1 1.97971 1.14048 1.64057 1.39052 1.39052C1.64057 1.14048 1.97971 1 2.33333 1H5"
+                    stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                  <path d="M9.66667 10.3332L13 6.99984M13 6.99984L9.66667 3.6665M13 6.99984H5" stroke="#D0D5DD"
+                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </span>
+              <span class="menu-title overflow-hidden">Logout</span>
+            </a>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/modules/layout/sidebar/sidebar-footer/sidebar-footer.component.scss

@@ -0,0 +1,57 @@
+.menu{
+    background: var(--Gray-700, #344054); 
+  
+.menu-item {
+    position: relative; /* Ensure relative positioning for submenu */
+    background: var(--Gray-700, #344054); 
+  
+  }
+  .border-profile-first{
+    border-top-left-radius: 8px; border-top-right-radius: 8px;
+  }
+  .menu-sub {
+    position: absolute;
+    top: 100;
+    bottom: calc(100% + 5px); /* Position the submenu above the parent menu item */
+    left: 0;
+  }
+  
+  .menu-sub-top {
+    bottom: auto;
+    top: calc(100% + 5px); /* Position the submenu above the parent menu item */
+  }
+  
+}
+/* Add transition for smooth closing animation */
+.menu-sub {
+  transition: max-height 0.3s ease-out;
+}
+
+/* Ensure submenu remains closed when not active */
+.menu-sub:not(.show) {
+  max-height: 0;
+  overflow: hidden;
+}
+.menu-sub-indention .menu-sub {
+    margin-left: 0rem !important;
+ }
+ .custom-scroll {
+    max-height: 300px; /* Adjust the height as needed */
+    // overflow-y: auto;
+  }
+
+  // .menu-item {
+  //   position: relative; /* Ensure the parent container is positioned relative */
+  // }
+  
+  // .menu-sub {
+  //   position: absolute;
+  //   top: 0; /* Position the submenu at the top */
+  //   left: 100%; /* Position the submenu relative to its parent */
+  // }
+
+  .img-src{
+    width:40px;
+    height:40px;
+    border-radius: 30px;
+  }

package/src/lib/modules/layout/sidebar/sidebar-footer/sidebar-footer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarFooterComponent } from './sidebar-footer.component';
+
+describe('SidebarFooterComponent', () => {
+  let component: SidebarFooterComponent;
+  let fixture: ComponentFixture<SidebarFooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SidebarFooterComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SidebarFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/layout/sidebar/sidebar-footer/sidebar-footer.component.ts

@@ -0,0 +1,136 @@
+import { Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { NavigationStart, Router } from '@angular/router';
+import { AuthService } from '../../../../services/auth.service';
+import { Subject, Subscription, takeUntil } from 'rxjs';
+import { GlobalStateService, LayoutService, LayoutType, PageInfoService } from 'tango-app-ui-global';
+import { ToastService } from '../../../../services/toast.service';
+@Component({
+  selector: "lib-sidebar-footer",
+  templateUrl: "./sidebar-footer.component.html",
+  styleUrls: ["./sidebar-footer.component.scss"],
+})
+export class SidebarFooterComponent implements OnInit,OnDestroy {
+  isSubMenuActive: boolean = false;
+  userValue: any;
+  hovered = false;
+  private unsubscribe: Subscription[] = [];
+  @Input() toggleButtonClass: string = '';
+  @Input() toggleEnabled: boolean;
+  @Input() toggleType: string = '';
+  @Input() toggleState: string = '';
+  currentLayoutType: LayoutType | null;
+  @Input() userValuefooter: any='';
+  toggleAttr: string;
+  shouldShowMenuTop: boolean = true;
+  private readonly destroy$ = new Subject();
+  openshow: boolean =false;
+  userProfileData: any;
+  recaptchaSiteKey:any;
+  constructor(private auth: AuthService, private router: Router,private layout: LayoutService,private pageInfo:PageInfoService, 
+    private ngZone: NgZone,private ts:ToastService,public gs:GlobalStateService) {
+ this.gs.environment.pipe(takeUntil(this.destroy$)).subscribe((env) => {
+      if (env) {
+        this.recaptchaSiteKey = env.recaptchaSiteKey
+      }
+    });
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationStart) {
+        // Close the submenu whenever a navigation starts
+        this.isSubMenuActive = false;
+      }
+    });
+  }
+  // isSubMenuActive: boolean = false;
+  isArrowReversed: boolean = false;
+
+  setArrowDirection(isMouseOver: boolean) {
+    // console.log(isMouseOver)
+    this.isArrowReversed = isMouseOver;
+  }
+  ngOnInit(): void {
+    this.toggleAttr = `app-sidebar-${this.toggleType}`;
+    const layoutSubscr = this.layout.currentLayoutTypeSubject
+      .asObservable().pipe(takeUntil(this.destroy$))
+      .subscribe((layout) => {
+        this.currentLayoutType = layout;
+      });
+    this.unsubscribe.push(layoutSubscr);
+    if ('user-info' in localStorage) {
+      const userData: any = JSON.parse(
+        localStorage.getItem('user-info') || "{}"
+      );
+      this.userValue = userData;
+    }
+    this.getProfile();
+  }
+
+  toggleMenu() {
+    this.isSubMenuActive =!this.isSubMenuActive;
+  }
+  profileUrl() {
+    this.isSubMenuActive = false;
+  this.router.navigate(['/profile'])
+  // setTimeout(() => {
+  //   this.closeMenu();
+  // }, 10);
+}
+closeMenu(){
+  window.location.reload()
+}
+
+logout() {
+  this.auth.logout().pipe(takeUntil(this.destroy$)).subscribe({
+    next: (res: any) => {
+      if (res && res?.code === 200) {
+        this.cleanUpAndRedirect();
+      } else {
+        console.warn("Logout failed from server, forcing client logout.");
+        this.cleanUpAndRedirect();
+      }
+    },
+    error: (err) => {
+      console.error("Logout API error:", err);
+      // Still clear local data and redirect, but maybe also show a message
+      this.cleanUpAndRedirect();
+      this.ts.getErrorToast("Something went wrong while logging out. Please log in again.");
+    }
+  });
+}
+captchaToken: string | null = null; 
+public cleanUpAndRedirect() {
+   this.captchaToken = null;
+  localStorage.removeItem(this.recaptchaSiteKey); 
+  sessionStorage.removeItem(this.recaptchaSiteKey);
+  localStorage.clear();
+ if ((window as any).grecaptcha) {
+    try {
+      (window as any).grecaptcha.reset();
+    } catch (err) {
+      console.warn('Captcha reset error:', err);
+    }
+  }
+  this.pageInfo.setTitle('login');
+  this.router.navigate(["/auth/login"]);
+}
+
+  ngOnDestroy() {
+    // this.unsubscribe.forEach((sb) => sb.unsubscribe());
+      this.destroy$.next(true);
+      this.destroy$.complete();
+  }
+
+ getProfile(){
+  this.auth.getPersonalInfo().pipe(takeUntil(this.destroy$)).subscribe({
+    next: (res:any) => {
+      if (res && res.code == 200) {
+        this.userProfileData = res.data;
+        // this.twoFactorEnabled =
+        //   this.userProfileData?.twoFactorAuthentication?.isEnable || false;
+      } 
+    },
+    error: (err:any) => {
+      console.log(err);
+    },
+  });
+ } 
+}

package/src/lib/modules/layout/sidebar/sidebar-logo/sidebar-logo.component.html

@@ -0,0 +1,26 @@
+<!--begin::Logo image-->
+<a>
+  <ng-container *ngIf="currentLayoutType === 'dark-sidebar'">
+    <img alt="Logo" src="./assets/tango/sidemenu-icons/tango_logo_text.svg" class="h-40px app-sidebar-logo-default" />
+  </ng-container>
+  <ng-container *ngIf="currentLayoutType !== 'dark-sidebar'">
+    <img alt="Logo" src="./assets/tango/sidemenu-icons/tango_logo_text.svg" class="h-40px app-sidebar-logo-default theme-light-show" />
+    <img alt="Logo" src="./assets/tango/sidemenu-icons/tango_logo_text.svg"
+      class="h-40px app-sidebar-logo-default theme-dark-show" />
+  </ng-container>
+
+  <img alt="Logo" src="./assets/tango/sidemenu-icons/tango_logo.svg" class="h-38px app-sidebar-logo-minimize" />
+</a>
+<!--end::Logo image-->
+
+
+<ng-container *ngIf="toggleEnabled">
+  <!--begin::Sidebar toggle-->
+  <div id="kt_app_sidebar_toggle"
+    class="app-sidebar-toggle btn btn-icon btn-shadow btn-sm btn-color-muted btn-active-color-primary body-bg h-30px w-30px position-absolute top-50 start-100 translate-middle rotate d-none"
+    [ngClass]="toggleButtonClass" data-kt-toggle="true" [attr.data-kt-toggle-state]="toggleState"
+    data-kt-toggle-target="body" [attr.data-kt-toggle-name]="toggleAttr">
+    <lib-keenicon name="double-left" class="fs-2 rotate-180"></lib-keenicon>
+  </div>
+  <!--end::Sidebar toggle-->
+</ng-container>

package/src/lib/modules/layout/sidebar/sidebar-logo/sidebar-logo.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarLogoComponent } from './sidebar-logo.component';
+
+describe('SidebarLogoComponent', () => {
+  let component: SidebarLogoComponent;
+  let fixture: ComponentFixture<SidebarLogoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SidebarLogoComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SidebarLogoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/layout/sidebar/sidebar-logo/sidebar-logo.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { LayoutService } from 'tango-app-ui-global';
+import { LayoutType } from 'tango-app-ui-global';
+
+@Component({
+  selector: 'lib-sidebar-logo',
+  templateUrl: './sidebar-logo.component.html',
+  styleUrls: ['./sidebar-logo.component.scss'],
+})
+export class SidebarLogoComponent implements OnInit, OnDestroy {
+  private unsubscribe: Subscription[] = [];
+  @Input() toggleButtonClass: string = '';
+  @Input() toggleEnabled: boolean;
+  @Input() toggleType: string = '';
+  @Input() toggleState: string = '';
+  currentLayoutType: LayoutType | null;
+
+  toggleAttr: string;
+
+  constructor(private layout: LayoutService) {}
+
+  ngOnInit(): void {
+    this.toggleAttr = `app-sidebar-${this.toggleType}`;
+    const layoutSubscr = this.layout.currentLayoutTypeSubject
+      .asObservable()
+      .subscribe((layout) => {
+        this.currentLayoutType = layout;
+      });
+    this.unsubscribe.push(layoutSubscr);
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+}