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

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-ui-global';
+import { LayoutService } from 'tango-app-ui-global';
+import { MenuComponent } from 'tango-app-ui-global';
+
+@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,156 @@
+<!--begin::Notifications-->
+<div class="app-navbar-item" [ngClass]="itemClass" *ngIf="showNotification">
+  <!--begin::Menu- wrapper-->
+  <div [ngClass]="btnClass" (click)="showDropdown = !showDropdown">
+    <span *ngIf="!notification.length">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24" fill="none">
+        <path
+          d="M10.6779 2.4V3.00688L11.2715 3.1335C14.1674 3.75125 16.3919 6.45842 16.3919 9.75V10.6313C16.3919 13.0131 17.2249 15.3087 18.7338 17.0963L18.7352 17.0979L19.0636 17.4846C19.0639 17.485 19.0642 17.4853 19.0645 17.4857C19.2557 17.7136 19.3048 18.0393 19.185 18.3174C19.0641 18.5983 18.8153 18.75 18.5704 18.75H1.42848C1.1825 18.75 0.933931 18.5974 0.815017 18.3193C0.695108 18.0388 0.744592 17.7123 0.933996 17.4853C0.934445 17.4848 0.934894 17.4843 0.935344 17.4837L1.26312 17.0985L1.26473 17.0966C2.77599 15.3086 3.60697 13.0127 3.60697 10.6313V9.75C3.60697 6.45434 5.79488 3.75145 8.72559 3.13388L9.32094 3.00843V2.4V1.5C9.32094 1.05052 9.65806 0.75 9.99944 0.75C10.3408 0.75 10.6779 1.05052 10.6779 1.5V2.4ZM9.99944 23.25C9.44983 23.25 8.91726 23.023 8.52034 22.6062C8.29649 22.3712 8.12457 22.0708 8.01769 21.75H11.9812C11.8743 22.0708 11.7024 22.3712 11.4785 22.6062C11.0856 23.0188 10.5146 23.25 9.99944 23.25Z"
+          stroke="#00A3FF" stroke-width="1.5" />
+      </svg>
+    </span>
+    <span *ngIf="notification.length">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24" fill="none">
+        <path
+          d="M11.4279 2.4V1.5C11.4279 0.671719 10.7896 0 9.99944 0C9.2093 0 8.57094 0.671719 8.57094 1.5V2.4C5.27202 3.09516 2.85697 6.12188 2.85697 9.75V10.6313C2.85697 12.8391 2.08648 14.9625 0.691915 16.6125L0.360862 17.0016C-0.0128805 17.4469 -0.10505 18.075 0.125384 18.6141C0.355818 19.1531 0.866013 19.5 1.42848 19.5H18.5704C19.1329 19.5 19.6418 19.1531 19.8739 18.6141C20.106 18.075 20.0123 17.4469 19.6373 17.0016L19.307 16.6125C17.9142 14.9625 17.1419 12.8391 17.1419 10.6313V9.75C17.1419 9.39947 17.119 9.05455 17.0746 8.71681C16.5845 8.8999 16.054 9 15.5 9C13.0147 9 11 6.98528 11 4.5C11 3.74877 11.1841 3.04054 11.5096 2.41795C11.4824 2.4118 11.4552 2.40582 11.4279 2.4Z"
+          fill="#00A3FF" />
+        <path
+          d="M7.97723 23.1234C8.51291 23.6859 9.24055 24 9.99944 24C10.7181 24 11.486 23.6859 12.0216 23.1234C12.5573 22.5609 12.8564 21.7547 12.8564 21H7.14245C7.14245 21.7547 7.44154 22.5609 7.97723 23.1234Z"
+          fill="#00A3FF" />
+        <circle cx="16" cy="4" r="4" fill="#F04438" />
+      </svg>
+    </span>
+    <div class="menu menu-sub menu-sub-dropdown menu-column w-450px w-lg-425px notificationMenu" *ngIf="showDropdown">
+      <div class="card topbar">
+        <div class="card-header">
+          <h3 class="title-notify mt-10 mb-6">
+            Notifications
+          </h3>
+          <div class="card-toolbar">
+            <div class="d-flex mt-5">
+              <div class="d-flex align-items-center position-relative my-1">
+                <div (click)="redirecttonotification()" [routerLink]="['/notifications/alerts?tab=download']" class="text-primary">View All <span><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M14 9.83333V14.8333C14 15.2754 13.8244 15.6993 13.5118 16.0118C13.1993 16.3244 12.7754 16.5 12.3333 16.5H3.16667C2.72464 16.5 2.30072 16.3244 1.98816 16.0118C1.67559 15.6993 1.5 15.2754 1.5 14.8333V5.66667C1.5 5.22464 1.67559 4.80072 1.98816 4.48816C2.30072 4.17559 2.72464 4 3.16667 4H8.16667M11.5 1.5H16.5M16.5 1.5V6.5M16.5 1.5L7.33333 10.6667" stroke="#009BF3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                  </span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+       
+        <ng-container *ngIf="loading">
+          <div class="row loader  d-flex justify-content-center align-items-center">
+            <div class="shimmer">
+              <div class="wrapper">
+                <div class="stroke animate title"></div>
+                <div class="stroke animate link"></div>
+                <div class="stroke animate description"></div>
+              </div>
+            </div>
+            <div class="shimmer">
+              <div class="wrapper">
+                <div class="stroke animate title"></div>
+                <div class="stroke animate link"></div>
+                <div class="stroke animate description"></div>
+              </div>
+            </div>
+
+          </div>
+        </ng-container>
+        <ng-container *ngIf="noData && !loading">
+          <div class="row">
+            <div class="col-lg-12 mb-3">
+              <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                <img class="img-src w-25" src="./assets/tango/Icons/noNotification.svg" alt="">
+                <span class="notificationAlign mt-10">No New Notification</span>
+                <span class="noNotification mt-2">Any new notification will be shown here.</span>
+              </div>
+            </div>
+          </div>
+        </ng-container>
+
+        <div class="alertscroll" *ngIf="notification.length">
+          <div *ngFor="let item of notification" class="mh-200px ng-star-inserted" style="overflow: auto;">
+            <div class="d-flex flex-stack py-3 mx-4 ng-star-inserted">
+              <div class="d-flex align-items-center">
+                <div class="symbol symbol-35px me-4"><span class="symbol-label bg-light-primary"><span
+                      class="svg-icon svg-icon-2 svg-icon-primary"></span><span
+                      class="svg-icon svg-icon-2 svg-icon-primary"><svg xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24"
+                        version="1.1" class="ng-star-inserted">
+                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                          <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                          <path
+                            d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z"
+                            fill="#009EF7" fill-rule="nonzero" opacity="0.3"></path>
+                          <path
+                            d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z"
+                            fill="#009EF7" fill-rule="nonzero"></path>
+                        </g>
+                      </svg></span></span></div>
+                <div class="mb-0 me-2" style="text-align: left;">
+                  <div class="alert-title">{{ item._source.title }}</div>
+                  <div class="alt-desc">{{ item._source.description }}</div>
+                </div>
+              </div><span class="badge badge-light fs-9">{{ item._source.date|customDateFormat }}</span>
+            </div>
+          </div>
+          <div class="text-center border-top">
+            <a (click)="viewAll('alerts')" class="btn btn-color-gray-600 btn-active-color-primary my-2">
+              View All
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="w-450px position-fixed end-0 bottom-0 transition">
+    <div class="mb-4" *ngFor="let item of pushNotificationList;let i = index">
+      <div class="alertbg card" *ngIf="item._score" @fadeIn @fadeOut>
+      <div class="row m-2">
+        <div class="col-1 align-items-start mt-1">
+          <span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <g clip-path="url(#clip0_12254_112653)">
+                <path
+                  d="M9.99935 13.3334V10M9.99935 6.66669H10.0077M18.3327 10C18.3327 14.6024 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6024 1.66602 10C1.66602 5.39765 5.39698 1.66669 9.99935 1.66669C14.6017 1.66669 18.3327 5.39765 18.3327 10Z"
+                  stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+              </g>
+              <defs>
+                <clipPath id="clip0_12254_112653">
+                  <rect width="20" height="20" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+          </span>
+        </div>
+        <div class="col-10 align-items-start">
+          <span class="alert-title">
+            Notification
+          </span>
+          <div>
+            {{item._source.description}}
+          </div>
+        </div>
+        <div class="col-1 align-items-start cursor-pointer" (click)="notificationPushUpdate(item,'')">
+          <span><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M15 5L5 15M5 5L15 15" stroke="#667085" stroke-width="1.67" stroke-linecap="round"
+                stroke-linejoin="round" />
+            </svg>
+          </span>
+        </div>
+        <!--  -->
+        <div class="d-flex my-2 justify-content-around" >
+          <div [ngClass]="!['remind','cancel'].includes(button.redirectionUrl) ? '' : 'mt-2'" *ngFor="let button of item._source?.alertCta">
+            <button *ngIf="!['remind','cancel'].includes(button.redirectionUrl)" (click)="notificationPushUpdate(item,button)"
+              type="button" tabindex="0" class=" ms-10 btn btn-sm btn-primary ng-star-inserted"
+              style="white-space: nowrap;"><span class="submit">{{ button.buttonName }} </span></button>
+            <span *ngIf="['remind','cancel'].includes(button.redirectionUrl)" (click)="notificationPushUpdate(item,button)"
+              class="text-primary mx-6 remindlatertext cursor-pointer">{{ button.buttonName }} </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,223 @@
+.nav-line-tabs .nav-item .nav-link.active {
+  border-radius: 6px !important;
+  background: var(--Primary-50, #EAF8FF) !important;
+  padding: 10px 14px !important;
+  border-bottom: none !important;
+  width: 100% !important;
+}
+
+.nav-line-tabs.nav-line-tabs-2x {
+  background: var(--Gray-50, #F9FAFB) !important;
+  padding: 6px !important;
+  border-radius: 8px !important;
+  border: 1px solid var(--Gray-100, #F2F4F7) !important;
+}
+
+.title-name {
+  color: var(--Primary-700, #009BF3) !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  line-height: 20px;
+}
+
+.title-desc {
+  color: var(--Gray-500, #667085) !important;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  line-height: 20px;
+}
+
+.title-notify {
+  color: var(--Gray-900, #101828) !important;
+  font-size: 20px !important;
+  font-weight: 500 !important;
+  line-height: 30px;
+}
+
+.alert-title {
+  color: var(--Gray-900, #101828);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 28px;
+  text-align: left;
+}
+
+.alt-desc {
+  color: var(--Gray-500, #667085) !important;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  line-height: 20px;
+  width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.alertscroll {
+  max-height: 300px;
+  overflow-y: scroll;
+}
+
+.loader {
+  .title {
+    width: 65%;
+  }
+
+  .link {
+    width: 85%;
+  }
+
+  .description {
+    width: 95%;
+  }
+
+  .shimmer {
+    padding: 15px;
+    width: 95%;
+    height: 120px;
+    margin: 10px auto;
+    background: #ffffff;
+  }
+
+  .shimmer .image-card {
+    height: 90px;
+    width: 90px;
+    float: right;
+    border-radius: 8px;
+  }
+
+  .stroke {
+    height: 15px;
+    background: #777;
+    margin-top: 20px;
+  }
+
+  .wrapper {
+    width: 0px;
+    animation: fullView 0.5s forwards linear;
+  }
+
+  @keyframes fullView {
+    100% {
+      width: 100%;
+    }
+  }
+
+  .animate {
+    animation: shimmer 3s;
+    animation-iteration-count: infinite;
+    background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
+    background-size: 1000px 100%;
+  }
+
+  @keyframes shimmer {
+    from {
+      background-position: -1000px 0;
+    }
+
+    to {
+      background-position: 1000px 0;
+    }
+  }
+
+}
+
+.notificationAlign {
+  color: var(--Gray-900, #101828);
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.noNotification {
+  color: var(--Gray-500, #667085);
+  text-align: center;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.border-value {
+  padding: 16px !important;
+  border-radius: 12px !important;
+  border: 1.095px solid var(--Gray-200, #EAECF0) !important;
+  background: var(--White, #FFF) !important;
+}
+
+.buttonsec {
+  border-radius: 8px;
+  margin: 0px;
+  // border: 1px solid var(--gray-100, #F2F4F7);
+  background: var(--gray-50, white);
+  width: 100%;
+  height: fit-content;
+  padding: 5px;
+}
+
+.submenu {
+  background: var(--gray-50, white) !important;
+  color: var(--gray-500, #667085) !important;
+  font-size: 16px !important;
+  font-weight: 500 !important;
+  outline: none !important;
+}
+
+.text-primary {
+  color: var(--primary-700, #009BF3) !important;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.alertdot {
+  color: var(--Gray-500, #667085);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+.remindlatertext {
+  color: var(--Primary-700, #009BF3);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  text-decoration-line: underline;
+  text-transform: capitalize;
+}
+.submit{
+font-size: 16px;
+font-weight: 600;
+line-height: 24px;
+text-align: left;
+color:#FFFFFF;
+}
+
+.alerticon {
+  margin-bottom: 35% !important;
+}
+
+.alertbg {
+  gap: 0px;
+  opacity: 0px;
+  border-left: 7px solid var(--Primary-500, #33B5FF);
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+}
+
+.notificationMenu {
+  display: block !important;
+  z-index: 105;
+  position: fixed;
+  inset: 0px 0px auto auto;
+  margin: 0px;
+  transform: translate3d(-30.2222px, 72.8889px, 0px);
+}
+
+.transition {
+  transition: 5s ease-in !important;
+  right:-450px;
+}

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();
+  });
+});