verben-ng-ui 0.0.1

package/src/lib/convert-to-integer/public-api.ts

@@ -0,0 +1 @@
+export * from './convert-to-integer.module';

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

@@ -0,0 +1,22 @@
+import { Directive, ElementRef, HostListener, Renderer2, Output, EventEmitter } from '@angular/core';
+
+@Directive({
+  selector: '[appConvertToNumber]'
+})
+export class ConvertToNumberDirective {
+
+  @Output() numberValue = new EventEmitter<number | null>();
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  @HostListener('input', ['$event.target.value']) onInput(value: string) {
+    const num = Number(value);
+    if (!isNaN(num)) {
+      this.numberValue.emit(num);
+      this.renderer.setProperty(this.el.nativeElement, 'value', num);
+    } else {
+      this.numberValue.emit(null);
+    }
+    console.log(`this is ${num}`)
+  }
+}

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

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { ConvertToNumberDirective } from './convert-to-number.directive';
+
+@NgModule({
+  declarations: [ConvertToNumberDirective],
+  exports: [ConvertToNumberDirective]
+})
+export class ConvertToNumberModule {}

package/src/lib/convert-to-number/public-api.ts

@@ -0,0 +1 @@
+export * from './convert-to-number.module';

package/src/lib/email-validator/email-validator.directive.ts

@@ -0,0 +1,24 @@
+import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[validateEmail]'
+})
+export class EmailValidatorDirective {
+
+  private emailRegex: RegExp = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  @HostListener('input', ['$event.target.value']) onInput(value: string) {
+    if (!this.emailRegex.test(value)) {
+      this.renderer.setStyle(this.el.nativeElement, 'border', '2px solid red');
+    } else {
+      this.renderer.setStyle(this.el.nativeElement, 'border', 'none');
+    }
+  }
+}
+
+// import { MaxNumberModule } from 'verbena-ui-peace22/max-number';
+// import { MinNumberModule } from 'verbena-ui-peace22/min-number';
+// import { RequiredInputModule } from 'verbena-ui-peace22/required-input';
+// import { EmailValidatorModule } from 'verbena-ui-peace22/email-validator';

package/src/lib/email-validator/email-validator.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { EmailValidatorDirective } from './email-validator.directive';
+
+@NgModule({
+  declarations: [EmailValidatorDirective],
+  exports: [EmailValidatorDirective]
+})
+export class EmailValidatorModule {}
+
+
+// import { MaxNumberModule } from 'verbena-ui-peace22/max-number';
+// import { MinNumberModule } from 'verbena-ui-peace22/min-number';
+// import { RequiredInputModule } from 'verbena-ui-peace22/required-input';
+// import { EmailValidatorModule } from 'verbena-ui-peace22/email-validator';

package/src/lib/models/column-filter.ts

@@ -0,0 +1,5 @@
+export interface Column {
+    checked: boolean;
+    value: string;
+  }
+  

package/src/lib/models/data-filter.ts

@@ -0,0 +1,8 @@
+import { DataFilterType } from './table-filter';
+
+export interface IDataFilter {
+  name: string;
+  type: DataFilterType;
+  value?: string | number;
+  checked: boolean;
+}

package/src/lib/models/mail-model.ts

@@ -0,0 +1,8 @@
+export interface MailPayload {
+    subject:string
+    body:string
+    to:string[]
+    cc?:string[]
+    bcc?:string[]
+    attachment:string|null;
+}

package/src/lib/models/table-filter.ts

@@ -0,0 +1,34 @@
+export enum DataFilterType {
+  String = 'String',
+  Integer = 'Integer',
+  Decimal = 'Decimal',
+  Credit= 'Credit',
+  Date = 'Date',
+  Bool = "Bool",
+  Number="Number"
+}
+
+export interface IDataFilter {
+  name:string,
+  type: DataFilterType;
+  value?:any; 
+  checked: boolean;
+  condition?:string;
+}
+
+export enum ConditionalOptions {
+  LessThan = 'Less than',
+  GreaterThan = 'Greater than',
+  Equal = 'Equal',
+  NotEqual = 'Not equal',
+  On = 'On',
+  Before = 'Before',
+  After = 'After',
+  Yes = 'Yes',
+  No = 'No'
+ }
+
+export interface ITypeOption {
+  type: DataFilterType;
+  options: string[];
+}

package/src/lib/number-range/number-range.directive.ts

