nexheal-lib 0.0.3 → 0.0.4

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

@@ -1,4 +0,0 @@
-<label class="checkbox-container" [ngClass]="customClass" #checkboxContainer>
-    <input type="checkbox" [formControl]="checkboxControl" (focus)="onFocus($event)" (blur)="onBlur()" />
-    <span class="checkmark"></span>{{ title }}
-</label>

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

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

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

@@ -1,94 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, Output, EventEmitter, forwardRef, Renderer2, ElementRef, ViewChild } from '@angular/core';
-import { NG_VALUE_ACCESSOR, ControlValueAccessor, ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'checkbox-control',
-  standalone: true,
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    FormsModule
-  ],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => CheckboxControl),
-      multi: true,
-    },
-  ],
-  templateUrl: './checkbox-control.component.html'
-})
-export class CheckboxControl implements ControlValueAccessor {
-
-  @Input() title!: string;
-  @Input() customClass!: string;
-  @Input() type: 'boolean' | 'number' | 'string' = 'boolean';
-  @Input() set disabled(value: boolean) { this._disabled = value; this.setDisabledState(value); }
-  @Output() checkboxChange = new EventEmitter<boolean>();
-  @Output() blurEvent = new EventEmitter<void>();
-
-  @ViewChild('checkboxContainer') checkboxContainer!: ElementRef;
-
-  private _disabled = false;
-  checkboxControl = new FormControl({ value: false, disabled: this._disabled });
-  private onChange: any = () => { };
-  private onTouched: any = () => { };
-
-  constructor(
-    private _renderer: Renderer2,
-    private _elementRef: ElementRef
-  ) {
-    this.checkboxControl.valueChanges.subscribe(value => {
-      const converted = this.convertType(value);
-      this.onChange(converted);
-      this.onTouched();
-      this.checkboxChange.emit(converted);
-    });
-  }
-
-  writeValue(value: any): void {
-    if (value !== undefined && value !== null) {
-      this.checkboxControl.setValue(this.convertType(value), { emitEvent: false });
-    }
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  convertType(value: any): any {
-    switch (this.type) {
-      case 'number':
-        return Number(value == 2 ? 0 : value == 0 ? 2 : value);
-      case 'string':
-        return String(value);
-      default:
-        return !!value;
-    }
-  }
-
-  // events
-  onFocus(event: FocusEvent) {
-    const targetElement = event.target as Element;
-    if (targetElement.matches(':focus-visible')) {
-      this.checkboxContainer.nativeElement.classList.add('focused');
-    }
-  }
-  onBlur() {
-    this.blurEvent.emit();
-    this.checkboxContainer.nativeElement.classList.remove('focused');
-  }
-  setDisabledState(isDisabled: boolean): void {
-    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
-    if (isDisabled) {
-      this.checkboxControl.disable();
-    } else {
-      this.checkboxControl.enable();
-    }
-  }
-
-}

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

@@ -1,61 +0,0 @@
-<div class="form-group input" [ngClass]="customClass">
-  @if (title) {
-  <label class="inp-label" [ngClass]="{ 'required': required }">{{ title }}</label>
-  }
-
-  @if (useReactiveForms) {
-  <input [type]="getInputType()" class="form-control" [placeholder]="placeholder" [formControl]="inputControl"
-    [ngClass]="{ 'is-invalid': error }" (focus)="onFocus()" (blur)="onBlur()" [readonly]="readonly"
-    (keypress)="onKeyPress($event)" [attr.autocomplete]="autocomplete || null" />
-  } @else {
-  <input [type]="getInputType()" class="form-control" [placeholder]="placeholder" [(ngModel)]="ngModel"
-    [ngClass]="{ 'is-invalid': error }" (focus)="onFocus()" (blur)="onBlur()" [readonly]="readonly"
-    (keypress)="onKeyPress($event)" />
-  }
-  @if(deFocus){
-  <span class="focus-border"></span>
-  }
-  @if (!inputLoader && showClearButton()) {
-  <label class="clear" (click)="resetInput()">
-    <i class="he he-close"></i>
-  </label>
-  }
-
-  @if (price) {
-  <label class="ls-price">
-    <i class="he he-rupee"></i>
-  </label>
-  }
-
-  @if (type === 'search') {
-  <label class="ls-search">
-    <i class="he he-search"></i>
-  </label>
-  }
-
-  @if (advSearch) {
-  <label class="rs-search" (click)="onAdvSearchClick()">
-    <i class="he he-search-adv"></i>
-  </label>
-  }
-
-  @if (search) {
-  <label class="rs-search" (click)="onSearchClick()">
-    <i class="he he-search"></i>
-  </label>
-  }
-
-  @if (type === 'password' && !disabled) {
-  <label class="toggle-eye" (click)="passwordVisible()">
-    <i class="he" [ngClass]="showPassword ? 'he-eye-off' : 'he-eye'"></i>
-  </label>
-  }
-
-  @if (inputLoader) {
-  <label class="loader input-loader"></label>
-  }
-
-  @if (error) {
-  <div class="val-msg">{{ errorMessage }}</div>
-  }
-</div>

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

@@ -1,132 +0,0 @@
-.form-group {
-    .toggle-eye,
-    ::ng-deep .toggle-eye {
-        top: 28px;
-        right: 10px;
-        padding: 5px;
-        line-height: 1;
-        position: absolute;
-        .he {
-            font-size: 18px;
-        }
-        .rb {
-            font-size: 17px;
-            color: #5f6554;
-        }
-    }
-    &.no-label {
-        .toggle-eye {
-            top: 9px;
-        }
-    }
-    &.group-sm {
-        .toggle-eye {
-            top: 5px;
-        }
-    }
-    &.left-input-search {
-        .ls-search {
-            top: 9px;
-            left: 10px;
-            position: absolute;
-            .he {
-                font-size: 1em;
-                color: #807a7a;
-                font-weight: 600;
-            }
-        }
-        .form-control {
-            text-indent: 1.25rem;
-        }
-    }
-    &.right-input-search {
-        .rs-search {
-            top: 27px;
-            right: 7px;
-            padding: 5px;
-            width: 30px;
-            height: 30px;
-            display: grid;
-            cursor: pointer;
-            position: absolute;
-            border-radius: 5px;
-            place-items: center;
-            i {
-                font-size: 16px;
-                color: #807a7a;
-            }
-            &:hover {
-                background: rgba(255, 127, 93, 0.1);
-                i {
-                    color: #ff7f5d;
-                }
-            }
-        }
-        .rs-search + .rs-search {
-            right: 37px;
-        }
-        .clear {
-            right: 2.5rem;
-        }
-        .form-control {
-            padding-right: 4rem;
-        }
-        &.no-label {
-            .rs-search {
-                top: 7px;
-            }
-            .clear {
-                top: 10px;
-            }
-        }
-        &.group-sm {
-            &.no-label {
-                .rs-search {
-                    top: 4px;
-                    width: 27px;
-                    height: 27px;
-                    i {
-                        font-size: 14px;
-                    }
-                }
-                .clear {
-                    top: 6px;
-                    right: 2.25rem;
-                }
-            }
-        }
-        &.double-search {
-            .form-control {
-                padding-right: 6rem;
-            }
-            .clear {
-                right: 4.5rem;
-            }
-        }
-    }
-    &.price-input {
-        .form-control {
-            text-indent: 1rem;
-        }
-        .ls-price {
-            top: 21px;
-            padding: 8px;
-            display: flex;
-            color: #2ba599;
-            position: absolute;
-            align-items: center;
-            height: calc(var(--input-height) - 2px);
-            i {
-                top: 1px;
-                color: inherit;
-                cursor: default;
-                font-size: 12px;
-            }
-        }
-    }
-    .clear {
-        z-index: 4;
-        cursor: pointer;
-        background-color: transparent;
-    }
-}

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

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

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

@@ -1,202 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { Component, Input, Output, EventEmitter, forwardRef, OnInit, OnDestroy, inject } from "@angular/core";
-import { NG_VALUE_ACCESSOR, ControlValueAccessor, ReactiveFormsModule, FormControl, FormsModule } from "@angular/forms";
-import { Subscription } from "rxjs";
-
-@Component({
-  selector: "input-control",
-  standalone: true,
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    FormsModule
-  ],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => InputControl),
-      multi: true,
-    },
-  ],
-  templateUrl: "./input-control.component.html",
-  styleUrls: ["./input-control.component.scss"],
-})
-export class InputControl implements ControlValueAccessor, OnInit, OnDestroy {
-
-  @Input() type: | "text" | "password" | "decimal" | "number" | "email" | "search" = "text";
-  @Input() title!: string;
-  @Input() placeholder: string = "";
-  @Input() customClass!: string;
-  @Input() clearVal: boolean = true;
-  @Input() required: boolean = false;
-  @Input() deFocus: boolean = true;
-  @Input() error: boolean = false;
-  @Input() errorMessage: string = "";
-  @Input() autocomplete: string = '';
-  @Input() readonly: boolean = false;
-  @Input() search: boolean = false;
-  @Input() price: boolean = false;
-  @Input() maxlength!: number;
-  @Input() ngModel!: string;
-  @Input() advSearch: boolean = false;
-  @Input() inputLoader: boolean = false;
-  @Input() useReactiveForms: boolean = true;
-  @Output() blurEvent = new EventEmitter<void>();
-  @Output() selectionCleared = new EventEmitter<void>();
-  @Output() inputChange = new EventEmitter<string>();
-  @Output() ngModelChange: EventEmitter<string> = new EventEmitter<string>();
-  @Output() searchClicked: EventEmitter<void> = new EventEmitter<void>();
-  @Output() advSearchClicked: EventEmitter<void> = new EventEmitter<void>();
-
-  private _disabled = false;
-  @Input() set disabled(isDisabled: boolean) {
-    this._disabled = isDisabled;
-    this.setDisabledState(isDisabled);
-  }
-  get disabled(): boolean {
-    return this._disabled;
-  }
-  private valueChangesSubscription!: Subscription;
-  private onChange: any = () => { };
-  private onTouched: any = () => { };
-
-  isFocused: boolean = false;
-  showPassword: boolean = false;
-  inputControl = new FormControl("");
-
-  ngOnInit() {
-    if (this.useReactiveForms) {
-      this.valueChangesSubscription = this.inputControl.valueChanges.subscribe(
-        (value) => {
-          this.onChange(value);
-          this.inputChange.emit(value ?? "");
-        }
-      );
-    }
-  }
-  
-  ngOnDestroy(): void {
-    if (this.valueChangesSubscription) {
-      this.valueChangesSubscription.unsubscribe();
-    }
-  }
-
-  // input type
-  getInputType() {
-    return this.type === "password" && this.showPassword ? "text" : this.type;
-  }
-
-  writeValue(value: any): void {
-    if (this.useReactiveForms) {
-      if (value !== undefined) {
-        this.inputControl.setValue(value, {
-          emitEvent: false,
-        });
-        if (value != '') {
-          this.onChange(value);
-        }
-      }
-      if (this.inputControl.disabled !== this.disabled) {
-        this.setDisabledState(this.disabled);
-      }
-    } else {
-      this.ngModel = value;
-    }
-  }
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  // events
-  onBlur() {
-    this.blurEvent.emit();
-    setTimeout(() => {
-      this.isFocused = false;
-      this.onTouched();
-      if (!this.useReactiveForms) {
-        this.ngModelChange.emit(this.ngModel);
-      }
-    }, 200);
-  }
-  onFocus() {
-    this.isFocused = true;
-  }
-  onKeyPress(event: KeyboardEvent) {
-    let allowedKeys: string[] = [];
-
-    switch (this.type) {
-      case "number":
-        allowedKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
-        break;
-      case "decimal":
-        allowedKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "."];
-        break;
-      default:
-        break;
-    }
-    if (this.search && event.key == "Enter") {
-      this.onSearchClick();
-    }
-    if (
-      (this.type == "number" || this.type == "decimal") &&
-      !allowedKeys.includes(event.key)
-    ) {
-      event.preventDefault();
-      return;
-    }
-    if (this.maxlength != null && (this.type == "number" || this.type == "decimal")) {
-      const currentValue: string = this.inputControl.value ?? "";
-      if (currentValue.length >= this.maxlength) {
-        event.preventDefault();
-        return;
-      }
-    }
-  }
-  setDisabledState(isDisabled: boolean): void {
-    this._disabled = isDisabled;
-    if (this._disabled && this.useReactiveForms) {
-      this.inputControl.disable({
-        emitEvent: false,
-      });
-    } else if (this.useReactiveForms) {
-      this.inputControl.enable({
-        emitEvent: false,
-      });
-    }
-  }
-
-  // actions
-  passwordVisible() {
-    this.showPassword = !this.showPassword;
-  }
-  onSearchClick(): void {
-    this.searchClicked.emit();
-  }
-  onAdvSearchClick(): void {
-    this.advSearchClicked.emit();
-  }
-
-  // clear
-  showClearButton() {
-    return (
-      this.isFocused &&
-      this.clearVal &&
-      this.inputControl.value &&
-      this.type !== "password"
-    );
-  }
-  resetInput() {
-    this.selectionCleared.emit();
-    if (this.useReactiveForms) {
-      this.inputControl.setValue("");
-      this.inputControl.markAsPristine({ onlySelf: true });
-
-    } else {
-      this.ngModel = "";
-      this.ngModelChange.emit(this.ngModel);
-    }
-  }
-}

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

