cats-ui-lib 2.0.1 → 2.0.3

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

@@ -1,319 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { AutoCompleteMultiSelectConfig } from '../../modal/cats-ui.modal';
-import { OutsideClickDirective } from '../../directives/outside-click.directive';
-
-@Component({
-  selector: 'cats-ui-input-multi-select',
-  imports: [CommonModule, FormsModule, OutsideClickDirective],
-  templateUrl: './auto-complete-multi-select.component.html',
-  styleUrl: './auto-complete-multi-select.component.scss',
-  
-})
-export class AutoCompleteMultiSelectComponent implements OnInit {
-  @Input() autoCompleteMultiSelectConfig!: AutoCompleteMultiSelectConfig;
-  @Input() selectedItem: any;
-  @Input() optionsList: any[] = [];
-  @Input() parentNativeElement: any;
-  @Output() onItemSelection = new EventEmitter();
-  @Output() onScroll: any = new EventEmitter();
-  showDropdown: boolean = false;
-  inputValue: string = '';
-  selectedOptions: any[] = [];
-  isSelectedAll: boolean = false;
-
-  constructor() {}
-  ngOnInit() {}
-  ngOnChanges() {
-    this.applyDefaultConfig();
-  }
-
-  private applyDefaultConfig() {
-    const defaults = new AutoCompleteMultiSelectConfig();
-    this.autoCompleteMultiSelectConfig = {
-      ...defaults,
-      ...this.autoCompleteMultiSelectConfig,
-    };
-  }
-
-  /**
-   * @description Method to toggle dropdown list
-   * @author Shiva Kant
-   */
-  toggleDropdown(): void {
-    this.showDropdown = !this.showDropdown;
-    if (this.parentNativeElement) {
-      this.parentNativeElement.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-      });
-      let parentDiv = document.getElementById(this.parentNativeElement);
-      setTimeout(() => {
-        let parentBoundary = parentDiv?.getBoundingClientRect() || ({} as any);
-        let dropdonwList: any = document.getElementById('container_scroll');
-        let elBoundary = dropdonwList?.getBoundingClientRect() || {};
-        if (parentBoundary?.['bottom'] < elBoundary?.['bottom']) {
-          dropdonwList.style['transform'] = `translate(0px,-${
-            elBoundary?.['height'] + 54
-          }px`;
-        }
-      }, 20);
-    }
-  }
-  /**
-   * @description method to update selected item
-   * @author Shiva Kant
-   * @param item this is selected item from list
-   * @param type type of list
-   * @returns none
-   */
-  updateSelectedItem(item: any, type: string) {
-    if (type === 'object') {
-      // Toggle the option's isSelected
-      item.isSelected = !item.isSelected;
-
-      if (item.isSelected) {
-        // add to selectedOptions if not already present
-        const exists = this.selectedOptions.some(
-          (opt) =>
-            this.isObject(opt) &&
-            opt[this.autoCompleteMultiSelectConfig.textField] ===
-              item[this.autoCompleteMultiSelectConfig.textField]
-        );
-        if (!exists) this.selectedOptions.push(item);
-      } else {
-        // remove from selectedOptions
-        this.selectedOptions = this.selectedOptions.filter(
-          (opt) =>
-            !(
-              this.isObject(opt) &&
-              opt[this.autoCompleteMultiSelectConfig.textField] ===
-                item[this.autoCompleteMultiSelectConfig.textField]
-            )
-        );
-      }
-    } else {
-      // string type
-      const existsIndex = this.selectedOptions.findIndex((opt) => opt === item);
-      if (existsIndex > -1) {
-        // remove
-        this.selectedOptions.splice(existsIndex, 1);
-      } else {
-        // add
-        this.selectedOptions.push(item);
-      }
-
-      // If optionsList contains this string, also toggle its isSelected there
-      const idxInOptions = this.optionsList.findIndex(
-        (o) => typeof o === 'string' && o === item
-      );
-      if (idxInOptions > -1) {
-        // toggle corresponding option's isSelected
-        const opt = this.optionsList[idxInOptions] as any;
-        opt.isSelected = !opt.isSelected;
-      }
-    }
-
-    // keep select all state consistent
-    this.updateSelectAllState();
-    this.onItemSelection.emit(this.selectedOptions);
-  }
-
-  /**
-   * @description method to checkUncheckAll
-   * @author Shiva Kant
-   */
-
-  checkUncheckAll(event: any) {
-    if (event) event.stopPropagation();
-    this.isSelectedAll = !this.isSelectedAll;
-
-    this.optionsList.forEach((item) => {
-      if (
-        !this.autoCompleteMultiSelectConfig.disabledField ||
-        !item[this.autoCompleteMultiSelectConfig.disabledField]
-      ) {
-        item.isSelected = this.isSelectedAll;
-      }
-    });
-
-    // Keep custom values intact
-    const customChips = this.selectedOptions.filter((opt) =>
-      this.isObject(opt)
-        ? !this.optionsList.some(
-            (o) =>
-              o[this.autoCompleteMultiSelectConfig.textField] ===
-              opt[this.autoCompleteMultiSelectConfig.textField]
-          )
-        : !this.optionsList.includes(opt)
-    );
-
-    const selectedOptionItems = this.optionsList.filter(
-      (opt) => opt.isSelected
-    );
-
-    this.selectedOptions = [...customChips, ...selectedOptionItems];
-
-    this.onItemSelection.emit(this.selectedOptions);
-  }
-
-  /**
-   * @description method to removeChip
-   * @author Shiva Kant
-   */
-  removeChip(item: any) {
-    // Remove from selectedOptions
-    this.selectedOptions = this.selectedOptions.filter((opt) =>
-      this.isObject(opt)
-        ? opt[this.autoCompleteMultiSelectConfig.textField] !==
-          (this.isObject(item)
-            ? item[this.autoCompleteMultiSelectConfig.textField]
-            : item)
-        : opt !== item
-    );
-
-    // If item corresponds to an optionsList entry, unselect it there too
-    if (this.isObject(item)) {
-      const idx = this.optionsList.findIndex(
-        (o: any) =>
-          this.isObject(o) &&
-          o[this.autoCompleteMultiSelectConfig.textField] ===
-            item[this.autoCompleteMultiSelectConfig.textField]
-      );
-      if (idx > -1) {
-        this.optionsList[idx].isSelected = false;
-      }
-    } else {
-      // string case
-      const idx = this.optionsList.findIndex((o) => o === item);
-      if (idx > -1) {
-        this.optionsList[idx].isSelected = false;
-      }
-    }
-
-    // update select all state & emit
-    this.updateSelectAllState();
-    this.onItemSelection.emit(this.selectedOptions);
-  }
-  /**
-   * @description method to update dropdown list state on input type
-   * @author Shiva Kant
-   */
-  updateDropdownStatus() {
-    this.showDropdown = true;
-  }
-
-  /**
-   * @description method to check if the list is Array of string or object
-   * @author Shiva Kant
-   * @param data this is the any one one item of list
-   * @returns boolean
-   */
-  isObject(data: any): boolean {
-    const type = typeof data;
-    return data && type != 'string';
-  }
-  /**
-   * @description This method is use to close dropdown on onClickEnter
-   * @author Shiva Kant
-   */
-
-  onClickEnter(control?: any): void {
-    if (!this.inputValue.trim()) return;
-
-    // pattern check
-    if (this.autoCompleteMultiSelectConfig.pattern) {
-      const regex = new RegExp(this.autoCompleteMultiSelectConfig.pattern);
-      if (!regex.test(this.inputValue)) {
-        this.inputValue = '';
-        return;
-      }
-    }
-
-    const val = this.inputValue.trim();
-    const valLower = val.toLowerCase();
-
-    // Avoid duplicate
-    const exists = this.selectedOptions.some((opt) =>
-      this.isObject(opt)
-        ? opt[this.autoCompleteMultiSelectConfig.textField].toLowerCase() ===
-          valLower
-        : opt.toLowerCase() === valLower
-    );
-    if (exists) {
-      this.inputValue = '';
-      return;
-    }
-
-    // Try find matched item in optionsList
-    const matchedItem = this.isObject(this.optionsList?.[0])
-      ? this.optionsList.find(
-          (opt: any) =>
-            opt[this.autoCompleteMultiSelectConfig.textField].toLowerCase() ===
-            valLower
-        )
-      : this.optionsList.find((opt: any) => opt.toLowerCase() === valLower);
-
-    if (matchedItem) {
-      // If matched, ensure option is marked selected and present in selectedOptions
-      matchedItem.isSelected = true;
-      const already = this.selectedOptions.some((opt) =>
-        this.isObject(opt)
-          ? opt[this.autoCompleteMultiSelectConfig.textField] ===
-            matchedItem[this.autoCompleteMultiSelectConfig.textField]
-          : opt === matchedItem
-      );
-      if (!already) this.selectedOptions.push(matchedItem);
-    } else if (this.autoCompleteMultiSelectConfig.customInput) {
-      // create custom item and mark it selected
-      let newItem: any = val;
-      if (this.isObject(this.optionsList?.[0])) {
-        newItem = {
-          [this.autoCompleteMultiSelectConfig.idField]: null,
-          [this.autoCompleteMultiSelectConfig.textField]: val,
-          isSelected: true, // mark selected for consistency
-          __isCustom: true, // optional flag to identify custom items
-        };
-      }
-      this.selectedOptions.push(newItem);
-    }
-
-    // reset input but keep dropdown open (as you wanted)
-    this.inputValue = '';
-
-    // update select all state and emit
-    this.updateSelectAllState();
-    this.onItemSelection.emit(this.selectedOptions);
-  }
-  outsideClicked(): void {
-    this.showDropdown = false;
-  }
-  /**
-   * @description method to load more list
-   * @author Shiva Kant
-   * @param event
-   */
-  onDivScroll(event: any): void {
-    if (
-      event.target.offsetHeight + event.target.scrollTop >=
-        event.target.scrollHeight - 1 &&
-      this.optionsList.length
-    ) {
-      this.onScroll.emit();
-    }
-  }
-
-  updateSelectAllState() {
-    // only consider non-disabled items for select-all state
-    const selectable = this.optionsList.filter(
-      (opt: any) =>
-        !(
-          this.autoCompleteMultiSelectConfig.disabledField &&
-          opt[this.autoCompleteMultiSelectConfig.disabledField]
-        )
-    );
-    this.isSelectedAll =
-      selectable.length > 0 && selectable.every((opt: any) => !!opt.isSelected);
-  }
-}

