cats-data-grid 1.0.0 → 2.0.0

package/fesm2022/cats-data-grid.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, EventEmitter, HostListener, Output, Directive, Input, Component } from '@angular/core';
+import { Injectable, Pipe, EventEmitter, Output, Directive, Input, HostListener, Component } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 
 class CatsDataGridService {
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CatsDataGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CatsDataGridService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsDataGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsDataGridService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CatsDataGridService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsDataGridService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -24,10 +24,10 @@ class AddClassPipe {
         }
         return '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: AddClassPipe, isStandalone: true, name: "addClass" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AddClassPipe, isStandalone: true, name: "addClass" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'addClass'
@@ -40,21 +40,22 @@ class OutsideClickDirective {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    onClick(event) {
-        const targetElement = event.target;
-        // Guard clause: exit early if no target or not an element
-        if (!targetElement) {
-            return;
-        }
-        const clickInside = this.elementRef.nativeElement.contains(targetElement);
-        if (!clickInside) {
+    onClick = (event) => {
+        const target = event.target;
+        if (!this.elementRef.nativeElement.contains(target)) {
             this.clickOutside.emit(event);
         }
+    };
+    ngOnInit() {
+        document.addEventListener('click', this.onClick, true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OutsideClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: OutsideClickDirective, isStandalone: true, selector: "[appOutsideClick]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0 });
+    ngOnDestroy() {
+        document.removeEventListener('click', this.onClick, true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OutsideClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: OutsideClickDirective, isStandalone: true, selector: "[appOutsideClick]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OutsideClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OutsideClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appOutsideClick]',
@@ -62,9 +63,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { clickOutside: [{
                 type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }] } });
 
 class RendererParserDirective {
@@ -85,7 +83,7 @@ class RendererParserDirective {
             data: this.rowParam,
             value: this.currentValue,
             cellParams: this.col?.cellRendererParams,
-            col: this.col
+            col: this.col,
         };
         if (this.col?.cellRenderer?.prototype &&
             this.col.cellRenderer.prototype?.constructor == this.col.cellRenderer) {
@@ -109,10 +107,10 @@ class RendererParserDirective {
             this.er.nativeElement.appendChild(toltipDiv);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RendererParserDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: RendererParserDirective, isStandalone: true, selector: "[appRendererParser]", inputs: { rowParam: "rowParam", col: "col", api: "api", currentValue: "currentValue" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RendererParserDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: RendererParserDirective, isStandalone: true, selector: "[appRendererParser]", inputs: { rowParam: "rowParam", col: "col", api: "api", currentValue: "currentValue" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RendererParserDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RendererParserDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appRendererParser]',
@@ -127,20 +125,770 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }] } });
 
+class CommonInputComponent {
+    options = [];
+    selectedValue;
+    placeholder = 'Select';
+    elementType = 'dropdown';
+    valueChange = new EventEmitter();
+    showDropdown = false;
+    toggleDropdown() {
+        this.showDropdown = !this.showDropdown;
+    }
+    selectOption(option) {
+        this.selectedValue = option.value;
+        this.valueChange.emit(option.value);
+        this.showDropdown = false;
+    }
+    get selectedLabel() {
+        return (this.options.find((o) => o.value === this.selectedValue)?.label ||
+            this.placeholder);
+    }
+    // optional: close on outside click
+    closeOnOutsideClick(event) {
+        const target = event.target;
+        if (!target.closest('.text_filter_section')) {
+            this.showDropdown = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CommonInputComponent, isStandalone: true, selector: "lib-common-input", inputs: { options: "options", selectedValue: "selectedValue", placeholder: "placeholder", elementType: "elementType" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "closeOnOutsideClick($event)" } }, ngImport: i0, template: "<!-- dropdown -->\r\n@if(elementType === 'dropdown'){\r\n<div class=\"text_filter_section\">\r\n  <div class=\"single_select_dropdown\" (click)=\"toggleDropdown()\">\r\n    <div class=\"left_details\">\r\n      <span class=\"placeholderColor textTruncate\">\r\n        {{ selectedLabel }}\r\n      </span>\r\n    </div>\r\n\r\n    <span class=\"arrow_icon\">\r\n      <img\r\n        src=\"images/chevron-up.svg\"\r\n        [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n      />\r\n      <img\r\n        src=\"images/chevron-down.svg\"\r\n        [ngClass]=\"{ 'd-none': showDropdown }\"\r\n      />\r\n    </span>\r\n  </div>\r\n\r\n  @if (showDropdown) {\r\n  <div class=\"dropdown_list\" id=\"container_scroll\">\r\n    <ul>\r\n      @for (option of options; track option.value) {\r\n      <li (click)=\"selectOption(option)\">\r\n        <span class=\"textTruncate\">{{ option.label }}</span>\r\n      </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n}\r\n", styles: [".d-none{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-common-input', imports: [CommonModule], template: "<!-- dropdown -->\r\n@if(elementType === 'dropdown'){\r\n<div class=\"text_filter_section\">\r\n  <div class=\"single_select_dropdown\" (click)=\"toggleDropdown()\">\r\n    <div class=\"left_details\">\r\n      <span class=\"placeholderColor textTruncate\">\r\n        {{ selectedLabel }}\r\n      </span>\r\n    </div>\r\n\r\n    <span class=\"arrow_icon\">\r\n      <img\r\n        src=\"images/chevron-up.svg\"\r\n        [ngClass]=\"{ 'd-none': !showDropdown }\"\r\n      />\r\n      <img\r\n        src=\"images/chevron-down.svg\"\r\n        [ngClass]=\"{ 'd-none': showDropdown }\"\r\n      />\r\n    </span>\r\n  </div>\r\n\r\n  @if (showDropdown) {\r\n  <div class=\"dropdown_list\" id=\"container_scroll\">\r\n    <ul>\r\n      @for (option of options; track option.value) {\r\n      <li (click)=\"selectOption(option)\">\r\n        <span class=\"textTruncate\">{{ option.label }}</span>\r\n      </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n}\r\n", styles: [".d-none{display:none}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], elementType: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], closeOnOutsideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class AdaptivePositionDirective {
+    host;
+    dropdown;
+    trigger;
+    parentContainer;
+    matchWidth = true;
+    closeOnOutside = true;
+    isAction = false;
+    isColumnActionMenu = false;
+    resizeObserver;
+    isOpen = false;
+    menuItems = [];
+    focusedIndex = -1;
+    constructor(host) {
+        this.host = host;
+    }
+    ngAfterViewInit() {
+        this.setupBaseStyles();
+        this.observeResize();
+    }
+    // @HostListener('click', ['$event'])
+    // toggle(event: Event) {
+    //   event.stopPropagation();
+    //   this.isOpen ? this.close() : this.open();
+    // }
+    open() {
+        this.isOpen = true;
+        this.dropdown.classList.remove('hidden');
+        this.dropdown.setAttribute('role', 'listbox');
+        this.host.nativeElement.setAttribute('aria-expanded', 'true');
+        this.prepareItems();
+        this.positionDropdown();
+        if (this.closeOnOutside)
+            document.addEventListener('click', this.handleOutsideClick);
+    }
+    close() {
+        this.isOpen = false;
+        this.dropdown.classList.add('hidden');
+        this.host.nativeElement.setAttribute('aria-expanded', 'false');
+        document.removeEventListener('click', this.handleOutsideClick);
+        this.focusedIndex = -1;
+    }
+    positionDropdown() {
+        if (!this.trigger)
+            return;
+        const dropdown = this.host.nativeElement;
+        const parent = this.parentContainer ||
+            this.trigger.closest('.table_wrapper') ||
+            document.body ||
+            this.trigger.offsetParent;
+        if (!parent)
+            return;
+        const t = this.trigger.getBoundingClientRect();
+        const p = parent.getBoundingClientRect();
+        const dH = dropdown.offsetHeight;
+        const dW = dropdown.offsetWidth;
+        const spaceBelow = p.bottom - t.bottom;
+        const spaceAbove = t.top - p.top;
+        const spaceRight = p.right - t.left;
+        const spaceLeft = t.right - p.left;
+        if (spaceBelow < dH && spaceAbove > dH) {
+            dropdown.style.bottom = `${this.trigger.offsetHeight}px`;
+            dropdown.style.top = 'auto';
+            dropdown.classList.add('drop-up');
+            dropdown.classList.remove('drop-down');
+        }
+        if (spaceRight < dW && spaceLeft > dW) {
+            dropdown.style.right = '0';
+            dropdown.style.left = 'auto';
+            dropdown.classList.add('align-right');
+            if (this.isColumnActionMenu)
+                dropdown.style.right = '0';
+        }
+        if (this.isAction)
+            dropdown.style.right = '70px';
+        if (this.matchWidth)
+            dropdown.style.width = `${this.trigger.offsetWidth}px`;
+    }
+    handleKeys(e) {
+        if (!this.isOpen)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                this.moveFocus(1);
+                e.preventDefault();
+                break;
+            case 'ArrowUp':
+                this.moveFocus(-1);
+                e.preventDefault();
+                break;
+            case 'Home':
+                this.focusItem(0);
+                e.preventDefault();
+                break;
+            case 'End':
+                this.focusItem(this.menuItems.length - 1);
+                e.preventDefault();
+                break;
+            case 'Enter':
+            case ' ':
+                this.selectFocused();
+                e.preventDefault();
+                break;
+            case 'Escape':
+                this.close();
+                break;
+        }
+    }
+    moveFocus(delta) {
+        this.focusedIndex =
+            (this.focusedIndex + delta + this.menuItems.length) %
+                this.menuItems.length;
+        this.focusItem(this.focusedIndex);
+    }
+    focusItem(index) {
+        this.focusedIndex = index;
+        this.menuItems.forEach((i) => i.classList.remove('focused'));
+        const item = this.menuItems[index];
+        item.classList.add('focused');
+        item.scrollIntoView({ block: 'nearest' });
+    }
+    selectFocused() {
+        if (this.focusedIndex >= 0)
+            this.menuItems[this.focusedIndex].click();
+        this.close();
+    }
+    prepareItems() {
+        this.menuItems = Array.from(this.dropdown.querySelectorAll('[role="option"], li, div'));
+        this.menuItems.forEach((el) => el.setAttribute('tabindex', '-1'));
+    }
+    handleOutsideClick = (e) => {
+        const target = e.target;
+        if (!(target instanceof Node) ||
+            (!this.host.nativeElement.contains(target) &&
+                !this.dropdown.contains(target))) {
+            this.close();
+        }
+    };
+    setupBaseStyles() {
+        const dropdown = this.host.nativeElement;
+        dropdown.style.position = 'absolute';
+        this.host.nativeElement.setAttribute('role', 'button');
+        this.positionDropdown();
+    }
+    observeResize() {
+        const parent = this.parentContainer || this.host.nativeElement.offsetParent;
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.isOpen)
+                this.positionDropdown();
+        });
+        this.resizeObserver.observe(this.host.nativeElement);
+        this.resizeObserver.observe(this.trigger);
+        if (parent)
+            this.resizeObserver.observe(parent);
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdaptivePositionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: AdaptivePositionDirective, isStandalone: true, selector: "[adaptivePosition]", inputs: { dropdown: ["adaptive", "dropdown"], trigger: "trigger", parentContainer: "parentContainer", matchWidth: "matchWidth", closeOnOutside: "closeOnOutside", isAction: "isAction", isColumnActionMenu: "isColumnActionMenu" }, host: { listeners: { "keydown": "handleKeys($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdaptivePositionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[adaptivePosition]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dropdown: [{
+                type: Input,
+                args: ['adaptive']
+            }], trigger: [{
+                type: Input
+            }], parentContainer: [{
+                type: Input
+            }], matchWidth: [{
+                type: Input
+            }], closeOnOutside: [{
+                type: Input
+            }], isAction: [{
+                type: Input
+            }], isColumnActionMenu: [{
+                type: Input
+            }], handleKeys: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class CommonCalendarComponent {
+    cd;
+    datePipe;
+    dateTimeSelected = new EventEmitter();
+    dateConfig;
+    minDate;
+    maxDate;
+    preSelectedValue;
+    selectedDateTime;
+    currentDate = new Date();
+    currentMonth = this.currentDate.getMonth();
+    currentYear = this.currentDate.getFullYear();
+    selectedDate = null;
+    selectedTime = null;
+    calendar = [];
+    timeSlots = [];
+    rangeStart = null;
+    rangeEnd = null;
+    selectedMonth;
+    selectedYear;
+    control;
+    disableControl = false;
+    date = '';
+    calendarView = 'defaultView';
+    yearRange = [];
+    daysInMonth = [];
+    selectedDay = 0;
+    selectedStartDate;
+    selectedEndDate;
+    isOpen = false;
+    showYearSelector = false;
+    monthRange = {
+        '0': 'JAN',
+        '01': 'FEB',
+        '02': 'MAR',
+        '03': 'APR',
+        '04': 'MAY',
+        '05': 'JUN',
+        '06': 'JUL',
+        '07': 'AUG',
+        '08': 'SEP',
+        '09': 'OCT',
+        '10': 'NOV',
+        '11': 'DEC',
+    };
+    constructor(
+    // @Inject(LOCALE_ID) private locale: string,
+    cd, datePipe) {
+        this.cd = cd;
+        this.datePipe = datePipe;
+    }
+    ngOnChanges(_changes) {
+        if (!_changes['selectedDateTime']?.currentValue) {
+            this.selectedDateTime = [];
+        }
+        else {
+            this.writeValue(this.control?.value);
+        }
+    }
+    ngOnInit() {
+        this.generateYearRange();
+        // this.generateCalendar();
+        this.generateTimeRanges();
+        if (this.preSelectedValue) {
+            this.initializeCalendar();
+        }
+    }
+    onTouchedCallback = () => { };
+    onChangeCallback = () => { };
+    writeValue(value) {
+        if (value) {
+            this.selectedDateTime = value;
+            this.onChangeCallback(value);
+            this.cd.markForCheck();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (this.control) {
+            isDisabled ? this.control.disable() : this.control.enable();
+        }
+    }
+    /**
+     * @description Validates date time picker component
+     * @author Shiva Kant
+     * @param control
+     * @returns validate
+     */
+    validate(control) {
+        this.control = control;
+        const selected = this.date ? new Date(this.date) : null;
+        // Check required manually
+        const isRequired = control.validator && control.validator(control)?.['required'];
+        if ((isRequired || control.hasError('required')) &&
+            (!this.date || !this.selectedDay)) {
+            return { required: true };
+        }
+        else if (this.minDate && selected && selected < new Date(this.minDate)) {
+            return { minDate: true };
+        }
+        else if (this.maxDate && selected && selected > new Date(this.maxDate)) {
+            return { maxDate: true };
+        }
+        return null;
+    }
+    /**
+     * @description method to toggleCalendar
+     * @author Shiva Kant
+     */
+    toggleCalendar() {
+        this.isOpen = !this.isOpen;
+        if (this.date && this.isOpen) {
+            this.currentDate = new Date(this.date);
+            this.selectedDay = this.currentDate.getDate();
+        }
+        this.calendarView = 'defaultView';
+        this.generateCalendar();
+        if (this.isOpen) {
+            let ele = document.getElementsByClassName('calendar-footer');
+            setTimeout(() => {
+                ele[0]?.scrollIntoView();
+            });
+        }
+    }
+    /**
+     * @description Closes calendar
+     * @author Shiva Kant
+     */
+    closeCalendar() {
+        this.isOpen = false;
+        this.calendarView = 'defaultView';
+    }
+    /**
+     * @description Method to Gets month year
+     * @author Shiva Kant
+     * @returns month year
+     */
+    getMonthYear() {
+        return {
+            month: this.currentDate.toLocaleString('default', {
+                month: 'long',
+            }),
+            year: this.currentDate.toLocaleString('default', {
+                year: 'numeric',
+            }),
+        };
+    }
+    /**
+     * @description Method to Updates current year month
+     * @author Shiva Kant
+     */
+    updateCurrentYearMonth() {
+        this.currentYear = this.currentDate.getFullYear();
+        this.currentMonth = this.currentDate.getMonth();
+    }
+    /**
+     * @description Method to Selects year
+     * @author Shiva Kant
+     * @param year
+     */
+    selectYear(year) {
+        this.currentDate.setFullYear(year);
+        this.updateCurrentYearMonth();
+        this.showYearSelector = false;
+        this.calendarView = 'defaultView';
+        this.selectedDay = 0;
+        this.generateCalendar();
+    }
+    /**
+     * @description Method to Selects month
+     * @author Shiva Kant
+     * @param month
+     */
+    selectMonth(month) {
+        this.currentDate.setMonth(month);
+        this.updateCurrentYearMonth();
+        this.calendarView = 'defaultView';
+        this.selectedDay = 0;
+        this.generateCalendar();
+    }
+    /**
+     * @description Method to Previous year range
+     * @author Shiva Kant
+     */
+    previousYearRange() {
+        this.yearRange = this.yearRange.map((year) => year - 18);
+    }
+    /**
+     * @description Method to Next year range
+     * @author Shiva Kant
+     */
+    nextYearRange() {
+        this.yearRange = this.yearRange.map((year) => year + 18);
+    }
+    /**
+     * @description Method to Toggles year selector
+     * @author Shiva Kant
+     */
+    toggleYearSelector() {
+        this.showYearSelector = !this.showYearSelector;
+        this.generateYearRange();
+    }
+    /**
+     * @description Method to Generates year range
+     * @author Shiva Kant
+     */
+    generateYearRange() {
+        const currentYear = this.currentDate.getFullYear();
+        const startYear = currentYear - (currentYear % 20);
+        this.yearRange = Array.from({ length: 18 }, (_, i) => startYear + i);
+    }
+    /**
+     * @description Method to Determines whether date selectable is
+     * @author Shiva Kant
+     * @param date
+     * @returns true if date selectable
+     */
+    isDateSelectable(date) {
+        const min = this.minDate ? new Date(this.minDate) : null;
+        const max = this.maxDate ? new Date(this.maxDate) : null;
+        if (min && date < min)
+            return false;
+        if (max && date > max)
+            return false;
+        return true;
+    }
+    /**
+     * @description Method to Determines whether day disabled is
+     * @author Shiva Kant
+     * @param day
+     * @returns true if day disabled
+     */
+    isDayDisabled(day) {
+        const date = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), day);
+        return !this.isDateSelectable(date);
+    }
+    /**
+     * @description Method to Generates calendar
+     * @author Shiva Kant
+     */
+    generateCalendar() {
+        const year = this.currentDate.getFullYear();
+        const month = this.currentDate.getMonth();
+        const firstDayOfMonth = new Date(year, month, 1);
+        const firstWeekDay = (firstDayOfMonth.getDay() + 6) % 7; // Convert Sunday (0) to 6, Monday is 0
+        const daysInCurrentMonth = new Date(year, month + 1, 0).getDate();
+        const daysInPreviousMonth = new Date(year, month, 0).getDate();
+        const totalCells = 42; // 6 rows of 7 days
+        const calendarDays = [];
+        // Fill previous month days
+        for (let i = firstWeekDay - 1; i >= 0; i--) {
+            const day = daysInPreviousMonth - i;
+            const date = new Date(year, month - 1, day);
+            calendarDays.push({ day, date, isCurrentMonth: false });
+        }
+        // Fill current month days
+        for (let day = 1; day <= daysInCurrentMonth; day++) {
+            const date = new Date(year, month, day);
+            calendarDays.push({ day, date, isCurrentMonth: true });
+        }
+        // Fill next month days
+        const remaining = totalCells - calendarDays.length;
+        for (let day = 1; day <= remaining; day++) {
+            const date = new Date(year, month + 1, day);
+            calendarDays.push({ day, date, isCurrentMonth: false });
+        }
+        this.daysInMonth = calendarDays;
+    }
+    /**
+     * @description Method to Previous month
+     * @author Shiva Kant
+     */
+    previousMonth() {
+        this.currentDate.setMonth(this.currentDate.getMonth() - 1);
+        this.updateCurrentYearMonth();
+        this.selectedDay = 0;
+        this.generateCalendar();
+    }
+    /**
+     * @description Method to Next month
+     * @author Shiva Kant
+     */
+    nextMonth() {
+        this.currentDate.setMonth(this.currentDate.getMonth() + 1);
+        this.updateCurrentYearMonth();
+        this.selectedDay = 0;
+        this.generateCalendar();
+    }
+    /**
+     * @description Method to Initializes calendar when preSelectedValue  date
+     * @author Shiva Kant
+     * @returns calendar
+     */
+    initializeCalendar() {
+        if (!this.preSelectedValue)
+            return;
+        // Case 1: Single date (string or Date)
+        if (typeof this.preSelectedValue === 'string' ||
+            this.preSelectedValue instanceof Date) {
+            const date = new Date(this.preSelectedValue);
+            this.selectedDate = date.getDate();
+            this.selectedMonth = date.getMonth();
+            this.selectedYear = date.getFullYear();
+            this.selectedTime = this.formatTime(date);
+            // Update current view to show the month/year
+            this.currentDate = new Date(this.selectedYear, this.selectedMonth, this.selectedDate);
+            this.generateCalendar();
+        }
+        // Case 2: Range of dates
+        else if (this.preSelectedValue.start && this.preSelectedValue.end) {
+            const startDate = new Date(this.preSelectedValue.start);
+            const endDate = new Date(this.preSelectedValue.end);
+            // Patch component state
+            this.rangeStart = startDate.getDate();
+            this.rangeEnd = endDate.getDate();
+            this.selectedStartDate = startDate;
+            this.selectedEndDate = endDate;
+            this.selectedMonth = startDate.getMonth();
+            this.selectedYear = startDate.getFullYear();
+            // Set the current calendar view to the start month/year
+            this.currentDate = new Date(this.selectedYear, this.selectedMonth, 1);
+            this.generateCalendar();
+            // Optional: If your calendar requires a single selectedTime for range, you could pick start or end
+            this.selectedTime = this.formatTime(startDate);
+            // Emit initial range value
+            this.emitDateTime();
+        }
+    }
+    /**
+     * @description Method to Selects date
+     * @author Shiva Kant
+     * @param date
+     */
+    selectDate(date) {
+        const selectedFullDate = new Date(this.currentYear, this.currentMonth, date);
+        selectedFullDate.setHours(0, 0, 0, 0);
+        this.selectedMonth = this.currentMonth;
+        this.selectedYear = this.currentYear;
+        if (this.dateConfig.selectionMode === 'single') {
+            this.selectedDate = date;
+            this.rangeStart = null;
+            this.rangeEnd = null;
+        }
+        else {
+            if (!this.rangeStart || this.rangeEnd) {
+                this.rangeStart = date;
+                this.rangeEnd = null;
+            }
+            else {
+                this.rangeEnd = date < this.rangeStart ? this.rangeStart : date;
+                this.rangeStart = date < this.rangeStart ? date : this.rangeStart;
+            }
+        }
+        this.emitDateTime();
+    }
+    /**
+     * @description Method to Selects time
+     * @author Shiva Kant
+     * @param time
+     */
+    selectTime(time) {
+        this.selectedTime = time;
+        this.emitDateTime();
+    }
+    /**
+     * @description Method to Determines whether selected date is
+     * @author Shiva Kant
+     * @param date
+     * @returns
+     */
+    isSelectedDate(date, month, year) {
+        if (this.dateConfig.selectionMode === 'single') {
+            // Check if the day, month, and year match
+            return (this.selectedDate === date &&
+                this.selectedMonth === month &&
+                this.selectedYear === year);
+        }
+        else if (this.dateConfig.selectionMode === 'range') {
+            // Range selection checks, ensuring both start and end dates are within the same month and year
+            return !!((this.rangeStart &&
+                this.rangeStart === date &&
+                this.selectedMonth === month &&
+                this.selectedYear === year) ||
+                (this.rangeEnd &&
+                    this.rangeEnd === date &&
+                    this.selectedMonth === month &&
+                    this.selectedYear === year) ||
+                (this.rangeStart &&
+                    this.rangeEnd &&
+                    date > this.rangeStart &&
+                    date < this.rangeEnd &&
+                    this.selectedMonth === month &&
+                    this.selectedYear === year));
+        }
+        return false;
+    }
+    /**
+     * @description Method to Generates time ranges
+     * @author Shiva Kant
+     */
+    generateTimeRanges() {
+        const startTime = new Date();
+        startTime.setHours(0, 0, 0, 0);
+        this.timeSlots = Array.from({ length: 48 }, (_, i) => {
+            const time = new Date(startTime.getTime() + i * 30 * 60 * 1000);
+            return { value: time, label: this.formatTime(time) };
+        });
+    }
+    /**
+     * @description Method to Formats time
+     * @author Shiva Kant
+     * @param date
+     * @returns time
+     */
+    formatTime(date) {
+        return date.toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: true,
+        });
+    }
+    /**
+     * @description Method to Formats date time
+     * @author Shiva Kant
+     * @param fullDate
+     * @param selectedTime
+     * @returns date time
+     */
+    formatDateTime(fullDate, selectedTime) {
+        const date = new Date(fullDate);
+        if (!selectedTime) {
+            // Only date formatting when time not required
+            return this.datePipe.transform(date, 'MM/dd/yyyy');
+        }
+        const [time, period] = selectedTime.split(' ');
+        let [hours, minutes] = time.split(':').map(Number);
+        // Convert 12-hour → 24-hour
+        if (period === 'PM' && hours !== 12)
+            hours += 12;
+        if (period === 'AM' && hours === 12)
+            hours = 0;
+        date.setHours(hours, minutes, 0, 0);
+        return this.datePipe.transform(date, 'yyyy/MM/dd hh:mm a');
+    }
+    /**
+     * @description Method to Emits date time
+     * @author Shiva Kant
+     * @returns date time
+     */
+    emitDateTime() {
+        if (this.dateConfig.enableTime && !this.selectedTime) {
+            return; // wait until user selects time
+        }
+        if (this.dateConfig.selectionMode === 'single') {
+            if (!this.selectedDate)
+                return;
+            const fullDate = new Date(this.currentYear, this.currentMonth, this.selectedDate);
+            this.selectedDateTime = this.formatDateTime(fullDate || '', this.dateConfig.enableTime ? this.selectedTime : null);
+            this.writeValue(this.selectedDateTime);
+            this.date = this.selectedDate;
+            this.dateTimeSelected.emit(this.selectedDateTime);
+            this.closeCalendar();
+            return;
+        }
+        if (this.dateConfig.selectionMode === 'range') {
+            if (!this.rangeStart || !this.rangeEnd)
+                return;
+            const startDate = new Date(this.currentYear, this.currentMonth, this.rangeStart);
+            const endDate = new Date(this.currentYear, this.currentMonth, this.rangeEnd);
+            const startDateTime = this.formatDateTime(startDate, this.dateConfig.enableTime ? this.selectedTime : null);
+            const endDateTime = this.formatDateTime(endDate, this.dateConfig.enableTime ? this.selectedTime : null);
+            const rangeResult = { start: startDateTime, end: endDateTime };
+            this.writeValue(rangeResult);
+            this.dateTimeSelected.emit(rangeResult);
+            this.closeCalendar();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonCalendarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CommonCalendarComponent, isStandalone: true, selector: "lib-common-calendar", inputs: { dateConfig: "dateConfig", minDate: "minDate", maxDate: "maxDate", preSelectedValue: "preSelectedValue" }, outputs: { dateTimeSelected: "dateTimeSelected" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: CommonCalendarComponent,
+                multi: true,
+            },
+            DatePipe,
+        ], usesOnChanges: true, ngImport: i0, template: "<!-- Calendar -->\r\n\r\n<div\r\n  class=\"calendar_wrapper\"\r\n  appOutsideClick\r\n  (clickOutSide)=\"closeCalendar()\"\r\n  [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n  <div class=\"date_box\" (click)=\"toggleCalendar()\">\r\n    @if (dateConfig.selectionMode=='single') {\r\n\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"Select Date\"\r\n      [value]=\"selectedDateTime\"\r\n      readonly\r\n      [disabled]=\"disableControl\"\r\n    />\r\n    } @else {\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"Select date Range\"\r\n      [value]=\"\r\n        selectedDateTime.start\r\n          | date\r\n            : 'MM/dd/yyyy' +\r\n                ' - ' +\r\n                (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n      \"\r\n      readonly\r\n    />\r\n    }\r\n    <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n    <img src=\"images/calendar.svg\" alt=\"\" />\r\n  </div>\r\n  @if (isOpen) {\r\n  <div class=\"calendar-popup\">\r\n    <div class=\"calendar_container\">\r\n      <!-- for the header -->\r\n      <div class=\"calendar-header\">\r\n        <div class=\"month-year\">\r\n          <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n            {{ getMonthYear().month }},</span\r\n          >\r\n          <div class=\"year\" (click)=\"calendarView = 'yearView'\">\r\n            <span>\r\n              {{ getMonthYear().year }}\r\n            </span>\r\n            <img src=\"images/chevron-down.svg\" class=\"year_arrow\" alt=\"\" />\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"arrow_container\">\r\n          <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n            <img src=\"images/arrow-up.svg\" alt=\"\" />\r\n          </span>\r\n\r\n          <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n            <img src=\"images/arrow-down.svg\" alt=\"\" />\r\n          </span>\r\n        </div>\r\n      </div>\r\n      @if(calendarView === \"monthView\"){\r\n      <div class=\"month-grid\">\r\n        @for(month of monthRange | keyvalue; track $index){\r\n        <span\r\n          class=\"month\"\r\n          (click)=\"selectMonth(month.key)\"\r\n          [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n          >{{ month.value }}</span\r\n        >\r\n        }\r\n      </div>\r\n      } @else if(calendarView === 'yearView'){\r\n      <div class=\"year-selector\">\r\n        <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n          <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n        </span>\r\n        <div class=\"year-grid\">\r\n          @for(year of yearRange;track $index){\r\n          <span\r\n            class=\"year\"\r\n            (click)=\"selectYear(year)\"\r\n            [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n            >{{ year }}</span\r\n          >\r\n          }\r\n        </div>\r\n        <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n          <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n        </span>\r\n      </div>\r\n      } @else {\r\n      <div class=\"calendar_body\">\r\n        <div class=\"calendar-grid\">\r\n          <!-- Day names -->\r\n          @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index)\r\n          {\r\n\r\n          <div class=\"days_name\">\r\n            {{ day }}\r\n          </div>\r\n          }\r\n\r\n          <!-- Calendar dates -->\r\n          @for (dayObj of daysInMonth; track $index) {\r\n          <div\r\n            class=\"calendar-day\"\r\n            [ngClass]=\"{\r\n              active:\r\n                dayObj.isCurrentMonth &&\r\n                dateConfig.selectionMode === 'single' &&\r\n                isSelectedDate(\r\n                  dayObj.day,\r\n                  dayObj.date.getMonth(),\r\n                  dayObj.date.getFullYear()\r\n                ),\r\n\r\n              active_start:\r\n                dayObj.isCurrentMonth &&\r\n                dateConfig.selectionMode === 'range' &&\r\n                isSelectedDate(\r\n                  dayObj.day,\r\n                  dayObj.date.getMonth(),\r\n                  dayObj.date.getFullYear()\r\n                ) &&\r\n                dayObj.day === rangeStart,\r\n\r\n              active_end:\r\n                dayObj.isCurrentMonth &&\r\n                dateConfig.selectionMode === 'range' &&\r\n                isSelectedDate(\r\n                  dayObj.day,\r\n                  dayObj.date.getMonth(),\r\n                  dayObj.date.getFullYear()\r\n                ) &&\r\n                dayObj.day === rangeEnd,\r\n\r\n              range_between_active:\r\n                dayObj.isCurrentMonth &&\r\n                dateConfig.selectionMode === 'range' &&\r\n                isSelectedDate(\r\n                  dayObj.day,\r\n                  dayObj.date.getMonth(),\r\n                  dayObj.date.getFullYear()\r\n                ) &&\r\n                rangeStart != null &&\r\n                rangeEnd != null &&\r\n                dayObj.day > rangeStart &&\r\n                dayObj.day < rangeEnd,\r\n\r\n              other_month: !dayObj.isCurrentMonth,\r\n              disabled: isDayDisabled(dayObj.day),\r\n              notInCurrentMonth: !dayObj.isCurrentMonth\r\n            }\"\r\n            (click)=\"\r\n              dayObj.isCurrentMonth &&\r\n                !isDayDisabled(dayObj.day) &&\r\n                selectDate(dayObj.day)\r\n            \"\r\n          >\r\n            {{ dayObj.day }}\r\n          </div>\r\n          }\r\n        </div>\r\n        <div class=\"bottom_btn\">\r\n          <div class=\"btn\">Clear</div>\r\n          <div class=\"btn\">Today</div>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    <!-- TIME SLOTS (only if showTime = true) -->\r\n    @if (dateConfig.enableTime) {\r\n    <div class=\"times\">\r\n      <div class=\"time-picker\">\r\n        <div class=\"time-column\">\r\n          @for (timeSlot of timeSlots; track $index) {\r\n          <span\r\n            class=\"span_time\"\r\n            [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n            (click)=\"selectTime(timeSlot.label)\"\r\n          >\r\n            {{ timeSlot.label }}\r\n          </span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"time-column\">\r\n          @for (timeSlot of timeSlots; track $index) {\r\n          <span\r\n            class=\"span_time\"\r\n            [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n          >\r\n            {{ timeSlot.label }}\r\n          </span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"time-column\">\r\n          @for (timeSlot of timeSlots; track $index) {\r\n          <span\r\n            class=\"span_time\"\r\n            [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n          >\r\n            {{ timeSlot.label }}\r\n          </span>\r\n          }\r\n        </div>\r\n\r\n        <!-- center selection indicator -->\r\n        <div class=\"center-highlight\"></div>\r\n      </div>\r\n\r\n      <!-- @for (timeSlot of timeSlots; track $index) {\r\n      <span\r\n        class=\"span_time\"\r\n        [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n        (click)=\"selectTime(timeSlot.label)\"\r\n      >\r\n        {{ timeSlot.label }}\r\n      </span>\r\n      } -->\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--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;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--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;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-100);border-color:var(--neutral-100)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.switch_wrapper{display:flex}.switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.switch_wrapper .switch input{display:none}.switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;height:calc(3.3333333333rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-family:inherit}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-500)}.calendar_wrapper .date_box img{max-width:calc(1.3333333333rem / var(--scale));margin-right:calc(1rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{display:flex;position:absolute;top:calc(3.3333333333rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:100%;min-width:calc(27.8333333333rem / var(--scale));min-height:calc(30.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_container{flex:1;margin:calc(.25rem / var(--scale)) 0}.calendar_wrapper .calendar-popup .calendar-header{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button{cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding-right:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year img,.calendar_wrapper .calendar-popup .calendar-header .month-year .month img{max-width:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(27.0833333333rem / var(--scale));color:var(--neutral-600)}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale));transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600)}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .year:hover{background-color:var(--blue-100);color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:column;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:\"\"}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(27.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;width:calc(3.975rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{cursor:default;color:var(--neutral-400)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth:hover{background-color:transparent}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn .btn{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--blue-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.calendar_wrapper .calendar-popup .time-picker{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:360px;overflow:hidden;background:#fff}.calendar_wrapper .calendar-popup .time-column{display:flex;flex-direction:column;align-items:center;overflow-y:auto;scroll-snap-type:y mandatory}.calendar_wrapper .calendar-popup .time-column::-webkit-scrollbar{width:0}.calendar_wrapper .calendar-popup .span_time.active{background:#2f80ed;color:#fff;border-radius:4px;width:70%}.calendar_wrapper .calendar-popup .center-highlight{position:absolute;top:50%;left:0;width:100%;height:40px;transform:translateY(-50%);border-top:1px solid red;border-bottom:1px solid red;pointer-events:none}.calendar_wrapper .calendar-popup .times{min-width:calc(14.6666666667rem / var(--scale));max-height:calc(30.3333333333rem / var(--scale));overflow-y:auto;overflow-x:hidden;border-left:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));box-shadow:-3px 0 8px 2px #0a0d121f;border-top-right-radius:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .times .span_time{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);display:inline-block;width:calc(4rem / var(--scale)) calc(3.3333333333rem / var(--scale));height:100%;max-width:calc(4rem / var(--scale));text-align:center;cursor:pointer;scroll-snap-align:center}.calendar_wrapper .calendar-popup .times .span_time:hover,.calendar_wrapper .calendar-popup .times .span_time.active{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-common-calendar', imports: [CommonModule, OutsideClickDirective], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: CommonCalendarComponent,
+                            multi: true,
+                        },
+                        DatePipe,
+                    ], template: "<!-- Calendar -->\r\n\r\n<div\r\n  class=\"calendar_wrapper\"\r\n  appOutsideClick\r\n  (clickOutSide)=\"closeCalendar()\"\r\n  [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n  <div class=\"date_box\" (click)=\"toggleCalendar()\">\r\n    @if (dateConfig.selectionMode=='single') {\r\n\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"Select Date\"\r\n      [value]=\"selectedDateTime\"\r\n      readonly\r\n      [disabled]=\"disableControl\"\r\n    />\r\n    } @else {\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"Select date Range\"\r\n      [value]=\"\r\n        selectedDateTime.start\r\n          | date\r\n            : 'MM/dd/yyyy' +\r\n                ' - ' +\r\n                (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n      \"\r\n      readonly\r\n    />\r\n    }\r\n    <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n    <img src=\"images/calendar.svg\" alt=\"\" />\r\n  </div>\r\n  @if (isOpen) {\r\n  <div class=\"calendar-popup\">\r\n    <div class=\"calendar_container\">\r\n      <!-- for the header -->\r\n      <div class=\"calendar-header\">\r\n        <div class=\"month-year\">\r\n          <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n            {{ getMonthYear().month }},</span\r\n          >\r\n          <div class=\"year\" (click)=\"calendarView = 'yearView'\">\r\n            <span>\r\n              {{ getMonthYear().year }}\r\n            </span>\r\n            <img src=\"images/chevron-down.svg\" class=\"year_arrow\" alt=\"\" />\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"arrow_container\">\r\n          <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n            <img src=\"images/arrow-up.svg\" alt=\"\" />\r\n          </span>\r\n\r\n          <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n            <img src=\"images/arrow-down.svg\" alt=\"\" />\r\n          </span>\r\n        </div>\r\n      </div>\r\n      @if(calendarView === \"monthView\"){\r\n      <div class=\"month-grid\">\r\n        @for(month of monthRange | keyvalue; track $index){\r\n        <span\r\n          class=\"month\"\r\n          (click)=\"selectMonth(month.key)\"\r\n          [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n          >{{ month.value }}</span\r\n        >\r\n        }\r\n      </div>\r\n      } @else if(calendarView === 'yearView'){\r\n      <div class=\"year-selector\">\r\n        <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n          <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n        </span>\r\n        <div class=\"year-grid\">\r\n          @for(year of yearRange;track $index){\r\n          <span\r\n            class=\"year\"\r\n            (click)=\"selectYear(year)\"\r\n            [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n            >{{ year }}</span\r\n          >\r\n          }\r\n        </div>\r\n        <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n          <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n        </span>\r\n      </div>\r\n      } @else {\r\n      <div class=\"calendar_body\">\r\n        <div class=\"calendar-grid\">\r\n          <!-- Day names -->\r\n          @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index)\r\n          {\r\n\r\n          <div class=\"days_name\">\r\n            {{ day }}\r\n          </div>\r\n          }\r\n\r\n          <!-- Calendar dates -->\r\n          @for (dayObj of daysInMonth; track $index) {\r\n          <div\r\n            class=\"calendar-day\"\r\n            [ngClass]=\"{\r\n              active:\r\n                dayObj.isCurrentMonth &&\r\n                dateConfig.selectionMode === 'single' &&\r\n                isSelectedDate(\r\n                  dayObj.day,\r\n                  dayObj.date.getMonth(),\r\n                  dayObj.date.getFullYear()\r\n                ),\r\n\r\n              active_start:\r\n                dayObj.isCurrentMonth &&\r\n                dateConfig.selectionMode === 'range' &&\r\n                isSelectedDate(\r\n                  dayObj.day,\r\n                  dayObj.date.getMonth(),\r\n                  dayObj.date.getFullYear()\r\n                ) &&\r\n                dayObj.day === rangeStart,\r\n\r\n              active_end:\r\n                dayObj.isCurrentMonth &&\r\n                dateConfig.selectionMode === 'range' &&\r\n                isSelectedDate(\r\n                  dayObj.day,\r\n                  dayObj.date.getMonth(),\r\n                  dayObj.date.getFullYear()\r\n                ) &&\r\n                dayObj.day === rangeEnd,\r\n\r\n              range_between_active:\r\n                dayObj.isCurrentMonth &&\r\n                dateConfig.selectionMode === 'range' &&\r\n                isSelectedDate(\r\n                  dayObj.day,\r\n                  dayObj.date.getMonth(),\r\n                  dayObj.date.getFullYear()\r\n                ) &&\r\n                rangeStart != null &&\r\n                rangeEnd != null &&\r\n                dayObj.day > rangeStart &&\r\n                dayObj.day < rangeEnd,\r\n\r\n              other_month: !dayObj.isCurrentMonth,\r\n              disabled: isDayDisabled(dayObj.day),\r\n              notInCurrentMonth: !dayObj.isCurrentMonth\r\n            }\"\r\n            (click)=\"\r\n              dayObj.isCurrentMonth &&\r\n                !isDayDisabled(dayObj.day) &&\r\n                selectDate(dayObj.day)\r\n            \"\r\n          >\r\n            {{ dayObj.day }}\r\n          </div>\r\n          }\r\n        </div>\r\n        <div class=\"bottom_btn\">\r\n          <div class=\"btn\">Clear</div>\r\n          <div class=\"btn\">Today</div>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    <!-- TIME SLOTS (only if showTime = true) -->\r\n    @if (dateConfig.enableTime) {\r\n    <div class=\"times\">\r\n      <div class=\"time-picker\">\r\n        <div class=\"time-column\">\r\n          @for (timeSlot of timeSlots; track $index) {\r\n          <span\r\n            class=\"span_time\"\r\n            [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n            (click)=\"selectTime(timeSlot.label)\"\r\n          >\r\n            {{ timeSlot.label }}\r\n          </span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"time-column\">\r\n          @for (timeSlot of timeSlots; track $index) {\r\n          <span\r\n            class=\"span_time\"\r\n            [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n          >\r\n            {{ timeSlot.label }}\r\n          </span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"time-column\">\r\n          @for (timeSlot of timeSlots; track $index) {\r\n          <span\r\n            class=\"span_time\"\r\n            [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n          >\r\n            {{ timeSlot.label }}\r\n          </span>\r\n          }\r\n        </div>\r\n\r\n        <!-- center selection indicator -->\r\n        <div class=\"center-highlight\"></div>\r\n      </div>\r\n\r\n      <!-- @for (timeSlot of timeSlots; track $index) {\r\n      <span\r\n        class=\"span_time\"\r\n        [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n        (click)=\"selectTime(timeSlot.label)\"\r\n      >\r\n        {{ timeSlot.label }}\r\n      </span>\r\n      } -->\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--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;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--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;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-100);border-color:var(--neutral-100)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.switch_wrapper{display:flex}.switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.switch_wrapper .switch input{display:none}.switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;height:calc(3.3333333333rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-family:inherit}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-500)}.calendar_wrapper .date_box img{max-width:calc(1.3333333333rem / var(--scale));margin-right:calc(1rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{display:flex;position:absolute;top:calc(3.3333333333rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:100%;min-width:calc(27.8333333333rem / var(--scale));min-height:calc(30.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_container{flex:1;margin:calc(.25rem / var(--scale)) 0}.calendar_wrapper .calendar-popup .calendar-header{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button{cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding-right:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year img,.calendar_wrapper .calendar-popup .calendar-header .month-year .month img{max-width:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(27.0833333333rem / var(--scale));color:var(--neutral-600)}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale));transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600)}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .year:hover{background-color:var(--blue-100);color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:column;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:\"\"}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(27.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;width:calc(3.975rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{cursor:default;color:var(--neutral-400)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth:hover{background-color:transparent}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn .btn{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--blue-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.calendar_wrapper .calendar-popup .time-picker{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:360px;overflow:hidden;background:#fff}.calendar_wrapper .calendar-popup .time-column{display:flex;flex-direction:column;align-items:center;overflow-y:auto;scroll-snap-type:y mandatory}.calendar_wrapper .calendar-popup .time-column::-webkit-scrollbar{width:0}.calendar_wrapper .calendar-popup .span_time.active{background:#2f80ed;color:#fff;border-radius:4px;width:70%}.calendar_wrapper .calendar-popup .center-highlight{position:absolute;top:50%;left:0;width:100%;height:40px;transform:translateY(-50%);border-top:1px solid red;border-bottom:1px solid red;pointer-events:none}.calendar_wrapper .calendar-popup .times{min-width:calc(14.6666666667rem / var(--scale));max-height:calc(30.3333333333rem / var(--scale));overflow-y:auto;overflow-x:hidden;border-left:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));box-shadow:-3px 0 8px 2px #0a0d121f;border-top-right-radius:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .times .span_time{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);display:inline-block;width:calc(4rem / var(--scale)) calc(3.3333333333rem / var(--scale));height:100%;max-width:calc(4rem / var(--scale));text-align:center;cursor:pointer;scroll-snap-align:center}.calendar_wrapper .calendar-popup .times .span_time:hover,.calendar_wrapper .calendar-popup .times .span_time.active{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DatePipe }], propDecorators: { dateTimeSelected: [{
+                type: Output
+            }], dateConfig: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], preSelectedValue: [{
+                type: Input
+            }] } });
+
 class CatsDataGridComponent {
     cd;
     tableOptions;
     totalRecords = 0;
-    sortingRequired = false;
+    sortingRequired = true;
     checkBoxSelection = false;
     checkboxSelectionType = 'multiple';
     rowData = [];
     colDefs = [];
     paginationRequired = true;
     selectedRowEmpty = false;
-    filterRequired = false;
-    threeDotsMenuRequired = false;
-    height = 300;
+    filterRequired = true;
+    threeDotsMenuRequired = true;
+    showDropdown = false;
+    height = 400;
+    groupByRequired = false;
     onPaginationChange = new EventEmitter();
     onCheckboxSelection = new EventEmitter();
     onScrollEmitter = new EventEmitter();
@@ -157,7 +905,7 @@ class CatsDataGridComponent {
         max: 20,
     };
     sortingColumnIndex;
-    sortingType = '';
+    sortingType = {};
     selectedRow = [];
     pageSizeList = [20, 50, 75, 100];
     showPageSizeList = false;
@@ -171,12 +919,44 @@ class CatsDataGridComponent {
     menuVisible = [];
     menuPosition = [];
     activeFilters = new Set();
+    resizingColumnIndex = null;
+    startX = 0;
+    startWidth = 0;
+    isResizing = false;
+    groupedResult = [];
+    showMoveIcon = {};
+    columnDraggable = [];
+    activeGroups = [];
+    groupBy = [];
+    dragGroupIndex = null;
+    dateConfig = {
+        selectionMode: 'single',
+        enableTime: false,
+    };
+    filterOptions = [
+        { label: 'Contains', value: 'contains' },
+        { label: 'Does Not Contain', value: 'doesNotContain' },
+        { label: 'Equals', value: 'equals' },
+        { label: 'Does Not Equal', value: 'doesNotEqual' },
+        { label: 'Starts With', value: 'startsWith' },
+        { label: 'Ends With', value: 'endsWith' },
+    ];
+    numberFilterOptions = [
+        { label: 'Equals', value: '=' },
+        { label: 'Greater Than', value: '>' },
+        { label: 'Less Than', value: '<' },
+        { label: 'Greater Than or Equal', value: '>=' },
+        { label: 'Less Than or Equal', value: '<=' },
+    ];
+    showPin = false;
+    pinActionClicked = {};
     constructor(cd) {
         this.cd = cd;
     }
     ngOnInit() {
         this.originalRowData = structuredClone(this.rowData);
         this.filteredRowData = structuredClone(this.rowData);
+        this.originalColDefs = [...this.colDefs];
     }
     ngOnChanges(changes) {
         if (changes['colDefs']?.currentValue) {
@@ -195,6 +975,8 @@ class CatsDataGridComponent {
                     [...this.selectedRow, row];
                 return row;
             });
+            // this.originalRowData = structuredClone(this.rowData);
+            this.getGroupedData();
         }
     }
     /**
@@ -204,22 +986,27 @@ class CatsDataGridComponent {
      * @returns {any[]} - Updated column definitions with filter/menu
      */
     getUpdatedColDefs(colDefs) {
-        return colDefs.map((col) => {
-            // Default dataType
-            if (!col.dataType) {
-                col.dataType = 'text';
+        return colDefs.map((col, index) => {
+            this.sortingType[index] = '';
+            col.colId = `${Date.now()}_${index}`;
+            if (col.fieldName === 'action') {
+                col.isAction = true;
+            }
+            if (!col.filterType && !col.isAction) {
+                col.filterType = 'text';
             }
             col.textLogic = 'AND';
             col.numberLogic = 'AND';
             let updatedCol = {
                 ...col,
-                filter: col.filter ?? true,
-                menu: col.menu ?? true,
+                filterable: col.filterable ?? true,
+                columnAction: col.columnAction ?? true,
+                sortable: col.sortable ?? true,
             };
-            if (!updatedCol.filter) {
+            if (!updatedCol.filterable) {
                 return updatedCol;
             }
-            switch (col.dataType) {
+            switch (col.filterType) {
                 case 'text':
                     updatedCol = {
                         ...updatedCol,
@@ -264,7 +1051,9 @@ class CatsDataGridComponent {
                     break;
                 case 'set':
                     const options = [
-                        ...new Set(this.rowData.map((r) => r[col.fieldName])),
+                        ...new Set(this.rowData.flatMap((r) => {
+                            return this.normalizeSetFilterType(r[col.fieldName], col?.cellRendererParams?.tagKey)?.filter(Boolean);
+                        })),
                     ];
                     updatedCol = {
                         ...updatedCol,
@@ -277,6 +1066,32 @@ class CatsDataGridComponent {
             return updatedCol;
         });
     }
+    normalizeSetFilterType(value, key) {
+        if (!value)
+            return;
+        if (Array.isArray(value) && typeof value[0] === 'string') {
+            return value;
+        }
+        if (Array.isArray(value) && typeof value[0] === 'object') {
+            return (value = value.map((val) => val[key]));
+        }
+        if (typeof value === 'string') {
+            return [value];
+        }
+        if (typeof value === 'object') {
+            return [value[key]];
+        }
+        return [];
+    }
+    /**
+     * @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, fieldValue, value) {
         switch (type) {
             case 'contains':
@@ -295,6 +1110,14 @@ class CatsDataGridComponent {
                 return true;
         }
     }
+    /**
+     * @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, fieldValue, value) {
         switch (type) {
             case '=':
@@ -312,7 +1135,7 @@ class CatsDataGridComponent {
         }
     }
     /**
-     * @description Method to filter data according to dataType and comparator selection
+     * @description Method to filter data according to filterType and comparator selection
      * @author Anand Pandey
      * @param {}
      * @returns void
@@ -322,7 +1145,7 @@ class CatsDataGridComponent {
         this.colDefs.forEach((col) => {
             const field = col.fieldName;
             // *********** TEXT FILTER ***********
-            if (col.dataType === 'text') {
+            if (col.filterType === 'text') {
                 const [c1, c2] = col.textFilters;
                 const textVal1 = c1.filterValue?.toLowerCase().trim();
                 const textVal2 = c2.filterValue?.toLowerCase().trim();
@@ -343,61 +1166,63 @@ class CatsDataGridComponent {
                 });
             }
             // *********** NUMBER FILTER ***********
-            if (col.dataType === 'number') {
-                if (col.numberValue.trim()) {
-                    const [c1, c2] = col.numberFilters;
-                    const numValue1 = Number(c1.numberValue);
-                    const numValue2 = Number(c2.numberValue);
-                    const num = Number(col.numberValue);
-                    if (!numValue1 && !numValue2) {
-                        this.activeFilters.delete(col.fieldName);
-                        return;
-                    }
-                    this.activeFilters.add(col.fieldName);
-                    result = result.filter((r) => {
-                        const fieldVal = Number(r[field]);
-                        const cond1 = numValue1
-                            ? this.evaluateNumDateFilterCondition(c1.filterType, fieldVal, numValue1)
-                            : false;
-                        const cond2 = numValue2
-                            ? this.evaluateNumDateFilterCondition(c2.filterType, fieldVal, numValue2)
-                            : false;
-                        return col.textLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
-                    });
+            if (col.filterType === 'number') {
+                const [c1, c2] = col.numberFilters;
+                const numValue1 = Number(c1.numberValue);
+                const numValue2 = Number(c2.numberValue);
+                if (!numValue1 && !numValue2) {
+                    this.activeFilters.delete(col.fieldName);
+                    return;
                 }
+                this.activeFilters.add(col.fieldName);
+                result = result.filter((r) => {
+                    const fieldVal = Number(r[field]);
+                    const cond1 = numValue1
+                        ? this.evaluateNumDateFilterCondition(c1.filterType, fieldVal, numValue1)
+                        : false;
+                    const cond2 = numValue2
+                        ? this.evaluateNumDateFilterCondition(c2.filterType, fieldVal, numValue2)
+                        : false;
+                    return col.textLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
+                });
             }
             // *********** DATE FILTER ***********
-            if (col.dataType === 'date') {
-                if (col.dateValue) {
-                    const selected = this.normalizeDate(col.dateValue);
-                    this.activeFilters.add(col.fieldName);
-                    result = result.filter((r) => {
-                        const valueDate = this.normalizeDate(r[field]);
-                        switch (col.numberCondition) {
-                            case '=':
-                                return valueDate === selected;
-                            case '>':
-                                return valueDate > selected;
-                            case '<':
-                                return valueDate < selected;
-                            case '>=':
-                                return valueDate >= selected;
-                            case '<=':
-                                return valueDate <= selected;
-                            default:
-                                return true; // keep row
-                        }
-                    });
-                }
-                else {
+            if (col.filterType === 'date') {
+                const [c1, c2] = col.dateFilters;
+                const selected1 = this.normalizeDate(c1.dateValue);
+                const selected2 = this.normalizeDate(c2.dateValue);
+                if (!selected1 && !selected2) {
                     this.activeFilters.delete(col.fieldName);
+                    return;
                 }
+                this.activeFilters.add(col.fieldName);
+                result = result.filter((r) => {
+                    const fieldVal = this.normalizeDate(r[field]);
+                    const cond1 = selected1
+                        ? this.evaluateNumDateFilterCondition(c1.filterType, fieldVal ?? r[field], selected1)
+                        : false;
+                    const cond2 = selected2
+                        ? this.evaluateNumDateFilterCondition(c2.filterType, fieldVal ?? r[field], selected2)
+                        : false;
+                    return col.textLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
+                });
             }
             // *********** SET FILTER ***********
-            if (col.dataType === 'set') {
-                if (col.selectedValues.size >= 0 &&
-                    col.selectedValues.size !== col.options.length) {
-                    result = result.filter((r) => col.selectedValues.has(r[field]));
+            if (col.filterType === 'set') {
+                if (col.selectedValues?.size >= 0 &&
+                    col.selectedValues?.size !== col.options.length) {
+                    result = result.filter((r) => {
+                        const value = r[field];
+                        if (Array.isArray(value) &&
+                            value.every((val) => typeof val !== 'object')) {
+                            return value.some((m) => col.selectedValues.has(m));
+                        }
+                        if (Array.isArray(value) &&
+                            value.every((val) => typeof val === 'object')) {
+                            return value.some((m) => col.selectedValues.has(m[col?.cellRendererParams?.tagKey]));
+                        }
+                        return col.selectedValues.has(r[field]);
+                    });
                     this.activeFilters.add(col.fieldName);
                 }
                 else {
@@ -406,8 +1231,38 @@ class CatsDataGridComponent {
             }
         });
         this.filteredData = result;
+        this.rowData = this.filteredData;
+        this.getGroupedData();
         this.filter.emit(this.filteredData);
     }
+    resetFilter(col) {
+        switch (col.filterType) {
+            case 'text': {
+                col.textFilters.forEach((f) => (f.filterValue = ''));
+                col.textLogic = 'AND';
+                break;
+            }
+            case 'number': {
+                col.numberFilters.forEach((f) => (f.numberValue = ''));
+                col.numberLogic = 'AND';
+                break;
+            }
+            case 'date': {
+                col.dateFilters.forEach((f) => (f.dateValue = ''));
+                col.textLogic = 'AND';
+                break;
+            }
+            case 'set': {
+                // Select all values again
+                col.selectedValues = new Set(col.options);
+                break;
+            }
+        }
+        // Remove active flag
+        this.activeFilters.delete(col.fieldName);
+        // Re-apply all filters
+        this.applyAllFilters();
+    }
     /**
      * @description Method to change the data format to utc
      * @author Anand Pandey
@@ -416,6 +1271,8 @@ class CatsDataGridComponent {
      */
     normalizeDate(dateStr) {
         const d = new Date(dateStr);
+        if (isNaN(d.getTime()))
+            return null;
         return new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())).getTime();
     }
     /**
@@ -486,24 +1343,12 @@ class CatsDataGridComponent {
      */
     openMenu(event, col, index) {
         event.stopPropagation();
+        this.showPin = false;
         this.activeFilterIndex = null;
         this.menuVisible = this.menuVisible.map(() => false);
         if (!this.menuVisible[index])
             this.menuVisible[index] = false;
         const rect = event.target.getBoundingClientRect();
-        this.menuPosition[index] = {
-            top: rect.bottom + 4 + 'px',
-            left: rect.left + 'px',
-        };
-        const menuWidth = 160;
-        const screenWidth = window.innerWidth;
-        const padding = 10;
-        //FIX: Stop overflow on the right
-        if (parseInt(this.menuPosition[index].left) + menuWidth >
-            screenWidth - padding) {
-            this.menuPosition[index].left = screenWidth - menuWidth - padding + 'px';
-        }
-        // Open only this one
         this.menuVisible[index] = true;
     }
     /**
@@ -513,16 +1358,183 @@ class CatsDataGridComponent {
      * @param {string} type - Type defines the sorting type whether this is ascending, descending.
      * @returns {void}
      */
-    onSort(fieldName, type) {
-        this.sortingType = type;
-        if (this.sortingType == 'asc' || this.sortingType == '') {
-            this.ascendingOrder(fieldName);
+    onSort(col, type, sortingColumIndex) {
+        this.sortingType[sortingColumIndex] = type;
+        this.sortingColumnIndex = sortingColumIndex;
+        Object.keys(this.sortingType).forEach((k) => {
+            if (k !== String(sortingColumIndex))
+                this.sortingType[k] = '';
+        });
+        if (this.sortingType[sortingColumIndex] == 'asc') {
+            this.ascendingOrder(col);
+        }
+        else if (this.sortingType[sortingColumIndex] == 'dsc') {
+            this.descendingOrder(col);
         }
         else {
-            this.descendingOrder(fieldName);
+            this.rowData = structuredClone(this.originalRowData);
         }
+        // if (this.sortingType[sortingColumIndex] == '') {
+        //   this.rowData = this.originalRowData;
+        // }
+        this.getGroupedData();
         this.menuVisible[this.currentIndex] = false;
     }
+    /**
+     * @description Generates grouped data based on the selected `groupBy` columns..
+     * @author Anand Pandey
+     * @returns void
+     */
+    getGroupedData() {
+        if (this.groupBy && this.groupBy.length > 0) {
+            this.groupedResult = this.groupData(this.rowData, this.groupBy) || [];
+        }
+    }
+    /**
+     * @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, index) {
+        event.preventDefault();
+        this.isResizing = true;
+        this.resizingColumnIndex = index;
+        this.startX = event.clientX;
+        this.startWidth = this.colDefs[index].width;
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('mouseup', this.stopResize);
+    }
+    /**
+     * @description Handles column resizing as the mouse moves.
+     * @author Anand Pandey
+     * @param {MouseEvent} event - Mouse movement event during resizing.
+     * @returns {void}
+     */
+    onMouseMove = (event) => {
+        if (this.resizingColumnIndex === null ||
+            this.resizingColumnIndex === undefined)
+            return;
+        const movement = event.clientX - this.startX;
+        const newWidth = this.startWidth + movement;
+        if (newWidth > 50) {
+            this.colDefs[this.resizingColumnIndex].width = newWidth;
+        }
+    };
+    /**
+     * @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) => {
+        event.stopPropagation();
+        this.resizingColumnIndex = null;
+        this.isResizing = false;
+        document.removeEventListener('mousemove', this.onMouseMove);
+        document.removeEventListener('mouseup', this.stopResize);
+    };
+    /**
+     * @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, groupKeys) {
+        if (groupKeys.length === 0)
+            return data;
+        const [currentKey, ...restKeys] = groupKeys;
+        const groups = {};
+        for (const row of data) {
+            const key = row[currentKey] ?? '';
+            if (!groups[key])
+                groups[key] = [];
+            groups[key].push(row);
+        }
+        // recursively group child arrays
+        let result = [];
+        for (const key of Object.keys(groups)) {
+            result.push({
+                key,
+                field: currentKey,
+                expanded: false,
+                children: this.groupData(groups[key], restKeys),
+            });
+        }
+        return result;
+    }
+    /**
+     * @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) {
+        node.expanded = !node.expanded;
+    }
+    /**
+     * @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, index, direction) {
+        this.pinActionClicked[col.colId] = direction;
+        col.leftPinned = direction === 'left';
+        col.rightPinned = direction === 'right';
+        if (col.leftPinned) {
+            this.colDefs.splice(index, 1);
+            this.colDefs = [col, ...this.colDefs];
+        }
+        else if (col.rightPinned) {
+            this.colDefs.splice(index, 1);
+            this.colDefs.splice(this.colDefs.length - 1, 0, col);
+        }
+        else {
+            const indx = this.originalColDefs.findIndex((dt) => dt.fieldName === col.fieldName);
+            if (index >= 0) {
+                this.colDefs.splice(index, 1);
+                this.colDefs.splice(indx, 0, col);
+            }
+        }
+        this.updatePinnedOffsets();
+        this.onClickOutside();
+    }
+    showPinActions() {
+        this.showPin = true;
+    }
+    hidePinActions() {
+        this.showPin = false;
+    }
+    /**
+     * @description Updates the horizontal left and right offsets of pinned columns by assigning cumulative widths to each pinned column and resetting non-pinned columns.
+     * @author Anand Pandey
+     * @returns void
+     */
+    updatePinnedOffsets() {
+        let leftOffset = 0;
+        let rightOffset = 0;
+        // LEFT pinned (normal order)
+        this.colDefs.forEach((col) => {
+            if (col.leftPinned) {
+                col.left = leftOffset;
+                col.right = null;
+                leftOffset += col.width || 120;
+            }
+        });
+        // RIGHT pinned (REVERSE order)
+        [...this.colDefs].reverse().forEach((col) => {
+            if (col.rightPinned) {
+                col.right = rightOffset;
+                col.left = null;
+                rightOffset += col.width || 120;
+            }
+        });
+    }
     /**
      * @description Method to parse column value from rowdata object
      *  according to given field value in column Defination
@@ -531,12 +1543,20 @@ class CatsDataGridComponent {
      * @param toParse - field value
      * @returns string
      */
-    parseColValue(row, toParse) {
-        if (!toParse?.includes('.')) {
-            return row[toParse] || '-';
+    parseColValue(row, col) {
+        if (!col?.fieldName?.includes('.')) {
+            if (Array.isArray(row[col.fieldName])) {
+                if (row[col.fieldName].every((dt) => typeof dt === 'string')) {
+                    return row[col.fieldName][0];
+                }
+                if (row[col.fieldName].every((dt) => typeof dt === 'object')) {
+                    return row[col.fieldName][0][col.cellRendererParams.tagKey];
+                }
+            }
+            return row[col.fieldName] || '-';
         }
         else {
-            let toParseArr = toParse.split('.');
+            let toParseArr = col?.fieldName.split('.');
             let val = row;
             for (const key of toParseArr) {
                 val =
@@ -643,34 +1663,53 @@ class CatsDataGridComponent {
      * @description method to sort data according to type and column
      * @author Tarun Kumar
      * @param sortingColumIndex
-     * @param fieldName
+     * @param col
      * @param sortingType
      */
-    onSortingRowData(sortingColumIndex, fieldName) {
+    onSortingRowData(sortingColumIndex, col) {
+        if (!col.sortable)
+            return;
         this.sortingColumnIndex = sortingColumIndex;
-        this.sortingType = !this.sortingType
-            ? 'asc'
-            : this.sortingType == 'asc'
-                ? 'dsc'
-                : 'asc';
-        if (this.sortingType == 'asc' || this.sortingType == '') {
-            this.ascendingOrder(fieldName);
+        Object.keys(this.sortingType).forEach((k) => {
+            if (k !== String(sortingColumIndex))
+                this.sortingType[k] = '';
+        });
+        if (!this.sortingType[sortingColumIndex]) {
+            this.sortingType[sortingColumIndex] = 'asc';
         }
         else {
-            this.descendingOrder(fieldName);
+            this.sortingType[sortingColumIndex] =
+                this.sortingType[sortingColumIndex] === 'asc' ? 'dsc' : '';
+        }
+        if (this.sortingType[sortingColumIndex] == 'asc') {
+            this.ascendingOrder(col);
         }
+        else if (this.sortingType[sortingColumIndex] == 'dsc') {
+            this.descendingOrder(col);
+        }
+        else {
+            this.rowData = structuredClone(this.originalRowData);
+        }
+        this.getGroupedData();
     }
     /**
      * @description method to sort table in ascending order according to given field
      * @param fieldName
      */
-    ascendingOrder(fieldName) {
+    ascendingOrder(col) {
         this.rowData = this.rowData.sort((a, b) => {
-            if (this.parseColValue(a, fieldName) > this.parseColValue(b, fieldName)) {
-                return 1;
+            const valA = this.parseColValue(a, col);
+            const valB = this.parseColValue(b, col);
+            if (typeof valA === 'string' && typeof valB === 'string') {
+                return valA.localeCompare(valB);
             }
             else {
-                return -1;
+                if (valA > valB) {
+                    return 1;
+                }
+                else {
+                    return -1;
+                }
             }
         });
     }
@@ -678,13 +1717,20 @@ class CatsDataGridComponent {
      * @description method to sort table in descending order according to given field
      * @param fieldName
      */
-    descendingOrder(fieldName) {
+    descendingOrder(col) {
         this.rowData = this.rowData.sort((a, b) => {
-            if (this.parseColValue(a, fieldName) > this.parseColValue(b, fieldName)) {
-                return -1;
+            const valA = this.parseColValue(a, col);
+            const valB = this.parseColValue(b, col);
+            if (typeof valA === 'string' && typeof valB === 'string') {
+                return valA.localeCompare(valB) * -1;
             }
             else {
-                return 1;
+                if (valA > valB) {
+                    return -1;
+                }
+                else {
+                    return 1;
+                }
             }
         });
     }
@@ -743,8 +1789,38 @@ class CatsDataGridComponent {
      * @param col
      * @returns {object}
      */
-    getStyle(col) {
-        return { width: `${col.width}px` };
+    getStyle(col, type) {
+        const style = {
+            width: `${col.width ?? 150}px`,
+            minWidth: `${col.minWidth ?? 50}px`,
+        };
+        if (col.isAction) {
+            style.position = 'sticky';
+            style.right = '0px';
+            style.zIndex = 1;
+            style.background = '#fff';
+            style.width = '60px';
+            style.minWidth = '60px';
+        }
+        else if (col.leftPinned) {
+            style.position = 'sticky';
+            style.left = col.left + 'px';
+            style.zIndex = 12;
+            style.background = '#fff';
+        }
+        else if (col.rightPinned) {
+            style.position = 'sticky';
+            style.right = col.right + 'px';
+            style.zIndex = 12;
+            style.background = '#fff';
+        }
+        else {
+            style.position = '';
+        }
+        if (type === 'action') {
+            style.background = '#f0f0f0';
+        }
+        return style;
     }
     onClickOutside() {
         this.showPageSizeList = false;
@@ -782,8 +1858,55 @@ class CatsDataGridComponent {
      * @returns {void}
      */
     onDragStart(event, index) {
+        this.dragGroupIndex = null;
+        const target = event.target;
+        if (this.isResizing) {
+            event.preventDefault();
+            return;
+        }
         this.draggedIndex = index;
+        // For column reorder.
         event.dataTransfer?.setData('text/plain', index.toString());
+        // For group panel
+        event.dataTransfer?.setData('columnIndex', index.toString());
+        const th = target.closest('th');
+        if (!th)
+            return;
+        const clone = th.cloneNode(true);
+        this.copyComputedStyles(th, clone);
+        clone.style.position = 'absolute';
+        clone.style.top = '-9999px';
+        clone.style.left = '-9999px';
+        clone.style.pointerEvents = 'none';
+        document.body.appendChild(clone);
+        event.dataTransfer?.setDragImage(clone, 0, 0);
+        setTimeout(() => clone.remove(), 0);
+    }
+    onGroupDragStart(event, index) {
+        event.dataTransfer?.setData('groupIndex', index.toString());
+        this.dragGroupIndex = index;
+    }
+    /**
+     * @author Anand Pandey
+     * @description Copies computed CSS styles from the source element to the target element, including all child elements recursively.
+     * @param {HTMLElement} source - Original element.
+     * @param {HTMLElement} target - Cloned element.
+     * @returns {void}
+     */
+    copyComputedStyles(source, target) {
+        const computed = window.getComputedStyle(source);
+        for (const prop of computed) {
+            target.style.setProperty(prop, computed.getPropertyValue(prop));
+        }
+        // Copy children styles recursively
+        const sourceChildren = Array.from(source.children);
+        const targetChildren = Array.from(target.children);
+        sourceChildren.forEach((srcChild, i) => {
+            const tgtChild = targetChildren[i];
+            if (srcChild && tgtChild) {
+                this.copyComputedStyles(srcChild, tgtChild);
+            }
+        });
     }
     /**
      * @author Tarun Kumar
@@ -793,6 +1916,7 @@ class CatsDataGridComponent {
      */
     onDragOver(event, index) {
         event.preventDefault();
+        this.isResizing = false;
         if (this.dragOverIndex !== index) {
             this.dragOverIndex = index;
         }
@@ -823,23 +1947,163 @@ class CatsDataGridComponent {
         this.draggedIndex = null;
         this.dragOverIndex = null;
     }
+    /**
+     * @description Handles drag over on group panel to allow dropping.
+     * @author Anand Pandey
+     * @param {DragEvent} event
+     * @returns {void}
+     */
+    onGroupDragOver(event) {
+        event.preventDefault();
+    }
+    /**
+     * @description Handles drag over on a group tag and updates the target index for reordering.
+     * @author Anand Pandey
+     * @param {DragEvent} event
+     * @param {number} index
+     * @returns {void}
+     */
+    onActiveDragOver(event, index) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragGroupIndex = index;
+    }
+    /**
+     * @description Handles drop on group panel and routes the drop to group reordering or column grouping logic.
+     * @author Anand Pandey
+     * @param {DragEvent} event
+     * @returns {void}
+     */
+    onGroupDrop(event) {
+        const colIndex = Number(event.dataTransfer?.getData('columnIndex'));
+        const groupIndex = Number(event.dataTransfer?.getData('groupIndex'));
+        const target = event.target;
+        const isOverGroupPanel = target.closest('.group-tag');
+        if (this.dragGroupIndex !== null &&
+            this.dragGroupIndex >= 0 &&
+            groupIndex >= 0) {
+            if (!isOverGroupPanel) {
+                this.dragGroupIndex = this.activeGroups.length - 1;
+            }
+            this.onActiveGroupDrop(event, this.dragGroupIndex);
+        }
+        else {
+            if (isNaN(colIndex))
+                return;
+            if (colIndex)
+                this.dragGroupIndex = null;
+            const col = this.colDefs[colIndex];
+            const el = this.activeGroups.find((c) => c.fieldName === col.fieldName);
+            if (!el) {
+                this.activeGroups.push(col);
+                this.groupBy.push(col.fieldName);
+            }
+            this.colDefs.splice(colIndex, 1);
+            // this.applyGrouping();
+            this.getGroupedData();
+        }
+    }
+    /**
+     * @description Handles column grouping triggered from the column action menu by adding the column to the active group list,
+     * removing it from visible columns, and recalculating grouped row data.
+     *
+     * @param {any} col - The column definition selected for grouping.
+     * @param {number} index - Index of the column in the current column definitions array.
+     * @returns {void}
+     */
+    groupByColumnAction(col, index) {
+        this.activeGroups.push(col);
+        this.groupBy.push(col.fieldName);
+        this.colDefs.splice(index, 1);
+        this.getGroupedData();
+        this.onClickOutside();
+    }
+    /**
+     * @description Handles drop on a group tag and reorders the active groups accordingly.
+     * @author Anand Pandey
+     * @param {DragEvent} event
+     * @param {number} index
+     * @returns {void}
+     */
+    onActiveGroupDrop(event, index) {
+        event.stopPropagation();
+        const groupIndex = Number(event.dataTransfer?.getData('groupIndex'));
+        if (isNaN(groupIndex))
+            return;
+        if (groupIndex === index)
+            return;
+        const item = this.groupBy.splice(groupIndex, 1)[0];
+        this.groupBy.splice(index, 0, item);
+        const col = this.activeGroups.splice(groupIndex, 1)[0];
+        this.activeGroups.splice(index, 0, col);
+        this.getGroupedData();
+    }
+    /**
+     * @description Removes a group tag and restores the column to available columns list.
+     * @author Anand Pandey
+     * @param {any} col
+     * @param {number} id
+     * @returns {void}
+     */
+    removeGroup(col, id) {
+        this.activeGroups.splice(id, 1);
+        const colIndex = this.originalColDefs.findIndex((dt) => dt.fieldName === col.fieldName);
+        this.colDefs.splice(colIndex, 0, col);
+        this.groupBy.splice(id, 1);
+        if (this.groupBy.length === 0) {
+            this.groupedResult = [];
+        }
+        else {
+            this.getGroupedData();
+        }
+    }
+    toggleDropdown() {
+        this.showDropdown = !this.showDropdown;
+    }
+    selectFilter(option, col) {
+        col.textFilters[0].filterType = option.value;
+        this.showDropdown = false;
+    }
+    getSelectedFilterLabel(value) {
+        return this.filterOptions.find((o) => o.value === value)?.label || '';
+    }
     toggleFilter(col, index, event) {
-        event.stopPropagation(); // prevent header click from triggering sort
+        event.stopPropagation();
         this.activeFilterIndex = this.activeFilterIndex === index ? null : index;
         this.menuVisible = this.menuVisible.map(() => false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CatsDataGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CatsDataGridComponent, isStandalone: true, selector: "cats-data-grid", inputs: { tableOptions: "tableOptions", totalRecords: "totalRecords", sortingRequired: "sortingRequired", checkBoxSelection: "checkBoxSelection", checkboxSelectionType: "checkboxSelectionType", rowData: "rowData", colDefs: "colDefs", paginationRequired: "paginationRequired", selectedRowEmpty: "selectedRowEmpty", filterRequired: "filterRequired", threeDotsMenuRequired: "threeDotsMenuRequired", height: "height", pageSizeList: "pageSizeList" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\">\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"container_scroll\"\r\n    (scroll)=\"infinityScroll($event)\"\r\n    [ngStyle]=\"{ height: height + 'px' }\"\r\n  >\r\n    <table cellspacing=\"0\" cellpadding=\"0\">\r\n      <thead class=\"sticky-top\">\r\n        <tr>\r\n          @if (checkBoxSelection && checkboxSelectionType == 'multiple') {\r\n          <th style=\"width: 50px\">\r\n            <span\r\n              ><input\r\n                class=\"form-check-input cursor-pointer\"\r\n                type=\"checkbox\"\r\n                name=\"\"\r\n                id=\"\"\r\n                [checked]=\"checkAllSelected()\"\r\n                [indeterminate]=\"checkInterminate()\"\r\n                (change)=\"onHeaderCheckboxChange($event)\"\r\n            /></span>\r\n          </th>\r\n          } @for (col of colDefs; track $index) {\r\n          <th\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n            draggable=\"true\"\r\n            (dragstart)=\"onDragStart($event, $index)\"\r\n            (dragover)=\"onDragOver($event, $index)\"\r\n            (drop)=\"onDrop($event, $index)\"\r\n            (dragend)=\"onDragEnd()\"\r\n          >\r\n            <div class=\"th_wraper\">\r\n              <div\r\n                class=\"flex-center\"\r\n                [ngStyle]=\"getStyle(col)\"\r\n                (click)=\"onSortingRowData($index, col?.fieldName)\"\r\n              >\r\n                <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n                @if (sortingRequired && sortingColumnIndex == $index) {\r\n                <span class=\"headerName-icon\">\r\n                  <ul class=\"\">\r\n                    @if(sortingType){\r\n                    <li class=\"cursor-pointer\">\r\n                      <img\r\n                        src=\"images/sort_up.svg\"\r\n                        class=\"sorting_up\"\r\n                        [ngClass]=\"\r\n                          sortingColumnIndex == $index && sortingType == 'asc'\r\n                            ? 'd-none'\r\n                            : ''\r\n                        \"\r\n                      />\r\n                    </li>\r\n                    <li class=\"cursor-pointer\">\r\n                      <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n                      <img\r\n                        src=\"images/sort_down.svg\"\r\n                        class=\"sorting_down\"\r\n                        [ngClass]=\"\r\n                          sortingColumnIndex == $index && sortingType == 'dsc'\r\n                            ? 'd-none'\r\n                            : ''\r\n                        \"\r\n                      />\r\n                    </li>\r\n\r\n                    }\r\n                  </ul>\r\n                </span>\r\n\r\n                }\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <!-- Column Filters Logic-->\r\n                @if(filterRequired && col.filter){\r\n                <div\r\n                  class=\"filters\"\r\n                  (click)=\"toggleFilter(col, $index, $event)\"\r\n                >\r\n                  <img\r\n                    src=\"images/filter-icon.svg\"\r\n                    class=\"filter-icon\"\r\n                    [ngClass]=\"\r\n                      activeFilters.has(col.fieldName)\r\n                        ? 'filter-icon-active'\r\n                        : 'filter-icon'\r\n                    \"\r\n                  />\r\n\r\n                  @if (activeFilterIndex === $index) {\r\n                  <div\r\n                    class=\"filter-popup\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    appOutsideClick\r\n                    (clickOutside)=\"onClickOutside()\"\r\n                  >\r\n                    <!-- Text Filter -->\r\n                    @if(col.dataType === 'text'){\r\n                    <select [(ngModel)]=\"col.textFilters[0].filterType\">\r\n                      <option value=\"contains\">Contains</option>\r\n                      <option value=\"doesNotContain\">Does Not Contain</option>\r\n                      <option value=\"equals\">Equals</option>\r\n                      <option value=\"doesNotEqual\">Does Not Equal</option>\r\n                      <option value=\"startsWith\">Starts With</option>\r\n                      <option value=\"endsWith\">Ends With</option>\r\n                    </select>\r\n\r\n                    <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    />\r\n\r\n                    @if(col.textFilters[0].filterValue){\r\n                    <div class=\"logic-row\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n\r\n                    <select [(ngModel)]=\"col.textFilters[1].filterType\">\r\n                      <option value=\"contains\">Contains</option>\r\n                      <option value=\"doesNotContain\">Does Not Contain</option>\r\n                      <option value=\"equals\">Equals</option>\r\n                      <option value=\"doesNotEqual\">Does Not Equal</option>\r\n                      <option value=\"startsWith\">Starts With</option>\r\n                      <option value=\"endsWith\">Ends With</option>\r\n                    </select>\r\n\r\n                    <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    />\r\n                    } }\r\n\r\n                    <!-- Number Filter -->\r\n                    @if(col.dataType === 'number'){\r\n                    <select [(ngModel)]=\"col.numberFilters[0].numberCondition\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\r\n\r\n                    <input\r\n                      type=\"number\"\r\n                      [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                      (input)=\"applyAllFilters()\"\r\n                    />\r\n\r\n                    @if(col.numberFilters[0].numberValue){\r\n                    <div class=\"logic-row\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n\r\n                    <select [(ngModel)]=\"col.numberFilters[1].numberCondition\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\r\n\r\n                    <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    />\r\n                    } }\r\n\r\n                    <!-- DATE FILTER -->\r\n                    <ng-container *ngIf=\"col.dataType === 'date'\">\r\n                      <select [(ngModel)]=\"col.numberCondition\">\r\n                        <option value=\"=\">Equals</option>\r\n                        <option value=\">\">Greater Than</option>\r\n                        <option value=\"<\">Less Than</option>\r\n                        <option value=\">=\">>=</option>\r\n                        <option value=\"<=\"><=</option>\r\n                      </select>\r\n                      <input\r\n                        type=\"date\"\r\n                        [(ngModel)]=\"col.dateValue\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                    </ng-container>\r\n\r\n                    <!-- SET FILTER (CHECKBOX LIST) -->\r\n                    <ng-container *ngIf=\"col.dataType === 'set'\">\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Search...\"\r\n                        (input)=\"filterSetOptions(col, $event)\"\r\n                      />\r\n\r\n                      <div class=\"set-options\">\r\n                        <label>\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            [checked]=\"isAllSelected(col)\"\r\n                            (change)=\"toggleSelectAll(col, $event)\"\r\n                          />\r\n                          (Select All)\r\n                        </label>\r\n\r\n                        <label *ngFor=\"let opt of col.filteredOptions\">\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            [checked]=\"col.selectedValues.has(opt)\"\r\n                            (change)=\"toggleSetOption(col, opt, $event)\"\r\n                          />\r\n                          {{ opt }}\r\n                        </label>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                }\r\n\r\n                <!-- Three dots menu-->\r\n                @if(threeDotsMenuRequired && col.menu){\r\n\r\n                <div class=\"three-dots\" (click)=\"openMenu($event, col, $index)\">\r\n                  <img src=\"images/more-vertical.svg\" />\r\n                </div>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <!-- popup open -->\r\n            <div\r\n              class=\"column-menu\"\r\n              *ngIf=\"menuVisible[$index]\"\r\n              [ngStyle]=\"menuPosition[$index]\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              appOutsideClick\r\n              (clickOutside)=\"onClickOutside()\"\r\n            >\r\n              <ul>\r\n                @if(sortingType === 'dsc' || sortingType === ''){\r\n                <li (click)=\"onSort(col?.fieldName, 'asc')\">\r\n                  <img src=\"images/arrow-up.svg\" class=\"sorting_up\" />\r\n                  Sort Ascending\r\n                </li>\r\n                } @if(sortingType === 'asc' || sortingType === ''){\r\n                <li (click)=\"onSort(col?.fieldName, 'dsc')\">\r\n                  <img src=\"images/arrow-down.svg\" class=\"sorting_up\" />\r\n                  Sort Descending\r\n                </li>\r\n                } @if(sortingType === 'asc' || sortingType === 'dsc'){\r\n                <li (click)=\"onSort(col?.fieldName, '')\">\r\n                  <span>\r\n                    <img src=\"images/chevron-up.svg\" class=\"sorting_up\" />\r\n                    <img src=\"images/chevron-down.svg\" class=\"sorting_up\" />\r\n                  </span>\r\n                  Clear Sort\r\n                </li>\r\n                }\r\n              </ul>\r\n            </div>\r\n          </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (data of rowData; track data.rowId) {\r\n        <tr [ngClass]=\"data | addClass : tableOptions\">\r\n          @if (checkBoxSelection) {\r\n          <td style=\"min-width: 50px\">\r\n            @if (checkboxSelectionType=='multiple') {\r\n            <span\r\n              ><input\r\n                type=\"checkbox\"\r\n                class=\"form-check-input pointer\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n            /></span>\r\n\r\n            }@else{\r\n            <span class=\"checkboxInput\">\r\n              <input\r\n                type=\"radio\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n              />\r\n            </span>\r\n\r\n            }\r\n          </td>\r\n          } @for (col of colDefs; track $index) {\r\n          <td\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"col?.addClass ? col.addClass(data) : ''\"\r\n          >\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(data, col.fieldName) }}\r\n              </div>\r\n              <div class=\"see_more_data\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\">\r\n                    {{ parseColValue(data, col.fieldName) }}</span\r\n                  >\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"data\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"data[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n            <!-- Commented for later use -->\r\n            <!-- <div class=\"tool_tip\">\r\n              <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\r\n            </div> -->\r\n          </td>\r\n          }\r\n        </tr>\r\n        } @empty {\r\n        <tr>\r\n          <td [attr.colspan]=\"colDefs.length + 1\">\r\n            <div class=\"small_data\">\r\n              @if (tableOptions?.noDataTemplate) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tableOptions?.noDataTemplate\"\r\n              ></ng-container>\r\n\r\n              }@else{\r\n              <!-- need to style it properly then we will add it -->\r\n              <span>No Data To Show</span>\r\n\r\n              }\r\n            </div>\r\n          </td>\r\n        </tr>\r\n\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n  <!--  Table Wrapper Ends-->\r\n  @if(paginationRequired){\r\n  <div class=\"pagination_main\">\r\n    <div class=\"entries_details\">\r\n      <span>Showing</span>\r\n      <div\r\n        class=\"pagination_select\"\r\n        appOutsideClick\r\n        (clickOutside)=\"onClickOutside()\"\r\n      >\r\n        <div\r\n          class=\"select_dropdown pointer\"\r\n          (click)=\"showPageSizeList = !showPageSizeList\"\r\n        >\r\n          <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\r\n          <span class=\"chevron_img\">\r\n            <img src=\"images/chevron-down.svg\" class=\"pointer\" />\r\n          </span>\r\n        </div>\r\n        @if(showPageSizeList){\r\n        <div class=\"select_option\">\r\n          @for(option of pageSizeList;track $index){\r\n          <span\r\n            class=\"pointer\"\r\n            (click)=\"onPageSizeChanged(option); onClickOutside()\"\r\n            >{{ option }}</span\r\n          >\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      <span\r\n        >Rows | {{ totalRecords > 0 ? recordsToShow.min + 1 : 0 }} -\r\n        {{\r\n          recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\r\n        }}\r\n        of\r\n        {{ totalRecords }} Entries</span\r\n      >\r\n    </div>\r\n    <div class=\"pagination_form flex-center\">\r\n      <span>Page</span>\r\n\r\n      <button\r\n        class=\"outlined_btn prev_btn\"\r\n        [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\r\n        type=\"button\"\r\n        (click)=\"onBtPrevClick()\"\r\n      >\r\n        <span> < </span>\r\n      </button>\r\n      <div>\r\n        <input\r\n          class=\"input_style right\"\r\n          type=\"number\"\r\n          [(ngModel)]=\"pageDetails.currentPage\"\r\n          (change)=\"goToSelectedPage($event)\"\r\n          name=\"\"\r\n          id=\"\"\r\n        />\r\n      </div>\r\n      <button\r\n        class=\"outlined_btn next_btn\"\r\n        type=\"button\"\r\n        [ngClass]=\"\r\n          pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\r\n        \"\r\n        (click)=\"onBtNextClick()\"\r\n      >\r\n        <span> > </span>\r\n      </button>\r\n      <span>of {{ pageDetails.totalPages }}</span>\r\n    </div>\r\n  </div>\r\n  }\r\n  <!-- Pagination Ends -->\r\n</div>\r\n", styles: [":root{--white: #fff;--white-creame: #ebf3ff;--border: #dae3f8;--scrollbar: var(--border);--textPrimary: #0b1c33;--textPrimary70: #0b1c33b3;--textSecondary: #556171;--textSecondary50: #55617180;--textSecondary70: #556171b3;--pink-10: #f9fbfe;--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;--yellow-50: #ffeedf;--yellow-100: #fed18f;--yellow-200: #ffbca6;--yellow-300: #f08a2b26;--yellow-400: #e58900;--primaryOrange: #f05a2b;--primaryOrange50: #f05a2b80;--primaryOrange70: #f05a2bb3;--orange-10: #fcf5eb;--orange-200: #f7ac94;--orange-300: #fb9676;--theadBg: var(--blue-50);--pagination-bg: #f7fafe;--blue-200: var(--border);--neutral-200: #dadbdc;--neutral-600: #040d17;--toastShadow: #0000001f;--dropdown-shadow: #00000014;--green-50: #eaf8f1;--green-100: #bde8d3;--green-600: #27a468;--red-10: #fcebef;--red-20: #ca0000;--red-30: #F7C1CE;--error-red: #d03258;--tableBorder: var(--border);--grey-50: #a5b0bf;--grey-100: #333333;--grey-200: #222A3D;--capture-border: #9badca;--captcha-bg: #f3f3f3;--neutral-400: #81858a}html{font-size:12px}.row_div{min-height:calc(4.5rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.row_div .col_div{width:50%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.row_div .label{width:calc(16.6666666667rem / var(--scale));min-width:calc(16.6666666667rem / var(--scale));padding:0 calc(2rem / var(--scale));color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:500;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.25rem / var(--scale))}.row_div .label sup{top:calc(-.1666666667rem / var(--scale))}.row_div .field{padding:calc(.6666666667rem / var(--scale)) calc(2rem / var(--scale));flex-grow:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;flex-wrap:nowrap;gap:\"\";color:var(--textPrimary);font-size:var(--fs-16);line-height:140%;font-weight:400}.row_div .field li{list-style:disc;line-height:calc(2.6666666667rem / var(--scale));margin-left:calc(1.5rem / var(--scale))}textarea,input,.ordered_textarea{color:var(--textPrimary)}.errorField{flex-direction:column;align-items:start}.errorField .error{max-width:calc(37.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:start;flex-wrap:nowrap;gap:0}.errorField .error i-feather[name=info]{padding-right:calc(.3333333333rem / var(--scale));display:flex;stroke:var(--error-red);width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.errorField textarea,.errorField input,.errorField .ordered_textarea{color:var(--textPrimary);border:calc(.0833333333rem / var(--scale)) solid var(--error-red)}.errorField .error{padding-top:calc(.6666666667rem / var(--scale));color:var(--error-red);font-size:var(--fs-12);line-height:140%;font-weight:400}sup{color:var(--error-red)}input::placeholder,textarea::placeholder{color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:400}textarea{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;min-height:calc(9rem / var(--scale));resize:none}input{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;height:calc(4.5rem / var(--scale))}input.disable{background-color:var(--blue-50);pointer-events:none}.ordered_textarea{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;list-style:disc;min-height:calc(9rem / var(--scale))}.ordered_textarea ul{padding-left:calc(2.6666666667rem / var(--scale));outline:none}.ordered_textarea ul.editable-div{min-height:calc(6rem / var(--scale));max-height:calc(9.3333333333rem / var(--scale));overflow:auto}.ordered_textarea ul li{margin-left:calc(1.75rem / var(--scale));list-style:disc;color:var(--textPrimary);font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400}.custom_radio{display:inline-flex;align-items:center;min-width:calc(18.5833333333rem / var(--scale))}.custom_radio .name{color:var(--neutral-600);font-size:var(--fs-16);line-height:140%;font-weight:400}.custom_radio.disabled .name{color:var(--textPrimary);font-size:var(--fs-16);line-height:140%;font-weight:400}.radio_mark{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));border:calc(.125rem / var(--scale)) solid var(--border);border-radius:50%;margin-right:calc(.6666666667rem / var(--scale));position:relative;background-color:var(--white)}.radio_mark:after{content:\"\";width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));background:var(--blue-700);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.dob_age_field{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));width:100%;height:calc(4.5rem / var(--scale));background-color:var(--blue-50);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.dob_age_field .dob,.dob_age_field .age{font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--textSecondary)}.dob_age_field .age{padding-left:calc(.8333333333rem / var(--scale))}.dob_age_field .dob{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:50%;height:100%;padding-right:calc(.8333333333rem / var(--scale));border-right:calc(.0833333333rem / var(--scale)) solid var(--border)}.dob_age_field .dob img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.date{position:relative;width:100%}.date img{position:absolute;right:calc(1.3333333333rem / var(--scale));top:calc(1.25rem / var(--scale))}input[type=checkbox]{margin-right:calc(.6666666667rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}ol li{list-style:auto!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Rethink}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.tableArea{width:100%;border-radius:calc(1.3333333333rem / var(--scale))}.none{display:none}.tableArea .table_wrapper table{border-collapse:collapse;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}thead .checkbox_section{min-width:calc(3.8333333333rem / var(--scale))!important;width:calc(3.8333333333rem / var(--scale))}tbody{background-color:var(--white)}tbody tr{overflow:visible}tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / var(--scale))}tbody td{overflow:visible;position:relative;font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--textPrimary);min-width:calc(11.6666666667rem / var(--scale));max-width:calc(29.1666666667rem / var(--scale));padding-block:calc(.5rem / var(--scale))}tbody td .tooltip_container{max-width:calc(100% - 2.5rem / var(--scale));height:auto;position:absolute;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);z-index:100;display:none;border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));white-space:normal;word-wrap:break-word;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}tbody td:hover .tooltip_container{display:block}tbody td:last-child ::ng-deep .see_more_data{right:0!important}.tableArea .table_wrapper table thead tr{height:calc(4.5rem / var(--scale));color:var(--textPrimary)}.tableArea .table_wrapper table thead tr img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table thead tr .theading{height:calc(2.25rem / var(--scale))}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0}.tableArea .table_wrapper table thead tr .three_dot{flex-grow:1;margin:0 calc(.3333333333rem / var(--scale)) 0 0;display:flex;flex-direction:row;justify-content:end;align-items:center;flex-wrap:nowrap;gap:0}.tableArea .table_wrapper table thead tr .three_dot img{cursor:pointer}.tableArea .table_wrapper table thead tr th{flex-shrink:0;background-color:var(--theadBg)}.tableArea .table_wrapper table thead tr th:hover .none{display:block}.tableArea .table_wrapper table thead tr th:hover .up,.tableArea .table_wrapper table thead tr th:hover .down{display:none}.tableArea .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:400;border-top:calc(.0833333333rem / var(--scale)) solid var(--tableBorder);transition:all .3s ease-in-out}.tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover{background-color:var(--pink-10)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td.action:hover{border-left:calc(.0833333333rem / var(--scale)) solid var(--blue-700);border-right:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td .ellipsis{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(25rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr.td_80{height:calc(6.6666666667rem / var(--scale))}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{text-align:left;padding-left:calc(1.1666666667rem / var(--scale));line-height:1}.thead-img{position:relative}.swap-img{position:absolute;left:calc(.6666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.header-content{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0}.header-content .filtering_container{width:calc(20rem / var(--scale));max-height:calc(23.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);position:absolute;z-index:2;right:0;top:calc(2.3333333333rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:nowrap;gap:\"\"}.header-content .filtering_container .filter{height:calc(3.3333333333rem / var(--scale));color:var(--neutral-900);padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));border:none;width:100%;background-color:var(--white);display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.header-content .filtering_container .filter.top_border{border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-100)}.tableArea .table_wrapper .headerName ul,.tableArea .table_wrapper .headerName-icon ul{display:flex}.tableArea .table_wrapper table ul{list-style-type:none;padding:0;margin-bottom:0}.tableArea .table_wrapper table ul li{height:calc(.3333333333rem / var(--scale));font-size:var(--fs-14);list-style-type:none}.tableArea .table_wrapper table .sorting_up,.tableArea .table_wrapper table .sorting_down{width:calc(.5833333333rem / var(--scale));height:calc(.3333333333rem / var(--scale))}.tableArea .table_wrapper .headerName,.tableArea .table_wrapper .headerName-icon{margin-left:calc(.5rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--textPrimary70);height:-webkit-fill-available}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(5.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale))}.pagination_main .pagination_form i-feather{font-weight:600;color:var(--neutral-600)}.pagination_main span{color:var(--textSecondary);font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.pagination_main i-feather{display:flex;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));color:var(--neutral-600)}.pagination_main .input_style{width:calc(4rem / var(--scale));height:calc(1.6666666667rem / var(--scale));font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));color:var(--neutral-600);text-align:center;margin:0 calc(.5rem / var(--scale));outline:none}.pagination_main .input_style option{font-size:1rem}.pagination_main .input_style.right{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;margin:0;color:var(--textPrimary);padding:0}.pagination_main .input_style.left{background-color:var(--pagination-bg);color:var(--blue-700);border:none}.pagination_main .outlined_btn{background:transparent;border:solid calc(.0833333333rem / var(--scale)) var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);color:var(--btn-outline)}.pagination_main .prev_btn,.pagination_main .next_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(1.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .disable_btn{background-color:var(--blue-200);pointer-events:none;color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--blue-200)}.pagination_main .disable_btn i-feather{color:var(--white)}.table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border-top-left-radius:calc(1.3333333333rem / var(--scale));border-top-right-radius:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--tableBorder)}.data-table-td .td_wrapper{height:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale))}.pagination_main .input_style.left{appearance:none;padding-right:calc(1rem / var(--scale));background-position:80% 50%;width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;border-radius:calc(.6666666667rem / var(--scale))}.data-table-td{background-color:var(--blue-50);font-size:var(--fs-16)}.data-table-td i-feather{background-color:var(--white);border-radius:calc(.25rem / var(--scale));box-shadow:0 calc(.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) 0 #00000014;color:var(--neutral-500)}.data-table-td span{vertical-align:middle}.setting-options{position:absolute;right:0;background:var(--white);z-index:2;box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);max-height:calc(37.3333333333rem / var(--scale));width:calc(20.8333333333rem / var(--scale));overflow:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.column-item,.column-header{margin-bottom:calc(1.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.column-item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.column-item input[type=checkbox]{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));margin:0;border-radius:var(--fs-6)}.column-item:last-child{margin-bottom:0}.disabled_col{pointer-events:none;background-color:var(--neutral-50)}.entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .table_wrapper table th:not(:last-child) .right .line{display:block;border-left:calc(.1666666667rem / var(--scale)) solid var(--grey-50);height:calc(2rem / var(--scale))}.sticky-top{top:calc(-.0833333333rem / var(--scale))}.thead-img .theading .left{gap:calc(.6666666667rem / var(--scale))}.ms-1.headerName-icon{min-width:calc(1.5rem / var(--scale))}.custom_radio{display:inline-flex;align-items:center;min-width:calc(1.6666666667rem / var(--scale))!important}.custom_radio .name{color:var(--neutral-600);font-size:var(--fs-20);line-height:calc(2rem / var(--scale));font-weight:400}.custom_radio.disabled{pointer-events:none}.custom_radio.disabled .radio_mark{background-color:var(--neutral-100);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.custom_radio.disabled .name{color:var(--neutral-300)}.custom_radio .name{padding-right:calc(1.9166666667rem / var(--scale))}.custom_radio input[type=radio]{display:none}.radio_mark{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));border:calc(.125rem / var(--scale)) solid var(--blue-700);border-radius:50%;margin-right:calc(.6666666667rem / var(--scale));position:relative;background-color:var(--white)}.custom_radio input[type=radio]:checked+.radio_mark{background-color:var(--white)}.radio_mark:after{content:\"\";width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));background:var(--blue-700);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.custom_radio input[type=radio]:checked+.radio_mark:after{opacity:1}.pagination_form{gap:calc(1.3333333333rem / var(--scale))}.pagination_select{position:relative}.select_dropdown{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--blue-50);border-radius:calc(.6666666667rem / var(--scale));margin:0 calc(.5rem / var(--scale))}.select_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--blue-700)}.select_option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--white);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--dropdown-shadow);border-radius:calc(.6666666667rem / var(--scale));left:calc(.5rem / var(--scale));z-index:10;padding:calc(.1666666667rem / var(--scale)) 0;margin:calc(.3333333333rem / var(--scale)) 0}.select_option span{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary);padding-left:calc(1rem / var(--scale))}.chevron_img{color:var(--neutral-600);width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.chevron_img img{width:calc(.8333333333rem / var(--scale))}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--white);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.openClose_dropdown{background-color:var(--neutral-50);width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));display:flex}.openClose_dropdown i-feather{transform-origin:center;transition:.3s;display:flex;stroke:var(--neutral-600)}.openClose_dropdown i-feather.rotate{transform:rotate(90deg)}.cell-value{line-height:140%}.ellipsis.more_data_wrapper{position:relative;cursor:default}.ellipsis.more_data_wrapper:hover+.see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;width:calc(19.0833333333rem / var(--scale));height:\"\";background-color:var(--blue-50);border-radius:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--dropdown-shadow);padding:calc(.6666666667rem / var(--scale)) 0;display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:10;top:calc(3.3333333333rem / var(--scale))}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--grey-100);font-size:var(--fs-16);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-all}.cell-value.ellipsis:hover .see_more_data{display:flex}.flex-center{display:flex;align-items:center}.cursor-pointer{cursor:pointer}.d-none{display:none}.sort_icons{display:flex;flex-direction:column;gap:calc(.4166666667rem / var(--scale))}.filters{position:relative;display:inline-block;margin-left:6px;cursor:pointer}.filter-icon{width:14px;opacity:.6}.filter-icon-active{background-color:#0ff}.filter-icon:hover{opacity:1}.filter-popup{position:absolute;top:20px;left:0;width:160px;background:#fff;border:1px solid #ddd;padding:8px;box-shadow:0 3px 8px #00000026;border-radius:4px;z-index:99}.filter-popup select,.filter-popup input{width:100%;margin-bottom:8px;padding:4px;font-size:13px}.reset-btn{width:100%;padding:4px;font-size:12px}.set-options{max-height:180px;overflow-y:auto;padding:6px 8px;border:1px solid #ddd;border-radius:6px;background:#fff;font-size:13px}.set-options label{display:flex;align-items:center;gap:6px;padding:6px 4px;cursor:pointer;border-radius:4px}.set-options label:hover{background:#f3f3f3}.set-options input[type=checkbox]{width:14px;height:14px;cursor:pointer}.set-options label:first-child{font-weight:600;border-bottom:1px solid #e5e5e5;margin-bottom:6px;padding-bottom:8px}.th_wraper{display:flex;justify-content:space-between;height:32px;align-items:center;padding:0 12px}.three-dots{cursor:pointer;padding:2px 4px;font-size:13px;-webkit-user-select:none;user-select:none}.three-dots:hover{background:#eee;border-radius:4px}.column-menu{position:absolute;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:9999;padding:6px 0;min-width:160px}.column-menu ul{margin:0;padding:0;list-style:none}.column-menu li{display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;font-size:14px}.column-menu li:hover{background:#f3f3f3}.column-menu hr{border:none;border-top:1px solid #eee;margin:4px 0}.filter_three_dot_wrapper{display:flex;justify-content:space-between;align-items:center}.logic-row{display:flex;align-items:center;gap:16px;margin:8px 0 6px 4px}.logic-item{display:flex;align-items:center;gap:6px;font-size:13px;color:#444}.logic-item input[type=radio]{width:14px;height:14px;accent-color:#2b7cff;cursor:pointer}.logic-item span{cursor:pointer;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
+    onMouseEnterHeader(index) {
+        this.showMoveIcon[index] = true;
+    }
+    onMouseLeaveHeader(index) {
+        this.showMoveIcon[index] = false;
+    }
+    enableColumnDrag(event, index) {
+        event.stopPropagation();
+        this.columnDraggable[index] = true;
+    }
+    disableColumnDrag(event, index) {
+        event.stopPropagation();
+        this.columnDraggable[index] = false;
+    }
+    dateTimeSelected(date) {
+        this.applyAllFilters();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsDataGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CatsDataGridComponent, isStandalone: true, selector: "cats-data-grid", inputs: { tableOptions: "tableOptions", totalRecords: "totalRecords", sortingRequired: "sortingRequired", checkBoxSelection: "checkBoxSelection", checkboxSelectionType: "checkboxSelectionType", rowData: "rowData", colDefs: "colDefs", paginationRequired: "paginationRequired", selectedRowEmpty: "selectedRowEmpty", filterRequired: "filterRequired", threeDotsMenuRequired: "threeDotsMenuRequired", height: "height", groupByRequired: "groupByRequired", pageSizeList: "pageSizeList" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\">\r\n  @if(groupByRequired){\r\n  <!-- Group Panel -->\r\n  <div\r\n    class=\"group_panel\"\r\n    (dragover)=\"onGroupDragOver($event)\"\r\n    (drop)=\"onGroupDrop($event)\"\r\n  >\r\n    <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\r\n    @for(g of activeGroups; track $index){\r\n    <div\r\n      class=\"group_tag\"\r\n      draggable=\"true\"\r\n      (dragstart)=\"onGroupDragStart($event, $index)\"\r\n      (dragover)=\"onActiveDragOver($event, $index)\"\r\n      (drop)=\"onActiveGroupDrop($event, $index)\"\r\n    >\r\n      <img src=\"images/t-gripper.svg\" alt=\"\" />\r\n      <span>{{ g.headerName }}</span>\r\n      <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\r\n        <img src=\"images/t-x.svg\" alt=\"\" />\r\n      </button>\r\n    </div>\r\n    <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\r\n    } @if(activeGroups.length === 0){\r\n    <div class=\"group_placeholder\">Drag here to set row groups</div>\r\n    }\r\n  </div>\r\n  }\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"container_scroll\"\r\n    #parent\r\n    (scroll)=\"infinityScroll($event)\"\r\n    [ngStyle]=\"{ height: height + 'px' }\"\r\n  >\r\n    <table cellspacing=\"0\" cellpadding=\"0\">\r\n      <thead class=\"sticky-top\">\r\n        <tr>\r\n          @if (checkBoxSelection && checkboxSelectionType == 'multiple') {\r\n          <th style=\"width: 50px\">\r\n            <span class=\"checkbox_container\"\r\n              ><input\r\n                class=\"pointer\"\r\n                type=\"checkbox\"\r\n                name=\"\"\r\n                id=\"\"\r\n                [checked]=\"checkAllSelected()\"\r\n                [indeterminate]=\"checkInterminate()\"\r\n                (change)=\"onHeaderCheckboxChange($event)\"\r\n            /></span>\r\n          </th>\r\n\r\n          } @else{\r\n          <th></th>\r\n          } @if(activeGroups.length > 0){\r\n          <th class=\"active_group\">\r\n            <div class=\"th_wraper\">\r\n              <div class=\"text_wrapper\">\r\n                <span class=\"ellipsis headerName\">Group</span>\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <div class=\"three-dots\">\r\n                  <img src=\"images/t-more-vertical.svg\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </th>\r\n          } @for (col of colDefs; track col.colId) {\r\n          <th\r\n            [ngStyle]=\"getStyle(col, 'action')\"\r\n            [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n            (dragover)=\"onDragOver($event, $index)\"\r\n            (drop)=\"onDrop($event, $index)\"\r\n            (mouseenter)=\"onMouseEnterHeader($index)\"\r\n            (mouseleave)=\"onMouseLeaveHeader($index)\"\r\n          >\r\n            <div class=\"th_wraper\">\r\n              <div\r\n                class=\"text_wrapper\"\r\n                [ngStyle]=\"getStyle(col, 'action')\"\r\n                (click)=\"onSortingRowData($index, col)\"\r\n              >\r\n                @if(showMoveIcon[$index] && !col.isAction){\r\n                <img\r\n                  src=\"images/t-move.svg\"\r\n                  class=\"move-icon\"\r\n                  [draggable]=\"!isResizing || columnDraggable[$index]\"\r\n                  (dragstart)=\"onDragStart($event, $index)\"\r\n                  (dragend)=\"onDragEnd()\"\r\n                  (mouseenter)=\"enableColumnDrag($event, $index)\"\r\n                  (mouseleave)=\"disableColumnDrag($event, $index)\"\r\n                />\r\n\r\n                }\r\n                <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n                @if (sortingRequired && sortingColumnIndex == $index &&\r\n                col?.sortable && !col.isAction) {\r\n                <span class=\"sorting_icon\">\r\n                  @if(sortingType[$index]=== 'asc'){\r\n                  <img\r\n                    src=\"images/t-arrow-up.svg\"\r\n                    class=\"sorting_up\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  } @if(sortingType[$index]=== 'dsc'){\r\n                  <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n                  <img\r\n                    src=\"images/t-arrow-down.svg\"\r\n                    class=\"sorting_down\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  }\r\n                </span>\r\n\r\n                }\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <!-- Column Filters Logic-->\r\n                @if(filterRequired && col.filterable){\r\n                <div\r\n                  #trigger\r\n                  class=\"filters\"\r\n                  (click)=\"toggleFilter(col, $index, $event)\"\r\n                >\r\n                  @if(activeFilters.has(col.fieldName)){\r\n                  <img\r\n                    src=\"images/t-filter-applied.svg\"\r\n                    class=\"filter-icon\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  }@else {\r\n                  <img\r\n                    src=\"images/t-filter.svg\"\r\n                    class=\"filter-icon\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  } @if (activeFilterIndex === $index) {\r\n                  <div\r\n                    adaptivePosition\r\n                    [trigger]=\"trigger\"\r\n                    [parentContainer]=\"parent\"\r\n                    [matchWidth]=\"false\"\r\n                    class=\"filter_wrapper\"\r\n                    id=\"filter_wrapper-{{ $index }}\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    appOutsideClick\r\n                    (clickOutside)=\"onClickOutside()\"\r\n                  >\r\n                    <!-- Text Filter -->\r\n                    @if(col.filterType === 'text'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"filterOptions\"\r\n                      [selectedValue]=\"col.textFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.textFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    @if(col.textFilters[0].filterValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"filterOptions\"\r\n                      [selectedValue]=\"col.textFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.textFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n                    } }\r\n\r\n                    <!-- Number Filter -->\r\n                    @if(col.filterType === 'number'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.numberFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.numberFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <!-- <input\r\n                      type=\"number\"\r\n                      [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                      (input)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"number\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                        (input)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n\r\n                    @if(col.numberFilters[0].numberValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.numberFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.numberFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n                    } }\r\n\r\n                    <!-- DATE FILTER -->\r\n                    @if(col.filterType === 'date'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.dateFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.dateFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <!-- <input\r\n                      type=\"date\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (change)=\"applyAllFilters()\"\r\n                    /> -->\r\n                    <lib-common-calendar\r\n                      [dateConfig]=\"dateConfig\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                    ></lib-common-calendar>\r\n\r\n                    @if(col.dateFilters[0].dateValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.dateFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.dateFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <lib-common-calendar\r\n                      [dateConfig]=\"dateConfig\"\r\n                      [(ngModel)]=\"col.dateFilters[1].dateValue\"\r\n                      (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                    ></lib-common-calendar>\r\n                    } }\r\n\r\n                    <!-- SET FILTER (CHECKBOX LIST) -->\r\n                    @if(col.filterType === 'set'){\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      placeholder=\"Search...\"\r\n                      (input)=\"filterSetOptions(col, $event)\"\r\n                    /> -->\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Search...\"\r\n                        (input)=\"filterSetOptions(col, $event)\"\r\n                      />\r\n                    </div>\r\n\r\n                    <div class=\"set_option_details\">\r\n                      <label class=\"checkbox_container\">\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          [checked]=\"isAllSelected(col)\"\r\n                          (change)=\"toggleSelectAll(col, $event)\"\r\n                        />\r\n                        (Select All)\r\n                      </label>\r\n                      <div class=\"set_options\" id=\"container_scroll\">\r\n                        @for(opt of col.filteredOptions; track $index){\r\n                        <label class=\"checkbox_container\">\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            [checked]=\"col.selectedValues.has(opt)\"\r\n                            (change)=\"toggleSetOption(col, opt, $event)\"\r\n                          />\r\n                          {{ opt }}\r\n                        </label>\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                    }\r\n                    <div class=\"filter_btn\">\r\n                      <button\r\n                        class=\"reset_btn\"\r\n                        type=\"button\"\r\n                        (click)=\"resetFilter(col)\"\r\n                      >\r\n                        Reset\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                }\r\n\r\n                <!-- Three dots menu-->\r\n                <div #triggerColMenu>\r\n                  @if(threeDotsMenuRequired && col.columnAction){\r\n\r\n                  <div\r\n                    class=\"three-dots\"\r\n                    (click)=\"openMenu($event, col, $index)\"\r\n                  >\r\n                    <img\r\n                      src=\"images/t-more-vertical.svg\"\r\n                      [draggable]=\"false\"\r\n                      (dragstart)=\"\r\n                        $event.preventDefault(); $event.stopPropagation()\r\n                      \"\r\n                    />\r\n                  </div>\r\n                  }\r\n                </div>\r\n                @if(!col.isAction){\r\n                <span\r\n                  class=\"resize-handle\"\r\n                  (mousedown)=\"startResize($event, $index)\"\r\n                >\r\n                  |\r\n                </span>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <!-- popup open -->\r\n            @if(menuVisible[$index]){\r\n            <div\r\n              class=\"dropdown_wrapper\"\r\n              adaptivePosition\r\n              [trigger]=\"triggerColMenu\"\r\n              [parentContainer]=\"parent\"\r\n              [matchWidth]=\"false\"\r\n              [isColumnActionMenu]=\"true\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              appOutsideClick\r\n              (clickOutside)=\"onClickOutside()\"\r\n            >\r\n              <div class=\"right_click_dropdown\" id=\"container_scroll\">\r\n                @if(sortingType[$index] === 'dsc' || sortingType[$index] ===\r\n                ''){\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (click)=\"onSort(col, 'asc', $index)\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img\r\n                      src=\"images/arrow-up.svg\"\r\n                      class=\"sorting_up\"\r\n                      [ngClass]=\"{ disable: !col.sortable }\"\r\n                    />\r\n                    <span class=\"text\">Sort Ascending</span>\r\n                  </div>\r\n                </div>\r\n                } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n                ''){\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (click)=\"onSort(col, 'dsc', $index)\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/arrow-down.svg\" />\r\n                    <span class=\"text\">Sort Descending</span>\r\n                  </div>\r\n                </div>\r\n                } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n                'dsc'){\r\n                <div class=\"right_click_item\" (click)=\"onSort(col, '', $index)\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/trash-2.svg\" />\r\n                    <span class=\"text\">Clear Sort</span>\r\n                  </div>\r\n                </div>\r\n                }\r\n                <div class=\"divder\"></div>\r\n\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (mouseenter)=\"showPinActions()\"\r\n                  (mouseleave)=\"hidePinActions()\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/pin.svg\" />\r\n                    <span class=\"text\">Pin Column</span>\r\n                  </div>\r\n                  <div class=\"right_item\">\r\n                    <img src=\"images/chevron-right.svg\" />\r\n                    @if(showPin){\r\n                    <div class=\"second_dropdown\">\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'none')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if((pinActionClicked[col.colId]?? 'none') ===\r\n                          'none'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">No Pin</span>\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'left')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if(pinActionClicked[col.colId] === 'left'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">Pin Left</span>\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'right')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if(pinActionClicked[col.colId] === 'right'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">Pin Right</span>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- <div\r\n                    class=\"right_click_item\"\r\n                    (click)=\"pinColumn(col, $index, 'left')\"\r\n                  >\r\n                    <div class=\"left_item\">\r\n                      <img src=\"images/pin.svg\" />\r\n                      <span class=\"text\">{{\r\n                        col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\r\n                      }}</span>\r\n                    </div>\r\n                  </div>\r\n                  <div\r\n                    class=\"right_click_item\"\r\n                    (click)=\"pinColumn(col, $index, 'right')\"\r\n                  >\r\n                    <div class=\"left_item\">\r\n                      <img src=\"images/pin.svg\" />\r\n                      <span class=\"text\">\r\n                        {{\r\n                          col.rightPinned\r\n                            ? \"Unpin Right Column\"\r\n                            : \"Pin Column Right\"\r\n                        }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"right_item\">\r\n                      <img src=\"images/arrow-right.svg\" alt=\"\" />\r\n                    </div>\r\n                  </div> -->\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Autosize This Column</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Autosize All Columns</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div\r\n                    class=\"left_item\"\r\n                    (click)=\"groupByColumnAction(col, $index)\"\r\n                  >\r\n                    <img src=\"images/t-group-by-name.svg\" alt=\"\" />\r\n                    <span class=\"text\">Group by {{ col.headerName }}</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/t-choose-column.svg\" alt=\"\" />\r\n                    <span class=\"text\">Choose Columns</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Reset Columns</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n          </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if(groupedResult && groupedResult.length > 0){ @for(group of\r\n        groupedResult; track group.key){\r\n        <tr (click)=\"toggleGroup(group)\">\r\n          <td\r\n            class=\"group-cell\"\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n          >\r\n            <span class=\"group-toggle\">\r\n              <img\r\n                src=\"images/{{\r\n                  group.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n                }}\"\r\n              />\r\n              {{ group.key }} ({{ group.children.length }})\r\n            </span>\r\n          </td>\r\n        </tr>\r\n\r\n        @if(group.expanded){\r\n        <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\r\n        @if (group.children[0]?.children) { @for (child of group.children; track\r\n        child.key) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"groupTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: child,\r\n            colDefs: colDefs,\r\n            checkBoxSelection: checkBoxSelection,\r\n            activeGroups: activeGroups,\r\n            level: 1\r\n          }\"\r\n        ></ng-container>\r\n        } }\r\n\r\n        <!-- CASE 2: CHILDREN ARE RAW ROWS -->\r\n        @if (!group.children[0]?.children) { @for (row of group.children; track\r\n        row.rowId) {\r\n        <tr [ngClass]=\"row | addClass : tableOptions\">\r\n          <!-- Checkbox column if any -->\r\n          @if (checkBoxSelection) {\r\n          <td>\r\n            <span class=\"checkbox_container\">\r\n              <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n            /></span>\r\n          </td>\r\n          } @if (activeGroups.length > 0) {\r\n          <td class=\"group-placeholder\"></td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track col.colId) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            <!-- {{ row[col.fieldName] }} -->\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(row, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"row\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"row[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n          </td>\r\n          }\r\n        </tr>\r\n        } } } } } @else{ @for (data of rowData; track data.rowId) {\r\n        <tr [ngClass]=\"data | addClass : tableOptions\">\r\n          @if (checkBoxSelection) {\r\n          <td style=\"min-width: 50px\">\r\n            @if (checkboxSelectionType=='multiple') {\r\n            <span class=\"checkbox_container\"\r\n              ><input\r\n                type=\"checkbox\"\r\n                class=\"pointer\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n            /></span>\r\n\r\n            }@else{\r\n            <span class=\"radio_option\">\r\n              <input\r\n                type=\"radio\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n              />\r\n              <label [for]=\"data.rowId\"></label>\r\n            </span>\r\n\r\n            }\r\n          </td>\r\n          } @for (col of colDefs; track col.colId) {\r\n          <td\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"[col?.addClass ? col.addClass(data) : '']\"\r\n          >\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(data, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(data, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"data\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"data[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n            <!-- Commented for later use -->\r\n            <!-- <div class=\"tool_tip\">\r\n              <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\r\n            </div> -->\r\n          </td>\r\n          }\r\n        </tr>\r\n        } @empty {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n          >\r\n            <div class=\"small_data\">\r\n              @if (tableOptions?.noDataTemplate) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tableOptions?.noDataTemplate\"\r\n              ></ng-container>\r\n\r\n              }@else{\r\n              <!-- need to style it properly then we will add it -->\r\n              <span>No Data To Show</span>\r\n\r\n              }\r\n            </div>\r\n          </td>\r\n        </tr>\r\n\r\n        } }\r\n      </tbody>\r\n\r\n      <ng-template\r\n        #groupTemplate\r\n        let-node\r\n        let-colDefs=\"colDefs\"\r\n        let-checkBoxSelection=\"checkBoxSelection\"\r\n        let-activeGroups=\"activeGroups\"\r\n        let-level=\"level\"\r\n      >\r\n        <!-- GROUP HEADER -->\r\n        <tr (click)=\"toggleGroup(node)\">\r\n          <td\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n            [style.paddingLeft.px]=\"level * 20\"\r\n            class=\"group-cell\"\r\n          >\r\n            <span class=\"group-toggle\">\r\n              <img\r\n                src=\"images/{{\r\n                  node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n                }}\"\r\n              />\r\n              {{ node.key }} ({{ node.children.length }})\r\n            </span>\r\n          </td>\r\n        </tr>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (node.expanded) {\r\n\r\n        <!-- CASE: more groups -->\r\n        @if (node.children[0]?.children) { @for (child of node.children; track\r\n        child.key) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"groupTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: child,\r\n            colDefs: colDefs,\r\n            checkBoxSelection: checkBoxSelection,\r\n            activeGroups: activeGroups,\r\n            level: level + 1\r\n          }\"\r\n        >\r\n        </ng-container>\r\n        } }\r\n\r\n        <!-- CASE: final rows -->\r\n        @if (!node.children[0]?.children) { @for (row of node.children; track\r\n        row.rowId) {\r\n\r\n        <tr [ngClass]=\"row | addClass : tableOptions\">\r\n          <!-- Checkbox column if any -->\r\n          @if (checkBoxSelection) {\r\n          <td>\r\n            <span class=\"checkbox_container\">\r\n              <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n            /></span>\r\n          </td>\r\n          } @if (activeGroups.length > 0) {\r\n          <td class=\"group-placeholder\"></td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track col.colId) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            <!-- {{ row[col.fieldName] }} -->\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(row, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"row\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"row[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n          </td>\r\n          }\r\n        </tr>\r\n        } } }\r\n      </ng-template>\r\n    </table>\r\n  </div>\r\n  <!--  Table Wrapper Ends-->\r\n  @if(paginationRequired){\r\n  <div class=\"pagination_main\">\r\n    <div class=\"entries_details\">\r\n      <span>Showing</span>\r\n      <div class=\"pagination_select\">\r\n        <div\r\n          class=\"select_dropdown pointer\"\r\n          (click)=\"showPageSizeList = !showPageSizeList\"\r\n        >\r\n          <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\r\n          <span class=\"chevron_img\">\r\n            <img src=\"images/chevron-down.svg\" class=\"pointer\" />\r\n          </span>\r\n        </div>\r\n        @if(showPageSizeList){\r\n        <div class=\"select_option\">\r\n          @for(option of pageSizeList;track $index){\r\n          <span\r\n            class=\"pointer\"\r\n            (click)=\"onPageSizeChanged(option); onClickOutside()\"\r\n            >{{ option }}</span\r\n          >\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      <span\r\n        >Rows | {{ totalRecords > 0 ? recordsToShow.min + 1 : 0 }} -\r\n        {{\r\n          recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\r\n        }}\r\n        of\r\n        {{ totalRecords }} Entries</span\r\n      >\r\n    </div>\r\n    <div class=\"pagination_form\">\r\n      <!-- <span>Page</span> -->\r\n\r\n      <button class=\"outlined_btn first_btn\" type=\"button\">\r\n        <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <button\r\n        class=\"outlined_btn prev_btn\"\r\n        [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\r\n        type=\"button\"\r\n        (click)=\"onBtPrevClick()\"\r\n      >\r\n        <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <div>\r\n        <input\r\n          class=\"input_style\"\r\n          type=\"number\"\r\n          [(ngModel)]=\"pageDetails.currentPage\"\r\n          (change)=\"goToSelectedPage($event)\"\r\n          name=\"\"\r\n          id=\"\"\r\n        />\r\n      </div>\r\n      <button\r\n        class=\"outlined_btn next_btn\"\r\n        type=\"button\"\r\n        [ngClass]=\"\r\n          pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\r\n        \"\r\n        (click)=\"onBtNextClick()\"\r\n      >\r\n        <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <!-- <span>of {{ pageDetails.totalPages }}</span> -->\r\n\r\n      <button class=\"outlined_btn last_btn\" type=\"button\">\r\n        <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n  <!-- Pagination Ends -->\r\n</div>\r\n\r\n<!-- cell right click code start here -->\r\n<div class=\"dropdown_wrapper d-none\">\r\n  <div class=\"right_click_dropdown\">\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/scissors.svg\" />\r\n        <span class=\"text\">Cut</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+X</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+C</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy with Headers</span>\r\n      </div>\r\n      <span class=\"right_item\"></span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy with Group Headers</span>\r\n      </div>\r\n      <span class=\"right_item\"></span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/clipboard.svg\" alt=\"\" />\r\n        <span class=\"text\">Paste</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+V</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/bar-chart.svg\" alt=\"\" />\r\n        <span class=\"text\">Chart</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/download.svg\" alt=\"\" />\r\n        <span class=\"text\">Export</span>\r\n      </div>\r\n\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Chart section Start Here -->\r\n  <div class=\"second_dropdown\">\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Column</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Bar</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Pie</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Line</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Area</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">XY(Scatter)</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Polar</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Stastical</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Hierarchical</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Specialized</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Funnel</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Combination</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Export Section start Here -->\r\n  <div class=\"export_section d-none\">\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/file.svg\" alt=\"\" />\r\n        <span class=\"text\">CSV Report</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/file.svg\" alt=\"\" />\r\n        <span class=\"text\">Excel Report</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Column Group Section Start Here -->\r\n  <div class=\"third_dropdown\">\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Grouped</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Stacked</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">100% Stacked</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--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;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--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;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-100);border-color:var(--neutral-100)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.switch_wrapper{display:flex}.switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.switch_wrapper .switch input{display:none}.switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ellipsis.more_data_wrapper{position:relative;cursor:default}.ellipsis.more_data_wrapper:hover+.see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;width:calc(26.4166666667rem / var(--scale));height:\"\";background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:14;padding:calc(.5rem / var(--scale)) 0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-all}.tableArea{width:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table{border-collapse:collapse;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}.tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:13}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:140%;font-weight:400;color:var(--neutral-500);min-width:calc(11.6666666667rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;line-height:1}.tableArea .table_wrapper table td .ellipsis,.tableArea .table_wrapper table th .ellipsis{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(25rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale))}.tableArea .table_wrapper table thead .checkbox_section{min-width:calc(3.8333333333rem / var(--scale))!important;width:calc(3.8333333333rem / var(--scale))}.tableArea .table_wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));color:var(--neutral-500)}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer}.tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--neutral-50)}.tableArea .table_wrapper table thead th:last-child .th_wraper{border:0}.tableArea .table_wrapper table thead th:hover .none{display:block}.tableArea .table_wrapper table thead th:hover .up,.tableArea .table_wrapper table thead th:hover .down{display:none}.tableArea .table_wrapper table tbody{background-color:var(--white)}.tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);transition:all .3s ease-in-out}.tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover{background-color:var(--blue-50)}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / var(--scale))}.tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td.action:hover{border-left:calc(.0833333333rem / var(--scale)) solid var(--blue-700);border-right:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.th_wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-right:calc(.1666666667rem / var(--scale)) solid var(--neutral-200)}.th_wraper .text_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th_wraper .text_wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th_wraper .filter_three_dot_wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters:hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:20px;left:0;width:calc(18.8333333333rem / var(--scale));background:var(--neutral-50);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper lib-common-input{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details .set_options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(10.8333333333rem / var(--scale));overflow-y:auto}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--white);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--blue-600);border-color:var(--blue-600);color:var(--white)}.th_wraper .filter_three_dot_wrapper .three-dots{margin-right:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .three-dots :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .resize-handle{position:absolute;right:0;top:30%;height:50%;color:var(--neutral-200);font-size:calc(1.1666666667rem / var(--scale));margin-top:calc(-.1666666667rem / var(--scale));cursor:w-resize}.tableArea .table_wrapper .headerName{font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination_main .entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select{position:relative}.pagination_main .entries_details .pagination_select .select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img img{width:calc(1.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--white);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination_main .entries_details .pagination_select .select_option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option span:hover{background-color:var(--neutral-50)}.pagination_main .pagination_form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination_main .pagination_form .prev_btn,.pagination_main .pagination_form .next_btn,.pagination_main .pagination_form .first_btn,.pagination_main .pagination_form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .pagination_form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-500);cursor:pointer}.pagination_main .pagination_form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--neutral-200)}.pagination_main .pagination_form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination_main .input_style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-600);text-align:center;outline:none;padding:0}.tableArea .table_wrapper table th:not(:last-child) .right .line{display:block;border-left:calc(.1666666667rem / var(--scale)) solid var(--grey-50);height:calc(2rem / var(--scale))}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--white);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.cell-value{line-height:0}.cell-value.ellipsis:hover .see_more_data{display:flex}.d-none{display:none}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--neutral-50);border-radius:calc(.3333333333rem / var(--scale))}.group_panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--neutral-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(0rem / var(--scale));border-top:0;height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.group_panel img.divider:last-child{display:none}.group_panel .group_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;cursor:grab}.group_panel .group_tag .remove_tag{border:0;padding:0;cursor:pointer}.group_panel .group_placeholder{color:var(--neutral-500)}.group_panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);cursor:pointer}.active_group{width:100px}.dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale))}.dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.dropdown_wrapper .right_click_item:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-50)}.dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.dropdown_wrapper .right_click_item .right_chevron{stroke:var(--neutral-400)}.second_dropdown{position:absolute;right:calc(-20rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CommonCalendarComponent, selector: "lib-common-calendar", inputs: ["dateConfig", "minDate", "maxDate", "preSelectedValue"], outputs: ["dateTimeSelected"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "component", type: CommonInputComponent, selector: "lib-common-input", inputs: ["options", "selectedValue", "placeholder", "elementType"], outputs: ["valueChange"] }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CatsDataGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsDataGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cats-data-grid', imports: [
                         CommonModule,
                         FormsModule,
+                        CommonCalendarComponent,
                         OutsideClickDirective,
+                        AdaptivePositionDirective,
                         RendererParserDirective,
                         AddClassPipe,
-                    ], template: "<div class=\"tableArea\">\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"container_scroll\"\r\n    (scroll)=\"infinityScroll($event)\"\r\n    [ngStyle]=\"{ height: height + 'px' }\"\r\n  >\r\n    <table cellspacing=\"0\" cellpadding=\"0\">\r\n      <thead class=\"sticky-top\">\r\n        <tr>\r\n          @if (checkBoxSelection && checkboxSelectionType == 'multiple') {\r\n          <th style=\"width: 50px\">\r\n            <span\r\n              ><input\r\n                class=\"form-check-input cursor-pointer\"\r\n                type=\"checkbox\"\r\n                name=\"\"\r\n                id=\"\"\r\n                [checked]=\"checkAllSelected()\"\r\n                [indeterminate]=\"checkInterminate()\"\r\n                (change)=\"onHeaderCheckboxChange($event)\"\r\n            /></span>\r\n          </th>\r\n          } @for (col of colDefs; track $index) {\r\n          <th\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n            draggable=\"true\"\r\n            (dragstart)=\"onDragStart($event, $index)\"\r\n            (dragover)=\"onDragOver($event, $index)\"\r\n            (drop)=\"onDrop($event, $index)\"\r\n            (dragend)=\"onDragEnd()\"\r\n          >\r\n            <div class=\"th_wraper\">\r\n              <div\r\n                class=\"flex-center\"\r\n                [ngStyle]=\"getStyle(col)\"\r\n                (click)=\"onSortingRowData($index, col?.fieldName)\"\r\n              >\r\n                <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n                @if (sortingRequired && sortingColumnIndex == $index) {\r\n                <span class=\"headerName-icon\">\r\n                  <ul class=\"\">\r\n                    @if(sortingType){\r\n                    <li class=\"cursor-pointer\">\r\n                      <img\r\n                        src=\"images/sort_up.svg\"\r\n                        class=\"sorting_up\"\r\n                        [ngClass]=\"\r\n                          sortingColumnIndex == $index && sortingType == 'asc'\r\n                            ? 'd-none'\r\n                            : ''\r\n                        \"\r\n                      />\r\n                    </li>\r\n                    <li class=\"cursor-pointer\">\r\n                      <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n                      <img\r\n                        src=\"images/sort_down.svg\"\r\n                        class=\"sorting_down\"\r\n                        [ngClass]=\"\r\n                          sortingColumnIndex == $index && sortingType == 'dsc'\r\n                            ? 'd-none'\r\n                            : ''\r\n                        \"\r\n                      />\r\n                    </li>\r\n\r\n                    }\r\n                  </ul>\r\n                </span>\r\n\r\n                }\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <!-- Column Filters Logic-->\r\n                @if(filterRequired && col.filter){\r\n                <div\r\n                  class=\"filters\"\r\n                  (click)=\"toggleFilter(col, $index, $event)\"\r\n                >\r\n                  <img\r\n                    src=\"images/filter-icon.svg\"\r\n                    class=\"filter-icon\"\r\n                    [ngClass]=\"\r\n                      activeFilters.has(col.fieldName)\r\n                        ? 'filter-icon-active'\r\n                        : 'filter-icon'\r\n                    \"\r\n                  />\r\n\r\n                  @if (activeFilterIndex === $index) {\r\n                  <div\r\n                    class=\"filter-popup\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    appOutsideClick\r\n                    (clickOutside)=\"onClickOutside()\"\r\n                  >\r\n                    <!-- Text Filter -->\r\n                    @if(col.dataType === 'text'){\r\n                    <select [(ngModel)]=\"col.textFilters[0].filterType\">\r\n                      <option value=\"contains\">Contains</option>\r\n                      <option value=\"doesNotContain\">Does Not Contain</option>\r\n                      <option value=\"equals\">Equals</option>\r\n                      <option value=\"doesNotEqual\">Does Not Equal</option>\r\n                      <option value=\"startsWith\">Starts With</option>\r\n                      <option value=\"endsWith\">Ends With</option>\r\n                    </select>\r\n\r\n                    <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    />\r\n\r\n                    @if(col.textFilters[0].filterValue){\r\n                    <div class=\"logic-row\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n\r\n                    <select [(ngModel)]=\"col.textFilters[1].filterType\">\r\n                      <option value=\"contains\">Contains</option>\r\n                      <option value=\"doesNotContain\">Does Not Contain</option>\r\n                      <option value=\"equals\">Equals</option>\r\n                      <option value=\"doesNotEqual\">Does Not Equal</option>\r\n                      <option value=\"startsWith\">Starts With</option>\r\n                      <option value=\"endsWith\">Ends With</option>\r\n                    </select>\r\n\r\n                    <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    />\r\n                    } }\r\n\r\n                    <!-- Number Filter -->\r\n                    @if(col.dataType === 'number'){\r\n                    <select [(ngModel)]=\"col.numberFilters[0].numberCondition\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\r\n\r\n                    <input\r\n                      type=\"number\"\r\n                      [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                      (input)=\"applyAllFilters()\"\r\n                    />\r\n\r\n                    @if(col.numberFilters[0].numberValue){\r\n                    <div class=\"logic-row\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n\r\n                    <select [(ngModel)]=\"col.numberFilters[1].numberCondition\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\r\n\r\n                    <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    />\r\n                    } }\r\n\r\n                    <!-- DATE FILTER -->\r\n                    <ng-container *ngIf=\"col.dataType === 'date'\">\r\n                      <select [(ngModel)]=\"col.numberCondition\">\r\n                        <option value=\"=\">Equals</option>\r\n                        <option value=\">\">Greater Than</option>\r\n                        <option value=\"<\">Less Than</option>\r\n                        <option value=\">=\">>=</option>\r\n                        <option value=\"<=\"><=</option>\r\n                      </select>\r\n                      <input\r\n                        type=\"date\"\r\n                        [(ngModel)]=\"col.dateValue\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                    </ng-container>\r\n\r\n                    <!-- SET FILTER (CHECKBOX LIST) -->\r\n                    <ng-container *ngIf=\"col.dataType === 'set'\">\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Search...\"\r\n                        (input)=\"filterSetOptions(col, $event)\"\r\n                      />\r\n\r\n                      <div class=\"set-options\">\r\n                        <label>\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            [checked]=\"isAllSelected(col)\"\r\n                            (change)=\"toggleSelectAll(col, $event)\"\r\n                          />\r\n                          (Select All)\r\n                        </label>\r\n\r\n                        <label *ngFor=\"let opt of col.filteredOptions\">\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            [checked]=\"col.selectedValues.has(opt)\"\r\n                            (change)=\"toggleSetOption(col, opt, $event)\"\r\n                          />\r\n                          {{ opt }}\r\n                        </label>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                }\r\n\r\n                <!-- Three dots menu-->\r\n                @if(threeDotsMenuRequired && col.menu){\r\n\r\n                <div class=\"three-dots\" (click)=\"openMenu($event, col, $index)\">\r\n                  <img src=\"images/more-vertical.svg\" />\r\n                </div>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <!-- popup open -->\r\n            <div\r\n              class=\"column-menu\"\r\n              *ngIf=\"menuVisible[$index]\"\r\n              [ngStyle]=\"menuPosition[$index]\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              appOutsideClick\r\n              (clickOutside)=\"onClickOutside()\"\r\n            >\r\n              <ul>\r\n                @if(sortingType === 'dsc' || sortingType === ''){\r\n                <li (click)=\"onSort(col?.fieldName, 'asc')\">\r\n                  <img src=\"images/arrow-up.svg\" class=\"sorting_up\" />\r\n                  Sort Ascending\r\n                </li>\r\n                } @if(sortingType === 'asc' || sortingType === ''){\r\n                <li (click)=\"onSort(col?.fieldName, 'dsc')\">\r\n                  <img src=\"images/arrow-down.svg\" class=\"sorting_up\" />\r\n                  Sort Descending\r\n                </li>\r\n                } @if(sortingType === 'asc' || sortingType === 'dsc'){\r\n                <li (click)=\"onSort(col?.fieldName, '')\">\r\n                  <span>\r\n                    <img src=\"images/chevron-up.svg\" class=\"sorting_up\" />\r\n                    <img src=\"images/chevron-down.svg\" class=\"sorting_up\" />\r\n                  </span>\r\n                  Clear Sort\r\n                </li>\r\n                }\r\n              </ul>\r\n            </div>\r\n          </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (data of rowData; track data.rowId) {\r\n        <tr [ngClass]=\"data | addClass : tableOptions\">\r\n          @if (checkBoxSelection) {\r\n          <td style=\"min-width: 50px\">\r\n            @if (checkboxSelectionType=='multiple') {\r\n            <span\r\n              ><input\r\n                type=\"checkbox\"\r\n                class=\"form-check-input pointer\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n            /></span>\r\n\r\n            }@else{\r\n            <span class=\"checkboxInput\">\r\n              <input\r\n                type=\"radio\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n              />\r\n            </span>\r\n\r\n            }\r\n          </td>\r\n          } @for (col of colDefs; track $index) {\r\n          <td\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"col?.addClass ? col.addClass(data) : ''\"\r\n          >\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(data, col.fieldName) }}\r\n              </div>\r\n              <div class=\"see_more_data\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\">\r\n                    {{ parseColValue(data, col.fieldName) }}</span\r\n                  >\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"data\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"data[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n            <!-- Commented for later use -->\r\n            <!-- <div class=\"tool_tip\">\r\n              <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\r\n            </div> -->\r\n          </td>\r\n          }\r\n        </tr>\r\n        } @empty {\r\n        <tr>\r\n          <td [attr.colspan]=\"colDefs.length + 1\">\r\n            <div class=\"small_data\">\r\n              @if (tableOptions?.noDataTemplate) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tableOptions?.noDataTemplate\"\r\n              ></ng-container>\r\n\r\n              }@else{\r\n              <!-- need to style it properly then we will add it -->\r\n              <span>No Data To Show</span>\r\n\r\n              }\r\n            </div>\r\n          </td>\r\n        </tr>\r\n\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n  <!--  Table Wrapper Ends-->\r\n  @if(paginationRequired){\r\n  <div class=\"pagination_main\">\r\n    <div class=\"entries_details\">\r\n      <span>Showing</span>\r\n      <div\r\n        class=\"pagination_select\"\r\n        appOutsideClick\r\n        (clickOutside)=\"onClickOutside()\"\r\n      >\r\n        <div\r\n          class=\"select_dropdown pointer\"\r\n          (click)=\"showPageSizeList = !showPageSizeList\"\r\n        >\r\n          <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\r\n          <span class=\"chevron_img\">\r\n            <img src=\"images/chevron-down.svg\" class=\"pointer\" />\r\n          </span>\r\n        </div>\r\n        @if(showPageSizeList){\r\n        <div class=\"select_option\">\r\n          @for(option of pageSizeList;track $index){\r\n          <span\r\n            class=\"pointer\"\r\n            (click)=\"onPageSizeChanged(option); onClickOutside()\"\r\n            >{{ option }}</span\r\n          >\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      <span\r\n        >Rows | {{ totalRecords > 0 ? recordsToShow.min + 1 : 0 }} -\r\n        {{\r\n          recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\r\n        }}\r\n        of\r\n        {{ totalRecords }} Entries</span\r\n      >\r\n    </div>\r\n    <div class=\"pagination_form flex-center\">\r\n      <span>Page</span>\r\n\r\n      <button\r\n        class=\"outlined_btn prev_btn\"\r\n        [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\r\n        type=\"button\"\r\n        (click)=\"onBtPrevClick()\"\r\n      >\r\n        <span> < </span>\r\n      </button>\r\n      <div>\r\n        <input\r\n          class=\"input_style right\"\r\n          type=\"number\"\r\n          [(ngModel)]=\"pageDetails.currentPage\"\r\n          (change)=\"goToSelectedPage($event)\"\r\n          name=\"\"\r\n          id=\"\"\r\n        />\r\n      </div>\r\n      <button\r\n        class=\"outlined_btn next_btn\"\r\n        type=\"button\"\r\n        [ngClass]=\"\r\n          pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\r\n        \"\r\n        (click)=\"onBtNextClick()\"\r\n      >\r\n        <span> > </span>\r\n      </button>\r\n      <span>of {{ pageDetails.totalPages }}</span>\r\n    </div>\r\n  </div>\r\n  }\r\n  <!-- Pagination Ends -->\r\n</div>\r\n", styles: [":root{--white: #fff;--white-creame: #ebf3ff;--border: #dae3f8;--scrollbar: var(--border);--textPrimary: #0b1c33;--textPrimary70: #0b1c33b3;--textSecondary: #556171;--textSecondary50: #55617180;--textSecondary70: #556171b3;--pink-10: #f9fbfe;--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;--yellow-50: #ffeedf;--yellow-100: #fed18f;--yellow-200: #ffbca6;--yellow-300: #f08a2b26;--yellow-400: #e58900;--primaryOrange: #f05a2b;--primaryOrange50: #f05a2b80;--primaryOrange70: #f05a2bb3;--orange-10: #fcf5eb;--orange-200: #f7ac94;--orange-300: #fb9676;--theadBg: var(--blue-50);--pagination-bg: #f7fafe;--blue-200: var(--border);--neutral-200: #dadbdc;--neutral-600: #040d17;--toastShadow: #0000001f;--dropdown-shadow: #00000014;--green-50: #eaf8f1;--green-100: #bde8d3;--green-600: #27a468;--red-10: #fcebef;--red-20: #ca0000;--red-30: #F7C1CE;--error-red: #d03258;--tableBorder: var(--border);--grey-50: #a5b0bf;--grey-100: #333333;--grey-200: #222A3D;--capture-border: #9badca;--captcha-bg: #f3f3f3;--neutral-400: #81858a}html{font-size:12px}.row_div{min-height:calc(4.5rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.row_div .col_div{width:50%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.row_div .label{width:calc(16.6666666667rem / var(--scale));min-width:calc(16.6666666667rem / var(--scale));padding:0 calc(2rem / var(--scale));color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:500;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.25rem / var(--scale))}.row_div .label sup{top:calc(-.1666666667rem / var(--scale))}.row_div .field{padding:calc(.6666666667rem / var(--scale)) calc(2rem / var(--scale));flex-grow:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;flex-wrap:nowrap;gap:\"\";color:var(--textPrimary);font-size:var(--fs-16);line-height:140%;font-weight:400}.row_div .field li{list-style:disc;line-height:calc(2.6666666667rem / var(--scale));margin-left:calc(1.5rem / var(--scale))}textarea,input,.ordered_textarea{color:var(--textPrimary)}.errorField{flex-direction:column;align-items:start}.errorField .error{max-width:calc(37.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:start;flex-wrap:nowrap;gap:0}.errorField .error i-feather[name=info]{padding-right:calc(.3333333333rem / var(--scale));display:flex;stroke:var(--error-red);width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.errorField textarea,.errorField input,.errorField .ordered_textarea{color:var(--textPrimary);border:calc(.0833333333rem / var(--scale)) solid var(--error-red)}.errorField .error{padding-top:calc(.6666666667rem / var(--scale));color:var(--error-red);font-size:var(--fs-12);line-height:140%;font-weight:400}sup{color:var(--error-red)}input::placeholder,textarea::placeholder{color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:400}textarea{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;min-height:calc(9rem / var(--scale));resize:none}input{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;height:calc(4.5rem / var(--scale))}input.disable{background-color:var(--blue-50);pointer-events:none}.ordered_textarea{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;list-style:disc;min-height:calc(9rem / var(--scale))}.ordered_textarea ul{padding-left:calc(2.6666666667rem / var(--scale));outline:none}.ordered_textarea ul.editable-div{min-height:calc(6rem / var(--scale));max-height:calc(9.3333333333rem / var(--scale));overflow:auto}.ordered_textarea ul li{margin-left:calc(1.75rem / var(--scale));list-style:disc;color:var(--textPrimary);font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400}.custom_radio{display:inline-flex;align-items:center;min-width:calc(18.5833333333rem / var(--scale))}.custom_radio .name{color:var(--neutral-600);font-size:var(--fs-16);line-height:140%;font-weight:400}.custom_radio.disabled .name{color:var(--textPrimary);font-size:var(--fs-16);line-height:140%;font-weight:400}.radio_mark{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));border:calc(.125rem / var(--scale)) solid var(--border);border-radius:50%;margin-right:calc(.6666666667rem / var(--scale));position:relative;background-color:var(--white)}.radio_mark:after{content:\"\";width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));background:var(--blue-700);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.dob_age_field{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));width:100%;height:calc(4.5rem / var(--scale));background-color:var(--blue-50);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.dob_age_field .dob,.dob_age_field .age{font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--textSecondary)}.dob_age_field .age{padding-left:calc(.8333333333rem / var(--scale))}.dob_age_field .dob{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:50%;height:100%;padding-right:calc(.8333333333rem / var(--scale));border-right:calc(.0833333333rem / var(--scale)) solid var(--border)}.dob_age_field .dob img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.date{position:relative;width:100%}.date img{position:absolute;right:calc(1.3333333333rem / var(--scale));top:calc(1.25rem / var(--scale))}input[type=checkbox]{margin-right:calc(.6666666667rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}ol li{list-style:auto!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Rethink}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.tableArea{width:100%;border-radius:calc(1.3333333333rem / var(--scale))}.none{display:none}.tableArea .table_wrapper table{border-collapse:collapse;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}thead .checkbox_section{min-width:calc(3.8333333333rem / var(--scale))!important;width:calc(3.8333333333rem / var(--scale))}tbody{background-color:var(--white)}tbody tr{overflow:visible}tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / var(--scale))}tbody td{overflow:visible;position:relative;font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--textPrimary);min-width:calc(11.6666666667rem / var(--scale));max-width:calc(29.1666666667rem / var(--scale));padding-block:calc(.5rem / var(--scale))}tbody td .tooltip_container{max-width:calc(100% - 2.5rem / var(--scale));height:auto;position:absolute;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);z-index:100;display:none;border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));white-space:normal;word-wrap:break-word;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}tbody td:hover .tooltip_container{display:block}tbody td:last-child ::ng-deep .see_more_data{right:0!important}.tableArea .table_wrapper table thead tr{height:calc(4.5rem / var(--scale));color:var(--textPrimary)}.tableArea .table_wrapper table thead tr img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table thead tr .theading{height:calc(2.25rem / var(--scale))}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0}.tableArea .table_wrapper table thead tr .three_dot{flex-grow:1;margin:0 calc(.3333333333rem / var(--scale)) 0 0;display:flex;flex-direction:row;justify-content:end;align-items:center;flex-wrap:nowrap;gap:0}.tableArea .table_wrapper table thead tr .three_dot img{cursor:pointer}.tableArea .table_wrapper table thead tr th{flex-shrink:0;background-color:var(--theadBg)}.tableArea .table_wrapper table thead tr th:hover .none{display:block}.tableArea .table_wrapper table thead tr th:hover .up,.tableArea .table_wrapper table thead tr th:hover .down{display:none}.tableArea .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:400;border-top:calc(.0833333333rem / var(--scale)) solid var(--tableBorder);transition:all .3s ease-in-out}.tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover{background-color:var(--pink-10)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td.action:hover{border-left:calc(.0833333333rem / var(--scale)) solid var(--blue-700);border-right:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td .ellipsis{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(25rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr.td_80{height:calc(6.6666666667rem / var(--scale))}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{text-align:left;padding-left:calc(1.1666666667rem / var(--scale));line-height:1}.thead-img{position:relative}.swap-img{position:absolute;left:calc(.6666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.header-content{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0}.header-content .filtering_container{width:calc(20rem / var(--scale));max-height:calc(23.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);position:absolute;z-index:2;right:0;top:calc(2.3333333333rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:nowrap;gap:\"\"}.header-content .filtering_container .filter{height:calc(3.3333333333rem / var(--scale));color:var(--neutral-900);padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));border:none;width:100%;background-color:var(--white);display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.header-content .filtering_container .filter.top_border{border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-100)}.tableArea .table_wrapper .headerName ul,.tableArea .table_wrapper .headerName-icon ul{display:flex}.tableArea .table_wrapper table ul{list-style-type:none;padding:0;margin-bottom:0}.tableArea .table_wrapper table ul li{height:calc(.3333333333rem / var(--scale));font-size:var(--fs-14);list-style-type:none}.tableArea .table_wrapper table .sorting_up,.tableArea .table_wrapper table .sorting_down{width:calc(.5833333333rem / var(--scale));height:calc(.3333333333rem / var(--scale))}.tableArea .table_wrapper .headerName,.tableArea .table_wrapper .headerName-icon{margin-left:calc(.5rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--textPrimary70);height:-webkit-fill-available}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(5.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale))}.pagination_main .pagination_form i-feather{font-weight:600;color:var(--neutral-600)}.pagination_main span{color:var(--textSecondary);font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.pagination_main i-feather{display:flex;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));color:var(--neutral-600)}.pagination_main .input_style{width:calc(4rem / var(--scale));height:calc(1.6666666667rem / var(--scale));font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));color:var(--neutral-600);text-align:center;margin:0 calc(.5rem / var(--scale));outline:none}.pagination_main .input_style option{font-size:1rem}.pagination_main .input_style.right{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;margin:0;color:var(--textPrimary);padding:0}.pagination_main .input_style.left{background-color:var(--pagination-bg);color:var(--blue-700);border:none}.pagination_main .outlined_btn{background:transparent;border:solid calc(.0833333333rem / var(--scale)) var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);color:var(--btn-outline)}.pagination_main .prev_btn,.pagination_main .next_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(1.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .disable_btn{background-color:var(--blue-200);pointer-events:none;color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--blue-200)}.pagination_main .disable_btn i-feather{color:var(--white)}.table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border-top-left-radius:calc(1.3333333333rem / var(--scale));border-top-right-radius:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--tableBorder)}.data-table-td .td_wrapper{height:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale))}.pagination_main .input_style.left{appearance:none;padding-right:calc(1rem / var(--scale));background-position:80% 50%;width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;border-radius:calc(.6666666667rem / var(--scale))}.data-table-td{background-color:var(--blue-50);font-size:var(--fs-16)}.data-table-td i-feather{background-color:var(--white);border-radius:calc(.25rem / var(--scale));box-shadow:0 calc(.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) 0 #00000014;color:var(--neutral-500)}.data-table-td span{vertical-align:middle}.setting-options{position:absolute;right:0;background:var(--white);z-index:2;box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);max-height:calc(37.3333333333rem / var(--scale));width:calc(20.8333333333rem / var(--scale));overflow:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.column-item,.column-header{margin-bottom:calc(1.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.column-item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.column-item input[type=checkbox]{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));margin:0;border-radius:var(--fs-6)}.column-item:last-child{margin-bottom:0}.disabled_col{pointer-events:none;background-color:var(--neutral-50)}.entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .table_wrapper table th:not(:last-child) .right .line{display:block;border-left:calc(.1666666667rem / var(--scale)) solid var(--grey-50);height:calc(2rem / var(--scale))}.sticky-top{top:calc(-.0833333333rem / var(--scale))}.thead-img .theading .left{gap:calc(.6666666667rem / var(--scale))}.ms-1.headerName-icon{min-width:calc(1.5rem / var(--scale))}.custom_radio{display:inline-flex;align-items:center;min-width:calc(1.6666666667rem / var(--scale))!important}.custom_radio .name{color:var(--neutral-600);font-size:var(--fs-20);line-height:calc(2rem / var(--scale));font-weight:400}.custom_radio.disabled{pointer-events:none}.custom_radio.disabled .radio_mark{background-color:var(--neutral-100);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.custom_radio.disabled .name{color:var(--neutral-300)}.custom_radio .name{padding-right:calc(1.9166666667rem / var(--scale))}.custom_radio input[type=radio]{display:none}.radio_mark{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));border:calc(.125rem / var(--scale)) solid var(--blue-700);border-radius:50%;margin-right:calc(.6666666667rem / var(--scale));position:relative;background-color:var(--white)}.custom_radio input[type=radio]:checked+.radio_mark{background-color:var(--white)}.radio_mark:after{content:\"\";width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));background:var(--blue-700);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.custom_radio input[type=radio]:checked+.radio_mark:after{opacity:1}.pagination_form{gap:calc(1.3333333333rem / var(--scale))}.pagination_select{position:relative}.select_dropdown{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--blue-50);border-radius:calc(.6666666667rem / var(--scale));margin:0 calc(.5rem / var(--scale))}.select_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--blue-700)}.select_option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--white);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--dropdown-shadow);border-radius:calc(.6666666667rem / var(--scale));left:calc(.5rem / var(--scale));z-index:10;padding:calc(.1666666667rem / var(--scale)) 0;margin:calc(.3333333333rem / var(--scale)) 0}.select_option span{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary);padding-left:calc(1rem / var(--scale))}.chevron_img{color:var(--neutral-600);width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.chevron_img img{width:calc(.8333333333rem / var(--scale))}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--white);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.openClose_dropdown{background-color:var(--neutral-50);width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));display:flex}.openClose_dropdown i-feather{transform-origin:center;transition:.3s;display:flex;stroke:var(--neutral-600)}.openClose_dropdown i-feather.rotate{transform:rotate(90deg)}.cell-value{line-height:140%}.ellipsis.more_data_wrapper{position:relative;cursor:default}.ellipsis.more_data_wrapper:hover+.see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;width:calc(19.0833333333rem / var(--scale));height:\"\";background-color:var(--blue-50);border-radius:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--dropdown-shadow);padding:calc(.6666666667rem / var(--scale)) 0;display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:10;top:calc(3.3333333333rem / var(--scale))}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--grey-100);font-size:var(--fs-16);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-all}.cell-value.ellipsis:hover .see_more_data{display:flex}.flex-center{display:flex;align-items:center}.cursor-pointer{cursor:pointer}.d-none{display:none}.sort_icons{display:flex;flex-direction:column;gap:calc(.4166666667rem / var(--scale))}.filters{position:relative;display:inline-block;margin-left:6px;cursor:pointer}.filter-icon{width:14px;opacity:.6}.filter-icon-active{background-color:#0ff}.filter-icon:hover{opacity:1}.filter-popup{position:absolute;top:20px;left:0;width:160px;background:#fff;border:1px solid #ddd;padding:8px;box-shadow:0 3px 8px #00000026;border-radius:4px;z-index:99}.filter-popup select,.filter-popup input{width:100%;margin-bottom:8px;padding:4px;font-size:13px}.reset-btn{width:100%;padding:4px;font-size:12px}.set-options{max-height:180px;overflow-y:auto;padding:6px 8px;border:1px solid #ddd;border-radius:6px;background:#fff;font-size:13px}.set-options label{display:flex;align-items:center;gap:6px;padding:6px 4px;cursor:pointer;border-radius:4px}.set-options label:hover{background:#f3f3f3}.set-options input[type=checkbox]{width:14px;height:14px;cursor:pointer}.set-options label:first-child{font-weight:600;border-bottom:1px solid #e5e5e5;margin-bottom:6px;padding-bottom:8px}.th_wraper{display:flex;justify-content:space-between;height:32px;align-items:center;padding:0 12px}.three-dots{cursor:pointer;padding:2px 4px;font-size:13px;-webkit-user-select:none;user-select:none}.three-dots:hover{background:#eee;border-radius:4px}.column-menu{position:absolute;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:9999;padding:6px 0;min-width:160px}.column-menu ul{margin:0;padding:0;list-style:none}.column-menu li{display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;font-size:14px}.column-menu li:hover{background:#f3f3f3}.column-menu hr{border:none;border-top:1px solid #eee;margin:4px 0}.filter_three_dot_wrapper{display:flex;justify-content:space-between;align-items:center}.logic-row{display:flex;align-items:center;gap:16px;margin:8px 0 6px 4px}.logic-item{display:flex;align-items:center;gap:6px;font-size:13px;color:#444}.logic-item input[type=radio]{width:14px;height:14px;accent-color:#2b7cff;cursor:pointer}.logic-item span{cursor:pointer;font-weight:500}\n"] }]
+                        CommonInputComponent,
+                    ], template: "<div class=\"tableArea\">\r\n  @if(groupByRequired){\r\n  <!-- Group Panel -->\r\n  <div\r\n    class=\"group_panel\"\r\n    (dragover)=\"onGroupDragOver($event)\"\r\n    (drop)=\"onGroupDrop($event)\"\r\n  >\r\n    <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\r\n    @for(g of activeGroups; track $index){\r\n    <div\r\n      class=\"group_tag\"\r\n      draggable=\"true\"\r\n      (dragstart)=\"onGroupDragStart($event, $index)\"\r\n      (dragover)=\"onActiveDragOver($event, $index)\"\r\n      (drop)=\"onActiveGroupDrop($event, $index)\"\r\n    >\r\n      <img src=\"images/t-gripper.svg\" alt=\"\" />\r\n      <span>{{ g.headerName }}</span>\r\n      <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\r\n        <img src=\"images/t-x.svg\" alt=\"\" />\r\n      </button>\r\n    </div>\r\n    <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\r\n    } @if(activeGroups.length === 0){\r\n    <div class=\"group_placeholder\">Drag here to set row groups</div>\r\n    }\r\n  </div>\r\n  }\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"container_scroll\"\r\n    #parent\r\n    (scroll)=\"infinityScroll($event)\"\r\n    [ngStyle]=\"{ height: height + 'px' }\"\r\n  >\r\n    <table cellspacing=\"0\" cellpadding=\"0\">\r\n      <thead class=\"sticky-top\">\r\n        <tr>\r\n          @if (checkBoxSelection && checkboxSelectionType == 'multiple') {\r\n          <th style=\"width: 50px\">\r\n            <span class=\"checkbox_container\"\r\n              ><input\r\n                class=\"pointer\"\r\n                type=\"checkbox\"\r\n                name=\"\"\r\n                id=\"\"\r\n                [checked]=\"checkAllSelected()\"\r\n                [indeterminate]=\"checkInterminate()\"\r\n                (change)=\"onHeaderCheckboxChange($event)\"\r\n            /></span>\r\n          </th>\r\n\r\n          } @else{\r\n          <th></th>\r\n          } @if(activeGroups.length > 0){\r\n          <th class=\"active_group\">\r\n            <div class=\"th_wraper\">\r\n              <div class=\"text_wrapper\">\r\n                <span class=\"ellipsis headerName\">Group</span>\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <div class=\"three-dots\">\r\n                  <img src=\"images/t-more-vertical.svg\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </th>\r\n          } @for (col of colDefs; track col.colId) {\r\n          <th\r\n            [ngStyle]=\"getStyle(col, 'action')\"\r\n            [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n            (dragover)=\"onDragOver($event, $index)\"\r\n            (drop)=\"onDrop($event, $index)\"\r\n            (mouseenter)=\"onMouseEnterHeader($index)\"\r\n            (mouseleave)=\"onMouseLeaveHeader($index)\"\r\n          >\r\n            <div class=\"th_wraper\">\r\n              <div\r\n                class=\"text_wrapper\"\r\n                [ngStyle]=\"getStyle(col, 'action')\"\r\n                (click)=\"onSortingRowData($index, col)\"\r\n              >\r\n                @if(showMoveIcon[$index] && !col.isAction){\r\n                <img\r\n                  src=\"images/t-move.svg\"\r\n                  class=\"move-icon\"\r\n                  [draggable]=\"!isResizing || columnDraggable[$index]\"\r\n                  (dragstart)=\"onDragStart($event, $index)\"\r\n                  (dragend)=\"onDragEnd()\"\r\n                  (mouseenter)=\"enableColumnDrag($event, $index)\"\r\n                  (mouseleave)=\"disableColumnDrag($event, $index)\"\r\n                />\r\n\r\n                }\r\n                <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n                @if (sortingRequired && sortingColumnIndex == $index &&\r\n                col?.sortable && !col.isAction) {\r\n                <span class=\"sorting_icon\">\r\n                  @if(sortingType[$index]=== 'asc'){\r\n                  <img\r\n                    src=\"images/t-arrow-up.svg\"\r\n                    class=\"sorting_up\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  } @if(sortingType[$index]=== 'dsc'){\r\n                  <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n                  <img\r\n                    src=\"images/t-arrow-down.svg\"\r\n                    class=\"sorting_down\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  }\r\n                </span>\r\n\r\n                }\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <!-- Column Filters Logic-->\r\n                @if(filterRequired && col.filterable){\r\n                <div\r\n                  #trigger\r\n                  class=\"filters\"\r\n                  (click)=\"toggleFilter(col, $index, $event)\"\r\n                >\r\n                  @if(activeFilters.has(col.fieldName)){\r\n                  <img\r\n                    src=\"images/t-filter-applied.svg\"\r\n                    class=\"filter-icon\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  }@else {\r\n                  <img\r\n                    src=\"images/t-filter.svg\"\r\n                    class=\"filter-icon\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  } @if (activeFilterIndex === $index) {\r\n                  <div\r\n                    adaptivePosition\r\n                    [trigger]=\"trigger\"\r\n                    [parentContainer]=\"parent\"\r\n                    [matchWidth]=\"false\"\r\n                    class=\"filter_wrapper\"\r\n                    id=\"filter_wrapper-{{ $index }}\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    appOutsideClick\r\n                    (clickOutside)=\"onClickOutside()\"\r\n                  >\r\n                    <!-- Text Filter -->\r\n                    @if(col.filterType === 'text'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"filterOptions\"\r\n                      [selectedValue]=\"col.textFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.textFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    @if(col.textFilters[0].filterValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"filterOptions\"\r\n                      [selectedValue]=\"col.textFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.textFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n                    } }\r\n\r\n                    <!-- Number Filter -->\r\n                    @if(col.filterType === 'number'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.numberFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.numberFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <!-- <input\r\n                      type=\"number\"\r\n                      [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                      (input)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"number\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                        (input)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n\r\n                    @if(col.numberFilters[0].numberValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.numberFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.numberFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n                    } }\r\n\r\n                    <!-- DATE FILTER -->\r\n                    @if(col.filterType === 'date'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.dateFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.dateFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <!-- <input\r\n                      type=\"date\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (change)=\"applyAllFilters()\"\r\n                    /> -->\r\n                    <lib-common-calendar\r\n                      [dateConfig]=\"dateConfig\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                    ></lib-common-calendar>\r\n\r\n                    @if(col.dateFilters[0].dateValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.dateFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.dateFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <lib-common-calendar\r\n                      [dateConfig]=\"dateConfig\"\r\n                      [(ngModel)]=\"col.dateFilters[1].dateValue\"\r\n                      (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                    ></lib-common-calendar>\r\n                    } }\r\n\r\n                    <!-- SET FILTER (CHECKBOX LIST) -->\r\n                    @if(col.filterType === 'set'){\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      placeholder=\"Search...\"\r\n                      (input)=\"filterSetOptions(col, $event)\"\r\n                    /> -->\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Search...\"\r\n                        (input)=\"filterSetOptions(col, $event)\"\r\n                      />\r\n                    </div>\r\n\r\n                    <div class=\"set_option_details\">\r\n                      <label class=\"checkbox_container\">\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          [checked]=\"isAllSelected(col)\"\r\n                          (change)=\"toggleSelectAll(col, $event)\"\r\n                        />\r\n                        (Select All)\r\n                      </label>\r\n                      <div class=\"set_options\" id=\"container_scroll\">\r\n                        @for(opt of col.filteredOptions; track $index){\r\n                        <label class=\"checkbox_container\">\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            [checked]=\"col.selectedValues.has(opt)\"\r\n                            (change)=\"toggleSetOption(col, opt, $event)\"\r\n                          />\r\n                          {{ opt }}\r\n                        </label>\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                    }\r\n                    <div class=\"filter_btn\">\r\n                      <button\r\n                        class=\"reset_btn\"\r\n                        type=\"button\"\r\n                        (click)=\"resetFilter(col)\"\r\n                      >\r\n                        Reset\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                }\r\n\r\n                <!-- Three dots menu-->\r\n                <div #triggerColMenu>\r\n                  @if(threeDotsMenuRequired && col.columnAction){\r\n\r\n                  <div\r\n                    class=\"three-dots\"\r\n                    (click)=\"openMenu($event, col, $index)\"\r\n                  >\r\n                    <img\r\n                      src=\"images/t-more-vertical.svg\"\r\n                      [draggable]=\"false\"\r\n                      (dragstart)=\"\r\n                        $event.preventDefault(); $event.stopPropagation()\r\n                      \"\r\n                    />\r\n                  </div>\r\n                  }\r\n                </div>\r\n                @if(!col.isAction){\r\n                <span\r\n                  class=\"resize-handle\"\r\n                  (mousedown)=\"startResize($event, $index)\"\r\n                >\r\n                  |\r\n                </span>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <!-- popup open -->\r\n            @if(menuVisible[$index]){\r\n            <div\r\n              class=\"dropdown_wrapper\"\r\n              adaptivePosition\r\n              [trigger]=\"triggerColMenu\"\r\n              [parentContainer]=\"parent\"\r\n              [matchWidth]=\"false\"\r\n              [isColumnActionMenu]=\"true\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              appOutsideClick\r\n              (clickOutside)=\"onClickOutside()\"\r\n            >\r\n              <div class=\"right_click_dropdown\" id=\"container_scroll\">\r\n                @if(sortingType[$index] === 'dsc' || sortingType[$index] ===\r\n                ''){\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (click)=\"onSort(col, 'asc', $index)\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img\r\n                      src=\"images/arrow-up.svg\"\r\n                      class=\"sorting_up\"\r\n                      [ngClass]=\"{ disable: !col.sortable }\"\r\n                    />\r\n                    <span class=\"text\">Sort Ascending</span>\r\n                  </div>\r\n                </div>\r\n                } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n                ''){\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (click)=\"onSort(col, 'dsc', $index)\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/arrow-down.svg\" />\r\n                    <span class=\"text\">Sort Descending</span>\r\n                  </div>\r\n                </div>\r\n                } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n                'dsc'){\r\n                <div class=\"right_click_item\" (click)=\"onSort(col, '', $index)\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/trash-2.svg\" />\r\n                    <span class=\"text\">Clear Sort</span>\r\n                  </div>\r\n                </div>\r\n                }\r\n                <div class=\"divder\"></div>\r\n\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (mouseenter)=\"showPinActions()\"\r\n                  (mouseleave)=\"hidePinActions()\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/pin.svg\" />\r\n                    <span class=\"text\">Pin Column</span>\r\n                  </div>\r\n                  <div class=\"right_item\">\r\n                    <img src=\"images/chevron-right.svg\" />\r\n                    @if(showPin){\r\n                    <div class=\"second_dropdown\">\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'none')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if((pinActionClicked[col.colId]?? 'none') ===\r\n                          'none'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">No Pin</span>\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'left')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if(pinActionClicked[col.colId] === 'left'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">Pin Left</span>\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'right')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if(pinActionClicked[col.colId] === 'right'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">Pin Right</span>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- <div\r\n                    class=\"right_click_item\"\r\n                    (click)=\"pinColumn(col, $index, 'left')\"\r\n                  >\r\n                    <div class=\"left_item\">\r\n                      <img src=\"images/pin.svg\" />\r\n                      <span class=\"text\">{{\r\n                        col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\r\n                      }}</span>\r\n                    </div>\r\n                  </div>\r\n                  <div\r\n                    class=\"right_click_item\"\r\n                    (click)=\"pinColumn(col, $index, 'right')\"\r\n                  >\r\n                    <div class=\"left_item\">\r\n                      <img src=\"images/pin.svg\" />\r\n                      <span class=\"text\">\r\n                        {{\r\n                          col.rightPinned\r\n                            ? \"Unpin Right Column\"\r\n                            : \"Pin Column Right\"\r\n                        }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"right_item\">\r\n                      <img src=\"images/arrow-right.svg\" alt=\"\" />\r\n                    </div>\r\n                  </div> -->\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Autosize This Column</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Autosize All Columns</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div\r\n                    class=\"left_item\"\r\n                    (click)=\"groupByColumnAction(col, $index)\"\r\n                  >\r\n                    <img src=\"images/t-group-by-name.svg\" alt=\"\" />\r\n                    <span class=\"text\">Group by {{ col.headerName }}</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/t-choose-column.svg\" alt=\"\" />\r\n                    <span class=\"text\">Choose Columns</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Reset Columns</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n          </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if(groupedResult && groupedResult.length > 0){ @for(group of\r\n        groupedResult; track group.key){\r\n        <tr (click)=\"toggleGroup(group)\">\r\n          <td\r\n            class=\"group-cell\"\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n          >\r\n            <span class=\"group-toggle\">\r\n              <img\r\n                src=\"images/{{\r\n                  group.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n                }}\"\r\n              />\r\n              {{ group.key }} ({{ group.children.length }})\r\n            </span>\r\n          </td>\r\n        </tr>\r\n\r\n        @if(group.expanded){\r\n        <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\r\n        @if (group.children[0]?.children) { @for (child of group.children; track\r\n        child.key) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"groupTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: child,\r\n            colDefs: colDefs,\r\n            checkBoxSelection: checkBoxSelection,\r\n            activeGroups: activeGroups,\r\n            level: 1\r\n          }\"\r\n        ></ng-container>\r\n        } }\r\n\r\n        <!-- CASE 2: CHILDREN ARE RAW ROWS -->\r\n        @if (!group.children[0]?.children) { @for (row of group.children; track\r\n        row.rowId) {\r\n        <tr [ngClass]=\"row | addClass : tableOptions\">\r\n          <!-- Checkbox column if any -->\r\n          @if (checkBoxSelection) {\r\n          <td>\r\n            <span class=\"checkbox_container\">\r\n              <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n            /></span>\r\n          </td>\r\n          } @if (activeGroups.length > 0) {\r\n          <td class=\"group-placeholder\"></td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track col.colId) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            <!-- {{ row[col.fieldName] }} -->\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(row, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"row\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"row[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n          </td>\r\n          }\r\n        </tr>\r\n        } } } } } @else{ @for (data of rowData; track data.rowId) {\r\n        <tr [ngClass]=\"data | addClass : tableOptions\">\r\n          @if (checkBoxSelection) {\r\n          <td style=\"min-width: 50px\">\r\n            @if (checkboxSelectionType=='multiple') {\r\n            <span class=\"checkbox_container\"\r\n              ><input\r\n                type=\"checkbox\"\r\n                class=\"pointer\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n            /></span>\r\n\r\n            }@else{\r\n            <span class=\"radio_option\">\r\n              <input\r\n                type=\"radio\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n              />\r\n              <label [for]=\"data.rowId\"></label>\r\n            </span>\r\n\r\n            }\r\n          </td>\r\n          } @for (col of colDefs; track col.colId) {\r\n          <td\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"[col?.addClass ? col.addClass(data) : '']\"\r\n          >\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(data, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(data, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"data\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"data[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n            <!-- Commented for later use -->\r\n            <!-- <div class=\"tool_tip\">\r\n              <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\r\n            </div> -->\r\n          </td>\r\n          }\r\n        </tr>\r\n        } @empty {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n          >\r\n            <div class=\"small_data\">\r\n              @if (tableOptions?.noDataTemplate) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tableOptions?.noDataTemplate\"\r\n              ></ng-container>\r\n\r\n              }@else{\r\n              <!-- need to style it properly then we will add it -->\r\n              <span>No Data To Show</span>\r\n\r\n              }\r\n            </div>\r\n          </td>\r\n        </tr>\r\n\r\n        } }\r\n      </tbody>\r\n\r\n      <ng-template\r\n        #groupTemplate\r\n        let-node\r\n        let-colDefs=\"colDefs\"\r\n        let-checkBoxSelection=\"checkBoxSelection\"\r\n        let-activeGroups=\"activeGroups\"\r\n        let-level=\"level\"\r\n      >\r\n        <!-- GROUP HEADER -->\r\n        <tr (click)=\"toggleGroup(node)\">\r\n          <td\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n            [style.paddingLeft.px]=\"level * 20\"\r\n            class=\"group-cell\"\r\n          >\r\n            <span class=\"group-toggle\">\r\n              <img\r\n                src=\"images/{{\r\n                  node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n                }}\"\r\n              />\r\n              {{ node.key }} ({{ node.children.length }})\r\n            </span>\r\n          </td>\r\n        </tr>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (node.expanded) {\r\n\r\n        <!-- CASE: more groups -->\r\n        @if (node.children[0]?.children) { @for (child of node.children; track\r\n        child.key) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"groupTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: child,\r\n            colDefs: colDefs,\r\n            checkBoxSelection: checkBoxSelection,\r\n            activeGroups: activeGroups,\r\n            level: level + 1\r\n          }\"\r\n        >\r\n        </ng-container>\r\n        } }\r\n\r\n        <!-- CASE: final rows -->\r\n        @if (!node.children[0]?.children) { @for (row of node.children; track\r\n        row.rowId) {\r\n\r\n        <tr [ngClass]=\"row | addClass : tableOptions\">\r\n          <!-- Checkbox column if any -->\r\n          @if (checkBoxSelection) {\r\n          <td>\r\n            <span class=\"checkbox_container\">\r\n              <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n            /></span>\r\n          </td>\r\n          } @if (activeGroups.length > 0) {\r\n          <td class=\"group-placeholder\"></td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track col.colId) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            <!-- {{ row[col.fieldName] }} -->\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(row, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"row\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"row[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n          </td>\r\n          }\r\n        </tr>\r\n        } } }\r\n      </ng-template>\r\n    </table>\r\n  </div>\r\n  <!--  Table Wrapper Ends-->\r\n  @if(paginationRequired){\r\n  <div class=\"pagination_main\">\r\n    <div class=\"entries_details\">\r\n      <span>Showing</span>\r\n      <div class=\"pagination_select\">\r\n        <div\r\n          class=\"select_dropdown pointer\"\r\n          (click)=\"showPageSizeList = !showPageSizeList\"\r\n        >\r\n          <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\r\n          <span class=\"chevron_img\">\r\n            <img src=\"images/chevron-down.svg\" class=\"pointer\" />\r\n          </span>\r\n        </div>\r\n        @if(showPageSizeList){\r\n        <div class=\"select_option\">\r\n          @for(option of pageSizeList;track $index){\r\n          <span\r\n            class=\"pointer\"\r\n            (click)=\"onPageSizeChanged(option); onClickOutside()\"\r\n            >{{ option }}</span\r\n          >\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      <span\r\n        >Rows | {{ totalRecords > 0 ? recordsToShow.min + 1 : 0 }} -\r\n        {{\r\n          recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\r\n        }}\r\n        of\r\n        {{ totalRecords }} Entries</span\r\n      >\r\n    </div>\r\n    <div class=\"pagination_form\">\r\n      <!-- <span>Page</span> -->\r\n\r\n      <button class=\"outlined_btn first_btn\" type=\"button\">\r\n        <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <button\r\n        class=\"outlined_btn prev_btn\"\r\n        [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\r\n        type=\"button\"\r\n        (click)=\"onBtPrevClick()\"\r\n      >\r\n        <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <div>\r\n        <input\r\n          class=\"input_style\"\r\n          type=\"number\"\r\n          [(ngModel)]=\"pageDetails.currentPage\"\r\n          (change)=\"goToSelectedPage($event)\"\r\n          name=\"\"\r\n          id=\"\"\r\n        />\r\n      </div>\r\n      <button\r\n        class=\"outlined_btn next_btn\"\r\n        type=\"button\"\r\n        [ngClass]=\"\r\n          pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\r\n        \"\r\n        (click)=\"onBtNextClick()\"\r\n      >\r\n        <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <!-- <span>of {{ pageDetails.totalPages }}</span> -->\r\n\r\n      <button class=\"outlined_btn last_btn\" type=\"button\">\r\n        <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n  <!-- Pagination Ends -->\r\n</div>\r\n\r\n<!-- cell right click code start here -->\r\n<div class=\"dropdown_wrapper d-none\">\r\n  <div class=\"right_click_dropdown\">\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/scissors.svg\" />\r\n        <span class=\"text\">Cut</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+X</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+C</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy with Headers</span>\r\n      </div>\r\n      <span class=\"right_item\"></span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy with Group Headers</span>\r\n      </div>\r\n      <span class=\"right_item\"></span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/clipboard.svg\" alt=\"\" />\r\n        <span class=\"text\">Paste</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+V</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/bar-chart.svg\" alt=\"\" />\r\n        <span class=\"text\">Chart</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/download.svg\" alt=\"\" />\r\n        <span class=\"text\">Export</span>\r\n      </div>\r\n\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Chart section Start Here -->\r\n  <div class=\"second_dropdown\">\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Column</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Bar</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Pie</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Line</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Area</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">XY(Scatter)</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Polar</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Stastical</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Hierarchical</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Specialized</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Funnel</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Combination</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Export Section start Here -->\r\n  <div class=\"export_section d-none\">\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/file.svg\" alt=\"\" />\r\n        <span class=\"text\">CSV Report</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/file.svg\" alt=\"\" />\r\n        <span class=\"text\">Excel Report</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Column Group Section Start Here -->\r\n  <div class=\"third_dropdown\">\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Grouped</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Stacked</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">100% Stacked</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--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;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--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;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-100);border-color:var(--neutral-100)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.switch_wrapper{display:flex}.switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.switch_wrapper .switch input{display:none}.switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ellipsis.more_data_wrapper{position:relative;cursor:default}.ellipsis.more_data_wrapper:hover+.see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;width:calc(26.4166666667rem / var(--scale));height:\"\";background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:14;padding:calc(.5rem / var(--scale)) 0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-all}.tableArea{width:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table{border-collapse:collapse;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}.tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:13}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:140%;font-weight:400;color:var(--neutral-500);min-width:calc(11.6666666667rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;line-height:1}.tableArea .table_wrapper table td .ellipsis,.tableArea .table_wrapper table th .ellipsis{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(25rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale))}.tableArea .table_wrapper table thead .checkbox_section{min-width:calc(3.8333333333rem / var(--scale))!important;width:calc(3.8333333333rem / var(--scale))}.tableArea .table_wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));color:var(--neutral-500)}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer}.tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--neutral-50)}.tableArea .table_wrapper table thead th:last-child .th_wraper{border:0}.tableArea .table_wrapper table thead th:hover .none{display:block}.tableArea .table_wrapper table thead th:hover .up,.tableArea .table_wrapper table thead th:hover .down{display:none}.tableArea .table_wrapper table tbody{background-color:var(--white)}.tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);transition:all .3s ease-in-out}.tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover{background-color:var(--blue-50)}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / var(--scale))}.tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td.action:hover{border-left:calc(.0833333333rem / var(--scale)) solid var(--blue-700);border-right:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.th_wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-right:calc(.1666666667rem / var(--scale)) solid var(--neutral-200)}.th_wraper .text_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th_wraper .text_wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th_wraper .filter_three_dot_wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters:hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:20px;left:0;width:calc(18.8333333333rem / var(--scale));background:var(--neutral-50);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper lib-common-input{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details .set_options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(10.8333333333rem / var(--scale));overflow-y:auto}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--white);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--blue-600);border-color:var(--blue-600);color:var(--white)}.th_wraper .filter_three_dot_wrapper .three-dots{margin-right:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .three-dots :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .resize-handle{position:absolute;right:0;top:30%;height:50%;color:var(--neutral-200);font-size:calc(1.1666666667rem / var(--scale));margin-top:calc(-.1666666667rem / var(--scale));cursor:w-resize}.tableArea .table_wrapper .headerName{font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination_main .entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select{position:relative}.pagination_main .entries_details .pagination_select .select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img img{width:calc(1.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--white);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination_main .entries_details .pagination_select .select_option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option span:hover{background-color:var(--neutral-50)}.pagination_main .pagination_form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination_main .pagination_form .prev_btn,.pagination_main .pagination_form .next_btn,.pagination_main .pagination_form .first_btn,.pagination_main .pagination_form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .pagination_form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-500);cursor:pointer}.pagination_main .pagination_form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--neutral-200)}.pagination_main .pagination_form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination_main .input_style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-600);text-align:center;outline:none;padding:0}.tableArea .table_wrapper table th:not(:last-child) .right .line{display:block;border-left:calc(.1666666667rem / var(--scale)) solid var(--grey-50);height:calc(2rem / var(--scale))}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--white);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.cell-value{line-height:0}.cell-value.ellipsis:hover .see_more_data{display:flex}.d-none{display:none}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--neutral-50);border-radius:calc(.3333333333rem / var(--scale))}.group_panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--neutral-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(0rem / var(--scale));border-top:0;height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.group_panel img.divider:last-child{display:none}.group_panel .group_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;cursor:grab}.group_panel .group_tag .remove_tag{border:0;padding:0;cursor:pointer}.group_panel .group_placeholder{color:var(--neutral-500)}.group_panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);cursor:pointer}.active_group{width:100px}.dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale))}.dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.dropdown_wrapper .right_click_item:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-50)}.dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.dropdown_wrapper .right_click_item .right_chevron{stroke:var(--neutral-400)}.second_dropdown{position:absolute;right:calc(-20rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tableOptions: [{
                 type: Input
             }], totalRecords: [{
@@ -864,6 +2128,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }], height: [{
                 type: Input
+            }], groupByRequired: [{
+                type: Input
             }], onPaginationChange: [{
                 type: Output
             }], onCheckboxSelection: [{