cats-data-grid 2.0.4 → 2.0.6

package/fesm2022/cats-data-grid.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, EventEmitter, Output, Directive, Input, HostListener, Component, signal } from '@angular/core';
+import { Injectable, Pipe, EventEmitter, Output, Directive, Input, HostListener, Component, ViewChild, signal } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -7,10 +7,10 @@ import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 
 class CatsDataGridService {
     constructor() { }
-    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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CatsDataGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CatsDataGridService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsDataGridService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CatsDataGridService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -27,10 +27,10 @@ class AddClassPipe {
         }
         return '';
     }
-    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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AddClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AddClassPipe, isStandalone: true, name: "addClass" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AddClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'addClass'
@@ -55,10 +55,10 @@ class OutsideClickDirective {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OutsideClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: OutsideClickDirective, isStandalone: true, selector: "[appOutsideClick]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OutsideClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OutsideClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appOutsideClick]',
@@ -92,6 +92,7 @@ class RendererParserDirective {
             this.col.cellRenderer.prototype?.constructor == this.col.cellRenderer) {
             this.ref = this.el.createComponent(this.col?.cellRenderer);
             this.ref.instance?.cellInit(params, this.api);
+            this.ref.location.nativeElement.style.width = '100%';
         }
         else if (typeof this.col?.cellRenderer == 'function') {
             let newDiv = document.createElement('div');
@@ -110,10 +111,10 @@ class RendererParserDirective {
             this.er.nativeElement.appendChild(toltipDiv);
         }
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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.16", type: RendererParserDirective, isStandalone: true, selector: "[appRendererParser]", inputs: { rowParam: "rowParam", col: "col", api: "api", currentValue: "currentValue" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RendererParserDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RendererParserDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appRendererParser]',
@@ -154,12 +155,12 @@ class CommonInputComponent {
             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=\"table_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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 -->\n@if(elementType === 'dropdown'){\n<div class=\"text_filter_section\">\n  <div class=\"single_select_dropdown\" (click)=\"toggleDropdown()\">\n    <div class=\"left_details\">\n      <span class=\"placeholderColor textTruncate\">\n        {{ selectedLabel }}\n      </span>\n    </div>\n\n    <span class=\"arrow_icon\">\n      <img\n        src=\"images/chevron-up.svg\"\n        [ngClass]=\"{ 'd-none': !showDropdown }\"\n      />\n      <img\n        src=\"images/chevron-down.svg\"\n        [ngClass]=\"{ 'd-none': showDropdown }\"\n      />\n    </span>\n  </div>\n\n  @if (showDropdown) {\n  <div class=\"dropdown_list\" id=\"table_scroll\">\n    <ul>\n      @for (option of options; track option.value) {\n      <li (click)=\"selectOption(option)\">\n        <span class=\"textTruncate\">{{ option.label }}</span>\n      </li>\n      }\n    </ul>\n  </div>\n  }\n</div>\n\n}\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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=\"table_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"] }]
