tango-app-ui-manage-settings 3.0.60-dev → 3.0.62-dev

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.
@@ -3599,11 +3599,11 @@ class TicketConfigurationComponent {
3599
3599
  this.apiService.clientFormData.next({ value: this.ticketConfigurationForm.value, type: 'submit', form: 'ticket-configuration' });
3600
3600
  }
3601
3601
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TicketConfigurationComponent, deps: [{ token: i1$1.FormBuilder }, { token: ClientApiService }, { token: i3.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
3602
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TicketConfigurationComponent, selector: "lib-ticket-configuration", ngImport: i0, template: "<form [formGroup]=\"ticketConfigurationForm\">\r\n <div class=\"row\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \" >\r\n <div *ngIf=\"ticketConfigurationForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button\r\n (click)=\"ticketConfigurationForm.disabled ? ticketConfigurationForm.enable() : ticketConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"col-12\">\r\n <div class=\"row\">\r\n <div class=\"col-12\">\r\n <div class=\"sub-header mb-7\">Installation</div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Auto Re-Assign Installation tickets in days</div>\r\n <!-- <div class=\"sub-heading\">Trigger an ticket, if the issue is not resolved or in progress\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"installationReAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"rcaTicketAssign\" ></lib-reactive-select>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <label for=\"installationReAssign\" class=\"form-label\">Auto Re-Assign Installation tickets in days\r\n <span class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('installationReAssign')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"installationReAssign\"\r\n class=\"form-control inc-dec-input\" id=\"installationReAssign\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Infra</div>\r\n </div>\r\n <!-- <div class=\"col-12 mb-5\">\r\n <label for=\"brandName\" class=\"form-label\">To whom should this alert be sent? <span\r\n class=\"alert-required\"></span></label>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check me-12\">\r\n <input formControlName=\"sendToAdmin\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"sendToAdmin\">\r\n <label class=\"form-check-label\" for=\"sendToAdmin\">\r\n Admin\r\n </label>\r\n </div>\r\n <div class=\"form-check\">\r\n <input formControlName=\"sendToUser\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n User\r\n </label>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"downTimeType\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"downTimeType\" [label]=\"'Downtime Type'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"infraDownTime\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" [label]=\"'Downtime'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label for=\"MinFilesCount\" class=\"form-label\">Files <span class=\"alert-required\"></span></label>\r\n <input type=\"number\" formControlName=\"MinFilesCount\" class=\"form-control\" id=\"MinFilesCount\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">RCA Ticket</div>\r\n <div class=\"sub-heading\">Set an alert, if there is no response from the store </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Refresh Ticket Alert</div>\r\n <div class=\"sub-heading\">Trigger an ticket, if the issue is not resolved or in progress\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"rcaTicketAssign\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Status Check Alert</div>\r\n <div class=\"sub-heading\">An alert will be sent to the store employee so they can confirm\r\n whether the problem has been fixed.</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Data Mismatch (High Count)</div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <label for=\"accuracyPercentage\" class=\"form-label\">Accuracy Percentage less than <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <input min=\"0\" max=\"100\" type=\"number\" formControlName=\"accuracyPercentage\"\r\n class=\"form-control \" id=\"accuracyPercentage\" autocomplete=\"off\">\r\n <svg class=\"inc\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.666 4.24967L3.33268 13.583M5.99935 5.24967C5.99935 6.17015 5.25316 6.91634 4.33268 6.91634C3.41221 6.91634 2.66602 6.17015 2.66602 5.24967C2.66602 4.3292 3.41221 3.58301 4.33268 3.58301C5.25316 3.58301 5.99935 4.3292 5.99935 5.24967ZM13.3327 12.583C13.3327 13.5035 12.5865 14.2497 11.666 14.2497C10.7455 14.2497 9.99935 13.5035 9.99935 12.583C9.99935 11.6625 10.7455 10.9163 11.666 10.9163C12.5865 10.9163 13.3327 11.6625 13.3327 12.583Z\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <label for=\"reTrain\" class=\"form-label\">Sent to Re-training for (in days) <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"reTrain\" class=\"form-control inc-dec-input\"\r\n id=\"reTrain\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value < 12 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"ticketConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[disabled],select[disabled],textarea[disabled],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.footer-seperator{border-top:1px solid #EAECF0}.inc-dec-input{padding-right:30px;padding-left:30px;text-align:center}.inc{height:100%;position:absolute;right:14px;top:0}.dec{height:100%;position:absolute;left:14px;top:0}.sub-header{color:var(--Black, #101828);font-family:Inter;font-size:18px;font-weight:500;line-height:28px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;width:100%}.custom-input-container .main-heading{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container .sub-heading{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px}.custom-input-container .form-select{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);box-shadow:0 1px 2px #1018280d;width:134px}.custom-input-container .form-select[disabled]{background-color:var(--White, #FFF)!important;border:1px solid var(--Gray-200, #EAECF0)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-300, #D0D5DD)!important;font-family:Inter;font-size:14px;font-weight:600;line-height:20px}.custom-input-container .form-check-input{height:16px;width:16px;border-radius:50%;border:1px solid var(--Gray-300, #D0D5DD)}.custom-input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABJSURBVHgBvc1RCQAgDEXRRTCCkYxiA21gJRsYwSjzgQxENtjXHtwfPTCi0DFzRsWDNt9lD+rymNBCzUQPlI+hIuOUjj48UaWQHcH9cjH96UPaAAAAAElFTkSuQmCC);border:1px solid var(--Primary-600, #00A3FF);background-color:var(--Primary-600, #00A3FF)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
3602
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TicketConfigurationComponent, selector: "lib-ticket-configuration", ngImport: i0, template: "<form [formGroup]=\"ticketConfigurationForm\">\r\n <div class=\"row\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \" >\r\n <div *ngIf=\"ticketConfigurationForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button\r\n (click)=\"ticketConfigurationForm.disabled ? ticketConfigurationForm.enable() : ticketConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"col-12\">\r\n <div class=\"row\">\r\n <div class=\"col-12\">\r\n <div class=\"sub-header mb-7\">Installation</div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Auto Re-Assign Installation tickets in days</div>\r\n <!-- <div class=\"sub-heading\">Trigger an ticket, if the issue is not resolved or in progress\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"installationReAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"rcaTicketAssign\" ></lib-reactive-select>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <label for=\"installationReAssign\" class=\"form-label\">Auto Re-Assign Installation tickets in days\r\n <span class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('installationReAssign')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"installationReAssign\"\r\n class=\"form-control inc-dec-input\" id=\"installationReAssign\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Infra</div>\r\n </div>\r\n <!-- <div class=\"col-12 mb-5\">\r\n <label for=\"brandName\" class=\"form-label\">To whom should this alert be sent? <span\r\n class=\"alert-required\"></span></label>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check me-12\">\r\n <input formControlName=\"sendToAdmin\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"sendToAdmin\">\r\n <label class=\"form-check-label\" for=\"sendToAdmin\">\r\n Admin\r\n </label>\r\n </div>\r\n <div class=\"form-check\">\r\n <input formControlName=\"sendToUser\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n User\r\n </label>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"downTimeType\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"downTimeType\" [label]=\"'Downtime Type'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"infraDownTime\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" [label]=\"'Downtime'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label for=\"MinFilesCount\" class=\"form-label\">Files <span class=\"alert-required\"></span></label>\r\n <input type=\"number\" formControlName=\"MinFilesCount\" class=\"form-control\" id=\"MinFilesCount\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">RCA Ticket</div>\r\n <div class=\"sub-heading\">Set an alert, if there is no response from the store </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Refresh Ticket Alert</div>\r\n <div class=\"sub-heading\">Trigger an ticket, if the issue is not resolved or in progress\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"refreshAlert\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"rcaTicketAssign\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Status Check Alert</div>\r\n <div class=\"sub-heading\">An alert will be sent to the store employee so they can confirm\r\n whether the problem has been fixed.</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"statusCheckAlert\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Data Mismatch (High Count)</div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <label for=\"accuracyPercentage\" class=\"form-label\">Accuracy Percentage less than <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <input min=\"0\" max=\"100\" type=\"number\" formControlName=\"accuracyPercentage\"\r\n class=\"form-control \" id=\"accuracyPercentage\" autocomplete=\"off\">\r\n <svg class=\"inc\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.666 4.24967L3.33268 13.583M5.99935 5.24967C5.99935 6.17015 5.25316 6.91634 4.33268 6.91634C3.41221 6.91634 2.66602 6.17015 2.66602 5.24967C2.66602 4.3292 3.41221 3.58301 4.33268 3.58301C5.25316 3.58301 5.99935 4.3292 5.99935 5.24967ZM13.3327 12.583C13.3327 13.5035 12.5865 14.2497 11.666 14.2497C10.7455 14.2497 9.99935 13.5035 9.99935 12.583C9.99935 11.6625 10.7455 10.9163 11.666 10.9163C12.5865 10.9163 13.3327 11.6625 13.3327 12.583Z\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <label for=\"reTrain\" class=\"form-label\">Sent to Re-training for (in days) <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"reTrain\" class=\"form-control inc-dec-input\"\r\n id=\"reTrain\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value < 12 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"ticketConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[disabled],select[disabled],textarea[disabled],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.footer-seperator{border-top:1px solid #EAECF0}.inc-dec-input{padding-right:30px;padding-left:30px;text-align:center}.inc{height:100%;position:absolute;right:14px;top:0}.dec{height:100%;position:absolute;left:14px;top:0}.sub-header{color:var(--Black, #101828);font-family:Inter;font-size:18px;font-weight:500;line-height:28px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;width:100%}.custom-input-container .main-heading{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container .sub-heading{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px}.custom-input-container .form-select{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);box-shadow:0 1px 2px #1018280d;width:134px}.custom-input-container .form-select[disabled]{background-color:var(--White, #FFF)!important;border:1px solid var(--Gray-200, #EAECF0)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-300, #D0D5DD)!important;font-family:Inter;font-size:14px;font-weight:600;line-height:20px}.custom-input-container .form-check-input{height:16px;width:16px;border-radius:50%;border:1px solid var(--Gray-300, #D0D5DD)}.custom-input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABJSURBVHgBvc1RCQAgDEXRRTCCkYxiA21gJRsYwSjzgQxENtjXHtwfPTCi0DFzRsWDNt9lD+rymNBCzUQPlI+hIuOUjj48UaWQHcH9cjH96UPaAAAAAElFTkSuQmCC);border:1px solid var(--Primary-600, #00A3FF);background-color:var(--Primary-600, #00A3FF)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
3603
3603
  }
3604
3604
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TicketConfigurationComponent, decorators: [{
3605
3605
  type: Component,
3606
- args: [{ selector: 'lib-ticket-configuration', template: "<form [formGroup]=\"ticketConfigurationForm\">\r\n <div class=\"row\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \" >\r\n <div *ngIf=\"ticketConfigurationForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button\r\n (click)=\"ticketConfigurationForm.disabled ? ticketConfigurationForm.enable() : ticketConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"col-12\">\r\n <div class=\"row\">\r\n <div class=\"col-12\">\r\n <div class=\"sub-header mb-7\">Installation</div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Auto Re-Assign Installation tickets in days</div>\r\n <!-- <div class=\"sub-heading\">Trigger an ticket, if the issue is not resolved or in progress\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"installationReAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"rcaTicketAssign\" ></lib-reactive-select>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <label for=\"installationReAssign\" class=\"form-label\">Auto Re-Assign Installation tickets in days\r\n <span class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('installationReAssign')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"installationReAssign\"\r\n class=\"form-control inc-dec-input\" id=\"installationReAssign\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Infra</div>\r\n </div>\r\n <!-- <div class=\"col-12 mb-5\">\r\n <label for=\"brandName\" class=\"form-label\">To whom should this alert be sent? <span\r\n class=\"alert-required\"></span></label>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check me-12\">\r\n <input formControlName=\"sendToAdmin\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"sendToAdmin\">\r\n <label class=\"form-check-label\" for=\"sendToAdmin\">\r\n Admin\r\n </label>\r\n </div>\r\n <div class=\"form-check\">\r\n <input formControlName=\"sendToUser\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n User\r\n </label>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"downTimeType\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"downTimeType\" [label]=\"'Downtime Type'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"infraDownTime\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" [label]=\"'Downtime'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label for=\"MinFilesCount\" class=\"form-label\">Files <span class=\"alert-required\"></span></label>\r\n <input type=\"number\" formControlName=\"MinFilesCount\" class=\"form-control\" id=\"MinFilesCount\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">RCA Ticket</div>\r\n <div class=\"sub-heading\">Set an alert, if there is no response from the store </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Refresh Ticket Alert</div>\r\n <div class=\"sub-heading\">Trigger an ticket, if the issue is not resolved or in progress\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"rcaTicketAssign\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Status Check Alert</div>\r\n <div class=\"sub-heading\">An alert will be sent to the store employee so they can confirm\r\n whether the problem has been fixed.</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Data Mismatch (High Count)</div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <label for=\"accuracyPercentage\" class=\"form-label\">Accuracy Percentage less than <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <input min=\"0\" max=\"100\" type=\"number\" formControlName=\"accuracyPercentage\"\r\n class=\"form-control \" id=\"accuracyPercentage\" autocomplete=\"off\">\r\n <svg class=\"inc\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.666 4.24967L3.33268 13.583M5.99935 5.24967C5.99935 6.17015 5.25316 6.91634 4.33268 6.91634C3.41221 6.91634 2.66602 6.17015 2.66602 5.24967C2.66602 4.3292 3.41221 3.58301 4.33268 3.58301C5.25316 3.58301 5.99935 4.3292 5.99935 5.24967ZM13.3327 12.583C13.3327 13.5035 12.5865 14.2497 11.666 14.2497C10.7455 14.2497 9.99935 13.5035 9.99935 12.583C9.99935 11.6625 10.7455 10.9163 11.666 10.9163C12.5865 10.9163 13.3327 11.6625 13.3327 12.583Z\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <label for=\"reTrain\" class=\"form-label\">Sent to Re-training for (in days) <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"reTrain\" class=\"form-control inc-dec-input\"\r\n id=\"reTrain\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value < 12 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"ticketConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[disabled],select[disabled],textarea[disabled],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.footer-seperator{border-top:1px solid #EAECF0}.inc-dec-input{padding-right:30px;padding-left:30px;text-align:center}.inc{height:100%;position:absolute;right:14px;top:0}.dec{height:100%;position:absolute;left:14px;top:0}.sub-header{color:var(--Black, #101828);font-family:Inter;font-size:18px;font-weight:500;line-height:28px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;width:100%}.custom-input-container .main-heading{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container .sub-heading{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px}.custom-input-container .form-select{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);box-shadow:0 1px 2px #1018280d;width:134px}.custom-input-container .form-select[disabled]{background-color:var(--White, #FFF)!important;border:1px solid var(--Gray-200, #EAECF0)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-300, #D0D5DD)!important;font-family:Inter;font-size:14px;font-weight:600;line-height:20px}.custom-input-container .form-check-input{height:16px;width:16px;border-radius:50%;border:1px solid var(--Gray-300, #D0D5DD)}.custom-input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABJSURBVHgBvc1RCQAgDEXRRTCCkYxiA21gJRsYwSjzgQxENtjXHtwfPTCi0DFzRsWDNt9lD+rymNBCzUQPlI+hIuOUjj48UaWQHcH9cjH96UPaAAAAAElFTkSuQmCC);border:1px solid var(--Primary-600, #00A3FF);background-color:var(--Primary-600, #00A3FF)}\n"] }]
3606
+ args: [{ selector: 'lib-ticket-configuration', template: "<form [formGroup]=\"ticketConfigurationForm\">\r\n <div class=\"row\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \" >\r\n <div *ngIf=\"ticketConfigurationForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button\r\n (click)=\"ticketConfigurationForm.disabled ? ticketConfigurationForm.enable() : ticketConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"col-12\">\r\n <div class=\"row\">\r\n <div class=\"col-12\">\r\n <div class=\"sub-header mb-7\">Installation</div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Auto Re-Assign Installation tickets in days</div>\r\n <!-- <div class=\"sub-heading\">Trigger an ticket, if the issue is not resolved or in progress\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"installationReAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"rcaTicketAssign\" ></lib-reactive-select>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <label for=\"installationReAssign\" class=\"form-label\">Auto Re-Assign Installation tickets in days\r\n <span class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('installationReAssign')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"installationReAssign\"\r\n class=\"form-control inc-dec-input\" id=\"installationReAssign\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Infra</div>\r\n </div>\r\n <!-- <div class=\"col-12 mb-5\">\r\n <label for=\"brandName\" class=\"form-label\">To whom should this alert be sent? <span\r\n class=\"alert-required\"></span></label>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check me-12\">\r\n <input formControlName=\"sendToAdmin\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"sendToAdmin\">\r\n <label class=\"form-check-label\" for=\"sendToAdmin\">\r\n Admin\r\n </label>\r\n </div>\r\n <div class=\"form-check\">\r\n <input formControlName=\"sendToUser\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n User\r\n </label>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"downTimeType\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"downTimeType\" [label]=\"'Downtime Type'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"infraDownTime\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" [label]=\"'Downtime'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label for=\"MinFilesCount\" class=\"form-label\">Files <span class=\"alert-required\"></span></label>\r\n <input type=\"number\" formControlName=\"MinFilesCount\" class=\"form-control\" id=\"MinFilesCount\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">RCA Ticket</div>\r\n <div class=\"sub-heading\">Set an alert, if there is no response from the store </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Refresh Ticket Alert</div>\r\n <div class=\"sub-heading\">Trigger an ticket, if the issue is not resolved or in progress\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"refreshAlert\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"rcaTicketAssign\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Status Check Alert</div>\r\n <div class=\"sub-heading\">An alert will be sent to the store employee so they can confirm\r\n whether the problem has been fixed.</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"statusCheckAlert\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Data Mismatch (High Count)</div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <label for=\"accuracyPercentage\" class=\"form-label\">Accuracy Percentage less than <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <input min=\"0\" max=\"100\" type=\"number\" formControlName=\"accuracyPercentage\"\r\n class=\"form-control \" id=\"accuracyPercentage\" autocomplete=\"off\">\r\n <svg class=\"inc\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.666 4.24967L3.33268 13.583M5.99935 5.24967C5.99935 6.17015 5.25316 6.91634 4.33268 6.91634C3.41221 6.91634 2.66602 6.17015 2.66602 5.24967C2.66602 4.3292 3.41221 3.58301 4.33268 3.58301C5.25316 3.58301 5.99935 4.3292 5.99935 5.24967ZM13.3327 12.583C13.3327 13.5035 12.5865 14.2497 11.666 14.2497C10.7455 14.2497 9.99935 13.5035 9.99935 12.583C9.99935 11.6625 10.7455 10.9163 11.666 10.9163C12.5865 10.9163 13.3327 11.6625 13.3327 12.583Z\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <label for=\"reTrain\" class=\"form-label\">Sent to Re-training for (in days) <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"reTrain\" class=\"form-control inc-dec-input\"\r\n id=\"reTrain\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value < 12 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"ticketConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[disabled],select[disabled],textarea[disabled],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.footer-seperator{border-top:1px solid #EAECF0}.inc-dec-input{padding-right:30px;padding-left:30px;text-align:center}.inc{height:100%;position:absolute;right:14px;top:0}.dec{height:100%;position:absolute;left:14px;top:0}.sub-header{color:var(--Black, #101828);font-family:Inter;font-size:18px;font-weight:500;line-height:28px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;width:100%}.custom-input-container .main-heading{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container .sub-heading{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px}.custom-input-container .form-select{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);box-shadow:0 1px 2px #1018280d;width:134px}.custom-input-container .form-select[disabled]{background-color:var(--White, #FFF)!important;border:1px solid var(--Gray-200, #EAECF0)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-300, #D0D5DD)!important;font-family:Inter;font-size:14px;font-weight:600;line-height:20px}.custom-input-container .form-check-input{height:16px;width:16px;border-radius:50%;border:1px solid var(--Gray-300, #D0D5DD)}.custom-input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABJSURBVHgBvc1RCQAgDEXRRTCCkYxiA21gJRsYwSjzgQxENtjXHtwfPTCi0DFzRsWDNt9lD+rymNBCzUQPlI+hIuOUjj48UaWQHcH9cjH96UPaAAAAAElFTkSuQmCC);border:1px solid var(--Primary-600, #00A3FF);background-color:var(--Primary-600, #00A3FF)}\n"] }]
3607
3607
  }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: ClientApiService }, { type: i3.GlobalStateService }] });
3608
3608
 
3609
3609
  class AddReportComponent {
@@ -5267,6 +5267,7 @@ class ActivityLogsComponent {
5267
5267
  apiService;
5268
5268
  cd;
5269
5269
  dayjs = dayjs;
5270
+ filterByStatus;
5270
5271
  onClick(event) {
5271
5272
  const target = event.target;
5272
5273
  if (!target.closest('.dropdown')) {
@@ -5328,6 +5329,37 @@ class ActivityLogsComponent {
5328
5329
  isChecked: true
5329
5330
  },
5330
5331
  ];
5332
+ dataObject = [
5333
+ { Description: 'Status Logs', Issues: [{
5334
+ text: 'Brand details',
5335
+ id: 'brandDetails',
5336
+ },
5337
+ {
5338
+ text: 'Configuration',
5339
+ id: 'configuration',
5340
+ },
5341
+ {
5342
+ text: 'Documents',
5343
+ id: 'documents',
5344
+ },
5345
+ {
5346
+ text: 'Stores',
5347
+ id: 'stores',
5348
+ },
5349
+ {
5350
+ text: 'Groups',
5351
+ id: 'groups',
5352
+ },
5353
+ {
5354
+ text: 'Users',
5355
+ id: 'users',
5356
+ },
5357
+ {
5358
+ text: 'Subscription',
5359
+ id: 'subscription'
5360
+ },
5361
+ ] }
5362
+ ];
5331
5363
  constructor(apiService, cd) {
5332
5364
  this.apiService = apiService;
5333
5365
  this.cd = cd;
@@ -5348,7 +5380,8 @@ class ActivityLogsComponent {
5348
5380
  let filters = {
5349
5381
  limit: this.pageSize,
5350
5382
  offset: this.currentPage,
5351
- clientId: this.clientId
5383
+ clientId: this.clientId,
5384
+ logTypeFilters: this.filterByStatus,
5352
5385
  };
5353
5386
  if (this.filterStartDate) {
5354
5387
  filters.startDate = this.filterStartDate;
@@ -5356,9 +5389,9 @@ class ActivityLogsComponent {
5356
5389
  if (this.filterEndDate) {
5357
5390
  filters.endDate = this.filterEndDate;
5358
5391
  }
5359
- if (this.getCheckedIds(this.filters)?.length) {
5360
- filters.logTypeFilters = this.getCheckedIds(this.filters);
5361
- }
5392
+ // if(this.getCheckedIds(this.filters)?.length){
5393
+ // filters.logTypeFilters = this.getCheckedIds(this.filters)
5394
+ // }
5362
5395
  this.apiService.getActivityLogs(filters).subscribe({
5363
5396
  next: (e) => {
5364
5397
  this.pageState$.next('loaded');
@@ -5441,12 +5474,35 @@ class ActivityLogsComponent {
5441
5474
  this.showFilters = false;
5442
5475
  this.getActivityLogs();
5443
5476
  }
5477
+ applyFilters(event) {
5478
+ if (event?.length) {
5479
+ event.forEach((element) => {
5480
+ if (element.Description === "Status Logs") {
5481
+ this.filterByStatus = element.Issues.map((val) => val?.id);
5482
+ }
5483
+ });
5484
+ }
5485
+ this.currentPage = 1;
5486
+ let filters = {
5487
+ limit: this.pageSize,
5488
+ offset: this.currentPage,
5489
+ clientId: this.clientId,
5490
+ logTypeFilters: this.filterByStatus,
5491
+ };
5492
+ if (this.filterStartDate) {
5493
+ filters.startDate = this.filterStartDate;
5494
+ }
5495
+ if (this.filterEndDate) {
5496
+ filters.endDate = this.filterEndDate;
5497
+ }
5498
+ this.getActivityLogs();
5499
+ }
5444
5500
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ActivityLogsComponent, deps: [{ token: ClientApiService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
5445
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ActivityLogsComponent, selector: "lib-activity-logs", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"activity-card\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n <div class=\"header\">Activity Logs</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"d-flex align-items-center position-relative me-5\">\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div>\r\n <div class=\"multi-select-dropdown\" >\r\n <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n </button> \r\n <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n <div>\r\n <ul>\r\n <li >\r\n <div class=\"form-check\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <label class=\"form-check-label\" for=\"selectAll\">\r\n All Logs\r\n </label>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let filter of filters\" >\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n {{filter.label}}\r\n </label>\r\n </div>\r\n </li>\r\n \r\n </ul> \r\n </div>\r\n <div >\r\n <div class=\" w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end m-2\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"applyFilter()\" >Apply</a>\r\n </div>\r\n </div>\r\n \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"logList?.length\" >\r\n <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n <div class=\"d-flex me-10\">\r\n <div class=\"line me-4\"></div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n </div>\r\n <div class=\"sub\">{{arrayToString(item?.changes)}} <span *ngIf=\"item?.eventType\">{{item?.eventType + 'd'}}</span></div>\r\n <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"chip\">\r\n {{camelCaseToWords(item?.logType)}}\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div> \r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!logList?.length\">\r\n <div class=\"d-flex align-items-center justify-content-center\" >\r\n <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\"> \r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.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: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
5501
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ActivityLogsComponent, selector: "lib-activity-logs", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"activity-card\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n <div class=\"header\">Activity Logs</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"d-flex align-items-center position-relative me-5\">\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <lib-filters [dataObject]=\"dataObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n <!-- <div>\r\n <div class=\"multi-select-dropdown\" >\r\n <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n </button> \r\n <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n <div>\r\n <ul>\r\n <li >\r\n <div class=\"form-check\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <label class=\"form-check-label\" for=\"selectAll\">\r\n All Logs\r\n </label>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let filter of filters\" >\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n {{filter.label}}\r\n </label>\r\n </div>\r\n </li>\r\n \r\n </ul> \r\n </div>\r\n <div >\r\n <div class=\" w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end m-2\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"applyFilter()\" >Apply</a>\r\n </div>\r\n </div>\r\n \r\n </div> \r\n </div>\r\n \r\n </div> -->\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"logList?.length\" >\r\n <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n <div class=\"d-flex me-10\">\r\n <div class=\"line me-4\"></div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n </div>\r\n <div class=\"sub\">{{arrayToString(item?.changes)}} <span *ngIf=\"item?.eventType\">{{item?.eventType + 'd'}}</span></div>\r\n <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"chip\">\r\n {{camelCaseToWords(item?.logType)}}\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div> \r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!logList?.length\">\r\n <div class=\"d-flex align-items-center justify-content-center\" >\r\n <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\"> \r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4$2.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
5446
5502
  }
5447
5503
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ActivityLogsComponent, decorators: [{
5448
5504
  type: Component,
5449
- args: [{ selector: 'lib-activity-logs', template: "<div class=\"activity-card\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n <div class=\"header\">Activity Logs</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"d-flex align-items-center position-relative me-5\">\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div>\r\n <div class=\"multi-select-dropdown\" >\r\n <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n </button> \r\n <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n <div>\r\n <ul>\r\n <li >\r\n <div class=\"form-check\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <label class=\"form-check-label\" for=\"selectAll\">\r\n All Logs\r\n </label>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let filter of filters\" >\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n {{filter.label}}\r\n </label>\r\n </div>\r\n </li>\r\n \r\n </ul> \r\n </div>\r\n <div >\r\n <div class=\" w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end m-2\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"applyFilter()\" >Apply</a>\r\n </div>\r\n </div>\r\n \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"logList?.length\" >\r\n <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n <div class=\"d-flex me-10\">\r\n <div class=\"line me-4\"></div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n </div>\r\n <div class=\"sub\">{{arrayToString(item?.changes)}} <span *ngIf=\"item?.eventType\">{{item?.eventType + 'd'}}</span></div>\r\n <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"chip\">\r\n {{camelCaseToWords(item?.logType)}}\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div> \r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!logList?.length\">\r\n <div class=\"d-flex align-items-center justify-content-center\" >\r\n <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\"> \r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\n"] }]
5505
+ args: [{ selector: 'lib-activity-logs', template: "<div class=\"activity-card\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n <div class=\"header\">Activity Logs</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"d-flex align-items-center position-relative me-5\">\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <lib-filters [dataObject]=\"dataObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n <!-- <div>\r\n <div class=\"multi-select-dropdown\" >\r\n <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n </button> \r\n <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n <div>\r\n <ul>\r\n <li >\r\n <div class=\"form-check\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <label class=\"form-check-label\" for=\"selectAll\">\r\n All Logs\r\n </label>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let filter of filters\" >\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n {{filter.label}}\r\n </label>\r\n </div>\r\n </li>\r\n \r\n </ul> \r\n </div>\r\n <div >\r\n <div class=\" w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end m-2\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"applyFilter()\" >Apply</a>\r\n </div>\r\n </div>\r\n \r\n </div> \r\n </div>\r\n \r\n </div> -->\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"logList?.length\" >\r\n <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n <div class=\"d-flex me-10\">\r\n <div class=\"line me-4\"></div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n </div>\r\n <div class=\"sub\">{{arrayToString(item?.changes)}} <span *ngIf=\"item?.eventType\">{{item?.eventType + 'd'}}</span></div>\r\n <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"chip\">\r\n {{camelCaseToWords(item?.logType)}}\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div> \r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!logList?.length\">\r\n <div class=\"d-flex align-items-center justify-content-center\" >\r\n <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\"> \r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\n"] }]
5450
5506
  }], ctorParameters: () => [{ type: ClientApiService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
5451
5507
  type: HostListener,
5452
5508
  args: ['document:click', ['$event']]