nexheal-lib 0.0.2 → 0.0.3

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

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

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

@@ -0,0 +1,482 @@
+import { CommonModule } from "@angular/common";
+import {
+  Component, Input, Output, EventEmitter, forwardRef, OnInit, OnDestroy, ViewChild,
+  ElementRef, HostListener, SimpleChanges, ChangeDetectorRef
+} from "@angular/core";
+import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl, ReactiveFormsModule } from "@angular/forms";
+import { debounceTime, distinctUntilChanged, Subject, Subscription } from "rxjs";
+import { createPopper, Instance as PopperInstance } from "@popperjs/core";
+import { ClickOutsideDirective } from "../../../directives/clickoutside.directive";
+
+@Component({
+  selector: "multiselect-control",
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    ClickOutsideDirective
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MultiselectControl),
+      multi: true,
+    },
+  ],
+  templateUrl: "./multiselect-control.component.html",
+  styleUrls: ["./multiselect-control.component.scss"],
+})
+export class MultiselectControl
+  implements ControlValueAccessor, OnInit, OnDestroy {
+
+  private subscription: Subscription = new Subscription();
+
+  @Input() title!: string;
+  @Input() selectedItems: any[] = [];
+  @Input() required: boolean = false;
+  @Input() placeholder!: string;
+  @Input() customClass!: string;
+  @Input() clearVal: boolean = true;
+  @Input() deFocus: boolean = true;
+  @Input() optionValueProperty: string = "id";
+  @Input() inputLoader: boolean = false;
+  @Input() error: boolean = false;
+  @Input() errorMessage: string = "";
+  @Input() autocomplete: string = "";
+  @Input() showSearch: boolean = false;
+  @Input() optionDisplayProperty: string = "displayname";
+  @Output() optionsSelected = new EventEmitter<any[]>();
+  @Output() selectionCleared = new EventEmitter<void>();
+  @Output() blurEvent = new EventEmitter<void>();
+
+  inputControl: FormControl = new FormControl({ value: "", disabled: false });
+  private _options: any[] = [];
+  @Input()
+  public set options(arr: any[]) {
+    this._options = Array.isArray(arr) ? arr : [];
+    this.filteredOptions = [...this._options];
+
+    // If we previously received an array of primitive IDs, attempt to map them now that options have arrived
+    if (this._isPrimitivePatch && this._pendingPrimitiveValues.length > 0) {
+      this._mapPrimitivesToObjects();
+    }
+
+    this._recomputeSelectAllState();
+  }
+  public get options(): any[] {
+    return this._options;
+  }
+  private _disabled: boolean = false;
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
+  }
+  set disabled(value: boolean) {
+    this._disabled = value;
+    if (this.inputControl) {
+      if (value) {
+        this.inputControl.disable({ emitEvent: false });
+      } else {
+        this.inputControl.enable({ emitEvent: false });
+      }
+    }
+  }
+  private _isPrimitivePatch: boolean = false;
+  private _pendingPrimitiveValues: any[] = [];
+  private onChange: (value: any) => void = () => { };
+  private onTouched: () => void = () => { };
+
+  @ViewChild("dropdown", { static: false }) dropdown!: ElementRef;
+  @ViewChild("input", { static: false }) input!: ElementRef;
+
+  filteredOptions: any[] = [];
+  isDropdownOpen: boolean = false;
+  selectAllChecked: boolean = false;
+  keySearch: string = "";
+  onSearch = new Subject<string>();
+  selectedItemList: string = "";
+  highlightedIndex: number | null = null;
+
+  private dropdownInitialized = false;
+  private popperInstance!: PopperInstance;
+
+  constructor(
+    private cdRef: ChangeDetectorRef
+  ) { }
+
+  ngOnInit() {
+    // Subscribe to search‐term changes, debounce, then filter
+    this.subscription = this.onSearch
+      .pipe(debounceTime(300), distinctUntilChanged())
+      .subscribe((searchText) => {
+        this._applyFilter(searchText);
+        this._recomputeSelectAllState();
+      });
+
+    // Initialize filteredOptions to match all options
+    this.filteredOptions = [...this.options];
+  }
+
+  ngAfterViewChecked() {
+    if (this.isDropdownOpen && !this.dropdownInitialized) {
+      this._createPopperInstance();
+      this.dropdownInitialized = true;
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes["options"]) {
+      // When the parent replaces “options,” we reapply any filtering and “select all” logic
+      this.filteredOptions = [...this.options];
+      this._recomputeSelectAllState();
+    }
+  }
+
+  writeValue(value: any): void {
+    // If parent gave us something that is not an array, clear selection
+    if (!Array.isArray(value)) {
+      this._isPrimitivePatch = false;
+      this._pendingPrimitiveValues = [];
+      this.selectedItems = [];
+      this.selectedItemList = "";
+      this.selectAllChecked = false;
+      return;
+    }
+
+    // CASE A: array of primitive IDs, e.g. [12,17]
+    if (
+      value.length > 0 &&
+      (typeof value[0] === "string" || typeof value[0] === "number")
+    ) {
+      this._isPrimitivePatch = true;
+      this._pendingPrimitiveValues = [...value];
+      this._mapPrimitivesToObjects();
+      this._recomputeSelectAllState();
+      return;
+    }
+
+    // CASE B: array of full objects (with `id` or whatever `optionValueProperty` is)
+    if (
+      value.length > 0 &&
+      typeof value[0] === "object" &&
+      value[0][this.optionValueProperty] != null
+    ) {
+      // Convert to an array of IDs, then treat exactly like CASE A
+      const idArray = (value as any[]).map(
+        (obj) => obj[this.optionValueProperty]
+      );
+      this._isPrimitivePatch = true;
+      this._pendingPrimitiveValues = idArray;
+      this._mapPrimitivesToObjects();
+      this._recomputeSelectAllState();
+      return;
+    }
+
+    // CASE C: maybe parent passed the exact same object references that already exist in `options`
+    // In that case, we can just use them directly.
+    this._isPrimitivePatch = false;
+    this._pendingPrimitiveValues = [];
+    this.selectedItems = [...value];
+    this.selectedItemList = this.selectedItems
+      .map((item) => item[this.optionDisplayProperty])
+      .join(", ");
+    this.onChange(this.selectedItems);
+    this._recomputeSelectAllState();
+  }
+
+  private _mapPrimitivesToObjects() {
+    if (
+      !this._isPrimitivePatch ||
+      this._pendingPrimitiveValues.length === 0 ||
+      this._options.length === 0
+    ) {
+      return;
+    }
+
+    // Find matching option‐objects whose ID property is in the pending list
+    const matched = this._options.filter((opt) =>
+      this._pendingPrimitiveValues.includes(opt[this.optionValueProperty])
+    );
+
+    this.selectedItems = matched;
+    this.selectedItemList = matched
+      .map((item) => item[this.optionDisplayProperty])
+      .join(", ");
+
+    // Notify “onChange” with the full‐object selection
+    this.onChange(this.selectedItems);
+
+    this._isPrimitivePatch = false;
+    this._pendingPrimitiveValues = [];
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  // events
+  isSelected(option: any): boolean {
+    return (
+      Array.isArray(this.selectedItems) && this.selectedItems.includes(option)
+    );
+  }
+  onBlur(event: FocusEvent) {
+    this.blurEvent.emit();
+    // const target = event.relatedTarget as HTMLElement;
+    // if (
+    //   target &&
+    //   (target.closest(".option-list") || target.closest(".list-filter"))
+    // ) {
+    //   return;
+    // }
+    this.onTouched();
+    // setTimeout(() => {
+    //   this.isDropdownOpen = false;
+    // }, 100);
+  }
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    if (isDisabled) {
+      this.inputControl.disable({ emitEvent: false });
+    } else {
+      this.inputControl.enable({ emitEvent: false });
+    }
+  }
+
+  // search box
+  handleInput(event: Event) {
+    const txt = (event.target as HTMLInputElement).value;
+    this.onSearch.next(txt);
+  }
+  private _applyFilter(value: string) {
+    const lower = value.toLowerCase();
+    this.filteredOptions = this._options
+      .filter((opt) =>
+        opt[this.optionDisplayProperty]?.toLowerCase().includes(lower)
+      )
+      .sort((a, b) => {
+        const aIndex = a[this.optionDisplayProperty]
+          .toLowerCase()
+          .indexOf(lower);
+        const bIndex = b[this.optionDisplayProperty]
+          .toLowerCase()
+          .indexOf(lower);
+        return aIndex - bIndex;
+      });
+
+    // If an item was previously selected but is no longer in filteredOptions, remove it temporarily
+    this.selectedItems = this.selectedItems.filter((item) =>
+      this.filteredOptions.includes(item)
+    );
+    this.selectedItemList = this.selectedItems
+      .map((item) => item[this.optionDisplayProperty])
+      .join(", ");
+
+    this.onChange(this.selectedItems);
+    this.optionsSelected.emit(this.selectedItems);
+    if (this.filteredOptions.length > 0) {
+      this.highlightedIndex = this._options.indexOf(this.filteredOptions[0]);
+    } else {
+      this.highlightedIndex = null;
+    }
+
+    this._recomputeSelectAllState();
+    this.cdRef.detectChanges();
+  }
+
+  // checkbox events
+  private _recomputeSelectAllState() {
+    if (!this.filteredOptions || this.filteredOptions.length === 0) {
+      this.selectAllChecked = false;
+      return;
+    }
+    this.selectAllChecked = this.filteredOptions.every((opt) =>
+      this.selectedItems.includes(opt)
+    );
+  }
+  onSelectAllChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    this.selectAllChecked = input.checked;
+    this._toggleSelectAll();
+  }
+  private _toggleSelectAll() {
+    if (this.selectAllChecked) {
+      // Add all currently filtered options to selection
+      this.selectedItems = Array.from(
+        new Set([...this.selectedItems, ...this.filteredOptions])
+      );
+    } else {
+      // Remove all filtered options from selection
+      this.selectedItems = this.selectedItems.filter(
+        (item) => !this.filteredOptions.includes(item)
+      );
+    }
+
+    this.selectedItemList = this.selectedItems
+      .map((item) => item[this.optionDisplayProperty])
+      .join(", ");
+
+    this.onChange(this.selectedItems);
+    this.optionsSelected.emit(this.selectedItems);
+  }
+  removeSelectedOption(option: any) {
+    this.selectedItems = this.selectedItems.filter((item) => item !== option);
+    this.selectedItemList = this.selectedItems
+      .map((item) => item[this.optionDisplayProperty])
+      .join(", ");
+    this.onChange(this.selectedItems);
+    this.onTouched();
+    this.optionsSelected.emit(this.selectedItems);
+  }
+  toggleCheckbox(option: any) {
+    if (this.isSelected(option)) {
+      this.selectedItems = this.selectedItems.filter((item) => item !== option);
+    } else {
+      this.selectedItems = [...this.selectedItems, option];
+    }
+
+    this.selectedItemList = this.selectedItems
+      .map((item) => item[this.optionDisplayProperty])
+      .join(", ");
+
+    // Update “select all” checkbox
+    this._recomputeSelectAllState();
+
+    // Notify form that selection changed
+    this.onChange(this.selectedItems);
+    this.onTouched();
+    this.optionsSelected.emit(this.selectedItems);
+  }
+
+  // Keyboard navigation inside the dropdown
+  onKeyDown(event: KeyboardEvent) {
+    if (this.isDropdownOpen) {
+      switch (event.key) {
+        case "ArrowDown":
+          this._highlightNext();
+          event.preventDefault();
+          break;
+        case "ArrowUp":
+          this._highlightPrevious();
+          event.preventDefault();
+          break;
+        case "Enter":
+          if (
+            this.highlightedIndex !== null &&
+            this.highlightedIndex < this.filteredOptions.length
+          ) {
+            this.toggleCheckbox(this.filteredOptions[this.highlightedIndex]);
+          }
+          event.preventDefault();
+          break;
+        case "Escape":
+          this.isDropdownOpen = false;
+          break;
+        case "Tab":
+          this.isDropdownOpen = false;
+          break;
+      }
+    } else if (event.key === " ") {
+      this.toggleDropdown();
+      event.preventDefault();
+    }
+  }
+  @HostListener("window:keydown", ["$event"])
+  handleWindowKeydown(event: KeyboardEvent) {
+    if (event.key === "Tab") {
+      this.isDropdownOpen = false;
+    }
+  }
+  private _highlightNext() {
+    if (
+      this.highlightedIndex === null ||
+      this.highlightedIndex === this.filteredOptions.length - 1
+    ) {
+      this.highlightedIndex = 0;
+    } else {
+      this.highlightedIndex!++;
+    }
+    this._scrollToHighlighted();
+  }
+  private _highlightPrevious() {
+    if (this.highlightedIndex === null || this.highlightedIndex === 0) {
+      this.highlightedIndex = this.filteredOptions.length - 1;
+    } else {
+      this.highlightedIndex!--;
+    }
+    this._scrollToHighlighted();
+  }
+  private _scrollToHighlighted() {
+    setTimeout(() => {
+      const container = document.querySelector(".option-list");
+      if (!container) return;
+      const highlighted = container.querySelector(".highlighted");
+      if (highlighted) {
+        (highlighted as HTMLElement).scrollIntoView({ block: "nearest" });
+      }
+    }, 0);
+  }
+
+  // popper
+  private _createPopperInstance() {
+    if (!this.dropdown || !this.input) return;
+    this.popperInstance = createPopper(
+      this.input.nativeElement,
+      this.dropdown.nativeElement,
+      {
+        placement: "bottom-start",
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 1],
+            },
+          },
+          {
+            name: "flip",
+            options: {
+              fallbackPlacements: ["top-start", "bottom-start"],
+            },
+          },
+        ],
+      }
+    );
+  }
+
+  // toggle, reset, close and clear
+  toggleDropdown() {
+    if (this.inputControl.disabled) return;
+    this.isDropdownOpen = !this.isDropdownOpen;
+    this.dropdownInitialized = false;
+    if (this.isDropdownOpen) {
+      this.filteredOptions = [...this.options];
+      this.highlightedIndex = null;
+    }
+  }
+  selectListOutsideClick() {
+    this.isDropdownOpen = false;
+  }
+  resetSelection() {
+    this.selectedItems = [];
+    this.selectedItemList = "";
+    this.onChange([]);
+    this.onTouched();
+    this.isDropdownOpen = false;
+    this.selectAllChecked = false;
+    this.selectionCleared.emit();
+  }
+  onCloseDropdown(): void {
+    this.isDropdownOpen = false;
+    this._recomputeSelectAllState();
+  }
+}

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

