tango-app-ui-shared 3.0.0 → 3.0.1

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

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

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

@@ -1,13 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'lib-footer',
-  templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss'],
-})
-export class FooterComponent {
-  @Input() appFooterContainerCSSClass: string = '';
-
-  currentDateStr: string = new Date().getFullYear().toString();
-  constructor() {}
-}

package/src/lib/modules/layout/header/header-menu/header-menu.component.html

@@ -1,27 +0,0 @@
-<ng-container *ngIf="title$ | async as title">
-  <!-- begin::Title -->
-  <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 my-0 flex-column justify-content-center">
-    {{ title }}
-    <ng-container *ngIf="appPageTitleDescription">
-      <ng-container *ngIf="description$ | async as description">
-
-
-        <!--begin::Description-->
-        <span class="page-desc text-muted fs-7 fw-semibold" [ngClass]="{'pt-2': appPageTitleDirection === 'column'}">
-          <ng-container *ngIf="appPageTitleDirection === 'row'">
-            <!--begin::Separator-->
-            <span class="h-20px border-1 border-gray-300 border-start ms-3 mx-2"></span>
-            <!--end::Separator-->
-          </ng-container>
-
-          {{description}}
-        </span>
-        <!--end::Description-->
-      </ng-container>
-
-    </ng-container>
-
-  </h1>
-  <!-- end::Title -->
-
-</ng-container>

package/src/lib/modules/layout/header/header-menu/header-menu.component.scss

@@ -1,4 +0,0 @@
-:host {
-  height: inherit;
-  width: inherit;
-}

package/src/lib/modules/layout/header/header-menu/header-menu.component.spec.ts

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

package/src/lib/modules/layout/header/header-menu/header-menu.component.ts

@@ -1,38 +0,0 @@
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
-import { PageInfoService, PageLink } from 'tango-app-metronics';
-
-
-@Component({
-  selector: 'lib-header-menu',
-  templateUrl: './header-menu.component.html',
-  styleUrls: ['./header-menu.component.scss'],
-})
-export class HeaderMenuComponent implements OnInit, OnDestroy {
-  private unsubscribe: Subscription[] = [];
-
-  @Input() appPageTitleDirection: string = '';
-  @Input() appPageTitleDescription: boolean = true;
-
-  title$: Observable<string>;
-  description$: Observable<string>;
-
-  constructor(private pageInfo: PageInfoService, private cd:ChangeDetectorRef) {}
-
-  ngOnInit(): void {
-    this.title$ = this.pageInfo.title.asObservable();
-    this.description$ = this.pageInfo.description.asObservable();
-
-    this.title$.subscribe((e)=>{
-      this.cd.detectChanges()
-    })
-    this.description$.subscribe((e)=>{
-      this.cd.detectChanges()
-    })
-  }
-
-  ngOnDestroy() {
-    this.unsubscribe.forEach((sb) => sb.unsubscribe());
-  }
-}
-

package/src/lib/modules/layout/header/header.component.html

