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

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

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

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

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

@@ -0,0 +1,23 @@
+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();
+  });
+});

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

@@ -0,0 +1,181 @@
+import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, Renderer2,ChangeDetectorRef } from '@angular/core';
+import { Router } from '@angular/router';
+ 
+@Component({
+  selector: 'lib-filters',
+  templateUrl: './filters.component.html',
+  styleUrl: './filters.component.scss'
+})
+export class FiltersComponent implements OnInit {
+  @Input() dataObject: any[] = [];
+  @Output() appliedFilters = new EventEmitter()
+  Opendropdown: boolean = false;
+ 
+  showdropdown: any;
+  selectedValues: string[] = [];
+  searchTerms: string[] = [];
+  selectedValuesArray: any[] = [];
+  searchValue:any;
+  selectedItem:any;
+  dropDown: boolean = false;
+  dummyArray:any[] = [];
+  noFilter:boolean = false;
+  responseArray:any[] = []
+  productModule: any;
+  product: any;
+  selectedProductCount: string;
+  constructor(private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private router: Router,
+  private cd:ChangeDetectorRef) {
+     }
+ 
+  @HostListener('document:click', ['$event'])
+  onClick (event: MouseEvent) {
+    const
+      target = event.target as HTMLElement;
+    if(!target.closest('.dropdown1')) {
+      this.Opendropdown = false;
+    }
+    if(!target.closest('.dropdown-content')){
+      this.dataObject.forEach((item: any, i: any) => {
+          item.isOpen = false;
+        }
+      );
+    }
+  }
+ 
+  ngOnInit() {
+    this.dataObject.forEach((item:any)=>{
+      let selectedList = item?.Issues.filter((data:any)=> data?.checked)
+      this.selectedValuesArray.push(selectedList)
+    })
+    this.dummyArray = JSON.parse(JSON.stringify(this.dataObject))
+    this.responseArray = JSON.parse(JSON.stringify(this.dataObject))
+  }
+ 
+  selectItem(event:any,index:any,subIndex:any){
+    this.selectedValuesArray[index] = this.dataObject[index].Issues[subIndex];
+  }
+
+  openDropdown(event:MouseEvent,index:any){
+    event.stopPropagation();
+    this.dataObject.forEach((item: any, i: any) => {
+      if (i !== index) {
+        item.isOpen = false; // Close other dropdowns
+      }
+    });
+    this.dataObject[index].isOpen = !this.dataObject[index].isOpen;
+  }
+ 
+ 
+  opendropdown(e:MouseEvent) {
+    e.stopPropagation();
+    this.Opendropdown = !this.Opendropdown;
+  }
+ 
+  Dropdown(value: any, index: number,event:MouseEvent) {
+    event.stopPropagation();
+    this.dataObject.forEach((item: any, i: any) => {
+      if (i !== index) {
+        item.isOpen = false; // Close other dropdowns
+      }
+    });
+    this.dataObject[index].isOpen = !this.dataObject[index].isOpen;
+  }
+ 
+  toggleCheckbox(event: any, issue: any, index: number, subIndex: number) {
+    if(!this.selectedValuesArray.length) {
+      this.dataObject.forEach((item:any)=>{
+        let selectedList = item?.Issues.filter((data:any)=> data?.checked)
+        this.selectedValuesArray.push(selectedList)
+      })
+    }
+    const currentIssues = this.dataObject[index].Issues;
+    this.selectedValuesArray[index] = this.selectedValuesArray[index];
+    const selectedValues = this.selectedValuesArray[index]; // Retrieve selected values array for the current dropdown index
+    if (issue === 'Select All') {
+      const checkedState = event.target.checked;
+      this.dataObject[index].Issues.forEach((item: any) => {
+        item.checked = checkedState;
+      });
+
+      if (checkedState) {
+        this.selectedValuesArray[index] = currentIssues.slice(); // Copy all items
+      } else {
+        this.selectedValuesArray[index] = []; // Deselect all items
+      }
+    } else {
+      this.dataObject[index].Issues[subIndex].checked = event.target.checked;
+      let checkedData = this.dataObject[index].Issues[subIndex];
+      
+      if(this.dataObject[index].Issues[subIndex].checked){
+        this.selectedValuesArray[index].push(checkedData)
+      }
+      else{
+        this.selectedValuesArray[index] = this.selectedValuesArray[index].filter((el:any)=>
+          el?.checked === true && el?.text != issue
+      )
+      }  
+
+    }
+
+    const selectAllId = `selectall${index}`;
+    const selectAllElement = document.getElementById(selectAllId) as HTMLInputElement;
+    if (selectAllElement) {
+      selectAllElement.checked = selectedValues.length === currentIssues.length;
+    }
+ 
+    // Update checkboxes based on selected values
+    currentIssues.forEach((item: string) => {
+      const isChecked = this.selectedValuesArray[index].includes(item);
+      const checkboxId = `option${item}`;
+      const checkboxElement = document.getElementById(checkboxId) as HTMLInputElement;
+      if (checkboxElement) {
+        checkboxElement.checked = isChecked;
+      }
+    });
+   
+  }
+  Reset() {
+    this.selectedValuesArray.forEach((item:any) => {
+      if(item?.length){item.forEach((data:any)=>{data.checked = false;})
+      }
+    })
+    this.selectedValuesArray = [];
+    this.Opendropdown = false;
+    this.responseArray.forEach((item:any,index:any)=>{
+      item.Issues = this.selectedValuesArray[index] ? this.selectedValuesArray[index] :[]
+   })
+   this.appliedFilters.emit(this.responseArray)
+  }
+  searchData(event:any,i:any){
+    const searchTerm = event.target.value.trim(); // Trim whitespace
+    const filteredIssues = this.dummyArray[i]?.Issues.filter((item:any) =>  {
+      let findChecked = this.selectedValuesArray[i]?.find((issue:any) => issue.text == item.text );
+      if(findChecked) {
+        item.checked = findChecked?.checked ? findChecked?.checked : false;
+      }
+      else {
+        item.checked = false;
+      }
+      return new RegExp(searchTerm,'i').test(item.text);
+    });
+    this.dataObject[i].Issues = filteredIssues;
+    if(filteredIssues.length){
+      this.noFilter = false;
+    }else{
+      this.noFilter = true;
+    }
+    this.cd.detectChanges();
+  }
+
+  Apply() {
+    this.Opendropdown = false;
+    this.responseArray.forEach((item:any,index:any)=>{
+      item.Issues = this.selectedValuesArray[index] ? this.selectedValuesArray[index] :[]
+   })
+   this.appliedFilters.emit(this.responseArray)
+  }
+}
+ 

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

