nexheal-lib 0.0.2 → 0.0.3

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,90 @@
+.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;
+    }
+  }
+}