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

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

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

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

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

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

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

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

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

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

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

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

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

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