verben-ng-ui 0.0.1

package/src/lib/verbena-badge/verbena-badge.component.css

@@ -0,0 +1,16 @@
+.verbena-badge {
+  display: inline-flex;
+  text-align: center;
+  justify-content: center;
+  place-items: center;
+  margin: auto;
+  font-weight: bold;
+}
+
+.verbena-badge span {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
+  font-weight: bold;
+}

package/src/lib/verbena-badge/verbena-badge.component.html

@@ -0,0 +1,13 @@
+<span [ngStyle]="{
+  'background-color': bgColor,
+  'color': textColor,
+  'border-radius': borderRadius,
+  'padding': pd,
+  'width': width,
+  'height': height,
+  'font-size': fontSize
+}"
+class="verbena-badge"
+>
+{{ text }}
+</span>

package/src/lib/verbena-badge/verbena-badge.component.spec.ts

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

package/src/lib/verbena-badge/verbena-badge.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'verbena-badge',
+  templateUrl: './verbena-badge.component.html',
+  styleUrls: ['./verbena-badge.component.css']
+})
+export class VerbenaBadgeComponent {
+  // Badge text and customization properties
+  @Input() text: string = '';                 // Text or number inside the badge
+  @Input() bgColor: string = '#ff4757';       // Background color (default red)
+  @Input() textColor: string = '#fff';        // Text color (default white)
+  @Input() borderRadius: string = '12px';     // Border radius (default round)
+  @Input() pd: string = '5px 10px';           // Padding inside the badge
+  @Input() fontSize: string = '14px';         // Font size for the badge text
+  @Input() width: string = '';
+  @Input() height: string = '';
+}

package/src/lib/verbena-badge/verbena-badge.module.ts

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

package/src/lib/verbena-button/verbena-button.component.css

@@ -0,0 +1,20 @@
+.verbena-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.verbena-button i {
+  font-size: 16px;
+}
+
+.verbena-button svg {
+  display: inline-block;
+}
+
+.verbena-button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/src/lib/verbena-button/verbena-button.component.html

@@ -0,0 +1,25 @@
+<button [ngStyle]="{
+  'background-color': buttonStyles.bgColor,
+  'color': buttonStyles.textColor,
+  'border': buttonStyles.border,
+  'border-radius': buttonStyles.borderRadius,
+  'padding': buttonStyles.pd,
+  'width': width,
+  'height': height,
+  'font-size': fontSize,
+  'display': 'flex',
+  'gap':'6px'
+}"
+[disabled]="disable"
+class="verbena-button"
+>
+  <ng-container *ngIf="svg && svgPosition === 'left'">
+    <verben-svg [icon]="svg" [width]="svgWidth" [height]="svgHeight" [stroke]="svgColor"></verben-svg>
+  </ng-container>
+
+  <span *ngIf="text">{{ text }}</span>
+
+  <ng-container *ngIf="svg && svgPosition === 'right'">
+    <verben-svg [icon]="svg" [width]="svgWidth" [height]="svgHeight" [stroke]="svgColor"></verben-svg>
+  </ng-container>
+</button>

package/src/lib/verbena-button/verbena-button.component.spec.ts

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

package/src/lib/verbena-button/verbena-button.component.ts

