verben-ng-ui 0.0.1

package/src/lib/components/sort-table/sort-table.component.ts

@@ -0,0 +1,204 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { DataFilterType } from '../../models/table-filter';
+import { IDataFilter } from '../../models/data-filter';
+
+@Component({
+  selector: 'verben-sort-table',
+  templateUrl: './sort-table.component.html',
+  styleUrls: ['./sort-table.component.css'],
+
+})
+export class SortTableComponent {
+  @Input() enableDragAndDrop: boolean = false;
+  @Input() sortOptions: IDataFilter[] = [];
+  @Input() resetText: string = 'Reset';
+  @Input() displayedOptions: number = 4;
+  @Input() propertyText: string = 'Property';
+  @Input() showMoreText: string = 'Show more';
+  @Input() sortButtonText: string = 'Sort';
+  @Input() pd?: string;
+  @Input() mg?: string;
+  @Input() height?: string;
+  @Input() width?: string;
+  @Input() bgColor?: string;
+  @Input() boxShadow?: string;
+  @Input() textColor?: string;
+  @Input() primaryColor?: string;
+  @Input() secondaryColor?: string;
+  @Input() tertiaryColor?: string;
+  @Input() border?: string="";
+  @Input() borderRadius?: string;
+  @Input() selectWidth?: string;
+  @Input() containerHeight?:string="400px"
+  @Output() selectedOptions = new EventEmitter<IDataFilter[]>();
+  draggedIndex: number | null = null;
+  visibleSortOptions: IDataFilter[]= [];
+  hiddenSortOptions: IDataFilter[] = [];
+  showMore: boolean = false;
+  disableSortButton: boolean = false;
+  selectedOrders: Map<number, 'asc' | 'desc'> = new Map();
+  defaultSortOptions: IDataFilter[] = [];
+  checkAll: boolean = false;
+  ngOnInit() {
+    this.defaultSortOptions = [...this.sortOptions];
+    this.updateVisibleOptions();
+    this.updateSortButtonState();
+  }
+
+  updateVisibleOptions() {
+    if (this.sortOptions.length > this.displayedOptions) {
+      this.visibleSortOptions = this.sortOptions.slice(
+        0,
+        this.displayedOptions
+      );
+      this.hiddenSortOptions = this.sortOptions.slice(this.displayedOptions);
+      this.showMore = true;
+    } else {
+      this.visibleSortOptions = this.sortOptions;
+      this.showMore = false;
+    }
+  }
+
+  toggleShowMore() {
+    if (this.showMoreText === 'Show more') {
+      this.visibleSortOptions.push(...this.hiddenSortOptions);
+      this.showMoreText = 'Show less';
+    } else {
+      this.updateVisibleOptions();
+      this.showMoreText = 'Show more';
+    }
+  }
+  applySort() {
+    const selectedSorts = this.sortOptions.filter((option) => option.checked);
+    const selectedSortDetails = selectedSorts.map((sort, index) => {
+      return {
+        name:sort.name,
+        type: sort.type || 'String',
+        value:
+          this.getSortOrder(
+            sort.type,
+            this.selectedOrders.get(index) || 'asc'
+          ) || '',
+        checked: sort.checked || false,
+      };
+    });
+    this.selectedOptions.emit(selectedSortDetails);
+    return selectedSortDetails;
+  }
+  getSortOrder(type: DataFilterType, selectedOrder: 'asc' | 'desc') {
+    if (type === 'Number') {
+      return selectedOrder === 'asc' ? 'asc' : 'desc';
+    } else if (type === 'String') {
+      return selectedOrder === 'asc' ? 'asc' : 'desc';
+    } else if (type === 'Date') {
+      return selectedOrder === 'asc' ? 'asc' : 'desc';
+    }
+    return null;
+  }
+
+  toggleSort(index: number) {
+    const option = this.sortOptions[index];
+    option.checked = !option.checked;
+    if (!option.checked) {
+      this.checkAll = false; 
+    } else if (this.sortOptions.every(option => option.checked)) {
+      this.checkAll = true; 
+    }
+    
+    if (option.checked) {
+      this.selectedOrders.set(index, 'asc');
+    } else {
+      this.selectedOrders.delete(index);
+    }
+    this.updateSortButtonState();
+  }
+  toggleSelectAll() {
+    this.checkAll = !this.checkAll;  // Toggle checkAll state
+  
+    // Set all options to checked/unchecked and assign default sort order when checked
+    this.sortOptions.forEach((option, index) => {
+      option.checked = this.checkAll;
+      
+      if (this.checkAll) {
+        // If checked, set the default sort order to 'asc' for all
+        this.selectedOrders.set(index, 'asc');
+      } else {
+        // If unchecked, remove the sort order
+        this.selectedOrders.delete(index);
+      }
+    });
+  
+    this.updateSortButtonState(); // Update the state of the sort button
+  }
+  
+  resetSort() {
+    this.sortOptions.forEach((option, index) => {
+      option.checked = false;
+      this.selectedOrders.delete(index);
+    });
+  
+    this.sortOptions = [...this.defaultSortOptions];
+    this.updateVisibleOptions();
+    this.updateSortButtonState();
+    this.checkAll=false
+  }
+
+  updateSortButtonState() {
+    this.disableSortButton = this.countSelectedSorts() === 0;
+  }
+
+  countSelectedSorts(): number {
+    return this.sortOptions.filter((option) => option.checked).length;
+  }
+
+  setSortOrder(index: number, order: 'asc' | 'desc') {
+    this.selectedOrders.set(index, order);
+  }
+
+  onDragStart(index: number, event: DragEvent) {
+    if (!this.enableDragAndDrop) return;
+    this.draggedIndex = index;
+    event.dataTransfer?.setData('text/plain', String(index));
+  }
+
+  onDragOver(event: DragEvent) {
+    if (!this.enableDragAndDrop) return;
+    event.preventDefault();
+  }
+
+  onDrop(index: number, event: DragEvent) {
+    if (!this.enableDragAndDrop) return;
+    event.preventDefault();
+    if (this.draggedIndex !== null) {
+      this.swapColumns(this.draggedIndex, index);
+    }
+  }
+
+  swapColumns(fromIndex: number, toIndex: number) {
+    if (
+      fromIndex < this.visibleSortOptions.length &&
+      toIndex < this.visibleSortOptions.length
+    ) {
+      const temp = this.visibleSortOptions[fromIndex];
+      this.visibleSortOptions[fromIndex] = this.visibleSortOptions[toIndex];
+      this.visibleSortOptions[toIndex] = temp;
+
+      const globalFromIndex = this.sortOptions.indexOf(temp);
+      const globalToIndex = this.sortOptions.indexOf(
+        this.visibleSortOptions[fromIndex]
+      );
+
+      if (globalFromIndex !== -1 && globalToIndex !== -1) {
+        const tempGlobal = this.sortOptions[globalFromIndex];
+        this.sortOptions[globalFromIndex] = this.sortOptions[globalToIndex];
+        this.sortOptions[globalToIndex] = tempGlobal;
+      }
+    }
+    this.draggedIndex = null;
+  }
+}

