verben-ng-ui 0.0.1

package/src/lib/components/table-filter/table-filter.component.spec.ts

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

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

@@ -0,0 +1,221 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { IDataFilter } from '../../models/table-filter';
+import { Config } from '../../config';
+
+
+@Component({
+  selector: 'verben-table-filter',
+  templateUrl: './table-filter.component.html',
+  styleUrls: ['./table-filter.component.css']
+})
+export class TableFilterComponent implements OnInit {
+  @Input() filterOptions: IDataFilter[] = [];
+  @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() maxFilterLength:number = 3
+  @Input() tooltip:boolean = false
+  @Output() filtersApplied = new EventEmitter<any>();
+  
+  filterArray:string[] = [];
+  selectedFilterValue: string = '';
+  selectedFilterType?:any;
+  conditionOptions: string[] = [];
+  selectedCondition: string | undefined = '';
+  inputValue?: string | number
+  savedFilters: IDataFilter[] = [];
+  selectedFilters: IDataFilter[] = [];
+  showAllFilters: boolean = false;
+  editIndex: number | null = null;
+  checkAll: boolean = false;
+  isDuplicateFilter: boolean = false;
+  disableAddFilterBtn: boolean = false;
+  disableApplyFilterBtn: boolean = true;
+  duplicateMessage?:string = '';
+  configInstance: Config;
+  storageKey: string = 'savedFilters';
+  filterCount:number = 0
+
+  constructor(){ 
+    this.configInstance = new Config();
+  }
+
+  ngOnInit(): void {
+    this.filterArray = this.filterOptions.map(item => item.name);  
+    this.loadFiltersFromLocalStorage(); 
+  }
+  
+  loadFiltersFromLocalStorage() {
+    const savedFiltersFromStorage = localStorage.getItem(this.storageKey);
+    if (savedFiltersFromStorage) {
+      this.savedFilters = JSON.parse(savedFiltersFromStorage);
+      this.filterCount = this.savedFilters.filter(item => item.checked === true).length;
+    }
+  }
+
+  saveFiltersToLocalStorage() {
+    localStorage.setItem(this.storageKey, JSON.stringify(this.savedFilters));
+  }
+
+  onFilterNameChange(selectedFilterValue: string) {
+    const selectedFilter = this.filterOptions.find(option => option.name === selectedFilterValue);
+  
+    if (selectedFilter) {
+        this.selectedFilterType = selectedFilter.type;
+        this.conditionOptions = this.configInstance.getConditionOptions(this.selectedFilterType) || [];
+        this.selectedCondition = ''; 
+    }
+}
+
+  resetFilters() {
+    this.selectedFilterType = null;
+    this.selectedCondition = '';
+    this.inputValue = '';
+    this.savedFilters = [];
+    this.editIndex = null;
+    this.checkAll = false;
+    this.isDuplicateFilter = false;
+    this.disableApplyFilterBtn = true;
+    this.duplicateMessage = ''
+    localStorage.removeItem(this.storageKey);
+  }
+
+  addFilter() {
+    if (!this.selectedFilterValue || !this.selectedCondition || !this.inputValue) {
+        return;
+    }
+
+    if (this.editIndex === null && this.isDuplicateFilter) {
+        return; 
+    }
+
+    const newFilter: IDataFilter = {
+        name: this.selectedFilterValue,
+        type: this.selectedFilterType,
+        condition: this.selectedCondition,
+        value: this.inputValue,
+        checked: true
+    };
+
+    if (this.editIndex !== null) {
+        const isDuplicate = this.savedFilters.some(
+            (filter, index) =>
+                filter.name === newFilter.name &&
+                filter.condition === newFilter.condition &&
+                index !== this.editIndex
+        );
+
+        if (isDuplicate) {
+            return;
+        }
+        this.savedFilters[this.editIndex] = newFilter;
+        this.editIndex = null;
+    } else {
+        if (this.savedFilters.some(filter => 
+            filter.name === newFilter.name && 
+            filter.condition === newFilter.condition)) {
+            return;
+        }
+        this.savedFilters.push(newFilter);
+        this.filterCount = this.savedFilters.filter(item => item.checked === true).length;
+    }
+    this.saveFiltersToLocalStorage(); 
+    this.clearOperationSection();
+    this.checkFilterButton(); 
+  }
+
+
+  toggleCheckbox(index: number) {
+    this.savedFilters[index].checked = !this.savedFilters[index].checked;
+    this.checkAll = this.savedFilters.every(item => item.checked);
+    this.filterCount = this.savedFilters.filter(item => item.checked === true).length;
+  }
+
+  deleteFilter(index: number) {
+    this.savedFilters.splice(index, 1);
+    this.checkDuplicateFilter();
+    this.checkFilterButton();
+    this.saveFiltersToLocalStorage(); 
+    this.filterCount = this.savedFilters.filter(item => item.checked === true).length;
+    if (this.savedFilters.length === 0) {
+      this.checkAll = false;
+    }
+  }
+
+  editFilter(index: number) {
+    const filter = this.savedFilters[index];
+    this.selectedFilterType = filter.type;
+    this.selectedFilterValue = filter.name;
+    this.onFilterNameChange(this.selectedFilterValue) 
+    this.selectedCondition = filter.condition;
+    this.inputValue = filter.value;
+    this.editIndex = index;
+  }
+
+  applyFilters() {
+    this.selectedFilters = this.savedFilters.filter(filter => filter.checked);
+    this.filtersApplied.emit(this.selectedFilters);
+    this.filtersApplied.emit(this.storageKey);
+  }
+
+  toggleShowMore() {
+    this.showAllFilters = !this.showAllFilters;
+  }
+
+  get visibleFilters() {
+    return this.showAllFilters
+      ? this.savedFilters
+      : this.savedFilters.slice(0, this.maxFilterLength);
+  }
+
+  clearOperationSection() {
+    this.selectedFilterValue = '';
+    this.selectedCondition = '';
+    this.inputValue = '';
+  }
+
+  checkFilterButton() {
+    this.disableApplyFilterBtn = this.savedFilters.length === 0;
+  }
+
+  toggleSelectAll(): void {
+    this.checkAll = !this.checkAll;
+    this.savedFilters.forEach(filter => filter.checked = this.checkAll);
+    this.filterCount = this.savedFilters.filter(item => item.checked === true).length;
+  }
+
+  checkDuplicateFilter(): void {
+    if (this.editIndex !== null) {
+        const exists = this.savedFilters.some(
+            (filter, index) =>
+                filter.name === this.selectedFilterValue &&
+                filter.condition === this.selectedCondition &&
+                index !== this.editIndex 
+        );
+        this.disableAddFilterBtn = exists;
+        this.isDuplicateFilter = exists;
+        this.duplicateMessage = exists ? 'This entry is a duplicate and cannot be added.' : '';
+    } else {
+        
+        const exists = this.savedFilters.some(
+            (filter) =>
+                filter.name === this.selectedFilterValue &&
+                filter.condition === this.selectedCondition
+        );
+        this.disableAddFilterBtn = exists;
+        this.isDuplicateFilter = exists;
+        this.duplicateMessage = exists ? 'This entry is a duplicate and cannot be added.' : '';
+    }
+   }
+}
+

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

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TableFilterComponent } from './table-filter.component';
+import { FormsModule } from '@angular/forms';
+import { DropDownModule } from '../drop-down/drop-down.module';
+import { VerbenaInputModule } from '../../Verbena-input/verbena-input.module';
+import { TooltipModule } from '../tooltip/tooltip.module';
+import { ValidationModule } from '../../validate/validate.module';
+import { SvgModule } from '../svg/svg.module';
+
+
+@NgModule({
+  declarations:[TableFilterComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    DropDownModule,
+    VerbenaInputModule,
+    ValidationModule,
+    TooltipModule,
+    SvgModule
+  ],
+  exports: [TableFilterComponent]
+})
+export class TableFilterModule {}

