verben-ng-ui 0.0.1

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

@@ -0,0 +1,143 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { DropdownChangeEvent } from '../drop-down/DropdownChangeEvent';
+
+@Component({
+  selector: 'app-date-picker',
+  templateUrl: './date-picker.component.html',
+  styleUrls: ['./date-picker.component.css'],
+})
+export class DatePickerComponent {
+  @Input() placeholder = 'Select date';
+  @Input() format = 'MM/DD/YYYY';
+  @Input() minDate: Date | undefined;
+  @Input() maxDate: Date | undefined;
+  @Input() useDropdowns: boolean = true;
+  @Input() yearPlaceholder:string="Select a year"
+  @Input() monthPlaceholder:string="Select a year"
+  @Output() dateChange = new EventEmitter<Date>();
+
+  selectedDate: Date = new Date();
+  tempSelectedDate: Date = new Date();
+  showCalendar = false;
+
+  weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  yearRange: number[] = Array.from(
+    { length: new Date().getFullYear() - 1960 + 1 },
+    (_, i) => 1960 + i
+  );
+
+  selectedMonth: number =1|| this.selectedDate.getMonth();
+  selectedYear: number = this.selectedDate.getFullYear();
+
+  get displayDate(): string {
+    return this.selectedDate
+      ? this.formatDate(this.selectedDate, this.format)
+      : '';
+  }
+
+  toggleCalendar() {
+    this.showCalendar = !this.showCalendar;
+    this.tempSelectedDate = new Date(this.selectedDate);
+    this.selectedMonth = this.tempSelectedDate.getMonth();
+    this.selectedYear = this.tempSelectedDate.getFullYear();
+  }
+
+  previousMonth() {
+    this.selectedMonth--;
+    if (this.selectedMonth < 0) {
+      this.selectedMonth = 11;
+      this.selectedYear--;
+    }
+    this.updateTempSelectedDate();
+  }
+
+  nextMonth() {
+    this.selectedMonth++;
+    if (this.selectedMonth > 11) {
+      this.selectedMonth = 0;
+      this.selectedYear++;
+    }
+    this.updateTempSelectedDate();
+  }
+
+  onDropdownYearChange(event: DropdownChangeEvent): void {
+    this.selectedYear = event.value;
+    this.updateTempSelectedDate();
+  }
+
+  onDropdownMonthChange(event: DropdownChangeEvent): void {
+    this.selectedMonth = event.value;
+    this.updateTempSelectedDate();
+  }
+
+  updateTempSelectedDate() {
+    this.tempSelectedDate.setMonth(this.selectedMonth);
+    this.tempSelectedDate.setFullYear(this.selectedYear);
+  }
+
+  getDaysInMonth(): Date[] {
+    const days = [];
+    const year = this.tempSelectedDate.getFullYear();
+    const month = this.tempSelectedDate.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+
+    for (let i = firstDay.getDate(); i <= lastDay.getDate(); i++) {
+      days.push(new Date(year, month, i));
+    }
+    return days;
+  }
+
+  selectTemporaryDate(day: Date) {
+    this.tempSelectedDate = day; // Set the temporary date when user clicks on a day
+  }
+
+  isSelected(day: Date): boolean {
+    return (
+      day.getDate() === this.tempSelectedDate.getDate() &&
+      day.getMonth() === this.tempSelectedDate.getMonth() &&
+      day.getFullYear() === this.tempSelectedDate.getFullYear()
+    );
+  }
+
+  formatDate(date: Date, format: string): string {
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const year = date.getFullYear();
+
+    switch (format) {
+      case 'DD/MM/YYYY':
+        return `${day}/${month}/${year}`;
+      case 'MM/DD/YYYY':
+      default:
+        return `${month}/${day}/${year}`;
+    }
+  }
+
+  confirm() {
+    // When OK is clicked, confirm the selected date
+    this.selectedDate = new Date(this.tempSelectedDate);
+    this.showCalendar = false;
+    this.dateChange.emit(this.selectedDate);
+  }
+
+  cancel() {
+    // When Cancel is clicked, close the calendar without changing the date
+    this.showCalendar = false;
+  }
+}

