cats-ui-lib 2.0.1 → 2.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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