package/src/lib/components/sort-table/sort-table.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms'
+import { CommonModule } from '@angular/common';
+import { SortTableComponent } from './sort-table.component';
+import { SvgModule } from '../svg/svg.module';
+@NgModule({
+  declarations:[SortTableComponent],
+  imports: [FormsModule,CommonModule,CommonModule, FormsModule, SvgModule],
+  exports: [SortTableComponent]
+})
+export class SortTableModule {}

package/src/lib/components/svg/svg.component.html

@@ -0,0 +1 @@
+<p>svg works!</p>

package/src/lib/components/svg/svg.component.spec.ts

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

package/src/lib/components/svg/svg.component.ts

@@ -0,0 +1,64 @@
+import { Component, Input, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Component({
+  selector: 'verben-svg',
+  template: '<span #svgContainer></span>',
+  styleUrls: ['./svg.component.css']
+})
+export class SvgComponent implements OnInit {
+  @Input() icon: string = '';
+  @Input() width: number = 24;
+  @Input() height: number = 24;
+  @Input() fill: string = '';
+  @Input() stroke: string = '';
+
+  @ViewChild('svgContainer', { static: true }) svgContainer!: ElementRef;
+
+  constructor(private http: HttpClient, private sanitizer: DomSanitizer) {}
+
+  ngOnInit(): void {
+    this.loadSvgIcon(this.icon);
+  }
+
+  ngOnChanges(): void {
+    this.loadSvgIcon(this.icon);
+  }
+
+  loadSvgIcon(iconName: string): void {
+    this.http.get(`assets/icons/${iconName}.svg`, { responseType: 'text' })
+      .subscribe((svgContent: string) => {
+        this.updateSvg(svgContent);
+      }, (error) => {
+        console.error(`Error loading SVG icon: ${error}`);
+      });
+  }
+
+  private updateSvg(svgContent: string): void {
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml');
+    const svgElement = svgDoc.documentElement;
+
+    svgElement.setAttribute('width', this.width.toString());
+    svgElement.setAttribute('height', this.height.toString());
+
+    const elementsToUpdate = ['path', 'circle', 'line', 'rect', 'polygon', 'polyline', 'ellipse'];
+
+    elementsToUpdate.forEach(tag => {
+      const elements = svgElement.querySelectorAll(tag);
+      elements.forEach(element => {
+        if (this.fill) {
+          element.setAttribute('fill', this.fill);
+        }
+        if (this.stroke) {
+          element.setAttribute('stroke', this.stroke);
+        }
+      });
+    });
+
+    const svgContainerEl = this.svgContainer.nativeElement;
+    svgContainerEl.innerHTML = '';
+    svgContainerEl.appendChild(svgElement);
+  }
+}

package/src/lib/components/svg/svg.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { SvgComponent } from './svg.component';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [SvgComponent],
+  imports: [CommonModule], 
+  exports: [SvgComponent]
+})
+export class SvgModule {}