@@ -0,0 +1,92 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'verbena-button',
+  templateUrl: './verbena-button.component.html',
+  styleUrls: ['./verbena-button.component.css']
+})
+export class VerbenaButtonComponent {
+  @Input() text: string = '';
+  @Input() icon: string = '';
+  @Input() svgPosition: 'left' | 'right' = 'left';
+  @Input() bgColor: string = '';
+  @Input() textColor: string = '';
+  @Input() border: string = '';
+  @Input() borderRadius: string = '';
+  @Input() pd: string = '';
+  @Input() width: string = '';
+  @Input() height: string = '';
+  @Input() fontSize: string = '14px';
+  @Input() disable: boolean = false;
+
+  @Input() styleType: 'primary' | 'secondary' | 'danger' | 'small' | 'outline' | 'grey' | 'ylw-outline' = 'primary';  // Predefined styles
+
+  @Input() svg: string = '';
+  @Input() svgWidth: number = 20;
+  @Input() svgHeight: number = 20;
+  @Input() svgColor: string = '';
+
+  get buttonStyles() {
+    switch (this.styleType) {
+      case 'primary':
+        return {
+          bgColor: this.bgColor || '#007bff',
+          textColor: this.textColor || '#ffffff',
+          border: this.border || 'none',
+          borderRadius: this.borderRadius || '4px',
+          pd: this.pd || '10px 15px'
+        };
+      case 'secondary':
+        return {
+          bgColor: this.bgColor || '#FFE681',
+          textColor: this.textColor || '#404040',
+          border: this.border || 'none',
+          borderRadius: this.borderRadius || '4px',
+          pd: this.pd || '10px 15px'
+        };
+      case 'danger':
+        return {
+          bgColor: this.bgColor || '#dc3545',
+          textColor: this.textColor || '#ffffff',
+          border: this.border || 'none',
+          borderRadius: this.borderRadius || '4px',
+          pd: this.pd || '8px 10px'
+        };
+      case 'small':
+        return {
+          bgColor: this.bgColor || '#fff',
+          textColor: this.textColor || '#000',
+          border: this.border || '1px solid grey',
+          borderRadius: this.borderRadius || '7px',
+          pd: this.pd || '0px 10px'
+        };
+
+      case 'outline':
+        return {
+          bgColor: this.bgColor || 'none',
+          textColor: this.textColor || '#000',
+          border: this.border || '1px solid #404040',
+          borderRadius: this.borderRadius || '5px',
+          pd: this.pd || '0px 8px'
+        };
+      case 'ylw-outline':
+        return {
+          bgColor: this.bgColor || '#FFFBEB',
+          textColor: this.textColor || '#404040',
+          border: this.border || '1px solid #FFE681',
+          borderRadius: this.borderRadius || '5px',
+          pd: this.pd || '10px 15px'
+        };
+      case 'grey':
+        return {
+          bgColor: this.bgColor || 'none',
+          textColor: this.textColor || '#D9D9D940',
+          border: this.border || '2px solid grey',
+          borderRadius: this.borderRadius || '4px',
+          pd: this.pd || '10px 15px'
+        };
+      default:
+        return {};
+    }
+  }
+}

package/src/lib/verbena-button/verbena-button.module.ts

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

package/src/lib/verbena-switch/verbena-switch.component.css

@@ -0,0 +1,45 @@
+.switch {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+
+.slider {
+  width: 34px;
+  height: 20px;
+  background-color: #ccc; /* Off state color */
+  border-radius: 34px;
+  position: relative;
+  transition: background-color 0.2s; /* Smooth color transition */
+  margin-right: 10px; /* Space between slider and label */
+}
+
+.slider::before {
+  content: "";
+  position: absolute;
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  border-radius: 50%; /* Makes the knob circular */
+  transition: transform 0.2s; /* Smooth knob movement */
+}
+
+input:checked + .slider {
+  background-color: #4caf50; /* On state color */
+}
+
+input:checked + .slider::before {
+  transform: translateX(14px); /* Moves the knob to the right when checked */
+}
+
+.disabled {
+  cursor: not-allowed; /* Prevents interaction */
+  opacity: 0.5; /* Makes the switch look faded */
+}
+
+.check {
+  display: none; /* Hides the actual checkbox input */
+}

package/src/lib/verbena-switch/verbena-switch.component.html

@@ -0,0 +1,8 @@
+<div class="switch"
+     [ngClass]="{'disabled': disabled}"
+     
+     (click)="toggleSwitch()">
+  <input type="checkbox" [checked]="checked" class="check" (change)="onChange($event)" [disabled]="disabled" />
+  <span class="slider" [ngStyle]="{ 'background-color': checked ? onColor : offColor }"></span>
+  <label *ngIf="label">{{ label }}</label>
+</div>

package/src/lib/verbena-switch/verbena-switch.component.spec.ts

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

package/src/lib/verbena-switch/verbena-switch.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'verbena-switch',
+  templateUrl: './verbena-switch.component.html',
+  styleUrls: ['./verbena-switch.component.css']
+})
+export class VerbenaSwitchComponent {
+  @Input() label: string = '';
+  @Input() checked: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() offColor: string = '#ccc'; // Default off color
+  @Input() onColor: string = '#4caf50'; // Default on color
+  @Input() customStyles: string = ''; // Accepts user-defined class for extra styling
+
+  @Output() change = new EventEmitter<boolean>();
+
+  toggleSwitch() {
+    if (!this.disabled) {
+      this.checked = !this.checked;
+      this.change.emit(this.checked);
+    }
+  }
+
+  onChange(event: Event) {
+    if (!this.disabled) {
+      this.checked = (event.target as HTMLInputElement).checked;
+      this.change.emit(this.checked);
+    }
+  }
+}

