cats-data-grid 2.0.7 → 2.0.8

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 (12) hide show
  1. package/assets/images/add-more-right-blue.svg +3 -0
  2. package/assets/images/autosize-all.svg +3 -0
  3. package/assets/images/autosize-this.svg +3 -0
  4. package/assets/images/eye-custom-header.svg +4 -0
  5. package/assets/images/eye-off-custom-header.svg +3 -0
  6. package/fesm2022/cats-data-grid.mjs +642 -259
  7. package/fesm2022/cats-data-grid.mjs.map +1 -1
  8. package/index.d.ts +84 -9
  9. package/package.json +1 -1
  10. package/styles/component/_form.scss +112 -61
  11. package/styles/sass-utils/_mixin.scss +14 -1
  12. package/styles/sass-utils/_variable.scss +120 -69
package/fesm2022/cats-data-grid.mjs CHANGED
@@ -101,9 +101,9 @@ class RendererParserDirective {
101
101
  let toltipDiv = document.createElement('div');
102
102
  let itemDiv = document.createElement('div');
103
103
  let descDiv = document.createElement('div');
104
- toltipDiv.className = 'see_more_data';
105
- itemDiv.className = 'item';
106
- descDiv.className = 'desc';
104
+ toltipDiv.className = 'cats-see-more-data';
105
+ itemDiv.className = 'cats-item';
106
+ descDiv.className = 'cats-desc';
107
107
  descDiv.innerHTML = newDiv.innerText;
108
108
  itemDiv.appendChild(descDiv);
109
109
  toltipDiv.appendChild(itemDiv);
@@ -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}.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" }] });
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{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);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(--text-body-secondary);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(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#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(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 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,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / 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) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #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,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-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(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-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(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-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}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-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))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-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(--border-core-default);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(--surface-background-canvas);color:var(--text-heading-primary);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);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(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);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(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.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(--surface-background-subtle);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(--surface-background-canvas);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(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--border-core-default);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(--text-heading-secondary)}.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(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--text-heading-primary);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(--text-link-hover)}.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(--text-heading-primary)}.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(--text-heading-inverse);background-color:var(--surface-action-default)}.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(--surface-background-blue);color:var(--text-link-hover)}.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(--text-heading-primary);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(--surface-action-default);color:var(--text-heading-inverse);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(--text-heading-primary)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--surface-action-default);color:var(--text-heading-inverse)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--surface-background-blue);color:var(--text-link-hover);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--accent-orange-default);color:var(--text-heading-inverse)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--text-body-secondary);pointer-events:none;background:var(--border-core-default)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{cursor:default;color:var(--text-body-secondary)}.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(--text-link-default);background-color:var(--surface-background-blue)}.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(--text-link-default);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(--border-core-default);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(--text-heading-primary);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(--surface-background-blue);color:var(--text-link-hover);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}.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"] }]
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{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);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(--text-body-secondary);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(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#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(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 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,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / 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) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #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,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-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(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-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(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-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}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-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))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-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(--border-core-default);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(--surface-background-canvas);color:var(--text-heading-primary);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);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(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);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(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.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(--surface-background-subtle);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(--surface-background-canvas);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(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--border-core-default);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(--text-heading-secondary)}.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(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--text-heading-primary);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(--text-link-hover)}.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(--text-heading-primary)}.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(--text-heading-inverse);background-color:var(--surface-action-default)}.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(--surface-background-blue);color:var(--text-link-hover)}.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(--text-heading-primary);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(--surface-action-default);color:var(--text-heading-inverse);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(--text-heading-primary)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--surface-action-default);color:var(--text-heading-inverse)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--surface-background-blue);color:var(--text-link-hover);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--accent-orange-default);color:var(--text-heading-inverse)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--text-body-secondary);pointer-events:none;background:var(--border-core-default)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{cursor:default;color:var(--text-body-secondary)}.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(--text-link-default);background-color:var(--surface-background-blue)}.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(--text-link-default);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(--border-core-default);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(--text-heading-primary);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(--surface-background-blue);color:var(--text-link-hover);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: [{
@@ -911,29 +911,11 @@ class TooltipComponent {
911
911
  };
912
912
  }
913
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 });
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: "<div\n class=\"app-tooltip-wrapper\"\n [ngClass]=\"'tooltip-' + position\"\n [ngStyle]=\"styleObj\"\n>\n {{ content }}\n <div class=\"tooltip-arrow\"></div>\n</div>\n", styles: [":root{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);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(--text-body-secondary);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(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#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(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 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,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / 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) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #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,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-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(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-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(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-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}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-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))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-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(--border-core-default);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(--surface-background-canvas);color:var(--text-heading-primary);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);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(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);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(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.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(--surface-background-subtle);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(--surface-background-canvas);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(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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
915
  }