package/src/lib/components/table-filter/table-filter.component.css

@@ -0,0 +1,93 @@
+
+h3,p{
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+}
+.top{ 
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+}
+
+hr{
+ border: 1px solid rgba(232, 234, 241, 1);
+  margin:0.8rem 0rem;
+}
+
+.centerInnerWrapper{ 
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.savedWrapper{ 
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+   margin-bottom: 0.5rem;
+}
+
+.checkboxWrapper{
+    display: flex;
+    align-items: center;
+   gap: 0.3rem;
+}
+
+.iconWrapper{
+ display: flex;
+ align-items: center;
+ gap:0.7rem;
+ cursor: pointer;
+}
+
+.moreWrapper{
+    display: flex;
+    align-items: center;
+    gap:0.4rem;
+    cursor: pointer;
+}
+
+
+.inputsWrapper{ 
+    margin-top: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap:0.5rem;
+    /* justify-content: space-between; */
+    /* flex-wrap: wrap; */
+}
+
+.btnWrapper{ 
+    display: flex;
+    justify-content: end;
+}
+
+.inputsWrapper select:nth-of-type(1) { 
+    width: 120px;
+}
+
+.inputsWrapper select:nth-of-type(2) { 
+    width: 70px;
+}
+
+input[type="checkbox"].checked {
+    accent-color: #3479E9
+}
+
+.selectAllWrapper{ 
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-bottom: 0.5rem;
+}
+
+.selectAllWrapper > input{ 
+    cursor: pointer;
+}
+
+.disablebtn {
+    cursor:not-allowed;
+}
+.enableBtn {
+    cursor:pointer;
+}

package/src/lib/components/table-filter/table-filter.component.html

@@ -0,0 +1,293 @@
+<section
+  [style.background-color]="bgColor"
+  [style.box-shadow]="boxShadow"
+  [style.border]="border"
+  [style.border-radius]="borderRadius"
+  [style.color]="textColor"
+  [style.width]="width"
+  [style.height]="height"
+  [style.padding]="pd"
+>
+  <div class="top">
+    <h3 [style.color]="tertiaryColor" [style.font-size]="'14px'">
+      Filters
+      <span [style.color]="secondaryColor"
+        ><sup>({{ filterCount }})</sup></span
+      >
+    </h3>
+    <button
+      [style.color]="secondaryColor"
+      [style.background-color]="bgColor"
+      [style.border]="'none'"
+      [style.cursor]="'pointer'"
+      [style.font-size]="'12px'"
+      (click)="resetFilters()"
+    >
+      Reset
+    </button>
+  </div>
+  <hr />
+
+  <!-- Saved Filters Section -->
+  <div class="center">
+    <div class="savedWrapper">
+      <h3 [style.font-size]="'13px'">Saved Filters</h3>
+      <verben-svg
+        icon="info"
+        [width]="15"
+        [height]="15"
+        fill="grey"
+      ></verben-svg>
+    </div>
+    <div class="selectAllWrapper" *ngIf="savedFilters.length">
+      <input
+        type="checkbox"
+        [checked]="checkAll"
+        (change)="toggleSelectAll()"
+      />
+      <p [style.font-size]="'13px'" [style.font-weight]="'500'">Select All</p>
+    </div>
+    <div
+      *ngFor="let filter of visibleFilters; let i = index"
+      class="centerInnerWrapper"
+    >
+      <div class="checkboxWrapper">
+        <span
+          ><input
+            type="checkbox"
+            [checked]="filter.checked"
+            (click)="toggleCheckbox(i)"
+        /></span>
+        <p
+          [style.font-size]="'13px'"
+          [style.font-weight]="'500'"
+          [style.color]="tertiaryColor"
+        >
+          {{ filter.name }} {{ filter.condition }} {{ filter.value}}
+        </p>
+      </div>
+      <div class="iconWrapper">
+        <verben-svg
+          icon="edit"
+          [width]="15"
+          [height]="15"
+          stroke="#3479E9"
+          fill="white"
+          (click)="editFilter(i)"
+        ></verben-svg>
+        <verben-svg
+          icon="delete"
+          [width]="15"
+          [height]="15"
+          stroke="#E20000"
+          (click)="deleteFilter(i)"
+        ></verben-svg>
+      </div>
+    </div>
+
+    <div
+      class="moreWrapper"
+      *ngIf="savedFilters.length > maxFilterLength"
+      (click)="toggleShowMore()"
+    >
+      <p
+        [style.font-size]="'12px'"
+        [style.font-weight]="'500'"
+        [style.color]="tertiaryColor"
+      >
+        {{ showAllFilters ? "Show less" : "Show more" }}
+      </p>
+        <verben-svg
+        icon="chevron"
+        [width]="8"
+        [height]="6"
+        fill="black"
+        stroke="black"
+      ></verben-svg>
+    </div>
+  </div>
+  <hr />
+
+  <!-- Operation Section -->
+  <div class="bottom">
+    <div class="savedWrapper">
+      <h3 [style.font-size]="'13px'">Operation</h3>
+      <div [ngStyle]="{'position':'relative'}"> 
+        
+        <verben-tooltip 
+        [tooltipContent]="tooltipTemplate"
+        [backgroundColor]="'grey'"
+        width="200px" 
+        [top]="'20px'"                 
+        [right]="'0px'"  
+        >
+        <verben-svg 
+        icon="info" 
+        [width]="15" 
+        [height]="15"   
+        *ngIf="isDuplicateFilter"
+        fill="red"
+        >
+        </verben-svg>
+        </verben-tooltip>
+      
+      <ng-template #tooltipTemplate>
+       {{duplicateMessage}}
+      </ng-template>
+        <!-- <verben-tooltip
+         [backgroundColor]="'grey'"
+         [textColor]="'white'"
+         [padding]="'10px'"
+         [borderRadius]="'8px'"
+         [top]="'20px'"                 
+         [right]="'0px'"   
+         width="250px" 
+         #tooltip 
+         *ngIf="tooltip"
+         >
+         <h3>{{duplicateMessage}}</h3>
+        </verben-tooltip> -->
+      </div>
+      <verben-svg
+        icon="info"
+        [width]="15"
+        [height]="15"
+        fill="grey"
+        *ngIf="!isDuplicateFilter"
+      ></verben-svg>
+    </div>
+
+    <div class="inputsWrapper">
+      <verben-drop-down
+        width="7rem"
+        placeholder="Select value"
+        [options]="filterArray"
+        [(ngModel)]="selectedFilterValue"
+        (ngModelChange)="onFilterNameChange(selectedFilterValue)"
+      >
+      </verben-drop-down>
+      <verben-drop-down
+        width="7rem"
+        placeholder="Select value"
+        placeholder="Select value"
+        [options]="conditionOptions"
+        (onChange)="checkDuplicateFilter()"
+        [(ngModel)]="selectedCondition"
+      >
+      </verben-drop-down>
+
+      <verbena-input
+      *ngIf="selectedFilterType === 'Date'"
+      border="1px solid #ccc"
+      borderRadius="5px"
+      textColor="black"
+      width="80px"
+      height="25px"
+      pd="6px"
+      [showBorder]="true"
+      [showErrorMessage]="true"
+      [errorPosition]="'bottom'"
+      [type]="'date'"
+      [(ngModel)]="inputValue"
+    ></verbena-input>
+
+      <verbena-input
+      *ngIf="selectedFilterType === 'Credit' || selectedFilterType === 'Integer'"
+      border="1px solid #ccc"
+      borderRadius="5px"
+      textColor="black"
+      width="100px"
+      height="25px"
+      pd="6px"
+      placeHolder="input integer"
+      [showBorder]="true"
+
+      [showErrorMessage]="true"
+      [errorPosition]="'bottom'"
+
+      appValidate="integer"
+      [(ngModel)]="inputValue"
+    ></verbena-input>
+
+      <verbena-input
+      *ngIf="selectedFilterType === 'Decimal'"
+      border="1px solid #ccc"
+      borderRadius="5px"
+      textColor="black"
+      width="100px"
+      height="25px"
+      pd="6px"
+      placeHolder="input a decimal"
+      [showBorder]="true"
+      [showErrorMessage]="false"
+      [errorPosition]="'bottom'"
+      appValidate="decimal"
+      [(ngModel)]="inputValue"
+    ></verbena-input>
+
+      <verbena-input
+      *ngIf="selectedFilterType !== 'Credit' && selectedFilterType !== 'Date'  && selectedFilterType !== 'Integer'  && selectedFilterType !== 'Decimal'"
+      border="1px solid #ccc"
+      placeHolder="input value"
+      borderRadius="5px"
+      textColor="black"
+      width="100px"
+      height="25px"
+      pd="6px"
+      [showBorder]="true"
+
+      [showErrorMessage]="true"
+      [errorPosition]="'bottom'"
+
+      [(ngModel)]="inputValue"
+    ></verbena-input>
+
+    </div>
+
+    <div class="btnWrapper">
+      <button
+        [style.margin-top]="'0.5rem'"
+        [style.outline]="'none'"
+        [style.border]="'none'"
+        [style.border-radius]="borderRadius"
+        [style.background-color]="'transparent'"
+        [style.color]="secondaryColor"
+        [style.font-size]="'12px'"
+        [style.font-weight]="'500'"
+        [disabled]="disableAddFilterBtn"
+        [ngClass]="{
+          disablebtn: disableAddFilterBtn,
+          enableBtn: !disableAddFilterBtn
+        }"
+        (click)="addFilter()"
+      >
+        + Add
+      </button>
+    </div>
+    <hr />
+
+    <div class="btnWrapper">
+      <button
+        [style.margin-top]="'0.5rem'"
+        [style.outline]="'none'"
+        [style.border]="'none'"
+        [style.padding]="'0.2rem 1.6rem'"
+        [style.background-color]="primaryColor"
+        [style.color]="tertiaryColor"
+        [style.font-size]="'12px'"
+        [style.font-weight]="'600'"
+        (click)="applyFilters()"
+        [disabled]="disableApplyFilterBtn"
+        [ngClass]="{
+          disablebtn: disableApplyFilterBtn,
+          enableBtn: !disableApplyFilterBtn
+        }"
+      >
+        Filter
+      </button>
+    </div>
+
+
+  </div>
+
+</section>