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

package/src/lib/modules/layout/layout/layout.component.ts

@@ -1,425 +0,0 @@
-import {
-  Component,
-  OnInit,
-  ViewChild,
-  ElementRef,
-  OnDestroy,
-  HostListener,
-} from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { GlobalStateService, ILayout, LayoutType } from 'tango-app-ui-global';
-import { LayoutInitService, LayoutService } from 'tango-app-ui-global';
-import { AuthService } from '../../../services/auth.service';
-import { ToastService } from '../../../services/toast.service';
-
-@Component({
-  selector: 'lib-layout',
-  templateUrl: './layout.component.html',
-  styleUrls: ['./layout.component.scss'],
-})
-export class LayoutComponent implements OnInit, OnDestroy {
-  private unsubscribe: Subscription[] = [];
-
-  // Public variables
-  // page
-  pageContainerCSSClasses: string;
-  // header
-  appHeaderDefaultClass: string = '';
-  appHeaderDisplay: boolean;
-  appHeaderDefaultStickyEnabled: boolean;
-  appHeaderDefaultStickyAttributes: { [attrName: string]: string } = {};
-  appHeaderDefaultMinimizeEnabled: boolean;
-  appHeaderDefaultMinimizeAttributes: { [attrName: string]: string } = {};
-  // toolbar
-  appToolbarDisplay: boolean;
-  appToolbarLayout: 'classic' | 'accounting' | 'extended' | 'reports' | 'saas';
-  appToolbarCSSClass: string = '';
-  appToolbarSwapEnabled: boolean;
-  appToolbarSwapAttributes: { [attrName: string]: string } = {};
-  appToolbarStickyEnabled: boolean;
-  appToolbarStickyAttributes: { [attrName: string]: string } = {};
-  appToolbarMinimizeEnabled: boolean;
-  appToolbarMinimizeAttributes: { [attrName: string]: string } = {};
-
-  // content
-  appContentContiner?: 'fixed' | 'fluid';
-  appContentContainerClass: string;
-  contentCSSClasses: string;
-  contentContainerCSSClass: string;
-  // sidebar
-  appSidebarDefaultClass: string;
-  appSidebarDefaultDrawerEnabled: boolean;
-  appSidebarDefaultDrawerAttributes: { [attrName: string]: string } = {};
-  appSidebarDisplay: boolean;
-  appSidebarDefaultStickyEnabled: boolean;
-  appSidebarDefaultStickyAttributes: { [attrName: string]: string } = {};
-  @ViewChild('ktSidebar', { static: true }) ktSidebar: ElementRef;
-  /// sidebar panel
-  appSidebarPanelDisplay: boolean;
-  // footer
-  appFooterDisplay: boolean;
-  appFooterCSSClass: string = '';
-  appFooterContainer: string = '';
-  appFooterContainerCSSClass: string = '';
-  appFooterFixedDesktop: boolean;
-  appFooterFixedMobile: boolean;
-
-  // scrolltop
-  scrolltopDisplay: boolean;
-
-  @ViewChild('ktAside', { static: true }) ktAside: ElementRef;
-  @ViewChild('ktHeaderMobile', { static: true }) ktHeaderMobile: ElementRef;
-  @ViewChild('ktHeader', { static: true }) ktHeader: ElementRef;
-
-  constructor(
-    private initService: LayoutInitService,
-    private layout: LayoutService,
-    private router: Router,
-    private activatedRoute: ActivatedRoute,
-    private authService:AuthService,
-    private toastService:ToastService,
-    private gs:GlobalStateService
-  ) {
-    
-    // define layout type and load layout
-    this.router.events.subscribe((event) => {
-      if (event instanceof NavigationEnd) {
-        const currentLayoutType = this.layout.currentLayoutTypeSubject.value;
-
-        const nextLayoutType: LayoutType =
-          this.activatedRoute?.firstChild?.snapshot.data.layout ||
-          this.layout.getBaseLayoutTypeFromLocalStorage();
-
-        if (currentLayoutType !== nextLayoutType || !currentLayoutType) {
-          this.layout.currentLayoutTypeSubject.next(nextLayoutType);
-          this.initService.reInitProps(nextLayoutType);
-        }
-      }
-    });
-  }
-
-  ngOnInit() {
-    const subscr = this.layout.layoutConfigSubject
-      .asObservable()
-      .subscribe((config) => {
-        this.updateProps(config);
-      });
-    this.unsubscribe.push(subscr);
-  }
-
-  updateProps(config: ILayout) {
-    this.scrolltopDisplay = this.layout.getProp(
-      'scrolltop.display',
-      config
-    ) as boolean;
-    this.pageContainerCSSClasses =
-      this.layout.getStringCSSClasses('pageContainer');
-    this.appHeaderDefaultClass = this.layout.getProp(
-      'app.header.default.class',
-      config
-    ) as string;
-    this.appHeaderDisplay = this.layout.getProp(
-      'app.header.display',
-      config
-    ) as boolean;
-    this.appFooterDisplay = this.layout.getProp(
-      'app.footer.display',
-      config
-    ) as boolean;
-    this.appSidebarDisplay = this.layout.getProp(
-      'app.sidebar.display',
-      config
-    ) as boolean;
-    this.appSidebarPanelDisplay = this.layout.getProp(
-      'app.sidebar-panel.display',
-      config
-    ) as boolean;
-    this.appToolbarDisplay = this.layout.getProp(
-      'app.toolbar.display',
-      config
-    ) as boolean;
-    this.contentCSSClasses = this.layout.getStringCSSClasses('content');
-    this.contentContainerCSSClass =
-      this.layout.getStringCSSClasses('contentContainer');
-    this.appContentContiner = this.layout.getProp(
-      'app.content.container',
-      config
-    ) as 'fixed' | 'fluid';
-    this.appContentContainerClass = this.layout.getProp(
-      'app.content.containerClass',
-      config
-    ) as string;
-    // footer
-    if (this.appFooterDisplay) {
-      this.updateFooter(config);
-    }
-    // sidebar
-    if (this.appSidebarDisplay) {
-      this.updateSidebar(config);
-    }
-    // header
-    if (this.appHeaderDisplay) {
-      this.updateHeader(config);
-    }
-    // toolbar
-    if (this.appToolbarDisplay) {
-      this.updateToolbar(config);
-    }
-  }
-
-  updateSidebar(config: ILayout) {
-    this.appSidebarDefaultClass = this.layout.getProp(
-      'app.sidebar.default.class',
-      config
-    ) as string;
-
-    this.appSidebarDefaultDrawerEnabled = this.layout.getProp(
-      'app.sidebar.default.drawer.enabled',
-      config
-    ) as boolean;
-    if (this.appSidebarDefaultDrawerEnabled) {
-      this.appSidebarDefaultDrawerAttributes = this.layout.getProp(
-        'app.sidebar.default.drawer.attributes',
-        config
-      ) as { [attrName: string]: string };
-    }
-
-    this.appSidebarDefaultStickyEnabled = this.layout.getProp(
-      'app.sidebar.default.sticky.enabled',
-      config
-    ) as boolean;
-    if (this.appSidebarDefaultStickyEnabled) {
-      this.appSidebarDefaultStickyAttributes = this.layout.getProp(
-        'app.sidebar.default.sticky.attributes',
-        config
-      ) as { [attrName: string]: string };
-    }
-
-    setTimeout(() => {
-      const sidebarElement = document.getElementById('kt_app_sidebar');
-      // sidebar
-      if (this.appSidebarDisplay && sidebarElement) {
-        const sidebarAttributes = sidebarElement
-          .getAttributeNames()
-          .filter((t) => t.indexOf('data-') > -1);
-        sidebarAttributes.forEach((attr) =>
-          sidebarElement.removeAttribute(attr)
-        );
-
-        if (this.appSidebarDefaultDrawerEnabled) {
-          for (const key in this.appSidebarDefaultDrawerAttributes) {
-            if (this.appSidebarDefaultDrawerAttributes.hasOwnProperty(key)) {
-              sidebarElement.setAttribute(
-                key,
-                this.appSidebarDefaultDrawerAttributes[key]
-              );
-            }
-          }
-        }
-
-        if (this.appSidebarDefaultStickyEnabled) {
-          for (const key in this.appSidebarDefaultStickyAttributes) {
-            if (this.appSidebarDefaultStickyAttributes.hasOwnProperty(key)) {
-              sidebarElement.setAttribute(
-                key,
-                this.appSidebarDefaultStickyAttributes[key]
-              );
-            }
-          }
-        }
-      }
-    }, 0);
-  }
-
-  updateHeader(config: ILayout) {
-    this.appHeaderDefaultStickyEnabled = this.layout.getProp(
-      'app.header.default.sticky.enabled',
-      config
-    ) as boolean;
-    if (this.appHeaderDefaultStickyEnabled) {
-      this.appHeaderDefaultStickyAttributes = this.layout.getProp(
-        'app.header.default.sticky.attributes',
-        config
-      ) as { [attrName: string]: string };
-    }
-
-    this.appHeaderDefaultMinimizeEnabled = this.layout.getProp(
-      'app.header.default.minimize.enabled',
-      config
-    ) as boolean;
-    if (this.appHeaderDefaultMinimizeEnabled) {
-      this.appHeaderDefaultMinimizeAttributes = this.layout.getProp(
-        'app.header.default.minimize.attributes',
-        config
-      ) as { [attrName: string]: string };
-    }
-
-    setTimeout(() => {
-      const headerElement = document.getElementById('kt_app_header');
-      // header
-      if (this.appHeaderDisplay && headerElement) {
-        const headerAttributes = headerElement
-          .getAttributeNames()
-          .filter((t) => t.indexOf('data-') > -1);
-        headerAttributes.forEach((attr) => headerElement.removeAttribute(attr));
-
-        if (this.appHeaderDefaultStickyEnabled) {
-          for (const key in this.appHeaderDefaultStickyAttributes) {
-            if (this.appHeaderDefaultStickyAttributes.hasOwnProperty(key)) {
-              headerElement.setAttribute(
-                key,
-                this.appHeaderDefaultStickyAttributes[key]
-              );
-            }
-          }
-        }
-
-        if (this.appHeaderDefaultMinimizeEnabled) {
-          for (const key in this.appHeaderDefaultMinimizeAttributes) {
-            if (this.appHeaderDefaultMinimizeAttributes.hasOwnProperty(key)) {
-              headerElement.setAttribute(
-                key,
-                this.appHeaderDefaultMinimizeAttributes[key]
-              );
-            }
-          }
-        }
-      }
-    }, 0);
-  }
-
-  updateFooter(config: ILayout) {
-    this.appFooterCSSClass = this.layout.getProp('app.footer.class', config) as string;
-    this.appFooterContainer = this.layout.getProp('app.footer.container', config) as string;
-    this.appFooterContainerCSSClass = this.layout.getProp('app.footer.containerClass', config) as string;
-    if (this.appFooterContainer === 'fixed') {
-      this.appFooterContainerCSSClass += ' container-xxl';
-    } else {
-      if (this.appFooterContainer === 'fluid') {
-        this.appFooterContainerCSSClass += ' container-fluid';
-      }
-    }
-
-    this.appFooterFixedDesktop = this.layout.getProp('app.footer.fixed.desktop', config) as boolean;
-    if (this.appFooterFixedDesktop) {
-      document.body.setAttribute('data-kt-app-footer-fixed', 'true')
-    }
-
-    this.appFooterFixedMobile = this.layout.getProp('app.footer.fixed.mobile') as boolean;
-    if (this.appFooterFixedMobile) {
-      document.body.setAttribute('data-kt-app-footer-fixed-mobile', 'true')
-    }
-  }
-
-  updateToolbar(config: ILayout) {
-    this.appToolbarLayout = this.layout.getProp(
-      'app.toolbar.layout',
-      config
-    ) as 'classic' | 'accounting' | 'extended' | 'reports' | 'saas';
-    this.appToolbarSwapEnabled = this.layout.getProp(
-      'app.toolbar.swap.enabled',
-      config
-    ) as boolean;
-    if (this.appToolbarSwapEnabled) {
-      this.appToolbarSwapAttributes = this.layout.getProp(
-        'app.toolbar.swap.attributes',
-        config
-      ) as { [attrName: string]: string };
-    }
-
-    this.appToolbarStickyEnabled = this.layout.getProp(
-      'app.toolbar.sticky.enabled',
-      config
-    ) as boolean;
-    if (this.appToolbarStickyEnabled) {
-      this.appToolbarStickyAttributes = this.layout.getProp(
-        'app.toolbar.sticky.attributes',
-        config
-      ) as { [attrName: string]: string };
-    }
-
-    this.appToolbarCSSClass =
-      (this.layout.getProp('app.toolbar.class', config) as string) || '';
-    this.appToolbarMinimizeEnabled = this.layout.getProp(
-      'app.toolbar.minimize.enabled',
-      config
-    ) as boolean;
-    if (this.appToolbarMinimizeEnabled) {
-      this.appToolbarMinimizeAttributes = this.layout.getProp(
-        'app.toolbar.minimize.attributes',
-        config
-      ) as { [attrName: string]: string };
-      this.appToolbarCSSClass += ' app-toolbar-minimize';
-    }
-
-    setTimeout(() => {
-      const toolbarElement = document.getElementById('kt_app_toolbar');
-      // toolbar
-      if (this.appToolbarDisplay && toolbarElement) {
-        const toolbarAttributes = toolbarElement
-          .getAttributeNames()
-          .filter((t) => t.indexOf('data-') > -1);
-        toolbarAttributes.forEach((attr) =>
-          toolbarElement.removeAttribute(attr)
-        );
-
-        if (this.appToolbarSwapEnabled) {
-          for (const key in this.appToolbarSwapAttributes) {
-            if (this.appToolbarSwapAttributes.hasOwnProperty(key)) {
-              toolbarElement.setAttribute(
-                key,
-                this.appToolbarSwapAttributes[key]
-              );
-            }
-          }
-        }
-
-        if (this.appToolbarStickyEnabled) {
-          for (const key in this.appToolbarStickyAttributes) {
-            if (this.appToolbarStickyAttributes.hasOwnProperty(key)) {
-              toolbarElement.setAttribute(
-                key,
-                this.appToolbarStickyAttributes[key]
-              );
-            }
-          }
-        }
-
-        if (this.appToolbarMinimizeEnabled) {
-          for (const key in this.appToolbarMinimizeAttributes) {
-            if (this.appToolbarMinimizeAttributes.hasOwnProperty(key)) {
-              toolbarElement.setAttribute(
-                key,
-                this.appToolbarMinimizeAttributes[key]
-              );
-            }
-          }
-        }
-      }
-    }, 0);
-  }
-
-  ngOnDestroy() {
-    this.unsubscribe.forEach((sb) => sb.unsubscribe());
-  }
-  previousScroll = 0;
-  // appHeaderDisplay = true; // Initially visible
-  isToolbarFixed = false;
-  @HostListener('window:scroll', [])
-  onScroll(): void {
-    const currentScroll = window.scrollY;
-
-    if (currentScroll > this.previousScroll && currentScroll > 100) {
-      // Hide header on scroll down
-      this.appHeaderDisplay = false;
-      this.isToolbarFixed = true; // Fix toolbar
-    } else {
-      // Show header on scroll up
-      this.appHeaderDisplay = true;
-      this.isToolbarFixed = currentScroll > 100; // Keep toolbar fixed if scrolled beyond 100px
-    }
-
-    this.previousScroll = currentScroll;
-  }
-}

