verben-ng-ui 0.0.1

package/src/lib/components/data-view/data-view-click-outside.directive.ts

@@ -0,0 +1,44 @@
+// directives/outside-click.directive.ts
+
+import {
+    Directive,
+    ElementRef,
+    EventEmitter,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output,
+    Renderer2,
+  } from '@angular/core';
+  
+  @Directive({
+    selector: '[appOutSideClick]',
+    standalone: true,
+  })
+  export class OutSideClickDirective implements OnInit, OnDestroy {
+    @Input() appOutSideClick!: boolean;
+    @Output() outSideClick: EventEmitter<void> = new EventEmitter();
+    constructor(private element: ElementRef, private renderer: Renderer2) {}
+  
+    private listener: (() => void) | undefined;
+  
+    onDocumentClick = (event: Event) => {
+      if (!this.element.nativeElement.parentElement.contains(event.target)) {
+        this.outSideClick.emit();
+      }
+    };
+  
+    ngOnInit(): void {
+      this.listener = this.renderer.listen(
+        'document',
+        'click',
+        this.onDocumentClick
+      );
+    }
+  
+    ngOnDestroy(): void {
+      if (this.listener) {
+        this.listener();
+      }
+    }
+  }

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

@@ -0,0 +1,74 @@
+
+  .toggle-button-container button {
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    border:1px solid gray;
+    padding: 0;
+    border-radius: 6px;
+    overflow: hidden;
+    height: 35px;
+  }
+  
+  .toggle-button-container verben-svg {
+    transition: background-color 0.5s ease;
+    padding: 6px;
+    position: relative;
+  }
+  .toggle-button-container verben-svg.active {
+    background-color: #d3d3d3;
+  }
+  .flex{
+    display: flex;
+  }
+  .justify-between{
+    justify-content: space-between;
+  }
+  .items-center{
+    align-items: center;
+  }
+  .font-semibold{
+    font-weight: 600;
+  }
+  .font-normal{
+    font-weight: 400;
+  }
+  .text-sm{
+    font-size: 14px;
+  }
+  .text-xs{
+    font-size: 12px;
+  }
+  .gap{
+    gap: 7px;
+  }
+  .pd{
+    padding: 5px 8px;
+  }
+.rounded-sm{
+  border-radius: 10px;
+}
+.cursor-pointer{
+  cursor: pointer;
+}
+.search-input{
+  width:30%;
+}
+sup{
+  color: #3479E9;
+  font-weight: 500;
+}
+.data-view-element{
+  position: absolute;
+  top:50px;
+  left: 0;
+}
+.relative{
+  position: relative;
+}
+.z-10{
+  z-index: 100;
+}

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