@@ -0,0 +1,35 @@
+import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[appNumberRange]'
+})
+export class NumberRangeDirective {
+  @Input() maxNumber!: number;
+  @Input() minNumber!: number;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  @HostListener('input', ['$event.target.value']) onInput(value: string) {
+    const numberValue = parseFloat(value);
+    let borderStyle = 'none';
+
+    if (isNaN(numberValue)) {
+      borderStyle = 'none';
+    } else if (this.maxNumber !== undefined && numberValue > this.maxNumber) {
+      borderStyle = '1px solid red';
+    } else if (this.minNumber !== undefined && numberValue < this.minNumber) {
+      borderStyle = '1px solid red';
+    }
+
+    this.renderer.setStyle(this.el.nativeElement, 'border', borderStyle);
+  }
+}
+
+
+
+// <input type="number" appNumberRange [maxNumber]="10">
+// <input type="number" appNumberRange [minNumber]="5">
+// <input type="number" appNumberRange [maxNumber]="10" [minNumber]="5">
+
+
+

package/src/lib/number-range/number-range.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NumberRangeDirective } from './number-range.directive';
+
+@NgModule({
+  declarations: [NumberRangeDirective],
+  imports: [CommonModule],
+  exports: [NumberRangeDirective]
+})
+export class NumberRangeModule {}
+

package/src/lib/phone-number/phone-number.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[appPhoneNumber]'
+})
+export class PhoneNumberDirective {
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  @HostListener('input', ['$event'])
+  onInputChange(event: Event): void {
+    let inputValue = (event.target as HTMLInputElement).value;
+    const numericValue = this.formatToNumeric(inputValue);
+    this.renderer.setProperty(this.el.nativeElement, 'value', numericValue);
+    console.log(`Formatted phone number: ${numericValue}`);
+  }
+
+  private formatToNumeric(value: string): string {
+    // Remove all non-numeric characters except leading zeros
+    return value.replace(/[^0-9]/g, '');
+  }
+}

package/src/lib/phone-number/phone-number.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PhoneNumberDirective } from './phone-number.directive';
+
+@NgModule({
+  declarations: [PhoneNumberDirective],
+  imports: [CommonModule],
+  exports: [PhoneNumberDirective]
+})
+export class PhoneNumberModule {}

package/src/lib/phone-number/public-api.ts

@@ -0,0 +1 @@
+export * from './phone-number.module';

package/src/lib/required-input/required-input.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[requiredInput]'
+})
+export class RequiredInputDirective {
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  @HostListener('input') onInput() {
+    const value = this.el.nativeElement.value.trim();
+    if (value === '') {
+      this.renderer.setStyle(this.el.nativeElement, 'border', '2px solid red');
+    } else {
+      this.renderer.setStyle(this.el.nativeElement, 'border', 'none');
+    }
+  }
+}

package/src/lib/required-input/required-input.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { RequiredInputDirective } from './required-input.directive';
+
+@NgModule({
+  declarations: [RequiredInputDirective],
+  exports: [RequiredInputDirective]
+}) 
+export class RequiredInputModule {}

package/src/lib/theme-switcher/theme-switcher.directive.spec.ts

@@ -0,0 +1,8 @@
+import { ThemeSwitcherDirective } from './theme-switcher.directive';
+
+describe('ThemeSwitcherDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ThemeSwitcherDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/src/lib/theme-switcher/theme-switcher.directive.ts

@@ -0,0 +1,70 @@
+import { Directive, ElementRef, Input, Renderer2, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appThemeSwitcher]'
+})
+export class ThemeSwitcherDirective {
+  @Input() switchColor: string = 'black'; // Custom color for dark mode
+  @Input() switchClass: string = ''; // Additional classes provided by the user
+
+  private isDarkMode: boolean = false;
+  private originalColor: string = ''; // Store the original color of the element
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {
+    this.loadTheme();
+    this.storeOriginalColor(); // Store the computed color of the element
+  }
+
+  @HostListener('click') onClick() {
+    this.toggleTheme();
+  }
+
+  private toggleTheme(): void {
+    const themeClass = 'dark';
+
+    if (this.isDarkMode) {
+      // Switch to light mode for the whole page
+      this.renderer.removeClass(document.documentElement, themeClass);
+      this.applyElementStyles(this.originalColor); // Reset the element's original color
+      localStorage.setItem('theme', 'light');
+    } else {
+      // Switch to dark mode for the whole page
+      this.renderer.addClass(document.documentElement, themeClass);
+      this.applyElementStyles(this.switchColor); // Apply dark mode color for the element
+      localStorage.setItem('theme', 'dark');
+    }
+
+    this.isDarkMode = !this.isDarkMode; // Toggle the mode state
+  }
+
+  private applyElementStyles(color: string): void {
+    // Apply inline color to the element
+    this.el.nativeElement.style.color = color;
+
+    // Apply user-provided custom class if available
+    if (this.switchClass) {
+      this.renderer.addClass(this.el.nativeElement, this.switchClass);
+    }
+  }
+
+  private storeOriginalColor(): void {
+    // Get the computed style of the element to find its original color
+    const computedStyle = window.getComputedStyle(this.el.nativeElement);
+    this.originalColor = computedStyle.color;
+  }
+
+  private loadTheme(): void {
+    const savedTheme = localStorage.getItem('theme');
+
+    if (savedTheme === 'dark') {
+      // If dark mode was previously set, apply it to the page and element
+      this.renderer.addClass(document.documentElement, 'dark');
+      this.isDarkMode = true;
+      this.applyElementStyles(this.switchColor);
+    } else {
+      // Apply the original color if the light theme is active
+      this.isDarkMode = false;
+      this.applyElementStyles(this.originalColor);
+    }
+  }
+}

