tango-app-ui-shared 3.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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