@@ -0,0 +1,161 @@
+<div class="toolbar flex gap justify-between items-center" [style.margin]="'0px 35px'">
+  <div class="flex items-center gap">
+    <div class="toggle-button-container">
+      <button type="button" (click)="toggleView()" [ngClass]="buttonClass">
+        <verben-svg
+          [icon]="gridIcon"
+          [class.active]="!isGridView"
+          [ngClass]="!isGridView ? activeIconClass : iconClass"
+        ></verben-svg>
+        <verben-svg
+          [icon]="listIcon"
+          [class.active]="isGridView"
+          [ngClass]="isGridView ? activeIconClass : iconClass"
+          [width]="25"
+          [height]="25"
+        ></verben-svg>
+      </button>
+    </div>
+    <!-- Search Input -->
+    <div [style.width]="inputWidth" class="search-input" *ngIf="viewState.isSearch">
+      <verbena-input
+        [type]="'text'"
+        [placeHolder]="'Search...'"
+        (input)="onSearch($event)"
+        [borderRadius]="'10px'"
+        [border]="'0'"
+      />
+    </div>
+  </div>
+
+  <div class="flex items-center relative gap" [style.margin-left]="'10px'">
+    <!-- Column Section -->
+    <ng-container
+      [appOutSideClick]="showColumnChild"
+      (outSideClick)="showColumnChild = false"
+      *ngIf="viewState.isColumn && isGridView"
+    >
+      <ng-container *ngIf="columnTemplate; else defaultColumn"></ng-container>
+      <ng-template #defaultColumn>
+        <span
+          class="flex gap text-xs items-center pd rounded cursor-pointer"
+          [style.background-color]="'#D9D9D940'"
+          (click)="toggleChildView('column')"
+        >
+          <verben-svg [width]="15" [icon]="'column'"></verben-svg>
+          <span>Columns <sup>({{ selectedColumnCount }})</sup></span>
+        </span>
+        <div class="data-view-element">
+          <ng-content *ngIf="showColumnChild" select="[column-content]"></ng-content>
+        </div>
+      </ng-template>
+    </ng-container>
+
+    <!-- Filter Section -->
+    <ng-container
+      [appOutSideClick]="showFilterChild"
+      (outSideClick)="showFilterChild = false"
+      *ngIf="viewState.isFilter"
+    >
+      <ng-container *ngIf="filterTemplate; else defaultFilter"></ng-container>
+      <ng-template #defaultFilter>
+        <span
+          class="flex gap text-xs items-center pd rounded cursor-pointer"
+          [style.background-color]="'#D9D9D940'"
+          (click)="toggleChildView('filter')"
+        >
+          <verben-svg [width]="15" [icon]="'filter'"></verben-svg>
+          <span>Filter <sup>({{ selectedFilterTableCount }})</sup></span>
+        </span>
+        <div class="data-view-element">
+          <ng-content *ngIf="showFilterChild" select="[filter-content]"></ng-content>
+        </div>
+      </ng-template>
+    </ng-container>
+
+    <!-- Sort Section -->
+    <ng-container
+      [appOutSideClick]="showSortChild"
+      (outSideClick)="showSortChild = false"
+      *ngIf="viewState.isSort"
+    >
+      <ng-container *ngIf="sortTemplate; else defaultSort"></ng-container>
+      <ng-template #defaultSort>
+        <span
+          class="flex gap text-xs items-center pd rounded cursor-pointer"
+          [style.background-color]="'#D9D9D940'"
+          (click)="toggleChildView('sort')"
+        >
+          <verben-svg [width]="15" [icon]="'sort'"></verben-svg>
+          <span>Sort <sup>({{ selectedSortCount }})</sup></span>
+        </span>
+        <div class="data-view-element">
+          <ng-content *ngIf="showSortChild" select="[sort-content]"></ng-content>
+        </div>
+      </ng-template>
+    </ng-container>
+
+    <!-- Export Section -->
+    <ng-container
+      [appOutSideClick]="showExportChild"
+      (outSideClick)="showExportChild = false"
+      *ngIf="viewState.isExport"
+    >
+      <ng-container *ngIf="exportTemplate; else defaultExport"></ng-container>
+      <ng-template #defaultExport>
+        <span
+          class="flex gap text-xs items-center pd rounded cursor-pointer"
+          [style.background-color]="'#D9D9D940'"
+          (click)="toggleChildView('export')"
+        >
+          <verben-svg [width]="15" [icon]="'export'"></verben-svg>
+          Export
+        </span>
+        <div class="data-view-element">
+          <ng-content *ngIf="showExportChild" select="[export-content]"></ng-content>
+        </div>
+      </ng-template>
+    </ng-container>
+
+    <!-- Select Section -->
+    <div *ngIf="viewState.isSelect">
+      <span
+        class="flex gap text-xs items-center pd rounded cursor-pointer"
+        [style.background-color]="'#D9D9D940'"
+        (click)="toggleChildView('select')"
+      >
+        <verben-svg [width]="15" [icon]="'select'"></verben-svg>
+        <span>Select</span>
+        <verben-svg [width]="6" [icon]="'chevron-down'"></verben-svg>
+      </span>
+    </div>
+
+    <!-- Create Button -->
+    <div *ngIf="viewState.isCreate">
+      <verbena-button
+        class="text-sm font-semibold"
+        [bgColor]="'#FFE681'"
+        [pd]="'6px'"
+        [borderRadius]="'4px'"
+        [textColor]="'#000'"
+        [svg]="'add'"
+        [svgPosition]="'right'"
+        [text]="'Create New'"
+        (click)="toggleChildView('create')"
+      >
+    </verbena-button>
+    </div>
+  </div>
+</div>
+
+<!-- Grid and List View Handling -->
+<div *ngIf="isGridView; else listViewTemplate">
+  <div class="grid-view">
+    <ng-content select="[grid-content]"></ng-content>
+  </div>
+</div>
+<ng-template #listViewTemplate>
+  <div class="list-view">
+    <ng-content select="[list-content]"></ng-content>
+  </div>
+</ng-template>

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

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

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