package/src/lib/components/auto-complete-multi-select/index.ts

@@ -1 +0,0 @@
-export * from './auto-complete-multi-select.component'

package/src/lib/components/auto-complete-single-select/auto-complete-single-select.component.html

@@ -1,84 +0,0 @@
-<div class="main_container" catsOutsideClick (clickOutSide)="outsideClicked()">
-  <div class="input_container">
-    <div class="input_box">
-      <input
-        class="textTruncate"
-        type="text"
-        [(ngModel)]="inputValue"
-        (keyup.enter)="onClickEnter(inputValue)"
-        (keyup)="updateDropdownStatus()"
-        (input)="updateDropdownStatus()"
-        [placeholder]="autoSingleSelectConfig.placeholder"
-      />
-    </div>
-    <div class="arrow_icon" (click)="toggleDropdown()">
-      <img
-        src="images/chevron-up.svg"
-        alt="up-arrow"
-        [ngClass]="{ 'd-none': !showDropdown }"
-      />
-      <img
-        src="images/chevron-down.svg"
-        alt="down-arrow"
-        [ngClass]="{ 'd-none': showDropdown }"
-      />
-    </div>
-  </div>
-
-  @if (showDropdown) {
-  <div class="dropdown_list_single_auto_select">
-    <!-- if optionList is an array of object-->
-    @if (isObject(optionsList[0])) {
-    <ng-container>
-      <ul>
-        @for (item of optionsList; track $index) {
-        <ng-container>
-          @if
-          (item[autoSingleSelectConfig.textField].toLowerCase().includes(inputValue.toLowerCase())
-          || inputValue == '') {
-          <li
-            (click)="updateSelectedItem(item, 'object')"
-            [ngClass]="
-              autoSingleSelectConfig.disabledField &&
-              item[autoSingleSelectConfig.disabledField]
-                ? 'disabled_option'
-                : ''
-            "
-          >
-            <span class="textTruncate">
-              {{ item[autoSingleSelectConfig.textField] }}
-            </span>
-          </li>
-          }
-        </ng-container>
-        }
-      </ul>
-    </ng-container>
-    }
-
-    <!-- if optionList is an array of string-->
-    @if (!isObject(optionsList[0])) {
-    <ng-container>
-      <ul>
-        @for (item of optionsList; track $index) {
-        <ng-container>
-          @if (item.includes(inputValue) || inputValue == '') {
-          <li
-            [ngClass]="
-              autoSingleSelectConfig.disabledField &&
-              item[autoSingleSelectConfig.disabledField]
-                ? 'disabled_option'
-                : ''
-            "
-            (click)="updateSelectedItem(item, 'string')"
-          >
-            {{ item }}
-          </li>
-
-          } </ng-container
-        >}
-      </ul></ng-container
-    >}
-  </div>
-  }
-</div>

