verben-ng-ui 0.0.1

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

@@ -0,0 +1,151 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MailPayload } from '../../models/mail-model';
+
+@Component({
+  selector: 'verben-mail-template',
+  templateUrl: './verben-mail.component.html',
+  styleUrls: ['./verben-mail.component.css'],
+})
+export class VerbenMailTemplate {
+  @Input() containerWidth: string = '500px';
+  @Input() borderRadius: string = '10px';
+  @Input() primaryColor: string = '#FFE681';
+  @Input() secondaryColor: string = '';
+  @Input() tetiaryColor: string = '';
+  @Input() border: string = '1px solid gray';
+  @Input() pd: string = '20px';
+  @Input() m: string = '';
+  @Input() max: number = 10;
+  mailForm: FormGroup;
+  isRichText: boolean = false;
+  isUploading: boolean = false;
+  uploadedFileName: string | null = null;
+  fileUploadError: string | null = null;
+  toEmails: string[] = [];
+  ccEmails: string[] = [];
+  bccEmails: string[] = [];
+  toEmailInput: string = '';
+  ccEmailInput: string = '';
+  bccEmailInput: string = '';
+  mailData: any;
+  toEmailError: string | null = null;
+  ccEmailError: string | null = null;
+  bccEmailError: string | null = null;
+  @Output() mailPayload = new EventEmitter<MailPayload>();
+  constructor(private fb: FormBuilder) {
+    this.mailForm = this.fb.group({
+      subject: ['', Validators.required],
+      body: ['', Validators.required],
+      toEmails: [[], Validators.required],
+      ccEmails: [[]],
+      bccEmails: [[]],
+    });
+  }
+
+  onToChange(): void {
+    const newValues = this.mailForm.get('toEmails')?.value || [];
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const validEmails: string[] = [];
+
+    newValues.forEach((email: string) => {
+      if (emailRegex.test(email)) {
+        validEmails.push(email);
+      } else {
+        if (!emailRegex.test(email)) {
+          this.toEmailError = 'email must be valid';
+        }
+      }
+    });
+    if (validEmails.length === 0) {
+      this.toEmailError = 'email must be valid';
+    } else {
+      this.toEmailError = '';
+    }
+
+    this.toEmails = validEmails;
+  }
+
+  onCcChange(): void {
+    const newValues = this.mailForm.get('ccEmails')?.value||[];
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const validEmails = newValues.filter((email: string) =>
+      emailRegex.test(email)
+    );
+    this.ccEmails = validEmails;
+  }
+  onBccChange(): void {
+    const newValues = this.mailForm.get('bccEmails')?.value||[];
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const validEmails = newValues.filter((email: string) =>
+      emailRegex.test(email)
+    );
+    this.bccEmails = validEmails;
+  }
+  validateEmail(email: string): boolean {
+    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+    return emailRegex.test(email);
+  }
+
+  onFileSelected(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+      const file = input.files[0];
+      this.fileUploadError = null;
+      if (!file) {
+        this.isUploading = true;
+      }
+      if (file.size > 5000000) {
+        this.fileUploadError = 'File size exceeds 5MB limit.';
+        this.uploadedFileName = null;
+        this.isUploading = false; // Reset isUploading state
+      } else {
+        this.uploadedFileName = file.name;
+      }
+    } else {
+      this.isUploading = false;
+    }
+  }
+
+  removeFile() {
+    this.uploadedFileName = null;
+    this.fileUploadError = null;
+    const fileInput = document.getElementById('attachment') as HTMLInputElement;
+    if (fileInput) {
+      fileInput.value = '';
+    }
+  }
+
+  toggleEditor() {
+    this.isRichText = !this.isRichText;
+  }
+
+  sendEmail() {
+    if (this.mailForm.valid) {
+      const emailData: MailPayload = {
+        subject: this.mailForm.value.subject,
+        body: this.mailForm.value.body,
+        to: this.mailForm.get('toEmails')?.value,
+        cc: this.mailForm.get('ccEmails')?.value,
+        bcc: this.mailForm.get('bccEmails')?.value,
+        attachment: this.uploadedFileName,
+      };
+      this.mailPayload.emit(emailData);
+      this.resetForm();
+    }
+  }
+  resetForm() {
+    this.mailForm.get('toEmails')?.reset('');
+    this.mailForm.get('ccEmails')?.reset('');
+    this.mailForm.get('bccEmails')?.reset('');
+    this.mailForm.get("subject")?.reset('')
+    this.mailForm.get("body")?.reset('')
+    this.toEmailError = null;
+    this.ccEmailError = null;
+    this.bccEmailError = null;
+    this.uploadedFileName = null;
+    this.fileUploadError = null;
+    this.isUploading = false;
+    this.isRichText = false;
+  }
+}