package/src/lib/theme-switcher/theme-switcher.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { ThemeSwitcherDirective } from './theme-switcher.directive';
+
+@NgModule({
+  declarations: [ThemeSwitcherDirective],
+  exports: [ThemeSwitcherDirective]
+})
+export class ThemeSwitcherModule {}

package/src/lib/validate/error-message.service.ts

@@ -0,0 +1,104 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ErrorMessageService {
+  public createErrorMessage(
+    inputElement: HTMLInputElement,
+    message: string,
+    position: 'above' | 'below',
+    color: string,
+    showErrorIcon: boolean,
+    tooltipPosition: 'top' | 'bottom' | 'left' | 'right'
+  ) {
+    this.removeErrorMessage(inputElement);
+
+    // Error message element
+    if (message) {
+      const errorElement = document.createElement('span');
+      errorElement.textContent = message;
+      errorElement.style.color = color;
+      errorElement.style.fontSize = '12px';
+      errorElement.classList.add('error-message');
+
+      if (position === 'above') {
+        inputElement.parentNode?.insertBefore(errorElement, inputElement);
+      } else {
+        inputElement.parentNode?.insertBefore(errorElement, inputElement.nextSibling);
+      }
+    }
+
+    // Tooltip behavior for the error icon
+    if (showErrorIcon) {
+      const errorDot = document.createElement('div');
+      errorDot.style.width = '8px';
+      errorDot.style.height = '8px';
+      errorDot.style.backgroundColor = 'red';
+      errorDot.style.borderRadius = '50%';
+      errorDot.style.position = 'absolute';
+      errorDot.style.top = '50%';
+      errorDot.style.right = '10px';
+      errorDot.style.transform = 'translateY(-50%)';
+      errorDot.style.cursor = 'pointer';
+      errorDot.classList.add('error-dot');
+
+      // Tooltip element
+      const tooltip = document.createElement('span');
+      tooltip.textContent = message;
+      tooltip.style.position = 'absolute';
+      tooltip.style.padding = '5px';
+      tooltip.style.backgroundColor = 'red';
+      tooltip.style.color = 'white';
+      tooltip.style.borderRadius = '4px';
+      tooltip.style.fontSize = '10px';
+      tooltip.style.whiteSpace = 'nowrap';
+      tooltip.style.visibility = 'hidden'; // Hidden until hover/click
+      tooltip.classList.add('error-tooltip');
+
+      this.setTooltipPosition(tooltip, errorDot, tooltipPosition);
+
+      // Show tooltip on hover/click
+      errorDot.addEventListener('mouseenter', () => (tooltip.style.visibility = 'visible'));
+      errorDot.addEventListener('mouseleave', () => (tooltip.style.visibility = 'hidden'));
+      errorDot.addEventListener('click', () => (tooltip.style.visibility = 'visible'));
+
+      inputElement.parentNode?.appendChild(errorDot);
+      inputElement.parentNode?.appendChild(tooltip);
+    }
+  }
+
+  private setTooltipPosition(tooltip: HTMLElement, errorDot: HTMLElement, position: 'top' | 'bottom' | 'left' | 'right') {
+    switch (position) {
+      case 'top':
+        tooltip.style.bottom = '20px';
+        tooltip.style.left = '50%';
+        tooltip.style.transform = 'translateX(-50%)';
+        break;
+      case 'bottom':
+        tooltip.style.top = '20px';
+        tooltip.style.left = '50%';
+        tooltip.style.transform = 'translateX(-50%)';
+        break;
+      case 'left':
+        tooltip.style.right = '20px';
+        tooltip.style.top = '50%';
+        tooltip.style.transform = 'translateY(-50%)';
+        break;
+      case 'right':
+        tooltip.style.left = '20px';
+        tooltip.style.top = '50%';
+        tooltip.style.transform = 'translateY(-50%)';
+        break;
+    }
+  }
+
+  public removeErrorMessage(inputElement: HTMLInputElement) {
+    const errorElements = inputElement.parentNode?.querySelectorAll('.error-message, .error-dot, .error-tooltip');
+    if (errorElements) {
+      errorElements.forEach((errorElement) => {
+        errorElement.remove();
+      });
+    }
+  }
+}

package/src/lib/validate/validate.directive.ts

