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

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

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

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

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

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

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

@@ -1,46 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'lib-pagination',
-  templateUrl: './pagination.component.html',
-  styleUrl: './pagination.component.scss'
-})
-export class PaginationComponent {
-  @Input() collection: any[] = [];
-  @Input() itemsPerPage: number;
-  @Input() currentPage: number;
-  @Input() totalItems: number;
-  @Input() directionLinks: boolean = false;
-
-  @Input() pageSize: number;
-  @Input() paginationSizes: number[];
-  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
-  @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
-  instanceId = crypto.randomUUID()
-  
-  onPageChange(page: number) {
-    this.pageChange.emit(page);
-  }
-
-  onPageSizeChange(pageSize:any) {
-    this.itemsPerPage = pageSize;
-    this.pageSizeChange.emit(this.pageSize);
-  }
-
-  // disableOption(size: number): boolean {
-  //   if (!this.paginationSizes.includes(size)) {
-  //     console.error('Size is not in paginationSizes.');
-  //     return true; // Disable the option to prevent invalid selection
-  //   }
-  
-  //   // Calculate the maximum possible total items on the current page
-  //   const maxTotalOnPage = (this.currentPage) * size;
-  //   console.log('Current Page:', maxTotalOnPage);
-  //   // Disable the option if totalItems is less than or equal to the option size
-  //   const disable = this.totalItems <= maxTotalOnPage;
-  //   console.log('Disable:', disable);
-  //   return disable;
-  // }
-  
-  
-}

package/src/lib/modules/errors/error403/error403.component.html

@@ -1,25 +0,0 @@
-<!--begin::Title-->
-<h1 class="fw-bolder fs-2hx text-gray-900 mb-4">
-    !Forbidden
-  </h1>
-  <!--end::Title-->
-  
-  <!--begin::Text-->
-  <div class="fw-semibold fs-6 text-gray-500 mb-7">
-    We can't find that page.
-  </div>
-  <!--end::Text-->
-  
-  <!--begin::Illustration-->
-  <div class="mb-3">
-    <img src="./assets/media/auth/404-error.png" class="mw-100 mh-300px theme-light-show" alt="" />
-    <img src="./assets/media/auth/404-error-dark.png" class="mw-100 mh-300px theme-dark-show" alt="" />
-  </div>
-  <!--end::Illustration-->
-  
-  <!--begin::Link-->
-  <div class="mb-0">
-    <a routerLink="/manage/brands" class="btn btn-sm btn-primary">Return Home</a>
-  </div>
-  <!--end::Link-->
-  

package/src/lib/modules/errors/error403/error403.component.spec.ts

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

package/src/lib/modules/errors/error403/error403.component.ts

@@ -1,28 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { ThemeModeService } from 'tango-app-ui-global';
-
-@Component({
-  selector: 'lib-error403',
-  templateUrl: './error403.component.html',
-  styleUrl: './error403.component.scss'
-})
-export class Error403Component implements OnInit,OnDestroy {
-  private unsubscribe: Subscription[] = [];
-
-  constructor(private router: Router, private modeService: ThemeModeService) {}
-  ngOnInit(): void {
-    const subscr = this.modeService.mode.asObservable().subscribe((mode) => {
-      document.body.style.backgroundImage =
-        mode === 'dark'
-          ? 'url(./assets/media/auth/bg1-dark.jpg)'
-          : 'url(./assets/media/auth/bg1.jpg)';
-    });
-    this.unsubscribe.push(subscr);
-  }
-  ngOnDestroy() {
-    this.unsubscribe.forEach((sb) => sb.unsubscribe());
-    document.body.style.backgroundImage = 'none';
-  }
-}

package/src/lib/modules/errors/error404/error404.component.html

@@ -1,24 +0,0 @@
-<!--begin::Title-->
-<h1 class="fw-bolder fs-2hx text-gray-900 mb-4">
-  Oops!
-</h1>
-<!--end::Title-->
-
-<!--begin::Text-->
-<div class="fw-semibold fs-6 text-gray-500 mb-7">
-  We can't find that page.
-</div>
-<!--end::Text-->
-
-<!--begin::Illustration-->
-<div class="mb-3">
-  <img src="./assets/media/auth/404-error.png" class="mw-100 mh-300px theme-light-show" alt="" />
-  <!-- <img src="./assets/media/auth/404-error-dark.png" class="mw-100 mh-300px theme-dark-show" alt="" /> -->
-</div>
-<!--end::Illustration-->
-
-<!--begin::Link-->
-<div class="mb-0">
-  <a (click)="routeToDashboard()" class="btn btn-sm btn-primary">Return Home</a>
-</div>
-<!--end::Link-->

package/src/lib/modules/errors/error404/error404.component.spec.ts

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

package/src/lib/modules/errors/error404/error404.component.ts

