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

package/src/lib/modules/layout/toolbar/trax-header/trax-header.component.html

@@ -1,204 +0,0 @@
-<div class="">
-    <label *ngIf="selectedLocationsLabel()" class="badge badge-light-default mx-2">{{selectedLocationsLabel()}} 
-        <span class="cursor-pointer" (click)="removeLocation()"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
-        <path d="M9 3L3 9M3 3L9 9" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg></span>
-    </label>
-    <label *ngIf="selectedGroupsLabel()"  class="badge badge-light-default mx-2">{{selectedGroupsLabel()}} 
-        <span class="cursor-pointer" (click)="removeGroup()"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
-        <path d="M9 3L3 9M3 3L9 9" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg></span>
-    </label>
-    <label  class="badge badge-light-default">{{selectedStoresLabel()}}</label>
-</div>
-
-
-<div class="wrapper me-3" *ngIf="(gs.userAccess | async)?.userType === 'tango'">
-<lib-select [items]="clientList" [multi]="false" [searchField]="'clientName'" [disabled]="false" [idField]="'clientId'"
-(selected)="onClientSelect($event)" [selectedValues]="[selectedClient]"></lib-select>
-</div>
-<div class="d-flex align-items-center position-relative my-1" style="display: none !important;">
-    <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" [autoApply]="true"
-        [alwaysShowCalendars]="false" [keepCalendarOpeningWithRange]="true" [showCancel]="true" autocomplete="off"
-        [(ngModel)]="selectedDateRange" (startDateChanged)="onStartDateChange($event)" [isCustomDate]="isCustomDate" (click)="resetValidation()" 
-        [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>
-<div class="position-relative">
-    <button type="button" (click)="opendropdown($event)"  class="btn btn-default mx-2 rounded-3 text-nowrap border-val">
-        <!-- <span class="me-2">Filter</span> -->
-        <svg class="pl-3" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5 10H15M2.5 5H17.5M7.5 15H12.5" stroke="#344054" stroke-width="2" stroke-linecap="round"
-                stroke-linejoin="round" />
-        </svg>
-    </button>
-
-    <div *ngIf="Opendropdown" class="card p-5 dropdown1 position-absolute z-1 end-0" style="z-index: 1 !important;" (clickOutside)="closeDropdown1()">
-        <div class="dropdown-title d-flex justify-content-between mb-2">Filter Options
-            <button class="btn btn-outline w-25 ms-3 btn-resize" (click)="Reset()"> Reset </button>
-            <button class="btn btn-primary w-25  btn-resize" (click)="Apply()">Apply</button>
-        </div>
-
-     <!-- Location Dropdown -->
-<div class="dropdown-container" (clickOutside)="closeDropdown()">
-    <div class="dropdown-header" (click)="toggleDropdown('location')">
-        <input 
-            type="text" 
-            class="form-control dropdown-input cursor-pointer" 
-            [value]="selectedLocationsLabel()"
-            readonly
-            placeholder="Select locations..."
-        />
-    </div>
-    <div class="dropdown-menu custom-dropdown-menu" *ngIf="dropdownOpen === 'location'">
-        <input 
-            type="text" 
-            class="form-control mb-2 dropdown-search" 
-            placeholder="Search locations..." 
-            [(ngModel)]="searchLocationText" 
-            (ngModelChange)="filterLocations()" 
-        />
-        <div class="form-check mb-2 dropdown-item custom-dropdown-item">
-            <input 
-                class="form-check-input cursor-pointer" 
-                type="checkbox" 
-                id="selectAllLocations" 
-                [checked]="isAllLocationsSelected()" 
-                (change)="toggleSelectAllLocations($event)" 
-            />
-            <label class="form-check-label" for="selectAllLocations">
-                Select All
-            </label>
-        </div>
-        <div 
-            class="dropdown-item form-check custom-dropdown-item" 
-            *ngFor="let location of filteredLocations"
-        >
-            <input 
-                class="form-check-input cursor-pointer" 
-                type="checkbox" 
-                [id]="location.city" 
-                [(ngModel)]="location.checked"
-                (change)="updateSelectedLocations()" 
-            />
-            <label class="form-check-label" [for]="location.city">
-                {{ location.city }}
-            </label>
-        </div>
-    </div>
-</div>
-
-<!-- Group Dropdown -->
-<div class="dropdown-container mt-3" (clickOutside)="closeDropdown()">
-    <div class="dropdown-header" (click)="toggleDropdown('group')">
-        <input 
-            type="text" 
-            class="form-control dropdown-input cursor-pointer" 
-            [value]="selectedGroupsLabel()" readonly
-            placeholder="Select clusters.."
-        />
-    </div>
-    <div class="dropdown-menu custom-dropdown-menu" *ngIf="dropdownOpen === 'group'">
-        <input 
-            type="text" 
-            class="form-control mb-2 dropdown-search" 
-            placeholder="Search clusters..." 
-            [(ngModel)]="searchGroupText" 
-            (ngModelChange)="filterGroups()" 
-        />
-        <div class="form-check mb-2 dropdown-item custom-dropdown-item">
-            <input 
-                class="form-check-input cursor-pointer" 
-                type="checkbox" 
-                id="selectAllGroups" 
-                [checked]="isAllGroupsSelected()" 
-                (change)="toggleSelectAllGroups($event)" 
-            />
-            <label class="form-check-label" for="selectAllGroups">
-                Select All
-            </label>
-        </div>
-        <div 
-            class="dropdown-item form-check custom-dropdown-item" 
-            *ngFor="let group of filteredGroups"
-        >
-            <input 
-                class="form-check-input cursor-pointer" 
-                type="checkbox" 
-                [id]="group.groupName"
-                [(ngModel)]="group.checked"
-                (change)="updateSelectedGroups()" 
-            />
-            <label class="form-check-label" [for]="group.groupName">
-                {{ group.groupName }}
-            </label>
-        </div>
-    </div>
-</div>
-
-
-<!-- Store Dropdown -->
-<div class="dropdown-container mt-3" (clickOutside)="closeDropdown()">
-    <div class="dropdown-header" (click)="toggleDropdown('store')">
-        <input 
-            type="text" 
-            class="form-control dropdown-input cursor-pointer"
-            [value]="selectedStoresLabel()"
-            readonly
-            placeholder="Select stores..."
-        />
-    </div>
-    <div class="dropdown-menu custom-dropdown-menu" *ngIf="dropdownOpen === 'store'">
-        <input 
-            type="text" 
-            class="form-control mb-2 dropdown-search " 
-            placeholder="Search stores..." 
-            [(ngModel)]="searchStoreText" 
-            (ngModelChange)="filterStores()" 
-        />
-        <div class="form-check mb-2 dropdown-item custom-dropdown-item">
-            <input 
-                class="form-check-input cursor-pointer" 
-                type="checkbox" 
-                id="selectAllStores" 
-                [checked]="isAllStoresSelected()" 
-                (change)="toggleSelectAllStores($event)" 
-            />
-            <label class="form-check-label" for="selectAllStores">
-                Select All
-            </label>
-        </div>
-        <div 
-            class="dropdown-item form-check custom-dropdown-item" 
-            *ngFor="let store of filteredStores"
-        >
-            <input 
-                class="form-check-input" 
-                type="checkbox" 
-                [id]="store.storeId"
-                [(ngModel)]="store.checked"
-                (change)="updateSelectedStores()" 
-            />
-            <label class="form-check-label" [for]="store.storeId">
-                {{ store.storeName }}
-            </label>
-        </div>
-    </div>
-</div>
-
-
-
-
-
-
-
-    </div>
-</div>

package/src/lib/modules/layout/toolbar/trax-header/trax-header.component.scss

@@ -1,311 +0,0 @@
-.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: 160px;
-        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 .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; 
-}
-.filter-label{
-    color: var(--Gray-500, #667085) !important;
-font-size: 14px;
-font-style: normal;
-font-weight: 600;
-line-height: 20px;
-text-transform: capitalize;
-}
-
-.position-relative {
-    position: relative;
-  }
-  
-  .filter-icon {
-    cursor: pointer;
-  }
-  
-  .dropdown-container {
-    position: relative;
-    display: inline-block;
-    width: 100%; /* Adjust this based on your design */
-}
-
-.dropdown-header {
-    cursor: pointer;
-    width: 100%; /* Adjust based on need */
-}
-
-.form-control {
-    color: var(--Gray-700, #344054) !important;
-    font-size: 14px !important;
-    font-weight: 600;
-    line-height: 20px;
-    text-transform: capitalize;
-    width: 100%; /* Ensures input takes full width */
-    box-sizing: border-box;
-}
-
-.dropdown-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    border: 1px solid #ccc;
-    background-color: #fff;
-    z-index: 1000;
-    max-height: 230px;
-    overflow-y: auto;
-    display: block;
-    box-sizing: border-box;
-    padding: 10px 5px;
-}
-
-.dropdown-item {
-    padding: 6px 0px;
-}
-
-.dropdown-item:hover {
-    background-color: #f1f1f1;
-}
-
-.dropdown-item input[type="checkbox"] {
-    margin-right: 10px;
-}
-
-.custom-dropdown-menu {
-    border-radius: 4px;
-    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-}
-
-.custom-dropdown-item {
-    display: flex;
-    align-items: center;
-
-}
-
-.custom-dropdown-item input {
-    margin-left: 10px;
-}
-
-.btn-resize{
-    font-size: 13px !important;
-    height: 29px !important;
-    line-height: 11px !important;
-    padding: 3px !important;
-}
-
-.dropdown1 {
-    position: absolute;
-    top: 70px;
-    // right: 14.5%;
-    min-width: 270px !important;
-
-    .dropdown-title {
-        color: var(--Gray-900, #101828);
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 24px
-    }
-
-    .dropdown {
-        position: relative;
-        display: inline-block;
-
-        span {
-            color: var(--Gray-700, #344054);
-            font-size: 14px;
-            font-weight: 600;
-            line-height: 20px;
-        }
-    }
-}
-
-::ng-deep .dropdown1{
-    z-index: 1 !important;
-}
-.form-check-label {
-color: var(--Gray-700, #344054) !important;
-font-size: 14px;
-font-style: normal;
-font-weight: 500;
-line-height: 20px;
-}
-
-input[type='checkbox'] {
-    width: 16px !important;
-    height: 16px !important;
-    margin: 0px 5px;
-    border-radius: 4px !important;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    -o-appearance: none;
-    appearance: none;
-    outline: 1px solid var(--gray-300, #D0D5DD);
-    box-shadow: none;
-    font-size: 0.8em;
-    text-align: center;
-    line-height: 1em;
-    background: white;
-}
-
-input[type='checkbox']:checked {
-    outline: 1px solid var(--primary-600, #00A3FF);
-    background-color: var(--primary-50, #EAF8FF);
-}
-
-input[type='checkbox']:checked:after {
-    content: '';
-    transform: rotate(45deg);
-    border-bottom: 2px solid #00A3FF;
-    border-right: 2px solid #00A3FF;
-    display: inline-block;
-    width: 0.2em;
-    padding-left: 0px;
-    padding-top: 9px;
-    padding-right: 4px;
-}

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

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