@@ -0,0 +1,110 @@
+import { Directive, ElementRef, Input, HostListener, Renderer2 } from '@angular/core';
+import { ErrorMessageService } from './error-message.service';
+
+@Directive({
+  selector: '[appValidate]'
+})
+export class ValidateDirective {
+  @Input('appValidate') validationType: 'text' | 'number' | 'decimal' | 'integer' | 'email' = 'text';
+  @Input() required: boolean = false;
+  @Input() showBorder: boolean = true;  // The controlling factor for the error icon
+  @Input() showErrorMessage: boolean = true;
+
+  @Input() errorBorderColor: string = 'red';  // Border color for errors
+  @Input() errorMessageColor: string = 'red';  // Color for error message
+  @Input() errorIconTooltipPosition: 'top' | 'bottom' | 'left' | 'right' = 'top'; // Tooltip position for error dot
+  @Input() showErrorIcon: boolean = true;
+
+  constructor(
+    private el: ElementRef,
+    private errorMessageService: ErrorMessageService,
+    private renderer: Renderer2
+  ) {}
+
+  @HostListener('input', ['$event.target']) onInput(inputElement: any) {
+    const value = inputElement.value.trim();
+
+    switch (this.validationType) {
+      case 'text':
+        this.validateText(inputElement, value);
+        break;
+      case 'number':
+        this.validateNumber(inputElement, value);
+        break;
+      case 'decimal':
+        this.validateDecimal(inputElement, value);
+        break;
+      case 'integer':
+        this.validateInteger(inputElement, value);
+        break;
+      case 'email':
+        this.validateEmail(inputElement, value);
+        break;
+    }
+  }
+
+  private validateText(input: any, value: string) {
+    if (this.required && value === '') {
+      this.showError(input, 'Text is required');
+    } else {
+      this.clearError(input);
+    }
+  }
+
+  private validateNumber(input: any, value: string) {
+    if (isNaN(+value)) {
+      this.blockInvalidInput(input, 'Please enter a valid number');
+    } else {
+      this.clearError(input);
+    }
+  }
+
+  private validateDecimal(input: any, value: string) {
+    const regex = /^\d*\.?\d*$/;
+    if (!regex.test(value)) {
+      this.showError(input, 'Please enter a valid decimal number');
+    } else {
+      this.clearError(input);
+    }
+  }
+
+  private validateInteger(input: any, value: string) {
+    const regex = /^\d+$/;
+    if (!regex.test(value)) {
+      this.blockInvalidInput(input, 'Please enter a valid integer');
+    } else {
+      this.clearError(input);
+    }
+  }
+
+  private validateEmail(input: any, value: string) {
+    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!regex.test(value)) {
+      this.blockInvalidInput(input, 'Please enter a valid email address');
+    } else {
+      this.clearError(input);
+    }
+  }
+
+  private blockInvalidInput(input: any, message: string) {
+    input.value = '';
+    this.showError(input, message);
+  }
+
+  private showError(input: any, message: string) {
+    if (this.showBorder) {
+      this.renderer.setStyle(input, 'borderColor', this.errorBorderColor);
+      this.renderer.addClass(input, 'error-with-dot'); // Add error class
+
+
+    }
+  }
+
+  private clearError(input: any) {
+    if (this.showBorder) {
+      this.renderer.removeStyle(input, 'borderColor');
+      this.renderer.removeClass(input, 'error-with-dot'); // Remove error class
+    }
+    this.errorMessageService.removeErrorMessage(input);
+  }
+}

package/src/lib/validate/validate.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { ValidateDirective } from './validate.directive';
+import { ErrorMessageService } from './error-message.service';
+
+
+@NgModule({
+  declarations: [
+    ValidateDirective
+  ],
+  providers: [
+    ErrorMessageService
+  ],
+  exports: [
+    ValidateDirective
+  ]
+})
+export class ValidationModule { }

package/src/lib/validate-input/validate-input.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[validateInput]'
+})
+export class ValidateInputDirective {
+  // Directive logic here
+}

package/src/lib/validate-input/validate-input.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { ValidateInputDirective } from './validate-input.directive';
+
+@NgModule({
+  declarations: [ValidateInputDirective],
+  exports: [ValidateInputDirective]
+})
+export class ValidateInputModule {}

package/src/lib/verben-ng-ui.component.spec.ts

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

package/src/lib/verben-ng-ui.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-verben-ng-ui',
+  standalone: true,
+  imports: [],
+  template: `
+    <p>
+      verben-ng-ui works!
+    </p>
+  `,
+  styles: ``
+})
+export class VerbenNgUiComponent {
+
+}

package/src/lib/verben-ng-ui.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { VerbenNgUiService } from './verben-ng-ui.service';
+
+describe('VerbenNgUiService', () => {
+  let service: VerbenNgUiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(VerbenNgUiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/verben-ng-ui.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VerbenNgUiService {
+
+  constructor() { }
+}