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

package/src/lib/modules/common/custom-select/custom-select.component.html

@@ -1,42 +0,0 @@
-<div class="outer-container">
-    <div [ngClass]="disabled ? 'disable-input':''"  (click)="openDropdown($event)"  class="form-select">
-    <ng-container *ngIf="multi" >
-    {{selectedValues?.length}} {{label}} Selected    
-    </ng-container>
-    <ng-container *ngIf="!multi" >
-        {{selectedValues?.[0]?.[searchField]}}
-    </ng-container>
-    </div>
-    <div [ngClass]="showDropdown ? '' : 'd-none'" class="input-container dropdown" >
-        <div class="w-100 input-wrapper">
-        <input [(ngModel)]="searchValue" placeholder="Search"  (input)="onInput($event)" type="text">  
-        <svg class="search-icon" 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>  
-        </div>
-        <ul>
-            <li *ngIf="multi && filteredValues?.length">
-                <label class="form-check" for="selectAll">
-                    <input (change)="onSelectAll($event)" [checked]="checkIfAllSelected()" class="form-check-input me-3" type="checkbox"
-                        id="selectAll">
-                    <span class="form-check-label" >
-                        Select All
-                    </span>
-                </label>
-            </li>
-            <li *ngFor="let item of filteredValues" [ngClass]="item.isSelected && !multi ? 'selected' : ''" >
-                <label [for]="item[idField] + instanceId" [ngClass]="multi  ? '': 'ps-0'" class="form-check">
-                    <input [ngClass]="multi  ? '': 'd-none'" (change)="onSelect($event, item)" [(ngModel)]="item.isSelected" class="form-check-input me-3" type="checkbox" value=""
-                        [id]="item[idField] + instanceId">
-                    <span class="form-check-label" >
-                        {{item[searchField]}}
-                    </span>
-                </label>
-            </li>
-            <li *ngIf="!filteredValues?.length" >
-                <span class="d-flex align-items-center justify-content-center" >No data found</span>
-            </li>
-        </ul>  
-    </div>  
-   
-</div>

package/src/lib/modules/common/custom-select/custom-select.component.scss

