verben-ng-ui 0.0.1

package/README.md

@@ -0,0 +1,24 @@
+# VerbenNgUi
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project verben-ng-ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project verben-ng-ui`.
+> Note: Don't forget to add `--project verben-ng-ui` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build verben-ng-ui` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build verben-ng-ui`, go to the dist folder `cd dist/verben-ng-ui` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test verben-ng-ui` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/verben-ng-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "lodash"
+  ]
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "verben-ng-ui",
+  "version": "0.0.1",
+  "author": "Verbena Logic",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/verbena-engineering/verben-ng-ui-app"
+  },
+  "bugs": {
+    "url": "https://github.com/verbena-engineering/verben-ng-ui-app/issues"
+  },
+  "homepage": "",
+  "keywords": [
+    "angular",
+    "javascript",
+    "typescript"
+  ],
+  "scripts": {
+    "build-watch": "ng build --watch"
+  },
+  "peerDependencies": {
+    "@angular/common": "^14.0.0 || ^18.0.0",
+    "@angular/core": "^14.0.0 || ^18.0.0"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "devDependencies": {
+    "@types/lodash": "^4.17.10",
+    "autoprefixer": "^10.4.20"
+  }
+}

package/src/lib/Verbena-input/error.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ErrorService {
+  getErrorMessage(type: string, label: string, minMaxValue?: number): string {
+    switch (type) {
+      case 'required':
+        return `${label} is required.`;
+      case 'invalidNumber':
+        return `${label} must be a valid number.`;
+      case 'invalidInteger':
+        return `${label} must be an integer.`;
+      case 'minLength':
+        return `${label} must be at least ${minMaxValue} characters long.`;
+      case 'maxLength':
+        return `${label} cannot exceed ${minMaxValue} characters.`;
+      default:
+        return 'Invalid input.';
+    }
+  }
+}

package/src/lib/Verbena-input/verbena-input.component.css

@@ -0,0 +1,59 @@
+.input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  position: relative; /* Needed for positioning elements */
+}
+
+.input-field {
+  width: 100%;
+  padding: 6px;
+}
+
+.error-message {
+  font-size: 12px;
+  margin: 0;
+}
+
+.error-top {
+ position: absolute;
+ top: 0;
+ left: 50%;
+}
+
+.error-bottom {
+  position: relative;
+  margin-top: 5px;
+}
+
+.error-left {
+  position: absolute;
+  left: -10px;
+}
+
+.error-right {
+  position: absolute;
+  right: -10px;
+  top: 0px;
+}
+
+.input-wrapper {
+  position: relative;
+}
+
+.input-field {
+  width: 100%;
+  padding: 8px;
+}
+
+.error-dot {
+  position: absolute;
+  top: 0%;
+  right: -10px;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+

package/src/lib/Verbena-input/verbena-input.component.html

@@ -0,0 +1,64 @@
+<div class="input-container"
+     [ngStyle]="{
+      'display': 'flex',
+      'flex-direction': 'column',
+
+     }"
+>
+  <div
+    [ngStyle]="{
+      'display': 'flex',
+      'justify-content': labelPosition,
+      'color': labelColor,
+      'padding': '0'
+    }"
+    class="input-field"
+  >
+    <label [for]="label">{{ label }}</label>
+  </div>
+
+  <div class="input-wrapper">
+    <input
+      [id]="label"
+      [attr.type]="type"
+      [attr.placeholder]="placeHolder"
+      [required]="required"
+      [attr.minlength]="minLength?.toString()"
+      [attr.maxlength]="maxLength?.toString()"
+      (input)="onInput($event)"
+      [(ngModel)]="value"
+      [ngStyle]="{
+        'background-color': bgColor,
+        'border': showBorder ? (errorMessage ? '1px solid ' + errorBorderColor : border) : 'none',
+        'border-radius': borderRadius,
+        'color': textColor
+      }"
+      class="input-field"
+    />
+
+    <!-- Conditional red dot for error when showErrorMessage is false -->
+    <verben-tooltip *ngIf="errorMessage && !showErrorMessage"
+                    [tooltipContent]="tooltipTemplate"
+                    customClass="error-tooltip">
+      <div class="error-dot"
+           [ngStyle]="{ 'background-color': errorBorderColor }">
+      </div>
+    </verben-tooltip>
+
+    <!-- Tooltip template for error message -->
+    <ng-template #tooltipTemplate>
+      {{ errorMessage }}
+    </ng-template>
+
+    <!-- Conditional error message display -->
+    <span *ngIf="errorMessage && showErrorMessage"
+          [ngStyle]="{ 'color': errorMessageColor }"
+          [ngClass]="{'error-message': true,
+                      'error-top': errorPosition === 'top',
+                      'error-bottom': errorPosition === 'bottom',
+                      'error-left': errorPosition === 'left',
+                      'error-right': errorPosition === 'right'}">
+      {{ errorMessage }}
+    </span>
+  </div>
+</div>

