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

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

@@ -0,0 +1,62 @@
+<!--begin::Wrapper-->
+<div class="d-flex align-items-center flex-shrink-0">
+  <!--begin::Label-->
+  <span class="fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block">Filter By:</span>
+  <!--end::Label-->
+
+  <div class="flex-shrink-0 ">
+    <ul class="nav">
+      <li class="nav-item">
+        <a class="nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light active fw-semibold fs-7 px-4 me-1"
+          data-bs-toggle="tab" href="#">Today</a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4 me-1"
+          data-bs-toggle="tab" href="">Week</a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4"
+          data-bs-toggle="tab" href="#">Day</a>
+      </li>
+    </ul>
+  </div>
+</div>
+<!--end::Wrapper-->
+
+<!--begin::Separartor-->
+<div class="bullet bg-secondary h-35px w-1px mx-5"></div>
+<!--end::Separartor-->
+
+<!--begin::Wrapper-->
+<div class="d-flex align-items-center">
+  <!--begin::Label-->
+  <span class="fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block">Sort By:</span>
+  <!--end::Label-->
+
+  <!--begin::Select-->
+  <select class="form-select form-select-sm w-md-125px form-select-solid" data-control="select2"
+    data-placeholder="Latest" data-hide-search="true">
+    <option value=""></option>
+    <option value="1" selected>Latest</option>
+    <option value="2">In Progress</option>
+    <option value="3">Done</option>
+  </select>
+  <!--end::Select-->
+
+  <!--begin::Actions-->
+  <div class="d-flex align-items-center ms-3">
+    <button type="button" class="btn btn-sm btn-icon btn-light-primary me-3" data-bs-toggle="tooltip"
+      data-bs-placement="top" title="Enable grid view">
+      <lib-keenicon name="element-11" class="fs-2 text-primary"></lib-keenicon>
+    </button>
+
+    <button type="button" class="btn btn-sm btn-icon btn-light" data-bs-toggle="tooltip" data-bs-placement="top"
+      title="Enable row view">
+      <lib-keenicon name="abstract-14" class="fs-2 text-gray400"></lib-keenicon>
+    </button>
+  </div>
+  <!--end::Actions-->
+</div>
+<!--end::Wrapper-->

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

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

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

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

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

@@ -0,0 +1,77 @@
+<!--begin::Action wrapper-->
+<div class="d-flex align-items-center">
+  <!--begin::Label-->
+  <span class="fs-7 fw-bold text-gray-700 pe-4 text-nowrap d-none d-md-block">Sort By:</span>
+  <!--end::Label-->
+
+  <!--begin::Select-->
+  <select class="form-select form-select-sm form-select-solid w-100px w-xxl-125px" data-control="select2"
+    data-placeholder="Latest" data-hide-search="true">
+    <option value=""></option>
+    <option value="1" selected>Latest</option>
+    <option value="2">In Progress</option>
+    <option value="3">Done</option>
+  </select>
+  <!--end::Select-->
+</div>
+<!--end::Action wrapper-->
+
+<!--begin::Action wrapper-->
+<div class="d-flex align-items-center">
+  <!--begin::Separartor-->
+  <div class="bullet bg-secondary h-35px w-1px mx-5"></div>
+  <!--end::Separartor-->
+
+  <!--begin::Label-->
+  <span class="fs-7 text-gray-700 fw-bold">Impact Level:</span>
+  <!--end::Label-->
+
+  <!--begin::NoUiSlider-->
+  <div class="d-flex align-items-center ps-4">
+    <div id="kt_app_toolbar_slider" class="noUi-target noUi-target-success w-75px w-xxl-150px noUi-sm"></div>
+
+    <span id="kt_app_toolbar_slider_value"
+      class="d-flex flex-center bg-light-success rounded-circle w-35px h-35px ms-4 fs-7 fw-bold text-success"
+      data-bs-toggle="tooltip" data-bs-placement="top" title="Set impact level">
+    </span>
+  </div>
+  <!--end::NoUiSlider-->
+
+  <!--begin::Separartor-->
+  <div class="bullet bg-secondary h-35px w-1px mx-5"></div>
+  <!--end::Separartor-->
+</div>
+<!--end::Action wrapper-->
+
+<!--begin::Action wrapper-->
+<div class="d-flex align-items-center">
+  <!--begin::Label-->
+  <span class="fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block">Quick Tools:</span>
+  <!--end::Label-->
+
+  <!--begin::Actions-->
+  <div class="d-flex">
+    <!--begin::Action-->
+    <a href="#" class="btn btn-sm btn-icon btn-icon-muted btn-active-icon-success" data-bs-toggle="tooltip"
+      data-bs-trigger="hover" data-bs-placement="top" title="Add new page">
+      <lib-keenicon name="files" class="fs-2x"></lib-keenicon>
+    </a>
+    <!--end::Action-->
+
+    <!--begin::Action-->
+    <a href="#" class="btn btn-sm btn-icon btn-icon-muted btn-active-icon-success" data-bs-toggle="tooltip"
+      data-bs-trigger="hover" data-bs-placement="top" title="Add new category">
+      <lib-keenicon name="add-files" class="fs-2x"></lib-keenicon>
+    </a>
+    <!--end::Action-->
+
+    <!--begin::Action-->
+    <a href="#" class="btn btn-sm btn-icon btn-icon-muted btn-active-icon-success" data-bs-toggle="tooltip"
+      data-bs-trigger="hover" data-bs-placement="top" title="Add new section">
+      <lib-keenicon name="search-list" class="fs-2x"></lib-keenicon>
+    </a>
+    <!--end::Action-->
+  </div>
+  <!--end::Actions-->
+</div>
+<!--end::Action wrapper-->

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

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

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

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

