nexheal-lib 0.0.3 → 0.0.4

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

@@ -1,375 +0,0 @@
-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

@@ -1,4 +0,0 @@
-<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

@@ -1,53 +0,0 @@
-.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

@@ -1,22 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,88 +0,0 @@
-<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>