cats-ui-lib 2.0.1 → 2.0.2

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

@@ -1,124 +0,0 @@
-<div class="main-wrapper" id="main-wrapper-single-select">
-  <div
-    class="single-select-dropdown"
-    (click)="toggleDropdown()"
-    [ngClass]="{
-      'border-danger':
-        (control?.touched || control?.dirty) &&
-        control?.invalid &&
-        control?.errors,
-      'disable-control': disableControl
-    }"
-  >
-    <div class="left_details">
-      @if(singleSelectConfig.prefixLabel){
-      <span class="predefine_label">
-        <p class="textTruncate">{{ singleSelectConfig.prefixLabel }}</p>
-      </span>
-      } @if (!isObjEmpty(selectedOption) &&
-      selectedOption[singleSelectConfig.textField]) {
-      <ng-container
-        [ngTemplateOutlet]="selectedData ? selectedData : defaultTemplate"
-        [ngTemplateOutletContext]="{ data: selectedOption }"
-      ></ng-container>
-
-      <ng-template #defaultTemplate let-data="data">
-        <span class="textTruncate">
-          {{ selectedOption[singleSelectConfig.textField] }}
-        </span>
-      </ng-template>
-      }@else if(selectedOption && isObjEmpty(selectedOption)){
-      <ng-container
-        [ngTemplateOutlet]="selectedData ? selectedData : defaultTemplate1"
-        [ngTemplateOutletContext]="{ data: selectedOption }"
-      ></ng-container>
-
-      <ng-template #defaultTemplate1 let-data="data">
-        <span class="textTruncate">
-          {{ selectedOption }}
-        </span>
-      </ng-template>
-      }@else{
-      <span class="placeholderColor textTruncate">{{
-        singleSelectConfig.placeholder
-      }}</span>
-
-      }
-    </div>
-    <span class="arrow_icon">
-      <img
-        src="images/chevron-up.svg"
-        alt=""
-        srcset=""
-        [ngClass]="{ 'd-none': !showDropdown }"
-      />
-      <img
-        src="images/chevron-down.svg"
-        alt=""
-        srcset=""
-        [ngClass]="{ 'd-none': showDropdown }"
-      />
-    </span>
-  </div>
-  @if (showDropdown) {
-  <div
-    class="dropdown-list"
-    id="container_scroll"
-    (scroll)="onDivScroll($event)"
-  >
-    @if (singleSelectConfig.enableSearch) {
-    <div class="search_bar">
-      <div class="input_box">
-        <img src="images/search.svg" class="search_icon" alt="" />
-        <input
-          type="text"
-          class="filter_search_box"
-          name=""
-          id=""
-          placeholder="Search here"
-          [(ngModel)]="searchText"
-        />
-        <img
-          src="images/x.svg"
-          class="cross_icon"
-          alt=""
-          (click)="searchText = ''"
-        />
-      </div>
-    </div>
-    }
-    <ul>
-      @if(isObjEmpty(this.optionList[0] || "")){ @for (option of
-      filteredOptionsValue; track $index) {
-      <li
-        (click)="updateSelectedOption(option)"
-        [ngClass]="{
-          disabled_option:
-            singleSelectConfig.disabledField &&
-            option[singleSelectConfig.disabledField]
-        }"
-      >
-        <span class="textTruncate">{{ option }}</span>
-      </li>
-      } @empty {
-      <li class="no_data">No Data Found.</li>
-      } } @else { @for (option of filteredOptionsValue; track $index) {
-      <li
-        (click)="updateSelectedOption(option)"
-        [ngClass]="{
-          disabled_option:
-            singleSelectConfig.disabledField &&
-            option[singleSelectConfig.disabledField]
-        }"
-      >
-        <span class="textTruncate">{{
-          option[singleSelectConfig.textField]
-        }}</span>
-      </li>
-      } @empty {
-      <li class="no_data">No Data Found.</li>
-      } }
-    </ul>
-  </div>
-  }
-</div>

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