package/src/lib/Verbena-input/verbena-input.component.spec.ts

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

package/src/lib/Verbena-input/verbena-input.component.ts

@@ -0,0 +1,162 @@
+import { Component, Input, Output, EventEmitter, OnInit, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'verbena-input',
+  templateUrl: './verbena-input.component.html',
+  styleUrls: ['./verbena-input.component.css'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => VerbenaInputComponent),
+      multi: true
+    }
+  ]
+})
+export class VerbenaInputComponent implements ControlValueAccessor, OnInit {
+  @Input() label: string = '';
+  @Input() placeHolder: string = '';
+  @Input() required: boolean = false;
+  @Input() minLength?: number;
+  @Input() maxLength?: number;
+  @Input() type: 'text' | 'integer' | 'number' | 'decimal' | 'email' | 'date' = 'text';
+  @Input() bgColor: string = '#f9f9f9';
+  @Input() border: string = '1px solid #ccc';
+  @Input() borderRadius: string = '5px';
+  @Input() textColor: string = '#333';
+  @Input() value: string = '';
+  @Input() labelPosition: string = 'start';
+  @Input() labelColor: string = 'black';
+  @Input() disable: boolean = false;
+  @Input() min?: number;
+  @Input() max?: number;
+
+  @Input() showBorder: boolean = true;
+  @Input() showErrorMessage: boolean = true;
+  @Input() errorMessageColor: string = 'red';
+  @Input() errorBorderColor: string = 'red';
+  @Input() errorPosition: 'left' | 'right' | 'top' | 'bottom' = 'bottom';
+
+  @Input() capitalization: 'none' | 'uppercase' | 'lowercase' | 'sentencecase' | 'pascalcase' | 'camelcase' = 'none';
+
+  // New property for custom error messages
+  @Input() customErrorMessages: {
+    required?: string;
+    minLength?: string;
+    maxLength?: string;
+    minValue?: string;
+    maxValue?: string;
+    integer?: string;
+    number?: string;
+    decimal?: string;
+    email?: string;
+  } = {};
+
+  @Output() valueChange = new EventEmitter<string>();
+
+  errorMessage: string | undefined;
+  inputId: string = '';
+
+  onChange: any = () => {};
+  onTouch: any = () => {};
+
+  ngOnInit() {
+    this.inputId = `verbena-input-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  onInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    this.value = target.value.trim();
+    this.value = this.applyCapitalization(this.value, this.capitalization);
+    this.validate();
+    const sanitizedValue = this.sanitizeValue(this.value);
+    this.onChange(sanitizedValue);
+    this.valueChange.emit(sanitizedValue);
+  }
+
+  applyCapitalization(value: string, format: string): string {
+    switch (format) {
+      case 'uppercase': return value.toUpperCase();
+      case 'lowercase': return value.toLowerCase();
+      case 'sentencecase': return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
+      case 'pascalcase': return value.replace(/\w+/g, (w) => w[0].toUpperCase() + w.slice(1).toLowerCase());
+      case 'camelcase': return value.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, (match, index) =>
+        index === 0 ? match.toLowerCase() : match.toUpperCase()).replace(/\s+/g, '');
+      default: return value;
+    }
+  }
+
+  sanitizeValue(value: string): string {
+    if (['number', 'decimal', 'integer'].includes(this.type)) {
+      return value.replace(/,/g, '');
+    }
+    return value;
+  }
+
+  validate() {
+    this.errorMessage = '';
+
+    if (this.required && !this.value) {
+      this.errorMessage = this.customErrorMessages.required || 'This field is required.';
+      return;
+    }
+
+    if (this.minLength && this.value.length < this.minLength) {
+      this.errorMessage = this.customErrorMessages.minLength || `Minimum length is ${this.minLength}.`;
+      return;
+    }
+
+    if (this.maxLength && this.value.length > this.maxLength) {
+      this.errorMessage = this.customErrorMessages.maxLength || `Maximum length is ${this.maxLength}.`;
+      return;
+    }
+
+    const sanitizedValue = this.sanitizeValue(this.value);
+    const numericValue = parseFloat(sanitizedValue);
+
+    if (['integer', 'number', 'decimal'].includes(this.type)) {
+      if (this.min !== undefined && numericValue < this.min) {
+        this.errorMessage = this.customErrorMessages.minValue || `Minimum value is ${this.min}.`;
+        return;
+      } else if (this.max !== undefined && numericValue > this.max) {
+        this.errorMessage = this.customErrorMessages.maxValue || `Maximum value is ${this.max}.`;
+        return;
+      }
+    }
+
+    if (this.type === 'integer' && !/^\d+$/.test(this.value)) {
+      this.errorMessage = this.customErrorMessages.integer || 'Please enter a valid integer.';
+      return;
+    }
+
+    if (this.type === 'number' && !/^\d+(\.\d+)?$/.test(this.value)) {
+      this.errorMessage = this.customErrorMessages.number || 'Please enter a valid number.';
+      return;
+    }
+
+    if (this.type === 'decimal' && !/^\d+(\.\d+)?$/.test(this.value)) {
+      this.errorMessage = this.customErrorMessages.decimal || 'Please enter a valid decimal.';
+      return;
+    }
+
+    if (this.type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.value)) {
+      this.errorMessage = this.customErrorMessages.email || 'Please enter a valid email address.';
+    }
+  }
+
+  writeValue(value: any): void {
+    this.value = value ? this.applyCapitalization(value.trim(), this.capitalization) : '';
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disable = isDisabled;
+  }
+}

package/src/lib/Verbena-input/verbena-input.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { TooltipModule } from '../components/tooltip/tooltip.module';
+import { VerbenaInputComponent } from './verbena-input.component';
+
+@NgModule({
+  declarations: [VerbenaInputComponent],
+  imports: [CommonModule, FormsModule, TooltipModule],
+  exports: [VerbenaInputComponent],
+})
+export class VerbenaInputModule {}

package/src/lib/components/TemplateDirective.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, Input, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[vTemplate]',
+})
+export class TemplateDirective {
+  @Input() vTemplate!: string; // The name of the template
+
+  constructor(public template: TemplateRef<any>) {}
+}

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

@@ -0,0 +1,20 @@
+  .card {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  }
+  .card-header {
+    background-color: #f8f9fa;
+    padding: 10px 15px;
+    border-bottom: 1px solid #ddd;
+  }
+  .card-body {
+    padding: 15px;
+  }
+  .card-footer {
+    background-color: #f8f9fa;
+    padding: 10px 15px;
+    border-top: 1px solid #ddd;
+  }
+  

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

@@ -0,0 +1,23 @@
+  <div class="card"
+  [style.background-color]="bgColor"
+  [style.margin]="mg"
+  [style.border]="border"
+  [style.border-radius]="borderRadius"
+  [style.color]="textColor"
+  [style.width]="width"
+  [style.height]="height"
+  [ngClass]="disabled?'disable':''"
+  [style.aspect-ratio]="aspectRatio"
+  [style.padding]="pd"
+  >
+    <div class="card-header" *ngIf="hasHeader">
+      <ng-content select="[card-header]"></ng-content>
+    </div>
+    <div class="card-body" *ngIf="hasBody">
+      <ng-content select="[card-body]"></ng-content>
+    </div>
+    <div class="card-footer" *ngIf="hasFooter">
+      <ng-content select="[card-footer]"></ng-content>
+    </div>
+  </div>
+  

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

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

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

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { Component, ContentChild, ElementRef, AfterContentInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'verben-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.css']
+})
+
+export class CardComponent implements AfterContentInit {
+  hasHeader = false;
+  hasFooter = false;
+  hasBody = false;
+  @Input() pd = '10px';
+  @Input() mg = '0px';
+  @Input() height?:string ;
+  @Input() width?:string ;
+  @Input() textColor?:string ;
+  @Input() bgColor?:string ;
+  @Input() border?:string ;
+  @Input() borderRadius?:string ;
+  @Input() disabled:boolean=false ;
+  @Input() aspectRatio?:number ;
+  @ContentChild('card-header', { static: false }) cardHeader: ElementRef | undefined;
+  @ContentChild('card-body', { static: false }) cardBody: ElementRef | undefined;
+  @ContentChild('card-footer', { static: false }) cardFooter: ElementRef | undefined;
+
+  ngAfterContentInit() {
+    this.hasHeader = !this.cardHeader;
+    this.hasBody = !this.cardBody;
+    this.hasFooter = !this.cardFooter;
+  }
+}

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

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

package/src/lib/components/card-data-view/card-data-view-footer/card-data-view-footer.component.css

@@ -0,0 +1,3 @@
+:host{
+  padding: 0px 15px;
+}

package/src/lib/components/card-data-view/card-data-view-footer/card-data-view-footer.component.html

@@ -0,0 +1 @@
+  <ng-content></ng-content>  

package/src/lib/components/card-data-view/card-data-view-footer/card-data-view-footer.component.spec.ts

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

package/src/lib/components/card-data-view/card-data-view-footer/card-data-view-footer.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'verben-card-data-view-footer',
+  templateUrl: './card-data-view-footer.component.html',
+  styleUrl: './card-data-view-footer.component.css'
+})
+export class CardDataViewFooterComponent {
+
+}

package/src/lib/components/card-data-view/card-data-view-header/card-data-view-header.component.css

@@ -0,0 +1,7 @@
+:host{
+      padding: 15px;
+      position: absolute;
+      top: 0;
+      width: 100%;
+
+}

package/src/lib/components/card-data-view/card-data-view-header/card-data-view-header.component.html

@@ -0,0 +1 @@
+  <ng-content></ng-content>  

package/src/lib/components/card-data-view/card-data-view-header/card-data-view-header.component.spec.ts

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

package/src/lib/components/card-data-view/card-data-view-header/card-data-view-header.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'verben-card-data-view-header',
+  templateUrl: './card-data-view-header.component.html',
+  styleUrl: './card-data-view-header.component.css'
+})
+export class CardDataViewHeaderComponent {
+
+}

package/src/lib/components/card-data-view/card-data-view.component.css

@@ -0,0 +1,39 @@
+.container
+{
+  gap: 10px;
+  min-height: 100vh;
+}
+:host{
+    border-radius: 12px;
+}
+.master-detail-container
+{
+  display: grid;
+  grid-template-columns: 30% 70%;
+  gap:15px;
+  justify-content: center;
+  margin-top: 20px;
+}
+.master-only-container
+{
+  display: grid;
+  grid-template-columns: 100%;
+  justify-content: center;
+  margin-top: 20px;
+
+}
+
+.paginator-text
+{
+  margin-left: auto;
+  margin-right: auto;
+}
+.cursor-pointer 
+{
+  cursor: pointer;
+}
+.toRight
+{
+ float:right;
+ margin: 5px 10px 0px 0px;
+}