package/src/lib/verbena-switch/verbena-switch.module.ts

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

package/src/lib/verbena-textarea/verbena-textarea.component.html

@@ -0,0 +1,19 @@
+<label [for]="textareaId">{{ label }}</label>
+<textarea
+  [id]="textareaId"
+  [required]="required"
+  [attr.rows]="rows"
+  [attr.cols]="cols"
+  [ngStyle]="{
+    'background-color': bgColor,
+    'color': textColor,
+    'border': border,
+    'border-radius': borderRadius,
+    'padding': pd,
+    'width': width,
+    'height': height
+  }"
+  [ngModel]="value"
+  (ngModelChange)="onValueChange($event)"  
+></textarea>
+<span *ngIf="errorMessage" class="error">{{ errorMessage }}</span>

package/src/lib/verbena-textarea/verbena-textarea.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { VerbenaTextareaComponent } from './verbena-textarea.component';
+
+describe('VerbenaTextareaComponent', () => {
+  let component: VerbenaTextareaComponent;
+  let fixture: ComponentFixture<VerbenaTextareaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ VerbenaTextareaComponent ],
+      imports: [ FormsModule ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VerbenaTextareaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should validate required field', () => {
+    component.required = true;
+    component.value = '';
+    component.validate();
+    expect(component.errorMessage).toBe('This field is required');
+  });
+});

