nexheal-lib 0.0.2 → 0.0.3

package/projects/nexheal-lib/src/lib/controls/autocomplete-control/autocomplete-control.component.ts

@@ -0,0 +1,367 @@
+import { CommonModule } from "@angular/common";
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+  ElementRef,
+  AfterViewInit,
+} from "@angular/core";
+import {
+  ControlValueAccessor,
+  FormControl,
+  ReactiveFormsModule,
+  NG_VALUE_ACCESSOR,
+  NG_VALIDATORS,
+} from "@angular/forms";
+import { debounceTime, distinctUntilChanged, Subscription } from "rxjs";
+import { createPopper, Instance as PopperInstance } from "@popperjs/core";
+
+@Component({
+  selector: "autocomplete-control",
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  templateUrl: "./autocomplete-control.component.html",
+  styleUrls: ["./autocomplete-control.component.scss"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: AutocompleteControl,
+      multi: true,
+    },
+  ],
+})
+export class AutocompleteControl
+  implements ControlValueAccessor, OnInit, OnDestroy, AfterViewInit {
+
+  private subscription: Subscription = new Subscription();
+
+  @Input() title!: string;
+  @Input() required: boolean = false;
+  @Input() placeholder: string = "";
+  @Input() customClass!: string;
+  @Input() clearVal: boolean = true;
+  @Input() field: string = "";
+  @Input() error: boolean = false;
+  @Input() errorMessage: string = "";
+  @Input() autocomplete: string = "";
+  @Input() inputLoader: boolean = false;
+  @Input() isAddNewItem: boolean = false;
+  @Input() optionDisplayProperty: string = "displayname";
+  @Output() optionSelected = new EventEmitter<any>();
+  @Output() search = new EventEmitter<string>();
+  @Output() selectionCleared = new EventEmitter<void>();
+  @Output() addNewItemClicked: EventEmitter<void> = new EventEmitter<void>();
+  @Output() blurEvent = new EventEmitter<void>();
+  @Output() optionPatched = new EventEmitter<any>();
+
+  private _disabled: boolean = false;
+  private _options: any[] = [];
+  @Input() set options(value: any[]) {
+    this._options = value || [];
+    this.processValueBuffer();
+  }
+  get options(): any[] {
+    return this._options;
+  }
+  @Input() get disabled(): boolean {
+    return this._disabled;
+  }
+  set disabled(value: boolean) {
+    this._disabled = value;
+    if (this.inputControl) {
+      if (value) {
+        this.inputControl.disable();
+      } else {
+        this.inputControl.enable();
+      }
+    }
+  }
+  private valueBuffer: any = null;
+  private popperInstance!: PopperInstance;
+  private preventDropdownReopen: boolean = false;
+  private preventClearOnBlur: boolean = false;
+  private onChange: any = () => { };
+  private onTouched: any = () => { };
+
+  @ViewChild("inputElement") inputElement!: ElementRef;
+  @ViewChild("dropdownElement") dropdownElement!: ElementRef;
+
+  inputControl = new FormControl("");
+  isDropdownOpen: boolean = false;
+  hasFocus: boolean = false;
+  selectedItems: any;
+  filteredSuggestions: any[] = [];
+  highlightedIndex: number | null = null;
+
+  constructor() {
+    this.inputControl.valueChanges
+      .pipe(debounceTime(10), distinctUntilChanged())
+      .subscribe((value) => {
+        if (this.preventDropdownReopen) {
+          this.preventDropdownReopen = false;
+          return;
+        }
+        if (value && value.trim().length > 0) {
+          const filterValue = value;
+          this.filterSuggestions(filterValue);
+          this.search.emit(filterValue);
+        } else {
+          this.isDropdownOpen = false;
+        }
+      });
+  }
+
+  ngOnInit() {
+    this.inputControl.markAsPristine();
+  }
+
+  ngAfterViewInit() {
+    this.createPopperInstance();
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+    }
+  }
+
+  writeValue(value: any): void {
+    this.preventDropdownReopen = true;
+    if (value == null) {
+      // Clear everything if we get null
+      this.valueBuffer = null;
+      this.selectedItems = null;
+      this.preventDropdownReopen = true;
+      this.inputControl.setValue("", { emitEvent: false });
+    } else {
+      // Otherwise, treat as normal
+      this.valueBuffer = value;
+      this.processValueBuffer();
+    }
+  }
+  private processValueBuffer() {
+    if (this.valueBuffer == null) {
+      this.selectedItems = null;
+      this.preventDropdownReopen = true;
+      // this.inputControl.setValue("", { emitEvent: false });
+      return;
+    }
+    if (this._options && this._options.length > 0) {
+      const matchedSuggestion = this._options.find(
+        (s) => s.id === this.valueBuffer
+      );
+      if (matchedSuggestion) {
+        this.preventDropdownReopen = true;
+        this.inputControl.setValue(
+          matchedSuggestion[this.optionDisplayProperty],
+          { emitEvent: false }
+        );
+        this.selectedItems = matchedSuggestion;
+        this.onChange(matchedSuggestion.id);
+        this.optionPatched.emit(matchedSuggestion);
+        this.valueBuffer = null;
+        return;
+      }
+    }
+    this.inputControl.setValue("", { emitEvent: false });
+    this.selectedItems = null;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    if (isDisabled) {
+      this.inputControl.disable();
+    } else {
+      this.inputControl.enable();
+    }
+  }
+
+  filterSuggestions(value: string) {
+    if (this.preventDropdownReopen || !this.hasFocus) {
+      this.preventDropdownReopen = false;
+      return;
+    }
+    if (value === "") {
+      this.filteredSuggestions = [];
+      this.isDropdownOpen = false;
+      return;
+    }
+    const filterValue = value.toString().toLowerCase();
+    this.filteredSuggestions = this.options.filter((suggestion) =>
+      suggestion[this.optionDisplayProperty]
+        ?.toLowerCase()
+        .includes(filterValue)
+    );
+    this.highlightedIndex = this.filteredSuggestions.length > 0 ? 0 : null;
+    this.isDropdownOpen = true;
+    setTimeout(() => {
+      this.createPopperInstance();
+    }, 0);
+  }
+  selectSuggestion(suggestion: any) {
+    this.preventDropdownReopen = true;
+    this.inputControl.setValue(suggestion[this.optionDisplayProperty], {
+      emitEvent: false,
+    });
+    this.onChange(suggestion.id);
+    this.inputControl.markAsTouched();
+    this.inputControl.updateValueAndValidity(); // Trigger validation update
+    this.isDropdownOpen = false;
+    if (this.selectedItems?.id !== suggestion.id) {
+      this.selectedItems = suggestion;
+      this.optionSelected.emit(suggestion);
+    }
+  }
+
+  // events
+  onFocus() {
+    this.hasFocus = true;
+  }
+  onBlur() {
+    this.blurEvent.emit();
+    this.onTouched();
+    // Delay onBlur handling so that mousedown and click can occur first.
+    setTimeout(() => {
+      this.hasFocus = false;
+      this.isDropdownOpen = false;
+
+      // If an option click is in progress, do not clear the input.
+      if (!this.preventClearOnBlur) {
+        // Optionally: check if the current value is valid against options.
+        // If not found, clear the input.
+        const currentValue = this.inputControl.value;
+        const found = this._options.find(
+          (opt) =>
+            String(opt[this.optionDisplayProperty]).toLowerCase() ===
+            String(currentValue).toLowerCase()
+        );
+        if (!found) {
+          this.inputControl.setValue("");
+          this.selectedItems = null;
+          this.onChange(null);
+        }
+      }
+
+      // Reset the flag after handling blur.
+      this.preventClearOnBlur = false;
+    }, 300);
+  }
+  onKeyDown(event: KeyboardEvent) {
+    if (!this.isDropdownOpen) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowDown":
+        this.highlightedIndex =
+          this.highlightedIndex === null ||
+            this.highlightedIndex === this.filteredSuggestions.length - 1
+            ? 0
+            : this.highlightedIndex + 1;
+        event.preventDefault();
+        this.scrollHighlightedItemIntoView();
+        break;
+      case "ArrowUp":
+        this.highlightedIndex =
+          this.highlightedIndex === null || this.highlightedIndex === 0
+            ? this.filteredSuggestions.length - 1
+            : this.highlightedIndex - 1;
+        event.preventDefault();
+        this.scrollHighlightedItemIntoView();
+        break;
+      case "Enter":
+        if (
+          this.highlightedIndex !== null &&
+          this.filteredSuggestions.length > 0
+        ) {
+          this.selectSuggestion(
+            this.filteredSuggestions[this.highlightedIndex]
+          );
+        } else {
+          this.isDropdownOpen = false;
+        }
+        event.preventDefault();
+        break;
+      case "Escape":
+        this.isDropdownOpen = false;
+        break;
+      default:
+        break;
+    }
+  }
+  onOptionMouseDown(): void {
+    this.preventClearOnBlur = true;
+  }
+  onMouseOver(index: number) {
+    this.highlightedIndex = index;
+  }
+
+  // actions
+  onAddNewItemClick(): void {
+    this.addNewItemClicked.emit();
+  }
+
+  // popper
+  private createPopperInstance() {
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+    }
+    if (this.inputElement && this.dropdownElement) {
+      this.popperInstance = createPopper(
+        this.inputElement.nativeElement,
+        this.dropdownElement.nativeElement,
+        {
+          placement: "bottom-start",
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, 1],
+              },
+            },
+            {
+              name: "flip",
+              options: {
+                fallbackPlacements: ["top-start", "bottom-start"],
+              },
+            },
+          ],
+        }
+      );
+    }
+  }
+  private scrollHighlightedItemIntoView() {
+    if (this.highlightedIndex !== null) {
+      const highlightedItem =
+        this.dropdownElement.nativeElement.querySelectorAll(".list-item")[
+        this.highlightedIndex
+        ];
+      if (highlightedItem) {
+        highlightedItem.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }
+
+  // clear
+  resetInput() {
+    this.inputControl.setValue("");
+    this.selectionCleared.emit();
+    this.selectedItems = null;
+    this.valueBuffer = null;
+  }
+  removeItem(item: any) {
+    this.selectedItems = this.selectedItems.filter((i: any) => i !== item);
+    this.onChange(this.selectedItems);
+    this.optionSelected.emit(this.selectedItems);
+  }
+}

package/projects/nexheal-lib/src/lib/controls/calendar-control/calendar-control.component.html

@@ -0,0 +1,152 @@
+<div class="form-group calendar" [ngClass]="customClass">
+  <label class="inp-label" [ngClass]="{'required' : required}" *ngIf="title">{{ title }}</label>
+  <div class="form-group calendar" #root  (click)="openCalendar()" >
+    <input type="text" #inputEl [placeholder]="(inputPlaceholder && placeholder) ? placeholder : ''"
+      [formControl]="inputControl" class="form-control" [ngClass]="{ 'is-invalid': error }" (blur)="onBlur()"
+      (focus)="onFocus()"  (click)="openCalendar(); $event.stopPropagation()" (keydown)="onInputKeydown($event)" />
+
+    <span class="focus-border" *ngIf="deFocus"></span>
+    <span class="calendar-icon">
+      <i class="he" [ngClass]="!timeOnly ? 'he-calendar-blank' : 'he-clock'"></i>
+    </span>
+    <label class="clear" *ngIf="!inputLoader && (selectedDate && !disabled) && clearVal" (click)="clearDate($event)">
+      <i class="he he-close"></i>
+    </label>
+    <label *ngIf="inputLoader" class="loader input-loader"></label>
+    <div *ngIf="error" class="val-msg">{{ errorMessage }}</div>
+
+    <div class="datepicker-group" #datePicker *ngIf="isOpen" (click)="$event.stopPropagation()">
+      
+      <!-- time picker -->
+      <ng-container *ngIf="timeOnly">
+        <div class="time-picker">
+          <div class="time-select">
+            <button (click)="incrementHour()"><i class="he he-chevron-up"></i></button>
+            <ng-container *ngIf="hourFormat === '12'; else show24">
+              <div class="time-value">
+                {{ ((selectedHour % 12) || 12) | number:'2.0' }}
+              </div>
+            </ng-container>
+            <ng-template #show24>
+              <div class="time-value">
+                {{ selectedHour | number:'2.0' }}
+              </div>
+            </ng-template>
+
+            <button (click)="decrementHour()"><i class="he he-chevron-down"></i></button>
+          </div>
+          <span class="time-separator">:</span>
+          <div class="time-select">
+            <button (click)="incrementMinute()"><i class="he he-chevron-up"></i></button>
+            <div class="time-value">{{ selectedMinute | number:'2.0' }}</div>
+            <button (click)="decrementMinute()"><i class="he he-chevron-down"></i></button>
+          </div>
+          <div class="ampm-toggle" *ngIf="hourFormat === '12'">
+            <button type="button" [class.active]="meridian === 'AM'" (click)="setMeridian('AM')">AM</button>
+            <button type="button" [class.active]="meridian === 'PM'" (click)="setMeridian('PM')">PM</button>
+          </div>
+        </div>
+      </ng-container>
+
+      <!-- day view -->
+      <ng-container *ngIf="!timeOnly && currentView === 'day'">
+        <div class="header">
+          <button class="calendar-arrow" (click)="prevMonth()"><i class="he he-chevron-left"></i></button>
+          <div class="title" (click)="goToMonthView()">
+            <div>{{ displayMonthName }}</div>
+            <div>{{ displayYear }}</div>
+          </div>
+          <button class="calendar-arrow" (click)="nextMonth()"><i class="he he-chevron-right"></i></button>
+        </div>
+        <div class="week-header">
+          <div>Sun</div>
+          <div>Mon</div>
+          <div>Tue</div>
+          <div>Wed</div>
+          <div>Thu</div>
+          <div>Fri</div>
+          <div>Sat</div>
+        </div>
+        <div class="days-grid">
+          <div class="day-cell" *ngFor="let day of daysInMonth" (click)="selectDay(day)"
+            [class.disabled]="day !== null && dayClassMap[day].disabled"
+            [class.selected]="day !== null && dayClassMap[day].selected" [class.today]="
+                      day !== null &&
+                      displayYear === todayYear   &&
+                      displayMonth === todayMonth &&
+                      day === todayDate
+                    ">
+            {{day ? day : ''}}
+          </div>
+        </div>
+        <ng-container *ngIf="showTime">
+          <div class="time-picker">
+            <div class="time-select">
+              <button type="button" (click)="incrementHour()">
+                <i class="he he-chevron-up"></i>
+              </button>
+              <ng-container *ngIf="hourFormat === '12'; else show24">
+                <div class="time-value">
+                  {{
+                  selectedHour % 12 === 0
+                  ? 12
+                  : selectedHour % 12
+                  | number:'2.0' }}
+                </div>
+              </ng-container>
+              <ng-template #show24>
+                <div class="time-value">{{ selectedHour | number:'2.0' }}</div>
+              </ng-template>
+              <button type="button" (click)="decrementHour()">
+                <i class="he he-chevron-down"></i>
+              </button>
+            </div>
+            <span class="time-separator">:</span>
+            <div class="time-select">
+              <button type="button" (click)="incrementMinute()">
+                <i class="he he-chevron-up"></i>
+              </button>
+              <div class="time-value">
+                {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>
+                  <button type="button" (click)="decrementMinute()">
+                    <i class="he he-chevron-down"></i>
+                  </button>
+              </div>
+              <div class="ampm-toggle" *ngIf="hourFormat === '12'">
+                <button type="button" [class.active]="meridian === 'AM'" (click)="setMeridian('AM')">AM</button>
+                <button type="button" [class.active]="meridian === 'PM'" (click)="setMeridian('PM')">PM</button>
+              </div>
+            </div>
+        </ng-container>
+      </ng-container>
+
+      <!-- month view -->
+      <ng-container *ngIf="!timeOnly && currentView === 'month'">
+        <div class="header">
+          <button class="calendar-arrow" (click)="displayYear = displayYear - 1"><i
+              class="he he-chevron-left"></i></button>
+          <div class="title" (click)="goToYearRangeView()">{{ displayYear }}</div>
+          <button class="calendar-arrow" (click)="displayYear = displayYear + 1"><i
+              class="he he-chevron-right"></i></button>
+        </div>
+        <div class="month-grid">
+          <div class="month-cell" *ngFor="let m of months; index as i" (click)="selectMonth(i)">{{ m }}
+          </div>
+        </div>
+      </ng-container>
+
+      <!-- year range view -->
+      <ng-container *ngIf="!timeOnly && currentView === 'yearRange'">
+        <div class="header">
+          <button class="calendar-arrow" (click)="prevYearRange()"><i class="he he-chevron-left"></i></button>
+          <div class="title">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>
+          <button class="calendar-arrow" (click)="nextYearRange()"><i class="he he-chevron-right"></i></button>
+        </div>
+        <div class="year-grid">
+          <div class="year-cell" *ngFor="let y of yearRange" (click)="selectYear(y)">{{ y }}</div>
+        </div>
+      </ng-container>
+
+    </div>
+  </div>
+</div>