@@ -1,90 +0,0 @@
-<!--begin::Header container-->
-<div class="app-container" id="kt_app_header_container" [ngClass]="headerContainerCssClass">
-  <ng-container *ngIf="appSidebarDefaultCollapseDesktopEnabled">
-    <div class="app-sidebar-collapse-d-flex align-items-center me-3">
-      <!--begin::sidebar toggle-->
-      <div class="btn btn-icon w-auto px-0 btn-color-muted btn-active-icon-primary" data-kt-toggle="true"
-        data-kt-toggle-target="body" data-kt-toggle-mode="on" data-kt-toggle-name="app-sidebar-collapse">
-        <lib-keenicon name="double-right" class="fs-1"></lib-keenicon>
-      </div>
-      <!--end::sidebar toggle-->
-    </div>
-  </ng-container>
-
-  <ng-container *ngIf="appSidebarDisplay">
-    <!--begin::sidebar mobile toggle-->
-    <div class="d-flex align-items-center d-lg-none ms-n2 me-2" title="Show sidebar menu">
-      <div class="btn btn-icon btn-active-color-primary w-35px h-35px" id="kt_app_sidebar_mobile_toggle">
-        <lib-keenicon name="abstract-14" class="fs-1"></lib-keenicon>
-      </div>
-    </div>
-    <!--end::sidebar mobile toggle-->
-    <!--begin::Mobile logo-->
-    <div class="d-flex align-items-center flex-grow-1 flex-lg-grow-0">
-      <a routerLink="/dashboard" class="d-lg-none">
-        <img alt="Logo" src="./assets/media/logos/default-small.svg" class="h-30px" />
-      </a>
-    </div>
-    <!--end::Mobile logo-->
-  </ng-container>
-
-  <ng-container *ngIf="!appSidebarDisplay">
-    <!--begin::Logo-->
-    <div class="d-flex align-items-center flex-grow-1 flex-lg-grow-0 me-lg-15">
-      <a routerLink="/dashboard">
-        <ng-container *ngIf="currentLayoutType === 'dark-header'">
-          <img alt="Logo" src="./assets/media/logos/default-dark.svg"
-            class="h-20px h-lg-30px app-sidebar-logo-default" />
-        </ng-container>
-        <ng-container *ngIf="currentLayoutType !== 'dark-header'">
-          <img alt="Logo" src="./assets/media/logos/default.svg"
-            class="h-20px h-lg-30px app-sidebar-logo-default theme-light-show" />
-          <img alt="Logo" src="./assets/media/logos/default-dark.svg"
-            class="h-20px h-lg-30px app-sidebar-logo-default theme-dark-show" />
-        </ng-container>
-      </a>
-    </div>
-    <!--end::Logo-->
-  </ng-container>
-
-  <!--begin::Header wrapper-->
-  <div class="d-flex align-items-stretch justify-content-between flex-lg-grow-1" id="kt_app_header_wrapper">
-    <ng-container *ngIf="appHeaderDefaultContent === 'menu' && appHeaderDefaulMenuDisplay">
-      <!--begin::Menu wrapper-->
-      <div class="
-    app-header-menu
-    app-header-mobile-drawer
-    align-items-stretch
-" data-kt-drawer="true" data-kt-drawer-name="app-header-menu" data-kt-drawer-activate="{default: true, lg: false}"
-        data-kt-drawer-overlay="true" data-kt-drawer-width="225px" data-kt-drawer-direction="end"
-        data-kt-drawer-toggle="#kt_app_header_menu_toggle" data-kt-swapper="true"
-        data-kt-swapper-mode="{default: 'append', lg: 'prepend'}"
-        data-kt-swapper-parent="{default: '#kt_app_body', lg: '#kt_app_header_wrapper'}">
-        <!--begin::Menu-->
-        <lib-header-menu
-        appPageTitleDirection = ''
-        [appPageTitleDescription] = true
-        class="
-        menu
-        menu-rounded
-        menu-column
-        menu-lg-row
-        my-5
-        my-lg-0
-        align-items-stretch
-        fw-semibold
-        px-2 px-lg-0
-    " id="kt_app_header_menu" data-kt-menu="true"></lib-header-menu>
-        <!--end::Menu-->
-      </div>
-      <!--end::Menu wrapper-->
-    </ng-container>
-    <!-- <ng-container *ngIf="appHeaderDefaultContent === 'page-title' && appPageTitleDisplay">
-      <app-page-title #ktPageTitle class="page-title d-flex"></app-page-title>
-    </ng-container> -->
-    <lib-navbar class="app-navbar flex-shrink-0" [appHeaderDefaulMenuDisplay]="appHeaderDefaulMenuDisplay"
-      [isRtl]="false"></lib-navbar>
-  </div>
-  <!--end::Header wrapper-->
-</div>
-<!--end::Header container-->

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

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

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