@@ -0,0 +1,136 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+
+interface ViewState {
+  isSearch?: boolean;
+  isColumn?: boolean;
+  isFilter?: boolean;
+  isSort?: boolean;
+  isExport?: boolean;
+  isSelect?: boolean;
+  isCreate?:boolean
+}
+
+@Component({
+  selector: 'verben-data-view',
+  templateUrl: './data-view.component.html',
+  styleUrls: ['./data-view.component.css'],
+})
+export class DataViewComponent implements OnInit {
+  @Input() buttonClass?: string;
+  @Input() iconClass?: string;
+  @Input() activeIconClass?: string;
+  @Input() gridIcon: string = 'grid-3';
+  @Input() listIcon: string = 'list-view';
+
+  // Grouped view state input
+  @Input() viewState: ViewState = {
+    isSearch: true,
+    isColumn: true,
+    isFilter: true,
+    isSort: true,
+    isExport: true,
+    isSelect: true,
+    isCreate:true
+  };
+
+  @Input() searchTemplate?: Node;
+  @Input() columnTemplate?: Node;
+  @Input() filterTemplate?: Node;
+  @Input() sortTemplate?: Node;
+  @Input() exportTemplate?: Node;
+
+  @Input() selectedColumnCount?: number = 0;
+  @Input() selectedSortCount: number = 0;
+  @Input() selectedFilterTableCount: number = 0;
+  @Input() inputWidth: string="350px";
+  @Input()showColumnChild: boolean = false;
+  @Input() showSortChild: boolean = false;
+  @Input() showFilterChild: boolean = false;
+  @Input() showExportChild: boolean = false;
+  @Input() create: boolean = false;
+  @Input() showSelected: boolean = false;
+
+  @Output() viewChange = new EventEmitter<boolean>();
+  @Output() stateChange = new EventEmitter<{ key: string; value: boolean }>();
+
+  isGridView: boolean = false;
+
+  ngOnInit(): void {}
+
+  toggleView(): void {
+    this.isGridView = !this.isGridView;
+    this.viewChange.emit(this.isGridView);
+  }
+
+  onSearch(event: any): void {
+    this.stateChange.emit({ key: 'search', value: event.target.value });
+  }
+
+  // Generalized toggle method for managing UI components
+  toggleChildView(viewType: string): void {
+    switch (viewType) {
+      case 'column':
+        this.showColumnChild = !this.showColumnChild;
+        this.resetChildViewsExcept('column');
+        break;
+      case 'filter':
+        this.showFilterChild = !this.showFilterChild;
+        this.resetChildViewsExcept('filter');
+        break;
+      case 'sort':
+        this.showSortChild = !this.showSortChild;
+        this.resetChildViewsExcept('sort');
+        break;
+      case 'select':
+        this.showSelected = !this.showSelected;
+        this.resetChildViewsExcept('select');
+        break;
+      case 'export':
+        this.showExportChild = !this.showExportChild;
+        this.resetChildViewsExcept('export');
+        break;
+        case 'create':
+          this.create = !this.create;
+          this.resetChildViewsExcept('create');
+          break;
+    }
+    this.stateChange.emit({ key: viewType, value: this.getChildViewState(viewType) });
+  }
+
+  // Reset other child views when one is toggled
+  resetChildViewsExcept(viewType: string): void {
+    if (viewType !== 'column') this.showColumnChild = false;
+    if (viewType !== 'filter') this.showFilterChild = false;
+    if (viewType !== 'sort') this.showSortChild = false;
+    if (viewType !== 'select') this.showSelected = false;
+    if (viewType !== 'export') this.showExportChild = false;
+    if (viewType !== 'create') this.create = false;
+  }
+
+  // Helper method to get the state of a specific child view
+  getChildViewState(viewType: string): boolean {
+    switch (viewType) {
+      case 'column':
+        return this.showColumnChild;
+      case 'filter':
+        return this.showFilterChild;
+      case 'sort':
+        return this.showSortChild;
+      case 'select':
+        return this.showSelected;
+      case 'export':
+        return this.showExportChild;
+        case 'create':
+        return this.create;
+      default:
+        return false;
+    }
+  }
+}