package/src/lib/modules/layout/layout.module.ts

@@ -1,129 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { InlineSVGModule } from 'ng-inline-svg-2';
-import { RouterModule, Routes } from '@angular/router';
-import {
-  NgbDropdownModule,
-  NgbProgressbarModule,
-  NgbTooltipModule,
-} from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule } from '@ngx-translate/core';
-// import { ExtrasModule } from '../partials/layout/extras/extras.module';
-// import {
-//   DrawersModule,
-//   DropdownMenusModule,
-//   ModalsModule,
-//   EngagesModule,
-// } from '../partials';
-// import { EngagesComponent } from '../partials/layout/engages/engages.component';
-// import { ThemeModeModule } from '../partials/layout/theme-mode-switcher/theme-mode.module';
-import { KeeniconComponent } from './keenicon/keenicon.component';
-import { TranslationModule } from '../../i18n';
-import { LayoutComponent } from './layout/layout.component';
-import { HeaderComponent } from './header/header.component';
-import { ContentComponent } from './content/content.component';
-import { FooterComponent } from './footer/footer.component';
-import { ScriptsInitComponent } from './scripts-init/scripts-init.component';
-import { ToolbarComponent } from './toolbar/toolbar.component';
-import { PageTitleComponent } from './header/page-title/page-title.component';
-import { HeaderMenuComponent } from './header/header-menu/header-menu.component';
-import { SidebarComponent } from './sidebar/sidebar.component';
-import { SidebarLogoComponent } from './sidebar/sidebar-logo/sidebar-logo.component';
-import { SidebarMenuComponent } from './sidebar/sidebar-menu/sidebar-menu.component';
-import { SidebarFooterComponent } from './sidebar/sidebar-footer/sidebar-footer.component';
-import { NavbarComponent } from './header/navbar/navbar.component';
-import { AccountingComponent } from './toolbar/accounting/accounting.component';
-import { ClassicComponent } from './toolbar/classic/classic.component';
-import { ExtendedComponent } from './toolbar/extended/extended.component';
-import { ReportsComponent } from './toolbar/reports/reports.component';
-import { SaasComponent } from './toolbar/saas/saas.component';
-import { Routing } from '../../routes/routing';
-import { LayoutScrollTopComponent } from './scroll-top/scroll-top.component';
-import { CommonSharedModule } from '../common/common-shared.module';
-import { FormsModule } from '@angular/forms';
-import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
-import { ClientSettingsComponent } from './toolbar/client-settings/client-settings.component';
-import { DatepickerComponent } from './toolbar/datepicker/datepicker.component';
-import { DateSingleSelectComponent } from './toolbar/date-single-select/date-single-select.component';
-import { SingleStoreComponent } from './toolbar/single-store/single-store.component';
-import { NotificationsInnerComponent } from './header/notifications-inner/notifications-inner.component';
-import { CsmAssignConfirmationComponent } from './components/csm-assign-confirmation/csm-assign-confirmation.component';
-import { TrafficHeaderComponent } from './toolbar/traffic-header/traffic-header/traffic-header.component';
-import { TraxHeaderComponent } from './toolbar/trax-header/trax-header.component';
-import { SingleStoredateComponent } from './toolbar/single-storedate/single-storedate.component';
-import { StoresingleComponent } from './toolbar/storesingle/storesingle.component';
-import { TraxWithoutdateComponent } from './toolbar/trax-withoutdate/trax-withoutdate.component';
-import { TrafficNobComponent } from './toolbar/traffic-nob/traffic-nob.component';
-import { MetricsHeaderComponent } from './toolbar/metrics-header/metrics-header.component';
-import { SingleClientstoreDateComponent } from './toolbar/single-clientstore-date/single-clientstore-date.component';
-import { ZoneHeaderComponent } from './toolbar/zone-header/zone-header.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: LayoutComponent,
-    children: Routing,
-  },
-];
-
-@NgModule({
-  declarations: [
-    LayoutComponent,
-    HeaderComponent,
-    ContentComponent,
-    FooterComponent,
-    ScriptsInitComponent,
-    ToolbarComponent,
-    PageTitleComponent,
-    HeaderMenuComponent,
-    // EngagesComponent,
-    SidebarComponent,
-    SidebarLogoComponent,
-    SidebarMenuComponent,
-    SidebarFooterComponent,
-    NavbarComponent,
-    AccountingComponent,
-    ClassicComponent,
-    ExtendedComponent,
-    ReportsComponent,
-    SaasComponent,
-    KeeniconComponent,
-    LayoutScrollTopComponent,
-    ClientSettingsComponent,
-    DatepickerComponent,
-    DateSingleSelectComponent,
-    SingleStoreComponent,
-    NotificationsInnerComponent,
-    CsmAssignConfirmationComponent,
-    TrafficHeaderComponent,
-    TraxHeaderComponent,
-    SingleStoredateComponent,
-    StoresingleComponent,
-    TraxWithoutdateComponent,
-    TrafficNobComponent,
-    MetricsHeaderComponent,
-    SingleClientstoreDateComponent,
-    ZoneHeaderComponent
-  ],
-  imports: [
-    CommonModule,
-    RouterModule.forChild(routes),
-    TranslationModule,
-    InlineSVGModule,
-    NgbDropdownModule,
-    NgbProgressbarModule,
-    // ExtrasModule,
-    // ModalsModule,
-    // DrawersModule,
-    // EngagesModule,
-    // DropdownMenusModule,
-    NgbTooltipModule,
-    TranslateModule,
-    // ThemeModeModule,
-    CommonSharedModule,
-    FormsModule,
-    NgxDaterangepickerMd.forRoot()
-  ],
-  exports: [RouterModule],
-})
-export class LayoutModule {}

