cats-data-grid 2.0.6 → 2.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/cats-data-grid.mjs +1618 -176
  2. package/fesm2022/cats-data-grid.mjs.map +1 -1
  3. package/index.d.ts +257 -18
  4. package/package.json +1 -1
  5. package/styles/component/_form.scss +4 -0
package/fesm2022/cats-data-grid.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, Pipe, EventEmitter, Output, Directive, Input, HostListener, Component, ViewChild, signal } from '@angular/core';
2
+ import { Injectable, Pipe, EventEmitter, Output, Directive, Input, HostListener, Component, ViewEncapsulation, createComponent, ViewChild, signal } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule, DatePipe } from '@angular/common';
5
5
  import * as i2 from '@angular/forms';
6
- import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
6
+ import { NG_VALUE_ACCESSOR, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
7
7
 
8
8
  class CatsDataGridService {
9
9
  constructor() { }
@@ -865,7 +865,7 @@ class CommonCalendarComponent {
865
865
  multi: true,
866
866
  },
867
867
  DatePipe,
868
- ], 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" }] });
868
+ ], 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}.tooltip-trigger{cursor:default}*,*: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" }] });
869
869
  }
870
870
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonCalendarComponent, decorators: [{
871
871
  type: Component,
@@ -876,7 +876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
876
876
  multi: true,
877
877
  },
878
878
  DatePipe,
879
- ], 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"] }]
879
+ ], 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}.tooltip-trigger{cursor:default}*,*: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"] }]
880
880
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DatePipe }], propDecorators: { dateTimeSelected: [{
881
881
  type: Output
882
882
  }], clearDateEvent: [{
@@ -891,6 +891,426 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
891
891
  type: Input
892
892
  }] } });
893
893
 