package/src/lib/components/data-view/data-view.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DataViewComponent } from './data-view.component';
+import { CardDataViewModule } from '../card-data-view/card-data-view.module';
+
+import { SvgModule } from '../svg/svg.module';
+import { DataTableModule } from '../data-table/data-table.module';
+import { OutSideClickDirective } from './data-view-click-outside.directive';
+import {VerbenaInputModule} from "../../Verbena-input/verbena-input.module"
+import {VerbenaButtonModule} from "../../verbena-button/verbena-button.module"
+@NgModule({
+  declarations:[DataViewComponent],
+  imports: [CommonModule,CardDataViewModule,DataTableModule,SvgModule,VerbenaInputModule,VerbenaButtonModule,OutSideClickDirective],
+  exports: [DataViewComponent]
+})
+export class DataViewModule {}

package/src/lib/components/date-picker/date-picker.component.css

@@ -0,0 +1,65 @@
+/* date-picker.component.scss */
+.date-picker {
+    position: relative;
+    width: 250px;
+  }
+  
+  input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .calendar {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width:fit-content;
+    border: 1px solid #ccc;
+    background-color: white;
+    z-index: 10;
+    border-radius: 4px;
+  }
+  
+  .calendar-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 10px;
+    background-color: #f0f0f0;
+  }
+  
+  .weekdays,
+  .dates {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    text-align: center;
+    gap: 6px;
+    padding: 10px;
+  }
+  
+  button {
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 5px;
+    width: 40px;
+    height: 40px;
+
+  }
+  
+  button.selected {
+    background-color:#FFE681;
+    color: black;
+    border-radius: 30px;
+  }
+  .calendar-footer{
+    display: flex;
+    justify-content: end;
+    gap: 20px;
+    padding:4px 10px;
+    color: purple;
+    font-weight:600;
+  }

package/src/lib/components/date-picker/date-picker.component.html

@@ -0,0 +1,60 @@
+<div class="date-picker">
+    <input
+      type="text"
+      [placeholder]="placeholder"
+      [value]="displayDate"
+      (focus)="toggleCalendar()"
+      readonly
+    />
+    <div *ngIf="showCalendar" class="calendar">
+      <div class="calendar-header">
+        <ng-container *ngIf="!useDropdowns; else dropdowns">
+          <button (click)="previousMonth()">
+            <verben-svg [width]="20" [icon]="'chevron-left'"></verben-svg>
+          </button>
+          
+          <!-- Display the current month and year -->
+          <span>{{ months[selectedMonth] }} {{ selectedYear }}</span>
+          
+          <button (click)="nextMonth()">
+            <verben-svg [width]="20" [icon]="'chevron-right'"></verben-svg>
+          </button>
+        </ng-container>
+  
+        <ng-template #dropdowns>
+          <verben-drop-down
+            [placeholder]="yearPlaceholder"
+            (onChange)="onDropdownYearChange($event)"
+            [options]="yearRange"
+            [(ngModel)]="selectedYear"
+          ></verben-drop-down>
+          <verben-drop-down
+            placeholder="Select a month"
+            (onChange)="onDropdownMonthChange($event)"
+            [options]="months"
+            [(ngModel)]="selectedMonth"
+          ></verben-drop-down>
+        </ng-template>
+      </div>
+  
+      <div class="calendar-body">
+        <div class="weekdays">
+          <span *ngFor="let day of weekDays">{{ day }}</span>
+        </div>
+        <div class="dates">
+          <button
+            *ngFor="let day of getDaysInMonth()"
+            [class.selected]="isSelected(day)"
+            (click)="selectTemporaryDate(day)"
+          >
+            {{ day.getDate() }}
+          </button>
+        </div>
+      </div>
+      <div class="calendar-footer">
+        <button (click)="cancel()">Cancel</button>
+        <button (click)="confirm()">OK</button>
+      </div>
+    </div>
+  </div>
+  

package/src/lib/components/date-picker/date-picker.component.specs.ts

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