cats-ui-lib 2.0.0 → 2.0.1

package/src/lib/components/multi-select/multi-select.component.ts

@@ -0,0 +1,283 @@
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlValueAccessor, FormControl, FormsModule } from '@angular/forms';
+import { MultiSelectConfig } from '../../modal/cats-ui.modal';
+const noop = () => {}
+export const MULTI_SELECT_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => MultiSelectComponent),
+  multi: true,
+};
+export const MULTI_SELECT_CONTROL_VALUE_VALIDATOR: any = {
+  provide: NG_VALIDATORS,
+  useExisting: forwardRef(() => MultiSelectComponent),
+  multi: true,
+};
+@Component({
+  selector: 'cats-ui-multi-select',
+  imports: [NgClass, FormsModule],
+  templateUrl: './multi-select.component.html',
+  styleUrl: './multi-select.component.scss',
+  providers: [
+    MULTI_SELECT_CONTROL_VALUE_ACCESSOR,
+    MULTI_SELECT_CONTROL_VALUE_VALIDATOR,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { tabindex: '0' },
+})
+export class MultiSelectComponent
+  implements OnChanges, OnInit, ControlValueAccessor
+{
+  @Input() optionList: any[] = [];
+  @Input() multiSelectConfig: MultiSelectConfig = new MultiSelectConfig();
+
+  @Input() selectedOptions: any[] = [];
+
+  @Output() onSelection = new EventEmitter();
+
+  control!: FormControl<any>;
+
+  showDropdown = false;
+  isListArrayOfObject = false;
+  isSelectedAll = false;
+  inValid: boolean = false;
+  searchText: string = '';
+  disabledControl: boolean = false;
+
+  constructor(private cd: ChangeDetectorRef, private el: ElementRef) {}
+
+  // These lifecycle hooks will be in use for further implementation
+  ngOnInit(): void {}
+  ngOnChanges(_changes: SimpleChanges): void {
+    if (
+      _changes['optionList'].currentValue &&
+      _changes['optionList'].currentValue.length > 0
+    ) {
+      if (
+        typeof this.optionList[0] === 'string' ||
+        typeof this.optionList[0] === 'number'
+      ) {
+        this.optionList = this.optionList.map((option: any) => {
+          const item: any = {
+            [this.multiSelectConfig.idField]: option,
+            [this.multiSelectConfig.textField]: option,
+            isSelected: false,
+          };
+
+          if (this.multiSelectConfig.disabledField) {
+            item[this.multiSelectConfig.disabledField] = false;
+          }
+
+          return item;
+        });
+      } else {
+        this.isListArrayOfObject = true;
+        this.optionList = this.optionList.map((option: any) => {
+          return {
+            ...option,
+            isSelected: false,
+          };
+        });
+      }
+      if (this.optionList.length > 10)
+        this.multiSelectConfig.enableSearch = true;
+      this.writeValue(this.control?.value);
+    }
+  }
+
+  /**
+   * @description Method to toggle dropdown list
+   * @author Shiva Kant
+   */
+  toggleDropdown(): void {
+    this.showDropdown = !this.showDropdown;
+  }
+
+  /**
+   * @description Method to check if provide arg is an object or not
+   * @author Shiva Kant
+   * @param Obj:any
+   * @returns boolean
+   */
+  isObjEmpty(obj: any): boolean {
+    return !(obj && Object.keys(obj).length > 0);
+  }
+
+  /**
+   * @description Method is to update selected option and then
+   * update formcontrol by call onChangeCallback.
+   * @author Shiva Kant
+   * @param item
+   * @returns void
+   */
+  updateSelectedOption(item: any): void {
+    item.isSelected = !item.isSelected;
+    if (!item.isSelected) {
+      let ind = this.selectedOptions.findIndex(
+        (option: any) =>
+          item[this.multiSelectConfig.idField] ==
+          option[this.multiSelectConfig.idField]
+      );
+      if (ind >= 0) this.selectedOptions.splice(ind, 1);
+    } else {
+      this.selectedOptions.push(item);
+    }
+    this.isSelectedAll = this.optionList.every(
+      (option: any) => option.isSelected == true
+    );
+
+    this.inValid = false;
+    this.onChangeCallback(this.selectedOptions);
+    this.onTouchedCallback();
+    this.onSelection.emit(this.selectedOptions);
+    this.cd.markForCheck();
+  }
+
+  // Below Methods are used to register form API methods in these variable to use them later
+  private onTouchedCallback: () => void = noop;
+  private onChangeCallback: (_: any) => void = noop;
+
+  validate(control: FormControl): void {
+    this.control = control;
+  }
+
+  // Below are the CVA interface methods to make this component able to bind with formcontrol in parent component
+
+  /**
+   * @description method to update value of selectedOption
+   * @author Shiva Kant
+   * @param controlValue this is provided by formcontrol
+   * @returns void
+   */
+  writeValue(controlValue: any[]): void {
+    if (this.optionList.length) {
+      this.selectedOptions = [];
+      if (controlValue && controlValue.length > 0) {
+        if (
+          typeof controlValue[0] === 'string' ||
+          typeof controlValue[0] === 'number'
+        ) {
+          controlValue = controlValue.map((option: string | number) => {
+            return {
+              [this.multiSelectConfig.idField]: option,
+              [this.multiSelectConfig.textField]: option,
+            };
+          });
+        }
+        for (const option of controlValue) {
+          let ind = this.optionList.findIndex(
+            (item: any) =>
+              item[this.multiSelectConfig.idField] ==
+                option[this.multiSelectConfig.idField] ||
+              item[this.multiSelectConfig.textField] ==
+                option[this.multiSelectConfig.textField]
+          );
+          if (ind >= 0) {
+            this.optionList[ind] = {
+              ...this.optionList[ind],
+              isSelected: true,
+            };
+            this.selectedOptions.push(this.optionList[ind]);
+          }
+        }
+      }
+      this.isSelectedAll = this.optionList.every(
+        (option: any) => option.isSelected == true
+      );
+      this.onChangeCallback(this.selectedOptions);
+      this.cd.markForCheck();
+    }
+  }
+
+  /**
+   * @description method to register on change callback from form API
+   * @author Shiva Kant
+   * @param fn
+   * @returns void
+   */
+  registerOnChange(fn: any): void {
+    this.onChangeCallback = fn;
+  }
+
+  /**
+   * @description method to register on touch callback from form API
+   * @author Shiva Kant
+   * @param fn
+   * @returns void
+   */
+  registerOnTouched(fn: any): void {
+    this.onTouchedCallback = fn;
+  }
+
+  //willbe used in further implementation
+  setDisabledState(isDisabled: boolean): void {
+    this.disabledControl = isDisabled;
+  }
+
+  /**
+   * @description method to update ontouchcallback on blur
+   * @author Shiva Kant
+   */
+  @HostListener('blur')
+  public onTouched() {
+    this.onTouchedCallback();
+  }
+
+  /**
+   * @description method to toggle dropdown on outside click
+   * @author Shiva Kant
+   */
+  @HostListener('document:click', ['$event'])
+  public closeDropdown(event: any) {
+    if (!this.el.nativeElement.contains(event.target)) {
+      if (this.showDropdown && this.multiSelectConfig.required) {
+        this.inValid = this.selectedOptions.length < 0;
+      }
+      this.showDropdown = false;
+    }
+  }
+
+  checkUncheckAll(): void {
+    if (this.isSelectedAll) {
+      this.optionList = this.optionList.map((option: any) => {
+        if (
+          this.multiSelectConfig.disabledField &&
+          option[this.multiSelectConfig.disabledField]
+        ) {
+          return option;
+        }
+        return { ...option, isSelected: false };
+      });
+
+      this.isSelectedAll = false;
+      this.selectedOptions = this.optionList.filter((o) => o.isSelected);
+    } else {
+      this.optionList = this.optionList.map((option: any) => {
+        if (
+          this.multiSelectConfig.disabledField &&
+          option[this.multiSelectConfig.disabledField]
+        ) {
+          return option;
+        }
+        return { ...option, isSelected: true };
+      });
+
+      this.isSelectedAll = true;
+      this.selectedOptions = this.optionList.filter((o) => o.isSelected);
+    }
+
+    this.onChangeCallback(this.selectedOptions);
+    this.onSelection.emit(this.selectedOptions);
+  }
+
+  get filteredOptionsValue(): any[] {
+    if (!this.searchText || this.searchText.trim() === '') {
+      return this.optionList;
+    }
+    return this.optionList.filter((option) =>
+      option[this.multiSelectConfig.textField]
+        ?.toLowerCase()
+        .includes(this.searchText.toLowerCase())
+    );
+  }
+}

package/src/lib/components/radio-button/index.ts

@@ -0,0 +1 @@
+export * from "./radio-button.component"

package/src/lib/components/radio-button/radio-button.component.html

@@ -0,0 +1,22 @@
+<div class="radio_group" [ngClass]="config.layout">
+  @if (config.label) {
+  <div class="group_label">{{ config.label }}</div>
+  }
+
+  <div class="radio_option_container">
+    @for (option of optionList; track $index) {
+    <div class="radio_option">
+      <input
+        type="radio"
+        [name]="config.name"
+        [id]="extractValue(option)"
+        [disabled]="config.disabled ? option[config.disabled] : false"
+        [value]="extractValue(option)"
+        [(ngModel)]="value"
+        (change)="handleChange(option)"
+      />
+      <label [for]="extractValue(option)">{{ extractLabel(option) }}</label>
+    </div>
+    }
+  </div>
+</div>

package/src/lib/components/radio-button/radio-button.component.scss

@@ -0,0 +1,86 @@
+@use "../../styles" as *;
+
+.radio_group {
+  @include fontStyle(var(--fs-16), rem(24px));
+  &.horizontal {
+    .radio_option_container {
+      @include flex();
+      .radio_option {
+        padding-right: rem(30px);
+      }
+    }
+  }
+  .group_label {
+    margin-bottom: rem(8px);
+    font-weight: 500;
+  }
+  .radio_option_container {
+    @include flex("", "", "", column);
+    .radio_option {
+      margin-bottom: rem(8px);
+      [type="radio"]:not(:checked)[disabled] + label {
+        color: var(--neutral-300);
+        cursor: default;
+        &::before {
+          background-color: var(--neutral-100);
+        }
+      }
+      [type="radio"]:is(:checked)[disabled] + label {
+        color: var(--neutral-300);
+        cursor: default;
+        &::before {
+          border-color: var(--neutral-100);
+        }
+        &::after {
+          background-color: var(--neutral-100);
+        }
+      }
+      %check-style {
+        content: "";
+        position: absolute;
+        @include position(0, 0);
+        @include box(rem(24px), rem(24px));
+        background: var(--white);
+      }
+      [type="radio"]:checked,
+      [type="radio"]:not(:checked) {
+        position: absolute;
+        left: -9999px;
+      }
+      [type="radio"]:checked + label,
+      [type="radio"]:not(:checked) + label {
+        position: relative;
+        padding-left: rem(30px);
+        cursor: pointer;
+        display: inline-block;
+        color: var(--default);
+      }
+      [type="radio"]:checked + label:before {
+        @extend %check-style;
+        @include border($color: var(--blue-600), $radius: 100%);
+      }
+      [type="radio"]:not(:checked) + label:before {
+        @extend %check-style;
+        @include border($radius: 100%);
+      }
+      [type="radio"]:checked + label:after,
+      [type="radio"]:not(:checked) + label:after {
+        content: "";
+        @include box(rem(10px), rem(10px));
+        background: var(--blue-600);
+        position: absolute;
+        @include position(rem(7px), rem(7px));
+        border-radius: 100%;
+        transition: all 0.2s ease;
+      }
+      [type="radio"]:not(:checked) + label:after {
+        opacity: 0;
+        transform: scale(0);
+      }
+      [type="radio"]:checked + label:after {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  }
+}

package/src/lib/components/radio-button/radio-button.component.ts

@@ -0,0 +1,137 @@
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  NG_VALUE_ACCESSOR,
+  ControlValueAccessor,
+  FormsModule,
+} from '@angular/forms';
+import { RadioButtonConfig } from '../../modal/cats-ui.modal';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'cats-ui-radio-button',
+  imports: [CommonModule, FormsModule],
+  templateUrl: './radio-button.component.html',
+  styleUrl: './radio-button.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => RadioButtonComponent),
+      multi: true,
+    },
+  ],
+})
+export class RadioButtonComponent implements ControlValueAccessor {
+  @Input() config!: RadioButtonConfig;
+  @Input() optionList: any[] = [];
+  @Output() selectionChange = new EventEmitter<any>();
+  //  selectedRadio pass id in number or name in string or full object
+  @Input() selectedRadio: any;
+
+  value: any = null;
+  isDisabled = false;
+
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['selectedRadio'] && this.optionList?.length) {
+      if (!this.selectedRadio) return;
+
+      const selected = this.selectedRadio;
+
+      const match = this.optionList.find((opt) => {
+        const optValue = this.extractValue(opt);
+        const optLabel = this.extractLabel(opt);
+
+        if (typeof selected === 'string' || typeof selected === 'number') {
+          // Match primitive against value or label
+          return selected === optValue || selected === optLabel;
+        } else if (typeof selected === 'object') {
+          // Match object against option's value or label
+          const selValue = this.extractValue(selected);
+          const selLabel = this.extractLabel(selected);
+          return selValue === optValue || selLabel === optLabel;
+        }
+        return false;
+      });
+
+      if (match) {
+        this.value = this.extractValue(match);
+        this.onChange(this.value);
+      }
+    }
+  }
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+  /**
+   * @description method to handle change of toggle button
+   * @author Shiva Kant
+   * @param option
+   */
+  handleChange(option: any) {
+    this.value = this.extractValue(option);
+    this.onChange(this.value);
+    this.onTouched();
+    this.selectionChange.emit(option);
+  }
+  /**
+   * @description method to extractValue
+   * @author Shiva Kant
+   * @param option
+   * @returns
+   */
+  extractValue(option: any): any {
+    if (typeof option === 'string' || typeof option === 'number') {
+      return option;
+    }
+
+    const key = this.config.valueField ?? 'id'; // ALWAYS a string
+    return option[key];
+  }
+
+  extractLabel(option: any): string {
+    if (typeof option === 'string') return option;
+
+    const key = this.config.textField ?? 'label';
+    return option[key];
+  }
+
+  /**
+   *  * @description method to normalizeValue
+   * @author Shiva Kant
+   * @param value
+   * @returns
+   */
+  normalizeValue(value: any): any {
+    if (value == null) return null;
+
+    if (typeof value === 'string' || typeof value === 'number') {
+      return value;
+    }
+
+    // object case → return id or valueField
+    const key = this.config.valueField ?? 'id';
+    return value[key];
+  }
+}