+            args: [{ selector: 'lib-common-input', imports: [CommonModule], template: "<!-- dropdown -->\n@if(elementType === 'dropdown'){\n<div class=\"text_filter_section\">\n  <div class=\"single_select_dropdown\" (click)=\"toggleDropdown()\">\n    <div class=\"left_details\">\n      <span class=\"placeholderColor textTruncate\">\n        {{ selectedLabel }}\n      </span>\n    </div>\n\n    <span class=\"arrow_icon\">\n      <img\n        src=\"images/chevron-up.svg\"\n        [ngClass]=\"{ 'd-none': !showDropdown }\"\n      />\n      <img\n        src=\"images/chevron-down.svg\"\n        [ngClass]=\"{ 'd-none': showDropdown }\"\n      />\n    </span>\n  </div>\n\n  @if (showDropdown) {\n  <div class=\"dropdown_list\" id=\"table_scroll\">\n    <ul>\n      @for (option of options; track option.value) {\n      <li (click)=\"selectOption(option)\">\n        <span class=\"textTruncate\">{{ option.label }}</span>\n      </li>\n      }\n    </ul>\n  </div>\n  }\n</div>\n\n}\n", styles: [".d-none{display:none}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], selectedValue: [{
@@ -334,10 +335,10 @@ class AdaptivePositionDirective {
         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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdaptivePositionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdaptivePositionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[adaptivePosition]',
@@ -366,11 +367,12 @@ class CommonCalendarComponent {
     cd;
     datePipe;
     dateTimeSelected = new EventEmitter();
+    clearDateEvent = new EventEmitter();
     dateConfig;
     minDate;
     maxDate;
     preSelectedValue;
-    selectedDateTime;
+    selectedDateTime = '';
     currentDate = new Date();
     currentMonth = this.currentDate.getMonth();
     currentYear = this.currentDate.getFullYear();
@@ -414,11 +416,8 @@ class CommonCalendarComponent {
         this.datePipe = datePipe;
     }
     ngOnChanges(_changes) {
-        if (!_changes['selectedDateTime']?.currentValue) {
-            this.selectedDateTime = [];
-        }
-        else {
-            this.writeValue(this.control?.value);
+        if (_changes['preSelectedValue']) {
+            this.selectedDateTime = _changes['preSelectedValue']?.currentValue;
         }
     }
     ngOnInit() {
@@ -472,24 +471,36 @@ class CommonCalendarComponent {
         }
         return null;
     }
+    selectCurrentMonthYear() {
+        this.currentDate = new Date();
+        this.currentMonth = this.currentDate.getMonth();
+        this.currentYear = this.currentDate.getFullYear();
+        this.selectedMonth = this.currentMonth;
+        this.selectedYear = this.currentYear;
+        this.selectedDate = 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();
+        if (!this.selectedDateTime) {
+            this.selectCurrentMonthYear();
         }
-        this.calendarView = 'defaultView';
-        this.generateCalendar();
+        this.isOpen = !this.isOpen;
         if (this.isOpen) {
-            let ele = document.getElementsByClassName('calendar-footer');
+            // If a date is already selected, open that month/year
+            if (this.selectedDate != null) {
+                this.currentDate = new Date(this.selectedYear, this.selectedMonth, this.selectedDate);
+            }
+            this.updateCurrentYearMonth();
+            this.generateCalendar();
             setTimeout(() => {
+                const ele = document.getElementsByClassName('calendar-footer');
                 ele[0]?.scrollIntoView();
             });
         }
+        this.calendarView = 'defaultView';
     }
     /**
      * @description Closes calendar
@@ -823,10 +834,9 @@ class CommonCalendarComponent {
         if (this.dateConfig.selectionMode === 'single') {
             if (!this.selectedDate)
                 return;
-            const fullDate = new Date(this.currentYear, this.currentMonth, this.selectedDate);
+            const fullDate = new Date(this.selectedYear, this.selectedMonth, 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;
@@ -844,17 +854,20 @@ class CommonCalendarComponent {
             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: [
+    hideCalender() {
+        this.closeCalendar();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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.16", type: CommonCalendarComponent, isStandalone: true, selector: "lib-common-calendar", inputs: { dateConfig: "dateConfig", minDate: "minDate", maxDate: "maxDate", preSelectedValue: "preSelectedValue" }, outputs: { dateTimeSelected: "dateTimeSelected", clearDateEvent: "clearDateEvent" }, 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()\" #trigger>\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\"   adaptivePosition  [trigger]=\"trigger\" [matchWidth]=\"false\">\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;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}.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-300);border-color:var(--neutral-300)}.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);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.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);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<!-- Calendar -->\n\n<div\n  class=\"calendar_wrapper\"\n  appOutsideClick\n  (clickOutSide)=\"closeCalendar()\"\n  [ngClass]=\"{ 'pe-none': disableControl }\"\n>\n  <div class=\"date_box\" (click)=\"toggleCalendar()\" #trigger>\n    @if (dateConfig.selectionMode == \"single\") {\n      <input\n        type=\"text\"\n        placeholder=\"Select Date\"\n        [value]=\"selectedDateTime\"\n        readonly\n        [disabled]=\"disableControl\"\n      />\n    } @else {\n      <input\n        type=\"text\"\n        placeholder=\"Select date Range\"\n        [value]=\"\n          selectedDateTime.start\n            | date\n              : 'MM/dd/yyyy' +\n                  ' - ' +\n                  (selectedDateTime.end | date: 'MM/dd/yyyy')\n        \"\n        readonly\n      />\n    }\n    <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\n    <img src=\"images/calendar.svg\" alt=\"\" />\n  </div>\n  @if (isOpen) {\n    <div\n      class=\"calendar-popup\"\n      adaptivePosition\n      [trigger]=\"trigger\"\n      [matchWidth]=\"false\"\n      appOutsideClick\n      (clickOutside)=\"hideCalender()\"\n    >\n      <div class=\"calendar_container\">\n        <!-- for the header -->\n        <div class=\"calendar-header\">\n          <div class=\"month-year\">\n            <span class=\"month\" (click)=\"calendarView = 'monthView'\">\n              {{ getMonthYear().month }},</span\n            >\n            <div class=\"year\" (click)=\"calendarView = 'yearView'\">\n              <span>\n                {{ getMonthYear().year }}\n              </span>\n              <img src=\"images/chevron-down.svg\" class=\"year_arrow\" alt=\"\" />\n            </div>\n          </div>\n\n          <div class=\"arrow_container\">\n            <span class=\"navigation-button\" (click)=\"previousMonth()\">\n              <img src=\"images/arrow-up.svg\" alt=\"\" />\n            </span>\n\n            <span class=\"navigation-button\" (click)=\"nextMonth()\">\n              <img src=\"images/arrow-down.svg\" alt=\"\" />\n            </span>\n          </div>\n        </div>\n        @if (calendarView === \"monthView\") {\n          <div class=\"month-grid\">\n            @for (month of monthRange | keyvalue; track $index) {\n              <span\n                class=\"month\"\n                (click)=\"selectMonth(month.key)\"\n                [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\n                >{{ month.value }}</span\n              >\n            }\n          </div>\n        } @else if (calendarView === \"yearView\") {\n          <div class=\"year-selector\">\n            <span\n              class=\"navigation-button pointer\"\n              (click)=\"previousYearRange()\"\n            >\n              <img src=\"images/chevron-left.svg\" alt=\"\" />\n            </span>\n            <div class=\"year-grid\">\n              @for (year of yearRange; track $index) {\n                <span\n                  class=\"year\"\n                  (click)=\"selectYear(year)\"\n                  [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\n                  >{{ year }}</span\n                >\n              }\n            </div>\n            <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\n              <img src=\"images/chevron-right.svg\" alt=\"\" />\n            </span>\n          </div>\n        } @else {\n          <div class=\"calendar_body\">\n            <div class=\"calendar-grid\">\n              <!-- Day names -->\n              @for (\n                day of [\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"];\n                track $index\n              ) {\n                <div class=\"days_name\">\n                  {{ day }}\n                </div>\n              }\n\n              <!-- Calendar dates -->\n              @for (dayObj of daysInMonth; track $index) {\n                <div\n                  class=\"calendar-day\"\n                  [ngClass]=\"{\n                    active:\n                      dayObj.isCurrentMonth &&\n                      dateConfig.selectionMode === 'single' &&\n                      isSelectedDate(\n                        dayObj.day,\n                        dayObj.date.getMonth(),\n                        dayObj.date.getFullYear()\n                      ),\n\n                    active_start:\n                      dayObj.isCurrentMonth &&\n                      dateConfig.selectionMode === 'range' &&\n                      isSelectedDate(\n                        dayObj.day,\n                        dayObj.date.getMonth(),\n                        dayObj.date.getFullYear()\n                      ) &&\n                      dayObj.day === rangeStart,\n\n                    active_end:\n                      dayObj.isCurrentMonth &&\n                      dateConfig.selectionMode === 'range' &&\n                      isSelectedDate(\n                        dayObj.day,\n                        dayObj.date.getMonth(),\n                        dayObj.date.getFullYear()\n                      ) &&\n                      dayObj.day === rangeEnd,\n\n                    range_between_active:\n                      dayObj.isCurrentMonth &&\n                      dateConfig.selectionMode === 'range' &&\n                      isSelectedDate(\n                        dayObj.day,\n                        dayObj.date.getMonth(),\n                        dayObj.date.getFullYear()\n                      ) &&\n                      rangeStart != null &&\n                      rangeEnd != null &&\n                      dayObj.day > rangeStart &&\n                      dayObj.day < rangeEnd,\n\n                    other_month: !dayObj.isCurrentMonth,\n                    disabled: isDayDisabled(dayObj.day),\n                    notInCurrentMonth: !dayObj.isCurrentMonth,\n                  }\"\n                  (click)=\"\n                    dayObj.isCurrentMonth &&\n                      !isDayDisabled(dayObj.day) &&\n                      selectDate(dayObj.day)\n                  \"\n                >\n                  {{ dayObj.day }}\n                </div>\n              }\n            </div>\n            <div class=\"bottom_btn\">\n              <div class=\"btn\">Clear</div>\n              <div class=\"btn\">Today</div>\n            </div>\n          </div>\n        }\n      </div>\n      <!-- TIME SLOTS (only if showTime = true) -->\n      @if (dateConfig.enableTime) {\n        <div class=\"times\">\n          <div class=\"time-picker\">\n            <div class=\"time-column\">\n              @for (timeSlot of timeSlots; track $index) {\n                <span\n                  class=\"span_time\"\n                  [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n                  (click)=\"selectTime(timeSlot.label)\"\n                >\n                  {{ timeSlot.label }}\n                </span>\n              }\n            </div>\n\n            <div class=\"time-column\">\n              @for (timeSlot of timeSlots; track $index) {\n                <span\n                  class=\"span_time\"\n                  [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n                >\n                  {{ timeSlot.label }}\n                </span>\n              }\n            </div>\n\n            <div class=\"time-column\">\n              @for (timeSlot of timeSlots; track $index) {\n                <span\n                  class=\"span_time\"\n                  [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n                >\n                  {{ timeSlot.label }}\n                </span>\n              }\n            </div>\n\n            <!-- center selection indicator -->\n            <div class=\"center-highlight\"></div>\n          </div>\n\n          <!-- @for (timeSlot of timeSlots; track $index) {\n      <span\n        class=\"span_time\"\n        [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n        (click)=\"selectTime(timeSlot.label)\"\n      >\n        {{ timeSlot.label }}\n      </span>\n      } -->\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.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].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{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].custom_check_box: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].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;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{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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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:\"\";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:0;left:100%;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: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-common-calendar', imports: [CommonModule, OutsideClickDirective, AdaptivePositionDirective], providers: [
                         {
@@ -863,9 +876,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             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()\" #trigger>\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\"   adaptivePosition  [trigger]=\"trigger\" [matchWidth]=\"false\">\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;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}.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-300);border-color:var(--neutral-300)}.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);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.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);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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"] }]
+                    ], template: "<!-- Calendar -->\n\n<div\n  class=\"calendar_wrapper\"\n  appOutsideClick\n  (clickOutSide)=\"closeCalendar()\"\n  [ngClass]=\"{ 'pe-none': disableControl }\"\n>\n  <div class=\"date_box\" (click)=\"toggleCalendar()\" #trigger>\n    @if (dateConfig.selectionMode == \"single\") {\n      <input\n        type=\"text\"\n        placeholder=\"Select Date\"\n        [value]=\"selectedDateTime\"\n        readonly\n        [disabled]=\"disableControl\"\n      />\n    } @else {\n      <input\n        type=\"text\"\n        placeholder=\"Select date Range\"\n        [value]=\"\n          selectedDateTime.start\n            | date\n              : 'MM/dd/yyyy' +\n                  ' - ' +\n                  (selectedDateTime.end | date: 'MM/dd/yyyy')\n        \"\n        readonly\n      />\n    }\n    <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\n    <img src=\"images/calendar.svg\" alt=\"\" />\n  </div>\n  @if (isOpen) {\n    <div\n      class=\"calendar-popup\"\n      adaptivePosition\n      [trigger]=\"trigger\"\n      [matchWidth]=\"false\"\n      appOutsideClick\n      (clickOutside)=\"hideCalender()\"\n    >\n      <div class=\"calendar_container\">\n        <!-- for the header -->\n        <div class=\"calendar-header\">\n          <div class=\"month-year\">\n            <span class=\"month\" (click)=\"calendarView = 'monthView'\">\n              {{ getMonthYear().month }},</span\n            >\n            <div class=\"year\" (click)=\"calendarView = 'yearView'\">\n              <span>\n                {{ getMonthYear().year }}\n              </span>\n              <img src=\"images/chevron-down.svg\" class=\"year_arrow\" alt=\"\" />\n            </div>\n          </div>\n\n          <div class=\"arrow_container\">\n            <span class=\"navigation-button\" (click)=\"previousMonth()\">\n              <img src=\"images/arrow-up.svg\" alt=\"\" />\n            </span>\n\n            <span class=\"navigation-button\" (click)=\"nextMonth()\">\n              <img src=\"images/arrow-down.svg\" alt=\"\" />\n            </span>\n          </div>\n        </div>\n        @if (calendarView === \"monthView\") {\n          <div class=\"month-grid\">\n            @for (month of monthRange | keyvalue; track $index) {\n              <span\n                class=\"month\"\n                (click)=\"selectMonth(month.key)\"\n                [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\n                >{{ month.value }}</span\n              >\n            }\n          </div>\n        } @else if (calendarView === \"yearView\") {\n          <div class=\"year-selector\">\n            <span\n              class=\"navigation-button pointer\"\n              (click)=\"previousYearRange()\"\n            >\n              <img src=\"images/chevron-left.svg\" alt=\"\" />\n            </span>\n            <div class=\"year-grid\">\n              @for (year of yearRange; track $index) {\n                <span\n                  class=\"year\"\n                  (click)=\"selectYear(year)\"\n                  [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\n                  >{{ year }}</span\n                >\n              }\n            </div>\n            <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\n              <img src=\"images/chevron-right.svg\" alt=\"\" />\n            </span>\n          </div>\n        } @else {\n          <div class=\"calendar_body\">\n            <div class=\"calendar-grid\">\n              <!-- Day names -->\n              @for (\n                day of [\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"];\n                track $index\n              ) {\n                <div class=\"days_name\">\n                  {{ day }}\n                </div>\n              }\n\n              <!-- Calendar dates -->\n              @for (dayObj of daysInMonth; track $index) {\n                <div\n                  class=\"calendar-day\"\n                  [ngClass]=\"{\n                    active:\n                      dayObj.isCurrentMonth &&\n                      dateConfig.selectionMode === 'single' &&\n                      isSelectedDate(\n                        dayObj.day,\n                        dayObj.date.getMonth(),\n                        dayObj.date.getFullYear()\n                      ),\n\n                    active_start:\n                      dayObj.isCurrentMonth &&\n                      dateConfig.selectionMode === 'range' &&\n                      isSelectedDate(\n                        dayObj.day,\n                        dayObj.date.getMonth(),\n                        dayObj.date.getFullYear()\n                      ) &&\n                      dayObj.day === rangeStart,\n\n                    active_end:\n                      dayObj.isCurrentMonth &&\n                      dateConfig.selectionMode === 'range' &&\n                      isSelectedDate(\n                        dayObj.day,\n                        dayObj.date.getMonth(),\n                        dayObj.date.getFullYear()\n                      ) &&\n                      dayObj.day === rangeEnd,\n\n                    range_between_active:\n                      dayObj.isCurrentMonth &&\n                      dateConfig.selectionMode === 'range' &&\n                      isSelectedDate(\n                        dayObj.day,\n                        dayObj.date.getMonth(),\n                        dayObj.date.getFullYear()\n                      ) &&\n                      rangeStart != null &&\n                      rangeEnd != null &&\n                      dayObj.day > rangeStart &&\n                      dayObj.day < rangeEnd,\n\n                    other_month: !dayObj.isCurrentMonth,\n                    disabled: isDayDisabled(dayObj.day),\n                    notInCurrentMonth: !dayObj.isCurrentMonth,\n                  }\"\n                  (click)=\"\n                    dayObj.isCurrentMonth &&\n                      !isDayDisabled(dayObj.day) &&\n                      selectDate(dayObj.day)\n                  \"\n                >\n                  {{ dayObj.day }}\n                </div>\n              }\n            </div>\n            <div class=\"bottom_btn\">\n              <div class=\"btn\">Clear</div>\n              <div class=\"btn\">Today</div>\n            </div>\n          </div>\n        }\n      </div>\n      <!-- TIME SLOTS (only if showTime = true) -->\n      @if (dateConfig.enableTime) {\n        <div class=\"times\">\n          <div class=\"time-picker\">\n            <div class=\"time-column\">\n              @for (timeSlot of timeSlots; track $index) {\n                <span\n                  class=\"span_time\"\n                  [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n                  (click)=\"selectTime(timeSlot.label)\"\n                >\n                  {{ timeSlot.label }}\n                </span>\n              }\n            </div>\n\n            <div class=\"time-column\">\n              @for (timeSlot of timeSlots; track $index) {\n                <span\n                  class=\"span_time\"\n                  [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n                >\n                  {{ timeSlot.label }}\n                </span>\n              }\n            </div>\n\n            <div class=\"time-column\">\n              @for (timeSlot of timeSlots; track $index) {\n                <span\n                  class=\"span_time\"\n                  [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n                >\n                  {{ timeSlot.label }}\n                </span>\n              }\n            </div>\n\n            <!-- center selection indicator -->\n            <div class=\"center-highlight\"></div>\n          </div>\n\n          <!-- @for (timeSlot of timeSlots; track $index) {\n      <span\n        class=\"span_time\"\n        [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n        (click)=\"selectTime(timeSlot.label)\"\n      >\n        {{ timeSlot.label }}\n      </span>\n      } -->\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.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].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{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].custom_check_box: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].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;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{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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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:\"\";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:0;left:100%;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
+            }], clearDateEvent: [{
+                type: Output
             }], dateConfig: [{
                 type: Input
             }], minDate: [{
@@ -889,6 +904,9 @@ class CatsDataGridComponent {
     renderer;
     zone;
     cd;
+    pinMenu;
+    colActionMenu;
+    table;
     tableOptions;
     totalRecords = 0;
     sortingRequired = true;
@@ -900,6 +918,10 @@ class CatsDataGridComponent {
     selectedRowEmpty = false;
     filterRequired = true;
     threeDotsMenuRequired = true;
+    settingsRequired = true;
+    settingsClicked = false;
+    resetPage = true;
+    rowId = null;
     showDropdown = false;
     height = 400;
     groupByRequired = false;
@@ -907,8 +929,10 @@ class CatsDataGridComponent {
     onCheckboxSelection = new EventEmitter();
     onScrollEmitter = new EventEmitter();
     filter = new EventEmitter();
+    onHideSettings = new EventEmitter();
     activeFilterIndex = null;
     originalRowData = [];
+    activeAll = true;
     pageDetails = {
         pageSize: 20,
         totalPages: 1,
@@ -942,6 +966,7 @@ class CatsDataGridComponent {
     columnDraggable = [];
     activeGroups = [];
     groupBy = [];
+    groupByField = '';
     dragGroupIndex = null;
     dateConfig = {
         selectionMode: 'single',
@@ -968,32 +993,64 @@ class CatsDataGridComponent {
     removeMouseUp;
     rafId = null;
     appliedFilters = [];
+    rowGripFieldName;
+    pageNumber;
+    pageSize;
     appliedFiltersEvent = new EventEmitter();
     activeGroupsEvent = new EventEmitter();
     dynamicGroupingFiltering = false;
+    atLeastOneColumnChecked = true;
+    draggedRowData = {};
+    firstCol;
+    isRowSelected = false;
+    onRowClicked = new EventEmitter();
+    onCellClicked = new EventEmitter();
     constructor(renderer, zone, cd) {
         this.renderer = renderer;
         this.zone = zone;
         this.cd = cd;
     }
-    ngOnInit() { }
+    ngOnInit() {
+        // if (this.colDefs && this.colDefs.length > 0) {
+        //   this.firstCol = this.colDefs[0];
+        // }
+    }
     ngOnChanges(changes) {
+        if (changes['pageNumber']?.currentValue) {
+            this.pageDetails.currentPage = changes['pageNumber']?.currentValue;
+            this.recordsToShow.min = (this.pageDetails.currentPage - 1) * this.pageDetails.pageSize;
+            this.recordsToShow.max = this.pageDetails.currentPage * this.pageDetails.pageSize;
+            this.clearAllFilter();
+        }
+        if (changes['pageSize']?.currentValue) {
+            this.pageDetails.pageSize = changes['pageSize']?.currentValue;
+            this.recordsToShow.min = (this.pageDetails.currentPage - 1) * this.pageDetails.pageSize;
+            this.recordsToShow.max = this.pageDetails.currentPage * this.pageDetails.pageSize;
+        }
         if (changes['colDefs']?.currentValue) {
-            this.resetPagination();
+            // this.resetPagination();
             this.colDefs = this.getUpdatedColDefs(changes['colDefs']?.currentValue);
             setTimeout(() => {
                 this.applyAllFilters();
             });
             this.originalColDefs = [...this.colDefs];
         }
-        if (changes['totalRecords']?.currentValue) {
+        if (changes['totalRecords']?.currentValue && this.resetPage) {
             this.resetPagination();
         }
+        else {
+            this.setPageCount();
+        }
         if (changes['rowData']?.currentValue) {
             if (this.selectedRowEmpty)
                 this.selectedRow = [];
             this.rowData = changes['rowData']?.currentValue.map((row, i) => {
-                row.rowId = `${Date.now()}_${i}`;
+                if (row[this.rowId]) {
+                    row.rowId = row[this.rowId];
+                }
+                else {
+                    row.rowId = `${Date.now()}_${i}`;
+                }
                 if (row?.isSelected)
                     [...this.selectedRow, row];
                 return row;
@@ -1006,6 +1063,50 @@ class CatsDataGridComponent {
             }
             this.getGroupedData();
         }
+        if (changes['groupByField']?.currentValue) {
+            this.activeGroups = [];
+            this.groupBy = [];
+            const groupByField = changes['groupByField'].currentValue;
+            const col = this.getColumnDetail(this.colDefs, groupByField);
+            this.activeGroups.push(...col);
+            this.groupBy.push(groupByField);
+            this.getGroupedData();
+        }
+    }
+    getColumnDetail(colDefs, groupByField) {
+        return colDefs.filter((col) => col.fieldName === groupByField);
+    }
+    activeAllSelection(event) {
+        let checked = event.target.checked;
+        if (checked) {
+            this.colDefs = this.originalColDefs.map((dt) => {
+                if (!dt.active && !dt.headerLocked) {
+                    dt.active = true;
+                }
+                this.atLeastOneColumnChecked = true;
+                return dt;
+            });
+        }
+        else {
+            this.colDefs = this.originalColDefs.map((dt) => {
+                if (dt.active && !dt.headerLocked) {
+                    dt.active = false;
+                }
+                this.atLeastOneColumnChecked = false;
+                return dt;
+            });
+        }
+    }
+    changeActiveColSelection(event, col) {
+        col.active = !col.active;
+        const isAllNotChecked = this.originalColDefs.some((dt) => !dt.active);
+        this.atLeastOneColumnChecked = this.originalColDefs.some((dt) => dt.active);
+        if (isAllNotChecked) {
+            this.activeAll = false;
+        }
+        else {
+            this.activeAll = true;
+        }
     }
     /**
      * @description Prepares and normalizes column definitions for filtering and menu behavior
@@ -1028,6 +1129,8 @@ class CatsDataGridComponent {
             }
             let updatedCol = {
                 ...col,
+                active: col.active ?? true,
+                locked: col.locked ?? false,
                 filterable: col.filterable ?? true,
                 columnAction: col.columnAction ?? true,
                 sortable: col.sortable ?? true,
@@ -1071,7 +1174,11 @@ class CatsDataGridComponent {
                 case 'set':
                     const options = [
                         ...new Set(this.rowData.flatMap((r) => {
-                            return this.normalizeSetFilterType(r[col.fieldName], col?.cellRendererParams?.tagKey)?.filter(Boolean);
+                            let fieldName = col.fieldName;
+                            if (fieldName.includes('.')) {
+                                fieldName = fieldName.split('.')[0];
+                            }
+                            return this.normalizeSetFilterType(r[fieldName], col?.cellRendererParams?.tagKey)?.filter(Boolean);
                         })),
                     ];
                     updatedCol = {
@@ -1098,7 +1205,11 @@ class CatsDataGridComponent {
                         case 'set':
                             const options = [
                                 ...new Set(this.rowData.flatMap((r) => {
-                                    return this.normalizeSetFilterType(r[col.fieldName], col?.cellRendererParams?.tagKey)?.filter(Boolean);
+                                    let fieldName = col.fieldName;
+                                    if (fieldName.includes('.')) {
+                                        fieldName = fieldName.split('.')[0];
+                                    }
+                                    return this.normalizeSetFilterType(r[fieldName], col?.cellRendererParams?.tagKey)?.filter(Boolean);
                                 })),
                             ];
                             const selectedValues = new Set(appliedFilter.filters.map((f) => f.filterValue));
@@ -1192,116 +1303,122 @@ class CatsDataGridComponent {
     applyAllFilters() {
         let result = structuredClone(this.originalRowData);
         this.colDefs.forEach((col) => {
-            const field = col.fieldName;
-            // *********** TEXT FILTER ***********
-            if (col.filterType === 'text') {
-                const [c1, c2] = col.filters;
-                const textVal1 = c1.filterValue?.toLowerCase().trim();
-                const textVal2 = c2.filterValue?.toLowerCase().trim();
-                if (!textVal1 && !textVal2) {
-                    this.activeFilters.delete(col.fieldName);
-                    return;
-                }
-                this.activeFilters.add(col.fieldName);
-                result = result.filter((r) => {
-                    const fieldVal = String(r[field]).toLowerCase();
-                    const cond1 = textVal1
-                        ? this.evaluateTextFilterCondition(c1.filterOperation, fieldVal, textVal1)
-                        : false;
-                    const cond2 = textVal2
-                        ? this.evaluateTextFilterCondition(c2.filterOperation, fieldVal, textVal2)
-                        : false;
-                    return col.filterLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
-                });
-            }
-            // *********** NUMBER FILTER ***********
-            if (col.filterType === 'number') {
-                const [c1, c2] = col.filters;
-                const numValue1 = Number(c1.filterValue);
-                const numValue2 = Number(c2.filterValue);
-                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.filterOperation, fieldVal, numValue1)
-                        : false;
-                    const cond2 = numValue2
-                        ? this.evaluateNumDateFilterCondition(c2.filterOperation, fieldVal, numValue2)
-                        : false;
-                    return col.filterLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
-                });
-            }
-            // *********** DATE FILTER ***********
-            if (col.filterType === 'date') {
-                const [c1, c2] = col.filters;
-                const selected1 = this.normalizeDate(c1.filterValue);
-                const selected2 = this.normalizeDate(c2.filterValue);
-                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.filterOperation, fieldVal ?? r[field], selected1)
-                        : false;
-                    const cond2 = selected2
-                        ? this.evaluateNumDateFilterCondition(c2.filterOperation, fieldVal ?? r[field], selected2)
-                        : false;
-                    return col.filterLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
-                });
-            }
-            // *********** SET FILTER ***********
-            if (col.filterType === 'set') {
-                if (col.selectedValues?.size >= 0 &&
-                    col.selectedValues?.size !== col.options.length) {
+            let field = col.fieldName;
+            // if (field.includes('.')) {
+            //   const a = field.split('.');
+            //   field = a[0];
+            // }
+            if (col?.filterable) {
+                if (col.filterType === 'text') {
+                    // *********** TEXT FILTER ***********
+                    const [c1, c2] = col.filters;
+                    const textVal1 = c1.filterValue?.toLowerCase().trim();
+                    const textVal2 = c2.filterValue?.toLowerCase().trim();
+                    if (!textVal1 && !textVal2) {
+                        this.activeFilters.delete(col.fieldName);
+                        return;
+                    }
+                    this.activeFilters.add(col.fieldName);
                     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]);
+                        const fieldVal = this.evaluateFieldValue(r, field)?.toLowerCase() || '';
+                        const cond1 = textVal1
+                            ? this.evaluateTextFilterCondition(c1.filterOperation, fieldVal, textVal1)
+                            : false;
+                        const cond2 = textVal2
+                            ? this.evaluateTextFilterCondition(c2.filterOperation, fieldVal, textVal2)
+                            : false;
+                        return col.filterLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
                     });
+                }
+                // *********** NUMBER FILTER ***********
+                if (col.filterType === 'number') {
+                    const [c1, c2] = col.filters;
+                    const numValue1 = Number(c1.filterValue);
+                    const numValue2 = Number(c2.filterValue);
+                    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.filterOperation, fieldVal, numValue1)
+                            : false;
+                        const cond2 = numValue2
+                            ? this.evaluateNumDateFilterCondition(c2.filterOperation, fieldVal, numValue2)
+                            : false;
+                        return col.filterLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
+                    });
                 }
-                else {
-                    this.activeFilters.delete(col.fieldName);
+                // *********** DATE FILTER ***********
+                if (col.filterType === 'date') {
+                    const [c1, c2] = col.filters;
+                    const selected1 = this.normalizeDate(c1.filterValue);
+                    const selected2 = this.normalizeDate(c2.filterValue);
+                    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.filterOperation, fieldVal ?? r[field], selected1)
+                            : false;
+                        const cond2 = selected2
+                            ? this.evaluateNumDateFilterCondition(c2.filterOperation, fieldVal ?? r[field], selected2)
+                            : false;
+                        return col.filterLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
+                    });
                 }
-            }
-            if (this.activeFilters.has(col.fieldName)) {
-                let filterObj = {
-                    fieldName: col.fieldName,
-                    filterLogic: col.filterLogic,
-                    filters: col.filters,
-                };
+                // *********** SET FILTER ***********
                 if (col.filterType === 'set') {
-                    filterObj.filters = Array(...col.selectedValues).map((f) => ({
-                        filterOperation: 'equals',
-                        filterValue: f,
-                    }));
-                    filterObj.filterLogic = 'OR';
+                    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 {
+                        this.activeFilters.delete(col.fieldName);
+                    }
                 }
-                const existingIndex = this.appliedFilters.findIndex((f) => f.fieldName === col.fieldName);
-                if (existingIndex === -1) {
-                    this.appliedFilters.push(filterObj);
+                if (this.activeFilters.has(col.fieldName)) {
+                    let filterObj = {
+                        fieldName: col.fieldName,
+                        filterLogic: col.filterLogic,
+                        filters: col.filters,
+                    };
+                    if (col.filterType === 'set') {
+                        filterObj.filters = Array(...col.selectedValues).map((f) => ({
+                            filterOperation: 'equals',
+                            filterValue: f,
+                        }));
+                        filterObj.filterLogic = 'OR';
+                    }
+                    const existingIndex = this.appliedFilters.findIndex((f) => f.fieldName === col.fieldName);
+                    if (existingIndex === -1) {
+                        this.appliedFilters.push(filterObj);
+                    }
+                    else {
+                        this.appliedFilters[existingIndex] = filterObj;
+                    }
                 }
                 else {
-                    this.appliedFilters[existingIndex] = filterObj;
+                    this.appliedFilters = this.appliedFilters.filter((f) => f.fieldName !== col.fieldName);
                 }
             }
-            else {
-                this.appliedFilters = this.appliedFilters.filter((f) => f.fieldName !== col.fieldName);
-            }
         });
         if (this.dynamicGroupingFiltering) {
             this.appliedFiltersEvent.emit(this.appliedFilters);
@@ -1312,12 +1429,23 @@ class CatsDataGridComponent {
         this.getGroupedData();
         this.filter.emit(this.filteredData);
     }
+    evaluateFieldValue(row, field) {
+        if (field.includes('.')) {
+            const parts = field.split('.');
+            let value = row;
+            for (const part of parts) {
+                value = value?.[part];
+            }
+            return value;
+        }
+        return row[field];
+    }
     resetFilter(col) {
         switch (col.filterType) {
             case 'text':
             case 'number':
             case 'date': {
-                col.filters.forEach((f) => (f.filterValue = ''));
+                col.filters.forEach((f) => (f.filterValue = null));
                 col.filterLogic = 'OR';
                 break;
             }
@@ -1339,9 +1467,17 @@ class CatsDataGridComponent {
     }
     removeActiveFilter(col) {
         this.activeFilters.delete(col.fieldName);
-        this.colDefs
-            .find((c) => c.fieldName === col.fieldName)
-            .filters.forEach((f) => (f.filterValue = ''));
+        const column = this.colDefs.find((c) => c.fieldName === col.fieldName);
+        if (column) {
+            if (column.filterType === 'set') {
+                column.selectedValues = new Set(column.options); // clear set filter
+            }
+            else {
+                column.filters.forEach((f) => {
+                    f.filterValue = '';
+                });
+            }
+        }
         this.appliedFilters = this.appliedFilters.filter((f) => f.fieldName !== col.fieldName);
         if (this.dynamicGroupingFiltering) {
             this.appliedFiltersEvent.emit(this.appliedFilters);
@@ -1434,8 +1570,29 @@ class CatsDataGridComponent {
         this.menuVisible = this.menuVisible.map(() => false);
         if (!this.menuVisible[index])
             this.menuVisible[index] = false;
-        const rect = event.target.getBoundingClientRect();
         this.menuVisible[index] = true;
+        // setTimeout(() => {
+        //   const rect = (event.target as HTMLElement).getBoundingClientRect();
+        //   const el = this.colActionMenu?.nativeElement;
+        //   const leftAvailableSpace = rect.left;
+        //   const elWidth = el.offsetWidth;
+        //   if (leftAvailableSpace < elWidth) {
+        //     el.style.right = 'unset';
+        //     el.style.left = '0px';
+        //   }
+        // });
+        setTimeout(() => {
+            const table = this.table?.nativeElement;
+            const tableRect = table.getBoundingClientRect();
+            const rect = event.target.getBoundingClientRect();
+            const el = this.colActionMenu?.nativeElement;
+            const elWidth = el.offsetWidth;
+            const popUpLeftWidth = rect.left - elWidth;
+            if (popUpLeftWidth < tableRect.left) {
+                el.style.right = 'unset';
+                el.style.left = '0px';
+            }
+        });
     }
     /**
      * @description Sort from three dots menu pop up.
@@ -1605,8 +1762,22 @@ class CatsDataGridComponent {
         this.updatePinnedOffsets();
         this.onClickOutside();
     }
-    showPinActions() {
+    showPinActions(event) {
+        event.stopPropagation();
+        const parentEl = event.currentTarget;
         this.showPin = true;
+        setTimeout(() => {
+            const menuEl = this.pinMenu?.nativeElement;
+            if (!menuEl || !parentEl)
+                return;
+            const parentRect = parentEl.getBoundingClientRect();
+            const menuWidth = menuEl.offsetWidth;
+            const viewPortWidth = window.innerWidth;
+            let x = parentRect.right;
+            if (x + menuWidth > viewPortWidth) {
+                menuEl.style.right = `${parentRect.width}px`;
+            }
+        });
     }
     hidePinActions() {
         this.showPin = false;
@@ -1646,27 +1817,23 @@ class CatsDataGridComponent {
      */
     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] || '-';
+            // if (Array.isArray(row[col.fieldName])) {
+            //   if (row[col.fieldName].every((dt: string) => typeof dt === 'string')) {
+            //     return row[col.fieldName][0];
+            //   }
+            //   if (row[col.fieldName].every((dt: any) => typeof dt === 'object')) {
+            //     return row[col.fieldName][0]?.[col.cellRendererParams?.tagKey];
+            //   }
+            // }
+            return row[col.fieldName] || 'N/A';
         }
         else {
             let toParseArr = col?.fieldName.split('.');
             let val = row;
             for (const key of toParseArr) {
-                val =
-                    row?.[val.key] && typeof row[val.key] === 'object'
-                        ? row[val.key].name
-                        : (row[val.key] ?? '');
-                // val = val[key];
+                val = val?.[key];
             }
-            return val || '-';
+            return val || 'N/A';
         }
     }
     /**
@@ -1865,6 +2032,7 @@ class CatsDataGridComponent {
      * @param event
      */
     onRowCheckboxSelection(event) {
+        event.stopPropagation();
         if (event.target.checked) {
             let ind = this.rowData.findIndex((item) => item.rowId == event.target.id);
             this.rowData[ind].isSelected = true;
@@ -1895,6 +2063,7 @@ class CatsDataGridComponent {
         const style = {
             width: `${col.width ?? 150}px`,
             minWidth: `${col.minWidth ?? 50}px`,
+            maxWidth: `${col.maxWidth}px`,
         };
         if (col.isAction) {
             style.position = 'sticky';
@@ -2208,10 +2377,82 @@ class CatsDataGridComponent {
     convertToNumber(value) {
         return Number(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsDataGridComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { 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", appliedFilters: "appliedFilters", dynamicGroupingFiltering: "dynamicGroupingFiltering" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter", appliedFiltersEvent: "appliedFiltersEvent", activeGroupsEvent: "activeGroupsEvent" }, 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      }\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  @if (activeFilters.size > 0) {\r\n    <div class=\"active_filters_container\">\r\n      @for (filter of appliedFilters; track filter.fieldName) {\r\n        <div class=\"active_filter_tag\">\r\n          <div class=\"active_filter_label ellipsis\">\r\n            @for (item of filter.filters; track $index) {\r\n              @if (item.filterValue) {\r\n                @if ($index > 0 && item.filterValue) {\r\n                  <span class=\"filter_logic\"> {{ filter.filterLogic }} </span>\r\n                }\r\n                <span class=\"filter_field\">{{ filter.fieldName }}:</span>\r\n                <span class=\"\"> {{ item.filterOperation }}</span>\r\n                <span class=\"filter_value\">{{ item.filterValue }}</span>\r\n              }\r\n            }\r\n          </div>\r\n          <button\r\n            class=\"remove_filter_btn\"\r\n            (click)=\"removeActiveFilter(filter)\"\r\n          >\r\n            <img src=\"images/t-x.svg\" alt=\"\" />\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"table_scroll\"\r\n    #parent\r\n    (scroll)=\"infinityScroll($event)\"\r\n    [ngStyle]=\"{ height: height + 'px' }\"\r\n    [class.no-horizontal-scroll]=\"\r\n      (!rowData || rowData.length === 0) &&\r\n      (!groupedResult || groupedResult.length === 0)\r\n    \"\r\n  >\r\n    <div class=\"table-inner-wrapper\">\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=\"min-width: 50px; width: 50px\">\r\n                <div class=\"th_wraper\">\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                  <div class=\"filter_three_dot_wrapper\">\r\n                    <span class=\"resize-handle default_cursor\"> | </span>\r\n                  </div>\r\n                </div>\r\n              </th>\r\n            }\r\n            <!-- @else{\r\n          <th></th>\r\n          }  -->\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            }\r\n            @for (col of colDefs; track col.colId) {\r\n              <th\r\n                [ngStyle]=\"getStyle(col, 'action')\"\r\n                [ngClass]=\"{\r\n                  'drag-over': dragOverIndex === $index,\r\n                  pinned_column: col.leftPinned || col.rightPinned,\r\n                }\"\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                    <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n                    @if (\r\n                      sortingRequired &&\r\n                      sortingColumnIndex == $index &&\r\n                      col?.sortable &&\r\n                      !col.isAction\r\n                    ) {\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                        }\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                  </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                        }\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                              <lib-common-input\r\n                                [options]=\"filterOptions\"\r\n                                [selectedValue]=\"col.filters[0].filterOperation\"\r\n                                placeholder=\"Select filter\"\r\n                                (valueChange)=\"\r\n                                  col.filters[0].filterOperation = $event\r\n                                \"\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.filters[0].filterValue\"\r\n                                  (keyup)=\"applyAllFilters()\"\r\n                                />\r\n                              </div>\r\n\r\n                              <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.filters[0].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                              @if (col.filters[0].filterValue) {\r\n                                <div class=\"logic-row radio_option\">\r\n                                  <input\r\n                                    type=\"radio\"\r\n                                    name=\"filterLogic{{ col.fieldName }}\"\r\n                                    [(ngModel)]=\"col.filterLogic\"\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=\"filterLogic{{ col.fieldName }}\"\r\n                                    [(ngModel)]=\"col.filterLogic\"\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.filters[1].filterOperation\"\r\n                                  placeholder=\"Select filter\"\r\n                                  (valueChange)=\"\r\n                                    col.filters[1].filterOperation = $event\r\n                                  \"\r\n                                ></lib-common-input>\r\n                                <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.filters[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.filters[1].filterValue\"\r\n                                    (keyup)=\"applyAllFilters()\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                            }\r\n\r\n                            <!-- Number Filter -->\r\n                            @if (col.filterType === \"number\") {\r\n                              <lib-common-input\r\n                                [options]=\"numberFilterOptions\"\r\n                                [selectedValue]=\"col.filters[0].filterOperation\"\r\n                                placeholder=\"Select filter\"\r\n                                (valueChange)=\"\r\n                                  col.filters[0].filterOperation = $event\r\n                                \"\r\n                              ></lib-common-input>\r\n\r\n                              <!-- <input\r\n                      type=\"number\"\r\n                      [(ngModel)]=\"col.filters[0].filterValue\"\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.filters[0].filterValue\"\r\n                                  (input)=\"applyAllFilters()\"\r\n                                />\r\n                              </div>\r\n\r\n                              @if (col.filters[0].filterValue) {\r\n                                <div class=\"logic-row radio_option\">\r\n                                  <input\r\n                                    type=\"radio\"\r\n                                    name=\"filterLogic{{ col.fieldName }}\"\r\n                                    [(ngModel)]=\"col.filterLogic\"\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=\"filterLogic{{ col.fieldName }}\"\r\n                                    [(ngModel)]=\"col.filterLogic\"\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.filters[1].filterOperation\"\r\n                                  placeholder=\"Select filter\"\r\n                                  (valueChange)=\"\r\n                                    col.filters[1].filterOperation = $event\r\n                                  \"\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.filters[1].filterValue\"\r\n                                    (keyup)=\"applyAllFilters()\"\r\n                                  />\r\n                                </div>\r\n                                <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.filters[1].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n                              }\r\n                            }\r\n\r\n                            <!-- DATE FILTER -->\r\n                            @if (col.filterType === \"date\") {\r\n                              <lib-common-input\r\n                                [options]=\"numberFilterOptions\"\r\n                                [selectedValue]=\"col.filters[0].filterOperation\"\r\n                                placeholder=\"Select filter\"\r\n                                (valueChange)=\"\r\n                                  col.filters[0].filterOperation = $event\r\n                                \"\r\n                              ></lib-common-input>\r\n\r\n                              <!-- <input\r\n                      type=\"date\"\r\n                      [(ngModel)]=\"col.filters[0].filterValue\"\r\n                      (change)=\"applyAllFilters()\"\r\n                    /> -->\r\n                              <lib-common-calendar\r\n                                [dateConfig]=\"dateConfig\"\r\n                                [(ngModel)]=\"col.filters[0].filterValue\"\r\n                                (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                              ></lib-common-calendar>\r\n\r\n                              @if (col.filters[0].filterValue) {\r\n                                <div class=\"logic-row radio_option\">\r\n                                  <input\r\n                                    type=\"radio\"\r\n                                    name=\"filterLogic{{ col.fieldName }}\"\r\n                                    [(ngModel)]=\"col.filterLogic\"\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=\"filterLogic{{ col.fieldName }}\"\r\n                                    [(ngModel)]=\"col.filterLogic\"\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.filters[1].filterOperation\"\r\n                                  placeholder=\"Select filter\"\r\n                                  (valueChange)=\"\r\n                                    col.filters[1].filterOperation = $event\r\n                                  \"\r\n                                ></lib-common-input>\r\n\r\n                                <lib-common-calendar\r\n                                  [dateConfig]=\"dateConfig\"\r\n                                  [(ngModel)]=\"col.filters[1].filterValue\"\r\n                                  (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                                ></lib-common-calendar>\r\n                              }\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=\"table_scroll\">\r\n                                  @for (\r\n                                    opt of col.filteredOptions;\r\n                                    track $index\r\n                                  ) {\r\n                                    <label class=\"checkbox_container\">\r\n                                      <input\r\n                                        type=\"checkbox\"\r\n                                        [checked]=\"col.selectedValues.has(opt)\"\r\n                                        (change)=\"\r\n                                          toggleSetOption(col, opt, $event)\r\n                                        \"\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                        <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=\"table_scroll\">\r\n                      @if (\r\n                        sortingType[$index] === \"dsc\" ||\r\n                        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                      }\r\n                      @if (\r\n                        sortingType[$index] === \"asc\" ||\r\n                        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                      }\r\n                      @if (\r\n                        sortingType[$index] === \"asc\" ||\r\n                        sortingType[$index] === \"dsc\"\r\n                      ) {\r\n                        <div\r\n                          class=\"right_click_item\"\r\n                          (click)=\"onSort(col, '', $index)\"\r\n                        >\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 (\r\n                                    (pinActionClicked[col.colId] ?? \"none\") ===\r\n                                    \"none\"\r\n                                  ) {\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\r\n                        class=\"right_click_item\"\r\n                        [ngClass]=\"{ disabled_option: !groupByRequired }\"\r\n                      >\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) {\r\n            @for (group of 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) {\r\n                  @for (child of group.children; track 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\r\n                <!-- CASE 2: CHILDREN ARE RAW ROWS -->\r\n                @if (!group.children[0]?.children) {\r\n                  @for (row of group.children; track 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                      }\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\r\n                          [ngStyle]=\"getStyle(col)\"\r\n                          [ngClass]=\"[\r\n                            col?.addClass ? col.addClass(row) : '',\r\n                            col.leftPinned || col.rightPinned\r\n                              ? 'pinned_column'\r\n                              : '',\r\n                          ]\"\r\n                        >\r\n                          <!-- {{ row[col.fieldName] }} -->\r\n                          @if (!col?.cellRenderer) {\r\n                            <div class=\"cell-value ellipsis\">\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=\"table_scroll\">\r\n                                <div class=\"item\">\r\n                                  <span class=\"desc\">\r\n                                    {{ parseColValue(row, col) }}</span\r\n                                  >\r\n                                </div>\r\n                              </div>\r\n                            </div>\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                }\r\n              }\r\n            }\r\n          } @else {\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 class=\"checkbox_container\"\r\n                        ><input\r\n                          type=\"checkbox\"\r\n                          class=\"pointer\"\r\n                          name=\"\"\r\n                          id=\"{{ data.rowId }}\"\r\n                          [disabled]=\"data.isLocked\"\r\n                          [checked]=\"data.isSelected || data.isLocked\"\r\n                          (change)=\"onRowCheckboxSelection($event)\"\r\n                      /></span>\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                  </td>\r\n                }\r\n                @for (col of colDefs; track col.colId) {\r\n                  <td\r\n                    [ngStyle]=\"getStyle(col)\"\r\n                    [ngClass]=\"[\r\n                      col?.addClass ? col.addClass(data) : '',\r\n                      col.leftPinned || col.rightPinned ? 'pinned_column' : '',\r\n                    ]\"\r\n                  >\r\n                    @if (!col?.cellRenderer) {\r\n                      <div class=\"cell-value ellipsis\">\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=\"table_scroll\">\r\n                          <div class=\"item\">\r\n                            <span class=\"desc\">\r\n                              {{ parseColValue(data, col) }}</span\r\n                            >\r\n                          </div>\r\n                        </div>\r\n                      </div>\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            }\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            <!-- CASE: more groups -->\r\n            @if (node.children[0]?.children) {\r\n              @for (child of node.children; track 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\r\n            <!-- CASE: final rows -->\r\n            @if (!node.children[0]?.children) {\r\n              @for (row of node.children; track 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                  }\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\r\n                      [ngStyle]=\"getStyle(col)\"\r\n                      [ngClass]=\"[\r\n                        col.leftPinned || col.rightPinned ? 'pinned_column' : '',\r\n                      ]\"\r\n                    >\r\n                      <!-- {{ row[col.fieldName] }} -->\r\n                      @if (!col?.cellRenderer) {\r\n                        <div class=\"cell-value ellipsis\">\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=\"table_scroll\">\r\n                            <div class=\"item\">\r\n                              <span class=\"desc\">\r\n                                {{ parseColValue(row, col) }}</span\r\n                              >\r\n                            </div>\r\n                          </div>\r\n                        </div>\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            }\r\n          }\r\n        </ng-template>\r\n      </table>\r\n\r\n      @if (\r\n        (!rowData || rowData.length === 0) &&\r\n        (!groupedResult || groupedResult.length === 0)\r\n      ) {\r\n        <div class=\"empty_overlay\">\r\n          <div class=\"empty_content\">\r\n            @if (tableOptions?.noDataTemplate) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\r\n              ></ng-container>\r\n            } @else {\r\n              <span>No Data To Show</span>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\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 |\r\n          {{ totalRecords > 0 ? convertToNumber(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 disable_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\r\n              ? ''\r\n              : '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 disable_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;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}.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-300);border-color:var(--neutral-300)}.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);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.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);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));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:1;left: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:start;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-word}.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:separate;border-spacing:0;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:20}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--neutral-500);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table td.pinned_column,.tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value.ellipsis,.tableArea .table_wrapper table td .cell-value .ellipsis,.tableArea .table_wrapper table th .cell-value.ellipsis,.tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.tableArea .table_wrapper table td .cell-value.ellipsis:hover .see_more_data,.tableArea .table_wrapper table th .cell-value.ellipsis:hover .see_more_data{display:flex}.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;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.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));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;background-color:var(--neutral-50)}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover,.tableArea .table_wrapper table tbody tr:hover td{background-color:var(--blue-50)!important}.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:hover{background-color:var(--blue-50)!important}.tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.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))}.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 :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .resize-handle{color:var(--neutral-200);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.active_filters_container{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale))}.active_filters_container .active_filter_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:wrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--neutral-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale))}.active_filters_container .active_filter_tag .active_filter_label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;max-width:calc(29.1666666667rem / var(--scale))}.active_filters_container .active_filter_tag .filter_logic{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:var(--neutral-400)}.active_filters_container .active_filter_tag .filter_value{padding-left:calc(.3333333333rem / var(--scale))}.active_filters_container .active_filter_tag .remove_filter_btn{border:0;background-color:transparent;cursor:pointer}.active_filters_container .active_filter_tag .remove_filter_btn img{max-width:calc(1.3333333333rem / var(--scale))}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.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 .pagination_form .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}.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)}.d-none{display:none}.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}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--neutral-50);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.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.disabled_option{opacity:.4;pointer-events:none}.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)}.table_wrapper{position:relative;overflow:auto}.table_wrapper.no-horizontal-scroll{overflow-x:hidden!important}.table_inner_wrapper{position:relative;min-height:100%}.empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.empty_content{max-width:100%;text-align:center}\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" }] });
+    hideSettings() {
+        this.onHideSettings.emit(false);
+    }
+    dragRow(e, row) {
+        this.draggedRowData = row;
+        this.isRowSelected = this.selectedRow.some((s) => s.rowId === row.rowId);
+    }
+    allowRowDrop(e) {
+        e.preventDefault();
+    }
+    dropRow(targetRow) {
+        let sourceIndex = null;
+        let targetIndex = this.rowData.findIndex((dt) => dt.rowId === targetRow.rowId);
+        if (this.selectedRow.length > 0 && this.isRowSelected) {
+            sourceIndex = this.rowData.findIndex((dt) => dt.rowId === this.selectedRow[0].rowId);
+            const selectedIds = new Set(this.selectedRow.map((r) => r.rowId));
+            this.rowData = this.rowData.filter((dt) => !selectedIds.has(dt.rowId));
+            if (sourceIndex > this.rowData.length) {
+                sourceIndex = sourceIndex - this.selectedRow.length + 1;
+            }
+            if (targetIndex >= this.rowData.length) {
+                targetIndex = targetIndex - this.selectedRow.length + 1;
+            }
+            this.rowData.splice(sourceIndex, 0, ...this.selectedRow);
+        }
+        else {
+            sourceIndex = this.rowData.findIndex((dt) => dt.rowId === this.draggedRowData.rowId);
+        }
+        if (sourceIndex < 0 || targetIndex < 0)
+            return;
+        this.moveRow(sourceIndex, targetIndex);
+    }
+    moveRow(from, to) {
+        let rowMoved = [];
+        if (this.selectedRow.length > 0 && this.isRowSelected) {
+            rowMoved = this.rowData.splice(from, this.selectedRow.length);
+        }
+        else {
+            rowMoved = this.rowData.splice(from, 1);
+        }
+        this.rowData.splice(to, 0, ...rowMoved);
+        this.isRowSelected = false;
+    }
+    clearAllFilter() {
+        this.colDefs?.forEach((col) => {
+            this.resetFilter(col);
+        });
+    }
+    onBtFirstClick() {
+        this.pageDetails.currentPage = 1;
+        this.recordsToShow.min = 0;
+        this.recordsToShow.max = this.pageDetails.pageSize;
+        this.onPaginationChange.emit({
+            page: this.pageDetails.currentPage - 1,
+            pageSize: this.pageDetails.pageSize,
+        });
+    }
+    onBtLastClick() {
+        this.pageDetails.currentPage = this.pageDetails.totalPages;
+        this.recordsToShow.max = this.pageDetails.currentPage * this.pageDetails.pageSize;
+        this.recordsToShow.min = this.pageDetails.currentPage * this.pageDetails.pageSize - this.pageDetails.pageSize;
+        this.onPaginationChange.emit({
+            page: this.pageDetails.currentPage - 1,
+            pageSize: this.pageDetails.pageSize,
+        });
+    }
+    onRowClick(row) {
+        this.onRowClicked.emit({ row });
+    }
+    onCellClick(row, col) {
+        this.onCellClicked.emit({ row, col });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CatsDataGridComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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", settingsRequired: "settingsRequired", settingsClicked: "settingsClicked", resetPage: "resetPage", rowId: "rowId", height: "height", groupByRequired: "groupByRequired", pageSizeList: "pageSizeList", groupByField: "groupByField", appliedFilters: "appliedFilters", rowGripFieldName: "rowGripFieldName", pageNumber: "pageNumber", pageSize: "pageSize", dynamicGroupingFiltering: "dynamicGroupingFiltering" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter", onHideSettings: "onHideSettings", appliedFiltersEvent: "appliedFiltersEvent", activeGroupsEvent: "activeGroupsEvent", onRowClicked: "onRowClicked", onCellClicked: "onCellClicked" }, viewQueries: [{ propertyName: "pinMenu", first: true, predicate: ["pinMenu"], descendants: true }, { propertyName: "colActionMenu", first: true, predicate: ["colActionMenu"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\" #table>\n  @if (settingsRequired && settingsClicked) {\n    <div\n      class=\"setting_options\"\n      appOutsideClick\n      (clickOutside)=\"hideSettings()\"\n    >\n      <div class=\"column_header\">Select Headers</div>\n      <div class=\"checkbox_container\">\n        <input\n          class=\"custom_check_box\"\n          type=\"checkbox\"\n          [checked]=\"activeAll\"\n          (change)=\"activeAllSelection($event)\"\n        />\n        <span>Select All</span>\n      </div>\n\n      <div class=\"item_container\" id=\"table_scroll\">\n        @for (col of colDefs; track col.colId) {\n          <div class=\"column_item checkbox_container\">\n            <input\n              class=\"custom_check_box\"\n              type=\"checkbox\"\n              [checked]=\"col.active\"\n              (change)=\"changeActiveColSelection($event, col)\"\n              [disabled]=\"col.headerLocked\"\n            />\n            <span>{{ col.headerName | titlecase }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (groupByRequired) {\n    <!-- Group Panel -->\n    <div\n      class=\"group_panel\"\n      (dragover)=\"onGroupDragOver($event)\"\n      (drop)=\"onGroupDrop($event)\"\n    >\n      <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n      @for (g of activeGroups; track $index) {\n        <div\n          class=\"group_tag\"\n          draggable=\"true\"\n          (dragstart)=\"onGroupDragStart($event, $index)\"\n          (dragover)=\"onActiveDragOver($event, $index)\"\n          (drop)=\"onActiveGroupDrop($event, $index)\"\n        >\n          <img src=\"images/t-gripper.svg\" alt=\"\" />\n          <span>{{ g.headerName }}</span>\n          <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\n            <img src=\"images/t-x.svg\" alt=\"\" />\n          </button>\n        </div>\n        <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n      }\n      @if (activeGroups.length === 0) {\n        <div class=\"group_placeholder\">Drag here to set row groups</div>\n      }\n    </div>\n  }\n  @if (activeFilters.size > 0) {\n    <div class=\"active_filters_container\">\n      <div class=\"tag_wrapper\">\n        @for (filter of appliedFilters; track filter.fieldName) {\n          <div class=\"active_filter_tag\">\n            <div class=\"active_filter_label ellipsis\">\n              @for (item of filter.filters; track $index) {\n                @if (item.filterValue) {\n                  @if ($index > 0 && item.filterValue) {\n                    <span class=\"filter_logic\"> {{ filter.filterLogic }} </span>\n                  }\n                  <span class=\"filter_field\">{{ filter.fieldName }}:</span>\n                  <span class=\"\"> {{ item.filterOperation }}</span>\n                  <span class=\"filter_value\">{{ item.filterValue }}</span>\n                }\n              }\n            </div>\n            <button\n              class=\"remove_filter_btn\"\n              (click)=\"removeActiveFilter(filter)\"\n            >\n              <img src=\"images/t-x.svg\" alt=\"\" />\n            </button>\n          </div>\n        }\n      </div>\n      <div class=\"clear_all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n    </div>\n  }\n  <div\n    class=\"table_wrapper global\"\n    id=\"table_scroll\"\n    #parent\n    (scroll)=\"infinityScroll($event)\"\n    [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n    [class.no-horizontal-scroll]=\"\n      (!rowData || rowData.length === 0) &&\n      (!groupedResult || groupedResult.length === 0)\n    \"\n  >\n    <div class=\"table-inner-wrapper\">\n      <table cellspacing=\"0\" cellpadding=\"0\">\n        <thead class=\"sticky-top\">\n          <tr>\n            @if (\n              checkBoxSelection &&\n              checkboxSelectionType == \"multiple\" &&\n              atLeastOneColumnChecked\n            ) {\n              <th style=\"min-width: 50px; width: 50px\">\n                <div class=\"th_wraper\">\n                  <span class=\"checkbox_container\"\n                    ><input\n                      class=\"pointer custom_check_box\"\n                      type=\"checkbox\"\n                      name=\"\"\n                      id=\"\"\n                      [checked]=\"checkAllSelected()\"\n                      [indeterminate]=\"checkInterminate()\"\n                      (change)=\"onHeaderCheckboxChange($event)\"\n                  /></span>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <span class=\"resize-handle default_cursor\"> | </span>\n                  </div>\n                </div>\n              </th>\n            }\n            @else{\n          <th></th>\n          } \n            @if (activeGroups.length > 0) {\n              <th class=\"active_group\">\n                <div class=\"th_wraper\">\n                  <div class=\"text_wrapper\">\n                    <span class=\"ellipsis headerName\">Group</span>\n                  </div>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <div class=\"three-dots\">\n                      <img src=\"images/t-more-vertical.svg\" />\n                    </div>\n                  </div>\n                </div>\n              </th>\n            }\n            @for (col of colDefs; track col.colId) {\n              @if (col.active) {\n                <th\n                  [ngStyle]=\"getStyle(col, 'action')\"\n                  [ngClass]=\"{\n                    'drag-over': dragOverIndex === $index,\n                    pinned_column: col.leftPinned || col.rightPinned,\n                  }\"\n                  (dragover)=\"onDragOver($event, $index)\"\n                  (drop)=\"onDrop($event, $index)\"\n                  (mouseenter)=\"onMouseEnterHeader($index)\"\n                  (mouseleave)=\"onMouseLeaveHeader($index)\"\n                >\n                  <div class=\"th_wraper\">\n                    <div\n                      class=\"text_wrapper\"\n                      [ngStyle]=\"getStyle(col, 'action')\"\n                      (click)=\"onSortingRowData($index, col)\"\n                    >\n                      @if (showMoveIcon[$index] && !col.isAction) {\n                        <img\n                          src=\"images/t-move.svg\"\n                          class=\"move-icon\"\n                          [draggable]=\"!isResizing || columnDraggable[$index]\"\n                          (dragstart)=\"onDragStart($event, $index)\"\n                          (dragend)=\"onDragEnd()\"\n                          (mouseenter)=\"enableColumnDrag($event, $index)\"\n                          (mouseleave)=\"disableColumnDrag($event, $index)\"\n                        />\n                      }\n                      <span class=\"ellipsis headerName\">{{\n                        col?.headerName\n                      }}</span>\n\n                      @if (\n                        sortingRequired &&\n                        sortingColumnIndex == $index &&\n                        col?.sortable &&\n                        !col.isAction\n                      ) {\n                        <span class=\"sorting_icon\">\n                          @if (sortingType[$index] === \"asc\") {\n                            <img\n                              src=\"images/t-arrow-up.svg\"\n                              class=\"sorting_up\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                          @if (sortingType[$index] === \"dsc\") {\n                            <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n                            <img\n                              src=\"images/t-arrow-down.svg\"\n                              class=\"sorting_down\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                        </span>\n                      }\n                    </div>\n                    <div class=\"filter_three_dot_wrapper\">\n                      <!-- Column Filters Logic-->\n                      @if (filterRequired && col.filterable) {\n                        <div\n                          #trigger\n                          class=\"filters\"\n                          (click)=\"toggleFilter(col, $index, $event)\"\n                        >\n                          @if (activeFilters.has(col.fieldName)) {\n                            <img\n                              src=\"images/t-filter-applied.svg\"\n                              class=\"filter-icon\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          } @else {\n                            <img\n                              src=\"images/t-filter.svg\"\n                              class=\"filter-icon\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                          @if (activeFilterIndex === $index) {\n                            <div class=\"filt_wrap\">\n                              <div\n                                adaptivePosition\n                                [trigger]=\"trigger\"\n                                [parentContainer]=\"parent\"\n                                [matchWidth]=\"false\"\n                                class=\"filter_wrapper\"\n                                id=\"filter_wrapper-{{ $index }}\"\n                                (click)=\"$event.stopPropagation()\"\n                                appOutsideClick\n                                (clickOutside)=\"onClickOutside()\"\n                              >\n                                <!-- Text Filter -->\n                                @if (col.filterType === \"text\") {\n                                  <lib-common-input\n                                    [options]=\"filterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"text\"\n                                      placeholder=\"Filter\"\n                                      [(ngModel)]=\"col.filters[0].filterValue\"\n                                      (keyup)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"filterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n                                    <!-- <input\n                         type=\"text\"\n                         [(ngModel)]=\"col.filters[1].filterValue\"\n                         placeholder=\"Filter\u2026\"\n                         (keyup)=\"applyAllFilters()\"\n                       /> -->\n\n                                    <div class=\"search_input\">\n                                      <img src=\"images/search.svg\" alt=\"\" />\n                                      <input\n                                        type=\"text\"\n                                        placeholder=\"Filter\"\n                                        [(ngModel)]=\"col.filters[1].filterValue\"\n                                        (keyup)=\"applyAllFilters()\"\n                                      />\n                                    </div>\n                                  }\n                                }\n\n                                <!-- Number Filter -->\n                                @if (col.filterType === \"number\") {\n                                  <lib-common-input\n                                    [options]=\"numberFilterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <!-- <input\n                         type=\"number\"\n                         [(ngModel)]=\"col.filters[0].filterValue\"\n                         (input)=\"applyAllFilters()\"\n                       /> -->\n\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"number\"\n                                      placeholder=\"Filter\"\n                                      [(ngModel)]=\"col.filters[0].filterValue\"\n                                      (input)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"numberFilterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n\n                                    <div class=\"search_input\">\n                                      <img src=\"images/search.svg\" alt=\"\" />\n                                      <input\n                                        type=\"text\"\n                                        placeholder=\"Filter\"\n                                        [(ngModel)]=\"col.filters[1].filterValue\"\n                                        (keyup)=\"applyAllFilters()\"\n                                      />\n                                    </div>\n                                    <!-- <input\n                         type=\"text\"\n                         [(ngModel)]=\"col.filters[1].filterValue\"\n                         placeholder=\"Filter\u2026\"\n                         (keyup)=\"applyAllFilters()\"\n                       /> -->\n                                  }\n                                }\n\n                                <!-- DATE FILTER -->\n                                @if (col.filterType === \"date\") {\n                                  <lib-common-input\n                                    [options]=\"numberFilterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <!-- <input\n                         type=\"date\"\n                         [(ngModel)]=\"col.filters[0].filterValue\"\n                         (change)=\"applyAllFilters()\"\n                       /> -->\n                                  <lib-common-calendar\n                                    [dateConfig]=\"dateConfig\"\n                                    [(ngModel)]=\"col.filters[0].filterValue\"\n                                    [preSelectedValue]=\"\n                                      col.filters[0].filterValue\n                                    \"\n                                    (dateTimeSelected)=\"\n                                      dateTimeSelected($event)\n                                    \"\n                                  ></lib-common-calendar>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"numberFilterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n\n                                    <lib-common-calendar\n                                      [dateConfig]=\"dateConfig\"\n                                      [(ngModel)]=\"col.filters[1].filterValue\"\n                                      [preSelectedValue]=\"\n                                        col.filters[1].filterValue\n                                      \"\n                                      (dateTimeSelected)=\"\n                                        dateTimeSelected($event)\n                                      \"\n                                    ></lib-common-calendar>\n                                  }\n                                }\n\n                                <!-- SET FILTER (CHECKBOX LIST) -->\n                                @if (col.filterType === \"set\") {\n                                  <!-- <input\n                         type=\"text\"\n                         placeholder=\"Search...\"\n                         (input)=\"filterSetOptions(col, $event)\"\n                       /> -->\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"text\"\n                                      placeholder=\"Search...\"\n                                      (input)=\"filterSetOptions(col, $event)\"\n                                    />\n                                  </div>\n\n                                  <div class=\"set_option_details\">\n                                    <label class=\"checkbox_container\">\n                                      <input\n                                        class=\"custom_check_box\"\n                                        type=\"checkbox\"\n                                        [checked]=\"isAllSelected(col)\"\n                                        (change)=\"toggleSelectAll(col, $event)\"\n                                      />\n                                      (Select All)\n                                    </label>\n                                    <div class=\"set_options\" id=\"table_scroll\">\n                                      @for (\n                                        opt of col.filteredOptions;\n                                        track $index\n                                      ) {\n                                        <label class=\"checkbox_container\">\n                                          <input\n                                            class=\"custom_check_box\"\n                                            type=\"checkbox\"\n                                            [checked]=\"\n                                              col.selectedValues.has(opt)\n                                            \"\n                                            (change)=\"\n                                              toggleSetOption(col, opt, $event)\n                                            \"\n                                          />\n                                          {{ opt }}\n                                        </label>\n                                      }\n                                    </div>\n                                  </div>\n                                }\n                                <div class=\"filter_btn\">\n                                  <button\n                                    class=\"reset_btn\"\n                                    type=\"button\"\n                                    (click)=\"resetFilter(col)\"\n                                  >\n                                    Reset\n                                  </button>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      <!-- Three dots menu-->\n                      <div #triggerColMenu>\n                        @if (threeDotsMenuRequired && col.columnAction) {\n                          <div\n                            class=\"three-dots\"\n                            (click)=\"openMenu($event, col, $index)\"\n                          >\n                            <img\n                              src=\"images/t-more-vertical.svg\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          </div>\n                        }\n                      </div>\n                      @if (!col.isAction) {\n                        <span\n                          class=\"resize-handle\"\n                          (mousedown)=\"startResize($event, $index)\"\n                        >\n                          |\n                        </span>\n                      }\n                    </div>\n                  </div>\n\n                  <!-- popup open -->\n                  @if (menuVisible[$index]) {\n                    <div\n                      #colActionMenu\n                      class=\"dropdown_wrapper\"\n                      adaptivePosition\n                      [trigger]=\"triggerColMenu\"\n                      [parentContainer]=\"parent\"\n                      [matchWidth]=\"false\"\n                      [isColumnActionMenu]=\"true\"\n                      (click)=\"$event.stopPropagation()\"\n                      appOutsideClick\n                      (clickOutside)=\"onClickOutside()\"\n                    >\n                      <div class=\"right_click_dropdown\" id=\"table_scroll\">\n                        @if (\n                          sortingType[$index] === \"dsc\" ||\n                          sortingType[$index] === \"\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, 'asc', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img\n                                src=\"images/arrow-up.svg\"\n                                class=\"sorting_up\"\n                                [ngClass]=\"{ disable: !col.sortable }\"\n                              />\n                              <span class=\"text\">Sort Ascending</span>\n                            </div>\n                          </div>\n                        }\n                        @if (\n                          sortingType[$index] === \"asc\" ||\n                          sortingType[$index] === \"\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, 'dsc', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img src=\"images/arrow-down.svg\" />\n                              <span class=\"text\">Sort Descending</span>\n                            </div>\n                          </div>\n                        }\n                        @if (\n                          sortingType[$index] === \"asc\" ||\n                          sortingType[$index] === \"dsc\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, '', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img src=\"images/trash-2.svg\" />\n                              <span class=\"text\">Clear Sort</span>\n                            </div>\n                          </div>\n                        }\n                        <div class=\"divder\"></div>\n\n                        <div\n                          class=\"right_click_item\"\n                          (mouseenter)=\"showPinActions($event)\"\n                          (mouseleave)=\"hidePinActions()\"\n                        >\n                          <div class=\"left_item\">\n                            <img src=\"images/pin.svg\" />\n                            <span class=\"text\">Pin Column</span>\n                          </div>\n                          <div class=\"right_item\">\n                            <img src=\"images/chevron-right.svg\" />\n                            @if (showPin) {\n                              <div class=\"second_dropdown\" #pinMenu>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'none')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      (pinActionClicked[col.colId] ??\n                                        \"none\") === \"none\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">No Pin</span>\n                                  </div>\n                                </div>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'left')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      pinActionClicked[col.colId] === \"left\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">Pin Left</span>\n                                  </div>\n                                </div>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'right')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      pinActionClicked[col.colId] === \"right\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">Pin Right</span>\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n\n                        <!-- <div\n                       class=\"right_click_item\"\n                       (click)=\"pinColumn(col, $index, 'left')\"\n                     >\n                       <div class=\"left_item\">\n                         <img src=\"images/pin.svg\" />\n                         <span class=\"text\">{{\n                           col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n                         }}</span>\n                       </div>\n                     </div>\n                     <div\n                       class=\"right_click_item\"\n                       (click)=\"pinColumn(col, $index, 'right')\"\n                     >\n                       <div class=\"left_item\">\n                         <img src=\"images/pin.svg\" />\n                         <span class=\"text\">\n                           {{\n                             col.rightPinned\n                               ? \"Unpin Right Column\"\n                               : \"Pin Column Right\"\n                           }}\n                         </span>\n                       </div>\n                       <div class=\"right_item\">\n                         <img src=\"images/arrow-right.svg\" alt=\"\" />\n                       </div>\n                     </div> -->\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Autosize This Column</span>\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Autosize All Columns</span>\n                          </div>\n                        </div>\n                        <div\n                          class=\"right_click_item\"\n                          [ngClass]=\"{ disabled_option: !groupByRequired }\"\n                        >\n                          <div\n                            class=\"left_item\"\n                            (click)=\"groupByColumnAction(col, $index)\"\n                          >\n                            <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n                            <span class=\"text\"\n                              >Group by {{ col.headerName }}</span\n                            >\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"images/t-choose-column.svg\" alt=\"\" />\n                            <span class=\"text\">Choose Columns</span>\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Reset Columns</span>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @if (groupedResult && groupedResult.length > 0) {\n            @for (group of groupedResult; track group.key) {\n              <tr (click)=\"toggleGroup(group)\">\n                <td\n                  class=\"group-cell\"\n                  [attr.colspan]=\"\n                    colDefs.length +\n                    (checkBoxSelection ? 1 : 0) +\n                    (activeGroups.length > 0 ? 1 : 0)\n                  \"\n                >\n                  <span class=\"group-toggle\">\n                    <img\n                      src=\"images/{{\n                        group.expanded\n                          ? 'chevron-down.svg'\n                          : 'chevron-right.svg'\n                      }}\"\n                    />\n                    {{ group.key }} ({{ group.children.length }})\n                  </span>\n                </td>\n              </tr>\n\n              @if (group.expanded) {\n                <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n                @if (group.children[0]?.children) {\n                  @for (child of group.children; track child.key) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"groupTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: child,\n                        colDefs: colDefs,\n                        checkBoxSelection: checkBoxSelection,\n                        activeGroups: activeGroups,\n                        level: 1,\n                      }\"\n                    ></ng-container>\n                  }\n                }\n\n                <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n                @if (!group.children[0]?.children) {\n                  @for (row of group.children; track row.rowId) {\n                    <tr [ngClass]=\"row | addClass: tableOptions\">\n                      <!-- Checkbox column if any -->\n                      @if (checkBoxSelection) {\n                        <td>\n                          <span class=\"checkbox_container\">\n                            <input\n                              class=\"custom_check_box\"\n                              type=\"checkbox\"\n                              [checked]=\"row.isSelected\"\n                          /></span>\n                        </td>\n                      }\n                      @if (activeGroups.length > 0) {\n                        <td class=\"group-placeholder\"></td>\n                      }\n\n                      <!-- Render columns -->\n                      @for (col of colDefs; track col.colId) {\n                        <td\n                          [ngStyle]=\"getStyle(col)\"\n                          [ngClass]=\"[\n                            col?.addClass ? col.addClass(row) : '',\n                            col.leftPinned || col.rightPinned\n                              ? 'pinned_column'\n                              : '',\n                          ]\"\n                        >\n                          <!-- {{ row[col.fieldName] }} -->\n                          @if (!col?.cellRenderer) {\n                            <div class=\"cell-value ellipsis\">\n                              <div\n                                class=\"more_data_wrapper\"\n                                [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                              >\n                                {{ parseColValue(row, col) }}\n                              </div>\n                              <div class=\"see_more_data\" id=\"table_scroll\">\n                                <div class=\"item\">\n                                  <span class=\"desc\">\n                                    {{ parseColValue(row, col) }}</span\n                                  >\n                                </div>\n                              </div>\n                            </div>\n                          } @else {\n                            <div\n                              [rowParam]=\"row\"\n                              [col]=\"col\"\n                              [api]=\"tableOptions\"\n                              [currentValue]=\"row[col.fieldName]\"\n                              appRendererParser\n                            ></div>\n                          }\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n              }\n            }\n          } @else {\n            @for (data of rowData; track data.rowId) {\n              <tr\n                [ngClass]=\"data | addClass: tableOptions\"\n                (dragover)=\"allowRowDrop($event)\"\n                (drop)=\"dropRow(data)\"\n                (click)=\"onRowClick(data)\"\n              >\n                @if (checkBoxSelection && atLeastOneColumnChecked) {\n                  <td style=\"min-width: 50px\">\n                    @if (checkboxSelectionType == \"multiple\") {\n                      <span class=\"checkbox_container\"\n                        ><input\n                          type=\"checkbox\"\n                          class=\"pointer custom_check_box\"\n                          name=\"\"\n                          id=\"{{ data.rowId }}\"\n                          [disabled]=\"data.isLocked\"\n                          [checked]=\"data.isSelected || data.isLocked\"\n                          (change)=\"onRowCheckboxSelection($event)\"\n                      /></span>\n                    } @else {\n                      <span class=\"radio_option\">\n                        <input\n                          type=\"radio\"\n                          name=\"\"\n                          id=\"{{ data.rowId }}\"\n                          [checked]=\"data?.isSelected\"\n                          (change)=\"onRowCheckboxSelection($event)\"\n                        />\n                        <label [for]=\"data.rowId\"></label>\n                      </span>\n                    }\n                  </td>\n                }\n                @for (col of colDefs; track col.colId) {\n                  @if (col.active) {\n                    <td (click)=\"onCellClick(data, col)\"\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col?.addClass ? col.addClass(data) : '',\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : '',\n                      ]\"\n                      class=\"table_cell\"\n                    >\n                      <div class=\"col_wrapper\">\n                        @if (\n                          rowGripFieldName &&\n                          rowGripFieldName === col?.fieldName\n                        ) {\n                          <div\n                            [draggable]=\"true\"\n                            (dragstart)=\"dragRow($event, data)\"\n                            class=\"gripper\"\n                          >\n                            <img src=\"images/gripper.svg\" />\n                          </div>\n                        }\n\n                        @if (!col?.cellRenderer) {\n                          <div class=\"cell-value ellipsis\">\n                            <div\n                              class=\"more_data_wrapper\"\n                              [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                            >\n                              {{ parseColValue(data, col) }}\n                            </div>\n                            <div class=\"see_more_data\" id=\"table_scroll\">\n                              <div class=\"item\">\n                                <span class=\"desc\">\n                                  {{ parseColValue(data, col) }}</span\n                                >\n                              </div>\n                            </div>\n                          </div>\n                        } @else {\n                          <div\n                            [rowParam]=\"data\"\n                            [col]=\"col\"\n                            [api]=\"tableOptions\"\n                            [currentValue]=\"data[col.fieldName]\"\n                            appRendererParser\n                          ></div>\n                        }\n                      </div>\n                      <!-- Commented for later use -->\n                      <!-- <div class=\"tool_tip\">\n                <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n              </div> -->\n                    </td>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tbody>\n\n        <ng-template\n          #groupTemplate\n          let-node\n          let-colDefs=\"colDefs\"\n          let-checkBoxSelection=\"checkBoxSelection\"\n          let-activeGroups=\"activeGroups\"\n          let-level=\"level\"\n        >\n          <!-- GROUP HEADER -->\n          <tr (click)=\"toggleGroup(node)\">\n            <td\n              [attr.colspan]=\"\n                colDefs.length +\n                (checkBoxSelection ? 1 : 0) +\n                (activeGroups.length > 0 ? 1 : 0)\n              \"\n              [style.paddingLeft.px]=\"level * 20\"\n              class=\"group-cell\"\n            >\n              <span class=\"group-toggle\">\n                <img\n                  src=\"images/{{\n                    node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n                  }}\"\n                />\n                {{ node.key }} ({{ node.children.length }})\n              </span>\n            </td>\n          </tr>\n\n          <!-- CHILDREN -->\n          @if (node.expanded) {\n            <!-- CASE: more groups -->\n            @if (node.children[0]?.children) {\n              @for (child of node.children; track child.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"groupTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: child,\n                    colDefs: colDefs,\n                    checkBoxSelection: checkBoxSelection,\n                    activeGroups: activeGroups,\n                    level: level + 1,\n                  }\"\n                >\n                </ng-container>\n              }\n            }\n\n            <!-- CASE: final rows -->\n            @if (!node.children[0]?.children) {\n              @for (row of node.children; track row.rowId) {\n                <tr [ngClass]=\"row | addClass: tableOptions\">\n                  <!-- Checkbox column if any -->\n                  @if (checkBoxSelection) {\n                    <td>\n                      <span class=\"checkbox_container\">\n                        <input\n                          type=\"checkbox custom_check_box\"\n                          [checked]=\"row.isSelected\"\n                      /></span>\n                    </td>\n                  }\n                  @if (activeGroups.length > 0) {\n                    <td class=\"group-placeholder\"></td>\n                  }\n\n                  <!-- Render columns -->\n                  @for (col of colDefs; track col.colId) {\n                    <td\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : '',\n                      ]\"\n                    >\n                      <!-- {{ row[col.fieldName] }} -->\n                      @if (!col?.cellRenderer) {\n                        <div class=\"cell-value ellipsis\">\n                          <div\n                            class=\"more_data_wrapper\"\n                            [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                          >\n                            {{ parseColValue(row, col) }}\n                          </div>\n                          <div class=\"see_more_data\" id=\"table_scroll\">\n                            <div class=\"item\">\n                              <span class=\"desc\">\n                                {{ parseColValue(row, col) }}</span\n                              >\n                            </div>\n                          </div>\n                        </div>\n                      } @else {\n                        <div\n                          [rowParam]=\"row\"\n                          [col]=\"col\"\n                          [api]=\"tableOptions\"\n                          [currentValue]=\"row[col.fieldName]\"\n                          appRendererParser\n                        ></div>\n                      }\n                    </td>\n                  }\n                </tr>\n              }\n            }\n          }\n        </ng-template>\n      </table>\n\n      @if (\n        (!rowData || rowData.length === 0) &&\n        (!groupedResult || groupedResult.length === 0)\n      ) {\n        <div class=\"empty_overlay\">\n          <div class=\"empty_content\">\n            @if (tableOptions?.noDataTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n              ></ng-container>\n            } @else {\n              <span>No Data To Show</span>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n  <!--  Table Wrapper Ends-->\n  @if (paginationRequired) {\n    <div class=\"pagination_main\">\n      <div class=\"entries_details\">\n        <span>Showing</span>\n        <div class=\"pagination_select\">\n          <div\n            class=\"select_dropdown pointer\"\n            (click)=\"showPageSizeList = !showPageSizeList\"\n          >\n            <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n            <span class=\"chevron_img\">\n              <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n            </span>\n          </div>\n          @if (showPageSizeList) {\n            <div\n              class=\"select_option\"\n              appOutsideClick\n              (clickOutside)=\"onClickOutside()\"\n            >\n              @for (option of pageSizeList; track $index) {\n                <span\n                  class=\"pointer\"\n                  (click)=\"onPageSizeChanged(option); onClickOutside()\"\n                  >{{ option }}</span\n                >\n              }\n            </div>\n          }\n        </div>\n        <span\n          >Rows |\n          {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n          {{\n            recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n          }}\n          of\n          {{ totalRecords }} Entries</span\n        >\n      </div>\n      <div class=\"pagination_form\">\n        <!-- <span>Page</span> -->\n\n        <button class=\"outlined_btn first_btn\" type=\"button\" (click)=\"onBtFirstClick()\" [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\">\n          <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n        </button>\n        <button\n          class=\"outlined_btn prev_btn\"\n          [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n          type=\"button\"\n          (click)=\"onBtPrevClick()\"\n        >\n          <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n        </button>\n        <div>\n          <input\n            class=\"input_style\"\n            type=\"number\"\n            [(ngModel)]=\"pageDetails.currentPage\"\n            (change)=\"goToSelectedPage($event)\"\n            name=\"\"\n            id=\"\"\n          />\n        </div>\n        <button\n          class=\"outlined_btn next_btn\"\n          type=\"button\"\n          [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\"\n          (click)=\"onBtNextClick()\"\n        >\n          <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n        </button>\n        <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n        <button class=\"outlined_btn last_btn\" type=\"button\" (click)=\"onBtLastClick()\"        \n          [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\">\n          <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n        </button>\n      </div>\n    </div>\n  }\n  <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"dropdown_wrapper d-none\">\n  <div class=\"right_click_dropdown\">\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/scissors.svg\" />\n        <span class=\"text\">Cut</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+X</span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+C</span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy with Headers</span>\n      </div>\n      <span class=\"right_item\"></span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy with Group Headers</span>\n      </div>\n      <span class=\"right_item\"></span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/clipboard.svg\" alt=\"\" />\n        <span class=\"text\">Paste</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+V</span>\n    </div>\n\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <img src=\"images/bar-chart.svg\" alt=\"\" />\n        <span class=\"text\">Chart</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/download.svg\" alt=\"\" />\n        <span class=\"text\">Export</span>\n      </div>\n\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Chart section Start Here -->\n  <div class=\"second_dropdown\">\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <span class=\"text\">Column</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Bar</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Pie</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Line</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Area</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">XY(Scatter)</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Polar</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Stastical</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Hierarchical</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Specialized</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Funnel</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Combination</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Export Section start Here -->\n  <div class=\"export_section d-none\">\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <img src=\"images/file.svg\" alt=\"\" />\n        <span class=\"text\">CSV Report</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/file.svg\" alt=\"\" />\n        <span class=\"text\">Excel Report</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Column Group Section Start Here -->\n  <div class=\"third_dropdown\">\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Grouped</span>\n      </div>\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Stacked</span>\n      </div>\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">100% Stacked</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.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].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{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].custom_check_box: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].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;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{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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));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:1;left: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:start;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-word}.tableArea{width:100%;height:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;position:relative}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper.tbody_height{height:calc(100% - 3.5rem / var(--scale))}.tableArea .table_wrapper table{border-collapse:separate;border-spacing:0;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:20}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--neutral-500);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table td.pinned_column,.tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value.ellipsis,.tableArea .table_wrapper table td .cell-value .ellipsis,.tableArea .table_wrapper table th .cell-value.ellipsis,.tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.tableArea .table_wrapper table td .cell-value.ellipsis:hover .see_more_data,.tableArea .table_wrapper table th .cell-value.ellipsis:hover .see_more_data{display:flex}.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;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.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:nth-last-child(2) .second_dropdown,.tableArea .table_wrapper table thead th:nth-last-child(3) .second_dropdown{right:unset;left:calc(-20.25rem / var(--scale))}.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));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;background-color:var(--neutral-50)}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover,.tableArea .table_wrapper table tbody tr:hover td{background-color:var(--blue-100)!important}.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:hover{background-color:var(--blue-100)!important}.tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td .gripper{cursor:grab}.tableArea .table_wrapper table tbody tr td .col_wrapper{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale))}.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))}.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:0;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));min-width:auto;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 .filt_wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.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{color:var(--neutral-200);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.active_filters_container{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-bottom:0}.active_filters_container .tag_wrapper{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(100% - 10.8333333333rem / var(--scale));overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.active_filters_container .tag_wrapper .active_filter_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));background-color:var(--neutral-100);border-radius:calc(2.1666666667rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .active_filter_label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;max-width:calc(29.1666666667rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .filter_logic{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:var(--neutral-400)}.active_filters_container .tag_wrapper .active_filter_tag .filter_value{padding-left:calc(.3333333333rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .remove_filter_btn{border:0;background-color:transparent;cursor:pointer;min-width:auto;width:auto;height:auto}.active_filters_container .tag_wrapper .active_filter_tag .remove_filter_btn img{max-width:calc(1.3333333333rem / var(--scale))}.active_filters_container .clear_all{font-size:var(--fs-16);line-height:calc(1.5rem / var(--scale));font-weight:500;color:var(--blue-600);cursor:pointer}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.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(--blue-100)}.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 .pagination_form .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}.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)}.d-none{display:none}.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-bottom: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}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--blue-100);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.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));right:0}.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.disabled_option{opacity:.4;pointer-events:none}.dropdown_wrapper .right_click_item:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-100)}.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(-20.25rem / 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)}.table_wrapper.no-horizontal-scroll{overflow-x:hidden!important}.table_inner_wrapper{position:relative;min-height:100%}.empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.empty_content{max-width:100%;text-align:center}.setting_options{position:absolute;background:var(--white);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);width:calc(20.8333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.setting_options .column_header{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;height:calc(2.5rem / var(--scale));color:var(--neutral-600)}.setting_options .item_container{max-height:calc(16.6666666667rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale))}.setting_options .item_container .column_item{color:var(--neutral-600);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;height:calc(1.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}\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", "clearDateEvent"] }, { 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: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsDataGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CatsDataGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cats-data-grid', imports: [
                         CommonModule,
@@ -2222,8 +2463,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         RendererParserDirective,
                         AddClassPipe,
                         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      }\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  @if (activeFilters.size > 0) {\r\n    <div class=\"active_filters_container\">\r\n      @for (filter of appliedFilters; track filter.fieldName) {\r\n        <div class=\"active_filter_tag\">\r\n          <div class=\"active_filter_label ellipsis\">\r\n            @for (item of filter.filters; track $index) {\r\n              @if (item.filterValue) {\r\n                @if ($index > 0 && item.filterValue) {\r\n                  <span class=\"filter_logic\"> {{ filter.filterLogic }} </span>\r\n                }\r\n                <span class=\"filter_field\">{{ filter.fieldName }}:</span>\r\n                <span class=\"\"> {{ item.filterOperation }}</span>\r\n                <span class=\"filter_value\">{{ item.filterValue }}</span>\r\n              }\r\n            }\r\n          </div>\r\n          <button\r\n            class=\"remove_filter_btn\"\r\n            (click)=\"removeActiveFilter(filter)\"\r\n          >\r\n            <img src=\"images/t-x.svg\" alt=\"\" />\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"table_scroll\"\r\n    #parent\r\n    (scroll)=\"infinityScroll($event)\"\r\n    [ngStyle]=\"{ height: height + 'px' }\"\r\n    [class.no-horizontal-scroll]=\"\r\n      (!rowData || rowData.length === 0) &&\r\n      (!groupedResult || groupedResult.length === 0)\r\n    \"\r\n  >\r\n    <div class=\"table-inner-wrapper\">\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=\"min-width: 50px; width: 50px\">\r\n                <div class=\"th_wraper\">\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                  <div class=\"filter_three_dot_wrapper\">\r\n                    <span class=\"resize-handle default_cursor\"> | </span>\r\n                  </div>\r\n                </div>\r\n              </th>\r\n            }\r\n            <!-- @else{\r\n          <th></th>\r\n          }  -->\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            }\r\n            @for (col of colDefs; track col.colId) {\r\n              <th\r\n                [ngStyle]=\"getStyle(col, 'action')\"\r\n                [ngClass]=\"{\r\n                  'drag-over': dragOverIndex === $index,\r\n                  pinned_column: col.leftPinned || col.rightPinned,\r\n                }\"\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                    <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n                    @if (\r\n                      sortingRequired &&\r\n                      sortingColumnIndex == $index &&\r\n                      col?.sortable &&\r\n                      !col.isAction\r\n                    ) {\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                        }\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                  </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                        }\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                              <lib-common-input\r\n                                [options]=\"filterOptions\"\r\n                                [selectedValue]=\"col.filters[0].filterOperation\"\r\n                                placeholder=\"Select filter\"\r\n                                (valueChange)=\"\r\n                                  col.filters[0].filterOperation = $event\r\n                                \"\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.filters[0].filterValue\"\r\n                                  (keyup)=\"applyAllFilters()\"\r\n                                />\r\n                              </div>\r\n\r\n                              <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.filters[0].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                              @if (col.filters[0].filterValue) {\r\n                                <div class=\"logic-row radio_option\">\r\n                                  <input\r\n                                    type=\"radio\"\r\n                                    name=\"filterLogic{{ col.fieldName }}\"\r\n                                    [(ngModel)]=\"col.filterLogic\"\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=\"filterLogic{{ col.fieldName }}\"\r\n                                    [(ngModel)]=\"col.filterLogic\"\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.filters[1].filterOperation\"\r\n                                  placeholder=\"Select filter\"\r\n                                  (valueChange)=\"\r\n                                    col.filters[1].filterOperation = $event\r\n                                  \"\r\n                                ></lib-common-input>\r\n                                <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.filters[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.filters[1].filterValue\"\r\n                                    (keyup)=\"applyAllFilters()\"\r\n                                  />\r\n                                </div>\r\n                              }\r\n                            }\r\n\r\n                            <!-- Number Filter -->\r\n                            @if (col.filterType === \"number\") {\r\n                              <lib-common-input\r\n                                [options]=\"numberFilterOptions\"\r\n                                [selectedValue]=\"col.filters[0].filterOperation\"\r\n                                placeholder=\"Select filter\"\r\n                                (valueChange)=\"\r\n                                  col.filters[0].filterOperation = $event\r\n                                \"\r\n                              ></lib-common-input>\r\n\r\n                              <!-- <input\r\n                      type=\"number\"\r\n                      [(ngModel)]=\"col.filters[0].filterValue\"\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.filters[0].filterValue\"\r\n                                  (input)=\"applyAllFilters()\"\r\n                                />\r\n                              </div>\r\n\r\n                              @if (col.filters[0].filterValue) {\r\n                                <div class=\"logic-row radio_option\">\r\n                                  <input\r\n                                    type=\"radio\"\r\n                                    name=\"filterLogic{{ col.fieldName }}\"\r\n                                    [(ngModel)]=\"col.filterLogic\"\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=\"filterLogic{{ col.fieldName }}\"\r\n                                    [(ngModel)]=\"col.filterLogic\"\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.filters[1].filterOperation\"\r\n                                  placeholder=\"Select filter\"\r\n                                  (valueChange)=\"\r\n                                    col.filters[1].filterOperation = $event\r\n                                  \"\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.filters[1].filterValue\"\r\n                                    (keyup)=\"applyAllFilters()\"\r\n                                  />\r\n                                </div>\r\n                                <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.filters[1].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n                              }\r\n                            }\r\n\r\n                            <!-- DATE FILTER -->\r\n                            @if (col.filterType === \"date\") {\r\n                              <lib-common-input\r\n                                [options]=\"numberFilterOptions\"\r\n                                [selectedValue]=\"col.filters[0].filterOperation\"\r\n                                placeholder=\"Select filter\"\r\n                                (valueChange)=\"\r\n                                  col.filters[0].filterOperation = $event\r\n                                \"\r\n                              ></lib-common-input>\r\n\r\n                              <!-- <input\r\n                      type=\"date\"\r\n                      [(ngModel)]=\"col.filters[0].filterValue\"\r\n                      (change)=\"applyAllFilters()\"\r\n                    /> -->\r\n                              <lib-common-calendar\r\n                                [dateConfig]=\"dateConfig\"\r\n                                [(ngModel)]=\"col.filters[0].filterValue\"\r\n                                (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                              ></lib-common-calendar>\r\n\r\n                              @if (col.filters[0].filterValue) {\r\n                                <div class=\"logic-row radio_option\">\r\n                                  <input\r\n                                    type=\"radio\"\r\n                                    name=\"filterLogic{{ col.fieldName }}\"\r\n                                    [(ngModel)]=\"col.filterLogic\"\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=\"filterLogic{{ col.fieldName }}\"\r\n                                    [(ngModel)]=\"col.filterLogic\"\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.filters[1].filterOperation\"\r\n                                  placeholder=\"Select filter\"\r\n                                  (valueChange)=\"\r\n                                    col.filters[1].filterOperation = $event\r\n                                  \"\r\n                                ></lib-common-input>\r\n\r\n                                <lib-common-calendar\r\n                                  [dateConfig]=\"dateConfig\"\r\n                                  [(ngModel)]=\"col.filters[1].filterValue\"\r\n                                  (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                                ></lib-common-calendar>\r\n                              }\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=\"table_scroll\">\r\n                                  @for (\r\n                                    opt of col.filteredOptions;\r\n                                    track $index\r\n                                  ) {\r\n                                    <label class=\"checkbox_container\">\r\n                                      <input\r\n                                        type=\"checkbox\"\r\n                                        [checked]=\"col.selectedValues.has(opt)\"\r\n                                        (change)=\"\r\n                                          toggleSetOption(col, opt, $event)\r\n                                        \"\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                        <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=\"table_scroll\">\r\n                      @if (\r\n                        sortingType[$index] === \"dsc\" ||\r\n                        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                      }\r\n                      @if (\r\n                        sortingType[$index] === \"asc\" ||\r\n                        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                      }\r\n                      @if (\r\n                        sortingType[$index] === \"asc\" ||\r\n                        sortingType[$index] === \"dsc\"\r\n                      ) {\r\n                        <div\r\n                          class=\"right_click_item\"\r\n                          (click)=\"onSort(col, '', $index)\"\r\n                        >\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 (\r\n                                    (pinActionClicked[col.colId] ?? \"none\") ===\r\n                                    \"none\"\r\n                                  ) {\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\r\n                        class=\"right_click_item\"\r\n                        [ngClass]=\"{ disabled_option: !groupByRequired }\"\r\n                      >\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) {\r\n            @for (group of 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) {\r\n                  @for (child of group.children; track 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\r\n                <!-- CASE 2: CHILDREN ARE RAW ROWS -->\r\n                @if (!group.children[0]?.children) {\r\n                  @for (row of group.children; track 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                      }\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\r\n                          [ngStyle]=\"getStyle(col)\"\r\n                          [ngClass]=\"[\r\n                            col?.addClass ? col.addClass(row) : '',\r\n                            col.leftPinned || col.rightPinned\r\n                              ? 'pinned_column'\r\n                              : '',\r\n                          ]\"\r\n                        >\r\n                          <!-- {{ row[col.fieldName] }} -->\r\n                          @if (!col?.cellRenderer) {\r\n                            <div class=\"cell-value ellipsis\">\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=\"table_scroll\">\r\n                                <div class=\"item\">\r\n                                  <span class=\"desc\">\r\n                                    {{ parseColValue(row, col) }}</span\r\n                                  >\r\n                                </div>\r\n                              </div>\r\n                            </div>\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                }\r\n              }\r\n            }\r\n          } @else {\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 class=\"checkbox_container\"\r\n                        ><input\r\n                          type=\"checkbox\"\r\n                          class=\"pointer\"\r\n                          name=\"\"\r\n                          id=\"{{ data.rowId }}\"\r\n                          [disabled]=\"data.isLocked\"\r\n                          [checked]=\"data.isSelected || data.isLocked\"\r\n                          (change)=\"onRowCheckboxSelection($event)\"\r\n                      /></span>\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                  </td>\r\n                }\r\n                @for (col of colDefs; track col.colId) {\r\n                  <td\r\n                    [ngStyle]=\"getStyle(col)\"\r\n                    [ngClass]=\"[\r\n                      col?.addClass ? col.addClass(data) : '',\r\n                      col.leftPinned || col.rightPinned ? 'pinned_column' : '',\r\n                    ]\"\r\n                  >\r\n                    @if (!col?.cellRenderer) {\r\n                      <div class=\"cell-value ellipsis\">\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=\"table_scroll\">\r\n                          <div class=\"item\">\r\n                            <span class=\"desc\">\r\n                              {{ parseColValue(data, col) }}</span\r\n                            >\r\n                          </div>\r\n                        </div>\r\n                      </div>\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            }\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            <!-- CASE: more groups -->\r\n            @if (node.children[0]?.children) {\r\n              @for (child of node.children; track 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\r\n            <!-- CASE: final rows -->\r\n            @if (!node.children[0]?.children) {\r\n              @for (row of node.children; track 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                  }\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\r\n                      [ngStyle]=\"getStyle(col)\"\r\n                      [ngClass]=\"[\r\n                        col.leftPinned || col.rightPinned ? 'pinned_column' : '',\r\n                      ]\"\r\n                    >\r\n                      <!-- {{ row[col.fieldName] }} -->\r\n                      @if (!col?.cellRenderer) {\r\n                        <div class=\"cell-value ellipsis\">\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=\"table_scroll\">\r\n                            <div class=\"item\">\r\n                              <span class=\"desc\">\r\n                                {{ parseColValue(row, col) }}</span\r\n                              >\r\n                            </div>\r\n                          </div>\r\n                        </div>\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            }\r\n          }\r\n        </ng-template>\r\n      </table>\r\n\r\n      @if (\r\n        (!rowData || rowData.length === 0) &&\r\n        (!groupedResult || groupedResult.length === 0)\r\n      ) {\r\n        <div class=\"empty_overlay\">\r\n          <div class=\"empty_content\">\r\n            @if (tableOptions?.noDataTemplate) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\r\n              ></ng-container>\r\n            } @else {\r\n              <span>No Data To Show</span>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\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 |\r\n          {{ totalRecords > 0 ? convertToNumber(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 disable_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\r\n              ? ''\r\n              : '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 disable_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;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}.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-300);border-color:var(--neutral-300)}.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);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.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);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));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:1;left: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:start;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-word}.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:separate;border-spacing:0;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:20}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--neutral-500);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table td.pinned_column,.tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value.ellipsis,.tableArea .table_wrapper table td .cell-value .ellipsis,.tableArea .table_wrapper table th .cell-value.ellipsis,.tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.tableArea .table_wrapper table td .cell-value.ellipsis:hover .see_more_data,.tableArea .table_wrapper table th .cell-value.ellipsis:hover .see_more_data{display:flex}.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;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.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));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;background-color:var(--neutral-50)}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover,.tableArea .table_wrapper table tbody tr:hover td{background-color:var(--blue-50)!important}.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:hover{background-color:var(--blue-50)!important}.tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.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))}.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 :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .resize-handle{color:var(--neutral-200);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.active_filters_container{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale))}.active_filters_container .active_filter_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:wrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--neutral-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale))}.active_filters_container .active_filter_tag .active_filter_label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;max-width:calc(29.1666666667rem / var(--scale))}.active_filters_container .active_filter_tag .filter_logic{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:var(--neutral-400)}.active_filters_container .active_filter_tag .filter_value{padding-left:calc(.3333333333rem / var(--scale))}.active_filters_container .active_filter_tag .remove_filter_btn{border:0;background-color:transparent;cursor:pointer}.active_filters_container .active_filter_tag .remove_filter_btn img{max-width:calc(1.3333333333rem / var(--scale))}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.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 .pagination_form .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}.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)}.d-none{display:none}.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}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--neutral-50);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.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.disabled_option{opacity:.4;pointer-events:none}.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)}.table_wrapper{position:relative;overflow:auto}.table_wrapper.no-horizontal-scroll{overflow-x:hidden!important}.table_inner_wrapper{position:relative;min-height:100%}.empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.empty_content{max-width:100%;text-align:center}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { tableOptions: [{
+                    ], template: "<div class=\"tableArea\" #table>\n  @if (settingsRequired && settingsClicked) {\n    <div\n      class=\"setting_options\"\n      appOutsideClick\n      (clickOutside)=\"hideSettings()\"\n    >\n      <div class=\"column_header\">Select Headers</div>\n      <div class=\"checkbox_container\">\n        <input\n          class=\"custom_check_box\"\n          type=\"checkbox\"\n          [checked]=\"activeAll\"\n          (change)=\"activeAllSelection($event)\"\n        />\n        <span>Select All</span>\n      </div>\n\n      <div class=\"item_container\" id=\"table_scroll\">\n        @for (col of colDefs; track col.colId) {\n          <div class=\"column_item checkbox_container\">\n            <input\n              class=\"custom_check_box\"\n              type=\"checkbox\"\n              [checked]=\"col.active\"\n              (change)=\"changeActiveColSelection($event, col)\"\n              [disabled]=\"col.headerLocked\"\n            />\n            <span>{{ col.headerName | titlecase }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (groupByRequired) {\n    <!-- Group Panel -->\n    <div\n      class=\"group_panel\"\n      (dragover)=\"onGroupDragOver($event)\"\n      (drop)=\"onGroupDrop($event)\"\n    >\n      <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n      @for (g of activeGroups; track $index) {\n        <div\n          class=\"group_tag\"\n          draggable=\"true\"\n          (dragstart)=\"onGroupDragStart($event, $index)\"\n          (dragover)=\"onActiveDragOver($event, $index)\"\n          (drop)=\"onActiveGroupDrop($event, $index)\"\n        >\n          <img src=\"images/t-gripper.svg\" alt=\"\" />\n          <span>{{ g.headerName }}</span>\n          <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\n            <img src=\"images/t-x.svg\" alt=\"\" />\n          </button>\n        </div>\n        <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n      }\n      @if (activeGroups.length === 0) {\n        <div class=\"group_placeholder\">Drag here to set row groups</div>\n      }\n    </div>\n  }\n  @if (activeFilters.size > 0) {\n    <div class=\"active_filters_container\">\n      <div class=\"tag_wrapper\">\n        @for (filter of appliedFilters; track filter.fieldName) {\n          <div class=\"active_filter_tag\">\n            <div class=\"active_filter_label ellipsis\">\n              @for (item of filter.filters; track $index) {\n                @if (item.filterValue) {\n                  @if ($index > 0 && item.filterValue) {\n                    <span class=\"filter_logic\"> {{ filter.filterLogic }} </span>\n                  }\n                  <span class=\"filter_field\">{{ filter.fieldName }}:</span>\n                  <span class=\"\"> {{ item.filterOperation }}</span>\n                  <span class=\"filter_value\">{{ item.filterValue }}</span>\n                }\n              }\n            </div>\n            <button\n              class=\"remove_filter_btn\"\n              (click)=\"removeActiveFilter(filter)\"\n            >\n              <img src=\"images/t-x.svg\" alt=\"\" />\n            </button>\n          </div>\n        }\n      </div>\n      <div class=\"clear_all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n    </div>\n  }\n  <div\n    class=\"table_wrapper global\"\n    id=\"table_scroll\"\n    #parent\n    (scroll)=\"infinityScroll($event)\"\n    [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n    [class.no-horizontal-scroll]=\"\n      (!rowData || rowData.length === 0) &&\n      (!groupedResult || groupedResult.length === 0)\n    \"\n  >\n    <div class=\"table-inner-wrapper\">\n      <table cellspacing=\"0\" cellpadding=\"0\">\n        <thead class=\"sticky-top\">\n          <tr>\n            @if (\n              checkBoxSelection &&\n              checkboxSelectionType == \"multiple\" &&\n              atLeastOneColumnChecked\n            ) {\n              <th style=\"min-width: 50px; width: 50px\">\n                <div class=\"th_wraper\">\n                  <span class=\"checkbox_container\"\n                    ><input\n                      class=\"pointer custom_check_box\"\n                      type=\"checkbox\"\n                      name=\"\"\n                      id=\"\"\n                      [checked]=\"checkAllSelected()\"\n                      [indeterminate]=\"checkInterminate()\"\n                      (change)=\"onHeaderCheckboxChange($event)\"\n                  /></span>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <span class=\"resize-handle default_cursor\"> | </span>\n                  </div>\n                </div>\n              </th>\n            }\n            @else{\n          <th></th>\n          } \n            @if (activeGroups.length > 0) {\n              <th class=\"active_group\">\n                <div class=\"th_wraper\">\n                  <div class=\"text_wrapper\">\n                    <span class=\"ellipsis headerName\">Group</span>\n                  </div>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <div class=\"three-dots\">\n                      <img src=\"images/t-more-vertical.svg\" />\n                    </div>\n                  </div>\n                </div>\n              </th>\n            }\n            @for (col of colDefs; track col.colId) {\n              @if (col.active) {\n                <th\n                  [ngStyle]=\"getStyle(col, 'action')\"\n                  [ngClass]=\"{\n                    'drag-over': dragOverIndex === $index,\n                    pinned_column: col.leftPinned || col.rightPinned,\n                  }\"\n                  (dragover)=\"onDragOver($event, $index)\"\n                  (drop)=\"onDrop($event, $index)\"\n                  (mouseenter)=\"onMouseEnterHeader($index)\"\n                  (mouseleave)=\"onMouseLeaveHeader($index)\"\n                >\n                  <div class=\"th_wraper\">\n                    <div\n                      class=\"text_wrapper\"\n                      [ngStyle]=\"getStyle(col, 'action')\"\n                      (click)=\"onSortingRowData($index, col)\"\n                    >\n                      @if (showMoveIcon[$index] && !col.isAction) {\n                        <img\n                          src=\"images/t-move.svg\"\n                          class=\"move-icon\"\n                          [draggable]=\"!isResizing || columnDraggable[$index]\"\n                          (dragstart)=\"onDragStart($event, $index)\"\n                          (dragend)=\"onDragEnd()\"\n                          (mouseenter)=\"enableColumnDrag($event, $index)\"\n                          (mouseleave)=\"disableColumnDrag($event, $index)\"\n                        />\n                      }\n                      <span class=\"ellipsis headerName\">{{\n                        col?.headerName\n                      }}</span>\n\n                      @if (\n                        sortingRequired &&\n                        sortingColumnIndex == $index &&\n                        col?.sortable &&\n                        !col.isAction\n                      ) {\n                        <span class=\"sorting_icon\">\n                          @if (sortingType[$index] === \"asc\") {\n                            <img\n                              src=\"images/t-arrow-up.svg\"\n                              class=\"sorting_up\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                          @if (sortingType[$index] === \"dsc\") {\n                            <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n                            <img\n                              src=\"images/t-arrow-down.svg\"\n                              class=\"sorting_down\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                        </span>\n                      }\n                    </div>\n                    <div class=\"filter_three_dot_wrapper\">\n                      <!-- Column Filters Logic-->\n                      @if (filterRequired && col.filterable) {\n                        <div\n                          #trigger\n                          class=\"filters\"\n                          (click)=\"toggleFilter(col, $index, $event)\"\n                        >\n                          @if (activeFilters.has(col.fieldName)) {\n                            <img\n                              src=\"images/t-filter-applied.svg\"\n                              class=\"filter-icon\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          } @else {\n                            <img\n                              src=\"images/t-filter.svg\"\n                              class=\"filter-icon\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                          @if (activeFilterIndex === $index) {\n                            <div class=\"filt_wrap\">\n                              <div\n                                adaptivePosition\n                                [trigger]=\"trigger\"\n                                [parentContainer]=\"parent\"\n                                [matchWidth]=\"false\"\n                                class=\"filter_wrapper\"\n                                id=\"filter_wrapper-{{ $index }}\"\n                                (click)=\"$event.stopPropagation()\"\n                                appOutsideClick\n                                (clickOutside)=\"onClickOutside()\"\n                              >\n                                <!-- Text Filter -->\n                                @if (col.filterType === \"text\") {\n                                  <lib-common-input\n                                    [options]=\"filterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"text\"\n                                      placeholder=\"Filter\"\n                                      [(ngModel)]=\"col.filters[0].filterValue\"\n                                      (keyup)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"filterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n                                    <!-- <input\n                         type=\"text\"\n                         [(ngModel)]=\"col.filters[1].filterValue\"\n                         placeholder=\"Filter\u2026\"\n                         (keyup)=\"applyAllFilters()\"\n                       /> -->\n\n                                    <div class=\"search_input\">\n                                      <img src=\"images/search.svg\" alt=\"\" />\n                                      <input\n                                        type=\"text\"\n                                        placeholder=\"Filter\"\n                                        [(ngModel)]=\"col.filters[1].filterValue\"\n                                        (keyup)=\"applyAllFilters()\"\n                                      />\n                                    </div>\n                                  }\n                                }\n\n                                <!-- Number Filter -->\n                                @if (col.filterType === \"number\") {\n                                  <lib-common-input\n                                    [options]=\"numberFilterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <!-- <input\n                         type=\"number\"\n                         [(ngModel)]=\"col.filters[0].filterValue\"\n                         (input)=\"applyAllFilters()\"\n                       /> -->\n\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"number\"\n                                      placeholder=\"Filter\"\n                                      [(ngModel)]=\"col.filters[0].filterValue\"\n                                      (input)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"numberFilterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n\n                                    <div class=\"search_input\">\n                                      <img src=\"images/search.svg\" alt=\"\" />\n                                      <input\n                                        type=\"text\"\n                                        placeholder=\"Filter\"\n                                        [(ngModel)]=\"col.filters[1].filterValue\"\n                                        (keyup)=\"applyAllFilters()\"\n                                      />\n                                    </div>\n                                    <!-- <input\n                         type=\"text\"\n                         [(ngModel)]=\"col.filters[1].filterValue\"\n                         placeholder=\"Filter\u2026\"\n                         (keyup)=\"applyAllFilters()\"\n                       /> -->\n                                  }\n                                }\n\n                                <!-- DATE FILTER -->\n                                @if (col.filterType === \"date\") {\n                                  <lib-common-input\n                                    [options]=\"numberFilterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <!-- <input\n                         type=\"date\"\n                         [(ngModel)]=\"col.filters[0].filterValue\"\n                         (change)=\"applyAllFilters()\"\n                       /> -->\n                                  <lib-common-calendar\n                                    [dateConfig]=\"dateConfig\"\n                                    [(ngModel)]=\"col.filters[0].filterValue\"\n                                    [preSelectedValue]=\"\n                                      col.filters[0].filterValue\n                                    \"\n                                    (dateTimeSelected)=\"\n                                      dateTimeSelected($event)\n                                    \"\n                                  ></lib-common-calendar>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"numberFilterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n\n                                    <lib-common-calendar\n                                      [dateConfig]=\"dateConfig\"\n                                      [(ngModel)]=\"col.filters[1].filterValue\"\n                                      [preSelectedValue]=\"\n                                        col.filters[1].filterValue\n                                      \"\n                                      (dateTimeSelected)=\"\n                                        dateTimeSelected($event)\n                                      \"\n                                    ></lib-common-calendar>\n                                  }\n                                }\n\n                                <!-- SET FILTER (CHECKBOX LIST) -->\n                                @if (col.filterType === \"set\") {\n                                  <!-- <input\n                         type=\"text\"\n                         placeholder=\"Search...\"\n                         (input)=\"filterSetOptions(col, $event)\"\n                       /> -->\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"text\"\n                                      placeholder=\"Search...\"\n                                      (input)=\"filterSetOptions(col, $event)\"\n                                    />\n                                  </div>\n\n                                  <div class=\"set_option_details\">\n                                    <label class=\"checkbox_container\">\n                                      <input\n                                        class=\"custom_check_box\"\n                                        type=\"checkbox\"\n                                        [checked]=\"isAllSelected(col)\"\n                                        (change)=\"toggleSelectAll(col, $event)\"\n                                      />\n                                      (Select All)\n                                    </label>\n                                    <div class=\"set_options\" id=\"table_scroll\">\n                                      @for (\n                                        opt of col.filteredOptions;\n                                        track $index\n                                      ) {\n                                        <label class=\"checkbox_container\">\n                                          <input\n                                            class=\"custom_check_box\"\n                                            type=\"checkbox\"\n                                            [checked]=\"\n                                              col.selectedValues.has(opt)\n                                            \"\n                                            (change)=\"\n                                              toggleSetOption(col, opt, $event)\n                                            \"\n                                          />\n                                          {{ opt }}\n                                        </label>\n                                      }\n                                    </div>\n                                  </div>\n                                }\n                                <div class=\"filter_btn\">\n                                  <button\n                                    class=\"reset_btn\"\n                                    type=\"button\"\n                                    (click)=\"resetFilter(col)\"\n                                  >\n                                    Reset\n                                  </button>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      <!-- Three dots menu-->\n                      <div #triggerColMenu>\n                        @if (threeDotsMenuRequired && col.columnAction) {\n                          <div\n                            class=\"three-dots\"\n                            (click)=\"openMenu($event, col, $index)\"\n                          >\n                            <img\n                              src=\"images/t-more-vertical.svg\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          </div>\n                        }\n                      </div>\n                      @if (!col.isAction) {\n                        <span\n                          class=\"resize-handle\"\n                          (mousedown)=\"startResize($event, $index)\"\n                        >\n                          |\n                        </span>\n                      }\n                    </div>\n                  </div>\n\n                  <!-- popup open -->\n                  @if (menuVisible[$index]) {\n                    <div\n                      #colActionMenu\n                      class=\"dropdown_wrapper\"\n                      adaptivePosition\n                      [trigger]=\"triggerColMenu\"\n                      [parentContainer]=\"parent\"\n                      [matchWidth]=\"false\"\n                      [isColumnActionMenu]=\"true\"\n                      (click)=\"$event.stopPropagation()\"\n                      appOutsideClick\n                      (clickOutside)=\"onClickOutside()\"\n                    >\n                      <div class=\"right_click_dropdown\" id=\"table_scroll\">\n                        @if (\n                          sortingType[$index] === \"dsc\" ||\n                          sortingType[$index] === \"\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, 'asc', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img\n                                src=\"images/arrow-up.svg\"\n                                class=\"sorting_up\"\n                                [ngClass]=\"{ disable: !col.sortable }\"\n                              />\n                              <span class=\"text\">Sort Ascending</span>\n                            </div>\n                          </div>\n                        }\n                        @if (\n                          sortingType[$index] === \"asc\" ||\n                          sortingType[$index] === \"\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, 'dsc', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img src=\"images/arrow-down.svg\" />\n                              <span class=\"text\">Sort Descending</span>\n                            </div>\n                          </div>\n                        }\n                        @if (\n                          sortingType[$index] === \"asc\" ||\n                          sortingType[$index] === \"dsc\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, '', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img src=\"images/trash-2.svg\" />\n                              <span class=\"text\">Clear Sort</span>\n                            </div>\n                          </div>\n                        }\n                        <div class=\"divder\"></div>\n\n                        <div\n                          class=\"right_click_item\"\n                          (mouseenter)=\"showPinActions($event)\"\n                          (mouseleave)=\"hidePinActions()\"\n                        >\n                          <div class=\"left_item\">\n                            <img src=\"images/pin.svg\" />\n                            <span class=\"text\">Pin Column</span>\n                          </div>\n                          <div class=\"right_item\">\n                            <img src=\"images/chevron-right.svg\" />\n                            @if (showPin) {\n                              <div class=\"second_dropdown\" #pinMenu>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'none')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      (pinActionClicked[col.colId] ??\n                                        \"none\") === \"none\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">No Pin</span>\n                                  </div>\n                                </div>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'left')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      pinActionClicked[col.colId] === \"left\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">Pin Left</span>\n                                  </div>\n                                </div>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'right')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      pinActionClicked[col.colId] === \"right\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">Pin Right</span>\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n\n                        <!-- <div\n                       class=\"right_click_item\"\n                       (click)=\"pinColumn(col, $index, 'left')\"\n                     >\n                       <div class=\"left_item\">\n                         <img src=\"images/pin.svg\" />\n                         <span class=\"text\">{{\n                           col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n                         }}</span>\n                       </div>\n                     </div>\n                     <div\n                       class=\"right_click_item\"\n                       (click)=\"pinColumn(col, $index, 'right')\"\n                     >\n                       <div class=\"left_item\">\n                         <img src=\"images/pin.svg\" />\n                         <span class=\"text\">\n                           {{\n                             col.rightPinned\n                               ? \"Unpin Right Column\"\n                               : \"Pin Column Right\"\n                           }}\n                         </span>\n                       </div>\n                       <div class=\"right_item\">\n                         <img src=\"images/arrow-right.svg\" alt=\"\" />\n                       </div>\n                     </div> -->\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Autosize This Column</span>\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Autosize All Columns</span>\n                          </div>\n                        </div>\n                        <div\n                          class=\"right_click_item\"\n                          [ngClass]=\"{ disabled_option: !groupByRequired }\"\n                        >\n                          <div\n                            class=\"left_item\"\n                            (click)=\"groupByColumnAction(col, $index)\"\n                          >\n                            <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n                            <span class=\"text\"\n                              >Group by {{ col.headerName }}</span\n                            >\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"images/t-choose-column.svg\" alt=\"\" />\n                            <span class=\"text\">Choose Columns</span>\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Reset Columns</span>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @if (groupedResult && groupedResult.length > 0) {\n            @for (group of groupedResult; track group.key) {\n              <tr (click)=\"toggleGroup(group)\">\n                <td\n                  class=\"group-cell\"\n                  [attr.colspan]=\"\n                    colDefs.length +\n                    (checkBoxSelection ? 1 : 0) +\n                    (activeGroups.length > 0 ? 1 : 0)\n                  \"\n                >\n                  <span class=\"group-toggle\">\n                    <img\n                      src=\"images/{{\n                        group.expanded\n                          ? 'chevron-down.svg'\n                          : 'chevron-right.svg'\n                      }}\"\n                    />\n                    {{ group.key }} ({{ group.children.length }})\n                  </span>\n                </td>\n              </tr>\n\n              @if (group.expanded) {\n                <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n                @if (group.children[0]?.children) {\n                  @for (child of group.children; track child.key) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"groupTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: child,\n                        colDefs: colDefs,\n                        checkBoxSelection: checkBoxSelection,\n                        activeGroups: activeGroups,\n                        level: 1,\n                      }\"\n                    ></ng-container>\n                  }\n                }\n\n                <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n                @if (!group.children[0]?.children) {\n                  @for (row of group.children; track row.rowId) {\n                    <tr [ngClass]=\"row | addClass: tableOptions\">\n                      <!-- Checkbox column if any -->\n                      @if (checkBoxSelection) {\n                        <td>\n                          <span class=\"checkbox_container\">\n                            <input\n                              class=\"custom_check_box\"\n                              type=\"checkbox\"\n                              [checked]=\"row.isSelected\"\n                          /></span>\n                        </td>\n                      }\n                      @if (activeGroups.length > 0) {\n                        <td class=\"group-placeholder\"></td>\n                      }\n\n                      <!-- Render columns -->\n                      @for (col of colDefs; track col.colId) {\n                        <td\n                          [ngStyle]=\"getStyle(col)\"\n                          [ngClass]=\"[\n                            col?.addClass ? col.addClass(row) : '',\n                            col.leftPinned || col.rightPinned\n                              ? 'pinned_column'\n                              : '',\n                          ]\"\n                        >\n                          <!-- {{ row[col.fieldName] }} -->\n                          @if (!col?.cellRenderer) {\n                            <div class=\"cell-value ellipsis\">\n                              <div\n                                class=\"more_data_wrapper\"\n                                [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                              >\n                                {{ parseColValue(row, col) }}\n                              </div>\n                              <div class=\"see_more_data\" id=\"table_scroll\">\n                                <div class=\"item\">\n                                  <span class=\"desc\">\n                                    {{ parseColValue(row, col) }}</span\n                                  >\n                                </div>\n                              </div>\n                            </div>\n                          } @else {\n                            <div\n                              [rowParam]=\"row\"\n                              [col]=\"col\"\n                              [api]=\"tableOptions\"\n                              [currentValue]=\"row[col.fieldName]\"\n                              appRendererParser\n                            ></div>\n                          }\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n              }\n            }\n          } @else {\n            @for (data of rowData; track data.rowId) {\n              <tr\n                [ngClass]=\"data | addClass: tableOptions\"\n                (dragover)=\"allowRowDrop($event)\"\n                (drop)=\"dropRow(data)\"\n                (click)=\"onRowClick(data)\"\n              >\n                @if (checkBoxSelection && atLeastOneColumnChecked) {\n                  <td style=\"min-width: 50px\">\n                    @if (checkboxSelectionType == \"multiple\") {\n                      <span class=\"checkbox_container\"\n                        ><input\n                          type=\"checkbox\"\n                          class=\"pointer custom_check_box\"\n                          name=\"\"\n                          id=\"{{ data.rowId }}\"\n                          [disabled]=\"data.isLocked\"\n                          [checked]=\"data.isSelected || data.isLocked\"\n                          (change)=\"onRowCheckboxSelection($event)\"\n                      /></span>\n                    } @else {\n                      <span class=\"radio_option\">\n                        <input\n                          type=\"radio\"\n                          name=\"\"\n                          id=\"{{ data.rowId }}\"\n                          [checked]=\"data?.isSelected\"\n                          (change)=\"onRowCheckboxSelection($event)\"\n                        />\n                        <label [for]=\"data.rowId\"></label>\n                      </span>\n                    }\n                  </td>\n                }\n                @for (col of colDefs; track col.colId) {\n                  @if (col.active) {\n                    <td (click)=\"onCellClick(data, col)\"\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col?.addClass ? col.addClass(data) : '',\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : '',\n                      ]\"\n                      class=\"table_cell\"\n                    >\n                      <div class=\"col_wrapper\">\n                        @if (\n                          rowGripFieldName &&\n                          rowGripFieldName === col?.fieldName\n                        ) {\n                          <div\n                            [draggable]=\"true\"\n                            (dragstart)=\"dragRow($event, data)\"\n                            class=\"gripper\"\n                          >\n                            <img src=\"images/gripper.svg\" />\n                          </div>\n                        }\n\n                        @if (!col?.cellRenderer) {\n                          <div class=\"cell-value ellipsis\">\n                            <div\n                              class=\"more_data_wrapper\"\n                              [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                            >\n                              {{ parseColValue(data, col) }}\n                            </div>\n                            <div class=\"see_more_data\" id=\"table_scroll\">\n                              <div class=\"item\">\n                                <span class=\"desc\">\n                                  {{ parseColValue(data, col) }}</span\n                                >\n                              </div>\n                            </div>\n                          </div>\n                        } @else {\n                          <div\n                            [rowParam]=\"data\"\n                            [col]=\"col\"\n                            [api]=\"tableOptions\"\n                            [currentValue]=\"data[col.fieldName]\"\n                            appRendererParser\n                          ></div>\n                        }\n                      </div>\n                      <!-- Commented for later use -->\n                      <!-- <div class=\"tool_tip\">\n                <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n              </div> -->\n                    </td>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tbody>\n\n        <ng-template\n          #groupTemplate\n          let-node\n          let-colDefs=\"colDefs\"\n          let-checkBoxSelection=\"checkBoxSelection\"\n          let-activeGroups=\"activeGroups\"\n          let-level=\"level\"\n        >\n          <!-- GROUP HEADER -->\n          <tr (click)=\"toggleGroup(node)\">\n            <td\n              [attr.colspan]=\"\n                colDefs.length +\n                (checkBoxSelection ? 1 : 0) +\n                (activeGroups.length > 0 ? 1 : 0)\n              \"\n              [style.paddingLeft.px]=\"level * 20\"\n              class=\"group-cell\"\n            >\n              <span class=\"group-toggle\">\n                <img\n                  src=\"images/{{\n                    node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n                  }}\"\n                />\n                {{ node.key }} ({{ node.children.length }})\n              </span>\n            </td>\n          </tr>\n\n          <!-- CHILDREN -->\n          @if (node.expanded) {\n            <!-- CASE: more groups -->\n            @if (node.children[0]?.children) {\n              @for (child of node.children; track child.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"groupTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: child,\n                    colDefs: colDefs,\n                    checkBoxSelection: checkBoxSelection,\n                    activeGroups: activeGroups,\n                    level: level + 1,\n                  }\"\n                >\n                </ng-container>\n              }\n            }\n\n            <!-- CASE: final rows -->\n            @if (!node.children[0]?.children) {\n              @for (row of node.children; track row.rowId) {\n                <tr [ngClass]=\"row | addClass: tableOptions\">\n                  <!-- Checkbox column if any -->\n                  @if (checkBoxSelection) {\n                    <td>\n                      <span class=\"checkbox_container\">\n                        <input\n                          type=\"checkbox custom_check_box\"\n                          [checked]=\"row.isSelected\"\n                      /></span>\n                    </td>\n                  }\n                  @if (activeGroups.length > 0) {\n                    <td class=\"group-placeholder\"></td>\n                  }\n\n                  <!-- Render columns -->\n                  @for (col of colDefs; track col.colId) {\n                    <td\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : '',\n                      ]\"\n                    >\n                      <!-- {{ row[col.fieldName] }} -->\n                      @if (!col?.cellRenderer) {\n                        <div class=\"cell-value ellipsis\">\n                          <div\n                            class=\"more_data_wrapper\"\n                            [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                          >\n                            {{ parseColValue(row, col) }}\n                          </div>\n                          <div class=\"see_more_data\" id=\"table_scroll\">\n                            <div class=\"item\">\n                              <span class=\"desc\">\n                                {{ parseColValue(row, col) }}</span\n                              >\n                            </div>\n                          </div>\n                        </div>\n                      } @else {\n                        <div\n                          [rowParam]=\"row\"\n                          [col]=\"col\"\n                          [api]=\"tableOptions\"\n                          [currentValue]=\"row[col.fieldName]\"\n                          appRendererParser\n                        ></div>\n                      }\n                    </td>\n                  }\n                </tr>\n              }\n            }\n          }\n        </ng-template>\n      </table>\n\n      @if (\n        (!rowData || rowData.length === 0) &&\n        (!groupedResult || groupedResult.length === 0)\n      ) {\n        <div class=\"empty_overlay\">\n          <div class=\"empty_content\">\n            @if (tableOptions?.noDataTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n              ></ng-container>\n            } @else {\n              <span>No Data To Show</span>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n  <!--  Table Wrapper Ends-->\n  @if (paginationRequired) {\n    <div class=\"pagination_main\">\n      <div class=\"entries_details\">\n        <span>Showing</span>\n        <div class=\"pagination_select\">\n          <div\n            class=\"select_dropdown pointer\"\n            (click)=\"showPageSizeList = !showPageSizeList\"\n          >\n            <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n            <span class=\"chevron_img\">\n              <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n            </span>\n          </div>\n          @if (showPageSizeList) {\n            <div\n              class=\"select_option\"\n              appOutsideClick\n              (clickOutside)=\"onClickOutside()\"\n            >\n              @for (option of pageSizeList; track $index) {\n                <span\n                  class=\"pointer\"\n                  (click)=\"onPageSizeChanged(option); onClickOutside()\"\n                  >{{ option }}</span\n                >\n              }\n            </div>\n          }\n        </div>\n        <span\n          >Rows |\n          {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n          {{\n            recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n          }}\n          of\n          {{ totalRecords }} Entries</span\n        >\n      </div>\n      <div class=\"pagination_form\">\n        <!-- <span>Page</span> -->\n\n        <button class=\"outlined_btn first_btn\" type=\"button\" (click)=\"onBtFirstClick()\" [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\">\n          <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n        </button>\n        <button\n          class=\"outlined_btn prev_btn\"\n          [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n          type=\"button\"\n          (click)=\"onBtPrevClick()\"\n        >\n          <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n        </button>\n        <div>\n          <input\n            class=\"input_style\"\n            type=\"number\"\n            [(ngModel)]=\"pageDetails.currentPage\"\n            (change)=\"goToSelectedPage($event)\"\n            name=\"\"\n            id=\"\"\n          />\n        </div>\n        <button\n          class=\"outlined_btn next_btn\"\n          type=\"button\"\n          [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\"\n          (click)=\"onBtNextClick()\"\n        >\n          <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n        </button>\n        <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n        <button class=\"outlined_btn last_btn\" type=\"button\" (click)=\"onBtLastClick()\"        \n          [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\">\n          <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n        </button>\n      </div>\n    </div>\n  }\n  <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"dropdown_wrapper d-none\">\n  <div class=\"right_click_dropdown\">\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/scissors.svg\" />\n        <span class=\"text\">Cut</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+X</span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+C</span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy with Headers</span>\n      </div>\n      <span class=\"right_item\"></span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy with Group Headers</span>\n      </div>\n      <span class=\"right_item\"></span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/clipboard.svg\" alt=\"\" />\n        <span class=\"text\">Paste</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+V</span>\n    </div>\n\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <img src=\"images/bar-chart.svg\" alt=\"\" />\n        <span class=\"text\">Chart</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/download.svg\" alt=\"\" />\n        <span class=\"text\">Export</span>\n      </div>\n\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Chart section Start Here -->\n  <div class=\"second_dropdown\">\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <span class=\"text\">Column</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Bar</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Pie</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Line</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Area</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">XY(Scatter)</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Polar</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Stastical</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Hierarchical</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Specialized</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Funnel</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Combination</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Export Section start Here -->\n  <div class=\"export_section d-none\">\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <img src=\"images/file.svg\" alt=\"\" />\n        <span class=\"text\">CSV Report</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/file.svg\" alt=\"\" />\n        <span class=\"text\">Excel Report</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Column Group Section Start Here -->\n  <div class=\"third_dropdown\">\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Grouped</span>\n      </div>\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Stacked</span>\n      </div>\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">100% Stacked</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.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].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{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].custom_check_box: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].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;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{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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));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:1;left: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:start;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-word}.tableArea{width:100%;height:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;position:relative}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper.tbody_height{height:calc(100% - 3.5rem / var(--scale))}.tableArea .table_wrapper table{border-collapse:separate;border-spacing:0;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:20}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--neutral-500);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table td.pinned_column,.tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value.ellipsis,.tableArea .table_wrapper table td .cell-value .ellipsis,.tableArea .table_wrapper table th .cell-value.ellipsis,.tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.tableArea .table_wrapper table td .cell-value.ellipsis:hover .see_more_data,.tableArea .table_wrapper table th .cell-value.ellipsis:hover .see_more_data{display:flex}.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;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.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:nth-last-child(2) .second_dropdown,.tableArea .table_wrapper table thead th:nth-last-child(3) .second_dropdown{right:unset;left:calc(-20.25rem / var(--scale))}.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));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;background-color:var(--neutral-50)}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover,.tableArea .table_wrapper table tbody tr:hover td{background-color:var(--blue-100)!important}.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:hover{background-color:var(--blue-100)!important}.tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td .gripper{cursor:grab}.tableArea .table_wrapper table tbody tr td .col_wrapper{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale))}.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))}.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:0;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));min-width:auto;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 .filt_wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.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{color:var(--neutral-200);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.active_filters_container{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-bottom:0}.active_filters_container .tag_wrapper{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(100% - 10.8333333333rem / var(--scale));overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.active_filters_container .tag_wrapper .active_filter_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));background-color:var(--neutral-100);border-radius:calc(2.1666666667rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .active_filter_label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;max-width:calc(29.1666666667rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .filter_logic{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:var(--neutral-400)}.active_filters_container .tag_wrapper .active_filter_tag .filter_value{padding-left:calc(.3333333333rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .remove_filter_btn{border:0;background-color:transparent;cursor:pointer;min-width:auto;width:auto;height:auto}.active_filters_container .tag_wrapper .active_filter_tag .remove_filter_btn img{max-width:calc(1.3333333333rem / var(--scale))}.active_filters_container .clear_all{font-size:var(--fs-16);line-height:calc(1.5rem / var(--scale));font-weight:500;color:var(--blue-600);cursor:pointer}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.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(--blue-100)}.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 .pagination_form .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}.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)}.d-none{display:none}.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-bottom: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}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--blue-100);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.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));right:0}.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.disabled_option{opacity:.4;pointer-events:none}.dropdown_wrapper .right_click_item:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-100)}.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(-20.25rem / 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)}.table_wrapper.no-horizontal-scroll{overflow-x:hidden!important}.table_inner_wrapper{position:relative;min-height:100%}.empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.empty_content{max-width:100%;text-align:center}.setting_options{position:absolute;background:var(--white);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);width:calc(20.8333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.setting_options .column_header{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;height:calc(2.5rem / var(--scale));color:var(--neutral-600)}.setting_options .item_container{max-height:calc(16.6666666667rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale))}.setting_options .item_container .column_item{color:var(--neutral-600);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;height:calc(1.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { pinMenu: [{
+                type: ViewChild,
+                args: ['pinMenu']
+            }], colActionMenu: [{
+                type: ViewChild,
+                args: ['colActionMenu']
+            }], table: [{
+                type: ViewChild,
+                args: ['table']
+            }], tableOptions: [{
                 type: Input
             }], totalRecords: [{
                 type: Input
@@ -2245,6 +2495,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], threeDotsMenuRequired: [{
                 type: Input
+            }], settingsRequired: [{
+                type: Input
+            }], settingsClicked: [{
+                type: Input
+            }], resetPage: [{
+                type: Input
+            }], rowId: [{
+                type: Input
             }], height: [{
                 type: Input
             }], groupByRequired: [{
@@ -2257,16 +2515,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], filter: [{
                 type: Output
+            }], onHideSettings: [{
+                type: Output
             }], pageSizeList: [{
                 type: Input
+            }], groupByField: [{
+                type: Input
             }], appliedFilters: [{
                 type: Input
+            }], rowGripFieldName: [{
+                type: Input
+            }], pageNumber: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
             }], appliedFiltersEvent: [{
                 type: Output
             }], activeGroupsEvent: [{
                 type: Output
             }], dynamicGroupingFiltering: [{
                 type: Input
+            }], onRowClicked: [{
+                type: Output
+            }], onCellClicked: [{
+                type: Output
             }] } });
 
 class CommonRendererComponent {
@@ -2276,9 +2548,16 @@ class CommonRendererComponent {
     // wrapper to access static signal easily
     activeRowId = CommonRendererComponent._activeRowId;
     activeTagId = CommonRendererComponent._activeTagId;
+    clickTimer = null;
+    clickDelay = 250;
     maxVisible = 2;
+    data;
+    paramsVal;
+    tagClasses;
     cellInit(params, data) {
         this.params = params;
+        this.data = data;
+        this.paramsVal = this.parseColValue(params.data, params.col);
     }
     /**
      * @description Returns the renderer type defined in cellRendererParams.
@@ -2345,6 +2624,7 @@ class CommonRendererComponent {
      */
     onToggle(event) {
         this.emit('onToggle', {
+            params: this.params,
             row: this.params.data,
             value: event.target.checked,
         });
@@ -2375,6 +2655,31 @@ class CommonRendererComponent {
             action,
         });
     }
+    linkSingleClick() {
+        if (this.clickTimer) {
+            clearTimeout(this.clickTimer);
+            this.clickTimer = null;
+        }
+        this.clickTimer = setTimeout(() => {
+            this.emit('onLinkClick', {
+                params: this.params,
+                row: this.params.data,
+                event: 'singleClick',
+            });
+            this.clickTimer = null;
+        }, this.clickDelay);
+    }
+    linkDoubleClick() {
+        if (this.clickTimer) {
+            clearTimeout(this.clickTimer);
+            this.clickTimer = null;
+        }
+        this.emit('onLinkClick', {
+            params: this.params,
+            row: this.params.data,
+            event: 'doubleClick',
+        });
+    }
     /**
      * @description Closes the action menu when clicking outside the component.
      * @author Anand Pandey
@@ -2390,26 +2695,7 @@ class CommonRendererComponent {
      * @returns {string[]}
      */
     get allTags() {
-        const value = this.value;
-        if (!value)
-            return [];
-        if (Array.isArray(value)) {
-            return value.map((val) => {
-                if (typeof val === 'object') {
-                    return {
-                        tagValue: val[this.params.cellParams?.tagKey],
-                        class: val['class'] || '',
-                    };
-                }
-                else {
-                    return { tagValue: String(val).trim(), class: '' };
-                }
-            });
-        }
-        else if (typeof value === 'string') {
-            return [{ tagValue: String(value).trim(), class: '' }];
-        }
-        return [{ tagValue: String(value).trim(), class: '' }];
+        return this.transformValue('tagKey', 'tagValue');
     }
     /**
      * @description Returns the subset of tags that should be visibly displayed in the UI based on maxVisible count.
@@ -2475,14 +2761,1112 @@ class CommonRendererComponent {
         }
         this.activeTagId.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CommonRendererComponent, isStandalone: true, selector: "lib-common-renderer", ngImport: i0, template: "<!-- Switch -->\r\n@if(type===\"switch\"){\r\n<div class=\"table_switch_wrapper\">\r\n  <label class=\"switch\">\r\n    <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n}\r\n\r\n<!-- Action Menu -->\r\n\r\n@if(type==='action-menu'){\r\n<div class=\"action-menu\">\r\n  <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\r\n    <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\r\n  </button>\r\n\r\n  @if(openActionMenu){\r\n  <div\r\n    class=\"menu\"\r\n    appOutsideClick\r\n    (clickOutside)=\"clickOutside($event)\"\r\n    adaptivePosition\r\n    [trigger]=\"tagTrigger\"\r\n    [isAction]=\"true\"\r\n    [matchWidth]=\"false\"\r\n  >\r\n    <div class=\"item_wrapper\" id=\"table_scroll\">\r\n      @for(act of actions; track $index){\r\n      <div\r\n        class=\"{{ 'menu_item' + ' ' + act.class }}\"\r\n        [ngClass]=\"{ disabled_item: params?.data?.disabledActions?.includes(act.label) || act.disabled }\"\r\n        (click)=\"onActionClick(act)\"\r\n      >\r\n        <img src=\"images/{{ act.icon }}.svg\" />\r\n        <span class=\"ellipsis\">{{ act.label }}</span>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n}\r\n\r\n<!-- Tags -->\r\n\r\n@if(type === 'tag'){\r\n<div\r\n  class=\"tag_wrapper\"\r\n  (mouseover)=\"toggleDropdown($event)\"\r\n  (mouseout)=\"closeDropdown($event)\"\r\n  #tagTrigger\r\n>\r\n  @for(tag of visibleTags; track $index){\r\n  <span\r\n    class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\r\n    [ngClass]=\"tag.tagValue | addClass : params.cellParams\"\r\n  >\r\n    <!-- <span class=\"circle\"></span>\r\n    <img src=\"images/home.svg\" alt=\"\" class=\"icon\" /> -->\r\n    {{ tag.tagValue }}</span\r\n  >\r\n  } @if(hiddenCount > 0){\r\n  <div class=\"hidden_list\">\r\n    <span class=\"tag_more\">+{{ hiddenCount }}</span>\r\n    @if(openDropdown){\r\n    <div\r\n      class=\"tag_dropdown\"\r\n      id=\"table_scroll\"\r\n      adaptivePosition\r\n      [trigger]=\"tagTrigger\"\r\n      [matchWidth]=\"false\"\r\n    >\r\n      @for(tag of allTags; track $index){\r\n      <div class=\"{{ 'dropdown_item' + ' ' + tag.class }}\">\r\n        {{ tag.tagValue }}\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  }\r\n</div>\r\n}\r\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}.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-300);border-color:var(--neutral-300)}.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);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.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);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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))}}.action-menu{position:relative;text-align:center}.action-menu .action_dots{background:transparent;border:none;cursor:pointer}.action-menu .action_dots img{max-width:calc(1.3333333333rem / var(--scale))}.action-menu .menu{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;width:max-content;min-width:calc(10rem / var(--scale));max-width:calc(16.6666666667rem / var(--scale));position:absolute;top:calc(.8333333333rem / var(--scale))}.action-menu .menu .item_wrapper{position:relative;max-height:calc(20rem / var(--scale));overflow-y:auto;margin:calc(.3333333333rem / var(--scale)) 0}.action-menu .menu .item_wrapper .menu_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:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer;position:relative;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.action-menu .menu .item_wrapper .menu_item.disabled_item{color:var(--neutral-300);pointer-events:none}.action-menu .menu .item_wrapper .menu_item.disabled_item img{opacity:.3}.action-menu .menu .item_wrapper .menu_item:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .tag_chip{white-space:nowrap;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip .circle{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;background-color:var(--neutral-500)}.tag_wrapper .tag_chip .circle.bg_error{background-color:var(--red-700)}.tag_wrapper .tag_chip .circle.bg_pending{background-color:var(--yellow-700)}.tag_wrapper .tag_chip .circle.bg_active{background-color:var(--green-600)}.tag_wrapper .tag_chip .circle.bg_info{background-color:var(--blue-700)}.tag_wrapper .tag_chip .suffix{order:1}.tag_wrapper .tag_chip .icon{max-width:calc(1.3333333333rem / var(--scale));max-height:calc(1.3333333333rem / var(--scale))}.tag_wrapper .hidden_list{display:flex}.tag_wrapper .hidden_list .tag_more{cursor:pointer;background-color:var(--neutral-50)}.tag_wrapper .hidden_list .tag_dropdown{position:relative;top:100%;left:0;max-width:calc(15rem / var(--scale));min-width:calc(10rem / var(--scale));max-height:calc(18.3333333333rem / var(--scale));overflow:auto;overflow-x:hidden;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) var(--box-shadow);z-index:1;padding:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tag_wrapper .hidden_list .tag_dropdown .dropdown_item{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));width:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip.active,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.active{background-color:var(--green-100);border-color:var(--green-200);color:var(--green-700)}.tag_wrapper .tag_chip.pending,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.pending{background-color:var(--yellow-100);border-color:var(--yellow-300);color:var(--yellow-700)}.tag_wrapper .tag_chip.error,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.error{background-color:var(--red-100);border-color:var(--red-300);color:var(--red-700)}.tag_wrapper .tag_chip.info,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.info{background-color:var(--blue-100);border-color:var(--blue-300);color:var(--blue-700)}.tag_wrapper .tag_chip.disable,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.disable{background-color:var(--neutral-50);border-color:var(--neutral-300);color:var(--neutral-400);cursor:not-allowed}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep td:has(.action-menu:focus-within){z-index:15!important}\n"], dependencies: [{ kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
+    /**
+     * @description Returns normalized link values derived from the cell `value`.
+     * Uses the configured `linkKey` from `cellParams` to extract display data
+     * @author Anand Pandey
+     * @returns {Array<{ linkValue: string; class: string }>} Normalized link values
+     */
+    get linkVal() {
+        return this.parseColValue(this.params.data, this.params.col);
+    }
+    /**
+     * @description Normalizes the component `value` into a consistent array structure.
+     * @author Anand Pandey
+     * @param {string} key Key in `cellParams` used to determine which field to read from object values
+     * @param {string} valueProp Property name assigned to the normalized output value
+     * @returns {Array<{ [key: string]: string; class: string }>} Array of normalized value objects
+     */
+    transformValue(key, valueProp) {
+        const value = this.value;
+        if (!value)
+            return [];
+        if (Array.isArray(value)) {
+            return value.map((val) => {
+                if (typeof val === 'object') {
+                    return {
+                        [valueProp]: val[this.params.cellParams?.[key]],
+                        class: val['class'] || '',
+                    };
+                }
+                else {
+                    return { [valueProp]: String(val).trim(), class: '' };
+                }
+            });
+        }
+        else if (!Array.isArray(value) && typeof value === 'object') {
+            return [
+                {
+                    [valueProp]: value[this.params.cellParams?.[key]],
+                    class: value['class'] || '',
+                },
+            ];
+        }
+        return [{ [valueProp]: String(value).trim(), class: '' }];
+    }
+    parseColValue(row, col) {
+        if (!col?.fieldName?.includes('.')) {
+            return row[col.fieldName] || 'N/A';
+        }
+        else {
+            const keys = col.fieldName
+                .replace(/\[(\d+)\]/g, '.$1')
+                .split('.')
+                .filter(Boolean);
+            let val = row;
+            for (const key of keys) {
+                if (Array.isArray(val)) {
+                    val = val.map((v) => v?.[key]).filter(Boolean);
+                }
+                else {
+                    val = val?.[key];
+                }
+                if (val === undefined || val === null) {
+                    return 'N/A';
+                }
+            }
+            return val || 'N/A';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommonRendererComponent, isStandalone: true, selector: "lib-common-renderer", ngImport: i0, template: "<!-- Switch -->\n@if (type === \"switch\") {\n  <div class=\"table_switch_wrapper\">\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n}\n\n<!-- Action Menu -->\n\n@if (type === \"action-menu\") {\n  <div class=\"action-menu\">\n    <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\n      <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\n    </button>\n\n    @if (openActionMenu) {\n      <div\n        class=\"menu\"\n        appOutsideClick\n        (clickOutside)=\"clickOutside($event)\"\n        adaptivePosition\n        [trigger]=\"tagTrigger\"\n        [isAction]=\"true\"\n        [matchWidth]=\"false\"\n      >\n        <div class=\"item_wrapper\" id=\"table_scroll\">\n          @for (act of actions; track $index) {\n            <div\n              class=\"{{ 'menu_item' + ' ' + act.class }}\"\n              [ngClass]=\"{\n                disabled_item:\n                  params?.data?.disabledActions?.includes(act.label) ||\n                  act.disabled,\n              }\"\n              (click)=\"onActionClick(act)\"\n            >\n              @if (act.icon) {\n                <img src=\"images/{{ act.icon }}.svg\" />\n              } @else {\n                <img src=\"{{ act?.image }}\" />\n              }\n\n              <span class=\"ellipsis\">{{ act.label }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Tags -->\n\n@if (type === \"tag\") {\n  <div\n    class=\"tag_wrapper\"\n    (mouseover)=\"toggleDropdown($event)\"\n    (mouseout)=\"closeDropdown($event)\"\n    #tagTrigger\n  >\n    @for (tag of visibleTags; track $index) {\n      <div\n        class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\n        [ngClass]=\"paramsVal | addClass: params.cellParams\"\n      >\n        <!-- <span class=\"circle\"></span>\n    <img src=\"images/home.svg\" alt=\"\" class=\"icon\" /> -->\n\n        <div class=\"more_data_section\">\n          <!-- <span class=\"textTruncate\"> {{ tag.tagValue }}</span> -->\n          <div class=\"cell-value ellipsis\">\n            <div class=\"more_data_wrapper textTruncate\">\n              {{ tag.tagValue }}\n            </div>\n            <div class=\"see_more_data\" id=\"table_scroll\">\n              <div class=\"item\">\n                <span class=\"desc\"> {{ tag.tagValue }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (hiddenCount > 0) {\n      <div class=\"hidden_list\">\n        <span class=\"tag_more\">+{{ hiddenCount }}</span>\n        @if (openDropdown) {\n          <div\n            class=\"tag_dropdown\"\n            id=\"table_scroll\"\n            adaptivePosition\n            [trigger]=\"tagTrigger\"\n            [matchWidth]=\"false\"\n          >\n            @for (tag of allTags; track $index) {\n              <div\n                class=\"{{ 'dropdown_item' + ' ' + tag.class }}\"\n              >\n                {{ tag.tagValue }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n@if (type === \"link\") {\n  <div class=\"more_data_section cell-value ellipsis\">\n    <!-- @for (link of linkVal; track $index) { -->\n    <div class=\"more_data_wrapper textTruncate\">\n      <span\n        class=\"grid-link\"\n        (click)=\"linkSingleClick()\"\n        (dblclick)=\"linkDoubleClick()\"\n      >\n        {{ linkVal }}\n      </span>\n    </div>\n    <div class=\"see_more_data\" id=\"table_scroll\">\n      <div class=\"item\">\n        <span class=\"desc\"> {{ linkVal }}</span>\n      </div>\n    </div>\n    <!-- } -->\n  </div>\n}\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.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].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{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].custom_check_box: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].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;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{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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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))}}.action-menu{position:relative;text-align:center}.action-menu .action_dots{background:transparent;border:none;cursor:pointer}.action-menu .action_dots img{max-width:calc(1.3333333333rem / var(--scale))}.action-menu .menu{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;width:max-content;min-width:calc(10rem / var(--scale));max-width:calc(16.6666666667rem / var(--scale));position:absolute;top:calc(.8333333333rem / var(--scale))}.action-menu .menu .item_wrapper{position:relative;max-height:calc(20rem / var(--scale));overflow-y:auto;margin:calc(.3333333333rem / var(--scale)) 0}.action-menu .menu .item_wrapper .menu_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:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer;position:relative;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.action-menu .menu .item_wrapper .menu_item.disabled_item{color:var(--neutral-300);pointer-events:none}.action-menu .menu .item_wrapper .menu_item.disabled_item img{opacity:.3}.action-menu .menu .item_wrapper .menu_item:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .tag_chip{white-space:nowrap;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip .circle{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;background-color:var(--neutral-500)}.tag_wrapper .tag_chip .circle.bg_error{background-color:var(--red-700)}.tag_wrapper .tag_chip .circle.bg_pending{background-color:var(--yellow-700)}.tag_wrapper .tag_chip .circle.bg_active{background-color:var(--green-600)}.tag_wrapper .tag_chip .circle.bg_info{background-color:var(--blue-700)}.tag_wrapper .tag_chip .suffix{order:1}.tag_wrapper .tag_chip .icon{max-width:calc(1.3333333333rem / var(--scale));max-height:calc(1.3333333333rem / var(--scale))}.tag_wrapper .hidden_list{display:flex}.tag_wrapper .hidden_list .tag_more{cursor:pointer;background-color:var(--neutral-50)}.tag_wrapper .hidden_list .tag_dropdown{position:relative;top:100%;right:0;max-width:calc(15rem / var(--scale));min-width:calc(10rem / var(--scale));max-height:calc(18.3333333333rem / var(--scale));overflow:auto;overflow-x:hidden;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) var(--box-shadow);z-index:1;padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tag_wrapper .hidden_list .tag_dropdown .dropdown_item{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));width:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip.active,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.active{background-color:var(--green-100);border-color:var(--green-200);color:var(--green-700)}.tag_wrapper .tag_chip.pending,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.pending{background-color:var(--yellow-100);border-color:var(--yellow-300);color:var(--yellow-700)}.tag_wrapper .tag_chip.error,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.error{background-color:var(--red-100);border-color:var(--red-300);color:var(--red-700)}.tag_wrapper .tag_chip.info,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.info{background-color:var(--blue-100);border-color:var(--blue-300);color:var(--blue-700)}.tag_wrapper .tag_chip.disable,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.disable{background-color:var(--neutral-50);border-color:var(--neutral-300);color:var(--neutral-400);cursor:not-allowed}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(16.6666666667rem / var(--scale))}::ng-deep td:has(.action-menu:focus-within){z-index:15!important}.cell-value{line-height:calc(1.5rem / var(--scale))!important}.cell-value.ellipsis,.cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.cell-value.ellipsis:hover .see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));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:1;left: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:start;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-word}.grid-link{color:var(--blue-700);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none}.grid-link:hover{text-decoration:underline}.grid-link:active{opacity:.8}.grid-link:focus{outline:none;text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-common-renderer', imports: [OutsideClickDirective, AdaptivePositionDirective, CommonModule, AddClassPipe], template: "<!-- Switch -->\r\n@if(type===\"switch\"){\r\n<div class=\"table_switch_wrapper\">\r\n  <label class=\"switch\">\r\n    <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n}\r\n\r\n<!-- Action Menu -->\r\n\r\n@if(type==='action-menu'){\r\n<div class=\"action-menu\">\r\n  <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\r\n    <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\r\n  </button>\r\n\r\n  @if(openActionMenu){\r\n  <div\r\n    class=\"menu\"\r\n    appOutsideClick\r\n    (clickOutside)=\"clickOutside($event)\"\r\n    adaptivePosition\r\n    [trigger]=\"tagTrigger\"\r\n    [isAction]=\"true\"\r\n    [matchWidth]=\"false\"\r\n  >\r\n    <div class=\"item_wrapper\" id=\"table_scroll\">\r\n      @for(act of actions; track $index){\r\n      <div\r\n        class=\"{{ 'menu_item' + ' ' + act.class }}\"\r\n        [ngClass]=\"{ disabled_item: params?.data?.disabledActions?.includes(act.label) || act.disabled }\"\r\n        (click)=\"onActionClick(act)\"\r\n      >\r\n        <img src=\"images/{{ act.icon }}.svg\" />\r\n        <span class=\"ellipsis\">{{ act.label }}</span>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n}\r\n\r\n<!-- Tags -->\r\n\r\n@if(type === 'tag'){\r\n<div\r\n  class=\"tag_wrapper\"\r\n  (mouseover)=\"toggleDropdown($event)\"\r\n  (mouseout)=\"closeDropdown($event)\"\r\n  #tagTrigger\r\n>\r\n  @for(tag of visibleTags; track $index){\r\n  <span\r\n    class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\r\n    [ngClass]=\"tag.tagValue | addClass : params.cellParams\"\r\n  >\r\n    <!-- <span class=\"circle\"></span>\r\n    <img src=\"images/home.svg\" alt=\"\" class=\"icon\" /> -->\r\n    {{ tag.tagValue }}</span\r\n  >\r\n  } @if(hiddenCount > 0){\r\n  <div class=\"hidden_list\">\r\n    <span class=\"tag_more\">+{{ hiddenCount }}</span>\r\n    @if(openDropdown){\r\n    <div\r\n      class=\"tag_dropdown\"\r\n      id=\"table_scroll\"\r\n      adaptivePosition\r\n      [trigger]=\"tagTrigger\"\r\n      [matchWidth]=\"false\"\r\n    >\r\n      @for(tag of allTags; track $index){\r\n      <div class=\"{{ 'dropdown_item' + ' ' + tag.class }}\">\r\n        {{ tag.tagValue }}\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  }\r\n</div>\r\n}\r\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}.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-300);border-color:var(--neutral-300)}.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);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.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);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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))}}.action-menu{position:relative;text-align:center}.action-menu .action_dots{background:transparent;border:none;cursor:pointer}.action-menu .action_dots img{max-width:calc(1.3333333333rem / var(--scale))}.action-menu .menu{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;width:max-content;min-width:calc(10rem / var(--scale));max-width:calc(16.6666666667rem / var(--scale));position:absolute;top:calc(.8333333333rem / var(--scale))}.action-menu .menu .item_wrapper{position:relative;max-height:calc(20rem / var(--scale));overflow-y:auto;margin:calc(.3333333333rem / var(--scale)) 0}.action-menu .menu .item_wrapper .menu_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:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer;position:relative;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.action-menu .menu .item_wrapper .menu_item.disabled_item{color:var(--neutral-300);pointer-events:none}.action-menu .menu .item_wrapper .menu_item.disabled_item img{opacity:.3}.action-menu .menu .item_wrapper .menu_item:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .tag_chip{white-space:nowrap;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip .circle{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;background-color:var(--neutral-500)}.tag_wrapper .tag_chip .circle.bg_error{background-color:var(--red-700)}.tag_wrapper .tag_chip .circle.bg_pending{background-color:var(--yellow-700)}.tag_wrapper .tag_chip .circle.bg_active{background-color:var(--green-600)}.tag_wrapper .tag_chip .circle.bg_info{background-color:var(--blue-700)}.tag_wrapper .tag_chip .suffix{order:1}.tag_wrapper .tag_chip .icon{max-width:calc(1.3333333333rem / var(--scale));max-height:calc(1.3333333333rem / var(--scale))}.tag_wrapper .hidden_list{display:flex}.tag_wrapper .hidden_list .tag_more{cursor:pointer;background-color:var(--neutral-50)}.tag_wrapper .hidden_list .tag_dropdown{position:relative;top:100%;left:0;max-width:calc(15rem / var(--scale));min-width:calc(10rem / var(--scale));max-height:calc(18.3333333333rem / var(--scale));overflow:auto;overflow-x:hidden;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) var(--box-shadow);z-index:1;padding:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tag_wrapper .hidden_list .tag_dropdown .dropdown_item{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));width:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip.active,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.active{background-color:var(--green-100);border-color:var(--green-200);color:var(--green-700)}.tag_wrapper .tag_chip.pending,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.pending{background-color:var(--yellow-100);border-color:var(--yellow-300);color:var(--yellow-700)}.tag_wrapper .tag_chip.error,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.error{background-color:var(--red-100);border-color:var(--red-300);color:var(--red-700)}.tag_wrapper .tag_chip.info,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.info{background-color:var(--blue-100);border-color:var(--blue-300);color:var(--blue-700)}.tag_wrapper .tag_chip.disable,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.disable{background-color:var(--neutral-50);border-color:var(--neutral-300);color:var(--neutral-400);cursor:not-allowed}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep td:has(.action-menu:focus-within){z-index:15!important}\n"] }]
+            args: [{ selector: 'lib-common-renderer', imports: [
+                        OutsideClickDirective,
+                        AdaptivePositionDirective,
+                        CommonModule,
+                        AddClassPipe,
+                    ], template: "<!-- Switch -->\n@if (type === \"switch\") {\n  <div class=\"table_switch_wrapper\">\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n}\n\n<!-- Action Menu -->\n\n@if (type === \"action-menu\") {\n  <div class=\"action-menu\">\n    <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\n      <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\n    </button>\n\n    @if (openActionMenu) {\n      <div\n        class=\"menu\"\n        appOutsideClick\n        (clickOutside)=\"clickOutside($event)\"\n        adaptivePosition\n        [trigger]=\"tagTrigger\"\n        [isAction]=\"true\"\n        [matchWidth]=\"false\"\n      >\n        <div class=\"item_wrapper\" id=\"table_scroll\">\n          @for (act of actions; track $index) {\n            <div\n              class=\"{{ 'menu_item' + ' ' + act.class }}\"\n              [ngClass]=\"{\n                disabled_item:\n                  params?.data?.disabledActions?.includes(act.label) ||\n                  act.disabled,\n              }\"\n              (click)=\"onActionClick(act)\"\n            >\n              @if (act.icon) {\n                <img src=\"images/{{ act.icon }}.svg\" />\n              } @else {\n                <img src=\"{{ act?.image }}\" />\n              }\n\n              <span class=\"ellipsis\">{{ act.label }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Tags -->\n\n@if (type === \"tag\") {\n  <div\n    class=\"tag_wrapper\"\n    (mouseover)=\"toggleDropdown($event)\"\n    (mouseout)=\"closeDropdown($event)\"\n    #tagTrigger\n  >\n    @for (tag of visibleTags; track $index) {\n      <div\n        class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\n        [ngClass]=\"paramsVal | addClass: params.cellParams\"\n      >\n        <!-- <span class=\"circle\"></span>\n    <img src=\"images/home.svg\" alt=\"\" class=\"icon\" /> -->\n\n        <div class=\"more_data_section\">\n          <!-- <span class=\"textTruncate\"> {{ tag.tagValue }}</span> -->\n          <div class=\"cell-value ellipsis\">\n            <div class=\"more_data_wrapper textTruncate\">\n              {{ tag.tagValue }}\n            </div>\n            <div class=\"see_more_data\" id=\"table_scroll\">\n              <div class=\"item\">\n                <span class=\"desc\"> {{ tag.tagValue }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (hiddenCount > 0) {\n      <div class=\"hidden_list\">\n        <span class=\"tag_more\">+{{ hiddenCount }}</span>\n        @if (openDropdown) {\n          <div\n            class=\"tag_dropdown\"\n            id=\"table_scroll\"\n            adaptivePosition\n            [trigger]=\"tagTrigger\"\n            [matchWidth]=\"false\"\n          >\n            @for (tag of allTags; track $index) {\n              <div\n                class=\"{{ 'dropdown_item' + ' ' + tag.class }}\"\n              >\n                {{ tag.tagValue }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n@if (type === \"link\") {\n  <div class=\"more_data_section cell-value ellipsis\">\n    <!-- @for (link of linkVal; track $index) { -->\n    <div class=\"more_data_wrapper textTruncate\">\n      <span\n        class=\"grid-link\"\n        (click)=\"linkSingleClick()\"\n        (dblclick)=\"linkDoubleClick()\"\n      >\n        {{ linkVal }}\n      </span>\n    </div>\n    <div class=\"see_more_data\" id=\"table_scroll\">\n      <div class=\"item\">\n        <span class=\"desc\"> {{ linkVal }}</span>\n      </div>\n    </div>\n    <!-- } -->\n  </div>\n}\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.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].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{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].custom_check_box: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].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;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{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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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))}}.action-menu{position:relative;text-align:center}.action-menu .action_dots{background:transparent;border:none;cursor:pointer}.action-menu .action_dots img{max-width:calc(1.3333333333rem / var(--scale))}.action-menu .menu{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;width:max-content;min-width:calc(10rem / var(--scale));max-width:calc(16.6666666667rem / var(--scale));position:absolute;top:calc(.8333333333rem / var(--scale))}.action-menu .menu .item_wrapper{position:relative;max-height:calc(20rem / var(--scale));overflow-y:auto;margin:calc(.3333333333rem / var(--scale)) 0}.action-menu .menu .item_wrapper .menu_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:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer;position:relative;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.action-menu .menu .item_wrapper .menu_item.disabled_item{color:var(--neutral-300);pointer-events:none}.action-menu .menu .item_wrapper .menu_item.disabled_item img{opacity:.3}.action-menu .menu .item_wrapper .menu_item:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .tag_chip{white-space:nowrap;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip .circle{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;background-color:var(--neutral-500)}.tag_wrapper .tag_chip .circle.bg_error{background-color:var(--red-700)}.tag_wrapper .tag_chip .circle.bg_pending{background-color:var(--yellow-700)}.tag_wrapper .tag_chip .circle.bg_active{background-color:var(--green-600)}.tag_wrapper .tag_chip .circle.bg_info{background-color:var(--blue-700)}.tag_wrapper .tag_chip .suffix{order:1}.tag_wrapper .tag_chip .icon{max-width:calc(1.3333333333rem / var(--scale));max-height:calc(1.3333333333rem / var(--scale))}.tag_wrapper .hidden_list{display:flex}.tag_wrapper .hidden_list .tag_more{cursor:pointer;background-color:var(--neutral-50)}.tag_wrapper .hidden_list .tag_dropdown{position:relative;top:100%;right:0;max-width:calc(15rem / var(--scale));min-width:calc(10rem / var(--scale));max-height:calc(18.3333333333rem / var(--scale));overflow:auto;overflow-x:hidden;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) var(--box-shadow);z-index:1;padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tag_wrapper .hidden_list .tag_dropdown .dropdown_item{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));width:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip.active,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.active{background-color:var(--green-100);border-color:var(--green-200);color:var(--green-700)}.tag_wrapper .tag_chip.pending,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.pending{background-color:var(--yellow-100);border-color:var(--yellow-300);color:var(--yellow-700)}.tag_wrapper .tag_chip.error,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.error{background-color:var(--red-100);border-color:var(--red-300);color:var(--red-700)}.tag_wrapper .tag_chip.info,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.info{background-color:var(--blue-100);border-color:var(--blue-300);color:var(--blue-700)}.tag_wrapper .tag_chip.disable,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.disable{background-color:var(--neutral-50);border-color:var(--neutral-300);color:var(--neutral-400);cursor:not-allowed}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(16.6666666667rem / var(--scale))}::ng-deep td:has(.action-menu:focus-within){z-index:15!important}.cell-value{line-height:calc(1.5rem / var(--scale))!important}.cell-value.ellipsis,.cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.cell-value.ellipsis:hover .see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));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:1;left: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:start;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-word}.grid-link{color:var(--blue-700);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none}.grid-link:hover{text-decoration:underline}.grid-link:active{opacity:.8}.grid-link:focus{outline:none;text-decoration:underline}\n"] }]
         }] });
 