@@ -1,50 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-import {
-  DrawerComponent,
-  MenuComponent,
-  ScrollComponent,
-  ScrollTopComponent,
-  StickyComponent,
-  ToggleComponent,
-} from 'tango-app-ui-global';
-import { ThemeModeService } from 'tango-app-ui-global';
-
-@Component({
-  selector: 'lib-error404',
-  templateUrl: './error404.component.html',
-  styleUrls: ['./error404.component.scss'],
-})
-export class Error404Component implements OnInit, OnDestroy {
-  private unsubscribe: Subscription[] = [];
-
-  constructor(private router: Router, private modeService: ThemeModeService) {}
-
-  ngOnInit(): void {
-    // const subscr = this.modeService.mode.asObservable().subscribe((mode) => {
-    //   document.body.style.backgroundImage =
-    //     mode === 'dark'
-    //       ? 'url(./assets/media/auth/bg1-dark.jpg)'
-    //       : 'url(./assets/media/auth/bg1.jpg)';
-    // });
-    // this.unsubscribe.push(subscr);
-  }
-
-  routeToDashboard() {
-    this.router.navigate(['/manage/brands']);
-    // setTimeout(() => {
-    //   ToggleComponent.reinitialization();
-    //   ScrollTopComponent.reinitialization();
-    //   DrawerComponent.reinitialization();
-    //   StickyComponent.bootstrap();
-    //   MenuComponent.reinitialization();
-    //   ScrollComponent.reinitialization();
-    // }, 200);
-  }
-
-  ngOnDestroy() {
-    this.unsubscribe.forEach((sb) => sb.unsubscribe());
-    document.body.style.backgroundImage = 'none';
-  }
-}

package/src/lib/modules/errors/error500/error500.component.html

@@ -1,24 +0,0 @@
-<!--begin::Title-->
-<h1 class="fw-bolder fs-2qx text-gray-900 mb-4">
-  System Error
-</h1>
-<!--end::Title-->
-
-<!--begin::Text-->
-<div class="fw-semibold fs-6 text-gray-500 mb-7">
-  Something went wrong! Please try again later.
-</div>
-<!--end::Text-->
-
-<!--begin::Illustration-->
-<div class="mb-11">
-  <img src="./assets/media/auth/500-error.png" class="mw-100 mh-300px theme-light-show" alt="" />
-  <img src="./assets/media/auth/500-error-dark.png" class="mw-100 mh-300px theme-dark-show" alt="" />
-</div>
-<!--end::Illustration-->
-
-<!--begin::Link-->
-<div class="mb-0">
-  <a (click)="routeToDashboard()" class="btn btn-sm btn-primary">Return Home</a>
-</div>
-<!--end::Link-->

package/src/lib/modules/errors/error500/error500.component.spec.ts

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

package/src/lib/modules/errors/error500/error500.component.ts

@@ -1,50 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-import {
-  DrawerComponent,
-  MenuComponent,
-  ScrollComponent,
-  ScrollTopComponent,
-  StickyComponent,
-  ToggleComponent,
-} from 'tango-app-ui-global';
-import { ThemeModeService } from 'tango-app-ui-global';
-
-@Component({
-  selector: 'lib-error500',
-  templateUrl: './error500.component.html',
-  styleUrls: ['./error500.component.scss'],
-})
-export class Error500Component implements OnInit, OnDestroy {
-  private unsubscribe: Subscription[] = [];
-
-  constructor(private router: Router, private modeService: ThemeModeService) {}
-
-  ngOnInit(): void {
-    const subscr = this.modeService.mode.asObservable().subscribe((mode) => {
-      document.body.style.backgroundImage =
-        mode === 'dark'
-          ? 'url(./assets/media/auth/bg7-dark.jpg)'
-          : 'url(./assets/media/auth/bg7.jpg)';
-    });
-    this.unsubscribe.push(subscr);
-  }
-
-  routeToDashboard() {
-    this.router.navigate(['dashboard']);
-    setTimeout(() => {
-      ToggleComponent.reinitialization();
-      ScrollTopComponent.reinitialization();
-      DrawerComponent.reinitialization();
-      StickyComponent.bootstrap();
-      MenuComponent.reinitialization();
-      ScrollComponent.reinitialization();
-    }, 200);
-  }
-
-  ngOnDestroy() {
-    this.unsubscribe.forEach((sb) => sb.unsubscribe());
-    document.body.style.backgroundImage = 'none';
-  }
-}

package/src/lib/modules/errors/errors-routing.module.ts

@@ -1,40 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { Error404Component } from './error404/error404.component';
-import { Error500Component } from './error500/error500.component';
-import { ErrorsComponent } from './errors.component';
-import { Error403Component } from './error403/error403.component';
-import { InvalidIpComponent } from './invalid-ip/invalid-ip.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: ErrorsComponent,
-    children: [
-      {
-        path: '403',
-        component: Error403Component,
-      },
-      {
-        path: '404',
-        component: Error404Component,
-      },
-      {
-        path: '500',
-        component: Error500Component,
-      },
-      {
-        path: '403-ip',
-        component: InvalidIpComponent,
-      },
-      { path: '', redirectTo: '404', pathMatch: 'full' },
-      { path: '**', redirectTo: '404', pathMatch: 'full' },
-    ],
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class ErrorsRoutingModule {}