nexheal-lib 0.0.3 → 0.0.4

package/angular.json

@@ -1,36 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "nexheal-lib": {
-      "projectType": "library",
-      "root": "projects/nexheal-lib",
-      "sourceRoot": "projects/nexheal-lib/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular/build:ng-packagr",
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/nexheal-lib/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "projects/nexheal-lib/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular/build:karma",
-          "options": {
-            "tsConfig": "projects/nexheal-lib/tsconfig.spec.json"
-          }
-        }
-      }
-    }
-  },
-  "cli": {
-    "analytics": "fb79a96b-c8e6-48b5-b3da-6b972d806f12"
-  }
-}

package/projects/nexheal-lib/README.md

@@ -1,63 +0,0 @@
-# NexhealLib
-
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.0.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the library, run:
-
-```bash
-ng build nexheal-lib
-```
-
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
-
-### Publishing the Library
-
-Once the project is built, you can publish your library by following these steps:
-
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/nexheal-lib
-   ```
-
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/projects/nexheal-lib/ng-package.json

@@ -1,9 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/nexheal-lib",
-  "lib": {
-    "entryFile": "src/public-api.ts",
-    "styleIncludePaths": ["src/styles"]
-  },
-  "assets": ["src/styles"]
-}

package/projects/nexheal-lib/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "nexheal-lib",
-  "version": "0.0.3",
-  "peerDependencies": {
-    "@angular/common": "^20.1.0",
-    "@angular/core": "^20.1.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false
-}

package/projects/nexheal-lib/src/directives/clickoutside.directive.ts

@@ -1,34 +0,0 @@
-import {
-    Directive,
-    ElementRef,
-    EventEmitter,
-    Output,
-    inject,
-    DestroyRef,
-} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { fromEvent } from 'rxjs';
-
-@Directive({
-    selector: '[clickOutside]',
-    standalone: true,
-})
-export class ClickOutsideDirective {
-    @Output() clickOutside = new EventEmitter<MouseEvent>();
-
-    private host = inject(ElementRef);
-    private document = inject(DOCUMENT);
-    private destroyRef = inject(DestroyRef);
-
-    constructor() {
-        fromEvent<MouseEvent>(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event: MouseEvent) => {
-                const clickedInside = this.host.nativeElement.contains(event.target);
-                if (!clickedInside) {
-                    this.clickOutside.emit(event);
-                }
-            });
-    }
-}

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

@@ -1,52 +0,0 @@
-<div class="form-group auto-complete" [ngClass]="customClass">
-  @if (title) {
-  <label class="inp-label" [ngClass]="{ 'required': required }">{{ title }}</label>
-  }
-
-  <input #inputElement type="text" class="form-control" [placeholder]="placeholder" [formControl]="inputControl"
-    (blur)="onBlur()" (keydown)="onKeyDown($event)" (focus)="onFocus()" [ngClass]="{'is-invalid': error}"
-    [attr.autocomplete]="autocomplete || null" />
-
-  <span class="focus-border"></span>
-
-  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {
-  <label class="clear" (click)="resetInput()">
-    <i class="he he-close"></i>
-  </label>
-  }
-  @if (isDropdownOpen) {
-  <div #dropdownElement class="option-list">
-    @if (filteredSuggestions.length === 0) {
-    <div class="no-results">
-      <div>No results found</div>
-      @if (isAddNewItem) {
-      <div (click)="onAddNewItemClick()" class="btn-new">
-        Add New Item
-      </div>
-      }
-    </div>
-    } @else {
-    @for (suggestion of filteredSuggestions; track suggestion[optionDisplayProperty]; let i = $index) {
-    <div class="list-item" [ngClass]="{
-                'active': suggestion === selectedItems,
-                'highlighted': highlightedIndex === i
-              }" (mousedown)="onOptionMouseDown()" (click)="selectSuggestion(suggestion)" (mouseover)="onMouseOver(i)">
-      @if (suggestion.countryCode) {
-      <img src="https://flagcdn.com/w80/{{ suggestion.countryCode }}.png" width="20"
-        alt="{{ suggestion.countryCode }} flag" loading="lazy" />
-      }
-      {{ suggestion[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/autocomplete-control/autocomplete-control.component.scss

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

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

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

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

@@ -1,367 +0,0 @@
-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);
-  }
-}