cats-ui-lib 2.0.0 → 2.0.1

package/ng-package.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/cats-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": ["src/lib/styles"]
+  },
+  "assets": [{
+      "input": "src/lib/styles",
+      "glob": "**/*.scss",
+      "output": "/styles"
+  },
+{
+  "input": "src/lib/assets",
+  "glob": "**/*",
+  "output": "assets"
+}]
+}

package/package.json

@@ -1,23 +1,12 @@
-{
-  "name": "cats-ui-lib",
-  "version": "2.0.0",
-  "peerDependencies": {
-    "@angular/common": "^20.3.0",
-    "@angular/core": "^20.3.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/cats-ui.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/cats-ui.mjs"
-    }
-  }
+{
+  "name": "cats-ui-lib",
+  "version": "2.0.1",
+  "peerDependencies": {
+    "@angular/core": ">=18 <22",
+    "@angular/common": ">=18 <22"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
 }

package/src/lib/components/accordion/accordion-item/accordion-item.component.html

@@ -0,0 +1,13 @@
+<div class="accordion-item">
+  <div class="accordion-header" (click)="toggle()">
+    <h3>{{ title }}</h3>
+    <img
+      [src]="isOpen() ? 'images/chevron-up.svg' : 'images/chevron-down.svg'"
+      alt=""
+    />
+  </div>
+
+  <div class="accordion-body" [class.open]="isOpen()">
+    <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+  </div>
+</div>

package/src/lib/components/accordion/accordion-item/accordion-item.component.scss

@@ -0,0 +1,36 @@
+@use "../../../styles" as *;
+
+.accordion-item {
+  @include border($radius: rem(8px));
+  margin-bottom: rem(12px);
+  &:has(.open) .accordion-header {
+    border-radius: rem(8px) rem(8px) 0 0;
+  }
+  .accordion-header {
+    @include flex(space-between, center);
+    background-color: var(--neutral-50);
+    padding: rem(8px) rem(16px);
+    height: rem(56px);
+    cursor: pointer;
+    border-radius: rem(8px);
+    h3 {
+      @include fontStyle(var(--fs-16), rem(28px), 600);
+    }
+    img {
+      max-width: rem(24px);
+    }
+  }
+  .accordion-body {
+    max-height: 0;
+    padding: 0 rem(8px);
+    overflow: hidden;
+    background: var(--white);
+    transition: max-height 0.4s ease, padding 0.3s;
+    /* When open */
+    &.open {
+      max-height: rem(500px);
+      padding: rem(15px) rem(10px);
+      border-radius: 0 0 rem(8px) rem(8px);
+    }
+  }
+}

package/src/lib/components/accordion/accordion-item/accordion-item.component.ts

@@ -0,0 +1,57 @@
+import {
+  Component,
+  ContentChild,
+  Inject,
+  Input,
+  TemplateRef,
+} from '@angular/core';
+import { AccordionComponent } from '../accordion.component';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'cats-ui-accordion-item',
+  imports: [CommonModule],
+  templateUrl: './accordion-item.component.html',
+  styleUrl: './accordion-item.component.scss',
+})
+export class AccordionItemComponent {
+  @Input() title: string = '';
+  @Input() index: number = 0;
+
+  // Change this to allow null instead of undefined
+  @ContentChild(TemplateRef) contentTemplate: TemplateRef<any> | null = null;
+
+  constructor(
+    @Inject(AccordionComponent) private accordion: AccordionComponent
+  ) {}
+
+  /**
+   * @description Determines whether open is
+   * @author Shiva Kant
+   * @returns true if open
+   */
+  isOpen(): boolean {
+    return this.accordion.isOpen(this.index);
+  }
+
+  /**
+   * @description Toggles accordion item component
+   * @author Shiva Kant
+   */
+  toggle(): void {
+    this.accordion.toggle(this.index);
+  }
+
+  /**
+   * @description perform any initialization after content is injected
+   * @author Shiva Kant
+   */
+  ngAfterContentInit(): void {
+    if (!this.contentTemplate) {
+      console.error(
+        'No content template provided for accordion item:',
+        this.title
+      );
+    }
+  }
+}

package/src/lib/components/accordion/accordion-item/index.ts

@@ -0,0 +1 @@
+export * from './accordion-item.component'

package/src/lib/components/accordion/accordion.component.html

@@ -0,0 +1,3 @@
+<div class="accordion">
+  <ng-content></ng-content> <!-- Will contain AccordionItem components -->
+</div>

package/src/lib/components/accordion/accordion.component.scss

