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

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

@@ -1,38 +0,0 @@
-.menu-bullet-dot span {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    background-color: #000; /* You can change this to any color */
-    border-radius: 50%;
-    margin-right: 10px; /* Space between the bullet and text */
-    vertical-align: middle;
-  }
-
- :host::ng-deep{
-    .menu-sub .menu-sub-accordion{
-        border-left: 2px solid #98A2B3 !important;
-    }
-}
-    ::ng-deep {.app-sidebar .menu .menu-item .menu-link.active .menu-title {
-        color: #F5F5F5 !important;
-        border-radius: 8px !important;
-        border: 1px solid var(--text-primary, #FFF) !important;
-        padding: 8px !important;
-        color: var(--Primary-500, #33B5FF) !important;
-font-size: 12px !important;
-font-style: normal;
-font-weight: 600;
-line-height: 18px; 
-    }
-    .app-sidebar .menu .menu-item .menu-link .menu-title {
-        font-size: 12px !important;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 18px;
-    }
-   .app-sidebar .menu .menu-item .menu-link.active {
-        transition: color 0.2s ease;
-        background-color: #0d0e12 !important;
-   }
-}
-  

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

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

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

@@ -1,130 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { AuthService } from '../../../../services/auth.service';
-import { debounceTime, Subject, takeUntil } from 'rxjs';
-import { GlobalStateService } from 'tango-app-ui-global'
-import crypto from 'crypto-js';
-import { Router } from '@angular/router';
-@Component({
-  selector: "lib-sidebar-menu",
-  templateUrl: "./sidebar-menu.component.html",
-  styleUrls: ["./sidebar-menu.component.scss"],
-})
-export class SidebarMenuComponent implements OnInit {
-  usersList: any;
-  authlocalStorageToken: string;
-  oldDashboardRoutingUrl: any;
-  clientData: any;
-  headerFilters: any;
-  showPlano: string;
-  constructor(
-    private authService: AuthService,
-    public gs: GlobalStateService,private router:Router,
-  ) {
-    this.gs.environment.pipe(takeUntil(this.destroy$)).subscribe((env) => {
-      if (env) {
-        this.authlocalStorageToken = `${env.appVersion}-${env.USERDATA_KEY}`;
-        this.oldDashboardRoutingUrl = env.oldDashboardRoutingUrl;
-      }
-    });
-  }
-  private readonly destroy$ = new Subject();
-  previousClientId: any = null;
-  ngOnInit(): void {
-    this.getPlanoUsers();
-    if ("user-info" in localStorage) {
-      const userData: any = JSON.parse(
-        localStorage.getItem("user-info") || "{}"
-      );
-      this.usersList = userData;
-    }
-    this.gs?.dataRangeValue.pipe(takeUntil(this.destroy$)).subscribe({
-      next: (data: any) => {
-        this.headerFilters = data || this.headerFilters;
-    
-        const clientId = this.usersList?.clientId ?? this.headerFilters?.client;
-    
-        if (clientId && clientId !== this.previousClientId) {
-          this.previousClientId = clientId; // Store last called clientId
-          this.getClientData(clientId);
-        }
-      }
-    });
-    
-    
-    // this.gs?.dataRangeValue.pipe((takeUntil(this.destroy$)))?.subscribe({
-    //   next: (data: any) => {
-    //     if(data){
-    //     this.headerFilters = data;
-    //     if(this.usersList?.clientId || this.headerFilters?.client)
-    //       this.getClientData(this.usersList.clientId ? this.usersList.clientId: this.headerFilters.client)
-    //     }
-    //     else {
-    //       if(this.usersList?.clientId || this.headerFilters?.client)
-    //         this.getClientData(this.usersList.clientId ? this.usersList.clientId: this.headerFilters.client)
-    //     }
-    //   }
-    // })
-  }
-
-  getPlanoUsers() {
-    this.authService.getPlanoUsers().pipe(takeUntil(this.destroy$), debounceTime(100))?.subscribe((res: any) => {
-      this.showPlano = res?.message || "Unauthorized"; 
-    });
-  }
-  
-  oldDashborad() {
-    let obj = { username: this.usersList?.email };//this.usersList?.email}; // Assuming this is required for authentication/authorization
-    this.authService
-      .getOldDashboardRedirect(obj)
-      .pipe((takeUntil(this.destroy$)), debounceTime(100))?.subscribe((res: any) => {
-        if (res && res.code === 200) {
-          // Assuming res.data contains necessary authentication/authorization information
-          var ciphertext = encodeURIComponent(
-            crypto.AES.encrypt(
-              JSON.stringify(res.data),
-              "secret key 123"
-            ).toString()
-          );
-          var queryParams = `?token=${ciphertext}`;
-          var baseUrl = `${this.oldDashboardRoutingUrl}/auth/login`;
-          var url = `${baseUrl}${queryParams}`;
-          // // Opening the URL in a new tab/window
-          // // Note: This might trigger popup blockers if not invoked by user action
-          var newTab = window.open(url, "_blank");
-    
-          // // Handle popup blocked scenario
-          // if (!newTab || newTab.closed || typeof newTab.closed === 'undefined') {
-            // Redirect to the URL in the current window if popup is blocked
-            // window.location.href = url;
-          // }
-        } else {
-          // Handle error case
-          console.error("Error: Unable to retrieve redirection data.");
-          // Optionally, display an error message to the user
-        }
-      });
-    
-  }
-  getClientData(clientID: any) {
-    if (!clientID) return;
-  
-    this.authService.getBrandDetails(clientID)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe({
-        next: (res: any) => {
-          if (res?.code === 200) {
-            this.clientData = res.data;
-            localStorage.setItem("client-details", JSON.stringify(this.clientData?.featureConfigs));
-          }
-        },
-        error: (error) => {
-          console.error("Error fetching client data", error);
-        }
-      });
-  }
-  cameras(){
-    this.router.navigate(['/manage/stores/cameras'], {
-  queryParams: { storeId: '11-2391' },
-});
-  }
-}

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

@@ -1,16 +0,0 @@
-<!--begin::Logo-->
-<lib-sidebar-logo class="app-sidebar-logo px-6" id="kt_app_sidebar_logo"
-  [toggleButtonClass]="toggleButtonClass" [toggleEnabled]="toggleEnabled" [toggleType]="toggleType"
-  [toggleState]="toggleState">
-</lib-sidebar-logo>
-<!--end::Logo-->
-
-<!--begin::sidebar menu-->
-<lib-sidebar-menu class="app-sidebar-menu overflow-hidden flex-column-fluid">
-</lib-sidebar-menu>
-<!--end::sidebar menu-->
-
-<!--begin::Footer-->
-<lib-sidebar-footer  class="app-sidebar-footer flex-column-auto pt-2" id="kt_app_sidebar_footer">
-</lib-sidebar-footer>
-<!--end::Footer-->

package/src/lib/modules/layout/sidebar/sidebar.component.scss

@@ -1,3 +0,0 @@
-.app-sidebar-footer{
-    background: var(--Gray-700, #344054);   
-}

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

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

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

@@ -1,203 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { LayoutService } from 'tango-app-ui-global';
-import { ILayout } from 'tango-app-ui-global';
-
-@Component({
-  selector: 'lib-sidebar',
-  templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.scss'],
-})
-export class SidebarComponent implements OnInit, OnDestroy {
-  private unsubscribe: Subscription[] = [];
-  userValue:any
-  // public props
-  appSidebarDisplay: boolean;
-  appSidebarDefaultFixedDesktop: boolean;
-  appSidebarDefaultMinimizeDesktopEnabled: boolean;
-  appSidebarDefaultMinimizeDesktopDefault: boolean;
-  appSidebarDefaultMinimizeDesktopHoverable: boolean;
-  appSidebarDefaultMinimizeMobileEnabled: boolean;
-  appSidebarDefaultMinimizeMobileDefault: boolean;
-  appSidebarDefaultMinimizeMobileHoverable: boolean;
-  appSidebarDefaultCollapseDesktopEnabled: boolean;
-  appSidebarDefaultCollapseDesktopDefault: boolean;
-  appSidebarDefaultCollapseMobileEnabled: boolean;
-  appSidebarDefaultCollapseMobileDefault: boolean;
-
-  appSidebarDefaultPushHeader: boolean;
-  appSidebarDefaultPushToolbar: boolean;
-  appSidebarDefaultPushFooter: boolean;
-
-  appSidebarDefaultStacked: boolean;
-
-  // logo
-  appSidebarDefaultMinimizeDefault: boolean;
-  toggleButtonClass: string;
-  toggleEnabled: boolean;
-  toggleType: string;
-  toggleState: string;
-
-  constructor(private layout: LayoutService) {}
-
-  ngOnInit(): void {
-    const subscr = this.layout.layoutConfigSubject
-      .asObservable()
-      .subscribe((config: ILayout) => {
-        this.updateProps(config);
-      });
-    this.unsubscribe.push(subscr);
-  }
-
-  updateProps(config: ILayout) {
-    this.appSidebarDisplay = this.layout.getProp('app.sidebar.display', config) as boolean;
-    if (!this.appSidebarDisplay) {
-      return;
-    }
-
-    this.appSidebarDefaultFixedDesktop = this.layout.getProp(
-      'app.sidebar.default.fixed.desktop',
-      config
-    ) as boolean;
-
-    this.appSidebarDefaultMinimizeDesktopEnabled = this.layout.getProp(
-      'app.sidebar.default.minimize.desktop.enabled',
-      config
-    ) as boolean;
-    if (this.appSidebarDefaultMinimizeDesktopEnabled) {
-      this.appSidebarDefaultMinimizeDesktopDefault = this.layout.getProp(
-        'app.sidebar.default.minimize.desktop.default',
-        config
-      ) as boolean;
-      // if (this.appSidebarDefaultMinimizeDesktopDefault) {
-        document.body.setAttribute('data-kt-app-sidebar-minimize', 'on');
-      // }
-
-      this.appSidebarDefaultMinimizeDesktopHoverable = this.layout.getProp(
-        'app.sidebar.default.minimize.desktop.hoverable',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultMinimizeDesktopHoverable) {
-        document.body.setAttribute('data-kt-app-sidebar-hoverable', 'true');
-      }
-    }
-
-    this.appSidebarDefaultMinimizeMobileEnabled = this.layout.getProp(
-      'app.sidebar.default.minimize.mobile.enabled',
-      config
-    ) as boolean;
-    if (this.appSidebarDefaultMinimizeMobileEnabled) {
-      this.appSidebarDefaultMinimizeMobileDefault = this.layout.getProp(
-        'app.sidebar.default.minimize.mobile.default',
-        config
-      ) as boolean;
-      // if (this.appSidebarDefaultMinimizeMobileDefault) {
-        document.body.setAttribute('data-kt-app-sidebar-minimize-mobile', 'on');
-      // }
-
-      this.appSidebarDefaultMinimizeMobileHoverable = this.layout.getProp(
-        'app.sidebar.default.minimize.mobile.hoverable',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultMinimizeMobileHoverable) {
-        document.body.setAttribute(
-          'data-kt-app-sidebar-hoverable-mobile',
-          'true'
-        );
-      }
-    }
-
-    this.appSidebarDefaultCollapseDesktopEnabled = this.layout.getProp(
-      'app.sidebar.default.collapse.desktop.enabled',
-      config
-    ) as boolean;
-    if (this.appSidebarDefaultCollapseDesktopEnabled) {
-      this.appSidebarDefaultCollapseDesktopDefault = this.layout.getProp(
-        'app.sidebar.default.collapse.desktop.default',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultCollapseDesktopDefault) {
-        document.body.setAttribute('data-kt-app-sidebar-collapse', 'on');
-      }
-    }
-
-    this.appSidebarDefaultCollapseMobileEnabled = this.layout.getProp(
-      'app.sidebar.default.collapse.mobile.enabled',
-      config
-    ) as boolean;
-    if (this.appSidebarDefaultCollapseMobileEnabled) {
-      this.appSidebarDefaultCollapseMobileDefault = this.layout.getProp(
-        'app.sidebar.default.collapse.mobile.default',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultCollapseMobileDefault) {
-        document.body.setAttribute('data-kt-app-sidebar-collapse-mobile', 'on');
-      }
-    }
-
-    if (this.layout.getProp('app.sidebar.default.push')) {
-      this.appSidebarDefaultPushHeader = this.layout.getProp(
-        'app.sidebar.default.push.header',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultPushHeader) {
-        document.body.setAttribute('data-kt-app-sidebar-push-header', 'true');
-      }
-
-      this.appSidebarDefaultPushToolbar = this.layout.getProp(
-        'app.sidebar.default.push.toolbar',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultPushToolbar) {
-        document.body.setAttribute('data-kt-app-sidebar-push-toolbar', 'true');
-      }
-
-      this.appSidebarDefaultPushFooter = this.layout.getProp(
-        'app.sidebar.default.push.footer',
-        config
-      ) as boolean;
-      if (this.appSidebarDefaultPushFooter) {
-        document.body.setAttribute('data-kt-app-sidebar-push-footer', 'true');
-      }
-    }
-
-    this.appSidebarDefaultStacked = this.layout.getProp(
-      'app.sidebar.default.stacked',
-      config
-    ) as boolean;
-    if (this.appSidebarDefaultStacked) {
-      document.body.setAttribute('app-sidebar-stacked', 'true');
-    }
-
-    // Logo
-    this.appSidebarDefaultMinimizeDefault = this.layout.getProp(
-      'app.sidebar.default.minimize.desktop.default',
-      config
-    ) as boolean;
-    this.toggleButtonClass = this.appSidebarDefaultMinimizeDefault
-      ? 'active'
-      : '';
-    this.toggleEnabled =
-      this.appSidebarDefaultMinimizeDesktopEnabled ||
-      this.appSidebarDefaultCollapseDesktopEnabled;
-    if (this.appSidebarDefaultMinimizeDesktopEnabled) {
-      this.toggleType = 'minimize';
-      this.toggleState = 'active';
-    }
-
-    if (this.appSidebarDefaultCollapseDesktopEnabled) {
-      this.toggleType = 'collapse';
-      this.toggleState = '';
-    }
-
-    document.body.setAttribute('data-kt-app-sidebar-enabled', 'true');
-    document.body.setAttribute(
-      'data-kt-app-sidebar-fixed',
-      this.appSidebarDefaultFixedDesktop.toString()
-    );
-  }
-
-  ngOnDestroy() {
-    this.unsubscribe.forEach((sb) => sb.unsubscribe());
-  }
-}

package/src/lib/modules/layout/toolbar/accounting/accounting.component.html

@@ -1,84 +0,0 @@
-<!--begin::Input group-->
-<div class="d-flex align-items-center flex-shrink-0">
-  <!--begin::Label-->
-  <span class="fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block">Actions:</span>
-  <!--end::Label-->
-
-  <!--begin::Actions-->
-  <div class="d-flex flex-shrink-0">
-    <!--begin::Button-->
-    <div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="Add a team member">
-      <a href="#" class="btn btn-sm btn-icon btn-active-color-success">
-        <lib-keenicon name="plus-square" class="fs-2x"></lib-keenicon>
-      </a>
-    </div>
-    <!--end::Button-->
-
-    <!--begin::Button-->
-    <div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="Create new account">
-      <a href="#" class="btn btn-sm btn-icon btn-active-color-success">
-        <lib-keenicon name="gen037.svg" class="fs-2x"></lib-keenicon>
-      </a>
-    </div>
-    <!--end::Button-->
-
-    <!--begin::Button-->
-    <div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="Invite friends">
-      <a href="#" class="btn btn-sm btn-icon btn-active-color-success">
-        <lib-keenicon name="dots-square" class="fs-2x"></lib-keenicon>
-      </a>
-    </div>
-    <!--end::Button-->
-  </div>
-  <!--end::Actions-->
-</div>
-<!--end::Input group-->
-
-<!--begin::Input group-->
-<div class="d-flex align-items-center flex-shrink-0">
-  <!--begin::Desktop separartor-->
-  <div class="bullet bg-secondary h-35px w-1px mx-5"></div>
-  <!--end::Desktop separartor-->
-
-  <!--begin::Label-->
-  <span class="fs-7 text-gray-700 fw-bold pe-4 ps-1 d-none d-md-block">Progress:</span>
-  <!--end::Label-->
-
-  <div class="progress w-100px w-xl-150px w-xxl-300px h-25px bg-light-success">
-    <div class="progress-bar rounded bg-success fs-7 fw-bold" role="progressbar" style="width: 72%;" aria-valuenow="72"
-      aria-valuemin="0" aria-valuemax="100">72%</div>
-  </div>
-</div>
-<!--end::Input group-->
-<!--end::Toolbar start-->
-
-<!--begin::Toolbar end-->
-<div class="d-flex align-items-center">
-  <!--begin::Input group-->
-  <div class="me-3">
-    <!--begin::Select-->
-    <select class="form-select form-select-sm form-select-solid" data-control="select2" data-placeholder="Latest"
-      data-hide-search="true">
-      <option value=""></option>
-      <option value="1" selected>Today 16 Feb</option>
-      <option value="2">In Progress</option>
-      <option value="3">Done</option>
-    </select>
-    <!--end::Select-->
-  </div>
-  <!--end::Input group--->
-
-  <!--begin::Input group--->
-  <div class="m-0">
-    <!--begin::Select-->
-    <select class="form-select form-select-sm form-select-solid w-md-125px" data-control="select2"
-      data-placeholder="Filters" data-hide-search="true">
-      <option value=""></option>
-      <option value="1" selected>Filters</option>
-      <option value="2">In Progress</option>
-      <option value="3">Done</option>
-    </select>
-    <!--end::Content-->
-  </div>
-  <!--end::Input group--->
-</div>

package/src/lib/modules/layout/toolbar/accounting/accounting.component.spec.ts

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

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

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'lib-accounting',
-  templateUrl: './accounting.component.html',
-  styleUrls: ['./accounting.component.scss']
-})
-export class AccountingComponent implements OnInit {
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

package/src/lib/modules/layout/toolbar/classic/classic.component.html

@@ -1,69 +0,0 @@
-<div class="py-3 dropdown1 cursor-pointer" *ngFor="let item of dataObject; let i = index">
-    <div class="dropdown form-select" (click)="Dropdown('Clients',i,$event)">
-        <span class="">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ?
-            selectedValuesArray[i]?.length + ' ' + 'Clients'.split(' ').pop() : 'Clients' }}</span>
-    </div>
-    <div *ngIf="item.isOpen" class="dropdown-content position-absolute">
-        <div class="form-check d-flex align-items-center pt-3 px-5">
-            <input class="form-check-input" type="checkbox" value="Select All" id="selectall{{i}}"
-                [checked]="selectedValuesArray[i]?.length === item.Issues.length"
-                (change)="toggleCheckbox('Select All', i)">
-            <label class="form-check-label px-3" for="selectall{{i}}">
-                Select All
-            </label>
-        </div>
-
-        <div class="border border-gray mt-3"></div>
-        <div class="mt-3 d-flex align-items-center mx-2">
-            <span class="svg-icon svg-icon-1 position-absolute ms-3 mt-2">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
-                    <path
-                        d="M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z"
-                        stroke="#667085" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
-                </svg>
-            </span>
-            <input type="text" [(ngModel)]="searchValue" (input)="searchData($event,i)"
-                class="form-control searchinput ps-14 py-2  mt-2" placeholder="Search" autocomplete="off" />
-        </div>
-        <div *ngFor="let issue of item.Issues" class="form-check d-flex align-items-center py-3 px-5">
-            <input class="form-check-input cursor-pointer" type="checkbox" [value]="issue.clientName" id="option{{issue.clientId}}"
-                [checked]="selectedValuesArray[i]?.includes(issue.clientId)" (change)="toggleCheckbox(issue.clientId,i)">
-            <label class="form-check-label px-3 cursor-pointer" for="option{{issue.clientId}}">
-                {{ issue.clientName }}
-            </label>
-        </div>
-        <div class="mt-5 d-flex justify-content-center">
-            <span class="form-check-label mb-3" *ngIf="noFilter"> No filters available</span>
-        </div>
-    </div>
-</div>
-<div class="d-flex align-items-center position-relative my-1">
-    <span class="svg-icon svg-icon-1 position-absolute ms-3">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path
-                d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
-                stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-    </span>
-    <input class="fx-date-range form-control ps-14" style="min-width: 260px !important;" type="text" matInput ngxDaterangepickerMd [drops]="'down'"
-        [opens]="'right'" [ranges]="ranges" [showCustomRangeLabel]="true" [alwaysShowCalendars]="false"
-        [keepCalendarOpeningWithRange]="true" [showCancel]="true" autocomplete="off" [(ngModel)]="selectedDateRange"  (startDateChanged)="onStartDateChange($event)"  [isCustomDate]="isCustomDate"
-        [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
-        (datesUpdated)="datechange($event)" name="daterange" [readonly]="true" />
-</div>
-
-
-<!-- <input class="fx-date-range form-control ps-14" type="text" matInput ngxDaterangepickerMd 
-    [singleDatePicker]="true"
-    [drops]="'down'"
-    [opens]="'right'"
-    [alwaysShowCalendars]="false"
-    [keepCalendarOpeningWithRange]="true"
-    [showCancel]="true"
-    autocomplete="off"
-    [(ngModel)]="selectedDate"
-    [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
-    (selected)="onDateSelect($event)"
-    name="daterange" /> -->
-
-<div class="btn btn-primary" (click)="Apply()">Apply</div>