package/src/lib/components/tooltip/tooltip.component.css

@@ -0,0 +1,8 @@
+.tooltip-container{
+  position: relative;
+}
+
+.tooltip-container:hover .tooltip-box {
+  opacity: 1;
+}
+

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

@@ -0,0 +1,13 @@
+<span class="tooltip-container" 
+(mouseenter)="onMouseEnter($event)" 
+(mouseleave)="onMouseLeave()"
+>
+  <ng-content></ng-content>
+  <div [ngStyle]="tooltipStyles" [ngClass]="customClass" *ngIf="visible">
+    <ng-container *ngIf="tooltipContent">
+      <ng-template [ngTemplateOutlet]="tooltipContent"></ng-template>
+    </ng-container>
+  </div>
+</span>
+
+

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

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

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

@@ -0,0 +1,84 @@
+import { Component, Input, HostListener, TemplateRef, ElementRef, Renderer2 } from '@angular/core';
+
+@Component({
+  selector: 'verben-tooltip',
+  templateUrl: './tooltip.component.html',
+  styleUrls: ['./tooltip.component.css']
+})
+export class TooltipComponent {
+  @Input() tooltipContent!: TemplateRef<any>;
+  @Input() customClass: string = '';   
+  @Input() backgroundColor: string = 'black'; 
+  @Input() textColor: string = 'white'; 
+  @Input() padding: string = '5px 10px'; 
+  @Input() borderRadius: string = '4px'; 
+  @Input() border: string = '';
+  @Input() width: string = '';
+  @Input() top?: string; 
+  @Input() bottom?: string; 
+  @Input() left?: string; 
+  @Input() right?: string; 
+  visible = false;
+
+  tooltipPosition = { top: '', left: '' };
+
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
+
+  onMouseEnter(event: MouseEvent) {
+    this.visible = true;
+    this.updateTooltipPosition(event);
+  }
+
+  onMouseLeave() {
+    this.visible = false;
+  }
+
+  private updateTooltipPosition(event: MouseEvent) {
+    const tooltipElement = this.elementRef.nativeElement.querySelector('.tooltip-box');
+    const triggerElement = event.target as HTMLElement;
+
+    if (tooltipElement && triggerElement) {
+
+      const triggerRect = triggerElement.getBoundingClientRect();
+
+      const tooltipRect = tooltipElement.getBoundingClientRect();
+
+      const availableSpaceAbove = triggerRect.top;
+      const availableSpaceBelow = window.innerHeight - triggerRect.bottom;
+      const availableSpaceLeft = triggerRect.left;
+      const availableSpaceRight = window.innerWidth - triggerRect.right;
+
+      let top = triggerRect.bottom + 'px';
+      let left = (triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2) + 'px'; 
+
+      if (availableSpaceBelow < tooltipRect.height && availableSpaceAbove >= tooltipRect.height) {
+        top = (triggerRect.top - tooltipRect.height) + 'px';
+      }
+
+      if (availableSpaceRight < tooltipRect.width && availableSpaceLeft >= tooltipRect.width) {
+        left = (triggerRect.left - tooltipRect.width) + 'px';
+      } else if (availableSpaceLeft < tooltipRect.width && availableSpaceRight >= tooltipRect.width) {
+        left = (triggerRect.right) + 'px';
+      }
+
+      this.tooltipPosition = { top, left };
+    }
+  }
+
+  get tooltipStyles() {
+    return {
+      'background-color':this.backgroundColor,
+      'width': this.width,
+      'color': this.textColor,
+      'padding': this.padding,
+      'border-radius': this.borderRadius,
+      'border': this.border,
+      'position': 'absolute',
+      'z-index': '9999',
+      'top': this.tooltipPosition.top || this.top,
+      'left': this.tooltipPosition.left || this.left,
+      'right': this.right,
+      'bottom': this.bottom,
+    };
+  }
+}

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

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