package/src/lib/components/auto-complete-single-select/auto-complete-single-select.component.scss

@@ -1,68 +0,0 @@
-@use "../../styles" as *;
-
-.main_container {
-  position: relative;
-  width: 100%;
-  .input_container {
-    @include flex(space-between, center);
-    @include box(100%, rem(56px));
-    @include border($radius: rem(8px));
-    padding: 0 rem(16px);
-    @include fontStyle(var(--fs-16), rem(24px));
-    background-color: var(--white);
-    color: var(--default);
-    cursor: pointer;
-
-    .input_box {
-      @include box(calc(100% - rem(24px)), 100%);
-      input {
-        @include fontStyle(var(--fs-16), rem(24px), 400);
-        color: var(--neutral-900);
-        @include box(100%, 100%);
-        border: none;
-        outline: none;
-      }
-      .drop_icon {
-        cursor: pointer;
-        @include box(rem(24px), rem(24px));
-        min-width: rem(24px);
-      }
-    }
-    .arrow_icon {
-      img {
-        max-width: rem(24px);
-      }
-    }
-  }
-  .dropdown_list_single_auto_select {
-    position: absolute;
-    width: 100%;
-    z-index: 2;
-    background: var(--white);
-    box-shadow: rem(0px) rem(12px) rem(16px) rem(-4px) var(--box-shadow);
-    @include border($radius: rem(8px));
-    top: rem(56px);
-
-    ul {
-      max-height: rem(284px);
-      overflow: auto;
-      list-style-type: none;
-      padding: rem(8px) 0;
-      li {
-        height: rem(56px);
-        @include flex(space-between, center);
-        @include fontStyle(var(--fs-16), rem(24px));
-        padding: rem(16px);
-        cursor: pointer;
-        color: var(--default);
-        &.disabled_option {
-          opacity: 0.4;
-          pointer-events: none;
-        }
-        &:hover {
-          background-color: var(--neutral-50);
-        }
-      }
-    }
-  }
-}