+class CommonTreeTableComponent {
+    renderer;
+    zone;
+    cd;
+    tableAreaRef;
+    pinMenu;
+    data = [];
+    columns = [{ field: 'name', header: 'Name' }];
+    idField = 'id';
+    labelField = 'name';
+    childrenField = 'array';
+    treeColumnField;
+    indentPx = 18;
+    showHeader = true;
+    expandIcon = 'chevron-right.svg';
+    collapseIcon = 'chevron-down.svg';
+    iconBasePath = 'images';
+    showCheckbox = false;
+    showNodeIcon = true;
+    noDataText = 'No data found';
+    loadingText = 'Loading...';
+    emitExpandAlways = true;
+    // New sorting, filtering, and customization inputs
+    sortingRequired = true;
+    filterRequired = true;
+    threeDotsMenuRequired = true;
+    settingsRequired = false;
+    settingsClicked = false;
+    checkBoxSelection = false;
+    checkboxSelectionType = 'multiple';
+    isExpandable = (node) => {
+        const children = node?.[this.childrenField];
+        return Array.isArray(children) ? children.length > 0 : false;
+    };
+    rowOptionsResolver = () => ({});
+    nodeIconResolver = () => null;
+    linkResolver = () => null;
+    nodeToggle = new EventEmitter();
+    selectionChange = new EventEmitter();
+    linkClick = new EventEmitter();
+    onHideSettings = new EventEmitter();
+    rows = [];
+    // Sorting, filtering, and column management properties
+    sortingColumnIndex = null;
+    sortingType = {};
+    filteredData = [];
+    originalRowData = [];
+    activeFilters = new Map();
+    appliedFilters = [];
+    menuVisible = [];
+    dragOverIndex = null;
+    draggedIndex = null;
+    activeFilterIndex = null;
+    resizingColumnIndex = null;
+    startX = 0;
+    startWidth = 0;
+    isResizing = false;
+    showMoveIcon = {};
+    showPin = false;
+    pinActionClicked = {};
+    columnDraggable = [];
+    showPageSizeList = false;
+    activeAll = true;
+    atLeastOneColumnChecked = true;
+    selectedRow = [];
+    originalColumns = [];
+    removeMouseMove = null;
+    removeMouseUp = null;
+    rafId = null;
+    removeDragOver = null;
+    removeDrop = null;
+    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: '<=' },
+    ];
+    expandedKeys = new Set();
+    selectedKeys = new Set();
+    fallbackKey = new WeakMap();
+    fallbackSeq = 1;
+    resolvedTreeColumnField;
+    constructor(renderer, zone, cd) {
+        this.renderer = renderer;
+        this.zone = zone;
+        this.cd = cd;
+    }
+    ngAfterViewInit() {
+        const el = this.tableAreaRef?.nativeElement;
+        if (!el)
+            return;
+        this.zone.runOutsideAngular(() => {
+            this.removeDragOver = this.renderer.listen(el, 'dragover', (event) => {
+                if (this.isResizing)
+                    return;
+                event.preventDefault();
+                const th = event.target?.closest?.('th');
+                const rawIdx = th?.dataset?.['colIdx'];
+                if (!rawIdx)
+                    return;
+                const idx = Number.parseInt(rawIdx, 10);
+                if (Number.isNaN(idx))
+                    return;
+                if (this.dragOverIndex === idx)
+                    return;
+                this.zone.run(() => {
+                    this.dragOverIndex = idx;
+                });
+            });
+            this.removeDrop = this.renderer.listen(el, 'drop', (event) => {
+                event.preventDefault();
+                const th = event.target?.closest?.('th');
+                const rawIdx = th?.dataset?.['colIdx'];
+                if (!rawIdx)
+                    return;
+                const idx = Number.parseInt(rawIdx, 10);
+                if (Number.isNaN(idx))
+                    return;
+                this.zone.run(() => {
+                    this.onDrop(event, idx);
+                });
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.removeDragOver?.();
+        this.removeDrop?.();
+        this.removeMouseMove?.();
+        this.removeMouseUp?.();
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.renderer.removeStyle(document.body, 'cursor');
+        this.renderer.removeStyle(document.body, 'user-select');
+    }
+    ngOnChanges(changes) {
+        if (changes['data'] || changes['columns']) {
+            this.initializeColumns();
+            this.originalRowData = structuredClone(this.data || []);
+            this.rebuildRows();
+        }
+    }
+    ngDoCheck() {
+        this.rebuildRows();
+    }
+    get treeColumn() {
+        const preferredField = this.treeColumnField ?? this.resolvedTreeColumnField;
+        if (preferredField) {
+            const found = this.columns?.find((c) => c.field === preferredField);
+            if (found)
+                return found;
+        }
+        return this.columns?.[0] ?? { field: this.labelField, header: 'Name' };
+    }
+    /**
+     * Initialize column properties for filtering, sorting, and customization
+     */
+    initializeColumns() {
+        this.columns = this.columns.map((col, index) => {
+            if (!col.colId)
+                col.colId = col.field;
+            if (col.sortable === undefined)
+                col.sortable = true;
+            if (col.filterable === undefined)
+                col.filterable = true;
+            if (col.filterType === undefined)
+                col.filterType = 'text';
+            if (col.active === undefined)
+                col.active = true;
+            if (col.width === undefined)
+                col.width = 150;
+            if (col.minWidth === undefined)
+                col.minWidth = 50;
+            if (!col.filters) {
+                col.filters = [
+                    { filterOperation: 'contains', filterValue: '' },
+                    { filterOperation: 'contains', filterValue: '' },
+                ];
+            }
+            if (!col.selectedValues)
+                col.selectedValues = new Set();
+            if (!col.options && col.filterType === 'set') {
+                col.options = this.extractUniqueValues(this.data || [], col.field);
+                col.filteredOptions = [...(col.options || [])];
+            }
+            if (!this.menuVisible[index])
+                this.menuVisible[index] = false;
+            const key = col.colId || col.field;
+            if (this.pinActionClicked[key] == null) {
+                this.pinActionClicked[key] = col.leftPinned
+                    ? 'left'
+                    : col.rightPinned
+                        ? 'right'
+                        : 'none';
+            }
+            return col;
+        });
+        // If the consumer didn't specify a tree column, keep the initial first column as the tree UI column
+        // even when columns are later reordered (pin/drag).
+        if (!this.treeColumnField) {
+            const firstField = this.columns?.[0]?.field;
+            if (firstField &&
+                (this.resolvedTreeColumnField == null ||
+                    !this.columns.some((c) => c.field === this.resolvedTreeColumnField))) {
+                this.resolvedTreeColumnField = firstField;
+            }
+        }
+        this.saveColumnState();
+    }
+    /**
+     * Extract unique values from data for set filter
+     */
+    extractUniqueValues(data, field) {
+        const values = new Set();
+        const visit = (nodes) => {
+            for (const node of nodes) {
+                values.add(this.getValue(node, field));
+                const children = this.getChildren(node);
+                if (Array.isArray(children))
+                    visit(children);
+            }
+        };
+        visit(data);
+        return Array.from(values);
+    }
+    /**
+     * Sort data based on column and sorting type
+     */
+    onSortingRowData(sortingColumnIndex, col) {
+        if (!col.sortable)
+            return;
+        this.sortingColumnIndex = sortingColumnIndex;
+        Object.keys(this.sortingType).forEach((k) => {
+            if (Number(k) !== sortingColumnIndex)
+                delete this.sortingType[Number(k)];
+        });
+        if (!this.sortingType[sortingColumnIndex]) {
+            this.sortingType[sortingColumnIndex] = 'asc';
+        }
+        else if (this.sortingType[sortingColumnIndex] === 'asc') {
+            this.sortingType[sortingColumnIndex] = 'dsc';
+        }
+        else {
+            this.sortingType[sortingColumnIndex] = '';
+            delete this.sortingType[sortingColumnIndex];
+        }
+        this.applySort();
+        this.rebuildRows();
+    }
+    /**
+     * Sort from the three-dots menu with an explicit direction (matches `cats-data-grid` UX).
+     */
+    onSort(col, type, sortingColumIndex) {
+        if (!col.sortable)
+            return;
+        this.sortingType[sortingColumIndex] = type;
+        this.sortingColumnIndex = type ? sortingColumIndex : null;
+        Object.keys(this.sortingType).forEach((k) => {
+            if (k !== String(sortingColumIndex))
+                this.sortingType[Number(k)] = '';
+        });
+        if (type === 'asc' || type === 'dsc') {
+            this.applySort();
+        }
+        else {
+            this.data = structuredClone(this.originalRowData || []);
+        }
+        this.rebuildRows();
+        this.onClickOutside();
+    }
+    /**
+     * Apply sorting to the row data
+     */
+    applySort() {
+        if (this.sortingColumnIndex === null)
+            return;
+        const col = this.columns[this.sortingColumnIndex];
+        const sortType = this.sortingType[this.sortingColumnIndex];
+        if (!sortType)
+            return;
+        const sortFn = (a, b) => {
+            const aVal = this.getValue(a, col.field);
+            const bVal = this.getValue(b, col.field);
+            if (aVal === bVal)
+                return 0;
+            if (aVal === null || aVal === undefined)
+                return 1;
+            if (bVal === null || bVal === undefined)
+                return -1;
+            if (sortType === 'asc') {
+                return aVal > bVal ? 1 : -1;
+            }
+            else {
+                return aVal < bVal ? 1 : -1;
+            }
+        };
+        const visit = (nodes) => {
+            nodes.sort(sortFn);
+            for (const node of nodes) {
+                const children = this.getChildren(node);
+                if (Array.isArray(children))
+                    visit(children);
+            }
+        };
+        visit(this.data || []);
+    }
+    /**
+     * Apply all active filters
+     */
+    applyAllFilters() {
+        let result = structuredClone(this.originalRowData);
+        this.columns.forEach((col) => {
+            if (!col.filters || col.filterType === 'set')
+                return;
+            const hasFirstValue = col.filters[0]?.filterValue;
+            if (!hasFirstValue)
+                return;
+            result = result.filter((row) => {
+                const fieldValue = String(this.getValue(row, col.field)).toLowerCase();
+                const filterOp = col.filters?.[0]?.filterOperation;
+                const filterVal = String(col.filters?.[0]?.filterValue).toLowerCase();
+                if (!this.evaluateTextFilterCondition(filterOp || '', fieldValue, filterVal)) {
+                    return false;
+                }
+                if (col.filters?.[1]?.filterValue) {
+                    const secondOp = col.filters[1].filterOperation;
+                    const secondVal = String(col.filters[1].filterValue).toLowerCase();
+                    return this.evaluateTextFilterCondition(secondOp || '', fieldValue, secondVal);
+                }
+                return true;
+            });
+        });
+        this.filteredData = result;
+        this.data = this.filteredData;
+        this.rebuildRows();
+    }
+    /**
+     * Evaluate text filter condition
+     */
+    evaluateTextFilterCondition(type, fieldValue, value) {
+        switch (type) {
+            case 'contains':
+                return fieldValue.includes(value);
+            case 'doesNotContain':
+                return !fieldValue.includes(value);
+            case 'equals':
+                return fieldValue === value;
+            case 'doesNotEqual':
+                return fieldValue !== value;
+            case 'startsWith':
+                return fieldValue.startsWith(value);
+            case 'endsWith':
+                return fieldValue.endsWith(value);
+            default:
+                return true;
+        }
+    }
+    /**
+     * Toggle column filter visibility
+     */
+    toggleFilter(col, index, event) {
+        event.stopPropagation();
+        this.activeFilterIndex = this.activeFilterIndex === index ? null : index;
+    }
+    /**
+     * Reset filter for a column
+     */
+    resetFilter(col) {
+        if (col.filters) {
+            col.filters.forEach((f) => (f.filterValue = ''));
+        }
+        if (col.selectedValues)
+            col.selectedValues.clear();
+        this.activeFilters.delete(col.field);
+        this.applyAllFilters();
+    }
+    /**
+     * Start column resize
+     */
+    startResize(event, index) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isResizing = true;
+        this.resizingColumnIndex = index;
+        this.startX = event.clientX;
+        this.startWidth = this.columns[index].width ?? 150;
+        this.zone.runOutsideAngular(() => {
+            this.renderer.setStyle(document.body, 'cursor', 'col-resize');
+            this.renderer.setStyle(document.body, 'user-select', 'none');
+            this.removeMouseMove = this.renderer.listen('document', 'mousemove', this.onMouseMove);
+            this.removeMouseUp = this.renderer.listen('document', 'mouseup', this.stopResize);
+        });
+    }
+    /**
+     * Handle mouse move during resize
+     */
+    onMouseMove = (event) => {
+        if (this.resizingColumnIndex === null || this.rafId)
+            return;
+        this.rafId = requestAnimationFrame(() => {
+            const movement = event.clientX - this.startX;
+            const newWidth = this.startWidth + movement;
+            const minWidth = this.columns[this.resizingColumnIndex]?.minWidth ?? 50;
+            if (newWidth > minWidth) {
+                this.zone.run(() => {
+                    this.columns[this.resizingColumnIndex].width = newWidth;
+                    // recalc pinned offsets in case a pinned column changed width
+                    this.updatePinnedOffsets();
+                    this.cd.markForCheck();
+                });
+            }
+            this.rafId = null;
+        });
+    };
+    /**
+     * Stop column resize
+     */
+    stopResize = () => {
+        this.isResizing = false;
+        this.resizingColumnIndex = null;
+        this.removeMouseMove?.();
+        this.removeMouseUp?.();
+        this.renderer.removeStyle(document.body, 'cursor');
+        this.renderer.removeStyle(document.body, 'user-select');
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+    };
+    /**
+     * Handle column drag start
+     */
+    onDragStart(event, index) {
+        if (this.isResizing)
+            return;
+        this.draggedIndex = index;
+        event.dataTransfer?.setData('text/plain', index.toString());
+    }
+    /**
+     * Handle column drag over
+     */
+    onDragOver(event, index) {
+        event.preventDefault();
+        this.isResizing = false;
+        if (this.dragOverIndex !== index)
+            this.dragOverIndex = index;
+    }
+    /**
+     * Handle column drop
+     */
+    onDrop(event, index) {
+        event.preventDefault();
+        if (this.draggedIndex === null)
+            return;
+        const draggedItem = this.columns[this.draggedIndex];
+        this.columns.splice(this.draggedIndex, 1);
+        this.columns.splice(index, 0, draggedItem);
+        this.draggedIndex = null;
+        this.dragOverIndex = null;
+        this.updatePinnedOffsets();
+    }
+    /**
+     * Handle drag end
+     */
+    onDragEnd() {
+        this.draggedIndex = null;
+        this.dragOverIndex = null;
+    }
+    /**
+     * Pin column to left or right
+     */
+    pinColumn(col, index, direction) {
+        const key = col.colId || col.field;
+        this.pinActionClicked[key] = direction;
+        col.leftPinned = direction === 'left';
+        col.rightPinned = direction === 'right';
+        // Reorder columns to mirror `cats-data-grid` behavior.
+        const currentIndex = this.columns.findIndex((c) => (c.colId || c.field) === key);
+        if (currentIndex >= 0) {
+            this.columns.splice(currentIndex, 1);
+        }
+        else if (index >= 0 && index < this.columns.length) {
+            this.columns.splice(index, 1);
+        }
+        if (direction === 'left') {
+            this.columns = [col, ...this.columns];
+        }
+        else if (direction === 'right') {
+            this.columns = [...this.columns, col];
+        }
+        else {
+            const leftPinned = this.columns.filter((c) => c.leftPinned);
+            const rightPinned = this.columns.filter((c) => c.rightPinned);
+            const middle = this.columns.filter((c) => !c.leftPinned && !c.rightPinned);
+            const byKey = new Map();
+            for (const c of middle)
+                byKey.set(c.colId || c.field, c);
+            byKey.set(key, col);
+            const originalKeys = (this.originalColumns || []).map((c) => c.colId || c.field);
+            const orderedMiddle = [];
+            for (const k of originalKeys) {
+                const match = byKey.get(k);
+                if (match)
+                    orderedMiddle.push(match);
+            }
+            for (const [k, v] of byKey.entries()) {
+                if (!originalKeys.includes(k))
+                    orderedMiddle.push(v);
+            }
+            this.columns = [...leftPinned, ...orderedMiddle, ...rightPinned];
+        }
+        this.updatePinnedOffsets();
+        this.showPin = false;
+        this.onClickOutside();
+    }
+    showPinActions(event) {
+        event.stopPropagation();
+        const parentEl = event.currentTarget;
+        this.showPin = true;
+        // Flip the submenu to open left if it would overflow the viewport.
+        setTimeout(() => {
+            const menuEl = this.pinMenu?.nativeElement;
+            if (!menuEl || !parentEl)
+                return;
+            const parentRect = parentEl.getBoundingClientRect();
+            const menuWidth = menuEl.offsetWidth;
+            const viewPortWidth = window.innerWidth;
+            const x = parentRect.right;
+            if (x + menuWidth > viewPortWidth) {
+                menuEl.style.right = `${parentRect.width}px`;
+            }
+            else {
+                menuEl.style.right = '';
+            }
+        });
+    }
+    hidePinActions() {
+        this.showPin = false;
+    }
+    /**
+     * Update pinned column offsets
+     */
+    updatePinnedOffsets() {
+        let leftOffset = 0;
+        let rightOffset = 0;
+        this.columns.forEach((col) => {
+            if (col.leftPinned) {
+                col.leftOffset = leftOffset;
+                leftOffset += col.width ?? 150;
+            }
+            else {
+                col.leftOffset = undefined;
+            }
+        });
+        [...this.columns].reverse().forEach((col) => {
+            if (col.rightPinned) {
+                col.rightOffset = rightOffset;
+                rightOffset += col.width ?? 150;
+            }
+            else {
+                col.rightOffset = undefined;
+            }
+        });
+    }
+    /**
+     * Filter set options based on search text
+     */
+    filterSetOptions(col, event) {
+        const text = event.target.value.toLowerCase();
+        col.filteredOptions = col.options?.filter((option) => String(option).toLowerCase().includes(text)) || [];
+    }
+    /**
+     * Toggle set filter option
+     */
+    toggleSetOption(col, option, event) {
+        if (event.target.checked) {
+            col.selectedValues?.add(option);
+        }
+        else {
+            col.selectedValues?.delete(option);
+        }
+        this.applyAllFilters();
+    }
+    /**
+     * Toggle select all in set filter
+     */
+    toggleSelectAllSetFilter(col, event) {
+        col.selectedValues?.clear();
+        if (event.target.checked) {
+            col.options?.forEach((o) => col.selectedValues?.add(o));
+        }
+        this.applyAllFilters();
+    }
+    /**
+     * Get column style
+     */
+    getStyle(col) {
+        const style = {
+            width: `${col.width ?? 150}px`,
+            minWidth: `${col.minWidth ?? 50}px`,
+        };
+        if (col.leftPinned) {
+            style.position = 'sticky';
+            style.left = `${col.leftOffset ?? 0}px`;
+            style.zIndex = 20;
+            style.background = 'var(--white)';
+        }
+        else if (col.rightPinned) {
+            style.position = 'sticky';
+            style.right = `${col.rightOffset ?? 0}px`;
+            style.zIndex = 20;
+            style.background = 'var(--white)';
+        }
+        return style;
+    }
+    /**
+     * Toggle column visibility
+     */
+    changeActiveColSelection(event, col) {
+        col.active = !event.target.checked;
+        this.atLeastOneColumnChecked = this.columns.some((dt) => dt.active);
+        this.saveColumnState();
+    }
+    /**
+     * Compute minimum table width based on active column widths
+     */
+    getTableMinWidth() {
+        return this.columns
+            .filter((c) => c.active)
+            .reduce((sum, c) => sum + (c.width ?? 150), 0);
+    }
+    /**
+     * Select/deselect all columns
+     */
+    activeAllSelection(event) {
+        const checked = event.target.checked;
+        this.columns.forEach((col) => {
+            col.active = checked;
+        });
+        this.activeAll = checked;
+        this.saveColumnState();
+    }
+    /**
+     * Hide settings
+     */
+    hideSettings() {
+        this.onHideSettings.emit();
+    }
+    /**
+     * Close all menus
+     */
+    onClickOutside() {
+        this.activeFilterIndex = null;
+        this.showPin = false;
+        this.menuVisible = this.menuVisible.map(() => false);
+    }
+    /**
+     * Open column menu
+     */
+    openMenu(event, col, index) {
+        event.stopPropagation();
+        this.activeFilterIndex = null;
+        this.showPin = false;
+        this.menuVisible = this.menuVisible.map(() => false);
+        this.menuVisible[index] = true;
+    }
+    /**
+     * On header checkbox change
+     */
+    onHeaderCheckboxChange(event) {
+        if (event.target.checked) {
+            this.selectedRow = [...this.data];
+        }
+        else {
+            this.selectedRow = [];
+        }
+    }
+    /**
+     * On row checkbox change
+     */
+    onRowCheckboxChange(event, node) {
+        if (event.target.checked) {
+            if (!this.selectedRow.includes(node)) {
+                this.selectedRow.push(node);
+            }
+        }
+        else {
+            this.selectedRow = this.selectedRow.filter((r) => r !== node);
+        }
+    }
+    /**
+     * Check if all rows are selected
+     */
+    checkAllSelected() {
+        return this.selectedRow.length === this.data.length && this.data.length > 0;
+    }
+    /**
+     * Check if some rows are selected (indeterminate state)
+     */
+    checkIndeterminate() {
+        return this.selectedRow.length > 0 && this.selectedRow.length < this.data.length;
+    }
+    /**
+     * Check if row is selected
+     */
+    isRowSelected(node) {
+        return this.selectedRow.includes(node);
+    }
+    toggle(node, level, path) {
+        const key = this.getNodeKey(node);
+        if (this.expandedKeys.has(key)) {
+            this.expandedKeys.delete(key);
+            this.nodeToggle.emit({ node, level, path, expanded: false });
+            this.rebuildRows();
+            return;
+        }
+        this.expandedKeys.add(key);
+        if (this.emitExpandAlways || this.getChildren(node) == null) {
+            this.nodeToggle.emit({ node, level, path, expanded: true });
+        }
+        this.rebuildRows();
+    }
+    isExpanded(node) {
+        return this.expandedKeys.has(this.getNodeKey(node));
+    }
+    onCheckboxChange(node, level, path, checked) {
+        const key = this.getNodeKey(node);
+        if (checked) {
+            this.selectedKeys.add(key);
+        }
+        else {
+            this.selectedKeys.delete(key);
+        }
+        this.selectionChange.emit({
+            node,
+            level,
+            path,
+            checked,
+            selectedNodes: this.getSelectedNodes(),
+        });
+    }
+    isChecked(node) {
+        return this.selectedKeys.has(this.getNodeKey(node));
+    }
+    onLinkClicked(e, node, level, path) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.linkClick.emit({ node, level, path, url: this.linkResolver(node, level, path) });
+    }
+    resolveIconSrc(icon) {
+        if (!icon)
+            return null;
+        if (icon.includes('/') || icon.startsWith('http://') || icon.startsWith('https://')) {
+            return icon;
+        }
+        return `${this.iconBasePath}/${icon}`;
+    }
+    getValue(node, fieldPath) {
+        if (!fieldPath)
+            return '';
+        const parts = fieldPath.split('.');
+        let cur = node;
+        for (const part of parts) {
+            if (cur == null)
+                return '';
+            cur = cur?.[part];
+        }
+        return cur ?? '';
+    }
+    isNodeRow(row) {
+        return row.kind === 'node';
+    }
+    rowOptions(row) {
+        return this.rowOptionsResolver(row.node, row.level, row.path) || {};
+    }
+    showToggleFor(row) {
+        const opts = this.rowOptions(row);
+        if (opts.showToggle === false)
+            return false;
+        return this.isExpandable(row.node, row.level, row.path);
+    }
+    showCheckboxFor(row) {
+        const opts = this.rowOptions(row);
+        if (opts.showCheckbox != null)
+            return !!opts.showCheckbox;
+        return this.showCheckbox;
+    }
+    showNodeIconFor(row) {
+        const opts = this.rowOptions(row);
+        if (opts.showNodeIcon != null)
+            return !!opts.showNodeIcon;
+        return this.showNodeIcon;
+    }
+    showLinkFor(row) {
+        const opts = this.rowOptions(row);
+        if (opts.showLink != null)
+            return !!opts.showLink;
+        return this.linkResolver(row.node, row.level, row.path) != null;
+    }
+    isDisabledRow(row) {
+        return !!this.rowOptions(row)?.disabled;
+    }
+    labelFor(row) {
+        return this.getValue(row.node, this.labelField);
+    }
+    toggleIconFor(row) {
+        return this.isExpanded(row.node) ? this.collapseIcon : this.expandIcon;
+    }
+    nodeIconFor(row) {
+        return this.nodeIconResolver(row.node, row.level, row.path);
+    }
+    linkUrlFor(row) {
+        return this.linkResolver(row.node, row.level, row.path);
+    }
+    getChildren(node) {
+        return node?.[this.childrenField];
+    }
+    rebuildRows() {
+        const next = [];
+        for (const root of this.data || []) {
+            this.walk(root, 0, [], next);
+        }
+        this.rows = next;
+    }
+    walk(node, level, parentPath, out) {
+        const path = [...parentPath, node];
+        out.push({
+            kind: 'node',
+            node,
+            level,
+            path,
+            trackKey: this.getNodeKey(node),
+        });
+        if (!this.isExpanded(node) || !this.isExpandable(node, level, path))
+            return;
+        const children = this.getChildren(node);
+        if (children == null) {
+            out.push({
+                kind: 'loading',
+                node,
+                level: level + 1,
+                path,
+                trackKey: `${this.getNodeKey(node)}::loading`,
+            });
+            return;
+        }
+        if (!Array.isArray(children) || children.length === 0) {
+            out.push({
+                kind: 'no-data',
+                node,
+                level: level + 1,
+                path,
+                trackKey: `${this.getNodeKey(node)}::no-data`,
+            });
+            return;
+        }
+        for (const child of children) {
+            this.walk(child, level + 1, path, out);
+        }
+    }
+    getNodeKey(node) {
+        const anyNode = node;
+        const direct = anyNode?.[this.idField];
+        if (direct != null)
+            return direct;
+        if (typeof node === 'object' && node != null) {
+            const existing = this.fallbackKey.get(node);
+            if (existing != null)
+                return existing;
+            const next = this.fallbackSeq++;
+            this.fallbackKey.set(node, next);
+            return next;
+        }
+        return String(node);
+    }
+    getSelectedNodes() {
+        const selected = [];
+        const visit = (nodes) => {
+            for (const n of nodes) {
+                if (this.selectedKeys.has(this.getNodeKey(n)))
+                    selected.push(n);
+                const children = this.getChildren(n);
+                if (Array.isArray(children) && children.length > 0)
+                    visit(children);
+            }
+        };
+        visit(this.data || []);
+        return selected;
+    }
+    /**
+     * Autosize column to fit content
+     */
+    autosizeColumn(col, index) {
+        const min = col.minWidth ?? 50;
+        const max = col.maxWidth ?? 500;
+        const estimatedWidth = Math.min(Math.max(150, min), max);
+        col.width = estimatedWidth;
+        this.updatePinnedOffsets();
+    }
+    /**
+     * Autosize all columns
+     */
+    autosizeAllColumns() {
+        this.columns.forEach((col) => {
+            const min = col.minWidth ?? 50;
+            const max = col.maxWidth ?? 500;
+            const estimatedWidth = Math.min(Math.max(150, min), max);
+            col.width = estimatedWidth;
+        });
+        this.updatePinnedOffsets();
+    }
+    /**
+     * Group by column
+     */
+    groupByColumn(col, index) {
+        // Emit event or handle grouping logic
+        console.log('Group by column:', col.field);
+    }
+    /**
+     * Show column chooser
+     */
+    showColumnChooser(colIdx) {
+        // Toggle settings to show column chooser
+        this.onClickOutside();
+    }
+    /**
+     * Reset columns to original state
+     */
+    resetColumns() {
+        if (this.originalColumns.length > 0) {
+            this.columns = structuredClone(this.originalColumns);
+            this.rebuildRows();
+        }
+    }
+    /**
+     * Save column state
+     */
+    saveColumnState() {
+        if (this.originalColumns.length === 0) {
+            this.originalColumns = structuredClone(this.columns);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonTreeTableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommonTreeTableComponent, isStandalone: true, selector: "cats-tree-table", inputs: { data: "data", columns: "columns", idField: "idField", labelField: "labelField", childrenField: "childrenField", treeColumnField: "treeColumnField", indentPx: "indentPx", showHeader: "showHeader", expandIcon: "expandIcon", collapseIcon: "collapseIcon", iconBasePath: "iconBasePath", showCheckbox: "showCheckbox", showNodeIcon: "showNodeIcon", noDataText: "noDataText", loadingText: "loadingText", emitExpandAlways: "emitExpandAlways", sortingRequired: "sortingRequired", filterRequired: "filterRequired", threeDotsMenuRequired: "threeDotsMenuRequired", settingsRequired: "settingsRequired", settingsClicked: "settingsClicked", checkBoxSelection: "checkBoxSelection", checkboxSelectionType: "checkboxSelectionType", isExpandable: "isExpandable", rowOptionsResolver: "rowOptionsResolver", nodeIconResolver: "nodeIconResolver", linkResolver: "linkResolver" }, outputs: { nodeToggle: "nodeToggle", selectionChange: "selectionChange", linkClick: "linkClick", onHideSettings: "onHideSettings" }, viewQueries: [{ propertyName: "tableAreaRef", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "pinMenu", first: true, predicate: ["pinMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\" #table [class.is-resizing]=\"isResizing\">\n  <!-- Settings Panel for Column Selection -->\n  @if (settingsRequired && settingsClicked) {\n    <div class=\"setting_options\" appOutsideClick (clickOutside)=\"hideSettings()\">\n      <div class=\"column_header\">Select Headers</div>\n      <div class=\"checkbox_container\">\n        <input\n          class=\"custom_check_box\"\n          type=\"checkbox\"\n          [checked]=\"activeAll\"\n          (change)=\"activeAllSelection($event)\"\n        />\n        <span>Select All</span>\n      </div>\n\n      <div class=\"item_container\" id=\"table_scroll\">\n        @for (col of columns; track col.field) {\n          <div class=\"column_item checkbox_container\">\n            <input\n              class=\"custom_check_box\"\n              type=\"checkbox\"\n              [checked]=\"col.active\"\n              (change)=\"changeActiveColSelection($event, col)\"\n            />\n            <span>{{ col.header || col.field | titlecase }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Main Table Wrapper -->\n  <div class=\"table_wrapper global\" id=\"table_scroll\" #parent>\n    <div class=\"table-inner-wrapper\">\n      <table cellspacing=\"0\" cellpadding=\"0\" >\n        <thead class=\"sticky-top\">\n          <tr>\n            <!-- Checkbox header column -->\n            @if (checkBoxSelection && atLeastOneColumnChecked) {\n              <th style=\"min-width: 50px; width: 50px; max-width: 50px\">\n                <div class=\"th_wraper\">\n                  <div class=\"checkbox_container\">\n                    <input\n                      class=\"pointer custom_check_box\"\n                      type=\"checkbox\"\n                      [checked]=\"checkAllSelected()\"\n                      [indeterminate]=\"checkIndeterminate()\"\n                      (change)=\"onHeaderCheckboxChange($event)\"\n                    />\n                  </div>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <span class=\"resize-handle default_cursor\"> | </span>\n                  </div>\n                </div>\n              </th>\n            }\n\n            <!-- Column Headers -->\n            @for (col of columns; track col.field; let colIdx = $index) {\n              @if (col.active !== false) {\n                <th\n                  [ngStyle]=\"getStyle(col)\"\n                  [attr.data-col-idx]=\"colIdx\"\n                  [ngClass]=\"{\n                    'drag-over': dragOverIndex === colIdx,\n                    'pinned_column': col.leftPinned || col.rightPinned\n                  }\"\n                  (mouseenter)=\"showMoveIcon[colIdx] = true\"\n                  (mouseleave)=\"showMoveIcon[colIdx] = false\"\n                >\n                  <div class=\"th_wraper\">\n                    <!-- Sortable column header -->\n                    <div\n                      class=\"text_wrapper\"\n                      [ngClass]=\"{ sortable: col.sortable }\"\n                      (click)=\"onSortingRowData(colIdx, col)\"\n                    >\n                      @if (showMoveIcon[colIdx] && col.sortable) {\n                        <img\n                          src=\"images/t-move.svg\"\n                          class=\"move-icon\"\n                          [draggable]=\"!isResizing\"\n                          (dragstart)=\"onDragStart($event, colIdx)\"\n                          (dragend)=\"onDragEnd()\"\n                        />\n                      }\n                      <span class=\"ellipsis headerName\">{{ col.header || col.field }}</span>\n\n                      <!-- Sorting indicator -->\n                      @if (\n                        sortingRequired &&\n                        sortingColumnIndex === colIdx &&\n                        col.sortable\n                      ) {\n                        <span class=\"sorting_icon\">\n                          @if (sortingType[colIdx] === 'asc') {\n                            <img src=\"images/sort-ascending.svg\" alt=\"Ascending\" />\n                          } @else if (sortingType[colIdx] === 'dsc') {\n                            <img src=\"images/sort-descending.svg\" alt=\"Descending\" />\n                          }\n                        </span>\n                      }\n                    </div>\n\n                    <!-- Filter and Menu -->\n                    <div class=\"filter_three_dot_wrapper\">\n                      <!-- Filter Icon -->\n                      @if (filterRequired && col.filterable) {\n                        <div\n                          class=\"filters\"\n                          (click)=\"toggleFilter(col, colIdx, $event)\"\n                        >\n                          @if (activeFilters.has(col.field)) {\n                            <img src=\"images/filter-active.svg\" alt=\"Filter active\" />\n                          } @else {\n                            <img src=\"images/filter.svg\" alt=\"Filter\" />\n                          }\n\n                          <!-- Filter Dropdown -->\n                          @if (activeFilterIndex === colIdx) {\n                            <div\n                              class=\"filter_dropdown\"\n                              (click)=\"$event.stopPropagation()\"\n                            >\n                              <!-- Text Filter -->\n                              @if (col.filterType === 'text') {\n                                <div class=\"filter_input_group\">\n                                  <select\n                                    [ngModel]=\"col.filters?.[0]?.filterOperation\"\n                                    (ngModelChange)=\"col.filters![0].filterOperation = $event; applyAllFilters()\"\n                                  >\n                                    @for (opt of filterOptions; track opt.value) {\n                                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                                    }\n                                  </select>\n                                  <input\n                                    type=\"text\"\n                                    class=\"search_input\"\n                                    placeholder=\"Filter\u2026\"\n                                    [(ngModel)]=\"col.filters![0].filterValue\"\n                                    (keyup)=\"applyAllFilters()\"\n                                  />\n                                </div>\n\n                                @if (col.filters![0].filterValue) {\n                                  <div class=\"filter_input_group\">\n                                    <select\n                                      [ngModel]=\"col.filters![1]?.filterOperation\"\n                                      (ngModelChange)=\"col.filters![1].filterOperation = $event; applyAllFilters()\"\n                                    >\n                                      @for (opt of filterOptions; track opt.value) {\n                                        <option [value]=\"opt.value\">{{ opt.label }}</option>\n                                      }\n                                    </select>\n                                    <input\n                                      type=\"text\"\n                                      class=\"search_input\"\n                                      placeholder=\"And filter\u2026\"\n                                      [(ngModel)]=\"col.filters![1].filterValue\"\n                                      (keyup)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n                                }\n                              }\n\n                              <!-- Number Filter -->\n                              @if (col.filterType === 'number') {\n                                <div class=\"filter_input_group\">\n                                  <select\n                                    [ngModel]=\"col.filters?.[0]?.filterOperation\"\n                                    (ngModelChange)=\"col.filters![0].filterOperation = $event; applyAllFilters()\"\n                                  >\n                                    @for (opt of numberFilterOptions; track opt.value) {\n                                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                                    }\n                                  </select>\n                                  <input\n                                    type=\"number\"\n                                    class=\"search_input\"\n                                    placeholder=\"Filter\u2026\"\n                                    [(ngModel)]=\"col.filters![0].filterValue\"\n                                    (keyup)=\"applyAllFilters()\"\n                                  />\n                                </div>\n                              }\n\n                              <!-- Set Filter (Checkboxes) -->\n                              @if (col.filterType === 'set') {\n                                <div class=\"search_input\">\n                                  <input\n                                    type=\"text\"\n                                    placeholder=\"Search...\"\n                                    (input)=\"filterSetOptions(col, $event)\"\n                                  />\n                                </div>\n\n                                <div class=\"set_option_details\">\n                                  <label>\n                                    <input\n                                      type=\"checkbox\"\n                                      [checked]=\"\n                                        col.options?.length === col.selectedValues?.size\n                                      \"\n                                      (change)=\"toggleSelectAllSetFilter(col, $event)\"\n                                    />\n                                    <span>Select All</span>\n                                  </label>\n\n                                  @for (\n                                    option of col.filteredOptions;\n                                    track option\n                                  ) {\n                                    <label>\n                                      <input\n                                        type=\"checkbox\"\n                                        [checked]=\"\n                                          col.selectedValues?.has(option)\n                                        \"\n                                        (change)=\"toggleSetOption(col, option, $event)\"\n                                      />\n                                      <span>{{ option }}</span>\n                                    </label>\n                                  }\n                                </div>\n                              }\n\n                              <div class=\"filter_btn\">\n                                <button (click)=\"resetFilter(col)\">Clear</button>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      <!-- Three dots menu-->\n                      <div #triggerColMenu>\n                        @if (threeDotsMenuRequired) {\n                          <div\n                            class=\"three-dots\"\n                            (click)=\"openMenu($event, col, colIdx)\"\n                          >\n                            <img\n                              src=\"images/t-more-vertical.svg\"\n                              alt=\"Menu\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Column Resize Handle -->\n                      <span\n                        class=\"resize-handle\"\n                        (mousedown)=\"startResize($event, colIdx)\"\n                      >\n                        |\n\t                      </span>\n\t                    </div>\n\t                  </div>\n\n\t                  @if (menuVisible[colIdx]) {\n\t                    <div\n\t                      #colActionMenu\n\t                      class=\"dropdown_wrapper\"\n\t                      adaptivePosition\n\t                      [trigger]=\"triggerColMenu\"\n\t                      [parentContainer]=\"parent\"\n\t                      [matchWidth]=\"false\"\n\t                      [isColumnActionMenu]=\"true\"\n\t                      (click)=\"$event.stopPropagation()\"\n\t                      appOutsideClick\n\t                      (clickOutside)=\"onClickOutside()\"\n\t                    >\n\t                      <div class=\"right_click_dropdown\" id=\"table_scroll\">\n\t                        <!-- Sort Ascending -->\n\t                        @if (sortingType[colIdx] === 'dsc' || !sortingType[colIdx]) {\n\t                          <div class=\"right_click_item\" (click)=\"onSort(col, 'asc', colIdx)\">\n\t                            <div class=\"left_item\">\n\t                              <img\n\t                                src=\"images/arrow-up.svg\"\n\t                                class=\"sorting_up\"\n\t                                [ngClass]=\"{ disable: !col.sortable }\"\n\t                              />\n\t                              <span class=\"text\">Sort Ascending</span>\n\t                            </div>\n\t                          </div>\n\t                        }\n\n\t                        <!-- Sort Descending -->\n\t                        @if (sortingType[colIdx] === 'asc' || !sortingType[colIdx]) {\n\t                          <div class=\"right_click_item\" (click)=\"onSort(col, 'dsc', colIdx)\">\n\t                            <div class=\"left_item\">\n\t                              <img src=\"images/arrow-down.svg\" alt=\"\" />\n\t                              <span class=\"text\">Sort Descending</span>\n\t                            </div>\n\t                          </div>\n\t                        }\n\n\t                        <!-- Clear Sort -->\n\t                        @if (sortingType[colIdx] === 'asc' || sortingType[colIdx] === 'dsc') {\n\t                          <div class=\"right_click_item\" (click)=\"onSort(col, '', colIdx)\">\n\t                            <div class=\"left_item\">\n\t                              <img src=\"images/trash-2.svg\" alt=\"\" />\n\t                              <span class=\"text\">Clear Sort</span>\n\t                            </div>\n\t                          </div>\n\t                        }\n\n\t                        <div class=\"divder\"></div>\n\n\t                        <!-- Pin Column -->\n\t                        <div\n\t                          class=\"right_click_item\"\n\t                          (mouseenter)=\"showPinActions($event)\"\n\t                          (mouseleave)=\"hidePinActions()\"\n\t                        >\n\t                          <div class=\"left_item\">\n\t                            <img src=\"images/pin.svg\" alt=\"\" />\n\t                            <span class=\"text\">Pin Column</span>\n\t                          </div>\n\t                          <div class=\"right_item\">\n\t                            <img src=\"images/chevron-right.svg\" alt=\"\" />\n\t                            @if (showPin) {\n\t                              <div class=\"second_dropdown\" #pinMenu>\n\t                                <div class=\"right_click_item\" (click)=\"pinColumn(col, colIdx, 'none')\">\n\t                                  <div class=\"left_item\">\n\t                                    @if ((pinActionClicked[col.colId || col.field] ) === 'none') {\n\t                                      <img src=\"images/check.svg\" alt=\"\" />\n\t                                    } @else {\n\t                                      <img src=\"\" alt=\"\" />\n\t                                    }\n\t                                    <span class=\"text\">No Pin</span>\n\t                                  </div>\n\t                                </div>\n\t                                <div class=\"right_click_item\" (click)=\"pinColumn(col, colIdx, 'left')\">\n\t                                  <div class=\"left_item\">\n\t                                    @if (pinActionClicked[col.colId || col.field] === 'left') {\n\t                                      <img src=\"images/check.svg\" alt=\"\" />\n\t                                    } @else {\n\t                                      <img src=\"\" alt=\"\" />\n\t                                    }\n\t                                    <span class=\"text\">Pin Left</span>\n\t                                  </div>\n\t                                </div>\n\t                                <div class=\"right_click_item\" (click)=\"pinColumn(col, colIdx, 'right')\">\n\t                                  <div class=\"left_item\">\n\t                                    @if (pinActionClicked[col.colId || col.field] === 'right') {\n\t                                      <img src=\"images/check.svg\" alt=\"\" />\n\t                                    } @else {\n\t                                      <img src=\"\" alt=\"\" />\n\t                                    }\n\t                                    <span class=\"text\">Pin Right</span>\n\t                                  </div>\n\t                                </div>\n\t                              </div>\n\t                            }\n\t                          </div>\n\t                        </div>\n\n\t                        <!-- Autosize This Column -->\n\t                        <div class=\"right_click_item\" (click)=\"autosizeColumn(col, colIdx)\">\n\t                          <div class=\"left_item\">\n\t                            <img src=\"\" alt=\"\" />\n\t                            <span class=\"text\">Autosize This Column</span>\n\t                          </div>\n\t                        </div>\n\n\t                        <!-- Autosize All Columns -->\n\t                        <div class=\"right_click_item\" (click)=\"autosizeAllColumns()\">\n\t                          <div class=\"left_item\">\n\t                            <img src=\"\" alt=\"\" />\n\t                            <span class=\"text\">Autosize All Columns</span>\n\t                          </div>\n\t                        </div>\n\n\t                        <div class=\"divder\"></div>\n\n\t                        <!-- Group by Column -->\n\t                        <div class=\"right_click_item\" (click)=\"groupByColumn(col, colIdx)\">\n\t                          <div class=\"left_item\">\n\t                            <img src=\"\" alt=\"\" />\n\t                            <span class=\"text\">Group by {{ col.header || col.field }}</span>\n\t                          </div>\n\t                        </div>\n\n\t                        <!-- Choose Columns -->\n\t                        <div class=\"right_click_item\" (click)=\"showColumnChooser(colIdx)\">\n\t                          <div class=\"left_item\">\n\t                            <img src=\"\" alt=\"\" />\n\t                            <span class=\"text\">Choose Columns</span>\n\t                          </div>\n\t                        </div>\n\n\t                        <!-- Reset Columns -->\n\t                        <div class=\"right_click_item\" (click)=\"resetColumns()\">\n\t                          <div class=\"left_item\">\n\t                            <img src=\"\" alt=\"\" />\n\t                            <span class=\"text\">Reset Columns</span>\n\t                          </div>\n\t                        </div>\n\t                      </div>\n\t                    </div>\n\t                  }\n\t                </th>\n\t              }\n\t            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @for (row of rows; track row.trackKey) {\n            @if (row.kind === 'node') {\n              <tr [class.disabled]=\"isDisabledRow(row)\">\n                <!-- Checkbox column -->\n                @if (checkBoxSelection && atLeastOneColumnChecked) {\n                  <td style=\"min-width: 50px; max-width: 50px\">\n                    @if (checkboxSelectionType === 'multiple') {\n                      <span class=\"checkbox_container\">\n                        <input\n                          type=\"checkbox\"\n                          [checked]=\"isRowSelected(row.node)\"\n                          (change)=\"onRowCheckboxChange($event, row.node)\"\n                        />\n                      </span>\n                    } @else {\n                      <span class=\"radio_option\">\n                        <input\n                          type=\"radio\"\n                          [name]=\"'row_' + row.trackKey\"\n                          [checked]=\"isRowSelected(row.node)\"\n                          (change)=\"onRowCheckboxChange($event, row.node)\"\n                        />\n                        <label [for]=\"'row_' + row.trackKey\"></label>\n                      </span>\n                    }\n                  </td>\n                }\n\n                <!-- Data columns -->\n                @for (col of columns; track col.field; let colIndex = $index) {\n                  @if (col.active !== false) {\n                    <td\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : ''\n                      ]\"\n                      class=\"table_cell\"\n                    >\n                      @if (col.field === treeColumn.field) {\n                        @if (!col?.cellRenderer) {\n                          <div\n                            class=\"tree_cell\"\n                            [style.padding-left.px]=\"row.level * indentPx\"\n                          >\n                            @if (showToggleFor(row)) {\n                              <button\n                                class=\"toggle_btn\"\n                                type=\"button\"\n                                [disabled]=\"isDisabledRow(row)\"\n                                (click)=\"toggle(row.node, row.level, row.path)\"\n                              >\n                                <img\n                                  [src]=\"resolveIconSrc(toggleIconFor(row))\"\n                                  alt=\"\"\n                                />\n                              </button>\n                            } @else {\n                              <span class=\"toggle_spacer\"></span>\n                            }\n\n                            @if (showCheckboxFor(row)) {\n                              <input\n                                type=\"checkbox\"\n                                [disabled]=\"isDisabledRow(row)\"\n                                [checked]=\"isChecked(row.node)\"\n                                (change)=\"\n                                  onCheckboxChange(\n                                    row.node,\n                                    row.level,\n                                    row.path,\n                                    ($any($event.target).checked)\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (showNodeIconFor(row)) {\n                              @if (nodeIconFor(row); as icon) {\n                                <img\n                                  class=\"node_icon\"\n                                  [src]=\"resolveIconSrc(icon)\"\n                                  alt=\"\"\n                                />\n                              }\n                            }\n\n                            @if (showLinkFor(row) && linkUrlFor(row); as url) {\n                              <a\n                                class=\"node_link\"\n                                [href]=\"url\"\n                                (click)=\"\n                                  onLinkClicked(\n                                    $event,\n                                    row.node,\n                                    row.level,\n                                    row.path\n                                  )\n                                \"\n                              >\n                                {{ labelFor(row) }}\n                              </a>\n                            } @else {\n                              <span class=\"node_label\">{{ labelFor(row) }}</span>\n                            }\n                          </div>\n                        } @else {\n                          <div\n                            [rowParam]=\"row.node\"\n                            [col]=\"col\"\n                            [api]=\"{ treeTableComponent: this }\"\n                            [currentValue]=\"getValue(row.node, col.field)\"\n                            appRendererParser\n                            [style.padding-left.px]=\"row.level * indentPx\"\n                          ></div>\n                        }\n                      } @else {\n                        <div class=\"col_wrapper\">\n                          @if (!col?.cellRenderer) {\n                            {{ getValue(row.node, col.field) }}\n                          } @else {\n                            <div\n                              [rowParam]=\"row.node\"\n                              [col]=\"col\"\n                              [api]=\"{ treeTableComponent: this }\"\n                              [currentValue]=\"getValue(row.node, col.field)\"\n                              appRendererParser\n                            ></div>\n                          }\n                        </div>\n                      }\n                    </td>\n                  }\n                }\n              </tr>\n            } @else if (row.kind === 'loading') {\n              <tr class=\"meta_row\">\n                <td\n                  [attr.colspan]=\"\n                    columns.length + (checkBoxSelection ? 1 : 0)\n                  \"\n                >\n                  <div\n                    class=\"meta_cell\"\n                    [style.padding-left.px]=\"row.level * indentPx\"\n                  >\n                    {{ loadingText }}\n                  </div>\n                </td>\n              </tr>\n            } @else if (row.kind === 'no-data') {\n              <tr class=\"meta_row\">\n                <td\n                  [attr.colspan]=\"\n                    columns.length + (checkBoxSelection ? 1 : 0)\n                  \"\n                >\n                  <div\n                    class=\"meta_cell\"\n                    [style.padding-left.px]=\"row.level * indentPx\"\n                  >\n                    {{ noDataText }}\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n\n      @if (!rows || rows.length === 0) {\n        <div class=\"empty_overlay\">\n          <div class=\"empty_content\">\n            <span>{{ noDataText }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.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].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{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].custom_check_box: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].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;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{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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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))}}.pointer,.cursor-pointer{cursor:pointer}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}.tableArea{width:100%;position:relative;display:flex;flex-direction:column;height:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.tableArea .table_wrapper{position:relative;overflow:auto;flex:1;min-height:calc(16.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(1.3333333333rem / var(--scale));background-color:var(--white)}.tableArea .table_wrapper.global{margin:0}.tableArea .table_wrapper .table-inner-wrapper{position:relative;width:100%}.tableArea .table_wrapper .table-inner-wrapper table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}.tableArea .table_wrapper .table-inner-wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper .table-inner-wrapper table .sticky-top{top:0;position:sticky;z-index:20}.tableArea .table_wrapper .table-inner-wrapper table td,.tableArea .table_wrapper .table-inner-wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--neutral-500);text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-right:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tableArea .table_wrapper .table-inner-wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));background-color:var(--neutral-50)}.tableArea .table_wrapper .table-inner-wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--neutral-50);overflow:visible}.tableArea .table_wrapper .table-inner-wrapper table thead th:hover .text_wrapper{background-color:var(--neutral-200)}.tableArea .table_wrapper .table-inner-wrapper table tbody{background-color:var(--white)}.tableArea .table_wrapper .table-inner-wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:background-color .12s ease-in-out}.tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover,.tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover td{background-color:var(--blue-100)!important}.tableArea .table_wrapper .table-inner-wrapper table tbody tr.disabled{opacity:.6;pointer-events:none}.tableArea .table_wrapper .table-inner-wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));vertical-align:middle;line-height:calc(1.6666666667rem / var(--scale))}.tableArea .table_wrapper .table-inner-wrapper table tbody tr td:hover{background-color:var(--blue-100)!important}.tableArea .table_wrapper.tbody_height{height:calc(100% - 42px)}.tableArea .table_wrapper.no-horizontal-scroll{overflow-x:hidden}.tableArea.is-resizing .table_wrapper table th,.tableArea.is-resizing .table_wrapper table td{will-change:width;transition:width 80ms linear,min-width 80ms linear,max-width 80ms linear}.tableArea .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));position:relative}.tableArea .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;flex:1;min-width:0;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.tableArea .th_wraper .text_wrapper.sortable{-webkit-user-select:none;user-select:none}.tableArea .th_wraper .text_wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .th_wraper .text_wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));cursor:grab;opacity:.6;transition:opacity .2s ease}.tableArea .th_wraper .text_wrapper .move-icon:hover{opacity:1}.tableArea .th_wraper .text_wrapper .ellipsis{flex:1;min-width:0}.tableArea .th_wraper .text_wrapper .headerName{text-transform:uppercase;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500)}.tableArea .th_wraper .text_wrapper .sorting_icon{display:inline-flex;align-items:center;margin-left:calc(.3333333333rem / var(--scale))}.tableArea .th_wraper .text_wrapper .sorting_icon img{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.tableArea .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));min-width:fit-content}.tableArea .th_wraper .filter_three_dot_wrapper .filters,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots{position:relative;display:inline-flex;align-items:center;cursor:pointer;width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.tableArea .th_wraper .filter_three_dot_wrapper .filters img,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters:hover,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots:hover{background:var(--neutral-200)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown{position:absolute;top:calc(2.5rem / var(--scale));left:0;z-index:1000;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;min-width:calc(18.3333333333rem / var(--scale));padding:calc(1rem / var(--scale));max-height:calc(29.1666666667rem / var(--scale));overflow-y:auto}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group{display:flex;flex-direction:column;gap:calc(.6666666667rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group select,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group select{padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;background-color:var(--white);cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group .search_input,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group .search_input{width:100%;padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;font-family:inherit}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group .search_input:focus,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group .search_input:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 calc(.25rem / var(--scale)) #667eea1a}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details{display:flex;flex-direction:column;gap:calc(.6666666667rem / var(--scale));max-height:calc(16.6666666667rem / var(--scale));overflow-y:auto;margin-bottom:calc(1rem / var(--scale))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale));cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-500)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label input[type=checkbox],.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label span,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label span{flex:1}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn{display:flex;justify-content:flex-end;gap:calc(.6666666667rem / var(--scale));padding-top:calc(.6666666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn button,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn button{padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--blue-600);color:var(--white);border:none;border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:600;transition:background-color .2s ease}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn button:hover,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn button:hover{background-color:var(--blue-700)}.tableArea .th_wraper .filter_three_dot_wrapper .resize-handle{cursor:col-resize;color:var(--neutral-200);font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400;padding:0 calc(.3333333333rem / var(--scale));-webkit-user-select:none;user-select:none;width:calc(1rem / var(--scale));text-align:center;flex-shrink:0}.tableArea .th_wraper .filter_three_dot_wrapper .resize-handle:hover{color:var(--neutral-500)}.tableArea .th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.tableArea .tree_cell{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale))}.tableArea .tree_cell .toggle_btn{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.tableArea .tree_cell .toggle_btn:hover{background:var(--neutral-200)}.tableArea .tree_cell .toggle_btn img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .tree_cell .toggle_spacer{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));display:inline-block;flex-shrink:0}.tableArea .tree_cell .node_icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));flex-shrink:0}.tableArea .tree_cell .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tableArea .tree_cell .node_link{color:var(--blue-600);text-decoration:none;cursor:pointer;transition:color .2s ease}.tableArea .tree_cell .node_link:hover{color:var(--blue-700);text-decoration:underline}.tableArea .tree_cell input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .col_wrapper{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tableArea .checkbox_container{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.tableArea .checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.tableArea .radio_option{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.tableArea .radio_option input[type=radio]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .radio_option label{cursor:pointer}.tableArea .meta_row td{background-color:var(--neutral-50);padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale))}.tableArea .meta_cell{color:var(--neutral-400);font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:500;min-height:calc(1.8333333333rem / var(--scale));display:flex;align-items:center}.tableArea .empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6;z-index:10}.tableArea .empty_overlay .empty_content{text-align:center;color:var(--neutral-400);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .setting_options{position:absolute;top:40px;right:0;z-index:1000;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;min-width:calc(20.8333333333rem / var(--scale));max-height:calc(33.3333333333rem / var(--scale));overflow-y:auto}.tableArea .setting_options .column_header{padding:calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);text-transform:uppercase}.tableArea .setting_options .checkbox_container{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .setting_options .checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .setting_options .checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.tableArea .setting_options .item_container{max-height:calc(25rem / var(--scale));overflow-y:auto}.tableArea .setting_options .item_container .column_item{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .setting_options .item_container .column_item:hover{background-color:var(--blue-100)}.tableArea .setting_options .item_container .column_item input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .setting_options .item_container .column_item span{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .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:1000;position:relative;width:calc(26.6666666667rem / var(--scale));right:0}.tableArea .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)}.tableArea .dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.tableArea .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}.tableArea .dropdown_wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.tableArea .dropdown_wrapper .right_click_item:hover,.tableArea .dropdown_wrapper .right_click_item.active{background-color:var(--blue-100)}.tableArea .dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tableArea .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)}.tableArea .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)}.tableArea .dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tableArea .second_dropdown{position:absolute;right:calc(-20.25rem / 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)}.tableArea .pinned_column{background-color:var(--neutral-50)}.tableArea .drag-over{background-color:#e3f2fd}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonTreeTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cats-tree-table', imports: [CommonModule, FormsModule, OutsideClickDirective, AdaptivePositionDirective, RendererParserDirective], template: "<div class=\"tableArea\" #table [class.is-resizing]=\"isResizing\">\n  <!-- Settings Panel for Column Selection -->\n  @if (settingsRequired && settingsClicked) {\n    <div class=\"setting_options\" appOutsideClick (clickOutside)=\"hideSettings()\">\n      <div class=\"column_header\">Select Headers</div>\n      <div class=\"checkbox_container\">\n        <input\n          class=\"custom_check_box\"\n          type=\"checkbox\"\n          [checked]=\"activeAll\"\n          (change)=\"activeAllSelection($event)\"\n        />\n        <span>Select All</span>\n      </div>\n\n      <div class=\"item_container\" id=\"table_scroll\">\n        @for (col of columns; track col.field) {\n          <div class=\"column_item checkbox_container\">\n            <input\n              class=\"custom_check_box\"\n              type=\"checkbox\"\n              [checked]=\"col.active\"\n              (change)=\"changeActiveColSelection($event, col)\"\n            />\n            <span>{{ col.header || col.field | titlecase }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Main Table Wrapper -->\n  <div class=\"table_wrapper global\" id=\"table_scroll\" #parent>\n    <div class=\"table-inner-wrapper\">\n      <table cellspacing=\"0\" cellpadding=\"0\" >\n        <thead class=\"sticky-top\">\n          <tr>\n            <!-- Checkbox header column -->\n            @if (checkBoxSelection && atLeastOneColumnChecked) {\n              <th style=\"min-width: 50px; width: 50px; max-width: 50px\">\n                <div class=\"th_wraper\">\n                  <div class=\"checkbox_container\">\n                    <input\n                      class=\"pointer custom_check_box\"\n                      type=\"checkbox\"\n                      [checked]=\"checkAllSelected()\"\n                      [indeterminate]=\"checkIndeterminate()\"\n                      (change)=\"onHeaderCheckboxChange($event)\"\n                    />\n                  </div>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <span class=\"resize-handle default_cursor\"> | </span>\n                  </div>\n                </div>\n              </th>\n            }\n\n            <!-- Column Headers -->\n            @for (col of columns; track col.field; let colIdx = $index) {\n              @if (col.active !== false) {\n                <th\n                  [ngStyle]=\"getStyle(col)\"\n                  [attr.data-col-idx]=\"colIdx\"\n                  [ngClass]=\"{\n                    'drag-over': dragOverIndex === colIdx,\n                    'pinned_column': col.leftPinned || col.rightPinned\n                  }\"\n                  (mouseenter)=\"showMoveIcon[colIdx] = true\"\n                  (mouseleave)=\"showMoveIcon[colIdx] = false\"\n                >\n                  <div class=\"th_wraper\">\n                    <!-- Sortable column header -->\n                    <div\n                      class=\"text_wrapper\"\n                      [ngClass]=\"{ sortable: col.sortable }\"\n                      (click)=\"onSortingRowData(colIdx, col)\"\n                    >\n                      @if (showMoveIcon[colIdx] && col.sortable) {\n                        <img\n                          src=\"images/t-move.svg\"\n                          class=\"move-icon\"\n                          [draggable]=\"!isResizing\"\n                          (dragstart)=\"onDragStart($event, colIdx)\"\n                          (dragend)=\"onDragEnd()\"\n                        />\n                      }\n                      <span class=\"ellipsis headerName\">{{ col.header || col.field }}</span>\n\n                      <!-- Sorting indicator -->\n                      @if (\n                        sortingRequired &&\n                        sortingColumnIndex === colIdx &&\n                        col.sortable\n                      ) {\n                        <span class=\"sorting_icon\">\n                          @if (sortingType[colIdx] === 'asc') {\n                            <img src=\"images/sort-ascending.svg\" alt=\"Ascending\" />\n                          } @else if (sortingType[colIdx] === 'dsc') {\n                            <img src=\"images/sort-descending.svg\" alt=\"Descending\" />\n                          }\n                        </span>\n                      }\n                    </div>\n\n                    <!-- Filter and Menu -->\n                    <div class=\"filter_three_dot_wrapper\">\n                      <!-- Filter Icon -->\n                      @if (filterRequired && col.filterable) {\n                        <div\n                          class=\"filters\"\n                          (click)=\"toggleFilter(col, colIdx, $event)\"\n                        >\n                          @if (activeFilters.has(col.field)) {\n                            <img src=\"images/filter-active.svg\" alt=\"Filter active\" />\n                          } @else {\n                            <img src=\"images/filter.svg\" alt=\"Filter\" />\n                          }\n\n                          <!-- Filter Dropdown -->\n                          @if (activeFilterIndex === colIdx) {\n                            <div\n                              class=\"filter_dropdown\"\n                              (click)=\"$event.stopPropagation()\"\n                            >\n                              <!-- Text Filter -->\n                              @if (col.filterType === 'text') {\n                                <div class=\"filter_input_group\">\n                                  <select\n                                    [ngModel]=\"col.filters?.[0]?.filterOperation\"\n                                    (ngModelChange)=\"col.filters![0].filterOperation = $event; applyAllFilters()\"\n                                  >\n                                    @for (opt of filterOptions; track opt.value) {\n                                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                                    }\n                                  </select>\n                                  <input\n                                    type=\"text\"\n                                    class=\"search_input\"\n                                    placeholder=\"Filter\u2026\"\n                                    [(ngModel)]=\"col.filters![0].filterValue\"\n                                    (keyup)=\"applyAllFilters()\"\n                                  />\n                                </div>\n\n                                @if (col.filters![0].filterValue) {\n                                  <div class=\"filter_input_group\">\n                                    <select\n                                      [ngModel]=\"col.filters![1]?.filterOperation\"\n                                      (ngModelChange)=\"col.filters![1].filterOperation = $event; applyAllFilters()\"\n                                    >\n                                      @for (opt of filterOptions; track opt.value) {\n                                        <option [value]=\"opt.value\">{{ opt.label }}</option>\n                                      }\n                                    </select>\n                                    <input\n                                      type=\"text\"\n                                      class=\"search_input\"\n                                      placeholder=\"And filter\u2026\"\n                                      [(ngModel)]=\"col.filters![1].filterValue\"\n                                      (keyup)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n                                }\n                              }\n\n                              <!-- Number Filter -->\n                              @if (col.filterType === 'number') {\n                                <div class=\"filter_input_group\">\n                                  <select\n                                    [ngModel]=\"col.filters?.[0]?.filterOperation\"\n                                    (ngModelChange)=\"col.filters![0].filterOperation = $event; applyAllFilters()\"\n                                  >\n                                    @for (opt of numberFilterOptions; track opt.value) {\n                                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                                    }\n                                  </select>\n                                  <input\n                                    type=\"number\"\n                                    class=\"search_input\"\n                                    placeholder=\"Filter\u2026\"\n                                    [(ngModel)]=\"col.filters![0].filterValue\"\n                                    (keyup)=\"applyAllFilters()\"\n                                  />\n                                </div>\n                              }\n\n                              <!-- Set Filter (Checkboxes) -->\n                              @if (col.filterType === 'set') {\n                                <div class=\"search_input\">\n                                  <input\n                                    type=\"text\"\n                                    placeholder=\"Search...\"\n                                    (input)=\"filterSetOptions(col, $event)\"\n                                  />\n                                </div>\n\n                                <div class=\"set_option_details\">\n                                  <label>\n                                    <input\n                                      type=\"checkbox\"\n                                      [checked]=\"\n                                        col.options?.length === col.selectedValues?.size\n                                      \"\n                                      (change)=\"toggleSelectAllSetFilter(col, $event)\"\n                                    />\n                                    <span>Select All</span>\n                                  </label>\n\n                                  @for (\n                                    option of col.filteredOptions;\n                                    track option\n                                  ) {\n                                    <label>\n                                      <input\n                                        type=\"checkbox\"\n                                        [checked]=\"\n                                          col.selectedValues?.has(option)\n                                        \"\n                                        (change)=\"toggleSetOption(col, option, $event)\"\n                                      />\n                                      <span>{{ option }}</span>\n                                    </label>\n                                  }\n                                </div>\n                              }\n\n                              <div class=\"filter_btn\">\n                                <button (click)=\"resetFilter(col)\">Clear</button>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      <!-- Three dots menu-->\n                      <div #triggerColMenu>\n                        @if (threeDotsMenuRequired) {\n                          <div\n                            class=\"three-dots\"\n                            (click)=\"openMenu($event, col, colIdx)\"\n                          >\n                            <img\n                              src=\"images/t-more-vertical.svg\"\n                              alt=\"Menu\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Column Resize Handle -->\n                      <span\n                        class=\"resize-handle\"\n                        (mousedown)=\"startResize($event, colIdx)\"\n                      >\n                        |\n\t                      </span>\n\t                    </div>\n\t                  </div>\n\n\t                  @if (menuVisible[colIdx]) {\n\t                    <div\n\t                      #colActionMenu\n\t                      class=\"dropdown_wrapper\"\n\t                      adaptivePosition\n\t                      [trigger]=\"triggerColMenu\"\n\t                      [parentContainer]=\"parent\"\n\t                      [matchWidth]=\"false\"\n\t                      [isColumnActionMenu]=\"true\"\n\t                      (click)=\"$event.stopPropagation()\"\n\t                      appOutsideClick\n\t                      (clickOutside)=\"onClickOutside()\"\n\t                    >\n\t                      <div class=\"right_click_dropdown\" id=\"table_scroll\">\n\t                        <!-- Sort Ascending -->\n\t                        @if (sortingType[colIdx] === 'dsc' || !sortingType[colIdx]) {\n\t                          <div class=\"right_click_item\" (click)=\"onSort(col, 'asc', colIdx)\">\n\t                            <div class=\"left_item\">\n\t                              <img\n\t                                src=\"images/arrow-up.svg\"\n\t                                class=\"sorting_up\"\n\t                                [ngClass]=\"{ disable: !col.sortable }\"\n\t                              />\n\t                              <span class=\"text\">Sort Ascending</span>\n\t                            </div>\n\t                          </div>\n\t                        }\n\n\t                        <!-- Sort Descending -->\n\t                        @if (sortingType[colIdx] === 'asc' || !sortingType[colIdx]) {\n\t                          <div class=\"right_click_item\" (click)=\"onSort(col, 'dsc', colIdx)\">\n\t                            <div class=\"left_item\">\n\t                              <img src=\"images/arrow-down.svg\" alt=\"\" />\n\t                              <span class=\"text\">Sort Descending</span>\n\t                            </div>\n\t                          </div>\n\t                        }\n\n\t                        <!-- Clear Sort -->\n\t                        @if (sortingType[colIdx] === 'asc' || sortingType[colIdx] === 'dsc') {\n\t                          <div class=\"right_click_item\" (click)=\"onSort(col, '', colIdx)\">\n\t                            <div class=\"left_item\">\n\t                              <img src=\"images/trash-2.svg\" alt=\"\" />\n\t                              <span class=\"text\">Clear Sort</span>\n\t                            </div>\n\t                          </div>\n\t                        }\n\n\t                        <div class=\"divder\"></div>\n\n\t                        <!-- Pin Column -->\n\t                        <div\n\t                          class=\"right_click_item\"\n\t                          (mouseenter)=\"showPinActions($event)\"\n\t                          (mouseleave)=\"hidePinActions()\"\n\t                        >\n\t                          <div class=\"left_item\">\n\t                            <img src=\"images/pin.svg\" alt=\"\" />\n\t                            <span class=\"text\">Pin Column</span>\n\t                          </div>\n\t                          <div class=\"right_item\">\n\t                            <img src=\"images/chevron-right.svg\" alt=\"\" />\n\t                            @if (showPin) {\n\t                              <div class=\"second_dropdown\" #pinMenu>\n\t                                <div class=\"right_click_item\" (click)=\"pinColumn(col, colIdx, 'none')\">\n\t                                  <div class=\"left_item\">\n\t                                    @if ((pinActionClicked[col.colId || col.field] ) === 'none') {\n\t                                      <img src=\"images/check.svg\" alt=\"\" />\n\t                                    } @else {\n\t                                      <img src=\"\" alt=\"\" />\n\t                                    }\n\t                                    <span class=\"text\">No Pin</span>\n\t                                  </div>\n\t                                </div>\n\t                                <div class=\"right_click_item\" (click)=\"pinColumn(col, colIdx, 'left')\">\n\t                                  <div class=\"left_item\">\n\t                                    @if (pinActionClicked[col.colId || col.field] === 'left') {\n\t                                      <img src=\"images/check.svg\" alt=\"\" />\n\t                                    } @else {\n\t                                      <img src=\"\" alt=\"\" />\n\t                                    }\n\t                                    <span class=\"text\">Pin Left</span>\n\t                                  </div>\n\t                                </div>\n\t                                <div class=\"right_click_item\" (click)=\"pinColumn(col, colIdx, 'right')\">\n\t                                  <div class=\"left_item\">\n\t                                    @if (pinActionClicked[col.colId || col.field] === 'right') {\n\t                                      <img src=\"images/check.svg\" alt=\"\" />\n\t                                    } @else {\n\t                                      <img src=\"\" alt=\"\" />\n\t                                    }\n\t                                    <span class=\"text\">Pin Right</span>\n\t                                  </div>\n\t                                </div>\n\t                              </div>\n\t                            }\n\t                          </div>\n\t                        </div>\n\n\t                        <!-- Autosize This Column -->\n\t                        <div class=\"right_click_item\" (click)=\"autosizeColumn(col, colIdx)\">\n\t                          <div class=\"left_item\">\n\t                            <img src=\"\" alt=\"\" />\n\t                            <span class=\"text\">Autosize This Column</span>\n\t                          </div>\n\t                        </div>\n\n\t                        <!-- Autosize All Columns -->\n\t                        <div class=\"right_click_item\" (click)=\"autosizeAllColumns()\">\n\t                          <div class=\"left_item\">\n\t                            <img src=\"\" alt=\"\" />\n\t                            <span class=\"text\">Autosize All Columns</span>\n\t                          </div>\n\t                        </div>\n\n\t                        <div class=\"divder\"></div>\n\n\t                        <!-- Group by Column -->\n\t                        <div class=\"right_click_item\" (click)=\"groupByColumn(col, colIdx)\">\n\t                          <div class=\"left_item\">\n\t                            <img src=\"\" alt=\"\" />\n\t                            <span class=\"text\">Group by {{ col.header || col.field }}</span>\n\t                          </div>\n\t                        </div>\n\n\t                        <!-- Choose Columns -->\n\t                        <div class=\"right_click_item\" (click)=\"showColumnChooser(colIdx)\">\n\t                          <div class=\"left_item\">\n\t                            <img src=\"\" alt=\"\" />\n\t                            <span class=\"text\">Choose Columns</span>\n\t                          </div>\n\t                        </div>\n\n\t                        <!-- Reset Columns -->\n\t                        <div class=\"right_click_item\" (click)=\"resetColumns()\">\n\t                          <div class=\"left_item\">\n\t                            <img src=\"\" alt=\"\" />\n\t                            <span class=\"text\">Reset Columns</span>\n\t                          </div>\n\t                        </div>\n\t                      </div>\n\t                    </div>\n\t                  }\n\t                </th>\n\t              }\n\t            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @for (row of rows; track row.trackKey) {\n            @if (row.kind === 'node') {\n              <tr [class.disabled]=\"isDisabledRow(row)\">\n                <!-- Checkbox column -->\n                @if (checkBoxSelection && atLeastOneColumnChecked) {\n                  <td style=\"min-width: 50px; max-width: 50px\">\n                    @if (checkboxSelectionType === 'multiple') {\n                      <span class=\"checkbox_container\">\n                        <input\n                          type=\"checkbox\"\n                          [checked]=\"isRowSelected(row.node)\"\n                          (change)=\"onRowCheckboxChange($event, row.node)\"\n                        />\n                      </span>\n                    } @else {\n                      <span class=\"radio_option\">\n                        <input\n                          type=\"radio\"\n                          [name]=\"'row_' + row.trackKey\"\n                          [checked]=\"isRowSelected(row.node)\"\n                          (change)=\"onRowCheckboxChange($event, row.node)\"\n                        />\n                        <label [for]=\"'row_' + row.trackKey\"></label>\n                      </span>\n                    }\n                  </td>\n                }\n\n                <!-- Data columns -->\n                @for (col of columns; track col.field; let colIndex = $index) {\n                  @if (col.active !== false) {\n                    <td\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : ''\n                      ]\"\n                      class=\"table_cell\"\n                    >\n                      @if (col.field === treeColumn.field) {\n                        @if (!col?.cellRenderer) {\n                          <div\n                            class=\"tree_cell\"\n                            [style.padding-left.px]=\"row.level * indentPx\"\n                          >\n                            @if (showToggleFor(row)) {\n                              <button\n                                class=\"toggle_btn\"\n                                type=\"button\"\n                                [disabled]=\"isDisabledRow(row)\"\n                                (click)=\"toggle(row.node, row.level, row.path)\"\n                              >\n                                <img\n                                  [src]=\"resolveIconSrc(toggleIconFor(row))\"\n                                  alt=\"\"\n                                />\n                              </button>\n                            } @else {\n                              <span class=\"toggle_spacer\"></span>\n                            }\n\n                            @if (showCheckboxFor(row)) {\n                              <input\n                                type=\"checkbox\"\n                                [disabled]=\"isDisabledRow(row)\"\n                                [checked]=\"isChecked(row.node)\"\n                                (change)=\"\n                                  onCheckboxChange(\n                                    row.node,\n                                    row.level,\n                                    row.path,\n                                    ($any($event.target).checked)\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (showNodeIconFor(row)) {\n                              @if (nodeIconFor(row); as icon) {\n                                <img\n                                  class=\"node_icon\"\n                                  [src]=\"resolveIconSrc(icon)\"\n                                  alt=\"\"\n                                />\n                              }\n                            }\n\n                            @if (showLinkFor(row) && linkUrlFor(row); as url) {\n                              <a\n                                class=\"node_link\"\n                                [href]=\"url\"\n                                (click)=\"\n                                  onLinkClicked(\n                                    $event,\n                                    row.node,\n                                    row.level,\n                                    row.path\n                                  )\n                                \"\n                              >\n                                {{ labelFor(row) }}\n                              </a>\n                            } @else {\n                              <span class=\"node_label\">{{ labelFor(row) }}</span>\n                            }\n                          </div>\n                        } @else {\n                          <div\n                            [rowParam]=\"row.node\"\n                            [col]=\"col\"\n                            [api]=\"{ treeTableComponent: this }\"\n                            [currentValue]=\"getValue(row.node, col.field)\"\n                            appRendererParser\n                            [style.padding-left.px]=\"row.level * indentPx\"\n                          ></div>\n                        }\n                      } @else {\n                        <div class=\"col_wrapper\">\n                          @if (!col?.cellRenderer) {\n                            {{ getValue(row.node, col.field) }}\n                          } @else {\n                            <div\n                              [rowParam]=\"row.node\"\n                              [col]=\"col\"\n                              [api]=\"{ treeTableComponent: this }\"\n                              [currentValue]=\"getValue(row.node, col.field)\"\n                              appRendererParser\n                            ></div>\n                          }\n                        </div>\n                      }\n                    </td>\n                  }\n                }\n              </tr>\n            } @else if (row.kind === 'loading') {\n              <tr class=\"meta_row\">\n                <td\n                  [attr.colspan]=\"\n                    columns.length + (checkBoxSelection ? 1 : 0)\n                  \"\n                >\n                  <div\n                    class=\"meta_cell\"\n                    [style.padding-left.px]=\"row.level * indentPx\"\n                  >\n                    {{ loadingText }}\n                  </div>\n                </td>\n              </tr>\n            } @else if (row.kind === 'no-data') {\n              <tr class=\"meta_row\">\n                <td\n                  [attr.colspan]=\"\n                    columns.length + (checkBoxSelection ? 1 : 0)\n                  \"\n                >\n                  <div\n                    class=\"meta_cell\"\n                    [style.padding-left.px]=\"row.level * indentPx\"\n                  >\n                    {{ noDataText }}\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n\n      @if (!rows || rows.length === 0) {\n        <div class=\"empty_overlay\">\n          <div class=\"empty_content\">\n            <span>{{ noDataText }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_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))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.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].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{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].custom_check_box: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].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.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%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;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{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)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_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)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_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 .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*: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))}}.pointer,.cursor-pointer{cursor:pointer}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}.tableArea{width:100%;position:relative;display:flex;flex-direction:column;height:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.tableArea .table_wrapper{position:relative;overflow:auto;flex:1;min-height:calc(16.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(1.3333333333rem / var(--scale));background-color:var(--white)}.tableArea .table_wrapper.global{margin:0}.tableArea .table_wrapper .table-inner-wrapper{position:relative;width:100%}.tableArea .table_wrapper .table-inner-wrapper table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}.tableArea .table_wrapper .table-inner-wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper .table-inner-wrapper table .sticky-top{top:0;position:sticky;z-index:20}.tableArea .table_wrapper .table-inner-wrapper table td,.tableArea .table_wrapper .table-inner-wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--neutral-500);text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-right:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tableArea .table_wrapper .table-inner-wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));background-color:var(--neutral-50)}.tableArea .table_wrapper .table-inner-wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--neutral-50);overflow:visible}.tableArea .table_wrapper .table-inner-wrapper table thead th:hover .text_wrapper{background-color:var(--neutral-200)}.tableArea .table_wrapper .table-inner-wrapper table tbody{background-color:var(--white)}.tableArea .table_wrapper .table-inner-wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:background-color .12s ease-in-out}.tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover,.tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover td{background-color:var(--blue-100)!important}.tableArea .table_wrapper .table-inner-wrapper table tbody tr.disabled{opacity:.6;pointer-events:none}.tableArea .table_wrapper .table-inner-wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));vertical-align:middle;line-height:calc(1.6666666667rem / var(--scale))}.tableArea .table_wrapper .table-inner-wrapper table tbody tr td:hover{background-color:var(--blue-100)!important}.tableArea .table_wrapper.tbody_height{height:calc(100% - 42px)}.tableArea .table_wrapper.no-horizontal-scroll{overflow-x:hidden}.tableArea.is-resizing .table_wrapper table th,.tableArea.is-resizing .table_wrapper table td{will-change:width;transition:width 80ms linear,min-width 80ms linear,max-width 80ms linear}.tableArea .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));position:relative}.tableArea .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;flex:1;min-width:0;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.tableArea .th_wraper .text_wrapper.sortable{-webkit-user-select:none;user-select:none}.tableArea .th_wraper .text_wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .th_wraper .text_wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));cursor:grab;opacity:.6;transition:opacity .2s ease}.tableArea .th_wraper .text_wrapper .move-icon:hover{opacity:1}.tableArea .th_wraper .text_wrapper .ellipsis{flex:1;min-width:0}.tableArea .th_wraper .text_wrapper .headerName{text-transform:uppercase;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500)}.tableArea .th_wraper .text_wrapper .sorting_icon{display:inline-flex;align-items:center;margin-left:calc(.3333333333rem / var(--scale))}.tableArea .th_wraper .text_wrapper .sorting_icon img{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.tableArea .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));min-width:fit-content}.tableArea .th_wraper .filter_three_dot_wrapper .filters,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots{position:relative;display:inline-flex;align-items:center;cursor:pointer;width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.tableArea .th_wraper .filter_three_dot_wrapper .filters img,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters:hover,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots:hover{background:var(--neutral-200)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown{position:absolute;top:calc(2.5rem / var(--scale));left:0;z-index:1000;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;min-width:calc(18.3333333333rem / var(--scale));padding:calc(1rem / var(--scale));max-height:calc(29.1666666667rem / var(--scale));overflow-y:auto}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group{display:flex;flex-direction:column;gap:calc(.6666666667rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group select,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group select{padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;background-color:var(--white);cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group .search_input,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group .search_input{width:100%;padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;font-family:inherit}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group .search_input:focus,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group .search_input:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 calc(.25rem / var(--scale)) #667eea1a}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details{display:flex;flex-direction:column;gap:calc(.6666666667rem / var(--scale));max-height:calc(16.6666666667rem / var(--scale));overflow-y:auto;margin-bottom:calc(1rem / var(--scale))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale));cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-500)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label input[type=checkbox],.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label span,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label span{flex:1}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn{display:flex;justify-content:flex-end;gap:calc(.6666666667rem / var(--scale));padding-top:calc(.6666666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn button,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn button{padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--blue-600);color:var(--white);border:none;border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:600;transition:background-color .2s ease}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn button:hover,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn button:hover{background-color:var(--blue-700)}.tableArea .th_wraper .filter_three_dot_wrapper .resize-handle{cursor:col-resize;color:var(--neutral-200);font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400;padding:0 calc(.3333333333rem / var(--scale));-webkit-user-select:none;user-select:none;width:calc(1rem / var(--scale));text-align:center;flex-shrink:0}.tableArea .th_wraper .filter_three_dot_wrapper .resize-handle:hover{color:var(--neutral-500)}.tableArea .th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.tableArea .tree_cell{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale))}.tableArea .tree_cell .toggle_btn{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.tableArea .tree_cell .toggle_btn:hover{background:var(--neutral-200)}.tableArea .tree_cell .toggle_btn img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .tree_cell .toggle_spacer{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));display:inline-block;flex-shrink:0}.tableArea .tree_cell .node_icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));flex-shrink:0}.tableArea .tree_cell .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tableArea .tree_cell .node_link{color:var(--blue-600);text-decoration:none;cursor:pointer;transition:color .2s ease}.tableArea .tree_cell .node_link:hover{color:var(--blue-700);text-decoration:underline}.tableArea .tree_cell input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .col_wrapper{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tableArea .checkbox_container{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.tableArea .checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.tableArea .radio_option{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.tableArea .radio_option input[type=radio]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .radio_option label{cursor:pointer}.tableArea .meta_row td{background-color:var(--neutral-50);padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale))}.tableArea .meta_cell{color:var(--neutral-400);font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:500;min-height:calc(1.8333333333rem / var(--scale));display:flex;align-items:center}.tableArea .empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6;z-index:10}.tableArea .empty_overlay .empty_content{text-align:center;color:var(--neutral-400);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .setting_options{position:absolute;top:40px;right:0;z-index:1000;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;min-width:calc(20.8333333333rem / var(--scale));max-height:calc(33.3333333333rem / var(--scale));overflow-y:auto}.tableArea .setting_options .column_header{padding:calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);text-transform:uppercase}.tableArea .setting_options .checkbox_container{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .setting_options .checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .setting_options .checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.tableArea .setting_options .item_container{max-height:calc(25rem / var(--scale));overflow-y:auto}.tableArea .setting_options .item_container .column_item{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .setting_options .item_container .column_item:hover{background-color:var(--blue-100)}.tableArea .setting_options .item_container .column_item input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .setting_options .item_container .column_item span{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .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:1000;position:relative;width:calc(26.6666666667rem / var(--scale));right:0}.tableArea .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)}.tableArea .dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.tableArea .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}.tableArea .dropdown_wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.tableArea .dropdown_wrapper .right_click_item:hover,.tableArea .dropdown_wrapper .right_click_item.active{background-color:var(--blue-100)}.tableArea .dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tableArea .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)}.tableArea .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)}.tableArea .dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tableArea .second_dropdown{position:absolute;right:calc(-20.25rem / 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)}.tableArea .pinned_column{background-color:var(--neutral-50)}.tableArea .drag-over{background-color:#e3f2fd}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_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}#table_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}#table_scroll::-webkit-scrollbar-corner{background:transparent}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { tableAreaRef: [{
+                type: ViewChild,
+                args: ['table', { static: true }]
+            }], pinMenu: [{
+                type: ViewChild,
+                args: ['pinMenu']
+            }], data: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], idField: [{
+                type: Input
+            }], labelField: [{
+                type: Input
+            }], childrenField: [{
+                type: Input
+            }], treeColumnField: [{
+                type: Input
+            }], indentPx: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], expandIcon: [{
+                type: Input
+            }], collapseIcon: [{
+                type: Input
+            }], iconBasePath: [{
+                type: Input
+            }], showCheckbox: [{
+                type: Input
+            }], showNodeIcon: [{
+                type: Input
+            }], noDataText: [{
+                type: Input
+            }], loadingText: [{
+                type: Input
+            }], emitExpandAlways: [{
+                type: Input
+            }], sortingRequired: [{
+                type: Input
+            }], filterRequired: [{
+                type: Input
+            }], threeDotsMenuRequired: [{
+                type: Input
+            }], settingsRequired: [{
+                type: Input
+            }], settingsClicked: [{
+                type: Input
+            }], checkBoxSelection: [{
+                type: Input
+            }], checkboxSelectionType: [{
+                type: Input
+            }], isExpandable: [{
+                type: Input
+            }], rowOptionsResolver: [{
+                type: Input
+            }], nodeIconResolver: [{
+                type: Input
+            }], linkResolver: [{
+                type: Input
+            }], nodeToggle: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], linkClick: [{
+                type: Output
+            }], onHideSettings: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of cats-data-grid
  */
@@ -2491,5 +3875,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CatsDataGridComponent, CatsDataGridService, ColDefs, CommonRendererComponent };
+export { CatsDataGridComponent, CatsDataGridService, ColDefs, CommonRendererComponent, CommonTreeTableComponent };
 //# sourceMappingURL=cats-data-grid.mjs.map