verben-ng-ui 0.0.1

package/src/lib/components/drop-down/drop-down.module.ts

@@ -0,0 +1,24 @@
+import { forwardRef, NgModule } from '@angular/core';
+import { DropDownComponent } from './drop-down.component';
+import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { DropDownItemComponent } from './drop-down-item/drop-down-item.component';
+import { SharedModule } from '../shared.module';
+
+@NgModule({
+  declarations: [],
+  imports: [DropDownComponent, DropDownItemComponent, SharedModule],
+  exports: [DropDownComponent],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DropDownComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => DropDownComponent),
+      multi: true,
+    },
+  ],
+})
+export class DropDownModule {}

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

@@ -0,0 +1,12 @@
+img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    object-fit: contain;
+    transition: opacity 1s ease-in-out;
+    opacity: 0;
+  }
+  
+  img.loaded {
+    opacity: 1;
+  }

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

@@ -0,0 +1,18 @@
+<div>
+    <img [src]="url"
+         [attr.data-src]="lazyLoad ? url : null"
+         (load)="isLoaded = true"
+         (error)="isLoaded = true; url = placeholder"
+         [ngClass]="{'loaded': isLoaded}"
+         [style.width]="width"
+         [style.height]="height"
+         alt="Image"/>
+    <ng-container *ngIf="!isLoaded">
+        <img
+        [src]="placeholder"
+        [style.width]="width"
+        [style.height]="height"
+        alt="Placeholder Image"
+      />
+    </ng-container>
+  </div>

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

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

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

@@ -0,0 +1,45 @@
+import { Component, Input, OnInit, ElementRef, AfterViewInit } from '@angular/core';
+
+@Component({
+  selector: 'verben-image',
+  templateUrl: './image.component.html',
+  styleUrl: './image.component.css',
+})
+
+export class ImageComponent implements OnInit, AfterViewInit {
+  @Input() url: string = '';
+  @Input() placeholder: string = 'assets/placeholder.png';
+  @Input() lazyLoad: boolean = false;
+  @Input() width: string = '100%'; 
+  @Input() height: string = 'auto'; 
+
+  isLoaded: boolean = false;
+
+  constructor(private el: ElementRef) {}
+
+  ngOnInit(): void {}
+
+  ngAfterViewInit(): void {
+    if (this.lazyLoad) {
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const img: HTMLImageElement = this.el.nativeElement.querySelector('img[data-src]');
+            img.src = img.getAttribute('data-src')!;
+            this.isLoaded = true;
+            observer.unobserve(entry.target);
+          }
+        });
+      });
+      observer.observe(this.el.nativeElement);
+    }else {    
+      const img: HTMLImageElement = this.el.nativeElement.querySelector('img');
+      img.onload = () => {
+        this.isLoaded = true; 
+      };
+    }
+  }
+}
+
+
+

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ImageComponent } from './image.component';
+import { CommonModule } from '@angular/common';
+import { VerbenaInputModule } from "../../Verbena-input/verbena-input.module";
+
+@NgModule({
+  declarations: [ImageComponent],
+  imports: [CommonModule, VerbenaInputModule,CommonModule],
+  exports: [ImageComponent],
+})
+export class ImageModule {}

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

@@ -0,0 +1,3 @@
+p{
+    margin-bottom: 0px !important;
+}

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

@@ -0,0 +1,19 @@
+<div [ngStyle] = "notificationStyles"> 
+    <div [ngStyle] = "innerWrapperStyles"> 
+        <verben-svg [icon] ="iconName" [width]="iconWidth" [height]="iconHeight"  [stroke]="stroke" [fill]="fill"></verben-svg>
+        <p>{{content}}</p>
+    </div>
+    <div [ngStyle]="btnWrapperStyle"> 
+        <button *ngFor="let button of buttons"
+                [ngStyle]="{'background-color': button.bgColor || 'white', 
+                'color': button.primarycolor || button.secondarycolor,
+                'font-size':button.fontSize,
+                'font-weight':button.fontWeigth,
+                'padding':'0px 8px',
+                'border-radius':'8px',
+            }"
+                (click)="onButtonClick(button)">
+            {{button.text}}
+        </button>
+    </div>
+</div>

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

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

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