@@ -1,139 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { NavigationCancel, NavigationEnd, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { ILayout, LayoutType } from 'tango-app-metronics';
-import { LayoutService } from 'tango-app-metronics';
-import { MenuComponent } from 'tango-app-metronics';
-
-@Component({
-  selector: 'lib-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss'],
-})
-export class HeaderComponent implements OnInit, OnDestroy {
-  private unsubscribe: Subscription[] = [];
-  // Public props
-  currentLayoutType: LayoutType | null;
-
-  appHeaderDisplay: boolean;
-  appHeaderDefaultFixedDesktop: boolean;
-  appHeaderDefaultFixedMobile: boolean;
-
-  appHeaderDefaultContainer: 'fixed' | 'fluid';
-  headerContainerCssClass: string = '';
-  appHeaderDefaultContainerClass: string = '';
-
-  appHeaderDefaultStacked: boolean;
-
-  // view
-  appSidebarDefaultCollapseDesktopEnabled: boolean;
-  appSidebarDisplay: boolean;
-  appHeaderDefaultContent: string = '';
-  appHeaderDefaulMenuDisplay: boolean;
-  appPageTitleDisplay: boolean;
-
-  constructor(private layout: LayoutService, private router: Router) {
-    this.routingChanges();
-  }
-
-  updateProps(config: ILayout) {
-    this.appHeaderDisplay = this.layout.getProp(
-      'app.header.display',
-      config
-    ) as boolean;
-    // view
-    this.appSidebarDefaultCollapseDesktopEnabled = this.layout.getProp(
-      'app.sidebar.default.collapse.desktop.enabled',
-      config
-    ) as boolean;
-    this.appSidebarDisplay = this.layout.getProp(
-      'app.sidebar.display',
-      config
-    ) as boolean;
-    this.appHeaderDefaultContent = this.layout.getProp(
-      'app.header.default.content',
-      config
-    ) as string;
-    this.appHeaderDefaulMenuDisplay = this.layout.getProp(
-      'app.header.default.menu.display',
-      config
-    ) as boolean;
-    this.appPageTitleDisplay = this.layout.getProp(
-      'app.pageTitle.display',
-      config
-    ) as boolean;
-
-    // body attrs and container css classes
-    this.appHeaderDefaultFixedDesktop = this.layout.getProp(
-      'app.header.default.fixed.desktop',
-      config
-    ) as boolean;
-    if (this.appHeaderDefaultFixedDesktop) {
-      document.body.setAttribute('data-kt-app-header-fixed', 'true');
-    }
-
-    this.appHeaderDefaultFixedMobile = this.layout.getProp(
-      'app.header.default.fixed.mobile',
-      config
-    ) as boolean;
-    if (this.appHeaderDefaultFixedMobile) {
-      document.body.setAttribute('data-kt-app-header-fixed-mobile', 'true');
-    }
-
-    this.appHeaderDefaultContainer = this.layout.getProp(
-      'appHeaderDefaultContainer',
-      config
-    ) as 'fixed' | 'fluid';
-    this.headerContainerCssClass =
-      this.appHeaderDefaultContainer === 'fixed'
-        ? 'container-xxl'
-        : 'container-fluid';
-
-    this.appHeaderDefaultContainerClass = this.layout.getProp(
-      'app.header.default.containerClass',
-      config
-    ) as string;
-    if (this.appHeaderDefaultContainerClass) {
-      this.headerContainerCssClass += ` ${this.appHeaderDefaultContainerClass}`;
-    }
-
-    this.appHeaderDefaultStacked = this.layout.getProp(
-      'app.header.default.stacked',
-      config
-    ) as boolean;
-    if (this.appHeaderDefaultStacked) {
-      document.body.setAttribute('data-kt-app-header-stacked', 'true');
-    }
-
-    // Primary header
-    // Secondary header
-  }
-
-  ngOnInit(): void {
-    const subscr = this.layout.layoutConfigSubject
-      .asObservable()
-      .subscribe((config: ILayout) => {
-        this.updateProps(config);
-      });
-    this.unsubscribe.push(subscr);
-    const layoutSubscr = this.layout.currentLayoutTypeSubject
-      .asObservable()
-      .subscribe((layout) => {
-        this.currentLayoutType = layout;
-      });
-    this.unsubscribe.push(layoutSubscr);
-  }
-
-  routingChanges() {
-    const routerSubscription = this.router.events.subscribe((event) => {
-      if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
-        MenuComponent.reinitialization();
-      }
-    });
-    this.unsubscribe.push(routerSubscription);
-  }
-
-  ngOnDestroy() {
-    this.unsubscribe.forEach((sb) => sb.unsubscribe());
-  }
-}

package/src/lib/modules/layout/header/navbar/navbar.component.html

