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

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

@@ -1,75 +0,0 @@
-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

@@ -1,70 +0,0 @@
-<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

@@ -1,57 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

@@ -1,26 +0,0 @@
-<!--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

@@ -1,23 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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());
-  }
-}