package/src/lib/components/search-box/index.ts

@@ -0,0 +1 @@
+export * from "./search-box.component"

package/src/lib/components/search-box/search-box.component.html

@@ -0,0 +1,15 @@
+<div class="search_input">
+  <img src="images/search.svg" alt="" srcset="" />
+  <input
+    [placeholder]="searchConfig.placeholder"
+    type="text"
+    [value]="searchParam"
+    (input)="onInputChange($event)"
+    (blur)="onTouched()"
+  />
+  @if (searchParam.length > 0) {
+  <div class="cross_icon">
+    <img src="images/x.svg" alt="" srcset="" (click)="closeSearchBar()" />
+  </div>
+  }
+</div>

package/src/lib/components/search-box/search-box.component.scss

@@ -0,0 +1,28 @@
+@use "../../styles" as *;
+
+.search_input {
+  position: relative;
+  @include box(100%, rem(56px));
+  @include border($radius: rem(8px));
+  padding: 0 rem(16px);
+  @include flex(flex-start, center, rem(8px));
+  &:has(input:focus) {
+    border: rem(1px) solid var(--blue-700);
+  }
+  img {
+    @include box(rem(20px), rem(20px));
+    opacity: 0.5;
+  }
+  input {
+    @include box(100%, 100%);
+    border: 0;
+    @include fontStyle(var(--fs-16), 140%, 500);
+    color: var(--default);
+    &::placeholder {
+      color: var(--neutral-400);
+    }
+  }
+  .cross_icon {
+    cursor: pointer;
+  }
+}