925
916
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, decorators: [{
926
917
  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"] }]
918
+ args: [{ selector: 'app-tooltip', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"app-tooltip-wrapper\"\n [ngClass]=\"'tooltip-' + position\"\n [ngStyle]=\"styleObj\"\n>\n {{ content }}\n <div class=\"tooltip-arrow\"></div>\n</div>\n", styles: [":root{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);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(--text-body-secondary);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(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#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(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 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,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / 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) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #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,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-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(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-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(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-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}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-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))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-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(--border-core-default);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(--surface-background-canvas);color:var(--text-heading-primary);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);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(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);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(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.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(--surface-background-subtle);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(--surface-background-canvas);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(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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
919
  }], propDecorators: { content: [{
938
920
  type: Input
939
921
  }], position: [{
@@ -986,6 +968,12 @@ class TooltipDirective {
986
968
  }
987
969
  ngOnInit() {
988
970
  this.renderer.addClass(this.elementRef.nativeElement, 'tooltip-trigger');
971
+ this.ngZone.onStable.subscribe(() => {
972
+ const el = this.elementRef.nativeElement;
973
+ if (!el.isConnected || !document.body.contains(el)) {
974
+ this.hide();
975
+ }
976
+ });
989
977
  }
990
978
  onMouseEnter(event) {
991
979
  if (!this.content)
@@ -1039,7 +1027,8 @@ class TooltipDirective {
1039
1027
  }
1040
1028
  // If still not found, use the whole element
1041
1029
  if (!this.tooltipElement) {
1042
- this.tooltipElement = componentRef.location.nativeElement;
1030
+ this.tooltipElement = componentRef.location
1031
+ .nativeElement;
1043
1032
  }
1044
1033
  // Append to body to avoid layout issues
1045
1034
  this.renderer.appendChild(document.body, componentRef.location.nativeElement);
@@ -1158,18 +1147,30 @@ class TooltipDirective {
1158
1147
  switch (this.currentPosition) {
1159
1148
  case 'top':
1160
1149
  top = this.elementRect.top - tooltipRect.height - gap;
1161
- left = this.elementRect.left + this.elementRect.width / 2 - tooltipRect.width / 2;
1150
+ left =
1151
+ this.elementRect.left +
1152
+ this.elementRect.width / 2 -
1153
+ tooltipRect.width / 2;
1162
1154
  break;
1163
1155
  case 'bottom':
1164
1156
  top = this.elementRect.bottom + gap;
1165
- left = this.elementRect.left + this.elementRect.width / 2 - tooltipRect.width / 2;
1157
+ left =
1158
+ this.elementRect.left +
1159
+ this.elementRect.width / 2 -
1160
+ tooltipRect.width / 2;
1166
1161
  break;
1167
1162
  case 'left':
1168
- top = this.elementRect.top + this.elementRect.height / 2 - tooltipRect.height / 2;
1163
+ top =
1164
+ this.elementRect.top +
1165
+ this.elementRect.height / 2 -
1166
+ tooltipRect.height / 2;
1169
1167
  left = this.elementRect.left - tooltipRect.width - gap;
1170
1168
  break;
1171
1169
  case 'right':
1172
- top = this.elementRect.top + this.elementRect.height / 2 - tooltipRect.height / 2;
1170
+ top =
1171
+ this.elementRect.top +
1172
+ this.elementRect.height / 2 -
1173
+ tooltipRect.height / 2;
1173
1174
  left = this.elementRect.right + gap;
1174
1175
  break;
1175
1176
  }
@@ -1311,6 +1312,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1311
1312
  args: ['mousemove', ['$event']]
1312
1313
  }] } });
1313
1314
 
1315
+ class CapitalizePipe {
1316
+ transform(value) {
1317
+ if (value == null) {
1318
+ return '';
1319
+ }
1320
+ const text = value.toString().trim();
1321
+ if (text.length === 0) {
1322
+ return '';
1323
+ }
1324
+ const spaced = text
1325
+ .replace(/_/g, ' ')
1326
+ .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
1327
+ .replace(/\s+/g, ' ')
1328
+ .trim();
1329
+ return spaced
1330
+ .split(' ')
1331
+ .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
1332
+ .join(' ');
1333
+ }
1334
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
1335
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: CapitalizePipe, isStandalone: true, name: "capitalize" });
1336
+ }
1337
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CapitalizePipe, decorators: [{
1338
+ type: Pipe,
1339
+ args: [{
1340
+ name: 'capitalize'
1341
+ }]
1342
+ }] });
1343
+
1314
1344
  class ColDefs {
1315
1345
  fieldName;
1316
1346
  headerName;
@@ -1352,7 +1382,7 @@ class CatsDataGridComponent {
1352
1382
  filter = new EventEmitter();
1353
1383
  onHideSettings = new EventEmitter();
1354
1384
  onCellEdit = new EventEmitter();
1355
- onColCongifgChange = new EventEmitter();
1385
+ onColConfigChange = new EventEmitter();
1356
1386
  activeFilterIndex = null;
1357
1387
  originalRowData = [];
1358
1388
  activeAll = true;
@@ -1391,6 +1421,11 @@ class CatsDataGridComponent {
1391
1421
  groupBy = [];
1392
1422
  groupByField = '';
1393
1423
  dragGroupIndex = null;
1424
+ categorizedCols = {};
1425
+ noCategoryCols = [];
1426
+ objectKeys = Object.keys;
1427
+ allActiveDefault = false;
1428
+ allActiveColMap = {};
1394
1429
  dateConfig = {
1395
1430
  selectionMode: 'single',
1396
1431
  enableTime: false,
@@ -1422,6 +1457,8 @@ class CatsDataGridComponent {
1422
1457
  appliedFiltersEvent = new EventEmitter();
1423
1458
  activeGroupsEvent = new EventEmitter();
1424
1459
  dynamicGroupingFiltering = false;
1460
+ isRowsEditable = false;
1461
+ showSkeleton = false;
1425
1462
  atLeastOneColumnChecked = true;
1426
1463
  draggedRowData = {};
1427
1464
  firstCol;
@@ -1442,17 +1479,26 @@ class CatsDataGridComponent {
1442
1479
  centerArea = [];
1443
1480
  groupingDisabled = false;
1444
1481
  draggableColumn;
1482
+ skeletonRowsLength = 8;
1483
+ skeletonColsLength = 8;
1484
+ skeletonRows = [];
1485
+ skeletonCols = [];
1486
+ allActiveCol = false;
1487
+ originalCategorizedCols = {};
1488
+ originalNoCategoryCols = [];
1445
1489
  constructor(renderer, zone, cd) {
1446
1490
  this.renderer = renderer;
1447
1491
  this.zone = zone;
1448
1492
  this.cd = cd;
1449
1493
  }
1450
- ngOnInit() {
1451
- // if (this.colDefs && this.colDefs.length > 0) {
1452
- // this.firstCol = this.colDefs[0];
1453
- // }
1454
- }
1494
+ ngOnInit() { }
1455
1495
  ngOnChanges(changes) {
1496
+ if (changes['skeletonColsLength']?.currentValue) {
1497
+ this.skeletonColsLength = changes['skeletonColsLength']?.currentValue;
1498
+ }
1499
+ if (changes['showSkeleton']) {
1500
+ this.showSkeleton = changes['showSkeleton']?.currentValue;
1501
+ }
1456
1502
  if (changes['pageNumber']?.currentValue) {
1457
1503
  this.pageDetails.currentPage = changes['pageNumber']?.currentValue;
1458
1504
  this.recordsToShow.min =
@@ -1470,11 +1516,22 @@ class CatsDataGridComponent {
1470
1516
  }
1471
1517
  if (changes['colDefs']?.currentValue) {
1472
1518
  // this.resetPagination();
1519
+ const colDefs = changes['colDefs']?.currentValue;
1520
+ if (colDefs.length > 0) {
1521
+ this.skeletonColsLength = changes['colDefs']?.currentValue.length;
1522
+ }
1523
+ this.skeletonCols = Array.from({ length: this.skeletonColsLength }, (_, i) => i);
1524
+ this.skeletonRows = Array.from({ length: this.skeletonRowsLength }, (_, i) => i);
1473
1525
  this.colDefs = this.getUpdatedColDefs(changes['colDefs']?.currentValue);
1474
1526
  setTimeout(() => {
1475
1527
  this.applyAllFilters();
1476
1528
  });
1477
- this.originalColDefs = [...this.colDefs];
1529
+ this.originalColDefs = this.cloneColDefs(this.colDefs);
1530
+ const result = this.getColConfigCategory(this.colDefs);
1531
+ this.originalCategorizedCols = JSON.parse(JSON.stringify(result.categorized));
1532
+ this.originalNoCategoryCols = JSON.parse(JSON.stringify(result.noCategory));
1533
+ this.categorizedCols = result.categorized;
1534
+ this.noCategoryCols = result.noCategory;
1478
1535
  this.centerArea = [...this.colDefs];
1479
1536
  [...this.colDefs].forEach((col) => {
1480
1537
  if (col.pin) {
@@ -1521,28 +1578,97 @@ class CatsDataGridComponent {
1521
1578
  this.getGroupedData();
1522
1579
  }
1523
1580
  }
1581
+ onColConfigSearch(event) {
1582
+ const text = event.target.value
1583
+ .toLowerCase()
1584
+ .trim();
1585
+ if (!text) {
1586
+ this.categorizedCols = { ...this.originalCategorizedCols };
1587
+ this.noCategoryCols = this.cloneColDefs(this.originalNoCategoryCols);
1588
+ return;
1589
+ }
1590
+ this.noCategoryCols = this.originalNoCategoryCols.filter((dt) => dt.headerName.toLowerCase().includes(text));
1591
+ const filteredCategories = {};
1592
+ Object.keys(this.originalCategorizedCols).forEach((category) => {
1593
+ const filteredCols = this.originalCategorizedCols[category].filter((col) => col.headerName.toLowerCase().includes(text));
1594
+ if (filteredCols.length > 0) {
1595
+ filteredCategories[category] = filteredCols;
1596
+ }
1597
+ });
1598
+ this.categorizedCols = filteredCategories;
1599
+ }
1600
+ cloneColDefs(colDefs) {
1601
+ return colDefs.map((col) => ({
1602
+ ...col,
1603
+ active: col.active,
1604
+ cellRendererParams: col.cellRendererParams
1605
+ ? { ...col.cellRendererParams }
1606
+ : col.cellRendererParams,
1607
+ }));
1608
+ }
1609
+ resetDefaultColConfig() {
1610
+ this.colDefs = this.cloneColDefs(this.originalColDefs);
1611
+ const result = this.getColConfigCategory(this.colDefs);
1612
+ this.originalCategorizedCols = JSON.parse(JSON.stringify(result.categorized));
1613
+ this.originalNoCategoryCols = this.cloneColDefs(result.noCategory);
1614
+ this.categorizedCols = result.categorized;
1615
+ this.noCategoryCols = result.noCategory;
1616
+ this.allActiveDefault = this.originalNoCategoryCols.every((c) => c.active || c.headerLocked);
1617
+ this.updateGlobalState();
1618
+ }
1619
+ /**
1620
+ * Autosize column to fit content
1621
+ */
1622
+ autosizeColumn(col) {
1623
+ const min = col.minWidth ?? 50;
1624
+ const max = col.maxWidth ?? 500;
1625
+ const estimatedWidth = Math.min(Math.max(150, min), max);
1626
+ col.width = estimatedWidth;
1627
+ this.updatePinnedOffsets();
1628
+ }
1629
+ /**
1630
+ * Autosize all columns
1631
+ */
1632
+ autosizeAllColumns() {
1633
+ this.colDefs.forEach((col) => {
1634
+ const min = col.minWidth ?? 50;
1635
+ const max = col.maxWidth ?? 500;
1636
+ const estimatedWidth = Math.min(Math.max(150, min), max);
1637
+ col.width = estimatedWidth;
1638
+ });
1639
+ this.updatePinnedOffsets();
1640
+ }
1641
+ // getColConfigCategory(colDefs:any){
1642
+ // const colArr = []
1643
+ // colDefs.forEach((col:any) => {
1644
+ // if(col.category){
1645
+ // };
1646
+ // })
1647
+ // }
1648
+ getColConfigCategory(colDefs) {
1649
+ const categorized = {};
1650
+ const noCategory = [];
1651
+ colDefs.forEach((col) => {
1652
+ if (col.category) {
1653
+ // create array if not exists
1654
+ if (!categorized[col.category]) {
1655
+ categorized[col.category] = [];
1656
+ }
1657
+ categorized[col.category].push(col);
1658
+ }
1659
+ else {
1660
+ noCategory.push(col);
1661
+ }
1662
+ });
1663
+ return {
1664
+ categorized,
1665
+ noCategory,
1666
+ };
1667
+ }
1524
1668
  getColumnDetail(colDefs, groupByField) {
1525
1669
  return colDefs.filter((col) => col.fieldName === groupByField);
1526
1670
  }
1527
1671
  activeAllSelection(event) {
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
1672
  const checked = event.target.checked;
1547
1673
  this.colDefs = this.originalColDefs.map((col) => {
1548
1674
  if (col.headerLocked) {
@@ -1557,6 +1683,71 @@ class CatsDataGridComponent {
1557
1683
  this.getActiveCols();
1558
1684
  this.atLeastOneColumnChecked = this.colDefs.some((dt) => dt.active);
1559
1685
  }
1686
+ showAllSelection() {
1687
+ const newState = !this.allActiveDefault;
1688
+ this.colDefs.forEach((col) => {
1689
+ if (!col.category && !col.headerLocked) {
1690
+ col.active = newState;
1691
+ }
1692
+ });
1693
+ this.allActiveDefault = newState;
1694
+ this.updateGlobalState();
1695
+ this.activeAll = this.colDefs.every((dt) => dt.active);
1696
+ this.getActiveCols();
1697
+ this.atLeastOneColumnChecked = this.colDefs.some((dt) => dt.active);
1698
+ }
1699
+ showAllDefaultSelection() {
1700
+ this.allActiveDefault = !this.allActiveDefault;
1701
+ this.noCategoryCols.forEach((col) => {
1702
+ if (!col.headerLocked) {
1703
+ col.active = this.allActiveDefault;
1704
+ }
1705
+ });
1706
+ this.rebuildView();
1707
+ this.updateGlobalState();
1708
+ }
1709
+ rebuildView() {
1710
+ const result = this.getColConfigCategory(this.colDefs);
1711
+ this.categorizedCols = result.categorized;
1712
+ this.noCategoryCols = result.noCategory;
1713
+ }
1714
+ showAllCategorySelection(category) {
1715
+ const newState = !this.allActiveColMap[category];
1716
+ this.colDefs.forEach((col) => {
1717
+ if (col.category === category && !col.headerLocked) {
1718
+ col.active = newState;
1719
+ }
1720
+ });
1721
+ this.allActiveColMap[category] = newState;
1722
+ this.rebuildView();
1723
+ this.updateGlobalState();
1724
+ }
1725
+ toggleSelectedCol(col) {
1726
+ if (col.headerLocked)
1727
+ return;
1728
+ col = this.colDefs.find((c) => c.colId === col.colId);
1729
+ if (!col)
1730
+ return;
1731
+ col.active = !col.active;
1732
+ if (col.category) {
1733
+ const category = col.category;
1734
+ this.allActiveColMap[category] = this.categorizedCols[category].every((c) => c.active || c.headerLocked);
1735
+ }
1736
+ else {
1737
+ this.allActiveDefault = this.noCategoryCols.every((c) => c.active || c.headerLocked);
1738
+ }
1739
+ this.rebuildView();
1740
+ this.updateGlobalState();
1741
+ }
1742
+ updateGlobalState() {
1743
+ const allCols = [
1744
+ ...this.noCategoryCols,
1745
+ ...Object.values(this.categorizedCols).flat(),
1746
+ ];
1747
+ this.activeAll = allCols.every((dt) => dt.active);
1748
+ this.atLeastOneColumnChecked = allCols.some((dt) => dt.active);
1749
+ this.getActiveCols();
1750
+ }
1560
1751
  changeActiveColSelection(event, col) {
1561
1752
  col.active = !col.active;
1562
1753
  this.atLeastOneColumnChecked = this.originalColDefs.some((dt) => dt.active);
@@ -1569,11 +1760,12 @@ class CatsDataGridComponent {
1569
1760
  .filter((col) => col.active)
1570
1761
  .map((c) => {
1571
1762
  if (c.fieldName.includes('.')) {
1572
- c.fieldName = c.fieldName.split('.')[0];
1763
+ const x = c.fieldName.split('.')[0];
1764
+ return x;
1573
1765
  }
1574
1766
  return c.fieldName;
1575
1767
  });
1576
- this.onColCongifgChange.emit(activeCols);
1768
+ this.onColConfigChange.emit(activeCols);
1577
1769
  }
1578
1770
  /**
1579
1771
  * @description Prepares and normalizes column definitions for filtering and menu behavior
@@ -1992,7 +2184,7 @@ class CatsDataGridComponent {
1992
2184
  col.selectedValues.add(opt);
1993
2185
  else
1994
2186
  col.selectedValues.delete(opt);
1995
- this.applyAllFilters();
2187
+ // this.applyAllFilters();
1996
2188
  }
1997
2189
  /**
1998
2190
  * @description * Selects or deselects all checkbox options in the Set Filter.
@@ -2008,7 +2200,7 @@ class CatsDataGridComponent {
2008
2200
  else {
2009
2201
  col.selectedValues.clear();
2010
2202
  }
2011
- this.applyAllFilters();
2203
+ // this.applyAllFilters();
2012
2204
  }
2013
2205
  /**
2014
2206
  * @description
@@ -2082,7 +2274,7 @@ class CatsDataGridComponent {
2082
2274
  this.descendingOrder(col);
2083
2275
  }
2084
2276
  else {
2085
- this.rowData = structuredClone(this.originalRowData);
2277
+ this.applyAllFilters();
2086
2278
  }
2087
2279
  // if (this.sortingType[sortingColumIndex] == '') {
2088
2280
  // this.rowData = this.originalRowData;
@@ -2461,7 +2653,8 @@ class CatsDataGridComponent {
2461
2653
  this.descendingOrder(col);
2462
2654
  }
2463
2655
  else {
2464
- this.rowData = structuredClone(this.originalRowData);
2656
+ //this.rowData = structuredClone(this.originalRowData);
2657
+ this.applyAllFilters();
2465
2658
  }
2466
2659
  this.getGroupedData();
2467
2660
  }
@@ -2575,8 +2768,8 @@ class CatsDataGridComponent {
2575
2768
  style.right = '0px';
2576
2769
  style.zIndex = 14;
2577
2770
  style.background = '#fff';
2578
- style.width = '60px';
2579
- style.minWidth = '60px';
2771
+ style.width = `${col.width ?? 60}px`;
2772
+ style.minWidth = `${col.minWidth ?? 60}px`;
2580
2773
  }
2581
2774
  else if (col.leftPinned) {
2582
2775
  style.position = 'sticky';
@@ -2611,12 +2804,12 @@ class CatsDataGridComponent {
2611
2804
  }
2612
2805
  }
2613
2806
  checkAllSelected() {
2614
- if (!this.rowData.length)
2807
+ if (!this.rowData?.length)
2615
2808
  return false;
2616
2809
  return this.selectedRow.length == this.rowData.length;
2617
2810
  }
2618
2811
  checkInterminate() {
2619
- if (!this.rowData.length)
2812
+ if (!this.rowData?.length)
2620
2813
  return false;
2621
2814
  return (this.selectedRow.length > 0 &&
2622
2815
  this.selectedRow.length < this.rowData.length);
@@ -3036,7 +3229,7 @@ class CatsDataGridComponent {
3036
3229
  }
3037
3230
  }
3038
3231
  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 });
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" }] });
3232
+ 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", isRowsEditable: "isRowsEditable", showSkeleton: "showSkeleton", skeletonRowsLength: "skeletonRowsLength", skeletonColsLength: "skeletonColsLength" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter", onHideSettings: "onHideSettings", onCellEdit: "onCellEdit", onColConfigChange: "onColConfigChange", 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=\"cats-tableArea\" [ngClass]=\"{ large: bigRows }\" #table>\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting-options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"header-section\">\n <div class=\"column-header\">CONFIGURE Column</div>\n <div class=\"reset-default\" (click)=\"resetDefaultColConfig()\">\n Reset to default\n </div>\n </div>\n\n <div class=\"header-search-wrapper\">\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Type to Search\"\n (input)=\"onColConfigSearch($event)\"\n />\n </div>\n </div>\n <div class=\"border-divider\"></div>\n\n <!-- <div class=\"add-more\">\n <div class=\"add-more-text\">Add more</div>\n <img src=\"images/add-more-right-blue.svg\" alt=\"\" />\n </div>\n <div class=\"border-divider\"></div> -->\n <div id=\"table_scroll\" class=\"setting-item-container\">\n <div class=\"setting-item-wrapper\">\n @if (noCategoryCols.length > 0) {\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllDefaultSelection()\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveDefault) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>Default</span>\n </div>\n }\n @for (col of noCategoryCols; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n\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 @for (category of objectKeys(categorizedCols); track category) {\n <div class=\"setting-item-wrapper\">\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllCategorySelection(category)\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveColMap[category]) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>{{ category | titlecase }}</span>\n </div>\n <!-- Category Title -->\n\n <!-- <div class=\"setting-column-item item-title\">\n <span>{{ category | titlecase }}</span>\n </div> -->\n\n <!-- Columns inside category -->\n @for (col of categorizedCols[category]; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img class=\"eye-icon\" src=\"images/eye-custom-header.svg\" />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n />\n }\n\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (activeFilters.size > 0) {\n <div class=\"active-filters-container\">\n <div class=\"filter-static-label\">Filter by:</div>\n <div class=\"filter-tag-wrapper\" id=\"table_scroll\">\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 | uppercase }}\n </span>\n }\n <span class=\"filter-field\"\n >{{ filter.fieldName.split(\".\")[0] | capitalize }}:</span\n >\n <span class=\"\">\n {{\n item.filterOperation == \"=\" ||\n item.filterOperation == \"equals\"\n ? \":\"\n : (item.filterOperation + \" |\" | capitalize)\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 @if (groupByRequired && colDefs.length > 0) {\n <!-- Group Panel -->\n <div\n class=\"table-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\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 @if (colDefs?.length === 0 && showSkeleton) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <th>\n <div class=\"th-wraper\">\n <div class=\"line\"></div>\n </div>\n </th>\n }\n </tr>\n } @else {\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=\"cats-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 <!-- Add icon -->\n @if (col?.headerIcon) {\n <div\n [appTooltip]=\"col?.tooltipText\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n class=\"filters\"\n >\n <img\n [src]=\"col?.headerIcon\"\n alt=\"image\"\n class=\"filter-icon\"\n />\n </div>\n }\n\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 cats-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 class=\"label\" [for]=\"$index\"\n >AND</label\n >\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 class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\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 cats-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 class=\"label\" [for]=\"$index\"\n >AND</label\n >\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 class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\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 cats-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 class=\"label\" [for]=\"$index\"\n >AND</label\n >\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 class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\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=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"\n toggleSelectAll(col, $event)\n \"\n />\n Select All\n </label>\n <div\n class=\"set-options\"\n id=\"table_scroll\"\n >\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label\n class=\"cats-checkbox_container\"\n >\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues.has(opt)\n \"\n (change)=\"\n toggleSetOption(\n col,\n opt,\n $event\n )\n \"\n />\n <span class=\"textTruncate\">\n {{ opt }}\n </span>\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); activeFilterIndex=null\"\n >\n Reset\n </button>\n @if (col.filterType == \"set\") {\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"\n applyAllFilters();\n activeFilterIndex = null\n \"\n >\n Apply\n </button>\n }\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=\"header-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\n class=\"right_click_item\"\n (click)=\"autosizeColumn(col)\"\n >\n <div class=\"left_item\">\n <img src=\"images/autosize-this.svg\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"autosizeAllColumns()\"\n >\n <div class=\"left_item\">\n <img src=\"images/autosize-all.svg\" 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=\"images/rotate-ccw.svg\" alt=\"\" />\n <span class=\"text\">Reset Columns</span>\n </div>\n </div> -->\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @if (showSkeleton) {\n @for (r of skeletonRows; track $index) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <td>\n <div class=\"line\"></div>\n </td>\n }\n </tr>\n }\n } @else {\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=\"cats-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\n class=\"cats-see-more-data\"\n id=\"table_scroll\"\n >\n <div class=\"cats-item\">\n <span class=\"cats-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=\"cats-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=\"cats-radio-option\">\n <input\n type=\"radio\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [checked]=\"data?.isSelected\"\n (change)=\"onRowCheckboxSelection($event)\"\n />\n <label class=\"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 (\n isRowsEditable &&\n isCellDblClicked[col.colId + \"-\" + data.rowId]\n ) {\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\n class=\"gripper-img\"\n src=\"images/gripper.svg\"\n />\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]=\"\n parseColValue(data, col) || 'N/A'\n \"\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]=\"\n data[col.fieldName] || parseColValue(data, col)\n \"\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 }\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=\"cats-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=\"cats-see-more-data\" id=\"table_scroll\">\n <div class=\"cats-item\">\n <span class=\"cats-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 && colDefs.length > 0) {\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=\"header-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{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);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(--text-body-secondary);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(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#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(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 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,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / 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) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #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,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-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(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-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(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-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}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-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))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-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(--border-core-default);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(--surface-background-canvas);color:var(--text-heading-primary);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);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(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);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(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.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(--surface-background-subtle);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(--surface-background-canvas);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(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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 .cats-see-more-data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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 .cats-see-more-data .cats-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(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .cats-see-more-data .cats-item .cats-desc{text-wrap:wrap;word-break:break-word}.cats-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}.cats-tableArea.large .table_wrapper table thead tr,.cats-tableArea.large .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table .filter_wrapper{top:calc(2rem / var(--scale))}.cats-tableArea.large .header-dropdown-wrapper{top:calc(5.25rem / var(--scale))}.cats-tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale))}.cats-tableArea .table_wrapper.tbody_height{height:calc(100% - 3.5rem / var(--scale))}.cats-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(--surface-background-canvas)}.cats-tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:20}.cats-tableArea .table_wrapper table td,.cats-tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--text-heading-secondary);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-tableArea .table_wrapper table td.pinned_column,.cats-tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.cats-tableArea .table_wrapper table td .cell-value,.cats-tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.cats-tableArea .table_wrapper table td .cell-value .node_label,.cats-tableArea .table_wrapper table th .cell-value .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .table_wrapper table td .cell-value.ellipsis,.cats-tableArea .table_wrapper table td .cell-value .ellipsis,.cats-tableArea .table_wrapper table th .cell-value.ellipsis,.cats-tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.cats-tableArea .table_wrapper table td .cell-value.ellipsis:hover .cats-see-more-data,.cats-tableArea .table_wrapper table th .cell-value.ellipsis:hover .cats-see-more-data{display:flex}.cats-tableArea .table_wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));color:var(--text-heading-secondary)}.cats-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(--text-heading-secondary);text-transform:uppercase}.cats-tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper table thead th:nth-last-child(2) .second-dropdown,.cats-tableArea .table_wrapper table thead th:nth-last-child(3) .second-dropdown{right:unset;left:calc(-20.25rem / var(--scale))}.cats-tableArea .table_wrapper table thead th:last-child .th-wraper{border:0}.cats-tableArea .table_wrapper table thead th:hover .none{display:block}.cats-tableArea .table_wrapper table thead th:hover .up,.cats-tableArea .table_wrapper table thead th:hover .down{display:none}.cats-tableArea .table_wrapper table tbody{background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:all .3s ease-in-out}.cats-tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.cats-tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.cats-tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none;background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--text-link-hover)}.cats-tableArea .table_wrapper table tbody tr:hover,.cats-tableArea .table_wrapper table tbody tr:hover td{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .cats-see-more-data{bottom:calc(2.1666666667rem / var(--scale))}.cats-tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.cats-tableArea .table_wrapper table tbody tr td:hover{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus)}.cats-tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.cats-tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus)}.cats-tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--text-link-hover)}.cats-tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.cats-tableArea .table_wrapper table tbody tr td .gripper{margin-right:calc(.8333333333rem / var(--scale));cursor:grab}.cats-tableArea .table_wrapper table tbody tr td .gripper .gripper-img{min-width:16px}.cats-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}.cats-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(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(-4rem / var(--scale));min-width:calc(18.8333333333rem / var(--scale));max-width:calc(33.3333333333rem / var(--scale));background:var(--surface-background-default);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 .cats-checkbox_container{color:var(--text-body-primary)}.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));padding-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(18.6666666667rem / var(--scale));overflow-y:auto;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:calc(1.8333333333rem / var(--scale));margin-top:calc(.3333333333rem / var(--scale));width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:auto;height:calc(2.6666666667rem / var(--scale));min-width:calc(7.5rem / var(--scale));font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(1rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--surface-action-default);border-color:var(--border-interaction-focus);color:var(--text-heading-inverse)}.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(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .resize-handle{color:var(--border-core-default);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(.6666666667rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-blue);margin-bottom:calc(.6666666667rem / var(--scale));border-top-left-radius:calc(.6666666667rem / var(--scale));border-top-right-radius:calc(.6666666667rem / var(--scale));min-height:calc(4.1666666667rem / var(--scale))}.active-filters-container .filter-static-label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary);min-width:calc(5rem / var(--scale))}.active-filters-container .filter-tag-wrapper{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(100% - 17.0833333333rem / var(--scale));overflow:auto}.active-filters-container .filter-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(--surface-background-default);font-size:var(--fs-12);line-height:calc(1.5rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));color:var(--text-heading-secondary)}.active-filters-container .filter-tag-wrapper .active-filter-tag .active-filter-label{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));max-width:calc(29.1666666667rem / var(--scale));padding:calc(.1666666667rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-canvas)}.active-filters-container .filter-tag-wrapper .active-filter-tag .filter-logic{color:var(--text-body-secondary);text-transform:uppercase}.active-filters-container .filter-tag-wrapper .active-filter-tag .filter-value{padding-left:calc(.3333333333rem / var(--scale))}.active-filters-container .filter-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 .filter-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-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default);cursor:pointer;padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));min-width:calc(8.3333333333rem / var(--scale));text-align:right;border-left:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.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(--text-heading-secondary);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-canvas)}.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(--surface-background-canvas);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(--border-core-default);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(--surface-background-blue)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-secondary);cursor:pointer}.pagination-main .pagination-form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--border-core-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-primary);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(--surface-background-canvas);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--text-heading-secondary)}.d-none{display:none}.table-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(--surface-background-default);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-top-right-radius:calc(.6666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.table-group-panel img.divider:last-child{display:none}.table-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(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;text-transform:uppercase;color:var(--text-heading-secondary);cursor:grab}.table-group-panel .group-tag .remove_tag{border:0;padding:0;cursor:pointer}.table-group-panel .group-placeholder{color:var(--text-heading-secondary)}.table-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(--text-heading-primary);cursor:pointer}.cats-tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--surface-background-blue);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.header-dropdown-wrapper{background-color:var(--surface-background-canvas);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale));right:calc(.8333333333rem / var(--scale));top:calc(3.9166666667rem / var(--scale))}.header-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(--border-core-default)}.header-dropdown-wrapper .right-click-dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.header-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}.header-dropdown-wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.header-dropdown-wrapper .right_click_item:hover,.header-dropdown-wrapper .right_click_item.active{background-color:var(--surface-background-blue)}.header-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))}.header-dropdown-wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.header-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(--text-heading-secondary)}.header-dropdown-wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.header-dropdown-wrapper .right_click_item .right_chevron{stroke:var(--text-body-secondary)}.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(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--border-core-default);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(--surface-background-canvas);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(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--surface-background-canvas);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);width:calc(30.9166666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0}.setting-options .header-section{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:0 calc(1.3333333333rem / var(--scale))}.setting-options .header-section .column-header{text-transform:uppercase;color:var(--text-body-secondary)}.setting-options .header-section .reset-default{color:var(--text-link-default);min-width:calc(9.1666666667rem / var(--scale));cursor:pointer;text-align:right}.setting-options .header-search-wrapper{padding:calc(.6666666667rem / var(--scale))}.setting-options .add-more{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-blue);margin:calc(.6666666667rem / var(--scale))}.setting-options .add-more .add-more-text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default)}.setting-options .border-divider{height:calc(.0833333333rem / var(--scale));margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:var(--border-core-default)}.setting-options .setting-item-container{max-height:calc(25rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.setting-options .setting-item-container .setting-item-wrapper{width:100%}.setting-options .setting-item-container .setting-item-wrapper:not(:last-child){border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-bottom:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item{color:var(--text-heading-primary);padding:calc(.5rem / var(--scale)) 0;cursor:pointer;width:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item .eye-icon{width:calc(1.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:100%}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.item-title{color:var(--text-body-secondary)}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable{color:var(--text-body-muted);pointer-events:none}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable .eye-icon{opacity:.2}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.eye-off{color:var(--text-body-primary)}.disable_group{pointer-events:none}.line{display:flex;justify-content:center;align-items:center;width:calc(8.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.5833333333rem / var(--scale));background-image:linear-gradient(90deg,#f4f4f4,#e5e5e5cc,#f4f4f4 80px);background-size:600px;animation:shine-lines 2s infinite ease-out}@keyframes shine-lines{0%{background-position:calc(-8.3333333333rem / var(--scale))}40%,to{background-position:calc(11.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: "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.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: AddClassPipe, name: "addClass" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] });
3040
3233
  }
3041
3234
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CatsDataGridComponent, decorators: [{
3042
3235
  type: Component,
@@ -3051,7 +3244,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3051
3244
  AddClassPipe,
3052
3245
  CommonInputComponent,
3053
3246
  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"] }]
3247
+ CapitalizePipe
3248
+ ], template: "<div class=\"cats-tableArea\" [ngClass]=\"{ large: bigRows }\" #table>\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting-options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"header-section\">\n <div class=\"column-header\">CONFIGURE Column</div>\n <div class=\"reset-default\" (click)=\"resetDefaultColConfig()\">\n Reset to default\n </div>\n </div>\n\n <div class=\"header-search-wrapper\">\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Type to Search\"\n (input)=\"onColConfigSearch($event)\"\n />\n </div>\n </div>\n <div class=\"border-divider\"></div>\n\n <!-- <div class=\"add-more\">\n <div class=\"add-more-text\">Add more</div>\n <img src=\"images/add-more-right-blue.svg\" alt=\"\" />\n </div>\n <div class=\"border-divider\"></div> -->\n <div id=\"table_scroll\" class=\"setting-item-container\">\n <div class=\"setting-item-wrapper\">\n @if (noCategoryCols.length > 0) {\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllDefaultSelection()\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveDefault) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>Default</span>\n </div>\n }\n @for (col of noCategoryCols; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n\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 @for (category of objectKeys(categorizedCols); track category) {\n <div class=\"setting-item-wrapper\">\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllCategorySelection(category)\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveColMap[category]) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>{{ category | titlecase }}</span>\n </div>\n <!-- Category Title -->\n\n <!-- <div class=\"setting-column-item item-title\">\n <span>{{ category | titlecase }}</span>\n </div> -->\n\n <!-- Columns inside category -->\n @for (col of categorizedCols[category]; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img class=\"eye-icon\" src=\"images/eye-custom-header.svg\" />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n />\n }\n\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (activeFilters.size > 0) {\n <div class=\"active-filters-container\">\n <div class=\"filter-static-label\">Filter by:</div>\n <div class=\"filter-tag-wrapper\" id=\"table_scroll\">\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 | uppercase }}\n </span>\n }\n <span class=\"filter-field\"\n >{{ filter.fieldName.split(\".\")[0] | capitalize }}:</span\n >\n <span class=\"\">\n {{\n item.filterOperation == \"=\" ||\n item.filterOperation == \"equals\"\n ? \":\"\n : (item.filterOperation + \" |\" | capitalize)\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 @if (groupByRequired && colDefs.length > 0) {\n <!-- Group Panel -->\n <div\n class=\"table-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\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 @if (colDefs?.length === 0 && showSkeleton) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <th>\n <div class=\"th-wraper\">\n <div class=\"line\"></div>\n </div>\n </th>\n }\n </tr>\n } @else {\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=\"cats-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 <!-- Add icon -->\n @if (col?.headerIcon) {\n <div\n [appTooltip]=\"col?.tooltipText\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n class=\"filters\"\n >\n <img\n [src]=\"col?.headerIcon\"\n alt=\"image\"\n class=\"filter-icon\"\n />\n </div>\n }\n\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 cats-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 class=\"label\" [for]=\"$index\"\n >AND</label\n >\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 class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\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 cats-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 class=\"label\" [for]=\"$index\"\n >AND</label\n >\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 class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\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 cats-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 class=\"label\" [for]=\"$index\"\n >AND</label\n >\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 class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\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=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"\n toggleSelectAll(col, $event)\n \"\n />\n Select All\n </label>\n <div\n class=\"set-options\"\n id=\"table_scroll\"\n >\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label\n class=\"cats-checkbox_container\"\n >\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues.has(opt)\n \"\n (change)=\"\n toggleSetOption(\n col,\n opt,\n $event\n )\n \"\n />\n <span class=\"textTruncate\">\n {{ opt }}\n </span>\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); activeFilterIndex=null\"\n >\n Reset\n </button>\n @if (col.filterType == \"set\") {\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"\n applyAllFilters();\n activeFilterIndex = null\n \"\n >\n Apply\n </button>\n }\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=\"header-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\n class=\"right_click_item\"\n (click)=\"autosizeColumn(col)\"\n >\n <div class=\"left_item\">\n <img src=\"images/autosize-this.svg\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"autosizeAllColumns()\"\n >\n <div class=\"left_item\">\n <img src=\"images/autosize-all.svg\" 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=\"images/rotate-ccw.svg\" alt=\"\" />\n <span class=\"text\">Reset Columns</span>\n </div>\n </div> -->\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @if (showSkeleton) {\n @for (r of skeletonRows; track $index) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <td>\n <div class=\"line\"></div>\n </td>\n }\n </tr>\n }\n } @else {\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=\"cats-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\n class=\"cats-see-more-data\"\n id=\"table_scroll\"\n >\n <div class=\"cats-item\">\n <span class=\"cats-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=\"cats-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=\"cats-radio-option\">\n <input\n type=\"radio\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [checked]=\"data?.isSelected\"\n (change)=\"onRowCheckboxSelection($event)\"\n />\n <label class=\"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 (\n isRowsEditable &&\n isCellDblClicked[col.colId + \"-\" + data.rowId]\n ) {\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\n class=\"gripper-img\"\n src=\"images/gripper.svg\"\n />\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]=\"\n parseColValue(data, col) || 'N/A'\n \"\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]=\"\n data[col.fieldName] || parseColValue(data, col)\n \"\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 }\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=\"cats-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=\"cats-see-more-data\" id=\"table_scroll\">\n <div class=\"cats-item\">\n <span class=\"cats-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 && colDefs.length > 0) {\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=\"header-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{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);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(--text-body-secondary);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(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#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(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 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,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / 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) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #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,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-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(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-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(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-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}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-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))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-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(--border-core-default);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(--surface-background-canvas);color:var(--text-heading-primary);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);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(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);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(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.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(--surface-background-subtle);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(--surface-background-canvas);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(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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 .cats-see-more-data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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 .cats-see-more-data .cats-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(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .cats-see-more-data .cats-item .cats-desc{text-wrap:wrap;word-break:break-word}.cats-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}.cats-tableArea.large .table_wrapper table thead tr,.cats-tableArea.large .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table .filter_wrapper{top:calc(2rem / var(--scale))}.cats-tableArea.large .header-dropdown-wrapper{top:calc(5.25rem / var(--scale))}.cats-tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale))}.cats-tableArea .table_wrapper.tbody_height{height:calc(100% - 3.5rem / var(--scale))}.cats-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(--surface-background-canvas)}.cats-tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:20}.cats-tableArea .table_wrapper table td,.cats-tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--text-heading-secondary);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-tableArea .table_wrapper table td.pinned_column,.cats-tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.cats-tableArea .table_wrapper table td .cell-value,.cats-tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.cats-tableArea .table_wrapper table td .cell-value .node_label,.cats-tableArea .table_wrapper table th .cell-value .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .table_wrapper table td .cell-value.ellipsis,.cats-tableArea .table_wrapper table td .cell-value .ellipsis,.cats-tableArea .table_wrapper table th .cell-value.ellipsis,.cats-tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.cats-tableArea .table_wrapper table td .cell-value.ellipsis:hover .cats-see-more-data,.cats-tableArea .table_wrapper table th .cell-value.ellipsis:hover .cats-see-more-data{display:flex}.cats-tableArea .table_wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));color:var(--text-heading-secondary)}.cats-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(--text-heading-secondary);text-transform:uppercase}.cats-tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper table thead th:nth-last-child(2) .second-dropdown,.cats-tableArea .table_wrapper table thead th:nth-last-child(3) .second-dropdown{right:unset;left:calc(-20.25rem / var(--scale))}.cats-tableArea .table_wrapper table thead th:last-child .th-wraper{border:0}.cats-tableArea .table_wrapper table thead th:hover .none{display:block}.cats-tableArea .table_wrapper table thead th:hover .up,.cats-tableArea .table_wrapper table thead th:hover .down{display:none}.cats-tableArea .table_wrapper table tbody{background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:all .3s ease-in-out}.cats-tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.cats-tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.cats-tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none;background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--text-link-hover)}.cats-tableArea .table_wrapper table tbody tr:hover,.cats-tableArea .table_wrapper table tbody tr:hover td{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .cats-see-more-data{bottom:calc(2.1666666667rem / var(--scale))}.cats-tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.cats-tableArea .table_wrapper table tbody tr td:hover{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus)}.cats-tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.cats-tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus)}.cats-tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--text-link-hover)}.cats-tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.cats-tableArea .table_wrapper table tbody tr td .gripper{margin-right:calc(.8333333333rem / var(--scale));cursor:grab}.cats-tableArea .table_wrapper table tbody tr td .gripper .gripper-img{min-width:16px}.cats-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}.cats-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(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(-4rem / var(--scale));min-width:calc(18.8333333333rem / var(--scale));max-width:calc(33.3333333333rem / var(--scale));background:var(--surface-background-default);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 .cats-checkbox_container{color:var(--text-body-primary)}.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));padding-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(18.6666666667rem / var(--scale));overflow-y:auto;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:calc(1.8333333333rem / var(--scale));margin-top:calc(.3333333333rem / var(--scale));width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:auto;height:calc(2.6666666667rem / var(--scale));min-width:calc(7.5rem / var(--scale));font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(1rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--surface-action-default);border-color:var(--border-interaction-focus);color:var(--text-heading-inverse)}.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(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .resize-handle{color:var(--border-core-default);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(.6666666667rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-blue);margin-bottom:calc(.6666666667rem / var(--scale));border-top-left-radius:calc(.6666666667rem / var(--scale));border-top-right-radius:calc(.6666666667rem / var(--scale));min-height:calc(4.1666666667rem / var(--scale))}.active-filters-container .filter-static-label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary);min-width:calc(5rem / var(--scale))}.active-filters-container .filter-tag-wrapper{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(100% - 17.0833333333rem / var(--scale));overflow:auto}.active-filters-container .filter-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(--surface-background-default);font-size:var(--fs-12);line-height:calc(1.5rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));color:var(--text-heading-secondary)}.active-filters-container .filter-tag-wrapper .active-filter-tag .active-filter-label{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));max-width:calc(29.1666666667rem / var(--scale));padding:calc(.1666666667rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-canvas)}.active-filters-container .filter-tag-wrapper .active-filter-tag .filter-logic{color:var(--text-body-secondary);text-transform:uppercase}.active-filters-container .filter-tag-wrapper .active-filter-tag .filter-value{padding-left:calc(.3333333333rem / var(--scale))}.active-filters-container .filter-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 .filter-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-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default);cursor:pointer;padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));min-width:calc(8.3333333333rem / var(--scale));text-align:right;border-left:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.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(--text-heading-secondary);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-canvas)}.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(--surface-background-canvas);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(--border-core-default);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(--surface-background-blue)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-secondary);cursor:pointer}.pagination-main .pagination-form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--border-core-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-primary);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(--surface-background-canvas);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--text-heading-secondary)}.d-none{display:none}.table-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(--surface-background-default);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-top-right-radius:calc(.6666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.table-group-panel img.divider:last-child{display:none}.table-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(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;text-transform:uppercase;color:var(--text-heading-secondary);cursor:grab}.table-group-panel .group-tag .remove_tag{border:0;padding:0;cursor:pointer}.table-group-panel .group-placeholder{color:var(--text-heading-secondary)}.table-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(--text-heading-primary);cursor:pointer}.cats-tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--surface-background-blue);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.header-dropdown-wrapper{background-color:var(--surface-background-canvas);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale));right:calc(.8333333333rem / var(--scale));top:calc(3.9166666667rem / var(--scale))}.header-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(--border-core-default)}.header-dropdown-wrapper .right-click-dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.header-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}.header-dropdown-wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.header-dropdown-wrapper .right_click_item:hover,.header-dropdown-wrapper .right_click_item.active{background-color:var(--surface-background-blue)}.header-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))}.header-dropdown-wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.header-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(--text-heading-secondary)}.header-dropdown-wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.header-dropdown-wrapper .right_click_item .right_chevron{stroke:var(--text-body-secondary)}.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(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--border-core-default);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(--surface-background-canvas);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(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--surface-background-canvas);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);width:calc(30.9166666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0}.setting-options .header-section{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:0 calc(1.3333333333rem / var(--scale))}.setting-options .header-section .column-header{text-transform:uppercase;color:var(--text-body-secondary)}.setting-options .header-section .reset-default{color:var(--text-link-default);min-width:calc(9.1666666667rem / var(--scale));cursor:pointer;text-align:right}.setting-options .header-search-wrapper{padding:calc(.6666666667rem / var(--scale))}.setting-options .add-more{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-blue);margin:calc(.6666666667rem / var(--scale))}.setting-options .add-more .add-more-text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default)}.setting-options .border-divider{height:calc(.0833333333rem / var(--scale));margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:var(--border-core-default)}.setting-options .setting-item-container{max-height:calc(25rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.setting-options .setting-item-container .setting-item-wrapper{width:100%}.setting-options .setting-item-container .setting-item-wrapper:not(:last-child){border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-bottom:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item{color:var(--text-heading-primary);padding:calc(.5rem / var(--scale)) 0;cursor:pointer;width:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item .eye-icon{width:calc(1.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:100%}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.item-title{color:var(--text-body-secondary)}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable{color:var(--text-body-muted);pointer-events:none}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable .eye-icon{opacity:.2}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.eye-off{color:var(--text-body-primary)}.disable_group{pointer-events:none}.line{display:flex;justify-content:center;align-items:center;width:calc(8.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.5833333333rem / var(--scale));background-image:linear-gradient(90deg,#f4f4f4,#e5e5e5cc,#f4f4f4 80px);background-size:600px;animation:shine-lines 2s infinite ease-out}@keyframes shine-lines{0%{background-position:calc(-8.3333333333rem / var(--scale))}40%,to{background-position:calc(11.6666666667rem / var(--scale))}}\n"] }]
3055
3249
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { pinMenu: [{
3056
3250
  type: ViewChild,
3057
3251
  args: ['pinMenu']
@@ -3111,7 +3305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3111
3305
  type: Output
3112
3306
  }], onCellEdit: [{
3113
3307
  type: Output
3114
- }], onColCongifgChange: [{
3308
+ }], onColConfigChange: [{
3115
3309
  type: Output
3116
3310
  }], pageSizeList: [{
3117
3311
  type: Input
@@ -3131,10 +3325,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3131
3325
  type: Output
3132
3326
  }], dynamicGroupingFiltering: [{
3133
3327
  type: Input
3328
+ }], isRowsEditable: [{
3329
+ type: Input
3330
+ }], showSkeleton: [{
3331
+ type: Input
3134
3332
  }], onRowClicked: [{
3135
3333
  type: Output
3136
3334
  }], onCellClicked: [{
3137
3335
  type: Output
3336
+ }], skeletonRowsLength: [{
3337
+ type: Input
3338
+ }], skeletonColsLength: [{
3339
+ type: Input
3138
3340
  }] } });
3139
3341
 
3140
3342
  class CommonRendererComponent {
@@ -3334,7 +3536,7 @@ class CommonRendererComponent {
3334
3536
  if (target &&
3335
3537
  (target.closest('.hidden_list') ||
3336
3538
  target.closest('.tag_more') ||
3337
- target.closest('.tag_dropdown') ||
3539
+ target.closest('.cats-tag-dropdown') ||
3338
3540
  target.closest('.dropdown_item') ||
3339
3541
  this.openDropdown)) {
3340
3542
  this.activeTagId.set(`${this.params.col.fieldName}-${this.params.data.rowId}`);
@@ -3356,7 +3558,7 @@ class CommonRendererComponent {
3356
3558
  (target.closest('.tag_wrapper') ||
3357
3559
  target.closest('.hidden_list') ||
3358
3560
  target.closest('.tag_more') ||
3359
- target.closest('tag_dropdown') ||
3561
+ target.closest('.cats-tag-dropdown') ||
3360
3562
  target.closest('dropdown_item'))) {
3361
3563
  return;
3362
3564
  }
@@ -3432,7 +3634,7 @@ class CommonRendererComponent {
3432
3634
  }
3433
3635
  }
3434
3636
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
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" }] });
3637
+ 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=\"cats-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 </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{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);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(--text-body-secondary);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(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#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(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 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,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / 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) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #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,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-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(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-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(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-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}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-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))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-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(--border-core-default);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(--surface-background-canvas);color:var(--text-heading-primary);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);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(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);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(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.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(--surface-background-subtle);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(--surface-background-canvas);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(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.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(--surface-background-canvas);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(--border-core-default);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(--text-heading-primary)}.action-menu .menu .item_wrapper .menu_item.disabled_item{color:var(--text-body-muted);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(--surface-background-blue)}.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:400;color:var(--text-heading-secondary);background-color:var(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--text-heading-secondary)}.tag_wrapper .tag_chip .circle.bg_error{background-color:var(--semantics-error-strong)}.tag_wrapper .tag_chip .circle.bg_pending{background-color:var(--semantics-warning-strong)}.tag_wrapper .tag_chip .circle.bg_active{background-color:var(--semantics-success-default)}.tag_wrapper .tag_chip .circle.bg_info{background-color:var(--text-link-hover)}.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(--surface-background-default)}.tag_wrapper .hidden_list .cats-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(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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 .cats-tag-dropdown .dropdown_item{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-secondary);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));width:auto;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip.active,.tag_wrapper .hidden_list .cats-tag-dropdown .dropdown_item.active{background-color:var(--green-100);border-color:var(--green-200);color:var(--semantics-success-strong)}.tag_wrapper .tag_chip.pending,.tag_wrapper .hidden_list .cats-tag-dropdown .dropdown_item.pending{background-color:var(--yellow-100);border-color:var(--border-semantics-yellow);color:var(--semantics-warning-strong)}.tag_wrapper .tag_chip.error,.tag_wrapper .hidden_list .cats-tag-dropdown .dropdown_item.error{background-color:var(--red-100);border-color:var(--red-300);color:var(--semantics-error-strong)}.tag_wrapper .tag_chip.info,.tag_wrapper .hidden_list .cats-tag-dropdown .dropdown_item.info{background-color:var(--surface-background-blue);border-color:var(--text-link-muted0);color:var(--text-link-hover)}.tag_wrapper .tag_chip.disable,.tag_wrapper .hidden_list .cats-tag-dropdown .dropdown_item.disable{background-color:var(--surface-background-default);border-color:var(--border-core-strong);color:var(--text-body-secondary);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 .cats-see-more-data{display:flex}:host::ng-deep .cats-see-more-data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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 .cats-see-more-data .cats-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(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .cats-see-more-data .cats-item .cats-desc{text-wrap:wrap;word-break:break-word}.grid-link{color:var(--text-link-hover);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" }] });
3436
3638
  }
3437
3639
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonRendererComponent, decorators: [{
3438
3640
  type: Component,
@@ -3442,7 +3644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3442
3644
  CommonModule,
3443
3645
  AddClassPipe,
3444
3646
  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"] }]
3647
+ ], 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=\"cats-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 </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{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);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(--text-body-secondary);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(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#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(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 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,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / 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) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #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,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-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(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-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(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-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}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-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))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-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(--border-core-default);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(--surface-background-canvas);color:var(--text-heading-primary);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);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(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);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(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.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(--surface-background-subtle);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(--surface-background-canvas);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(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.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(--surface-background-canvas);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(--border-core-default);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(--text-heading-primary)}.action-menu .menu .item_wrapper .menu_item.disabled_item{color:var(--text-body-muted);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(--surface-background-blue)}.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:400;color:var(--text-heading-secondary);background-color:var(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--text-heading-secondary)}.tag_wrapper .tag_chip .circle.bg_error{background-color:var(--semantics-error-strong)}.tag_wrapper .tag_chip .circle.bg_pending{background-color:var(--semantics-warning-strong)}.tag_wrapper .tag_chip .circle.bg_active{background-color:var(--semantics-success-default)}.tag_wrapper .tag_chip .circle.bg_info{background-color:var(--text-link-hover)}.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(--surface-background-default)}.tag_wrapper .hidden_list .cats-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(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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 .cats-tag-dropdown .dropdown_item{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-secondary);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));width:auto;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip.active,.tag_wrapper .hidden_list .cats-tag-dropdown .dropdown_item.active{background-color:var(--green-100);border-color:var(--green-200);color:var(--semantics-success-strong)}.tag_wrapper .tag_chip.pending,.tag_wrapper .hidden_list .cats-tag-dropdown .dropdown_item.pending{background-color:var(--yellow-100);border-color:var(--border-semantics-yellow);color:var(--semantics-warning-strong)}.tag_wrapper .tag_chip.error,.tag_wrapper .hidden_list .cats-tag-dropdown .dropdown_item.error{background-color:var(--red-100);border-color:var(--red-300);color:var(--semantics-error-strong)}.tag_wrapper .tag_chip.info,.tag_wrapper .hidden_list .cats-tag-dropdown .dropdown_item.info{background-color:var(--surface-background-blue);border-color:var(--text-link-muted0);color:var(--text-link-hover)}.tag_wrapper .tag_chip.disable,.tag_wrapper .hidden_list .cats-tag-dropdown .dropdown_item.disable{background-color:var(--surface-background-default);border-color:var(--border-core-strong);color:var(--text-body-secondary);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 .cats-see-more-data{display:flex}:host::ng-deep .cats-see-more-data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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 .cats-see-more-data .cats-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(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .cats-see-more-data .cats-item .cats-desc{text-wrap:wrap;word-break:break-word}.grid-link{color:var(--text-link-hover);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"] }]
3446
3648
  }] });
3447
3649
 
3448
3650
  class CommonTreeTableComponent {
@@ -3470,6 +3672,7 @@ class CommonTreeTableComponent {
3470
3672
  showNodeIcon = true;
3471
3673
  noDataText = 'No data found';
3472
3674
  loadingText = 'Loading...';
3675
+ expandAllNodes = false;
3473
3676
  emitExpandAlways = true;
3474
3677
  // New sorting, filtering, and customization inputs
3475
3678
  sortingRequired = true;
@@ -3490,12 +3693,14 @@ class CommonTreeTableComponent {
3490
3693
  rowOptionsResolver = () => ({});
3491
3694
  nodeIconResolver = () => null;
3492
3695
  linkResolver = () => null;
3696
+ showSkeleton = false;
3493
3697
  nodeToggle = new EventEmitter();
3494
3698
  selectionChange = new EventEmitter();
3495
3699
  linkClick = new EventEmitter();
3496
3700
  linkDoubleClick = new EventEmitter();
3497
3701
  onHideSettings = new EventEmitter();
3498
3702
  onPaginationChange = new EventEmitter();
3703
+ onColConfigChange = new EventEmitter();
3499
3704
  dateConfig = {
3500
3705
  selectionMode: 'single',
3501
3706
  enableTime: false,
@@ -3538,6 +3743,12 @@ class CommonTreeTableComponent {
3538
3743
  atLeastOneColumnChecked = true;
3539
3744
  selectedRow = [];
3540
3745
  originalColumns = [];
3746
+ originalCategorizedCols = {};
3747
+ originalNoCategoryCols = [];
3748
+ skeletonRowsLength = 8;
3749
+ skeletonColsLength = 8;
3750
+ skeletonRows = [];
3751
+ skeletonCols = [];
3541
3752
  removeMouseMove = null;
3542
3753
  removeMouseUp = null;
3543
3754
  rafId = null;
@@ -3564,6 +3775,12 @@ class CommonTreeTableComponent {
3564
3775
  fallbackKey = new WeakMap();
3565
3776
  fallbackSeq = 1;
3566
3777
  resolvedTreeColumnField;
3778
+ activeColumns = [];
3779
+ categorizedCols = {};
3780
+ noCategoryCols = [];
3781
+ objectKeys = Object.keys;
3782
+ allActiveDefault = false;
3783
+ allActiveColMap = {};
3567
3784
  constructor(renderer, zone, cd) {
3568
3785
  this.renderer = renderer;
3569
3786
  this.zone = zone;
@@ -3747,6 +3964,25 @@ class CommonTreeTableComponent {
3747
3964
  return updatedCol;
3748
3965
  });
3749
3966
  }
3967
+ cloneColDefs(colDefs) {
3968
+ return colDefs.map((col) => ({
3969
+ ...col,
3970
+ active: col.active,
3971
+ cellRendererParams: col.cellRendererParams
3972
+ ? { ...col.cellRendererParams }
3973
+ : col.cellRendererParams,
3974
+ }));
3975
+ }
3976
+ resetDefaultColConfig() {
3977
+ this.columns = this.cloneColDefs(this.originalColumns);
3978
+ const result = this.getColConfigCategory(this.columns);
3979
+ this.originalCategorizedCols = JSON.parse(JSON.stringify(result.categorized));
3980
+ this.originalNoCategoryCols = this.cloneColDefs(result.noCategory);
3981
+ this.categorizedCols = result.categorized;
3982
+ this.noCategoryCols = result.noCategory;
3983
+ this.allActiveDefault = this.originalNoCategoryCols.every((c) => c.active || c.headerLocked);
3984
+ this.updateGlobalState();
3985
+ }
3750
3986
  normalizeSetFilterType(value, key) {
3751
3987
  if (!value)
3752
3988
  return;
@@ -3765,10 +4001,40 @@ class CommonTreeTableComponent {
3765
4001
  return [];
3766
4002
  }
3767
4003
  ngOnChanges(changes) {
4004
+ if (changes['skeletonColsLength']?.currentValue) {
4005
+ this.skeletonColsLength = changes['skeletonColsLength']?.currentValue;
4006
+ }
4007
+ if (changes['showSkeleton']) {
4008
+ this.showSkeleton = changes['showSkeleton']?.currentValue;
4009
+ }
3768
4010
  if (changes['data'] || changes['columns']) {
4011
+ const columns = changes['columns']?.currentValue;
4012
+ if (columns?.length > 0) {
4013
+ this.skeletonColsLength = changes['columns']?.currentValue.length;
4014
+ }
4015
+ this.skeletonCols = Array.from({ length: this.skeletonColsLength }, (_, i) => i);
4016
+ this.skeletonRows = Array.from({ length: this.skeletonRowsLength }, (_, i) => i);
3769
4017
  // this.initializeColumns();
3770
- this.columns = this.getUpdatedColDefs(changes['columns']?.currentValue);
4018
+ const colDefs = changes['columns']?.currentValue;
4019
+ if (Array.isArray(colDefs)) {
4020
+ this.columns = this.getUpdatedColDefs(colDefs);
4021
+ this.originalColumns = this.cloneColDefs(this.columns);
4022
+ const result = this.getColConfigCategory(this.columns);
4023
+ this.originalCategorizedCols = JSON.parse(JSON.stringify(result.categorized));
4024
+ this.originalNoCategoryCols = JSON.parse(JSON.stringify(result.noCategory));
4025
+ this.categorizedCols = result.categorized;
4026
+ this.noCategoryCols = result.noCategory;
4027
+ }
3771
4028
  this.originalRowData = structuredClone(this.data || []);
4029
+ if (this.expandAllNodes) {
4030
+ this.applyExpandAllInputState();
4031
+ }
4032
+ this.rebuildRows();
4033
+ }
4034
+ if (changes['expandAllNodes'] &&
4035
+ !changes['expandAllNodes'].firstChange &&
4036
+ !changes['data']) {
4037
+ this.applyExpandAllInputState();
3772
4038
  this.rebuildRows();
3773
4039
  }
3774
4040
  if (changes['totalRecords']?.currentValue && this.resetPage) {
@@ -3781,6 +4047,109 @@ class CommonTreeTableComponent {
3781
4047
  ngDoCheck() {
3782
4048
  this.rebuildRows();
3783
4049
  }
4050
+ getColConfigCategory(colDefs) {
4051
+ const categorized = {};
4052
+ const noCategory = [];
4053
+ colDefs.forEach((col) => {
4054
+ if (col.category) {
4055
+ // create array if not exists
4056
+ if (!categorized[col.category]) {
4057
+ categorized[col.category] = [];
4058
+ }
4059
+ categorized[col.category].push(col);
4060
+ }
4061
+ else {
4062
+ noCategory.push(col);
4063
+ }
4064
+ });
4065
+ return {
4066
+ categorized,
4067
+ noCategory,
4068
+ };
4069
+ }
4070
+ onColConfigSearch(event) {
4071
+ const text = event.target.value
4072
+ .toLowerCase()
4073
+ .trim();
4074
+ if (!text) {
4075
+ this.categorizedCols = { ...this.originalCategorizedCols };
4076
+ this.noCategoryCols = this.cloneColDefs(this.originalNoCategoryCols);
4077
+ return;
4078
+ }
4079
+ this.noCategoryCols = this.originalNoCategoryCols.filter((dt) => dt.header.toLowerCase().includes(text));
4080
+ const filteredCategories = {};
4081
+ Object.keys(this.originalCategorizedCols).forEach((category) => {
4082
+ const filteredCols = this.originalCategorizedCols[category].filter((col) => col.header.toLowerCase().includes(text));
4083
+ if (filteredCols.length > 0) {
4084
+ filteredCategories[category] = filteredCols;
4085
+ }
4086
+ });
4087
+ this.categorizedCols = filteredCategories;
4088
+ }
4089
+ showAllDefaultSelection() {
4090
+ this.allActiveDefault = !this.allActiveDefault;
4091
+ this.noCategoryCols.forEach((col) => {
4092
+ if (!col.headerLocked) {
4093
+ col.active = this.allActiveDefault;
4094
+ }
4095
+ });
4096
+ this.rebuildView();
4097
+ this.updateGlobalState();
4098
+ }
4099
+ rebuildView() {
4100
+ const result = this.getColConfigCategory(this.columns);
4101
+ this.categorizedCols = result.categorized;
4102
+ this.noCategoryCols = result.noCategory;
4103
+ }
4104
+ showAllCategorySelection(category) {
4105
+ const newState = !this.allActiveColMap[category];
4106
+ this.columns.forEach((col) => {
4107
+ if (col.category === category && !col.headerLocked) {
4108
+ col.active = newState;
4109
+ }
4110
+ });
4111
+ this.allActiveColMap[category] = newState;
4112
+ this.rebuildView();
4113
+ this.updateGlobalState();
4114
+ }
4115
+ toggleSelectedCol(col) {
4116
+ if (col.headerLocked)
4117
+ return;
4118
+ col = this.columns.find((c) => c.colId === col.colId);
4119
+ if (!col)
4120
+ return;
4121
+ col.active = !col.active;
4122
+ if (col.category) {
4123
+ const category = col.category;
4124
+ this.allActiveColMap[category] = this.categorizedCols[category].every((c) => c.active || c.headerLocked);
4125
+ }
4126
+ else {
4127
+ this.allActiveDefault = this.noCategoryCols.every((c) => c.active || c.headerLocked);
4128
+ }
4129
+ this.rebuildView();
4130
+ this.updateGlobalState();
4131
+ }
4132
+ updateGlobalState() {
4133
+ const allCols = [
4134
+ ...this.noCategoryCols,
4135
+ ...Object.values(this.categorizedCols).flat(),
4136
+ ];
4137
+ this.activeAll = allCols.every((dt) => dt.active);
4138
+ this.atLeastOneColumnChecked = allCols.some((dt) => dt.active);
4139
+ this.getActiveCols();
4140
+ }
4141
+ getActiveCols() {
4142
+ const activeCols = this.columns
4143
+ .filter((col) => col.active)
4144
+ .map((c) => {
4145
+ if (c.fieldName.includes('.')) {
4146
+ const x = c.fieldName.split('.')[0];
4147
+ return x;
4148
+ }
4149
+ return c.fieldName;
4150
+ });
4151
+ this.onColConfigChange.emit(activeCols);
4152
+ }
3784
4153
  get treeColumn() {
3785
4154
  const preferredField = this.treeColumnField ?? this.resolvedTreeColumnField;
3786
4155
  if (preferredField) {
@@ -3942,206 +4311,97 @@ class CommonTreeTableComponent {
3942
4311
  };
3943
4312
  visit(this.data || []);
3944
4313
  }
3945
- /**
3946
- * Apply all active filters
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
- // }
3973
- applyAllFilters() {
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;
4314
+ applyAllFilters(col) {
4315
+ // Collect active filter columns
4316
+ const activeCols = this.columns.filter((c) => c.filterable &&
4317
+ c.filterType === 'text' &&
4318
+ c.filters?.some((f) => f.filterValue?.trim()));
4319
+ if (activeCols.length === 0) {
4320
+ this.filteredData = structuredClone(this.originalRowData);
4321
+ this.data = this.filteredData;
4322
+ this.activeFilters.clear();
4323
+ this.expandedKeys = new Set(this.originalExpandedKeys);
3982
4324
  this.rebuildRows();
3983
4325
  return;
3984
4326
  }
3985
- let cloned = structuredClone(this.originalRowData);
3986
- this.activeFilters.clear();
3987
- this.columns.forEach((col) => {
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();
4011
- }
4012
- }
4013
- });
4327
+ let filtered = structuredClone(this.originalRowData);
4328
+ if (col && col.filters?.every((c) => !c.filterValue)) {
4329
+ this.activeFilters.delete(col.fieldName);
4330
+ }
4331
+ for (const col of activeCols) {
4332
+ this.activeFilters.add(col.fieldName);
4333
+ filtered = this.filterTreeByColumn(filtered, col);
4334
+ }
4335
+ this.expandedKeys.clear();
4336
+ this.expandAllParentsAfterFilter(filtered);
4337
+ this.filteredData = filtered;
4338
+ this.data = filtered;
4339
+ this.rebuildRows();
4014
4340
  }
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);
4024
- }
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({
4341
+ filterTreeByColumn(nodes, col) {
4342
+ const result = [];
4343
+ for (const node of nodes) {
4344
+ const children = node.array || [];
4345
+ const matches = this.matchesSingleColumn(node, col);
4346
+ if (matches) {
4347
+ // Node matches → keep node + all children
4348
+ result.push({
4053
4349
  ...node,
4054
- array: node.array ? structuredClone(node.array) : [],
4350
+ array: structuredClone(children),
4055
4351
  });
4056
- return;
4352
+ continue;
4057
4353
  }
4058
- // Case 2: Parent does NOT match → filter children
4059
4354
  let filteredChildren = [];
4060
- if (node.array && node.array.length > 0) {
4061
- filteredChildren = this.filterTree(node.array);
4355
+ if (children.length > 0) {
4356
+ filteredChildren = this.filterTreeByColumn(children, col);
4062
4357
  }
4063
- // If children match → keep parent with filtered children
4064
4358
  if (filteredChildren.length > 0) {
4065
- filtered.push({
4359
+ result.push({
4066
4360
  ...node,
4067
4361
  array: filteredChildren,
4068
4362
  });
4069
4363
  }
4070
- // Otherwise → remove this node entirely
4071
- });
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
4364
  }
4108
4365
  return result;
4109
4366
  }
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
- // }
4367
+ matchesSingleColumn(row, col) {
4368
+ const f1 = col.filters[0];
4369
+ const f2 = col.filters[1];
4370
+ const fieldValue = String(this.getValue(row, col.fieldName)).toLowerCase();
4371
+ const fv1 = f1?.filterValue?.toLowerCase() || '';
4372
+ const fv2 = f2?.filterValue?.toLowerCase() || '';
4373
+ const op1 = f1?.filterOperation || '';
4374
+ const op2 = f2?.filterOperation || '';
4375
+ const logic = col.filterLogic || 'AND';
4376
+ const hasF1 = fv1 !== '';
4377
+ const hasF2 = fv2 !== '';
4378
+ if (!hasF1 && !hasF2)
4379
+ return true; // No filter → always match
4380
+ const m1 = hasF1
4381
+ ? this.evaluateTextFilterCondition(op1, fieldValue, fv1)
4382
+ : false;
4383
+ const m2 = hasF2
4384
+ ? this.evaluateTextFilterCondition(op2, fieldValue, fv2)
4385
+ : false;
4386
+ if (hasF1 && !hasF2)
4387
+ return m1;
4388
+ if (!hasF1 && hasF2)
4389
+ return m2;
4390
+ return logic === 'AND' ? m1 && m2 : m1 || m2;
4391
+ }
4392
+ expandAllParentsAfterFilter(tree) {
4393
+ const walk = (nodes) => {
4394
+ for (const node of nodes) {
4395
+ const children = node.array || node.children;
4396
+ const key = this.getNodeKey(node);
4397
+ if (children && children.length > 0) {
4398
+ this.expandedKeys.add(key);
4399
+ walk(children);
4400
+ }
4401
+ }
4402
+ };
4403
+ walk(tree);
4404
+ }
4145
4405
  /**
4146
4406
  * Evaluate text filter condition
4147
4407
  */
@@ -4692,12 +4952,13 @@ class CommonTreeTableComponent {
4692
4952
  this.expandedKeys.delete(key);
4693
4953
  // Recursively collapse all children
4694
4954
  this.collapseAllChildren(node);
4955
+ this.syncOriginalExpandedKeys();
4695
4956
  this.nodeToggle.emit({ node, level, path, expanded: false });
4696
4957
  this.rebuildRows();
4697
4958
  return;
4698
4959
  }
4699
4960
  this.expandedKeys.add(key);
4700
- this.originalExpandedKeys = new Set(this.expandedKeys);
4961
+ this.syncOriginalExpandedKeys();
4701
4962
  if (this.emitExpandAlways || this.getChildren(node) == null) {
4702
4963
  this.nodeToggle.emit({ node, level, path, expanded: true });
4703
4964
  }
@@ -4719,6 +4980,17 @@ class CommonTreeTableComponent {
4719
4980
  isExpanded(node) {
4720
4981
  return this.expandedKeys.has(this.getNodeKey(node));
4721
4982
  }
4983
+ showExpandAllControl(col) {
4984
+ return (col.fieldName === this.treeColumn.fieldName && this.hasExpandableNodes());
4985
+ }
4986
+ toggleAllNodes() {
4987
+ const shouldExpand = !this.areAllExpandableNodesExpanded();
4988
+ this.setAllNodesExpandedState(shouldExpand);
4989
+ this.rebuildRows();
4990
+ }
4991
+ allNodesExpanded() {
4992
+ return this.areAllExpandableNodesExpanded();
4993
+ }
4722
4994
  onCheckboxChange(node, level, path, checked) {
4723
4995
  const key = this.getNodeKey(node);
4724
4996
  if (checked) {
@@ -4969,6 +5241,107 @@ class CommonTreeTableComponent {
4969
5241
  getChildren(node) {
4970
5242
  return node?.[this.childrenField];
4971
5243
  }
5244
+ applyExpandAllInputState() {
5245
+ this.setAllNodesExpandedState(this.expandAllNodes);
5246
+ }
5247
+ setAllNodesExpandedState(expanded) {
5248
+ if (!expanded) {
5249
+ this.expandedKeys.clear();
5250
+ this.syncOriginalExpandedKeys();
5251
+ return;
5252
+ }
5253
+ const nextExpandedKeys = new Set();
5254
+ const nodesToEmit = [];
5255
+ for (const root of this.data || []) {
5256
+ this.collectExpandableNodeKeys(root, 0, [], nextExpandedKeys, nodesToEmit);
5257
+ }
5258
+ this.expandedKeys = nextExpandedKeys;
5259
+ this.syncOriginalExpandedKeys();
5260
+ for (const item of nodesToEmit) {
5261
+ if (this.emitExpandAlways || this.getChildren(item.node) == null) {
5262
+ this.nodeToggle.emit({
5263
+ node: item.node,
5264
+ level: item.level,
5265
+ path: item.path,
5266
+ expanded: true,
5267
+ });
5268
+ }
5269
+ }
5270
+ }
5271
+ collectExpandableNodeKeys(node, level, parentPath, out, nodesToEmit) {
5272
+ const path = [...parentPath, node];
5273
+ if (this.isExpandable(node, level, path)) {
5274
+ const key = this.getNodeKey(node);
5275
+ if (!this.expandedKeys.has(key)) {
5276
+ nodesToEmit.push({ node, level, path });
5277
+ }
5278
+ out.add(this.getNodeKey(node));
5279
+ }
5280
+ const children = this.getChildren(node);
5281
+ if (!Array.isArray(children) || children.length === 0)
5282
+ return;
5283
+ for (const child of children) {
5284
+ this.collectExpandableNodeKeys(child, level + 1, path, out, nodesToEmit);
5285
+ }
5286
+ }
5287
+ areAllExpandableNodesExpanded() {
5288
+ let hasExpandableNodes = false;
5289
+ let allExpanded = true;
5290
+ const visit = (node, level, parentPath) => {
5291
+ const path = [...parentPath, node];
5292
+ if (this.isExpandable(node, level, path)) {
5293
+ hasExpandableNodes = true;
5294
+ if (!this.expandedKeys.has(this.getNodeKey(node))) {
5295
+ allExpanded = false;
5296
+ }
5297
+ }
5298
+ if (!allExpanded)
5299
+ return;
5300
+ const children = this.getChildren(node);
5301
+ if (!Array.isArray(children) || children.length === 0)
5302
+ return;
5303
+ for (const child of children) {
5304
+ visit(child, level + 1, path);
5305
+ if (!allExpanded)
5306
+ return;
5307
+ }
5308
+ };
5309
+ for (const root of this.data || []) {
5310
+ visit(root, 0, []);
5311
+ if (!allExpanded)
5312
+ break;
5313
+ }
5314
+ return hasExpandableNodes && allExpanded;
5315
+ }
5316
+ hasExpandableNodes() {
5317
+ let found = false;
5318
+ const visit = (node, level, parentPath) => {
5319
+ if (found)
5320
+ return;
5321
+ const path = [...parentPath, node];
5322
+ if (this.isExpandable(node, level, path)) {
5323
+ found = true;
5324
+ return;
5325
+ }
5326
+ const children = this.getChildren(node);
5327
+ if (!Array.isArray(children) || children.length === 0)
5328
+ return;
5329
+ for (const child of children) {
5330
+ visit(child, level + 1, path);
5331
+ if (found)
5332
+ return;
5333
+ }
5334
+ };
5335
+ for (const root of this.data || []) {
5336
+ visit(root, 0, []);
5337
+ if (found)
5338
+ break;
5339
+ }
5340
+ return found;
5341
+ }
5342
+ syncOriginalExpandedKeys() {
5343
+ this.originalExpandedKeys = new Set(this.expandedKeys);
5344
+ }
4972
5345
  rebuildRows() {
4973
5346
  const next = [];
4974
5347
  for (const root of this.data || []) {
@@ -5211,7 +5584,7 @@ class CommonTreeTableComponent {
5211
5584
  this.applyAllFilters();
5212
5585
  }
5213
5586
  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 });
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" }] });
5587
+ 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", expandAllNodes: "expandAllNodes", 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", showSkeleton: "showSkeleton", skeletonRowsLength: "skeletonRowsLength", skeletonColsLength: "skeletonColsLength" }, outputs: { nodeToggle: "nodeToggle", selectionChange: "selectionChange", linkClick: "linkClick", linkDoubleClick: "linkDoubleClick", onHideSettings: "onHideSettings", onPaginationChange: "onPaginationChange", onColConfigChange: "onColConfigChange" }, 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=\"cats-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=\"header-section\">\n <div class=\"column-header\">CONFIGURE Column</div>\n <div class=\"reset-default\" (click)=\"resetDefaultColConfig()\">\n Reset to default\n </div>\n </div>\n\n <div class=\"header-search-wrapper\">\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n placeholder=\"Type to Search\"\n (input)=\"onColConfigSearch($event)\"\n />\n </div>\n </div>\n <div class=\"border-divider\"></div>\n\n <!-- <div class=\"add-more\">\n <div class=\"add-more-text\">Add more</div>\n <img src=\"images/add-more-right-blue.svg\" alt=\"\" />\n </div>\n <div class=\"border-divider\"></div> -->\n <div id=\"table_scroll\" class=\"setting-item-container\">\n <div class=\"setting-item-wrapper\">\n @if (noCategoryCols.length > 0) {\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllDefaultSelection()\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveDefault) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>Default</span>\n </div>\n }\n @for (col of noCategoryCols; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n\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.header | titlecase }}</span>\n </div>\n }\n </div>\n @for (category of objectKeys(categorizedCols); track category) {\n <div class=\"setting-item-wrapper\">\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllCategorySelection(category)\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveColMap[category]) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>{{ category | titlecase }}</span>\n </div>\n <!-- Category Title -->\n\n <!-- <div class=\"setting-column-item item-title\">\n <span>{{ category | titlecase }}</span>\n </div> -->\n\n <!-- Columns inside category -->\n @for (col of categorizedCols[category]; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img class=\"eye-icon\" src=\"images/eye-custom-header.svg\" />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n />\n }\n\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\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 @if (columns.length === 0 && showSkeleton) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <th>\n <div class=\"th-wraper\">\n <div class=\"line\"></div>\n </div>\n </th>\n }\n </tr>\n } @else {\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=\"cats-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\n src=\"images/t-arrow-up.svg\"\n alt=\"Ascending\"\n />\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 @if (showExpandAllControl(col)) {\n <button\n class=\"header-tree-toggle\"\n type=\"button\"\n [attr.aria-label]=\"\n allNodesExpanded()\n ? 'Collapse all nodes'\n : 'Expand all nodes'\n \"\n (click)=\"toggleAllNodes(); $event.stopPropagation()\"\n >\n <img\n [src]=\"\n resolveIconSrc(\n allNodesExpanded() ? collapseIcon : expandIcon\n )\n \"\n alt=\"\"\n />\n </button>\n }\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 =\n $event;\n applyAllFilters(col)\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![0].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-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(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\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(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\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(col)\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters(col)\"\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(col)\"\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 =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters(col)\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![0].filterValue\n \"\n (input)=\"applyAllFilters(col)\"\n />\n </div>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-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(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\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(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\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(col)\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(col)\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters(col)\"\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 =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters(col)\"\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 cats-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(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\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(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\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(col)\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\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=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"\n toggleSelectAll(col, $event)\n \"\n />\n Select All\n </label>\n <div\n class=\"set-options\"\n id=\"table_scroll\"\n >\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label\n class=\"cats-checkbox_container\"\n >\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues!.has(opt)\n \"\n (change)=\"\n toggleSetOption(\n col,\n opt,\n $event\n )\n \"\n />\n <span class=\"textTruncate\">\n {{ opt }}</span\n >\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter-btn\">\n <button\n class=\"filter-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=\"header-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\" ||\n !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\" ||\n !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 }\n </thead>\n\n <tbody>\n @if (showSkeleton) {\n @for (r of skeletonRows; track $index) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <td>\n <div class=\"line\"></div>\n </td>\n }\n </tr>\n }\n } @else {\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=\"cats-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=\"cats-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\n class=\"label\"\n [for]=\"'row_' + row.trackKey\"\n ></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)=\"\n toggle(row.node, row.level, row.path)\n \"\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 (\n showLinkFor(row) && linkUrlFor(row);\n as url\n ) {\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]=\"\n getValue(row.node, col.fieldName)\n \"\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 }\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{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#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(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 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,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / 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) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #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,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-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(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-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(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-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}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-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))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-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(--border-core-default);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(--surface-background-canvas);color:var(--text-heading-primary);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);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(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);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(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.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(--surface-background-subtle);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(--surface-background-canvas);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(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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}.cats-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}.cats-tableArea .table_wrapper{position:relative;overflow:auto;flex:1;min-height:calc(16.6666666667rem / var(--scale));background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper.global{margin:0}.cats-tableArea .table_wrapper .table-inner-wrapper{position:relative;width:100%;min-height:100%}.cats-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(--surface-background-canvas)}.cats-tableArea .table_wrapper .table-inner-wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .table_wrapper .table-inner-wrapper table .sticky-top{top:0;position:sticky;z-index:20}.cats-tableArea .table_wrapper .table-inner-wrapper table td,.cats-tableArea .table_wrapper .table-inner-wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--text-heading-secondary);text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-right:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .table_wrapper .table-inner-wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper .table-inner-wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default);overflow:visible}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody{background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:background-color .12s ease-in-out}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover,.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover td{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr.disabled{opacity:.6;pointer-events:none}.cats-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))}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr td:hover{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper.tbody_height{height:calc(100% - 42px)}.cats-tableArea .table_wrapper.no-horizontal-scroll{overflow-x:hidden}.cats-tableArea.is-resizing .table_wrapper table th,.cats-tableArea.is-resizing .table_wrapper table td{will-change:width;transition:width 80ms linear,min-width 80ms linear,max-width 80ms linear}.cats-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}.cats-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}.cats-tableArea .th-wraper .text-wrapper.sortable{-webkit-user-select:none;user-select:none}.cats-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))}.cats-tableArea .th-wraper .text-wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));cursor:grab;opacity:.6;transition:opacity .2s ease}.cats-tableArea .th-wraper .text-wrapper .move-icon:hover{opacity:1}.cats-tableArea .th-wraper .text-wrapper .ellipsis{flex:1;min-width:0}.cats-tableArea .th-wraper .text-wrapper .headerName{text-transform:uppercase;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--text-heading-secondary)}.cats-tableArea .th-wraper .text-wrapper .sorting_icon{display:inline-flex;align-items:center;margin-left:calc(.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .text-wrapper .sorting_icon img{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .header-tree-toggle{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}.cats-tableArea .th-wraper .header-tree-toggle:hover{background:var(--border-core-default)}.cats-tableArea .th-wraper .header-tree-toggle img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-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))}.cats-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}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters{position:relative;display:inline-block;cursor:pointer}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters:hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(-4rem / var(--scale));min-width:calc(18.8333333333rem / var(--scale));max-width:calc(33.3333333333rem / var(--scale));background:var(--surface-background-default);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))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper lib-common-input{width:100%}.cats-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))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details{width:100%}.cats-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));padding-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(11.5rem / var(--scale));overflow-y:auto;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn{display:flex;flex-direction:row;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn .filter-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(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn .filter-reset-btn:hover{background:var(--surface-action-default);border-color:var(--border-interaction-focus);color:var(--text-heading-inverse)}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filt-wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.cats-tableArea .th-wraper .filter-three-dot-wrapper .three-dots :hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .resize-handle{color:var(--border-core-default);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.cats-tableArea .th-wraper .filter-three-dot-wrapper .default_cursor{cursor:default}.cats-tableArea .tree_cell{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale))}.cats-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}.cats-tableArea .tree_cell .toggle_btn:hover{background:var(--border-core-default)}.cats-tableArea .tree_cell .toggle_btn img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .tree_cell .toggle_spacer{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));display:inline-block;flex-shrink:0}.cats-tableArea .tree_cell .node_icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));flex-shrink:0}.cats-tableArea .tree_cell .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .tree_cell .node_link{color:var(--text-link-default);text-decoration:none;cursor:pointer;transition:color .2s ease}.cats-tableArea .tree_cell .node_link:hover{color:var(--text-link-hover);text-decoration:underline}.cats-tableArea .tree_cell input[type=checkbox]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .col_wrapper{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale))}.cats-tableArea .cats-checkbox_container{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .cats-checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .cats-checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.cats-tableArea .cats-radio-option{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .cats-radio-option input[type=radio]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .cats-radio-option label{cursor:pointer}.cats-tableArea .meta_row td{background-color:var(--surface-background-default);padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale))}.cats-tableArea .meta_cell{color:var(--text-body-secondary);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}.cats-tableArea .empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6}.cats-tableArea .empty_overlay .empty_content{text-align:center;color:var(--text-body-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.cats-tableArea .setting-options{position:absolute;background:var(--surface-background-canvas);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);width:calc(30.9166666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0}.cats-tableArea .setting-options .header-section{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:0 calc(1.3333333333rem / var(--scale))}.cats-tableArea .setting-options .header-section .column-header{text-transform:uppercase;color:var(--text-body-secondary)}.cats-tableArea .setting-options .header-section .reset-default{color:var(--text-link-default);min-width:calc(9.1666666667rem / var(--scale));cursor:pointer;text-align:right}.cats-tableArea .setting-options .header-search-wrapper{padding:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .add-more{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-blue);margin:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .add-more .add-more-text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default)}.cats-tableArea .setting-options .border-divider{height:calc(.0833333333rem / var(--scale));margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:var(--border-core-default)}.cats-tableArea .setting-options .setting-item-container{max-height:calc(25rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper{width:100%}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper:not(:last-child){border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-bottom:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item{color:var(--text-heading-primary);padding:calc(.5rem / var(--scale)) 0;cursor:pointer;width:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item .eye-icon{width:calc(1.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:100%}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.item-title{color:var(--text-body-secondary)}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable{color:var(--text-body-muted)}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable .eye-icon{opacity:.2}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.eye-off{color:var(--text-body-primary)}.cats-tableArea .header-dropdown-wrapper{background-color:var(--surface-background-canvas);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:1000;position:relative;width:calc(26.6666666667rem / var(--scale));right:calc(.8333333333rem / var(--scale));top:calc(3.9166666667rem / var(--scale))}.cats-tableArea .header-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(--border-core-strong)}.cats-tableArea .header-dropdown-wrapper .right-click-dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.cats-tableArea .header-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}.cats-tableArea .header-dropdown-wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.cats-tableArea .header-dropdown-wrapper .right_click_item:hover,.cats-tableArea .header-dropdown-wrapper .right_click_item.active{background-color:var(--surface-background-blue)}.cats-tableArea .header-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))}.cats-tableArea .header-dropdown-wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-tableArea .header-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(--text-heading-secondary)}.cats-tableArea .header-dropdown-wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.cats-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(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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)}.cats-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(--text-heading-secondary);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(--border-core-default);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(--surface-background-canvas);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(--border-core-default);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(--surface-background-blue)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-secondary);cursor:pointer}.pagination-main .pagination-form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--border-core-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-primary);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(--border-core-default);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(--text-body-secondary);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}.line{display:flex;justify-content:center;align-items:center;width:calc(8.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.5833333333rem / var(--scale));background-image:linear-gradient(90deg,#f4f4f4,#e5e5e5cc,#f4f4f4 80px);background-size:600px;animation:shine-lines 2s infinite ease-out}@keyframes shine-lines{0%{background-position:calc(-8.3333333333rem / var(--scale))}40%,to{background-position:calc(11.6666666667rem / var(--scale))}}\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" }] });
5215
5588
  }
5216
5589
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonTreeTableComponent, decorators: [{
5217
5590
  type: Component,
@@ -5224,7 +5597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5224
5597
  TooltipDirective,
5225
5598
  CommonInputComponent,
5226
5599
  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"] }]
5600
+ ], template: "<div class=\"cats-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=\"header-section\">\n <div class=\"column-header\">CONFIGURE Column</div>\n <div class=\"reset-default\" (click)=\"resetDefaultColConfig()\">\n Reset to default\n </div>\n </div>\n\n <div class=\"header-search-wrapper\">\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n placeholder=\"Type to Search\"\n (input)=\"onColConfigSearch($event)\"\n />\n </div>\n </div>\n <div class=\"border-divider\"></div>\n\n <!-- <div class=\"add-more\">\n <div class=\"add-more-text\">Add more</div>\n <img src=\"images/add-more-right-blue.svg\" alt=\"\" />\n </div>\n <div class=\"border-divider\"></div> -->\n <div id=\"table_scroll\" class=\"setting-item-container\">\n <div class=\"setting-item-wrapper\">\n @if (noCategoryCols.length > 0) {\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllDefaultSelection()\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveDefault) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>Default</span>\n </div>\n }\n @for (col of noCategoryCols; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n\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.header | titlecase }}</span>\n </div>\n }\n </div>\n @for (category of objectKeys(categorizedCols); track category) {\n <div class=\"setting-item-wrapper\">\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllCategorySelection(category)\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveColMap[category]) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>{{ category | titlecase }}</span>\n </div>\n <!-- Category Title -->\n\n <!-- <div class=\"setting-column-item item-title\">\n <span>{{ category | titlecase }}</span>\n </div> -->\n\n <!-- Columns inside category -->\n @for (col of categorizedCols[category]; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img class=\"eye-icon\" src=\"images/eye-custom-header.svg\" />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n />\n }\n\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\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 @if (columns.length === 0 && showSkeleton) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <th>\n <div class=\"th-wraper\">\n <div class=\"line\"></div>\n </div>\n </th>\n }\n </tr>\n } @else {\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=\"cats-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\n src=\"images/t-arrow-up.svg\"\n alt=\"Ascending\"\n />\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 @if (showExpandAllControl(col)) {\n <button\n class=\"header-tree-toggle\"\n type=\"button\"\n [attr.aria-label]=\"\n allNodesExpanded()\n ? 'Collapse all nodes'\n : 'Expand all nodes'\n \"\n (click)=\"toggleAllNodes(); $event.stopPropagation()\"\n >\n <img\n [src]=\"\n resolveIconSrc(\n allNodesExpanded() ? collapseIcon : expandIcon\n )\n \"\n alt=\"\"\n />\n </button>\n }\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 =\n $event;\n applyAllFilters(col)\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![0].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-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(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\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(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\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(col)\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters(col)\"\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(col)\"\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 =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters(col)\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![0].filterValue\n \"\n (input)=\"applyAllFilters(col)\"\n />\n </div>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-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(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\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(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\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(col)\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(col)\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters(col)\"\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 =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters(col)\"\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 cats-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(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\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(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\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(col)\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\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=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"\n toggleSelectAll(col, $event)\n \"\n />\n Select All\n </label>\n <div\n class=\"set-options\"\n id=\"table_scroll\"\n >\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label\n class=\"cats-checkbox_container\"\n >\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues!.has(opt)\n \"\n (change)=\"\n toggleSetOption(\n col,\n opt,\n $event\n )\n \"\n />\n <span class=\"textTruncate\">\n {{ opt }}</span\n >\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter-btn\">\n <button\n class=\"filter-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=\"header-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\" ||\n !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\" ||\n !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 }\n </thead>\n\n <tbody>\n @if (showSkeleton) {\n @for (r of skeletonRows; track $index) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <td>\n <div class=\"line\"></div>\n </td>\n }\n </tr>\n }\n } @else {\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=\"cats-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=\"cats-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\n class=\"label\"\n [for]=\"'row_' + row.trackKey\"\n ></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)=\"\n toggle(row.node, row.level, row.path)\n \"\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 (\n showLinkFor(row) && linkUrlFor(row);\n as url\n ) {\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]=\"\n getValue(row.node, col.fieldName)\n \"\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 }\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{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#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(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 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,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / 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) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #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,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-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(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-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(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-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}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-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))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-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(--border-core-default);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(--surface-background-canvas);color:var(--text-heading-primary);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);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(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);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(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.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(--surface-background-subtle);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(--surface-background-canvas);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(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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}.cats-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}.cats-tableArea .table_wrapper{position:relative;overflow:auto;flex:1;min-height:calc(16.6666666667rem / var(--scale));background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper.global{margin:0}.cats-tableArea .table_wrapper .table-inner-wrapper{position:relative;width:100%;min-height:100%}.cats-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(--surface-background-canvas)}.cats-tableArea .table_wrapper .table-inner-wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .table_wrapper .table-inner-wrapper table .sticky-top{top:0;position:sticky;z-index:20}.cats-tableArea .table_wrapper .table-inner-wrapper table td,.cats-tableArea .table_wrapper .table-inner-wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--text-heading-secondary);text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-right:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .table_wrapper .table-inner-wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper .table-inner-wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default);overflow:visible}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody{background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:background-color .12s ease-in-out}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover,.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover td{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr.disabled{opacity:.6;pointer-events:none}.cats-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))}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr td:hover{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper.tbody_height{height:calc(100% - 42px)}.cats-tableArea .table_wrapper.no-horizontal-scroll{overflow-x:hidden}.cats-tableArea.is-resizing .table_wrapper table th,.cats-tableArea.is-resizing .table_wrapper table td{will-change:width;transition:width 80ms linear,min-width 80ms linear,max-width 80ms linear}.cats-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}.cats-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}.cats-tableArea .th-wraper .text-wrapper.sortable{-webkit-user-select:none;user-select:none}.cats-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))}.cats-tableArea .th-wraper .text-wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));cursor:grab;opacity:.6;transition:opacity .2s ease}.cats-tableArea .th-wraper .text-wrapper .move-icon:hover{opacity:1}.cats-tableArea .th-wraper .text-wrapper .ellipsis{flex:1;min-width:0}.cats-tableArea .th-wraper .text-wrapper .headerName{text-transform:uppercase;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--text-heading-secondary)}.cats-tableArea .th-wraper .text-wrapper .sorting_icon{display:inline-flex;align-items:center;margin-left:calc(.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .text-wrapper .sorting_icon img{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .header-tree-toggle{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}.cats-tableArea .th-wraper .header-tree-toggle:hover{background:var(--border-core-default)}.cats-tableArea .th-wraper .header-tree-toggle img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-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))}.cats-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}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters{position:relative;display:inline-block;cursor:pointer}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters:hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(-4rem / var(--scale));min-width:calc(18.8333333333rem / var(--scale));max-width:calc(33.3333333333rem / var(--scale));background:var(--surface-background-default);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))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper lib-common-input{width:100%}.cats-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))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details{width:100%}.cats-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));padding-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(11.5rem / var(--scale));overflow-y:auto;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn{display:flex;flex-direction:row;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn .filter-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(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn .filter-reset-btn:hover{background:var(--surface-action-default);border-color:var(--border-interaction-focus);color:var(--text-heading-inverse)}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filt-wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.cats-tableArea .th-wraper .filter-three-dot-wrapper .three-dots :hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .resize-handle{color:var(--border-core-default);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.cats-tableArea .th-wraper .filter-three-dot-wrapper .default_cursor{cursor:default}.cats-tableArea .tree_cell{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale))}.cats-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}.cats-tableArea .tree_cell .toggle_btn:hover{background:var(--border-core-default)}.cats-tableArea .tree_cell .toggle_btn img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .tree_cell .toggle_spacer{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));display:inline-block;flex-shrink:0}.cats-tableArea .tree_cell .node_icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));flex-shrink:0}.cats-tableArea .tree_cell .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .tree_cell .node_link{color:var(--text-link-default);text-decoration:none;cursor:pointer;transition:color .2s ease}.cats-tableArea .tree_cell .node_link:hover{color:var(--text-link-hover);text-decoration:underline}.cats-tableArea .tree_cell input[type=checkbox]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .col_wrapper{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale))}.cats-tableArea .cats-checkbox_container{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .cats-checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .cats-checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.cats-tableArea .cats-radio-option{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .cats-radio-option input[type=radio]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .cats-radio-option label{cursor:pointer}.cats-tableArea .meta_row td{background-color:var(--surface-background-default);padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale))}.cats-tableArea .meta_cell{color:var(--text-body-secondary);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}.cats-tableArea .empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6}.cats-tableArea .empty_overlay .empty_content{text-align:center;color:var(--text-body-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.cats-tableArea .setting-options{position:absolute;background:var(--surface-background-canvas);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);width:calc(30.9166666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0}.cats-tableArea .setting-options .header-section{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:0 calc(1.3333333333rem / var(--scale))}.cats-tableArea .setting-options .header-section .column-header{text-transform:uppercase;color:var(--text-body-secondary)}.cats-tableArea .setting-options .header-section .reset-default{color:var(--text-link-default);min-width:calc(9.1666666667rem / var(--scale));cursor:pointer;text-align:right}.cats-tableArea .setting-options .header-search-wrapper{padding:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .add-more{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-blue);margin:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .add-more .add-more-text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default)}.cats-tableArea .setting-options .border-divider{height:calc(.0833333333rem / var(--scale));margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:var(--border-core-default)}.cats-tableArea .setting-options .setting-item-container{max-height:calc(25rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper{width:100%}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper:not(:last-child){border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-bottom:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item{color:var(--text-heading-primary);padding:calc(.5rem / var(--scale)) 0;cursor:pointer;width:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item .eye-icon{width:calc(1.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:100%}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.item-title{color:var(--text-body-secondary)}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable{color:var(--text-body-muted)}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable .eye-icon{opacity:.2}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.eye-off{color:var(--text-body-primary)}.cats-tableArea .header-dropdown-wrapper{background-color:var(--surface-background-canvas);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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:1000;position:relative;width:calc(26.6666666667rem / var(--scale));right:calc(.8333333333rem / var(--scale));top:calc(3.9166666667rem / var(--scale))}.cats-tableArea .header-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(--border-core-strong)}.cats-tableArea .header-dropdown-wrapper .right-click-dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.cats-tableArea .header-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}.cats-tableArea .header-dropdown-wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.cats-tableArea .header-dropdown-wrapper .right_click_item:hover,.cats-tableArea .header-dropdown-wrapper .right_click_item.active{background-color:var(--surface-background-blue)}.cats-tableArea .header-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))}.cats-tableArea .header-dropdown-wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-tableArea .header-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(--text-heading-secondary)}.cats-tableArea .header-dropdown-wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.cats-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(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);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)}.cats-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(--text-heading-secondary);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(--border-core-default);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(--surface-background-canvas);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(--border-core-default);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(--surface-background-blue)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-secondary);cursor:pointer}.pagination-main .pagination-form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--border-core-default)}.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(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-primary);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(--border-core-default);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(--text-body-secondary);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}.line{display:flex;justify-content:center;align-items:center;width:calc(8.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.5833333333rem / var(--scale));background-image:linear-gradient(90deg,#f4f4f4,#e5e5e5cc,#f4f4f4 80px);background-size:600px;animation:shine-lines 2s infinite ease-out}@keyframes shine-lines{0%{background-position:calc(-8.3333333333rem / var(--scale))}40%,to{background-position:calc(11.6666666667rem / var(--scale))}}\n"] }]
5228
5601
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { tableAreaRef: [{
5229
5602
  type: ViewChild,
5230
5603
  args: ['table', { static: true }]
@@ -5263,6 +5636,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5263
5636
  type: Input
5264
5637
  }], loadingText: [{
5265
5638
  type: Input
5639
+ }], expandAllNodes: [{
5640
+ type: Input
5266
5641
  }], emitExpandAlways: [{
5267
5642
  type: Input
5268
5643
  }], sortingRequired: [{
@@ -5295,6 +5670,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5295
5670
  type: Input
5296
5671
  }], linkResolver: [{
5297
5672
  type: Input
5673
+ }], showSkeleton: [{
5674
+ type: Input
5298
5675
  }], nodeToggle: [{
5299
5676
  type: Output
5300
5677
  }], selectionChange: [{
@@ -5307,6 +5684,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5307
5684
  type: Output
5308
5685
  }], onPaginationChange: [{
5309
5686
  type: Output
5687
+ }], onColConfigChange: [{
5688
+ type: Output
5689
+ }], skeletonRowsLength: [{
5690
+ type: Input
5691
+ }], skeletonColsLength: [{
5692
+ type: Input
5310
5693
  }] } });
5311
5694
 
5312
5695
  /*