@@ -0,0 +1,77 @@
+import { Component, Input, EventEmitter, Output } from '@angular/core';
+
+interface Button {
+  text: string;
+  bgColor?: string; 
+  primarycolor?: string;  
+  secondarycolor?: string;
+  fontSize?:string;  
+  fontWeigth?:string;  
+}
+
+@Component({
+  selector: 'verben-notification',
+  templateUrl: './notification.component.html',
+  styleUrl: './notification.component.css'
+})
+
+export class NotificationComponent {
+  @Input() bgColor: string = '#D6F3E6'; 
+  @Input() textColor: string = '#2DB76F';  
+  @Input() width?: string = '650px';  
+  @Input() height?: string = '50px'; 
+  @Input() border?: string;
+  @Input() borderRadius: string = '15px';
+  @Input() fontSize: string = '20px';
+  @Input() fontWeight: string = '700';
+  @Input() padding: string = '10px 2.5rem 10px 1.5rem';
+  @Input() iconName: string = 'success';
+  @Input() iconWidth: number = 20;
+  @Input() iconHeight: number = 20;
+  @Input() content?: string;
+  @Input() stroke: string = '';
+  @Input() fill: string = '';
+  @Input() buttons: Button[] = [];
+
+  @Output() buttonClick = new EventEmitter<Button>();
+
+
+  get notificationStyles() {
+    return {
+      'background-color': this.bgColor,
+      'color': this.textColor,
+      'padding': this.padding,
+      'border-radius': this.borderRadius,
+      'border': this.border,
+      'width': this.width,
+      'font-size':this.fontSize,
+      'font-weight':this.fontWeight,
+      'display':'flex',
+      'align-items':'center',
+      'justify-content':'space-between'
+    };
+  };
+
+
+  get btnWrapperStyle(){ 
+    return { 
+      'display':'flex',
+      'align-items':'center',
+      'gap':'0.8rem'
+    }
+  }
+
+  get innerWrapperStyles(){ 
+    return { 
+      'display':'flex',
+      'align-items':'center',
+      'gap':'1.5rem'
+    }
+  }
+
+  onButtonClick(button: Button) {
+    this.buttonClick.emit(button);
+  }
+}
+
+

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

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

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

@@ -0,0 +1,9 @@
+import { forwardRef, NgModule } from '@angular/core';
+import { TemplateDirective } from './TemplateDirective.directive';
+
+@NgModule({
+  declarations: [TemplateDirective],
+  imports: [],
+  exports: [TemplateDirective],
+})
+export class SharedModule {}

package/src/lib/components/sort-table/sort-table.component.css

@@ -0,0 +1,67 @@
+
+
+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: 14px;
+}
+.gap{
+  gap: 7px;
+}
+.gap-sm{
+  gap: 4px;
+}
+.cursor-pointer{
+  cursor: pointer;
+}
+.cursor-not-allowed{
+  cursor: not-allowed;
+}
+.pd{
+  padding: 10px 10px 10px 10px;
+}
+.sort-header {
+  margin-bottom: 10px;
+  padding: 10px 0px 10px 0px;
+}
+
+input[type="checkbox"].checked {
+  accent-color: #3479E9
+}
+
+.block{
+  display: block;
+}
+.btn-wrapper{ 
+  display: flex;
+  justify-content: end;
+}
+.gap-md{
+  gap: 2px;
+}
+.disabledBtn {
+  cursor: not-allowed;
+}
+.enabledBtn {
+  cursor:pointer;
+}

package/src/lib/components/sort-table/sort-table.component.html