package/src/lib/components/auto-complete-single-select/auto-complete-single-select.component.ts

@@ -1,231 +0,0 @@
-import { Component, EventEmitter, forwardRef, Input, OnInit, Output, SimpleChanges } from '@angular/core';
-import { AbstractControl, FormControl, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors } from '@angular/forms';
-import { AutoCompleteSingleSelectConfig } from '../../modal/cats-ui.modal';
-import { CommonModule } from '@angular/common';
-import { OutsideClickDirective } from '../../directives/outside-click.directive';
-const noop = () => {};
-export const DROPDOWN_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => AutoCompleteSingleSelectComponent),
-  multi: true,
-};
-export const DROPDOWN_CONTROL_VALUE_VALIDATOR: any = {
-  provide: NG_VALIDATORS,
-  useExisting: forwardRef(() => AutoCompleteSingleSelectComponent),
-  multi: true,
-};
-@Component({
-  selector: 'cats-ui-input-single-select',
-  imports: [CommonModule, FormsModule, OutsideClickDirective],
-  templateUrl: './auto-complete-single-select.component.html',
-  styleUrl: './auto-complete-single-select.component.scss',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: AutoCompleteSingleSelectComponent,
-      multi: true,
-    },
-    DROPDOWN_CONTROL_VALUE_VALIDATOR,
-  ],
-})
-export class AutoCompleteSingleSelectComponent implements OnInit {
-  @Input() autoSingleSelectConfig: AutoCompleteSingleSelectConfig =
-    new AutoCompleteSingleSelectConfig();
-  @Input() placeholder = 'Enter or Select Option';
-  @Input() selectedItem: any;
-  @Input() optionsList: any[] = [];
-  @Input() parentNativeElement: any;
-  @Output() onItemSelection = new EventEmitter();
-  @Output() onScroll: any = new EventEmitter();
-  showDropdown: boolean = false;
-  inputValue: string = '';
-  selectedOption: any;
-  constructor() { }
-  inValid: boolean = false;
-  control!: FormControl<any>;
-  disableControl: boolean = false;
-  ngOnInit(): void { }
-  private onTouchedCallback: () => void = noop;
-  private onChangeCallback: (_: any) => void = noop;
-  ngOnChanges(_changes: SimpleChanges): void {
-    if (!_changes['optionList']?.currentValue) {
-  
-    } else {
-      this.writeValue(this.control?.value);
-    }
-  }
-  /**
-   * @description Method to toggle dropdown list
-   * @author Shiva Kant
-   */
-  toggleDropdown(): void {
-    this.showDropdown = !this.showDropdown;
-  }
-  /**
-   * @description method to update selected item
-   * @author Shiva Kant
-   * @param item this is selected item from list
-   * @param type type of list
-   * @returns none
-   */
-  updateSelectedItem(item: any, type: string): void {
-    if (type == 'object') {
-      this.inputValue = item[this.autoSingleSelectConfig.textField];
-    } else {
-      this.inputValue = item;
-    }
-    this.selectedOption = item;
-    this.showDropdown = false;
-    this.inValid = false;
-    this.onChangeCallback(item);
-
-    this.onTouchedCallback();
-    this.onItemSelection.emit(this.selectedOption);
-  }
-
-  writeValue(obj: any): void {
-    this.syncSelectionWithValue(obj);
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChangeCallback = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouchedCallback = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disableControl = isDisabled;
-  }
-  validate(control: AbstractControl): ValidationErrors | null {
-    this.control = control as FormControl;
-
-    if (!this.autoSingleSelectConfig.required) return null;
-
-    const val = control.value;
-
-    const isEmpty =
-      val === null ||
-      val === undefined ||
-      val === '' ||
-      (typeof val === 'object' && Object.keys(val).length === 0);
-
-    return isEmpty ? { required: true } : null;
-  }
-
-  // ---------- Helpers ----------
-  private syncSelectionWithValue(value: any): void {
-    this.selectedOption = null;
-    this.inputValue = '';
-
-    if (!value || !this.optionsList?.length) return;
-
-    if (typeof value !== 'object') {
-      this.selectedOption =
-        this.optionsList.find(
-          (o) =>
-            o === value ||
-            o?.[this.autoSingleSelectConfig.idField] === value ||
-            o?.[this.autoSingleSelectConfig.textField] === value,
-        ) ?? value;
-    } else {
-      this.selectedOption =
-        this.optionsList.find(
-          (o) =>
-            o[this.autoSingleSelectConfig.idField] ===
-            value[this.autoSingleSelectConfig.idField],
-        ) ?? value;
-    }
-
-    this.inputValue = this.isObject(this.selectedOption)
-      ? this.selectedOption[this.autoSingleSelectConfig.textField]
-      : this.selectedOption;
-  }
-  /**
-   * @description this method is use to update input value
-   */
-  updateInputValue(): void {
-    let data: any = null;
-
-    if (!this.inputValue || this.inputValue.trim() === '') {
-      this.selectedOption = null;
-      this.onChangeCallback(null);
-    } else {
-      if (this.isObject(this.optionsList?.[0])) {
-        data = {
-          [this.autoSingleSelectConfig.idField]: null,
-          [this.autoSingleSelectConfig.textField]: this.inputValue,
-        };
-      } else {
-        data = this.inputValue;
-      }
-
-      this.selectedOption = data;
-      this.onChangeCallback(data);
-    }
-
-    this.onTouchedCallback();
-    this.onItemSelection.emit(data);
-    this.control?.updateValueAndValidity();
-  }
-
-  /**
-   * @description method to update dropdown list state on input type
-   * @author Shiva Kant
-   */
-  updateDropdownStatus(): void {
-    if (!this.inputValue || this.inputValue.trim() === '') {
-      this.selectedOption = null;
-      this.onChangeCallback(null);
-
-      // force validation
-      this.control?.updateValueAndValidity();
-      this.showDropdown = false;
-      return;
-    }
-
-    this.showDropdown = true;
-  }
-
-  /**
-   * @description method to check if the list is Array of string or object
-   * @author Shiva Kant
-   * @param data this is the any one one item of list
-   * @returns boolean
-   */
-  isObject(data: any): boolean {
-    const type = typeof data;
-    return data && type != 'string';
-  }
-  /**
-   * @description This method is use to close dropdown on click outside
-   */
-  outsideClicked(): void {
-    if (this.showDropdown) {
-      if (this.autoSingleSelectConfig.customInput) {
-        this.updateInputValue();
-      }
-    }
-    this.showDropdown = false;
-  }
-  onClickEnter(control: any) {
-    if (this.autoSingleSelectConfig.customInput) {
-      this.updateInputValue();
-    }
-  }
-  /**
-   * @description method to load more list
-   * @author Shiva Kant
-   * @param event
-   */
-  onDivScroll(event: any): void {
-    if (
-      event.target.offsetHeight + event.target.scrollTop >=
-      event.target.scrollHeight - 1 &&
-      this.optionsList.length
-    ) {
-      this.onScroll.emit();
-    }
-  }
-}

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

@@ -1 +0,0 @@
-export * from './auto-complete-single-select.component';