package/src/lib/components/verben-mail/verben-mail.component.config.ts

@@ -0,0 +1,11 @@
+export const QuillConfiguration = {
+    toolbar: [
+      ['bold', 'italic', 'underline', 'strike'],
+      ['blockquote', 'code-block'],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      [{ color: [] }, { background: [] }],
+      ['link'],
+      ['clean'],
+    ],
+  }

package/src/lib/components/verben-mail/verben-mail.component.css

@@ -0,0 +1,71 @@
+.container{
+    background-color: #fff;
+}
+.verben-mail-container{
+    background-color: #80808013;
+
+}
+.verben-mail-form{
+    background-color: white;
+}
+.verben-mail-form label {
+    font-weight:500;
+    margin-right: 6px;
+    font-size: 14px;
+}
+#attachment{
+    display: none;
+}
+.verben-mail-form .form-element {
+ margin-bottom: 10px;
+ display: flex;
+}
+.verben-mail-form .form-element input{
+    padding: 0;
+    display:inline-block;
+    padding:2px 4px;
+    border: 1px solid #9A9FBF80;
+    outline: none;
+    min-width: 200px;
+}
+.verben-mail-form .form-element.subject input{
+    border-color: #0000003b;
+    min-width: 300px;
+    font-weight: 600;
+}
+.verben-mail-form .form-element textarea{
+    padding: 16px;
+    width: 100%;
+    height: 100%;
+    resize: none;
+}
+
+.button-container :nth-child(1){
+    border:1px solid #D4A007;
+    border-radius: 3px;
+    color: #D4A007;
+    padding: 4px 15px;
+    font-weight: 500;
+
+}
+.semibold{
+    font-weight: 500;
+}
+.flex-end{
+    justify-content: flex-end;
+}
+.flex{
+    display: flex;
+}
+.items-center{
+    align-items: center;
+}
+.gap{
+gap:20px;
+}
+.enabled{
+    cursor: pointer;
+}
+.disabled{
+    cursor: not-allowed;
+}

