cats-data-grid 2.0.63 → 2.0.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/cats-data-grid.mjs +468 -32
  2. package/fesm2022/cats-data-grid.mjs.map +1 -1
  3. package/index.d.ts +90 -7
  4. package/package.json +1 -1
  5. package/styles/component/_form.scss +4 -0
package/fesm2022/cats-data-grid.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, Pipe, EventEmitter, Output, Directive, Input, HostListener, Component, ViewChild, signal } from '@angular/core';
2
+ import { Injectable, Pipe, EventEmitter, Output, Directive, Input, HostListener, Component, ViewChild, signal, ViewEncapsulation, createComponent } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule, DatePipe } from '@angular/common';
5
5
  import * as i2 from '@angular/forms';
@@ -865,7 +865,7 @@ class CommonCalendarComponent {
865
865
  multi: true,
866
866
  },
867
867
  DatePipe,
868
- ], usesOnChanges: true, ngImport: i0, template: "<!-- Calendar -->\n\n<div\n class=\"calendar_wrapper\"\n appOutsideClick\n (clickOutSide)=\"closeCalendar()\"\n [ngClass]=\"{ 'pe-none': disableControl }\"\n>\n <div class=\"date_box\" (click)=\"toggleCalendar()\" #trigger>\n @if (dateConfig.selectionMode == \"single\") {\n <input\n type=\"text\"\n placeholder=\"Select Date\"\n [value]=\"selectedDateTime\"\n readonly\n [disabled]=\"disableControl\"\n />\n } @else {\n <input\n type=\"text\"\n placeholder=\"Select date Range\"\n [value]=\"\n selectedDateTime.start\n | date\n : 'MM/dd/yyyy' +\n ' - ' +\n (selectedDateTime.end | date: 'MM/dd/yyyy')\n \"\n readonly\n />\n }\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\n <img src=\"images/calendar.svg\" alt=\"\" />\n </div>\n @if (isOpen) {\n <div\n class=\"calendar-popup\"\n adaptivePosition\n [trigger]=\"trigger\"\n [matchWidth]=\"false\"\n appOutsideClick\n (clickOutside)=\"hideCalender()\"\n >\n <div class=\"calendar_container\">\n <!-- for the header -->\n <div class=\"calendar-header\">\n <div class=\"month-year\">\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\n {{ getMonthYear().month }},</span\n >\n <div class=\"year\" (click)=\"calendarView = 'yearView'\">\n <span>\n {{ getMonthYear().year }}\n </span>\n <img src=\"images/chevron-down.svg\" class=\"year_arrow\" alt=\"\" />\n </div>\n </div>\n\n <div class=\"arrow_container\">\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\n <img src=\"images/arrow-up.svg\" alt=\"\" />\n </span>\n\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\n <img src=\"images/arrow-down.svg\" alt=\"\" />\n </span>\n </div>\n </div>\n @if (calendarView === \"monthView\") {\n <div class=\"month-grid\">\n @for (month of monthRange | keyvalue; track $index) {\n <span\n class=\"month\"\n (click)=\"selectMonth(month.key)\"\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\n >{{ month.value }}</span\n >\n }\n </div>\n } @else if (calendarView === \"yearView\") {\n <div class=\"year-selector\">\n <span\n class=\"navigation-button pointer\"\n (click)=\"previousYearRange()\"\n >\n <img src=\"images/chevron-left.svg\" alt=\"\" />\n </span>\n <div class=\"year-grid\">\n @for (year of yearRange; track $index) {\n <span\n class=\"year\"\n (click)=\"selectYear(year)\"\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\n >{{ year }}</span\n >\n }\n </div>\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </span>\n </div>\n } @else {\n <div class=\"calendar_body\">\n <div class=\"calendar-grid\">\n <!-- Day names -->\n @for (\n day of [\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"];\n track $index\n ) {\n <div class=\"days_name\">\n {{ day }}\n </div>\n }\n\n <!-- Calendar dates -->\n @for (dayObj of daysInMonth; track $index) {\n <div\n class=\"calendar-day\"\n [ngClass]=\"{\n active:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'single' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ),\n\n active_start:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'range' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ) &&\n dayObj.day === rangeStart,\n\n active_end:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'range' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ) &&\n dayObj.day === rangeEnd,\n\n range_between_active:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'range' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ) &&\n rangeStart != null &&\n rangeEnd != null &&\n dayObj.day > rangeStart &&\n dayObj.day < rangeEnd,\n\n other_month: !dayObj.isCurrentMonth,\n disabled: isDayDisabled(dayObj.day),\n notInCurrentMonth: !dayObj.isCurrentMonth,\n }\"\n (click)=\"\n dayObj.isCurrentMonth &&\n !isDayDisabled(dayObj.day) &&\n selectDate(dayObj.day)\n \"\n >\n {{ dayObj.day }}\n </div>\n }\n </div>\n <div class=\"bottom_btn\">\n <div class=\"btn\">Clear</div>\n <div class=\"btn\">Today</div>\n </div>\n </div>\n }\n </div>\n <!-- TIME SLOTS (only if showTime = true) -->\n @if (dateConfig.enableTime) {\n <div class=\"times\">\n <div class=\"time-picker\">\n <div class=\"time-column\">\n @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n (click)=\"selectTime(timeSlot.label)\"\n >\n {{ timeSlot.label }}\n </span>\n }\n </div>\n\n <div class=\"time-column\">\n @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n >\n {{ timeSlot.label }}\n </span>\n }\n </div>\n\n <div class=\"time-column\">\n @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n >\n {{ timeSlot.label }}\n </span>\n }\n </div>\n\n <!-- center selection indicator -->\n <div class=\"center-highlight\"></div>\n </div>\n\n <!-- @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n (click)=\"selectTime(timeSlot.label)\"\n >\n {{ timeSlot.label }}\n </span>\n } -->\n </div>\n }\n </div>\n }\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;height:calc(3.3333333333rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-family:inherit}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-500)}.calendar_wrapper .date_box img{max-width:calc(1.3333333333rem / var(--scale));margin-right:calc(1rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{display:flex;position:absolute;top:0;left:100%;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:100%;min-width:calc(27.8333333333rem / var(--scale));min-height:calc(30.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_container{flex:1;margin:calc(.25rem / var(--scale)) 0}.calendar_wrapper .calendar-popup .calendar-header{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button{cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding-right:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year img,.calendar_wrapper .calendar-popup .calendar-header .month-year .month img{max-width:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(27.0833333333rem / var(--scale));color:var(--neutral-600)}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale));transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600)}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .year:hover{background-color:var(--blue-100);color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:column;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:\"\"}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(27.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;width:calc(3.975rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{cursor:default;color:var(--neutral-400)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth:hover{background-color:transparent}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn .btn{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--blue-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.calendar_wrapper .calendar-popup .time-picker{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:360px;overflow:hidden;background:#fff}.calendar_wrapper .calendar-popup .time-column{display:flex;flex-direction:column;align-items:center;overflow-y:auto;scroll-snap-type:y mandatory}.calendar_wrapper .calendar-popup .time-column::-webkit-scrollbar{width:0}.calendar_wrapper .calendar-popup .span_time.active{background:#2f80ed;color:#fff;border-radius:4px;width:70%}.calendar_wrapper .calendar-popup .center-highlight{position:absolute;top:50%;left:0;width:100%;height:40px;transform:translateY(-50%);border-top:1px solid red;border-bottom:1px solid red;pointer-events:none}.calendar_wrapper .calendar-popup .times{min-width:calc(14.6666666667rem / var(--scale));max-height:calc(30.3333333333rem / var(--scale));overflow-y:auto;overflow-x:hidden;border-left:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));box-shadow:-3px 0 8px 2px #0a0d121f;border-top-right-radius:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .times .span_time{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);display:inline-block;width:calc(4rem / var(--scale)) calc(3.3333333333rem / var(--scale));height:100%;max-width:calc(4rem / var(--scale));text-align:center;cursor:pointer;scroll-snap-align:center}.calendar_wrapper .calendar-popup .times .span_time:hover,.calendar_wrapper .calendar-popup .times .span_time.active{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
868
+ ], usesOnChanges: true, ngImport: i0, template: "<!-- Calendar -->\n\n<div\n class=\"calendar_wrapper\"\n appOutsideClick\n (clickOutSide)=\"closeCalendar()\"\n [ngClass]=\"{ 'pe-none': disableControl }\"\n>\n <div class=\"date_box\" (click)=\"toggleCalendar()\" #trigger>\n @if (dateConfig.selectionMode == \"single\") {\n <input\n type=\"text\"\n placeholder=\"Select Date\"\n [value]=\"selectedDateTime\"\n readonly\n [disabled]=\"disableControl\"\n />\n } @else {\n <input\n type=\"text\"\n placeholder=\"Select date Range\"\n [value]=\"\n selectedDateTime.start\n | date\n : 'MM/dd/yyyy' +\n ' - ' +\n (selectedDateTime.end | date: 'MM/dd/yyyy')\n \"\n readonly\n />\n }\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\n <img src=\"images/calendar.svg\" alt=\"\" />\n </div>\n @if (isOpen) {\n <div\n class=\"calendar-popup\"\n adaptivePosition\n [trigger]=\"trigger\"\n [matchWidth]=\"false\"\n appOutsideClick\n (clickOutside)=\"hideCalender()\"\n >\n <div class=\"calendar_container\">\n <!-- for the header -->\n <div class=\"calendar-header\">\n <div class=\"month-year\">\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\n {{ getMonthYear().month }},</span\n >\n <div class=\"year\" (click)=\"calendarView = 'yearView'\">\n <span>\n {{ getMonthYear().year }}\n </span>\n <img src=\"images/chevron-down.svg\" class=\"year_arrow\" alt=\"\" />\n </div>\n </div>\n\n <div class=\"arrow_container\">\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\n <img src=\"images/arrow-up.svg\" alt=\"\" />\n </span>\n\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\n <img src=\"images/arrow-down.svg\" alt=\"\" />\n </span>\n </div>\n </div>\n @if (calendarView === \"monthView\") {\n <div class=\"month-grid\">\n @for (month of monthRange | keyvalue; track $index) {\n <span\n class=\"month\"\n (click)=\"selectMonth(month.key)\"\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\n >{{ month.value }}</span\n >\n }\n </div>\n } @else if (calendarView === \"yearView\") {\n <div class=\"year-selector\">\n <span\n class=\"navigation-button pointer\"\n (click)=\"previousYearRange()\"\n >\n <img src=\"images/chevron-left.svg\" alt=\"\" />\n </span>\n <div class=\"year-grid\">\n @for (year of yearRange; track $index) {\n <span\n class=\"year\"\n (click)=\"selectYear(year)\"\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\n >{{ year }}</span\n >\n }\n </div>\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </span>\n </div>\n } @else {\n <div class=\"calendar_body\">\n <div class=\"calendar-grid\">\n <!-- Day names -->\n @for (\n day of [\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"];\n track $index\n ) {\n <div class=\"days_name\">\n {{ day }}\n </div>\n }\n\n <!-- Calendar dates -->\n @for (dayObj of daysInMonth; track $index) {\n <div\n class=\"calendar-day\"\n [ngClass]=\"{\n active:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'single' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ),\n\n active_start:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'range' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ) &&\n dayObj.day === rangeStart,\n\n active_end:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'range' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ) &&\n dayObj.day === rangeEnd,\n\n range_between_active:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'range' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ) &&\n rangeStart != null &&\n rangeEnd != null &&\n dayObj.day > rangeStart &&\n dayObj.day < rangeEnd,\n\n other_month: !dayObj.isCurrentMonth,\n disabled: isDayDisabled(dayObj.day),\n notInCurrentMonth: !dayObj.isCurrentMonth,\n }\"\n (click)=\"\n dayObj.isCurrentMonth &&\n !isDayDisabled(dayObj.day) &&\n selectDate(dayObj.day)\n \"\n >\n {{ dayObj.day }}\n </div>\n }\n </div>\n <div class=\"bottom_btn\">\n <div class=\"btn\">Clear</div>\n <div class=\"btn\">Today</div>\n </div>\n </div>\n }\n </div>\n <!-- TIME SLOTS (only if showTime = true) -->\n @if (dateConfig.enableTime) {\n <div class=\"times\">\n <div class=\"time-picker\">\n <div class=\"time-column\">\n @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n (click)=\"selectTime(timeSlot.label)\"\n >\n {{ timeSlot.label }}\n </span>\n }\n </div>\n\n <div class=\"time-column\">\n @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n >\n {{ timeSlot.label }}\n </span>\n }\n </div>\n\n <div class=\"time-column\">\n @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n >\n {{ timeSlot.label }}\n </span>\n }\n </div>\n\n <!-- center selection indicator -->\n <div class=\"center-highlight\"></div>\n </div>\n\n <!-- @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n (click)=\"selectTime(timeSlot.label)\"\n >\n {{ timeSlot.label }}\n </span>\n } -->\n </div>\n }\n </div>\n }\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;height:calc(3.3333333333rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-family:inherit}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-500)}.calendar_wrapper .date_box img{max-width:calc(1.3333333333rem / var(--scale));margin-right:calc(1rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{display:flex;position:absolute;top:0;left:100%;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:100%;min-width:calc(27.8333333333rem / var(--scale));min-height:calc(30.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_container{flex:1;margin:calc(.25rem / var(--scale)) 0}.calendar_wrapper .calendar-popup .calendar-header{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button{cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding-right:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year img,.calendar_wrapper .calendar-popup .calendar-header .month-year .month img{max-width:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(27.0833333333rem / var(--scale));color:var(--neutral-600)}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale));transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600)}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .year:hover{background-color:var(--blue-100);color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:column;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:\"\"}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(27.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;width:calc(3.975rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{cursor:default;color:var(--neutral-400)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth:hover{background-color:transparent}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn .btn{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--blue-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.calendar_wrapper .calendar-popup .time-picker{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:360px;overflow:hidden;background:#fff}.calendar_wrapper .calendar-popup .time-column{display:flex;flex-direction:column;align-items:center;overflow-y:auto;scroll-snap-type:y mandatory}.calendar_wrapper .calendar-popup .time-column::-webkit-scrollbar{width:0}.calendar_wrapper .calendar-popup .span_time.active{background:#2f80ed;color:#fff;border-radius:4px;width:70%}.calendar_wrapper .calendar-popup .center-highlight{position:absolute;top:50%;left:0;width:100%;height:40px;transform:translateY(-50%);border-top:1px solid red;border-bottom:1px solid red;pointer-events:none}.calendar_wrapper .calendar-popup .times{min-width:calc(14.6666666667rem / var(--scale));max-height:calc(30.3333333333rem / var(--scale));overflow-y:auto;overflow-x:hidden;border-left:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));box-shadow:-3px 0 8px 2px #0a0d121f;border-top-right-radius:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .times .span_time{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);display:inline-block;width:calc(4rem / var(--scale)) calc(3.3333333333rem / var(--scale));height:100%;max-width:calc(4rem / var(--scale));text-align:center;cursor:pointer;scroll-snap-align:center}.calendar_wrapper .calendar-popup .times .span_time:hover,.calendar_wrapper .calendar-popup .times .span_time.active{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
869
869
  }