package/src/lib/components/verben-mail/verben-mail.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { VerbenMailTemplate } from './verben-mail.component';
+import { ChipModule } from '../chip/chip.module';
+import { SvgModule } from '../svg/svg.module';
+@NgModule({
+  declarations: [VerbenMailTemplate],
+  imports: [
+    FormsModule,
+    CommonModule,
+    ChipModule,
+    ReactiveFormsModule,
+    SvgModule,
+  ],
+  exports: [VerbenMailTemplate],
+})
+export class VerbenaMailTemplateModule {}

package/src/lib/components/visible-column/visible-column.component.css

@@ -0,0 +1,83 @@
+
+hr{
+  border: 1px solid rgba(232, 234, 241, 1);
+   margin:0.8rem 0rem;
+ }
+.flex{
+  display: flex;
+}
+.justify-between{
+  justify-content: space-between;
+}
+.items-center{
+  align-items: center;
+}
+.font-semibold{
+  font-weight: 600;
+}
+.font-semibold{
+  font-weight: 600;
+}
+.font-normal{
+  font-weight: 400;
+}
+.text-sm{
+  font-size: 13px;
+}
+.gap{
+  gap: 10px;
+}
+.gap-sm{
+  gap: 2px;
+}
+.gap-md{
+  gap: 6px;
+}
+.cursor-pointer{
+  cursor: pointer;
+}
+.cursor-not-allowed{
+  cursor: not-allowed;
+}
+
+.visible-column-header {
+  margin-bottom: 10px;
+  padding: 10px 0px 10px 0px;
+}
+
+.column-title {
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.column-title sup {
+  color: #3479e9;
+  font-weight: 600;
+}
+
+.column-reset {
+  color: #3479e9;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.btn-wrapper{ 
+  display: flex;
+  justify-content: end;
+}
+.disabledBtn {
+  cursor: not-allowed;
+}
+.enabledBtn {
+  cursor:pointer;
+}
+.show-more {
+  font-size: 12px;
+  cursor: pointer;
+  padding: 16px 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  color: gray;
+}

package/src/lib/components/visible-column/visible-column.component.html

@@ -0,0 +1,77 @@
+<div
+  [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"
+  class="column-control"
+>
+  <div class="visible-column-header flex justify-between text-sm">
+    <span class="column-title">
+      Column <sup>[{{ getSelectedColumnCount() }}]</sup>
+    </span>
+    <span class="column-reset" (click)="resetColumns()">Reset</span>
+  </div>
+  <hr />
+
+  <!-- Select All Checkbox -->
+  <div class="flex items-center gap" [style.padding]="'4px 10px'">
+    <label [style.font-size]="'13px'" [style.font-weight]="'500'">
+      <input type="checkbox" [checked]="selectAll" (change)="toggleSelectAll()" />
+      Select All
+    </label>
+  </div>
+
+  <!-- Columns List -->
+  <ul *ngFor="let column of columns; let i = index" class="column-options-container">
+    <li
+      [attr.draggable]="enableDragAndDrop"
+      (dragstart)="onDragStart(i, $event)"
+      (dragover)="onDragOver($event)"
+      (drop)="onDrop(i, $event)"
+      *ngIf="i < displayedColumns"
+      [style.font-size]="'14px'"
+      [style.margin-top]="'14px'"
+      class="flex gap-sm items-center"
+    >
+      <verben-svg *ngIf="enableDragAndDrop" fill="black" class="svg" icon="square-dot"></verben-svg>
+      <label class="flex gap-md items-center">
+        <input type="checkbox" [(ngModel)]="visibleColumns[i]" (ngModelChange)="updateSelectAllStatus()" />
+        {{ column.name }}
+      </label>
+    </li>
+  </ul>
+
+  <!-- Show More / Show Less -->
+  <div *ngIf="displayedColumns <= columns.length" class="cursor-pointer" [style.padding]="'20px 10px 0px 10px'">
+    <span (click)="toggleShowMore()">
+      {{ displayedColumns === columns.length ? "Show Less" : "Show More" }}
+    </span>
+  </div>
+  <hr />
+
+  <!-- Save Button -->
+  <div class="btn-wrapper">
+    <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'"
+      [disabled]="getSelectedColumnCount() === 0"
+      [ngClass]="{
+        disabledBtn: getSelectedColumnCount() === 0,
+        enableBtn: getSelectedColumnCount() !== 0
+      }"
+      (click)="saveColumnVisibility()"
+    >
+      Save
+    </button>
+  </div>
+</div>

package/src/lib/components/visible-column/visible-column.component.spec.ts

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

package/src/lib/components/visible-column/visible-column.component.ts

@@ -0,0 +1,106 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { IDataFilter } from '../../models/data-filter';
+
+interface Item {
+  [key: string]: any;
+}
+
+@Component({
+  selector: 'verben-visible-column',
+  templateUrl: './visible-column.component.html',
+  styleUrls: ['./visible-column.component.css'],
+})
+export class VisibleColumnComponent {
+  @Input() columns: IDataFilter[] = [];
+  @Input() items: Item[] = [];
+  @Input() enableDragAndDrop: boolean = true;
+  @Input() displayedColumns: number = 5;
+  @Input() showMore: boolean = false;
+  @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;
+  @Output() columnsUpdated = new EventEmitter<IDataFilter[]>();
+
+  originalColumnOrder: IDataFilter[] = [];
+  visibleColumns: boolean[] = [];
+  draggedIndex: number | null = null;
+  selectAll: boolean = false;
+
+  ngOnInit() {
+    this.originalColumnOrder = [...this.columns];
+    this.initializeColumnVisibility();
+  }
+
+  private initializeColumnVisibility() {
+    this.visibleColumns = this.columns.map((column) => column.checked);
+    this.updateSelectAllStatus();
+  }
+
+  resetColumns() {
+    // Reset columns to the original order
+    this.columns = JSON.parse(JSON.stringify(this.originalColumnOrder)); // Ensure it's a deep copy
+    this.initializeColumnVisibility();
+    this.selectAll = false; // Reset select all
+    this.updateSelectAllStatus();
+  }
+
+  getSelectedColumnCount(): number {
+    return this.visibleColumns.filter((isVisible) => isVisible).length;
+  }
+
+  saveColumnVisibility() {
+    this.columns.forEach((column, index) => {
+      column.checked = this.visibleColumns[index];
+    });
+
+    const selectedColumns = this.columns.filter(column => column.checked);
+    this.columnsUpdated.emit(selectedColumns);
+    console.log(selectedColumns);
+  }
+
+  toggleShowMore() {
+    this.showMore = !this.showMore;
+    this.displayedColumns = this.showMore ? this.columns.length : 5;
+  }
+
+  toggleSelectAll() {
+    this.selectAll = !this.selectAll;
+    this.visibleColumns = this.visibleColumns.map(() => this.selectAll);
+  }
+
+  updateSelectAllStatus() {
+    this.selectAll = this.visibleColumns.every(isVisible => isVisible);
+  }
+
+  onDragStart(index: number, event: DragEvent) {
+    this.draggedIndex = index;
+    event.dataTransfer?.setData('text/plain', String(index));
+  }
+
+  onDragOver(event: DragEvent) {
+    event.preventDefault();
+  }
+
+  onDrop(index: number, event: DragEvent) {
+    event.preventDefault();
+    if (this.draggedIndex !== null && this.draggedIndex !== index) {
+      this.swapColumns(this.draggedIndex, index);
+    }
+    this.draggedIndex = null;
+  }
+
+  private swapColumns(fromIndex: number, toIndex: number) {
+    [this.columns[fromIndex], this.columns[toIndex]] = [this.columns[toIndex], this.columns[fromIndex]];
+    [this.visibleColumns[fromIndex], this.visibleColumns[toIndex]] = [this.visibleColumns[toIndex], this.visibleColumns[fromIndex]];
+  }
+}

package/src/lib/components/visible-column/visible-column.module.ts

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

package/src/lib/config.ts

@@ -0,0 +1,37 @@
+import { ConditionalOptions, DataFilterType, ITypeOption } from "./models/table-filter";
+
+export class Config {
+    typeOptions: ITypeOption[] = [
+        {
+          type: DataFilterType.String,
+          options: [ConditionalOptions.Equal,ConditionalOptions.NotEqual]
+        },
+        {
+          type: DataFilterType.Integer,
+          options: [ConditionalOptions.Equal, ConditionalOptions.LessThan, ConditionalOptions.GreaterThan] 
+        },
+        {
+          type: DataFilterType.Decimal,
+          options: [ConditionalOptions.Equal, ConditionalOptions.LessThan, ConditionalOptions.GreaterThan]
+        },
+        {
+          type: DataFilterType.Credit,
+          options: [ConditionalOptions.Equal, ConditionalOptions.LessThan, ConditionalOptions.GreaterThan]
+        },
+        {
+          type: DataFilterType.Date,
+          options: [ConditionalOptions.On,ConditionalOptions.Before,ConditionalOptions.After] 
+        },
+        {
+          type: DataFilterType.Bool,
+          options: [ConditionalOptions.Yes,ConditionalOptions.No]
+        }
+      ];
+
+      getConditionOptions(filterType: DataFilterType): string[] | null {
+        const typeOption = this.typeOptions.find(option => option.type === filterType);
+        return typeOption ? typeOption.options : null;
+    } 
+}
+
+

package/src/lib/control-options/control-options.directive.ts

@@ -0,0 +1,129 @@
+import { Directive, ElementRef, Input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
+
+@Directive({
+  selector: '[controlOptions]'
+})
+export class ControlOptionsDirective implements OnChanges {
+  
+  // Inputs for various control options
+  @Input() hidden: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() height: string | null = null;        
+  @Input() width: string | null = null;    
+  @Input() minHeight: string | null = null;
+  @Input() minWidth: string | null = null; 
+  @Input() maxHeight: string | null = null;
+  @Input() maxWidth: string | null = null; 
+  @Input() position: 'center' | 'left' | 'right' | 'top' | 'bottom' | null = null;
+  @Input() scrollable: boolean = false;
+  @Input() singleLine: boolean = false;
+  @Input() multiLine: boolean = false;
+  @Input() border: string | null = null; 
+  @Input() borderRadius: string | null = null;
+  @Input() textColor: string | null = null; 
+  @Input() backgroundColor: string | null = null;
+  @Input() hoverStyles: { [key: string]: string } | null = null;
+  
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.applyStyles();
+  }
+
+  private applyStyles(): void {
+    const nativeElement = this.el.nativeElement;
+
+    // Handle hidden property
+    this.renderer.setStyle(nativeElement, 'display', this.hidden ? 'none' : 'block');
+
+    // Handle disabled property
+    if (this.disabled) {
+      this.renderer.setAttribute(nativeElement, 'disabled', 'true');
+      this.renderer.setStyle(nativeElement, 'pointer-events', 'none');
+      this.renderer.setStyle(nativeElement, 'opacity', '0.6');
+    } else {
+      this.renderer.removeAttribute(nativeElement, 'disabled');
+      this.renderer.setStyle(nativeElement, 'pointer-events', 'auto');
+      this.renderer.setStyle(nativeElement, 'opacity', '1');
+    }
+
+    // Apply height, width, min/max constraints
+    this.applyDimension(nativeElement, 'height', this.height);
+    this.applyDimension(nativeElement, 'width', this.width);
+    this.applyDimension(nativeElement, 'min-height', this.minHeight);
+    this.applyDimension(nativeElement, 'min-width', this.minWidth);
+    this.applyDimension(nativeElement, 'max-height', this.maxHeight);
+    this.applyDimension(nativeElement, 'max-width', this.maxWidth);
+
+    // Handle position
+    this.handlePosition();
+
+    // Scrollable property
+    this.renderer.setStyle(nativeElement, 'overflow', this.scrollable ? 'auto' : 'hidden');
+
+    // Single-line or multi-line
+    if (this.singleLine) {
+      this.renderer.setStyle(nativeElement, 'white-space', 'nowrap');
+    } else if (this.multiLine) {
+      this.renderer.setStyle(nativeElement, 'white-space', 'normal');
+    }
+
+    // Apply border and border-radius
+    this.applyStyle(nativeElement, 'border', this.border);
+    this.applyStyle(nativeElement, 'border-radius', this.borderRadius);
+
+    // Apply text color and background color
+    this.applyStyle(nativeElement, 'color', this.textColor);
+    this.applyStyle(nativeElement, 'background-color', this.backgroundColor);
+  }
+
+  // Helper function to apply height, width, and similar styles
+  private applyDimension(element: any, style: string, value: string | null): void {
+    if (value) {
+      this.renderer.setStyle(element, style, value);
+    } else {
+      this.renderer.removeStyle(element, style);
+    }
+  }
+
+  // Generalized style application
+  private applyStyle(element: any, style: string, value: string | null): void {
+    if (value) {
+      this.renderer.setStyle(element, style, value);
+    } else {
+      this.renderer.removeStyle(element, style);
+    }
+  }
+
+  // Handle position based on the input
+  private handlePosition(): void {
+    const nativeElement = this.el.nativeElement;
+
+    switch (this.position) {
+      case 'center':
+        this.renderer.setStyle(nativeElement, 'position', 'absolute');
+        this.renderer.setStyle(nativeElement, 'top', '50%');
+        this.renderer.setStyle(nativeElement, 'left', '50%');
+        this.renderer.setStyle(nativeElement, 'transform', 'translate(-50%, -50%)');
+        break;
+      case 'left':
+        this.renderer.setStyle(nativeElement, 'position', 'absolute');
+        this.renderer.setStyle(nativeElement, 'left', '0');
+        break;
+      case 'right':
+        this.renderer.setStyle(nativeElement, 'position', 'absolute');
+        this.renderer.setStyle(nativeElement, 'right', '0');
+        break;
+      case 'top':
+        this.renderer.setStyle(nativeElement, 'position', 'absolute');
+        this.renderer.setStyle(nativeElement, 'top', '0');
+        break;
+      case 'bottom':
+        this.renderer.setStyle(nativeElement, 'position', 'absolute');
+        this.renderer.setStyle(nativeElement, 'bottom', '0');
+        break;
+      default:
+        this.renderer.setStyle(nativeElement, 'position', 'static');
+    }
+  }
+}

package/src/lib/control-options/control-options.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ControlOptionsDirective } from './control-options.directive';
+
+@NgModule({
+  declarations: [ControlOptionsDirective],
+  imports: [CommonModule],
+  exports: [ControlOptionsDirective]
+})
+export class ControlOptionsModule {}

package/src/lib/convert-to-integer/convert-to-integer.directive.ts

@@ -0,0 +1,28 @@
+import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[appConvertToInteger]'
+})
+export class ConvertToIntegerDirective {
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  @HostListener('input', ['$event'])
+  onInputChange(event: Event): void {
+    const inputValue = (event.target as HTMLInputElement).value;
+    const integerValue = this.formatToInteger(inputValue);
+    this.renderer.setProperty(this.el.nativeElement, 'value', integerValue);
+    console.log(`this is ${integerValue}`)
+  }
+
+  private formatToInteger(value: string): string {
+    if (!value) {
+      return '';
+    }
+    const numericValue = parseInt(value, 10);
+    if (isNaN(numericValue)) {
+      return '';
+    }
+    return numericValue.toString();
+  }
+}

package/src/lib/convert-to-integer/convert-to-integer.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ConvertToIntegerDirective } from './convert-to-integer.directive';
+
+@NgModule({
+  declarations: [ConvertToIntegerDirective],
+  imports: [CommonModule],
+  exports: [ConvertToIntegerDirective]
+})
+export class ConvertToIntegerModule {}