cats-ui-lib 2.0.0 → 2.0.1

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

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

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

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

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

@@ -0,0 +1,195 @@
+@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");
+            }
+          }
+        }
+      }
+    }
+  }
+}