@@ -1,134 +0,0 @@
-@use "../../styles" as *;
-
-.main-wrapper {
-  position: relative;
-  width: 100%;
-
-  &:has(#container_scroll) .single-select-dropdown {
-    border: rem(1px) solid var(--blue-700);
-  }
-
-  .single-select-dropdown {
-    @include flex(space-between, center);
-    @include box(100%, rem(56px));
-    @include border($radius: rem(8px));
-    padding: rem(16px);
-    @include fontStyle(var(--fs-16), rem(24px));
-    background-color: var(--white);
-    color: var(--default);
-    cursor: pointer;
-
-    .left_details {
-      @include flex("", center);
-      @include box(calc(100% - rem(24px)), "");
-    }
-    .arrow_icon {
-      img {
-        max-width: rem(24px);
-      }
-    }
-    &.disable_input {
-      pointer-events: none;
-      background-color: var(--neutral-50);
-    }
-    .predefine_label {
-      @include flex(start, center);
-      padding: 0 rem(8px);
-      border: none;
-      height: rem(56px);
-      @include fontStyle(var(--fs-16), rem(24px));
-      background-color: var(--neutral-300);
-      color: var(--default);
-      border-top-left-radius: rem(8px);
-      border-bottom-left-radius: rem(8px);
-      margin: 0 rem(16px) 0 rem(-17px);
-
-      p {
-        margin-bottom: 0;
-        max-width: rem(145px);
-      }
-    }
-    &.danger_outline {
-      border: rem(1px) solid var(--red);
-    }
-  }
-
-  .dropdown-list {
-    @include border($radius: rem(8px));
-    position: absolute;
-    width: 100%;
-    z-index: 2;
-    background: var(--white);
-    box-shadow: rem(0px) rem(12px) rem(16px) rem(-4px) var(--box-shadow);
-    top: rem(56px);
-
-    ul {
-      max-height: rem(284px);
-      overflow: auto;
-      list-style-type: none;
-      padding: rem(8px) 0;
-
-      &:has(.no_data) li:hover {
-        background-color: unset;
-        cursor: default;
-      }
-
-      li {
-        height: rem(56px);
-        @include flex(space-between, center);
-        @include fontStyle(var(--fs-16), rem(24px));
-        padding: rem(16px);
-        cursor: pointer;
-        color: var(--default);
-        &:hover {
-          background-color: var(--neutral-50);
-        }
-        &.disabled_option {
-          opacity: 0.3;
-          pointer-events: none;
-        }
-      }
-    }
-    .search_bar {
-      position: relative;
-      padding: rem(8px) rem(8px) 0;
-      .input_box {
-        @include box(100%, rem(48px));
-        // @include border(2px, solid, var(--blue-400), rem(18px));
-        @include border($radius: rem(8px));
-        @include flex(center, center, rem(8px));
-        padding: rem(8px) rem(16px);
-        overflow: hidden;
-
-        img {
-          @include box(rem(20px), rem(20px));
-          opacity: 0.5;
-        }
-        .filter_search_box {
-          flex-grow: 1;
-          border: none;
-          @include fontStyle(var(--fs-16), rem(24px), 400);
-          color: var(--default);
-        }
-        .cross_icon {
-          cursor: pointer;
-        }
-      }
-    }
-  }
-  .placeholderColor {
-    color: var(--neutral-400);
-  }
-}
-
-.main-wrapper .right-tick-icon {
-  display: none;
-}
-
-.main-wrapper ul li.selected {
-  background-color: var(--neutral-50);
-
-  .right-tick-icon {
-    display: block;
-  }
-}

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