package/src/lib/components/date-picker/date-picker.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms'
+import { CommonModule } from '@angular/common';
+import { DatePickerComponent } from './date-picker.component';
+import { SvgModule } from "../svg/svg.module";
+import { DropDownModule } from '../drop-down/drop-down.module';
+@NgModule({
+  declarations:[DatePickerComponent],
+  imports: [FormsModule, CommonModule, SvgModule,DropDownModule],
+  exports: [DatePickerComponent]
+})
+export class DatePickerModule {}

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

@@ -0,0 +1,4 @@
+export interface DropdownChangeEvent {
+  originalEvent?: Event;
+  value: any;
+}

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

@@ -0,0 +1,19 @@
+export class DropdownLoadEvent {
+  private _loadTimes: number;
+
+  get loadTimes(): number {
+    return this._loadTimes;
+  }
+
+  constructor() {
+    this._loadTimes = 0;
+  }
+
+  increaseLoadTime() {
+    this._loadTimes += 1;
+  }
+
+  reset() {
+    this._loadTimes = 0;
+  }
+}

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

@@ -0,0 +1,42 @@
+import { DropdownLoadEvent } from './DropdownLoadEvent';
+
+// interface BaseMenuItem {
+//   label: string;
+//   subLabel?: string;
+//   value: any;
+//   lazyLoad?: false;
+// }
+
+// interface GroupMenuItem {
+//   label: string;
+//   subLabel?: string;
+//   value: any;
+//   items: DropdownMenuItem[];
+//   lazyLoad: true;
+//   loadMore: (context: DropdownLoadEvent) => Promise<DropdownMenuItem[]>;
+//   loadTimes: DropdownLoadEvent;
+// }
+
+// var item: DropdownMenuItem = {
+//   label: "",
+//   value: "",
+//   lazyLoad: true,
+// }
+
+// export type DropdownMenuItem = BaseMenuItem | GroupMenuItem
+
+// type DropdownMenuItem = BaseMenuItem & (BaseMenuItem['lazyLoad'] extends true ? Required<Pick<BaseMenuItem, 'loadMore' | 'loadTimes'>>: {})
+
+export interface DropdownMenuItem {
+  label: string;
+  subLabel?: string;
+  value: any;
+  items?: DropdownMenuItem[];
+  lazyLoad?: boolean;
+  filterBy?: string;
+  search?: (
+    param: string,
+    context: DropdownLoadEvent
+  ) => Promise<DropdownMenuItem[]>;
+  loadMore?: (context: DropdownLoadEvent) => Promise<DropdownMenuItem[]>;
+}

package/src/lib/components/drop-down/documentation.md