package/src/lib/components/search-box/search-box.component.ts

@@ -0,0 +1,79 @@
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  Output,
+} from '@angular/core';
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ControlValueAccessor,
+} from '@angular/forms';
+import { SearchConfig } from '../../modal/cats-ui.modal';
+
+@Component({
+  selector: 'cats-ui-search-box',
+  imports: [FormsModule],
+  templateUrl: './search-box.component.html',
+  styleUrl: './search-box.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SearchBoxComponent),
+      multi: true,
+    },
+  ],
+})
+export class SearchBoxComponent implements ControlValueAccessor {
+  searchParam: string = '';
+  @Input() searchConfig: SearchConfig = new SearchConfig();
+  @Output() onClose = new EventEmitter<void>();
+  @Output() searchParamValue = new EventEmitter<string>();
+
+  private onChange: (value: string) => void = () => {};
+  public onTouched: () => void = () => {};
+  isDisabled = false;
+
+  ngOnInit(): void {
+    this.searchParam = this.searchConfig?.serachValue || '';
+  }
+  /**
+   * @description Method to Called when input changes
+   * @author Shiva Kant
+   */
+
+  onInputChange(event: any) {
+    const value = (event.target as HTMLInputElement)?.value;
+    this.searchParam = value;
+    this.onChange(value);
+    this.searchParamValue.emit(value);
+  }
+  /**
+   * @description Method to closeSearchBar
+   * @author Shiva Kant
+   */
+  closeSearchBar(): void {
+    this.searchParam = '';
+    this.onChange('');
+    this.searchParamValue.emit('');
+    this.onClose.emit();
+  }
+
+  // -------- ControlValueAccessor methods --------
+  writeValue(value: string): void {
+    this.searchParam = value || '';
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+}

package/src/lib/components/single-select/index.ts

@@ -0,0 +1 @@
+export * from "./single-select.component"