cats-ui-lib 2.0.1 → 2.0.2

package/package.json

@@ -1,12 +1,23 @@
-{
-  "name": "cats-ui-lib",
-  "version": "2.0.1",
-  "peerDependencies": {
-    "@angular/core": ">=18 <22",
-    "@angular/common": ">=18 <22"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false
+{
+  "name": "cats-ui-lib",
+  "version": "2.0.2",
+  "peerDependencies": {
+    "@angular/core": ">=18 <22",
+    "@angular/common": ">=18 <22"
+  },
+  "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"
+    }
+  }
 }

package/ng-package.json

@@ -1,18 +0,0 @@
-{
-  "$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/src/lib/components/accordion/accordion-item/accordion-item.component.html

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

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

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

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

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

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

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

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

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

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

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

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

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