@@ -0,0 +1,69 @@
+SELECTOR - <verbena-drop-down></verbena-drop-down>
+
+INPUTS
+options: any[] | DropdownMenuItem[] - List containing selectable options. Can be 2-way bound to capture internal changes to the options state.
+
+width: string- sets the width of the dropdown.
+showHorizontalLine: boolean - Configures whether or not the horizontal line should show. Default is true.
+horizontalLineColor: string- Configure the color of the horizontal line if shown.
+optionLabel: string (Represents a valid property on the object type passed) - Can be set if options is a list of Objects and you want to configure what gets displayed for users to select and the value displayed when selected.
+optionSubLabel: string (Represents a valid property on the object type passed) - Can also be set if options is a list of Objects and you want to show another property as additional information that would like to display under the label.
+optionValue: string (Represents a valid property on the object type passed or in the case of a DropdownMenuItem array, a valid property on the value property if it's an object type) - Can be set if options is a list of Objects or a DropdownMenuItem array for which the value property is an object and you want to set what value formControls or ngModel bindings are mapped to.
+styleClass: string - Optional class addition that would be added to the dropdown.
+placeholder: string - Any value you want the dropdown to display when nothing has been selected.
+invalidMessage: string - Specifies message to be shown when the dropdown is invalid. If not set, no message is shown.
+errorPosition: string - Specifies the position you want the dropdown's invalid message to show relative to the dropdown. Has 3 options - 'top', 'left' and 'right'. If none of these is set, it defaults to bottom.
+showClear: boolean (default = false) - Configures whether to show a clear icon to remove the current selected value or values.
+lazyLoad: boolean (default = false) - Configures whether or not more items can be loaded aynchronously and added to the options list.
+loadMoreCaption: string - Configures the caption of the button that is used to load more items. Only displays when lazyLoad is set to true.
+group: boolean (default = false) - Configures whether the dropdown items are nested. Requires an options type of DropdownMenuItem[] as input.
+multiselect: boolean (default = false)- Configures whether the dropdown allows multiple selections or not.
+display: string - Only valid in multiselect contexts. Displays selected items as a chip. Default look is comma seperated.
+filter: boolean (default = false) - Configures whether items in the dropdown are searchable, in a lazyload context, it calls a dedicated function 'search'. Otherwise it performs string based search.
+filterBy: string - Only valid in non lazyload contexts. Specifies properties that are used for reference when searching.
+debounceTime: number (default = 500) - Configures the delay allowed between user input when searching before search endpoint is called. Only valid in lazyload contexts.
+minChar: number (default = 0) - Configures the minimum characters necessary before search endpoint is called. Only valid in lazyload contexts.
+disabled: boolean (default = false) - Sets the disabled state of the dropdown.
+required: boolean (default = false) - If set as true, display visual cues when no item is selected and the dropdown is marked as touched.
+load: (context: DropdownLoadEvent) => Promise<any[]> - This is a function variable that is set to a function that accepts a DropdownLoadEvent as a parameter and returns an array. This is only valid for a lazyLoad context and is called once 'see more' or whatever loadMoreCaption set is clicked. It needs to be set for see more to work properly. What should be returned should be of the same type as the options array.
+asyncLabel: (context: any) => string | null - For lazyLoad contexts where the optionValue for example is 'Id', there's a chance that the item doesn't currently exist in the options array, and you might want to display the proper label so it shows that something is selected in the dropdown. So this function variable can be set. If your dropdown is bound to a variable 'selectedItem' and you set the value to 'mock-id' we call this function sending that id to you, so you can return the proper label property to set the dropdown display state. Note though that if there's no optionValue set and you pass in an object when setting 'selectedItem', it uses the current set optionLabel to display properly and this function might not need to be set in such contexts.
+search: ( data: any, context: DropdownLoadEvent) => Promise<any[]> - For lazyLoad contexts, is called when the user is searching and the debounce time has elapsed, sends to your registered function, the search param and a DropdownLoadEvent that tells you the number of pages loaded prior to the call. Once a search query is active, 'see more' being clicked still calls the search function passing in the search param and the updated DropdownLoadEvent.
+
+OUTPUTS
+optionsChange: EventEmitter<any[]> - enables options to be two-way bound.
+onChange: EventEmitter<DropdownChangeEvent> - emitted when changes are made to the selected option or options.
+onClick: EventEmitter<Event> - emitted when the dropdown is clicked.
+onClear: EventEmitter<Event> - emitted when the selected item or items is cleared.
+
+TEMPLATING
+selected - Configure how selected items look.
+item - Configure how selectable items look.
+group - Configure how group header items look.
+
+<ng-template let-item vTemplate="selected">
+    {{item}} Test Selected Template
+  </ng-template>
+  <ng-template let-item vTemplate="item">
+    {{item}} Test Item Template
+  </ng-template>
+  <ng-template let-item vTemplate="group">
+    {{item}} Test Group Template
+  </ng-template>
+
+OBJECTS
+DropdownChangeEvent - Sent when the dropdown selected option or options changes
+originalEvent: Event - Event captured.
+value: any - Selected option or options.
+
+DropdownLoadEvent - Sent when the loadMore function is called
+loadTimes: number of times the context has been loaded prior to the event being sent.
+
+DropdownMenuItem - The Object type passed as an array, when group is set to true. Used for nested Dropdowns
+label: string - optionLabel isn't used when group is true. Defaults to the value set here.
+subLabel?: string - optionSubLabel isn't used when group is true. Defaults to the value set here if set.
+value: any - Whatever is set here decides the default value on ngModel bindings and formControl bindings when optionValue isn't set. If optionValue is set, it looks on this value property for the property that matches the optionValue set.
+items?: DropdownMenuItem[] - Decides whether or not this DropdownMenuItem itself would be a group. If it going to have items under it, needs to be initialized.
+lazyLoad?: boolean - Configures whether or not more items under can be loaded aynchronously and added to the items list.
+filterBy?: string - Only valid in non lazyload contexts and when items is not null. Specifies properties that are used for reference when searching through items list.
+search?: (param: string, context: DropdownLoadEvent) => Promise<DropdownMenuItem[]> - For lazyLoad contexts, is called when the user is searching and the debounce time has elapsed, sends to your registered function, the search param and a DropdownLoadEvent that tells you the number of pages loaded prior to the call. Once a search query is active, 'see more' being clicked still calls the search function passing in the search param and the updated DropdownLoadEvent.
+loadMore?: (context: DropdownLoadEvent) => Promise<DropdownMenuItem[]> - This is a function variable that is set to a function that accepts a DropdownLoadEvent as a parameter and returns an array of DropdownMenuItems. This is only valid for a lazyLoad context and is called once the item is expanded or when 'see more' or whatever loadMoreCaption set is clicked. It needs to be set for see more to work properly. What should be returned should be a DropdownMenuItem array.

package/src/lib/components/drop-down/drop-down-item/drop-down-item.component.css

@@ -0,0 +1,123 @@
+@import '../../../../styles.css';
+
+.option-items-container {
+  gap: 5px;
+}
+
+.see-more-container {
+  padding: 5px;
+}
+
+.see-more-caption {
+  font-size: 12px;
+  color: #3b82f6;
+}
+
+.item-wrapper {
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.item-wrapper.multi-select {
+  align-items: center;
+  gap: 5px;
+}
+
+.item-wrapper:hover {
+  background-color: rgba(180, 205, 245, 0.24)
+}
+
+.item-wrapper.active-item {
+  background-color: rgba(59, 130, 246, 0.24);
+}
+
+.item-wrapper.multi-select-active-item {
+  background-color: rgba(180, 205, 245, 0.24)
+}
+
+.item-wrapper.active-item>div {
+  color: #1D4ED8;
+}
+
+.group-wrapper {
+  padding: 5px;
+}
+
+.group-wrapper-items {
+  padding-left: 15px;
+  position: relative;
+  z-index: 0;
+}
+
+.item-label {
+  font-weight: 500;
+  white-space: normal;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.item-label.has-sub-label {
+  font-weight: 600;
+}
+
+.item-sub-label {
+  font-size: 12px;
+  color: rgb(77, 77, 77);
+  /* white-space: normal;
+  word-wrap: break-word;
+  word-break: break-all; */
+}
+
+.default-group {
+  gap: 5px;
+  align-items: center;
+}
+
+.default-item {
+  flex: 1 1 0;
+}
+
+.plus-minus-icon {
+  color: #5d6674;
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(77, 75, 75, 0.5);
+  /* Semi-transparent shade */
+  z-index: 10;
+  /* Make sure it's on top */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  /* Prevents interactions below */
+}
+
+.loader {
+  width: 50px;
+  padding: 8px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: #3b82f6;
+  --_m:
+    conic-gradient(#0000 10%, #000),
+    linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+  mask: var(--_m);
+  -webkit-mask-composite: source-out;
+  mask-composite: subtract;
+  animation: l3 1s infinite linear;
+}
+
+@keyframes l3 {
+  to {
+    transform: rotate(1turn)
+  }
+}

package/src/lib/components/drop-down/drop-down-item/drop-down-item.component.html

@@ -0,0 +1,133 @@
+<!-- If group mode is false, display a flat list -->
+<ng-container *ngIf="!group">
+
+  <div class="option-items-container flex flex-col">
+    <ng-container *ngFor="let item of options">
+      <ng-container *ngIf="itemTemplate; else defaultItem">
+        <div *ngIf="!multiselect" [ngClass]="{'active-item': isEqual(this.activeItem, this.getValue(item))}"
+          (click)="onSelect && onSelect(item, $event)" class="item-wrapper">
+          <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
+        </div>
+        <div *ngIf="multiselect"
+          [ngClass]="{'multi-select-active-item': isSelected(this.activeItems, this.getValue(item))}"
+          (click)="onSelect && onSelect(item, $event)" class="item-wrapper multi-select flex">
+          <input type="checkbox" [checked]="isSelected(this.activeItems, this.getValue(item))"
+            class="custom-checkbox" />
+          <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
+        </div>
+      </ng-container>
+
+      <ng-template #defaultItem>
+        <div *ngIf="!multiselect" [ngClass]="{'active-item': isEqual(this.activeItem, this.getValue(item))}"
+          (click)="onSelect && onSelect(item, $event)" class="default-item item-wrapper flex flex-col">
+          <div [ngClass]="{'has-sub-label': optionSubLabel}" class="item-label">{{this.getOptionLabel(item)}}</div>
+          <div *ngIf="optionSubLabel || (group && item.subLabel)" class="item-sub-label">
+            {{this.getOptionSubLabel(item)}}</div>
+        </div>
+        <div *ngIf="multiselect"
+          [ngClass]="{'multi-select-active-item': isSelected(this.activeItems, this.getValue(item))}"
+          (click)="onSelect && onSelect(item, $event)" class="default-item item-wrapper multi-select flex">
+          <input type="checkbox" [checked]="isSelected(this.activeItems, this.getValue(item))"
+            class="custom-checkbox" />
+          <div class="flex flex-col">
+            <div [ngClass]="{'has-sub-label': optionSubLabel}" class="item-label">{{this.getOptionLabel(item)}}</div>
+            <div *ngIf="optionSubLabel || (group && item.subLabel)" class="item-sub-label">
+              {{this.getOptionSubLabel(item)}}</div>
+          </div>
+        </div>
+      </ng-template>
+    </ng-container>
+  </div>
+</ng-container>
+
+<!-- If group mode is true, display groups and sub-groups recursively -->
+<ng-container *ngIf="group">
+  <div class="option-items-container flex flex-col">
+    <ng-container *ngFor="let item of options">
+      <!-- Display as group header if the item has children -->
+      <div *ngIf="!item.items">
+        <ng-container *ngIf="itemTemplate; else defaultItem">
+          <div *ngIf="!multiselect" [ngClass]="{'active-item': isEqual(this.activeItem, this.getValue(item))}"
+            (click)="onSelect && onSelect(item, $event)" class="item-wrapper">
+            <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
+          </div>
+          <div *ngIf="multiselect"
+            [ngClass]="{'multi-select-active-item': isSelected(this.activeItems, this.getValue(item))}"
+            (click)="onSelect && onSelect(item, $event)" class="item-wrapper multi-select flex">
+            <input type="checkbox" [checked]="isSelected(this.activeItems, this.getValue(item))"
+              class="custom-checkbox" />
+            <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
+          </div>
+        </ng-container>
+
+        <ng-template #defaultItem>
+          <div *ngIf="!multiselect" [ngClass]="{'active-item': isEqual(this.activeItem, this.getValue(item))}"
+            (click)="onSelect && onSelect(item, $event)" class="default-item item-wrapper flex flex-col">
+            <div [ngClass]="{'has-sub-label': item.subLabel}" class="item-label">{{item.label}}</div>
+            <div *ngIf="item.subLabel" class="item-sub-label">{{item.subLabel}}</div>
+          </div>
+          <div *ngIf="multiselect"
+            [ngClass]="{'multi-select-active-item': isSelected(this.activeItems, this.getValue(item))}"
+            (click)="onSelect && onSelect(item, $event)" class="default-item item-wrapper multi-select flex">
+            <input type="checkbox" [checked]="isSelected(this.activeItems, this.getValue(item))"
+              class="custom-checkbox" />
+            <div class="flex flex-col">
+              <div [ngClass]="{'has-sub-label': item.subLabel}" class="item-label">{{item.label}}</div>
+              <div *ngIf="item.subLabel" class="item-sub-label">{{item.subLabel}}</div>
+            </div>
+          </div>
+        </ng-template>
+      </div>
+
+      <!-- Display as normal item if it doesn't have children -->
+      <div class="flex flex-col" *ngIf="item.items">
+        <ng-container *ngIf="groupTemplate; else defaultGroup">
+          <div class="group-wrapper" (click)="onExpand && onExpand(item, options)">
+            <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: item }"></ng-container>
+          </div>
+        </ng-container>
+
+        <ng-template #defaultGroup>
+          <div (click)="onExpand && onExpand(item, options)" class="default-group group-wrapper flex">
+            <span *ngIf="!item.expanded">
+              <verben-svg icon="plus" fill="#5d6674" [width]="15" [height]="15"></verben-svg>
+              <!-- <svg class="plus-minus-icon" width="12" height="12" viewBox="0 0 12 12" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M5.33214 6.66578H5.26102C3.95858 6.66578 2.65614 6.6663 1.35371 6.66544C1.06528 6.66527 0.850553 6.53571 0.728192 6.27369C0.525115 5.83859 0.844383 5.33734 1.32491 5.33322C1.64624 5.33031 1.96756 5.33271 2.28889 5.33271C3.28285 5.33271 4.27682 5.33271 5.27079 5.33271H5.33214V5.27633C5.33214 3.96674 5.33214 2.65714 5.33214 1.34755C5.33214 1.03086 5.53162 0.767472 5.82998 0.688643C6.25515 0.576225 6.66577 0.896512 6.66645 1.34327C6.66748 1.96311 6.66679 2.58294 6.66679 3.20278C6.66679 3.89254 6.66679 4.58229 6.66679 5.27222V5.33305H6.7242C8.0323 5.33305 9.34056 5.33305 10.6487 5.33305C10.933 5.33305 11.1737 5.48848 11.2788 5.73902C11.4659 6.18527 11.1431 6.66475 10.6533 6.66595C10.1549 6.66698 9.6564 6.66612 9.15805 6.66612C8.34968 6.66612 7.54148 6.66612 6.73311 6.66612H6.66679V6.72713C6.66679 8.03535 6.66679 9.34357 6.66679 10.6516C6.66679 10.9808 6.45343 11.2475 6.13485 11.3177C5.75989 11.4003 5.38252 11.1309 5.33899 10.749C5.33471 10.7107 5.33231 10.6722 5.33231 10.6336C5.33197 9.33123 5.33197 8.02867 5.33197 6.72627V6.66612L5.33214 6.66578Z"
+                  fill="currentColor" />
+              </svg> -->
+            </span>
+            <span *ngIf="item.expanded">
+              <verben-svg icon="minus" fill="#5d6674" [width]="15" [height]="2"></verben-svg>
+              <!-- <svg class="plus-minus-icon" width="10" height="2" viewBox="0 0 10 2" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path d="M0.333984 0.332031H9.66732V1.66536H0.333984V0.332031Z" fill="currentColor" />
+              </svg> -->
+            </span>
+            <div class="default-item flex flex-col">
+              <div [ngClass]="{'has-sub-label': item.subLabel}" class="item-label">{{item.label}}</div>
+              <div *ngIf="item.subLabel" class="item-sub-label">{{item.subLabel}}</div>
+            </div>
+          </div>
+        </ng-template>
+        <!-- Recursive rendering of sub-items (groups or individual items) -->
+        <ng-container *ngIf="item.expanded">
+          <div class="group-wrapper-items flex flex-col">
+            <drop-down-item [itemTemplate]="itemTemplate" [groupTemplate]="groupTemplate" [activeItem]="activeItem"
+              [activeItems]="activeItems" [multiselect]="multiselect" [optionValue]="optionValue"
+              [optionLabel]="optionLabel" [optionSubLabel]="optionSubLabel" [loadMoreCaption]="loadMoreCaption"
+              [options]="item.items" [group]="group" [onExpand]="onExpand" [onLoadMore]="onLoadMore"
+              [onSelect]="onSelect"></drop-down-item>
+            <div *ngIf="item.lazyLoad" class="see-more-container flex">
+              <span class="see-more-caption" (click)="onLoadMore && onLoadMore(item)">{{loadMoreCaption}}</span>
+            </div>
+            <div *ngIf="item.isLoading" class="loading-overlay">
+              <div class="loader"></div>
+            </div>
+          </div>
+        </ng-container>
+      </div>
+    </ng-container>
+  </div>
+</ng-container>

package/src/lib/components/drop-down/drop-down-item/drop-down-item.component.spec.ts

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

package/src/lib/components/drop-down/drop-down-item/drop-down-item.component.ts

@@ -0,0 +1,88 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  Input,
+  OnInit,
+  QueryList,
+  SimpleChanges,
+  TemplateRef,
+} from '@angular/core';
+import { TemplateDirective } from '../../TemplateDirective.directive';
+import { DropdownMenuItemWrapper } from '../drop-down.component';
+import { CommonModule } from '@angular/common';
+import { isEqual } from 'lodash';
+import { FormsModule } from '@angular/forms';
+// import { SvgModule } from 'verben-ng-ui/src/public-api';
+import {SvgModule} from '../../../components/svg/svg.module'
+
+@Component({
+  selector: 'drop-down-item',
+  standalone: true,
+  imports: [CommonModule, FormsModule, SvgModule],
+  templateUrl: './drop-down-item.component.html',
+  styleUrl: './drop-down-item.component.css',
+})
+export class DropDownItemComponent implements OnInit {
+  @Input() itemTemplate: TemplateRef<any> | null = null; // Allow null for custom item template
+  @Input() groupTemplate: TemplateRef<any> | null = null;
+
+  @Input() activeItem?: any;
+  @Input() activeItems?: any;
+  @Input() optionValue?: string;
+  @Input() optionLabel?: string;
+  @Input() optionSubLabel?: string;
+  @Input() loadMoreCaption?: string;
+  @Input() multiselect: boolean = false;
+  @Input() options: any[] = [];
+  @Input() group: boolean = false;
+  @Input() onExpand?: (
+    item: DropdownMenuItemWrapper,
+    siblings: DropdownMenuItemWrapper[]
+  ) => Promise<void>;
+  @Input() onLoadMore?: (item: DropdownMenuItemWrapper) => Promise<void>;
+  @Input() onSelect?: (value: any, event: Event) => void;
+
+  constructor() {}
+  ngOnInit(): void {}
+
+  isEqual(value: any, other: any): boolean {
+    return isEqual(value, other);
+  }
+
+  isSelected(value: any[], other: any): boolean {
+    for (let val of value) {
+      if (isEqual(val, other)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  getValue(item: any): any {
+    if (!this.optionValue) {
+      return this.group ? item.value : item;
+    }
+    return this.group ? item.value[this.optionValue] : item[this.optionValue];
+  }
+
+  getOptionLabel(item: any): any {
+    if (this.group) {
+      return item.label;
+    }
+    if (!this.optionLabel) {
+      return item;
+    }
+    return typeof item === 'string' ? item : item[this.optionLabel];
+  }
+
+  getOptionSubLabel(item: any): any {
+    if (this.group) {
+      return item.subLabel;
+    }
+    if (!this.optionSubLabel) {
+      return item;
+    }
+    return typeof item === 'string' ? item : item[this.optionSubLabel];
+  }
+}