package/src/lib/modules/layout/toolbar/single-clientstore-date/single-clientstore-date.component.html

@@ -0,0 +1,26 @@
+<div class="wrapper mx-2" >
+    <lib-select [items]="clientList" [multi]="false" [searchField]="'clientName'" [disabled]="false" [idField]="'clientId'"
+        (selected)="onClientSelect($event)" [selectedValues]="[selectedClient]"></lib-select>
+
+        
+</div>
+<div class="wrapper mx-2" >
+<lib-select [items]="storeList" [multi]="false" [searchField]="'storeName'" [disabled]="false" [idField]="'storeId'"
+        (selected)="onStoreSelect($event)" [selectedValues]="[selectedStore]"></lib-select>  
+        </div> 
+<div class="d-flex align-items-center  w-150px 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" type="text" matInput ngxDaterangepickerMd [drops]="'down'"
+        [opens]="'right'" [showCustomRangeLabel]="false" [alwaysShowCalendars]="false" [autoApply]="true" [singleDatePicker]="true"
+        [keepCalendarOpeningWithRange]="true" [showCancel]="true" autocomplete="off" [(ngModel)]="selectedDateRange" (startDateChanged)="onStartDateChange($event)"  [isCustomDate]="isCustomDate"
+        [locale]="{ format: 'DD-MM-YYYY', firstDay: 1}"
+        (datesUpdated)="datechange($event)" name="daterange"  [readonly]="true" />
+</div>
+
+<div class="btn btn-primary ms-2" (click)="Apply()">Apply</div>

package/src/lib/modules/layout/toolbar/single-clientstore-date/single-clientstore-date.component.scss

