cats-ui-lib 2.0.1 → 2.0.3

package/src/lib/components/input/input.component.ts

@@ -1,133 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  EventEmitter,
-  forwardRef,
-  Input,
-  Output,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormsModule,
-  NG_VALUE_ACCESSOR,
-  FormControl,
-  NG_VALIDATORS,
-  Validator,
-  Validators,
-} from '@angular/forms';
-import { InputConfig } from '../../modal/cats-ui.modal';
-
-@Component({
-  selector: 'cats-ui-input',
-  standalone: true,
-  imports: [CommonModule, FormsModule],
-  templateUrl: './input.component.html',
-  styleUrls: ['./input.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => InputComponent),
-      multi: true,
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => InputComponent),
-      multi: true,
-    },
-  ],
-})
-export class InputComponent implements ControlValueAccessor, Validator {
-  @Input() inputConfig!: InputConfig;
-  @Output() onKeyDown = new EventEmitter<{ value: string } & KeyboardEvent>();
-  @Output() onKeyUp = new EventEmitter<{ value: string } & KeyboardEvent>();
-
-  value: string = '';
-  disabled = false;
-  touched = false;
-  control: FormControl | null = null;
-  showPassword = false;
-  private onChange = (value: any) => {};
-  private onTouched = () => {};
-
-  /**
-   * @description Method to when value changes
-   * @author Shiva Kant
-   */
-  handleInput(event: Event) {
-    const target = event.target as HTMLInputElement;
-    this.value = target.value;
-    this.onChange(this.value);
-
-    if (this.control) {
-      this.control.markAsDirty();
-      this.control.updateValueAndValidity();
-    }
-  }
-  /**
-   * @description Method to Handle key down event
-   * @author Shiva Kant
-   */
-  handleKeyDown(event: KeyboardEvent) {
-    this.onKeyDown.emit({ value: this.value, ...event });
-  }
-
-  /**
-   * @description Method to handle key up event
-   * @author Shiva Kant
-   */
-  handleKeyUp(event: KeyboardEvent) {
-    this.onKeyUp.emit({ value: this.value, ...event });
-  }
-
-  /**
-   * @description Method to Handle blur (touched
-   * @author Shiva Kant
-   */
-
-  handleBlur(event: FocusEvent): void {
-    this.touched = true;
-    this.onTouched();
-    const control = (event.target as any)?.control;
-    control?.markAsTouched?.();
-  }
-  /**
-   * @description Method to ControlValueAccessor methods
-   * @author Shiva Kant
-   */
-
-  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.disabled = isDisabled;
-  }
-
-  /**
-   * @description Method to Validator interface
-   * @author Shiva Kant
-   */
-
-  validate(control: FormControl): any {
-    this.control = control;
-    if (this.inputConfig?.type === 'email') {
-      return Validators.email(control);
-    }
-    return null;
-  }
-/**
- * @description method to use show password
- * @author Shiva Kant
- */
-  togglePassword() {
-    this.showPassword = !this.showPassword;
-  }
-}

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

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

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

@@ -1,107 +0,0 @@
-<div class="main-wrapper">
-  <div
-    class="display-div"
-    (click)="toggleDropdown()"
-    [ngClass]="{
-      'border-danger': this.inValid,
-      'disable-control': disabledControl
-    }"
-  >
-    <div class="left_details">
-      @if(multiSelectConfig.prefixLabel){
-      <span class="predefine_label">
-        <p class="textTruncate">{{ multiSelectConfig.prefixLabel }}</p>
-      </span>
-      }
-      <div class="multi_label_wrapper">
-        @if (selectedOptions.length>0) { @for (item of selectedOptions; track
-        $index) { @if(multiSelectConfig.chipLimit>=$index+1){
-        <div class="input_text">
-          <span class="textTruncate">{{
-            item[multiSelectConfig.textField]
-          }}</span>
-          <!-- <i-feather name="x" (click)="$event.stopPropagation();updateSelectedOption(item)"></i-feather> -->
-          <img
-            src="images/x.svg"
-            (click)="$event.stopPropagation(); updateSelectedOption(item)"
-            class="cross_icon"
-            alt=""
-          />
-        </div>
-        } } } @else{
-        <span class="placeholderColor textTruncate">{{
-          multiSelectConfig.placeholder
-        }}</span>
-        } @if(multiSelectConfig.chipLimit < selectedOptions.length) {
-        <div class="view_more">
-          +{{ selectedOptions.length - multiSelectConfig.chipLimit }}
-        </div>
-        }
-      </div>
-    </div>
-    <span class="arrow_icon">
-      <img
-        src="images/chevron-up.svg"
-        alt=""
-        [ngClass]="{ 'd-none': !showDropdown }"
-      />
-      <img
-        src="images/chevron-down.svg"
-        alt=""
-        [ngClass]="{ 'd-none': showDropdown }"
-      />
-    </span>
-  </div>
-  @if (showDropdown) {
-  <div class="dropdown-list" id="container_scroll">
-    @if (multiSelectConfig.enableSearch) {
-    <div class="search_bar">
-      <div class="input_box">
-        <img src="images/search.svg" 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 (multiSelectConfig.selectAll && optionList.length>0) {
-      <li (click)="checkUncheckAll()">
-        <span class="checkbox_container">
-          <input type="checkbox" [checked]="isSelectedAll" />
-          @if(isSelectedAll){ UnSelectAll } @else{ SelectAll }
-        </span>
-      </li>
-      } @for (option of filteredOptionsValue; track $index) {
-      <li
-        class="checkbox_container"
-        (click)="updateSelectedOption(option)"
-        [ngClass]="{
-          disabled_option:
-            multiSelectConfig.disabledField &&
-            option[multiSelectConfig.disabledField]
-        }"
-      >
-        <input type="checkbox" [checked]="option.isSelected" />
-        <span class="textTruncate"
-          >{{ option[multiSelectConfig.textField] }}
-        </span>
-      </li>
-      } @empty {
-      <li class="no_data">No Data Found.</li>
-      }
-    </ul>
-  </div>
-  }
-</div>

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

