cats-data-grid 2.0.34 → 2.0.36
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.
- package/fesm2022/cats-data-grid.mjs +144 -126
- package/fesm2022/cats-data-grid.mjs.map +1 -1
- package/index.d.ts +27 -13
- package/package.json +1 -1
- package/lib/cats-data-grid.component.d.ts +0 -148
- package/lib/directives/outside-click.directive.d.ts +0 -10
- package/lib/directives/renderer-parser.directive.d.ts +0 -15
- package/lib/pipes/add-class.pipe.d.ts +0 -7
- package/lib/services/cats-data-grid.service.d.ts +0 -6
- package/public-api.d.ts +0 -2
|
@@ -852,18 +852,18 @@ class CommonCalendarComponent {
|
|
|
852
852
|
multi: true,
|
|
853
853
|
},
|
|
854
854
|
DatePipe,
|
|
855
|
-
], usesOnChanges: true, ngImport: i0, template: "<!-- Calendar -->\r\n\r\n<div\r\n class=\"calendar_wrapper\"\r\n appOutsideClick\r\n (clickOutSide)=\"closeCalendar()\"\r\n [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n <div class=\"date_box\" (click)=\"toggleCalendar()\">\r\n @if (dateConfig.selectionMode=='single') {\r\n\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select Date\"\r\n [value]=\"selectedDateTime\"\r\n readonly\r\n [disabled]=\"disableControl\"\r\n />\r\n } @else {\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select date Range\"\r\n [value]=\"\r\n selectedDateTime.start\r\n | date\r\n : 'MM/dd/yyyy' +\r\n ' - ' +\r\n (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n \"\r\n readonly\r\n />\r\n }\r\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n <img src=\"images/calendar.svg\" alt=\"\" />\r\n </div>\r\n @if (isOpen) {\r\n <div class=\"calendar-popup\">\r\n <div class=\"calendar_container\">\r\n <!-- for the header -->\r\n <div class=\"calendar-header\">\r\n <div class=\"month-year\">\r\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n {{ getMonthYear().month }},</span\r\n >\r\n <div class=\"year\" (click)=\"calendarView = 'yearView'\">\r\n <span>\r\n {{ getMonthYear().year }}\r\n </span>\r\n <img src=\"images/chevron-down.svg\" class=\"year_arrow\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"arrow_container\">\r\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n <img src=\"images/arrow-up.svg\" alt=\"\" />\r\n </span>\r\n\r\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n <img src=\"images/arrow-down.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n </div>\r\n @if(calendarView === \"monthView\"){\r\n <div class=\"month-grid\">\r\n @for(month of monthRange | keyvalue; track $index){\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month.key)\"\r\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n >{{ month.value }}</span\r\n >\r\n }\r\n </div>\r\n } @else if(calendarView === 'yearView'){\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for(year of yearRange;track $index){\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <div class=\"calendar_body\">\r\n <div class=\"calendar-grid\">\r\n <!-- Day names -->\r\n @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index)\r\n {\r\n\r\n <div class=\"days_name\">\r\n {{ day }}\r\n </div>\r\n }\r\n\r\n <!-- Calendar dates -->\r\n @for (dayObj of daysInMonth; track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [ngClass]=\"{\r\n active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'single' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ),\r\n\r\n active_start:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeStart,\r\n\r\n active_end:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeEnd,\r\n\r\n range_between_active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n rangeStart != null &&\r\n rangeEnd != null &&\r\n dayObj.day > rangeStart &&\r\n dayObj.day < rangeEnd,\r\n\r\n other_month: !dayObj.isCurrentMonth,\r\n disabled: isDayDisabled(dayObj.day),\r\n notInCurrentMonth: !dayObj.isCurrentMonth\r\n }\"\r\n (click)=\"\r\n dayObj.isCurrentMonth &&\r\n !isDayDisabled(dayObj.day) &&\r\n selectDate(dayObj.day)\r\n \"\r\n >\r\n {{ dayObj.day }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"bottom_btn\">\r\n <div class=\"btn\">Clear</div>\r\n <div class=\"btn\">Today</div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <!-- TIME SLOTS (only if showTime = true) -->\r\n @if (dateConfig.enableTime) {\r\n <div class=\"times\">\r\n <div class=\"time-picker\">\r\n <div class=\"time-column\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- center selection indicator -->\r\n <div class=\"center-highlight\"></div>\r\n </div>\r\n\r\n <!-- @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n } -->\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;height:calc(3.3333333333rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-family:inherit}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-500)}.calendar_wrapper .date_box img{max-width:calc(1.3333333333rem / var(--scale));margin-right:calc(1rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{display:flex;position:absolute;top:calc(3.3333333333rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:100%;min-width:calc(27.8333333333rem / var(--scale));min-height:calc(30.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_container{flex:1;margin:calc(.25rem / var(--scale)) 0}.calendar_wrapper .calendar-popup .calendar-header{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button{cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding-right:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year img,.calendar_wrapper .calendar-popup .calendar-header .month-year .month img{max-width:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(27.0833333333rem / var(--scale));color:var(--neutral-600)}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale));transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600)}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .year:hover{background-color:var(--blue-100);color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:column;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:\"\"}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(27.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;width:calc(3.975rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{cursor:default;color:var(--neutral-400)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth:hover{background-color:transparent}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn .btn{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--blue-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.calendar_wrapper .calendar-popup .time-picker{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:360px;overflow:hidden;background:#fff}.calendar_wrapper .calendar-popup .time-column{display:flex;flex-direction:column;align-items:center;overflow-y:auto;scroll-snap-type:y mandatory}.calendar_wrapper .calendar-popup .time-column::-webkit-scrollbar{width:0}.calendar_wrapper .calendar-popup .span_time.active{background:#2f80ed;color:#fff;border-radius:4px;width:70%}.calendar_wrapper .calendar-popup .center-highlight{position:absolute;top:50%;left:0;width:100%;height:40px;transform:translateY(-50%);border-top:1px solid red;border-bottom:1px solid red;pointer-events:none}.calendar_wrapper .calendar-popup .times{min-width:calc(14.6666666667rem / var(--scale));max-height:calc(30.3333333333rem / var(--scale));overflow-y:auto;overflow-x:hidden;border-left:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));box-shadow:-3px 0 8px 2px #0a0d121f;border-top-right-radius:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .times .span_time{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);display:inline-block;width:calc(4rem / var(--scale)) calc(3.3333333333rem / var(--scale));height:100%;max-width:calc(4rem / var(--scale));text-align:center;cursor:pointer;scroll-snap-align:center}.calendar_wrapper .calendar-popup .times .span_time:hover,.calendar_wrapper .calendar-popup .times .span_time.active{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
|
|
855
|
+
], usesOnChanges: true, ngImport: i0, template: "<!-- Calendar -->\r\n\r\n<div\r\n class=\"calendar_wrapper\"\r\n appOutsideClick\r\n (clickOutSide)=\"closeCalendar()\"\r\n [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n <div class=\"date_box\" (click)=\"toggleCalendar()\" #trigger>\r\n @if (dateConfig.selectionMode=='single') {\r\n\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select Date\"\r\n [value]=\"selectedDateTime\"\r\n readonly\r\n [disabled]=\"disableControl\"\r\n />\r\n } @else {\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select date Range\"\r\n [value]=\"\r\n selectedDateTime.start\r\n | date\r\n : 'MM/dd/yyyy' +\r\n ' - ' +\r\n (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n \"\r\n readonly\r\n />\r\n }\r\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n <img src=\"images/calendar.svg\" alt=\"\" />\r\n </div>\r\n @if (isOpen) {\r\n <div class=\"calendar-popup\" adaptivePosition [trigger]=\"trigger\" [matchWidth]=\"false\">\r\n <div class=\"calendar_container\">\r\n <!-- for the header -->\r\n <div class=\"calendar-header\">\r\n <div class=\"month-year\">\r\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n {{ getMonthYear().month }},</span\r\n >\r\n <div class=\"year\" (click)=\"calendarView = 'yearView'\">\r\n <span>\r\n {{ getMonthYear().year }}\r\n </span>\r\n <img src=\"images/chevron-down.svg\" class=\"year_arrow\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"arrow_container\">\r\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n <img src=\"images/arrow-up.svg\" alt=\"\" />\r\n </span>\r\n\r\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n <img src=\"images/arrow-down.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n </div>\r\n @if(calendarView === \"monthView\"){\r\n <div class=\"month-grid\">\r\n @for(month of monthRange | keyvalue; track $index){\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month.key)\"\r\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n >{{ month.value }}</span\r\n >\r\n }\r\n </div>\r\n } @else if(calendarView === 'yearView'){\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for(year of yearRange;track $index){\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <div class=\"calendar_body\">\r\n <div class=\"calendar-grid\">\r\n <!-- Day names -->\r\n @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index)\r\n {\r\n\r\n <div class=\"days_name\">\r\n {{ day }}\r\n </div>\r\n }\r\n\r\n <!-- Calendar dates -->\r\n @for (dayObj of daysInMonth; track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [ngClass]=\"{\r\n active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'single' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ),\r\n\r\n active_start:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeStart,\r\n\r\n active_end:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeEnd,\r\n\r\n range_between_active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n rangeStart != null &&\r\n rangeEnd != null &&\r\n dayObj.day > rangeStart &&\r\n dayObj.day < rangeEnd,\r\n\r\n other_month: !dayObj.isCurrentMonth,\r\n disabled: isDayDisabled(dayObj.day),\r\n notInCurrentMonth: !dayObj.isCurrentMonth\r\n }\"\r\n (click)=\"\r\n dayObj.isCurrentMonth &&\r\n !isDayDisabled(dayObj.day) &&\r\n selectDate(dayObj.day)\r\n \"\r\n >\r\n {{ dayObj.day }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"bottom_btn\">\r\n <div class=\"btn\">Clear</div>\r\n <div class=\"btn\">Today</div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <!-- TIME SLOTS (only if showTime = true) -->\r\n @if (dateConfig.enableTime) {\r\n <div class=\"times\">\r\n <div class=\"time-picker\">\r\n <div class=\"time-column\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- center selection indicator -->\r\n <div class=\"center-highlight\"></div>\r\n </div>\r\n\r\n <!-- @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n } -->\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;height:calc(3.3333333333rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-family:inherit}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-500)}.calendar_wrapper .date_box img{max-width:calc(1.3333333333rem / var(--scale));margin-right:calc(1rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{display:flex;position:absolute;top:calc(3.3333333333rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:100%;min-width:calc(27.8333333333rem / var(--scale));min-height:calc(30.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_container{flex:1;margin:calc(.25rem / var(--scale)) 0}.calendar_wrapper .calendar-popup .calendar-header{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button{cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding-right:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year img,.calendar_wrapper .calendar-popup .calendar-header .month-year .month img{max-width:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(27.0833333333rem / var(--scale));color:var(--neutral-600)}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale));transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600)}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .year:hover{background-color:var(--blue-100);color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:column;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:\"\"}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(27.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;width:calc(3.975rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{cursor:default;color:var(--neutral-400)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth:hover{background-color:transparent}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn .btn{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--blue-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.calendar_wrapper .calendar-popup .time-picker{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:360px;overflow:hidden;background:#fff}.calendar_wrapper .calendar-popup .time-column{display:flex;flex-direction:column;align-items:center;overflow-y:auto;scroll-snap-type:y mandatory}.calendar_wrapper .calendar-popup .time-column::-webkit-scrollbar{width:0}.calendar_wrapper .calendar-popup .span_time.active{background:#2f80ed;color:#fff;border-radius:4px;width:70%}.calendar_wrapper .calendar-popup .center-highlight{position:absolute;top:50%;left:0;width:100%;height:40px;transform:translateY(-50%);border-top:1px solid red;border-bottom:1px solid red;pointer-events:none}.calendar_wrapper .calendar-popup .times{min-width:calc(14.6666666667rem / var(--scale));max-height:calc(30.3333333333rem / var(--scale));overflow-y:auto;overflow-x:hidden;border-left:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));box-shadow:-3px 0 8px 2px #0a0d121f;border-top-right-radius:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .times .span_time{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);display:inline-block;width:calc(4rem / var(--scale)) calc(3.3333333333rem / var(--scale));height:100%;max-width:calc(4rem / var(--scale));text-align:center;cursor:pointer;scroll-snap-align:center}.calendar_wrapper .calendar-popup .times .span_time:hover,.calendar_wrapper .calendar-popup .times .span_time.active{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
|
|
856
856
|
}
|
|
857
857
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonCalendarComponent, decorators: [{
|
|
858
858
|
type: Component,
|
|
859
|
-
args: [{ selector: 'lib-common-calendar', imports: [CommonModule, OutsideClickDirective], providers: [
|
|
859
|
+
args: [{ selector: 'lib-common-calendar', imports: [CommonModule, OutsideClickDirective, AdaptivePositionDirective], providers: [
|
|
860
860
|
{
|
|
861
861
|
provide: NG_VALUE_ACCESSOR,
|
|
862
862
|
useExisting: CommonCalendarComponent,
|
|
863
863
|
multi: true,
|
|
864
864
|
},
|
|
865
865
|
DatePipe,
|
|
866
|
-
], template: "<!-- Calendar -->\r\n\r\n<div\r\n class=\"calendar_wrapper\"\r\n appOutsideClick\r\n (clickOutSide)=\"closeCalendar()\"\r\n [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n <div class=\"date_box\" (click)=\"toggleCalendar()\">\r\n @if (dateConfig.selectionMode=='single') {\r\n\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select Date\"\r\n [value]=\"selectedDateTime\"\r\n readonly\r\n [disabled]=\"disableControl\"\r\n />\r\n } @else {\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select date Range\"\r\n [value]=\"\r\n selectedDateTime.start\r\n | date\r\n : 'MM/dd/yyyy' +\r\n ' - ' +\r\n (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n \"\r\n readonly\r\n />\r\n }\r\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n <img src=\"images/calendar.svg\" alt=\"\" />\r\n </div>\r\n @if (isOpen) {\r\n <div class=\"calendar-popup\">\r\n <div class=\"calendar_container\">\r\n <!-- for the header -->\r\n <div class=\"calendar-header\">\r\n <div class=\"month-year\">\r\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n {{ getMonthYear().month }},</span\r\n >\r\n <div class=\"year\" (click)=\"calendarView = 'yearView'\">\r\n <span>\r\n {{ getMonthYear().year }}\r\n </span>\r\n <img src=\"images/chevron-down.svg\" class=\"year_arrow\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"arrow_container\">\r\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n <img src=\"images/arrow-up.svg\" alt=\"\" />\r\n </span>\r\n\r\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n <img src=\"images/arrow-down.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n </div>\r\n @if(calendarView === \"monthView\"){\r\n <div class=\"month-grid\">\r\n @for(month of monthRange | keyvalue; track $index){\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month.key)\"\r\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n >{{ month.value }}</span\r\n >\r\n }\r\n </div>\r\n } @else if(calendarView === 'yearView'){\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for(year of yearRange;track $index){\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <div class=\"calendar_body\">\r\n <div class=\"calendar-grid\">\r\n <!-- Day names -->\r\n @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index)\r\n {\r\n\r\n <div class=\"days_name\">\r\n {{ day }}\r\n </div>\r\n }\r\n\r\n <!-- Calendar dates -->\r\n @for (dayObj of daysInMonth; track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [ngClass]=\"{\r\n active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'single' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ),\r\n\r\n active_start:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeStart,\r\n\r\n active_end:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeEnd,\r\n\r\n range_between_active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n rangeStart != null &&\r\n rangeEnd != null &&\r\n dayObj.day > rangeStart &&\r\n dayObj.day < rangeEnd,\r\n\r\n other_month: !dayObj.isCurrentMonth,\r\n disabled: isDayDisabled(dayObj.day),\r\n notInCurrentMonth: !dayObj.isCurrentMonth\r\n }\"\r\n (click)=\"\r\n dayObj.isCurrentMonth &&\r\n !isDayDisabled(dayObj.day) &&\r\n selectDate(dayObj.day)\r\n \"\r\n >\r\n {{ dayObj.day }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"bottom_btn\">\r\n <div class=\"btn\">Clear</div>\r\n <div class=\"btn\">Today</div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <!-- TIME SLOTS (only if showTime = true) -->\r\n @if (dateConfig.enableTime) {\r\n <div class=\"times\">\r\n <div class=\"time-picker\">\r\n <div class=\"time-column\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- center selection indicator -->\r\n <div class=\"center-highlight\"></div>\r\n </div>\r\n\r\n <!-- @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n } -->\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;height:calc(3.3333333333rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-family:inherit}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-500)}.calendar_wrapper .date_box img{max-width:calc(1.3333333333rem / var(--scale));margin-right:calc(1rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{display:flex;position:absolute;top:calc(3.3333333333rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:100%;min-width:calc(27.8333333333rem / var(--scale));min-height:calc(30.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_container{flex:1;margin:calc(.25rem / var(--scale)) 0}.calendar_wrapper .calendar-popup .calendar-header{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button{cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding-right:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year img,.calendar_wrapper .calendar-popup .calendar-header .month-year .month img{max-width:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(27.0833333333rem / var(--scale));color:var(--neutral-600)}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale));transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600)}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .year:hover{background-color:var(--blue-100);color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:column;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:\"\"}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(27.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;width:calc(3.975rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{cursor:default;color:var(--neutral-400)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth:hover{background-color:transparent}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn .btn{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--blue-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.calendar_wrapper .calendar-popup .time-picker{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:360px;overflow:hidden;background:#fff}.calendar_wrapper .calendar-popup .time-column{display:flex;flex-direction:column;align-items:center;overflow-y:auto;scroll-snap-type:y mandatory}.calendar_wrapper .calendar-popup .time-column::-webkit-scrollbar{width:0}.calendar_wrapper .calendar-popup .span_time.active{background:#2f80ed;color:#fff;border-radius:4px;width:70%}.calendar_wrapper .calendar-popup .center-highlight{position:absolute;top:50%;left:0;width:100%;height:40px;transform:translateY(-50%);border-top:1px solid red;border-bottom:1px solid red;pointer-events:none}.calendar_wrapper .calendar-popup .times{min-width:calc(14.6666666667rem / var(--scale));max-height:calc(30.3333333333rem / var(--scale));overflow-y:auto;overflow-x:hidden;border-left:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));box-shadow:-3px 0 8px 2px #0a0d121f;border-top-right-radius:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .times .span_time{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);display:inline-block;width:calc(4rem / var(--scale)) calc(3.3333333333rem / var(--scale));height:100%;max-width:calc(4rem / var(--scale));text-align:center;cursor:pointer;scroll-snap-align:center}.calendar_wrapper .calendar-popup .times .span_time:hover,.calendar_wrapper .calendar-popup .times .span_time.active{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"] }]
|
|
866
|
+
], template: "<!-- Calendar -->\r\n\r\n<div\r\n class=\"calendar_wrapper\"\r\n appOutsideClick\r\n (clickOutSide)=\"closeCalendar()\"\r\n [ngClass]=\"{ 'pe-none': disableControl }\"\r\n>\r\n <div class=\"date_box\" (click)=\"toggleCalendar()\" #trigger>\r\n @if (dateConfig.selectionMode=='single') {\r\n\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select Date\"\r\n [value]=\"selectedDateTime\"\r\n readonly\r\n [disabled]=\"disableControl\"\r\n />\r\n } @else {\r\n <input\r\n type=\"text\"\r\n placeholder=\"Select date Range\"\r\n [value]=\"\r\n selectedDateTime.start\r\n | date\r\n : 'MM/dd/yyyy' +\r\n ' - ' +\r\n (selectedDateTime.end | date : 'MM/dd/yyyy')\r\n \"\r\n readonly\r\n />\r\n }\r\n <!-- <i-feather name=\"calendar\" class=\"calendar_icon\"></i-feather> -->\r\n <img src=\"images/calendar.svg\" alt=\"\" />\r\n </div>\r\n @if (isOpen) {\r\n <div class=\"calendar-popup\" adaptivePosition [trigger]=\"trigger\" [matchWidth]=\"false\">\r\n <div class=\"calendar_container\">\r\n <!-- for the header -->\r\n <div class=\"calendar-header\">\r\n <div class=\"month-year\">\r\n <span class=\"month\" (click)=\"calendarView = 'monthView'\">\r\n {{ getMonthYear().month }},</span\r\n >\r\n <div class=\"year\" (click)=\"calendarView = 'yearView'\">\r\n <span>\r\n {{ getMonthYear().year }}\r\n </span>\r\n <img src=\"images/chevron-down.svg\" class=\"year_arrow\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"arrow_container\">\r\n <span class=\"navigation-button\" (click)=\"previousMonth()\">\r\n <img src=\"images/arrow-up.svg\" alt=\"\" />\r\n </span>\r\n\r\n <span class=\"navigation-button\" (click)=\"nextMonth()\">\r\n <img src=\"images/arrow-down.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n </div>\r\n @if(calendarView === \"monthView\"){\r\n <div class=\"month-grid\">\r\n @for(month of monthRange | keyvalue; track $index){\r\n <span\r\n class=\"month\"\r\n (click)=\"selectMonth(month.key)\"\r\n [ngClass]=\"{ selected: month.key == currentDate.getMonth() }\"\r\n >{{ month.value }}</span\r\n >\r\n }\r\n </div>\r\n } @else if(calendarView === 'yearView'){\r\n <div class=\"year-selector\">\r\n <span class=\"navigation-button pointer\" (click)=\"previousYearRange()\">\r\n <img src=\"images/chevron-left.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"year-grid\">\r\n @for(year of yearRange;track $index){\r\n <span\r\n class=\"year\"\r\n (click)=\"selectYear(year)\"\r\n [ngClass]=\"{ selected: year == currentDate.getFullYear() }\"\r\n >{{ year }}</span\r\n >\r\n }\r\n </div>\r\n <span class=\"navigation-button pointer\" (click)=\"nextYearRange()\">\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </span>\r\n </div>\r\n } @else {\r\n <div class=\"calendar_body\">\r\n <div class=\"calendar-grid\">\r\n <!-- Day names -->\r\n @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index)\r\n {\r\n\r\n <div class=\"days_name\">\r\n {{ day }}\r\n </div>\r\n }\r\n\r\n <!-- Calendar dates -->\r\n @for (dayObj of daysInMonth; track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [ngClass]=\"{\r\n active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'single' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ),\r\n\r\n active_start:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeStart,\r\n\r\n active_end:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n dayObj.day === rangeEnd,\r\n\r\n range_between_active:\r\n dayObj.isCurrentMonth &&\r\n dateConfig.selectionMode === 'range' &&\r\n isSelectedDate(\r\n dayObj.day,\r\n dayObj.date.getMonth(),\r\n dayObj.date.getFullYear()\r\n ) &&\r\n rangeStart != null &&\r\n rangeEnd != null &&\r\n dayObj.day > rangeStart &&\r\n dayObj.day < rangeEnd,\r\n\r\n other_month: !dayObj.isCurrentMonth,\r\n disabled: isDayDisabled(dayObj.day),\r\n notInCurrentMonth: !dayObj.isCurrentMonth\r\n }\"\r\n (click)=\"\r\n dayObj.isCurrentMonth &&\r\n !isDayDisabled(dayObj.day) &&\r\n selectDate(dayObj.day)\r\n \"\r\n >\r\n {{ dayObj.day }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"bottom_btn\">\r\n <div class=\"btn\">Clear</div>\r\n <div class=\"btn\">Today</div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <!-- TIME SLOTS (only if showTime = true) -->\r\n @if (dateConfig.enableTime) {\r\n <div class=\"times\">\r\n <div class=\"time-picker\">\r\n <div class=\"time-column\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- center selection indicator -->\r\n <div class=\"center-highlight\"></div>\r\n </div>\r\n\r\n <!-- @for (timeSlot of timeSlots; track $index) {\r\n <span\r\n class=\"span_time\"\r\n [ngClass]=\"{ active: selectedTime === timeSlot.label }\"\r\n (click)=\"selectTime(timeSlot.label)\"\r\n >\r\n {{ timeSlot.label }}\r\n </span>\r\n } -->\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.calendar_wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:\"\";position:relative;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .pe-none{pointer-events:none}.calendar_wrapper .date_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:0;height:calc(3.3333333333rem / var(--scale))}.calendar_wrapper .date_box input{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;width:100%;height:100%;cursor:pointer;border:0 solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-family:inherit}.calendar_wrapper .date_box input::placeholder{color:var(--neutral-500)}.calendar_wrapper .date_box img{max-width:calc(1.3333333333rem / var(--scale));margin-right:calc(1rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup{display:flex;position:absolute;top:calc(3.3333333333rem / var(--scale));right:0;z-index:10;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--box-shadow);width:100%;min-width:calc(27.8333333333rem / var(--scale));min-height:calc(30.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_container{flex:1;margin:calc(.25rem / var(--scale)) 0}.calendar_wrapper .calendar-popup .calendar-header{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container{display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button{cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .arrow_container .navigation-button img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year{font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex}.calendar_wrapper .calendar-popup .calendar-header .month-year .year,.calendar_wrapper .calendar-popup .calendar-header .month-year .month{padding-right:calc(.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer}.calendar_wrapper .calendar-popup .calendar-header .month-year .year img,.calendar_wrapper .calendar-popup .calendar-header .month-year .month img{max-width:calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar-header .month-year .year.selected,.calendar_wrapper .calendar-popup .calendar-header .month-year .month.selected{color:var(--blue-700)}.calendar_wrapper .calendar-popup .year-selector{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .year-selector .year-grid{width:100%}.calendar_wrapper .calendar-popup .year-selector img{max-width:calc(1.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .year-grid,.calendar_wrapper .calendar-popup .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:500;height:calc(27.0833333333rem / var(--scale));color:var(--neutral-600)}.calendar_wrapper .calendar-popup .year-grid .month,.calendar_wrapper .calendar-popup .year-grid .year,.calendar_wrapper .calendar-popup .month-grid .month,.calendar_wrapper .calendar-popup .month-grid .year{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;border-radius:calc(.3333333333rem / var(--scale));transition:ease-in-out .2s}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .month.selected,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .year-grid .year.selected,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .month.selected,.calendar_wrapper .calendar-popup .month-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .year.selected{color:var(--white);background-color:var(--blue-600)}.calendar_wrapper .calendar-popup .year-grid .month:hover,.calendar_wrapper .calendar-popup .year-grid .year:hover,.calendar_wrapper .calendar-popup .month-grid .month:hover,.calendar_wrapper .calendar-popup .month-grid .year:hover{background-color:var(--blue-100);color:var(--blue-700)}.calendar_wrapper .calendar-popup .calendar_body{display:flex;flex-direction:column;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:\"\"}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;min-width:calc(27.8333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .days_name{height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end,.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{background-color:var(--blue-600);color:var(--white);border-radius:0}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day{border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;width:calc(3.975rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(2rem / var(--scale));font-weight:600;color:var(--neutral-600)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active{background-color:var(--blue-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day:hover{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.selected{background-color:var(--orange-600);color:var(--white)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.disabled{color:var(--neutral-400);pointer-events:none;background:var(--neutral-200)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth{cursor:default;color:var(--neutral-400)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.notInCurrentMonth:hover{background-color:transparent}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_start{border-top-left-radius:calc(.3333333333rem / var(--scale));border-bottom-left-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.range_between_active{color:var(--blue-600);background-color:var(--blue-100)}.calendar_wrapper .calendar-popup .calendar_body .calendar-grid .calendar-day.active_end{border-top-right-radius:calc(.3333333333rem / var(--scale));border-bottom-right-radius:calc(.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.calendar_wrapper .calendar-popup .calendar_body .bottom_btn .btn{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--blue-600);display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer}.calendar_wrapper .calendar-popup .time-picker{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:360px;overflow:hidden;background:#fff}.calendar_wrapper .calendar-popup .time-column{display:flex;flex-direction:column;align-items:center;overflow-y:auto;scroll-snap-type:y mandatory}.calendar_wrapper .calendar-popup .time-column::-webkit-scrollbar{width:0}.calendar_wrapper .calendar-popup .span_time.active{background:#2f80ed;color:#fff;border-radius:4px;width:70%}.calendar_wrapper .calendar-popup .center-highlight{position:absolute;top:50%;left:0;width:100%;height:40px;transform:translateY(-50%);border-top:1px solid red;border-bottom:1px solid red;pointer-events:none}.calendar_wrapper .calendar-popup .times{min-width:calc(14.6666666667rem / var(--scale));max-height:calc(30.3333333333rem / var(--scale));overflow-y:auto;overflow-x:hidden;border-left:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));box-shadow:-3px 0 8px 2px #0a0d121f;border-top-right-radius:calc(.6666666667rem / var(--scale))}.calendar_wrapper .calendar-popup .times .span_time{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);display:inline-block;width:calc(4rem / var(--scale)) calc(3.3333333333rem / var(--scale));height:100%;max-width:calc(4rem / var(--scale));text-align:center;cursor:pointer;scroll-snap-align:center}.calendar_wrapper .calendar-popup .times .span_time:hover,.calendar_wrapper .calendar-popup .times .span_time.active{background-color:var(--blue-100);color:var(--blue-700);transition:ease-in-out .3s}@media only screen and (min-width: 1024px) and (max-width: 1280px){.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr)}}\n"] }]
|
|
867
867
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DatePipe }], propDecorators: { dateTimeSelected: [{
|
|
868
868
|
type: Output
|
|
869
869
|
}], dateConfig: [{
|
|
@@ -886,8 +886,9 @@ class ColDefs {
|
|
|
886
886
|
cellRenderer;
|
|
887
887
|
}
|
|
888
888
|
class CatsDataGridComponent {
|
|
889
|
-
|
|
889
|
+
renderer;
|
|
890
890
|
zone;
|
|
891
|
+
cd;
|
|
891
892
|
tableOptions;
|
|
892
893
|
totalRecords = 0;
|
|
893
894
|
sortingRequired = true;
|
|
@@ -925,7 +926,7 @@ class CatsDataGridComponent {
|
|
|
925
926
|
dragOverIndex = null;
|
|
926
927
|
draggedIndex = null;
|
|
927
928
|
originalColDefs = [];
|
|
928
|
-
|
|
929
|
+
filteredRowData = [];
|
|
929
930
|
filteredData = [];
|
|
930
931
|
currentColumn;
|
|
931
932
|
currentIndex;
|
|
@@ -963,23 +964,27 @@ class CatsDataGridComponent {
|
|
|
963
964
|
];
|
|
964
965
|
showPin = false;
|
|
965
966
|
pinActionClicked = {};
|
|
966
|
-
|
|
967
|
-
|
|
967
|
+
removeMouseMove;
|
|
968
|
+
removeMouseUp;
|
|
969
|
+
rafId = null;
|
|
970
|
+
appliedFilters = [];
|
|
971
|
+
appliedFiltersEvent = new EventEmitter();
|
|
972
|
+
activeGroupsEvent = new EventEmitter();
|
|
973
|
+
dynamicGroupingFiltering = false;
|
|
974
|
+
constructor(renderer, zone, cd) {
|
|
975
|
+
this.renderer = renderer;
|
|
968
976
|
this.zone = zone;
|
|
977
|
+
this.cd = cd;
|
|
969
978
|
}
|
|
970
|
-
ngOnInit() {
|
|
971
|
-
// this.originalRowData = structuredClone(this.rowData);
|
|
972
|
-
// this.filteredRowData = structuredClone(this.rowData);
|
|
973
|
-
// this.originalColDefs = [...this.colDefs];
|
|
974
|
-
}
|
|
979
|
+
ngOnInit() { }
|
|
975
980
|
ngOnChanges(changes) {
|
|
976
981
|
if (changes['colDefs']?.currentValue) {
|
|
977
|
-
this.
|
|
982
|
+
this.resetPagination();
|
|
978
983
|
this.colDefs = this.getUpdatedColDefs(changes['colDefs']?.currentValue);
|
|
979
984
|
this.originalColDefs = [...this.colDefs];
|
|
980
985
|
}
|
|
981
986
|
if (changes['totalRecords']?.currentValue) {
|
|
982
|
-
this.
|
|
987
|
+
this.resetPagination();
|
|
983
988
|
}
|
|
984
989
|
if (changes['rowData']?.currentValue) {
|
|
985
990
|
if (this.selectedRowEmpty)
|
|
@@ -990,12 +995,12 @@ class CatsDataGridComponent {
|
|
|
990
995
|
[...this.selectedRow, row];
|
|
991
996
|
return row;
|
|
992
997
|
});
|
|
993
|
-
|
|
994
|
-
|
|
998
|
+
if (this.dynamicGroupingFiltering && this.groupBy.length > 0) {
|
|
999
|
+
this.groupedResult = structuredClone(this.rowData);
|
|
1000
|
+
}
|
|
995
1001
|
if (!this.activeFilters.size) {
|
|
996
1002
|
this.originalRowData = structuredClone(this.rowData);
|
|
997
1003
|
}
|
|
998
|
-
console.log(this.activeFilters.size);
|
|
999
1004
|
this.getGroupedData();
|
|
1000
1005
|
}
|
|
1001
1006
|
}
|
|
@@ -1015,8 +1020,7 @@ class CatsDataGridComponent {
|
|
|
1015
1020
|
if (!col.filterType && !col.isAction) {
|
|
1016
1021
|
col.filterType = 'text';
|
|
1017
1022
|
}
|
|
1018
|
-
col.
|
|
1019
|
-
col.numberLogic = 'AND';
|
|
1023
|
+
col.filterLogic = 'OR';
|
|
1020
1024
|
let updatedCol = {
|
|
1021
1025
|
...col,
|
|
1022
1026
|
filterable: col.filterable ?? true,
|
|
@@ -1030,13 +1034,13 @@ class CatsDataGridComponent {
|
|
|
1030
1034
|
case 'text':
|
|
1031
1035
|
updatedCol = {
|
|
1032
1036
|
...updatedCol,
|
|
1033
|
-
|
|
1037
|
+
filters: [
|
|
1034
1038
|
{
|
|
1035
|
-
|
|
1039
|
+
filterOperation: 'contains',
|
|
1036
1040
|
filterValue: '',
|
|
1037
1041
|
},
|
|
1038
1042
|
{
|
|
1039
|
-
|
|
1043
|
+
filterOperation: 'startsWith',
|
|
1040
1044
|
filterValue: '',
|
|
1041
1045
|
},
|
|
1042
1046
|
],
|
|
@@ -1046,25 +1050,15 @@ class CatsDataGridComponent {
|
|
|
1046
1050
|
case 'date':
|
|
1047
1051
|
updatedCol = {
|
|
1048
1052
|
...updatedCol,
|
|
1049
|
-
|
|
1050
|
-
|
|
1053
|
+
filterValue: '',
|
|
1054
|
+
filters: [
|
|
1051
1055
|
{
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
},
|
|
1055
|
-
{
|
|
1056
|
-
filterType: '=',
|
|
1057
|
-
numberValue: '',
|
|
1058
|
-
},
|
|
1059
|
-
],
|
|
1060
|
-
dateFilters: [
|
|
1061
|
-
{
|
|
1062
|
-
filterType: '=',
|
|
1063
|
-
dateValue: '',
|
|
1056
|
+
filterOperation: '=',
|
|
1057
|
+
filterValue: '',
|
|
1064
1058
|
},
|
|
1065
1059
|
{
|
|
1066
|
-
|
|
1067
|
-
|
|
1060
|
+
filterOperation: '=',
|
|
1061
|
+
filterValue: '',
|
|
1068
1062
|
},
|
|
1069
1063
|
],
|
|
1070
1064
|
};
|
|
@@ -1155,7 +1149,7 @@ class CatsDataGridComponent {
|
|
|
1155
1149
|
}
|
|
1156
1150
|
}
|
|
1157
1151
|
/**
|
|
1158
|
-
* @description Method to filter data according to
|
|
1152
|
+
* @description Method to filter data according to filterOperation and comparator selection
|
|
1159
1153
|
* @author Anand Pandey
|
|
1160
1154
|
* @param {}
|
|
1161
1155
|
* @returns void
|
|
@@ -1166,7 +1160,7 @@ class CatsDataGridComponent {
|
|
|
1166
1160
|
const field = col.fieldName;
|
|
1167
1161
|
// *********** TEXT FILTER ***********
|
|
1168
1162
|
if (col.filterType === 'text') {
|
|
1169
|
-
const [c1, c2] = col.
|
|
1163
|
+
const [c1, c2] = col.filters;
|
|
1170
1164
|
const textVal1 = c1.filterValue?.toLowerCase().trim();
|
|
1171
1165
|
const textVal2 = c2.filterValue?.toLowerCase().trim();
|
|
1172
1166
|
if (!textVal1 && !textVal2) {
|
|
@@ -1177,19 +1171,19 @@ class CatsDataGridComponent {
|
|
|
1177
1171
|
result = result.filter((r) => {
|
|
1178
1172
|
const fieldVal = String(r[field]).toLowerCase();
|
|
1179
1173
|
const cond1 = textVal1
|
|
1180
|
-
? this.evaluateTextFilterCondition(c1.
|
|
1174
|
+
? this.evaluateTextFilterCondition(c1.filterOperation, fieldVal, textVal1)
|
|
1181
1175
|
: false;
|
|
1182
1176
|
const cond2 = textVal2
|
|
1183
|
-
? this.evaluateTextFilterCondition(c2.
|
|
1177
|
+
? this.evaluateTextFilterCondition(c2.filterOperation, fieldVal, textVal2)
|
|
1184
1178
|
: false;
|
|
1185
|
-
return col.
|
|
1179
|
+
return col.filterLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
|
|
1186
1180
|
});
|
|
1187
1181
|
}
|
|
1188
1182
|
// *********** NUMBER FILTER ***********
|
|
1189
1183
|
if (col.filterType === 'number') {
|
|
1190
|
-
const [c1, c2] = col.
|
|
1191
|
-
const numValue1 = Number(c1.
|
|
1192
|
-
const numValue2 = Number(c2.
|
|
1184
|
+
const [c1, c2] = col.filters;
|
|
1185
|
+
const numValue1 = Number(c1.filterValue);
|
|
1186
|
+
const numValue2 = Number(c2.filterValue);
|
|
1193
1187
|
if (!numValue1 && !numValue2) {
|
|
1194
1188
|
this.activeFilters.delete(col.fieldName);
|
|
1195
1189
|
return;
|
|
@@ -1198,19 +1192,19 @@ class CatsDataGridComponent {
|
|
|
1198
1192
|
result = result.filter((r) => {
|
|
1199
1193
|
const fieldVal = Number(r[field]);
|
|
1200
1194
|
const cond1 = numValue1
|
|
1201
|
-
? this.evaluateNumDateFilterCondition(c1.
|
|
1195
|
+
? this.evaluateNumDateFilterCondition(c1.filterOperation, fieldVal, numValue1)
|
|
1202
1196
|
: false;
|
|
1203
1197
|
const cond2 = numValue2
|
|
1204
|
-
? this.evaluateNumDateFilterCondition(c2.
|
|
1198
|
+
? this.evaluateNumDateFilterCondition(c2.filterOperation, fieldVal, numValue2)
|
|
1205
1199
|
: false;
|
|
1206
|
-
return col.
|
|
1200
|
+
return col.filterLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
|
|
1207
1201
|
});
|
|
1208
1202
|
}
|
|
1209
1203
|
// *********** DATE FILTER ***********
|
|
1210
1204
|
if (col.filterType === 'date') {
|
|
1211
|
-
const [c1, c2] = col.
|
|
1212
|
-
const selected1 = this.normalizeDate(c1.
|
|
1213
|
-
const selected2 = this.normalizeDate(c2.
|
|
1205
|
+
const [c1, c2] = col.filters;
|
|
1206
|
+
const selected1 = this.normalizeDate(c1.filterValue);
|
|
1207
|
+
const selected2 = this.normalizeDate(c2.filterValue);
|
|
1214
1208
|
if (!selected1 && !selected2) {
|
|
1215
1209
|
this.activeFilters.delete(col.fieldName);
|
|
1216
1210
|
return;
|
|
@@ -1219,12 +1213,12 @@ class CatsDataGridComponent {
|
|
|
1219
1213
|
result = result.filter((r) => {
|
|
1220
1214
|
const fieldVal = this.normalizeDate(r[field]);
|
|
1221
1215
|
const cond1 = selected1
|
|
1222
|
-
? this.evaluateNumDateFilterCondition(c1.
|
|
1216
|
+
? this.evaluateNumDateFilterCondition(c1.filterOperation, fieldVal ?? r[field], selected1)
|
|
1223
1217
|
: false;
|
|
1224
1218
|
const cond2 = selected2
|
|
1225
|
-
? this.evaluateNumDateFilterCondition(c2.
|
|
1219
|
+
? this.evaluateNumDateFilterCondition(c2.filterOperation, fieldVal ?? r[field], selected2)
|
|
1226
1220
|
: false;
|
|
1227
|
-
return col.
|
|
1221
|
+
return col.filterLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
|
|
1228
1222
|
});
|
|
1229
1223
|
}
|
|
1230
1224
|
// *********** SET FILTER ***********
|
|
@@ -1249,7 +1243,35 @@ class CatsDataGridComponent {
|
|
|
1249
1243
|
this.activeFilters.delete(col.fieldName);
|
|
1250
1244
|
}
|
|
1251
1245
|
}
|
|
1246
|
+
if (this.activeFilters.has(col.fieldName)) {
|
|
1247
|
+
let filterObj = {
|
|
1248
|
+
fieldName: col.fieldName,
|
|
1249
|
+
filterLogic: col.filterLogic,
|
|
1250
|
+
filters: col.filters,
|
|
1251
|
+
};
|
|
1252
|
+
if (col.filterType === 'set') {
|
|
1253
|
+
filterObj.filters = Array(...col.selectedValues).map((f) => ({
|
|
1254
|
+
filterOperation: 'equals',
|
|
1255
|
+
filterValue: f,
|
|
1256
|
+
}));
|
|
1257
|
+
filterObj.filterLogic = 'OR';
|
|
1258
|
+
}
|
|
1259
|
+
const existingIndex = this.appliedFilters.findIndex((f) => f.fieldName === col.fieldName);
|
|
1260
|
+
if (existingIndex === -1) {
|
|
1261
|
+
this.appliedFilters.push(filterObj);
|
|
1262
|
+
}
|
|
1263
|
+
else {
|
|
1264
|
+
this.appliedFilters[existingIndex] = filterObj;
|
|
1265
|
+
}
|
|
1266
|
+
}
|
|
1267
|
+
else {
|
|
1268
|
+
this.appliedFilters = this.appliedFilters.filter((f) => f.fieldName !== col.fieldName);
|
|
1269
|
+
}
|
|
1252
1270
|
});
|
|
1271
|
+
if (this.dynamicGroupingFiltering) {
|
|
1272
|
+
this.appliedFiltersEvent.emit(this.appliedFilters);
|
|
1273
|
+
return;
|
|
1274
|
+
}
|
|
1253
1275
|
this.filteredData = result;
|
|
1254
1276
|
this.rowData = this.filteredData;
|
|
1255
1277
|
this.getGroupedData();
|
|
@@ -1257,19 +1279,11 @@ class CatsDataGridComponent {
|
|
|
1257
1279
|
}
|
|
1258
1280
|
resetFilter(col) {
|
|
1259
1281
|
switch (col.filterType) {
|
|
1260
|
-
case 'text':
|
|
1261
|
-
|
|
1262
|
-
col.textLogic = 'AND';
|
|
1263
|
-
break;
|
|
1264
|
-
}
|
|
1265
|
-
case 'number': {
|
|
1266
|
-
col.numberFilters.forEach((f) => (f.numberValue = ''));
|
|
1267
|
-
col.numberLogic = 'AND';
|
|
1268
|
-
break;
|
|
1269
|
-
}
|
|
1282
|
+
case 'text':
|
|
1283
|
+
case 'number':
|
|
1270
1284
|
case 'date': {
|
|
1271
|
-
col.
|
|
1272
|
-
col.
|
|
1285
|
+
col.filters.forEach((f) => (f.filterValue = ''));
|
|
1286
|
+
col.filterLogic = 'OR';
|
|
1273
1287
|
break;
|
|
1274
1288
|
}
|
|
1275
1289
|
case 'set': {
|
|
@@ -1278,9 +1292,24 @@ class CatsDataGridComponent {
|
|
|
1278
1292
|
break;
|
|
1279
1293
|
}
|
|
1280
1294
|
}
|
|
1295
|
+
this.appliedFilters = this.appliedFilters.filter((f) => f.fieldName !== col.fieldName);
|
|
1281
1296
|
// Remove active flag
|
|
1282
1297
|
this.activeFilters.delete(col.fieldName);
|
|
1283
1298
|
// Re-apply all filters
|
|
1299
|
+
if (this.dynamicGroupingFiltering) {
|
|
1300
|
+
this.appliedFiltersEvent.emit(this.appliedFilters);
|
|
1301
|
+
return;
|
|
1302
|
+
}
|
|
1303
|
+
this.applyAllFilters();
|
|
1304
|
+
}
|
|
1305
|
+
removeActiveFilter(col) {
|
|
1306
|
+
this.activeFilters.delete(col.fieldName);
|
|
1307
|
+
this.colDefs.find((c) => c.fieldName === col.fieldName).filters.forEach((f) => (f.filterValue = ''));
|
|
1308
|
+
this.appliedFilters = this.appliedFilters.filter((f) => f.fieldName !== col.fieldName);
|
|
1309
|
+
if (this.dynamicGroupingFiltering) {
|
|
1310
|
+
this.appliedFiltersEvent.emit(this.appliedFilters);
|
|
1311
|
+
return;
|
|
1312
|
+
}
|
|
1284
1313
|
this.applyAllFilters();
|
|
1285
1314
|
}
|
|
1286
1315
|
/**
|
|
@@ -1407,7 +1436,12 @@ class CatsDataGridComponent {
|
|
|
1407
1436
|
*/
|
|
1408
1437
|
getGroupedData() {
|
|
1409
1438
|
if (this.groupBy && this.groupBy.length > 0) {
|
|
1439
|
+
if (this.dynamicGroupingFiltering) {
|
|
1440
|
+
this.activeGroupsEvent.emit(this.groupBy);
|
|
1441
|
+
return;
|
|
1442
|
+
}
|
|
1410
1443
|
this.groupedResult = this.groupData(this.rowData, this.groupBy) || [];
|
|
1444
|
+
//this.activeGroupsEvent.emit(this.activeGroups);
|
|
1411
1445
|
}
|
|
1412
1446
|
}
|
|
1413
1447
|
/**
|
|
@@ -1419,42 +1453,16 @@ class CatsDataGridComponent {
|
|
|
1419
1453
|
*/
|
|
1420
1454
|
startResize(event, index) {
|
|
1421
1455
|
event.preventDefault();
|
|
1456
|
+
event.stopPropagation();
|
|
1422
1457
|
this.isResizing = true;
|
|
1423
1458
|
this.resizingColumnIndex = index;
|
|
1424
1459
|
this.startX = event.clientX;
|
|
1425
|
-
this.startWidth = this.colDefs[index].width;
|
|
1460
|
+
this.startWidth = this.colDefs[index].width ?? 150;
|
|
1426
1461
|
this.zone.runOutsideAngular(() => {
|
|
1427
|
-
|
|
1428
|
-
|
|
1462
|
+
this.removeMouseMove = this.renderer.listen('document', 'mousemove', (e) => this.onMouseMove(e));
|
|
1463
|
+
this.removeMouseUp = this.renderer.listen('document', 'mouseup', (e) => this.stopResize(e));
|
|
1429
1464
|
});
|
|
1430
1465
|
}
|
|
1431
|
-
// startResize(event: MouseEvent, index: number) {
|
|
1432
|
-
// event.preventDefault();
|
|
1433
|
-
// this.isResizing = true;
|
|
1434
|
-
// this.resizingColumnIndex = index;
|
|
1435
|
-
// this.startX = event.clientX;
|
|
1436
|
-
// this.startWidth = this.colDefs[index].width;
|
|
1437
|
-
// document.addEventListener('mousemove', this.onMouseMove);
|
|
1438
|
-
// document.addEventListener('mouseup', this.stopResize);
|
|
1439
|
-
// }
|
|
1440
|
-
/**
|
|
1441
|
-
* @description Handles column resizing as the mouse moves.
|
|
1442
|
-
* @author Anand Pandey
|
|
1443
|
-
* @param {MouseEvent} event - Mouse movement event during resizing.
|
|
1444
|
-
* @returns {void}
|
|
1445
|
-
*/
|
|
1446
|
-
// onMouseMove = (event: MouseEvent) => {
|
|
1447
|
-
// if (
|
|
1448
|
-
// this.resizingColumnIndex === null ||
|
|
1449
|
-
// this.resizingColumnIndex === undefined
|
|
1450
|
-
// )
|
|
1451
|
-
// return;
|
|
1452
|
-
// const movement = event.clientX - this.startX;
|
|
1453
|
-
// const newWidth = this.startWidth + movement;
|
|
1454
|
-
// if (newWidth > 50) {
|
|
1455
|
-
// this.colDefs[this.resizingColumnIndex].width = newWidth;
|
|
1456
|
-
// }
|
|
1457
|
-
// };
|
|
1458
1466
|
/**
|
|
1459
1467
|
* @description Handles column resizing as the mouse moves.
|
|
1460
1468
|
* @author Anand Pandey
|
|
@@ -1462,16 +1470,19 @@ class CatsDataGridComponent {
|
|
|
1462
1470
|
* @returns {void}
|
|
1463
1471
|
*/
|
|
1464
1472
|
onMouseMove = (event) => {
|
|
1465
|
-
if (this.resizingColumnIndex == null)
|
|
1473
|
+
if (this.resizingColumnIndex == null || this.rafId)
|
|
1466
1474
|
return;
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
this.
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
+
this.rafId = requestAnimationFrame(() => {
|
|
1476
|
+
const movement = event.clientX - this.startX;
|
|
1477
|
+
const newWidth = this.startWidth + movement;
|
|
1478
|
+
if (newWidth > 50) {
|
|
1479
|
+
this.zone.run(() => {
|
|
1480
|
+
this.colDefs[this.resizingColumnIndex].width = newWidth;
|
|
1481
|
+
this.cd.markForCheck();
|
|
1482
|
+
});
|
|
1483
|
+
}
|
|
1484
|
+
this.rafId = null;
|
|
1485
|
+
});
|
|
1475
1486
|
};
|
|
1476
1487
|
/**
|
|
1477
1488
|
* @description Stops the column resizing operation.
|
|
@@ -1482,10 +1493,14 @@ class CatsDataGridComponent {
|
|
|
1482
1493
|
*/
|
|
1483
1494
|
stopResize = (event) => {
|
|
1484
1495
|
event.stopPropagation();
|
|
1485
|
-
this.resizingColumnIndex = null;
|
|
1486
1496
|
this.isResizing = false;
|
|
1487
|
-
|
|
1488
|
-
|
|
1497
|
+
this.resizingColumnIndex = null;
|
|
1498
|
+
this.removeMouseMove?.();
|
|
1499
|
+
this.removeMouseUp?.();
|
|
1500
|
+
if (this.rafId) {
|
|
1501
|
+
cancelAnimationFrame(this.rafId);
|
|
1502
|
+
this.rafId = null;
|
|
1503
|
+
}
|
|
1489
1504
|
};
|
|
1490
1505
|
/**
|
|
1491
1506
|
* @description Recursively groups row data into a hierarchical structure based on the provided group keys.
|
|
@@ -1625,12 +1640,12 @@ class CatsDataGridComponent {
|
|
|
1625
1640
|
* @param none
|
|
1626
1641
|
* @returns void
|
|
1627
1642
|
*/
|
|
1628
|
-
|
|
1629
|
-
this.pageDetails.pageSize = 20;
|
|
1643
|
+
resetPagination() {
|
|
1644
|
+
//this.pageDetails.pageSize = 20;
|
|
1630
1645
|
this.pageDetails.currentPage = 1;
|
|
1631
1646
|
this.pageDetails.totalPages = 1;
|
|
1632
1647
|
this.recordsToShow.min = 0;
|
|
1633
|
-
this.recordsToShow.max =
|
|
1648
|
+
this.recordsToShow.max = this.pageDetails.pageSize;
|
|
1634
1649
|
this.setPageCount();
|
|
1635
1650
|
}
|
|
1636
1651
|
/**
|
|
@@ -1849,7 +1864,7 @@ class CatsDataGridComponent {
|
|
|
1849
1864
|
if (col.isAction) {
|
|
1850
1865
|
style.position = 'sticky';
|
|
1851
1866
|
style.right = '0px';
|
|
1852
|
-
style.zIndex =
|
|
1867
|
+
style.zIndex = 13;
|
|
1853
1868
|
style.background = '#fff';
|
|
1854
1869
|
style.width = '60px';
|
|
1855
1870
|
style.minWidth = '60px';
|
|
@@ -1879,12 +1894,6 @@ class CatsDataGridComponent {
|
|
|
1879
1894
|
this.activeFilterIndex = null;
|
|
1880
1895
|
this.menuVisible = this.menuVisible.map(() => false);
|
|
1881
1896
|
}
|
|
1882
|
-
checkCondition(data) {
|
|
1883
|
-
if (data.status)
|
|
1884
|
-
return true;
|
|
1885
|
-
else
|
|
1886
|
-
return false;
|
|
1887
|
-
}
|
|
1888
1897
|
infinityScroll(event) {
|
|
1889
1898
|
if (event.target.offsetHeight + event.target.scrollTop >=
|
|
1890
1899
|
event.target.scrollHeight - 1 &&
|
|
@@ -2113,7 +2122,7 @@ class CatsDataGridComponent {
|
|
|
2113
2122
|
this.showDropdown = !this.showDropdown;
|
|
2114
2123
|
}
|
|
2115
2124
|
selectFilter(option, col) {
|
|
2116
|
-
col.
|
|
2125
|
+
col.filters[0].filterOperation = option.value;
|
|
2117
2126
|
this.showDropdown = false;
|
|
2118
2127
|
}
|
|
2119
2128
|
getSelectedFilterLabel(value) {
|
|
@@ -2141,8 +2150,11 @@ class CatsDataGridComponent {
|
|
|
2141
2150
|
dateTimeSelected(date) {
|
|
2142
2151
|
this.applyAllFilters();
|
|
2143
2152
|
}
|
|
2144
|
-
|
|
2145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CatsDataGridComponent, isStandalone: true, selector: "cats-data-grid", inputs: { tableOptions: "tableOptions", totalRecords: "totalRecords", sortingRequired: "sortingRequired", checkBoxSelection: "checkBoxSelection", checkboxSelectionType: "checkboxSelectionType", rowData: "rowData", colDefs: "colDefs", paginationRequired: "paginationRequired", selectedRowEmpty: "selectedRowEmpty", filterRequired: "filterRequired", threeDotsMenuRequired: "threeDotsMenuRequired", height: "height", groupByRequired: "groupByRequired", pageSizeList: "pageSizeList" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\">\r\n @if(groupByRequired){\r\n <!-- Group Panel -->\r\n <div\r\n class=\"group_panel\"\r\n (dragover)=\"onGroupDragOver($event)\"\r\n (drop)=\"onGroupDrop($event)\"\r\n >\r\n <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\r\n @for(g of activeGroups; track $index){\r\n <div\r\n class=\"group_tag\"\r\n draggable=\"true\"\r\n (dragstart)=\"onGroupDragStart($event, $index)\"\r\n (dragover)=\"onActiveDragOver($event, $index)\"\r\n (drop)=\"onActiveGroupDrop($event, $index)\"\r\n >\r\n <img src=\"images/t-gripper.svg\" alt=\"\" />\r\n <span>{{ g.headerName }}</span>\r\n <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\r\n <img src=\"images/t-x.svg\" alt=\"\" />\r\n </button>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\r\n } @if(activeGroups.length === 0){\r\n <div class=\"group_placeholder\">Drag here to set row groups</div>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"table_wrapper\"\r\n id=\"container_scroll\"\r\n #parent\r\n (scroll)=\"infinityScroll($event)\"\r\n [ngStyle]=\"{ height: height + 'px' }\"\r\n >\r\n <table cellspacing=\"0\" cellpadding=\"0\">\r\n <thead class=\"sticky-top\">\r\n <tr>\r\n @if (checkBoxSelection && checkboxSelectionType == 'multiple') {\r\n <th style=\"min-width: 50px; width: 50px;\">\r\n <span class=\"checkbox_container\"\r\n ><input\r\n class=\"pointer\"\r\n type=\"checkbox\"\r\n name=\"\"\r\n id=\"\"\r\n [checked]=\"checkAllSelected()\"\r\n [indeterminate]=\"checkInterminate()\"\r\n (change)=\"onHeaderCheckboxChange($event)\"\r\n /></span>\r\n </th>\r\n\r\n } \r\n <!-- @else{\r\n <th></th>\r\n } -->\r\n @if(activeGroups.length > 0){\r\n <th class=\"active_group\">\r\n <div class=\"th_wraper\">\r\n <div class=\"text_wrapper\">\r\n <span class=\"ellipsis headerName\">Group</span>\r\n </div>\r\n <div class=\"filter_three_dot_wrapper\">\r\n <div class=\"three-dots\">\r\n <img src=\"images/t-more-vertical.svg\" />\r\n </div>\r\n </div>\r\n </div>\r\n </th>\r\n } @for (col of colDefs; track col.colId) {\r\n <th\r\n [ngStyle]=\"getStyle(col, 'action')\"\r\n [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n (dragover)=\"onDragOver($event, $index)\"\r\n (drop)=\"onDrop($event, $index)\"\r\n (mouseenter)=\"onMouseEnterHeader($index)\"\r\n (mouseleave)=\"onMouseLeaveHeader($index)\"\r\n >\r\n <div class=\"th_wraper\">\r\n <div\r\n class=\"text_wrapper\"\r\n [ngStyle]=\"getStyle(col, 'action')\"\r\n (click)=\"onSortingRowData($index, col)\"\r\n >\r\n @if(showMoveIcon[$index] && !col.isAction){\r\n <img\r\n src=\"images/t-move.svg\"\r\n class=\"move-icon\"\r\n [draggable]=\"!isResizing || columnDraggable[$index]\"\r\n (dragstart)=\"onDragStart($event, $index)\"\r\n (dragend)=\"onDragEnd()\"\r\n (mouseenter)=\"enableColumnDrag($event, $index)\"\r\n (mouseleave)=\"disableColumnDrag($event, $index)\"\r\n />\r\n\r\n }\r\n <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n @if (sortingRequired && sortingColumnIndex == $index &&\r\n col?.sortable && !col.isAction) {\r\n <span class=\"sorting_icon\">\r\n @if(sortingType[$index]=== 'asc'){\r\n <img\r\n src=\"images/t-arrow-up.svg\"\r\n class=\"sorting_up\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n } @if(sortingType[$index]=== 'dsc'){\r\n <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n <img\r\n src=\"images/t-arrow-down.svg\"\r\n class=\"sorting_down\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n }\r\n </span>\r\n\r\n }\r\n </div>\r\n <div class=\"filter_three_dot_wrapper\">\r\n <!-- Column Filters Logic-->\r\n @if(filterRequired && col.filterable){\r\n <div\r\n #trigger\r\n class=\"filters\"\r\n (click)=\"toggleFilter(col, $index, $event)\"\r\n >\r\n @if(activeFilters.has(col.fieldName)){\r\n <img\r\n src=\"images/t-filter-applied.svg\"\r\n class=\"filter-icon\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n }@else {\r\n <img\r\n src=\"images/t-filter.svg\"\r\n class=\"filter-icon\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n } @if (activeFilterIndex === $index) {\r\n <div\r\n adaptivePosition\r\n [trigger]=\"trigger\"\r\n [parentContainer]=\"parent\"\r\n [matchWidth]=\"false\"\r\n class=\"filter_wrapper\"\r\n id=\"filter_wrapper-{{ $index }}\"\r\n (click)=\"$event.stopPropagation()\"\r\n appOutsideClick\r\n (clickOutside)=\"onClickOutside()\"\r\n >\r\n <!-- Text Filter -->\r\n @if(col.filterType === 'text'){\r\n\r\n <lib-common-input\r\n [options]=\"filterOptions\"\r\n [selectedValue]=\"col.textFilters[0].filterType\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.textFilters[0].filterType = $event\"\r\n ></lib-common-input>\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n (keyup)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n\r\n <!-- <input\r\n type=\"text\"\r\n [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n placeholder=\"Filter\u2026\"\r\n (keyup)=\"applyAllFilters()\"\r\n /> -->\r\n\r\n @if(col.textFilters[0].filterValue){\r\n <div class=\"logic-row radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"textLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.textLogic\"\r\n value=\"AND\"\r\n id=\"{{ $index }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index\">AND</label>\r\n\r\n <input\r\n type=\"radio\"\r\n name=\"textLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.textLogic\"\r\n value=\"OR\"\r\n id=\"{{ $index + 1 }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index + 1\">OR</label>\r\n </div>\r\n\r\n <lib-common-input\r\n [options]=\"filterOptions\"\r\n [selectedValue]=\"col.textFilters[1].filterType\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.textFilters[1].filterType = $event\"\r\n ></lib-common-input>\r\n <!-- <input\r\n type=\"text\"\r\n [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n placeholder=\"Filter\u2026\"\r\n (keyup)=\"applyAllFilters()\"\r\n /> -->\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n (keyup)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n } }\r\n\r\n <!-- Number Filter -->\r\n @if(col.filterType === 'number'){\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.numberFilters[0].filterType\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.numberFilters[0].filterType = $event\"\r\n ></lib-common-input>\r\n\r\n <!-- <input\r\n type=\"number\"\r\n [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n (input)=\"applyAllFilters()\"\r\n /> -->\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"number\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n (input)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n\r\n @if(col.numberFilters[0].numberValue){\r\n <div class=\"logic-row radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"textLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.textLogic\"\r\n value=\"AND\"\r\n id=\"{{ $index }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index\">AND</label>\r\n\r\n <input\r\n type=\"radio\"\r\n name=\"textLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.textLogic\"\r\n value=\"OR\"\r\n id=\"{{ $index + 1 }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index + 1\">OR</label>\r\n </div>\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.numberFilters[1].filterType\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.numberFilters[1].filterType = $event\"\r\n ></lib-common-input>\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n (keyup)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n <!-- <input\r\n type=\"text\"\r\n [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n placeholder=\"Filter\u2026\"\r\n (keyup)=\"applyAllFilters()\"\r\n /> -->\r\n } }\r\n\r\n <!-- DATE FILTER -->\r\n @if(col.filterType === 'date'){\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.dateFilters[0].filterType\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.dateFilters[0].filterType = $event\"\r\n ></lib-common-input>\r\n\r\n <!-- <input\r\n type=\"date\"\r\n [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n (change)=\"applyAllFilters()\"\r\n /> -->\r\n <lib-common-calendar\r\n [dateConfig]=\"dateConfig\"\r\n [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n ></lib-common-calendar>\r\n\r\n @if(col.dateFilters[0].dateValue){\r\n <div class=\"logic-row radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"textLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.textLogic\"\r\n value=\"AND\"\r\n id=\"{{ $index }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index\">AND</label>\r\n\r\n <input\r\n type=\"radio\"\r\n name=\"textLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.textLogic\"\r\n value=\"OR\"\r\n id=\"{{ $index + 1 }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index + 1\">OR</label>\r\n </div>\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.dateFilters[1].filterType\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.dateFilters[1].filterType = $event\"\r\n ></lib-common-input>\r\n\r\n <lib-common-calendar\r\n [dateConfig]=\"dateConfig\"\r\n [(ngModel)]=\"col.dateFilters[1].dateValue\"\r\n (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n ></lib-common-calendar>\r\n } }\r\n\r\n <!-- SET FILTER (CHECKBOX LIST) -->\r\n @if(col.filterType === 'set'){\r\n <!-- <input\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"filterSetOptions(col, $event)\"\r\n /> -->\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"filterSetOptions(col, $event)\"\r\n />\r\n </div>\r\n\r\n <div class=\"set_option_details\">\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected(col)\"\r\n (change)=\"toggleSelectAll(col, $event)\"\r\n />\r\n (Select All)\r\n </label>\r\n <div class=\"set_options\" id=\"container_scroll\">\r\n @for(opt of col.filteredOptions; track $index){\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"col.selectedValues.has(opt)\"\r\n (change)=\"toggleSetOption(col, opt, $event)\"\r\n />\r\n {{ opt }}\r\n </label>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"filter_btn\">\r\n <button\r\n class=\"reset_btn\"\r\n type=\"button\"\r\n (click)=\"resetFilter(col)\"\r\n >\r\n Reset\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Three dots menu-->\r\n <div #triggerColMenu>\r\n @if(threeDotsMenuRequired && col.columnAction){\r\n\r\n <div\r\n class=\"three-dots\"\r\n (click)=\"openMenu($event, col, $index)\"\r\n >\r\n <img\r\n src=\"images/t-more-vertical.svg\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n </div>\r\n }\r\n </div>\r\n @if(!col.isAction){\r\n <span\r\n class=\"resize-handle\"\r\n (mousedown)=\"startResize($event, $index)\"\r\n >\r\n |\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- popup open -->\r\n @if(menuVisible[$index]){\r\n <div\r\n class=\"dropdown_wrapper\"\r\n adaptivePosition\r\n [trigger]=\"triggerColMenu\"\r\n [parentContainer]=\"parent\"\r\n [matchWidth]=\"false\"\r\n [isColumnActionMenu]=\"true\"\r\n (click)=\"$event.stopPropagation()\"\r\n appOutsideClick\r\n (clickOutside)=\"onClickOutside()\"\r\n >\r\n <div class=\"right_click_dropdown\" id=\"container_scroll\">\r\n @if(sortingType[$index] === 'dsc' || sortingType[$index] ===\r\n ''){\r\n <div\r\n class=\"right_click_item\"\r\n (click)=\"onSort(col, 'asc', $index)\"\r\n >\r\n <div class=\"left_item\">\r\n <img\r\n src=\"images/arrow-up.svg\"\r\n class=\"sorting_up\"\r\n [ngClass]=\"{ disable: !col.sortable }\"\r\n />\r\n <span class=\"text\">Sort Ascending</span>\r\n </div>\r\n </div>\r\n } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n ''){\r\n <div\r\n class=\"right_click_item\"\r\n (click)=\"onSort(col, 'dsc', $index)\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/arrow-down.svg\" />\r\n <span class=\"text\">Sort Descending</span>\r\n </div>\r\n </div>\r\n } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n 'dsc'){\r\n <div class=\"right_click_item\" (click)=\"onSort(col, '', $index)\">\r\n <div class=\"left_item\">\r\n <img src=\"images/trash-2.svg\" />\r\n <span class=\"text\">Clear Sort</span>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"divder\"></div>\r\n\r\n <div\r\n class=\"right_click_item\"\r\n (mouseenter)=\"showPinActions()\"\r\n (mouseleave)=\"hidePinActions()\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/pin.svg\" />\r\n <span class=\"text\">Pin Column</span>\r\n </div>\r\n <div class=\"right_item\">\r\n <img src=\"images/chevron-right.svg\" />\r\n @if(showPin){\r\n <div class=\"second_dropdown\">\r\n <div\r\n (click)=\"pinColumn(col, $index, 'none')\"\r\n class=\"right_click_item\"\r\n >\r\n <div class=\"left_item\">\r\n @if((pinActionClicked[col.colId]?? 'none') ===\r\n 'none'){\r\n <img src=\"images/check.svg\" />\r\n } @else{\r\n <img src=\"\" alt=\"\" />\r\n }\r\n <span class=\"text\">No Pin</span>\r\n </div>\r\n </div>\r\n <div\r\n (click)=\"pinColumn(col, $index, 'left')\"\r\n class=\"right_click_item\"\r\n >\r\n <div class=\"left_item\">\r\n @if(pinActionClicked[col.colId] === 'left'){\r\n <img src=\"images/check.svg\" />\r\n } @else{\r\n <img src=\"\" alt=\"\" />\r\n }\r\n <span class=\"text\">Pin Left</span>\r\n </div>\r\n </div>\r\n <div\r\n (click)=\"pinColumn(col, $index, 'right')\"\r\n class=\"right_click_item\"\r\n >\r\n <div class=\"left_item\">\r\n @if(pinActionClicked[col.colId] === 'right'){\r\n <img src=\"images/check.svg\" />\r\n } @else{\r\n <img src=\"\" alt=\"\" />\r\n }\r\n <span class=\"text\">Pin Right</span>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- <div\r\n class=\"right_click_item\"\r\n (click)=\"pinColumn(col, $index, 'left')\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/pin.svg\" />\r\n <span class=\"text\">{{\r\n col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\r\n }}</span>\r\n </div>\r\n </div>\r\n <div\r\n class=\"right_click_item\"\r\n (click)=\"pinColumn(col, $index, 'right')\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/pin.svg\" />\r\n <span class=\"text\">\r\n {{\r\n col.rightPinned\r\n ? \"Unpin Right Column\"\r\n : \"Pin Column Right\"\r\n }}\r\n </span>\r\n </div>\r\n <div class=\"right_item\">\r\n <img src=\"images/arrow-right.svg\" alt=\"\" />\r\n </div>\r\n </div> -->\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"\" alt=\"\" />\r\n <span class=\"text\">Autosize This Column</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"\" alt=\"\" />\r\n <span class=\"text\">Autosize All Columns</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div\r\n class=\"left_item\"\r\n (click)=\"groupByColumnAction(col, $index)\"\r\n >\r\n <img src=\"images/t-group-by-name.svg\" alt=\"\" />\r\n <span class=\"text\">Group by {{ col.headerName }}</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/t-choose-column.svg\" alt=\"\" />\r\n <span class=\"text\">Choose Columns</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"\" alt=\"\" />\r\n <span class=\"text\">Reset Columns</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if(groupedResult && groupedResult.length > 0){ @for(group of\r\n groupedResult; track group.key){\r\n <tr (click)=\"toggleGroup(group)\">\r\n <td\r\n class=\"group-cell\"\r\n [attr.colspan]=\"\r\n colDefs.length +\r\n (checkBoxSelection ? 1 : 0) +\r\n (activeGroups.length > 0 ? 1 : 0)\r\n \"\r\n >\r\n <span class=\"group-toggle\">\r\n <img\r\n src=\"images/{{\r\n group.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n }}\"\r\n />\r\n {{ group.key }} ({{ group.children.length }})\r\n </span>\r\n </td>\r\n </tr>\r\n\r\n @if(group.expanded){\r\n <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\r\n @if (group.children[0]?.children) { @for (child of group.children; track\r\n child.key) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"groupTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: child,\r\n colDefs: colDefs,\r\n checkBoxSelection: checkBoxSelection,\r\n activeGroups: activeGroups,\r\n level: 1\r\n }\"\r\n ></ng-container>\r\n } }\r\n\r\n <!-- CASE 2: CHILDREN ARE RAW ROWS -->\r\n @if (!group.children[0]?.children) { @for (row of group.children; track\r\n row.rowId) {\r\n <tr [ngClass]=\"row | addClass : tableOptions\">\r\n <!-- Checkbox column if any -->\r\n @if (checkBoxSelection) {\r\n <td>\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n /></span>\r\n </td>\r\n } @if (activeGroups.length > 0) {\r\n <td class=\"group-placeholder\"></td>\r\n }\r\n\r\n <!-- Render columns -->\r\n @for (col of colDefs; track col.colId) {\r\n <td [ngStyle]=\"getStyle(col)\">\r\n <!-- {{ row[col.fieldName] }} -->\r\n @if (!col?.cellRenderer) {\r\n <div class=\"cell-value ellipsis\">\r\n <div\r\n class=\"more_data_wrapper\"\r\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n >\r\n {{ parseColValue(row, col) }}\r\n </div>\r\n <div class=\"see_more_data\" id=\"container_scroll\">\r\n <div class=\"item\">\r\n <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n } @else{\r\n <div\r\n [rowParam]=\"row\"\r\n [col]=\"col\"\r\n [api]=\"tableOptions\"\r\n [currentValue]=\"row[col.fieldName]\"\r\n appRendererParser\r\n ></div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n } } } } } @else{ @for (data of rowData; track data.rowId) {\r\n <tr [ngClass]=\"data | addClass : tableOptions\">\r\n @if (checkBoxSelection) {\r\n <td style=\"min-width: 50px\">\r\n @if (checkboxSelectionType=='multiple') {\r\n <span class=\"checkbox_container\"\r\n ><input\r\n type=\"checkbox\"\r\n class=\"pointer\"\r\n name=\"\"\r\n id=\"{{ data.rowId }}\"\r\n [disabled]=\"data.isLocked\"\r\n [checked]=\"data.isSelected || data.isLocked\"\r\n (change)=\"onRowCheckboxSelection($event)\"\r\n /></span>\r\n\r\n }@else{\r\n <span class=\"radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"\"\r\n id=\"{{ data.rowId }}\"\r\n [checked]=\"data?.isSelected\"\r\n (change)=\"onRowCheckboxSelection($event)\"\r\n />\r\n <label [for]=\"data.rowId\"></label>\r\n </span>\r\n\r\n }\r\n </td>\r\n } @for (col of colDefs; track col.colId) {\r\n <td\r\n [ngStyle]=\"getStyle(col)\"\r\n [ngClass]=\"[col?.addClass ? col.addClass(data) : '']\"\r\n >\r\n @if (!col?.cellRenderer) {\r\n <div class=\"cell-value ellipsis\">\r\n <div\r\n class=\"more_data_wrapper\"\r\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n >\r\n {{ parseColValue(data, col) }}\r\n </div>\r\n <div class=\"see_more_data\" id=\"container_scroll\">\r\n <div class=\"item\">\r\n <span class=\"desc\"> {{ parseColValue(data, col) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n } @else{\r\n <div\r\n [rowParam]=\"data\"\r\n [col]=\"col\"\r\n [api]=\"tableOptions\"\r\n [currentValue]=\"data[col.fieldName]\"\r\n appRendererParser\r\n ></div>\r\n }\r\n <!-- Commented for later use -->\r\n <!-- <div class=\"tool_tip\">\r\n <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\r\n </div> -->\r\n </td>\r\n }\r\n </tr>\r\n } @empty {\r\n <tr>\r\n <td\r\n [attr.colspan]=\"\r\n colDefs.length +\r\n (checkBoxSelection ? 1 : 0) +\r\n (activeGroups.length > 0 ? 1 : 0)\r\n \"\r\n >\r\n <div class=\"small_data\">\r\n @if (tableOptions?.noDataTemplate) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tableOptions?.noDataTemplate\"\r\n ></ng-container>\r\n\r\n }@else{\r\n <!-- need to style it properly then we will add it -->\r\n <span>No Data To Show</span>\r\n\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n\r\n } }\r\n </tbody>\r\n\r\n <ng-template\r\n #groupTemplate\r\n let-node\r\n let-colDefs=\"colDefs\"\r\n let-checkBoxSelection=\"checkBoxSelection\"\r\n let-activeGroups=\"activeGroups\"\r\n let-level=\"level\"\r\n >\r\n <!-- GROUP HEADER -->\r\n <tr (click)=\"toggleGroup(node)\">\r\n <td\r\n [attr.colspan]=\"\r\n colDefs.length +\r\n (checkBoxSelection ? 1 : 0) +\r\n (activeGroups.length > 0 ? 1 : 0)\r\n \"\r\n [style.paddingLeft.px]=\"level * 20\"\r\n class=\"group-cell\"\r\n >\r\n <span class=\"group-toggle\">\r\n <img\r\n src=\"images/{{\r\n node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n }}\"\r\n />\r\n {{ node.key }} ({{ node.children.length }})\r\n </span>\r\n </td>\r\n </tr>\r\n\r\n <!-- CHILDREN -->\r\n @if (node.expanded) {\r\n\r\n <!-- CASE: more groups -->\r\n @if (node.children[0]?.children) { @for (child of node.children; track\r\n child.key) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"groupTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: child,\r\n colDefs: colDefs,\r\n checkBoxSelection: checkBoxSelection,\r\n activeGroups: activeGroups,\r\n level: level + 1\r\n }\"\r\n >\r\n </ng-container>\r\n } }\r\n\r\n <!-- CASE: final rows -->\r\n @if (!node.children[0]?.children) { @for (row of node.children; track\r\n row.rowId) {\r\n\r\n <tr [ngClass]=\"row | addClass : tableOptions\">\r\n <!-- Checkbox column if any -->\r\n @if (checkBoxSelection) {\r\n <td>\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n /></span>\r\n </td>\r\n } @if (activeGroups.length > 0) {\r\n <td class=\"group-placeholder\"></td>\r\n }\r\n\r\n <!-- Render columns -->\r\n @for (col of colDefs; track col.colId) {\r\n <td [ngStyle]=\"getStyle(col)\">\r\n <!-- {{ row[col.fieldName] }} -->\r\n @if (!col?.cellRenderer) {\r\n <div class=\"cell-value ellipsis\">\r\n <div\r\n class=\"more_data_wrapper\"\r\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n >\r\n {{ parseColValue(row, col) }}\r\n </div>\r\n <div class=\"see_more_data\" id=\"container_scroll\">\r\n <div class=\"item\">\r\n <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n } @else{\r\n <div\r\n [rowParam]=\"row\"\r\n [col]=\"col\"\r\n [api]=\"tableOptions\"\r\n [currentValue]=\"row[col.fieldName]\"\r\n appRendererParser\r\n ></div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n } } }\r\n </ng-template>\r\n </table>\r\n </div>\r\n <!-- Table Wrapper Ends-->\r\n @if(paginationRequired){\r\n <div class=\"pagination_main\">\r\n <div class=\"entries_details\">\r\n <span>Showing</span>\r\n <div class=\"pagination_select\">\r\n <div\r\n class=\"select_dropdown pointer\"\r\n (click)=\"showPageSizeList = !showPageSizeList\"\r\n >\r\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\r\n <span class=\"chevron_img\">\r\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\r\n </span>\r\n </div>\r\n @if(showPageSizeList){\r\n <div class=\"select_option\">\r\n @for(option of pageSizeList;track $index){\r\n <span\r\n class=\"pointer\"\r\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\r\n >{{ option }}</span\r\n >\r\n }\r\n </div>\r\n }\r\n </div>\r\n <span\r\n >Rows | {{ totalRecords > 0 ? recordsToShow.min + 1 : 0 }} -\r\n {{\r\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\r\n }}\r\n of\r\n {{ totalRecords }} Entries</span\r\n >\r\n </div>\r\n <div class=\"pagination_form\">\r\n <!-- <span>Page</span> -->\r\n\r\n <button class=\"outlined_btn first_btn\" type=\"button\">\r\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\r\n </button>\r\n <button\r\n class=\"outlined_btn prev_btn\"\r\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\r\n type=\"button\"\r\n (click)=\"onBtPrevClick()\"\r\n >\r\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\r\n </button>\r\n <div>\r\n <input\r\n class=\"input_style\"\r\n type=\"number\"\r\n [(ngModel)]=\"pageDetails.currentPage\"\r\n (change)=\"goToSelectedPage($event)\"\r\n name=\"\"\r\n id=\"\"\r\n />\r\n </div>\r\n <button\r\n class=\"outlined_btn next_btn\"\r\n type=\"button\"\r\n [ngClass]=\"\r\n pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\r\n \"\r\n (click)=\"onBtNextClick()\"\r\n >\r\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\r\n </button>\r\n <!-- <span>of {{ pageDetails.totalPages }}</span> -->\r\n\r\n <button class=\"outlined_btn last_btn\" type=\"button\">\r\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n <!-- Pagination Ends -->\r\n</div>\r\n\r\n<!-- cell right click code start here -->\r\n<div class=\"dropdown_wrapper d-none\">\r\n <div class=\"right_click_dropdown\">\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/scissors.svg\" />\r\n <span class=\"text\">Cut</span>\r\n </div>\r\n\r\n <span class=\"right_item\">Ctrl+X</span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/copy.svg\" alt=\"\" />\r\n <span class=\"text\">Copy</span>\r\n </div>\r\n\r\n <span class=\"right_item\">Ctrl+C</span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/copy.svg\" alt=\"\" />\r\n <span class=\"text\">Copy with Headers</span>\r\n </div>\r\n <span class=\"right_item\"></span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/copy.svg\" alt=\"\" />\r\n <span class=\"text\">Copy with Group Headers</span>\r\n </div>\r\n <span class=\"right_item\"></span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/clipboard.svg\" alt=\"\" />\r\n <span class=\"text\">Paste</span>\r\n </div>\r\n\r\n <span class=\"right_item\">Ctrl+V</span>\r\n </div>\r\n\r\n <div class=\"right_click_item active\">\r\n <div class=\"left_item\">\r\n <img src=\"images/bar-chart.svg\" alt=\"\" />\r\n <span class=\"text\">Chart</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/download.svg\" alt=\"\" />\r\n <span class=\"text\">Export</span>\r\n </div>\r\n\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Chart section Start Here -->\r\n <div class=\"second_dropdown\">\r\n <div class=\"right_click_item active\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Column</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Bar</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Pie</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Line</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Area</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">XY(Scatter)</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Polar</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Stastical</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Hierarchical</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Specialized</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Funnel</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Combination</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Export Section start Here -->\r\n <div class=\"export_section d-none\">\r\n <div class=\"right_click_item active\">\r\n <div class=\"left_item\">\r\n <img src=\"images/file.svg\" alt=\"\" />\r\n <span class=\"text\">CSV Report</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/file.svg\" alt=\"\" />\r\n <span class=\"text\">Excel Report</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Column Group Section Start Here -->\r\n <div class=\"third_dropdown\">\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Grouped</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Stacked</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">100% Stacked</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .see_more_data{position:absolute;min-width:calc(15.8333333333rem / 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:14;right:0;padding:calc(.5rem / var(--scale)) 0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-word}.tableArea{width:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table{border-collapse:collapse;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}.tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:13}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--neutral-500);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left}.tableArea .table_wrapper table td .ellipsis,.tableArea .table_wrapper table th .ellipsis{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(25rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale))}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:0!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);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer}.tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--neutral-50)}.tableArea .table_wrapper table thead th:last-child .th_wraper{border:0}.tableArea .table_wrapper table thead th:hover .none{display:block}.tableArea .table_wrapper table thead th:hover .up,.tableArea .table_wrapper table thead th:hover .down{display:none}.tableArea .table_wrapper table tbody{background-color:var(--white)}.tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);transition:all .3s ease-in-out}.tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover,.tableArea .table_wrapper table tbody tr:hover td{background-color:var(--blue-50)!important}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / var(--scale))}.tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td:hover{background-color:var(--blue-50)!important}.tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.th_wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th_wraper .text_wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th_wraper .filter_three_dot_wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters:hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:20px;left:0;width:calc(18.8333333333rem / var(--scale));background:var(--neutral-50);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper lib-common-input{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details .set_options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(10.8333333333rem / var(--scale));overflow-y:auto}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--white);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--blue-600);border-color:var(--blue-600);color:var(--white)}.th_wraper .filter_three_dot_wrapper .three-dots :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .resize-handle{color:var(--neutral-200);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.tableArea .table_wrapper .headerName{font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination_main .entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select{position:relative}.pagination_main .entries_details .pagination_select .select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img img{width:calc(1.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--white);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination_main .entries_details .pagination_select .select_option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option span:hover{background-color:var(--neutral-50)}.pagination_main .pagination_form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination_main .pagination_form .prev_btn,.pagination_main .pagination_form .next_btn,.pagination_main .pagination_form .first_btn,.pagination_main .pagination_form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .pagination_form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-500);cursor:pointer}.pagination_main .pagination_form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--neutral-200)}.pagination_main .pagination_form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination_main .input_style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-600);text-align:center;outline:none;padding:0}.tableArea .table_wrapper table th:not(:last-child) .right .line{display:block;border-left:calc(.1666666667rem / var(--scale)) solid var(--grey-50);height:calc(2rem / var(--scale))}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--white);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.d-none{display:none}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--neutral-50);border-radius:calc(.3333333333rem / var(--scale))}.group_panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--neutral-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(0rem / var(--scale));border-top:0;height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.group_panel img.divider:last-child{display:none}.group_panel .group_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;cursor:grab}.group_panel .group_tag .remove_tag{border:0;padding:0;cursor:pointer}.group_panel .group_placeholder{color:var(--neutral-500)}.group_panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);cursor:pointer}.active_group{width:100px}.dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale))}.dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.dropdown_wrapper .right_click_item:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-50)}.dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.dropdown_wrapper .right_click_item .right_chevron{stroke:var(--neutral-400)}.second_dropdown{position:absolute;right:calc(-20rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CommonCalendarComponent, selector: "lib-common-calendar", inputs: ["dateConfig", "minDate", "maxDate", "preSelectedValue"], outputs: ["dateTimeSelected"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "component", type: CommonInputComponent, selector: "lib-common-input", inputs: ["options", "selectedValue", "placeholder", "elementType"], outputs: ["valueChange"] }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
|
|
2153
|
+
convertToNumber(value) {
|
|
2154
|
+
return Number(value);
|
|
2155
|
+
}
|
|
2156
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsDataGridComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2157
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CatsDataGridComponent, isStandalone: true, selector: "cats-data-grid", inputs: { tableOptions: "tableOptions", totalRecords: "totalRecords", sortingRequired: "sortingRequired", checkBoxSelection: "checkBoxSelection", checkboxSelectionType: "checkboxSelectionType", rowData: "rowData", colDefs: "colDefs", paginationRequired: "paginationRequired", selectedRowEmpty: "selectedRowEmpty", filterRequired: "filterRequired", threeDotsMenuRequired: "threeDotsMenuRequired", height: "height", groupByRequired: "groupByRequired", pageSizeList: "pageSizeList", dynamicGroupingFiltering: "dynamicGroupingFiltering" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter", appliedFiltersEvent: "appliedFiltersEvent", activeGroupsEvent: "activeGroupsEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\">\r\n @if(groupByRequired){\r\n <!-- Group Panel -->\r\n <div\r\n class=\"group_panel\"\r\n (dragover)=\"onGroupDragOver($event)\"\r\n (drop)=\"onGroupDrop($event)\"\r\n >\r\n <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\r\n @for(g of activeGroups; track $index){\r\n <div\r\n class=\"group_tag\"\r\n draggable=\"true\"\r\n (dragstart)=\"onGroupDragStart($event, $index)\"\r\n (dragover)=\"onActiveDragOver($event, $index)\"\r\n (drop)=\"onActiveGroupDrop($event, $index)\"\r\n >\r\n <img src=\"images/t-gripper.svg\" alt=\"\" />\r\n <span>{{ g.headerName }}</span>\r\n <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\r\n <img src=\"images/t-x.svg\" alt=\"\" />\r\n </button>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\r\n } @if(activeGroups.length === 0){\r\n <div class=\"group_placeholder\">Drag here to set row groups</div>\r\n }\r\n </div>\r\n } @if(activeFilters.size > 0){\r\n <div class=\"active_filters_container\">\r\n @for(filter of appliedFilters; track filter.fieldName){\r\n <div class=\"active_filter_tag\">\r\n <div class=\"active_filter_label ellipsis\">\r\n @for (item of filter.filters; track $index) { @if(item.filterValue){\r\n @if($index>0 && item.filterValue){\r\n <span class=\"filter_logic\"> {{ filter.filterLogic }} </span>\r\n }\r\n <span class=\"filter_field\">{{ filter.fieldName }}:</span>\r\n <span class=\"\"> {{ item.filterOperation }}</span>\r\n <span class=\"filter_value\">{{ item.filterValue }}</span>\r\n\r\n } }\r\n </div>\r\n <button class=\"remove_filter_btn\" (click)=\"removeActiveFilter(filter)\">\r\n <img src=\"images/t-x.svg\" alt=\"\" />\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"table_wrapper\"\r\n id=\"container_scroll\"\r\n #parent\r\n (scroll)=\"infinityScroll($event)\"\r\n [ngStyle]=\"{ height: height + 'px' }\"\r\n >\r\n <table cellspacing=\"0\" cellpadding=\"0\">\r\n <thead class=\"sticky-top\">\r\n <tr>\r\n @if (checkBoxSelection && checkboxSelectionType == 'multiple') {\r\n <th style=\"min-width: 50px; width: 50px\">\r\n <span class=\"checkbox_container\"\r\n ><input\r\n class=\"pointer\"\r\n type=\"checkbox\"\r\n name=\"\"\r\n id=\"\"\r\n [checked]=\"checkAllSelected()\"\r\n [indeterminate]=\"checkInterminate()\"\r\n (change)=\"onHeaderCheckboxChange($event)\"\r\n /></span>\r\n </th>\r\n\r\n }\r\n <!-- @else{\r\n <th></th>\r\n } -->\r\n @if(activeGroups.length > 0){\r\n <th class=\"active_group\">\r\n <div class=\"th_wraper\">\r\n <div class=\"text_wrapper\">\r\n <span class=\"ellipsis headerName\">Group</span>\r\n </div>\r\n <div class=\"filter_three_dot_wrapper\">\r\n <div class=\"three-dots\">\r\n <img src=\"images/t-more-vertical.svg\" />\r\n </div>\r\n </div>\r\n </div>\r\n </th>\r\n } @for (col of colDefs; track col.colId) {\r\n <th\r\n [ngStyle]=\"getStyle(col, 'action')\"\r\n [ngClass]=\"{ 'drag-over': dragOverIndex === $index, 'pinned_column': col.leftPinned || col.rightPinned }\"\r\n (dragover)=\"onDragOver($event, $index)\"\r\n (drop)=\"onDrop($event, $index)\"\r\n (mouseenter)=\"onMouseEnterHeader($index)\"\r\n (mouseleave)=\"onMouseLeaveHeader($index)\"\r\n >\r\n <div class=\"th_wraper\">\r\n <div\r\n class=\"text_wrapper\"\r\n [ngStyle]=\"getStyle(col, 'action')\"\r\n (click)=\"onSortingRowData($index, col)\"\r\n >\r\n @if(showMoveIcon[$index] && !col.isAction){\r\n <img\r\n src=\"images/t-move.svg\"\r\n class=\"move-icon\"\r\n [draggable]=\"!isResizing || columnDraggable[$index]\"\r\n (dragstart)=\"onDragStart($event, $index)\"\r\n (dragend)=\"onDragEnd()\"\r\n (mouseenter)=\"enableColumnDrag($event, $index)\"\r\n (mouseleave)=\"disableColumnDrag($event, $index)\"\r\n />\r\n\r\n }\r\n <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n @if (sortingRequired && sortingColumnIndex == $index &&\r\n col?.sortable && !col.isAction) {\r\n <span class=\"sorting_icon\">\r\n @if(sortingType[$index]=== 'asc'){\r\n <img\r\n src=\"images/t-arrow-up.svg\"\r\n class=\"sorting_up\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n } @if(sortingType[$index]=== 'dsc'){\r\n <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n <img\r\n src=\"images/t-arrow-down.svg\"\r\n class=\"sorting_down\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n }\r\n </span>\r\n\r\n }\r\n </div>\r\n <div class=\"filter_three_dot_wrapper\">\r\n <!-- Column Filters Logic-->\r\n @if(filterRequired && col.filterable){\r\n <div\r\n #trigger\r\n class=\"filters\"\r\n (click)=\"toggleFilter(col, $index, $event)\"\r\n >\r\n @if(activeFilters.has(col.fieldName)){\r\n <img\r\n src=\"images/t-filter-applied.svg\"\r\n class=\"filter-icon\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n }@else {\r\n <img\r\n src=\"images/t-filter.svg\"\r\n class=\"filter-icon\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n } @if (activeFilterIndex === $index) {\r\n <div\r\n adaptivePosition\r\n [trigger]=\"trigger\"\r\n [parentContainer]=\"parent\"\r\n [matchWidth]=\"false\"\r\n class=\"filter_wrapper\"\r\n id=\"filter_wrapper-{{ $index }}\"\r\n (click)=\"$event.stopPropagation()\"\r\n appOutsideClick\r\n (clickOutside)=\"onClickOutside()\"\r\n >\r\n <!-- Text Filter -->\r\n @if(col.filterType === 'text'){\r\n\r\n <lib-common-input\r\n [options]=\"filterOptions\"\r\n [selectedValue]=\"col.filters[0].filterOperation\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.filters[0].filterOperation = $event\"\r\n ></lib-common-input>\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.filters[0].filterValue\"\r\n (keyup)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n\r\n <!-- <input\r\n type=\"text\"\r\n [(ngModel)]=\"col.filters[0].filterValue\"\r\n placeholder=\"Filter\u2026\"\r\n (keyup)=\"applyAllFilters()\"\r\n /> -->\r\n\r\n @if(col.filters[0].filterValue){\r\n <div class=\"logic-row radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"filterLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.filterLogic\"\r\n value=\"AND\"\r\n id=\"{{ $index }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index\">AND</label>\r\n\r\n <input\r\n type=\"radio\"\r\n name=\"filterLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.filterLogic\"\r\n value=\"OR\"\r\n id=\"{{ $index + 1 }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index + 1\">OR</label>\r\n </div>\r\n\r\n <lib-common-input\r\n [options]=\"filterOptions\"\r\n [selectedValue]=\"col.filters[1].filterOperation\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.filters[1].filterOperation = $event\"\r\n ></lib-common-input>\r\n <!-- <input\r\n type=\"text\"\r\n [(ngModel)]=\"col.filters[1].filterValue\"\r\n placeholder=\"Filter\u2026\"\r\n (keyup)=\"applyAllFilters()\"\r\n /> -->\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.filters[1].filterValue\"\r\n (keyup)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n } }\r\n\r\n <!-- Number Filter -->\r\n @if(col.filterType === 'number'){\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.filters[0].filterOperation\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.filters[0].filterOperation = $event\"\r\n ></lib-common-input>\r\n\r\n <!-- <input\r\n type=\"number\"\r\n [(ngModel)]=\"col.filters[0].filterValue\"\r\n (input)=\"applyAllFilters()\"\r\n /> -->\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"number\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.filters[0].filterValue\"\r\n (input)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n\r\n @if(col.filters[0].filterValue){\r\n <div class=\"logic-row radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"filterLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.filterLogic\"\r\n value=\"AND\"\r\n id=\"{{ $index }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index\">AND</label>\r\n\r\n <input\r\n type=\"radio\"\r\n name=\"filterLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.filterLogic\"\r\n value=\"OR\"\r\n id=\"{{ $index + 1 }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index + 1\">OR</label>\r\n </div>\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.filters[1].filterOperation\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.filters[1].filterOperation = $event\"\r\n ></lib-common-input>\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.filters[1].filterValue\"\r\n (keyup)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n <!-- <input\r\n type=\"text\"\r\n [(ngModel)]=\"col.filters[1].filterValue\"\r\n placeholder=\"Filter\u2026\"\r\n (keyup)=\"applyAllFilters()\"\r\n /> -->\r\n } }\r\n\r\n <!-- DATE FILTER -->\r\n @if(col.filterType === 'date'){\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.filters[0].filterOperation\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.filters[0].filterOperation = $event\"\r\n ></lib-common-input>\r\n\r\n <!-- <input\r\n type=\"date\"\r\n [(ngModel)]=\"col.filters[0].filterValue\"\r\n (change)=\"applyAllFilters()\"\r\n /> -->\r\n <lib-common-calendar\r\n [dateConfig]=\"dateConfig\"\r\n [(ngModel)]=\"col.filters[0].filterValue\"\r\n (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n ></lib-common-calendar>\r\n\r\n @if(col.filters[0].filterValue){\r\n <div class=\"logic-row radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"filterLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.filterLogic\"\r\n value=\"AND\"\r\n id=\"{{ $index }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index\">AND</label>\r\n\r\n <input\r\n type=\"radio\"\r\n name=\"filterLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.filterLogic\"\r\n value=\"OR\"\r\n id=\"{{ $index + 1 }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index + 1\">OR</label>\r\n </div>\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.filters[1].filterOperation\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.filters[1].filterOperation = $event\"\r\n ></lib-common-input>\r\n\r\n <lib-common-calendar\r\n [dateConfig]=\"dateConfig\"\r\n [(ngModel)]=\"col.filters[1].filterValue\"\r\n (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n ></lib-common-calendar>\r\n } }\r\n\r\n <!-- SET FILTER (CHECKBOX LIST) -->\r\n @if(col.filterType === 'set'){\r\n <!-- <input\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"filterSetOptions(col, $event)\"\r\n /> -->\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"filterSetOptions(col, $event)\"\r\n />\r\n </div>\r\n\r\n <div class=\"set_option_details\">\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected(col)\"\r\n (change)=\"toggleSelectAll(col, $event)\"\r\n />\r\n (Select All)\r\n </label>\r\n <div class=\"set_options\" id=\"container_scroll\">\r\n @for(opt of col.filteredOptions; track $index){\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"col.selectedValues.has(opt)\"\r\n (change)=\"toggleSetOption(col, opt, $event)\"\r\n />\r\n {{ opt }}\r\n </label>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"filter_btn\">\r\n <button\r\n class=\"reset_btn\"\r\n type=\"button\"\r\n (click)=\"resetFilter(col)\"\r\n >\r\n Reset\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Three dots menu-->\r\n <div #triggerColMenu>\r\n @if(threeDotsMenuRequired && col.columnAction){\r\n\r\n <div\r\n class=\"three-dots\"\r\n (click)=\"openMenu($event, col, $index)\"\r\n >\r\n <img\r\n src=\"images/t-more-vertical.svg\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n </div>\r\n }\r\n </div>\r\n @if(!col.isAction){\r\n <span\r\n class=\"resize-handle\"\r\n (mousedown)=\"startResize($event, $index)\"\r\n >\r\n |\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- popup open -->\r\n @if(menuVisible[$index]){\r\n <div\r\n class=\"dropdown_wrapper\"\r\n adaptivePosition\r\n [trigger]=\"triggerColMenu\"\r\n [parentContainer]=\"parent\"\r\n [matchWidth]=\"false\"\r\n [isColumnActionMenu]=\"true\"\r\n (click)=\"$event.stopPropagation()\"\r\n appOutsideClick\r\n (clickOutside)=\"onClickOutside()\"\r\n >\r\n <div class=\"right_click_dropdown\" id=\"container_scroll\">\r\n @if(sortingType[$index] === 'dsc' || sortingType[$index] ===\r\n ''){\r\n <div\r\n class=\"right_click_item\"\r\n (click)=\"onSort(col, 'asc', $index)\"\r\n >\r\n <div class=\"left_item\">\r\n <img\r\n src=\"images/arrow-up.svg\"\r\n class=\"sorting_up\"\r\n [ngClass]=\"{ disable: !col.sortable }\"\r\n />\r\n <span class=\"text\">Sort Ascending</span>\r\n </div>\r\n </div>\r\n } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n ''){\r\n <div\r\n class=\"right_click_item\"\r\n (click)=\"onSort(col, 'dsc', $index)\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/arrow-down.svg\" />\r\n <span class=\"text\">Sort Descending</span>\r\n </div>\r\n </div>\r\n } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n 'dsc'){\r\n <div class=\"right_click_item\" (click)=\"onSort(col, '', $index)\">\r\n <div class=\"left_item\">\r\n <img src=\"images/trash-2.svg\" />\r\n <span class=\"text\">Clear Sort</span>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"divder\"></div>\r\n\r\n <div\r\n class=\"right_click_item\"\r\n (mouseenter)=\"showPinActions()\"\r\n (mouseleave)=\"hidePinActions()\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/pin.svg\" />\r\n <span class=\"text\">Pin Column</span>\r\n </div>\r\n <div class=\"right_item\">\r\n <img src=\"images/chevron-right.svg\" />\r\n @if(showPin){\r\n <div class=\"second_dropdown\">\r\n <div\r\n (click)=\"pinColumn(col, $index, 'none')\"\r\n class=\"right_click_item\"\r\n >\r\n <div class=\"left_item\">\r\n @if((pinActionClicked[col.colId]?? 'none') ===\r\n 'none'){\r\n <img src=\"images/check.svg\" />\r\n } @else{\r\n <img src=\"\" alt=\"\" />\r\n }\r\n <span class=\"text\">No Pin</span>\r\n </div>\r\n </div>\r\n <div\r\n (click)=\"pinColumn(col, $index, 'left')\"\r\n class=\"right_click_item\"\r\n >\r\n <div class=\"left_item\">\r\n @if(pinActionClicked[col.colId] === 'left'){\r\n <img src=\"images/check.svg\" />\r\n } @else{\r\n <img src=\"\" alt=\"\" />\r\n }\r\n <span class=\"text\">Pin Left</span>\r\n </div>\r\n </div>\r\n <div\r\n (click)=\"pinColumn(col, $index, 'right')\"\r\n class=\"right_click_item\"\r\n >\r\n <div class=\"left_item\">\r\n @if(pinActionClicked[col.colId] === 'right'){\r\n <img src=\"images/check.svg\" />\r\n } @else{\r\n <img src=\"\" alt=\"\" />\r\n }\r\n <span class=\"text\">Pin Right</span>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- <div\r\n class=\"right_click_item\"\r\n (click)=\"pinColumn(col, $index, 'left')\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/pin.svg\" />\r\n <span class=\"text\">{{\r\n col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\r\n }}</span>\r\n </div>\r\n </div>\r\n <div\r\n class=\"right_click_item\"\r\n (click)=\"pinColumn(col, $index, 'right')\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/pin.svg\" />\r\n <span class=\"text\">\r\n {{\r\n col.rightPinned\r\n ? \"Unpin Right Column\"\r\n : \"Pin Column Right\"\r\n }}\r\n </span>\r\n </div>\r\n <div class=\"right_item\">\r\n <img src=\"images/arrow-right.svg\" alt=\"\" />\r\n </div>\r\n </div> -->\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"\" alt=\"\" />\r\n <span class=\"text\">Autosize This Column</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"\" alt=\"\" />\r\n <span class=\"text\">Autosize All Columns</span>\r\n </div>\r\n </div>\r\n <div\r\n class=\"right_click_item\"\r\n [ngClass]=\"{ disabled_option: !groupByRequired }\"\r\n >\r\n <div\r\n class=\"left_item\"\r\n (click)=\"groupByColumnAction(col, $index)\"\r\n >\r\n <img src=\"images/t-group-by-name.svg\" alt=\"\" />\r\n <span class=\"text\">Group by {{ col.headerName }}</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/t-choose-column.svg\" alt=\"\" />\r\n <span class=\"text\">Choose Columns</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"\" alt=\"\" />\r\n <span class=\"text\">Reset Columns</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if(groupedResult && groupedResult.length > 0){ @for(group of\r\n groupedResult; track group.key){\r\n <tr (click)=\"toggleGroup(group)\">\r\n <td\r\n class=\"group-cell\"\r\n [attr.colspan]=\"\r\n colDefs.length +\r\n (checkBoxSelection ? 1 : 0) +\r\n (activeGroups.length > 0 ? 1 : 0)\r\n \"\r\n >\r\n <span class=\"group-toggle\">\r\n <img\r\n src=\"images/{{\r\n group.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n }}\"\r\n />\r\n {{ group.key }} ({{ group.children.length }})\r\n </span>\r\n </td>\r\n </tr>\r\n\r\n @if(group.expanded){\r\n <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\r\n @if (group.children[0]?.children) { @for (child of group.children; track\r\n child.key) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"groupTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: child,\r\n colDefs: colDefs,\r\n checkBoxSelection: checkBoxSelection,\r\n activeGroups: activeGroups,\r\n level: 1\r\n }\"\r\n ></ng-container>\r\n } }\r\n\r\n <!-- CASE 2: CHILDREN ARE RAW ROWS -->\r\n @if (!group.children[0]?.children) { @for (row of group.children; track\r\n row.rowId) {\r\n <tr [ngClass]=\"row | addClass : tableOptions\">\r\n <!-- Checkbox column if any -->\r\n @if (checkBoxSelection) {\r\n <td>\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n /></span>\r\n </td>\r\n } @if (activeGroups.length > 0) {\r\n <td class=\"group-placeholder\"></td>\r\n }\r\n\r\n <!-- Render columns -->\r\n @for (col of colDefs; track col.colId) {\r\n <td [ngStyle]=\"getStyle(col)\" [ngClass]=\"[col?.addClass ? col.addClass(row) : '', col.leftPinned || col.rightPinned ? 'pinned_column' : '']\">\r\n <!-- {{ row[col.fieldName] }} -->\r\n @if (!col?.cellRenderer) {\r\n <div class=\"cell-value ellipsis\">\r\n <div\r\n class=\"more_data_wrapper\"\r\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n >\r\n {{ parseColValue(row, col) }}\r\n </div>\r\n <div class=\"see_more_data\" id=\"container_scroll\">\r\n <div class=\"item\">\r\n <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n } @else{\r\n <div\r\n [rowParam]=\"row\"\r\n [col]=\"col\"\r\n [api]=\"tableOptions\"\r\n [currentValue]=\"row[col.fieldName]\"\r\n appRendererParser\r\n ></div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n } } } } } @else{ @for (data of rowData; track data.rowId) {\r\n <tr [ngClass]=\"data | addClass : tableOptions\">\r\n @if (checkBoxSelection) {\r\n <td style=\"min-width: 50px\">\r\n @if (checkboxSelectionType=='multiple') {\r\n <span class=\"checkbox_container\"\r\n ><input\r\n type=\"checkbox\"\r\n class=\"pointer\"\r\n name=\"\"\r\n id=\"{{ data.rowId }}\"\r\n [disabled]=\"data.isLocked\"\r\n [checked]=\"data.isSelected || data.isLocked\"\r\n (change)=\"onRowCheckboxSelection($event)\"\r\n /></span>\r\n\r\n }@else{\r\n <span class=\"radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"\"\r\n id=\"{{ data.rowId }}\"\r\n [checked]=\"data?.isSelected\"\r\n (change)=\"onRowCheckboxSelection($event)\"\r\n />\r\n <label [for]=\"data.rowId\"></label>\r\n </span>\r\n\r\n }\r\n </td>\r\n } @for (col of colDefs; track col.colId) {\r\n <td\r\n [ngStyle]=\"getStyle(col)\"\r\n [ngClass]=\"[col?.addClass ? col.addClass(data) : '', col.leftPinned || col.rightPinned ? 'pinned_column' : '']\"\r\n >\r\n @if (!col?.cellRenderer) {\r\n <div class=\"cell-value ellipsis\">\r\n <div\r\n class=\"more_data_wrapper\"\r\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n >\r\n {{ parseColValue(data, col) }}\r\n </div>\r\n <div class=\"see_more_data\" id=\"container_scroll\">\r\n <div class=\"item\">\r\n <span class=\"desc\"> {{ parseColValue(data, col) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n } @else{\r\n <div\r\n [rowParam]=\"data\"\r\n [col]=\"col\"\r\n [api]=\"tableOptions\"\r\n [currentValue]=\"data[col.fieldName]\"\r\n appRendererParser\r\n ></div>\r\n }\r\n <!-- Commented for later use -->\r\n <!-- <div class=\"tool_tip\">\r\n <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\r\n </div> -->\r\n </td>\r\n }\r\n </tr>\r\n } @empty {\r\n <tr>\r\n <td\r\n [attr.colspan]=\"\r\n colDefs.length +\r\n (checkBoxSelection ? 1 : 0) +\r\n (activeGroups.length > 0 ? 1 : 0)\r\n \"\r\n >\r\n <div class=\"small_data\">\r\n @if (tableOptions?.noDataTemplate) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tableOptions?.noDataTemplate\"\r\n ></ng-container>\r\n\r\n }@else{\r\n <!-- need to style it properly then we will add it -->\r\n <span>No Data To Show</span>\r\n\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n\r\n } }\r\n </tbody>\r\n\r\n <ng-template\r\n #groupTemplate\r\n let-node\r\n let-colDefs=\"colDefs\"\r\n let-checkBoxSelection=\"checkBoxSelection\"\r\n let-activeGroups=\"activeGroups\"\r\n let-level=\"level\"\r\n >\r\n <!-- GROUP HEADER -->\r\n <tr (click)=\"toggleGroup(node)\">\r\n <td\r\n [attr.colspan]=\"\r\n colDefs.length +\r\n (checkBoxSelection ? 1 : 0) +\r\n (activeGroups.length > 0 ? 1 : 0)\r\n \"\r\n [style.paddingLeft.px]=\"level * 20\"\r\n class=\"group-cell\"\r\n >\r\n <span class=\"group-toggle\">\r\n <img\r\n src=\"images/{{\r\n node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n }}\"\r\n />\r\n {{ node.key }} ({{ node.children.length }})\r\n </span>\r\n </td>\r\n </tr>\r\n\r\n <!-- CHILDREN -->\r\n @if (node.expanded) {\r\n\r\n <!-- CASE: more groups -->\r\n @if (node.children[0]?.children) { @for (child of node.children; track\r\n child.key) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"groupTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: child,\r\n colDefs: colDefs,\r\n checkBoxSelection: checkBoxSelection,\r\n activeGroups: activeGroups,\r\n level: level + 1\r\n }\"\r\n >\r\n </ng-container>\r\n } }\r\n\r\n <!-- CASE: final rows -->\r\n @if (!node.children[0]?.children) { @for (row of node.children; track\r\n row.rowId) {\r\n\r\n <tr [ngClass]=\"row | addClass : tableOptions\">\r\n <!-- Checkbox column if any -->\r\n @if (checkBoxSelection) {\r\n <td>\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n /></span>\r\n </td>\r\n } @if (activeGroups.length > 0) {\r\n <td class=\"group-placeholder\"></td>\r\n }\r\n\r\n <!-- Render columns -->\r\n @for (col of colDefs; track col.colId) {\r\n <td [ngStyle]=\"getStyle(col)\" [ngClass]=\"[col.leftPinned || col.rightPinned ? 'pinned_column' : '']\">\r\n <!-- {{ row[col.fieldName] }} -->\r\n @if (!col?.cellRenderer) {\r\n <div class=\"cell-value ellipsis\">\r\n <div\r\n class=\"more_data_wrapper\"\r\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n >\r\n {{ parseColValue(row, col) }}\r\n </div>\r\n <div class=\"see_more_data\" id=\"container_scroll\">\r\n <div class=\"item\">\r\n <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n } @else{\r\n <div\r\n [rowParam]=\"row\"\r\n [col]=\"col\"\r\n [api]=\"tableOptions\"\r\n [currentValue]=\"row[col.fieldName]\"\r\n appRendererParser\r\n ></div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n } } }\r\n </ng-template>\r\n </table>\r\n </div>\r\n <!-- Table Wrapper Ends-->\r\n @if(paginationRequired){\r\n <div class=\"pagination_main\">\r\n <div class=\"entries_details\">\r\n <span>Showing</span>\r\n <div class=\"pagination_select\">\r\n <div\r\n class=\"select_dropdown pointer\"\r\n (click)=\"showPageSizeList = !showPageSizeList\"\r\n >\r\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\r\n <span class=\"chevron_img\">\r\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\r\n </span>\r\n </div>\r\n @if(showPageSizeList){\r\n <div class=\"select_option\">\r\n @for(option of pageSizeList;track $index){\r\n <span\r\n class=\"pointer\"\r\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\r\n >{{ option }}</span\r\n >\r\n }\r\n </div>\r\n }\r\n </div>\r\n <span\r\n >Rows | {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\r\n {{\r\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\r\n }}\r\n of\r\n {{ totalRecords }} Entries</span\r\n >\r\n </div>\r\n <div class=\"pagination_form\">\r\n <!-- <span>Page</span> -->\r\n\r\n <button class=\"outlined_btn first_btn disable_btn\" type=\"button\">\r\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\r\n </button>\r\n <button\r\n class=\"outlined_btn prev_btn\"\r\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\r\n type=\"button\"\r\n (click)=\"onBtPrevClick()\"\r\n >\r\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\r\n </button>\r\n <div>\r\n <input\r\n class=\"input_style\"\r\n type=\"number\"\r\n [(ngModel)]=\"pageDetails.currentPage\"\r\n (change)=\"goToSelectedPage($event)\"\r\n name=\"\"\r\n id=\"\"\r\n />\r\n </div>\r\n <button\r\n class=\"outlined_btn next_btn\"\r\n type=\"button\"\r\n [ngClass]=\"\r\n pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\r\n \"\r\n (click)=\"onBtNextClick()\"\r\n >\r\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\r\n </button>\r\n <!-- <span>of {{ pageDetails.totalPages }}</span> -->\r\n\r\n <button class=\"outlined_btn last_btn disable_btn\" type=\"button\">\r\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n <!-- Pagination Ends -->\r\n</div>\r\n\r\n<!-- cell right click code start here -->\r\n<div class=\"dropdown_wrapper d-none\">\r\n <div class=\"right_click_dropdown\">\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/scissors.svg\" />\r\n <span class=\"text\">Cut</span>\r\n </div>\r\n\r\n <span class=\"right_item\">Ctrl+X</span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/copy.svg\" alt=\"\" />\r\n <span class=\"text\">Copy</span>\r\n </div>\r\n\r\n <span class=\"right_item\">Ctrl+C</span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/copy.svg\" alt=\"\" />\r\n <span class=\"text\">Copy with Headers</span>\r\n </div>\r\n <span class=\"right_item\"></span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/copy.svg\" alt=\"\" />\r\n <span class=\"text\">Copy with Group Headers</span>\r\n </div>\r\n <span class=\"right_item\"></span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/clipboard.svg\" alt=\"\" />\r\n <span class=\"text\">Paste</span>\r\n </div>\r\n\r\n <span class=\"right_item\">Ctrl+V</span>\r\n </div>\r\n\r\n <div class=\"right_click_item active\">\r\n <div class=\"left_item\">\r\n <img src=\"images/bar-chart.svg\" alt=\"\" />\r\n <span class=\"text\">Chart</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/download.svg\" alt=\"\" />\r\n <span class=\"text\">Export</span>\r\n </div>\r\n\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Chart section Start Here -->\r\n <div class=\"second_dropdown\">\r\n <div class=\"right_click_item active\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Column</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Bar</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Pie</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Line</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Area</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">XY(Scatter)</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Polar</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Stastical</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Hierarchical</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Specialized</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Funnel</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Combination</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Export Section start Here -->\r\n <div class=\"export_section d-none\">\r\n <div class=\"right_click_item active\">\r\n <div class=\"left_item\">\r\n <img src=\"images/file.svg\" alt=\"\" />\r\n <span class=\"text\">CSV Report</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/file.svg\" alt=\"\" />\r\n <span class=\"text\">Excel Report</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Column Group Section Start Here -->\r\n <div class=\"third_dropdown\">\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Grouped</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Stacked</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">100% Stacked</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .see_more_data{position:absolute;min-width:calc(15.8333333333rem / 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:14;left:0;padding:calc(.5rem / var(--scale)) 0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-word}.tableArea{width:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table{border-collapse:separate;border-spacing:0;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}.tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:14}.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 .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:1!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}.tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--neutral-50)}.tableArea .table_wrapper table thead th:last-child .th_wraper{border:0}.tableArea .table_wrapper table thead th:hover .none{display:block}.tableArea .table_wrapper table thead th:hover .up,.tableArea .table_wrapper table thead th:hover .down{display:none}.tableArea .table_wrapper table tbody{background-color:var(--white)}.tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:all .3s ease-in-out}.tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none;background-color:var(--neutral-50)}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover,.tableArea .table_wrapper table tbody tr:hover td{background-color:var(--blue-50)!important}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / var(--scale))}.tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td:hover{background-color:var(--blue-50)!important}.tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.th_wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th_wraper .text_wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th_wraper .filter_three_dot_wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters:hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:20px;left:0;width:calc(18.8333333333rem / var(--scale));background:var(--neutral-50);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper lib-common-input{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details .set_options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(10.8333333333rem / var(--scale));overflow-y:auto}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--white);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--blue-600);border-color:var(--blue-600);color:var(--white)}.th_wraper .filter_three_dot_wrapper .three-dots :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .resize-handle{color:var(--neutral-200);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.tableArea .table_wrapper .headerName{font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination_main .entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select{position:relative}.pagination_main .entries_details .pagination_select .select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img img{width:calc(1.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--white);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination_main .entries_details .pagination_select .select_option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option span:hover{background-color:var(--neutral-50)}.pagination_main .pagination_form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination_main .pagination_form .prev_btn,.pagination_main .pagination_form .next_btn,.pagination_main .pagination_form .first_btn,.pagination_main .pagination_form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .pagination_form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-500);cursor:pointer}.pagination_main .pagination_form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--neutral-200)}.pagination_main .pagination_form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination_main .input_style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-600);text-align:center;outline:none;padding:0}.tableArea .table_wrapper table th:not(:last-child) .right .line{display:block;border-left:calc(.1666666667rem / var(--scale)) solid var(--grey-50);height:calc(2rem / var(--scale))}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--white);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.d-none{display:none}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--neutral-50);border-radius:calc(.3333333333rem / var(--scale))}.group_panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--neutral-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(0rem / var(--scale));border-top:0;height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.group_panel img.divider:last-child{display:none}.group_panel .group_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;cursor:grab}.group_panel .group_tag .remove_tag{border:0;padding:0;cursor:pointer}.group_panel .group_placeholder{color:var(--neutral-500)}.group_panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);cursor:pointer}.active_group{width:100px}.dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale))}.dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.dropdown_wrapper .right_click_item:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-50)}.dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.dropdown_wrapper .right_click_item .right_chevron{stroke:var(--neutral-400)}.second_dropdown{position:absolute;right:calc(-20rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.disabled_option{opacity:.4;pointer-events:none}.active_filters_container{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.active_filter_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:wrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale))}.active_filter_label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--blue-700);max-width:calc(29.1666666667rem / var(--scale))}.filter_logic{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:var(--neutral-400)}.remove_filter_btn{height:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));cursor:pointer;margin-left:calc(.3333333333rem / 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"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "component", type: CommonInputComponent, selector: "lib-common-input", inputs: ["options", "selectedValue", "placeholder", "elementType"], outputs: ["valueChange"] }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
|
|
2146
2158
|
}
|
|
2147
2159
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsDataGridComponent, decorators: [{
|
|
2148
2160
|
type: Component,
|
|
@@ -2155,8 +2167,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2155
2167
|
RendererParserDirective,
|
|
2156
2168
|
AddClassPipe,
|
|
2157
2169
|
CommonInputComponent,
|
|
2158
|
-
], template: "<div class=\"tableArea\">\r\n @if(groupByRequired){\r\n <!-- Group Panel -->\r\n <div\r\n class=\"group_panel\"\r\n (dragover)=\"onGroupDragOver($event)\"\r\n (drop)=\"onGroupDrop($event)\"\r\n >\r\n <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\r\n @for(g of activeGroups; track $index){\r\n <div\r\n class=\"group_tag\"\r\n draggable=\"true\"\r\n (dragstart)=\"onGroupDragStart($event, $index)\"\r\n (dragover)=\"onActiveDragOver($event, $index)\"\r\n (drop)=\"onActiveGroupDrop($event, $index)\"\r\n >\r\n <img src=\"images/t-gripper.svg\" alt=\"\" />\r\n <span>{{ g.headerName }}</span>\r\n <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\r\n <img src=\"images/t-x.svg\" alt=\"\" />\r\n </button>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\r\n } @if(activeGroups.length === 0){\r\n <div class=\"group_placeholder\">Drag here to set row groups</div>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"table_wrapper\"\r\n id=\"container_scroll\"\r\n #parent\r\n (scroll)=\"infinityScroll($event)\"\r\n [ngStyle]=\"{ height: height + 'px' }\"\r\n >\r\n <table cellspacing=\"0\" cellpadding=\"0\">\r\n <thead class=\"sticky-top\">\r\n <tr>\r\n @if (checkBoxSelection && checkboxSelectionType == 'multiple') {\r\n <th style=\"min-width: 50px; width: 50px;\">\r\n <span class=\"checkbox_container\"\r\n ><input\r\n class=\"pointer\"\r\n type=\"checkbox\"\r\n name=\"\"\r\n id=\"\"\r\n [checked]=\"checkAllSelected()\"\r\n [indeterminate]=\"checkInterminate()\"\r\n (change)=\"onHeaderCheckboxChange($event)\"\r\n /></span>\r\n </th>\r\n\r\n } \r\n <!-- @else{\r\n <th></th>\r\n } -->\r\n @if(activeGroups.length > 0){\r\n <th class=\"active_group\">\r\n <div class=\"th_wraper\">\r\n <div class=\"text_wrapper\">\r\n <span class=\"ellipsis headerName\">Group</span>\r\n </div>\r\n <div class=\"filter_three_dot_wrapper\">\r\n <div class=\"three-dots\">\r\n <img src=\"images/t-more-vertical.svg\" />\r\n </div>\r\n </div>\r\n </div>\r\n </th>\r\n } @for (col of colDefs; track col.colId) {\r\n <th\r\n [ngStyle]=\"getStyle(col, 'action')\"\r\n [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n (dragover)=\"onDragOver($event, $index)\"\r\n (drop)=\"onDrop($event, $index)\"\r\n (mouseenter)=\"onMouseEnterHeader($index)\"\r\n (mouseleave)=\"onMouseLeaveHeader($index)\"\r\n >\r\n <div class=\"th_wraper\">\r\n <div\r\n class=\"text_wrapper\"\r\n [ngStyle]=\"getStyle(col, 'action')\"\r\n (click)=\"onSortingRowData($index, col)\"\r\n >\r\n @if(showMoveIcon[$index] && !col.isAction){\r\n <img\r\n src=\"images/t-move.svg\"\r\n class=\"move-icon\"\r\n [draggable]=\"!isResizing || columnDraggable[$index]\"\r\n (dragstart)=\"onDragStart($event, $index)\"\r\n (dragend)=\"onDragEnd()\"\r\n (mouseenter)=\"enableColumnDrag($event, $index)\"\r\n (mouseleave)=\"disableColumnDrag($event, $index)\"\r\n />\r\n\r\n }\r\n <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n @if (sortingRequired && sortingColumnIndex == $index &&\r\n col?.sortable && !col.isAction) {\r\n <span class=\"sorting_icon\">\r\n @if(sortingType[$index]=== 'asc'){\r\n <img\r\n src=\"images/t-arrow-up.svg\"\r\n class=\"sorting_up\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n } @if(sortingType[$index]=== 'dsc'){\r\n <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n <img\r\n src=\"images/t-arrow-down.svg\"\r\n class=\"sorting_down\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n }\r\n </span>\r\n\r\n }\r\n </div>\r\n <div class=\"filter_three_dot_wrapper\">\r\n <!-- Column Filters Logic-->\r\n @if(filterRequired && col.filterable){\r\n <div\r\n #trigger\r\n class=\"filters\"\r\n (click)=\"toggleFilter(col, $index, $event)\"\r\n >\r\n @if(activeFilters.has(col.fieldName)){\r\n <img\r\n src=\"images/t-filter-applied.svg\"\r\n class=\"filter-icon\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n }@else {\r\n <img\r\n src=\"images/t-filter.svg\"\r\n class=\"filter-icon\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n } @if (activeFilterIndex === $index) {\r\n <div\r\n adaptivePosition\r\n [trigger]=\"trigger\"\r\n [parentContainer]=\"parent\"\r\n [matchWidth]=\"false\"\r\n class=\"filter_wrapper\"\r\n id=\"filter_wrapper-{{ $index }}\"\r\n (click)=\"$event.stopPropagation()\"\r\n appOutsideClick\r\n (clickOutside)=\"onClickOutside()\"\r\n >\r\n <!-- Text Filter -->\r\n @if(col.filterType === 'text'){\r\n\r\n <lib-common-input\r\n [options]=\"filterOptions\"\r\n [selectedValue]=\"col.textFilters[0].filterType\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.textFilters[0].filterType = $event\"\r\n ></lib-common-input>\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n (keyup)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n\r\n <!-- <input\r\n type=\"text\"\r\n [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n placeholder=\"Filter\u2026\"\r\n (keyup)=\"applyAllFilters()\"\r\n /> -->\r\n\r\n @if(col.textFilters[0].filterValue){\r\n <div class=\"logic-row radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"textLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.textLogic\"\r\n value=\"AND\"\r\n id=\"{{ $index }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index\">AND</label>\r\n\r\n <input\r\n type=\"radio\"\r\n name=\"textLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.textLogic\"\r\n value=\"OR\"\r\n id=\"{{ $index + 1 }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index + 1\">OR</label>\r\n </div>\r\n\r\n <lib-common-input\r\n [options]=\"filterOptions\"\r\n [selectedValue]=\"col.textFilters[1].filterType\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.textFilters[1].filterType = $event\"\r\n ></lib-common-input>\r\n <!-- <input\r\n type=\"text\"\r\n [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n placeholder=\"Filter\u2026\"\r\n (keyup)=\"applyAllFilters()\"\r\n /> -->\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n (keyup)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n } }\r\n\r\n <!-- Number Filter -->\r\n @if(col.filterType === 'number'){\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.numberFilters[0].filterType\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.numberFilters[0].filterType = $event\"\r\n ></lib-common-input>\r\n\r\n <!-- <input\r\n type=\"number\"\r\n [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n (input)=\"applyAllFilters()\"\r\n /> -->\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"number\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n (input)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n\r\n @if(col.numberFilters[0].numberValue){\r\n <div class=\"logic-row radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"textLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.textLogic\"\r\n value=\"AND\"\r\n id=\"{{ $index }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index\">AND</label>\r\n\r\n <input\r\n type=\"radio\"\r\n name=\"textLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.textLogic\"\r\n value=\"OR\"\r\n id=\"{{ $index + 1 }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index + 1\">OR</label>\r\n </div>\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.numberFilters[1].filterType\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.numberFilters[1].filterType = $event\"\r\n ></lib-common-input>\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n (keyup)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n <!-- <input\r\n type=\"text\"\r\n [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n placeholder=\"Filter\u2026\"\r\n (keyup)=\"applyAllFilters()\"\r\n /> -->\r\n } }\r\n\r\n <!-- DATE FILTER -->\r\n @if(col.filterType === 'date'){\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.dateFilters[0].filterType\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.dateFilters[0].filterType = $event\"\r\n ></lib-common-input>\r\n\r\n <!-- <input\r\n type=\"date\"\r\n [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n (change)=\"applyAllFilters()\"\r\n /> -->\r\n <lib-common-calendar\r\n [dateConfig]=\"dateConfig\"\r\n [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n ></lib-common-calendar>\r\n\r\n @if(col.dateFilters[0].dateValue){\r\n <div class=\"logic-row radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"textLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.textLogic\"\r\n value=\"AND\"\r\n id=\"{{ $index }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index\">AND</label>\r\n\r\n <input\r\n type=\"radio\"\r\n name=\"textLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.textLogic\"\r\n value=\"OR\"\r\n id=\"{{ $index + 1 }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index + 1\">OR</label>\r\n </div>\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.dateFilters[1].filterType\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.dateFilters[1].filterType = $event\"\r\n ></lib-common-input>\r\n\r\n <lib-common-calendar\r\n [dateConfig]=\"dateConfig\"\r\n [(ngModel)]=\"col.dateFilters[1].dateValue\"\r\n (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n ></lib-common-calendar>\r\n } }\r\n\r\n <!-- SET FILTER (CHECKBOX LIST) -->\r\n @if(col.filterType === 'set'){\r\n <!-- <input\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"filterSetOptions(col, $event)\"\r\n /> -->\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"filterSetOptions(col, $event)\"\r\n />\r\n </div>\r\n\r\n <div class=\"set_option_details\">\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected(col)\"\r\n (change)=\"toggleSelectAll(col, $event)\"\r\n />\r\n (Select All)\r\n </label>\r\n <div class=\"set_options\" id=\"container_scroll\">\r\n @for(opt of col.filteredOptions; track $index){\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"col.selectedValues.has(opt)\"\r\n (change)=\"toggleSetOption(col, opt, $event)\"\r\n />\r\n {{ opt }}\r\n </label>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"filter_btn\">\r\n <button\r\n class=\"reset_btn\"\r\n type=\"button\"\r\n (click)=\"resetFilter(col)\"\r\n >\r\n Reset\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Three dots menu-->\r\n <div #triggerColMenu>\r\n @if(threeDotsMenuRequired && col.columnAction){\r\n\r\n <div\r\n class=\"three-dots\"\r\n (click)=\"openMenu($event, col, $index)\"\r\n >\r\n <img\r\n src=\"images/t-more-vertical.svg\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n </div>\r\n }\r\n </div>\r\n @if(!col.isAction){\r\n <span\r\n class=\"resize-handle\"\r\n (mousedown)=\"startResize($event, $index)\"\r\n >\r\n |\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- popup open -->\r\n @if(menuVisible[$index]){\r\n <div\r\n class=\"dropdown_wrapper\"\r\n adaptivePosition\r\n [trigger]=\"triggerColMenu\"\r\n [parentContainer]=\"parent\"\r\n [matchWidth]=\"false\"\r\n [isColumnActionMenu]=\"true\"\r\n (click)=\"$event.stopPropagation()\"\r\n appOutsideClick\r\n (clickOutside)=\"onClickOutside()\"\r\n >\r\n <div class=\"right_click_dropdown\" id=\"container_scroll\">\r\n @if(sortingType[$index] === 'dsc' || sortingType[$index] ===\r\n ''){\r\n <div\r\n class=\"right_click_item\"\r\n (click)=\"onSort(col, 'asc', $index)\"\r\n >\r\n <div class=\"left_item\">\r\n <img\r\n src=\"images/arrow-up.svg\"\r\n class=\"sorting_up\"\r\n [ngClass]=\"{ disable: !col.sortable }\"\r\n />\r\n <span class=\"text\">Sort Ascending</span>\r\n </div>\r\n </div>\r\n } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n ''){\r\n <div\r\n class=\"right_click_item\"\r\n (click)=\"onSort(col, 'dsc', $index)\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/arrow-down.svg\" />\r\n <span class=\"text\">Sort Descending</span>\r\n </div>\r\n </div>\r\n } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n 'dsc'){\r\n <div class=\"right_click_item\" (click)=\"onSort(col, '', $index)\">\r\n <div class=\"left_item\">\r\n <img src=\"images/trash-2.svg\" />\r\n <span class=\"text\">Clear Sort</span>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"divder\"></div>\r\n\r\n <div\r\n class=\"right_click_item\"\r\n (mouseenter)=\"showPinActions()\"\r\n (mouseleave)=\"hidePinActions()\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/pin.svg\" />\r\n <span class=\"text\">Pin Column</span>\r\n </div>\r\n <div class=\"right_item\">\r\n <img src=\"images/chevron-right.svg\" />\r\n @if(showPin){\r\n <div class=\"second_dropdown\">\r\n <div\r\n (click)=\"pinColumn(col, $index, 'none')\"\r\n class=\"right_click_item\"\r\n >\r\n <div class=\"left_item\">\r\n @if((pinActionClicked[col.colId]?? 'none') ===\r\n 'none'){\r\n <img src=\"images/check.svg\" />\r\n } @else{\r\n <img src=\"\" alt=\"\" />\r\n }\r\n <span class=\"text\">No Pin</span>\r\n </div>\r\n </div>\r\n <div\r\n (click)=\"pinColumn(col, $index, 'left')\"\r\n class=\"right_click_item\"\r\n >\r\n <div class=\"left_item\">\r\n @if(pinActionClicked[col.colId] === 'left'){\r\n <img src=\"images/check.svg\" />\r\n } @else{\r\n <img src=\"\" alt=\"\" />\r\n }\r\n <span class=\"text\">Pin Left</span>\r\n </div>\r\n </div>\r\n <div\r\n (click)=\"pinColumn(col, $index, 'right')\"\r\n class=\"right_click_item\"\r\n >\r\n <div class=\"left_item\">\r\n @if(pinActionClicked[col.colId] === 'right'){\r\n <img src=\"images/check.svg\" />\r\n } @else{\r\n <img src=\"\" alt=\"\" />\r\n }\r\n <span class=\"text\">Pin Right</span>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- <div\r\n class=\"right_click_item\"\r\n (click)=\"pinColumn(col, $index, 'left')\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/pin.svg\" />\r\n <span class=\"text\">{{\r\n col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\r\n }}</span>\r\n </div>\r\n </div>\r\n <div\r\n class=\"right_click_item\"\r\n (click)=\"pinColumn(col, $index, 'right')\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/pin.svg\" />\r\n <span class=\"text\">\r\n {{\r\n col.rightPinned\r\n ? \"Unpin Right Column\"\r\n : \"Pin Column Right\"\r\n }}\r\n </span>\r\n </div>\r\n <div class=\"right_item\">\r\n <img src=\"images/arrow-right.svg\" alt=\"\" />\r\n </div>\r\n </div> -->\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"\" alt=\"\" />\r\n <span class=\"text\">Autosize This Column</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"\" alt=\"\" />\r\n <span class=\"text\">Autosize All Columns</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div\r\n class=\"left_item\"\r\n (click)=\"groupByColumnAction(col, $index)\"\r\n >\r\n <img src=\"images/t-group-by-name.svg\" alt=\"\" />\r\n <span class=\"text\">Group by {{ col.headerName }}</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/t-choose-column.svg\" alt=\"\" />\r\n <span class=\"text\">Choose Columns</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"\" alt=\"\" />\r\n <span class=\"text\">Reset Columns</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if(groupedResult && groupedResult.length > 0){ @for(group of\r\n groupedResult; track group.key){\r\n <tr (click)=\"toggleGroup(group)\">\r\n <td\r\n class=\"group-cell\"\r\n [attr.colspan]=\"\r\n colDefs.length +\r\n (checkBoxSelection ? 1 : 0) +\r\n (activeGroups.length > 0 ? 1 : 0)\r\n \"\r\n >\r\n <span class=\"group-toggle\">\r\n <img\r\n src=\"images/{{\r\n group.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n }}\"\r\n />\r\n {{ group.key }} ({{ group.children.length }})\r\n </span>\r\n </td>\r\n </tr>\r\n\r\n @if(group.expanded){\r\n <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\r\n @if (group.children[0]?.children) { @for (child of group.children; track\r\n child.key) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"groupTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: child,\r\n colDefs: colDefs,\r\n checkBoxSelection: checkBoxSelection,\r\n activeGroups: activeGroups,\r\n level: 1\r\n }\"\r\n ></ng-container>\r\n } }\r\n\r\n <!-- CASE 2: CHILDREN ARE RAW ROWS -->\r\n @if (!group.children[0]?.children) { @for (row of group.children; track\r\n row.rowId) {\r\n <tr [ngClass]=\"row | addClass : tableOptions\">\r\n <!-- Checkbox column if any -->\r\n @if (checkBoxSelection) {\r\n <td>\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n /></span>\r\n </td>\r\n } @if (activeGroups.length > 0) {\r\n <td class=\"group-placeholder\"></td>\r\n }\r\n\r\n <!-- Render columns -->\r\n @for (col of colDefs; track col.colId) {\r\n <td [ngStyle]=\"getStyle(col)\">\r\n <!-- {{ row[col.fieldName] }} -->\r\n @if (!col?.cellRenderer) {\r\n <div class=\"cell-value ellipsis\">\r\n <div\r\n class=\"more_data_wrapper\"\r\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n >\r\n {{ parseColValue(row, col) }}\r\n </div>\r\n <div class=\"see_more_data\" id=\"container_scroll\">\r\n <div class=\"item\">\r\n <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n } @else{\r\n <div\r\n [rowParam]=\"row\"\r\n [col]=\"col\"\r\n [api]=\"tableOptions\"\r\n [currentValue]=\"row[col.fieldName]\"\r\n appRendererParser\r\n ></div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n } } } } } @else{ @for (data of rowData; track data.rowId) {\r\n <tr [ngClass]=\"data | addClass : tableOptions\">\r\n @if (checkBoxSelection) {\r\n <td style=\"min-width: 50px\">\r\n @if (checkboxSelectionType=='multiple') {\r\n <span class=\"checkbox_container\"\r\n ><input\r\n type=\"checkbox\"\r\n class=\"pointer\"\r\n name=\"\"\r\n id=\"{{ data.rowId }}\"\r\n [disabled]=\"data.isLocked\"\r\n [checked]=\"data.isSelected || data.isLocked\"\r\n (change)=\"onRowCheckboxSelection($event)\"\r\n /></span>\r\n\r\n }@else{\r\n <span class=\"radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"\"\r\n id=\"{{ data.rowId }}\"\r\n [checked]=\"data?.isSelected\"\r\n (change)=\"onRowCheckboxSelection($event)\"\r\n />\r\n <label [for]=\"data.rowId\"></label>\r\n </span>\r\n\r\n }\r\n </td>\r\n } @for (col of colDefs; track col.colId) {\r\n <td\r\n [ngStyle]=\"getStyle(col)\"\r\n [ngClass]=\"[col?.addClass ? col.addClass(data) : '']\"\r\n >\r\n @if (!col?.cellRenderer) {\r\n <div class=\"cell-value ellipsis\">\r\n <div\r\n class=\"more_data_wrapper\"\r\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n >\r\n {{ parseColValue(data, col) }}\r\n </div>\r\n <div class=\"see_more_data\" id=\"container_scroll\">\r\n <div class=\"item\">\r\n <span class=\"desc\"> {{ parseColValue(data, col) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n } @else{\r\n <div\r\n [rowParam]=\"data\"\r\n [col]=\"col\"\r\n [api]=\"tableOptions\"\r\n [currentValue]=\"data[col.fieldName]\"\r\n appRendererParser\r\n ></div>\r\n }\r\n <!-- Commented for later use -->\r\n <!-- <div class=\"tool_tip\">\r\n <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\r\n </div> -->\r\n </td>\r\n }\r\n </tr>\r\n } @empty {\r\n <tr>\r\n <td\r\n [attr.colspan]=\"\r\n colDefs.length +\r\n (checkBoxSelection ? 1 : 0) +\r\n (activeGroups.length > 0 ? 1 : 0)\r\n \"\r\n >\r\n <div class=\"small_data\">\r\n @if (tableOptions?.noDataTemplate) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tableOptions?.noDataTemplate\"\r\n ></ng-container>\r\n\r\n }@else{\r\n <!-- need to style it properly then we will add it -->\r\n <span>No Data To Show</span>\r\n\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n\r\n } }\r\n </tbody>\r\n\r\n <ng-template\r\n #groupTemplate\r\n let-node\r\n let-colDefs=\"colDefs\"\r\n let-checkBoxSelection=\"checkBoxSelection\"\r\n let-activeGroups=\"activeGroups\"\r\n let-level=\"level\"\r\n >\r\n <!-- GROUP HEADER -->\r\n <tr (click)=\"toggleGroup(node)\">\r\n <td\r\n [attr.colspan]=\"\r\n colDefs.length +\r\n (checkBoxSelection ? 1 : 0) +\r\n (activeGroups.length > 0 ? 1 : 0)\r\n \"\r\n [style.paddingLeft.px]=\"level * 20\"\r\n class=\"group-cell\"\r\n >\r\n <span class=\"group-toggle\">\r\n <img\r\n src=\"images/{{\r\n node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n }}\"\r\n />\r\n {{ node.key }} ({{ node.children.length }})\r\n </span>\r\n </td>\r\n </tr>\r\n\r\n <!-- CHILDREN -->\r\n @if (node.expanded) {\r\n\r\n <!-- CASE: more groups -->\r\n @if (node.children[0]?.children) { @for (child of node.children; track\r\n child.key) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"groupTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: child,\r\n colDefs: colDefs,\r\n checkBoxSelection: checkBoxSelection,\r\n activeGroups: activeGroups,\r\n level: level + 1\r\n }\"\r\n >\r\n </ng-container>\r\n } }\r\n\r\n <!-- CASE: final rows -->\r\n @if (!node.children[0]?.children) { @for (row of node.children; track\r\n row.rowId) {\r\n\r\n <tr [ngClass]=\"row | addClass : tableOptions\">\r\n <!-- Checkbox column if any -->\r\n @if (checkBoxSelection) {\r\n <td>\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n /></span>\r\n </td>\r\n } @if (activeGroups.length > 0) {\r\n <td class=\"group-placeholder\"></td>\r\n }\r\n\r\n <!-- Render columns -->\r\n @for (col of colDefs; track col.colId) {\r\n <td [ngStyle]=\"getStyle(col)\">\r\n <!-- {{ row[col.fieldName] }} -->\r\n @if (!col?.cellRenderer) {\r\n <div class=\"cell-value ellipsis\">\r\n <div\r\n class=\"more_data_wrapper\"\r\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n >\r\n {{ parseColValue(row, col) }}\r\n </div>\r\n <div class=\"see_more_data\" id=\"container_scroll\">\r\n <div class=\"item\">\r\n <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n } @else{\r\n <div\r\n [rowParam]=\"row\"\r\n [col]=\"col\"\r\n [api]=\"tableOptions\"\r\n [currentValue]=\"row[col.fieldName]\"\r\n appRendererParser\r\n ></div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n } } }\r\n </ng-template>\r\n </table>\r\n </div>\r\n <!-- Table Wrapper Ends-->\r\n @if(paginationRequired){\r\n <div class=\"pagination_main\">\r\n <div class=\"entries_details\">\r\n <span>Showing</span>\r\n <div class=\"pagination_select\">\r\n <div\r\n class=\"select_dropdown pointer\"\r\n (click)=\"showPageSizeList = !showPageSizeList\"\r\n >\r\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\r\n <span class=\"chevron_img\">\r\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\r\n </span>\r\n </div>\r\n @if(showPageSizeList){\r\n <div class=\"select_option\">\r\n @for(option of pageSizeList;track $index){\r\n <span\r\n class=\"pointer\"\r\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\r\n >{{ option }}</span\r\n >\r\n }\r\n </div>\r\n }\r\n </div>\r\n <span\r\n >Rows | {{ totalRecords > 0 ? recordsToShow.min + 1 : 0 }} -\r\n {{\r\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\r\n }}\r\n of\r\n {{ totalRecords }} Entries</span\r\n >\r\n </div>\r\n <div class=\"pagination_form\">\r\n <!-- <span>Page</span> -->\r\n\r\n <button class=\"outlined_btn first_btn\" type=\"button\">\r\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\r\n </button>\r\n <button\r\n class=\"outlined_btn prev_btn\"\r\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\r\n type=\"button\"\r\n (click)=\"onBtPrevClick()\"\r\n >\r\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\r\n </button>\r\n <div>\r\n <input\r\n class=\"input_style\"\r\n type=\"number\"\r\n [(ngModel)]=\"pageDetails.currentPage\"\r\n (change)=\"goToSelectedPage($event)\"\r\n name=\"\"\r\n id=\"\"\r\n />\r\n </div>\r\n <button\r\n class=\"outlined_btn next_btn\"\r\n type=\"button\"\r\n [ngClass]=\"\r\n pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\r\n \"\r\n (click)=\"onBtNextClick()\"\r\n >\r\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\r\n </button>\r\n <!-- <span>of {{ pageDetails.totalPages }}</span> -->\r\n\r\n <button class=\"outlined_btn last_btn\" type=\"button\">\r\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n <!-- Pagination Ends -->\r\n</div>\r\n\r\n<!-- cell right click code start here -->\r\n<div class=\"dropdown_wrapper d-none\">\r\n <div class=\"right_click_dropdown\">\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/scissors.svg\" />\r\n <span class=\"text\">Cut</span>\r\n </div>\r\n\r\n <span class=\"right_item\">Ctrl+X</span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/copy.svg\" alt=\"\" />\r\n <span class=\"text\">Copy</span>\r\n </div>\r\n\r\n <span class=\"right_item\">Ctrl+C</span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/copy.svg\" alt=\"\" />\r\n <span class=\"text\">Copy with Headers</span>\r\n </div>\r\n <span class=\"right_item\"></span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/copy.svg\" alt=\"\" />\r\n <span class=\"text\">Copy with Group Headers</span>\r\n </div>\r\n <span class=\"right_item\"></span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/clipboard.svg\" alt=\"\" />\r\n <span class=\"text\">Paste</span>\r\n </div>\r\n\r\n <span class=\"right_item\">Ctrl+V</span>\r\n </div>\r\n\r\n <div class=\"right_click_item active\">\r\n <div class=\"left_item\">\r\n <img src=\"images/bar-chart.svg\" alt=\"\" />\r\n <span class=\"text\">Chart</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/download.svg\" alt=\"\" />\r\n <span class=\"text\">Export</span>\r\n </div>\r\n\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Chart section Start Here -->\r\n <div class=\"second_dropdown\">\r\n <div class=\"right_click_item active\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Column</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Bar</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Pie</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Line</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Area</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">XY(Scatter)</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Polar</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Stastical</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Hierarchical</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Specialized</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Funnel</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Combination</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Export Section start Here -->\r\n <div class=\"export_section d-none\">\r\n <div class=\"right_click_item active\">\r\n <div class=\"left_item\">\r\n <img src=\"images/file.svg\" alt=\"\" />\r\n <span class=\"text\">CSV Report</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/file.svg\" alt=\"\" />\r\n <span class=\"text\">Excel Report</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Column Group Section Start Here -->\r\n <div class=\"third_dropdown\">\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Grouped</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Stacked</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">100% Stacked</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .see_more_data{position:absolute;min-width:calc(15.8333333333rem / 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:14;right:0;padding:calc(.5rem / var(--scale)) 0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-word}.tableArea{width:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table{border-collapse:collapse;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}.tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:13}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--neutral-500);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left}.tableArea .table_wrapper table td .ellipsis,.tableArea .table_wrapper table th .ellipsis{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(25rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale))}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:0!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);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer}.tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--neutral-50)}.tableArea .table_wrapper table thead th:last-child .th_wraper{border:0}.tableArea .table_wrapper table thead th:hover .none{display:block}.tableArea .table_wrapper table thead th:hover .up,.tableArea .table_wrapper table thead th:hover .down{display:none}.tableArea .table_wrapper table tbody{background-color:var(--white)}.tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);transition:all .3s ease-in-out}.tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover,.tableArea .table_wrapper table tbody tr:hover td{background-color:var(--blue-50)!important}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / var(--scale))}.tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td:hover{background-color:var(--blue-50)!important}.tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.th_wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th_wraper .text_wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th_wraper .filter_three_dot_wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters:hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:20px;left:0;width:calc(18.8333333333rem / var(--scale));background:var(--neutral-50);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper lib-common-input{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details .set_options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(10.8333333333rem / var(--scale));overflow-y:auto}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--white);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--blue-600);border-color:var(--blue-600);color:var(--white)}.th_wraper .filter_three_dot_wrapper .three-dots :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .resize-handle{color:var(--neutral-200);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.tableArea .table_wrapper .headerName{font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination_main .entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select{position:relative}.pagination_main .entries_details .pagination_select .select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img img{width:calc(1.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--white);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination_main .entries_details .pagination_select .select_option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option span:hover{background-color:var(--neutral-50)}.pagination_main .pagination_form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination_main .pagination_form .prev_btn,.pagination_main .pagination_form .next_btn,.pagination_main .pagination_form .first_btn,.pagination_main .pagination_form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .pagination_form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-500);cursor:pointer}.pagination_main .pagination_form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--neutral-200)}.pagination_main .pagination_form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination_main .input_style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-600);text-align:center;outline:none;padding:0}.tableArea .table_wrapper table th:not(:last-child) .right .line{display:block;border-left:calc(.1666666667rem / var(--scale)) solid var(--grey-50);height:calc(2rem / var(--scale))}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--white);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.d-none{display:none}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--neutral-50);border-radius:calc(.3333333333rem / var(--scale))}.group_panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--neutral-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(0rem / var(--scale));border-top:0;height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.group_panel img.divider:last-child{display:none}.group_panel .group_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;cursor:grab}.group_panel .group_tag .remove_tag{border:0;padding:0;cursor:pointer}.group_panel .group_placeholder{color:var(--neutral-500)}.group_panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);cursor:pointer}.active_group{width:100px}.dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale))}.dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.dropdown_wrapper .right_click_item:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-50)}.dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.dropdown_wrapper .right_click_item .right_chevron{stroke:var(--neutral-400)}.second_dropdown{position:absolute;right:calc(-20rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}\n"] }]
|
|
2159
|
-
}], ctorParameters: () => [{ type: i0.
|
|
2170
|
+
], template: "<div class=\"tableArea\">\r\n @if(groupByRequired){\r\n <!-- Group Panel -->\r\n <div\r\n class=\"group_panel\"\r\n (dragover)=\"onGroupDragOver($event)\"\r\n (drop)=\"onGroupDrop($event)\"\r\n >\r\n <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\r\n @for(g of activeGroups; track $index){\r\n <div\r\n class=\"group_tag\"\r\n draggable=\"true\"\r\n (dragstart)=\"onGroupDragStart($event, $index)\"\r\n (dragover)=\"onActiveDragOver($event, $index)\"\r\n (drop)=\"onActiveGroupDrop($event, $index)\"\r\n >\r\n <img src=\"images/t-gripper.svg\" alt=\"\" />\r\n <span>{{ g.headerName }}</span>\r\n <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\r\n <img src=\"images/t-x.svg\" alt=\"\" />\r\n </button>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\r\n } @if(activeGroups.length === 0){\r\n <div class=\"group_placeholder\">Drag here to set row groups</div>\r\n }\r\n </div>\r\n } @if(activeFilters.size > 0){\r\n <div class=\"active_filters_container\">\r\n @for(filter of appliedFilters; track filter.fieldName){\r\n <div class=\"active_filter_tag\">\r\n <div class=\"active_filter_label ellipsis\">\r\n @for (item of filter.filters; track $index) { @if(item.filterValue){\r\n @if($index>0 && item.filterValue){\r\n <span class=\"filter_logic\"> {{ filter.filterLogic }} </span>\r\n }\r\n <span class=\"filter_field\">{{ filter.fieldName }}:</span>\r\n <span class=\"\"> {{ item.filterOperation }}</span>\r\n <span class=\"filter_value\">{{ item.filterValue }}</span>\r\n\r\n } }\r\n </div>\r\n <button class=\"remove_filter_btn\" (click)=\"removeActiveFilter(filter)\">\r\n <img src=\"images/t-x.svg\" alt=\"\" />\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"table_wrapper\"\r\n id=\"container_scroll\"\r\n #parent\r\n (scroll)=\"infinityScroll($event)\"\r\n [ngStyle]=\"{ height: height + 'px' }\"\r\n >\r\n <table cellspacing=\"0\" cellpadding=\"0\">\r\n <thead class=\"sticky-top\">\r\n <tr>\r\n @if (checkBoxSelection && checkboxSelectionType == 'multiple') {\r\n <th style=\"min-width: 50px; width: 50px\">\r\n <span class=\"checkbox_container\"\r\n ><input\r\n class=\"pointer\"\r\n type=\"checkbox\"\r\n name=\"\"\r\n id=\"\"\r\n [checked]=\"checkAllSelected()\"\r\n [indeterminate]=\"checkInterminate()\"\r\n (change)=\"onHeaderCheckboxChange($event)\"\r\n /></span>\r\n </th>\r\n\r\n }\r\n <!-- @else{\r\n <th></th>\r\n } -->\r\n @if(activeGroups.length > 0){\r\n <th class=\"active_group\">\r\n <div class=\"th_wraper\">\r\n <div class=\"text_wrapper\">\r\n <span class=\"ellipsis headerName\">Group</span>\r\n </div>\r\n <div class=\"filter_three_dot_wrapper\">\r\n <div class=\"three-dots\">\r\n <img src=\"images/t-more-vertical.svg\" />\r\n </div>\r\n </div>\r\n </div>\r\n </th>\r\n } @for (col of colDefs; track col.colId) {\r\n <th\r\n [ngStyle]=\"getStyle(col, 'action')\"\r\n [ngClass]=\"{ 'drag-over': dragOverIndex === $index, 'pinned_column': col.leftPinned || col.rightPinned }\"\r\n (dragover)=\"onDragOver($event, $index)\"\r\n (drop)=\"onDrop($event, $index)\"\r\n (mouseenter)=\"onMouseEnterHeader($index)\"\r\n (mouseleave)=\"onMouseLeaveHeader($index)\"\r\n >\r\n <div class=\"th_wraper\">\r\n <div\r\n class=\"text_wrapper\"\r\n [ngStyle]=\"getStyle(col, 'action')\"\r\n (click)=\"onSortingRowData($index, col)\"\r\n >\r\n @if(showMoveIcon[$index] && !col.isAction){\r\n <img\r\n src=\"images/t-move.svg\"\r\n class=\"move-icon\"\r\n [draggable]=\"!isResizing || columnDraggable[$index]\"\r\n (dragstart)=\"onDragStart($event, $index)\"\r\n (dragend)=\"onDragEnd()\"\r\n (mouseenter)=\"enableColumnDrag($event, $index)\"\r\n (mouseleave)=\"disableColumnDrag($event, $index)\"\r\n />\r\n\r\n }\r\n <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n @if (sortingRequired && sortingColumnIndex == $index &&\r\n col?.sortable && !col.isAction) {\r\n <span class=\"sorting_icon\">\r\n @if(sortingType[$index]=== 'asc'){\r\n <img\r\n src=\"images/t-arrow-up.svg\"\r\n class=\"sorting_up\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n } @if(sortingType[$index]=== 'dsc'){\r\n <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n <img\r\n src=\"images/t-arrow-down.svg\"\r\n class=\"sorting_down\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n }\r\n </span>\r\n\r\n }\r\n </div>\r\n <div class=\"filter_three_dot_wrapper\">\r\n <!-- Column Filters Logic-->\r\n @if(filterRequired && col.filterable){\r\n <div\r\n #trigger\r\n class=\"filters\"\r\n (click)=\"toggleFilter(col, $index, $event)\"\r\n >\r\n @if(activeFilters.has(col.fieldName)){\r\n <img\r\n src=\"images/t-filter-applied.svg\"\r\n class=\"filter-icon\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n }@else {\r\n <img\r\n src=\"images/t-filter.svg\"\r\n class=\"filter-icon\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n } @if (activeFilterIndex === $index) {\r\n <div\r\n adaptivePosition\r\n [trigger]=\"trigger\"\r\n [parentContainer]=\"parent\"\r\n [matchWidth]=\"false\"\r\n class=\"filter_wrapper\"\r\n id=\"filter_wrapper-{{ $index }}\"\r\n (click)=\"$event.stopPropagation()\"\r\n appOutsideClick\r\n (clickOutside)=\"onClickOutside()\"\r\n >\r\n <!-- Text Filter -->\r\n @if(col.filterType === 'text'){\r\n\r\n <lib-common-input\r\n [options]=\"filterOptions\"\r\n [selectedValue]=\"col.filters[0].filterOperation\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.filters[0].filterOperation = $event\"\r\n ></lib-common-input>\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.filters[0].filterValue\"\r\n (keyup)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n\r\n <!-- <input\r\n type=\"text\"\r\n [(ngModel)]=\"col.filters[0].filterValue\"\r\n placeholder=\"Filter\u2026\"\r\n (keyup)=\"applyAllFilters()\"\r\n /> -->\r\n\r\n @if(col.filters[0].filterValue){\r\n <div class=\"logic-row radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"filterLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.filterLogic\"\r\n value=\"AND\"\r\n id=\"{{ $index }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index\">AND</label>\r\n\r\n <input\r\n type=\"radio\"\r\n name=\"filterLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.filterLogic\"\r\n value=\"OR\"\r\n id=\"{{ $index + 1 }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index + 1\">OR</label>\r\n </div>\r\n\r\n <lib-common-input\r\n [options]=\"filterOptions\"\r\n [selectedValue]=\"col.filters[1].filterOperation\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.filters[1].filterOperation = $event\"\r\n ></lib-common-input>\r\n <!-- <input\r\n type=\"text\"\r\n [(ngModel)]=\"col.filters[1].filterValue\"\r\n placeholder=\"Filter\u2026\"\r\n (keyup)=\"applyAllFilters()\"\r\n /> -->\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.filters[1].filterValue\"\r\n (keyup)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n } }\r\n\r\n <!-- Number Filter -->\r\n @if(col.filterType === 'number'){\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.filters[0].filterOperation\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.filters[0].filterOperation = $event\"\r\n ></lib-common-input>\r\n\r\n <!-- <input\r\n type=\"number\"\r\n [(ngModel)]=\"col.filters[0].filterValue\"\r\n (input)=\"applyAllFilters()\"\r\n /> -->\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"number\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.filters[0].filterValue\"\r\n (input)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n\r\n @if(col.filters[0].filterValue){\r\n <div class=\"logic-row radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"filterLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.filterLogic\"\r\n value=\"AND\"\r\n id=\"{{ $index }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index\">AND</label>\r\n\r\n <input\r\n type=\"radio\"\r\n name=\"filterLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.filterLogic\"\r\n value=\"OR\"\r\n id=\"{{ $index + 1 }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index + 1\">OR</label>\r\n </div>\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.filters[1].filterOperation\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.filters[1].filterOperation = $event\"\r\n ></lib-common-input>\r\n\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Filter\"\r\n [(ngModel)]=\"col.filters[1].filterValue\"\r\n (keyup)=\"applyAllFilters()\"\r\n />\r\n </div>\r\n <!-- <input\r\n type=\"text\"\r\n [(ngModel)]=\"col.filters[1].filterValue\"\r\n placeholder=\"Filter\u2026\"\r\n (keyup)=\"applyAllFilters()\"\r\n /> -->\r\n } }\r\n\r\n <!-- DATE FILTER -->\r\n @if(col.filterType === 'date'){\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.filters[0].filterOperation\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.filters[0].filterOperation = $event\"\r\n ></lib-common-input>\r\n\r\n <!-- <input\r\n type=\"date\"\r\n [(ngModel)]=\"col.filters[0].filterValue\"\r\n (change)=\"applyAllFilters()\"\r\n /> -->\r\n <lib-common-calendar\r\n [dateConfig]=\"dateConfig\"\r\n [(ngModel)]=\"col.filters[0].filterValue\"\r\n (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n ></lib-common-calendar>\r\n\r\n @if(col.filters[0].filterValue){\r\n <div class=\"logic-row radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"filterLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.filterLogic\"\r\n value=\"AND\"\r\n id=\"{{ $index }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index\">AND</label>\r\n\r\n <input\r\n type=\"radio\"\r\n name=\"filterLogic{{ col.fieldName }}\"\r\n [(ngModel)]=\"col.filterLogic\"\r\n value=\"OR\"\r\n id=\"{{ $index + 1 }}\"\r\n (change)=\"applyAllFilters()\"\r\n />\r\n <label [for]=\"$index + 1\">OR</label>\r\n </div>\r\n\r\n <lib-common-input\r\n [options]=\"numberFilterOptions\"\r\n [selectedValue]=\"col.filters[1].filterOperation\"\r\n placeholder=\"Select filter\"\r\n (valueChange)=\"col.filters[1].filterOperation = $event\"\r\n ></lib-common-input>\r\n\r\n <lib-common-calendar\r\n [dateConfig]=\"dateConfig\"\r\n [(ngModel)]=\"col.filters[1].filterValue\"\r\n (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n ></lib-common-calendar>\r\n } }\r\n\r\n <!-- SET FILTER (CHECKBOX LIST) -->\r\n @if(col.filterType === 'set'){\r\n <!-- <input\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"filterSetOptions(col, $event)\"\r\n /> -->\r\n <div class=\"search_input\">\r\n <img src=\"images/search.svg\" alt=\"\" />\r\n <input\r\n type=\"text\"\r\n placeholder=\"Search...\"\r\n (input)=\"filterSetOptions(col, $event)\"\r\n />\r\n </div>\r\n\r\n <div class=\"set_option_details\">\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected(col)\"\r\n (change)=\"toggleSelectAll(col, $event)\"\r\n />\r\n (Select All)\r\n </label>\r\n <div class=\"set_options\" id=\"container_scroll\">\r\n @for(opt of col.filteredOptions; track $index){\r\n <label class=\"checkbox_container\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"col.selectedValues.has(opt)\"\r\n (change)=\"toggleSetOption(col, opt, $event)\"\r\n />\r\n {{ opt }}\r\n </label>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"filter_btn\">\r\n <button\r\n class=\"reset_btn\"\r\n type=\"button\"\r\n (click)=\"resetFilter(col)\"\r\n >\r\n Reset\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Three dots menu-->\r\n <div #triggerColMenu>\r\n @if(threeDotsMenuRequired && col.columnAction){\r\n\r\n <div\r\n class=\"three-dots\"\r\n (click)=\"openMenu($event, col, $index)\"\r\n >\r\n <img\r\n src=\"images/t-more-vertical.svg\"\r\n [draggable]=\"false\"\r\n (dragstart)=\"\r\n $event.preventDefault(); $event.stopPropagation()\r\n \"\r\n />\r\n </div>\r\n }\r\n </div>\r\n @if(!col.isAction){\r\n <span\r\n class=\"resize-handle\"\r\n (mousedown)=\"startResize($event, $index)\"\r\n >\r\n |\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- popup open -->\r\n @if(menuVisible[$index]){\r\n <div\r\n class=\"dropdown_wrapper\"\r\n adaptivePosition\r\n [trigger]=\"triggerColMenu\"\r\n [parentContainer]=\"parent\"\r\n [matchWidth]=\"false\"\r\n [isColumnActionMenu]=\"true\"\r\n (click)=\"$event.stopPropagation()\"\r\n appOutsideClick\r\n (clickOutside)=\"onClickOutside()\"\r\n >\r\n <div class=\"right_click_dropdown\" id=\"container_scroll\">\r\n @if(sortingType[$index] === 'dsc' || sortingType[$index] ===\r\n ''){\r\n <div\r\n class=\"right_click_item\"\r\n (click)=\"onSort(col, 'asc', $index)\"\r\n >\r\n <div class=\"left_item\">\r\n <img\r\n src=\"images/arrow-up.svg\"\r\n class=\"sorting_up\"\r\n [ngClass]=\"{ disable: !col.sortable }\"\r\n />\r\n <span class=\"text\">Sort Ascending</span>\r\n </div>\r\n </div>\r\n } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n ''){\r\n <div\r\n class=\"right_click_item\"\r\n (click)=\"onSort(col, 'dsc', $index)\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/arrow-down.svg\" />\r\n <span class=\"text\">Sort Descending</span>\r\n </div>\r\n </div>\r\n } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n 'dsc'){\r\n <div class=\"right_click_item\" (click)=\"onSort(col, '', $index)\">\r\n <div class=\"left_item\">\r\n <img src=\"images/trash-2.svg\" />\r\n <span class=\"text\">Clear Sort</span>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"divder\"></div>\r\n\r\n <div\r\n class=\"right_click_item\"\r\n (mouseenter)=\"showPinActions()\"\r\n (mouseleave)=\"hidePinActions()\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/pin.svg\" />\r\n <span class=\"text\">Pin Column</span>\r\n </div>\r\n <div class=\"right_item\">\r\n <img src=\"images/chevron-right.svg\" />\r\n @if(showPin){\r\n <div class=\"second_dropdown\">\r\n <div\r\n (click)=\"pinColumn(col, $index, 'none')\"\r\n class=\"right_click_item\"\r\n >\r\n <div class=\"left_item\">\r\n @if((pinActionClicked[col.colId]?? 'none') ===\r\n 'none'){\r\n <img src=\"images/check.svg\" />\r\n } @else{\r\n <img src=\"\" alt=\"\" />\r\n }\r\n <span class=\"text\">No Pin</span>\r\n </div>\r\n </div>\r\n <div\r\n (click)=\"pinColumn(col, $index, 'left')\"\r\n class=\"right_click_item\"\r\n >\r\n <div class=\"left_item\">\r\n @if(pinActionClicked[col.colId] === 'left'){\r\n <img src=\"images/check.svg\" />\r\n } @else{\r\n <img src=\"\" alt=\"\" />\r\n }\r\n <span class=\"text\">Pin Left</span>\r\n </div>\r\n </div>\r\n <div\r\n (click)=\"pinColumn(col, $index, 'right')\"\r\n class=\"right_click_item\"\r\n >\r\n <div class=\"left_item\">\r\n @if(pinActionClicked[col.colId] === 'right'){\r\n <img src=\"images/check.svg\" />\r\n } @else{\r\n <img src=\"\" alt=\"\" />\r\n }\r\n <span class=\"text\">Pin Right</span>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- <div\r\n class=\"right_click_item\"\r\n (click)=\"pinColumn(col, $index, 'left')\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/pin.svg\" />\r\n <span class=\"text\">{{\r\n col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\r\n }}</span>\r\n </div>\r\n </div>\r\n <div\r\n class=\"right_click_item\"\r\n (click)=\"pinColumn(col, $index, 'right')\"\r\n >\r\n <div class=\"left_item\">\r\n <img src=\"images/pin.svg\" />\r\n <span class=\"text\">\r\n {{\r\n col.rightPinned\r\n ? \"Unpin Right Column\"\r\n : \"Pin Column Right\"\r\n }}\r\n </span>\r\n </div>\r\n <div class=\"right_item\">\r\n <img src=\"images/arrow-right.svg\" alt=\"\" />\r\n </div>\r\n </div> -->\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"\" alt=\"\" />\r\n <span class=\"text\">Autosize This Column</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"\" alt=\"\" />\r\n <span class=\"text\">Autosize All Columns</span>\r\n </div>\r\n </div>\r\n <div\r\n class=\"right_click_item\"\r\n [ngClass]=\"{ disabled_option: !groupByRequired }\"\r\n >\r\n <div\r\n class=\"left_item\"\r\n (click)=\"groupByColumnAction(col, $index)\"\r\n >\r\n <img src=\"images/t-group-by-name.svg\" alt=\"\" />\r\n <span class=\"text\">Group by {{ col.headerName }}</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/t-choose-column.svg\" alt=\"\" />\r\n <span class=\"text\">Choose Columns</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"\" alt=\"\" />\r\n <span class=\"text\">Reset Columns</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if(groupedResult && groupedResult.length > 0){ @for(group of\r\n groupedResult; track group.key){\r\n <tr (click)=\"toggleGroup(group)\">\r\n <td\r\n class=\"group-cell\"\r\n [attr.colspan]=\"\r\n colDefs.length +\r\n (checkBoxSelection ? 1 : 0) +\r\n (activeGroups.length > 0 ? 1 : 0)\r\n \"\r\n >\r\n <span class=\"group-toggle\">\r\n <img\r\n src=\"images/{{\r\n group.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n }}\"\r\n />\r\n {{ group.key }} ({{ group.children.length }})\r\n </span>\r\n </td>\r\n </tr>\r\n\r\n @if(group.expanded){\r\n <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\r\n @if (group.children[0]?.children) { @for (child of group.children; track\r\n child.key) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"groupTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: child,\r\n colDefs: colDefs,\r\n checkBoxSelection: checkBoxSelection,\r\n activeGroups: activeGroups,\r\n level: 1\r\n }\"\r\n ></ng-container>\r\n } }\r\n\r\n <!-- CASE 2: CHILDREN ARE RAW ROWS -->\r\n @if (!group.children[0]?.children) { @for (row of group.children; track\r\n row.rowId) {\r\n <tr [ngClass]=\"row | addClass : tableOptions\">\r\n <!-- Checkbox column if any -->\r\n @if (checkBoxSelection) {\r\n <td>\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n /></span>\r\n </td>\r\n } @if (activeGroups.length > 0) {\r\n <td class=\"group-placeholder\"></td>\r\n }\r\n\r\n <!-- Render columns -->\r\n @for (col of colDefs; track col.colId) {\r\n <td [ngStyle]=\"getStyle(col)\" [ngClass]=\"[col?.addClass ? col.addClass(row) : '', col.leftPinned || col.rightPinned ? 'pinned_column' : '']\">\r\n <!-- {{ row[col.fieldName] }} -->\r\n @if (!col?.cellRenderer) {\r\n <div class=\"cell-value ellipsis\">\r\n <div\r\n class=\"more_data_wrapper\"\r\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n >\r\n {{ parseColValue(row, col) }}\r\n </div>\r\n <div class=\"see_more_data\" id=\"container_scroll\">\r\n <div class=\"item\">\r\n <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n } @else{\r\n <div\r\n [rowParam]=\"row\"\r\n [col]=\"col\"\r\n [api]=\"tableOptions\"\r\n [currentValue]=\"row[col.fieldName]\"\r\n appRendererParser\r\n ></div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n } } } } } @else{ @for (data of rowData; track data.rowId) {\r\n <tr [ngClass]=\"data | addClass : tableOptions\">\r\n @if (checkBoxSelection) {\r\n <td style=\"min-width: 50px\">\r\n @if (checkboxSelectionType=='multiple') {\r\n <span class=\"checkbox_container\"\r\n ><input\r\n type=\"checkbox\"\r\n class=\"pointer\"\r\n name=\"\"\r\n id=\"{{ data.rowId }}\"\r\n [disabled]=\"data.isLocked\"\r\n [checked]=\"data.isSelected || data.isLocked\"\r\n (change)=\"onRowCheckboxSelection($event)\"\r\n /></span>\r\n\r\n }@else{\r\n <span class=\"radio_option\">\r\n <input\r\n type=\"radio\"\r\n name=\"\"\r\n id=\"{{ data.rowId }}\"\r\n [checked]=\"data?.isSelected\"\r\n (change)=\"onRowCheckboxSelection($event)\"\r\n />\r\n <label [for]=\"data.rowId\"></label>\r\n </span>\r\n\r\n }\r\n </td>\r\n } @for (col of colDefs; track col.colId) {\r\n <td\r\n [ngStyle]=\"getStyle(col)\"\r\n [ngClass]=\"[col?.addClass ? col.addClass(data) : '', col.leftPinned || col.rightPinned ? 'pinned_column' : '']\"\r\n >\r\n @if (!col?.cellRenderer) {\r\n <div class=\"cell-value ellipsis\">\r\n <div\r\n class=\"more_data_wrapper\"\r\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n >\r\n {{ parseColValue(data, col) }}\r\n </div>\r\n <div class=\"see_more_data\" id=\"container_scroll\">\r\n <div class=\"item\">\r\n <span class=\"desc\"> {{ parseColValue(data, col) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n } @else{\r\n <div\r\n [rowParam]=\"data\"\r\n [col]=\"col\"\r\n [api]=\"tableOptions\"\r\n [currentValue]=\"data[col.fieldName]\"\r\n appRendererParser\r\n ></div>\r\n }\r\n <!-- Commented for later use -->\r\n <!-- <div class=\"tool_tip\">\r\n <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\r\n </div> -->\r\n </td>\r\n }\r\n </tr>\r\n } @empty {\r\n <tr>\r\n <td\r\n [attr.colspan]=\"\r\n colDefs.length +\r\n (checkBoxSelection ? 1 : 0) +\r\n (activeGroups.length > 0 ? 1 : 0)\r\n \"\r\n >\r\n <div class=\"small_data\">\r\n @if (tableOptions?.noDataTemplate) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tableOptions?.noDataTemplate\"\r\n ></ng-container>\r\n\r\n }@else{\r\n <!-- need to style it properly then we will add it -->\r\n <span>No Data To Show</span>\r\n\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n\r\n } }\r\n </tbody>\r\n\r\n <ng-template\r\n #groupTemplate\r\n let-node\r\n let-colDefs=\"colDefs\"\r\n let-checkBoxSelection=\"checkBoxSelection\"\r\n let-activeGroups=\"activeGroups\"\r\n let-level=\"level\"\r\n >\r\n <!-- GROUP HEADER -->\r\n <tr (click)=\"toggleGroup(node)\">\r\n <td\r\n [attr.colspan]=\"\r\n colDefs.length +\r\n (checkBoxSelection ? 1 : 0) +\r\n (activeGroups.length > 0 ? 1 : 0)\r\n \"\r\n [style.paddingLeft.px]=\"level * 20\"\r\n class=\"group-cell\"\r\n >\r\n <span class=\"group-toggle\">\r\n <img\r\n src=\"images/{{\r\n node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n }}\"\r\n />\r\n {{ node.key }} ({{ node.children.length }})\r\n </span>\r\n </td>\r\n </tr>\r\n\r\n <!-- CHILDREN -->\r\n @if (node.expanded) {\r\n\r\n <!-- CASE: more groups -->\r\n @if (node.children[0]?.children) { @for (child of node.children; track\r\n child.key) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"groupTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: child,\r\n colDefs: colDefs,\r\n checkBoxSelection: checkBoxSelection,\r\n activeGroups: activeGroups,\r\n level: level + 1\r\n }\"\r\n >\r\n </ng-container>\r\n } }\r\n\r\n <!-- CASE: final rows -->\r\n @if (!node.children[0]?.children) { @for (row of node.children; track\r\n row.rowId) {\r\n\r\n <tr [ngClass]=\"row | addClass : tableOptions\">\r\n <!-- Checkbox column if any -->\r\n @if (checkBoxSelection) {\r\n <td>\r\n <span class=\"checkbox_container\">\r\n <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n /></span>\r\n </td>\r\n } @if (activeGroups.length > 0) {\r\n <td class=\"group-placeholder\"></td>\r\n }\r\n\r\n <!-- Render columns -->\r\n @for (col of colDefs; track col.colId) {\r\n <td [ngStyle]=\"getStyle(col)\" [ngClass]=\"[col.leftPinned || col.rightPinned ? 'pinned_column' : '']\">\r\n <!-- {{ row[col.fieldName] }} -->\r\n @if (!col?.cellRenderer) {\r\n <div class=\"cell-value ellipsis\">\r\n <div\r\n class=\"more_data_wrapper\"\r\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n >\r\n {{ parseColValue(row, col) }}\r\n </div>\r\n <div class=\"see_more_data\" id=\"container_scroll\">\r\n <div class=\"item\">\r\n <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n } @else{\r\n <div\r\n [rowParam]=\"row\"\r\n [col]=\"col\"\r\n [api]=\"tableOptions\"\r\n [currentValue]=\"row[col.fieldName]\"\r\n appRendererParser\r\n ></div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n } } }\r\n </ng-template>\r\n </table>\r\n </div>\r\n <!-- Table Wrapper Ends-->\r\n @if(paginationRequired){\r\n <div class=\"pagination_main\">\r\n <div class=\"entries_details\">\r\n <span>Showing</span>\r\n <div class=\"pagination_select\">\r\n <div\r\n class=\"select_dropdown pointer\"\r\n (click)=\"showPageSizeList = !showPageSizeList\"\r\n >\r\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\r\n <span class=\"chevron_img\">\r\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\r\n </span>\r\n </div>\r\n @if(showPageSizeList){\r\n <div class=\"select_option\">\r\n @for(option of pageSizeList;track $index){\r\n <span\r\n class=\"pointer\"\r\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\r\n >{{ option }}</span\r\n >\r\n }\r\n </div>\r\n }\r\n </div>\r\n <span\r\n >Rows | {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\r\n {{\r\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\r\n }}\r\n of\r\n {{ totalRecords }} Entries</span\r\n >\r\n </div>\r\n <div class=\"pagination_form\">\r\n <!-- <span>Page</span> -->\r\n\r\n <button class=\"outlined_btn first_btn disable_btn\" type=\"button\">\r\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\r\n </button>\r\n <button\r\n class=\"outlined_btn prev_btn\"\r\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\r\n type=\"button\"\r\n (click)=\"onBtPrevClick()\"\r\n >\r\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\r\n </button>\r\n <div>\r\n <input\r\n class=\"input_style\"\r\n type=\"number\"\r\n [(ngModel)]=\"pageDetails.currentPage\"\r\n (change)=\"goToSelectedPage($event)\"\r\n name=\"\"\r\n id=\"\"\r\n />\r\n </div>\r\n <button\r\n class=\"outlined_btn next_btn\"\r\n type=\"button\"\r\n [ngClass]=\"\r\n pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\r\n \"\r\n (click)=\"onBtNextClick()\"\r\n >\r\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\r\n </button>\r\n <!-- <span>of {{ pageDetails.totalPages }}</span> -->\r\n\r\n <button class=\"outlined_btn last_btn disable_btn\" type=\"button\">\r\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n <!-- Pagination Ends -->\r\n</div>\r\n\r\n<!-- cell right click code start here -->\r\n<div class=\"dropdown_wrapper d-none\">\r\n <div class=\"right_click_dropdown\">\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/scissors.svg\" />\r\n <span class=\"text\">Cut</span>\r\n </div>\r\n\r\n <span class=\"right_item\">Ctrl+X</span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/copy.svg\" alt=\"\" />\r\n <span class=\"text\">Copy</span>\r\n </div>\r\n\r\n <span class=\"right_item\">Ctrl+C</span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/copy.svg\" alt=\"\" />\r\n <span class=\"text\">Copy with Headers</span>\r\n </div>\r\n <span class=\"right_item\"></span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/copy.svg\" alt=\"\" />\r\n <span class=\"text\">Copy with Group Headers</span>\r\n </div>\r\n <span class=\"right_item\"></span>\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/clipboard.svg\" alt=\"\" />\r\n <span class=\"text\">Paste</span>\r\n </div>\r\n\r\n <span class=\"right_item\">Ctrl+V</span>\r\n </div>\r\n\r\n <div class=\"right_click_item active\">\r\n <div class=\"left_item\">\r\n <img src=\"images/bar-chart.svg\" alt=\"\" />\r\n <span class=\"text\">Chart</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/download.svg\" alt=\"\" />\r\n <span class=\"text\">Export</span>\r\n </div>\r\n\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Chart section Start Here -->\r\n <div class=\"second_dropdown\">\r\n <div class=\"right_click_item active\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Column</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Bar</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Pie</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Line</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Area</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">XY(Scatter)</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Polar</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Stastical</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Hierarchical</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Specialized</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Funnel</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Combination</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Export Section start Here -->\r\n <div class=\"export_section d-none\">\r\n <div class=\"right_click_item active\">\r\n <div class=\"left_item\">\r\n <img src=\"images/file.svg\" alt=\"\" />\r\n <span class=\"text\">CSV Report</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <img src=\"images/file.svg\" alt=\"\" />\r\n <span class=\"text\">Excel Report</span>\r\n </div>\r\n <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Column Group Section Start Here -->\r\n <div class=\"third_dropdown\">\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Grouped</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">Stacked</span>\r\n </div>\r\n </div>\r\n <div class=\"right_click_item\">\r\n <div class=\"left_item\">\r\n <span class=\"text\">100% Stacked</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .see_more_data{position:absolute;min-width:calc(15.8333333333rem / 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:14;left:0;padding:calc(.5rem / var(--scale)) 0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-word}.tableArea{width:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table{border-collapse:separate;border-spacing:0;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}.tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:14}.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 .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:1!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}.tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--neutral-50)}.tableArea .table_wrapper table thead th:last-child .th_wraper{border:0}.tableArea .table_wrapper table thead th:hover .none{display:block}.tableArea .table_wrapper table thead th:hover .up,.tableArea .table_wrapper table thead th:hover .down{display:none}.tableArea .table_wrapper table tbody{background-color:var(--white)}.tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:all .3s ease-in-out}.tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none;background-color:var(--neutral-50)}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover,.tableArea .table_wrapper table tbody tr:hover td{background-color:var(--blue-50)!important}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / var(--scale))}.tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td:hover{background-color:var(--blue-50)!important}.tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.th_wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th_wraper .text_wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th_wraper .filter_three_dot_wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters:hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:20px;left:0;width:calc(18.8333333333rem / var(--scale));background:var(--neutral-50);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper lib-common-input{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details .set_options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(10.8333333333rem / var(--scale));overflow-y:auto}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--white);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--blue-600);border-color:var(--blue-600);color:var(--white)}.th_wraper .filter_three_dot_wrapper .three-dots :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .resize-handle{color:var(--neutral-200);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.tableArea .table_wrapper .headerName{font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination_main .entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select{position:relative}.pagination_main .entries_details .pagination_select .select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img img{width:calc(1.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--white);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination_main .entries_details .pagination_select .select_option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option span:hover{background-color:var(--neutral-50)}.pagination_main .pagination_form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination_main .pagination_form .prev_btn,.pagination_main .pagination_form .next_btn,.pagination_main .pagination_form .first_btn,.pagination_main .pagination_form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .pagination_form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-500);cursor:pointer}.pagination_main .pagination_form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--neutral-200)}.pagination_main .pagination_form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination_main .input_style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-600);text-align:center;outline:none;padding:0}.tableArea .table_wrapper table th:not(:last-child) .right .line{display:block;border-left:calc(.1666666667rem / var(--scale)) solid var(--grey-50);height:calc(2rem / var(--scale))}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--white);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.d-none{display:none}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--neutral-50);border-radius:calc(.3333333333rem / var(--scale))}.group_panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--neutral-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(0rem / var(--scale));border-top:0;height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.group_panel img.divider:last-child{display:none}.group_panel .group_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;cursor:grab}.group_panel .group_tag .remove_tag{border:0;padding:0;cursor:pointer}.group_panel .group_placeholder{color:var(--neutral-500)}.group_panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);cursor:pointer}.active_group{width:100px}.dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale))}.dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.dropdown_wrapper .right_click_item:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-50)}.dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.dropdown_wrapper .right_click_item .right_chevron{stroke:var(--neutral-400)}.second_dropdown{position:absolute;right:calc(-20rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.disabled_option{opacity:.4;pointer-events:none}.active_filters_container{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-bottom:calc(1rem / var(--scale))}.active_filter_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:wrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--blue-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale))}.active_filter_label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--blue-700);max-width:calc(29.1666666667rem / var(--scale))}.filter_logic{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:var(--neutral-400)}.remove_filter_btn{height:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));cursor:pointer;margin-left:calc(.3333333333rem / var(--scale))}\n"] }]
|
|
2171
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { tableOptions: [{
|
|
2160
2172
|
type: Input
|
|
2161
2173
|
}], totalRecords: [{
|
|
2162
2174
|
type: Input
|
|
@@ -2192,6 +2204,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2192
2204
|
type: Output
|
|
2193
2205
|
}], pageSizeList: [{
|
|
2194
2206
|
type: Input
|
|
2207
|
+
}], appliedFiltersEvent: [{
|
|
2208
|
+
type: Output
|
|
2209
|
+
}], activeGroupsEvent: [{
|
|
2210
|
+
type: Output
|
|
2211
|
+
}], dynamicGroupingFiltering: [{
|
|
2212
|
+
type: Input
|
|
2195
2213
|
}] } });
|
|
2196
2214
|
|
|
2197
2215
|
class CommonRendererComponent {
|
|
@@ -2401,11 +2419,11 @@ class CommonRendererComponent {
|
|
|
2401
2419
|
this.activeTagId.set(null);
|
|
2402
2420
|
}
|
|
2403
2421
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2404
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CommonRendererComponent, isStandalone: true, selector: "lib-common-renderer", ngImport: i0, template: "<!-- Switch -->\r\n@if(type===\"switch\"){\r\n<div class=\"table_switch_wrapper\">\r\n <label class=\"switch\">\r\n <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n}\r\n\r\n<!-- Action Menu -->\r\n\r\n@if(type==='action-menu'){\r\n<div class=\"action-menu\">\r\n <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\r\n <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\r\n </button>\r\n\r\n @if(openActionMenu){\r\n <div\r\n class=\"menu\"\r\n appOutsideClick\r\n (clickOutside)=\"clickOutside($event)\"\r\n adaptivePosition\r\n [trigger]=\"tagTrigger\"\r\n [isAction]=\"true\"\r\n [matchWidth]=\"false\"\r\n >\r\n <div class=\"item_wrapper\" id=\"container_scroll\">\r\n @for(act of actions; track $index){\r\n <div\r\n class=\"{{ 'menu_item' + ' ' + act.class }}\"\r\n [ngClass]=\"{ disabled_item: act.disabled }\"\r\n (click)=\"onActionClick(act)\"\r\n >\r\n <img src=\"images/{{ act.icon }}.svg\" />\r\n <span>{{ act.label }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n}\r\n\r\n<!-- Tags -->\r\n\r\n@if(type === 'tag'){\r\n<div\r\n class=\"tag_wrapper\"\r\n (mouseover)=\"toggleDropdown($event)\"\r\n (mouseout)=\"closeDropdown($event)\"\r\n #tagTrigger\r\n>\r\n @for(tag of visibleTags; track $index){\r\n <span\r\n class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\r\n [ngClass]=\"tag.tagValue | addClass : params.cellParams\"\r\n >{{ tag.tagValue }}</span\r\n >\r\n } @if(hiddenCount > 0){\r\n <div class=\"hidden_list\">\r\n <span class=\"tag_more\">+{{ hiddenCount }}</span>\r\n @if(openDropdown){\r\n <div\r\n class=\"tag_dropdown\"\r\n id=\"container_scroll\"\r\n adaptivePosition\r\n [trigger]=\"tagTrigger\"\r\n [matchWidth]=\"false\"\r\n >\r\n @for(tag of allTags; track $index){\r\n <div class=\"{{ 'dropdown_item' + ' ' + tag.class }}\">\r\n {{ tag.tagValue }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n }\r\n</div>\r\n}\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.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}.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:calc(12.5rem / 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:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .tag_chip{white-space:nowrap}.tag_wrapper .hidden_list{display:flex}.tag_wrapper .hidden_list .tag_more{cursor:pointer}.tag_wrapper .hidden_list .tag_dropdown{position:relative;top:100%;left:0;max-width:calc(27.75rem / var(--scale));width:calc(27.75rem / var(--scale));max-height:calc(15.8333333333rem / var(--scale));overflow:auto;overflow-x:hidden;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) var(--box-shadow);z-index:1;padding:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:\"\";justify-content:\"\";align-items:\"\";flex-wrap:wrap;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}\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" }] });
|
|
2422
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CommonRendererComponent, isStandalone: true, selector: "lib-common-renderer", ngImport: i0, template: "<!-- Switch -->\r\n@if(type===\"switch\"){\r\n<div class=\"table_switch_wrapper\">\r\n <label class=\"switch\">\r\n <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n}\r\n\r\n<!-- Action Menu -->\r\n\r\n@if(type==='action-menu'){\r\n<div class=\"action-menu\">\r\n <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\r\n <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\r\n </button>\r\n\r\n @if(openActionMenu){\r\n <div\r\n class=\"menu\"\r\n appOutsideClick\r\n (clickOutside)=\"clickOutside($event)\"\r\n adaptivePosition\r\n [trigger]=\"tagTrigger\"\r\n [isAction]=\"true\"\r\n [matchWidth]=\"false\"\r\n >\r\n <div class=\"item_wrapper\" id=\"container_scroll\">\r\n @for(act of actions; track $index){\r\n <div\r\n class=\"{{ 'menu_item' + ' ' + act.class }}\"\r\n [ngClass]=\"{ disabled_item: act.disabled }\"\r\n (click)=\"onActionClick(act)\"\r\n >\r\n <img src=\"images/{{ act.icon }}.svg\" />\r\n <span>{{ act.label }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n}\r\n\r\n<!-- Tags -->\r\n\r\n@if(type === 'tag'){\r\n<div\r\n class=\"tag_wrapper\"\r\n (mouseover)=\"toggleDropdown($event)\"\r\n (mouseout)=\"closeDropdown($event)\"\r\n #tagTrigger\r\n>\r\n @for(tag of visibleTags; track $index){\r\n <span\r\n class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\r\n [ngClass]=\"tag.tagValue | addClass : params.cellParams\"\r\n >\r\n <!-- <span class=\"circle\"></span>\r\n <img src=\"images/home.svg\" alt=\"\" class=\"icon\" /> -->\r\n {{ tag.tagValue }}</span\r\n >\r\n } @if(hiddenCount > 0){\r\n <div class=\"hidden_list\">\r\n <span class=\"tag_more\">+{{ hiddenCount }}</span>\r\n @if(openDropdown){\r\n <div\r\n class=\"tag_dropdown\"\r\n id=\"container_scroll\"\r\n adaptivePosition\r\n [trigger]=\"tagTrigger\"\r\n [matchWidth]=\"false\"\r\n >\r\n @for(tag of allTags; track $index){\r\n <div class=\"{{ 'dropdown_item' + ' ' + tag.class }}\">\r\n {{ tag.tagValue }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n }\r\n</div>\r\n}\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.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}.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:calc(12.5rem / 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:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .tag_chip{white-space:nowrap;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip .circle{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;background-color:var(--neutral-500)}.tag_wrapper .tag_chip .circle.bg_error{background-color:var(--red-700)}.tag_wrapper .tag_chip .circle.bg_pending{background-color:var(--yellow-700)}.tag_wrapper .tag_chip .circle.bg_active{background-color:var(--green-600)}.tag_wrapper .tag_chip .circle.bg_info{background-color:var(--blue-700)}.tag_wrapper .tag_chip .suffix{order:1}.tag_wrapper .tag_chip .icon{max-width:calc(1.3333333333rem / var(--scale));max-height:calc(1.3333333333rem / var(--scale))}.tag_wrapper .hidden_list{display:flex}.tag_wrapper .hidden_list .tag_more{cursor:pointer;background-color:var(--neutral-50)}.tag_wrapper .hidden_list .tag_dropdown{position:relative;top:100%;left:0;max-width:calc(15rem / var(--scale));min-width:calc(10rem / var(--scale));max-height:calc(18.3333333333rem / var(--scale));overflow:auto;overflow-x:hidden;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) var(--box-shadow);z-index:1;padding:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tag_wrapper .hidden_list .tag_dropdown .dropdown_item{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));width:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip.active,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.active{background-color:var(--green-100);border-color:var(--green-200);color:var(--green-700)}.tag_wrapper .tag_chip.pending,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.pending{background-color:var(--yellow-100);border-color:var(--yellow-300);color:var(--yellow-700)}.tag_wrapper .tag_chip.error,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.error{background-color:var(--red-100);border-color:var(--red-300);color:var(--red-700)}.tag_wrapper .tag_chip.info,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.info{background-color:var(--blue-100);border-color:var(--blue-300);color:var(--blue-700)}.tag_wrapper .tag_chip.disable,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.disable{background-color:var(--neutral-50);border-color:var(--neutral-300);color:var(--neutral-400);cursor:not-allowed}\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" }] });
|
|
2405
2423
|
}
|
|
2406
2424
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonRendererComponent, decorators: [{
|
|
2407
2425
|
type: Component,
|
|
2408
|
-
args: [{ selector: 'lib-common-renderer', imports: [OutsideClickDirective, AdaptivePositionDirective, CommonModule, AddClassPipe], template: "<!-- Switch -->\r\n@if(type===\"switch\"){\r\n<div class=\"table_switch_wrapper\">\r\n <label class=\"switch\">\r\n <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n}\r\n\r\n<!-- Action Menu -->\r\n\r\n@if(type==='action-menu'){\r\n<div class=\"action-menu\">\r\n <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\r\n <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\r\n </button>\r\n\r\n @if(openActionMenu){\r\n <div\r\n class=\"menu\"\r\n appOutsideClick\r\n (clickOutside)=\"clickOutside($event)\"\r\n adaptivePosition\r\n [trigger]=\"tagTrigger\"\r\n [isAction]=\"true\"\r\n [matchWidth]=\"false\"\r\n >\r\n <div class=\"item_wrapper\" id=\"container_scroll\">\r\n @for(act of actions; track $index){\r\n <div\r\n class=\"{{ 'menu_item' + ' ' + act.class }}\"\r\n [ngClass]=\"{ disabled_item: act.disabled }\"\r\n (click)=\"onActionClick(act)\"\r\n >\r\n <img src=\"images/{{ act.icon }}.svg\" />\r\n <span>{{ act.label }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n}\r\n\r\n<!-- Tags -->\r\n\r\n@if(type === 'tag'){\r\n<div\r\n class=\"tag_wrapper\"\r\n (mouseover)=\"toggleDropdown($event)\"\r\n (mouseout)=\"closeDropdown($event)\"\r\n #tagTrigger\r\n>\r\n @for(tag of visibleTags; track $index){\r\n <span\r\n class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\r\n [ngClass]=\"tag.tagValue | addClass : params.cellParams\"\r\n >{{ tag.tagValue }}</span\r\n >\r\n } @if(hiddenCount > 0){\r\n <div class=\"hidden_list\">\r\n <span class=\"tag_more\">+{{ hiddenCount }}</span>\r\n @if(openDropdown){\r\n <div\r\n class=\"tag_dropdown\"\r\n id=\"container_scroll\"\r\n adaptivePosition\r\n [trigger]=\"tagTrigger\"\r\n [matchWidth]=\"false\"\r\n >\r\n @for(tag of allTags; track $index){\r\n <div class=\"{{ 'dropdown_item' + ' ' + tag.class }}\">\r\n {{ tag.tagValue }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n }\r\n</div>\r\n}\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.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}.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:calc(12.5rem / 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:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .tag_chip{white-space:nowrap}.tag_wrapper .hidden_list{display:flex}.tag_wrapper .hidden_list .tag_more{cursor:pointer}.tag_wrapper .hidden_list .tag_dropdown{position:relative;top:100%;left:0;max-width:calc(27.75rem / var(--scale));width:calc(27.75rem / var(--scale));max-height:calc(15.8333333333rem / var(--scale));overflow:auto;overflow-x:hidden;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) var(--box-shadow);z-index:1;padding:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:\"\";justify-content:\"\";align-items:\"\";flex-wrap:wrap;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}\n"] }]
|
|
2426
|
+
args: [{ selector: 'lib-common-renderer', imports: [OutsideClickDirective, AdaptivePositionDirective, CommonModule, AddClassPipe], template: "<!-- Switch -->\r\n@if(type===\"switch\"){\r\n<div class=\"table_switch_wrapper\">\r\n <label class=\"switch\">\r\n <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n}\r\n\r\n<!-- Action Menu -->\r\n\r\n@if(type==='action-menu'){\r\n<div class=\"action-menu\">\r\n <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\r\n <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\r\n </button>\r\n\r\n @if(openActionMenu){\r\n <div\r\n class=\"menu\"\r\n appOutsideClick\r\n (clickOutside)=\"clickOutside($event)\"\r\n adaptivePosition\r\n [trigger]=\"tagTrigger\"\r\n [isAction]=\"true\"\r\n [matchWidth]=\"false\"\r\n >\r\n <div class=\"item_wrapper\" id=\"container_scroll\">\r\n @for(act of actions; track $index){\r\n <div\r\n class=\"{{ 'menu_item' + ' ' + act.class }}\"\r\n [ngClass]=\"{ disabled_item: act.disabled }\"\r\n (click)=\"onActionClick(act)\"\r\n >\r\n <img src=\"images/{{ act.icon }}.svg\" />\r\n <span>{{ act.label }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n}\r\n\r\n<!-- Tags -->\r\n\r\n@if(type === 'tag'){\r\n<div\r\n class=\"tag_wrapper\"\r\n (mouseover)=\"toggleDropdown($event)\"\r\n (mouseout)=\"closeDropdown($event)\"\r\n #tagTrigger\r\n>\r\n @for(tag of visibleTags; track $index){\r\n <span\r\n class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\r\n [ngClass]=\"tag.tagValue | addClass : params.cellParams\"\r\n >\r\n <!-- <span class=\"circle\"></span>\r\n <img src=\"images/home.svg\" alt=\"\" class=\"icon\" /> -->\r\n {{ tag.tagValue }}</span\r\n >\r\n } @if(hiddenCount > 0){\r\n <div class=\"hidden_list\">\r\n <span class=\"tag_more\">+{{ hiddenCount }}</span>\r\n @if(openDropdown){\r\n <div\r\n class=\"tag_dropdown\"\r\n id=\"container_scroll\"\r\n adaptivePosition\r\n [trigger]=\"tagTrigger\"\r\n [matchWidth]=\"false\"\r\n >\r\n @for(tag of allTags; track $index){\r\n <div class=\"{{ 'dropdown_item' + ' ' + tag.class }}\">\r\n {{ tag.tagValue }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n }\r\n</div>\r\n}\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox]:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.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}.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:calc(12.5rem / 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:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .tag_chip{white-space:nowrap;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip .circle{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;background-color:var(--neutral-500)}.tag_wrapper .tag_chip .circle.bg_error{background-color:var(--red-700)}.tag_wrapper .tag_chip .circle.bg_pending{background-color:var(--yellow-700)}.tag_wrapper .tag_chip .circle.bg_active{background-color:var(--green-600)}.tag_wrapper .tag_chip .circle.bg_info{background-color:var(--blue-700)}.tag_wrapper .tag_chip .suffix{order:1}.tag_wrapper .tag_chip .icon{max-width:calc(1.3333333333rem / var(--scale));max-height:calc(1.3333333333rem / var(--scale))}.tag_wrapper .hidden_list{display:flex}.tag_wrapper .hidden_list .tag_more{cursor:pointer;background-color:var(--neutral-50)}.tag_wrapper .hidden_list .tag_dropdown{position:relative;top:100%;left:0;max-width:calc(15rem / var(--scale));min-width:calc(10rem / var(--scale));max-height:calc(18.3333333333rem / var(--scale));overflow:auto;overflow-x:hidden;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) var(--box-shadow);z-index:1;padding:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tag_wrapper .hidden_list .tag_dropdown .dropdown_item{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));width:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip.active,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.active{background-color:var(--green-100);border-color:var(--green-200);color:var(--green-700)}.tag_wrapper .tag_chip.pending,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.pending{background-color:var(--yellow-100);border-color:var(--yellow-300);color:var(--yellow-700)}.tag_wrapper .tag_chip.error,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.error{background-color:var(--red-100);border-color:var(--red-300);color:var(--red-700)}.tag_wrapper .tag_chip.info,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.info{background-color:var(--blue-100);border-color:var(--blue-300);color:var(--blue-700)}.tag_wrapper .tag_chip.disable,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.disable{background-color:var(--neutral-50);border-color:var(--neutral-300);color:var(--neutral-400);cursor:not-allowed}\n"] }]
|
|
2409
2427
|
}] });
|
|
2410
2428
|
|
|
2411
2429
|
/*
|