nexheal-lib 0.0.2 → 0.0.3

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

@@ -0,0 +1,375 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input, Output, EventEmitter, forwardRef, OnInit, OnDestroy, ElementRef, ViewChild, SimpleChanges } from "@angular/core";
+import { NG_VALUE_ACCESSOR, ControlValueAccessor, ReactiveFormsModule, FormControl } 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: "select-control",
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    ClickOutsideDirective
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SelectControl),
+      multi: true,
+    },
+  ],
+  templateUrl: "./select-control.component.html",
+  styleUrls: ["./select-control.component.scss"],
+})
+export class SelectControl implements ControlValueAccessor, OnInit, OnDestroy {
+
+  private subscription: Subscription = new Subscription();
+
+  @Input() optionDisplayProperty: string = "displayname";
+  @Input() required: boolean = false;
+  @Input() placeholder!: string;
+  @Input() customClass!: string;
+  @Input() clearVal: boolean = true;
+  @Input() deFocus: boolean = true;
+  @Input() error: boolean = false;
+  @Input() errorMessage: string = "";
+  @Input() autocomplete: string = "";
+  @Input() inputLoader: boolean = false;
+  @Input() isAddNewItem: boolean = false;
+  @Output() optionSelected = new EventEmitter<any>();
+  @Output() selectionCleared = new EventEmitter<void>();
+  @Output() addNewItemClicked: EventEmitter<void> = new EventEmitter<void>();
+  @Output() blurEvent = new EventEmitter<void>();
+  @Output() optionPatched = new EventEmitter<any>();
+
+  @Input() title!: string;
+  private _options: any[] = [];
+  @Input()
+  set options(opts: any[]) {
+    this._options = opts;
+    this.filteredOptions = [...this._options];
+    this.highlightSelectedItem();
+    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({ emitEvent: false });
+      } else {
+        this.inputControl.enable({ emitEvent: false });
+      }
+    }
+  }
+
+  @ViewChild("dropdown", { static: false }) dropdown!: ElementRef;
+  @ViewChild("input", { static: false }) input!: ElementRef;
+
+  filteredOptions: any[] = [];
+  keySearch: string = "";
+  selectedItem: any = null;
+  onSearch = new Subject<string>();
+  inputControl: FormControl = new FormControl({ value: "", disabled: false });
+  isDropdownOpen = false;
+  highlightedIndex: number | null = null;
+
+  private onChange: (value: any) => void = () => { };
+  private onTouched: () => void = () => { };
+  private valueBuffer: any = null;
+  private _disabled: boolean = false;
+  private dropdownInitialized = false;
+
+  private popperInstance!: PopperInstance;
+
+  ngOnInit() {
+    this.subscription = this.onSearch
+      .pipe(debounceTime(300), distinctUntilChanged())
+      .subscribe((searchText) => {
+        this.focusOption(searchText);
+        this.keySearch = "";
+      });
+
+    this.filteredOptions = this._options;
+
+    // Sync the input control value with the selected item
+    this.inputControl.valueChanges.subscribe((value) => {
+      this.onChange(value);
+    });
+  }
+
+  ngAfterViewChecked() {
+    if (this.isDropdownOpen && !this.dropdownInitialized) {
+      this.createPopperInstance();
+      this.dropdownInitialized = true;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes["options"]) {
+      this.filteredOptions = [...this._options];
+      this.highlightSelectedItem();
+    }
+    if (changes["disabled"]) {
+      this.disabled = changes["disabled"].currentValue;
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+  writeValue(value: any): void {
+    if (this.inputControl.disabled !== this.disabled) {
+      this.setDisabledState(this.disabled);
+    }
+    this.valueBuffer = value;
+    this.processValueBuffer();
+  }
+
+  processValueBuffer(): void {
+    if (
+      this.valueBuffer !== null &&
+      this._options &&
+      this._options.length > 0
+    ) {
+      // Try to match selected item by ID
+      const matchedItem = this._options.find(
+        (option) => option.id === this.valueBuffer
+      );
+
+      if (matchedItem) {
+        this.selectedItem = matchedItem;
+        const displayValue = matchedItem[this.optionDisplayProperty];
+        this.inputControl.setValue(displayValue, { emitEvent: false });
+        this.filteredOptions = [...this._options];
+        this.onTouched();
+        this.inputControl.markAsDirty();
+        this.optionPatched.emit(this.selectedItem);
+      } else {
+        // If not found, don't clear the field automatically
+        // You may choose to keep it or clear it. Here we clear it.
+        this.selectedItem = null;
+        this.inputControl.setValue("", { emitEvent: false });
+        this.highlightedIndex = null;
+      }
+    } else if (this.valueBuffer === null) {
+      this.selectedItem = null;
+      this.inputControl.setValue("", { emitEvent: false });
+      this.highlightedIndex = null;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  // events
+  onBlur() {
+    this.blurEvent.emit();
+    this.onTouched();
+    setTimeout(() => {
+      this.isDropdownOpen = false;
+    }, 300);
+  }
+  onKeyDown(event: KeyboardEvent) {
+    const isAlphabetOrNumberKey = /^[a-zA-Z0-9]$/.test(event.key);
+    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.selectOption(this.filteredOptions[this.highlightedIndex]);
+          }
+          event.preventDefault();
+          break;
+        case "Escape":
+          this.isDropdownOpen = false;
+          break;
+        default:
+          if (isAlphabetOrNumberKey) {
+            this.keySearch += event.key.toString();
+            if (this.keySearch !== "") {
+              this.onSearch.next(this.keySearch);
+            }
+          }
+          break;
+      }
+    } else if (event.key === " ") {
+      this.toggleDropdown();
+      event.preventDefault();
+    }
+  }
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    if (this.disabled) {
+      this.inputControl.disable({ emitEvent: false });
+    } else {
+      this.inputControl.enable({ emitEvent: false });
+    }
+  }
+  selectOption(option: any) {
+    if (this.selectedItem !== option) {
+      this.selectedItem = option;
+      this.isDropdownOpen = false;
+      const displayValue = this.selectedItem[this.optionDisplayProperty];
+      this.inputControl.setValue(displayValue, { emitEvent: false });
+      this.onChange(this.selectedItem.id);
+      this.onTouched();
+      this.inputControl.markAsDirty();
+      this.optionSelected.emit(this.selectedItem);
+    }
+  }
+
+  // highlight
+  highlightSelectedItem() {
+    const selectedIndex = this.filteredOptions.findIndex(
+      (option) => option === this.selectedItem
+    );
+    if (selectedIndex !== -1) {
+      this.highlightedIndex = selectedIndex;
+      this.scrollToHighlighted();
+    } else {
+      this.highlightedIndex = null;
+    }
+  }
+  highlightNext() {
+    if (
+      this.highlightedIndex === null ||
+      this.highlightedIndex === this.filteredOptions.length - 1
+    ) {
+      this.highlightedIndex = 0;
+    } else {
+      this.highlightedIndex++;
+    }
+    this.scrollToHighlighted();
+  }
+  highlightPrevious() {
+    if (this.highlightedIndex === null || this.highlightedIndex === 0) {
+      this.highlightedIndex = this.filteredOptions.length - 1;
+    } else {
+      this.highlightedIndex--;
+    }
+    this.scrollToHighlighted();
+  }
+  focusOption(value: string) {
+    const filterValue = value.toLowerCase();
+    let foundIndex = this._options.findIndex(
+      (option) =>
+        option[this.optionDisplayProperty]?.toLowerCase() === filterValue
+    );
+    if (foundIndex === -1) {
+      foundIndex = this._options.findIndex((option) =>
+        option[this.optionDisplayProperty]
+          ?.toLowerCase()
+          .startsWith(filterValue)
+      );
+    }
+    if (foundIndex === -1) {
+      foundIndex = this._options.findIndex((option) =>
+        option[this.optionDisplayProperty]?.toLowerCase().includes(filterValue)
+      );
+    }
+
+    if (foundIndex !== -1) {
+      this.highlightedIndex = foundIndex;
+      this.scrollToHighlighted();
+    } else {
+      this.highlightedIndex = null;
+    }
+  }
+  scrollToHighlighted() {
+    setTimeout(() => {
+      const container = document.querySelector(".option-list");
+      if (container) {
+        const highlighted = container.querySelector(".highlighted");
+        if (highlighted) {
+          highlighted.scrollIntoView({ block: "nearest" });
+        }
+      }
+    }, 0);
+  }
+
+  // actions
+  onAddNewItemClick(): void {
+    this.addNewItemClicked.emit();
+  }
+
+  // popper
+  createPopperInstance() {
+    if (this.dropdown) {
+      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, open, hide, reset and clear
+  toggleDropdown() {
+    if (!this.inputControl.disabled) {
+      this.isDropdownOpen = !this.isDropdownOpen;
+      this.dropdownInitialized = false;
+      if (this.isDropdownOpen && this.selectedItem) {
+        this.highlightSelectedItem();
+      }
+    }
+  }
+  openDropdown(event: KeyboardEvent) {
+    if (event.ctrlKey && event.key === "Enter") {
+      this.toggleDropdown();
+    }
+  }
+  selectListOutsideClick(e: Event) {
+    this.isDropdownOpen = false;
+  }
+  hideDropdown() {
+    setTimeout(() => {
+      this.isDropdownOpen = false;
+    }, 200);
+  }
+  resetSelection() {
+    this.selectionCleared.emit();
+    this.selectedItem = null;
+    this.inputControl.setValue("", { emitEvent: false });
+    this.onChange(null);
+    this.onTouched();
+    this.valueBuffer = null;
+    this.isDropdownOpen = false;
+  }
+}

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

@@ -0,0 +1,4 @@
+<label class="switch-container" [ngClass]="customClass" #switchContainer>
+    <input type="checkbox" [formControl]="switchControl"  (focus)="onFocus()" (blur)="onBlur()">
+    <span class="switch-slider"></span>
+</label>

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

@@ -0,0 +1,53 @@
+.switch-container {
+    top: 4px;
+    width: 32px;
+    height: 14px;
+    position: relative;
+    display: inline-block;
+    .switch-slider {
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        cursor: pointer;
+        transition: 0.4s;
+        position: absolute;
+        border-radius: 34px;
+        background-color: #cccccc;
+        &:before {
+            left: 0px;
+            content: "";
+            width: 18px;
+            bottom: -2px;
+            height: 18px;
+            transition: 0.4s;
+            position: absolute;
+            border-radius: 50%;
+            border: 1px solid #cccccc;
+            background-color: #ffffff;
+        }
+    }
+    input {
+        width: 0;
+        height: 0;
+        opacity: 0;
+        &:checked + .switch-slider {
+            background-color: #12ceb7;
+            &:before {
+                transform: translateX(14px);
+                border: 1px solid #12ceb7;
+            }
+        }
+        &:focus + .switch-slider {
+            box-shadow: 0 0 1px #12ceb7;
+        }
+    }
+    &.square {
+        .switch-slider {
+            border-radius: 0;
+            &:before {
+                border-radius: 0;
+            }
+        }
+    }
+}

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

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

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

@@ -0,0 +1,93 @@
+import { Component, Input, Output, EventEmitter, forwardRef, Renderer2, ElementRef, ViewChild } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor, ReactiveFormsModule, FormControl } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'switch-control',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SwitchControl),
+      multi: true,
+    },
+  ],
+  templateUrl: './switch-control.component.html',
+  styleUrls: ['./switch-control.component.scss']
+})
+export class SwitchControl implements ControlValueAccessor {
+
+  @Input() title!: string;
+  @Input() customClass!: string;
+  @Input() set disabled(value: boolean) {
+    this._disabled = value;
+    this.setDisabledState(value);
+  }
+  @Input()
+  set checked(value: boolean) {
+    this._checked = value;
+    this.switchControl.setValue(value, { emitEvent: false }); // set without emitting
+  }
+  @Output() switchChange = new EventEmitter<boolean>();
+  @Output() blurEvent = new EventEmitter<void>();
+
+  @ViewChild('switchContainer') switchContainer!: ElementRef;
+
+  get checked(): boolean {
+    return this._checked;
+  }
+
+  private _checked: boolean = false;
+  private _disabled = false;
+  switchControl = new FormControl<boolean>({ value: false, disabled: this._disabled });
+
+  private onChange: any = () => { };
+  private onTouched: any = () => { };
+
+  constructor(
+    private _renderer: Renderer2,
+    private _elementRef: ElementRef
+  ) {
+    this.switchControl.valueChanges.subscribe(value => {
+      this.onChange(value ?? false);
+      this.onTouched();
+      this.switchChange.emit(value ?? false);
+    });
+  }
+
+  writeValue(value: any): void {
+    if (value !== undefined) {
+      this.switchControl.setValue(value, { emitEvent: false });
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  // events
+  onFocus() {
+    this.switchContainer.nativeElement.classList.add('focused');
+  }
+  onBlur() {
+    this.blurEvent.emit();
+    this.onTouched();
+    this.switchContainer.nativeElement.classList.remove('focused');
+  }
+  setDisabledState(isDisabled: boolean): void {
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    if (isDisabled) {
+      this.switchControl.disable();
+    } else {
+      this.switchControl.enable();
+    }
+  }
+
+}

package/projects/nexheal-lib/src/lib/controls/text-editor/text-editor.component.html

@@ -0,0 +1,88 @@
+<div class="text-editor">
+    <div class="toolbar">
+        <div class="toolbar-items">
+            <button type="button" (click)="applyInlineStyle('bold')" tooltip="Bold">
+                <i class="he he-bold"></i>
+            </button>
+            <button type="button" (click)="applyInlineStyle('italic')" tooltip="italic">
+                <i class="he he-italics"></i>
+            </button>
+            <button type="button" (click)="applyInlineStyle('underline')" tooltip="Underline">
+                <i class="he he-underline"></i>
+            </button>
+        </div>
+        <div class="toolbar-items" *ngIf="header">
+            <button type="button" (click)="applyBlockFormat('h1')" tooltip="Header 1">
+                <i class="he he-heading-1"></i>
+            </button>
+            <button type="button" (click)="applyBlockFormat('h2')" tooltip="Header 2">
+                <i class="he he-heading-2"></i>
+            </button>
+        </div>
+        <div class="toolbar-items more-gap">
+            <div class="input-wrap" tooltip="Text Color">
+                <i class="he he-text-drop"></i>
+                <input type="color" (change)="applyColor($event)" />
+            </div>
+            <div class="input-wrap" tooltip="Background Color">
+                <i class="he he-background-drop"></i>
+                <input type="color" (change)="applyHighlight($event)" />
+            </div>
+        </div>
+        <div class="toolbar-items">
+            <button type="button" (click)="setAlignment('left')" tooltip="Justify Left">
+                <i class="he he-left-align"></i>
+            </button>
+            <button type="button" (click)="setAlignment('center')" tooltip="Justify Center">
+                <i class="he he-center-align"></i>
+            </button>
+            <button type="button" (click)="setAlignment('right')" tooltip="Justify Right">
+                <i class="he he-right-align"></i>
+            </button>
+            <button type="button" (click)="setAlignment('justify')" tooltip="Justify Full">
+                <i class="he he-justify"></i>
+            </button>
+        </div>
+        <div class="toolbar-items">
+            <button type="button" tooltip="Indent">
+                <i class="he he-text-indent-left"></i>
+            </button>
+            <button type="button" tooltip="Outdent">
+                <i class="he he-text-indent-right"></i>
+            </button>
+        </div>
+        <div class="toolbar-items" *ngIf="media">
+            <button type="button" (click)="applyList('ul')" tooltip="Unordered list">
+                <i class="he he-unordered-list"></i>
+            </button>
+            <button type="button" (click)="applyList('ol')" tooltip="Ordered list">
+                <i class="he he-ordered-list"></i>
+            </button>
+        </div>
+        <div class="toolbar-items" *ngIf="link">
+            <button type="button" (click)="createLink()" tooltip="Link">
+                <i class="he he-link"></i>
+            </button>
+            <button type="button" (click)="insertImage()" tooltip="Image">
+                <i class="he he-image"></i>
+            </button>
+        </div>
+        <div class="toolbar-items">
+            <button type="button" (click)="undo()" tooltip="Undo">
+                <i class="he he-undo"></i>
+            </button>
+            <button type="button" (click)="redo()" tooltip="Redo">
+                <i class="he he-redo"></i>
+            </button>
+        </div>
+        <div class="toolbar-items">
+            <button type="button" (click)="clearFormatting()" tooltip="Clear Formatting">
+                <i class="he he-text-clear-format"></i>
+            </button>
+        </div>
+    </div>
+
+    <div #editor class="editor-content" contenteditable="true" (input)="onInput()" (blur)="onTouched()"
+        [attr.data-placeholder]="placeholder">
+    </div>
+</div>