@@ -0,0 +1,26 @@
+<div class="container d-flex justify-content-center">
+    <div class="mt-4 text-center">
+      <span class="sub-title me-3">Displaying</span>
+      <select class="border-val" [(ngModel)]="pageSize" (ngModelChange)="onPageSizeChange($event)" >
+        <option value="{{ size }}" *ngFor="let size of paginationSizes" >{{ size }}</option>
+        <!-- [disabled]="disableOption(size)" -->
+      </select>
+      <span class="ms-3 sub-title">out of {{ totalItems }} items</span>
+    </div>
+  
+    <div class="text-center">
+      <ul>
+        <li *ngFor="let item of collection | paginate: { id:instanceId, itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }">
+          <!-- Your item template here -->
+        </li>
+      </ul>
+      <pagination-controls 
+        (pageChange)="onPageChange($event); currentPage=$event;" 
+        [id]="instanceId"
+        [directionLinks]="directionLinks"
+        [maxSize]="7"
+        [responsive]="true">
+      </pagination-controls>
+    </div>
+  </div>
+  

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

@@ -0,0 +1,63 @@
+::ng-deep .ngx-pagination .current {
+    padding: 12px !important;
+        background: #EAF8FF !important;
+        cursor: default;
+        color: #00A3FF !important;
+        min-width:50px !important;
+        max-width: auto !important;
+        height: 45px;
+        border-radius: 8px;
+        background: var(--Primary-50, #EAF8FF);
+        color: var(--Primary-600, #00A3FF) !important;
+        text-align: center;
+        font-size: 14px !important;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+}
+::ng-deep .ngx-pagination a:hover, .ngx-pagination button:hover {
+    background: #e6e6e6;
+    padding: 12px !important;
+    min-width:50px !important;
+    max-width: auto !important;
+    height: 45px;
+    border-radius: 8px;
+    line-height: 20px;
+}
+::ng-deep {.ngx-pagination{
+    color: var(--Gray-500, #667085) !important;
+        font-size: 14px !important;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+}
+.ngx-pagination a{
+padding: 0.1875rem 1rem !important;
+}
+}
+*{
+    font-family: 'Inter' !important;
+}
+.border-val{
+padding: 10px 14px !important;
+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;
+}
+select {
+    -webkit-appearance: none; /* Remove default arrow for WebKit browsers */
+    -moz-appearance: none; /* Remove default arrow for Firefox */
+    appearance: none; /* Remove default arrow for modern browsers */
+    background-image: url('data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 12l-6-6h12l-6 6z" fill="%23777"/></svg>'); /* Add custom arrow */
+    background-repeat: no-repeat;
+    background-position-x: calc(100% - 12px);
+    background-position-y: 50%;
+    padding-right: 20px; /* Adjust as needed */
+}
+.sub-title{
+color: var(--Gray-700, #344054) !important;
+font-size: 14px !important;
+font-weight: 500 !important;
+line-height: 20px;
+}

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

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