package/src/lib/verbena-textarea/verbena-textarea.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'verbena-textarea',
+  templateUrl: './verbena-textarea.component.html',
+  styleUrls: ['./verbena-textarea.component.css']
+})
+export class VerbenaTextareaComponent implements OnInit {
+  @Input() label: string = '';
+  @Input() required: boolean = false;
+  @Input() rows: number = 5;
+  @Input() cols: number = 40;
+  @Input() value: string = '';
+  @Input() bgColor: string = '#fff';
+  @Input() textColor: string = '#000';
+  @Input() border: string = '1px solid #ccc';
+  @Input() borderRadius: string = '4px';
+  @Input() pd: string = '10px';
+  @Input() width: string = '100%';
+  @Input() height: string = 'auto';
+
+  @Output() valueChange = new EventEmitter<string>();  // Output for emitting the value
+
+  errorMessage: string | undefined;
+  textareaId: string = '';
+
+  ngOnInit() {
+    this.textareaId = `verbena-textarea-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  onValueChange(newValue: string) {
+    this.value = newValue;
+    this.valueChange.emit(this.value);  // Emit the value when it changes
+    this.validate();  // Optional: Re-validate on each change
+  }
+
+  validate() {
+    if (this.required && !this.value) {
+      this.errorMessage = 'This field is required';
+    } else {
+      this.errorMessage = undefined;
+    }
+  }
+}

package/src/lib/verbena-textarea/verbena-textarea.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { VerbenaTextareaComponent } from './verbena-textarea.component';
+
+@NgModule({
+  declarations: [VerbenaTextareaComponent],
+  imports: [CommonModule, FormsModule],
+  exports: [VerbenaTextareaComponent]
+})
+export class VerbenaTextareaModule {}

package/src/public-api.ts

@@ -0,0 +1,122 @@
+/*
+ * Public API Surface of verben-ng-ui
+ */
+
+// export * from './lib/verben-ng-ui.service';
+// export * from './lib/verben-ng-ui.component';
+
+// Exporting modules
+export * from './lib/components/card-data-view/card-data-view.component';
+export * from './lib/components/card-data-view/card-data-view.module';
+export * from './lib/components/card-data-view/card-data';
+export * from './lib/components/card-data-view/left-card-data/left-card-data.component';
+export * from './lib/components/card-data-view/left-card-data-view/left-card-data-view.component';
+export * from './lib/components/card-data-view/right-card-data-view/right-card-data-view.component';
+export * from './lib/components/card-data-view/card-data-view-header/card-data-view-header.component';
+export * from './lib/components/card-data-view/card-data-view-footer/card-data-view-footer.component';
+
+
+export * from './lib/components/drop-down/DropdownMenuItem';
+export * from './lib/components/drop-down/DropdownChangeEvent';
+export * from './lib/components/drop-down/DropdownLoadEvent';
+export * from './lib/components/chip/ChipChangeEvent';
+export * from './lib/components/drop-down/drop-down.module';
+export * from './lib/components/drop-down/drop-down.component';
+export * from './lib/components/chip/chip.module';
+export * from './lib/components/chip/chip.component';
+export * from './lib/components/shared.module';
+export * from './lib/components/TemplateDirective.directive';
+
+export * from './lib/components/image/image.module';
+export * from './lib/components/image/image.component';
+
+export * from './lib/components/tooltip/tooltip.component';
+export * from './lib/components/tooltip/tooltip.module';
+
+export * from './lib/components/svg/svg.module';
+export * from './lib/components/svg/svg.component';
+
+export * from './lib/components/table-filter/table-filter.module';
+export * from './lib/components/table-filter/table-filter.component';
+
+export * from './lib/components/notification/notification.module';
+export * from './lib/components/notification/notification.component';
+
+export * from './lib/components/card/card.module';
+export * from './lib/components/card/card.component';
+
+export * from './lib/convert-to-number/convert-to-number.module';
+export * from './lib/convert-to-integer/convert-to-integer.module';
+export * from './lib/components/sort-table/sort-table.component';
+export * from './lib/components/sort-table/sort-table.module';
+export * from './lib/components/visible-column/visible-column.component';
+export * from './lib/components/visible-column/visible-column.module';
+export * from './lib/components/data-view/data-view.component';
+export * from './lib/components/data-view/data-view.module';
+export * from './lib/components/date-picker/date-picker.component';
+export * from './lib/components/date-picker/date-picker.module';
+// export * from './lib/convert-to-decimal/convert-to-decimal.module';
+export * from './lib/phone-number/phone-number.module';
+
+export * from './lib/validate-input/validate-input.module';
+
+// Also export the directives if needed directly
+export * from './lib/convert-to-number/convert-to-number.directive';
+export * from './lib/convert-to-integer/convert-to-integer.directive';
+// export * from './lib/convert-to-decimal/convert-to-decimal.directive';
+export * from './lib/phone-number/phone-number.directive';
+export * from './lib/validate-input/validate-input.directive';
+
+// Exporting MaxNumberModule and MaxNumberDirective
+export * from './lib/number-range/number-range.module';
+export * from './lib/number-range/number-range.directive';
+
+export * from './lib/number-range/number-range.module';
+export * from './lib/number-range/number-range.directive';
+
+// Exporting RequiredInputModule and RequiredInputDirective
+export * from './lib/required-input/required-input.module';
+export * from './lib/required-input/required-input.directive';
+
+// Exporting EmailValidatorModule and EmailValidatorDirective
+export * from './lib/email-validator/email-validator.module';
+export * from './lib/email-validator/email-validator.directive';
+
+export * from './lib/components/data-table/data-table.module';
+export * from './lib/components/data-table/data-table.component';
+export * from './lib/components/data-table/column.directive';
+export * from './lib/components/data-table/data-table.types';
+
+export * from './lib/components/data-export/data-export.module';
+export * from './lib/components/data-export/data-export.service';
+export * from './lib/components/data-export/data-export.component';
+export * from './lib/components/data-export/data-export.types';
+
+// Exporting ControlOptionModule and ControlOptionDirective
+export * from './lib/control-options/control-options.module';
+export * from './lib/control-options/control-options.directive';
+// Exporting Enum type for sort table
+export * from './lib/models/table-filter';
+export * from './lib/models/mail-model';
+
+export * from './lib/validate/error-message.service';
+export * from './lib/validate/validate.directive';
+export * from './lib/validate/validate.module';
+
+export * from './lib/Verbena-input/verbena-input.component';
+export * from './lib/Verbena-input/verbena-input.module';
+
+export * from './lib/verbena-button/verbena-button.component';
+export * from './lib/verbena-button/verbena-button.module';
+
+export * from './lib/verbena-badge/verbena-badge.component';
+export * from './lib/verbena-badge/verbena-badge.module';
+
+export * from './lib/verbena-textarea/verbena-textarea.component';
+export * from './lib/verbena-textarea/verbena-textarea.module';
+
+export * from './lib/verbena-switch/verbena-switch.component';
+export * from './lib/verbena-switch/verbena-switch.module';
+
+export * from './lib/components/verben-mail/verben-mail.module';
+export * from './lib/components/verben-mail/verben-mail.component';