cats-data-grid 0.0.1 → 0.0.5

package/src/lib/renderers/common-renderer/common-renderer.component.scss

@@ -0,0 +1,256 @@
+@use "./../../styles" as *;
+
+// Action menu dropdown CSS starts here
+.action-menu {
+  position: relative;
+  text-align: center;
+  .action_dots {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    img {
+      max-width: rem(16px);
+    }
+  }
+  .menu {
+    background-color: var(--white);
+    box-shadow: 0px rem(12px) rem(16px) rem(-4px) var(--box-shadow);
+    @include border();
+    z-index: 99;
+    width: max-content;
+    min-width: rem(120px);
+    max-width: rem(200px);
+    position: absolute;
+    top: rem(10px);
+    .item_wrapper {
+      position: relative;
+      max-height: rem(240px);
+      overflow-y: auto;
+      margin: rem(4px) 0;
+      .menu_item {
+        min-height: rem(40px);
+        width: 100%;
+        padding: rem(10px) rem(16px);
+        @include flex(start, center, rem(8px));
+        cursor: pointer;
+        position: relative;
+        @include fontStyle(rem(14px), rem(20px), 400);
+        color: var(--neutral-600);
+        &.disabled_item {
+          color: var(--neutral-300);
+          pointer-events: none;
+          img {
+            opacity: 0.3;
+          }
+        }
+        &:hover {
+          background-color: var(--blue-50);
+        }
+        img {
+          @include box(rem(16px), rem(16px));
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+}
+
+// tag css starts here
+%more {
+  @include fontStyle(var(--fs-14), rem(20px), 500);
+  color: var(--neutral-500);
+  background-color: var(--white);
+  padding: rem(3px) rem(8px);
+  @include border();
+}
+
+.tag_wrapper {
+  position: relative;
+  @include flex(start, center, 6px);
+
+  .tag_chip {
+    @extend %more;
+    white-space: nowrap;
+    @include flex(start, center, rem(4px));
+    // max-width: rem(200px);
+
+    .circle {
+      @include box(rem(8px), rem(8px));
+      border-radius: 50%;
+      background-color: var(--neutral-500);
+
+      &.bg_error {
+        background-color: var(--red-700);
+      }
+      &.bg_pending {
+        background-color: var(--yellow-700);
+      }
+      &.bg_active {
+        background-color: var(--green-600);
+      }
+      &.bg_info {
+        background-color: var(--blue-700);
+      }
+    }
+    .suffix {
+      order: 1;
+    }
+    .icon {
+      max-width: rem(16px);
+      max-height: rem(16px);
+    }
+  }
+  .hidden_list {
+    display: flex;
+    .tag_more {
+      @extend %more;
+      cursor: pointer;
+      background-color: var(--neutral-50);
+    }
+
+    .tag_dropdown {
+      position: relative;
+      // @include positioning(100%, 0);
+      top: 100%;
+      right: 0;
+      max-width: rem(180px);
+      min-width: rem(120px);
+      max-height: rem(220px);
+      overflow: auto;
+      overflow-x: hidden;
+      background: var(--white);
+      @include border();
+      box-shadow: 0 rem(4px) rem(10px) rem(4px) var(--box-shadow);
+      z-index: 1;
+      padding: rem(8px);
+      // @include flex("", "", rem(8px), "", wrap);
+      @include flex("", "", rem(8px), column);
+      .dropdown_item {
+        @include fontStyle(var(--fs-14), rem(20px), 500);
+        color: var(--neutral-500);
+        padding: rem(3px) rem(8px);
+        // white-space: nowrap;
+        width: auto;
+        // width: fit-content;
+        @include border();
+      }
+    }
+  }
+
+  .tag_chip,
+  .hidden_list .tag_dropdown .dropdown_item {
+    &.active {
+      background-color: var(--green-100);
+      border-color: var(--green-200);
+      color: var(--green-700);
+    }
+    &.pending {
+      background-color: var(--yellow-100);
+      border-color: var(--yellow-300);
+      color: var(--yellow-700);
+    }
+    &.error {
+      background-color: var(--red-100);
+      border-color: var(--red-300);
+      color: var(--red-700);
+    }
+    &.info {
+      background-color: var(--blue-100);
+      border-color: var(--blue-300);
+      color: var(--blue-700);
+    }
+    &.disable {
+      background-color: var(--neutral-50);
+      border-color: var(--neutral-300);
+      color: var(--neutral-400);
+      cursor: not-allowed;
+    }
+  }
+}
+// tag css ends here
+
+.ellipsis,
+.textTruncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: rem(200px);
+}
+
+::ng-deep td:has(.action-menu:focus-within) {
+  z-index: 15 !important;
+}
+
+// .more_data_section{
+//   position: relative;
+
+//   .shsh{
+
+//   }
+// }
+
+.cell-value {
+  // line-height: 1 !important;
+  line-height: rem(18px) !important;
+
+  &.ellipsis,
+  .ellipsis {
+    max-width: -webkit-fill-available;
+    width: inherit;
+  }
+  &.ellipsis:hover {
+    .see_more_data {
+      display: flex;
+    }
+  }
+}
+
+:host::ng-deep .see_more_data {
+  position: absolute;
+  min-width: rem(140px);
+  max-width: rem(317px);
+  background-color: var(--white);
+  @include border($radius: rem(8px));
+  box-shadow: 0px rem(4px) rem(10px) 0px var(--box-shadow);
+  display: none;
+  flex-direction: column;
+  max-height: rem(250px);
+  overflow-y: auto;
+  // z-index: 14;
+  z-index: 1;
+  left: 0;
+  // top: rem(40px);
+  // padding: rem(6px) 0;
+  .item {
+    @include box(100%, "");
+    min-height: rem(40px);
+    @include flex("", start);
+    padding: rem(10px) rem(16px);
+    color: var(--neutral-500);
+    @include fontStyle(var(--fs-14), rem(20px), 500);
+    .desc {
+      text-wrap: wrap;
+      word-break: break-word;
+    }
+  }
+}
+
+.grid-link {
+  color: var(--blue-700);
+  cursor: pointer;
+  text-decoration: none;
+  user-select: none;
+}
+
+.grid-link:hover {
+  text-decoration: underline;
+}
+
+.grid-link:active {
+  opacity: 0.8;
+}
+
+.grid-link:focus {
+  outline: none;
+  text-decoration: underline;
+}

package/src/lib/renderers/common-renderer/common-renderer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommonRendererComponent } from './common-renderer.component';
+
+describe('CommonRendererComponent', () => {
+  let component: CommonRendererComponent;
+  let fixture: ComponentFixture<CommonRendererComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommonRendererComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommonRendererComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/renderers/common-renderer/common-renderer.component.ts

@@ -0,0 +1,302 @@
+import { Component, HostListener, signal } from '@angular/core';
+import { OutsideClickDirective } from '../../directives/outside-click.directive';
+import { AdaptivePositionDirective } from '../../directives/adaptive-position.directive';
+import { CommonModule } from '@angular/common';
+import { AddClassPipe } from '../../pipes/add-class.pipe';
+
+@Component({
+  selector: 'lib-common-renderer',
+  imports: [
+    OutsideClickDirective,
+    AdaptivePositionDirective,
+    CommonModule,
+    AddClassPipe,
+  ],
+  templateUrl: './common-renderer.component.html',
+  styleUrl: './common-renderer.component.scss',
+})
+export class CommonRendererComponent {
+  params: any;
+
+  private static _activeRowId = signal<number | null>(null);
+  private static _activeTagId = signal<string | null>(null);
+
+  // wrapper to access static signal easily
+  activeRowId = CommonRendererComponent._activeRowId;
+  activeTagId = CommonRendererComponent._activeTagId;
+  clickTimer: any = null;
+  clickDelay = 250;
+
+  maxVisible: number = 2;
+
+  cellInit(params: any, data: any) {
+    this.params = params;
+  }
+
+  /**
+   * @description Returns the renderer type defined in cellRendererParams.
+   * @author Anand Pandey
+   * @returns {string | undefined}
+   */
+  get type() {
+    return this.params?.cellParams?.type;
+  }
+
+  /**
+   * @description Returns the renderer subtype defined in cellRendererParams.
+   * @author Anand Pandey
+   * @returns {string | undefined}
+   */
+  get actionSubType() {
+    return this.params?.cellParams?.subType;
+  }
+
+  /**
+   * @description Returns the cell value from params or fallback to row data field.
+   * @author Anand Pandey
+   * @returns {any}
+   */
+  get value() {
+    return this.params?.value ?? this.params?.data?.[this.params?.field];
+  }
+
+  /**
+   * @description Returns the list of actions configured for the action menu.
+   * @author Anand Pandey
+   * @returns {any[]}
+   */
+  get actions() {
+    return this.params?.cellParams?.actions.map((action: any) => {
+      return {
+        ...action,
+        class: action.class || '',
+      };
+    });
+  }
+
+  /**
+   * @description Determines whether the current row's action menu should be open.
+   * @author Anand Pandey
+   * @returns {boolean}
+   */
+  get openActionMenu() {
+    return this.activeRowId() === this.params.data.rowId;
+  }
+
+  /**
+   * @description Emits a callback function defined in cellRendererParams.
+   * @author Anand Pandey
+   * @param {string} eventName
+   * @param {any} data
+   * @returns {void}
+   */
+  emit(eventName: string, data: any) {
+    const handler = this.params?.cellParams?.[eventName];
+    if (typeof handler === 'function') handler(data);
+  }
+
+  /**
+   * @description Handles switch toggle and emits value change event.
+   * @author Anand Pandey
+   * @param {Event} event
+   * @returns {void}
+   */
+  onToggle(event: any) {
+    this.emit('onToggle', {
+      row: this.params.data,
+      value: event.target.checked,
+    });
+  }
+
+  /**
+   * @description Toggles the three-dots action menu for the current row.
+   * @author Anand Pandey
+   * @returns {void}
+   */
+  onThreeDotsMenuClick() {
+    if (this.openActionMenu) {
+      this.activeRowId.set(null);
+    } else {
+      this.activeRowId.set(this.params.data.rowId);
+    }
+  }
+
+  /**
+   * @description Handles click on an action option and emits selected action event.
+   * @author Anand Pandey
+   * @param {any} action
+   * @returns {void}
+   */
+  onActionClick(action: any) {
+    this.activeRowId.set(null);
+    this.emit('onAction', {
+      row: this.params.data,
+      action,
+    });
+  }
+
+  linkSingleClick() {
+    if (this.clickTimer) {
+      clearTimeout(this.clickTimer);
+      this.clickTimer = null;
+    }
+    this.clickTimer = setTimeout(() => {
+      this.emit('onLinkClick', {
+        row: this.params.data,
+        event: 'singleClick',
+      });
+      this.clickTimer = null;
+    }, this.clickDelay);
+  }
+
+  linkDoubleClick() {
+    if (this.clickTimer) {
+      clearTimeout(this.clickTimer);
+      this.clickTimer = null;
+    }
+    this.emit('onLinkClick', {
+      row: this.params.data,
+      event: 'doubleClick',
+    });
+  }
+
+  /**
+   * @description Closes the action menu when clicking outside the component.
+   * @author Anand Pandey
+   * @param {Event} e
+   * @returns {void}
+   */
+  clickOutside(e: any) {
+    this.activeRowId.set(null);
+  }
+
+  /**
+   * @description Returns the complete list of tags after normalizing value input (supports array, object, string).
+   * @author Anand Pandey
+   * @returns {string[]}
+   */
+  get allTags(): any {
+    return this.transformValue('tagKey', 'tagValue');
+  }
+
+  /**
+   * @description Returns the subset of tags that should be visibly displayed in the UI based on maxVisible count.
+   * @author Anand Pandey
+   * @returns {string[]}
+   */
+  get visibleTags() {
+    return this.allTags.slice(0, this.maxVisible);
+  }
+
+  /**
+   * @description Returns the count of tags hidden behind the "+" more indicator.
+   * @author Anand Pandey
+   * @returns {number}
+   */
+  get hiddenCount() {
+    return Math.max(0, this.allTags.length - this.maxVisible);
+  }
+
+  /**
+   * @description Determines whether the dropdown should be open for the current row based on activeTagId.
+   * @author Anand Pandey
+   * @returns {boolean}
+   */
+  get openDropdown() {
+    return (
+      this.activeTagId() ===
+      `${this.params.col.fieldName}-${this.params.data.rowId}`
+    );
+  }
+
+  /**
+   * @description Handles hover entry and activates dropdown if cursor enters +icon, hidden-list, dropdown or its items.
+   * @author Anand Pandey
+   * @param {MouseEvent} event
+   * @returns {void}
+   */
+  toggleDropdown(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    if (
+      target &&
+      (target.closest('.hidden_list') ||
+        target.closest('.tag_more') ||
+        target.closest('.tag_dropdown') ||
+        target.closest('.dropdown_item') ||
+        this.openDropdown)
+    ) {
+      this.activeTagId.set(
+        `${this.params.col.fieldName}-${this.params.data.rowId}`,
+      );
+      return;
+    }
+    if (this.openDropdown) {
+      this.activeTagId.set(null);
+    }
+  }
+
+  /**
+   * @description Closes the dropdown only when cursor leaves the entire component area and not moving inside child elements.
+   * @author Anand Pandey
+   * @param {MouseEvent} event
+   * @returns {void}
+   */
+  closeDropdown(event: MouseEvent) {
+    const target = event.relatedTarget as HTMLElement;
+
+    if (
+      target &&
+      (target.closest('.tag_wrapper') ||
+        target.closest('.hidden_list') ||
+        target.closest('.tag_more') ||
+        target.closest('tag_dropdown') ||
+        target.closest('dropdown_item'))
+    ) {
+      return;
+    }
+    this.activeTagId.set(null);
+  }
+
+  /**
+   * @description Returns normalized link values derived from the cell `value`.
+   * Uses the configured `linkKey` from `cellParams` to extract display data
+   * @author Anand Pandey
+   * @returns {Array<{ linkValue: string; class: string }>} Normalized link values
+   */
+  get linkVal(): any {
+    return this.transformValue('linkKey', 'linkValue');
+  }
+
+  /**
+   * @description Normalizes the component `value` into a consistent array structure.
+   * @author Anand Pandey
+   * @param {string} key Key in `cellParams` used to determine which field to read from object values
+   * @param {string} valueProp Property name assigned to the normalized output value
+   * @returns {Array<{ [key: string]: string; class: string }>} Array of normalized value objects
+   */
+  transformValue(key: string, valueProp: any) {
+    const value = this.value;
+    if (!value) return [];
+
+    if (Array.isArray(value)) {
+      return value.map((val) => {
+        if (typeof val === 'object') {
+          return {
+            [valueProp]: val[this.params.cellParams?.[key]],
+            class: val['class'] || '',
+          };
+        } else {
+          return { [valueProp]: String(val).trim(), class: '' };
+        }
+      });
+    } else if (!Array.isArray(value) && typeof value === 'object') {
+      return [
+        {
+          [valueProp]: value[this.params.cellParams?.[key]],
+          class: value['class'] || '',
+        },
+      ];
+    }
+    return [{ [valueProp]: String(value).trim(), class: '' }];
+  }
+}

package/src/lib/services/cats-data-grid.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CatsDataGridService } from './cats-data-grid.service';
+
+describe('CatsDataGridService', () => {
+  let service: CatsDataGridService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CatsDataGridService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/services/cats-data-grid.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CatsDataGridService {
+
+  constructor() { }
+}

package/{styles → src/lib/styles}/_index.scss

@@ -1,3 +1,3 @@
-@forward "sass-utils";
-@forward "component";
-@forward "base";
+@forward "sass-utils";
+@forward "component";
+@forward "base";