@@ -1,92 +0,0 @@
-<!--begin::Search-->
-<div class="app-navbar-item align-items-stretch" [ngClass]="itemClass">
-  <!--begin::Search-->
-  <div id="kt_header_search" class="header-search d-flex align-items-stretch" data-kt-search-keypress="true"
-    data-kt-search-min-length="2" data-kt-search-enter="enter" data-kt-search-layout="menu"
-    data-kt-menu-trigger="{default: 'hover'}" data-kt-menu-overflow="false" data-kt-menu-permanent="true"
-    data-kt-menu-placement="bottom-end" data-kt-search="true">
-    <!--begin::Search toggle-->
-    <div class="d-flex align-items-center" data-kt-search-element="toggle" id="kt_header_search_toggle">
-      <div [ngClass]="btnClass">
-        <lib-keenicon name="magnifier" [class]="btnIconClass"></lib-keenicon>
-      </div>
-    </div>
-    <!--end::Search toggle-->
-    <!-- <lib-search-result-inner data-kt-search-element="content" data-kt-menu="true"
-      class="menu menu-sub menu-sub-dropdown p-7 w-325px w-md-375px"></lib-search-result-inner> -->
-  </div>
-
-</div>
-<!--end::Search-->
-
-<!--begin::Activities-->
-<div class="app-navbar-item" [ngClass]="itemClass">
-  <!--begin::Drawer toggle-->
-  <div [ngClass]="btnClass" id="kt_activities_toggle">
-    <lib-keenicon name="messages" class="fs-2"></lib-keenicon>
-  </div>
-  <!--end::Drawer toggle-->
-</div>
-<!--end::Activities-->
-
-<!--begin::Notifications-->
-<div class="app-navbar-item" [ngClass]="itemClass">
-  <!--begin::Menu- wrapper-->
-  <div [ngClass]="btnClass" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-attach="parent"
-    data-kt-menu-placement="bottom-end">
-    <lib-keenicon name="notification-status" class="fs-2"></lib-keenicon>
-  </div>
-  <!-- <lib-notifications-inner></lib-notifications-inner> -->
-  <!--end::Menu wrapper-->
-</div>
-<!--end::Notifications-->
-
-<!--begin::Chat-->
-<div class="app-navbar-item" [ngClass]="itemClass">
-  <div [ngClass]="btnClass" class="position-relative" id="kt_drawer_chat_toggle">
-    <lib-keenicon name="message-text-2" class="fs-2"></lib-keenicon>
-    <span
-      class="bullet bullet-dot bg-success h-6px w-6px position-absolute translate-middle top-0 start-50 animation-blink">
-    </span>
-  </div>
-</div>
-<!--end::Chat-->
-
-<!--begin::Quick links-->
-<div class="app-navbar-item" [ngClass]="itemClass">
-  <!--begin::Menu wrapper-->
-  <div [ngClass]="btnClass" data-kt-menu-trigger="click" data-kt-menu-attach="parent"
-    data-kt-menu-placement="bottom-end">
-    <lib-keenicon name="element-11" class="fs-2"></lib-keenicon>
-  </div>
-  <!--end::Menu wrapper-->
-  <!-- <lib-quick-links-inner></lib-quick-links-inner> -->
-</div>
-<!--end::Quick links-->
-
-<!--begin::Theme mode-->
-<div class="app-navbar-item" [ngClass]="itemClass">
-  <!-- <lib-theme-mode-switcher [toggleBtnClass]="btnClass" toggleBtnClass="{`btn-active-light-primary btn-custom ${toolbarButtonHeightClass}`}"></lib-theme-mode-switcher> -->
-</div>
-<!--end::Theme mode-->
-
-<!--begin::User menu-->
-<div class="app-navbar-item" [ngClass]="itemClass">
-  <!--begin::Menu wrapper-->
-  <div class="cursor-pointer symbol" [ngClass]="userAvatarClass" data-kt-menu-trigger="{default: 'click'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
-    <img src="./assets/media/avatars/300-3.jpg" />
-  </div>
-  <!-- <lib-user-inner data-kt-menu='true'></lib-user-inner> -->
-  <!--end::Menu wrapper-->
-</div>
-<!--end::User menu-->
-
-<!--begin::Header menu toggle-->
-<ng-container *ngIf="appHeaderDefaulMenuDisplay">
-  <div class="app-navbar-item d-lg-none ms-2 me-n3" title="Show header menu">
-    <div class="btn btn-icon btn-active-color-primary w-35px h-35px" id="kt_app_header_menu_toggle">
-      <lib-keenicon name="element-4" class="fs-1" [ngClass]="btnIconClass"></lib-keenicon>
-    </div>
-  </div>
-</ng-container>
-<!--end::Header menu toggle-->