894
+ class TooltipComponent {
895
+ content = '';
896
+ position = 'top';
897
+ bgColor = '#333333';
898
+ textColor = '#ffffff';
899
+ padding = '8px 12px';
900
+ fontSize = '12px';
901
+ borderRadius = '4px';
902
+ maxWidth = '300px';
903
+ get styleObj() {
904
+ return {
905
+ 'background-color': this.bgColor,
906
+ color: this.textColor,
907
+ padding: this.padding,
908
+ 'font-size': this.fontSize,
909
+ 'border-radius': this.borderRadius,
910
+ 'max-width': this.maxWidth,
911
+ };
912
+ }
913
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
914
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TooltipComponent, isStandalone: true, selector: "app-tooltip", inputs: { content: "content", position: "position", bgColor: "bgColor", textColor: "textColor", padding: "padding", fontSize: "fontSize", borderRadius: "borderRadius", maxWidth: "maxWidth" }, ngImport: i0, template: `
915
+ <div
916
+ class="app-tooltip-wrapper"
917
+ [ngClass]="'tooltip-' + position"
918
+ [ngStyle]="styleObj"
919
+ >
920
+ {{ content }}
921
+ <div class="tooltip-arrow"></div>
922
+ </div>
923
+ `, isInline: true, 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}.tooltip-trigger{cursor:default}*,*: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))}}.app-tooltip-wrapper{display:inline-block;position:relative;z-index:9999;box-shadow:0 calc(.1666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) #00000026;white-space:normal;word-wrap:break-word;pointer-events:none;margin:0;line-height:1.5;animation:tooltip-fadeIn .15s ease-out}@keyframes tooltip-fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.tooltip-arrow{position:absolute;width:0;height:0;border:calc(.5rem / var(--scale)) solid transparent;color:#333}.tooltip-top .tooltip-arrow{bottom:calc(-.5rem / var(--scale));left:50%;transform:translate(-50%);border-top-color:inherit;border-bottom-width:0}.tooltip-bottom .tooltip-arrow{top:calc(-.5rem / var(--scale));left:50%;transform:translate(-50%);border-bottom-color:inherit;border-top-width:0}.tooltip-left .tooltip-arrow{right:calc(-.5rem / var(--scale));top:50%;transform:translateY(-50%);border-left-color:inherit;border-right-width:0}.tooltip-right .tooltip-arrow{left:calc(-.5rem / var(--scale));top:50%;transform:translateY(-50%);border-right-color:inherit;border-left-width:0}.tooltip-bottom[data-arrow-pos=top-adjust] .tooltip-arrow{top:calc(-.5rem / var(--scale));left:50%;transform:translate(-50%);border-top-color:inherit;border-bottom-width:0}.tooltip-top[data-arrow-pos=bottom-adjust] .tooltip-arrow{bottom:calc(-.5rem / var(--scale));left:50%;transform:translate(-50%);border-bottom-color:inherit;border-top-width:0}.tooltip-right[data-arrow-pos=left-adjust] .tooltip-arrow{right:calc(-.5rem / var(--scale));top:50%;transform:translateY(-50%);border-left-color:inherit;border-right-width:0}.tooltip-left[data-arrow-pos=right-adjust] .tooltip-arrow{left:calc(-.5rem / var(--scale));top:50%;transform:translateY(-50%);border-right-color:inherit;border-left-width:0}\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"] }], encapsulation: i0.ViewEncapsulation.None });
924
+ }
925
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, decorators: [{
926
+ type: Component,
927
+ args: [{ selector: 'app-tooltip', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: `
928
+ <div
929
+ class="app-tooltip-wrapper"
930
+ [ngClass]="'tooltip-' + position"
931
+ [ngStyle]="styleObj"
932
+ >
933
+ {{ content }}
934
+ <div class="tooltip-arrow"></div>
935
+ </div>
936
+ `, 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}.tooltip-trigger{cursor:default}*,*: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))}}.app-tooltip-wrapper{display:inline-block;position:relative;z-index:9999;box-shadow:0 calc(.1666666667rem / var(--scale)) calc(.6666666667rem / var(--scale)) #00000026;white-space:normal;word-wrap:break-word;pointer-events:none;margin:0;line-height:1.5;animation:tooltip-fadeIn .15s ease-out}@keyframes tooltip-fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.tooltip-arrow{position:absolute;width:0;height:0;border:calc(.5rem / var(--scale)) solid transparent;color:#333}.tooltip-top .tooltip-arrow{bottom:calc(-.5rem / var(--scale));left:50%;transform:translate(-50%);border-top-color:inherit;border-bottom-width:0}.tooltip-bottom .tooltip-arrow{top:calc(-.5rem / var(--scale));left:50%;transform:translate(-50%);border-bottom-color:inherit;border-top-width:0}.tooltip-left .tooltip-arrow{right:calc(-.5rem / var(--scale));top:50%;transform:translateY(-50%);border-left-color:inherit;border-right-width:0}.tooltip-right .tooltip-arrow{left:calc(-.5rem / var(--scale));top:50%;transform:translateY(-50%);border-right-color:inherit;border-left-width:0}.tooltip-bottom[data-arrow-pos=top-adjust] .tooltip-arrow{top:calc(-.5rem / var(--scale));left:50%;transform:translate(-50%);border-top-color:inherit;border-bottom-width:0}.tooltip-top[data-arrow-pos=bottom-adjust] .tooltip-arrow{bottom:calc(-.5rem / var(--scale));left:50%;transform:translate(-50%);border-bottom-color:inherit;border-top-width:0}.tooltip-right[data-arrow-pos=left-adjust] .tooltip-arrow{right:calc(-.5rem / var(--scale));top:50%;transform:translateY(-50%);border-left-color:inherit;border-right-width:0}.tooltip-left[data-arrow-pos=right-adjust] .tooltip-arrow{left:calc(-.5rem / var(--scale));top:50%;transform:translateY(-50%);border-right-color:inherit;border-left-width:0}\n"] }]
937
+ }], propDecorators: { content: [{
938
+ type: Input
939
+ }], position: [{
940
+ type: Input
941
+ }], bgColor: [{
942
+ type: Input
943
+ }], textColor: [{
944
+ type: Input
945
+ }], padding: [{
946
+ type: Input
947
+ }], fontSize: [{
948
+ type: Input
949
+ }], borderRadius: [{
950
+ type: Input
951
+ }], maxWidth: [{
952
+ type: Input
953
+ }] } });
954
+
955
+ class TooltipDirective {
956
+ elementRef;
957
+ renderer;
958
+ appRef;
959
+ injector;
960
+ ngZone;
961
+ content = '';
962
+ tooltipPosition = 'adaptive';
963
+ tooltipDelay = 300; // milliseconds
964
+ tooltipBgColor = '#333333';
965
+ tooltipTextColor = '#ffffff';
966
+ tooltipPadding = '8px 12px';
967
+ tooltipFontSize = '12px';
968
+ tooltipBorderRadius = '4px';
969
+ tooltipMaxWidth = '300px';
970
+ followCursor = true;
971
+ tooltipParentContainer = null;
972
+ tooltipElement = null;
973
+ showTimeout;
974
+ elementRect = null;
975
+ currentPosition = 'top';
976
+ componentRef = null;
977
+ cursorX = 0;
978
+ cursorY = 0;
979
+ isTooltipShown = false;
980
+ constructor(elementRef, renderer, appRef, injector, ngZone) {
981
+ this.elementRef = elementRef;
982
+ this.renderer = renderer;
983
+ this.appRef = appRef;
984
+ this.injector = injector;
985
+ this.ngZone = ngZone;
986
+ }
987
+ ngOnInit() {
988
+ this.renderer.addClass(this.elementRef.nativeElement, 'tooltip-trigger');
989
+ }
990
+ onMouseEnter(event) {
991
+ if (!this.content)
992
+ return;
993
+ this.cursorX = event.clientX;
994
+ this.cursorY = event.clientY;
995
+ this.showTimeout = setTimeout(() => {
996
+ this.show();
997
+ }, this.tooltipDelay);
998
+ }
999
+ onMouseLeave() {
1000
+ clearTimeout(this.showTimeout);
1001
+ this.hide();
1002
+ }
1003
+ onMouseMove(event) {
1004
+ if (!this.isTooltipShown || !this.followCursor)
1005
+ return;
1006
+ this.cursorX = event.clientX;
1007
+ this.cursorY = event.clientY;
1008
+ this.positionTooltip();
1009
+ }
1010
+ show() {
1011
+ if (this.tooltipElement)
1012
+ return;
1013
+ this.elementRect = this.elementRef.nativeElement.getBoundingClientRect();
1014
+ // Use NgZone to avoid change detection issues
1015
+ this.ngZone.run(() => {
1016
+ try {
1017
+ // Create tooltip component with proper injector
1018
+ const componentRef = createComponent(TooltipComponent, {
1019
+ environmentInjector: this.appRef.injector,
1020
+ });
1021
+ // Configure component instance
1022
+ componentRef.instance.content = this.content;
1023
+ componentRef.instance.bgColor = this.tooltipBgColor;
1024
+ componentRef.instance.textColor = this.tooltipTextColor;
1025
+ componentRef.instance.padding = this.tooltipPadding;
1026
+ componentRef.instance.fontSize = this.tooltipFontSize;
1027
+ componentRef.instance.borderRadius = this.tooltipBorderRadius;
1028
+ componentRef.instance.maxWidth = this.tooltipMaxWidth;
1029
+ // Calculate adaptive position before rendering
1030
+ this.currentPosition = this.calculateAdaptivePosition();
1031
+ componentRef.instance.position = this.currentPosition;
1032
+ // Mark for check
1033
+ componentRef.changeDetectorRef.detectChanges();
1034
+ // Get the DOM element
1035
+ this.tooltipElement = componentRef.location.nativeElement.querySelector('.app-tooltip-wrapper');
1036
+ // If direct query didn't work, try the root element
1037
+ if (!this.tooltipElement) {
1038
+ this.tooltipElement = componentRef.location.nativeElement.children[0];
1039
+ }
1040
+ // If still not found, use the whole element
1041
+ if (!this.tooltipElement) {
1042
+ this.tooltipElement = componentRef.location.nativeElement;
1043
+ }
1044
+ // Append to body to avoid layout issues
1045
+ this.renderer.appendChild(document.body, componentRef.location.nativeElement);
1046
+ // Position the tooltip
1047
+ this.isTooltipShown = true;
1048
+ this.positionTooltip();
1049
+ // Store reference for cleanup
1050
+ this.componentRef = componentRef;
1051
+ }
1052
+ catch (error) {
1053
+ console.warn('Tooltip directive: Error creating tooltip component', error);
1054
+ // Fallback silent fail - tooltip just won't show but app continues
1055
+ }
1056
+ });
1057
+ }
1058
+ calculateAdaptivePosition() {
1059
+ if (this.tooltipPosition !== 'adaptive') {
1060
+ return this.tooltipPosition;
1061
+ }
1062
+ if (!this.elementRect)
1063
+ return 'top';
1064
+ // Find the parent container with overflow or positioning context
1065
+ const parentContainer = this.findParentContainer();
1066
+ const parentRect = parentContainer.getBoundingClientRect();
1067
+ const threshold = 120; // minimum space needed
1068
+ const gap = 10;
1069
+ // Calculate available space within parent container
1070
+ const spaceAbove = this.elementRect.top - parentRect.top;
1071
+ const spaceBelow = parentRect.bottom - this.elementRect.bottom;
1072
+ const spaceLeft = this.elementRect.left - parentRect.left;
1073
+ const spaceRight = parentRect.right - this.elementRect.right;
1074
+ // Prefer vertical positions if there's adequate space
1075
+ if (spaceBelow >= threshold)
1076
+ return 'bottom';
1077
+ if (spaceAbove >= threshold)
1078
+ return 'top';
1079
+ // Fall back to horizontal positions
1080
+ if (spaceRight >= threshold)
1081
+ return 'right';
1082
+ if (spaceLeft >= threshold)
1083
+ return 'left';
1084
+ // If no position has enough space, use the direction with most available space
1085
+ const spaces = {
1086
+ top: spaceAbove,
1087
+ bottom: spaceBelow,
1088
+ left: spaceLeft,
1089
+ right: spaceRight,
1090
+ };
1091
+ const bestPosition = Object.keys(spaces).reduce((prev, curr) => (spaces[curr] > spaces[prev] ? curr : prev));
1092
+ return bestPosition;
1093
+ }
1094
+ findParentContainer() {
1095
+ // If a parent container is explicitly provided, use it
1096
+ if (this.tooltipParentContainer) {
1097
+ return this.tooltipParentContainer;
1098
+ }
1099
+ let element = this.elementRef.nativeElement.parentElement;
1100
+ // Traverse up the DOM to find a scrollable or positioned container
1101
+ while (element) {
1102
+ const style = window.getComputedStyle(element);
1103
+ const isScrollable = element.scrollHeight > element.clientHeight ||
1104
+ element.scrollWidth > element.clientWidth;
1105
+ const isPositioned = style.position === 'absolute' ||
1106
+ style.position === 'relative' ||
1107
+ style.position === 'fixed';
1108
+ if (isScrollable || isPositioned) {
1109
+ return element;
1110
+ }
1111
+ element = element.parentElement;
1112
+ }
1113
+ // If no container found, use the document body
1114
+ return document.body;
1115
+ }
1116
+ positionTooltip() {
1117
+ if (!this.tooltipElement)
1118
+ return;
1119
+ // Use requestAnimationFrame to ensure DOM is ready
1120
+ requestAnimationFrame(() => {
1121
+ if (!this.tooltipElement)
1122
+ return;
1123
+ const tooltipRect = this.tooltipElement.getBoundingClientRect();
1124
+ // If tooltip isn't rendered yet, retry
1125
+ if (tooltipRect.width === 0 || tooltipRect.height === 0) {
1126
+ requestAnimationFrame(() => this.positionTooltip());
1127
+ return;
1128
+ }
1129
+ const gap = 10;
1130
+ const offset = 15; // Offset from cursor
1131
+ let top = 0;
1132
+ let left = 0;
1133
+ let finalPosition = this.currentPosition;
1134
+ if (this.followCursor) {
1135
+ // Position tooltip relative to cursor
1136
+ const preferredPosition = this.currentPosition;
1137
+ switch (preferredPosition) {
1138
+ case 'top':
1139
+ top = this.cursorY - tooltipRect.height - gap;
1140
+ left = this.cursorX - tooltipRect.width / 2;
1141
+ break;
1142
+ case 'bottom':
1143
+ top = this.cursorY + offset;
1144
+ left = this.cursorX - tooltipRect.width / 2;
1145
+ break;
1146
+ case 'left':
1147
+ top = this.cursorY - tooltipRect.height / 2;
1148
+ left = this.cursorX - tooltipRect.width - gap;
1149
+ break;
1150
+ case 'right':
1151
+ top = this.cursorY - tooltipRect.height / 2;
1152
+ left = this.cursorX + offset;
1153
+ break;
1154
+ }
1155
+ }
1156
+ else if (this.elementRect) {
1157
+ // Position tooltip relative to element
1158
+ switch (this.currentPosition) {
1159
+ case 'top':
1160
+ top = this.elementRect.top - tooltipRect.height - gap;
1161
+ left = this.elementRect.left + this.elementRect.width / 2 - tooltipRect.width / 2;
1162
+ break;
1163
+ case 'bottom':
1164
+ top = this.elementRect.bottom + gap;
1165
+ left = this.elementRect.left + this.elementRect.width / 2 - tooltipRect.width / 2;
1166
+ break;
1167
+ case 'left':
1168
+ top = this.elementRect.top + this.elementRect.height / 2 - tooltipRect.height / 2;
1169
+ left = this.elementRect.left - tooltipRect.width - gap;
1170
+ break;
1171
+ case 'right':
1172
+ top = this.elementRect.top + this.elementRect.height / 2 - tooltipRect.height / 2;
1173
+ left = this.elementRect.right + gap;
1174
+ break;
1175
+ }
1176
+ }
1177
+ // Adjust for parent container and viewport boundaries
1178
+ const parentContainer = this.findParentContainer();
1179
+ const parentRect = parentContainer.getBoundingClientRect();
1180
+ const windowHeight = window.innerHeight;
1181
+ const windowWidth = window.innerWidth;
1182
+ const padding = 5;
1183
+ let arrowPos = 'center';
1184
+ // Use parent container bounds if available, otherwise use window bounds
1185
+ const containerTop = Math.max(parentRect.top, 0);
1186
+ const containerBottom = Math.min(parentRect.bottom, windowHeight);
1187
+ const containerLeft = Math.max(parentRect.left, 0);
1188
+ const containerRight = Math.min(parentRect.right, windowWidth);
1189
+ // Check vertical boundaries within container and adjust position if needed
1190
+ if (top < containerTop + padding) {
1191
+ top = containerTop + padding;
1192
+ if (this.currentPosition === 'top') {
1193
+ finalPosition = 'bottom';
1194
+ if (this.followCursor) {
1195
+ top = this.cursorY + offset;
1196
+ }
1197
+ else if (this.elementRect) {
1198
+ top = this.elementRect.bottom + gap;
1199
+ }
1200
+ }
1201
+ arrowPos = 'top-adjust';
1202
+ }
1203
+ else if (top + tooltipRect.height > containerBottom - padding) {
1204
+ top = containerBottom - tooltipRect.height - padding;
1205
+ if (this.currentPosition === 'bottom') {
1206
+ finalPosition = 'top';
1207
+ if (this.followCursor) {
1208
+ top = this.cursorY - tooltipRect.height - gap;
1209
+ }
1210
+ else if (this.elementRect) {
1211
+ top = this.elementRect.top - tooltipRect.height - gap;
1212
+ }
1213
+ }
1214
+ arrowPos = 'bottom-adjust';
1215
+ }
1216
+ // Check horizontal boundaries within container and adjust position if needed
1217
+ if (left < containerLeft + padding) {
1218
+ left = containerLeft + padding;
1219
+ if (this.currentPosition === 'left') {
1220
+ finalPosition = 'right';
1221
+ if (this.followCursor) {
1222
+ left = this.cursorX + offset;
1223
+ }
1224
+ else if (this.elementRect) {
1225
+ left = this.elementRect.right + gap;
1226
+ }
1227
+ }
1228
+ arrowPos = 'left-adjust';
1229
+ }
1230
+ else if (left + tooltipRect.width > containerRight - padding) {
1231
+ left = containerRight - tooltipRect.width - padding;
1232
+ if (this.currentPosition === 'right') {
1233
+ finalPosition = 'left';
1234
+ if (this.followCursor) {
1235
+ left = this.cursorX - tooltipRect.width - gap;
1236
+ }
1237
+ else if (this.elementRect) {
1238
+ left = this.elementRect.left - tooltipRect.width - gap;
1239
+ }
1240
+ }
1241
+ arrowPos = 'right-adjust';
1242
+ }
1243
+ // Update position class if it changed
1244
+ if (finalPosition !== this.currentPosition) {
1245
+ this.currentPosition = finalPosition;
1246
+ this.tooltipElement.className = `app-tooltip-wrapper tooltip-${finalPosition}`;
1247
+ }
1248
+ // Store arrow adjustment info for CSS styling
1249
+ this.renderer.setAttribute(this.tooltipElement, 'data-arrow-pos', arrowPos);
1250
+ this.renderer.setStyle(this.tooltipElement, 'position', 'fixed');
1251
+ this.renderer.setStyle(this.tooltipElement, 'top', `${Math.round(top)}px`);
1252
+ this.renderer.setStyle(this.tooltipElement, 'left', `${Math.round(left)}px`);
1253
+ });
1254
+ }
1255
+ hide() {
1256
+ this.isTooltipShown = false;
1257
+ if (this.tooltipElement && this.tooltipElement.parentNode) {
1258
+ this.renderer.removeChild(this.tooltipElement.parentNode, this.tooltipElement);
1259
+ this.tooltipElement = null;
1260
+ }
1261
+ if (this.componentRef) {
1262
+ this.componentRef.destroy();
1263
+ this.appRef.detachView(this.componentRef.hostView);
1264
+ this.componentRef = null;
1265
+ }
1266
+ }
1267
+ ngOnDestroy() {
1268
+ clearTimeout(this.showTimeout);
1269
+ this.hide();
1270
+ }
1271
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
1272
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: TooltipDirective, isStandalone: true, selector: "[appTooltip]", inputs: { content: ["appTooltip", "content"], tooltipPosition: "tooltipPosition", tooltipDelay: "tooltipDelay", tooltipBgColor: "tooltipBgColor", tooltipTextColor: "tooltipTextColor", tooltipPadding: "tooltipPadding", tooltipFontSize: "tooltipFontSize", tooltipBorderRadius: "tooltipBorderRadius", tooltipMaxWidth: "tooltipMaxWidth", followCursor: "followCursor", tooltipParentContainer: "tooltipParentContainer" }, host: { listeners: { "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave()", "mousemove": "onMouseMove($event)" } }, ngImport: i0 });
1273
+ }
1274
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirective, decorators: [{
1275
+ type: Directive,
1276
+ args: [{
1277
+ selector: '[appTooltip]',
1278
+ standalone: true,
1279
+ }]
1280
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.NgZone }], propDecorators: { content: [{
1281
+ type: Input,
1282
+ args: ['appTooltip']
1283
+ }], tooltipPosition: [{
1284
+ type: Input
1285
+ }], tooltipDelay: [{
1286
+ type: Input
1287
+ }], tooltipBgColor: [{
1288
+ type: Input
1289
+ }], tooltipTextColor: [{
1290
+ type: Input
1291
+ }], tooltipPadding: [{
1292
+ type: Input
1293
+ }], tooltipFontSize: [{
1294
+ type: Input
1295
+ }], tooltipBorderRadius: [{
1296
+ type: Input
1297
+ }], tooltipMaxWidth: [{
1298
+ type: Input
1299
+ }], followCursor: [{
1300
+ type: Input
1301
+ }], tooltipParentContainer: [{
1302
+ type: Input
1303
+ }], onMouseEnter: [{
1304
+ type: HostListener,
1305
+ args: ['mouseenter', ['$event']]
1306
+ }], onMouseLeave: [{
1307
+ type: HostListener,
1308
+ args: ['mouseleave']
1309
+ }], onMouseMove: [{
1310
+ type: HostListener,
1311
+ args: ['mousemove', ['$event']]
1312
+ }] } });
1313
+
894
1314
  class ColDefs {
895
1315
  fieldName;
896
1316
  headerName;
@@ -922,6 +1342,7 @@ class CatsDataGridComponent {
922
1342
  settingsClicked = false;
923
1343
  resetPage = true;
924
1344
  rowId = null;
1345
+ bigRows = false;
925
1346
  showDropdown = false;
926
1347
  height = 400;
927
1348
  groupByRequired = false;
@@ -930,6 +1351,8 @@ class CatsDataGridComponent {
930
1351
  onScrollEmitter = new EventEmitter();
931
1352
  filter = new EventEmitter();
932
1353
  onHideSettings = new EventEmitter();
1354
+ onCellEdit = new EventEmitter();
1355
+ onColCongifgChange = new EventEmitter();
933
1356
  activeFilterIndex = null;
934
1357
  originalRowData = [];
935
1358
  activeAll = true;
@@ -1005,6 +1428,20 @@ class CatsDataGridComponent {
1005
1428
  isRowSelected = false;
1006
1429
  onRowClicked = new EventEmitter();
1007
1430
  onCellClicked = new EventEmitter();
1431
+ isCellDblClicked = {};
1432
+ cellClickedCtrl = new FormControl('');
1433
+ previousId = '';
1434
+ editingRow = null;
1435
+ editingField = '';
1436
+ clickTimer = null;
1437
+ clickDelay = 200;
1438
+ cellClickedColumn;
1439
+ enterPressed = false;
1440
+ leftPinned = [];
1441
+ rightPinned = [];
1442
+ centerArea = [];
1443
+ groupingDisabled = false;
1444
+ draggableColumn;
1008
1445
  constructor(renderer, zone, cd) {
1009
1446
  this.renderer = renderer;
1010
1447
  this.zone = zone;
@@ -1018,14 +1455,18 @@ class CatsDataGridComponent {
1018
1455
  ngOnChanges(changes) {
1019
1456
  if (changes['pageNumber']?.currentValue) {
1020
1457
  this.pageDetails.currentPage = changes['pageNumber']?.currentValue;
1021
- this.recordsToShow.min = (this.pageDetails.currentPage - 1) * this.pageDetails.pageSize;
1022
- this.recordsToShow.max = this.pageDetails.currentPage * this.pageDetails.pageSize;
1458
+ this.recordsToShow.min =
1459
+ (this.pageDetails.currentPage - 1) * this.pageDetails.pageSize;
1460
+ this.recordsToShow.max =
1461
+ this.pageDetails.currentPage * this.pageDetails.pageSize;
1023
1462
  this.clearAllFilter();
1024
1463
  }
1025
1464
  if (changes['pageSize']?.currentValue) {
1026
1465
  this.pageDetails.pageSize = changes['pageSize']?.currentValue;
1027
- this.recordsToShow.min = (this.pageDetails.currentPage - 1) * this.pageDetails.pageSize;
1028
- this.recordsToShow.max = this.pageDetails.currentPage * this.pageDetails.pageSize;
1466
+ this.recordsToShow.min =
1467
+ (this.pageDetails.currentPage - 1) * this.pageDetails.pageSize;
1468
+ this.recordsToShow.max =
1469
+ this.pageDetails.currentPage * this.pageDetails.pageSize;
1029
1470
  }
1030
1471
  if (changes['colDefs']?.currentValue) {
1031
1472
  // this.resetPagination();
@@ -1034,6 +1475,13 @@ class CatsDataGridComponent {
1034
1475
  this.applyAllFilters();
1035
1476
  });
1036
1477
  this.originalColDefs = [...this.colDefs];
1478
+ this.centerArea = [...this.colDefs];
1479
+ [...this.colDefs].forEach((col) => {
1480
+ if (col.pin) {
1481
+ const index = this.colDefs.findIndex((c) => c.colId === col.colId);
1482
+ this.pinColumn(this.colDefs[index], index, col.pin);
1483
+ }
1484
+ });
1037
1485
  }
1038
1486
  if (changes['totalRecords']?.currentValue && this.resetPage) {
1039
1487
  this.resetPagination();
@@ -1052,7 +1500,7 @@ class CatsDataGridComponent {
1052
1500
  row.rowId = `${Date.now()}_${i}`;
1053
1501
  }
1054
1502
  if (row?.isSelected)
1055
- [...this.selectedRow, row];
1503
+ this.selectedRow.push(row);
1056
1504
  return row;
1057
1505
  });
1058
1506
  if (this.dynamicGroupingFiltering && this.groupBy.length > 0) {
@@ -1077,36 +1525,55 @@ class CatsDataGridComponent {
1077
1525
  return colDefs.filter((col) => col.fieldName === groupByField);
1078
1526
  }
1079
1527
  activeAllSelection(event) {
1080
- let checked = event.target.checked;
1081
- if (checked) {
1082
- this.colDefs = this.originalColDefs.map((dt) => {
1083
- if (!dt.active && !dt.headerLocked) {
1084
- dt.active = true;
1085
- }
1086
- this.atLeastOneColumnChecked = true;
1087
- return dt;
1088
- });
1089
- }
1090
- else {
1091
- this.colDefs = this.originalColDefs.map((dt) => {
1092
- if (dt.active && !dt.headerLocked) {
1093
- dt.active = false;
1094
- }
1095
- this.atLeastOneColumnChecked = false;
1096
- return dt;
1097
- });
1098
- }
1528
+ // let checked = (event.target as HTMLInputElement).checked;
1529
+ // if (checked) {
1530
+ // this.colDefs = this.originalColDefs.map((dt) => {
1531
+ // if (!dt.active && !dt.headerLocked) {
1532
+ // dt.active = true;
1533
+ // }
1534
+ // this.atLeastOneColumnChecked = true;
1535
+ // return dt;
1536
+ // });
1537
+ // } else {
1538
+ // this.colDefs = this.originalColDefs.map((dt) => {
1539
+ // if (dt.active && !dt.headerLocked) {
1540
+ // dt.active = false;
1541
+ // }
1542
+ // this.atLeastOneColumnChecked = false;
1543
+ // return dt;
1544
+ // });
1545
+ // }
1546
+ const checked = event.target.checked;
1547
+ this.colDefs = this.originalColDefs.map((col) => {
1548
+ if (col.headerLocked) {
1549
+ col.active = true;
1550
+ }
1551
+ else {
1552
+ col.active = checked;
1553
+ }
1554
+ return col;
1555
+ });
1556
+ this.activeAll = this.colDefs.every((dt) => dt.active);
1557
+ this.getActiveCols();
1558
+ this.atLeastOneColumnChecked = this.colDefs.some((dt) => dt.active);
1099
1559
  }
1100
1560
  changeActiveColSelection(event, col) {
1101
1561
  col.active = !col.active;
1102
- const isAllNotChecked = this.originalColDefs.some((dt) => !dt.active);
1103
1562
  this.atLeastOneColumnChecked = this.originalColDefs.some((dt) => dt.active);
1104
- if (isAllNotChecked) {
1105
- this.activeAll = false;
1106
- }
1107
- else {
1108
- this.activeAll = true;
1109
- }
1563
+ this.getActiveCols();
1564
+ // Update activeAll state
1565
+ this.activeAll = this.originalColDefs.every((dt) => dt.active);
1566
+ }
1567
+ getActiveCols() {
1568
+ const activeCols = this.colDefs
1569
+ .filter((col) => col.active)
1570
+ .map((c) => {
1571
+ if (c.fieldName.includes('.')) {
1572
+ c.fieldName = c.fieldName.split('.')[0];
1573
+ }
1574
+ return c.fieldName;
1575
+ });
1576
+ this.onColCongifgChange.emit(activeCols);
1110
1577
  }
1111
1578
  /**
1112
1579
  * @description Prepares and normalizes column definitions for filtering and menu behavior
@@ -1402,7 +1869,7 @@ class CatsDataGridComponent {
1402
1869
  };
1403
1870
  if (col.filterType === 'set') {
1404
1871
  filterObj.filters = Array(...col.selectedValues).map((f) => ({
1405
- filterOperation: 'equals',
1872
+ filterOperation: '=',
1406
1873
  filterValue: f,
1407
1874
  }));
1408
1875
  filterObj.filterLogic = 'OR';
@@ -1740,25 +2207,63 @@ class CatsDataGridComponent {
1740
2207
  * @param {number} index - The index of column from table on clicking pin or unpin from three dots menu.
1741
2208
  * @returns {void}
1742
2209
  */
2210
+ // pinColumn(col: any, index: number, direction: string) {
2211
+ // this.pinActionClicked[col.colId] = direction;
2212
+ // if (col.pin) {
2213
+ // col.pin = direction;
2214
+ // }
2215
+ // col.leftPinned = direction === 'left';
2216
+ // col.rightPinned = direction === 'right';
2217
+ // if (col.leftPinned) {
2218
+ // this.colDefs.splice(index, 1);
2219
+ // this.colDefs = [col, ...this.colDefs];
2220
+ // } else if (col.rightPinned) {
2221
+ // this.colDefs.splice(index, 1);
2222
+ // this.colDefs.splice(this.colDefs.length - 1, 0, col);
2223
+ // } else {
2224
+ // const indx = this.originalColDefs.findIndex(
2225
+ // (dt) => dt.fieldName === col.fieldName,
2226
+ // );
2227
+ // if (index >= 0) {
2228
+ // this.colDefs.splice(index, 1);
2229
+ // this.colDefs.splice(indx, 0, col);
2230
+ // }
2231
+ // }
2232
+ // this.updatePinnedOffsets();
2233
+ // this.onClickOutside();
2234
+ // }
1743
2235
  pinColumn(col, index, direction) {
1744
2236
  this.pinActionClicked[col.colId] = direction;
2237
+ if (col.pin) {
2238
+ col.pin = direction;
2239
+ }
2240
+ this.leftPinned = this.leftPinned.filter((c) => c.colId !== col.colId);
2241
+ this.rightPinned = this.rightPinned.filter((c) => c.colId !== col.colId);
2242
+ if (col.fieldName !== 'action') {
2243
+ this.centerArea = this.centerArea.filter((c) => c.colId !== col.colId);
2244
+ }
1745
2245
  col.leftPinned = direction === 'left';
1746
2246
  col.rightPinned = direction === 'right';
1747
2247
  if (col.leftPinned) {
1748
- this.colDefs.splice(index, 1);
1749
- this.colDefs = [col, ...this.colDefs];
2248
+ this.leftPinned.push(col);
1750
2249
  }
1751
2250
  else if (col.rightPinned) {
1752
- this.colDefs.splice(index, 1);
1753
- this.colDefs.splice(this.colDefs.length - 1, 0, col);
2251
+ this.rightPinned.unshift(col);
1754
2252
  }
1755
2253
  else {
1756
- const indx = this.originalColDefs.findIndex((dt) => dt.fieldName === col.fieldName);
2254
+ const indx = this.centerArea.findIndex((dt) => dt.fieldName === col.fieldName);
1757
2255
  if (index >= 0) {
1758
- this.colDefs.splice(index, 1);
1759
- this.colDefs.splice(indx, 0, col);
2256
+ this.centerArea.splice(indx, 0, col);
1760
2257
  }
1761
2258
  }
2259
+ const fixedCols = this.centerArea.filter((c) => c.fieldName === 'action');
2260
+ const movableCols = this.centerArea.filter((c) => c.fieldName !== 'action');
2261
+ this.colDefs = [
2262
+ ...this.leftPinned,
2263
+ ...movableCols,
2264
+ ...this.rightPinned,
2265
+ ...fixedCols,
2266
+ ];
1762
2267
  this.updatePinnedOffsets();
1763
2268
  this.onClickOutside();
1764
2269
  }
@@ -2122,7 +2627,7 @@ class CatsDataGridComponent {
2122
2627
  * @param {event object, index}
2123
2628
  * @returns {void}
2124
2629
  */
2125
- onDragStart(event, index) {
2630
+ onDragStart(event, index, col) {
2126
2631
  this.dragGroupIndex = null;
2127
2632
  const target = event.target;
2128
2633
  if (this.isResizing) {
@@ -2134,6 +2639,7 @@ class CatsDataGridComponent {
2134
2639
  event.dataTransfer?.setData('text/plain', index.toString());
2135
2640
  // For group panel
2136
2641
  event.dataTransfer?.setData('columnIndex', index.toString());
2642
+ this.draggableColumn = col;
2137
2643
  const th = target.closest('th');
2138
2644
  if (!th)
2139
2645
  return;
@@ -2220,6 +2726,12 @@ class CatsDataGridComponent {
2220
2726
  */
2221
2727
  onGroupDragOver(event) {
2222
2728
  event.preventDefault();
2729
+ this.groupingDisabled = this.draggableColumn?.disableGrouping ?? false;
2730
+ if (this.groupingDisabled) {
2731
+ event.dataTransfer.dropEffect = 'none';
2732
+ this.groupingDisabled = false;
2733
+ return;
2734
+ }
2223
2735
  }
2224
2736
  /**
2225
2737
  * @description Handles drag over on a group tag and updates the target index for reordering.
@@ -2241,6 +2753,9 @@ class CatsDataGridComponent {
2241
2753
  */
2242
2754
  onGroupDrop(event) {
2243
2755
  const colIndex = Number(event.dataTransfer?.getData('columnIndex'));
2756
+ const col = this.colDefs[colIndex];
2757
+ if (col.disableGrouping)
2758
+ return;
2244
2759
  const groupIndex = Number(event.dataTransfer?.getData('groupIndex'));
2245
2760
  const target = event.target;
2246
2761
  const isOverGroupPanel = target.closest('.group-tag');
@@ -2281,6 +2796,8 @@ class CatsDataGridComponent {
2281
2796
  * @returns {void}
2282
2797
  */
2283
2798
  groupByColumnAction(col, index) {
2799
+ if (col.disableGrouping)
2800
+ return;
2284
2801
  this.activeGroups.push(col);
2285
2802
  this.groupBy.push(col.fieldName);
2286
2803
  this.colDefs.splice(index, 1);
@@ -2436,8 +2953,11 @@ class CatsDataGridComponent {
2436
2953
  }
2437
2954
  onBtLastClick() {
2438
2955
  this.pageDetails.currentPage = this.pageDetails.totalPages;
2439
- this.recordsToShow.max = this.pageDetails.currentPage * this.pageDetails.pageSize;
2440
- this.recordsToShow.min = this.pageDetails.currentPage * this.pageDetails.pageSize - this.pageDetails.pageSize;
2956
+ this.recordsToShow.max =
2957
+ this.pageDetails.currentPage * this.pageDetails.pageSize;
2958
+ this.recordsToShow.min =
2959
+ this.pageDetails.currentPage * this.pageDetails.pageSize -
2960
+ this.pageDetails.pageSize;
2441
2961
  this.onPaginationChange.emit({
2442
2962
  page: this.pageDetails.currentPage - 1,
2443
2963
  pageSize: this.pageDetails.pageSize,
@@ -2447,23 +2967,91 @@ class CatsDataGridComponent {
2447
2967
  this.onRowClicked.emit({ row });
2448
2968
  }
2449
2969
  onCellClick(row, col) {
2450
- this.onCellClicked.emit({ row, col });
2970
+ if (this.clickTimer) {
2971
+ clearTimeout(this.clickTimer);
2972
+ }
2973
+ this.clickTimer = setTimeout(() => {
2974
+ this.onCellClicked.emit({ row, col });
2975
+ }, this.clickDelay);
2976
+ }
2977
+ onCellDblClick(row, col) {
2978
+ this.cellClickedColumn = col;
2979
+ if (this.clickTimer) {
2980
+ clearTimeout(this.clickTimer);
2981
+ this.clickTimer = null;
2982
+ }
2983
+ if (!col.editable)
2984
+ return;
2985
+ if (this.previousId) {
2986
+ this.isCellDblClicked[this.previousId] = false;
2987
+ }
2988
+ const id = `${col.colId}-${row.rowId}`;
2989
+ this.isCellDblClicked[id] = true;
2990
+ let fieldName = col.fieldName;
2991
+ const fieldValue = this.evaluateFieldValue(row, col.fieldName) || '';
2992
+ this.editingRow = row;
2993
+ this.editingField = fieldName;
2994
+ this.cellClickedCtrl.setValue(fieldValue);
2995
+ this.previousId = id;
2996
+ }
2997
+ onEnter() {
2998
+ this.enterPressed = true;
2999
+ this.onCellEditSave();
3000
+ }
3001
+ onBlur() {
3002
+ if (this.enterPressed) {
3003
+ this.enterPressed = false;
3004
+ return;
3005
+ }
3006
+ this.onCellEditSave();
3007
+ }
3008
+ onCellEditSave() {
3009
+ if (this.editingRow && this.editingField) {
3010
+ this.setFieldValue(this.editingRow, this.editingField, this.cellClickedCtrl.value);
3011
+ }
3012
+ this.onCellEdit.emit({
3013
+ row: this.editingRow,
3014
+ col: this.cellClickedColumn,
3015
+ changedValue: this.cellClickedCtrl.value,
3016
+ });
3017
+ if (this.previousId) {
3018
+ this.isCellDblClicked[this.previousId] = false;
3019
+ }
3020
+ this.editingRow = null;
3021
+ this.editingField = '';
3022
+ }
3023
+ setFieldValue(row, field, value) {
3024
+ if (field.includes('.')) {
3025
+ const parts = field.split('.');
3026
+ let obj = row;
3027
+ for (let i = 0; i < parts.length - 1; i++) {
3028
+ obj = obj?.[parts[i]];
3029
+ if (!obj)
3030
+ return;
3031
+ }
3032
+ obj[parts[parts.length - 1]] = value;
3033
+ }
3034
+ else {
3035
+ row[field] = value;
3036
+ }
2451
3037
  }
2452
3038
  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 });
2453
- 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" }] });
3039
+ 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", bigRows: "bigRows", 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", onCellEdit: "onCellEdit", onColCongifgChange: "onColCongifgChange", 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\" [ngClass]=\"{ large: bigRows }\" #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 [ngClass]=\"{ disable_group: groupingDisabled }\"\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 @if (filter.filters?.length) {\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\">\n {{ filter.filterLogic }}\n </span>\n }\n <span class=\"filter_field\"\n >{{ filter.fieldName.split(\".\")[0] }}:</span\n >\n <span class=\"\">\n {{\n item.filterOperation == \"=\" ||\n item.filterOperation == \"equals\"\n ? \":\"\n : item.filterOperation\n }}</span\n >\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 }\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 } @else {\n @if (checkBoxSelection && checkboxSelectionType == \"single\") {\n <th style=\"min-width: 50px; width: 50px\"></th>\n }\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, col)\"\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]=\"{\n disabled_option:\n !groupByRequired || col.disableGrouping,\n }\"\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\n (click)=\"onCellClick(data, col)\"\n (dblclick)=\"onCellDblClick(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 (isCellDblClicked[`${col.colId}-${data.rowId}`]) {\n <input\n [formControl]=\"cellClickedCtrl\"\n type=\"text\"\n name=\"cellClickedCtrl\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onEnter()\"\n />\n }\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 class=\"gripper-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 <span\n class=\"node_label\"\n [appTooltip]=\"parseColValue(data, col) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >{{ parseColValue(data, col) }}</span\n >\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\n class=\"outlined_btn first_btn\"\n type=\"button\"\n (click)=\"onBtFirstClick()\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n >\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]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\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\n class=\"outlined_btn last_btn\"\n type=\"button\"\n (click)=\"onBtLastClick()\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n >\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}.tooltip-trigger{cursor:default}*,*: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;max-width:inherit}: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.large .table_wrapper table thead tr,.tableArea.large .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);border-left:0;border-right:0}.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 .node_label,.tableArea .table_wrapper table th .cell-value .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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{bottom:calc(2.1666666667rem / 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{margin-right:calc(.8333333333rem / var(--scale));cursor:grab}.tableArea .table_wrapper table tbody tr td .gripper .gripper-img{min-width:16px}.tableArea .table_wrapper table tbody tr td .col_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:inherit;max-width:-webkit-fill-available}.tableArea .table_wrapper table tbody tr td .col_wrapper:has(.tag_wrapper){width:unset;max-width:max-content}.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-left:0;border-right:0;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-left:0;border-right:0;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))}.disable_group{pointer-events:none}\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "tooltipPosition", "tooltipDelay", "tooltipBgColor", "tooltipTextColor", "tooltipPadding", "tooltipFontSize", "tooltipBorderRadius", "tooltipMaxWidth", "followCursor", "tooltipParentContainer"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
2454
3040
  }
2455
3041
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CatsDataGridComponent, decorators: [{
2456
3042
  type: Component,
2457
3043
  args: [{ selector: 'cats-data-grid', imports: [
2458
3044
  CommonModule,
2459
3045
  FormsModule,
3046
+ ReactiveFormsModule,
2460
3047
  CommonCalendarComponent,
2461
3048
  OutsideClickDirective,
2462
3049
  AdaptivePositionDirective,
2463
3050
  RendererParserDirective,
2464
3051
  AddClassPipe,
2465
3052
  CommonInputComponent,
2466
- ], 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"] }]
3053
+ TooltipDirective,
3054
+ ], template: "<div class=\"tableArea\" [ngClass]=\"{ large: bigRows }\" #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 [ngClass]=\"{ disable_group: groupingDisabled }\"\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 @if (filter.filters?.length) {\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\">\n {{ filter.filterLogic }}\n </span>\n }\n <span class=\"filter_field\"\n >{{ filter.fieldName.split(\".\")[0] }}:</span\n >\n <span class=\"\">\n {{\n item.filterOperation == \"=\" ||\n item.filterOperation == \"equals\"\n ? \":\"\n : item.filterOperation\n }}</span\n >\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 }\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 } @else {\n @if (checkBoxSelection && checkboxSelectionType == \"single\") {\n <th style=\"min-width: 50px; width: 50px\"></th>\n }\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, col)\"\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]=\"{\n disabled_option:\n !groupByRequired || col.disableGrouping,\n }\"\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\n (click)=\"onCellClick(data, col)\"\n (dblclick)=\"onCellDblClick(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 (isCellDblClicked[`${col.colId}-${data.rowId}`]) {\n <input\n [formControl]=\"cellClickedCtrl\"\n type=\"text\"\n name=\"cellClickedCtrl\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onEnter()\"\n />\n }\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 class=\"gripper-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 <span\n class=\"node_label\"\n [appTooltip]=\"parseColValue(data, col) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >{{ parseColValue(data, col) }}</span\n >\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\n class=\"outlined_btn first_btn\"\n type=\"button\"\n (click)=\"onBtFirstClick()\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n >\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]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\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\n class=\"outlined_btn last_btn\"\n type=\"button\"\n (click)=\"onBtLastClick()\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n >\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}.tooltip-trigger{cursor:default}*,*: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;max-width:inherit}: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.large .table_wrapper table thead tr,.tableArea.large .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);border-left:0;border-right:0}.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 .node_label,.tableArea .table_wrapper table th .cell-value .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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{bottom:calc(2.1666666667rem / 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{margin-right:calc(.8333333333rem / var(--scale));cursor:grab}.tableArea .table_wrapper table tbody tr td .gripper .gripper-img{min-width:16px}.tableArea .table_wrapper table tbody tr td .col_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:inherit;max-width:-webkit-fill-available}.tableArea .table_wrapper table tbody tr td .col_wrapper:has(.tag_wrapper){width:unset;max-width:max-content}.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-left:0;border-right:0;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-left:0;border-right:0;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))}.disable_group{pointer-events:none}\n"] }]
2467
3055
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { pinMenu: [{
2468
3056
  type: ViewChild,
2469
3057
  args: ['pinMenu']
@@ -2484,9 +3072,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2484
3072
  }], checkboxSelectionType: [{
2485
3073
  type: Input
2486
3074
  }], rowData: [{
2487
- type: Input
3075
+ type: Input,
3076
+ args: [{ required: true }]
2488
3077
  }], colDefs: [{
2489
- type: Input
3078
+ type: Input,
3079
+ args: [{ required: true }]
2490
3080
  }], paginationRequired: [{
2491
3081
  type: Input
2492
3082
  }], selectedRowEmpty: [{
@@ -2503,6 +3093,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2503
3093
  type: Input
2504
3094
  }], rowId: [{
2505
3095
  type: Input
3096
+ }], bigRows: [{
3097
+ type: Input
2506
3098
  }], height: [{
2507
3099
  type: Input
2508
3100
  }], groupByRequired: [{
@@ -2517,6 +3109,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2517
3109
  type: Output
2518
3110
  }], onHideSettings: [{
2519
3111
  type: Output
3112
+ }], onCellEdit: [{
3113
+ type: Output
3114
+ }], onColCongifgChange: [{
3115
+ type: Output
2520
3116
  }], pageSizeList: [{
2521
3117
  type: Input
2522
3118
  }], groupByField: [{
@@ -2542,6 +3138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2542
3138
  }] } });
2543
3139
 
2544
3140
  class CommonRendererComponent {
3141
+ parentContainer;
2545
3142
  params;
2546
3143
  static _activeRowId = signal(null, ...(ngDevMode ? [{ debugName: "_activeRowId" }] : []));
2547
3144
  static _activeTagId = signal(null, ...(ngDevMode ? [{ debugName: "_activeTagId" }] : []));
@@ -2558,6 +3155,7 @@ class CommonRendererComponent {
2558
3155
  this.params = params;
2559
3156
  this.data = data;
2560
3157
  this.paramsVal = this.parseColValue(params.data, params.col);
3158
+ this.parentContainer = document.body;
2561
3159
  }
2562
3160
  /**
2563
3161
  * @description Returns the renderer type defined in cellRendererParams.
@@ -2567,6 +3165,9 @@ class CommonRendererComponent {
2567
3165
  get type() {
2568
3166
  return this.params?.cellParams?.type;
2569
3167
  }
3168
+ get subType() {
3169
+ return this.params?.cellParams?.subType;
3170
+ }
2570
3171
  /**
2571
3172
  * @description Returns the renderer subtype defined in cellRendererParams.
2572
3173
  * @author Anand Pandey
@@ -2787,6 +3388,7 @@ class CommonRendererComponent {
2787
3388
  return {
2788
3389
  [valueProp]: val[this.params.cellParams?.[key]],
2789
3390
  class: val['class'] || '',
3391
+ ...val,
2790
3392
  };
2791
3393
  }
2792
3394
  else {
@@ -2799,6 +3401,7 @@ class CommonRendererComponent {
2799
3401
  {
2800
3402
  [valueProp]: value[this.params.cellParams?.[key]],
2801
3403
  class: value['class'] || '',
3404
+ ...value,
2802
3405
  },
2803
3406
  ];
2804
3407
  }
@@ -2829,7 +3432,7 @@ class CommonRendererComponent {
2829
3432
  }
2830
3433
  }
2831
3434
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2832
- 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" }] });
3435
+ 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 class=\"tag_wrapper\" #tagTrigger (mouseout)=\"closeDropdown($event)\">\n @for (tag of visibleTags; track $index) {\n <div\n class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\n [ngClass]=\"paramsVal | addClass: params.cellParams\"\n >\n @if (subType === \"badge\") {\n <span class=\"circle\" [class]=\"tag.badgeClass\"></span>\n }\n @if (tag.image) {\n <img src=\"{{ tag.image }}\" alt=\"\" class=\"icon\" />\n }\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 <span\n class=\"node_label\"\n [appTooltip]=\"tag.tagValue || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parentContainer\"\n >{{ tag.tagValue }}</span\n >\n </div>\n </div>\n </div>\n </div>\n }\n @if (hiddenCount > 0) {\n <div class=\"hidden_list\">\n <span class=\"tag_more\" (mouseover)=\"toggleDropdown($event)\"\n >+{{ hiddenCount }}</span\n >\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 class=\"{{ 'dropdown_item' + ' ' + tag.class }}\">\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 [appTooltip]=\"linkVal || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parentContainer\"\n >\n {{ linkVal }}\n >\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}.tooltip-trigger{cursor:default}*,*: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 .more_data_wrapper{max-width:calc(12.5rem / var(--scale))}.tag_wrapper .more_data_wrapper .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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));position:relative}.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}::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: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "tooltipPosition", "tooltipDelay", "tooltipBgColor", "tooltipTextColor", "tooltipPadding", "tooltipFontSize", "tooltipBorderRadius", "tooltipMaxWidth", "followCursor", "tooltipParentContainer"] }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
2833
3436
  }
2834
3437
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonRendererComponent, decorators: [{
2835
3438
  type: Component,
@@ -2838,7 +3441,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2838
3441
  AdaptivePositionDirective,
2839
3442
  CommonModule,
2840
3443
  AddClassPipe,
2841
- ], 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"] }]
3444
+ TooltipDirective,
3445
+ ], 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 class=\"tag_wrapper\" #tagTrigger (mouseout)=\"closeDropdown($event)\">\n @for (tag of visibleTags; track $index) {\n <div\n class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\n [ngClass]=\"paramsVal | addClass: params.cellParams\"\n >\n @if (subType === \"badge\") {\n <span class=\"circle\" [class]=\"tag.badgeClass\"></span>\n }\n @if (tag.image) {\n <img src=\"{{ tag.image }}\" alt=\"\" class=\"icon\" />\n }\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 <span\n class=\"node_label\"\n [appTooltip]=\"tag.tagValue || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parentContainer\"\n >{{ tag.tagValue }}</span\n >\n </div>\n </div>\n </div>\n </div>\n }\n @if (hiddenCount > 0) {\n <div class=\"hidden_list\">\n <span class=\"tag_more\" (mouseover)=\"toggleDropdown($event)\"\n >+{{ hiddenCount }}</span\n >\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 class=\"{{ 'dropdown_item' + ' ' + tag.class }}\">\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 [appTooltip]=\"linkVal || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parentContainer\"\n >\n {{ linkVal }}\n >\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}.tooltip-trigger{cursor:default}*,*: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 .more_data_wrapper{max-width:calc(12.5rem / var(--scale))}.tag_wrapper .more_data_wrapper .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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));position:relative}.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}::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"] }]
2842
3446
  }] });
2843
3447
 
2844
3448
  class CommonTreeTableComponent {
@@ -2848,12 +3452,16 @@ class CommonTreeTableComponent {
2848
3452
  tableAreaRef;
2849
3453
  pinMenu;
2850
3454
  data = [];
2851
- columns = [{ field: 'name', header: 'Name' }];
3455
+ columns = [
3456
+ { fieldName: 'name', header: 'Name' },
3457
+ ];
3458
+ tableOptions = {};
2852
3459
  idField = 'id';
3460
+ rowId = 'rowId';
2853
3461
  labelField = 'name';
2854
3462
  childrenField = 'array';
2855
3463
  treeColumnField;
2856
- indentPx = 18;
3464
+ indentPx = 24;
2857
3465
  showHeader = true;
2858
3466
  expandIcon = 'chevron-right.svg';
2859
3467
  collapseIcon = 'chevron-down.svg';
@@ -2865,12 +3473,16 @@ class CommonTreeTableComponent {
2865
3473
  emitExpandAlways = true;
2866
3474
  // New sorting, filtering, and customization inputs
2867
3475
  sortingRequired = true;
2868
- filterRequired = true;
3476
+ filterRequired = false;
2869
3477
  threeDotsMenuRequired = true;
2870
- settingsRequired = false;
3478
+ settingsRequired = true;
2871
3479
  settingsClicked = false;
2872
3480
  checkBoxSelection = false;
2873
3481
  checkboxSelectionType = 'multiple';
3482
+ paginationRequired = true;
3483
+ pageSizeList = [20, 50, 75, 100];
3484
+ totalRecords = 0;
3485
+ resetPage = true;
2874
3486
  isExpandable = (node) => {
2875
3487
  const children = node?.[this.childrenField];
2876
3488
  return Array.isArray(children) ? children.length > 0 : false;
@@ -2881,14 +3493,33 @@ class CommonTreeTableComponent {
2881
3493
  nodeToggle = new EventEmitter();
2882
3494
  selectionChange = new EventEmitter();
2883
3495
  linkClick = new EventEmitter();
3496
+ linkDoubleClick = new EventEmitter();
2884
3497
  onHideSettings = new EventEmitter();
3498
+ onPaginationChange = new EventEmitter();
3499
+ dateConfig = {
3500
+ selectionMode: 'single',
3501
+ enableTime: false,
3502
+ };
2885
3503
  rows = [];
3504
+ linkClickTimer = null;
3505
+ linkClickDelay = 250;
3506
+ // Pagination properties
3507
+ pageDetails = {
3508
+ pageSize: 20,
3509
+ totalPages: 1,
3510
+ currentPage: 1,
3511
+ };
3512
+ recordsToShow = {
3513
+ min: 0,
3514
+ max: 20,
3515
+ };
2886
3516
  // Sorting, filtering, and column management properties
2887
3517
  sortingColumnIndex = null;
2888
3518
  sortingType = {};
2889
3519
  filteredData = [];
2890
3520
  originalRowData = [];
2891
- activeFilters = new Map();
3521
+ // activeFilters: Map<string, any> = new Map();
3522
+ activeFilters = new Set();
2892
3523
  appliedFilters = [];
2893
3524
  menuVisible = [];
2894
3525
  dragOverIndex = null;
@@ -2912,6 +3543,7 @@ class CommonTreeTableComponent {
2912
3543
  rafId = null;
2913
3544
  removeDragOver = null;
2914
3545
  removeDrop = null;
3546
+ originalExpandedKeys = new Set();
2915
3547
  filterOptions = [
2916
3548
  { label: 'Contains', value: 'contains' },
2917
3549
  { label: 'Does Not Contain', value: 'doesNotContain' },
@@ -2984,75 +3616,230 @@ class CommonTreeTableComponent {
2984
3616
  this.renderer.removeStyle(document.body, 'cursor');
2985
3617
  this.renderer.removeStyle(document.body, 'user-select');
2986
3618
  }
2987
- ngOnChanges(changes) {
2988
- if (changes['data'] || changes['columns']) {
2989
- this.initializeColumns();
2990
- this.originalRowData = structuredClone(this.data || []);
2991
- this.rebuildRows();
2992
- }
2993
- }
2994
- ngDoCheck() {
2995
- this.rebuildRows();
2996
- }
2997
- get treeColumn() {
2998
- const preferredField = this.treeColumnField ?? this.resolvedTreeColumnField;
2999
- if (preferredField) {
3000
- const found = this.columns?.find((c) => c.field === preferredField);
3001
- if (found)
3002
- return found;
3003
- }
3004
- return this.columns?.[0] ?? { field: this.labelField, header: 'Name' };
3005
- }
3006
- /**
3007
- * Initialize column properties for filtering, sorting, and customization
3008
- */
3009
- initializeColumns() {
3010
- this.columns = this.columns.map((col, index) => {
3011
- if (!col.colId)
3012
- col.colId = col.field;
3013
- if (col.sortable === undefined)
3014
- col.sortable = true;
3015
- if (col.filterable === undefined)
3016
- col.filterable = true;
3017
- if (col.filterType === undefined)
3619
+ getUpdatedColDefs(colDefs) {
3620
+ const flattenTree = (data) => {
3621
+ const result = [];
3622
+ const recurse = (nodes, parentTreeId = '') => {
3623
+ nodes.forEach((node) => {
3624
+ const currentTreeId = parentTreeId + node[this.idField];
3625
+ node[this.rowId] = currentTreeId;
3626
+ result.push(node);
3627
+ if (node.array && Array.isArray(node.array)) {
3628
+ recurse(node.array, currentTreeId);
3629
+ }
3630
+ });
3631
+ };
3632
+ recurse(data);
3633
+ return result;
3634
+ };
3635
+ const flatRows = flattenTree(this.data);
3636
+ return colDefs.map((col, index) => {
3637
+ // Reset sorting type per column
3638
+ this.sortingType[index] = '';
3639
+ col.colId = `${Date.now()}_${index}`;
3640
+ if (!col.filterType && !col.isAction) {
3018
3641
  col.filterType = 'text';
3019
- if (col.active === undefined)
3020
- col.active = true;
3021
- if (col.width === undefined)
3022
- col.width = 150;
3023
- if (col.minWidth === undefined)
3024
- col.minWidth = 50;
3025
- if (!col.filters) {
3026
- col.filters = [
3027
- { filterOperation: 'contains', filterValue: '' },
3028
- { filterOperation: 'contains', filterValue: '' },
3029
- ];
3030
3642
  }
3031
- if (!col.selectedValues)
3032
- col.selectedValues = new Set();
3033
- if (!col.options && col.filterType === 'set') {
3034
- col.options = this.extractUniqueValues(this.data || [], col.field);
3035
- col.filteredOptions = [...(col.options || [])];
3643
+ if (!col.filterLogic) {
3644
+ col.filterLogic = 'OR';
3036
3645
  }
3037
- if (!this.menuVisible[index])
3038
- this.menuVisible[index] = false;
3039
- const key = col.colId || col.field;
3040
- if (this.pinActionClicked[key] == null) {
3041
- this.pinActionClicked[key] = col.leftPinned
3042
- ? 'left'
3043
- : col.rightPinned
3044
- ? 'right'
3045
- : 'none';
3646
+ let updatedCol = {
3647
+ ...col,
3648
+ active: col.active ?? true,
3649
+ locked: col.locked ?? false,
3650
+ filterable: col.filterable ?? true,
3651
+ columnAction: col.columnAction ?? true,
3652
+ sortable: col.sortable ?? true,
3653
+ };
3654
+ if (!updatedCol.filterable) {
3655
+ return updatedCol;
3046
3656
  }
3047
- return col;
3048
- });
3657
+ // --------------------------------------------------------------------
3658
+ // SET FILTER TYPE
3659
+ // --------------------------------------------------------------------
3660
+ switch (col.filterType) {
3661
+ case 'text':
3662
+ updatedCol = {
3663
+ ...updatedCol,
3664
+ filters: [
3665
+ {
3666
+ filterOperation: 'contains',
3667
+ filterValue: '',
3668
+ },
3669
+ {
3670
+ filterOperation: 'startsWith',
3671
+ filterValue: '',
3672
+ },
3673
+ ],
3674
+ };
3675
+ break;
3676
+ case 'number':
3677
+ case 'date':
3678
+ updatedCol = {
3679
+ ...updatedCol,
3680
+ filters: [
3681
+ {
3682
+ filterOperation: '=',
3683
+ filterValue: '',
3684
+ },
3685
+ {
3686
+ filterOperation: '=',
3687
+ filterValue: '',
3688
+ },
3689
+ ],
3690
+ };
3691
+ break;
3692
+ case 'set':
3693
+ let fieldName = col.fieldName;
3694
+ if (fieldName.includes('.')) {
3695
+ fieldName = fieldName.split('.')[0];
3696
+ }
3697
+ const options = [
3698
+ ...new Set(flatRows
3699
+ .flatMap((r) => this.normalizeSetFilterType(r[fieldName], col?.cellRendererParams?.tagKey))
3700
+ .filter(Boolean)),
3701
+ ];
3702
+ updatedCol = {
3703
+ ...updatedCol,
3704
+ options,
3705
+ filteredOptions: options,
3706
+ selectedValues: new Set(options),
3707
+ };
3708
+ break;
3709
+ }
3710
+ // --------------------------------------------------------------------
3711
+ // RESTORE APPLIED FILTERS (PERSISTENCE)
3712
+ // --------------------------------------------------------------------
3713
+ if (this.appliedFilters.length > 0) {
3714
+ const appliedFilter = this.appliedFilters.find((f) => f.fieldName === col.fieldName);
3715
+ if (appliedFilter) {
3716
+ switch (col.filterType) {
3717
+ case 'text':
3718
+ case 'number':
3719
+ case 'date':
3720
+ updatedCol = {
3721
+ ...updatedCol,
3722
+ filters: appliedFilter.filters,
3723
+ filterLogic: appliedFilter.filterLogic,
3724
+ };
3725
+ break;
3726
+ case 'set':
3727
+ let fieldName = col.fieldName;
3728
+ if (fieldName.includes('.')) {
3729
+ fieldName = fieldName.split('.')[0];
3730
+ }
3731
+ const options = [
3732
+ ...new Set(flatRows
3733
+ .flatMap((r) => this.normalizeSetFilterType(r[fieldName], col?.cellRendererParams?.tagKey))
3734
+ .filter(Boolean)),
3735
+ ];
3736
+ const selectedValues = new Set(appliedFilter.filters.map((f) => f.filterValue));
3737
+ updatedCol = {
3738
+ ...updatedCol,
3739
+ options,
3740
+ filteredOptions: options,
3741
+ selectedValues,
3742
+ };
3743
+ break;
3744
+ }
3745
+ }
3746
+ }
3747
+ return updatedCol;
3748
+ });
3749
+ }
3750
+ normalizeSetFilterType(value, key) {
3751
+ if (!value)
3752
+ return;
3753
+ if (Array.isArray(value) && typeof value[0] === 'string') {
3754
+ return value;
3755
+ }
3756
+ if (Array.isArray(value) && typeof value[0] === 'object') {
3757
+ return (value = value.map((val) => val[key]));
3758
+ }
3759
+ if (typeof value === 'string') {
3760
+ return [value];
3761
+ }
3762
+ if (typeof value === 'object') {
3763
+ return [value[key]];
3764
+ }
3765
+ return [];
3766
+ }
3767
+ ngOnChanges(changes) {
3768
+ if (changes['data'] || changes['columns']) {
3769
+ // this.initializeColumns();
3770
+ this.columns = this.getUpdatedColDefs(changes['columns']?.currentValue);
3771
+ this.originalRowData = structuredClone(this.data || []);
3772
+ this.rebuildRows();
3773
+ }
3774
+ if (changes['totalRecords']?.currentValue && this.resetPage) {
3775
+ this.resetPagination();
3776
+ }
3777
+ else {
3778
+ this.setPageCount();
3779
+ }
3780
+ }
3781
+ ngDoCheck() {
3782
+ this.rebuildRows();
3783
+ }
3784
+ get treeColumn() {
3785
+ const preferredField = this.treeColumnField ?? this.resolvedTreeColumnField;
3786
+ if (preferredField) {
3787
+ const found = this.columns?.find((c) => c.fieldName === preferredField);
3788
+ if (found)
3789
+ return found;
3790
+ }
3791
+ return this.columns?.[0] ?? { fieldName: this.labelField, header: 'Name' };
3792
+ }
3793
+ /**
3794
+ * Initialize column properties for filtering, sorting, and customization
3795
+ */
3796
+ initializeColumns() {
3797
+ this.columns = this.columns.map((col, index) => {
3798
+ if (!col.colId)
3799
+ col.colId = col.fieldName;
3800
+ if (col.sortable === undefined)
3801
+ col.sortable = true;
3802
+ if (col.filterable === undefined)
3803
+ col.filterable = false;
3804
+ if (col.filterType === undefined)
3805
+ col.filterType = 'text';
3806
+ if (col.active === undefined)
3807
+ col.active = true;
3808
+ if (col.width === undefined)
3809
+ col.width = 150;
3810
+ if (col.minWidth === undefined)
3811
+ col.minWidth = 50;
3812
+ if (!col.filters) {
3813
+ col.filters = [
3814
+ { filterOperation: 'contains', filterValue: '' },
3815
+ { filterOperation: 'contains', filterValue: '' },
3816
+ ];
3817
+ }
3818
+ if (!col.selectedValues)
3819
+ col.selectedValues = new Set();
3820
+ if (!col.options && col.filterType === 'set') {
3821
+ col.options = this.extractUniqueValues(this.data || [], col.fieldName);
3822
+ col.filteredOptions = [...(col.options || [])];
3823
+ }
3824
+ if (!this.menuVisible[index])
3825
+ this.menuVisible[index] = false;
3826
+ const key = col.colId || col.fieldName;
3827
+ if (this.pinActionClicked[key] == null) {
3828
+ this.pinActionClicked[key] = col.leftPinned
3829
+ ? 'left'
3830
+ : col.rightPinned
3831
+ ? 'right'
3832
+ : 'none';
3833
+ }
3834
+ return col;
3835
+ });
3049
3836
  // If the consumer didn't specify a tree column, keep the initial first column as the tree UI column
3050
3837
  // even when columns are later reordered (pin/drag).
3051
3838
  if (!this.treeColumnField) {
3052
- const firstField = this.columns?.[0]?.field;
3839
+ const firstField = this.columns?.[0]?.fieldName;
3053
3840
  if (firstField &&
3054
3841
  (this.resolvedTreeColumnField == null ||
3055
- !this.columns.some((c) => c.field === this.resolvedTreeColumnField))) {
3842
+ !this.columns.some((c) => c.fieldName === this.resolvedTreeColumnField))) {
3056
3843
  this.resolvedTreeColumnField = firstField;
3057
3844
  }
3058
3845
  }
@@ -3061,11 +3848,11 @@ class CommonTreeTableComponent {
3061
3848
  /**
3062
3849
  * Extract unique values from data for set filter
3063
3850
  */
3064
- extractUniqueValues(data, field) {
3851
+ extractUniqueValues(data, fieldName) {
3065
3852
  const values = new Set();
3066
3853
  const visit = (nodes) => {
3067
3854
  for (const node of nodes) {
3068
- values.add(this.getValue(node, field));
3855
+ values.add(this.getValue(node, fieldName));
3069
3856
  const children = this.getChildren(node);
3070
3857
  if (Array.isArray(children))
3071
3858
  visit(children);
@@ -3130,8 +3917,8 @@ class CommonTreeTableComponent {
3130
3917
  if (!sortType)
3131
3918
  return;
3132
3919
  const sortFn = (a, b) => {
3133
- const aVal = this.getValue(a, col.field);
3134
- const bVal = this.getValue(b, col.field);
3920
+ const aVal = this.getValue(a, col.fieldName);
3921
+ const bVal = this.getValue(b, col.fieldName);
3135
3922
  if (aVal === bVal)
3136
3923
  return 0;
3137
3924
  if (aVal === null || aVal === undefined)
@@ -3158,33 +3945,203 @@ class CommonTreeTableComponent {
3158
3945
  /**
3159
3946
  * Apply all active filters
3160
3947
  */
3948
+ // applyAllFilters(): void {
3949
+ // let result: T[] = structuredClone(this.originalRowData);
3950
+ // this.columns.forEach((col) => {
3951
+ // if (!col.filters || col.filterType === 'set') return;
3952
+ // const hasFirstValue = col.filters[0]?.filterValue;
3953
+ // if (!hasFirstValue) return;
3954
+ // result = result.filter((row) => {
3955
+ // const fieldValue = String(this.getValue(row, col.fieldName)).toLowerCase();
3956
+ // const filterOp = col.filters?.[0]?.filterOperation;
3957
+ // const filterVal = String(col.filters?.[0]?.filterValue).toLowerCase();
3958
+ // if (!this.evaluateTextFilterCondition(filterOp || '', fieldValue, filterVal)) {
3959
+ // return false;
3960
+ // }
3961
+ // if (col.filters?.[1]?.filterValue) {
3962
+ // const secondOp = col.filters[1].filterOperation;
3963
+ // const secondVal = String(col.filters[1].filterValue).toLowerCase();
3964
+ // return this.evaluateTextFilterCondition(secondOp || '', fieldValue, secondVal);
3965
+ // }
3966
+ // return true;
3967
+ // });
3968
+ // });
3969
+ // this.filteredData = result;
3970
+ // this.data = this.filteredData;
3971
+ // this.rebuildRows();
3972
+ // }
3161
3973
  applyAllFilters() {
3162
- let result = structuredClone(this.originalRowData);
3974
+ // 1. Check if ALL column filters are empty
3975
+ const allFiltersEmpty = this.columns.every((col) => !col.filters || col.filters.every((f) => !f.filterValue));
3976
+ // 2. If filters are cleared → restore original expansion & data
3977
+ if (allFiltersEmpty) {
3978
+ this.expandedKeys = new Set(this.originalExpandedKeys); // restore
3979
+ // this.expandedKeys.clear()
3980
+ this.filteredData = this.originalRowData;
3981
+ this.data = this.originalRowData;
3982
+ this.rebuildRows();
3983
+ return;
3984
+ }
3985
+ let cloned = structuredClone(this.originalRowData);
3986
+ this.activeFilters.clear();
3163
3987
  this.columns.forEach((col) => {
3164
- if (!col.filters || col.filterType === 'set')
3165
- return;
3166
- const hasFirstValue = col.filters[0]?.filterValue;
3167
- if (!hasFirstValue)
3168
- return;
3169
- result = result.filter((row) => {
3170
- const fieldValue = String(this.getValue(row, col.field)).toLowerCase();
3171
- const filterOp = col.filters?.[0]?.filterOperation;
3172
- const filterVal = String(col.filters?.[0]?.filterValue).toLowerCase();
3173
- if (!this.evaluateTextFilterCondition(filterOp || '', fieldValue, filterVal)) {
3174
- return false;
3988
+ if (col.filterable) {
3989
+ if (col.filterType === 'text') {
3990
+ // *********** TEXT FILTER ***********
3991
+ const [c1, c2] = col.filters;
3992
+ const textVal1 = c1.filterValue?.toLowerCase().trim();
3993
+ const textVal2 = c2.filterValue?.toLowerCase().trim();
3994
+ if (!textVal1 && !textVal2) {
3995
+ this.activeFilters.delete(col.fieldName);
3996
+ return;
3997
+ }
3998
+ this.activeFilters.add(col.fieldName);
3999
+ let filteredTree;
4000
+ if (this.activeFilters.size == 1) {
4001
+ // cloned = structuredClone(this.originalRowData);
4002
+ filteredTree = this.filterTree(cloned);
4003
+ }
4004
+ else {
4005
+ filteredTree = this.filterTree(this.data);
4006
+ }
4007
+ this.expandAllParentsAfterFilter(filteredTree);
4008
+ this.filteredData = filteredTree;
4009
+ this.data = filteredTree;
4010
+ this.rebuildRows();
3175
4011
  }
3176
- if (col.filters?.[1]?.filterValue) {
3177
- const secondOp = col.filters[1].filterOperation;
3178
- const secondVal = String(col.filters[1].filterValue).toLowerCase();
3179
- return this.evaluateTextFilterCondition(secondOp || '', fieldValue, secondVal);
4012
+ }
4013
+ });
4014
+ }
4015
+ expandAllParentsAfterFilter(tree) {
4016
+ const traverse = (nodes) => {
4017
+ for (const node of nodes) {
4018
+ const children = node.array || node.children;
4019
+ // If node has children → expand it
4020
+ if (Array.isArray(children) && children.length > 0) {
4021
+ const key = this.getNodeKey(node);
4022
+ this.expandedKeys.add(key); // <-- EXPAND HERE
4023
+ traverse(children);
3180
4024
  }
3181
- return true;
3182
- });
4025
+ }
4026
+ };
4027
+ traverse(tree);
4028
+ }
4029
+ // private filterTree(data: any[]): any[] {
4030
+ // const filtered: any[] = [];
4031
+ // data.forEach((node) => {
4032
+ // let newNode = { ...node };
4033
+ // // If children exist → recursively filter them
4034
+ // if (node.array && node.array.length) {
4035
+ // newNode.array = this.filterTree(node.array);
4036
+ // }
4037
+ // const isLeafMatch = this.matchesAllFilters(node);
4038
+ // const hasChildMatch = newNode.array && newNode.array.length > 0;
4039
+ // // Keep node if itself matches OR its child matches
4040
+ // if (isLeafMatch || hasChildMatch) {
4041
+ // filtered.push(newNode);
4042
+ // }
4043
+ // });
4044
+ // return filtered;
4045
+ // }
4046
+ filterTree(data) {
4047
+ const filtered = [];
4048
+ data.forEach((node) => {
4049
+ const nodeMatches = this.matchesAllFilters(node);
4050
+ // Case 1: Parent matches → keep ALL children UNFILTERED
4051
+ if (nodeMatches) {
4052
+ filtered.push({
4053
+ ...node,
4054
+ array: node.array ? structuredClone(node.array) : [],
4055
+ });
4056
+ return;
4057
+ }
4058
+ // Case 2: Parent does NOT match → filter children
4059
+ let filteredChildren = [];
4060
+ if (node.array && node.array.length > 0) {
4061
+ filteredChildren = this.filterTree(node.array);
4062
+ }
4063
+ // If children match → keep parent with filtered children
4064
+ if (filteredChildren.length > 0) {
4065
+ filtered.push({
4066
+ ...node,
4067
+ array: filteredChildren,
4068
+ });
4069
+ }
4070
+ // Otherwise → remove this node entirely
3183
4071
  });
3184
- this.filteredData = result;
3185
- this.data = this.filteredData;
3186
- this.rebuildRows();
4072
+ return filtered;
4073
+ }
4074
+ matchesAllFilters(row) {
4075
+ let result = true;
4076
+ for (const col of this.columns) {
4077
+ if (!col.filters || col.filterType === 'set')
4078
+ continue;
4079
+ const f1 = col.filters[0];
4080
+ const f2 = col.filters[1];
4081
+ const fieldValue = String(this.getValue(row, col.fieldName)).toLowerCase();
4082
+ const fv1 = f1?.filterValue?.toString().toLowerCase() || '';
4083
+ const fv2 = f2?.filterValue?.toString().toLowerCase() || '';
4084
+ const op1 = f1?.filterOperation || '';
4085
+ const op2 = f2?.filterOperation || '';
4086
+ const logic = col.filterLogic || 'AND';
4087
+ const hasF1 = !!fv1;
4088
+ const hasF2 = !!fv2;
4089
+ // when no filters -> skip this column
4090
+ if (!hasF1 && !hasF2)
4091
+ continue;
4092
+ let colResult = true;
4093
+ if (hasF1 && !hasF2) {
4094
+ colResult = this.evaluateTextFilterCondition(op1, fieldValue, fv1);
4095
+ }
4096
+ else if (!hasF1 && hasF2) {
4097
+ colResult = this.evaluateTextFilterCondition(op2, fieldValue, fv2);
4098
+ }
4099
+ else {
4100
+ // both filters exist → AND / OR
4101
+ const m1 = this.evaluateTextFilterCondition(op1, fieldValue, fv1);
4102
+ const m2 = this.evaluateTextFilterCondition(op2, fieldValue, fv2);
4103
+ colResult = logic === 'AND' ? m1 && m2 : m1 || m2;
4104
+ }
4105
+ // merge column result with global result
4106
+ result = colResult;
4107
+ }
4108
+ return result;
3187
4109
  }
4110
+ // private matchesAllFilters(row: any): boolean {
4111
+ // let isMatch = true;
4112
+ // this.columns.forEach((col) => {
4113
+ // if (!col.filters || col.filterType === 'set') return;
4114
+ // const f1 = col.filters[0];
4115
+ // if (!f1?.filterValue) return;
4116
+ // const fieldValue = String(
4117
+ // this.getValue(row, col.fieldName),
4118
+ // ).toLowerCase();
4119
+ // if (
4120
+ // !this.evaluateTextFilterCondition(
4121
+ // f1.filterOperation || '',
4122
+ // fieldValue,
4123
+ // String(f1.filterValue).toLowerCase(),
4124
+ // )
4125
+ // ) {
4126
+ // isMatch = false;
4127
+ // return;
4128
+ // }
4129
+ // if (col.filters[1]?.filterValue) {
4130
+ // const f2 = col.filters[1];
4131
+ // const fv2 = String(f2.filterValue).toLowerCase();
4132
+ // if (
4133
+ // !this.evaluateTextFilterCondition(
4134
+ // f2.filterOperation || '',
4135
+ // fieldValue,
4136
+ // fv2,
4137
+ // )
4138
+ // ) {
4139
+ // isMatch = false;
4140
+ // }
4141
+ // }
4142
+ // });
4143
+ // return isMatch;
4144
+ // }
3188
4145
  /**
3189
4146
  * Evaluate text filter condition
3190
4147
  */
@@ -3222,7 +4179,7 @@ class CommonTreeTableComponent {
3222
4179
  }
3223
4180
  if (col.selectedValues)
3224
4181
  col.selectedValues.clear();
3225
- this.activeFilters.delete(col.field);
4182
+ this.activeFilters.delete(col.fieldName);
3226
4183
  this.applyAllFilters();
3227
4184
  }
3228
4185
  /**
@@ -3321,12 +4278,12 @@ class CommonTreeTableComponent {
3321
4278
  * Pin column to left or right
3322
4279
  */
3323
4280
  pinColumn(col, index, direction) {
3324
- const key = col.colId || col.field;
4281
+ const key = col.colId || col.fieldName;
3325
4282
  this.pinActionClicked[key] = direction;
3326
4283
  col.leftPinned = direction === 'left';
3327
4284
  col.rightPinned = direction === 'right';
3328
4285
  // Reorder columns to mirror `cats-data-grid` behavior.
3329
- const currentIndex = this.columns.findIndex((c) => (c.colId || c.field) === key);
4286
+ const currentIndex = this.columns.findIndex((c) => (c.colId || c.fieldName) === key);
3330
4287
  if (currentIndex >= 0) {
3331
4288
  this.columns.splice(currentIndex, 1);
3332
4289
  }
@@ -3345,9 +4302,9 @@ class CommonTreeTableComponent {
3345
4302
  const middle = this.columns.filter((c) => !c.leftPinned && !c.rightPinned);
3346
4303
  const byKey = new Map();
3347
4304
  for (const c of middle)
3348
- byKey.set(c.colId || c.field, c);
4305
+ byKey.set(c.colId || c.fieldName, c);
3349
4306
  byKey.set(key, col);
3350
- const originalKeys = (this.originalColumns || []).map((c) => c.colId || c.field);
4307
+ const originalKeys = (this.originalColumns || []).map((c) => c.colId || c.fieldName);
3351
4308
  const orderedMiddle = [];
3352
4309
  for (const k of originalKeys) {
3353
4310
  const match = byKey.get(k);
@@ -3418,7 +4375,8 @@ class CommonTreeTableComponent {
3418
4375
  */
3419
4376
  filterSetOptions(col, event) {
3420
4377
  const text = event.target.value.toLowerCase();
3421
- col.filteredOptions = col.options?.filter((option) => String(option).toLowerCase().includes(text)) || [];
4378
+ col.filteredOptions =
4379
+ col.options?.filter((option) => String(option).toLowerCase().includes(text)) || [];
3422
4380
  }
3423
4381
  /**
3424
4382
  * Toggle set filter option
@@ -3447,20 +4405,18 @@ class CommonTreeTableComponent {
3447
4405
  */
3448
4406
  getStyle(col) {
3449
4407
  const style = {
3450
- width: `${col.width ?? 150}px`,
4408
+ width: `${col.width ?? 200}px`,
3451
4409
  minWidth: `${col.minWidth ?? 50}px`,
3452
4410
  };
3453
4411
  if (col.leftPinned) {
3454
4412
  style.position = 'sticky';
3455
4413
  style.left = `${col.leftOffset ?? 0}px`;
3456
- style.zIndex = 20;
3457
- style.background = 'var(--white)';
4414
+ style.zIndex = 1;
3458
4415
  }
3459
4416
  else if (col.rightPinned) {
3460
4417
  style.position = 'sticky';
3461
4418
  style.right = `${col.rightOffset ?? 0}px`;
3462
- style.zIndex = 20;
3463
- style.background = 'var(--white)';
4419
+ style.zIndex = 1;
3464
4420
  }
3465
4421
  return style;
3466
4422
  }
@@ -3468,9 +4424,16 @@ class CommonTreeTableComponent {
3468
4424
  * Toggle column visibility
3469
4425
  */
3470
4426
  changeActiveColSelection(event, col) {
3471
- col.active = !event.target.checked;
4427
+ // Prevent deselection of locked headers
4428
+ if (col.headerLocked) {
4429
+ col.active = true;
4430
+ return;
4431
+ }
4432
+ col.active = event.target.checked;
3472
4433
  this.atLeastOneColumnChecked = this.columns.some((dt) => dt.active);
3473
- this.saveColumnState();
4434
+ // Update activeAll state
4435
+ this.activeAll = this.columns.every((dt) => dt.active);
4436
+ // this.saveColumnState();
3474
4437
  }
3475
4438
  /**
3476
4439
  * Compute minimum table width based on active column widths
@@ -3486,10 +4449,16 @@ class CommonTreeTableComponent {
3486
4449
  activeAllSelection(event) {
3487
4450
  const checked = event.target.checked;
3488
4451
  this.columns.forEach((col) => {
3489
- col.active = checked;
4452
+ if (col.headerLocked) {
4453
+ col.active = true;
4454
+ }
4455
+ else {
4456
+ col.active = checked;
4457
+ }
3490
4458
  });
3491
- this.activeAll = checked;
3492
- this.saveColumnState();
4459
+ this.activeAll = this.columns.every((dt) => dt.active);
4460
+ this.atLeastOneColumnChecked = this.columns.some((dt) => dt.active);
4461
+ // this.saveColumnState();
3493
4462
  }
3494
4463
  /**
3495
4464
  * Hide settings
@@ -3503,6 +4472,7 @@ class CommonTreeTableComponent {
3503
4472
  onClickOutside() {
3504
4473
  this.activeFilterIndex = null;
3505
4474
  this.showPin = false;
4475
+ this.showPageSizeList = false;
3506
4476
  this.menuVisible = this.menuVisible.map(() => false);
3507
4477
  }
3508
4478
  /**
@@ -3516,15 +4486,116 @@ class CommonTreeTableComponent {
3516
4486
  this.menuVisible[index] = true;
3517
4487
  }
3518
4488
  /**
3519
- * On header checkbox change
4489
+ * Recursively select all children of a node
4490
+ */
4491
+ selectAllChildren(node) {
4492
+ const key = this.getNodeKey(node);
4493
+ this.selectedKeys.add(key);
4494
+ const children = this.getChildren(node);
4495
+ if (Array.isArray(children)) {
4496
+ for (const child of children) {
4497
+ this.selectAllChildren(child);
4498
+ }
4499
+ }
4500
+ }
4501
+ /**
4502
+ * Recursively deselect all children of a node
4503
+ */
4504
+ deselectAllChildren(node) {
4505
+ const key = this.getNodeKey(node);
4506
+ this.selectedKeys.delete(key);
4507
+ const children = this.getChildren(node);
4508
+ if (Array.isArray(children)) {
4509
+ for (const child of children) {
4510
+ this.deselectAllChildren(child);
4511
+ }
4512
+ }
4513
+ }
4514
+ /**
4515
+ * Recursively select all nodes in the tree
4516
+ */
4517
+ selectAllNodes(nodes) {
4518
+ for (const node of nodes) {
4519
+ this.selectAllChildren(node);
4520
+ }
4521
+ }
4522
+ /**
4523
+ * Recursively deselect all nodes in the tree
4524
+ */
4525
+ deselectAllNodes(nodes) {
4526
+ for (const node of nodes) {
4527
+ this.deselectAllChildren(node);
4528
+ }
4529
+ }
4530
+ // /**
4531
+ // * Check if all children of a node are selected
4532
+ // */
4533
+ // private areAllChildrenSelected(node: T): boolean {
4534
+ // const children = this.getChildren(node);
4535
+ // if (!Array.isArray(children) || children.length === 0) {
4536
+ // return true;
4537
+ // }
4538
+ // for (const child of children) {
4539
+ // const childKey = this.getNodeKey(child);
4540
+ // if (!this.selectedKeys.has(childKey)) {
4541
+ // return false;
4542
+ // }
4543
+ // }
4544
+ // return true;
4545
+ // }
4546
+ // /**
4547
+ // * Check if any children of a node are selected
4548
+ // */
4549
+ // private areAnyChildrenSelected(node: T): boolean {
4550
+ // const children = this.getChildren(node);
4551
+ // if (!Array.isArray(children) || children.length === 0) {
4552
+ // return false;
4553
+ // }
4554
+ // for (const child of children) {
4555
+ // const childKey = this.getNodeKey(child);
4556
+ // if (this.selectedKeys.has(childKey)) {
4557
+ // return true;
4558
+ // }
4559
+ // }
4560
+ // return false;
4561
+ // }
4562
+ /**
4563
+ * Update parent node selection based on children state
4564
+ */
4565
+ updateParentSelection(parentPath) {
4566
+ // Update parents bottom-up
4567
+ for (let i = parentPath.length - 1; i >= 0; i--) {
4568
+ const parent = parentPath[i];
4569
+ const children = this.getChildren(parent);
4570
+ if (!Array.isArray(children) || children.length === 0) {
4571
+ continue;
4572
+ }
4573
+ // Check if all children are selected
4574
+ const allSelected = children.every((child) => this.selectedKeys.has(this.getNodeKey(child)));
4575
+ const parentKey = this.getNodeKey(parent);
4576
+ if (allSelected) {
4577
+ // Auto-select parent if all children are selected
4578
+ this.selectedKeys.add(parentKey);
4579
+ }
4580
+ // Note: We don't auto-deselect parent when children are deselected
4581
+ // This allows manual parent selection independent of children
4582
+ }
4583
+ }
4584
+ /**
4585
+ * On header checkbox change - select all nodes hierarchically
3520
4586
  */
3521
4587
  onHeaderCheckboxChange(event) {
3522
4588
  if (event.target.checked) {
3523
- this.selectedRow = [...this.data];
4589
+ this.selectAllNodes(this.data || []);
3524
4590
  }
3525
4591
  else {
3526
- this.selectedRow = [];
4592
+ this.deselectAllNodes(this.data || []);
3527
4593
  }
4594
+ this.selectionChange.emit({
4595
+ checked: event.target.checked,
4596
+ selectedNodes: this.data || [],
4597
+ });
4598
+ this.cd.markForCheck();
3528
4599
  }
3529
4600
  /**
3530
4601
  * On row checkbox change
@@ -3549,7 +4620,7 @@ class CommonTreeTableComponent {
3549
4620
  * Check if some rows are selected (indeterminate state)
3550
4621
  */
3551
4622
  checkIndeterminate() {
3552
- return this.selectedRow.length > 0 && this.selectedRow.length < this.data.length;
4623
+ return (this.selectedRow.length > 0 && this.selectedRow.length < this.data.length);
3553
4624
  }
3554
4625
  /**
3555
4626
  * Check if row is selected
@@ -3557,30 +4628,108 @@ class CommonTreeTableComponent {
3557
4628
  isRowSelected(node) {
3558
4629
  return this.selectedRow.includes(node);
3559
4630
  }
4631
+ /**
4632
+ * Check if a node has indeterminate selection state (some but not all children selected)
4633
+ */
4634
+ isNodeIndeterminate(node) {
4635
+ const children = this.getChildren(node);
4636
+ if (!Array.isArray(children) || children.length === 0) {
4637
+ return false;
4638
+ }
4639
+ let selectedCount = 0;
4640
+ for (const child of children) {
4641
+ const childKey = this.getNodeKey(child);
4642
+ if (this.selectedKeys.has(childKey)) {
4643
+ selectedCount++;
4644
+ }
4645
+ }
4646
+ // Indeterminate if some but not all children are selected
4647
+ return selectedCount > 0 && selectedCount < children.length;
4648
+ }
4649
+ /**
4650
+ * Check header checkbox indeterminate state
4651
+ */
4652
+ checkHeaderIndeterminate() {
4653
+ if (this.selectedKeys.size === 0)
4654
+ return false;
4655
+ // Count total nodes in tree
4656
+ let totalNodes = 0;
4657
+ const countNodes = (nodes) => {
4658
+ for (const node of nodes) {
4659
+ totalNodes++;
4660
+ const children = this.getChildren(node);
4661
+ if (Array.isArray(children)) {
4662
+ countNodes(children);
4663
+ }
4664
+ }
4665
+ };
4666
+ countNodes(this.data || []);
4667
+ return this.selectedKeys.size > 0 && this.selectedKeys.size < totalNodes;
4668
+ }
4669
+ /**
4670
+ * Check if header checkbox should be checked
4671
+ */
4672
+ checkHeaderChecked() {
4673
+ if (this.selectedKeys.size === 0)
4674
+ return false;
4675
+ // Count total nodes in tree
4676
+ let totalNodes = 0;
4677
+ const countNodes = (nodes) => {
4678
+ for (const node of nodes) {
4679
+ totalNodes++;
4680
+ const children = this.getChildren(node);
4681
+ if (Array.isArray(children)) {
4682
+ countNodes(children);
4683
+ }
4684
+ }
4685
+ };
4686
+ countNodes(this.data || []);
4687
+ return this.selectedKeys.size === totalNodes;
4688
+ }
3560
4689
  toggle(node, level, path) {
3561
4690
  const key = this.getNodeKey(node);
3562
4691
  if (this.expandedKeys.has(key)) {
3563
4692
  this.expandedKeys.delete(key);
4693
+ // Recursively collapse all children
4694
+ this.collapseAllChildren(node);
3564
4695
  this.nodeToggle.emit({ node, level, path, expanded: false });
3565
4696
  this.rebuildRows();
3566
4697
  return;
3567
4698
  }
3568
4699
  this.expandedKeys.add(key);
4700
+ this.originalExpandedKeys = new Set(this.expandedKeys);
3569
4701
  if (this.emitExpandAlways || this.getChildren(node) == null) {
3570
4702
  this.nodeToggle.emit({ node, level, path, expanded: true });
3571
4703
  }
3572
4704
  this.rebuildRows();
3573
4705
  }
4706
+ /**
4707
+ * Recursively collapse all children of a node
4708
+ */
4709
+ collapseAllChildren(node) {
4710
+ const children = this.getChildren(node);
4711
+ if (Array.isArray(children)) {
4712
+ for (const child of children) {
4713
+ const childKey = this.getNodeKey(child);
4714
+ this.expandedKeys.delete(childKey);
4715
+ this.collapseAllChildren(child);
4716
+ }
4717
+ }
4718
+ }
3574
4719
  isExpanded(node) {
3575
4720
  return this.expandedKeys.has(this.getNodeKey(node));
3576
4721
  }
3577
4722
  onCheckboxChange(node, level, path, checked) {
3578
4723
  const key = this.getNodeKey(node);
3579
4724
  if (checked) {
3580
- this.selectedKeys.add(key);
4725
+ // When node is checked, select all its children recursively
4726
+ this.selectAllChildren(node);
4727
+ // Auto-select all parents if all their children are selected
4728
+ this.updateParentSelection(path);
3581
4729
  }
3582
4730
  else {
3583
- this.selectedKeys.delete(key);
4731
+ // When node is unchecked, deselect all its children recursively
4732
+ this.deselectAllChildren(node);
3584
4733
  }
3585
4734
  this.selectionChange.emit({
3586
4735
  node,
@@ -3589,19 +4738,52 @@ class CommonTreeTableComponent {
3589
4738
  checked,
3590
4739
  selectedNodes: this.getSelectedNodes(),
3591
4740
  });
4741
+ this.cd.markForCheck();
3592
4742
  }
3593
4743
  isChecked(node) {
3594
4744
  return this.selectedKeys.has(this.getNodeKey(node));
3595
4745
  }
3596
- onLinkClicked(e, node, level, path) {
4746
+ onLinkClicked(e, node, level, path, col) {
4747
+ // Timer-based single/double click logic
4748
+ if (this.linkClickTimer) {
4749
+ clearTimeout(this.linkClickTimer);
4750
+ this.linkClickTimer = null;
4751
+ }
4752
+ e.preventDefault();
4753
+ e.stopPropagation();
4754
+ this.linkClickTimer = setTimeout(() => {
4755
+ this.linkClick.emit({
4756
+ node,
4757
+ level,
4758
+ path,
4759
+ url: this.linkResolver(node, level, path),
4760
+ col,
4761
+ });
4762
+ this.linkClickTimer = null;
4763
+ }, this.linkClickDelay);
4764
+ }
4765
+ onLinkDoubleClicked(e, node, level, path, col) {
4766
+ // Cancel single click timer and emit double click
4767
+ if (this.linkClickTimer) {
4768
+ clearTimeout(this.linkClickTimer);
4769
+ this.linkClickTimer = null;
4770
+ }
3597
4771
  e.preventDefault();
3598
4772
  e.stopPropagation();
3599
- this.linkClick.emit({ node, level, path, url: this.linkResolver(node, level, path) });
4773
+ this.linkDoubleClick.emit({
4774
+ node,
4775
+ level,
4776
+ path,
4777
+ url: this.linkResolver(node, level, path),
4778
+ col,
4779
+ });
3600
4780
  }
3601
4781
  resolveIconSrc(icon) {
3602
4782
  if (!icon)
3603
4783
  return null;
3604
- if (icon.includes('/') || icon.startsWith('http://') || icon.startsWith('https://')) {
4784
+ if (icon.includes('/') ||
4785
+ icon.startsWith('http://') ||
4786
+ icon.startsWith('https://')) {
3605
4787
  return icon;
3606
4788
  }
3607
4789
  return `${this.iconBasePath}/${icon}`;
@@ -3612,7 +4794,7 @@ class CommonTreeTableComponent {
3612
4794
  const parts = fieldPath.split('.');
3613
4795
  let cur = node;
3614
4796
  for (const part of parts) {
3615
- if (cur == null)
4797
+ if (cur == null || typeof cur !== 'object')
3616
4798
  return '';
3617
4799
  cur = cur?.[part];
3618
4800
  }
@@ -3655,14 +4837,135 @@ class CommonTreeTableComponent {
3655
4837
  return this.getValue(row.node, this.labelField);
3656
4838
  }
3657
4839
  toggleIconFor(row) {
4840
+ if (this.isExpanded(row.node)) {
4841
+ }
3658
4842
  return this.isExpanded(row.node) ? this.collapseIcon : this.expandIcon;
3659
4843
  }
3660
4844
  nodeIconFor(row) {
3661
- return this.nodeIconResolver(row.node, row.level, row.path);
4845
+ return this.nodeIconResolver(row.node, row.level, row.path, this.isExpanded(row.node));
3662
4846
  }
3663
4847
  linkUrlFor(row) {
3664
4848
  return this.linkResolver(row.node, row.level, row.path);
3665
4849
  }
4850
+ /**
4851
+ * Set page count based on total records and page size
4852
+ */
4853
+ setPageCount() {
4854
+ if (this.totalRecords === 0) {
4855
+ this.pageDetails.totalPages = 1;
4856
+ }
4857
+ else {
4858
+ this.pageDetails.totalPages = Math.ceil(this.totalRecords / this.pageDetails.pageSize);
4859
+ }
4860
+ }
4861
+ /**
4862
+ * On page size changed
4863
+ */
4864
+ onPageSizeChanged(event) {
4865
+ this.recordsToShow.min = 0;
4866
+ this.recordsToShow.max = parseInt(event);
4867
+ this.pageDetails.currentPage = 1;
4868
+ this.pageDetails.pageSize = parseInt(event);
4869
+ this.setPageCount();
4870
+ this.onPaginationChange.emit({
4871
+ page: this.pageDetails.currentPage - 1,
4872
+ pageSize: this.pageDetails.pageSize,
4873
+ });
4874
+ }
4875
+ /**
4876
+ * On first button click
4877
+ */
4878
+ onBtFirstClick() {
4879
+ this.pageDetails.currentPage = 1;
4880
+ this.recordsToShow.min = 0;
4881
+ this.recordsToShow.max = this.pageDetails.pageSize;
4882
+ this.onPaginationChange.emit({
4883
+ page: this.pageDetails.currentPage - 1,
4884
+ pageSize: this.pageDetails.pageSize,
4885
+ });
4886
+ }
4887
+ /**
4888
+ * On previous button click
4889
+ */
4890
+ onBtPrevClick() {
4891
+ this.recordsToShow.min = this.recordsToShow.min - this.pageDetails.pageSize;
4892
+ this.recordsToShow.max = this.recordsToShow.max - this.pageDetails.pageSize;
4893
+ if (this.pageDetails.currentPage > 1)
4894
+ this.pageDetails.currentPage = this.pageDetails.currentPage - 1;
4895
+ this.onPaginationChange.emit({
4896
+ page: this.pageDetails.currentPage - 1,
4897
+ pageSize: this.pageDetails.pageSize,
4898
+ });
4899
+ }
4900
+ /**
4901
+ * On next button click
4902
+ */
4903
+ onBtNextClick() {
4904
+ this.recordsToShow.min = this.recordsToShow.min + this.pageDetails.pageSize;
4905
+ this.recordsToShow.max = this.recordsToShow.max + this.pageDetails.pageSize;
4906
+ if (this.pageDetails.currentPage < this.pageDetails.totalPages)
4907
+ this.pageDetails.currentPage = this.pageDetails.currentPage + 1;
4908
+ this.onPaginationChange.emit({
4909
+ page: this.pageDetails.currentPage - 1,
4910
+ pageSize: this.pageDetails.pageSize,
4911
+ });
4912
+ }
4913
+ /**
4914
+ * On last button click
4915
+ */
4916
+ onBtLastClick() {
4917
+ this.pageDetails.currentPage = this.pageDetails.totalPages;
4918
+ this.recordsToShow.max =
4919
+ this.pageDetails.currentPage * this.pageDetails.pageSize;
4920
+ this.recordsToShow.min =
4921
+ this.pageDetails.currentPage * this.pageDetails.pageSize -
4922
+ this.pageDetails.pageSize;
4923
+ this.onPaginationChange.emit({
4924
+ page: this.pageDetails.currentPage - 1,
4925
+ pageSize: this.pageDetails.pageSize,
4926
+ });
4927
+ }
4928
+ /**
4929
+ * Go to selected page
4930
+ */
4931
+ goToSelectedPage(event) {
4932
+ let pageNo = event.target.value;
4933
+ if (pageNo < 1) {
4934
+ this.pageDetails.currentPage = 1;
4935
+ }
4936
+ else if (pageNo > this.pageDetails.totalPages) {
4937
+ this.pageDetails.currentPage = this.pageDetails.totalPages;
4938
+ }
4939
+ this.recordsToShow.max =
4940
+ this.pageDetails.currentPage * this.pageDetails.pageSize;
4941
+ this.recordsToShow.min =
4942
+ this.pageDetails.currentPage * this.pageDetails.pageSize -
4943
+ this.pageDetails.pageSize;
4944
+ this.onPaginationChange.emit({
4945
+ page: this.pageDetails.currentPage - 1,
4946
+ pageSize: this.pageDetails.pageSize,
4947
+ });
4948
+ }
4949
+ /**
4950
+ * @description method to reset table configuration
4951
+ * @author Tarun Kumar
4952
+ * @param none
4953
+ * @returns void
4954
+ */
4955
+ resetPagination() {
4956
+ //this.pageDetails.pageSize = 20;
4957
+ this.pageDetails.currentPage = 1;
4958
+ this.pageDetails.totalPages = 1;
4959
+ this.recordsToShow.min = 0;
4960
+ this.recordsToShow.max = this.pageDetails.pageSize;
4961
+ this.setPageCount();
4962
+ }
4963
+ /**
4964
+ * Convert to number
4965
+ */
4966
+ convertToNumber(val) {
4967
+ return parseInt(val);
4968
+ }
3666
4969
  getChildren(node) {
3667
4970
  return node?.[this.childrenField];
3668
4971
  }
@@ -3711,7 +5014,8 @@ class CommonTreeTableComponent {
3711
5014
  }
3712
5015
  getNodeKey(node) {
3713
5016
  const anyNode = node;
3714
- const direct = anyNode?.[this.idField];
5017
+ // const direct = anyNode?.[this.idField];
5018
+ const direct = anyNode?.[this.rowId];
3715
5019
  if (direct != null)
3716
5020
  return direct;
3717
5021
  if (typeof node === 'object' && node != null) {
@@ -3765,7 +5069,6 @@ class CommonTreeTableComponent {
3765
5069
  */
3766
5070
  groupByColumn(col, index) {
3767
5071
  // Emit event or handle grouping logic
3768
- console.log('Group by column:', col.field);
3769
5072
  }
3770
5073
  /**
3771
5074
  * Show column chooser
@@ -3788,15 +5091,140 @@ class CommonTreeTableComponent {
3788
5091
  */
3789
5092
  saveColumnState() {
3790
5093
  if (this.originalColumns.length === 0) {
3791
- this.originalColumns = structuredClone(this.columns);
5094
+ this.originalColumns = JSON.parse(JSON.stringify(this.columns));
3792
5095
  }
3793
5096
  }
5097
+ /**
5098
+ * Returns filtered hierarchy based on column filters with AND/OR logic, including number filter support
5099
+ */
5100
+ getFilteredHierarchy() {
5101
+ const filterColumns = this.columns.filter((col) => col.filterable &&
5102
+ (col.filters?.some((f) => f.filterValue) ||
5103
+ (col.filterType === 'set' &&
5104
+ col.selectedValues &&
5105
+ col.selectedValues.size > 0)));
5106
+ if (filterColumns.length === 0)
5107
+ return structuredClone(this.originalRowData);
5108
+ const filterFn = (node) => {
5109
+ return filterColumns.every((col) => {
5110
+ let value = this.getValue(node, col.fieldName);
5111
+ if (col.filterType === 'set') {
5112
+ return col.selectedValues?.has(value);
5113
+ }
5114
+ else if (col.filterType === 'number') {
5115
+ const conds = col.filters?.filter((f) => f.filterValue !== '' &&
5116
+ f.filterValue !== null &&
5117
+ f.filterValue !== undefined) || [];
5118
+ if (conds.length === 0)
5119
+ return true;
5120
+ if (col.filterLogic === 'AND') {
5121
+ return conds.every((f) => this.evaluateNumberFilterCondition(f.filterOperation, value, f.filterValue));
5122
+ }
5123
+ else {
5124
+ return conds.some((f) => this.evaluateNumberFilterCondition(f.filterOperation, value, f.filterValue));
5125
+ }
5126
+ }
5127
+ else {
5128
+ const conds = col.filters?.filter((f) => f.filterValue) || [];
5129
+ if (conds.length === 0)
5130
+ return true;
5131
+ if (col.filterLogic === 'AND') {
5132
+ return conds.every((f) => this.evaluateTextFilterCondition(f.filterOperation, String(value).toLowerCase(), String(f.filterValue).toLowerCase()));
5133
+ }
5134
+ else {
5135
+ return conds.some((f) => this.evaluateTextFilterCondition(f.filterOperation, String(value).toLowerCase(), String(f.filterValue).toLowerCase()));
5136
+ }
5137
+ }
5138
+ });
5139
+ };
5140
+ const filterTree = (nodes) => {
5141
+ const result = [];
5142
+ for (const node of nodes) {
5143
+ const children = this.getChildren(node);
5144
+ let filteredChildren = [];
5145
+ if (Array.isArray(children)) {
5146
+ filteredChildren = filterTree(children);
5147
+ }
5148
+ if (filterFn(node) || filteredChildren.length > 0) {
5149
+ const clone = { ...node };
5150
+ if (Array.isArray(children)) {
5151
+ clone[this.childrenField] = filteredChildren;
5152
+ }
5153
+ result.push(clone);
5154
+ }
5155
+ }
5156
+ return result;
5157
+ };
5158
+ return filterTree(this.originalRowData);
5159
+ }
5160
+ /**
5161
+ * Evaluate number filter condition
5162
+ */
5163
+ evaluateNumberFilterCondition(type, fieldValue, value) {
5164
+ const numField = Number(fieldValue);
5165
+ const numValue = Number(value);
5166
+ if (isNaN(numField) || isNaN(numValue))
5167
+ return false;
5168
+ switch (type) {
5169
+ case '=':
5170
+ case 'equals':
5171
+ return numField === numValue;
5172
+ case '>':
5173
+ return numField > numValue;
5174
+ case '<':
5175
+ return numField < numValue;
5176
+ case '>=':
5177
+ return numField >= numValue;
5178
+ case '<=':
5179
+ return numField <= numValue;
5180
+ default:
5181
+ return false;
5182
+ }
5183
+ }
5184
+ dateTimeSelected(date) {
5185
+ this.applyAllFilters();
5186
+ }
5187
+ /**
5188
+ * @description
5189
+ * Checks whether all options inside a Set Filter are currently selected.
5190
+ * @author Anand Pandey
5191
+ * @param col - Column definition object
5192
+ * @returns boolean - TRUE if all options are selected, otherwise FALSE.
5193
+ */
5194
+ isAllSelected(col) {
5195
+ return (col.options?.length > 0 && col.options?.length === col.selectedValues.size);
5196
+ }
5197
+ /**
5198
+ * @description * Selects or deselects all checkbox options in the Set Filter.
5199
+ * @author Anand Pandey
5200
+ * @param col - Column definition object
5201
+ * @param event - Checkbox change event
5202
+ * @returns void
5203
+ */
5204
+ toggleSelectAll(col, event) {
5205
+ if (event.target.checked) {
5206
+ col.options.forEach((option) => col.selectedValues.add(option));
5207
+ }
5208
+ else {
5209
+ col.selectedValues.clear();
5210
+ }
5211
+ this.applyAllFilters();
5212
+ }
3794
5213
  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 });
3795
- 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" }] });
5214
+ 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", tableOptions: "tableOptions", 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", paginationRequired: "paginationRequired", pageSizeList: "pageSizeList", totalRecords: "totalRecords", resetPage: "resetPage", isExpandable: "isExpandable", rowOptionsResolver: "rowOptionsResolver", nodeIconResolver: "nodeIconResolver", linkResolver: "linkResolver" }, outputs: { nodeToggle: "nodeToggle", selectionChange: "selectionChange", linkClick: "linkClick", linkDoubleClick: "linkDoubleClick", onHideSettings: "onHideSettings", onPaginationChange: "onPaginationChange" }, 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\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 columns; track col.fieldName) {\n <div class=\"column_item checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n [disabled]=\"col.headerLocked\"\n (change)=\"changeActiveColSelection($event, col)\"\n />\n <span>{{ col.header || col.fieldName | titlecase }}</span>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Main Table Wrapper -->\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n [class.no-horizontal-scroll]=\"!rows || rows.length === 0\"\n #parent\n >\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]=\"checkHeaderChecked()\"\n [indeterminate]=\"checkHeaderIndeterminate()\"\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.fieldName; 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\">{{\n col.header || col.fieldName\n }}</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/t-arrow-up.svg\" alt=\"Ascending\" />\n } @else if (sortingType[colIdx] === \"dsc\") {\n <img\n src=\"images/t-arrow-down.svg\"\n alt=\"Descending\"\n />\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 #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, colIdx, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n alt=\"Filter active\"\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 alt=\"Filter\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n\n <!-- Filter Dropdown -->\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 =\n $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)]=\"\n col.filters![1].filterValue\n \"\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 =\n $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)]=\"\n col.filters![1].filterValue\n \"\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 =\n $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) {\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 </span>\n </div>\n </div>\n\n @if (menuVisible[colIdx]) {\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 <!-- Sort Ascending -->\n @if (\n sortingType[colIdx] === \"dsc\" || !sortingType[colIdx]\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', colIdx)\"\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\n <!-- Sort Descending -->\n @if (\n sortingType[colIdx] === \"asc\" || !sortingType[colIdx]\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" alt=\"\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n\n <!-- Clear Sort -->\n @if (\n sortingType[colIdx] === \"asc\" ||\n sortingType[colIdx] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" alt=\"\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n\n <div class=\"divder\"></div>\n\n <!-- Pin Column -->\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\" alt=\"\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n @if (showPin) {\n <div class=\"second_dropdown\" #pinMenu>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'none')\"\n >\n <div class=\"left_item\">\n @if (\n ((col.colId &&\n pinActionClicked[col.colId]) ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'left')\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[\n col.colId || col.fieldName\n ] === \"left\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'right')\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[\n col.colId || col.fieldName\n ] === \"right\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\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 <!-- Autosize This Column -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeColumn(col, colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n\n <!-- Autosize All Columns -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeAllColumns()\"\n >\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n\n <!-- <div class=\"divder\"></div> -->\n\n <!-- Group by Column -->\n <!-- <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.fieldName }}</span>\n\t </div>\n\t </div> -->\n\n <!-- Choose Columns -->\n <!-- <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 <!-- Reset Columns -->\n <!-- <div class=\"right_click_item\">\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 </div>\n </div>\n }\n </th>\n }\n }\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 @if (showCheckboxFor(row)) {\n <span class=\"checkbox_container\">\n <input\n type=\"checkbox\"\n [disabled]=\"isDisabledRow(row)\"\n [indeterminate]=\"isNodeIndeterminate(row.node)\"\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 <label [for]=\"'row_' + row.trackKey\"></label>\n </span>\n }\n } @else {\n <span class=\"radio_option\">\n <input\n type=\"radio\"\n [name]=\"'row_' + row.trackKey\"\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 <label [for]=\"'row_' + row.trackKey\"></label>\n </span>\n }\n </td>\n }\n\n <!-- Data columns -->\n @for (\n col of columns;\n track col.fieldName;\n let colIndex = $index\n ) {\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.fieldName === treeColumn.fieldName) {\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 ellipsis\"\n [appTooltip]=\"labelFor(row) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n (click)=\"\n onLinkClicked(\n $event,\n row.node,\n row.level,\n row.path,\n col\n )\n \"\n (dblclick)=\"\n onLinkDoubleClicked(\n $event,\n row.node,\n row.level,\n row.path,\n col\n )\n \"\n >\n {{ labelFor(row) || \"N/A\" }}\n </a>\n } @else {\n <span\n class=\"node_label\"\n [appTooltip]=\"labelFor(row) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >{{ labelFor(row) || \"N/A\" }}</span\n >\n }\n </div>\n } @else {\n <div\n [rowParam]=\"row.node\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"getValue(row.node, col.fieldName)\"\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 <span\n class=\"ellipsis\"\n [appTooltip]=\"\n getValue(row.node, col.fieldName) || 'N/A'\n \"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >\n {{\n getValue(row.node, col.fieldName) || \"N/A\"\n }}</span\n >\n } @else {\n <div\n [rowParam]=\"row.node\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"getValue(row.node, col.fieldName)\"\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]=\"columns.length + (checkBoxSelection ? 1 : 0)\"\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]=\"columns.length + (checkBoxSelection ? 1 : 0)\"\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\n <!-- Pagination -->\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 <button\n class=\"outlined_btn first_btn\"\n type=\"button\"\n (click)=\"onBtFirstClick()\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n >\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]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn last_btn\"\n type=\"button\"\n (click)=\"onBtLastClick()\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n >\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\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}.tooltip-trigger{cursor:default}*,*: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}.table_wrapper.no-horizontal-scroll{overflow:hidden!important}.tableArea{width:100%;position:relative;display:flex;flex-direction:column;height:100%;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-left:0;border-right:0;background-color:var(--white)}.tableArea .table_wrapper.global{margin:0}.tableArea .table_wrapper .table-inner-wrapper{position:relative;width:100%;min-height: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 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))}.tableArea .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}.tableArea .th_wraper .filter_three_dot_wrapper .filters{position:relative;display:inline-block;cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters:hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.tableArea .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))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_wrapper lib-common-input{width:100%}.tableArea .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))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details{width:100%}.tableArea .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}.tableArea .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%}.tableArea .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))}.tableArea .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)}.tableArea .th_wraper .filter_three_dot_wrapper .filt_wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.tableArea .th_wraper .filter_three_dot_wrapper .three-dots :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.tableArea .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}.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));min-width: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))}.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;justify-content:center;width:100vw}.tableArea .empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6}.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 .drag-over{background-color:#e3f2fd}.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}#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.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: "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: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "tooltipPosition", "tooltipDelay", "tooltipBgColor", "tooltipTextColor", "tooltipPadding", "tooltipFontSize", "tooltipBorderRadius", "tooltipMaxWidth", "followCursor", "tooltipParentContainer"] }, { kind: "component", type: CommonInputComponent, selector: "lib-common-input", inputs: ["options", "selectedValue", "placeholder", "elementType"], outputs: ["valueChange"] }, { kind: "component", type: CommonCalendarComponent, selector: "lib-common-calendar", inputs: ["dateConfig", "minDate", "maxDate", "preSelectedValue"], outputs: ["dateTimeSelected", "clearDateEvent"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
3796
5215
  }
3797
5216
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonTreeTableComponent, decorators: [{
3798
5217
  type: Component,
3799
- 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"] }]
5218
+ args: [{ selector: 'cats-tree-table', imports: [
5219
+ CommonModule,
5220
+ FormsModule,
5221
+ OutsideClickDirective,
5222
+ AdaptivePositionDirective,
5223
+ RendererParserDirective,
5224
+ TooltipDirective,
5225
+ CommonInputComponent,
5226
+ CommonCalendarComponent,
5227
+ ], template: "<div class=\"tableArea\" #table [class.is-resizing]=\"isResizing\">\n <!-- Settings Panel for Column Selection -->\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 columns; track col.fieldName) {\n <div class=\"column_item checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n [disabled]=\"col.headerLocked\"\n (change)=\"changeActiveColSelection($event, col)\"\n />\n <span>{{ col.header || col.fieldName | titlecase }}</span>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Main Table Wrapper -->\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n [class.no-horizontal-scroll]=\"!rows || rows.length === 0\"\n #parent\n >\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]=\"checkHeaderChecked()\"\n [indeterminate]=\"checkHeaderIndeterminate()\"\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.fieldName; 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\">{{\n col.header || col.fieldName\n }}</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/t-arrow-up.svg\" alt=\"Ascending\" />\n } @else if (sortingType[colIdx] === \"dsc\") {\n <img\n src=\"images/t-arrow-down.svg\"\n alt=\"Descending\"\n />\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 #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, colIdx, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n alt=\"Filter active\"\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 alt=\"Filter\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n\n <!-- Filter Dropdown -->\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 =\n $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)]=\"\n col.filters![1].filterValue\n \"\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 =\n $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)]=\"\n col.filters![1].filterValue\n \"\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 =\n $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) {\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 </span>\n </div>\n </div>\n\n @if (menuVisible[colIdx]) {\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 <!-- Sort Ascending -->\n @if (\n sortingType[colIdx] === \"dsc\" || !sortingType[colIdx]\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', colIdx)\"\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\n <!-- Sort Descending -->\n @if (\n sortingType[colIdx] === \"asc\" || !sortingType[colIdx]\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" alt=\"\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n\n <!-- Clear Sort -->\n @if (\n sortingType[colIdx] === \"asc\" ||\n sortingType[colIdx] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" alt=\"\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n\n <div class=\"divder\"></div>\n\n <!-- Pin Column -->\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\" alt=\"\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n @if (showPin) {\n <div class=\"second_dropdown\" #pinMenu>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'none')\"\n >\n <div class=\"left_item\">\n @if (\n ((col.colId &&\n pinActionClicked[col.colId]) ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'left')\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[\n col.colId || col.fieldName\n ] === \"left\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'right')\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[\n col.colId || col.fieldName\n ] === \"right\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\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 <!-- Autosize This Column -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeColumn(col, colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n\n <!-- Autosize All Columns -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeAllColumns()\"\n >\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n\n <!-- <div class=\"divder\"></div> -->\n\n <!-- Group by Column -->\n <!-- <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.fieldName }}</span>\n\t </div>\n\t </div> -->\n\n <!-- Choose Columns -->\n <!-- <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 <!-- Reset Columns -->\n <!-- <div class=\"right_click_item\">\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 </div>\n </div>\n }\n </th>\n }\n }\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 @if (showCheckboxFor(row)) {\n <span class=\"checkbox_container\">\n <input\n type=\"checkbox\"\n [disabled]=\"isDisabledRow(row)\"\n [indeterminate]=\"isNodeIndeterminate(row.node)\"\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 <label [for]=\"'row_' + row.trackKey\"></label>\n </span>\n }\n } @else {\n <span class=\"radio_option\">\n <input\n type=\"radio\"\n [name]=\"'row_' + row.trackKey\"\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 <label [for]=\"'row_' + row.trackKey\"></label>\n </span>\n }\n </td>\n }\n\n <!-- Data columns -->\n @for (\n col of columns;\n track col.fieldName;\n let colIndex = $index\n ) {\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.fieldName === treeColumn.fieldName) {\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 ellipsis\"\n [appTooltip]=\"labelFor(row) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n (click)=\"\n onLinkClicked(\n $event,\n row.node,\n row.level,\n row.path,\n col\n )\n \"\n (dblclick)=\"\n onLinkDoubleClicked(\n $event,\n row.node,\n row.level,\n row.path,\n col\n )\n \"\n >\n {{ labelFor(row) || \"N/A\" }}\n </a>\n } @else {\n <span\n class=\"node_label\"\n [appTooltip]=\"labelFor(row) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >{{ labelFor(row) || \"N/A\" }}</span\n >\n }\n </div>\n } @else {\n <div\n [rowParam]=\"row.node\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"getValue(row.node, col.fieldName)\"\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 <span\n class=\"ellipsis\"\n [appTooltip]=\"\n getValue(row.node, col.fieldName) || 'N/A'\n \"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >\n {{\n getValue(row.node, col.fieldName) || \"N/A\"\n }}</span\n >\n } @else {\n <div\n [rowParam]=\"row.node\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"getValue(row.node, col.fieldName)\"\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]=\"columns.length + (checkBoxSelection ? 1 : 0)\"\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]=\"columns.length + (checkBoxSelection ? 1 : 0)\"\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\n <!-- Pagination -->\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 <button\n class=\"outlined_btn first_btn\"\n type=\"button\"\n (click)=\"onBtFirstClick()\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n >\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]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn last_btn\"\n type=\"button\"\n (click)=\"onBtLastClick()\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n >\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\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}.tooltip-trigger{cursor:default}*,*: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}.table_wrapper.no-horizontal-scroll{overflow:hidden!important}.tableArea{width:100%;position:relative;display:flex;flex-direction:column;height:100%;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-left:0;border-right:0;background-color:var(--white)}.tableArea .table_wrapper.global{margin:0}.tableArea .table_wrapper .table-inner-wrapper{position:relative;width:100%;min-height: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 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))}.tableArea .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}.tableArea .th_wraper .filter_three_dot_wrapper .filters{position:relative;display:inline-block;cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters:hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.tableArea .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))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_wrapper lib-common-input{width:100%}.tableArea .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))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details{width:100%}.tableArea .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}.tableArea .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%}.tableArea .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))}.tableArea .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)}.tableArea .th_wraper .filter_three_dot_wrapper .filt_wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.tableArea .th_wraper .filter_three_dot_wrapper .three-dots :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.tableArea .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}.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));min-width: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))}.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;justify-content:center;width:100vw}.tableArea .empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6}.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 .drag-over{background-color:#e3f2fd}.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}#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"] }]
3800
5228
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { tableAreaRef: [{
3801
5229
  type: ViewChild,
3802
5230
  args: ['table', { static: true }]
@@ -3807,6 +5235,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3807
5235
  type: Input
3808
5236
  }], columns: [{
3809
5237
  type: Input
5238
+ }], tableOptions: [{
5239
+ type: Input
3810
5240
  }], idField: [{
3811
5241
  type: Input
3812
5242
  }], labelField: [{
@@ -3849,6 +5279,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3849
5279
  type: Input
3850
5280
  }], checkboxSelectionType: [{
3851
5281
  type: Input
5282
+ }], paginationRequired: [{
5283
+ type: Input
5284
+ }], pageSizeList: [{
5285
+ type: Input
5286
+ }], totalRecords: [{
5287
+ type: Input
5288
+ }], resetPage: [{
5289
+ type: Input
3852
5290
  }], isExpandable: [{
3853
5291
  type: Input
3854
5292
  }], rowOptionsResolver: [{
@@ -3863,8 +5301,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3863
5301
  type: Output
3864
5302
  }], linkClick: [{
3865
5303
  type: Output
5304
+ }], linkDoubleClick: [{
5305
+ type: Output
3866
5306
  }], onHideSettings: [{
3867
5307
  type: Output
5308
+ }], onPaginationChange: [{
5309
+ type: Output
3868
5310
  }] } });
3869
5311
 
3870
5312
  /*
@@ -3875,5 +5317,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3875
5317
  * Generated bundle index. Do not edit.
3876
5318
  */
3877
5319
 
3878
- export { CatsDataGridComponent, CatsDataGridService, ColDefs, CommonRendererComponent, CommonTreeTableComponent };
5320
+ export { AdaptivePositionDirective, CatsDataGridComponent, CatsDataGridService, ColDefs, CommonRendererComponent, CommonTreeTableComponent, TooltipComponent, TooltipDirective };
3879
5321
  //# sourceMappingURL=cats-data-grid.mjs.map