@@ -1,195 +0,0 @@
-@use "../../styles" as *;
-.main-wrapper {
-  position: relative;
-  @include box(100%, rem(54px));
-  min-height: rem(54px);
-
-  &:has(#container_scroll) .display-div {
-    border: rem(1px) solid var(--blue-700);
-  }
-
-  .display-div {
-    @include flex(space-between, center, rem(12px));
-    @include border($radius: rem(8px));
-    padding: rem(16px);
-    @include box(auto, rem(56px));
-    @include fontStyle(var(--fs-16), rem(24px), 400);
-    background-color: var(--white);
-    color: var(--default);
-    cursor: pointer;
-
-    .left_details {
-      @include flex();
-      .multi_label_wrapper {
-        @include flex("", center, rem(14px));
-        %chip-style {
-          height: rem(40px);
-          background-color: var(--blue-50);
-          color: var(--blue-700);
-          border-radius: rem(16px);
-          padding: rem(8px);
-          @include flex("", center, rem(4px));
-          @include fontStyle(var(--fs-16), rem(28px));
-          text-wrap: nowrap;
-        }
-
-        .input_text {
-          @extend %chip-style;
-          @include flex(center, center, rem(4px));
-
-          span {
-            max-width: rem(120px);
-            font-weight: 400;
-          }
-          .cross_icon {
-            @include box(rem(20px), rem(20px));
-          }
-        }
-        .view_more {
-          @extend %chip-style;
-          margin-right: auto;
-          @include flex(center, center);
-          text-align: center;
-          max-width: rem(50px);
-          text-align: center;
-        }
-        .placeholderColor {
-          color: var(--neutral-400);
-        }
-      }
-      .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);
-        }
-      }
-    }
-    .arrow_icon {
-      img {
-        max-width: rem(24px);
-      }
-    }
-
-    &.danger_outline {
-      border: rem(1px) solid var(--red);
-    }
-    &:has(.view_more) .arrow_icon {
-      margin-left: rem(10px);
-    }
-  }
-
-  .dropdown-list {
-    position: absolute;
-    width: 100%;
-    z-index: 10;
-    background: var(--white);
-    @include border($radius: rem(8px));
-    box-shadow: 0 rem(12px) rem(16px) rem(-4px) var(--box-shadow);
-    top: rem(56px);
-    .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 {
-          opacity: 0.5;
-          @include box(rem(20px), rem(20px));
-        }
-
-        .filter_search_box {
-          flex-grow: 1;
-          border: none;
-          @include fontStyle(var(--fs-16), rem(24px), 400);
-          color: var(--default);
-        }
-        .cross_icon {
-          cursor: pointer;
-        }
-      }
-    }
-
-    ul {
-      list-style-type: none;
-      padding: 0;
-      margin-bottom: 0;
-      max-height: rem(281px);
-      overflow: auto;
-      li {
-        padding: rem(16px);
-        height: rem(56px);
-        @include flex(flex-start, center, rem(8px));
-        @include fontStyle(var(--fs-16), rem(24px));
-        cursor: pointer;
-        color: var(--default);
-        &.no_data:hover {
-          background-color: unset;
-          cursor: default;
-        }
-        &:hover {
-          background-color: var(--neutral-50);
-        }
-        &.disabled_option {
-          opacity: 0.3;
-          pointer-events: none;
-        }
-      }
-      // ------------------Checkbox Styles--------------------
-      .checkbox_container {
-        @include flex(flex-start, center, rem(12px));
-        @include fontStyle(var(--fs-16), rem(24px), 400);
-
-        input[type="checkbox"] {
-          appearance: none;
-          -webkit-appearance: none;
-          @include box(rem(24px), rem(24px));
-          min-width: rem(24px);
-          @include border();
-          cursor: pointer;
-          background-color: var(--white);
-          position: relative;
-          transition: all 0.2s ease;
-
-          // --- Default (unchecked) ---
-          &::after {
-            content: "";
-            display: none;
-            position: absolute;
-            @include position(rem(-1px), rem(-2px));
-            @include box(rem(24px), rem(24px));
-            background-size: contain;
-            background-repeat: no-repeat;
-            background-position: center;
-          }
-
-          // --- Checked State ---
-          &:checked {
-            border-color: var(--blue-600);
-            background-color: var(--blue-600);
-            &::after {
-              display: block;
-              background-image: url("/images/icon-checked.svg");
-            }
-          }
-        }
-      }
-    }
-  }
-}