package/src/lib/modules/layout/header/navbar/navbar.component.spec.ts

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

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

@@ -1,20 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'lib-navbar',
-  templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss'],
-})
-export class NavbarComponent implements OnInit {
-  @Input() appHeaderDefaulMenuDisplay: boolean;
-  @Input() isRtl: boolean;
-
-  itemClass: string = 'ms-1 ms-lg-3';
-  btnClass: string = 'btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px w-md-40px h-md-40px';
-  userAvatarClass: string = 'symbol-35px symbol-md-40px';
-  btnIconClass: string = 'fs-2 fs-md-1';
-
-  constructor() {}
-
-  ngOnInit(): void {}
-}

package/src/lib/modules/layout/header/page-title/page-title.component.html

@@ -1,32 +0,0 @@
-<ng-container *ngIf="title$ | async as title">
-
-  <ng-container *ngIf="appPageTitleBreadcrumb">
-    <ng-container *ngIf="bc$ | async as _bc">
-      <!-- <ng-container *ngIf="_bc.length > 0"> -->
-        <ng-container *ngIf="appPageTitleDirection === 'row'">
-          <span class="h-20px border-gray-300 border-start mx-4"></span>
-        </ng-container>
-        <!--begin::Breadcrumb-->
-
-        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0"
-          [ngClass]="{'pt-1': appPageTitleDirection === 'column'}">
-          <li *ngFor="let bc of _bc" class="breadcrumb-item"
-            [ngClass]="!bc.isSeparator && bc.isActive ? 'text-gray-900' : ''"
-            [ngClass]="!bc.isSeparator && !bc.isActive ? 'text-muted' : ''">
-            <ng-container *ngIf="!bc.isSeparator">
-              <a class="text-muted text-hover-primary" [routerLink]="bc.path">
-                {{ bc.title }}
-              </a>
-            </ng-container>
-            <ng-container *ngIf="bc.isSeparator">
-              <span class="bullet bg-gray-200 w-5px h-2px"></span>
-            </ng-container>
-          </li>
-          <li class="breadcrumb-item text-gray-900">{{ title }}</li>
-        </ul>
-        <!--end::Breadcrumb-->
-
-      <!-- </ng-container> -->
-    </ng-container>
-  </ng-container>
-</ng-container>

package/src/lib/modules/layout/header/page-title/page-title.component.ts

@@ -1,40 +0,0 @@
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
-import { PageInfoService, PageLink } from 'tango-app-metronics';
-
-@Component({
-  selector: 'lib-page-title',
-  templateUrl: './page-title.component.html',
-})
-export class PageTitleComponent implements OnInit, OnDestroy {
-  private unsubscribe: Subscription[] = [];
-
-  @Input() appPageTitleDirection: string = '';
-  @Input() appPageTitleBreadcrumb: boolean;
-  @Input() appPageTitleDescription: boolean;
-
-  title$: Observable<string>;
-  description$: Observable<string>;
-  bc$: Observable<Array<PageLink>>;
-
-  constructor(private pageInfo: PageInfoService, private cd:ChangeDetectorRef) {}
-
-  ngOnInit(): void {
-    this.title$ = this.pageInfo.title.asObservable();
-    this.description$ = this.pageInfo.description.asObservable();
-    this.bc$ = this.pageInfo.breadcrumbs.asObservable();
-    this.title$.subscribe((e)=>{
-      this.cd.detectChanges()
-    })
-    this.description$.subscribe((e)=>{
-      this.cd.detectChanges()
-    })
-    this.bc$.subscribe((e)=>{
-      this.cd.detectChanges()
-    })
-  }
-
-  ngOnDestroy() {
-    this.unsubscribe.forEach((sb) => sb.unsubscribe());
-  }
-}