@@ -0,0 +1,53 @@
+<div class="form-group select" [ngClass]="customClass" (clickOutside)="selectListOutsideClick($event)">
+  @if (title) {
+  <label class="inp-label" [ngClass]="{ 'required': required }">{{ title }}</label>
+  }
+
+  <input #input type="text" class="form-control" [placeholder]="placeholder ? placeholder : ''"
+    [formControl]="inputControl" [ngClass]="{ 'is-invalid': error }" (blur)="onBlur()" (click)="toggleDropdown()"
+    (keydown)="onKeyDown($event)" readonly [attr.autocomplete]="autocomplete || null" />
+
+  @if (deFocus) {
+  <span class="focus-border"></span>
+  }
+
+  @if (!inputLoader && isDropdownOpen && selectedItem && clearVal) {
+  <label class="clear" (click)="resetSelection()">
+    <i class="he he-close"></i>
+  </label> }
+  @if (!inputLoader) {
+  <label class="arrow">
+    <i class="he he-chevron-down"></i>
+  </label>
+  }
+
+  @if (isDropdownOpen) {
+  <div #dropdown class="option-list">
+    <div class="no-results" *ngIf="filteredOptions.length === 0">
+      <div>No results found</div>
+      <div *ngIf="isAddNewItem" (click)="onAddNewItemClick()" class="btn-new">Add New Item</div>
+    </div>
+
+    @for (option of filteredOptions; track option[optionDisplayProperty]; let idx = $index) {
+    <div class="list-item" [ngClass]="{
+              'active': option === selectedItem,
+              'highlighted': idx === highlightedIndex
+            }" (click)="selectOption(option)">
+      @if (option.countryCode) {
+      <img src="https://flagcdn.com/w80/{{ option.countryCode }}.png" width="20" alt="{{ option.countryCode }} flag" loading="lazy" />
+      }
+      {{ option[optionDisplayProperty] }}
+    </div>
+    }
+
+  </div>
+  }
+
+  @if (inputLoader) {
+  <label class="loader input-loader"></label>
+  }
+
+  @if (error) {
+  <div class="val-msg">{{ errorMessage }}</div>
+  }
+</div>

package/projects/nexheal-lib/src/lib/controls/select-control/select-control.component.scss

@@ -0,0 +1,19 @@
+.form-group {
+    &.select {
+        .option-list {
+            .no-results {
+                padding: 10px;
+                color: #9b9b9b;
+                text-align: center;
+                .btn-new {
+                    padding: 5px 0;
+                    cursor: pointer;
+                    color: #0d6efd;
+                }
+            }
+        }
+        .clear {
+            right: 30px;
+        }
+    }
+}

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

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