@@ -0,0 +1,164 @@
+<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"
+>
+  <!-- Header Section -->
+  <div class="sort-header flex justify-between text-sm">
+    <span class="sort-title font-semibold">
+      Sort
+      <sup [style.color]="secondaryColor">[{{ countSelectedSorts() }}]</sup>
+    </span>
+    <span
+      [style.color]="secondaryColor"
+      [style.border]="'none'"
+      [style.cursor]="'pointer'"
+      [style.font-size]="'12px'"
+      class="cursor-pointer"
+      (click)="resetSort()"
+      >{{ resetText }}</span
+    >
+
+  </div>
+  <hr />
+  <!-- Sort Options -->
+  <div [style.max-height]="containerHeight" class="sort-options">
+    <p class="pd">{{ propertyText }}</p>
+    <div class="flex items-center gap" [style.padding]="'4px 10px'">
+      <label [style.font-size]="'13px'" [style.font-weight]="'500'">
+        <input type="checkbox" [checked]="checkAll"
+        (change)="toggleSelectAll()" />
+        Select All
+      </label>
+    </div>
+
+    <div
+      *ngFor="let option of visibleSortOptions; let i = index"
+      [attr.draggable]="enableDragAndDrop"
+      (dragstart)="onDragStart(i, $event)"
+      (dragover)="onDragOver($event)"
+      (drop)="onDrop(i, $event)"
+      class="sort-option"
+    >
+      <div [style.font-size]="'14px'" [style.margin-top]="'13px'">
+        <div class="flex items-center gap-md">
+          <verben-svg
+            *ngIf="enableDragAndDrop"
+            fill="black"
+            [width]="25"
+            class="svg"
+            icon="square-dot"
+          ></verben-svg>
+          <div class="flex items-center gap">
+            <input
+              type="checkbox"
+              [checked]="option.checked"
+              (change)="toggleSort(i)"
+            />
+            <span>{{ option.name }}</span>
+          </div>
+        </div>
+
+        <!-- Sorting Controls -->
+        <div class="flex items-center gap" [style.margin-left]="'35px'">
+          <label
+            class="flex items-center gap-sm"
+            *ngIf="option.type === 'Number'"
+          >
+            <input
+              type="radio"
+              name="sortOrder{{ i }}"
+              value="asc"
+              [checked]="selectedOrders.get(i) === 'asc'"
+              [disabled]="!option.checked"
+              (change)="setSortOrder(i, 'asc')"
+            />
+            1-100
+          </label>
+          <label
+            class="flex items-center gap-sm"
+            *ngIf="option.type === 'Number'"
+          >
+            <input
+              type="radio"
+              name="sortOrder{{ i }}"
+              value="desc"
+              [checked]="selectedOrders.get(i) === 'desc'"
+              [disabled]="!option.checked"
+              (change)="setSortOrder(i, 'desc')"
+            />
+            100-1
+          </label>
+
+          <label
+            class="flex items-center gap-sm"
+            *ngIf="option.type === 'String' || option.type === 'Date'"
+          >
+            <input
+              type="radio"
+              name="sortOrder{{ i }}"
+              value="asc"
+              [checked]="selectedOrders.get(i) === 'asc'"
+              [disabled]="!option.checked"
+              (change)="setSortOrder(i, 'asc')"
+            />
+            A-Z
+          </label>
+          <label
+            class="flex items-center gap-sm"
+            *ngIf="option.type === 'String' || option.type === 'Date'"
+          >
+            <input
+              type="radio"
+              name="sortOrder{{ i }}"
+              value="desc"
+              [checked]="selectedOrders.get(i) === 'desc'"
+              [disabled]="!option.checked"
+              (change)="setSortOrder(i, 'desc')"
+            />
+            Z-A
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <!-- Show More Options -->
+    <div *ngIf="showMore && hiddenSortOptions.length > 0">
+      <span
+        [style.padding]="'20px 10px 0px 10px'"
+        [style.color]="'black'"
+        class="cursor-pointer block"
+        (click)="toggleShowMore()"
+      >
+        {{ showMoreText }}
+      </span>
+    </div>
+  </div>
+  <hr />
+  <!-- Sort 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]="countSelectedSorts() === 0"
+      [ngClass]="{
+      disabledBtn:countSelectedSorts()===0,
+      enableBtn:countSelectedSorts()!==0,
+      }"
+      (click)="applySort()"
+    >
+      {{ sortButtonText }}
+    </button>
+  </div>
+</div>

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

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