@@ -0,0 +1,6 @@
+@use "../../styles" as *;
+
+.accordion {
+  width: 100%;
+  margin: 0 auto;
+}

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

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cats-ui-accordion',
+  imports: [],
+  templateUrl: './accordion.component.html',
+  styleUrl: './accordion.component.scss',
+})
+export class AccordionComponent {
+  openedIndex: number | null = null;
+
+  /**
+   * @description Toggles accordion component
+   * @author Shiva Kant
+   * @param index 
+   */
+  toggle(index: number): void {
+    this.openedIndex = this.openedIndex === index ? null : index;
+  }
+
+  /**
+   * @description Determines whether open is
+   * @author Shiva Kant
+   * @param index 
+   * @returns true if open 
+   */
+  isOpen(index: number): boolean {
+    return this.openedIndex === index;
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './accordion.component'
+export * from './accordion-item/accordion-item.component'

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

@@ -0,0 +1,125 @@
+<div class="main_container">
+  <div
+    class="input_container"
+    catsOutsideClick
+    (clickOutSide)="outsideClicked()"
+  >
+    <div class="chips_wrapper">
+      <!-- Chips -->
+      @for (item of selectedOptions; track $index) { @if ($index <
+      autoCompleteMultiSelectConfig.chipLimit) {
+      <div class="chip" (click)="$event.stopPropagation()">
+        <span class="textTruncate">
+          {{
+            isObject(item)
+              ? item[autoCompleteMultiSelectConfig.textField]
+              : item
+          }}
+        </span>
+        <img
+          src="images/x.svg"
+          class="cross_icon"
+          (click)="$event.stopPropagation(); removeChip(item)"
+        />
+      </div>
+      } }
+      <!-- +N counter -->
+      @if (selectedOptions.length > autoCompleteMultiSelectConfig.chipLimit) {
+      <div class="view_more">
+        +{{ selectedOptions.length - autoCompleteMultiSelectConfig.chipLimit }}
+      </div>
+      }
+      <!-- Input Box (always available) -->
+      <div class="input_box" (click)="$event.stopPropagation()">
+        <input
+          type="text"
+          [(ngModel)]="inputValue"
+          (keyup.enter)="onClickEnter()"
+          (keyup)="updateDropdownStatus()"
+          [placeholder]="
+            selectedOptions.length === 0
+              ? autoCompleteMultiSelectConfig.placeholder
+              : ''
+          "
+        />
+      </div>
+    </div>
+
+    <!-- Dropdown toggle -->
+    <div class="arrow_icon" (click)="toggleDropdown()">
+      <img
+        src="images/chevron-up.svg"
+        [ngClass]="{ 'd-none': !showDropdown }"
+      />
+      <img
+        src="images/chevron-down.svg"
+        [ngClass]="{ 'd-none': showDropdown }"
+      />
+    </div>
+  </div>
+
+  <!-- Dropdown list -->
+  @if (showDropdown) {
+  <div class="dropdown_list_multi_auto_select" id="container_scroll" (click)=" onDivScroll($event)">
+    <ul>
+      <!-- Select All -->
+      @if (autoCompleteMultiSelectConfig.selectAll) {
+      <li
+        class="checkbox_container select_all_item"
+        (click)="checkUncheckAll($event)"
+      >
+        <input
+          type="checkbox"
+          [checked]="isSelectedAll"
+          (click)="$event.stopPropagation(); checkUncheckAll($event)"
+        />
+        <span>{{ isSelectedAll ? "Unselect All" : "Select All" }}</span>
+      </li>
+      }
+
+      <!-- Object Options -->
+      @if (isObject(optionsList[0])) { @for (item of optionsList; track $index)
+      { @if (item[autoCompleteMultiSelectConfig.textField] .toLowerCase()
+      .includes(inputValue.toLowerCase()) || inputValue == "") {
+
+      <li
+        class="checkbox_container"
+        [ngClass]="{
+          disabled_option:
+            autoCompleteMultiSelectConfig.disabledField &&
+            item[autoCompleteMultiSelectConfig.disabledField]
+        }"
+        (click)="updateSelectedItem(item, 'object')"
+      >
+        <input
+          type="checkbox"
+          [checked]="item.isSelected"
+          (click)="$event.stopPropagation(); updateSelectedItem(item, 'object')"
+        />
+
+        <span class="textTruncate">{{
+          item[autoCompleteMultiSelectConfig.textField]
+        }}</span>
+      </li>
+      } } }
+
+      <!-- String Options -->
+      @if (!isObject(optionsList[0])) { @for (item of optionsList; track $index)
+      { @if (item.toLowerCase().includes(inputValue.toLowerCase()) || inputValue
+      == "") {
+      <li
+        class="checkbox_container"
+        (click)="updateSelectedItem(item, 'string')"
+      >
+        <input
+          type="checkbox"
+          [checked]="selectedOptions.includes(item)"
+          (click)="$event.stopPropagation(); updateSelectedItem(item, 'string')"
+        />
+        <span class="textTruncate">{{ item }}</span>
+      </li>
+      } } }
+    </ul>
+  </div>
+  }
+</div>

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

@@ -0,0 +1,138 @@
+@use "../../styles" as *;
+
+.main_container {
+  position: relative;
+  width: 100%;
+  .input_container {
+    @include flex(space-between, center, 0);
+    @include box(100%, rem(56px));
+    @include border($radius: rem(8px));
+    padding: 0 rem(16px);
+    background-color: var(--white);
+    color: var(--neutral-900);
+    cursor: pointer;
+
+    %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;
+    }
+    .chips_wrapper {
+      @include flex("", center, rem(12px), "", wrap);
+      @include box(calc(100% - rem(24px)), 100%);
+      .view_more {
+        @extend %chip-style;
+        margin-right: auto;
+        @include flex(center, center);
+        text-align: center;
+        max-width: rem(50px);
+        text-align: center;
+      }
+
+      .chip {
+        @extend %chip-style;
+        @include flex(space-between, center, rem(4px));
+        span {
+          max-width: rem(150px);
+          font-weight: 400;
+        }
+        .cross_icon {
+          max-width: rem(20px);
+        }
+      }
+    }
+    .input_box {
+      @include box(auto, 100%);
+      display: flex;
+      flex: 1;
+      input {
+        @include fontStyle(var(--fs-16), rem(24px), 400);
+        color: var(--default);
+        flex: 1;
+        border: none;
+        outline: none;
+      }
+    }
+    .arrow_icon {
+      img {
+        max-width: rem(24px);
+      }
+    }
+  }
+  .dropdown_list_multi_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 {
+      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);
+        &.disabled_option {
+          opacity: 0.4;
+          pointer-events: none;
+        }
+        &:hover {
+          background-color: var(--neutral-50);
+        }
+      }
+      // ------------------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");
+            }
+          }
+        }
+      }
+    }
+  }
+}