package/src/lib/modules/layout/scripts-init/scripts-init.component.ts

@@ -1,81 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ResolveEnd, Router } from '@angular/router';
-import { filter } from 'rxjs/operators';
-import { Observable, Subscription } from 'rxjs';
-import {
-  ToggleComponent,
-  ScrollTopComponent,
-  DrawerComponent,
-  StickyComponent,
-  MenuComponent,
-  ScrollComponent,
-} from 'tango-app-ui-global';
-import { Title } from '@angular/platform-browser';
-import { LayoutService, PageInfoService } from 'tango-app-ui-global';
-
-@Component({
-  selector: 'lib-scripts-init',
-  templateUrl: './scripts-init.component.html',
-})
-export class ScriptsInitComponent implements OnInit, OnDestroy {
-  private unsubscribe: Subscription[] = [];
-  constructor(
-    private layout: LayoutService,
-    private pageInfo: PageInfoService,
-    private router: Router,
-    private titleService: Title,
-  ) {
-    const initPageInfo = () => {
-      setTimeout(() => {
-        // this.pageInfo.calculateTitle();
-        // this.pageInfo.calculateBreadcrumbs();
-
-        this.pageInfo.title.asObservable().subscribe((title) => {
-          this.titleService.setTitle(title + ' - TangoEye');
-        });
-      }, 10);
-    };
-
-    initPageInfo();
-    // subscribe to router events
-    this.router.events
-      .pipe(filter((event) => event instanceof ResolveEnd))
-      .subscribe(initPageInfo);
-  }
-
-  ngOnInit(): void {
-    this.pluginsInitialization();
-    const layoutUpdateSubscription = this.layout.layoutConfigSubject
-      .asObservable()
-      .subscribe(() => {
-        this.pluginsReInitialization();
-      });
-    this.unsubscribe.push(layoutUpdateSubscription);
-  }
-
-  pluginsInitialization() {
-    setTimeout(() => {
-      ToggleComponent.bootstrap();
-      ScrollTopComponent.bootstrap();
-      DrawerComponent.bootstrap();
-      StickyComponent.bootstrap();
-      MenuComponent.bootstrap();
-      ScrollComponent.bootstrap();
-    }, 200);
-  }
-
-  pluginsReInitialization() {
-    setTimeout(() => {
-      ToggleComponent.reinitialization();
-      ScrollTopComponent.reinitialization();
-      DrawerComponent.reinitialization();
-      StickyComponent.bootstrap();
-      MenuComponent.reinitialization();
-      ScrollComponent.reinitialization();
-    }, 100);
-  }
-
-  ngOnDestroy() {
-    this.unsubscribe.forEach((sb) => sb.unsubscribe());
-  }
-}

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

@@ -1 +0,0 @@
-<lib-keenicon name="arrow-up" class="text-white fw-bold"></lib-keenicon>