@@ -1,131 +0,0 @@
-:host {
-    width: 100%;
-    height: 100%;
-}
- 
- 
-.outer-container {
-    // z-index: 1;
-    position: relative;
-    background-color: white;
- 
- 
-    .form-select {
-        font-size: 1.1rem;
-        font-weight: 600;
-        border-radius: 8px !important;
-        color: var(--Gray-500, #344054);
-        border: 1px solid var(--Gray-300, #D0D5DD) !important;
-        height: 42.5px;
-    }
- 
-    .disable-input{
-        pointer-events: none;
-        background-color: #F9FAFB !important;
-    }
- 
-    .input-container {
-        position: absolute;
-        width: 100%;
-        z-index: 1;
- 
-        .input-wrapper {
-            padding: 8px 10px;
-            background-color: white;
-            border-top-right-radius: 8px;
-            border-top-left-radius: 8px;
-            border-top: 1px solid rgba(16, 24, 40, 0.08);
-            border-right: 1px solid rgba(16, 24, 40, 0.08);
-            border-left: 1px solid rgba(16, 24, 40, 0.08);
- 
- 
-            input {
-                width: 100%;
-                border-radius: 8px;
-                border: 1px solid var(--Gray-300, #D0D5DD);
-                background: var(--White, #FFF);
-                box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-                padding: 10px 14px 10px 30px;
-                outline: none;
- 
-                ::placeholder {
-                    color: var(--Gray-500, #667085);
-                    font-family: Inter;
-                    font-size: 14px;
-                    font-weight: 500;
-                    line-height: 20px;
-                }
-            }
- 
-            .search-icon {
-                position: absolute;
-                left: 20px;
-                top: 20px;
-            }
-        }
- 
-        ul {
-            position: relative;
-            background-color: white;
-            margin: 0;
-            padding: 0;
-            max-height: 200px;
-            min-height: auto;
-            overflow-y: auto;
-            border-bottom-right-radius: 8px;
-            border-bottom-left-radius: 8px;
-            border-bottom: 1px solid rgba(16, 24, 40, 0.08);
-            border-right: 1px solid rgba(16, 24, 40, 0.08);
-            border-left: 1px solid rgba(16, 24, 40, 0.08);
- 
-            .selected{
-                background: #F9FAFB;
-            }
- 
-            li {
-                list-style: none;
-                padding: 10px 16px;
-                cursor: pointer;
- 
-                label{
-                    cursor: pointer;
-                }
- 
-            }
- 
-            li:hover{
-                background: #F9FAFB;
-            }
- 
-        }
- 
-    }
- 
-}
- 
-.form-check {
-    display: flex;
-    align-items: center;
-}
- 
-.form-check-input {
-    height: 16px;
-    width: 16px;
-    border-radius: 4px;
-    border: 1px solid var(--Primary-600, #00A3FF);
-}
- 
-.form-check-input:checked {
-    --bs-form-check-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=');
-    background-color: #EAF8FF;
-    border-color: #00A3FF;
-}
- 
-.form-check-label {
-    color: var(--Gray-700, #344054);
-    font-family: Inter;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 20px;
-}

package/src/lib/modules/common/custom-select/custom-select.component.spec.ts

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

package/src/lib/modules/common/custom-select/custom-select.component.ts

@@ -1,149 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { AuthService } from '../../../services/auth.service';
- 
-@Component({
-  selector: 'lib-select',
-  templateUrl: './custom-select.component.html',
-  styleUrl: './custom-select.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class CustomSelectComponent implements OnChanges, OnInit {
- 
-  @HostListener('document:click', ['$event'])
-  onClick(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-    if (!target.closest('.dropdown')) {
-      this.showDropdown = false;
-    }
-  }
- 
-  @Input() items: any
-  @Input() searchField: string
-  @Input() multi: boolean
-  @Input() idField: string
-  @Input() selectedValues: any = []
-  @Input() disabled: boolean | undefined
-  @Input() label: string
- 
-  @Output() selected = new EventEmitter<any>()
-  filteredValues: any = []
-  showDropdown: boolean
-  searchValue: string
-  instanceId: any;
- 
- 
-  constructor(private cd: ChangeDetectorRef, private authService:AuthService) { }
-  ngOnInit(): void {
-    this.instanceId = crypto.randomUUID();
-    this.authService.dropDownTrigger.subscribe((e)=>{           
-      if(e !== this.instanceId){        
-        this.showDropdown = false
-        this.cd.detectChanges()
-      }
-    })
-  }
- 
-  ngOnChanges(changes: SimpleChanges): void {
- 
-    if (changes['items'] && this.items?.length) {
-      this.initializeItems();
-    }
-    if (changes['selectedValues'] && Array.isArray(changes['selectedValues']?.currentValue) && changes['selectedValues']?.currentValue?.length > 0 && changes['selectedValues']?.currentValue[0]) {            
-      this.updateSelectedValues();
-    }
-  }
- 
-  initializeItems() {
-    this.filteredValues = this.items.map((item: any) => ({ ...item }));
-    this.updateSelectedValues()
-  }
- 
-  updateSelectedValues() {    
-    this.selectedValues?.forEach((selectedItem: any) => {
-      const item = this.filteredValues?.find((filteredItem: any) => filteredItem?.[this.idField] === selectedItem?.[this.idField]);
-      if (item) {
-        item.isSelected = true;
-      }
-    });
-   
-  }
- 
-  openDropdown(event: any) {
-    this.authService.dropDownTrigger.next(this.instanceId)
-    event.stopPropagation();
-    this.showDropdown = !this.showDropdown;
-  }
- 
-  onInput(event: any) {
-    if (!event.target.value) {
-      this.filteredValues = [...this.items];
-    } else {
-      const searchTerm = event.target.value.toLowerCase();
-      this.filteredValues = this.items.filter((item: any) =>
-        item[this.searchField].toLowerCase().includes(searchTerm)
-      );
-    }
-    this.updateSelectedValues();
-    this.cd.detectChanges();
-  }
- 
-  onSelect(event: any, item: any) {    
-    if (this.multi) {
-      if (event.currentTarget.checked) {
-        this.selectedValues.push(item );        
-      } else {
-        this.selectedValues = this.selectedValues.filter((elem: any) => elem[this.idField] !== item[this.idField]);
-      }
-    } else {
-      this.selectedValues = [{ ...item }];
-      this.filteredValues.forEach((element:any) => {
-        if(element[this.idField] !== item[this.idField]){
-          element.isSelected = false
-        }
-      });
-      this.showDropdown = false;
-    }
- 
-    const valuesToEmit = this.selectedValues.map((value: any) => {
-      const selectedItem = { ...value };
-      delete selectedItem.isSelected;
-      return selectedItem;
-    });
- 
-    this.cd.detectChanges();
-    this.emitSelectedValues(valuesToEmit);
- 
-  }
- 
-  onSelectAll(event: any) {
-    const selectAll = event.currentTarget.checked;
-    this.filteredValues.forEach((item: any) => item.isSelected = selectAll);
- 
-    if (selectAll) {
-      this.selectedValues = [...this.filteredValues];
-    } else {
-      this.selectedValues = [];
-    }
- 
-    const valuesToEmit = this.selectedValues.map((value: any) => {
-      const { isSelected, ...selectedItem } = value;
-      return selectedItem;
-    });
- 
-    this.cd.detectChanges();
-    this.emitSelectedValues(valuesToEmit);
-  }
- 
- 
-  emitSelectedValues(values: any[]) {
-    if (this.multi) {
-      this.selected.emit(values);
-    } else {
-      this.selected.emit(values[0]);
-    }
-  }
- 
-  checkIfAllSelected() {
-    return this.filteredValues.every((item: any) => item.isSelected);
-  }
-}

package/src/lib/modules/common/filters/filters.component.html

@@ -1,76 +0,0 @@
-<div class="position-relative">
-                   
-    <button type="button" (click)="opendropdown($event)"
-    class="btn btn-default bg-white mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val"><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>
-    <span class="ms-2">Filter</span> </button>
-    <div class="card p-5 dropdown1 position-absolute z-1 end-0" style="z-index: 1 !important;" *ngIf="Opendropdown">
-        <div class="dropdown-title d-flex justify-content-between">Filter Options
-            <!-- <div class="text-end"> -->
-                <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> -->
-        </div>
-        <div class="w-100 border border-gray mt-3"></div>
-        <div class="py-3" *ngFor="let item of dataObject; let i = index">
-            <div *ngIf="item.type !== 'single'">
-                <div class="dropdown form-select position-relative d-flex justify-content-between cursor-pointer" (click)="Dropdown(item.Description,i,$event)">
-                    <!-- <span class="">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->
-                     <span>{{item.Description}}</span> <span *ngIf="selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0" class="badge badge-light-default">{{selectedValuesArray[i]?.length}}</span>
-                </div>
-                <div *ngIf="item.isOpen" class="dropdown-content position-absolute w-100">
-                    <div class="form-check d-flex align-items-center py-3 pt-3 ps-0">
-                        <input class="form-check-input cursor-pointer" type="checkbox" value="Select All" id="selectall{{i}}"  [checked]="selectedValuesArray[i]?.length === item.Issues.length"
-                          (change)="toggleCheckbox($event,'Select All', i,0)">
-                        <label class="form-check-label cursor-pointer px-2" for="selectall{{i}}">
-                            Select All
-                        </label>
-                    </div>
-         
-                    <div class="border border-gray mt-3 "></div>
-         
-                    <div class="mt-3 d-flex align-items-center">
-                        <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)]="dataObject[i].selectedValue" (input)="searchData($event,i)" [id]="i" class="form-control searchinput ps-14 py-2 me-2 mt-2"
-                                     placeholder="Search" autocomplete="off" />
-                    </div>
-         
-                    <div *ngFor="let issue of item.Issues;let j=index"  class="form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2 ">
-                        <input class="form-check-input cursor-pointer" type="checkbox" [value]="issue.text" id="option{{issue.text}}" [checked]="issue.checked"
-                         (change)="toggleCheckbox($event,issue.text,i,j)">
-                        <label class="form-check-label cursor-pointer px-2" for="option{{issue.text}}">
-                            {{ issue.text }}
-                        </label>
-                    </div>
-                    <div class="mt-5 d-flex justify-content-center">
-                        <span class="form-check-label" *ngIf="noFilter"> No filters available</span>
-                    </div>
-                </div>
-            </div>
-            <div *ngIf="item.type === 'single'" class="position-relative w-100">
-                <button type="button" (click)="openDropdown($event,i)"
-                class="btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between"> {{selectedValuesArray[i]?.text ? selectedValuesArray[i]?.text : item.Description}}
-                <span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                    <path d="M5 7.5L10 12.5L15 7.5" stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg></span>
-                </button>
-                <div *ngIf="item.isOpen" class="card py-1 w-100 dropdown-single position-absolute z-1 top-50px end-0">
-                        <ul *ngFor="let item of item.Issues; let j = index" class="list-unstyled">
-                        <li [ngClass]="selectedValuesArray[i]?.text === item.text ? 'active' : ''" class="camera px-5 items fw-semibold cursor-pointer py-2" (click)="selectItem($event,i,j)">{{item.text}}</li>
-                        </ul>
-                </div>
-              </div>
-        </div>
-        <!-- <div role="group" class="d-flex justify-content-between">
-            <button class="btn btn-outline w-100 me-2" (click)="Reset()"> Reset </button>
-            <button class="btn btn-primary w-100 ms-2" (click)="Apply()">Apply</button>
-        </div> -->
-    </div>
-</div>

package/src/lib/modules/common/filters/filters.component.scss

@@ -1,131 +0,0 @@
-.dropdown1 {
-    position: absolute;
-    top: 53px !important;
-    // 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;
-        }
-    }
-
-    .dropdown-content {
-        // display: none;
-        // position: absolute;
-        // left:0;
-        width: 90% !important;
-        z-index: 1;
-        padding: 10px;
-        background-color: white;
-        border-radius: 8px;
-        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-        height:200px;
-        overflow: auto;
-
-        label {
-            color: var(--Gray-700, #344054);
-            font-size: 14px;
-            font-weight: 500;
-            line-height: 20px;
-            text-transform: capitalize;
-        }
-    }
-
-    .items:hover,.tems.focus,.items.active,.camera.focus-visible{
-        background: var(--Gray-50, #F9FAFB);
-    }
-
-    .dropdown-content a {
-        color: black;
-        padding: 12px 16px;
-        text-decoration: none;
-        display: block;
-    }
-
-    .dropdown button {
-        padding: 10px;
-        font-size: 16px;
-        cursor: pointer;
-    }
-
-    input[type='checkbox'] {
-        width: 16px !important;
-        height: 16px !important;
-        margin: -3px 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;
-    }
-}
-
-::ng-deep .dropdown1{
-    z-index: 1 !important;
-}
-
-.btn-resize{
-    font-size: 13px !important;
-    height: 29px !important;
-    line-height: 11px !important;
-    padding: 1px !important;
-}
-.dropdown-single{
-    // display: none;
-        // position: absolute;
-        // left:0;
-        // width: 90% !important;
-        z-index: 1;
-        padding: 10px;
-        background-color: white;
-        border-radius: 8px;
-        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-        min-height: auto;
-        max-height:200px;
-        overflow: auto;
- 
-        label {
-            color: var(--Gray-700, #344054);
-            font-size: 14px;
-            font-weight: 500;
-            line-height: 20px;
-            text-transform: capitalize;
-        }
-}

package/src/lib/modules/common/filters/filters.component.spec.ts

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