cats-data-grid 1.0.1 → 2.0.0

package/styles/sass-utils/_variable.scss

@@ -1,66 +1,88 @@
 :root {
-  --white: #fff;
-  --white-creame: #ebf3ff;
-  --border: #dae3f8;
-  --scrollbar: var(--border);
-  --textPrimary: #0b1c33;
-  --textPrimary70: #0b1c33b3;
-  --textSecondary: #556171;
-  --textSecondary50: #55617180;
-  --textSecondary70: #556171b3;
+  --white: #ffffff;
+  --white-50: rgba(255, 255, 255, 0.582);
 
-  --pink-10: #f9fbfe;
+  --black: #1f1f1f;
+  --default: #000000;
+  --black-900: #202224;
+  --pagination-text: var(--neutral-500);
+  --black-dust: #1a1a1a;
 
-  --ice-blue: #67adcf;
-  --primaryBlue: #017db9;
-  --primaryBlue70: #017db9be;
-  --blue-10: #edf4fe;
-  --blue-40: #e3f3fc;
-  --blue-50: #f2f5fa;
-  --blue-5050: #f2f5fa80;
-  --blue-100: #c8e2ff;
-  --blue-200: #a4cfff;
-  --blue-300: #2680ea;
-  --blue-500: #3788e5;
-  --blue-700: #007aff;
-  // --blue-70090: #007AFFE6;
+  // NEUTRAL-COLOR
+  --neutral-cross: #d9d9d9;
+  --neutral-40: #d5d7da;
+  --neutral-50: #f0f0f0;
+  --neutral-100: #e6e7e8;
+  --neutral-200: #dadbdc;
+  --neutral-300: #c0c2c5;
+  --neutral-400: #81858a;
+  --neutral-500: #434a51;
+  --neutral-600: #040d17;
+  --neutral-900: #010306;
 
-  --yellow-50: #ffeedf;
-  --yellow-100: #fed18f;
-  --yellow-200: #ffbca6;
-  --yellow-300: #f08a2b26;
-  --yellow-400: #e58900;
+  // BLUE COLOR
+  --blue-50: #f7fafe;
+  --blue-100: #eaf3fd;
+  --blue-200: #dfecfc;
+  --blue-300: #c8dff9;
+  --blue-400: #92bff4;
+  --blue-600: #2680ea;
+  --blue-700: #1c60af;
+  --blue-800: #1849d6;
 
-  --primaryOrange: #f05a2b;
-  --primaryOrange50: #f05a2b80;
-  --primaryOrange70: #f05a2bb3;
-  --orange-10: #fcf5eb;
-  --orange-200: #f7ac94;
-  --orange-300: #fb9676;
-  --theadBg: var(--blue-50);
+  // GREY COLOR
+  --grey-50: #e9eaeb;
+  --grey-100: #e2e8f0;
+  --grey-150: #d6d6d6;
+  --grey-200: #64748b;
+  --grey-300: #414651;
+  --grey-400: #8080808c;
+  --grey-600: #535862;
+  --light-grey: #81858a;
+  --dark-grey: #4a4a4a;
 
-  --pagination-bg: #f7fafe;
-  --blue-200: var(--border);
-  --neutral-200: #dadbdc;
-  --neutral-600: #040d17;
-  --toastShadow: #0000001f;
-  --dropdown-shadow: #00000014;
+  --green-50: #f7fbf7;
+  --green-100: #ecf4ec;
+  --green-200: #e1eee2;
+  --green-400: #9bc69d;
+  --green-600: #388e3c;
+  --green-700: #2a6a2d;
 
-  --green-50: #eaf8f1;
-  --green-100: #bde8d3;
-  --green-600: #27a468;
+  --red: #ff0000;
+  --red-50: #fdf7f7;
+  --red-100: #faeaea;
+  --red-200: #f7dfdf;
+  --red-300: #f0c9c9;
+  --red-700: #941e1e;
 
-  --red-10: #fcebef;
-  --red-20: #ca0000;
-  --red-30: #F7C1CE;
-  --error-red: #d03258;
-  --tableBorder: var(--border);
+  --yellow-50: #fffdf5;
+  --yellow-100: #fff9e7;
+  --yellow-200: #fff6da;
+  --yellow-300: #ffefc1;
+  // --yellow-400: #fff9e7;
+  --yellow-500: #bf7200;
+  --yellow-600: #ffc107;
+  --yellow-700: #bf9105;
+  --yellow-800: #806003;
+  --yellow-900: #bf9105;
 
-  --grey-50: #a5b0bf;
-  --grey-100: #333333;
-  --grey-200: #222A3D;
+  // Orange
+  --orange-50: rgba(255, 251, 245, 1);
+  --orange-100: #fff5e6;
+  --orange-200: #fff0d9;
+  --orange-600: #ff9800;
+  --orange-700: rgba(191, 114, 0, 1);
 
-  --capture-border: #9badca;
-  --captcha-bg: #f3f3f3;
-  --neutral-400: #81858a;
+  --box-shadow: #0a0d1214;
+  --grid-box-shadow: #0000000a;
+  --model-shadow: rgba(0, 0, 0, 0.08);
+  --canvas-shadow: #00000014;
+
+  --loader-border: #6f7b93;
+  --modal-bg: rgba(4, 13, 23, 0.3);
+  --checkbox-border: #0d6efd;
+
+  // FILTER COLOR
+  --filter-600: rgba(0, 0, 0, 0.644);
+  --feather-bg: #fafafa;
 }