870
870
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonCalendarComponent, decorators: [{
871
871
  type: Component,
@@ -876,7 +876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
876
876
  multi: true,
877
877
  },
878
878
  DatePipe,
879
- ], template: "<!-- Calendar -->\n\n<div\n class=\"calendar_wrapper\"\n appOutsideClick\n (clickOutSide)=\"closeCalendar()\"\n [ngClass]=\"{ 'pe-none': disableControl }\"\n>\n <div class=\"date_box\" (click)=\"toggleCalendar()\" #trigger>\n @if (dateConfig.selectionMode == \"single\") {\n <input\n type=\"text\"\n placeholder=\"Select Date\"\n [value]=\"selectedDateTime\"\n readonly\n [disabled]=\"disableControl\"\n />\n } @else {\n <input\n type=\"text\"\n placeholder=\"Select date Range\"\n [value]=\"\n selectedDateTime.start\n | date\n : 'MM/dd/yyyy' +\n ' - ' +\n (selectedDateTime.end | date: 'MM/dd/yyyy')\n \"\n readonly\n />\n }\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\n <img src=\"images/calendar.svg\" alt=\"\" />\n </div>\n @if (isOpen) {\n <div\n class=\"calendar-popup\"\n adaptivePosition\n [trigger]=\"trigger\"\n [matchWidth]=\"false\"\n appOutsideClick\n (clickOutside)=\"hideCalender()\"\n >\n <div class=\"calendar_container\">\n <!-- for the header -->\n <div class=\"calendar-header\">\n <div class=\"month-year\">\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\n {{ getMonthYear().month }},</span\n >\n <div class=\"year\" (click)=\"calendarView = 'yearView'\">\n <span>\n {{ getMonthYear().year }}\n </span>\n <img src=\"images/chevron-down.svg\" class=\"year_arrow\" alt=\"\" />\n </div>\n </div>\n\n <div class=\"arrow_container\">\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\n <img src=\"images/arrow-up.svg\" alt=\"\" />\n </span>\n\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\n <img src=\"images/arrow-down.svg\" alt=\"\" />\n </span>\n </div>\n </div>\n @if (calendarView === \"monthView\") {\n <div class=\"month-grid\">\n @for (month of monthRange | keyvalue; track $index) {\n <span\n class=\"month\"\n (click)=\"selectMonth(month.key)\"\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\n >{{ month.value }}</span\n >\n }\n </div>\n } @else if (calendarView === \"yearView\") {\n <div class=\"year-selector\">\n <span\n class=\"navigation-button pointer\"\n (click)=\"previousYearRange()\"\n >\n <img src=\"images/chevron-left.svg\" alt=\"\" />\n </span>\n <div class=\"year-grid\">\n @for (year of yearRange; track $index) {\n <span\n class=\"year\"\n (click)=\"selectYear(year)\"\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\n >{{ year }}</span\n >\n }\n </div>\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </span>\n </div>\n } @else {\n <div class=\"calendar_body\">\n <div class=\"calendar-grid\">\n <!-- Day names -->\n @for (\n day of [\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"];\n track $index\n ) {\n <div class=\"days_name\">\n {{ day }}\n </div>\n }\n\n <!-- Calendar dates -->\n @for (dayObj of daysInMonth; track $index) {\n <div\n class=\"calendar-day\"\n [ngClass]=\"{\n active:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'single' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ),\n\n active_start:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'range' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ) &&\n dayObj.day === rangeStart,\n\n active_end:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'range' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ) &&\n dayObj.day === rangeEnd,\n\n range_between_active:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'range' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ) &&\n rangeStart != null &&\n rangeEnd != null &&\n dayObj.day > rangeStart &&\n dayObj.day < rangeEnd,\n\n other_month: !dayObj.isCurrentMonth,\n disabled: isDayDisabled(dayObj.day),\n notInCurrentMonth: !dayObj.isCurrentMonth,\n }\"\n (click)=\"\n dayObj.isCurrentMonth &&\n !isDayDisabled(dayObj.day) &&\n selectDate(dayObj.day)\n \"\n >\n {{ dayObj.day }}\n </div>\n }\n </div>\n <div class=\"bottom_btn\">\n <div class=\"btn\">Clear</div>\n <div class=\"btn\">Today</div>\n </div>\n </div>\n }\n </div>\n <!-- TIME SLOTS (only if showTime = true) -->\n @if (dateConfig.enableTime) {\n <div class=\"times\">\n <div class=\"time-picker\">\n <div class=\"time-column\">\n @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n (click)=\"selectTime(timeSlot.label)\"\n >\n {{ timeSlot.label }}\n </span>\n }\n </div>\n\n <div class=\"time-column\">\n @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n >\n {{ timeSlot.label }}\n </span>\n }\n </div>\n\n <div class=\"time-column\">\n @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n >\n {{ timeSlot.label }}\n </span>\n }\n </div>\n\n <!-- center selection indicator -->\n <div class=\"center-highlight\"></div>\n </div>\n\n <!-- @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n (click)=\"selectTime(timeSlot.label)\"\n >\n {{ timeSlot.label }}\n </span>\n } -->\n </div>\n }\n </div>\n }\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;height:calc(3.3333333333rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-family:inherit}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-500)}.calendar_wrapper .date_box img{max-width:calc(1.3333333333rem / var(--scale));margin-right:calc(1rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{display:flex;position:absolute;top:0;left:100%;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:100%;min-width:calc(27.8333333333rem / var(--scale));min-height:calc(30.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_container{flex:1;margin:calc(.25rem / var(--scale)) 0}.calendar_wrapper .calendar-popup .calendar-header{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button{cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding-right:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year img,.calendar_wrapper .calendar-popup .calendar-header .month-year .month img{max-width:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(27.0833333333rem / var(--scale));color:var(--neutral-600)}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale));transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600)}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .year:hover{background-color:var(--blue-100);color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:column;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:\"\"}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(27.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;width:calc(3.975rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{cursor:default;color:var(--neutral-400)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth:hover{background-color:transparent}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn .btn{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--blue-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.calendar_wrapper .calendar-popup .time-picker{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:360px;overflow:hidden;background:#fff}.calendar_wrapper .calendar-popup .time-column{display:flex;flex-direction:column;align-items:center;overflow-y:auto;scroll-snap-type:y mandatory}.calendar_wrapper .calendar-popup .time-column::-webkit-scrollbar{width:0}.calendar_wrapper .calendar-popup .span_time.active{background:#2f80ed;color:#fff;border-radius:4px;width:70%}.calendar_wrapper .calendar-popup .center-highlight{position:absolute;top:50%;left:0;width:100%;height:40px;transform:translateY(-50%);border-top:1px solid red;border-bottom:1px solid red;pointer-events:none}.calendar_wrapper .calendar-popup .times{min-width:calc(14.6666666667rem / var(--scale));max-height:calc(30.3333333333rem / var(--scale));overflow-y:auto;overflow-x:hidden;border-left:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));box-shadow:-3px 0 8px 2px #0a0d121f;border-top-right-radius:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .times .span_time{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);display:inline-block;width:calc(4rem / var(--scale)) calc(3.3333333333rem / var(--scale));height:100%;max-width:calc(4rem / var(--scale));text-align:center;cursor:pointer;scroll-snap-align:center}.calendar_wrapper .calendar-popup .times .span_time:hover,.calendar_wrapper .calendar-popup .times .span_time.active{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"] }]
879
+ ], template: "<!-- Calendar -->\n\n<div\n class=\"calendar_wrapper\"\n appOutsideClick\n (clickOutSide)=\"closeCalendar()\"\n [ngClass]=\"{ 'pe-none': disableControl }\"\n>\n <div class=\"date_box\" (click)=\"toggleCalendar()\" #trigger>\n @if (dateConfig.selectionMode == \"single\") {\n <input\n type=\"text\"\n placeholder=\"Select Date\"\n [value]=\"selectedDateTime\"\n readonly\n [disabled]=\"disableControl\"\n />\n } @else {\n <input\n type=\"text\"\n placeholder=\"Select date Range\"\n [value]=\"\n selectedDateTime.start\n | date\n : 'MM/dd/yyyy' +\n ' - ' +\n (selectedDateTime.end | date: 'MM/dd/yyyy')\n \"\n readonly\n />\n }\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\n <img src=\"images/calendar.svg\" alt=\"\" />\n </div>\n @if (isOpen) {\n <div\n class=\"calendar-popup\"\n adaptivePosition\n [trigger]=\"trigger\"\n [matchWidth]=\"false\"\n appOutsideClick\n (clickOutside)=\"hideCalender()\"\n >\n <div class=\"calendar_container\">\n <!-- for the header -->\n <div class=\"calendar-header\">\n <div class=\"month-year\">\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\n {{ getMonthYear().month }},</span\n >\n <div class=\"year\" (click)=\"calendarView = 'yearView'\">\n <span>\n {{ getMonthYear().year }}\n </span>\n <img src=\"images/chevron-down.svg\" class=\"year_arrow\" alt=\"\" />\n </div>\n </div>\n\n <div class=\"arrow_container\">\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\n <img src=\"images/arrow-up.svg\" alt=\"\" />\n </span>\n\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\n <img src=\"images/arrow-down.svg\" alt=\"\" />\n </span>\n </div>\n </div>\n @if (calendarView === \"monthView\") {\n <div class=\"month-grid\">\n @for (month of monthRange | keyvalue; track $index) {\n <span\n class=\"month\"\n (click)=\"selectMonth(month.key)\"\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\n >{{ month.value }}</span\n >\n }\n </div>\n } @else if (calendarView === \"yearView\") {\n <div class=\"year-selector\">\n <span\n class=\"navigation-button pointer\"\n (click)=\"previousYearRange()\"\n >\n <img src=\"images/chevron-left.svg\" alt=\"\" />\n </span>\n <div class=\"year-grid\">\n @for (year of yearRange; track $index) {\n <span\n class=\"year\"\n (click)=\"selectYear(year)\"\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\n >{{ year }}</span\n >\n }\n </div>\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </span>\n </div>\n } @else {\n <div class=\"calendar_body\">\n <div class=\"calendar-grid\">\n <!-- Day names -->\n @for (\n day of [\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"];\n track $index\n ) {\n <div class=\"days_name\">\n {{ day }}\n </div>\n }\n\n <!-- Calendar dates -->\n @for (dayObj of daysInMonth; track $index) {\n <div\n class=\"calendar-day\"\n [ngClass]=\"{\n active:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'single' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ),\n\n active_start:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'range' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ) &&\n dayObj.day === rangeStart,\n\n active_end:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'range' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ) &&\n dayObj.day === rangeEnd,\n\n range_between_active:\n dayObj.isCurrentMonth &&\n dateConfig.selectionMode === 'range' &&\n isSelectedDate(\n dayObj.day,\n dayObj.date.getMonth(),\n dayObj.date.getFullYear()\n ) &&\n rangeStart != null &&\n rangeEnd != null &&\n dayObj.day > rangeStart &&\n dayObj.day < rangeEnd,\n\n other_month: !dayObj.isCurrentMonth,\n disabled: isDayDisabled(dayObj.day),\n notInCurrentMonth: !dayObj.isCurrentMonth,\n }\"\n (click)=\"\n dayObj.isCurrentMonth &&\n !isDayDisabled(dayObj.day) &&\n selectDate(dayObj.day)\n \"\n >\n {{ dayObj.day }}\n </div>\n }\n </div>\n <div class=\"bottom_btn\">\n <div class=\"btn\">Clear</div>\n <div class=\"btn\">Today</div>\n </div>\n </div>\n }\n </div>\n <!-- TIME SLOTS (only if showTime = true) -->\n @if (dateConfig.enableTime) {\n <div class=\"times\">\n <div class=\"time-picker\">\n <div class=\"time-column\">\n @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n (click)=\"selectTime(timeSlot.label)\"\n >\n {{ timeSlot.label }}\n </span>\n }\n </div>\n\n <div class=\"time-column\">\n @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n >\n {{ timeSlot.label }}\n </span>\n }\n </div>\n\n <div class=\"time-column\">\n @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n >\n {{ timeSlot.label }}\n </span>\n }\n </div>\n\n <!-- center selection indicator -->\n <div class=\"center-highlight\"></div>\n </div>\n\n <!-- @for (timeSlot of timeSlots; track $index) {\n <span\n class=\"span_time\"\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\n (click)=\"selectTime(timeSlot.label)\"\n >\n {{ timeSlot.label }}\n </span>\n } -->\n </div>\n }\n </div>\n }\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;height:calc(3.3333333333rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-family:inherit}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-500)}.calendar_wrapper .date_box img{max-width:calc(1.3333333333rem / var(--scale));margin-right:calc(1rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{display:flex;position:absolute;top:0;left:100%;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:100%;min-width:calc(27.8333333333rem / var(--scale));min-height:calc(30.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_container{flex:1;margin:calc(.25rem / var(--scale)) 0}.calendar_wrapper .calendar-popup .calendar-header{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button{cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding-right:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year img,.calendar_wrapper .calendar-popup .calendar-header .month-year .month img{max-width:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(27.0833333333rem / var(--scale));color:var(--neutral-600)}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale));transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600)}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .year:hover{background-color:var(--blue-100);color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:column;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:\"\"}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(27.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;width:calc(3.975rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{cursor:default;color:var(--neutral-400)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth:hover{background-color:transparent}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn .btn{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--blue-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.calendar_wrapper .calendar-popup .time-picker{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:360px;overflow:hidden;background:#fff}.calendar_wrapper .calendar-popup .time-column{display:flex;flex-direction:column;align-items:center;overflow-y:auto;scroll-snap-type:y mandatory}.calendar_wrapper .calendar-popup .time-column::-webkit-scrollbar{width:0}.calendar_wrapper .calendar-popup .span_time.active{background:#2f80ed;color:#fff;border-radius:4px;width:70%}.calendar_wrapper .calendar-popup .center-highlight{position:absolute;top:50%;left:0;width:100%;height:40px;transform:translateY(-50%);border-top:1px solid red;border-bottom:1px solid red;pointer-events:none}.calendar_wrapper .calendar-popup .times{min-width:calc(14.6666666667rem / var(--scale));max-height:calc(30.3333333333rem / var(--scale));overflow-y:auto;overflow-x:hidden;border-left:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));box-shadow:-3px 0 8px 2px #0a0d121f;border-top-right-radius:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .times .span_time{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);display:inline-block;width:calc(4rem / var(--scale)) calc(3.3333333333rem / var(--scale));height:100%;max-width:calc(4rem / var(--scale));text-align:center;cursor:pointer;scroll-snap-align:center}.calendar_wrapper .calendar-popup .times .span_time:hover,.calendar_wrapper .calendar-popup .times .span_time.active{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"] }]
880
880
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DatePipe }], propDecorators: { dateTimeSelected: [{
881
881
  type: Output
882
882
  }], clearDateEvent: [{
@@ -1077,25 +1077,36 @@ class CatsDataGridComponent {
1077
1077
  return colDefs.filter((col) => col.fieldName === groupByField);
1078
1078
  }
1079
1079
  activeAllSelection(event) {
1080
- let checked = event.target.checked;
1081
- if (checked) {
1082
- this.colDefs = this.originalColDefs.map((dt) => {
1083
- if (!dt.active && !dt.headerLocked) {
1084
- dt.active = true;
1085
- }
1086
- this.atLeastOneColumnChecked = true;
1087
- return dt;
1088
- });
1089
- }
1090
- else {
1091
- this.colDefs = this.originalColDefs.map((dt) => {
1092
- if (dt.active && !dt.headerLocked) {
1093
- dt.active = false;
1094
- }
1095
- this.atLeastOneColumnChecked = false;
1096
- return dt;
1097
- });
1098
- }
1080
+ // let checked = (event.target as HTMLInputElement).checked;
1081
+ // if (checked) {
1082
+ // this.colDefs = this.originalColDefs.map((dt) => {
1083
+ // if (!dt.active && !dt.headerLocked) {
1084
+ // dt.active = true;
1085
+ // }
1086
+ // this.atLeastOneColumnChecked = true;
1087
+ // return dt;
1088
+ // });
1089
+ // } else {
1090
+ // this.colDefs = this.originalColDefs.map((dt) => {
1091
+ // if (dt.active && !dt.headerLocked) {
1092
+ // dt.active = false;
1093
+ // }
1094
+ // this.atLeastOneColumnChecked = false;
1095
+ // return dt;
1096
+ // });
1097
+ // }
1098
+ const checked = event.target.checked;
1099
+ this.colDefs = this.originalColDefs.map((col) => {
1100
+ if (col.headerLocked) {
1101
+ col.active = true;
1102
+ }
1103
+ else {
1104
+ col.active = checked;
1105
+ }
1106
+ return col;
1107
+ });
1108
+ this.activeAll = this.colDefs.every((dt) => dt.active);
1109
+ this.atLeastOneColumnChecked = this.colDefs.some((dt) => dt.active);
1099
1110
  }
1100
1111
  changeActiveColSelection(event, col) {
1101
1112
  col.active = !col.active;
@@ -1397,7 +1408,7 @@ class CatsDataGridComponent {
1397
1408
  };
1398
1409
  if (col.filterType === 'set') {
1399
1410
  filterObj.filters = Array(...col.selectedValues).map((f) => ({
1400
- filterOperation: 'equals',
1411
+ filterOperation: '=',
1401
1412
  filterValue: f,
1402
1413
  }));
1403
1414
  filterObj.filterLogic = 'OR';
@@ -1644,7 +1655,7 @@ class CatsDataGridComponent {
1644
1655
  this.isResizing = true;
1645
1656
  this.resizingColumnIndex = index;
1646
1657
  this.startX = event.clientX;
1647
- this.startWidth = this.colDefs[index].width ?? 250;
1658
+ this.startWidth = this.colDefs[index].width ?? 150;
1648
1659
  this.zone.runOutsideAngular(() => {
1649
1660
  this.removeMouseMove = this.renderer.listen('document', 'mousemove', (e) => this.onMouseMove(e));
1650
1661
  this.removeMouseUp = this.renderer.listen('document', 'mouseup', (e) => this.stopResize(e));
@@ -2056,7 +2067,7 @@ class CatsDataGridComponent {
2056
2067
  */
2057
2068
  getStyle(col, type) {
2058
2069
  const style = {
2059
- width: `${col.width ?? 250}px`,
2070
+ width: `${col.width ?? 150}px`,
2060
2071
  minWidth: `${col.minWidth ?? 50}px`,
2061
2072
  maxWidth: `${col.maxWidth}px`,
2062
2073
  };
@@ -2445,7 +2456,7 @@ class CatsDataGridComponent {
2445
2456
  this.onCellClicked.emit({ row, col });
2446
2457
  }
2447
2458
  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 });
2448
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CatsDataGridComponent, isStandalone: true, selector: "cats-data-grid", inputs: { tableOptions: "tableOptions", totalRecords: "totalRecords", sortingRequired: "sortingRequired", checkBoxSelection: "checkBoxSelection", checkboxSelectionType: "checkboxSelectionType", rowData: "rowData", colDefs: "colDefs", paginationRequired: "paginationRequired", selectedRowEmpty: "selectedRowEmpty", filterRequired: "filterRequired", threeDotsMenuRequired: "threeDotsMenuRequired", settingsRequired: "settingsRequired", settingsClicked: "settingsClicked", resetPage: "resetPage", rowId: "rowId", height: "height", groupByRequired: "groupByRequired", pageSizeList: "pageSizeList", groupByField: "groupByField", appliedFilters: "appliedFilters", rowGripFieldName: "rowGripFieldName", pageNumber: "pageNumber", pageSize: "pageSize", dynamicGroupingFiltering: "dynamicGroupingFiltering" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter", onHideSettings: "onHideSettings", appliedFiltersEvent: "appliedFiltersEvent", activeGroupsEvent: "activeGroupsEvent", onRowClicked: "onRowClicked", onCellClicked: "onCellClicked" }, viewQueries: [{ propertyName: "pinMenu", first: true, predicate: ["pinMenu"], descendants: true }, { propertyName: "colActionMenu", first: true, predicate: ["colActionMenu"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\" #table>\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting_options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"column_header\">Select Headers</div>\n <div class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n />\n <span>Select All</span>\n </div>\n\n <div class=\"item_container\" id=\"table_scroll\">\n @for (col of colDefs; track col.colId) {\n <div class=\"column_item checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n (change)=\"changeActiveColSelection($event, col)\"\n [disabled]=\"col.headerLocked\"\n />\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n </div>\n }\n @if (groupByRequired) {\n <!-- Group Panel -->\n <div\n class=\"group_panel\"\n (dragover)=\"onGroupDragOver($event)\"\n (drop)=\"onGroupDrop($event)\"\n >\n <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n @for (g of activeGroups; track $index) {\n <div\n class=\"group_tag\"\n draggable=\"true\"\n (dragstart)=\"onGroupDragStart($event, $index)\"\n (dragover)=\"onActiveDragOver($event, $index)\"\n (drop)=\"onActiveGroupDrop($event, $index)\"\n >\n <img src=\"images/t-gripper.svg\" alt=\"\" />\n <span>{{ g.headerName }}</span>\n <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n }\n @if (activeGroups.length === 0) {\n <div class=\"group_placeholder\">Drag here to set row groups</div>\n }\n </div>\n }\n @if (activeFilters.size > 0) {\n <div class=\"active_filters_container\">\n <div class=\"tag_wrapper\">\n @for (filter of appliedFilters; track filter.fieldName) {\n <div class=\"active_filter_tag\">\n <div class=\"active_filter_label ellipsis\">\n @for (item of filter.filters; track $index) {\n @if (item.filterValue) {\n @if ($index > 0 && item.filterValue) {\n <span class=\"filter_logic\"> {{ filter.filterLogic }} </span>\n }\n <span class=\"filter_field\">{{ filter.fieldName }}:</span>\n <span class=\"\"> {{ item.filterOperation }}</span>\n <span class=\"filter_value\">{{ item.filterValue }}</span>\n }\n }\n </div>\n <button\n class=\"remove_filter_btn\"\n (click)=\"removeActiveFilter(filter)\"\n >\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n }\n </div>\n <div class=\"clear_all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n </div>\n }\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n #parent\n (scroll)=\"infinityScroll($event)\"\n [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n [class.no-horizontal-scroll]=\"\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n \"\n >\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\">\n <thead class=\"sticky-top\">\n <tr>\n @if (\n checkBoxSelection &&\n checkboxSelectionType == \"multiple\" &&\n atLeastOneColumnChecked\n ) {\n <th style=\"min-width: 50px; width: 50px\">\n <div class=\"th_wraper\">\n <span class=\"checkbox_container\"\n ><input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n name=\"\"\n id=\"\"\n [checked]=\"checkAllSelected()\"\n [indeterminate]=\"checkInterminate()\"\n (change)=\"onHeaderCheckboxChange($event)\"\n /></span>\n <div class=\"filter_three_dot_wrapper\">\n <span class=\"resize-handle default_cursor\"> | </span>\n </div>\n </div>\n </th>\n }\n @else{\n @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)\"\n (dragend)=\"onDragEnd()\"\n (mouseenter)=\"enableColumnDrag($event, $index)\"\n (mouseleave)=\"disableColumnDrag($event, $index)\"\n />\n }\n <span class=\"ellipsis headerName\">{{\n col?.headerName\n }}</span>\n\n @if (\n sortingRequired &&\n sortingColumnIndex == $index &&\n col?.sortable &&\n !col.isAction\n ) {\n <span class=\"sorting_icon\">\n @if (sortingType[$index] === \"asc\") {\n <img\n src=\"images/t-arrow-up.svg\"\n class=\"sorting_up\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (sortingType[$index] === \"dsc\") {\n <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n <img\n src=\"images/t-arrow-down.svg\"\n class=\"sorting_down\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n </span>\n }\n </div>\n <div class=\"filter_three_dot_wrapper\">\n <!-- Column Filters Logic-->\n @if (filterRequired && col.filterable) {\n <div\n #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, $index, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n } @else {\n <img\n src=\"images/t-filter.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (activeFilterIndex === $index) {\n <div class=\"filt_wrap\">\n <div\n adaptivePosition\n [trigger]=\"trigger\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n class=\"filter_wrapper\"\n id=\"filter_wrapper-{{ $index }}\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index\">AND</label>\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index + 1\">OR</label>\n </div>\n\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n }\n }\n\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index\">AND</label>\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index + 1\">OR</label>\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n }\n }\n\n <!-- DATE FILTER -->\n @if (col.filterType === \"date\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters()\"\n /> -->\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n [preSelectedValue]=\"\n col.filters[0].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index\">AND</label>\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index + 1\">OR</label>\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n [preSelectedValue]=\"\n col.filters[1].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n }\n }\n\n <!-- SET FILTER (CHECKBOX LIST) -->\n @if (col.filterType === \"set\") {\n <!-- <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n /> -->\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n\n <div class=\"set_option_details\">\n <label class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"toggleSelectAll(col, $event)\"\n />\n (Select All)\n </label>\n <div class=\"set_options\" id=\"table_scroll\">\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues.has(opt)\n \"\n (change)=\"\n toggleSetOption(col, opt, $event)\n \"\n />\n {{ opt }}\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter_btn\">\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"resetFilter(col)\"\n >\n Reset\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired && col.columnAction) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, $index)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n @if (!col.isAction) {\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, $index)\"\n >\n |\n </span>\n }\n </div>\n </div>\n\n <!-- popup open -->\n @if (menuVisible[$index]) {\n <div\n #colActionMenu\n class=\"dropdown_wrapper\"\n adaptivePosition\n [trigger]=\"triggerColMenu\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n [isColumnActionMenu]=\"true\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <div class=\"right_click_dropdown\" id=\"table_scroll\">\n @if (\n sortingType[$index] === \"dsc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', $index)\"\n >\n <div class=\"left_item\">\n <img\n src=\"images/arrow-up.svg\"\n class=\"sorting_up\"\n [ngClass]=\"{ disable: !col.sortable }\"\n />\n <span class=\"text\">Sort Ascending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n <div class=\"divder\"></div>\n\n <div\n class=\"right_click_item\"\n (mouseenter)=\"showPinActions($event)\"\n (mouseleave)=\"hidePinActions()\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" />\n @if (showPin) {\n <div class=\"second_dropdown\" #pinMenu>\n <div\n (click)=\"pinColumn(col, $index, 'none')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n (pinActionClicked[col.colId] ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'left')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"left\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'right')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"right\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Right</span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'left')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">{{\n col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n }}</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'right')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">\n {{\n col.rightPinned\n ? \"Unpin Right Column\"\n : \"Pin Column Right\"\n }}\n </span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/arrow-right.svg\" alt=\"\" />\n </div>\n </div> -->\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n [ngClass]=\"{ disabled_option: !groupByRequired }\"\n >\n <div\n class=\"left_item\"\n (click)=\"groupByColumnAction(col, $index)\"\n >\n <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n <span class=\"text\"\n >Group by {{ col.headerName }}</span\n >\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/t-choose-column.svg\" alt=\"\" />\n <span class=\"text\">Choose Columns</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Reset Columns</span>\n </div>\n </div>\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @if (groupedResult && groupedResult.length > 0) {\n @for (group of groupedResult; track group.key) {\n <tr (click)=\"toggleGroup(group)\">\n <td\n class=\"group-cell\"\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n group.expanded\n ? 'chevron-down.svg'\n : 'chevron-right.svg'\n }}\"\n />\n {{ group.key }} ({{ group.children.length }})\n </span>\n </td>\n </tr>\n\n @if (group.expanded) {\n <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n @if (group.children[0]?.children) {\n @for (child of group.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: 1,\n }\"\n ></ng-container>\n }\n }\n\n <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n @if (!group.children[0]?.children) {\n @for (row of group.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(row) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n }\n } @else {\n @for (data of rowData; track data.rowId) {\n <tr\n [ngClass]=\"data | addClass: tableOptions\"\n (dragover)=\"allowRowDrop($event)\"\n (drop)=\"dropRow(data)\"\n (click)=\"onRowClick(data)\"\n >\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px\">\n @if (checkboxSelectionType == \"multiple\") {\n <span class=\"checkbox_container\"\n ><input\n type=\"checkbox\"\n class=\"pointer custom_check_box\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [disabled]=\"data.isLocked\"\n [checked]=\"data.isSelected || data.isLocked\"\n (change)=\"onRowCheckboxSelection($event)\"\n /></span>\n } @else {\n <span class=\"radio_option\">\n <input\n type=\"radio\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [checked]=\"data?.isSelected\"\n (change)=\"onRowCheckboxSelection($event)\"\n />\n <label [for]=\"data.rowId\"></label>\n </span>\n }\n </td>\n }\n @for (col of colDefs; track col.colId) {\n @if (col.active) {\n <td (click)=\"onCellClick(data, col)\"\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(data) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n class=\"table_cell\"\n >\n <div class=\"col_wrapper\">\n @if (\n rowGripFieldName &&\n rowGripFieldName === col?.fieldName\n ) {\n <div\n [draggable]=\"true\"\n (dragstart)=\"dragRow($event, data)\"\n class=\"gripper\"\n >\n <img 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 {{ parseColValue(data, col) }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(data, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"data\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"data[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </div>\n <!-- Commented for later use -->\n <!-- <div class=\"tool_tip\">\n <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n </div> -->\n </td>\n }\n }\n </tr>\n }\n }\n </tbody>\n\n <ng-template\n #groupTemplate\n let-node\n let-colDefs=\"colDefs\"\n let-checkBoxSelection=\"checkBoxSelection\"\n let-activeGroups=\"activeGroups\"\n let-level=\"level\"\n >\n <!-- GROUP HEADER -->\n <tr (click)=\"toggleGroup(node)\">\n <td\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n [style.paddingLeft.px]=\"level * 20\"\n class=\"group-cell\"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n }}\"\n />\n {{ node.key }} ({{ node.children.length }})\n </span>\n </td>\n </tr>\n\n <!-- CHILDREN -->\n @if (node.expanded) {\n <!-- CASE: more groups -->\n @if (node.children[0]?.children) {\n @for (child of node.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: level + 1,\n }\"\n >\n </ng-container>\n }\n }\n\n <!-- CASE: final rows -->\n @if (!node.children[0]?.children) {\n @for (row of node.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"checkbox_container\">\n <input\n type=\"checkbox custom_check_box\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n </ng-template>\n </table>\n\n @if (\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n ) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n @if (tableOptions?.noDataTemplate) {\n <ng-container\n *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n ></ng-container>\n } @else {\n <span>No Data To Show</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n <!-- Table Wrapper Ends-->\n @if (paginationRequired) {\n <div class=\"pagination_main\">\n <div class=\"entries_details\">\n <span>Showing</span>\n <div class=\"pagination_select\">\n <div\n class=\"select_dropdown pointer\"\n (click)=\"showPageSizeList = !showPageSizeList\"\n >\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n <span class=\"chevron_img\">\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n </span>\n </div>\n @if (showPageSizeList) {\n <div\n class=\"select_option\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n @for (option of pageSizeList; track $index) {\n <span\n class=\"pointer\"\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\n >{{ option }}</span\n >\n }\n </div>\n }\n </div>\n <span\n >Rows |\n {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n {{\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n }}\n of\n {{ totalRecords }} Entries</span\n >\n </div>\n <div class=\"pagination_form\">\n <!-- <span>Page</span> -->\n\n <button class=\"outlined_btn first_btn\" type=\"button\" (click)=\"onBtFirstClick()\" [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\">\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn prev_btn\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n type=\"button\"\n (click)=\"onBtPrevClick()\"\n >\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n </button>\n <div>\n <input\n class=\"input_style\"\n type=\"number\"\n [(ngModel)]=\"pageDetails.currentPage\"\n (change)=\"goToSelectedPage($event)\"\n name=\"\"\n id=\"\"\n />\n </div>\n <button\n class=\"outlined_btn next_btn\"\n type=\"button\"\n [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n <button class=\"outlined_btn last_btn\" type=\"button\" (click)=\"onBtLastClick()\" \n [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\">\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"dropdown_wrapper d-none\">\n <div class=\"right_click_dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/scissors.svg\" />\n <span class=\"text\">Cut</span>\n </div>\n\n <span class=\"right_item\">Ctrl+X</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy</span>\n </div>\n\n <span class=\"right_item\">Ctrl+C</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Group Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/clipboard.svg\" alt=\"\" />\n <span class=\"text\">Paste</span>\n </div>\n\n <span class=\"right_item\">Ctrl+V</span>\n </div>\n\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/bar-chart.svg\" alt=\"\" />\n <span class=\"text\">Chart</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/download.svg\" alt=\"\" />\n <span class=\"text\">Export</span>\n </div>\n\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Chart section Start Here -->\n <div class=\"second_dropdown\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <span class=\"text\">Column</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Bar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Pie</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Line</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Area</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">XY(Scatter)</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Polar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stastical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Hierarchical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Specialized</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Funnel</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Combination</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Export Section start Here -->\n <div class=\"export_section d-none\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">CSV Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">Excel Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Column Group Section Start Here -->\n <div class=\"third_dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Grouped</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stacked</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">100% Stacked</span>\n </div>\n </div>\n </div>\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;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.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);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.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{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:calc(.8333333333rem / var(--scale));width:inherit;max-width:max-content}.tableArea .table_wrapper table tbody tr td .col_wrapper:has(.tag_wrapper){width:unset}.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))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CommonCalendarComponent, selector: "lib-common-calendar", inputs: ["dateConfig", "minDate", "maxDate", "preSelectedValue"], outputs: ["dateTimeSelected", "clearDateEvent"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "component", type: CommonInputComponent, selector: "lib-common-input", inputs: ["options", "selectedValue", "placeholder", "elementType"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
2459
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CatsDataGridComponent, isStandalone: true, selector: "cats-data-grid", inputs: { tableOptions: "tableOptions", totalRecords: "totalRecords", sortingRequired: "sortingRequired", checkBoxSelection: "checkBoxSelection", checkboxSelectionType: "checkboxSelectionType", rowData: "rowData", colDefs: "colDefs", paginationRequired: "paginationRequired", selectedRowEmpty: "selectedRowEmpty", filterRequired: "filterRequired", threeDotsMenuRequired: "threeDotsMenuRequired", settingsRequired: "settingsRequired", settingsClicked: "settingsClicked", resetPage: "resetPage", rowId: "rowId", height: "height", groupByRequired: "groupByRequired", pageSizeList: "pageSizeList", groupByField: "groupByField", appliedFilters: "appliedFilters", rowGripFieldName: "rowGripFieldName", pageNumber: "pageNumber", pageSize: "pageSize", dynamicGroupingFiltering: "dynamicGroupingFiltering" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter", onHideSettings: "onHideSettings", appliedFiltersEvent: "appliedFiltersEvent", activeGroupsEvent: "activeGroupsEvent", onRowClicked: "onRowClicked", onCellClicked: "onCellClicked" }, viewQueries: [{ propertyName: "pinMenu", first: true, predicate: ["pinMenu"], descendants: true }, { propertyName: "colActionMenu", first: true, predicate: ["colActionMenu"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\" #table>\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting_options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"column_header\">Select Headers</div>\n <div class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n />\n <span>Select All</span>\n </div>\n\n <div class=\"item_container\" id=\"table_scroll\">\n @for (col of colDefs; track col.colId) {\n <div class=\"column_item checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n (change)=\"changeActiveColSelection($event, col)\"\n [disabled]=\"col.headerLocked\"\n />\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n </div>\n }\n @if (groupByRequired) {\n <!-- Group Panel -->\n <div\n class=\"group_panel\"\n (dragover)=\"onGroupDragOver($event)\"\n (drop)=\"onGroupDrop($event)\"\n >\n <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n @for (g of activeGroups; track $index) {\n <div\n class=\"group_tag\"\n draggable=\"true\"\n (dragstart)=\"onGroupDragStart($event, $index)\"\n (dragover)=\"onActiveDragOver($event, $index)\"\n (drop)=\"onActiveGroupDrop($event, $index)\"\n >\n <img src=\"images/t-gripper.svg\" alt=\"\" />\n <span>{{ g.headerName }}</span>\n <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n }\n @if (activeGroups.length === 0) {\n <div class=\"group_placeholder\">Drag here to set row groups</div>\n }\n </div>\n }\n @if (activeFilters.size > 0) {\n <div class=\"active_filters_container\">\n <div class=\"tag_wrapper\">\n @for (filter of appliedFilters; track filter.fieldName) {\n @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\"> {{ filter.filterLogic }} </span>\n }\n <span class=\"filter_field\">{{ filter.fieldName.split('.')[0] }}:</span>\n <span class=\"\"> {{ (item.filterOperation == '=' || item.filterOperation == 'equals') ? ':' : item.filterOperation }}</span>\n <span class=\"filter_value\">{{ item.filterValue }}</span>\n }\n }\n </div>\n <button\n class=\"remove_filter_btn\"\n (click)=\"removeActiveFilter(filter)\"\n >\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n } \n }\n </div>\n <div class=\"clear_all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n </div>\n }\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n #parent\n (scroll)=\"infinityScroll($event)\"\n [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n [class.no-horizontal-scroll]=\"\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n \"\n >\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\">\n <thead class=\"sticky-top\">\n <tr>\n @if (\n checkBoxSelection &&\n checkboxSelectionType == \"multiple\" &&\n atLeastOneColumnChecked\n ) {\n <th style=\"min-width: 50px; width: 50px\">\n <div class=\"th_wraper\">\n <span class=\"checkbox_container\"\n ><input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n name=\"\"\n id=\"\"\n [checked]=\"checkAllSelected()\"\n [indeterminate]=\"checkInterminate()\"\n (change)=\"onHeaderCheckboxChange($event)\"\n /></span>\n <div class=\"filter_three_dot_wrapper\">\n <span class=\"resize-handle default_cursor\"> | </span>\n </div>\n </div>\n </th>\n }\n @else{\n @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)\"\n (dragend)=\"onDragEnd()\"\n (mouseenter)=\"enableColumnDrag($event, $index)\"\n (mouseleave)=\"disableColumnDrag($event, $index)\"\n />\n }\n <span class=\"ellipsis headerName\">{{\n col?.headerName\n }}</span>\n\n @if (\n sortingRequired &&\n sortingColumnIndex == $index &&\n col?.sortable &&\n !col.isAction\n ) {\n <span class=\"sorting_icon\">\n @if (sortingType[$index] === \"asc\") {\n <img\n src=\"images/t-arrow-up.svg\"\n class=\"sorting_up\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (sortingType[$index] === \"dsc\") {\n <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n <img\n src=\"images/t-arrow-down.svg\"\n class=\"sorting_down\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n </span>\n }\n </div>\n <div class=\"filter_three_dot_wrapper\">\n <!-- Column Filters Logic-->\n @if (filterRequired && col.filterable) {\n <div\n #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, $index, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n } @else {\n <img\n src=\"images/t-filter.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (activeFilterIndex === $index) {\n <div class=\"filt_wrap\">\n <div\n adaptivePosition\n [trigger]=\"trigger\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n class=\"filter_wrapper\"\n id=\"filter_wrapper-{{ $index }}\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index\">AND</label>\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index + 1\">OR</label>\n </div>\n\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n }\n }\n\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index\">AND</label>\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index + 1\">OR</label>\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n }\n }\n\n <!-- DATE FILTER -->\n @if (col.filterType === \"date\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters()\"\n /> -->\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n [preSelectedValue]=\"\n col.filters[0].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index\">AND</label>\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index + 1\">OR</label>\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n [preSelectedValue]=\"\n col.filters[1].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n }\n }\n\n <!-- SET FILTER (CHECKBOX LIST) -->\n @if (col.filterType === \"set\") {\n <!-- <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n /> -->\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n\n <div class=\"set_option_details\">\n <label class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"toggleSelectAll(col, $event)\"\n />\n (Select All)\n </label>\n <div class=\"set_options\" id=\"table_scroll\">\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues.has(opt)\n \"\n (change)=\"\n toggleSetOption(col, opt, $event)\n \"\n />\n {{ opt }}\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter_btn\">\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"resetFilter(col)\"\n >\n Reset\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired && col.columnAction) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, $index)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n @if (!col.isAction) {\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, $index)\"\n >\n |\n </span>\n }\n </div>\n </div>\n\n <!-- popup open -->\n @if (menuVisible[$index]) {\n <div\n #colActionMenu\n class=\"dropdown_wrapper\"\n adaptivePosition\n [trigger]=\"triggerColMenu\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n [isColumnActionMenu]=\"true\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <div class=\"right_click_dropdown\" id=\"table_scroll\">\n @if (\n sortingType[$index] === \"dsc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', $index)\"\n >\n <div class=\"left_item\">\n <img\n src=\"images/arrow-up.svg\"\n class=\"sorting_up\"\n [ngClass]=\"{ disable: !col.sortable }\"\n />\n <span class=\"text\">Sort Ascending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n <div class=\"divder\"></div>\n\n <div\n class=\"right_click_item\"\n (mouseenter)=\"showPinActions($event)\"\n (mouseleave)=\"hidePinActions()\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" />\n @if (showPin) {\n <div class=\"second_dropdown\" #pinMenu>\n <div\n (click)=\"pinColumn(col, $index, 'none')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n (pinActionClicked[col.colId] ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'left')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"left\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'right')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"right\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Right</span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'left')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">{{\n col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n }}</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'right')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">\n {{\n col.rightPinned\n ? \"Unpin Right Column\"\n : \"Pin Column Right\"\n }}\n </span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/arrow-right.svg\" alt=\"\" />\n </div>\n </div> -->\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n [ngClass]=\"{ disabled_option: !groupByRequired }\"\n >\n <div\n class=\"left_item\"\n (click)=\"groupByColumnAction(col, $index)\"\n >\n <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n <span class=\"text\"\n >Group by {{ col.headerName }}</span\n >\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/t-choose-column.svg\" alt=\"\" />\n <span class=\"text\">Choose Columns</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Reset Columns</span>\n </div>\n </div>\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @if (groupedResult && groupedResult.length > 0) {\n @for (group of groupedResult; track group.key) {\n <tr (click)=\"toggleGroup(group)\">\n <td\n class=\"group-cell\"\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n group.expanded\n ? 'chevron-down.svg'\n : 'chevron-right.svg'\n }}\"\n />\n {{ group.key }} ({{ group.children.length }})\n </span>\n </td>\n </tr>\n\n @if (group.expanded) {\n <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n @if (group.children[0]?.children) {\n @for (child of group.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: 1,\n }\"\n ></ng-container>\n }\n }\n\n <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n @if (!group.children[0]?.children) {\n @for (row of group.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(row) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n }\n } @else {\n @for (data of rowData; track data.rowId) {\n <tr\n [ngClass]=\"data | addClass: tableOptions\"\n (dragover)=\"allowRowDrop($event)\"\n (drop)=\"dropRow(data)\"\n (click)=\"onRowClick(data)\"\n >\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px\">\n @if (checkboxSelectionType == \"multiple\") {\n <span class=\"checkbox_container\"\n ><input\n type=\"checkbox\"\n class=\"pointer custom_check_box\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [disabled]=\"data.isLocked\"\n [checked]=\"data.isSelected || data.isLocked\"\n (change)=\"onRowCheckboxSelection($event)\"\n /></span>\n } @else {\n <span class=\"radio_option\">\n <input\n type=\"radio\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [checked]=\"data?.isSelected\"\n (change)=\"onRowCheckboxSelection($event)\"\n />\n <label [for]=\"data.rowId\"></label>\n </span>\n }\n </td>\n }\n @for (col of colDefs; track col.colId) {\n @if (col.active) {\n <td (click)=\"onCellClick(data, col)\"\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(data) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n class=\"table_cell\"\n >\n <div class=\"col_wrapper\">\n @if (\n rowGripFieldName &&\n rowGripFieldName === col?.fieldName\n ) {\n <div\n [draggable]=\"true\"\n (dragstart)=\"dragRow($event, data)\"\n class=\"gripper\"\n >\n <img 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 {{ parseColValue(data, col) }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(data, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"data\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"data[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </div>\n <!-- Commented for later use -->\n <!-- <div class=\"tool_tip\">\n <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n </div> -->\n </td>\n }\n }\n </tr>\n }\n }\n </tbody>\n\n <ng-template\n #groupTemplate\n let-node\n let-colDefs=\"colDefs\"\n let-checkBoxSelection=\"checkBoxSelection\"\n let-activeGroups=\"activeGroups\"\n let-level=\"level\"\n >\n <!-- GROUP HEADER -->\n <tr (click)=\"toggleGroup(node)\">\n <td\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n [style.paddingLeft.px]=\"level * 20\"\n class=\"group-cell\"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n }}\"\n />\n {{ node.key }} ({{ node.children.length }})\n </span>\n </td>\n </tr>\n\n <!-- CHILDREN -->\n @if (node.expanded) {\n <!-- CASE: more groups -->\n @if (node.children[0]?.children) {\n @for (child of node.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: level + 1,\n }\"\n >\n </ng-container>\n }\n }\n\n <!-- CASE: final rows -->\n @if (!node.children[0]?.children) {\n @for (row of node.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"checkbox_container\">\n <input\n type=\"checkbox custom_check_box\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n </ng-template>\n </table>\n\n @if (\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n ) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n @if (tableOptions?.noDataTemplate) {\n <ng-container\n *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n ></ng-container>\n } @else {\n <span>No Data To Show</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n <!-- Table Wrapper Ends-->\n @if (paginationRequired) {\n <div class=\"pagination_main\">\n <div class=\"entries_details\">\n <span>Showing</span>\n <div class=\"pagination_select\">\n <div\n class=\"select_dropdown pointer\"\n (click)=\"showPageSizeList = !showPageSizeList\"\n >\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n <span class=\"chevron_img\">\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n </span>\n </div>\n @if (showPageSizeList) {\n <div\n class=\"select_option\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n @for (option of pageSizeList; track $index) {\n <span\n class=\"pointer\"\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\n >{{ option }}</span\n >\n }\n </div>\n }\n </div>\n <span\n >Rows |\n {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n {{\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n }}\n of\n {{ totalRecords }} Entries</span\n >\n </div>\n <div class=\"pagination_form\">\n <!-- <span>Page</span> -->\n\n <button class=\"outlined_btn first_btn\" type=\"button\" (click)=\"onBtFirstClick()\" [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\">\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn prev_btn\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n type=\"button\"\n (click)=\"onBtPrevClick()\"\n >\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n </button>\n <div>\n <input\n class=\"input_style\"\n type=\"number\"\n [(ngModel)]=\"pageDetails.currentPage\"\n (change)=\"goToSelectedPage($event)\"\n name=\"\"\n id=\"\"\n />\n </div>\n <button\n class=\"outlined_btn next_btn\"\n type=\"button\"\n [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n <button class=\"outlined_btn last_btn\" type=\"button\" (click)=\"onBtLastClick()\" \n [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\">\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"dropdown_wrapper d-none\">\n <div class=\"right_click_dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/scissors.svg\" />\n <span class=\"text\">Cut</span>\n </div>\n\n <span class=\"right_item\">Ctrl+X</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy</span>\n </div>\n\n <span class=\"right_item\">Ctrl+C</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Group Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/clipboard.svg\" alt=\"\" />\n <span class=\"text\">Paste</span>\n </div>\n\n <span class=\"right_item\">Ctrl+V</span>\n </div>\n\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/bar-chart.svg\" alt=\"\" />\n <span class=\"text\">Chart</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/download.svg\" alt=\"\" />\n <span class=\"text\">Export</span>\n </div>\n\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Chart section Start Here -->\n <div class=\"second_dropdown\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <span class=\"text\">Column</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Bar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Pie</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Line</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Area</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">XY(Scatter)</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Polar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stastical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Hierarchical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Specialized</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Funnel</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Combination</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Export Section start Here -->\n <div class=\"export_section d-none\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">CSV Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">Excel Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Column Group Section Start Here -->\n <div class=\"third_dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Grouped</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stacked</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">100% Stacked</span>\n </div>\n </div>\n </div>\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.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.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);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.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{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:calc(.8333333333rem / var(--scale));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))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CommonCalendarComponent, selector: "lib-common-calendar", inputs: ["dateConfig", "minDate", "maxDate", "preSelectedValue"], outputs: ["dateTimeSelected", "clearDateEvent"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "component", type: CommonInputComponent, selector: "lib-common-input", inputs: ["options", "selectedValue", "placeholder", "elementType"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
2449
2460
  }
2450
2461
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CatsDataGridComponent, decorators: [{
2451
2462
  type: Component,
@@ -2458,7 +2469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2458
2469
  RendererParserDirective,
2459
2470
  AddClassPipe,
2460
2471
  CommonInputComponent,
2461
- ], template: "<div class=\"tableArea\" #table>\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting_options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"column_header\">Select Headers</div>\n <div class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n />\n <span>Select All</span>\n </div>\n\n <div class=\"item_container\" id=\"table_scroll\">\n @for (col of colDefs; track col.colId) {\n <div class=\"column_item checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n (change)=\"changeActiveColSelection($event, col)\"\n [disabled]=\"col.headerLocked\"\n />\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n </div>\n }\n @if (groupByRequired) {\n <!-- Group Panel -->\n <div\n class=\"group_panel\"\n (dragover)=\"onGroupDragOver($event)\"\n (drop)=\"onGroupDrop($event)\"\n >\n <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n @for (g of activeGroups; track $index) {\n <div\n class=\"group_tag\"\n draggable=\"true\"\n (dragstart)=\"onGroupDragStart($event, $index)\"\n (dragover)=\"onActiveDragOver($event, $index)\"\n (drop)=\"onActiveGroupDrop($event, $index)\"\n >\n <img src=\"images/t-gripper.svg\" alt=\"\" />\n <span>{{ g.headerName }}</span>\n <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n }\n @if (activeGroups.length === 0) {\n <div class=\"group_placeholder\">Drag here to set row groups</div>\n }\n </div>\n }\n @if (activeFilters.size > 0) {\n <div class=\"active_filters_container\">\n <div class=\"tag_wrapper\">\n @for (filter of appliedFilters; track filter.fieldName) {\n <div class=\"active_filter_tag\">\n <div class=\"active_filter_label ellipsis\">\n @for (item of filter.filters; track $index) {\n @if (item.filterValue) {\n @if ($index > 0 && item.filterValue) {\n <span class=\"filter_logic\"> {{ filter.filterLogic }} </span>\n }\n <span class=\"filter_field\">{{ filter.fieldName }}:</span>\n <span class=\"\"> {{ item.filterOperation }}</span>\n <span class=\"filter_value\">{{ item.filterValue }}</span>\n }\n }\n </div>\n <button\n class=\"remove_filter_btn\"\n (click)=\"removeActiveFilter(filter)\"\n >\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n }\n </div>\n <div class=\"clear_all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n </div>\n }\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n #parent\n (scroll)=\"infinityScroll($event)\"\n [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n [class.no-horizontal-scroll]=\"\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n \"\n >\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\">\n <thead class=\"sticky-top\">\n <tr>\n @if (\n checkBoxSelection &&\n checkboxSelectionType == \"multiple\" &&\n atLeastOneColumnChecked\n ) {\n <th style=\"min-width: 50px; width: 50px\">\n <div class=\"th_wraper\">\n <span class=\"checkbox_container\"\n ><input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n name=\"\"\n id=\"\"\n [checked]=\"checkAllSelected()\"\n [indeterminate]=\"checkInterminate()\"\n (change)=\"onHeaderCheckboxChange($event)\"\n /></span>\n <div class=\"filter_three_dot_wrapper\">\n <span class=\"resize-handle default_cursor\"> | </span>\n </div>\n </div>\n </th>\n }\n @else{\n @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)\"\n (dragend)=\"onDragEnd()\"\n (mouseenter)=\"enableColumnDrag($event, $index)\"\n (mouseleave)=\"disableColumnDrag($event, $index)\"\n />\n }\n <span class=\"ellipsis headerName\">{{\n col?.headerName\n }}</span>\n\n @if (\n sortingRequired &&\n sortingColumnIndex == $index &&\n col?.sortable &&\n !col.isAction\n ) {\n <span class=\"sorting_icon\">\n @if (sortingType[$index] === \"asc\") {\n <img\n src=\"images/t-arrow-up.svg\"\n class=\"sorting_up\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (sortingType[$index] === \"dsc\") {\n <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n <img\n src=\"images/t-arrow-down.svg\"\n class=\"sorting_down\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n </span>\n }\n </div>\n <div class=\"filter_three_dot_wrapper\">\n <!-- Column Filters Logic-->\n @if (filterRequired && col.filterable) {\n <div\n #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, $index, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n } @else {\n <img\n src=\"images/t-filter.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (activeFilterIndex === $index) {\n <div class=\"filt_wrap\">\n <div\n adaptivePosition\n [trigger]=\"trigger\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n class=\"filter_wrapper\"\n id=\"filter_wrapper-{{ $index }}\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index\">AND</label>\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index + 1\">OR</label>\n </div>\n\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n }\n }\n\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index\">AND</label>\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index + 1\">OR</label>\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n }\n }\n\n <!-- DATE FILTER -->\n @if (col.filterType === \"date\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters()\"\n /> -->\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n [preSelectedValue]=\"\n col.filters[0].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index\">AND</label>\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index + 1\">OR</label>\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n [preSelectedValue]=\"\n col.filters[1].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n }\n }\n\n <!-- SET FILTER (CHECKBOX LIST) -->\n @if (col.filterType === \"set\") {\n <!-- <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n /> -->\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n\n <div class=\"set_option_details\">\n <label class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"toggleSelectAll(col, $event)\"\n />\n (Select All)\n </label>\n <div class=\"set_options\" id=\"table_scroll\">\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues.has(opt)\n \"\n (change)=\"\n toggleSetOption(col, opt, $event)\n \"\n />\n {{ opt }}\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter_btn\">\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"resetFilter(col)\"\n >\n Reset\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired && col.columnAction) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, $index)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n @if (!col.isAction) {\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, $index)\"\n >\n |\n </span>\n }\n </div>\n </div>\n\n <!-- popup open -->\n @if (menuVisible[$index]) {\n <div\n #colActionMenu\n class=\"dropdown_wrapper\"\n adaptivePosition\n [trigger]=\"triggerColMenu\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n [isColumnActionMenu]=\"true\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <div class=\"right_click_dropdown\" id=\"table_scroll\">\n @if (\n sortingType[$index] === \"dsc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', $index)\"\n >\n <div class=\"left_item\">\n <img\n src=\"images/arrow-up.svg\"\n class=\"sorting_up\"\n [ngClass]=\"{ disable: !col.sortable }\"\n />\n <span class=\"text\">Sort Ascending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n <div class=\"divder\"></div>\n\n <div\n class=\"right_click_item\"\n (mouseenter)=\"showPinActions($event)\"\n (mouseleave)=\"hidePinActions()\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" />\n @if (showPin) {\n <div class=\"second_dropdown\" #pinMenu>\n <div\n (click)=\"pinColumn(col, $index, 'none')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n (pinActionClicked[col.colId] ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'left')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"left\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'right')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"right\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Right</span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'left')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">{{\n col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n }}</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'right')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">\n {{\n col.rightPinned\n ? \"Unpin Right Column\"\n : \"Pin Column Right\"\n }}\n </span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/arrow-right.svg\" alt=\"\" />\n </div>\n </div> -->\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n [ngClass]=\"{ disabled_option: !groupByRequired }\"\n >\n <div\n class=\"left_item\"\n (click)=\"groupByColumnAction(col, $index)\"\n >\n <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n <span class=\"text\"\n >Group by {{ col.headerName }}</span\n >\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/t-choose-column.svg\" alt=\"\" />\n <span class=\"text\">Choose Columns</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Reset Columns</span>\n </div>\n </div>\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @if (groupedResult && groupedResult.length > 0) {\n @for (group of groupedResult; track group.key) {\n <tr (click)=\"toggleGroup(group)\">\n <td\n class=\"group-cell\"\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n group.expanded\n ? 'chevron-down.svg'\n : 'chevron-right.svg'\n }}\"\n />\n {{ group.key }} ({{ group.children.length }})\n </span>\n </td>\n </tr>\n\n @if (group.expanded) {\n <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n @if (group.children[0]?.children) {\n @for (child of group.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: 1,\n }\"\n ></ng-container>\n }\n }\n\n <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n @if (!group.children[0]?.children) {\n @for (row of group.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(row) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n }\n } @else {\n @for (data of rowData; track data.rowId) {\n <tr\n [ngClass]=\"data | addClass: tableOptions\"\n (dragover)=\"allowRowDrop($event)\"\n (drop)=\"dropRow(data)\"\n (click)=\"onRowClick(data)\"\n >\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px\">\n @if (checkboxSelectionType == \"multiple\") {\n <span class=\"checkbox_container\"\n ><input\n type=\"checkbox\"\n class=\"pointer custom_check_box\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [disabled]=\"data.isLocked\"\n [checked]=\"data.isSelected || data.isLocked\"\n (change)=\"onRowCheckboxSelection($event)\"\n /></span>\n } @else {\n <span class=\"radio_option\">\n <input\n type=\"radio\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [checked]=\"data?.isSelected\"\n (change)=\"onRowCheckboxSelection($event)\"\n />\n <label [for]=\"data.rowId\"></label>\n </span>\n }\n </td>\n }\n @for (col of colDefs; track col.colId) {\n @if (col.active) {\n <td (click)=\"onCellClick(data, col)\"\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(data) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n class=\"table_cell\"\n >\n <div class=\"col_wrapper\">\n @if (\n rowGripFieldName &&\n rowGripFieldName === col?.fieldName\n ) {\n <div\n [draggable]=\"true\"\n (dragstart)=\"dragRow($event, data)\"\n class=\"gripper\"\n >\n <img 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 {{ parseColValue(data, col) }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(data, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"data\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"data[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </div>\n <!-- Commented for later use -->\n <!-- <div class=\"tool_tip\">\n <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n </div> -->\n </td>\n }\n }\n </tr>\n }\n }\n </tbody>\n\n <ng-template\n #groupTemplate\n let-node\n let-colDefs=\"colDefs\"\n let-checkBoxSelection=\"checkBoxSelection\"\n let-activeGroups=\"activeGroups\"\n let-level=\"level\"\n >\n <!-- GROUP HEADER -->\n <tr (click)=\"toggleGroup(node)\">\n <td\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n [style.paddingLeft.px]=\"level * 20\"\n class=\"group-cell\"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n }}\"\n />\n {{ node.key }} ({{ node.children.length }})\n </span>\n </td>\n </tr>\n\n <!-- CHILDREN -->\n @if (node.expanded) {\n <!-- CASE: more groups -->\n @if (node.children[0]?.children) {\n @for (child of node.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: level + 1,\n }\"\n >\n </ng-container>\n }\n }\n\n <!-- CASE: final rows -->\n @if (!node.children[0]?.children) {\n @for (row of node.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"checkbox_container\">\n <input\n type=\"checkbox custom_check_box\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n </ng-template>\n </table>\n\n @if (\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n ) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n @if (tableOptions?.noDataTemplate) {\n <ng-container\n *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n ></ng-container>\n } @else {\n <span>No Data To Show</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n <!-- Table Wrapper Ends-->\n @if (paginationRequired) {\n <div class=\"pagination_main\">\n <div class=\"entries_details\">\n <span>Showing</span>\n <div class=\"pagination_select\">\n <div\n class=\"select_dropdown pointer\"\n (click)=\"showPageSizeList = !showPageSizeList\"\n >\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n <span class=\"chevron_img\">\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n </span>\n </div>\n @if (showPageSizeList) {\n <div\n class=\"select_option\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n @for (option of pageSizeList; track $index) {\n <span\n class=\"pointer\"\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\n >{{ option }}</span\n >\n }\n </div>\n }\n </div>\n <span\n >Rows |\n {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n {{\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n }}\n of\n {{ totalRecords }} Entries</span\n >\n </div>\n <div class=\"pagination_form\">\n <!-- <span>Page</span> -->\n\n <button class=\"outlined_btn first_btn\" type=\"button\" (click)=\"onBtFirstClick()\" [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\">\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn prev_btn\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n type=\"button\"\n (click)=\"onBtPrevClick()\"\n >\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n </button>\n <div>\n <input\n class=\"input_style\"\n type=\"number\"\n [(ngModel)]=\"pageDetails.currentPage\"\n (change)=\"goToSelectedPage($event)\"\n name=\"\"\n id=\"\"\n />\n </div>\n <button\n class=\"outlined_btn next_btn\"\n type=\"button\"\n [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n <button class=\"outlined_btn last_btn\" type=\"button\" (click)=\"onBtLastClick()\" \n [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\">\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"dropdown_wrapper d-none\">\n <div class=\"right_click_dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/scissors.svg\" />\n <span class=\"text\">Cut</span>\n </div>\n\n <span class=\"right_item\">Ctrl+X</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy</span>\n </div>\n\n <span class=\"right_item\">Ctrl+C</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Group Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/clipboard.svg\" alt=\"\" />\n <span class=\"text\">Paste</span>\n </div>\n\n <span class=\"right_item\">Ctrl+V</span>\n </div>\n\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/bar-chart.svg\" alt=\"\" />\n <span class=\"text\">Chart</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/download.svg\" alt=\"\" />\n <span class=\"text\">Export</span>\n </div>\n\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Chart section Start Here -->\n <div class=\"second_dropdown\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <span class=\"text\">Column</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Bar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Pie</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Line</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Area</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">XY(Scatter)</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Polar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stastical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Hierarchical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Specialized</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Funnel</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Combination</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Export Section start Here -->\n <div class=\"export_section d-none\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">CSV Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">Excel Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Column Group Section Start Here -->\n <div class=\"third_dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Grouped</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stacked</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">100% Stacked</span>\n </div>\n </div>\n </div>\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;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.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);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.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{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:calc(.8333333333rem / var(--scale));width:inherit;max-width:max-content}.tableArea .table_wrapper table tbody tr td .col_wrapper:has(.tag_wrapper){width:unset}.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))}\n"] }]
2472
+ ], template: "<div class=\"tableArea\" #table>\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting_options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"column_header\">Select Headers</div>\n <div class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n />\n <span>Select All</span>\n </div>\n\n <div class=\"item_container\" id=\"table_scroll\">\n @for (col of colDefs; track col.colId) {\n <div class=\"column_item checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n (change)=\"changeActiveColSelection($event, col)\"\n [disabled]=\"col.headerLocked\"\n />\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n </div>\n }\n @if (groupByRequired) {\n <!-- Group Panel -->\n <div\n class=\"group_panel\"\n (dragover)=\"onGroupDragOver($event)\"\n (drop)=\"onGroupDrop($event)\"\n >\n <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n @for (g of activeGroups; track $index) {\n <div\n class=\"group_tag\"\n draggable=\"true\"\n (dragstart)=\"onGroupDragStart($event, $index)\"\n (dragover)=\"onActiveDragOver($event, $index)\"\n (drop)=\"onActiveGroupDrop($event, $index)\"\n >\n <img src=\"images/t-gripper.svg\" alt=\"\" />\n <span>{{ g.headerName }}</span>\n <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n }\n @if (activeGroups.length === 0) {\n <div class=\"group_placeholder\">Drag here to set row groups</div>\n }\n </div>\n }\n @if (activeFilters.size > 0) {\n <div class=\"active_filters_container\">\n <div class=\"tag_wrapper\">\n @for (filter of appliedFilters; track filter.fieldName) {\n @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\"> {{ filter.filterLogic }} </span>\n }\n <span class=\"filter_field\">{{ filter.fieldName.split('.')[0] }}:</span>\n <span class=\"\"> {{ (item.filterOperation == '=' || item.filterOperation == 'equals') ? ':' : item.filterOperation }}</span>\n <span class=\"filter_value\">{{ item.filterValue }}</span>\n }\n }\n </div>\n <button\n class=\"remove_filter_btn\"\n (click)=\"removeActiveFilter(filter)\"\n >\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n } \n }\n </div>\n <div class=\"clear_all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n </div>\n }\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n #parent\n (scroll)=\"infinityScroll($event)\"\n [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n [class.no-horizontal-scroll]=\"\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n \"\n >\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\">\n <thead class=\"sticky-top\">\n <tr>\n @if (\n checkBoxSelection &&\n checkboxSelectionType == \"multiple\" &&\n atLeastOneColumnChecked\n ) {\n <th style=\"min-width: 50px; width: 50px\">\n <div class=\"th_wraper\">\n <span class=\"checkbox_container\"\n ><input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n name=\"\"\n id=\"\"\n [checked]=\"checkAllSelected()\"\n [indeterminate]=\"checkInterminate()\"\n (change)=\"onHeaderCheckboxChange($event)\"\n /></span>\n <div class=\"filter_three_dot_wrapper\">\n <span class=\"resize-handle default_cursor\"> | </span>\n </div>\n </div>\n </th>\n }\n @else{\n @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)\"\n (dragend)=\"onDragEnd()\"\n (mouseenter)=\"enableColumnDrag($event, $index)\"\n (mouseleave)=\"disableColumnDrag($event, $index)\"\n />\n }\n <span class=\"ellipsis headerName\">{{\n col?.headerName\n }}</span>\n\n @if (\n sortingRequired &&\n sortingColumnIndex == $index &&\n col?.sortable &&\n !col.isAction\n ) {\n <span class=\"sorting_icon\">\n @if (sortingType[$index] === \"asc\") {\n <img\n src=\"images/t-arrow-up.svg\"\n class=\"sorting_up\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (sortingType[$index] === \"dsc\") {\n <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n <img\n src=\"images/t-arrow-down.svg\"\n class=\"sorting_down\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n </span>\n }\n </div>\n <div class=\"filter_three_dot_wrapper\">\n <!-- Column Filters Logic-->\n @if (filterRequired && col.filterable) {\n <div\n #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, $index, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n } @else {\n <img\n src=\"images/t-filter.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (activeFilterIndex === $index) {\n <div class=\"filt_wrap\">\n <div\n adaptivePosition\n [trigger]=\"trigger\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n class=\"filter_wrapper\"\n id=\"filter_wrapper-{{ $index }}\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index\">AND</label>\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index + 1\">OR</label>\n </div>\n\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n }\n }\n\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index\">AND</label>\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index + 1\">OR</label>\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n }\n }\n\n <!-- DATE FILTER -->\n @if (col.filterType === \"date\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters()\"\n /> -->\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n [preSelectedValue]=\"\n col.filters[0].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index\">AND</label>\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"$index + 1\">OR</label>\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n [preSelectedValue]=\"\n col.filters[1].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n }\n }\n\n <!-- SET FILTER (CHECKBOX LIST) -->\n @if (col.filterType === \"set\") {\n <!-- <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n /> -->\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n\n <div class=\"set_option_details\">\n <label class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"toggleSelectAll(col, $event)\"\n />\n (Select All)\n </label>\n <div class=\"set_options\" id=\"table_scroll\">\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues.has(opt)\n \"\n (change)=\"\n toggleSetOption(col, opt, $event)\n \"\n />\n {{ opt }}\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter_btn\">\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"resetFilter(col)\"\n >\n Reset\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired && col.columnAction) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, $index)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n @if (!col.isAction) {\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, $index)\"\n >\n |\n </span>\n }\n </div>\n </div>\n\n <!-- popup open -->\n @if (menuVisible[$index]) {\n <div\n #colActionMenu\n class=\"dropdown_wrapper\"\n adaptivePosition\n [trigger]=\"triggerColMenu\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n [isColumnActionMenu]=\"true\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <div class=\"right_click_dropdown\" id=\"table_scroll\">\n @if (\n sortingType[$index] === \"dsc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', $index)\"\n >\n <div class=\"left_item\">\n <img\n src=\"images/arrow-up.svg\"\n class=\"sorting_up\"\n [ngClass]=\"{ disable: !col.sortable }\"\n />\n <span class=\"text\">Sort Ascending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n <div class=\"divder\"></div>\n\n <div\n class=\"right_click_item\"\n (mouseenter)=\"showPinActions($event)\"\n (mouseleave)=\"hidePinActions()\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" />\n @if (showPin) {\n <div class=\"second_dropdown\" #pinMenu>\n <div\n (click)=\"pinColumn(col, $index, 'none')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n (pinActionClicked[col.colId] ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'left')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"left\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'right')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"right\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Right</span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'left')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">{{\n col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n }}</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'right')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">\n {{\n col.rightPinned\n ? \"Unpin Right Column\"\n : \"Pin Column Right\"\n }}\n </span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/arrow-right.svg\" alt=\"\" />\n </div>\n </div> -->\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n [ngClass]=\"{ disabled_option: !groupByRequired }\"\n >\n <div\n class=\"left_item\"\n (click)=\"groupByColumnAction(col, $index)\"\n >\n <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n <span class=\"text\"\n >Group by {{ col.headerName }}</span\n >\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/t-choose-column.svg\" alt=\"\" />\n <span class=\"text\">Choose Columns</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Reset Columns</span>\n </div>\n </div>\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @if (groupedResult && groupedResult.length > 0) {\n @for (group of groupedResult; track group.key) {\n <tr (click)=\"toggleGroup(group)\">\n <td\n class=\"group-cell\"\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n group.expanded\n ? 'chevron-down.svg'\n : 'chevron-right.svg'\n }}\"\n />\n {{ group.key }} ({{ group.children.length }})\n </span>\n </td>\n </tr>\n\n @if (group.expanded) {\n <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n @if (group.children[0]?.children) {\n @for (child of group.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: 1,\n }\"\n ></ng-container>\n }\n }\n\n <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n @if (!group.children[0]?.children) {\n @for (row of group.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(row) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n }\n } @else {\n @for (data of rowData; track data.rowId) {\n <tr\n [ngClass]=\"data | addClass: tableOptions\"\n (dragover)=\"allowRowDrop($event)\"\n (drop)=\"dropRow(data)\"\n (click)=\"onRowClick(data)\"\n >\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px\">\n @if (checkboxSelectionType == \"multiple\") {\n <span class=\"checkbox_container\"\n ><input\n type=\"checkbox\"\n class=\"pointer custom_check_box\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [disabled]=\"data.isLocked\"\n [checked]=\"data.isSelected || data.isLocked\"\n (change)=\"onRowCheckboxSelection($event)\"\n /></span>\n } @else {\n <span class=\"radio_option\">\n <input\n type=\"radio\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [checked]=\"data?.isSelected\"\n (change)=\"onRowCheckboxSelection($event)\"\n />\n <label [for]=\"data.rowId\"></label>\n </span>\n }\n </td>\n }\n @for (col of colDefs; track col.colId) {\n @if (col.active) {\n <td (click)=\"onCellClick(data, col)\"\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(data) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n class=\"table_cell\"\n >\n <div class=\"col_wrapper\">\n @if (\n rowGripFieldName &&\n rowGripFieldName === col?.fieldName\n ) {\n <div\n [draggable]=\"true\"\n (dragstart)=\"dragRow($event, data)\"\n class=\"gripper\"\n >\n <img 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 {{ parseColValue(data, col) }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(data, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"data\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"data[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </div>\n <!-- Commented for later use -->\n <!-- <div class=\"tool_tip\">\n <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n </div> -->\n </td>\n }\n }\n </tr>\n }\n }\n </tbody>\n\n <ng-template\n #groupTemplate\n let-node\n let-colDefs=\"colDefs\"\n let-checkBoxSelection=\"checkBoxSelection\"\n let-activeGroups=\"activeGroups\"\n let-level=\"level\"\n >\n <!-- GROUP HEADER -->\n <tr (click)=\"toggleGroup(node)\">\n <td\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n [style.paddingLeft.px]=\"level * 20\"\n class=\"group-cell\"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n }}\"\n />\n {{ node.key }} ({{ node.children.length }})\n </span>\n </td>\n </tr>\n\n <!-- CHILDREN -->\n @if (node.expanded) {\n <!-- CASE: more groups -->\n @if (node.children[0]?.children) {\n @for (child of node.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: level + 1,\n }\"\n >\n </ng-container>\n }\n }\n\n <!-- CASE: final rows -->\n @if (!node.children[0]?.children) {\n @for (row of node.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"checkbox_container\">\n <input\n type=\"checkbox custom_check_box\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n </ng-template>\n </table>\n\n @if (\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n ) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n @if (tableOptions?.noDataTemplate) {\n <ng-container\n *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n ></ng-container>\n } @else {\n <span>No Data To Show</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n <!-- Table Wrapper Ends-->\n @if (paginationRequired) {\n <div class=\"pagination_main\">\n <div class=\"entries_details\">\n <span>Showing</span>\n <div class=\"pagination_select\">\n <div\n class=\"select_dropdown pointer\"\n (click)=\"showPageSizeList = !showPageSizeList\"\n >\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n <span class=\"chevron_img\">\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n </span>\n </div>\n @if (showPageSizeList) {\n <div\n class=\"select_option\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n @for (option of pageSizeList; track $index) {\n <span\n class=\"pointer\"\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\n >{{ option }}</span\n >\n }\n </div>\n }\n </div>\n <span\n >Rows |\n {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n {{\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n }}\n of\n {{ totalRecords }} Entries</span\n >\n </div>\n <div class=\"pagination_form\">\n <!-- <span>Page</span> -->\n\n <button class=\"outlined_btn first_btn\" type=\"button\" (click)=\"onBtFirstClick()\" [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\">\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn prev_btn\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n type=\"button\"\n (click)=\"onBtPrevClick()\"\n >\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n </button>\n <div>\n <input\n class=\"input_style\"\n type=\"number\"\n [(ngModel)]=\"pageDetails.currentPage\"\n (change)=\"goToSelectedPage($event)\"\n name=\"\"\n id=\"\"\n />\n </div>\n <button\n class=\"outlined_btn next_btn\"\n type=\"button\"\n [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n <button class=\"outlined_btn last_btn\" type=\"button\" (click)=\"onBtLastClick()\" \n [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\">\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"dropdown_wrapper d-none\">\n <div class=\"right_click_dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/scissors.svg\" />\n <span class=\"text\">Cut</span>\n </div>\n\n <span class=\"right_item\">Ctrl+X</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy</span>\n </div>\n\n <span class=\"right_item\">Ctrl+C</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Group Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/clipboard.svg\" alt=\"\" />\n <span class=\"text\">Paste</span>\n </div>\n\n <span class=\"right_item\">Ctrl+V</span>\n </div>\n\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/bar-chart.svg\" alt=\"\" />\n <span class=\"text\">Chart</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/download.svg\" alt=\"\" />\n <span class=\"text\">Export</span>\n </div>\n\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Chart section Start Here -->\n <div class=\"second_dropdown\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <span class=\"text\">Column</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Bar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Pie</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Line</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Area</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">XY(Scatter)</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Polar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stastical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Hierarchical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Specialized</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Funnel</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Combination</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Export Section start Here -->\n <div class=\"export_section d-none\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">CSV Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">Excel Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Column Group Section Start Here -->\n <div class=\"third_dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Grouped</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stacked</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">100% Stacked</span>\n </div>\n </div>\n </div>\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.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.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);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.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{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:calc(.8333333333rem / var(--scale));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))}\n"] }]
2462
2473
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { pinMenu: [{
2463
2474
  type: ViewChild,
2464
2475
  args: ['pinMenu']
@@ -2562,6 +2573,9 @@ class CommonRendererComponent {
2562
2573
  get type() {
2563
2574
  return this.params?.cellParams?.type;
2564
2575
  }
2576
+ get subType() {
2577
+ return this.params?.cellParams?.subType;
2578
+ }
2565
2579
  /**
2566
2580
  * @description Returns the renderer subtype defined in cellRendererParams.
2567
2581
  * @author Anand Pandey
@@ -2782,6 +2796,7 @@ class CommonRendererComponent {
2782
2796
  return {
2783
2797
  [valueProp]: val[this.params.cellParams?.[key]],
2784
2798
  class: val['class'] || '',
2799
+ ...val
2785
2800
  };
2786
2801
  }
2787
2802
  else {
@@ -2794,6 +2809,7 @@ class CommonRendererComponent {
2794
2809
  {
2795
2810
  [valueProp]: value[this.params.cellParams?.[key]],
2796
2811
  class: value['class'] || '',
2812
+ ...value
2797
2813
  },
2798
2814
  ];
2799
2815
  }
@@ -2824,7 +2840,7 @@ class CommonRendererComponent {
2824
2840
  }
2825
2841
  }
2826
2842
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2827
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommonRendererComponent, isStandalone: true, selector: "lib-common-renderer", ngImport: i0, template: "<!-- Switch -->\n@if (type === \"switch\") {\n <div class=\"table_switch_wrapper\">\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n}\n\n<!-- Action Menu -->\n\n@if (type === \"action-menu\") {\n <div class=\"action-menu\">\n <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\n <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\n </button>\n\n @if (openActionMenu) {\n <div\n class=\"menu\"\n appOutsideClick\n (clickOutside)=\"clickOutside($event)\"\n adaptivePosition\n [trigger]=\"tagTrigger\"\n [isAction]=\"true\"\n [matchWidth]=\"false\"\n >\n <div class=\"item_wrapper\" id=\"table_scroll\">\n @for (act of actions; track $index) {\n <div\n class=\"{{ 'menu_item' + ' ' + act.class }}\"\n [ngClass]=\"{\n disabled_item:\n params?.data?.disabledActions?.includes(act.label) ||\n act.disabled,\n }\"\n (click)=\"onActionClick(act)\"\n >\n @if (act.icon) {\n <img src=\"images/{{ act.icon }}.svg\" />\n } @else {\n <img src=\"{{ act?.image }}\" />\n }\n\n <span class=\"ellipsis\">{{ act.label }}</span>\n </div>\n }\n </div>\n </div>\n }\n </div>\n}\n\n<!-- Tags -->\n\n@if (type === \"tag\") {\n <div\n class=\"tag_wrapper\"\n (mouseover)=\"toggleDropdown($event)\"\n (mouseout)=\"closeDropdown($event)\"\n #tagTrigger\n >\n @for (tag of visibleTags; track $index) {\n <div\n class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\n [ngClass]=\"paramsVal | addClass: params.cellParams\"\n >\n <!-- <span class=\"circle\"></span>\n <img src=\"images/home.svg\" alt=\"\" class=\"icon\" /> -->\n\n <div class=\"more_data_section\">\n <!-- <span class=\"textTruncate\"> {{ tag.tagValue }}</span> -->\n <div class=\"cell-value ellipsis\">\n <div class=\"more_data_wrapper textTruncate\">\n {{ tag.tagValue }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\"> {{ tag.tagValue }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n @if (hiddenCount > 0) {\n <div class=\"hidden_list\">\n <span class=\"tag_more\">+{{ hiddenCount }}</span>\n @if (openDropdown) {\n <div\n class=\"tag_dropdown\"\n id=\"table_scroll\"\n adaptivePosition\n [trigger]=\"tagTrigger\"\n [matchWidth]=\"false\"\n >\n @for (tag of allTags; track $index) {\n <div\n class=\"{{ 'dropdown_item' + ' ' + tag.class }}\"\n >\n {{ tag.tagValue }}\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n\n@if (type === \"link\") {\n <div class=\"more_data_section cell-value ellipsis\">\n <!-- @for (link of linkVal; track $index) { -->\n <div class=\"more_data_wrapper textTruncate\">\n <span\n class=\"grid-link\"\n (click)=\"linkSingleClick()\"\n (dblclick)=\"linkDoubleClick()\"\n >\n {{ linkVal }}\n </span>\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\"> {{ linkVal }}</span>\n </div>\n </div>\n <!-- } -->\n </div>\n}\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.action-menu{position:relative;text-align:center}.action-menu .action_dots{background:transparent;border:none;cursor:pointer}.action-menu .action_dots img{max-width:calc(1.3333333333rem / var(--scale))}.action-menu .menu{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;width:max-content;min-width:calc(10rem / var(--scale));max-width:calc(16.6666666667rem / var(--scale));position:absolute;top:calc(.8333333333rem / var(--scale))}.action-menu .menu .item_wrapper{position:relative;max-height:calc(20rem / var(--scale));overflow-y:auto;margin:calc(.3333333333rem / var(--scale)) 0}.action-menu .menu .item_wrapper .menu_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer;position:relative;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.action-menu .menu .item_wrapper .menu_item.disabled_item{color:var(--neutral-300);pointer-events:none}.action-menu .menu .item_wrapper .menu_item.disabled_item img{opacity:.3}.action-menu .menu .item_wrapper .menu_item:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .more_data_wrapper{max-width:calc(12.5rem / var(--scale))}.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: "pipe", type: AddClassPipe, name: "addClass" }] });
2843
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommonRendererComponent, isStandalone: true, selector: "lib-common-renderer", ngImport: i0, template: "<!-- Switch -->\n@if (type === \"switch\") {\n <div class=\"table_switch_wrapper\">\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n}\n\n<!-- Action Menu -->\n\n@if (type === \"action-menu\") {\n <div class=\"action-menu\">\n <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\n <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\n </button>\n\n @if (openActionMenu) {\n <div\n class=\"menu\"\n appOutsideClick\n (clickOutside)=\"clickOutside($event)\"\n adaptivePosition\n [trigger]=\"tagTrigger\"\n [isAction]=\"true\"\n [matchWidth]=\"false\"\n >\n <div class=\"item_wrapper\" id=\"table_scroll\">\n @for (act of actions; track $index) {\n <div\n class=\"{{ 'menu_item' + ' ' + act.class }}\"\n [ngClass]=\"{\n disabled_item:\n params?.data?.disabledActions?.includes(act.label) ||\n act.disabled,\n }\"\n (click)=\"onActionClick(act)\"\n >\n @if (act.icon) {\n <img src=\"images/{{ act.icon }}.svg\" />\n } @else {\n <img src=\"{{ act?.image }}\" />\n }\n\n <span class=\"ellipsis\">{{ act.label }}</span>\n </div>\n }\n </div>\n </div>\n }\n </div>\n}\n\n<!-- Tags -->\n\n@if (type === \"tag\") {\n <div\n class=\"tag_wrapper\"\n (mouseover)=\"toggleDropdown($event)\"\n (mouseout)=\"closeDropdown($event)\"\n #tagTrigger\n >\n @for (tag of visibleTags; track $index) {\n <div\n class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\n [ngClass]=\"paramsVal | addClass: params.cellParams\"\n >\n @if(subType === 'bedge') {\n <span class=\"circle\" [class]=\"tag.bedgeClass\"></span>\n }\n @if(tag.image){\n <img src=\"{{ tag.image }}\" alt=\"\" class=\"icon\" />\n }\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 {{ tag.tagValue }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\"> {{ tag.tagValue }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n @if (hiddenCount > 0) {\n <div class=\"hidden_list\">\n <span class=\"tag_more\">+{{ hiddenCount }}</span>\n @if (openDropdown) {\n <div\n class=\"tag_dropdown\"\n id=\"table_scroll\"\n adaptivePosition\n [trigger]=\"tagTrigger\"\n [matchWidth]=\"false\"\n >\n @for (tag of allTags; track $index) {\n <div\n class=\"{{ 'dropdown_item' + ' ' + tag.class }}\"\n >\n {{ tag.tagValue }}\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n\n@if (type === \"link\") {\n <div class=\"more_data_section cell-value ellipsis\">\n <!-- @for (link of linkVal; track $index) { -->\n <div class=\"more_data_wrapper textTruncate\">\n <span\n class=\"grid-link\"\n (click)=\"linkSingleClick()\"\n (dblclick)=\"linkDoubleClick()\"\n >\n {{ linkVal }}\n </span>\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\"> {{ linkVal }}</span>\n </div>\n </div>\n <!-- } -->\n </div>\n}\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.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 .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: "pipe", type: AddClassPipe, name: "addClass" }] });
2828
2844
  }
2829
2845
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonRendererComponent, decorators: [{
2830
2846
  type: Component,
@@ -2833,9 +2849,429 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2833
2849
  AdaptivePositionDirective,
2834
2850
  CommonModule,
2835
2851
  AddClassPipe,
2836
- ], template: "<!-- Switch -->\n@if (type === \"switch\") {\n <div class=\"table_switch_wrapper\">\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n}\n\n<!-- Action Menu -->\n\n@if (type === \"action-menu\") {\n <div class=\"action-menu\">\n <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\n <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\n </button>\n\n @if (openActionMenu) {\n <div\n class=\"menu\"\n appOutsideClick\n (clickOutside)=\"clickOutside($event)\"\n adaptivePosition\n [trigger]=\"tagTrigger\"\n [isAction]=\"true\"\n [matchWidth]=\"false\"\n >\n <div class=\"item_wrapper\" id=\"table_scroll\">\n @for (act of actions; track $index) {\n <div\n class=\"{{ 'menu_item' + ' ' + act.class }}\"\n [ngClass]=\"{\n disabled_item:\n params?.data?.disabledActions?.includes(act.label) ||\n act.disabled,\n }\"\n (click)=\"onActionClick(act)\"\n >\n @if (act.icon) {\n <img src=\"images/{{ act.icon }}.svg\" />\n } @else {\n <img src=\"{{ act?.image }}\" />\n }\n\n <span class=\"ellipsis\">{{ act.label }}</span>\n </div>\n }\n </div>\n </div>\n }\n </div>\n}\n\n<!-- Tags -->\n\n@if (type === \"tag\") {\n <div\n class=\"tag_wrapper\"\n (mouseover)=\"toggleDropdown($event)\"\n (mouseout)=\"closeDropdown($event)\"\n #tagTrigger\n >\n @for (tag of visibleTags; track $index) {\n <div\n class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\n [ngClass]=\"paramsVal | addClass: params.cellParams\"\n >\n <!-- <span class=\"circle\"></span>\n <img src=\"images/home.svg\" alt=\"\" class=\"icon\" /> -->\n\n <div class=\"more_data_section\">\n <!-- <span class=\"textTruncate\"> {{ tag.tagValue }}</span> -->\n <div class=\"cell-value ellipsis\">\n <div class=\"more_data_wrapper textTruncate\">\n {{ tag.tagValue }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\"> {{ tag.tagValue }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n @if (hiddenCount > 0) {\n <div class=\"hidden_list\">\n <span class=\"tag_more\">+{{ hiddenCount }}</span>\n @if (openDropdown) {\n <div\n class=\"tag_dropdown\"\n id=\"table_scroll\"\n adaptivePosition\n [trigger]=\"tagTrigger\"\n [matchWidth]=\"false\"\n >\n @for (tag of allTags; track $index) {\n <div\n class=\"{{ 'dropdown_item' + ' ' + tag.class }}\"\n >\n {{ tag.tagValue }}\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n\n@if (type === \"link\") {\n <div class=\"more_data_section cell-value ellipsis\">\n <!-- @for (link of linkVal; track $index) { -->\n <div class=\"more_data_wrapper textTruncate\">\n <span\n class=\"grid-link\"\n (click)=\"linkSingleClick()\"\n (dblclick)=\"linkDoubleClick()\"\n >\n {{ linkVal }}\n </span>\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\"> {{ linkVal }}</span>\n </div>\n </div>\n <!-- } -->\n </div>\n}\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.action-menu{position:relative;text-align:center}.action-menu .action_dots{background:transparent;border:none;cursor:pointer}.action-menu .action_dots img{max-width:calc(1.3333333333rem / var(--scale))}.action-menu .menu{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;width:max-content;min-width:calc(10rem / var(--scale));max-width:calc(16.6666666667rem / var(--scale));position:absolute;top:calc(.8333333333rem / var(--scale))}.action-menu .menu .item_wrapper{position:relative;max-height:calc(20rem / var(--scale));overflow-y:auto;margin:calc(.3333333333rem / var(--scale)) 0}.action-menu .menu .item_wrapper .menu_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer;position:relative;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.action-menu .menu .item_wrapper .menu_item.disabled_item{color:var(--neutral-300);pointer-events:none}.action-menu .menu .item_wrapper .menu_item.disabled_item img{opacity:.3}.action-menu .menu .item_wrapper .menu_item:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .more_data_wrapper{max-width:calc(12.5rem / var(--scale))}.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"] }]
2852
+ ], template: "<!-- Switch -->\n@if (type === \"switch\") {\n <div class=\"table_switch_wrapper\">\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n}\n\n<!-- Action Menu -->\n\n@if (type === \"action-menu\") {\n <div class=\"action-menu\">\n <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\n <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\n </button>\n\n @if (openActionMenu) {\n <div\n class=\"menu\"\n appOutsideClick\n (clickOutside)=\"clickOutside($event)\"\n adaptivePosition\n [trigger]=\"tagTrigger\"\n [isAction]=\"true\"\n [matchWidth]=\"false\"\n >\n <div class=\"item_wrapper\" id=\"table_scroll\">\n @for (act of actions; track $index) {\n <div\n class=\"{{ 'menu_item' + ' ' + act.class }}\"\n [ngClass]=\"{\n disabled_item:\n params?.data?.disabledActions?.includes(act.label) ||\n act.disabled,\n }\"\n (click)=\"onActionClick(act)\"\n >\n @if (act.icon) {\n <img src=\"images/{{ act.icon }}.svg\" />\n } @else {\n <img src=\"{{ act?.image }}\" />\n }\n\n <span class=\"ellipsis\">{{ act.label }}</span>\n </div>\n }\n </div>\n </div>\n }\n </div>\n}\n\n<!-- Tags -->\n\n@if (type === \"tag\") {\n <div\n class=\"tag_wrapper\"\n (mouseover)=\"toggleDropdown($event)\"\n (mouseout)=\"closeDropdown($event)\"\n #tagTrigger\n >\n @for (tag of visibleTags; track $index) {\n <div\n class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\n [ngClass]=\"paramsVal | addClass: params.cellParams\"\n >\n @if(subType === 'bedge') {\n <span class=\"circle\" [class]=\"tag.bedgeClass\"></span>\n }\n @if(tag.image){\n <img src=\"{{ tag.image }}\" alt=\"\" class=\"icon\" />\n }\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 {{ tag.tagValue }}\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\"> {{ tag.tagValue }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n @if (hiddenCount > 0) {\n <div class=\"hidden_list\">\n <span class=\"tag_more\">+{{ hiddenCount }}</span>\n @if (openDropdown) {\n <div\n class=\"tag_dropdown\"\n id=\"table_scroll\"\n adaptivePosition\n [trigger]=\"tagTrigger\"\n [matchWidth]=\"false\"\n >\n @for (tag of allTags; track $index) {\n <div\n class=\"{{ 'dropdown_item' + ' ' + tag.class }}\"\n >\n {{ tag.tagValue }}\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n\n@if (type === \"link\") {\n <div class=\"more_data_section cell-value ellipsis\">\n <!-- @for (link of linkVal; track $index) { -->\n <div class=\"more_data_wrapper textTruncate\">\n <span\n class=\"grid-link\"\n (click)=\"linkSingleClick()\"\n (dblclick)=\"linkDoubleClick()\"\n >\n {{ linkVal }}\n </span>\n </div>\n <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\"> {{ linkVal }}</span>\n </div>\n </div>\n <!-- } -->\n </div>\n}\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.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 .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"] }]
2837
2853
  }] });
2838
2854
 
2855
+ class TooltipComponent {
2856
+ content = '';
2857
+ position = 'top';
2858
+ bgColor = '#333333';
2859
+ textColor = '#ffffff';
2860
+ padding = '8px 12px';
2861
+ fontSize = '12px';
2862
+ borderRadius = '4px';
2863
+ maxWidth = '300px';
2864
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2865
+ 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: `
2866
+ <div
2867
+ class="app-tooltip-wrapper"
2868
+ [ngClass]="'tooltip-' + position"
2869
+ [style.background-color]="bgColor"
2870
+ [style.color]="textColor"
2871
+ [style.padding]="padding"
2872
+ [style.font-size]="fontSize"
2873
+ [style.border-radius]="borderRadius"
2874
+ [style.max-width]="maxWidth"
2875
+ >
2876
+ {{ content }}
2877
+ <div class="tooltip-arrow"></div>
2878
+ </div>
2879
+ `, 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"] }], encapsulation: i0.ViewEncapsulation.None });
2880
+ }
2881
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, decorators: [{
2882
+ type: Component,
2883
+ args: [{ selector: 'app-tooltip', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: `
2884
+ <div
2885
+ class="app-tooltip-wrapper"
2886
+ [ngClass]="'tooltip-' + position"
2887
+ [style.background-color]="bgColor"
2888
+ [style.color]="textColor"
2889
+ [style.padding]="padding"
2890
+ [style.font-size]="fontSize"
2891
+ [style.border-radius]="borderRadius"
2892
+ [style.max-width]="maxWidth"
2893
+ >
2894
+ {{ content }}
2895
+ <div class="tooltip-arrow"></div>
2896
+ </div>
2897
+ `, 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"] }]
2898
+ }], propDecorators: { content: [{
2899
+ type: Input
2900
+ }], position: [{
2901
+ type: Input
2902
+ }], bgColor: [{
2903
+ type: Input
2904
+ }], textColor: [{
2905
+ type: Input
2906
+ }], padding: [{
2907
+ type: Input
2908
+ }], fontSize: [{
2909
+ type: Input
2910
+ }], borderRadius: [{
2911
+ type: Input
2912
+ }], maxWidth: [{
2913
+ type: Input
2914
+ }] } });
2915
+
2916
+ class TooltipDirective {
2917
+ elementRef;
2918
+ renderer;
2919
+ appRef;
2920
+ injector;
2921
+ ngZone;
2922
+ content = '';
2923
+ tooltipPosition = 'adaptive';
2924
+ tooltipDelay = 300; // milliseconds
2925
+ tooltipBgColor = '#333333';
2926
+ tooltipTextColor = '#ffffff';
2927
+ tooltipPadding = '8px 12px';
2928
+ tooltipFontSize = '12px';
2929
+ tooltipBorderRadius = '4px';
2930
+ tooltipMaxWidth = '300px';
2931
+ followCursor = true;
2932
+ tooltipParentContainer = null;
2933
+ tooltipElement = null;
2934
+ showTimeout;
2935
+ elementRect = null;
2936
+ currentPosition = 'top';
2937
+ componentRef = null;
2938
+ cursorX = 0;
2939
+ cursorY = 0;
2940
+ isTooltipShown = false;
2941
+ constructor(elementRef, renderer, appRef, injector, ngZone) {
2942
+ this.elementRef = elementRef;
2943
+ this.renderer = renderer;
2944
+ this.appRef = appRef;
2945
+ this.injector = injector;
2946
+ this.ngZone = ngZone;
2947
+ }
2948
+ ngOnInit() {
2949
+ this.renderer.addClass(this.elementRef.nativeElement, 'tooltip-trigger');
2950
+ }
2951
+ onMouseEnter(event) {
2952
+ if (!this.content)
2953
+ return;
2954
+ this.cursorX = event.clientX;
2955
+ this.cursorY = event.clientY;
2956
+ this.showTimeout = setTimeout(() => {
2957
+ this.show();
2958
+ }, this.tooltipDelay);
2959
+ }
2960
+ onMouseLeave() {
2961
+ clearTimeout(this.showTimeout);
2962
+ this.hide();
2963
+ }
2964
+ onMouseMove(event) {
2965
+ if (!this.isTooltipShown || !this.followCursor)
2966
+ return;
2967
+ this.cursorX = event.clientX;
2968
+ this.cursorY = event.clientY;
2969
+ this.positionTooltip();
2970
+ }
2971
+ show() {
2972
+ if (this.tooltipElement)
2973
+ return;
2974
+ this.elementRect = this.elementRef.nativeElement.getBoundingClientRect();
2975
+ // Use NgZone to avoid change detection issues
2976
+ this.ngZone.run(() => {
2977
+ try {
2978
+ // Create tooltip component with proper injector
2979
+ const componentRef = createComponent(TooltipComponent, {
2980
+ environmentInjector: this.appRef.injector,
2981
+ });
2982
+ // Configure component instance
2983
+ componentRef.instance.content = this.content;
2984
+ componentRef.instance.bgColor = this.tooltipBgColor;
2985
+ componentRef.instance.textColor = this.tooltipTextColor;
2986
+ componentRef.instance.padding = this.tooltipPadding;
2987
+ componentRef.instance.fontSize = this.tooltipFontSize;
2988
+ componentRef.instance.borderRadius = this.tooltipBorderRadius;
2989
+ componentRef.instance.maxWidth = this.tooltipMaxWidth;
2990
+ // Calculate adaptive position before rendering
2991
+ this.currentPosition = this.calculateAdaptivePosition();
2992
+ componentRef.instance.position = this.currentPosition;
2993
+ // Mark for check
2994
+ componentRef.changeDetectorRef.detectChanges();
2995
+ // Get the DOM element
2996
+ this.tooltipElement = componentRef.location.nativeElement.querySelector('.app-tooltip-wrapper');
2997
+ // If direct query didn't work, try the root element
2998
+ if (!this.tooltipElement) {
2999
+ this.tooltipElement = componentRef.location.nativeElement.children[0];
3000
+ }
3001
+ // If still not found, use the whole element
3002
+ if (!this.tooltipElement) {
3003
+ this.tooltipElement = componentRef.location.nativeElement;
3004
+ }
3005
+ // Append to body to avoid layout issues
3006
+ this.renderer.appendChild(document.body, componentRef.location.nativeElement);
3007
+ // Position the tooltip
3008
+ this.isTooltipShown = true;
3009
+ this.positionTooltip();
3010
+ // Store reference for cleanup
3011
+ this.componentRef = componentRef;
3012
+ }
3013
+ catch (error) {
3014
+ console.warn('Tooltip directive: Error creating tooltip component', error);
3015
+ // Fallback silent fail - tooltip just won't show but app continues
3016
+ }
3017
+ });
3018
+ }
3019
+ calculateAdaptivePosition() {
3020
+ if (this.tooltipPosition !== 'adaptive') {
3021
+ return this.tooltipPosition;
3022
+ }
3023
+ if (!this.elementRect)
3024
+ return 'top';
3025
+ // Find the parent container with overflow or positioning context
3026
+ const parentContainer = this.findParentContainer();
3027
+ const parentRect = parentContainer.getBoundingClientRect();
3028
+ const threshold = 120; // minimum space needed
3029
+ const gap = 10;
3030
+ // Calculate available space within parent container
3031
+ const spaceAbove = this.elementRect.top - parentRect.top;
3032
+ const spaceBelow = parentRect.bottom - this.elementRect.bottom;
3033
+ const spaceLeft = this.elementRect.left - parentRect.left;
3034
+ const spaceRight = parentRect.right - this.elementRect.right;
3035
+ // Prefer vertical positions if there's adequate space
3036
+ if (spaceBelow >= threshold)
3037
+ return 'bottom';
3038
+ if (spaceAbove >= threshold)
3039
+ return 'top';
3040
+ // Fall back to horizontal positions
3041
+ if (spaceRight >= threshold)
3042
+ return 'right';
3043
+ if (spaceLeft >= threshold)
3044
+ return 'left';
3045
+ // If no position has enough space, use the direction with most available space
3046
+ const spaces = {
3047
+ top: spaceAbove,
3048
+ bottom: spaceBelow,
3049
+ left: spaceLeft,
3050
+ right: spaceRight,
3051
+ };
3052
+ const bestPosition = Object.keys(spaces).reduce((prev, curr) => (spaces[curr] > spaces[prev] ? curr : prev));
3053
+ return bestPosition;
3054
+ }
3055
+ findParentContainer() {
3056
+ // If a parent container is explicitly provided, use it
3057
+ if (this.tooltipParentContainer) {
3058
+ return this.tooltipParentContainer;
3059
+ }
3060
+ let element = this.elementRef.nativeElement.parentElement;
3061
+ // Traverse up the DOM to find a scrollable or positioned container
3062
+ while (element) {
3063
+ const style = window.getComputedStyle(element);
3064
+ const isScrollable = element.scrollHeight > element.clientHeight ||
3065
+ element.scrollWidth > element.clientWidth;
3066
+ const isPositioned = style.position === 'absolute' ||
3067
+ style.position === 'relative' ||
3068
+ style.position === 'fixed';
3069
+ if (isScrollable || isPositioned) {
3070
+ return element;
3071
+ }
3072
+ element = element.parentElement;
3073
+ }
3074
+ // If no container found, use the document body
3075
+ return document.body;
3076
+ }
3077
+ positionTooltip() {
3078
+ if (!this.tooltipElement)
3079
+ return;
3080
+ // Use requestAnimationFrame to ensure DOM is ready
3081
+ requestAnimationFrame(() => {
3082
+ if (!this.tooltipElement)
3083
+ return;
3084
+ const tooltipRect = this.tooltipElement.getBoundingClientRect();
3085
+ // If tooltip isn't rendered yet, retry
3086
+ if (tooltipRect.width === 0 || tooltipRect.height === 0) {
3087
+ requestAnimationFrame(() => this.positionTooltip());
3088
+ return;
3089
+ }
3090
+ const gap = 10;
3091
+ const offset = 15; // Offset from cursor
3092
+ let top = 0;
3093
+ let left = 0;
3094
+ let finalPosition = this.currentPosition;
3095
+ if (this.followCursor) {
3096
+ // Position tooltip relative to cursor
3097
+ const preferredPosition = this.currentPosition;
3098
+ switch (preferredPosition) {
3099
+ case 'top':
3100
+ top = this.cursorY - tooltipRect.height - gap;
3101
+ left = this.cursorX - tooltipRect.width / 2;
3102
+ break;
3103
+ case 'bottom':
3104
+ top = this.cursorY + offset;
3105
+ left = this.cursorX - tooltipRect.width / 2;
3106
+ break;
3107
+ case 'left':
3108
+ top = this.cursorY - tooltipRect.height / 2;
3109
+ left = this.cursorX - tooltipRect.width - gap;
3110
+ break;
3111
+ case 'right':
3112
+ top = this.cursorY - tooltipRect.height / 2;
3113
+ left = this.cursorX + offset;
3114
+ break;
3115
+ }
3116
+ }
3117
+ else if (this.elementRect) {
3118
+ // Position tooltip relative to element
3119
+ switch (this.currentPosition) {
3120
+ case 'top':
3121
+ top = this.elementRect.top - tooltipRect.height - gap;
3122
+ left = this.elementRect.left + this.elementRect.width / 2 - tooltipRect.width / 2;
3123
+ break;
3124
+ case 'bottom':
3125
+ top = this.elementRect.bottom + gap;
3126
+ left = this.elementRect.left + this.elementRect.width / 2 - tooltipRect.width / 2;
3127
+ break;
3128
+ case 'left':
3129
+ top = this.elementRect.top + this.elementRect.height / 2 - tooltipRect.height / 2;
3130
+ left = this.elementRect.left - tooltipRect.width - gap;
3131
+ break;
3132
+ case 'right':
3133
+ top = this.elementRect.top + this.elementRect.height / 2 - tooltipRect.height / 2;
3134
+ left = this.elementRect.right + gap;
3135
+ break;
3136
+ }
3137
+ }
3138
+ // Adjust for parent container and viewport boundaries
3139
+ const parentContainer = this.findParentContainer();
3140
+ const parentRect = parentContainer.getBoundingClientRect();
3141
+ const windowHeight = window.innerHeight;
3142
+ const windowWidth = window.innerWidth;
3143
+ const padding = 5;
3144
+ let arrowPos = 'center';
3145
+ // Use parent container bounds if available, otherwise use window bounds
3146
+ const containerTop = Math.max(parentRect.top, 0);
3147
+ const containerBottom = Math.min(parentRect.bottom, windowHeight);
3148
+ const containerLeft = Math.max(parentRect.left, 0);
3149
+ const containerRight = Math.min(parentRect.right, windowWidth);
3150
+ // Check vertical boundaries within container and adjust position if needed
3151
+ if (top < containerTop + padding) {
3152
+ top = containerTop + padding;
3153
+ if (this.currentPosition === 'top') {
3154
+ finalPosition = 'bottom';
3155
+ if (this.followCursor) {
3156
+ top = this.cursorY + offset;
3157
+ }
3158
+ else if (this.elementRect) {
3159
+ top = this.elementRect.bottom + gap;
3160
+ }
3161
+ }
3162
+ arrowPos = 'top-adjust';
3163
+ }
3164
+ else if (top + tooltipRect.height > containerBottom - padding) {
3165
+ top = containerBottom - tooltipRect.height - padding;
3166
+ if (this.currentPosition === 'bottom') {
3167
+ finalPosition = 'top';
3168
+ if (this.followCursor) {
3169
+ top = this.cursorY - tooltipRect.height - gap;
3170
+ }
3171
+ else if (this.elementRect) {
3172
+ top = this.elementRect.top - tooltipRect.height - gap;
3173
+ }
3174
+ }
3175
+ arrowPos = 'bottom-adjust';
3176
+ }
3177
+ // Check horizontal boundaries within container and adjust position if needed
3178
+ if (left < containerLeft + padding) {
3179
+ left = containerLeft + padding;
3180
+ if (this.currentPosition === 'left') {
3181
+ finalPosition = 'right';
3182
+ if (this.followCursor) {
3183
+ left = this.cursorX + offset;
3184
+ }
3185
+ else if (this.elementRect) {
3186
+ left = this.elementRect.right + gap;
3187
+ }
3188
+ }
3189
+ arrowPos = 'left-adjust';
3190
+ }
3191
+ else if (left + tooltipRect.width > containerRight - padding) {
3192
+ left = containerRight - tooltipRect.width - padding;
3193
+ if (this.currentPosition === 'right') {
3194
+ finalPosition = 'left';
3195
+ if (this.followCursor) {
3196
+ left = this.cursorX - tooltipRect.width - gap;
3197
+ }
3198
+ else if (this.elementRect) {
3199
+ left = this.elementRect.left - tooltipRect.width - gap;
3200
+ }
3201
+ }
3202
+ arrowPos = 'right-adjust';
3203
+ }
3204
+ // Update position class if it changed
3205
+ if (finalPosition !== this.currentPosition) {
3206
+ this.currentPosition = finalPosition;
3207
+ this.tooltipElement.className = `app-tooltip-wrapper tooltip-${finalPosition}`;
3208
+ }
3209
+ // Store arrow adjustment info for CSS styling
3210
+ this.renderer.setAttribute(this.tooltipElement, 'data-arrow-pos', arrowPos);
3211
+ this.renderer.setStyle(this.tooltipElement, 'position', 'fixed');
3212
+ this.renderer.setStyle(this.tooltipElement, 'top', `${Math.round(top)}px`);
3213
+ this.renderer.setStyle(this.tooltipElement, 'left', `${Math.round(left)}px`);
3214
+ });
3215
+ }
3216
+ hide() {
3217
+ this.isTooltipShown = false;
3218
+ if (this.tooltipElement && this.tooltipElement.parentNode) {
3219
+ this.renderer.removeChild(this.tooltipElement.parentNode, this.tooltipElement);
3220
+ this.tooltipElement = null;
3221
+ }
3222
+ if (this.componentRef) {
3223
+ this.componentRef.destroy();
3224
+ this.appRef.detachView(this.componentRef.hostView);
3225
+ this.componentRef = null;
3226
+ }
3227
+ }
3228
+ ngOnDestroy() {
3229
+ clearTimeout(this.showTimeout);
3230
+ this.hide();
3231
+ }
3232
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
3233
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: TooltipDirective, isStandalone: true, selector: "[appTooltip]", inputs: { content: ["appTooltip", "content"], tooltipPosition: "tooltipPosition", tooltipDelay: "tooltipDelay", tooltipBgColor: "tooltipBgColor", tooltipTextColor: "tooltipTextColor", tooltipPadding: "tooltipPadding", tooltipFontSize: "tooltipFontSize", tooltipBorderRadius: "tooltipBorderRadius", tooltipMaxWidth: "tooltipMaxWidth", followCursor: "followCursor", tooltipParentContainer: "tooltipParentContainer" }, host: { listeners: { "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave()", "mousemove": "onMouseMove($event)" } }, ngImport: i0 });
3234
+ }
3235
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirective, decorators: [{
3236
+ type: Directive,
3237
+ args: [{
3238
+ selector: '[appTooltip]',
3239
+ standalone: true,
3240
+ }]
3241
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.NgZone }], propDecorators: { content: [{
3242
+ type: Input,
3243
+ args: ['appTooltip']
3244
+ }], tooltipPosition: [{
3245
+ type: Input
3246
+ }], tooltipDelay: [{
3247
+ type: Input
3248
+ }], tooltipBgColor: [{
3249
+ type: Input
3250
+ }], tooltipTextColor: [{
3251
+ type: Input
3252
+ }], tooltipPadding: [{
3253
+ type: Input
3254
+ }], tooltipFontSize: [{
3255
+ type: Input
3256
+ }], tooltipBorderRadius: [{
3257
+ type: Input
3258
+ }], tooltipMaxWidth: [{
3259
+ type: Input
3260
+ }], followCursor: [{
3261
+ type: Input
3262
+ }], tooltipParentContainer: [{
3263
+ type: Input
3264
+ }], onMouseEnter: [{
3265
+ type: HostListener,
3266
+ args: ['mouseenter', ['$event']]
3267
+ }], onMouseLeave: [{
3268
+ type: HostListener,
3269
+ args: ['mouseleave']
3270
+ }], onMouseMove: [{
3271
+ type: HostListener,
3272
+ args: ['mousemove', ['$event']]
3273
+ }] } });
3274
+
2839
3275
  class CommonTreeTableComponent {
2840
3276
  renderer;
2841
3277
  zone;
@@ -4216,11 +4652,11 @@ class CommonTreeTableComponent {
4216
4652
  }
4217
4653
  }
4218
4654
  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 });
4219
- 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 class=\"setting_options\" appOutsideClick (clickOutside)=\"hideSettings()\">\n <div class=\"column_header\">Select Headers</div>\n <div class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n />\n <span>Select All</span>\n </div>\n\n <div class=\"item_container\" id=\"table_scroll\">\n @for (col of columns; track col.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 class=\"table_wrapper global\" id=\"table_scroll\" #parent>\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\" >\n <thead class=\"sticky-top\">\n <tr>\n <!-- Checkbox header column -->\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <th style=\"min-width: 50px; width: 50px; max-width: 50px\">\n <div class=\"th_wraper\">\n <div class=\"checkbox_container\">\n <input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n [checked]=\"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\">{{ col.header || col.fieldName }}</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 src=\"images/t-arrow-down.svg\" alt=\"Descending\" />\n }\n </span>\n }\n </div>\n\n <!-- Filter and Menu -->\n <div class=\"filter_three_dot_wrapper\">\n <!-- Filter Icon -->\n @if (filterRequired && col.filterable) {\n <div\n class=\"filters\"\n (click)=\"toggleFilter(col, colIdx, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img src=\"images/filter-active.svg\" alt=\"Filter active\" />\n } @else {\n <img src=\"images/filter.svg\" alt=\"Filter\" />\n }\n\n <!-- Filter Dropdown -->\n @if (activeFilterIndex === colIdx) {\n <div class=\"filter_dropdown\" (click)=\"$event.stopPropagation()\">\n <!-- Text Filter -->\n @if (col.filterType === 'text') {\n <div class=\"filter_input_group\">\n <select [ngModel]=\"col.filters?.[0]?.filterOperation\" (ngModelChange)=\"col.filters![0].filterOperation = $event; applyAllFilters()\">\n @for (opt of filterOptions; track opt.value) {\n <option [value]=\"opt.value\">{{ opt.label }}</option>\n }\n </select>\n <input type=\"text\" class=\"search_input\" placeholder=\"Filter\u2026\" [(ngModel)]=\"col.filters![0].filterValue\" (keyup)=\"applyAllFilters()\" />\n </div>\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input type=\"radio\" name=\"filterLogic{{ col.fieldName }}\" [(ngModel)]=\"col.filterLogic\" value=\"AND\" id=\"and-{{ colIdx }}\" (change)=\"applyAllFilters()\" />\n <label [for]=\"'and-' + colIdx\">AND</label>\n <input type=\"radio\" name=\"filterLogic{{ col.fieldName }}\" [(ngModel)]=\"col.filterLogic\" value=\"OR\" id=\"or-{{ colIdx }}\" (change)=\"applyAllFilters()\" />\n <label [for]=\"'or-' + colIdx\">OR</label>\n </div>\n <div class=\"filter_input_group\">\n <select [ngModel]=\"col.filters![1]?.filterOperation\" (ngModelChange)=\"col.filters![1].filterOperation = $event; applyAllFilters()\">\n @for (opt of filterOptions; track opt.value) {\n <option [value]=\"opt.value\">{{ opt.label }}</option>\n }\n </select>\n <input type=\"text\" class=\"search_input\" placeholder=\"Filter\u2026\" [(ngModel)]=\"col.filters![1].filterValue\" (keyup)=\"applyAllFilters()\" />\n </div>\n }\n }\n <!-- Number Filter -->\n @if (col.filterType === 'number') {\n <div class=\"filter_input_group\">\n <select [ngModel]=\"col.filters?.[0]?.filterOperation\" (ngModelChange)=\"col.filters![0].filterOperation = $event; applyAllFilters()\">\n @for (opt of numberFilterOptions; track opt.value) {\n <option [value]=\"opt.value\">{{ opt.label }}</option>\n }\n </select>\n <input type=\"number\" class=\"search_input\" placeholder=\"Filter\u2026\" [(ngModel)]=\"col.filters![0].filterValue\" (keyup)=\"applyAllFilters()\" />\n </div>\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input type=\"radio\" name=\"filterLogic{{ col.fieldName }}\" [(ngModel)]=\"col.filterLogic\" value=\"AND\" id=\"and-num-{{ colIdx }}\" (change)=\"applyAllFilters()\" />\n <label [for]=\"'and-num-' + colIdx\">AND</label>\n <input type=\"radio\" name=\"filterLogic{{ col.fieldName }}\" [(ngModel)]=\"col.filterLogic\" value=\"OR\" id=\"or-num-{{ colIdx }}\" (change)=\"applyAllFilters()\" />\n <label [for]=\"'or-num-' + colIdx\">OR</label>\n </div>\n <div class=\"filter_input_group\">\n <select [ngModel]=\"col.filters![1]?.filterOperation\" (ngModelChange)=\"col.filters![1].filterOperation = $event; applyAllFilters()\">\n @for (opt of numberFilterOptions; track opt.value) {\n <option [value]=\"opt.value\">{{ opt.label }}</option>\n }\n </select>\n <input type=\"number\" class=\"search_input\" placeholder=\"Filter\u2026\" [(ngModel)]=\"col.filters![1].filterValue\" (keyup)=\"applyAllFilters()\" />\n </div>\n }\n }\n <!-- Set Filter (Checkboxes) -->\n @if (col.filterType === 'set') {\n <div class=\"search_input\">\n <input type=\"text\" placeholder=\"Search...\" (input)=\"filterSetOptions(col, $event)\" />\n </div>\n <div class=\"set_option_details\">\n <label>\n <input type=\"checkbox\" [checked]=\"col.options?.length === col.selectedValues?.size\" (change)=\"toggleSelectAllSetFilter(col, $event)\" />\n <span>Select All</span>\n </label>\n @for (option of col.filteredOptions; track option) {\n <label>\n <input type=\"checkbox\" [checked]=\"col.selectedValues?.has(option)\" (change)=\"toggleSetOption(col, option, $event)\" />\n <span>{{ option }}</span>\n </label>\n }\n </div>\n }\n <div class=\"filter_btn\">\n <button (click)=\"resetFilter(col)\">Clear</button>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, colIdx)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n alt=\"Menu\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n\n <!-- Column Resize Handle -->\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, colIdx)\"\n >\n |\n\t </span>\n\t </div>\n\t </div>\n\n\t @if (menuVisible[colIdx]) {\n\t <div\n\t #colActionMenu\n\t class=\"dropdown_wrapper\"\n\t adaptivePosition\n\t [trigger]=\"triggerColMenu\"\n\t [parentContainer]=\"parent\"\n\t [matchWidth]=\"false\"\n\t [isColumnActionMenu]=\"true\"\n\t (click)=\"$event.stopPropagation()\"\n\t appOutsideClick\n\t (clickOutside)=\"onClickOutside()\"\n\t >\n\t <div class=\"right_click_dropdown\" id=\"table_scroll\">\n\t <!-- Sort Ascending -->\n\t @if (sortingType[colIdx] === 'dsc' || !sortingType[colIdx]) {\n\t <div class=\"right_click_item\" (click)=\"onSort(col, 'asc', colIdx)\">\n\t <div class=\"left_item\">\n\t <img\n\t src=\"images/arrow-up.svg\"\n\t class=\"sorting_up\"\n\t [ngClass]=\"{ disable: !col.sortable }\"\n\t />\n\t <span class=\"text\">Sort Ascending</span>\n\t </div>\n\t </div>\n\t }\n\n\t <!-- Sort Descending -->\n\t @if (sortingType[colIdx] === 'asc' || !sortingType[colIdx]) {\n\t <div class=\"right_click_item\" (click)=\"onSort(col, 'dsc', colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"images/arrow-down.svg\" alt=\"\" />\n\t <span class=\"text\">Sort Descending</span>\n\t </div>\n\t </div>\n\t }\n\n\t <!-- Clear Sort -->\n\t @if (sortingType[colIdx] === 'asc' || sortingType[colIdx] === 'dsc') {\n\t <div class=\"right_click_item\" (click)=\"onSort(col, '', colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"images/trash-2.svg\" alt=\"\" />\n\t <span class=\"text\">Clear Sort</span>\n\t </div>\n\t </div>\n\t }\n\n\t <div class=\"divder\"></div>\n\n\t <!-- Pin Column -->\n\t <div\n\t class=\"right_click_item\"\n\t (mouseenter)=\"showPinActions($event)\"\n\t (mouseleave)=\"hidePinActions()\"\n\t >\n\t <div class=\"left_item\">\n\t <img src=\"images/pin.svg\" alt=\"\" />\n\t <span class=\"text\">Pin Column</span>\n\t </div>\n\t <div class=\"right_item\">\n\t <img src=\"images/chevron-right.svg\" alt=\"\" />\n\t @if (showPin) {\n\t <div class=\"second_dropdown\" #pinMenu>\n\t <div class=\"right_click_item\" (click)=\"pinColumn(col, colIdx, 'none')\">\n\t <div class=\"left_item\">\n\t @if ((pinActionClicked[col.colId || col.fieldName] ) === 'none') {\n\t <img src=\"images/check.svg\" alt=\"\" />\n\t } @else {\n\t <img src=\"\" alt=\"\" />\n\t }\n\t <span class=\"text\">No Pin</span>\n\t </div>\n\t </div>\n\t <div class=\"right_click_item\" (click)=\"pinColumn(col, colIdx, 'left')\">\n\t <div class=\"left_item\">\n\t @if (pinActionClicked[col.colId || col.fieldName] === 'left') {\n\t <img src=\"images/check.svg\" alt=\"\" />\n\t } @else {\n\t <img src=\"\" alt=\"\" />\n\t }\n\t <span class=\"text\">Pin Left</span>\n\t </div>\n\t </div>\n\t <div class=\"right_click_item\" (click)=\"pinColumn(col, colIdx, 'right')\">\n\t <div class=\"left_item\">\n\t @if (pinActionClicked[col.colId || col.fieldName] === 'right') {\n\t <img src=\"images/check.svg\" alt=\"\" />\n\t } @else {\n\t <img src=\"\" alt=\"\" />\n\t }\n\t <span class=\"text\">Pin Right</span>\n\t </div>\n\t </div>\n\t </div>\n\t }\n\t </div>\n\t </div>\n\n\t <!-- Autosize This Column -->\n\t <div class=\"right_click_item\" (click)=\"autosizeColumn(col, colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Autosize This Column</span>\n\t </div>\n\t </div>\n\n\t <!-- Autosize All Columns -->\n\t <div class=\"right_click_item\" (click)=\"autosizeAllColumns()\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Autosize All Columns</span>\n\t </div>\n\t </div>\n\n\t <!-- <div class=\"divder\"></div> -->\n\n\t <!-- Group by Column -->\n\t <!-- <div class=\"right_click_item\" (click)=\"groupByColumn(col, colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Group by {{ col.header || col.fieldName }}</span>\n\t </div>\n\t </div> -->\n\n\t <!-- Choose Columns -->\n\t <!-- <div class=\"right_click_item\" (click)=\"showColumnChooser(colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Choose Columns</span>\n\t </div>\n\t </div> -->\n\n\t <!-- Reset Columns -->\n\t <!-- <div class=\"right_click_item\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Reset Columns</span>\n\t </div>\n\t </div> -->\n\t </div>\n\t </div>\n\t }\n\t </th>\n\t }\n\t }\n </tr>\n </thead>\n\n <tbody>\n @for (row of rows; track row.trackKey) {\n @if (row.kind === 'node') {\n <tr [class.disabled]=\"isDisabledRow(row)\">\n <!-- Checkbox column -->\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px; max-width: 50px\">\n @if (checkboxSelectionType === 'multiple') {\n @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 (col of columns; track col.fieldName; let colIndex = $index) {\n @if (col.active !== false) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : ''\n ]\"\n class=\"table_cell\"\n >\n @if (col.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 \n (click)=\"\n onLinkClicked(\n $event,\n row.node,\n row.level,\n row.path,col\n )\"\n (dblclick)=\"\n onLinkDoubleClicked(\n $event,\n row.node,\n row.level,\n row.path,col\n )\"\n >\n {{ labelFor(row) || 'N/A' }}\n </a>\n } @else {\n <span class=\"node_label\">{{ labelFor(row) || 'N/A' }}</span>\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 {{ getValue(row.node, col.fieldName) || 'N/A' }}\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]=\"\n columns.length + (checkBoxSelection ? 1 : 0)\n \"\n >\n <div\n class=\"meta_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n {{ loadingText }}\n </div>\n </td>\n </tr>\n } @else if (row.kind === 'no-data') {\n <tr class=\"meta_row\">\n <td\n [attr.colspan]=\"\n columns.length + (checkBoxSelection ? 1 : 0)\n \"\n >\n <div\n class=\"meta_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n {{ noDataText }}\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n\n @if (!rows || rows.length === 0) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n <span>{{ noDataText }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n\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]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\"\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]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\"\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}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.pointer,.cursor-pointer{cursor:pointer}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}.tableArea{width:100%;position:relative;display:flex;flex-direction:column;height:100%;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%}.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));min-width:fit-content}.tableArea .th_wraper .filter_three_dot_wrapper .filters,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots{position:relative;display:inline-flex;align-items:center;cursor:pointer;width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.tableArea .th_wraper .filter_three_dot_wrapper .filters img,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters:hover,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots:hover{background:var(--neutral-200)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown{position:absolute;top:calc(2.5rem / var(--scale));left:0;z-index:1000;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;min-width:calc(18.3333333333rem / var(--scale));padding:calc(1rem / var(--scale));max-height:calc(29.1666666667rem / var(--scale));overflow-y:auto}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group{display:flex;flex-direction:column;gap:calc(.6666666667rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group select,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group select{padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;background-color:var(--white);cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group .search_input,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group .search_input{width:100%;padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;font-family:inherit}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group .search_input:focus,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group .search_input:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 calc(.25rem / var(--scale)) #667eea1a}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details{display:flex;flex-direction:column;gap:calc(.6666666667rem / var(--scale));max-height:calc(16.6666666667rem / var(--scale));overflow-y:auto;margin-bottom:calc(1rem / var(--scale))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale));cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-500)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label input[type=checkbox],.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label span,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label span{flex:1}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn{display:flex;justify-content:flex-end;gap:calc(.6666666667rem / var(--scale));padding-top:calc(.6666666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn button,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn button{padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--blue-600);color:var(--white);border:none;border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:600;transition:background-color .2s ease}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn button:hover,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn button:hover{background-color:var(--blue-700)}.tableArea .th_wraper .filter_three_dot_wrapper .resize-handle{cursor:col-resize;color:var(--neutral-200);font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400;padding:0 calc(.3333333333rem / var(--scale));-webkit-user-select:none;user-select:none;width:calc(1rem / var(--scale));text-align:center;flex-shrink:0}.tableArea .th_wraper .filter_three_dot_wrapper .resize-handle:hover{color:var(--neutral-500)}.tableArea .th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.tableArea .tree_cell{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale))}.tableArea .tree_cell .toggle_btn{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));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));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tableArea .checkbox_container{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.tableArea .checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.tableArea .radio_option{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.tableArea .radio_option input[type=radio]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .radio_option label{cursor:pointer}.tableArea .meta_row td{background-color:var(--neutral-50);padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale))}.tableArea .meta_cell{color:var(--neutral-400);font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:500;min-height:calc(1.8333333333rem / var(--scale));display:flex;align-items:center}.tableArea .empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6;z-index:10}.tableArea .empty_overlay .empty_content{text-align:center;color:var(--neutral-400);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .setting_options{position:absolute;top:40px;right:0;z-index:1000;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;min-width:calc(20.8333333333rem / var(--scale));max-height:calc(33.3333333333rem / var(--scale));overflow-y:auto}.tableArea .setting_options .column_header{padding:calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);text-transform:uppercase}.tableArea .setting_options .checkbox_container{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .setting_options .checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .setting_options .checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.tableArea .setting_options .item_container{max-height:calc(25rem / var(--scale));overflow-y:auto}.tableArea .setting_options .item_container .column_item{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .setting_options .item_container .column_item:hover{background-color:var(--blue-100)}.tableArea .setting_options .item_container .column_item input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .setting_options .item_container .column_item span{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:1000;position:relative;width:calc(26.6666666667rem / var(--scale));right:0}.tableArea .dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.tableArea .dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.tableArea .dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.tableArea .dropdown_wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.tableArea .dropdown_wrapper .right_click_item:hover,.tableArea .dropdown_wrapper .right_click_item.active{background-color:var(--blue-100)}.tableArea .dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tableArea .dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.tableArea .dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.tableArea .dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tableArea .second_dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.tableArea .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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
4655
+ 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 class=\"filters\"\n (click)=\"toggleFilter(col, colIdx, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/filter-active.svg\"\n alt=\"Filter active\"\n />\n } @else {\n <img src=\"images/filter.svg\" alt=\"Filter\" />\n }\n\n <!-- Filter Dropdown -->\n @if (activeFilterIndex === colIdx) {\n <div\n class=\"filter_dropdown\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <div class=\"filter_input_group\">\n <select\n [ngModel]=\"\n col.filters?.[0]?.filterOperation\n \"\n (ngModelChange)=\"\n col.filters![0].filterOperation = $event;\n applyAllFilters()\n \"\n >\n @for (\n opt of filterOptions;\n track opt.value\n ) {\n <option [value]=\"opt.value\">\n {{ opt.label }}\n </option>\n }\n </select>\n <input\n type=\"text\"\n class=\"search_input\"\n placeholder=\"Filter\u2026\"\n [(ngModel)]=\"col.filters![0].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n @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=\"and-{{ colIdx }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"'and-' + colIdx\">AND</label>\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"or-{{ colIdx }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"'or-' + colIdx\">OR</label>\n </div>\n <div class=\"filter_input_group\">\n <select\n [ngModel]=\"\n col.filters![1]?.filterOperation\n \"\n (ngModelChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters()\n \"\n >\n @for (\n opt of filterOptions;\n track opt.value\n ) {\n <option [value]=\"opt.value\">\n {{ opt.label }}\n </option>\n }\n </select>\n <input\n type=\"text\"\n class=\"search_input\"\n placeholder=\"Filter\u2026\"\n [(ngModel)]=\"col.filters![1].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n }\n }\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <div class=\"filter_input_group\">\n <select\n [ngModel]=\"\n col.filters?.[0]?.filterOperation\n \"\n (ngModelChange)=\"\n col.filters![0].filterOperation = $event;\n applyAllFilters()\n \"\n >\n @for (\n opt of numberFilterOptions;\n track opt.value\n ) {\n <option [value]=\"opt.value\">\n {{ opt.label }}\n </option>\n }\n </select>\n <input\n type=\"number\"\n class=\"search_input\"\n placeholder=\"Filter\u2026\"\n [(ngModel)]=\"col.filters![0].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n @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=\"and-num-{{ colIdx }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"'and-num-' + colIdx\"\n >AND</label\n >\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"or-num-{{ colIdx }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"'or-num-' + colIdx\">OR</label>\n </div>\n <div class=\"filter_input_group\">\n <select\n [ngModel]=\"\n col.filters![1]?.filterOperation\n \"\n (ngModelChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters()\n \"\n >\n @for (\n opt of numberFilterOptions;\n track opt.value\n ) {\n <option [value]=\"opt.value\">\n {{ opt.label }}\n </option>\n }\n </select>\n <input\n type=\"number\"\n class=\"search_input\"\n placeholder=\"Filter\u2026\"\n [(ngModel)]=\"col.filters![1].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n }\n }\n <!-- Set Filter (Checkboxes) -->\n @if (col.filterType === \"set\") {\n <div class=\"search_input\">\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n <div class=\"set_option_details\">\n <label>\n <input\n type=\"checkbox\"\n [checked]=\"\n col.options?.length ===\n col.selectedValues?.size\n \"\n (change)=\"\n toggleSelectAllSetFilter(col, $event)\n \"\n />\n <span>Select All</span>\n </label>\n @for (\n option of col.filteredOptions;\n track option\n ) {\n <label>\n <input\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues?.has(option)\n \"\n (change)=\"\n toggleSetOption(col, option, $event)\n \"\n />\n <span>{{ option }}</span>\n </label>\n }\n </div>\n }\n <div class=\"filter_btn\">\n <button (click)=\"resetFilter(col)\">\n Clear\n </button>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, colIdx)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n alt=\"Menu\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n\n <!-- Column Resize Handle -->\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, colIdx)\"\n >\n |\n </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 pinActionClicked[\n col.colId || col.fieldName\n ] === \"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 class=\"ellipsis\" [appTooltip]=\"getValue(row.node, col.fieldName) || 'N/A'\"\n tooltipPosition=\"adaptive\" [tooltipParentContainer]=\"parent\"> {{\n getValue(row.node, col.fieldName) || \"N/A\"\n }}</span>\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));min-width:fit-content}.tableArea .th_wraper .filter_three_dot_wrapper .filters,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots{position:relative;display:inline-flex;align-items:center;cursor:pointer;width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.tableArea .th_wraper .filter_three_dot_wrapper .filters img,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters:hover,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots:hover{background:var(--neutral-200)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown{position:absolute;top:calc(2.5rem / var(--scale));left:0;z-index:1000;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;min-width:calc(18.3333333333rem / var(--scale));padding:calc(1rem / var(--scale));max-height:calc(29.1666666667rem / var(--scale));overflow-y:auto}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group{display:flex;flex-direction:column;gap:calc(.6666666667rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group select,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group select{padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;background-color:var(--white);cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group .search_input,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group .search_input{width:100%;padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;font-family:inherit}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group .search_input:focus,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group .search_input:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 calc(.25rem / var(--scale)) #667eea1a}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details{display:flex;flex-direction:column;gap:calc(.6666666667rem / var(--scale));max-height:calc(16.6666666667rem / var(--scale));overflow-y:auto;margin-bottom:calc(1rem / var(--scale))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale));cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-500)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label input[type=checkbox],.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label span,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label span{flex:1}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn{display:flex;justify-content:flex-end;gap:calc(.6666666667rem / var(--scale));padding-top:calc(.6666666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn button,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn button{padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--blue-600);color:var(--white);border:none;border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:600;transition:background-color .2s ease}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn button:hover,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn button:hover{background-color:var(--blue-700)}.tableArea .th_wraper .filter_three_dot_wrapper .resize-handle{cursor:col-resize;color:var(--neutral-200);font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400;padding:0 calc(.3333333333rem / var(--scale));-webkit-user-select:none;user-select:none;width:calc(1rem / var(--scale));text-align:center;flex-shrink:0}.tableArea .th_wraper .filter_three_dot_wrapper .resize-handle:hover{color:var(--neutral-500)}.tableArea .th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.tableArea .tree_cell{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale))}.tableArea .tree_cell .toggle_btn{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));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;z-index:10}.tableArea .empty_overlay .empty_content{text-align:center;color:var(--neutral-400);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .setting_options{position:absolute;top:40px;right:0;z-index:1000;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;min-width:calc(20.8333333333rem / var(--scale));max-height:calc(33.3333333333rem / var(--scale));overflow-y:auto}.tableArea .setting_options .column_header{padding:calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);text-transform:uppercase}.tableArea .setting_options .checkbox_container{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .setting_options .checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .setting_options .checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.tableArea .setting_options .item_container{max-height:calc(25rem / var(--scale));overflow-y:auto}.tableArea .setting_options .item_container .column_item{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .setting_options .item_container .column_item:hover{background-color:var(--blue-100)}.tableArea .setting_options .item_container .column_item input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .setting_options .item_container .column_item span{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:1000;position:relative;width:calc(26.6666666667rem / var(--scale));right:0}.tableArea .dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.tableArea .dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.tableArea .dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.tableArea .dropdown_wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.tableArea .dropdown_wrapper .right_click_item:hover,.tableArea .dropdown_wrapper .right_click_item.active{background-color:var(--blue-100)}.tableArea .dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tableArea .dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.tableArea .dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.tableArea .dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tableArea .second_dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.tableArea .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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: 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: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
4220
4656
  }
4221
4657
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonTreeTableComponent, decorators: [{
4222
4658
  type: Component,
4223
- args: [{ selector: 'cats-tree-table', imports: [CommonModule, FormsModule, OutsideClickDirective, AdaptivePositionDirective, RendererParserDirective], template: "<div class=\"tableArea\" #table [class.is-resizing]=\"isResizing\">\n <!-- Settings Panel for Column Selection -->\n @if (settingsRequired && settingsClicked) {\n <div class=\"setting_options\" appOutsideClick (clickOutside)=\"hideSettings()\">\n <div class=\"column_header\">Select Headers</div>\n <div class=\"checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n />\n <span>Select All</span>\n </div>\n\n <div class=\"item_container\" id=\"table_scroll\">\n @for (col of columns; track col.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 class=\"table_wrapper global\" id=\"table_scroll\" #parent>\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\" >\n <thead class=\"sticky-top\">\n <tr>\n <!-- Checkbox header column -->\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <th style=\"min-width: 50px; width: 50px; max-width: 50px\">\n <div class=\"th_wraper\">\n <div class=\"checkbox_container\">\n <input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n [checked]=\"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\">{{ col.header || col.fieldName }}</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 src=\"images/t-arrow-down.svg\" alt=\"Descending\" />\n }\n </span>\n }\n </div>\n\n <!-- Filter and Menu -->\n <div class=\"filter_three_dot_wrapper\">\n <!-- Filter Icon -->\n @if (filterRequired && col.filterable) {\n <div\n class=\"filters\"\n (click)=\"toggleFilter(col, colIdx, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img src=\"images/filter-active.svg\" alt=\"Filter active\" />\n } @else {\n <img src=\"images/filter.svg\" alt=\"Filter\" />\n }\n\n <!-- Filter Dropdown -->\n @if (activeFilterIndex === colIdx) {\n <div class=\"filter_dropdown\" (click)=\"$event.stopPropagation()\">\n <!-- Text Filter -->\n @if (col.filterType === 'text') {\n <div class=\"filter_input_group\">\n <select [ngModel]=\"col.filters?.[0]?.filterOperation\" (ngModelChange)=\"col.filters![0].filterOperation = $event; applyAllFilters()\">\n @for (opt of filterOptions; track opt.value) {\n <option [value]=\"opt.value\">{{ opt.label }}</option>\n }\n </select>\n <input type=\"text\" class=\"search_input\" placeholder=\"Filter\u2026\" [(ngModel)]=\"col.filters![0].filterValue\" (keyup)=\"applyAllFilters()\" />\n </div>\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input type=\"radio\" name=\"filterLogic{{ col.fieldName }}\" [(ngModel)]=\"col.filterLogic\" value=\"AND\" id=\"and-{{ colIdx }}\" (change)=\"applyAllFilters()\" />\n <label [for]=\"'and-' + colIdx\">AND</label>\n <input type=\"radio\" name=\"filterLogic{{ col.fieldName }}\" [(ngModel)]=\"col.filterLogic\" value=\"OR\" id=\"or-{{ colIdx }}\" (change)=\"applyAllFilters()\" />\n <label [for]=\"'or-' + colIdx\">OR</label>\n </div>\n <div class=\"filter_input_group\">\n <select [ngModel]=\"col.filters![1]?.filterOperation\" (ngModelChange)=\"col.filters![1].filterOperation = $event; applyAllFilters()\">\n @for (opt of filterOptions; track opt.value) {\n <option [value]=\"opt.value\">{{ opt.label }}</option>\n }\n </select>\n <input type=\"text\" class=\"search_input\" placeholder=\"Filter\u2026\" [(ngModel)]=\"col.filters![1].filterValue\" (keyup)=\"applyAllFilters()\" />\n </div>\n }\n }\n <!-- Number Filter -->\n @if (col.filterType === 'number') {\n <div class=\"filter_input_group\">\n <select [ngModel]=\"col.filters?.[0]?.filterOperation\" (ngModelChange)=\"col.filters![0].filterOperation = $event; applyAllFilters()\">\n @for (opt of numberFilterOptions; track opt.value) {\n <option [value]=\"opt.value\">{{ opt.label }}</option>\n }\n </select>\n <input type=\"number\" class=\"search_input\" placeholder=\"Filter\u2026\" [(ngModel)]=\"col.filters![0].filterValue\" (keyup)=\"applyAllFilters()\" />\n </div>\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row radio_option\">\n <input type=\"radio\" name=\"filterLogic{{ col.fieldName }}\" [(ngModel)]=\"col.filterLogic\" value=\"AND\" id=\"and-num-{{ colIdx }}\" (change)=\"applyAllFilters()\" />\n <label [for]=\"'and-num-' + colIdx\">AND</label>\n <input type=\"radio\" name=\"filterLogic{{ col.fieldName }}\" [(ngModel)]=\"col.filterLogic\" value=\"OR\" id=\"or-num-{{ colIdx }}\" (change)=\"applyAllFilters()\" />\n <label [for]=\"'or-num-' + colIdx\">OR</label>\n </div>\n <div class=\"filter_input_group\">\n <select [ngModel]=\"col.filters![1]?.filterOperation\" (ngModelChange)=\"col.filters![1].filterOperation = $event; applyAllFilters()\">\n @for (opt of numberFilterOptions; track opt.value) {\n <option [value]=\"opt.value\">{{ opt.label }}</option>\n }\n </select>\n <input type=\"number\" class=\"search_input\" placeholder=\"Filter\u2026\" [(ngModel)]=\"col.filters![1].filterValue\" (keyup)=\"applyAllFilters()\" />\n </div>\n }\n }\n <!-- Set Filter (Checkboxes) -->\n @if (col.filterType === 'set') {\n <div class=\"search_input\">\n <input type=\"text\" placeholder=\"Search...\" (input)=\"filterSetOptions(col, $event)\" />\n </div>\n <div class=\"set_option_details\">\n <label>\n <input type=\"checkbox\" [checked]=\"col.options?.length === col.selectedValues?.size\" (change)=\"toggleSelectAllSetFilter(col, $event)\" />\n <span>Select All</span>\n </label>\n @for (option of col.filteredOptions; track option) {\n <label>\n <input type=\"checkbox\" [checked]=\"col.selectedValues?.has(option)\" (change)=\"toggleSetOption(col, option, $event)\" />\n <span>{{ option }}</span>\n </label>\n }\n </div>\n }\n <div class=\"filter_btn\">\n <button (click)=\"resetFilter(col)\">Clear</button>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, colIdx)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n alt=\"Menu\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n\n <!-- Column Resize Handle -->\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, colIdx)\"\n >\n |\n\t </span>\n\t </div>\n\t </div>\n\n\t @if (menuVisible[colIdx]) {\n\t <div\n\t #colActionMenu\n\t class=\"dropdown_wrapper\"\n\t adaptivePosition\n\t [trigger]=\"triggerColMenu\"\n\t [parentContainer]=\"parent\"\n\t [matchWidth]=\"false\"\n\t [isColumnActionMenu]=\"true\"\n\t (click)=\"$event.stopPropagation()\"\n\t appOutsideClick\n\t (clickOutside)=\"onClickOutside()\"\n\t >\n\t <div class=\"right_click_dropdown\" id=\"table_scroll\">\n\t <!-- Sort Ascending -->\n\t @if (sortingType[colIdx] === 'dsc' || !sortingType[colIdx]) {\n\t <div class=\"right_click_item\" (click)=\"onSort(col, 'asc', colIdx)\">\n\t <div class=\"left_item\">\n\t <img\n\t src=\"images/arrow-up.svg\"\n\t class=\"sorting_up\"\n\t [ngClass]=\"{ disable: !col.sortable }\"\n\t />\n\t <span class=\"text\">Sort Ascending</span>\n\t </div>\n\t </div>\n\t }\n\n\t <!-- Sort Descending -->\n\t @if (sortingType[colIdx] === 'asc' || !sortingType[colIdx]) {\n\t <div class=\"right_click_item\" (click)=\"onSort(col, 'dsc', colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"images/arrow-down.svg\" alt=\"\" />\n\t <span class=\"text\">Sort Descending</span>\n\t </div>\n\t </div>\n\t }\n\n\t <!-- Clear Sort -->\n\t @if (sortingType[colIdx] === 'asc' || sortingType[colIdx] === 'dsc') {\n\t <div class=\"right_click_item\" (click)=\"onSort(col, '', colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"images/trash-2.svg\" alt=\"\" />\n\t <span class=\"text\">Clear Sort</span>\n\t </div>\n\t </div>\n\t }\n\n\t <div class=\"divder\"></div>\n\n\t <!-- Pin Column -->\n\t <div\n\t class=\"right_click_item\"\n\t (mouseenter)=\"showPinActions($event)\"\n\t (mouseleave)=\"hidePinActions()\"\n\t >\n\t <div class=\"left_item\">\n\t <img src=\"images/pin.svg\" alt=\"\" />\n\t <span class=\"text\">Pin Column</span>\n\t </div>\n\t <div class=\"right_item\">\n\t <img src=\"images/chevron-right.svg\" alt=\"\" />\n\t @if (showPin) {\n\t <div class=\"second_dropdown\" #pinMenu>\n\t <div class=\"right_click_item\" (click)=\"pinColumn(col, colIdx, 'none')\">\n\t <div class=\"left_item\">\n\t @if ((pinActionClicked[col.colId || col.fieldName] ) === 'none') {\n\t <img src=\"images/check.svg\" alt=\"\" />\n\t } @else {\n\t <img src=\"\" alt=\"\" />\n\t }\n\t <span class=\"text\">No Pin</span>\n\t </div>\n\t </div>\n\t <div class=\"right_click_item\" (click)=\"pinColumn(col, colIdx, 'left')\">\n\t <div class=\"left_item\">\n\t @if (pinActionClicked[col.colId || col.fieldName] === 'left') {\n\t <img src=\"images/check.svg\" alt=\"\" />\n\t } @else {\n\t <img src=\"\" alt=\"\" />\n\t }\n\t <span class=\"text\">Pin Left</span>\n\t </div>\n\t </div>\n\t <div class=\"right_click_item\" (click)=\"pinColumn(col, colIdx, 'right')\">\n\t <div class=\"left_item\">\n\t @if (pinActionClicked[col.colId || col.fieldName] === 'right') {\n\t <img src=\"images/check.svg\" alt=\"\" />\n\t } @else {\n\t <img src=\"\" alt=\"\" />\n\t }\n\t <span class=\"text\">Pin Right</span>\n\t </div>\n\t </div>\n\t </div>\n\t }\n\t </div>\n\t </div>\n\n\t <!-- Autosize This Column -->\n\t <div class=\"right_click_item\" (click)=\"autosizeColumn(col, colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Autosize This Column</span>\n\t </div>\n\t </div>\n\n\t <!-- Autosize All Columns -->\n\t <div class=\"right_click_item\" (click)=\"autosizeAllColumns()\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Autosize All Columns</span>\n\t </div>\n\t </div>\n\n\t <!-- <div class=\"divder\"></div> -->\n\n\t <!-- Group by Column -->\n\t <!-- <div class=\"right_click_item\" (click)=\"groupByColumn(col, colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Group by {{ col.header || col.fieldName }}</span>\n\t </div>\n\t </div> -->\n\n\t <!-- Choose Columns -->\n\t <!-- <div class=\"right_click_item\" (click)=\"showColumnChooser(colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Choose Columns</span>\n\t </div>\n\t </div> -->\n\n\t <!-- Reset Columns -->\n\t <!-- <div class=\"right_click_item\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Reset Columns</span>\n\t </div>\n\t </div> -->\n\t </div>\n\t </div>\n\t }\n\t </th>\n\t }\n\t }\n </tr>\n </thead>\n\n <tbody>\n @for (row of rows; track row.trackKey) {\n @if (row.kind === 'node') {\n <tr [class.disabled]=\"isDisabledRow(row)\">\n <!-- Checkbox column -->\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px; max-width: 50px\">\n @if (checkboxSelectionType === 'multiple') {\n @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 (col of columns; track col.fieldName; let colIndex = $index) {\n @if (col.active !== false) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : ''\n ]\"\n class=\"table_cell\"\n >\n @if (col.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 \n (click)=\"\n onLinkClicked(\n $event,\n row.node,\n row.level,\n row.path,col\n )\"\n (dblclick)=\"\n onLinkDoubleClicked(\n $event,\n row.node,\n row.level,\n row.path,col\n )\"\n >\n {{ labelFor(row) || 'N/A' }}\n </a>\n } @else {\n <span class=\"node_label\">{{ labelFor(row) || 'N/A' }}</span>\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 {{ getValue(row.node, col.fieldName) || 'N/A' }}\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]=\"\n columns.length + (checkBoxSelection ? 1 : 0)\n \"\n >\n <div\n class=\"meta_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n {{ loadingText }}\n </div>\n </td>\n </tr>\n } @else if (row.kind === 'no-data') {\n <tr class=\"meta_row\">\n <td\n [attr.colspan]=\"\n columns.length + (checkBoxSelection ? 1 : 0)\n \"\n >\n <div\n class=\"meta_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n {{ noDataText }}\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n\n @if (!rows || rows.length === 0) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n <span>{{ noDataText }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n\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]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\"\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]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\"\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}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.pointer,.cursor-pointer{cursor:pointer}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}.tableArea{width:100%;position:relative;display:flex;flex-direction:column;height:100%;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%}.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));min-width:fit-content}.tableArea .th_wraper .filter_three_dot_wrapper .filters,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots{position:relative;display:inline-flex;align-items:center;cursor:pointer;width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.tableArea .th_wraper .filter_three_dot_wrapper .filters img,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters:hover,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots:hover{background:var(--neutral-200)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown{position:absolute;top:calc(2.5rem / var(--scale));left:0;z-index:1000;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;min-width:calc(18.3333333333rem / var(--scale));padding:calc(1rem / var(--scale));max-height:calc(29.1666666667rem / var(--scale));overflow-y:auto}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group{display:flex;flex-direction:column;gap:calc(.6666666667rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group select,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group select{padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;background-color:var(--white);cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group .search_input,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group .search_input{width:100%;padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;font-family:inherit}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group .search_input:focus,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group .search_input:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 calc(.25rem / var(--scale)) #667eea1a}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details{display:flex;flex-direction:column;gap:calc(.6666666667rem / var(--scale));max-height:calc(16.6666666667rem / var(--scale));overflow-y:auto;margin-bottom:calc(1rem / var(--scale))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale));cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-500)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label input[type=checkbox],.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label span,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label span{flex:1}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn{display:flex;justify-content:flex-end;gap:calc(.6666666667rem / var(--scale));padding-top:calc(.6666666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn button,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn button{padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--blue-600);color:var(--white);border:none;border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:600;transition:background-color .2s ease}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn button:hover,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn button:hover{background-color:var(--blue-700)}.tableArea .th_wraper .filter_three_dot_wrapper .resize-handle{cursor:col-resize;color:var(--neutral-200);font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400;padding:0 calc(.3333333333rem / var(--scale));-webkit-user-select:none;user-select:none;width:calc(1rem / var(--scale));text-align:center;flex-shrink:0}.tableArea .th_wraper .filter_three_dot_wrapper .resize-handle:hover{color:var(--neutral-500)}.tableArea .th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.tableArea .tree_cell{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale))}.tableArea .tree_cell .toggle_btn{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));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));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tableArea .checkbox_container{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.tableArea .checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.tableArea .radio_option{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.tableArea .radio_option input[type=radio]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .radio_option label{cursor:pointer}.tableArea .meta_row td{background-color:var(--neutral-50);padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale))}.tableArea .meta_cell{color:var(--neutral-400);font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:500;min-height:calc(1.8333333333rem / var(--scale));display:flex;align-items:center}.tableArea .empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6;z-index:10}.tableArea .empty_overlay .empty_content{text-align:center;color:var(--neutral-400);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .setting_options{position:absolute;top:40px;right:0;z-index:1000;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;min-width:calc(20.8333333333rem / var(--scale));max-height:calc(33.3333333333rem / var(--scale));overflow-y:auto}.tableArea .setting_options .column_header{padding:calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);text-transform:uppercase}.tableArea .setting_options .checkbox_container{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .setting_options .checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .setting_options .checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.tableArea .setting_options .item_container{max-height:calc(25rem / var(--scale));overflow-y:auto}.tableArea .setting_options .item_container .column_item{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .setting_options .item_container .column_item:hover{background-color:var(--blue-100)}.tableArea .setting_options .item_container .column_item input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .setting_options .item_container .column_item span{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:1000;position:relative;width:calc(26.6666666667rem / var(--scale));right:0}.tableArea .dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.tableArea .dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.tableArea .dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.tableArea .dropdown_wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.tableArea .dropdown_wrapper .right_click_item:hover,.tableArea .dropdown_wrapper .right_click_item.active{background-color:var(--blue-100)}.tableArea .dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tableArea .dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.tableArea .dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.tableArea .dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tableArea .second_dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.tableArea .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"] }]
4659
+ args: [{ selector: 'cats-tree-table', imports: [CommonModule, FormsModule, OutsideClickDirective, AdaptivePositionDirective, RendererParserDirective, TooltipDirective], 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 class=\"filters\"\n (click)=\"toggleFilter(col, colIdx, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/filter-active.svg\"\n alt=\"Filter active\"\n />\n } @else {\n <img src=\"images/filter.svg\" alt=\"Filter\" />\n }\n\n <!-- Filter Dropdown -->\n @if (activeFilterIndex === colIdx) {\n <div\n class=\"filter_dropdown\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <div class=\"filter_input_group\">\n <select\n [ngModel]=\"\n col.filters?.[0]?.filterOperation\n \"\n (ngModelChange)=\"\n col.filters![0].filterOperation = $event;\n applyAllFilters()\n \"\n >\n @for (\n opt of filterOptions;\n track opt.value\n ) {\n <option [value]=\"opt.value\">\n {{ opt.label }}\n </option>\n }\n </select>\n <input\n type=\"text\"\n class=\"search_input\"\n placeholder=\"Filter\u2026\"\n [(ngModel)]=\"col.filters![0].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n @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=\"and-{{ colIdx }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"'and-' + colIdx\">AND</label>\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"or-{{ colIdx }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"'or-' + colIdx\">OR</label>\n </div>\n <div class=\"filter_input_group\">\n <select\n [ngModel]=\"\n col.filters![1]?.filterOperation\n \"\n (ngModelChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters()\n \"\n >\n @for (\n opt of filterOptions;\n track opt.value\n ) {\n <option [value]=\"opt.value\">\n {{ opt.label }}\n </option>\n }\n </select>\n <input\n type=\"text\"\n class=\"search_input\"\n placeholder=\"Filter\u2026\"\n [(ngModel)]=\"col.filters![1].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n }\n }\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <div class=\"filter_input_group\">\n <select\n [ngModel]=\"\n col.filters?.[0]?.filterOperation\n \"\n (ngModelChange)=\"\n col.filters![0].filterOperation = $event;\n applyAllFilters()\n \"\n >\n @for (\n opt of numberFilterOptions;\n track opt.value\n ) {\n <option [value]=\"opt.value\">\n {{ opt.label }}\n </option>\n }\n </select>\n <input\n type=\"number\"\n class=\"search_input\"\n placeholder=\"Filter\u2026\"\n [(ngModel)]=\"col.filters![0].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n @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=\"and-num-{{ colIdx }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"'and-num-' + colIdx\"\n >AND</label\n >\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"or-num-{{ colIdx }}\"\n (change)=\"applyAllFilters()\"\n />\n <label [for]=\"'or-num-' + colIdx\">OR</label>\n </div>\n <div class=\"filter_input_group\">\n <select\n [ngModel]=\"\n col.filters![1]?.filterOperation\n \"\n (ngModelChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters()\n \"\n >\n @for (\n opt of numberFilterOptions;\n track opt.value\n ) {\n <option [value]=\"opt.value\">\n {{ opt.label }}\n </option>\n }\n </select>\n <input\n type=\"number\"\n class=\"search_input\"\n placeholder=\"Filter\u2026\"\n [(ngModel)]=\"col.filters![1].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n }\n }\n <!-- Set Filter (Checkboxes) -->\n @if (col.filterType === \"set\") {\n <div class=\"search_input\">\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n <div class=\"set_option_details\">\n <label>\n <input\n type=\"checkbox\"\n [checked]=\"\n col.options?.length ===\n col.selectedValues?.size\n \"\n (change)=\"\n toggleSelectAllSetFilter(col, $event)\n \"\n />\n <span>Select All</span>\n </label>\n @for (\n option of col.filteredOptions;\n track option\n ) {\n <label>\n <input\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues?.has(option)\n \"\n (change)=\"\n toggleSetOption(col, option, $event)\n \"\n />\n <span>{{ option }}</span>\n </label>\n }\n </div>\n }\n <div class=\"filter_btn\">\n <button (click)=\"resetFilter(col)\">\n Clear\n </button>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, colIdx)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n alt=\"Menu\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n\n <!-- Column Resize Handle -->\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, colIdx)\"\n >\n |\n </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 pinActionClicked[\n col.colId || col.fieldName\n ] === \"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 class=\"ellipsis\" [appTooltip]=\"getValue(row.node, col.fieldName) || 'N/A'\"\n tooltipPosition=\"adaptive\" [tooltipParentContainer]=\"parent\"> {{\n getValue(row.node, col.fieldName) || \"N/A\"\n }}</span>\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));min-width:fit-content}.tableArea .th_wraper .filter_three_dot_wrapper .filters,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots{position:relative;display:inline-flex;align-items:center;cursor:pointer;width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.tableArea .th_wraper .filter_three_dot_wrapper .filters img,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters:hover,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots:hover{background:var(--neutral-200)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown{position:absolute;top:calc(2.5rem / var(--scale));left:0;z-index:1000;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;min-width:calc(18.3333333333rem / var(--scale));padding:calc(1rem / var(--scale));max-height:calc(29.1666666667rem / var(--scale));overflow-y:auto}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group{display:flex;flex-direction:column;gap:calc(.6666666667rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group select,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group select{padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;background-color:var(--white);cursor:pointer}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group .search_input,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group .search_input{width:100%;padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;font-family:inherit}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_input_group .search_input:focus,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_input_group .search_input:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 calc(.25rem / var(--scale)) #667eea1a}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details{display:flex;flex-direction:column;gap:calc(.6666666667rem / var(--scale));max-height:calc(16.6666666667rem / var(--scale));overflow-y:auto;margin-bottom:calc(1rem / var(--scale))}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale));cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-500)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label input[type=checkbox],.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .set_option_details label span,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .set_option_details label span{flex:1}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn{display:flex;justify-content:flex-end;gap:calc(.6666666667rem / var(--scale));padding-top:calc(.6666666667rem / var(--scale));border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn button,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn button{padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--blue-600);color:var(--white);border:none;border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:600;transition:background-color .2s ease}.tableArea .th_wraper .filter_three_dot_wrapper .filters .filter_dropdown .filter_btn button:hover,.tableArea .th_wraper .filter_three_dot_wrapper .three-dots .filter_dropdown .filter_btn button:hover{background-color:var(--blue-700)}.tableArea .th_wraper .filter_three_dot_wrapper .resize-handle{cursor:col-resize;color:var(--neutral-200);font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400;padding:0 calc(.3333333333rem / var(--scale));-webkit-user-select:none;user-select:none;width:calc(1rem / var(--scale));text-align:center;flex-shrink:0}.tableArea .th_wraper .filter_three_dot_wrapper .resize-handle:hover{color:var(--neutral-500)}.tableArea .th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.tableArea .tree_cell{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale))}.tableArea .tree_cell .toggle_btn{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));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;z-index:10}.tableArea .empty_overlay .empty_content{text-align:center;color:var(--neutral-400);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .setting_options{position:absolute;top:40px;right:0;z-index:1000;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;min-width:calc(20.8333333333rem / var(--scale));max-height:calc(33.3333333333rem / var(--scale));overflow-y:auto}.tableArea .setting_options .column_header{padding:calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);text-transform:uppercase}.tableArea .setting_options .checkbox_container{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .setting_options .checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .setting_options .checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.tableArea .setting_options .item_container{max-height:calc(25rem / var(--scale));overflow-y:auto}.tableArea .setting_options .item_container .column_item{padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .setting_options .item_container .column_item:hover{background-color:var(--blue-100)}.tableArea .setting_options .item_container .column_item input[type=checkbox]{cursor:pointer;accent-color:var(--blue-600)}.tableArea .setting_options .item_container .column_item span{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.tableArea .dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:1000;position:relative;width:calc(26.6666666667rem / var(--scale));right:0}.tableArea .dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.tableArea .dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.tableArea .dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.tableArea .dropdown_wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.tableArea .dropdown_wrapper .right_click_item:hover,.tableArea .dropdown_wrapper .right_click_item.active{background-color:var(--blue-100)}.tableArea .dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tableArea .dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.tableArea .dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.tableArea .dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tableArea .second_dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.tableArea .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"] }]
4224
4660
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { tableAreaRef: [{
4225
4661
  type: ViewChild,
4226
4662
  args: ['table', { static: true }]
@@ -4313,5 +4749,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
4313
4749
  * Generated bundle index. Do not edit.
4314
4750
  */
4315
4751
 
4316
- export { CatsDataGridComponent, CatsDataGridService, ColDefs, CommonRendererComponent, CommonTreeTableComponent };
4752
+ export { AdaptivePositionDirective, CatsDataGridComponent, CatsDataGridService, ColDefs, CommonRendererComponent, CommonTreeTableComponent, TooltipComponent, TooltipDirective };
4317
4753
  //# sourceMappingURL=cats-data-grid.mjs.map