@@ -1,264 +0,0 @@
-
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef } from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormControl,
-  FormsModule,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-} from '@angular/forms';
-import { SingleSelectConfig } from '../../modal/cats-ui.modal';
-
-const noop = () => {};
-export const SINGLE_SELECT_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => SingleSelectComponent),
-  multi: true,
-};
-export const SINGLE_SELECT_CONTROL_VALUE_VALIDATOR: any = {
-  provide: NG_VALIDATORS,
-  useExisting: forwardRef(() => SingleSelectComponent),
-  multi: true,
-};
-@Component({
-  selector: 'cats-ui-single-select',
-  imports: [CommonModule, FormsModule],
-  templateUrl: './single-select.component.html',
-  styleUrl: './single-select.component.scss',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: SingleSelectComponent,
-      multi: true,
-    },
-    SINGLE_SELECT_CONTROL_VALUE_VALIDATOR,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { tabindex: '0' },
-})
-export class SingleSelectComponent
-  implements OnInit, OnChanges, ControlValueAccessor
-{
-  @Input() optionList: any[] = [];
-  @Input() singleSelectConfig: SingleSelectConfig=new SingleSelectConfig();
-  @Input() selectedOption: any;
-  @Output() onSelection = new EventEmitter();
-  
-  showDropdown = false;
-  searchText: string = '';
-  inValid: boolean = false;
-  control!: FormControl<any> | null;
-  disableControl: boolean = false;
-  @Output() onScroll: any = new EventEmitter();
-  @Input() parentNativeElement: any;
-
-  @ContentChild('selectedData') selectedData!: TemplateRef<any>;
-
-  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) {
-      this.optionList = [];
-    } else {
-      if (this.optionList.length > 10) this.singleSelectConfig.enableSearch = true;
-      this.writeValue(this.control?.value);
-    }
-  }
-
-  /**
-   * @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 check if provide arg is an object or not
-   * @author Shiva Kant
-   * @param Obj:any
-   * @returns boolean
-   */
-  isObjEmpty(obj: any): boolean {
-    if (typeof obj == 'string' || typeof obj == 'number') return true;
-    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 {
-    this.selectedOption = item;
-    this.toggleDropdown();
-    this.inValid = false;
-    this.onChangeCallback(item);
-    this.onTouchedCallback();
-    this.onSelection.emit(item);
-  }
-
-  validate(control: FormControl): void {
-    this.control = control;
-  }
-
-  // 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;
-
-  // 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 obj this is provided by formcontrol
-   * @returns void
-   */
-  writeValue(obj: any): void {
-    this.selectedOption = '';
-
-    if (this.optionList.length && obj) {
-      if (typeof obj === 'string' || typeof obj === 'number') {
-        if (
-          typeof this.optionList?.[0] === 'string' ||
-          typeof this.optionList?.[0] === 'number'
-        ) {
-          if (this.optionList.includes(obj)) {
-            this.selectedOption = obj;
-          }
-        } else if (obj != '') {
-          for (const option of this.optionList) {
-            if (
-              option[this.singleSelectConfig.idField] == obj ||
-              option[this.singleSelectConfig.textField] == obj
-            ) {
-              this.selectedOption = option;
-              break;
-            }
-          }
-        }
-      } else {
-        if (
-          obj?.hasOwnProperty(this.singleSelectConfig.idField) &&
-          !this.isObjEmpty(this.optionList[0])
-        ) {
-          for (const option of this.optionList) {
-            if (
-              option[this.singleSelectConfig.idField] ==
-              obj[this.singleSelectConfig.idField]
-            ) {
-              this.selectedOption = option;
-              break;
-            }
-          }
-        }
-      }
-      setTimeout(() => {
-        this.onChangeCallback(this.selectedOption);
-      }, 0);
-      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.disableControl = 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.singleSelectConfig.required) {
-        this.inValid =
-          this.selectedOption == '' ||
-          JSON.stringify(this.selectedOption) == '{}';
-      }
-      if (this.showDropdown) this.onTouchedCallback();
-      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.optionList.length
-    ) {
-      this.onScroll.emit();
-    }
-  }
-  get filteredOptionsValue(): any[] {
-    if (!this.searchText || this.searchText.trim() === '') {
-      return this.optionList;
-    }
-    return this.optionList.filter((option) => {
-      if (typeof option != 'object') {
-        return option?.toLowerCase().includes(this.searchText.toLowerCase());
-      } else {
-        return option[this.singleSelectConfig.textField]
-          ?.toLowerCase()
-          .includes(this.searchText.toLowerCase());
-      }
-    });
-  }
-}

package/src/lib/components/tabs/index.ts

@@ -1,4 +0,0 @@
-export * from "./tab/tab.component";
-export * from "./tab/tab-item/tab-item.component";
-export * from "./tab-heading.directive";
-export * from './tab-content.directive'

package/src/lib/components/tabs/tab/tab-item/tab-item.component.html

@@ -1 +0,0 @@
-<p>tab-item works!</p>