package/src/lib/components/verben-mail/verben-mail.component.html

@@ -0,0 +1,139 @@
+<form
+  [style.width]="containerWidth"
+  [formGroup]="mailForm"
+  (ngSubmit)="sendEmail()"
+>
+  <div
+    class="button-container flex flex-end gap"
+    [style.margin-bottom]="'10px'"
+  >
+    <button class="button" type="button" (click)="toggleEditor()">
+      {{ isRichText ? "Switch to Plain" : "View Designer" }}
+    </button>
+    <button
+      type="submit"
+      [style.background-color]="primaryColor"
+      [style.padding]="'0px 10px'"
+      [ngClass]="{
+        disabled: mailForm.invalid,
+        enabled: !mailForm.invalid
+      }"
+      [disabled]="mailForm.invalid"
+    >
+      Send
+    </button>
+  </div>
+  <div
+    class="container"
+    [style.border-radius]="borderRadius"
+    [style.border]="border"
+    [style.padding]="pd"
+  >
+    <div class="verben-mail-container">
+      <div class="verben-mail-form">
+        <!-- Subject Field -->
+        <div class="form-element subject">
+          <label for="subject">Subject:</label>
+          <input id="subject" type="text" formControlName="subject" />
+        </div>
+
+        <!-- To Field with verben-chip -->
+        <div class="form-element">
+          <label for="to">TO:</label>
+          <div class="email-tags-container">
+            <verben-chip
+              [required]="true"
+              [invalidMessage]="toEmailError || 'email must be provided'"
+              (onChange)="onToChange()"
+              formControlName="toEmails"
+              [max]="max"
+              [ngModel]="toEmails"
+            >
+            </verben-chip>
+          </div>
+        </div>
+
+        <!-- CC Field with verben-chip -->
+        <div class="form-element">
+          <label for="cc">CC:</label>
+          <div class="email-tags-container">
+            <verben-chip
+              (onChange)="onCcChange()"
+              formControlName="ccEmails"
+              [ngModel]="ccEmails"
+            >
+              <ng-template let-item vTemplate="item">
+                {{ item }}
+              </ng-template>
+            </verben-chip>
+          </div>
+        </div>
+
+        <!-- BCC Field with verben-chip -->
+        <div class="form-element">
+          <label for="bcc">BCC:</label>
+          <div class="email-tags-container">
+            <verben-chip
+              (onChange)="onBccChange()"
+              [ngModel]="bccEmails"
+              formControlName="bccEmails"
+            >
+              <ng-template let-item vTemplate="item">
+                {{ item }}
+              </ng-template>
+            </verben-chip>
+          </div>
+        </div>
+
+        <!-- Attachments Section -->
+        <div class="form-element attachment">
+          <label
+            *ngIf="!uploadedFileName && !isUploading"
+            for="attachment"
+            class="flex items-center gap cursor-pointer"
+          >
+            <verben-svg [width]="20" fill="black" icon="attach"></verben-svg
+            >Attach file
+          </label>
+          <input
+            id="attachment"
+            type="file"
+            (change)="onFileSelected($event)"
+            class="none"
+          />
+          <div *ngIf="isUploading" class="loader">Uploading...</div>
+          <div *ngIf="uploadedFileName" class="flex items-center gap">
+            <span>{{ uploadedFileName }}</span>
+            <button
+              [style.color]="'black'"
+              type="button"
+              (click)="removeFile()"
+            >
+              &#x2715;
+            </button>
+          </div>
+          <div *ngIf="fileUploadError" class="error">{{ fileUploadError }}</div>
+        </div>
+
+        <!-- Email Body -->
+
+        <hr [style.color]="'#00000066'" />
+        <div class="form-element quill" [style.margin-top]="'30px'">
+          <div *ngIf="isRichText; else textArea">
+            <ng-content select="[rich-text]">widget should appear here </ng-content>
+          </div>
+          <ng-template #textArea>
+            <ng-content select="[text-arae]">
+              <textarea
+                formControlName="body"
+                class="block"
+                rows="10"
+                cols="50"
+              ></textarea>
+            </ng-content>
+          </ng-template>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>