package/lib/cats-data-grid.component.d.ts

@@ -1,323 +0,0 @@
-import { ChangeDetectorRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class CatsDataGridComponent implements OnChanges, OnInit {
-    private cd;
-    tableOptions: any;
-    totalRecords: number;
-    sortingRequired: boolean;
-    checkBoxSelection: boolean;
-    checkboxSelectionType: string;
-    rowData: any[];
-    colDefs: any[];
-    paginationRequired: boolean;
-    selectedRowEmpty: boolean;
-    filterRequired: boolean;
-    threeDotsMenuRequired: boolean;
-    height: number;
-    groupBy: string[];
-    onPaginationChange: EventEmitter<any>;
-    onCheckboxSelection: EventEmitter<any>;
-    onScrollEmitter: EventEmitter<any>;
-    filter: EventEmitter<any>;
-    activeFilterIndex: number | null;
-    originalRowData: any[];
-    pageDetails: any;
-    recordsToShow: any;
-    sortingColumnIndex: number;
-    sortingType: string;
-    selectedRow: any[];
-    pageSizeList: number[];
-    showPageSizeList: boolean;
-    dragOverIndex: null | number;
-    draggedIndex: null | number;
-    originalColDefs: any[];
-    filteredRowData: any[];
-    filteredData: any[];
-    currentColumn: any;
-    currentIndex: number;
-    menuVisible: boolean[];
-    menuPosition: any[];
-    activeFilters: Set<any>;
-    resizingColumnIndex: number | null;
-    startX: number;
-    startWidth: number;
-    isResizing: boolean;
-    groupedResult: any[];
-    constructor(cd: ChangeDetectorRef);
-    ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    /**
-     * @description Prepares and normalizes column definitions for filtering and menu behavior
-     * @author Anand Pandey
-     * @param {any[]} colDefs - Raw column definitions received from the parent.
-     * @returns {any[]} - Updated column definitions with filter/menu
-     */
-    getUpdatedColDefs(colDefs: any[]): any[];
-    normalizeSetFilterType(value: any, key: string): any[] | undefined;
-    /**
-     * @description - Evaluates a text-based filter condition on a given field value.
-     * @author Anand Pandey
-     * @param {string} type - The type of text filter to apply ('contains' | 'doesNotContain' | 'equals' etc).
-     * @param {string} fieldValue - The actual value from the data row being evaluated.
-     * @param {string} value - The user-entered filter value to compare against.
-     * @returns {boolean} `true` if the fieldValue satisfies the specified filter condition,
-     *                    otherwise `false`.
-     */
-    evaluateTextFilterCondition(type: string, fieldValue: string, value: string): boolean;
-    /**
-     * @description - Evaluates number/date filter conditions.
-     * @author Anand
-     * @param {string} type - Comparison operator ('=' | '>' | '<' | '>=' | '<=').
-     * @param {number|string} fieldValue - Actual value from the row (number or timestamp).
-     * @param {number|string} value - User-entered value for comparison.
-     * @returns {boolean} True if the condition matches, otherwise false.
-     */
-    evaluateNumDateFilterCondition(type: string, fieldValue: number | string, value: number | string): boolean;
-    /**
-     * @description Method to filter data according to filterType and comparator selection
-     * @author Anand Pandey
-     * @param {}
-     * @returns void
-     */
-    applyAllFilters(): void;
-    /**
-     * @description Method to change the data format to utc
-     * @author Anand Pandey
-     * @param {date} - date value to be changed
-     * @returns date in milliseconds
-     */
-    normalizeDate(dateStr: string): number | null;
-    /**
-     * @description
-     * Filters the available set options inside a Set Filter (checkbox filter)
-     * based on the user's search text. This updates only the list shown in
-     * the dropdown
-     * @author Anand Pandey
-     * @param col - Column definition object containing filter config
-     * @param event - Input event from the search textbox
-     * @returns void
-     */
-    filterSetOptions(col: any, event: any): void;
-    /**
-     * @description
-     * Toggles an individual checkbox option inside a Set Filter.   *
-     * @author Anand Pandey
-     * @param col - Column definition object
-     * @param opt - Selected option value
-     * @param event - Checkbox change event
-     * @returns void
-     */
-    toggleSetOption(col: any, opt: any, event: any): void;
-    /**
-     * @description  * Selects or deselects all checkbox options in the Set Filter.
-     * @author Anand Pandey
-     * @param col - Column definition object
-     * @param event - Checkbox change event
-     * @returns void
-     */
-    toggleSelectAll(col: any, event: any): void;
-    /**
-     * @description
-     * Checks whether all options inside a Set Filter are currently selected.
-     * @author Anand Pandey
-     * @param col - Column definition object
-     * @returns boolean - TRUE if all options are selected, otherwise FALSE.
-     */
-    isAllSelected(col: any): boolean;
-    /**
-     * @description
-     * Opens the three-dots column menu for the selected column.
-     * Opens only the menu belonging to the clicked column index
-     * @author Anand Pandey
-     * @param {MouseEvent} event - The click event triggered on the three-dots icon.
-     * @param {any} col - The column definition object for which menu is opened.
-     * @param {number} index - Index of the column whose menu has been requested.
-     * @returns {void}
-     */
-    openMenu(event: MouseEvent, col: any, index: number): void;
-    /**
-     * @description Sort from three dots menu pop up.
-     * @author Anand Pandey
-     * @param {fieldName} string - fieldname.
-     * @param {string} type - Type defines the sorting type whether this is ascending, descending.
-     * @returns {void}
-     */
-    onSort(fieldName: string, type: string): void;
-    /**
-     * @description Generates grouped data based on the selected `groupBy` columns..
-     * @author Anand Pandey
-     * @returns void
-     */
-    getGroupedData(): void;
-    /**
-     * @description Initializes column resize operation when the user presses the mouse on the resize handle.
-     * @author Anand Pandey
-     * @param {MouseEvent} event - The mousedown event triggered on the resize handle.
-     * @param {number} index - Index of the column being resized.
-     * @returns {void}
-     */
-    startResize(event: MouseEvent, index: number): void;
-    /**
-     * @description Handles column resizing as the mouse moves.
-     * @author Anand Pandey
-     * @param {MouseEvent} event - Mouse movement event during resizing.
-     * @returns {void}
-     */
-    onMouseMove: (event: MouseEvent) => void;
-    /**
-     * @description Stops the column resizing operation.
-     * Clears resizing state and removes mouse event listeners.
-     * @author Anand Pandey
-     * @param {MouseEvent} event - Mouse up event ending the resize action.
-     * @returns {void}
-     */
-    stopResize: (event: MouseEvent) => void;
-    /**
-     * @description Recursively groups row data into a hierarchical structure based on the provided group keys.
-     * @author Anand Pandey
-     * @param {any[]} data - The row data to be grouped.
-     * @param {string[]} groupKeys - Ordered list of column keys to group by.
-     * @returns {any[]} A hierarchical grouped structure containing nested group nodes.
-     */
-    groupData(data: any[], groupKeys: string[]): any;
-    /**
-     * @description Toggles the expand/collapse state of a group node.
-     * @author Anand Pandey
-     * @param {any} node - The group node whose expanded state needs to be toggled.
-     * @returns {void}
-     */
-    toggleGroup(node: any): void;
-    /**
-     * @description Pin column on the left side.
-     * @author Anand Pandey
-     * @param {any} col - The selected column details from table on clicking pin or unpin from three dots menu.
-     * @param {number} index - The index of column from table on clicking pin or unpin from three dots menu.
-     * @returns {void}
-     */
-    pinColumn(col: any, index: number): void;
-    /**
-     * @description Updates the horizontal left offsets of pinned columns by assigning cumulative widths to each pinned column and resetting non-pinned columns.
-     * @author Anand
-     * @returns void
-     */
-    updatePinnedOffsets(): void;
-    /**
-     * @description Method to parse column value from rowdata object
-     *  according to given field value in column Defination
-     * @author Tarun Kumar
-     * @param row - current row object
-     * @param toParse - field value
-     * @returns string
-     */
-    parseColValue(row: any, toParse: string): string;
-    /**
-     * @description method to reset table configuration
-     * @author Tarun Kumar
-     * @param none
-     * @returns void
-     */
-    resetTableConfig(): void;
-    /**
-     * @description method to set total pages count
-     * @author Tarun Kumar
-     * @param none
-     * @returns void
-     */
-    setPageCount(): void;
-    /**
-     * @description method to update table on page size change
-     * @author Tarun Kumar
-     * @param event
-     * @returns void
-     */
-    onPageSizeChanged(event: any): void;
-    /**
-     * @description method to update table on previous button click
-     * @author Tarun Kumar
-     */
-    onBtPrevClick(): void;
-    /**
-     * @description method to update table on next button click
-     * @author Tarun Kumar
-     */
-    onBtNextClick(): void;
-    /**
-     * @description method to update table on selecting any page randomly
-     * @author Tarun Kumar
-     * @param event
-     */
-    goToSelectedPage(event: any): void;
-    /**
-     * @description method to sort data according to type and column
-     * @author Tarun Kumar
-     * @param sortingColumIndex
-     * @param col
-     * @param sortingType
-     */
-    onSortingRowData(sortingColumIndex: number, col: any): void;
-    /**
-     * @description method to sort table in ascending order according to given field
-     * @param fieldName
-     */
-    ascendingOrder(fieldName: string): void;
-    /**
-     * @description method to sort table in descending order according to given field
-     * @param fieldName
-     */
-    descendingOrder(fieldName: string): void;
-    /**
-     * @description method to check/uncheck all rows on header checkbox selection/deselection
-     * @author Tarun Kumar
-     * @param event
-     */
-    onHeaderCheckboxChange(event: any): void;
-    /**
-     * @description method to check/uncheck row on row checkbox selection/deselection
-     * @author Tarun Kumar
-     * @param event
-     */
-    onRowCheckboxSelection(event: any): void;
-    /**
-     * @description method to check/uncheck all rows on header checkbox selection/deselection
-     * @author Tarun Kumar
-     * @param col
-     * @returns {object}
-     */
-    getStyle(col: any): object;
-    onClickOutside(): void;
-    checkCondition(data: any): boolean;
-    infinityScroll(event: any): void;
-    checkAllSelected(): boolean;
-    checkInterminate(): boolean;
-    /**
-     * @author Tarun Kumar
-     * @description function triggered when the drag starts
-     * @param {event object, index}
-     * @returns {void}
-     */
-    onDragStart(event: DragEvent, index: number): void;
-    /**
-     * @author Tarun Kumar
-     * @description function to track the index of the element being dragged over and allow dropping
-     * @param {event object, index}
-     * @returns {void}
-     */
-    onDragOver(event: DragEvent, index: number): void;
-    /**
-     * @author Tarun Kumar
-     * @description function to Reorder the items on drop
-     * @param {event object, index}
-     * @returns {void}
-     */
-    onDrop(event: DragEvent, index: number): void;
-    /**
-     * @author Tarun Kumar
-     * @description function to reset dragOverIndex when the drag ends
-     * @param {none}
-     * @returns {void}
-     */
-    onDragEnd(): void;
-    toggleFilter(col: any, index: number, event: MouseEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CatsDataGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CatsDataGridComponent, "cats-data-grid", never, { "tableOptions": { "alias": "tableOptions"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "rowData": { "alias": "rowData"; "required": false; }; "colDefs": { "alias": "colDefs"; "required": false; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "selectedRowEmpty": { "alias": "selectedRowEmpty"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "height": { "alias": "height"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; }, { "onPaginationChange": "onPaginationChange"; "onCheckboxSelection": "onCheckboxSelection"; "onScrollEmitter": "onScrollEmitter"; "filter": "filter"; }, never, never, true, never>;
-}

package/lib/directives/outside-click.directive.d.ts

@@ -1,10 +0,0 @@
-import { ElementRef, EventEmitter } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class OutsideClickDirective {
-    private elementRef;
-    clickOutside: EventEmitter<any>;
-    constructor(elementRef: ElementRef);
-    onClick(event: MouseEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<OutsideClickDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<OutsideClickDirective, "[appOutsideClick]", never, {}, { "clickOutside": "clickOutside"; }, never, never, true, never>;
-}

package/lib/directives/renderer-parser.directive.d.ts

@@ -1,15 +0,0 @@
-import { ElementRef, OnInit, ViewContainerRef } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class RendererParserDirective implements OnInit {
-    private el;
-    private er;
-    rowParam: any;
-    col: any;
-    api: any;
-    currentValue: any;
-    ref: any;
-    constructor(el: ViewContainerRef, er: ElementRef);
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RendererParserDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RendererParserDirective, "[appRendererParser]", never, { "rowParam": { "alias": "rowParam"; "required": false; }; "col": { "alias": "col"; "required": false; }; "api": { "alias": "api"; "required": false; }; "currentValue": { "alias": "currentValue"; "required": false; }; }, {}, never, never, true, never>;
-}

package/lib/pipes/add-class.pipe.d.ts

@@ -1,7 +0,0 @@
-import { PipeTransform } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class AddClassPipe implements PipeTransform {
-    transform(value: any, tableOption: any): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AddClassPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<AddClassPipe, "addClass", true>;
-}

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

@@ -1,6 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class CatsDataGridService {
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<CatsDataGridService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<CatsDataGridService>;
-}

package/public-api.d.ts

@@ -1,2 +0,0 @@
-export * from './lib/services/cats-data-grid.service';
-export * from './lib/cats-data-grid.component';