package/src/lib/components/tabs/tab/tab-item/tab-item.component.ts

@@ -1,14 +0,0 @@
-import { Component, ContentChild } from '@angular/core';
-import { TabContentDirective } from '../../tab-content.directive';
-import { TabHeadingDirective } from '../../tab-heading.directive';
-
-@Component({
-  selector: 'cats-ui-tab-item',
-  imports: [],
-  templateUrl: './tab-item.component.html',
-  styleUrl: './tab-item.component.scss',
-})
-export class TabItemComponent {
-  @ContentChild(TabHeadingDirective) heading!: TabHeadingDirective;
-  @ContentChild(TabContentDirective) content!: TabContentDirective;
-}

package/src/lib/components/tabs/tab/tab.component.html

@@ -1,25 +0,0 @@
-<ul class="tab-header">
-  @for (item of items; track $index) {
-  <ng-container>
-    <li
-      class="tab-item"
-      [class.active]="activeTab === $index"
-      [class.disabled]="disabledTabs.includes($index)"
-      (click)="setActive($index)"
-    >
-      <ng-container *ngTemplateOutlet="item.heading.template"></ng-container>
-    </li>
-  </ng-container>
-
-  }
-</ul>
-
-<div class="tab-content">
-  @for (item of items; track $index) {
-  <ng-container>
-    @if (activeTab === $index) {
-    <ng-container *ngTemplateOutlet="item.content.template"></ng-container>
-    }
-  </ng-container>
-  }
-</div>

package/src/lib/components/tabs/tab/tab.component.scss

@@ -1,21 +0,0 @@
-.tab-header {
-  display: flex;
-  border-bottom: 1px solid #ccc;
-  gap: 8px;
-}
-
-.tab-item {
-  padding: 8px 12px;
-  cursor: pointer;
-  border-radius: 6px 6px 0 0;
-}
-
-.tab-item.active {
-  background: #1976d2;
-  color: white;
-}
-
-.tab-item.disabled {
-  opacity: .5;
-  cursor: not-allowed;
-}

package/src/lib/components/tabs/tab/tab.component.ts

@@ -1,37 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ContentChildren,
-  QueryList,
-} from '@angular/core';
-import { TabItemComponent } from './tab-item/tab-item.component';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'cats-ui-tab',
-  templateUrl: './tab.component.html',
-  styleUrls: ['./tab.component.scss'],
-  imports: [CommonModule],
-})
-export class TabComponent {
-  @Input() activeTab = 0;
-  @Input() disabledTabs: number[] = [];
-
-  @Output() selectTab: EventEmitter<number> = new EventEmitter<number>();
-
-  @ContentChildren(TabItemComponent) items!: QueryList<TabItemComponent>;
-
-  /**
-   * @description Sets active
-   * @author Shiva Kant
-   * @param index 
-   */
-  setActive(index: number) {
-    if (!this.disabledTabs.includes(index)) {
-      this.activeTab = index;
-      this.selectTab.emit(index); 
-    }
-  }
-}

package/src/lib/components/tabs/tab-content.directive.ts

@@ -1,9 +0,0 @@
-import { Directive, TemplateRef } from '@angular/core';
-
-@Directive({
-  selector: '[tabContent]',
-  standalone: true,
-})
-export class TabContentDirective {
-  constructor(public template: TemplateRef<any>) {}
-}

package/src/lib/components/tabs/tab-heading.directive.ts

@@ -1,9 +0,0 @@
-import { Directive, TemplateRef } from '@angular/core';
-
-@Directive({
-  selector: '[tabHeading]',
-  standalone: true
-})
-export class TabHeadingDirective {
-  constructor(public template: TemplateRef<any>) {}
-}

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

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

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

@@ -1,14 +0,0 @@
-<div class="toggle_button">
-  <label class="switch">
-    <input 
-      type="checkbox" 
-      [checked]="toggleConfig.checked" 
-      [disabled]="toggleConfig.disabled"
-      (change)="toggle()"
-    />
-    <span class="slider round"></span>
-      <span class="toggle-status">
-    {{ toggleConfig.checked ? 'ON' : 'OFF' }}
-  </span>
-  </label>
-</div>