@@ -0,0 +1,176 @@
+.daterangepicker {
+    display: block !important;
+    top: 153.85px !important;
+    left: 900px !important;
+    right: 0px;
+}
+.form-control {
+    color: var(--Gray-700, #344054) !important;
+    font-size: 14px !important;
+    font-weight: 600;   
+    line-height: 20px; 
+    text-transform: capitalize;
+}
+::ng-deep .applyBtn {
+    display: none !important;
+  }
+:host::ng-deep {
+    .md-drppicker .btn {
+        line-height: 10px !important;
+    }
+    .daterangepicker-input + .ngx-daterangepicker-material .applyBtn {
+        display: none;
+    }
+    .md-drppicker.drops-down-right.ltr.double.show-ranges.shown {
+        top: 65px !important;
+        left: -470px !important;
+        height: 365px !important;
+    }
+        .md-drppicker .btn {
+            border-radius: 8px !important;
+            border: 1px solid var(--Primary-600, #00A3FF) !important;
+            background: var(--Primary-600, #00A3FF) !important;
+            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+            color: var(--White, #FFF) !important;
+            font-size: 14px !important;
+            font-weight: 600 !important;
+            line-height: 20px;
+            text-transform: capitalize;
+        }
+
+    .md-drppicker .ranges ul li button {
+        padding: 12px 16px;
+        width: 120px;
+        color: var(--Gray-700, #344054);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        background: none;
+        border: none;
+        text-align: left;
+        cursor: pointer;
+    }
+    .md-drppicker td.active,
+    .md-drppicker td.active:hover {
+        background-color: #029cf4 !important;
+        border-radius: 20px !important;
+        color: var(--White, #FFF) !important;
+        text-align: center !important;
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        line-height: 20px;
+    }
+
+    .md-drppicker.ltr .ranges {
+        float: left;
+        margin-top: 10px !important;
+    }
+
+    .md-drppicker td.in-range {
+        background: var(--Primary-50, #EAF8FF);
+    }
+
+    .md-drppicker .ranges ul li button.active {
+        background: var(--Primary-50, #EAF8FF) !important;
+        border-radius: 8px !important;
+        color: var(--Primary-700, #009BF3);
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        line-height: 20px !important;
+    }
+    table th,
+    table td {
+        width: 40px !important;
+        height: 40px !important;
+        padding: 10px 8px !important;
+    }
+
+    .md-drppicker td.available.prev,
+    .md-drppicker th.available.prev {
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+        background-repeat: no-repeat !important;
+        background-size: 0.5em !important;
+        background-position: center !important;
+    }
+
+    .md-drppicker td.available.next,
+    .md-drppicker th.available.next {
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+        background-repeat: no-repeat !important;
+        background-size: 0.5em !important;
+        background-position: center !important;
+    }
+
+    table th {
+        border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
+        background: transparent !important;
+        color: var(--Gray-700, #344054) !important;
+        text-align: center;
+        font-size: 16px !important;
+        font-weight: 500 !important;
+        line-height: 24px;
+    }
+    .md-drppicker td.available.invalid-date {
+        text-decoration: line-through;
+        pointer-events: none;
+        color: darkgray;
+    }
+
+    .md-drppicker td.available.today:not(.invalid-date) {
+        text-decoration: unset;
+        pointer-events: unset;
+        color: unset;
+    }
+    // .md-drppicker td.available.invalid-date {
+    //     text-decoration: line-through;
+    //     pointer-events: none;
+    //     color: darkgray;
+    // }
+    
+    // .md-drppicker td.available.today {
+    //     /* Styles for today if it's valid */
+    //     text-decoration: unset; /* No line-through */
+    //     pointer-events: auto; /* Enable pointer events */
+    //     color: unset; /* Default color */
+    // }
+    
+    // .md-drppicker td.available.today.invalid-date {
+    //     /* Styles for today if it's invalid */
+    //     text-decoration: line-through; /* Line-through to indicate invalid */
+    //     pointer-events: none; /* Disable interaction */
+    //     color: darkgray; /* Gray color to indicate invalid */
+    // }
+        .md-drppicker .btn.btn-default {
+            border-radius: 8px !important;
+            border: 1px solid var(--Gray-300, #D0D5DD) !important;
+            background: var(--White, #FFF) !important;
+            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+            color: var(--Gray-700, #344054) !important;
+            font-size: 14px !important;
+            font-weight: 600 !important;
+            line-height: 20px;
+            text-transform: capitalize;
+            margin-right:10px !important;
+        }
+        .md-drppicker td.available.invalid-date  {
+            text-decoration: line-through;
+            pointer-events: none;
+            color: darkgray;
+          }
+          
+          .md-drppicker td.available.today:not(.invalid-date)   {
+            text-decoration: unset;
+            pointer-events: unset;
+            color: unset;
+          }
+}
+.wrapper {
+    min-width: 200px;
+}
+.btn-primary{
+    line-height: 18px !important; 
+}
+
+.w-150px{
+    width:160px !important;
+}

package/src/lib/modules/layout/toolbar/single-clientstore-date/single-clientstore-date.component.spec.ts

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