@@ -1,72 +0,0 @@
-<div class="form-group multi-select" [ngClass]="customClass" (clickOutside)="selectListOutsideClick()">
-  @if (title) {
-  <label class="inp-label" [ngClass]="{ 'required': required }">{{ title }}</label>
-  }
-
-  <input #input type="text" class="form-control" placeholder="{{ placeholder }}" [formControl]="inputControl"
-    [ngClass]="{'is-invalid': error}" (blur)="onBlur($event)" (click)="toggleDropdown()" readonly
-    [value]="selectedItemList" (keydown)="onKeyDown($event)" [attr.autocomplete]="autocomplete || null" />
-
-  @if (deFocus) {
-  <span class="focus-border"></span>
-  }
-
-  @if (!inputLoader && isDropdownOpen && clearVal && selectedItems.length > 0) {
-  <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">
-    @if (showSearch && filteredOptions.length > 5) {
-    <div class="list-filter">
-      <div>
-        <label class="checkbox-container select-all">
-          <input type="checkbox" [checked]="selectAllChecked" (change)="onSelectAllChange($event)" tabindex="-1" />
-          <span class="checkmark"></span>
-        </label>
-      </div>
-      <div class="form-group">
-        <input type="text" class="form-control" placeholder="Search..." (input)="handleInput($event) "
-          (keydown)="onKeyDown($event)" />
-      </div>
-      <div class="ms-close">
-        <button type="button" class="icon-button">
-          <a (click)="onCloseDropdown()"><i class="he he-close"></i></a>
-        </button>
-      </div>
-    </div>
-    }
-
-    <div class="list-wrap">
-      @for (option of filteredOptions; track option[optionDisplayProperty]; let i = $index) {
-      <div class="list-item" (change)="toggleCheckbox(option)" [ngClass]="{ 'highlighted': i === highlightedIndex }">
-        <label class="checkbox-container multi-select">
-          <input type="checkbox" [checked]="isSelected(option)" tabindex="-1" />
-          <span class="checkmark"></span>
-          {{ option[optionDisplayProperty] }}
-        </label>
-      </div>
-      }
-    </div>
-
-    @if (filteredOptions.length === 0) {
-    <div class="no-results">No results found</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/multiselect-control/multiselect-control.component.scss

@@ -1,90 +0,0 @@
-.form-group {
-  &.multi-select {
-    .option-list {
-      .list-filter {
-        gap: 10px;
-        display: flex;
-        padding: 9px 10px;
-        align-items: center;
-        border-bottom: 1px solid #efefef;
-        .checkbox-container {
-          &.select-all {
-            top: -10px;
-            margin-bottom: 0;
-            padding-left: 22px;
-          }
-        }
-        .form-group {
-          margin-bottom: 0;
-          width: calc(100% - 70px);
-          .form-control {
-            height: 34px;
-            border-radius: 5px;
-            background: #ffffff;
-            padding: 0.275rem 0.5rem;
-            border: 1px solid #cccccc !important;
-            &::placeholder {
-              font-size: 0.925em;
-            }
-          }
-        }
-        .ms-close {
-          .icon-button {
-            background: #f0f0f0;
-            a {
-              width: 28px;
-              height: 28px;
-              display: grid;
-              cursor: pointer;
-              position: relative;
-              border-radius: 5px;
-              place-items: center;
-              text-decoration: none;
-              border: 1px solid #efefef;
-              box-shadow: 0 0 3px #ebebeb;
-              i {
-                font-size: 14px;
-              }
-              &:hover {
-                background: rgba(255, 127, 93, 0.1);
-                i {
-                  color: #ff7f5d;
-                }
-              }
-            }
-          }
-        }
-      }
-      .list-wrap {
-        overflow: auto;
-        max-height: calc(233px - 53px);
-      }
-      .list-item {
-        padding: 0;
-        .checkbox-container {
-          &.multi-select {
-            width: 100%;
-            font-size: 1em;
-            margin-bottom: 0;
-            font-weight: 400;
-            color: #584e4e;
-            letter-spacing: 0.015rem;
-            padding: 10px 10px 10px 40px;
-            .checkmark {
-              top: 9px;
-              left: 10px;
-            }
-          }
-        }
-      }
-      .no-results {
-        padding: 10px;
-        color: #9b9b9b;
-        text-align: center;
-      }
-    }
-    .clear {
-      right: 30px;
-    }
-  }
-}