tango-app-ui-analyse-trax 3.7.30 → 3.7.31-prod

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/esm2022/lib/components/checklist-configure/checklist-configure.component.mjs +2 -2
  2. package/esm2022/lib/components/eye-test-audit/eye-test/eye-test.component.mjs +6 -6
  3. package/fesm2022/tango-app-ui-analyse-trax.mjs +7 -7
  4. package/fesm2022/tango-app-ui-analyse-trax.mjs.map +1 -1
  5. package/package.json +1 -1
package/esm2022/lib/components/checklist-configure/checklist-configure.component.mjs CHANGED
@@ -3021,11 +3021,11 @@ export class ChecklistConfigureComponent {
3021
3021
  }
3022
3022
  }
3023
3023
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChecklistConfigureComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.NgbModal }, { token: i3.TraxService }, { token: i4.ToastService }, { token: i5.GlobalStateService }, { token: i5.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
3024
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChecklistConfigureComponent, selector: "lib-checklist-configure", host: { listeners: { "document:click": "clickOutside($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["file"], descendants: true }, { propertyName: "fileInput1", first: true, predicate: ["file1"], descendants: true }, { propertyName: "bulkupload", first: true, predicate: ["bulkupload"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }, { propertyName: "confirmUser", first: true, predicate: ["confirmUser"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"loading\" class=\"card 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>\r\n<div *ngIf=\"!loading\">\r\n <div class=\"card\">\r\n <ng-container>\r\n <div class=\"card-header border-0 pt-3 pb-3\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-9\">\r\n <div class=\"align-items-center\">\r\n <div *ngIf=\"!disabledQuestion&&type === 'custom'\"\r\n [routerLink]=\"'/manage/trax/createChecklist'\" [queryParams]=\"{checklistId: checklistId}\"\r\n class=\"btn btn-sm btn-outline me-5 px-3 py-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M15.8332 10.0003H4.1665M4.1665 10.0003L9.99984 15.8337M4.1665 10.0003L9.99984 4.16699\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <div *ngIf=\"type === 'custom'\" class=\"flex-column\">\r\n <div class=\"editablecontent mb-4 w-100\"><input type=\"text\" class=\"checklist plain-input\"\r\n placeholder=\"Enter Checklist Name\"\r\n [value]=\"configData?.checkListDetails?.checkListName\" readonly></div>\r\n <div class=\"editablecontent w-100\"><input type=\"text\"\r\n class=\"checklistDescription plain-input\" #checklistDescription\r\n placeholder=\"Enter Checklist Description\"\r\n [value]=\"configData?.checkListDetails?.checkListDescription\" readonly></div>\r\n </div>\r\n <div *ngIf=\"type !== 'custom'\" class=\"flex-column\">\r\n <div class=\"editablecontent mb-4 w-100\"><input type=\"text\" class=\"checklist plain-input\"\r\n placeholder=\"Enter Checklist Name\" [value]=\"configData?.checkListName\" readonly>\r\n </div>\r\n <div class=\"editablecontent w-100\"><input type=\"text\"\r\n class=\"checklistDescription plain-input\" #checklistDescription\r\n placeholder=\"Enter Checklist Description\"\r\n [value]=\"configData?.checkListDescription\" readonly></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <div class=\"d-flex my-6 justify-content-end\">\r\n <div>\r\n <button type=\"button\"\r\n class=\"btn btn-primary btn-md py-4 mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n (click)=\"type === 'custom' ? publish() : publishAI()\"\r\n [disabled]=\"disabledPublish || disableBtn\"><span class=\"ms-2\">Publish</span>\r\n </button>\r\n </div>\r\n <div>\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n (click)=\"type ==='custom' ? savedraft() : saveDraftAI()\"\r\n [disabled]=\"disableBtn\"><span class=\"ms-2\">Save as Draft</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"row checkconfigcont mt-2\" *ngIf=\"configData\">\r\n <div class=\"col-xl-3 leftcard\">\r\n <div class=\"card px-7 py-7\">\r\n <div class=\"section-leftheading1\">{{configData?.checkListDetails?.checkListName}}</div>\r\n <div *ngIf=\"obj.checkListId\" class=\"section-left\">\r\n <div *ngFor=\"let section of sections; let i=index;\">\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\">\r\n <div class=\"fs-4 fw-bold section\">{{section.name}}</div>\r\n <hr class=\"mx-2\">\r\n <svg (click)=\"accordian(i)\" [ngClass]=\"{'rotate' : show !== i}\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"35\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"show===i\" class=\"question-left\">\r\n <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n\r\n <div *ngFor=\"let question of section.questions;let j=index;\" class=\"my-2 q-btn\" cdkDrag>\r\n\r\n <div class=\"editablecontent\">\r\n {{question.qname}}\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <h3 class=\"card-title align-items-start flex-column \">\r\n <div class=\"card-label section-leftheading1 mt-6\">Schedule</div>\r\n\r\n <!-- <div *ngIf=\"type === 'mobileusagedetection' || type === 'storeopenandclose'\" class=\"mt-4 mx-2 sub\"><span\r\n class=\" mx-4\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"mt-2\">{{configData.checkListDetails.scheduleStartTime}} to\r\n {{configData.checkListDetails.scheduleEndTime}}</span>\r\n </div> -->\r\n\r\n <div *ngIf=\"['custom'].includes(type)\">\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"23\" height=\"23\"\r\n viewBox=\"0 0 23 23\" fill=\"none\">\r\n <path\r\n d=\"M8.41448 4.52303C8.69518 4.80371 8.69518 5.2588 8.41448 5.53948L5.53948 8.41448C5.2588 8.69518 4.80371 8.69518 4.52303 8.41448L3.08553 6.97698C2.80482 6.6963 2.80482 6.24121 3.08553 5.96053C3.36621 5.67982 3.8213 5.67982 4.10198 5.96053L5.03125 6.88978L7.39803 4.52303C7.67871 4.24232 8.1338 4.24232 8.41448 4.52303Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M8.41448 11.7105C8.69518 11.9912 8.69518 12.4463 8.41448 12.727L5.53948 15.602C5.2588 15.8826 4.80371 15.8826 4.52303 15.602L3.08553 14.1645C2.80482 13.8838 2.80482 13.4287 3.08553 13.1479C3.36621 12.8673 3.8213 12.8673 4.10198 13.1479L5.03125 14.0773L7.39803 11.7105C7.67871 11.4299 8.1338 11.4299 8.41448 11.7105Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M10.0625 6.46875C10.0625 6.0718 10.3844 5.75 10.7812 5.75H15.0938C15.4906 5.75 15.8125 6.0718 15.8125 6.46875C15.8125 6.8657 15.4906 7.1875 15.0938 7.1875H10.7812C10.3844 7.1875 10.0625 6.8657 10.0625 6.46875Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M3.59375 0C1.60898 0 0 1.60898 0 3.59375V16.5312C0 18.516 1.60898 20.125 3.59375 20.125H9.48708C9.25429 19.6696 9.06436 19.1886 8.92261 18.6875H3.59375C2.40288 18.6875 1.4375 17.7221 1.4375 16.5312V3.59375C1.4375 2.40288 2.40288 1.4375 3.59375 1.4375H16.5312C17.7221 1.4375 18.6875 2.40288 18.6875 3.59375V8.92261C19.1886 9.06436 19.6696 9.25429 20.125 9.48708V3.59375C20.125 1.60898 18.516 0 16.5312 0H3.59375Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M16.5313 23C20.1039 23 23 20.1039 23 16.5313C23 12.9586 20.1039 10.0625 16.5313 10.0625C12.9586 10.0625 10.0625 12.9586 10.0625 16.5313C10.0625 20.1039 12.9586 23 16.5313 23ZM16.5313 12.9375C16.9281 12.9375 17.25 13.2594 17.25 13.6563V15.8125H19.4063C19.8031 15.8125 20.125 16.1344 20.125 16.5313C20.125 16.9281 19.8031 17.25 19.4063 17.25H17.25V19.4063C17.25 19.8031 16.9281 20.125 16.5313 20.125C16.1344 20.125 15.8125 19.8031 15.8125 19.4063V17.25H13.6563C13.2594 17.25 12.9375 16.9281 12.9375 16.5313C12.9375 16.1344 13.2594 15.8125 13.6563 15.8125H15.8125V13.6563C15.8125 13.2594 16.1344 12.9375 16.5313 12.9375Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\">{{configData?.checkListDetails?.schedule === 'onetime' ?\r\n 'One-time' : (configData?.checkListDetails?.schedule | titlecase)}}\r\n </span></div>\r\n\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"mt-2 ms-2\">{{configData?.checkListDetails?.scheduleStartTime ?\r\n configData?.checkListDetails?.scheduleStartTime.substr(-8) : configData?.openTime}} to\r\n {{configData?.checkListDetails?.scheduleEndTime ?\r\n configData?.checkListDetails?.scheduleEndTime.substr(-8) :\r\n configData?.closeTime}}</span>\r\n </div>\r\n\r\n <div class=\"mt-4 mx-2 sub\" *ngIf=\"showRangeValue\"><span><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M16 2V6M8 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span><span\r\n class=\"mt-2 ms-2\"><span>{{configData?.checkListDetails?.configStartDate}}</span><span\r\n *ngIf=\"configData?.checkListDetails?.configEndDate !== '' && configData?.checkListDetails?.configEndDate !== null\">\r\n to {{configData?.checkListDetails?.configEndDate}}</span></span></div>\r\n\r\n <div class=\"card-label section-leftheading1 mt-6\">Assign</div>\r\n\r\n <div *ngIf=\"['custom'].includes(type)\">\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8M9 2H15C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6H9C8.44772 6 8 5.55228 8 5V3C8 2.44772 8.44772 2 9 2Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"> {{coverage | titlecase}}s\r\n </span></div>\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88332L3.02401 6.98632C2.30358 8.25521 3.06101 9.87908 4.46464 10.0659C4.58627 10.0808 4.70112 10.0889 4.8145 10.0889C5.55255 10.0889 6.20523 9.77192 6.65953 9.2788L7.21286 8.67818L7.76432 9.28052C8.21367 9.77135 8.8652 10.0889 9.60776 10.0889C10.3471 10.0889 11.0022 9.771 11.4512 9.28052L12.0044 8.67629L12.5576 9.28052C13.0066 9.771 13.6617 10.0889 14.401 10.0889C15.1404 10.0889 15.7954 9.771 16.2445 9.28052L16.7977 8.67629L17.3508 9.28052C17.7999 9.771 18.4549 10.0889 19.1943 10.0889C19.3041 10.0889 19.4223 10.0808 19.5433 10.066C20.9772 9.87131 21.7355 8.16351 20.9155 6.88382C20.9154 6.88376 20.9154 6.88371 20.9154 6.88365L18.8056 3.59392L18.8056 3.59392L18.8046 3.59246C18.7582 3.51966 18.6649 3.46387 18.5584 3.46387H5.44307C5.3365 3.46387 5.24326 3.51966 5.19681 3.59246L5.19619 3.59342L3.08995 6.88332ZM4.81818 12.7496C4.71644 12.7496 4.616 12.7465 4.5169 12.7406V16.6424V18.9639C4.5169 19.8207 5.22663 20.5353 6.11942 20.5353H17.882C18.7748 20.5353 19.4845 19.8207 19.4845 18.9639V16.6424V12.7411C19.3874 12.7466 19.2893 12.7496 19.1906 12.7496C19.0022 12.7496 18.8157 12.7395 18.632 12.7198V16.6424V17.3924H17.882H6.11942H5.36942V16.6424V12.7206C5.18866 12.7397 5.00472 12.7496 4.81818 12.7496Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span><span class=\"mt-2 ms-2\">{{assignSingle?.length + groupAssign?.length}}\r\n {{coverage}}{{(assignSingle?.length + groupAssign?.length) > 1 ? 's':''}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"col-lg-10 editques\" *ngIf=\"['custom'].includes(type) && !disabledQuestion\">\r\n <a (click)=\"saveandredirect(obj.checkListId)\"\r\n class=\"btn-outline btn-outline-dashed btn btn-light upload\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M14.6666 2.5009C14.8855 2.28203 15.1453 2.10842 15.4313 1.98996C15.7173 1.87151 16.0238 1.81055 16.3333 1.81055C16.6428 1.81055 16.9493 1.87151 17.2353 1.98996C17.5213 2.10842 17.7811 2.28203 18 2.5009C18.2188 2.71977 18.3924 2.97961 18.5109 3.26558C18.6294 3.55154 18.6903 3.85804 18.6903 4.16757C18.6903 4.4771 18.6294 4.7836 18.5109 5.06956C18.3924 5.35553 18.2188 5.61537 18 5.83424L6.74996 17.0842L2.16663 18.3342L3.41663 13.7509L14.6666 2.5009Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"uploadtext\">Edit Questions</span></a> \r\n </div> -->\r\n\r\n <div class=\"col-lg-10 editques\" *ngIf=\"!disabledQuestion&&type === 'custom'\"\r\n [routerLink]=\"'/manage/trax/createChecklist'\" [queryParams]=\"{checklistId: checklistId}\">\r\n <a class=\"btn-outline btn-outline-dashed btn btn-light upload\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M14.6666 2.5009C14.8855 2.28203 15.1453 2.10842 15.4313 1.98996C15.7173 1.87151 16.0238 1.81055 16.3333 1.81055C16.6428 1.81055 16.9493 1.87151 17.2353 1.98996C17.5213 2.10842 17.7811 2.28203 18 2.5009C18.2188 2.71977 18.3924 2.97961 18.5109 3.26558C18.6294 3.55154 18.6903 3.85804 18.6903 4.16757C18.6903 4.4771 18.6294 4.7836 18.5109 5.06956C18.3924 5.35553 18.2188 5.61537 18 5.83424L6.74996 17.0842L2.16663 18.3342L3.41663 13.7509L14.6666 2.5009Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"uploadtext\">Edit Questions</span></a>\r\n </div>\r\n </div>\r\n </h3>\r\n <!-- <div *ngIf=\"['uniformdetection','mobileusagedetection'].includes(type)\">\r\n <div class=\"card-label section-leftheading1\">Alerts</div>\r\n <div class=\"mt-6 mx-4 sub\">Email</div>\r\n </div> -->\r\n <!-- <div *ngIf=\"['uniformdetection','mobileusagedetection'].includes(type)\" class=\"mx-4 mt-4 sub\">if usage exceeds\r\n {{configData?.aiConfig?.mobileDetection?.usageExceed}}\r\n events\r\n </div> -->\r\n <!-- <div *ngIf=\"type === 'storeopenandclose'\">\r\n <div class=\"card-label section-leftheading1\">Alerts</div>\r\n <div class=\"mt-4 mx-4 sub\">Send email everyday to</div>\r\n </div> -->\r\n <div *ngIf=\"!['custom'].includes(type) && configData.aiConfig.events?.length\" class=\"\">\r\n <span *ngIf=\"configData.aiConfig.assignConfig ==='global'\" class=\"scedule-text\">Everyday at {{\r\n dayjs(configData.aiConfig.events[0]?.time,'HH:MM').format('hh:mm A') }} for\r\n {{configData.aiConfig.events[0]?.duration}} mins</span>\r\n <span *ngIf=\"configData.aiConfig.assignConfig ==='store'\" class=\"scedule-text\">Multiple times are\r\n allocated for multiple stores</span>\r\n </div>\r\n <div *ngIf=\"!['custom'].includes(type) && configData.aiConfig.alerts.users?.length\">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Alerts To</div>\r\n <span *ngFor=\"let alert of configData.aiConfig.alerts.users\"\r\n class=\"mt-2 ms-2 badge badge-light-default h-25px\"><span\r\n class=\"bg-light-primary text-primary rounded-5 me-1\">{{getInitials(alert?.name)}}</span>\r\n {{alert?.name}}</span>\r\n </div>\r\n <h3 *ngIf=\"['uniformdetection','mobileusagedetection','tvcompliance'].includes(type) && configData?.aiConfig?.mobileDetection?.detectionArea?.length\"\r\n class=\"card-title align-items-start flex-column \">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Detection Areas</div>\r\n <p>Checklist will run on this Zone</p>\r\n\r\n <div class=\"mx-2 sub\"><span\r\n *ngFor=\"let zone of configData?.aiConfig?.mobileDetection?.detectionArea\"\r\n class=\"badge mx-2 mt-4 badge-light checklistlabel h-25px fs-base\">\r\n <span\r\n class=\"bg-light-primary text-primary rounded-5 me-1\">{{getInitials(zone?.name)}}</span>\r\n <i class=\"ki-duotone ki-arrow-up checklisttext\"></i>\r\n {{zone?.name}}\r\n </span></div>\r\n </h3>\r\n <div *ngIf=\"!['custom'].includes(type)\">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Assign</div>\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8M9 2H15C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6H9C8.44772 6 8 5.55228 8 5V3C8 2.44772 8.44772 2 9 2Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"> Stores\r\n </span></div>\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88332L3.02401 6.98632C2.30358 8.25521 3.06101 9.87908 4.46464 10.0659C4.58627 10.0808 4.70112 10.0889 4.8145 10.0889C5.55255 10.0889 6.20523 9.77192 6.65953 9.2788L7.21286 8.67818L7.76432 9.28052C8.21367 9.77135 8.8652 10.0889 9.60776 10.0889C10.3471 10.0889 11.0022 9.771 11.4512 9.28052L12.0044 8.67629L12.5576 9.28052C13.0066 9.771 13.6617 10.0889 14.401 10.0889C15.1404 10.0889 15.7954 9.771 16.2445 9.28052L16.7977 8.67629L17.3508 9.28052C17.7999 9.771 18.4549 10.0889 19.1943 10.0889C19.3041 10.0889 19.4223 10.0808 19.5433 10.066C20.9772 9.87131 21.7355 8.16351 20.9155 6.88382C20.9154 6.88376 20.9154 6.88371 20.9154 6.88365L18.8056 3.59392L18.8056 3.59392L18.8046 3.59246C18.7582 3.51966 18.6649 3.46387 18.5584 3.46387H5.44307C5.3365 3.46387 5.24326 3.51966 5.19681 3.59246L5.19619 3.59342L3.08995 6.88332ZM4.81818 12.7496C4.71644 12.7496 4.616 12.7465 4.5169 12.7406V16.6424V18.9639C4.5169 19.8207 5.22663 20.5353 6.11942 20.5353H17.882C18.7748 20.5353 19.4845 19.8207 19.4845 18.9639V16.6424V12.7411C19.3874 12.7466 19.2893 12.7496 19.1906 12.7496C19.0022 12.7496 18.8157 12.7395 18.632 12.7198V16.6424V17.3924H17.882H6.11942H5.36942V16.6424V12.7206C5.18866 12.7397 5.00472 12.7496 4.81818 12.7496Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span><span class=\"mt-2 ms-2\">{{this.configData?.storeList?.length}}\r\n Store{{this.configData?.storeList?.length > 1 ? 's':''}}</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!['custom'].includes(type) && configData.approver?.length && clientId!=='452'\">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Automatic Task</div>\r\n <span *ngFor=\"let approve of configData.approver\"\r\n class=\"mt-2 ms-2 badge badge-light-default h-25px\"><span\r\n class=\"bg-light-primary text-primary rounded-5 me-1\">{{getInitials(approve?.name)}}</span>{{approve?.name}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Config div -->\r\n <div class=\"col-xl-9\">\r\n <div class=\"card bg-transparent border-0 outline-0 card-flush h-xl-100\">\r\n <div *ngIf=\"!['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"card-body bg-white rounded-4 px-7\">\r\n <div class=\"schedule\">\r\n <div>\r\n <h2 class=\"section-leftheading\">Schedule\r\n <span class=\"mx-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\">\r\n <path\r\n d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1874_66195\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </h2>\r\n <!-- <div class=\"row\" *ngIf=\"['uniformdetection'].includes(type)\">\r\n <div class=\"col-md-4 d-flex\">\r\n <span class=\"sub mt-2 mx-4\">From</span>&nbsp;&nbsp; \r\n <input class=\"form-control form-control-solid flatpickr-input w-200px mt-2\"\r\n (change)=\"updateTime('start')\" [(ngModel)]=\"startTime\"\r\n placeholder=\"Set store open time\" name=\"due_date\" type=\"time\">\r\n </div>\r\n <div class=\"col-md-4 d-flex\">\r\n <span class=\"sub mt-3 mx-4\">To</span>&nbsp;&nbsp;\r\n <input class=\"form-control form-control-solid flatpickr-input w-200px mt-2\"\r\n (change)=\"updateTime('end')\" [(ngModel)]=\"endTime\" placeholder=\"Set store open time\"\r\n name=\"due_date\" type=\"time\">\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n \r\n </div> -->\r\n <div>\r\n <div *ngIf=\"['mobileusagedetection'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Mobile detections are pre-scheduled, operate during the store's open hours\r\n based on its opening and closing times, and cannot be edited.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['storeopenandclose'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Store open and close detections operate based on the current store's opening\r\n and closing times. You can view/edit store\u2019s open and close timings in the\r\n 'Assign Stores and Cluster' section below\r\n </span>\r\n </div>\r\n <div *ngIf=\"['scrum'].includes(type)\" class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n The store's open and close times are set in the <span\r\n class=\"fw-bolder\">store configurations.</span> To make changes, please\r\n update <span routerLink=\"/manage/settings/configuration\"\r\n class=\"text-decoration-underline cursor-pointer\">click here</span>\r\n </span>\r\n </div>\r\n <div *ngIf=\"['cleaning'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n The store's open and close times are set in the <span\r\n class=\"fw-bolder\">store configurations.</span> To make changes, please\r\n update <span routerLink=\"/manage/settings/configuration\"\r\n class=\"text-decoration-underline cursor-pointer\">click here</span>\r\n </span>\r\n </div>\r\n <div *ngIf=\"['staffleftinthemiddle'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n This AI checklist will initiate detections based on the store's operational\r\n hours, starting when the store opens and stopping when it closes.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['customerunattended'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n This AI checklist will initiate detections based on the store's operational\r\n hours, starting when the store opens and stopping when it closes.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['uniformdetection'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Uniform detections are automatically scheduled based on the store's\r\n operating hours and run during open hours. These schedules cannot be\r\n modified.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['cleaning','scrum'].includes(type)\" class=\"row\">\r\n <div class=\"col-sm-6 cursor-pointer\">\r\n <div (click)=\"clickAIconfigure('global')\"\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'global'? 'configureAcite' : 'border border-1'\"\r\n class=\"d-flex align-items-center justify-content-between h-70px rounded-3 p-3\">\r\n <div class=\"d-flex\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\"\r\n viewBox=\"0 0 36 36\" fill=\"none\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.fill]=\"configData?.aiConfig?.assignConfig === 'global' ? '#EAF8FF' : '#F2F4F7'\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.stroke]=\"configData?.aiConfig?.assignConfig === 'global' ? '#DAF1FF' :'#F9FAFB'\"\r\n stroke-width=\"4\" />\r\n <g clip-path=\"url(#clip0_10179_46867)\">\r\n <path\r\n d=\"M11.75 26C11.2859 26 10.8408 25.8156 10.5126 25.4874C10.1844 25.1592 10 24.7141 10 24.25V11.75C10 10.784 10.784 10 11.75 10H20.25C21.216 10 22 10.784 22 11.75V24.25C22 24.335 21.994 24.418 21.982 24.5H24.25C24.3163 24.5 24.3799 24.4737 24.4268 24.4268C24.4737 24.3799 24.5 24.3163 24.5 24.25V18.285C24.5 18.2439 24.4899 18.2034 24.4706 18.1671C24.4512 18.1308 24.4232 18.0999 24.389 18.077L23.334 17.374C23.2521 17.3194 23.1817 17.2491 23.1269 17.1673C23.0721 17.0855 23.0339 16.9937 23.0146 16.8971C22.9953 16.8005 22.9952 16.7011 23.0143 16.6045C23.0334 16.5078 23.0714 16.4159 23.126 16.334C23.1806 16.2521 23.2509 16.1817 23.3327 16.1269C23.4145 16.0721 23.5063 16.0339 23.6029 16.0146C23.6995 15.9953 23.7989 15.9952 23.8955 16.0143C23.9922 16.0334 24.0841 16.0714 24.166 16.126L25.221 16.829C25.708 17.154 26 17.7 26 18.285V24.25C26 24.7141 25.8156 25.1592 25.4874 25.4874C25.1592 25.8156 24.7141 26 24.25 26H20.75C20.6835 25.9999 20.6173 25.9912 20.553 25.974C20.454 25.991 20.353 26 20.25 26H17.25C17.0511 26 16.8603 25.921 16.7197 25.7803C16.579 25.6397 16.5 25.4489 16.5 25.25V24H15.5V25.25C15.5 25.4489 15.421 25.6397 15.2803 25.7803C15.1397 25.921 14.9489 26 14.75 26H11.75ZM11.5 24.25C11.5 24.388 11.612 24.5 11.75 24.5H14V23.25C14 23.0511 14.079 22.8603 14.2197 22.7197C14.3603 22.579 14.5511 22.5 14.75 22.5H17.25C17.4489 22.5 17.6397 22.579 17.7803 22.7197C17.921 22.8603 18 23.0511 18 23.25V24.5H20.25C20.3163 24.5 20.3799 24.4737 20.4268 24.4268C20.4737 24.3799 20.5 24.3163 20.5 24.25V11.75C20.5 11.6837 20.4737 11.6201 20.4268 11.5732C20.3799 11.5263 20.3163 11.5 20.25 11.5H11.75C11.6837 11.5 11.6201 11.5263 11.5732 11.5732C11.5263 11.6201 11.5 11.6837 11.5 11.75V24.25ZM13.75 16H14.25C14.4489 16 14.6397 16.079 14.7803 16.2197C14.921 16.3603 15 16.5511 15 16.75C15 16.9489 14.921 17.1397 14.7803 17.2803C14.6397 17.421 14.4489 17.5 14.25 17.5H13.75C13.5511 17.5 13.3603 17.421 13.2197 17.2803C13.079 17.1397 13 16.9489 13 16.75C13 16.5511 13.079 16.3603 13.2197 16.2197C13.3603 16.079 13.5511 16 13.75 16ZM13 13.75C13 13.5511 13.079 13.3603 13.2197 13.2197C13.3603 13.079 13.5511 13 13.75 13H14.25C14.4489 13 14.6397 13.079 14.7803 13.2197C14.921 13.3603 15 13.5511 15 13.75C15 13.9489 14.921 14.1397 14.7803 14.2803C14.6397 14.421 14.4489 14.5 14.25 14.5H13.75C13.5511 14.5 13.3603 14.421 13.2197 14.2803C13.079 14.1397 13 13.9489 13 13.75ZM17 16.75C17 16.5511 17.079 16.3603 17.2197 16.2197C17.3603 16.079 17.5511 16 17.75 16H18.25C18.4489 16 18.6397 16.079 18.7803 16.2197C18.921 16.3603 19 16.5511 19 16.75C19 16.9489 18.921 17.1397 18.7803 17.2803C18.6397 17.421 18.4489 17.5 18.25 17.5H17.75C17.5511 17.5 17.3603 17.421 17.2197 17.2803C17.079 17.1397 17 16.9489 17 16.75ZM17.75 13H18.25C18.4489 13 18.6397 13.079 18.7803 13.2197C18.921 13.3603 19 13.5511 19 13.75C19 13.9489 18.921 14.1397 18.7803 14.2803C18.6397 14.421 18.4489 14.5 18.25 14.5H17.75C17.5511 14.5 17.3603 14.421 17.2197 14.2803C17.079 14.1397 17 13.9489 17 13.75C17 13.5511 17.079 13.3603 17.2197 13.2197C17.3603 13.079 17.5511 13 17.75 13ZM13 19.75C13 19.5511 13.079 19.3603 13.2197 19.2197C13.3603 19.079 13.5511 19 13.75 19H14.25C14.4489 19 14.6397 19.079 14.7803 19.2197C14.921 19.3603 15 19.5511 15 19.75C15 19.9489 14.921 20.1397 14.7803 20.2803C14.6397 20.421 14.4489 20.5 14.25 20.5H13.75C13.5511 20.5 13.3603 20.421 13.2197 20.2803C13.079 20.1397 13 19.9489 13 19.75ZM17.75 19H18.25C18.4489 19 18.6397 19.079 18.7803 19.2197C18.921 19.3603 19 19.5511 19 19.75C19 19.9489 18.921 20.1397 18.7803 20.2803C18.6397 20.421 18.4489 20.5 18.25 20.5H17.75C17.5511 20.5 17.3603 20.421 17.2197 20.2803C17.079 20.1397 17 19.9489 17 19.75C17 19.5511 17.079 19.3603 17.2197 19.2197C17.3603 19.079 17.5511 19 17.75 19Z\"\r\n [attr.fill]=\"configData?.aiConfig?.assignConfig === 'global' ? '#00A3FF' : 'black'\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_10179_46867\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"\r\n transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'global' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Global Configuration</span>\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'global' ? 'alerttext' : 'headeralign'\">Configure\r\n huddle time in a store level for all stores</span>\r\n </div>\r\n </div>\r\n <span>\r\n <input class=\"form-check-input w-15px h-15px mt-1 rounded-5\"\r\n [checked]=\"configData?.aiConfig?.assignConfig === 'global'\"\r\n type=\"checkbox\" id=\"oneTime\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-6 cursor-pointer\">\r\n <div (click)=\"clickAIconfigure('store')\"\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'store' ? 'configureAcite' : 'border border-1'\"\r\n class=\"d-flex align-items-center justify-content-between h-70px rounded-3 p-3\">\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\"\r\n viewBox=\"0 0 36 36\" fill=\"none\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.fill]=\"configData.aiConfig.assignConfig === 'store' ? '#EAF8FF':'#F2F4F7'\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.stroke]=\"configData.aiConfig.assignConfig === 'store' ? '#DAF1FF' : '#F9FAFB'\"\r\n stroke-width=\"4\" />\r\n <path\r\n d=\"M12.0574 14.5882L12.0134 14.6569C11.5331 15.5028 12.0381 16.5854 12.9738 16.7099C13.0549 16.7199 13.1315 16.7253 13.2071 16.7253C13.6991 16.7253 14.1342 16.514 14.4371 16.1852L14.806 15.7848L15.1736 16.1864C15.4732 16.5136 15.9075 16.7253 16.4026 16.7253C16.8955 16.7253 17.3322 16.5133 17.6315 16.1864L18.0003 15.7835L18.3691 16.1864C18.6685 16.5133 19.1052 16.7253 19.5981 16.7253C20.091 16.7253 20.5277 16.5133 20.827 16.1864L21.1958 15.7835L21.5646 16.1864C21.864 16.5133 22.3007 16.7253 22.7936 16.7253C22.8668 16.7253 22.9456 16.7199 23.0262 16.71C23.9822 16.5802 24.4878 15.4417 23.9411 14.5886C23.941 14.5885 23.941 14.5885 23.941 14.5884L22.5344 12.3953L22.5338 12.3943C22.5028 12.3458 22.4407 12.3086 22.3696 12.3086H13.6261C13.5551 12.3086 13.4929 12.3458 13.4619 12.3943L13.4615 12.395L12.0574 14.5882ZM11.6363 14.3186L13.0404 12.1254L11.6363 14.3186ZM13.2095 18.4991C13.1417 18.4991 13.0747 18.497 13.0087 18.4931V21.0943V22.6419C13.0087 23.2131 13.4818 23.6895 14.077 23.6895H21.9187C22.5139 23.6895 22.9871 23.2131 22.9871 22.6419V21.0943V18.4934C22.9224 18.4971 22.8569 18.4991 22.7911 18.4991C22.6655 18.4991 22.5412 18.4923 22.4187 18.4792V21.0943V21.5943H21.9187H14.077H13.577V21.0943V18.4798C13.4565 18.4925 13.3339 18.4991 13.2095 18.4991Z\"\r\n [attr.stroke]=\"configData?.aiConfig?.assignConfig === 'store' ? '#00A3FF' : '#101828'\" />\r\n </svg></span>\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'store' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Store Wise Configuration</span>\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'store' ? 'alerttext' : 'headeralign'\">Configure\r\n huddle time in a store level for all stores</span>\r\n </div>\r\n </div>\r\n <span>\r\n <input class=\"form-check-input w-15px h-15px mt-1 rounded-5\"\r\n [checked]=\"configData?.aiConfig?.assignConfig === 'store'\"\r\n type=\"checkbox\" id=\"oneTime\">\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData?.aiConfig?.assignConfig === 'store'\"\r\n class=\"col-sm-12 mt-5\">\r\n <div class=\"text-center d-flex flex-column align-items-center cursor-pointer\"\r\n (click)=\"uploadAIfiles()\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"108\" height=\"88\"\r\n viewBox=\"0 0 108 88\" fill=\"none\">\r\n <circle cx=\"30.8469\" cy=\"30.8469\" r=\"30.8469\"\r\n transform=\"matrix(-1 0 0 1 84.8516 0)\" fill=\"#EAECF0\" />\r\n <g filter=\"url(#filter0_dd_9548_99613)\">\r\n <path\r\n d=\"M53.0499 9.49219C59.4404 9.49219 65.0933 12.65 68.5334 17.4904C69.6568 17.2255 70.8283 17.0853 72.0326 17.0853C80.4197 17.0853 87.2188 23.8844 87.2188 32.2715C87.2188 40.6585 80.4197 47.4576 72.0326 47.4576L34.0671 47.4576C26.7284 47.4576 20.7793 41.5084 20.7793 34.1697C20.7793 26.831 26.7284 20.8818 34.0672 20.8818C34.5884 20.8818 35.1027 20.9118 35.6083 20.9702C38.5172 14.2187 45.2316 9.49219 53.0499 9.49219Z\"\r\n fill=\"#F9FAFB\" />\r\n <ellipse cx=\"15.1862\" cy=\"15.1862\" rx=\"15.1862\" ry=\"15.1862\"\r\n transform=\"matrix(-1 0 0 1 87.2188 17.0859)\"\r\n fill=\"url(#paint0_linear_9548_99613)\" />\r\n <circle cx=\"18.9827\" cy=\"18.9827\" r=\"18.9827\"\r\n transform=\"matrix(-1 0 0 1 72.0312 9.49219)\"\r\n fill=\"url(#paint1_linear_9548_99613)\" />\r\n <ellipse cx=\"13.2879\" cy=\"13.2879\" rx=\"13.2879\" ry=\"13.2879\"\r\n transform=\"matrix(-1 0 0 1 47.3594 20.8789)\"\r\n fill=\"url(#paint2_linear_9548_99613)\" />\r\n </g>\r\n <circle cx=\"2.96605\" cy=\"2.96605\" r=\"2.96605\"\r\n transform=\"matrix(-1 0 0 1 89.5938 8.30469)\"\r\n fill=\"#F2F4F7\" />\r\n <circle cx=\"4.15247\" cy=\"4.15247\" r=\"4.15247\"\r\n transform=\"matrix(-1 0 0 1 92.5625 60.5078)\"\r\n fill=\"#F2F4F7\" />\r\n <circle cx=\"4.15247\" cy=\"4.15247\" r=\"4.15247\"\r\n transform=\"matrix(-1 0 0 1 17.2266 16.6094)\"\r\n fill=\"#F2F4F7\" />\r\n <circle cx=\"2.37284\" cy=\"2.37284\" r=\"2.37284\"\r\n transform=\"matrix(-1 0 0 1 21.9688 2.37109)\"\r\n fill=\"#F2F4F7\" />\r\n <rect width=\"28.4741\" height=\"28.4741\" rx=\"14.237\"\r\n transform=\"matrix(-1 0 0 1 68.2422 36.7773)\" fill=\"#344054\"\r\n fill-opacity=\"0.4\" />\r\n <path\r\n d=\"M48.666 52.7943V55.1671C48.666 55.4818 48.791 55.7836 49.0135 56.0061C49.236 56.2286 49.5377 56.3536 49.8524 56.3536H58.1573C58.472 56.3536 58.7738 56.2286 58.9963 56.0061C59.2188 55.7836 59.3438 55.4818 59.3438 55.1671V52.7943M51.0388 48.6418L54.0049 45.6758M54.0049 45.6758L56.9709 48.6418M54.0049 45.6758V52.7943\"\r\n stroke=\"white\" stroke-width=\"1.18642\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <defs>\r\n <filter id=\"filter0_dd_9548_99613\" x=\"0.78125\" y=\"9.49219\"\r\n width=\"106.438\" height=\"77.9648\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\"\r\n in=\"SourceAlpha\"\r\n result=\"effect1_dropShadow_9548_99613\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_9548_99613\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\"\r\n in=\"SourceAlpha\"\r\n result=\"effect2_dropShadow_9548_99613\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\"\r\n in2=\"effect1_dropShadow_9548_99613\"\r\n result=\"effect2_dropShadow_9548_99613\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect2_dropShadow_9548_99613\"\r\n result=\"shape\" />\r\n </filter>\r\n <linearGradient id=\"paint0_linear_9548_99613\" x1=\"3.52536\"\r\n y1=\"5.15245\" x2=\"30.3724\" y2=\"30.3723\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#D0D5DD\" />\r\n <stop offset=\"0.350715\" stop-color=\"white\"\r\n stop-opacity=\"0\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear_9548_99613\" x1=\"4.4067\"\r\n y1=\"6.44056\" x2=\"37.9654\" y2=\"37.9654\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#D0D5DD\" />\r\n <stop offset=\"0.350715\" stop-color=\"white\"\r\n stop-opacity=\"0\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear_9548_99613\" x1=\"3.08469\"\r\n y1=\"4.50839\" x2=\"26.5758\" y2=\"26.5758\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#D0D5DD\" />\r\n <stop offset=\"0.350715\" stop-color=\"white\"\r\n stop-opacity=\"0\" />\r\n </linearGradient>\r\n </defs>\r\n </svg></span>\r\n <div class=\"w-400px subtitle text-center\">\r\n Download the template below in the <span class=\"fw-bolder\">\u2018Assign\r\n Stores\u2019</span> section and upload to configure store-wise time\r\n to the checklist accordingly.\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData?.aiConfig?.assignConfig !== 'store'\"\r\n class=\"col-sm-12 mt-5\">\r\n <div *ngFor=\"let array of configData?.aiConfig?.events; let i= index\"\r\n class=\"d-flex mb-5 align-items-center\">\r\n <span class=\"me-3\">Start huddle at</span>\r\n <span><input\r\n class=\"form-control form-control-solid flatpickr-input w-auto margin\"\r\n (change)=\"updateHuddletime($event,'time')\"\r\n [(ngModel)]=\"array.time\" placeholder=\"Set store open time\"\r\n name=\"start_date_{{i}}\" type=\"time\"></span>\r\n <span class=\"mx-3\">for a duration of</span>\r\n <span class=\"w-150px\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"array.duration\"\r\n (change)=\"updateHuddletime($event,'duration')\">\r\n <option value=\"15\">15 mins</option>\r\n <option value=\"30\">30 mins</option>\r\n <option value=\"45\">45 mins</option>\r\n <option value=\"60\">60 mins</option>\r\n </select>\r\n </span>\r\n <span *ngIf=\"configData?.aiConfig?.events?.length > 1\"><button\r\n class=\"btn btn-outline px-3 ms-3\" (click)=\"deleteHuddle(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button></span>\r\n </div>\r\n <div *ngIf=\"configData?.aiConfig?.events?.length < 3\"\r\n class=\"btn btn-outline\" (click)=\"AddHuddleEent()\"> <span><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.9974 4.16797V15.8346M4.16406 10.0013H15.8307\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span class=\"ms-3\">Add Event</span></div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['outsidebusinesshoursqueuetracking'].includes(type)\" class=\"row\">\r\n <div class=\"border border-2 rounded-3 px-3\">\r\n <div>\r\n <h2 class=\"schedule-config-header m-3\">Configuration </h2>\r\n </div>\r\n\r\n <div class=\"border-top border-top-2\"\r\n style=\"height: 1px; margin: 1rem -9.750px;\"></div>\r\n <div class=\"border border-2 rounded-3 px-3 mb-3\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Pre-Open Time\r\n Configuration</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changePreopentimeconfig($event)\"\r\n [checked]=\"configData?.aiConfig?.outsidebusinesshoursqueuetracking?.preopentimeconfig !== '' \">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, this\r\n allows detections before store open time</div>\r\n </div>\r\n <div *ngIf=\"preopentimeconfig || configData.aiConfig.outsidebusinesshoursqueuetracking?.preopentimeconfig\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-1\">\r\n <div class=\"schedule-config-sub-header me-3\"> Monitor Store for\r\n </div>\r\n <div>\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.outsidebusinesshoursqueuetracking.preopentimeconfig\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of preOpenCloseTimeConfig\"\r\n [value]=\"time\">{{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes before the\r\n scheduled open Time </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-3 px-3 mb-3\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Post-Close Time\r\n Configuration</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changePreclosetimeconfig($event)\"\r\n [checked]=\"configData?.aiConfig?.outsidebusinesshoursqueuetracking?.preclosetimeconfig !== '' \">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, this\r\n allows detections after store close time</div>\r\n </div>\r\n <div *ngIf=\"preclosetimeconfig || configData.aiConfig.outsidebusinesshoursqueuetracking?.preclosetimeconfig\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-1\">\r\n <div class=\"schedule-config-sub-header me-3\"> Monitor Store for\r\n </div>\r\n <div>\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.outsidebusinesshoursqueuetracking.preclosetimeconfig\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of preOpenCloseTimeConfig\"\r\n [value]=\"time\">{{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes after the\r\n scheduled close Time </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-3 px-3 mb-3\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Person Detection Time\r\n Threshold</div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled,\r\n detection count is based on the configured time</div>\r\n </div>\r\n <div class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-1\">\r\n <div class=\"schedule-config-sub-header me-3\"> Flag, If detection\r\n of a person exceeds </div>\r\n <div>\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.outsidebusinesshoursqueuetracking.persondetectiontimethreshold\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option\r\n *ngFor=\"let time of personDetectionTimeThreshold\"\r\n [value]=\"time\">{{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['custom'].includes(type)\">\r\n <div class=\"col-md-12 mt-6 mb-1\">\r\n <div class=\"row\">\r\n <div class=\"col-md-2 mt-3\">\r\n <span class=\"mx-6 sub\">For</span>\r\n </div>\r\n <div class=\"col-md-3 dropdown\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"configData.checkListDetails.schedule\"\r\n (change)=\"updateSchedule($event)\">\r\n <option value=\"onetime\">Does Not Repeat</option>\r\n <option value=\"weekday\"> Every Weekday (Mon - Fri)</option>\r\n <option value=\"daily\">Daily</option>\r\n <option value=\"weekly\">Weekly</option>\r\n <option value=\"monthly\">Monthly</option>\r\n <option value=\"range\">Custom Range</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3 mx-2\">At</span>&nbsp;&nbsp;\r\n <input\r\n class=\"form-control form-control-solid flatpickr-input w-200px margin\"\r\n (change)=\"updateTime('start')\" [(ngModel)]=\"startTime\"\r\n placeholder=\"Set store open time\" name=\"due_date\" type=\"time\">\r\n </div>\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3 ms-5\">Ends</span>&nbsp;&nbsp;\r\n <input\r\n class=\"form-control form-control-solid flatpickr-input w-200px margin\"\r\n (change)=\"updateTime('end')\" [(ngModel)]=\"endTime\"\r\n placeholder=\"Set store open time\" name=\"due_date\" type=\"time\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"justify-content-between mt-4\">\r\n <div class=\"config-heading\">Checklist Configuration</div>\r\n <div *ngIf=\"configData.checkListDetails.schedule === 'onetime'\">\r\n <div class=\"row col-lg-12 d-flex mt-5\">\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3\">Once On</span>\r\n </div>\r\n <div class=\"col-md-3 px-4 pe-3\" id=\"dateclass\"\r\n data-kt-daterangepicker=\"true\" data-kt-daterangepicker-opens=\"left\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\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\"\r\n 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\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n matInput ngxDaterangepickerMd [singleDatePicker]=\"true\"\r\n [minDate]=\"minDate\" [drops]=\"'down'\" [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDates\"\r\n [autoApply]=\"false\"\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)=\"dateRangeStart($event)\" name=\"daterange\"\r\n [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.schedule !== 'onetime'\">\r\n <div class=\"form-check form-switch mt-6\">\r\n <input type=\"checkbox\" id=\"rangeDate\"\r\n class=\"form-check-input ng-valid ng-dirty ng-touched\"\r\n [(ngModel)]=\"showRangeValue\"\r\n [disabled]=\"configData.checkListDetails?.schedule === 'range'\"\r\n (change)=\"updateDateValue($event)\">\r\n <label for=\"rangeDate\" class=\"form-check-label checklisttext ms-2\">Set\r\n defined\r\n date range</label>\r\n </div>\r\n <div class=\"row col-lg-12 d-flex mt-5\" *ngIf=\"showRangeValue\">\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3\">Starts from</span>\r\n </div>\r\n <div class=\"col-md-3\"\r\n [ngClass]=\"configData.checkListDetails.schedule === 'range' ? 'ps-10' : 'px-4 pe-3'\"\r\n id=\"dateclass\" data-kt-daterangepicker=\"true\"\r\n data-kt-daterangepicker-opens=\"left\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\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\"\r\n 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\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n matInput ngxDaterangepickerMd [singleDatePicker]=\"true\"\r\n [minDate]=\"minStartDate\" [drops]=\"'down'\" [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedStartDate\"\r\n [autoApply]=\"false\"\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)=\"dateRangeStart($event)\" name=\"daterange\"\r\n [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 mt-8 ng-star-inserted\">\r\n <div class=\"row\"\r\n *ngIf=\"configData.checkListDetails.schedule !== 'range'\">\r\n <div class=\"col-md-2 mt-2\">\r\n <span class=\"sub\">Repeats every</span>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div\r\n class=\"fv-row mb-5 fv-plugins-icon-container d-flex flex-column\">\r\n <input type=\"text\" autocomplete=\"off\" required=\"\"\r\n class=\"form-control form-control-solid w-100px ng-pristine ng-invalid ng-touched\"\r\n [(ngModel)]=\"configData.checkListDetails.scheduleRepeatedDay\"\r\n maxlength=\"2\" min=\"1\" (change)=\"updateRepeatDay()\"\r\n (input)=\"removeAlphapet($event)\">\r\n </div>\r\n <div\r\n class=\"fv-row mb-5 mx-2 fv-plugins-icon-container d-flex flex-column\">\r\n <input type=\"text\" autocomplete=\"off\"\r\n class=\"form-control form-control-solid w-100px ng-pristine ng-invalid ng-touched\"\r\n [(ngModel)]=\"repeatType\" readonly>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.schedule === 'monthly'\">\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n\r\n </div>\r\n <div class=\"col-lg-2 mt-3\">\r\n <div class=\"form-check fontSize\">\r\n <input class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"day\"\r\n [checked]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup === 'day'\"\r\n (change)=\"updateMonth('day')\">\r\n <label class=\"cursor-pointer\" for=\"inlineRadio1\">On\r\n Day</label>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div\r\n class=\"fv-row mb-5 fv-plugins-icon-container d-flex flex-column\">\r\n <input type=\"text\" autocomplete=\"off\"\r\n class=\"form-control form-control-solid w-100px\"\r\n [ngClass]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'day' ? 'disabled' : ''\"\r\n [(ngModel)]=\"configData.checkListDetails.scheduleRepeatedMonthWeek\"\r\n (change)=\"updateValue($event)\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'day'\"\r\n maxLength=\"2\" (input)=\"validate($event)\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n\r\n </div>\r\n <div class=\"col-lg-2 mt-3\">\r\n <div class=\"form-check fontSize\">\r\n <input class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"day\"\r\n [checked]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup === 'date'\"\r\n (change)=\"updateMonth('date')\">\r\n <label class=\"cursor-pointer\" for=\"inlineRadio1\">On\r\n the</label>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div\r\n class=\"fv-row mb-5 fv-plugins-icon-container d-flex flex-column\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"monthDate\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'date'\">\r\n <option value=\"1\"> First </option>\r\n <option value=\"2\"> Second </option>\r\n <option value=\"3\"> Third</option>\r\n <option value=\"4\"> Fourth</option>\r\n <option value=\"5\"> Last</option>\r\n </select>\r\n </div>\r\n <div\r\n class=\"fv-row mb-5 mx-2 fv-plugins-icon-container d-flex flex-column\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"monthDay\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'date'\">\r\n <option value=\"Sunday\"> Sunday </option>\r\n <option value=\"Monday\"> Monday </option>\r\n <option value=\"Tuesday\"> Tuesday</option>\r\n <option value=\"Wednesday\"> Wednesday</option>\r\n <option value=\"Thursday\"> Thursday</option>\r\n <option value=\"Friday\">Friday</option>\r\n <option value=\"Saturday\"> Saturday</option>\r\n </select>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-2 mt-3\">\r\n <div class=\"form-check fontSize\">\r\n <input class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"day\"\r\n [checked]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup === 'specific'\"\r\n (change)=\"updateMonth('specific')\">\r\n <label class=\"cursor-pointer\" for=\"inlineRadio1\">On\r\n Specific Dates</label>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div class=\"position-relative\"\r\n (clickOutside)=\"closeDropDown()\">\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div\r\n class=\"d-flex align-items-center position-relative w-100\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n 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=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\"\r\n class=\"form-control dropdown-input ps-14\"\r\n (click)=\"toggleDropDown()\" readonly\r\n placeholder=\"Select Dates\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'specific'\" />\r\n </div>\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu w-100\"\r\n *ngIf=\"showDropDown\">\r\n <div class=\"calendar-container\">\r\n <div class=\"content\">\r\n <div class=\"dates\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"row d-flex\">\r\n <div class=\"col-2 mb-2\"\r\n *ngFor=\"let date of dates\">\r\n <li class=\"nav-item me-1\"\r\n role=\"presentation\"\r\n (click)=\"selectDate(date)\">\r\n <a class=\"nav-link btn weekstyledate d-flex flex-column flex-center rounded-pill min-w-35px py-2 px-3 \"\r\n [ngClass]=\"selectedDate.includes(date) ? 'active btn-active-primary' : ''\"\r\n data-bs-toggle=\"tab\"\r\n aria-selected=\"false\"\r\n tabindex=\"-1\"\r\n role=\"tab\">\r\n <span\r\n class=\"pillstyle\">{{\r\n date\r\n }}</span>\r\n </a>\r\n </li>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button ms-2\"\r\n (click)=\"submitDate();showDropDown= false;\">\r\n <button\r\n class=\"btn btn-primary btn-block w-100\">\r\n Submit\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-6 py-3 badge-specificdate\">\r\n <div class=\"d-flex mt-3 flex-wrap\">\r\n <span *ngFor=\"let date of submittedDates\"\r\n class=\"badge badge-pill badge-light checklisttext me-4\">\r\n {{ getDateWithSuffix(date) }}\r\n <span (click)=\"removeBadge(date)\"\r\n class=\"cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div\r\n *ngIf=\"['weekday','weekly'].includes(configData.checkListDetails.schedule)\">\r\n <ul class=\"nav nav-pills d-flex flex-nowrap mb-3\"\r\n role=\"tablist\">\r\n\r\n <ng-container\r\n *ngFor=\"let day of ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']\">\r\n <li class=\"nav-item me-1\" role=\"presentation\"\r\n (click)=\"(configData.checkListDetails.schedule === 'weekly' || (configData.checkListDetails.schedule === 'weekday' && !['Sunday','Saturday'].includes(day))) ? setDay(day) : ''\">\r\n <a class=\"nav-link btn weekstyle d-flex flex-column flex-center rounded-pill min-w-45px me-2 py-4 px-3\"\r\n [ngClass]=\"(configData.checkListDetails.schedule === 'weekday' && ['Sunday','Saturday'].includes(day)) ? 'cursor-default' : selectedDays.includes(day) ? 'selectDay' : ''\"\r\n data-bs-toggle=\"tab\" aria-selected=\"false\"\r\n tabindex=\"-1\" role=\"tab\">\r\n <span class=\"pillstyle\">{{ day[0] }}</span>\r\n </a>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.schedule === 'range'\">\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n\r\n <div class=\"col-lg-6 d-flex\">\r\n <div class=\"form-check form-switch mt-3\">\r\n <input type=\"checkbox\" id=\"flexSwitchCheckDefault\"\r\n class=\"form-check-input ng-valid ng-dirty ng-touched\"\r\n [(ngModel)]=\"specific\"\r\n (change)=\"updateSpecific($event)\">\r\n <label for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label checklisttext ms-2\">On Specific\r\n Dates</label>\r\n </div>\r\n <div class=\"px-4 pe-3 position-relative\"\r\n (clickOutside)=\"closeDropDown()\">\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div\r\n class=\"d-flex align-items-center position-relative w-300px\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n 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=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\"\r\n class=\"form-control dropdown-input ps-14\"\r\n (click)=\"toggleDropDown()\" readonly\r\n placeholder=\"Select Dates\"\r\n [disabled]=\"!specific\" />\r\n </div>\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu w-100\"\r\n *ngIf=\"showDropDown\">\r\n <lib-multi-date-datepicker\r\n (selectedDates)=\"selectSpecificDate($event)\"\r\n [predefinedDates]=\"selectedDateList\"\r\n [startDate]=\"configData.checkListDetails.configStartDate\"\r\n [endDate]=\"configData.checkListDetails.configEndDate\"></lib-multi-date-datepicker>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-6 py-3 badge-specificdate\">\r\n <div class=\"d-flex mt-3 ms-5 flex-wrap\">\r\n <span *ngFor=\"let date of selectedDateList\"\r\n class=\"badge badge-pill badge-light checklisttext me-4\">\r\n {{ date }}\r\n <span (click)=\"removeDate(date)\"\r\n class=\"cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\"\r\n stroke=\"#667085\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\"\r\n [hidden]=\"!showRangeValue || configData.checkListDetails.schedule === 'onetime'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-2\"\r\n [ngClass]=\"configData.checkListDetails.schedule === 'range' ? 'mt-4' : 'mt-2'\">\r\n <span class=\"sub\">Ends On</span>\r\n </div>\r\n <div class=\"col-md-3\" id=\"dateclass\"\r\n [ngClass]=\"configData.checkListDetails.schedule === 'range' ? 'ps-9' : 'px-4 pe-3'\"\r\n data-kt-daterangepicker=\"true\" data-kt-daterangepicker-opens=\"left\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\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\"\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n matInput ngxDaterangepickerMd [singleDatePicker]=\"true\"\r\n [minDate]=\"minEndDate\" [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedEndDate\" [autoApply]=\"false\"\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)=\"dateRangeEnd($event)\" name=\"daterange\"\r\n [readonly]=\"true\" />\r\n </div>\r\n <div class=\"mt-5 remove cursor-pointer ms-4\"\r\n (click)=\"onDatepickerRefresh()\"\r\n *ngIf=\"configData.checkListDetails.configEndDate !== '' && configData.checkListDetails.configEndDate !== null && configData.checkListDetails.schedule !=='range'\">\r\n Remove\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'onetime'\">\r\n Occurs on\r\n the day {{configData.checkListDetails?.scheduleDate | date:'dd MMM YYYY'}}</div>\r\n <div class=\"my-3 user\"\r\n *ngIf=\"['weekday','weekly'].includes(configData.checkListDetails?.schedule)\">\r\n Occurs\r\n every {{(configData.checkListDetails?.scheduleRepeatedDay?.length &&\r\n configData.checkListDetails?.scheduleRepeatedDay !=='01') ?\r\n configData.checkListDetails?.scheduleRepeatedDay : ''}} week<span\r\n *ngIf=\"configData.checkListDetails?.scheduleRepeatedDay !== 01\">s</span> on\r\n {{selectedDays.toString()}}<span *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate | date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate\">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'daily'\">\r\n Occurs every\r\n {{(configData.checkListDetails?.scheduleRepeatedDay?.length &&\r\n configData.checkListDetails?.scheduleRepeatedDay !== '01') ?\r\n configData.checkListDetails?.scheduleRepeatedDay : ''}} day<span\r\n *ngIf=\"configData.checkListDetails?.scheduleRepeatedDay !== 01\">s</span><span\r\n *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate |\r\n date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate \">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'monthly'\">\r\n Occurs\r\n every\r\n {{(configData.checkListDetails?.scheduleRepeatedDay?.length &&\r\n configData.checkListDetails?.scheduleRepeatedDay !== '01') ?\r\n configData.checkListDetails?.scheduleRepeatedDay : ''}} month<span\r\n *ngIf=\"configData.checkListDetails?.scheduleRepeatedDay !== 01\">s\r\n </span>{{(configData.checkListDetails?.scheduleRepeatedMonthSetup === 'day') ?\r\n ('on day ' + configData.checkListDetails.scheduleRepeatedMonthWeek) :\r\n configData.checkListDetails?.scheduleRepeatedMonthSetup === 'date' ?\r\n updateMonthValue():\r\n updateSpecificValue()}}<span *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate | date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate\">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'range'\">\r\n Occurs every\r\n {{configData.checkListDetails?.scheduleWeekDays?.toString()}} <span\r\n *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate |\r\n date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate\">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"section-left\" *ngIf=\"['custom'].includes(type)\">\r\n <div>\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\">\r\n <div class=\"config-heading\">Response Configuration</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" (click)=\"configaccordian()\"\r\n [ngClass]=\"{'rotate' : showconfig}\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"35\" height=\"35\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"showconfig\">\r\n <div cdkDropList>\r\n <div cdkDrag>\r\n <div class=\"col-lg-12\"\r\n [ngClass]=\"['onetime','daily'].includes(configData?.checkListDetails.schedule) || (configData?.checkListDetails.schedule === 'monthly' && configData?.checkListDetails.scheduleRepeatedMonthSetup !=='specific') ? 'bg-color-disabled' : ''\">\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.allowOnce ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowOnce\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"oneTime\"\r\n [disabled]=\"['onetime','daily'].includes(configData?.checkListDetails.schedule) || (configData?.checkListDetails.schedule === 'monthly' && configData?.checkListDetails.scheduleRepeatedMonthSetup !=='specific')\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"oneTime\">Only one\r\n time\r\n </label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"oneTime\">By\r\n enabling this, the response can be captured only\r\n once for\r\n this checklist <span *ngIf=\"showRangeValue\">from\r\n {{configData.checkListDetails.configStartDate}}\r\n <span\r\n *ngIf=\"configData.checkListDetails.configEndDate\">to\r\n {{configData.checkListDetails.configEndDate}}.</span></span></label>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\" configData?.checkListDetails?.allowedOverTime ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowedOverTime\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"fillResponse\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"fillResponse\">Fill response after configure\r\n time.</label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"fillResponse\">By enabling, the user can\r\n fill the\r\n checklist even after the above configured\r\n end-time.</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.allowedStoreLocation ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowedStoreLocation\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"geoFencing\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"geoFencing\">Geo\r\n fencing\r\n </label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"geoFencing\">By\r\n enabling, the checklist can be filled by the user\r\n only when\r\n inside the store.</label>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.allowedMultiSubmit ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowedMultiSubmit\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"allowedMultiSubmitSwitch\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"allowedMultiSubmitSwitch\">Allow multiple\r\n responses</label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"allowedMultiSubmitSwitch\">By enabling, the\r\n checklist\r\n can be filled multiple times in a day</label>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.restrictAttendance ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.restrictAttendance\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"restrictAttendance\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"restrictAttendance\">Restrict\r\n attendance</label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"restrictAttendance\">By enabling, user can't be\r\n able to clockout without completing the\r\n task.</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <div class=\"section-left\" *ngIf=\"['custom'].includes(type)\">\r\n <div>\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\">\r\n <div class=\"config-heading\">Advance Configuration</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" (click)=\"advanceaccordian()\"\r\n [ngClass]=\"{'rotate' : showadvance}\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"35\" height=\"35\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"showadvance\">\r\n <div cdkDropList>\r\n <div cdkDrag>\r\n <div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex\">\r\n <div class=\"mt-2 form-check-label sub\">\r\n <span>Checklist Owner</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-check-label subtext\">\r\n Owners get access to manage the checklist\r\n </div>\r\n <div class=\"col-lg-12 mt-3\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">Can be managed by </div>\r\n </div>\r\n </div>\r\n <div class=\"w-80\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData?.checkListDetails?.owner\"\r\n (selectedList)=\"updateOwner($event)\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-5\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex\">\r\n <div class=\"mt-2 form-check-label sub\">\r\n <span>Approver</span>\r\n </div>\r\n <div class=\"form-check form-switch ms-5\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.approver?.length ? true : false\"\r\n [(ngModel)]=\"approve\" type=\"checkbox\"\r\n id=\"approver\"\r\n (change)=\"updateConfigApprover($event)\"\r\n disabled>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-check-label subtext\">\r\n By enabling, the users will be able to approve the checklist\r\n </div>\r\n <div class=\"col-lg-12 mt-3\" *ngIf=\"approve\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">To be approved by </div>\r\n </div>\r\n </div>\r\n <div class=\"w-80\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData?.checkListDetails?.approver\"\r\n (selectedList)=\"updateApprover($event)\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-5\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex\">\r\n <div class=\"mt-2 form-check-label sub\">\r\n <span>Reminder</span>\r\n </div>\r\n <div class=\"form-check form-switch ms-5\">\r\n <input class=\"form-check-input mt-3\"\r\n [(ngModel)]=\"remainder\" type=\"checkbox\"\r\n id=\"oneTime\"\r\n (change)=\"updateConfigRemainder($event)\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-check-label subtext\">\r\n By enabling, the users will be reminded in the selected\r\n interval\r\n </div>\r\n <div class=\"col-lg-12 mt-3\" *ngIf=\"remainder\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">Notify user before</div>\r\n </div>\r\n </div>\r\n <div class=\"w-80\">\r\n <div class=\"w-100 d-flex\">\r\n <div class=\"d-flex align-items-center position-relative w-200px ,\"\r\n *ngFor=\"let loop of configData.checkListDetails?.remainder;let i=index\">\r\n <!-- <span *ngFor=\"let loop of timeLoop\"> -->\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g\r\n clip-path=\"url(#clip0_1487_47636)\">\r\n <path\r\n d=\"M10.0013 5.00033V10.0003L13.3346 11.667M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1487_47636\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <select class=\"form-select ps-14 me-5\"\r\n (change)=\"updateRemainder($event,i)\"\r\n [id]=\"'remainder'+ i\">\r\n <option\r\n *ngFor=\"let time of updateTimeLoop(i)\"\r\n class=\"h-200px\"\r\n [selected]=\"loop === time\"\r\n [value]=\"time\">{{time}} mins\r\n </option>\r\n </select>\r\n <!-- </span> -->\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.remainder.length < 3\"\r\n class=\"ms-5\">\r\n <button class=\"btn btn-sm btn-outline\"\r\n (click)=\"updateLoop()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10.0013 4.16699V15.8337M4.16797 10.0003H15.8346\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"remainder\" class=\"mt-2 user\">\r\n Send Alerts <span\r\n *ngFor=\"let item of configData.checkListDetails.remainder;let i=index\"><span\r\n *ngIf=\"i !== configData.checkListDetails.remainder.length-1 && i !== 0\">\r\n ,</span><span\r\n *ngIf=\"i === configData.checkListDetails.remainder.length-1 && i !== 0\">\r\n and</span> {{item}}mins </span>before the checklist\r\n end time\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <div *ngIf=\"['eyetest'].includes(type)\" class=\"mt-6 mx-4 sub\">Store opens at <span\r\n class=\"fw-600\"><u>{{configData?.openTime}}</u></span> and closes\r\n at <span class=\"fw-600\"><u>{{configData?.closeTime}}</u></span>, everyday. <div\r\n class=\"separator mt-8\"></div>\r\n </div>\r\n <div *ngIf=\"type === 'unattended'\" class=\"mt-6 mx-4 sub\">\r\n Time taken to assist by staff &lt;= 1 mins | Staff to customer time spent &lt;=1\r\n mins\r\n <!-- Store opens at <span\r\n class=\"fw-600\"><u>{{configData?.openTime}}</u></span> and closes\r\n at <span class=\"fw-600\"><u>{{configData?.closeTime}}</u></span>, everyday. <div\r\n class=\"separator mt-8\"></div> -->\r\n </div>\r\n <div *ngIf=\"type !=='custom'\">\r\n <div *ngIf=\"!['eyetest','halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"separator mt-8\"></div>\r\n <h2 class=\"section-leftheading mt-8\">Notify Alerts\r\n <span class=\"mx-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\">\r\n <path\r\n d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1874_66195\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </h2>\r\n <div *ngIf=\"['mobileusagedetection'].includes(type)\" class=\"col-md-12 mt-8\">\r\n <div class=\"row mt-4\">\r\n <div class=\"col-md-2 mt-2 \">\r\n <span class=\"mx-4 sub\">If usage exceeds</span>\r\n </div>\r\n <div class=\"col-lg-1\">\r\n <div class=\"fv-row mb-5 fv-plugins-icon-container flex flex-column\">\r\n\r\n <input\r\n class=\"form-control form-control-solid text-center w-55px\"\r\n [(ngModel)]=\"configData.aiConfig.mobileDetection.usageExceed\"\r\n type=\"text\" (keypress)=\"omit_special_char($event)\"\r\n autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (input)=\"validateLimit($event)\" />\r\n <span class=\"text-danger usageerror\" *ngIf=\"errormsg\">Please\r\n enter event count\r\n between 15 to 999</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mt-2\">\r\n <span class=\"sub\">detections per day</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['uniformdetection','mobileusagedetection','scrum','cleaning','storeopenandclose','unattended','packageConfiguration','staffleftinthemiddle','customerunattended','outsidebusinesshoursqueuetracking','halfshutter','tvcompliance'].includes(type)\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"col-lg-2\">\r\n <div class=\"d-flex align-items-center my-5\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mx-4\">Send Alert to </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-9\">\r\n <div class=\"fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.alerts.users\"\r\n (selectedList)=\"updateAlert($event,'user')\"></lib-chip-dropdown>\r\n <!-- <lib-chip-dropdown [data]=\"alertUsers\" [selectedData]=\"configData?.checkListDetails?.owner\"\r\n (selectedList)=\"updateOwner($event)\"></lib-chip-dropdown> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Schedule Checklist -->\r\n <div *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <div>\r\n <h2 class=\"section-leftheading\">Schedule Checklist </h2>\r\n </div>\r\n <div class=\"schedule-config-description mb-6\">Set the desired time to run the\r\n checklist</div>\r\n <div>\r\n <div *ngIf=\"['halfshutter'].includes(type)\"\r\n class=\"d-flex align-items-center p-2 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-2\">\r\n This checklist will run based on each store\u2019s opening and closing\r\n time. You can view store timings in the 'Assign Stores' section\r\n below.\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"row ng-star-inserted\" *ngIf=\"['halfshutter'].includes(type)\">\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\"> Start Detection for a\r\n duration, </div>\r\n </div>\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.halfshutter.schedule.afterOpenTime\"\r\n required>\r\n <option *ngFor=\"let time of scheduleTimeConfig\" [value]=\"time\">\r\n {{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header me-3\"> minutes after Store Open\r\n time and </div>\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.halfshutter.schedule.beforeCloseTime\"\r\n required>\r\n <option *ngFor=\"let time of scheduleTimeConfig\" [value]=\"time\">\r\n {{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes before Store Close\r\n time </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-4 mb-4\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"sched\" id=\"std\"\r\n [(ngModel)]=\"scheduletype\" value=\"standard\">\r\n <label class=\"small fw-medium\" for=\"std\">Standard Store Open & Close\r\n Time</label>\r\n </div>\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"sched\" id=\"custom\"\r\n [(ngModel)]=\"scheduletype\" value=\"custom\">\r\n <label class=\"small fw-medium\" for=\"custom\">Custom Time</label>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-3 mb-4\"\r\n *ngIf=\"scheduletype==='custom'\">\r\n <span class=\"fw-medium text-dark\">Start at</span>\r\n <div class=\"time-input-wrapper\">\r\n <input type=\"time\" class=\"form-control time-field\"\r\n [(ngModel)]=\"schedulestartTime\">\r\n <i class=\"bi bi-clock\"></i>\r\n </div>\r\n\r\n <span class=\"fw-medium text-dark ms-2\">Ends at</span>\r\n <div class=\"time-input-wrapper\">\r\n <input type=\"time\" class=\"form-control time-field\"\r\n [(ngModel)]=\"scheduleendTime\">\r\n <i class=\"bi bi-clock\"></i>\r\n </div>\r\n </div>\r\n <hr style=\"border:1px solid #cbcdd1\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"fw-bold small me-3\">Set recurrence</span>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n [(ngModel)]=\"recurrenceStatus\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"recurrenceStatus\" class=\"fade-in mt-3\">\r\n <div class=\"d-flex align-items-center gap-2 mb-4\">\r\n <span class=\"text-secondary-blue fw-medium\">Repeat every</span>\r\n\r\n <select class=\"form-select custom-select shadow-none\"\r\n [(ngModel)]=\"recurrencetime\">\r\n <option [value]=\"1\">1</option>\r\n <option [value]=\"2\">2</option>\r\n <option [value]=\"3\">3</option>\r\n <option [value]=\"4\">4</option>\r\n <option [value]=\"5\">5</option>\r\n <option [value]=\"6\">6</option>\r\n <option [value]=\"7\">7</option>\r\n <option [value]=\"8\">8</option>\r\n </select>\r\n\r\n <span class=\"text-secondary-blue fw-medium\">Hours</span>\r\n </div>\r\n\r\n <!-- Row 3: Summary Text -->\r\n <p class=\"summary-text\">\r\n Occurs every {{recurrencetime}} Hours between\r\n <span *ngIf=\"scheduletype!=='custom'\">Store Open & Close Time</span>\r\n <span *ngIf=\"scheduletype==='custom'\">{{schedulestartTime}}\r\n \u2013{{scheduleendTime}}</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Detection Areas -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['mobileusagedetection','outsidebusinesshoursqueuetracking','halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <h2 class=\"section-leftheading\">Detection Areas\r\n <!-- <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\"> <path d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g>\r\n <defs> <clipPath id=\"clip0_1874_66195\"> <rect width=\"16\" height=\"16\" fill=\"white\" /> </clipPath> </defs>\r\n </svg>\r\n </span> -->\r\n </h2>\r\n\r\n <div *ngIf=\"configData?.product.includes('tangoZone')\" class=\"row ng-star-inserted\">\r\n <div *ngIf=\"configData?.product.includes('tangoZone')\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mb-4\" *ngIf=\"['mobileusagedetection'].includes(type)\">\r\n Detect mobile usage except </div>\r\n <div class=\"schedule-config-description mb-6\"\r\n *ngIf=\"['outsidebusinesshoursqueuetracking','halfshutter','tvcompliance'].includes(type)\">\r\n Checklist will run on this Zone </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"configData?.product.includes('tangoZone')\">\r\n <!-- <lib-chip-dropdown [data]=\"zoneList\" [selectedData]=\"configData.aiConfig?.detectionArea\" (selectedList)=\"updateZone($event)\"></lib-chip-dropdown> -->\r\n <div class=\"border border-2 p-3 rounded\" style=\"min-height: 44px;\"> <span\r\n class=\"badge badge-light-default mx-2\"\r\n *ngFor=\"let item of zoneList;let i=index\">{{item.name}}</span></div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!configData?.product.includes('tangoZone')\"\r\n class=\"row ng-star-inserted mx-4\">\r\n <div *ngIf=\"!configData?.product.includes('tangoZone')\"\r\n class=\"card mt-3 p-3 border border-1\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex align-items-center\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\"\r\n viewBox=\"0 0 90 90\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"75.6666\" height=\"75.6666\"\r\n rx=\"37.8333\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"75.6666\" height=\"75.6666\"\r\n rx=\"37.8333\" stroke=\"#EAF8FF\" stroke-width=\"13.5119\" />\r\n <path\r\n d=\"M45.4287 37.9157L44.8683 38.2416L45.1709 38.815L47.7248 43.6539C48.3333 44.8068 49.8697 45.1058 50.8961 44.3291L50.8965 44.3288L54.8678 41.3181L55.2485 41.0295L55.1912 41.328L53.1546 51.9421C52.9711 52.8889 52.0879 53.6161 51.0099 53.6161H38.6549C37.5722 53.6161 36.6903 52.8848 36.5106 51.9439L36.5105 51.9433L34.4736 41.328L34.4163 41.0295L34.797 41.3181L38.7683 44.3288L38.7687 44.3291C39.7951 45.1058 41.3315 44.8068 41.94 43.6539L44.4939 38.815L44.7965 38.2416L44.2361 37.9157C43.9174 37.7302 43.7252 37.4107 43.7252 37.064C43.7252 36.5379 44.1856 36.0506 44.8324 36.0506C45.4792 36.0506 45.9396 36.5379 45.9396 37.064C45.9396 37.4074 45.7465 37.7308 45.4287 37.9157ZM55.8547 40.7798H55.3197L54.9903 40.3617C54.8544 40.1892 54.7787 39.984 54.7787 39.7664C54.7787 39.2403 55.2391 38.753 55.8859 38.753C56.5326 38.753 56.9931 39.2403 56.9931 39.7664C56.9931 40.2925 56.5326 40.7798 55.8859 40.7798H55.8858H55.8858H55.8857H55.8857H55.8856H55.8856H55.8855H55.8855H55.8854H55.8854H55.8853H55.8852H55.8852H55.8851H55.8851H55.885H55.885H55.8849H55.8849H55.8848H55.8848H55.8847H55.8847H55.8846H55.8845H55.8845H55.8844H55.8844H55.8843H55.8843H55.8842H55.8842H55.8841H55.884H55.884H55.8839H55.8839H55.8838H55.8838H55.8837H55.8837H55.8836H55.8835H55.8835H55.8834H55.8834H55.8833H55.8833H55.8832H55.8831H55.8831H55.883H55.883H55.8829H55.8829H55.8828H55.8827H55.8827H55.8826H55.8826H55.8825H55.8825H55.8824H55.8823H55.8823H55.8822H55.8822H55.8821H55.8821H55.882H55.8819H55.8819H55.8818H55.8818H55.8817H55.8816H55.8816H55.8815H55.8815H55.8814H55.8813H55.8813H55.8812H55.8812H55.8811H55.8811H55.881H55.8809H55.8809H55.8808H55.8808H55.8807H55.8806H55.8806H55.8805H55.8805H55.8804H55.8803H55.8803H55.8802H55.8802H55.8801H55.88H55.88H55.8799H55.8798H55.8798H55.8797H55.8797H55.8796H55.8795H55.8795H55.8794H55.8794H55.8793H55.8792H55.8792H55.8791H55.8791H55.879H55.8789H55.8789H55.8788H55.8787H55.8787H55.8786H55.8786H55.8785H55.8784H55.8784H55.8783H55.8782H55.8782H55.8781H55.8781H55.878H55.8779H55.8779H55.8778H55.8777H55.8777H55.8776H55.8776H55.8775H55.8774H55.8774H55.8773H55.8772H55.8772H55.8771H55.8771H55.877H55.8769H55.8769H55.8768H55.8767H55.8767H55.8766H55.8766H55.8765H55.8764H55.8764H55.8763H55.8762H55.8762H55.8761H55.876H55.876H55.8759H55.8759H55.8758H55.8757H55.8757H55.8756H55.8755H55.8755H55.8754H55.8753H55.8753H55.8752H55.8751H55.8751H55.875H55.875H55.8749H55.8748H55.8748H55.8747H55.8746H55.8746H55.8745H55.8744H55.8744H55.8743H55.8742H55.8742H55.8741H55.8741H55.874H55.8739H55.8739H55.8738H55.8737H55.8737H55.8736H55.8735H55.8735H55.8734H55.8733H55.8733H55.8732H55.8731H55.8731H55.873H55.873H55.8729H55.8728H55.8728H55.8727H55.8726H55.8726H55.8725H55.8724H55.8724H55.8723H55.8722H55.8722H55.8721H55.872H55.872H55.8719H55.8718H55.8718H55.8717H55.8717H55.8716H55.8715H55.8715H55.8714H55.8713H55.8713H55.8712H55.8711H55.8711H55.871H55.8709H55.8709H55.8708H55.8707H55.8707H55.8706H55.8705H55.8705H55.8704H55.8703H55.8703H55.8702H55.8701H55.8701H55.87H55.87H55.8699H55.8698H55.8698H55.8697H55.8696H55.8696H55.8695H55.8694H55.8694H55.8693H55.8692H55.8692H55.8691H55.869H55.869H55.8689H55.8688H55.8688H55.8687H55.8686H55.8686H55.8685H55.8685H55.8684H55.8683H55.8683H55.8682H55.8681H55.8681H55.868H55.8679H55.8679H55.8678H55.8677H55.8677H55.8676H55.8675H55.8675H55.8674H55.8673H55.8673H55.8672H55.8672H55.8671H55.867H55.867H55.8669H55.8668H55.8668H55.8667H55.8666H55.8666H55.8665H55.8664H55.8664H55.8663H55.8662H55.8662H55.8661H55.8661H55.866H55.8659H55.8659H55.8658H55.8657H55.8657H55.8656H55.8655H55.8655H55.8654H55.8653H55.8653H55.8652H55.8652H55.8651H55.865H55.865H55.8649H55.8648H55.8648H55.8647H55.8646H55.8646H55.8645H55.8645H55.8644H55.8643H55.8643H55.8642H55.8641H55.8641H55.864H55.8639H55.8639H55.8638H55.8638H55.8637H55.8636H55.8636H55.8635H55.8634H55.8634H55.8633H55.8632H55.8632H55.8631H55.8631H55.863H55.8629H55.8629H55.8628H55.8627H55.8627H55.8626H55.8626H55.8625H55.8624H55.8624H55.8623H55.8622H55.8622H55.8621H55.8621H55.862H55.8619H55.8619H55.8618H55.8618H55.8617H55.8616H55.8616H55.8615H55.8614H55.8614H55.8613H55.8613H55.8612H55.8611H55.8611H55.861H55.861H55.8609H55.8608H55.8608H55.8607H55.8606H55.8606H55.8605H55.8605H55.8604H55.8603H55.8603H55.8602H55.8602H55.8601H55.86H55.86H55.8599H55.8599H55.8598H55.8597H55.8597H55.8596H55.8596H55.8595H55.8594H55.8594H55.8593H55.8593H55.8592H55.8591H55.8591H55.859H55.859H55.8589H55.8589H55.8588H55.8587H55.8587H55.8586H55.8586H55.8585H55.8584H55.8584H55.8583H55.8583H55.8582H55.8582H55.8581H55.858H55.858H55.8579H55.8579H55.8578H55.8578H55.8577H55.8576H55.8576H55.8575H55.8575H55.8574H55.8574H55.8573H55.8572H55.8572H55.8571H55.8571H55.857H55.857H55.8569H55.8568H55.8568H55.8567H55.8567H55.8566H55.8566H55.8565H55.8565H55.8564H55.8563H55.8563H55.8562H55.8562H55.8561H55.8561H55.856H55.856H55.8559H55.8559H55.8558H55.8557H55.8557H55.8556H55.8556H55.8555H55.8555H55.8554H55.8554H55.8553H55.8553H55.8552H55.8552H55.8551H55.855H55.855H55.8549H55.8549H55.8548H55.8548H55.8547H55.8547ZM34.6745 40.3617L34.3451 40.7798H33.8101H33.8101H33.81H33.81H33.8099H33.8099H33.8098H33.8097H33.8097H33.8096H33.8096H33.8095H33.8095H33.8094H33.8094H33.8093H33.8093H33.8092H33.8092H33.8091H33.809H33.809H33.8089H33.8089H33.8088H33.8088H33.8087H33.8087H33.8086H33.8086H33.8085H33.8084H33.8084H33.8083H33.8083H33.8082H33.8082H33.8081H33.8081H33.808H33.8079H33.8079H33.8078H33.8078H33.8077H33.8077H33.8076H33.8076H33.8075H33.8074H33.8074H33.8073H33.8073H33.8072H33.8072H33.8071H33.807H33.807H33.8069H33.8069H33.8068H33.8068H33.8067H33.8066H33.8066H33.8065H33.8065H33.8064H33.8063H33.8063H33.8062H33.8062H33.8061H33.8061H33.806H33.8059H33.8059H33.8058H33.8058H33.8057H33.8056H33.8056H33.8055H33.8055H33.8054H33.8053H33.8053H33.8052H33.8052H33.8051H33.805H33.805H33.8049H33.8049H33.8048H33.8047H33.8047H33.8046H33.8046H33.8045H33.8044H33.8044H33.8043H33.8043H33.8042H33.8041H33.8041H33.804H33.804H33.8039H33.8038H33.8038H33.8037H33.8037H33.8036H33.8035H33.8035H33.8034H33.8033H33.8033H33.8032H33.8032H33.8031H33.803H33.803H33.8029H33.8029H33.8028H33.8027H33.8027H33.8026H33.8025H33.8025H33.8024H33.8024H33.8023H33.8022H33.8022H33.8021H33.802H33.802H33.8019H33.8019H33.8018H33.8017H33.8017H33.8016H33.8015H33.8015H33.8014H33.8014H33.8013H33.8012H33.8012H33.8011H33.801H33.801H33.8009H33.8008H33.8008H33.8007H33.8007H33.8006H33.8005H33.8005H33.8004H33.8003H33.8003H33.8002H33.8001H33.8001H33.8H33.8H33.7999H33.7998H33.7998H33.7997H33.7996H33.7996H33.7995H33.7994H33.7994H33.7993H33.7993H33.7992H33.7991H33.7991H33.799H33.7989H33.7989H33.7988H33.7987H33.7987H33.7986H33.7985H33.7985H33.7984H33.7984H33.7983H33.7982H33.7982H33.7981H33.798H33.798H33.7979H33.7978H33.7978H33.7977H33.7976H33.7976H33.7975H33.7974H33.7974H33.7973H33.7973H33.7972H33.7971H33.7971H33.797H33.7969H33.7969H33.7968H33.7967H33.7967H33.7966H33.7965H33.7965H33.7964H33.7963H33.7963H33.7962H33.7961H33.7961H33.796H33.7959H33.7959H33.7958H33.7958H33.7957H33.7956H33.7956H33.7955H33.7954H33.7954H33.7953H33.7952H33.7952H33.7951H33.795H33.795H33.7949H33.7948H33.7948H33.7947H33.7946H33.7946H33.7945H33.7944H33.7944H33.7943H33.7943H33.7942H33.7941H33.7941H33.794H33.7939H33.7939H33.7938H33.7937H33.7937H33.7936H33.7935H33.7935H33.7934H33.7933H33.7933H33.7932H33.7931H33.7931H33.793H33.7929H33.7929H33.7928H33.7928H33.7927H33.7926H33.7926H33.7925H33.7924H33.7924H33.7923H33.7922H33.7922H33.7921H33.792H33.792H33.7919H33.7918H33.7918H33.7917H33.7916H33.7916H33.7915H33.7915H33.7914H33.7913H33.7913H33.7912H33.7911H33.7911H33.791H33.7909H33.7909H33.7908H33.7907H33.7907H33.7906H33.7905H33.7905H33.7904H33.7904H33.7903H33.7902H33.7902H33.7901H33.79H33.79H33.7899H33.7898H33.7898H33.7897H33.7896H33.7896H33.7895H33.7895H33.7894H33.7893H33.7893H33.7892H33.7891H33.7891H33.789H33.7889H33.7889H33.7888H33.7887H33.7887H33.7886H33.7886H33.7885H33.7884H33.7884H33.7883H33.7882H33.7882H33.7881H33.7881H33.788H33.7879H33.7879H33.7878H33.7877H33.7877H33.7876H33.7875H33.7875H33.7874H33.7874H33.7873H33.7872H33.7872H33.7871H33.787H33.787H33.7869H33.7869H33.7868H33.7867H33.7867H33.7866H33.7865H33.7865H33.7864H33.7864H33.7863H33.7862H33.7862H33.7861H33.786H33.786H33.7859H33.7859H33.7858H33.7857H33.7857H33.7856H33.7856H33.7855H33.7854H33.7854H33.7853H33.7852H33.7852H33.7851H33.7851H33.785H33.7849H33.7849H33.7848H33.7848H33.7847H33.7846H33.7846H33.7845H33.7845H33.7844H33.7843H33.7843H33.7842H33.7842H33.7841H33.784H33.784H33.7839H33.7839H33.7838H33.7837H33.7837H33.7836H33.7836H33.7835H33.7834H33.7834H33.7833H33.7833H33.7832H33.7831H33.7831H33.783H33.783H33.7829H33.7829H33.7828H33.7827H33.7827H33.7826H33.7826H33.7825H33.7824H33.7824H33.7823H33.7823H33.7822H33.7822H33.7821H33.782H33.782H33.7819H33.7819H33.7818H33.7818H33.7817H33.7816H33.7816H33.7815H33.7815H33.7814H33.7814H33.7813H33.7812H33.7812H33.7811H33.7811H33.781H33.781H33.7809H33.7809H33.7808H33.7807H33.7807H33.7806H33.7806H33.7805H33.7805H33.7804H33.7804H33.7803H33.7803H33.7802H33.7801H33.7801H33.78H33.78H33.7799H33.7799H33.7798H33.7798H33.7797H33.7797H33.7796H33.7795H33.7795H33.7794H33.7794H33.7793H33.7793H33.7792H33.7792H33.7791H33.7791H33.779H33.779H33.7789C33.1321 40.7798 32.6717 40.2925 32.6717 39.7664C32.6717 39.2403 33.1321 38.753 33.7789 38.753C34.4257 38.753 34.8861 39.2403 34.8861 39.7664C34.8861 39.984 34.8103 40.1892 34.6745 40.3617Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.35119\" />\r\n </svg></span>\r\n <div class=\"ms-3\">\r\n <div class=\"section-leftheading\">Exclude Zone</div>\r\n <div class=\"zone-subscription\">To add an Excluded Zone inside\r\n the store, please upgrade your plan and subscribe to\r\n TangoEye.</div>\r\n </div>\r\n </div>\r\n <div routerLink=\"/manage/settings/payment-subscription\"\r\n class=\"button btn btn-sm py-3 btn-primary d-flex\">\r\n <span>Upgrade plan</span><span><svg class=\"ms-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M11.3607 6.14453C11.7367 5.92578 11.9874 5.52891 11.9874 5.08203C11.9874 4.39141 11.397 3.83203 10.668 3.83203C9.93898 3.83203 9.34852 4.39141 9.34852 5.08203C9.34852 5.53203 9.59922 5.92578 9.97526 6.14453L8.08516 9.72578C7.78498 10.2945 7.00651 10.457 6.48203 10.0602L3.54297 7.83203C3.7079 7.62266 3.80686 7.36328 3.80686 7.08203C3.80686 6.39141 3.21641 5.83203 2.48741 5.83203C1.75842 5.83203 1.16797 6.39141 1.16797 7.08203C1.16797 7.77266 1.75842 8.33203 2.48741 8.33203C2.49401 8.33203 2.50391 8.33203 2.5105 8.33203L4.01797 16.1883C4.19939 17.1383 5.07352 17.832 6.09609 17.832H15.2398C16.2591 17.832 17.1332 17.1414 17.318 16.1883L18.8254 8.33203C18.832 8.33203 18.8419 8.33203 18.8485 8.33203C19.5775 8.33203 20.168 7.77266 20.168 7.08203C20.168 6.39141 19.5775 5.83203 18.8485 5.83203C18.1195 5.83203 17.5291 6.39141 17.5291 7.08203C17.5291 7.36328 17.628 7.62266 17.793 7.83203L14.8539 10.0602C14.3294 10.457 13.551 10.2945 13.2508 9.72578L11.3607 6.14453Z\"\r\n fill=\"white\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"separator mt-8\"></div> -->\r\n </div>\r\n\r\n <div *ngIf=\"['storeopenandclose'].includes(type)\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"sub mt-2\">Set Buffer Time</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeBufferTime($event)\"\r\n [checked]=\"configData.aiConfig.storeOpenClose.buffer.openTime > 0 || configData.aiConfig.storeOpenClose.buffer.closeTime > 0\">\r\n </span>\r\n </div>\r\n <div class=\"detectiontext mt-2\">When enabled, alerts will be paused during the\r\n buffer period</div>\r\n </div>\r\n\r\n <div *ngIf=\"checkBuffer || configData.aiConfig.storeOpenClose.buffer.openTime || configData.aiConfig.storeOpenClose.buffer.closeTime\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-3\">\r\n <div class=\"section1 me-3\"> If Store Open time exceeds by </div>\r\n <div><input class=\"form-control form-control-solid p-3 text-center w-45px\"\r\n [(ngModel)]=\"configData.aiConfig.storeOpenClose.buffer.openTime\"\r\n type=\"text\" (keypress)=\"omit_special_char($event)\"\r\n autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (blur)=\"validateLimit($event)\" /></div>\r\n <div class=\"section1 ms-3\"> minutes </div>\r\n </div>\r\n <div class=\"d-flex align-items-center my-3\">\r\n <div class=\"section1 me-3\"> If Store Close time exceeds by </div>\r\n <div><input class=\"form-control form-control-solid p-3 text-center w-45px\"\r\n [(ngModel)]=\"configData.aiConfig.storeOpenClose.buffer.closeTime\"\r\n type=\"text\" (keypress)=\"omit_special_char($event)\"\r\n autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (blur)=\"validateLimit($event)\" /></div>\r\n <div class=\"section1 ms-3\"> minutes </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <div *ngIf=\"['scrum','cleaning'].includes(type) && clientId!=='452'\">\r\n <h2 class=\"section-leftheading mt-8\">Automatic Task\r\n <span class=\"form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n [(ngModel)]=\"configData.aiConfig.autoTask\"\r\n class=\"form-check-input mt-1 cursor-pointer\">\r\n </span>\r\n </h2>\r\n\r\n <div class=\"row ng-star-inserted\">\r\n <div class=\"col-lg-3\">\r\n <div class=\"d-flex align-items-center my-4\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mx-4\"> Select Approver </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-9\">\r\n <lib-chip-dropdown [data]=\"alertUsers\" [selectedData]=\"configData.approver\"\r\n (selectedList)=\"updateAlert($event,'approve')\"></lib-chip-dropdown>\r\n </div>\r\n\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <!-- <div>\r\n <div class=\"d-flex\">\r\n <div><h2 class=\"section-leftheading mt-8\">{{type === 'mobileusagedetection' ? 'To be Acknowledged by' : 'Approver'}}</h2></div>\r\n <div><span class=\"form-check form-switch ms-3 mt-6\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\" class=\"form-check-input mt-3 cursor-pointer\">\r\n </span></div>\r\n </div>\r\n <span>By enabling, the users will be able to acknowledge the checklist</span>\r\n <div *ngIf=\"type === 'mobileusagedetection'\" class=\"col-md-12 mt-8\">\r\n <div class=\"row mt-4\">\r\n <div class=\"col-md-3 mt-2 \">\r\n <span class=\"mx-4 sub\">If usage exceeds</span>\r\n </div>\r\n <div class=\"col-lg-1\">\r\n <div class=\"fv-row mb-5 fv-plugins-icon-container flex flex-column\">\r\n \r\n <input class=\"form-control form-control-solid w-55px\"\r\n [(ngModel)]=\"configData?.checkListDetails.alert.usageExceeds\" type=\"text\"\r\n (keypress)=\"omit_special_char($event)\" autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (blur)=\"validateLimit($event)\" />\r\n <span class=\"text-danger usageerror\" *ngIf=\"errormsg\">Please enter event count\r\n between 15 to 999</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mt-2\">\r\n <span class=\"sub\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row ng-star-inserted mt-3\">\r\n <div class=\"col-lg-3\">\r\n <div class=\"d-flex align-items-center my-5\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mx-4\">To be approved by </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"col-lg-9\">\r\n <lib-chip-dropdown [data]=\"alertUsers\" [selectedData]=\"configData.checkListDetails.approver\"></lib-chip-dropdown>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"separator mt-8\"></div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Alert Configuration -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <h2 class=\"section-leftheading\">Alert Configuration\r\n <!-- <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\"> <path d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g>\r\n <defs> <clipPath id=\"clip0_1874_66195\"> <rect width=\"16\" height=\"16\" fill=\"white\" /> </clipPath> </defs>\r\n </svg>\r\n </span> -->\r\n </h2>\r\n <div>\r\n <div *ngIf=\"['halfshutter'].includes(type)\"\r\n class=\"d-flex align-items-center p-2 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Alerts will be sent, If the store shutter is left half opened during the\r\n configured open & close time\r\n </span>\r\n </div>\r\n </div>\r\n <div>\r\n <div *ngIf=\"['tvcompliance'].includes(type)\"\r\n class=\"d-flex align-items-center p-2 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Alerts will be sent, when there is a breach happened between the\r\n configured time\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-3\"\r\n *ngIf=\"['halfshutter'].includes(type)\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Allow Buffer Time</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changealerttimeconfig($event)\"\r\n [checked]=\"configData.aiConfig.alertConfig.allowBuffer.enabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, alerts will be\r\n paused during the buffer period</div>\r\n </div>\r\n <div class=\"row ng-star-inserted\" *ngIf=\"alerttimekeyconfig\">\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\"> Store shutter can remain\r\n half-open, </div>\r\n </div>\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.alertConfig.allowBuffer.afterOpenTime\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of alertTimeConfig\" [value]=\"time\">{{\r\n time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header me-3\"> minutes after store open\r\n time and </div>\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.alertConfig.allowBuffer.beforeCloseTime\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of alertTimeConfig\" [value]=\"time\">{{\r\n time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes before store close\r\n time </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"threshold-container p-4\" *ngIf=\"['tvcompliance'].includes(type)\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Breached Detection Threshold</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input class=\"form-check-input custom-switch\" type=\"checkbox\"\r\n role=\"switch\" [(ngModel)]=\"isThresholdEnabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, detections over the\r\n configured daily limit are flagged as a breach</div>\r\n </div>\r\n <div>\r\n\r\n\r\n <div class=\"d-flex align-items-center gap-3 mt-4\" *ngIf=\"isThresholdEnabled\">\r\n <span class=\"text-secondary-blue fw-medium\">Flag, as breached if detections\r\n exceeds</span>\r\n\r\n <select class=\"form-select custom-select\" [(ngModel)]=\"detectionThreshold\"\r\n [disabled]=\"!isThresholdEnabled\">\r\n <option *ngFor=\"let opt of thresholdOptions\" [value]=\"opt\">{{ opt }}\r\n </option>\r\n </select>\r\n\r\n <span class=\"text-secondary-blue fw-medium\">in a day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Push Notifications -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Push Notifications</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n [checked]=\"configData.aiConfig.alertConfig.alertSendTo.enabled\"\r\n (change)=\"changenotificationconfig($event)\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Send notifications to Mobile, Web, or both -\r\n Configure as per your needs</div>\r\n </div>\r\n <div *ngIf=\"notificationkeyconfig\" class=\"mt-8\">\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Mobile Notifications</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-4\">\r\n <div class=\"col-lg-1\"> Send to </div>\r\n <div class=\"col-lg-11 fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.alertConfig.alertSendTo.mobile\"\r\n (selectedList)=\"updateNotificationAlert($event,'user','mobile')\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2 col-6\">Web Notifications</div>\r\n <div class=\"schedule-config-header mt-2 d-flex justify-content-end col-6\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"14\"\r\n viewBox=\"0 0 16 14\" fill=\"none\">\r\n <path\r\n d=\"M15.3346 1.66509V5.66509M15.3346 5.66509H11.3346M15.3346 5.66509L12.2413 2.75842C11.5248 2.04157 10.6384 1.51789 9.66476 1.23627C8.69114 0.95465 7.66204 0.924257 6.67349 1.14793C5.68495 1.3716 4.76917 1.84205 4.01161 2.51537C3.25406 3.18869 2.67941 4.04295 2.3413 4.99842M0.667969 12.3318V8.33176M0.667969 8.33176H4.66797M0.667969 8.33176L3.7613 11.2384C4.4778 11.9553 5.36422 12.479 6.33784 12.7606C7.31147 13.0422 8.34056 13.0726 9.32911 12.8489C10.3177 12.6252 11.2334 12.1548 11.991 11.4815C12.7485 10.8082 13.3232 9.9539 13.6613 8.99842\"\r\n stroke=\"#475467\" stroke-width=\"1.25\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"schedule-config-description mt-2 ms-3\"> Sync users from Mobile\r\n </span>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-1 cursor-pointer\"\r\n (change)=\"changesyncMobileWebconfig($event)\"\r\n [checked]=\"configData.aiConfig.alertConfig.alertSendTo.syncMobileWeb\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-4\">\r\n <div class=\"col-lg-1\"> Send to </div>\r\n <div class=\"col-lg-11 fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.alertConfig.alertSendTo.web\"\r\n (selectedList)=\"updateNotificationAlert($event,'user','web')\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Auto-Assign Tasks -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Auto-Assign Tasks</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeautotaskconfig($event)\"\r\n [checked]=\"configData.aiConfig.autoTaskConfig.enabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">On breach, tasks are auto-created and assigned\r\n to users</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-8\" *ngIf=\"autotaskkeyconfig\">\r\n <div class=\"col-lg-2\"> Select Approver </div>\r\n <div class=\"col-lg-10 fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.autoTaskConfig.approver\"\r\n (selectedList)=\"updateAutoTask($event,'user')\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Export data -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Export data</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeexportconfig($event)\"\r\n [checked]=\"configData.aiConfig.exportConfig.enabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Export your data in the format you need</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-8\" *ngIf=\"exportkeyconfig\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"mt-5 mb-5 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'ALL'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('ALL')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n All\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'CSV'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('CSV')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n CSV\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'PDF'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('PDF')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n PDF\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'PPT'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('PPT')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n PPT\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'ZIP'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('ZIP')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n ZIP\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"['custom'].includes(type)\" class=\"card-body bg-white mt-3 rounded-4 px-7\">\r\n <div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div>\r\n <h2 class=\"section-leftheading \">Assign<span class=\"mx-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\">\r\n <path\r\n d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1874_66195\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></h2>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ms-5 mt-3 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input selected-radio me-3 cursor-pointer\" type=\"radio\"\r\n name=\"stores\" [checked]=\"storeCoverage\" (click)=\"selectRadio('store','change')\">\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">Assign Stores and Clusters</label>\r\n </div>\r\n <div class=\"form-check d-flex align-items-center ms-5\">\r\n <input class=\"form-check-input selected-radio me-3 cursor-pointer\" type=\"radio\"\r\n name=\"users\" [checked]=\"userCoverage\" (click)=\"selectRadio('user','change')\">\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">Assign Users and Teams</label>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"storeCoverage && assignType ==='store'\"\r\n class=\"mt-5 ms-5 storeAssign sopTable d-flex\">\r\n <div>\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\" name=\"flag\"\r\n [(ngModel)]=\"configData.checkListDetails.enableNewDeployedStore\">\r\n </div>\r\n <div> <span class=\"ms-2 lineHeight\">Auto assign to newly deployed stores</span> </div>\r\n </div>\r\n\r\n <div class=\"d-flex ms-5 align-items-end justify-content-between\">\r\n <div class=\"d-flex overflow-auto h-45px w-75 mt-5\">\r\n <ul *ngIf=\"storeCoverage\"\r\n class=\"nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap\">\r\n <li (click)=\"selectedTab('store')\" class=\"nav-item cursor-pointer h-100\"><span\r\n [ngClass]=\"assignType ==='store' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Stores</span>\r\n </li>\r\n <li (click)=\"selectedTab('cluster')\" class=\"nav-item cursor-pointer h-100\"><a\r\n [ngClass]=\"assignType ==='cluster' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Clusters</a></li>\r\n </ul>\r\n <ul *ngIf=\"userCoverage\"\r\n class=\"nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap\">\r\n <li (click)=\"selectedTab('user')\" class=\"nav-item cursor-pointer h-100\"><a\r\n [ngClass]=\"assignType ==='user' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Users</a>\r\n </li>\r\n <li (click)=\"selectedTab('team')\" class=\"nav-item cursor-pointer h-100\"><a\r\n [ngClass]=\"assignType ==='team' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Teams</a></li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"!['cluster','team'].includes(assignType)\">\r\n <a *ngIf=\"storeCoverage\" (click)=\"addStoreComponent()\" type=\"button\"\r\n class=\"btn btn-outline px-4 ng-star-inserted mt-8\" style=\"white-space: nowrap;\"\r\n tabindex=\"0\"><span class=\"svg-icon svg-icon-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"create1\">Assign Store</span></a>\r\n <a *ngIf=\"userCoverage\" (click)=\"addStoreComponent()\" type=\"button\"\r\n class=\"btn btn-outline px-4 ng-star-inserted mt-8\" style=\"white-space: nowrap;\"\r\n tabindex=\"0\"><span class=\"svg-icon svg-icon-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"create1\">Assign User</span></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-100 ms-5\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">Selected <span>{{assignType | titlecase}}s</span> </div>\r\n </div>\r\n </div>\r\n <!-- *ngIf=\"!['cluster','team'].includes(assignType)\" -->\r\n <div class=\"w-100 pe-5\">\r\n <lib-multi-chip-dropdown *ngIf=\"storeList\" [items]=\"storeList\" [multi]=\"true\"\r\n [searchField]=\"['storeName','clusterName','storeId','userName','teamName']\"\r\n [searchKey]=\"searchKey\" [idField]=\"'_id'\" (selected)=\"updateAssign($event)\"\r\n (removed)=\"removedChip($event)\"\r\n [selectedValues]=\"configData?.checkListDetails?.assign\"></lib-multi-chip-dropdown>\r\n </div>\r\n <!-- <div *ngIf=\"['cluster','team'].includes(assignType)\" class=\"w-100 pe-5\">\r\n <lib-multi-chip-dropdown *ngIf=\"storeList\" [items]=\"storeList\" [multi]=\"true\" [searchField]=\"['storeName','clusterName','storeId','userName','teamName']\" [searchKey]=\"searchKey\" [idField]=\"'_id'\"\r\n (selected)=\"updateAssign($event)\" (removed)=\"removedChip($event)\" [selectedValues]=\"configData?.checkListDetails?.assign\"></lib-multi-chip-dropdown>\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"\" *ngIf=\"tableData.length || tableFilter.length || !showImage\">\r\n\r\n <div *ngIf=\"!tableLoading && tableArray?.length\"\r\n class=\"card-body px-0 mt-0 pt-0 pb-0 mx-4 mb-5\">\r\n <div class=\" w-100\">\r\n <div class=\"table-header mt-5 d-flex align-items-center justify-content-between\">\r\n <div class=\"table-title\">Selected <span>{{assignType | titlecase}}s</span> List\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-start\">\r\n <div class=\"me-3\">\r\n <input type=\"text\" data-kt-subscription-table-filter=\"search\"\r\n (change)=\"searchTableData()\" [(ngModel)]=\"tableFilter\"\r\n class=\"form-control form-control-solid w-200px ps-5 mx-1 me-4\"\r\n autocomplete=\"off\" autocapitalize=\"none\" spellcheck=\"false\"\r\n style=\"text-transform: none\" placeholder=\"Search...\">\r\n </div>\r\n\r\n <div *ngIf=\"!['cluster','team'].includes(assignType)\"\r\n class=\"position-relative w-100 mt-5 mb-5\">\r\n <button type=\"button\"\r\n class=\"btn py-3 btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\">\r\n <span class=\"me-3 cursor-pointer\" #upload\r\n (click)=\"file.click()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <span class=\"template-dropdown bg-white ms-3\">BulkUpload\r\n </span>\r\n </span>\r\n <span><input style=\"display: none;\" type=\"file\" #file\r\n id=\"kt_account_team_size_select_1\"\r\n (change)=\"onFileUpload($event)\" /></span>\r\n <span class=\"subtitle mx-3 me-2\"> | </span>\r\n <span class=\"cursor-pointer\" (click)=\"openDropdown($event)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 9L12 15L18 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n\r\n <div *ngIf=\"dropDown\"\r\n class=\"card template-dropdown h-40px w-100 position-absolute rounded-3 z-1 top-50px end-0\">\r\n <ul class=\"list-unstyled mb-0 w-auto cursor-pointer\"\r\n (click)=\"bulkuploadModel()\">\r\n <li class=\"px-5 fw-semibold cursor-pointer py-2\">Download\r\n Template</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['cluster','team'].includes(assignType)\">\r\n <button type=\"button\"\r\n class=\"btn py-3 btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\"\r\n (click)=\"downloadTemplateV2()\">\r\n <span class=\"me-3 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M8.125 13.125H16.3562L14.7438 14.7438L15.625 15.625L18.75 12.5L15.625 9.375L14.7438 10.2562L16.3562 11.875H8.125V13.125Z\"\r\n fill=\"black\" />\r\n <path\r\n d=\"M13.75 8.75001V6.25001C13.7505 6.16776 13.7347 6.08622 13.7036 6.01007C13.6725 5.93392 13.6267 5.86466 13.5688 5.80626L9.19375 1.43126C9.13535 1.37333 9.06609 1.32751 8.98994 1.2964C8.91379 1.2653 8.83225 1.24953 8.75 1.25001H2.5C2.16848 1.25001 1.85054 1.38171 1.61612 1.61613C1.3817 1.85055 1.25 2.16849 1.25 2.50001V17.5C1.25 17.8315 1.3817 18.1495 1.61612 18.3839C1.85054 18.6183 2.16848 18.75 2.5 18.75H12.5C12.8315 18.75 13.1495 18.6183 13.3839 18.3839C13.6183 18.1495 13.75 17.8315 13.75 17.5V16.25H12.5V17.5H2.5V2.50001H7.5V6.25001C7.5 6.58153 7.6317 6.89947 7.86612 7.13389C8.10054 7.36831 8.41848 7.50001 8.75 7.50001H12.5V8.75001H13.75ZM8.75 6.25001V2.75626L12.2438 6.25001H8.75Z\"\r\n fill=\"black\" />\r\n </svg> <span class=\"template-dropdown bg-white ms-3\">Export\r\n </span>\r\n </span>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row mt-2\">\r\n <div class=\"col-lg-12\" *ngIf=\"!tableData?.length && !tableFilter && !showImage\">\r\n <div\r\n class=\"card-body my-8 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for the <span>{{assignType}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"pt-0 mx-4\" *ngIf=\"tableArray.length\">\r\n <div class=\"sopTable table-responsive overflow-hidden\">\r\n <div *ngIf=\"tableLoading\"\r\n 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>\r\n <div class=\"col-lg-12\" *ngIf=\"tableFilter && !tableData?.length\">\r\n <div\r\n class=\"card-body my-8 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for the\r\n <span>{{assignType}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body-sop\" *ngIf=\"tableData.length && !tableLoading\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"storeCoverage\" class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <span\r\n *ngIf=\"sortColumn === 'storeName' && sortBy !== 1 || sortColumn !== 'storeName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'storeName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userName')\">\r\n SPOC Name\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== 1 || sortColumn !== 'userName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">\r\n SPOC Email\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== 1 || sortColumn !== 'userEmail' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th *ngIf=\"assignType ==='cluster'\" class=\"text-align-left\">\r\n <div class=\"cursor-pointer\"\r\n (click)=\"sortData('clusterName')\">\r\n Cluster Name\r\n <span\r\n *ngIf=\"sortColumn === 'clusterName' && sortBy !== 1 || sortColumn !== 'clusterName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'clusterName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of tableData;let i=index\">\r\n <td>{{data.storeName}}\r\n </td>\r\n <td>{{data.userName ? data.userName : '--'}}</td>\r\n <td>{{data.userEmail ? data.userEmail : '--'}}</td>\r\n <td *ngIf=\"assignType === 'cluster'\">{{data.clusterName ?\r\n data.clusterName : '--'}}</td>\r\n </tbody>\r\n </table>\r\n <table *ngIf=\"userCoverage\" class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userName')\">\r\n User Name\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== 1 || sortColumn !== 'userName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">\r\n User Email\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== 1 || sortColumn !== 'userEmail' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th *ngIf=\"assignType ==='team'\" class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('teamName')\">\r\n Teams Name\r\n <span\r\n *ngIf=\"sortColumn === 'teamName' && sortBy !== 1 || sortColumn !== 'teamName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'teamName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of tableData;let i=index\">\r\n <td>\r\n <span\r\n class=\"form-check-label mx-4 line-height\">{{data.userName}}</span>\r\n </td>\r\n <td>{{data.userEmail ? data.userEmail : '--'}}</td>\r\n <td *ngIf=\"assignType ==='team'\">{{data.teamName ? data.teamName\r\n : '--'}}</td>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"size\" [currentPage]=\"currentValue\"\r\n [totalItems]=\"recordsTotal\" [paginationSizes]=\"paginationSize\"\r\n [pageSize]=\"size\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n <br>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"tableLoading1 && showImage\"\r\n 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>\r\n <div>\r\n <div *ngIf=\"!tableArray.length && !tableLoading1 && !tableFilter.length && showImage && !configData.checkListDetails.assignedUsers && !['cluster','team'].includes(assignType)\"\r\n class=\"row mb-6\">\r\n <div class=\"col-lg-12 assignpadding mb-10 mt-10\">\r\n <div class=\"row\">\r\n <div class=\"hr w-100 border border-1 position-relative\">\r\n <div\r\n class=\"position-absolute template-dropdown orposition bg-white w-100px\">\r\n or</div>\r\n </div>\r\n <div class=\"uploadpadding mt-10\">\r\n <ul\r\n class=\"subtext list-unstyled d-flex flex-column align-items-center mx-4\">\r\n <li>Use the template to upload multiple <span\r\n *ngIf=\"storeCoverage\">stores</span> <span\r\n *ngIf=\"userCoverage\">users</span> at once.</li>\r\n <li> Download the template here - <span (click)=\"downloadTemplateV2()\"\r\n class=\"cursor-pointer\"><span class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"text-primary\">Download\r\n Template</span></span></li>\r\n <li> Add your data to the Template File</li>\r\n </ul>\r\n </div>\r\n <div class=\"w-100 border border-2 text-center border-dashed rounded-3 border-primary p-5\"\r\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\" (click)=\"file.click()\">\r\n <div class=\"\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"46\"\r\n viewBox=\"0 0 46 46\" fill=\"none\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_7979_5202)\">\r\n <path\r\n d=\"M26.3335 26.3332L23.0002 22.9999M23.0002 22.9999L19.6669 26.3332M23.0002 22.9999V30.4999M29.9919 28.3249C30.8047 27.8818 31.4467 27.1806 31.8168 26.3321C32.1868 25.4835 32.2637 24.5359 32.0354 23.6388C31.807 22.7417 31.2865 21.9462 30.5558 21.3778C29.8251 20.8094 28.9259 20.5005 28.0002 20.4999H26.9502C26.698 19.5243 26.2278 18.6185 25.5752 17.8507C24.9225 17.0829 24.1042 16.4731 23.182 16.0671C22.2597 15.661 21.2573 15.4694 20.2503 15.5065C19.2433 15.5436 18.2578 15.8085 17.3679 16.2813C16.4779 16.7541 15.7068 17.4225 15.1124 18.2362C14.518 19.05 14.1158 19.9879 13.936 20.9794C13.7563 21.9709 13.8036 22.9903 14.0746 23.961C14.3455 24.9316 14.8329 25.8281 15.5002 26.5832\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7979_5202\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></div>\r\n <div class=\"storetext cursor-pointer mb-2 fw-bold\"><span\r\n class=\"text-primary text-decoration-underline\">Click To\r\n Upload</span>\r\n or drag and drop\r\n </div>\r\n <div class=\"headeralign fw-400\">the data added template file for processing.\r\n </div>\r\n <input style=\"visibility: hidden;\" type=\"file\" #file\r\n id=\"kt_account_team_size_select_1\" (change)=\"onFileUpload($event)\" />\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"!tableArray.length && !tableLoading1 && !tableFilter.length && showImage && !configData.checkListDetails.assignedUsers && ['cluster','team'].includes(assignType)\"\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div\r\n class=\"card-body my-8 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for the <span>{{assignType}}</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"type !== 'custom'\" class=\"\">\r\n <lib-assign [configData]=\"configData\" [uploadData]=\"uploadData\" [configureType]=\"configureType\"\r\n (dataToParent)=\"handleDataFromChild($event)\"></lib-assign>\r\n </div>\r\n\r\n <!-- Advanced Configuration -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type) && userType === 'tango'\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header\">Advanced Configuration</div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header\">Data Processing</div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When you want to process this\r\n checklist report</div>\r\n <div class=\"d-flex align-items-center me-6\">\r\n <div class=\"col-sm-12 cursor-pointer border border-2 rounded-4 px-3 mb-2 mt-2 ms-4 me-4\"\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'live' ? 'advancedConfigureAcite': ''\">\r\n <div class=\"d-flex h-70px rounded-3 p-3 mt-2\">\r\n <span class=\"mt-1\">\r\n <input id=\"dataprocessing\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"dataprocessing\" value=\"live\"\r\n (change)=\"changeDataprocessing('live')\"\r\n [(ngModel)]=\"selectedDataprocessing\">\r\n </span>\r\n <span class=\"\">\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'live' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Live Notifications</span>\r\n <span class=\"schedule-config-description mt-2\">Triggered\r\n immediately whenever a detection or breach\r\n occurs</span>\r\n </div>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center me-6\">\r\n <div class=\"col-sm-12 cursor-pointer border border-2 rounded-4 px-3 mb-2 mt-2 ms-4 me-4\"\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'eod' ? 'advancedConfigureAcite': ''\">\r\n <div class=\"d-flex h-70px rounded-3 p-3 mt-2\">\r\n <span class=\"mt-1\">\r\n <input id=\"dataprocessing\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"dataprocessing\" value=\"eod\"\r\n (change)=\"changeDataprocessing('eod')\"\r\n [(ngModel)]=\"selectedDataprocessing\">\r\n </span>\r\n <span class=\"\">\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'eod' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Daily (EOD)</span>\r\n <span class=\"schedule-config-description mt-2\">Full\r\n detection/breach history delivered the next day for\r\n smarter decisions</span>\r\n </div>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Detected Status</div>\r\n <div class=\"d-flex\">\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changedetectedstatusconfig($event)\"\r\n [checked]=\"configData.aiConfig.advancedConfig.detectedStatus.enabled\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Choose which detections to\r\n display on dashboard</div>\r\n <div class=\"d-flex align-items-center\" *ngIf=\"detectedstatuskeyconfig\">\r\n <div class=\"mt-5 mb-5 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\"\r\n type=\"checkbox\" [value]=\"'detected'\"\r\n (change)=\"changeDetectionStatus($event)\"\r\n [checked]=\"selectedDetectionStatus.includes('detected')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold ms-2\">\r\n Breached Detections\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\"\r\n type=\"checkbox\" [value]=\"'nondetected'\"\r\n (change)=\"changeDetectionStatus($event)\"\r\n [checked]=\"selectedDetectionStatus.includes('nondetected')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold ms-2\">\r\n Non Breached Detections\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Audit Required</div>\r\n <div class=\"d-flex\">\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeauditrequiredconfig($event)\"\r\n [checked]=\"configData.aiConfig.advancedConfig.auditConfig.enabled\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Is an audit required for this\r\n checklist</div>\r\n\r\n <div class=\"border border-2 rounded-4 px-3 mb-4 mt-4\"\r\n *ngIf=\"auditkeyconfig\">\r\n <div class=\"schedule-config-header mt-4\">Input Source File Type</div>\r\n <div class=\"schedule-config-description mt-2\">Is an audit required for\r\n this checklist</div>\r\n <div class=\"ms-8 mt-5 mb-5 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input id=\"image\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"stores\" value=\"image\"\r\n (change)=\"changeInputSourceFileRadio('image')\"\r\n [(ngModel)]=\"selectedSource\">\r\n <label for=\"image\"\r\n class=\"uploadtext cursor-pointer fw-semibold\">Image</label>\r\n </div>\r\n <div class=\"form-check d-flex align-items-center ms-5\">\r\n <input id=\"video\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"stores\" value=\"video\"\r\n (change)=\"changeInputSourceFileRadio('video')\"\r\n [(ngModel)]=\"selectedSource\">\r\n <label for=\"video\"\r\n class=\"uploadtext cursor-pointer fw-semibold\">Video</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n<ng-template #bulkupload let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-5\">\r\n <div class=\"card-title mt-3\">\r\n <div class=\"bg-light-primary rounded-5 w-40px h-40px d-flex justify-content-center align-items-center\">\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=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div> <span class=\"config-heading fw-semibold ms-5 w-auto\">Bulk Upload</span>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"flex-column\">\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">Step 1 - <a\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"downloadTemplateV2()\">Download the\r\n template here</a></div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">Step2 - Add your data to the Template File with\r\n existing <span *ngIf=\"storeCoverage\">store</span> <span *ngIf=\"userCoverage\">user</span> data</div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">Step3 - Upload it below for processing</div>\r\n\r\n <div class=\"fw-bold storeAssign mt-10\">**Note : On upload, all the existing data will be replaced</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"model.close()\">Cancel</button>\r\n <button class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"file1.click()\">Upload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Assign <span\r\n *ngIf=\"storeCoverage\">Stores</span> <span *ngIf=\"userCoverage\">Users</span></span></div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total <span *ngIf=\"storeCoverage\">Stores</span> <span\r\n *ngIf=\"userCoverage\">Users</span></div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">\r\n {{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div *ngIf=\"!showStore&&!showTeam&&!showCluster&&!showUser&&!showInactive\">You're about to assign\r\n {{getStoreCounts(excelData)}} <span *ngIf=\"storeCoverage\">stores</span><span\r\n *ngIf=\"userCoverage\">users</span> to the checklist. Are you sure want to proceed?</div>\r\n <div *ngIf=\"storeCoverage && showStore\" class=\"mt-3\">Store <span\r\n *ngFor=\"let store of validatedStore;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a routerLink=\"/manage/stores\" [queryParams]=\"{tyoe: 'stores'}\"\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"closeactivepopup()\">Onboard Stores</a>\r\n </div>\r\n <div *ngIf=\"userCoverage && showUser\" class=\"mt-3\">User <span\r\n *ngFor=\"let store of validatedUser;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a class=\"text-decoration-underline cursor-pointer\"\r\n (click)=\"closeactivepopup();confirmUserpopup()\">Onboard Users</a></div>\r\n <div *ngIf=\"userCoverage && showTeam\" class=\"mt-3\">Team <span\r\n *ngFor=\"let store of validatedTeam;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a routerLink=\"/manage/users/client\"\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"closeactivepopup()\">Create Team</a>\r\n </div>\r\n <div *ngIf=\"storeCoverage && showCluster\" class=\"mt-3\">user <span\r\n *ngFor=\"let store of validatedCluster;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a routerLink=\"/manage/stores\" class=\"text-decoration-underline cursor-pointer\"\r\n [queryParams]=\"{tyoe: 'cluster'}\" (click)=\"closeactivepopup()\">Create Cluster</a></div>\r\n <div *ngIf=\"storeCoverage && showUser\" class=\"mt-3\">User <span\r\n *ngFor=\"let store of validatedUser;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a class=\"text-decoration-underline cursor-pointer\"\r\n (click)=\"closeactivepopup();confirmUserpopup()\">Onboard Users</a></div>\r\n <div *ngIf=\"storeCoverage && showInactive\" class=\"mt-3\">Store <span\r\n *ngFor=\"let store of inactiveStores;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for is inactive, <a routerLink=\"/manage/stores\" [queryParams]=\"{tyoe: 'stores'}\"\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"closeactivepopup()\">Onboard Stores</a>\r\n </div>\r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct and complete layout information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\"\r\n [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError&&!showStore&&!showCluster&&!showUser&&!showTeam&&!showInactive\"\r\n class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n <button *ngIf=\"excelError||showStore||showCluster||showUser||showTeam || showInactive\"\r\n class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"Reupload();\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event,'reupload')\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmUser let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-5\">\r\n <div class=\"card-title d-flex flex-column mt-3\">\r\n <div class=\"bg-light-primary rounded-5 w-40px h-40px d-flex justify-content-center align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEF0C7\" />\r\n <path\r\n d=\"M27.9998 24.0012V28.0012M27.9998 32.0012H28.0098M26.2898 18.8612L17.8198 33.0012C17.6451 33.3036 17.5527 33.6465 17.5518 33.9957C17.5508 34.3449 17.6413 34.6883 17.8142 34.9917C17.9871 35.2951 18.2365 35.5479 18.5375 35.725C18.8385 35.9021 19.1806 35.9973 19.5298 36.0012H36.4698C36.819 35.9973 37.1611 35.9021 37.4621 35.725C37.7631 35.5479 38.0124 35.2951 38.1854 34.9917C38.3583 34.6883 38.4488 34.3449 38.4478 33.9957C38.4468 33.6465 38.3544 33.3036 38.1798 33.0012L29.7098 18.8612C29.5315 18.5673 29.2805 18.3243 28.981 18.1557C28.6814 17.987 28.3435 17.8984 27.9998 17.8984C27.656 17.8984 27.3181 17.987 27.0186 18.1557C26.7191 18.3243 26.468 18.5673 26.2898 18.8612Z\"\r\n stroke=\"#DC6803\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FFFAEB\" stroke-width=\"8\" />\r\n </svg>\r\n </div><br>\r\n <div class=\"config-heading fw-semibold w-auto\">New User found in uploaded file</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"flex-column\">\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">This CSV contains a new User. Add new User in the\r\n User Management under Manage menu.</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <!-- <button class=\"btn btn-md btn-default btn-outline\" routerLink=\"/manage/users/client\" (click)=\"closeactivepopup()\">Skip New Entries</button> -->\r\n <button class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"model.close('confirm')\">Invite\r\n Selected</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".card{border-radius:16px}.section1{color:var(--Black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.row>*{padding-right:0}.storeAssign a:hover,.table-header a:hover{text-decoration:underline!important}.checkconfigcont .card{height:100%}.checkconfigcont .section{display:inline-block;width:160px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important}.checkconfigcont .radio{font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .mat-radio-button.mat-primary .mat-radio-inner-circle,.checkconfigcont .mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),.checkconfigcont .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple,.checkconfigcont .mat-radio-button.mat-primary:active .mat-radio-persistent-ripple{background-color:#00a3ff}.checkconfigcont .section-leftheading1{overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checkconfigcont .section{color:var(--Black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .scedule-text{overflow:hidden;color:var(--Black, #101828);text-overflow:ellipsis;font-size:12px;font-weight:400;line-height:18px}.checkconfigcont .svg-icon svg{height:1.25em;width:1.25em}.checkconfigcont .section-leftheading{overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:20px;font-style:normal;font-weight:600;line-height:28px}.checkconfigcont .sub{color:var(--gray-700, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .subopen{color:var(--black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .symbol-circle{margin-left:-6px}.checkconfigcont .checklistlabel{padding:4px 12px;justify-content:center;align-items:center;border-radius:16px;background:var(--gray-100, #F2F4F7)}.checkconfigcont .subtitle{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0em;text-align:left;color:#667085}.checkconfigcont .template-dropdown{background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.checkconfigcont .form-control.form-control-solid{display:flex;padding:11px 14px;align-items:center;gap:8px;align-self:stretch;border-radius:8px;border:1px solid var(--gray-500, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d}.checkconfigcont .searchplaceholder{font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.checkconfigcont .custom-appbox{border-radius:12px}.checkconfigcont input::placeholder{color:#667085!important;opacity:1}.checkconfigcont .checklisttext{color:var(--gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.checkconfigcont .separator{height:1px;align-self:stretch}.checkconfigcont ::ng-deep .mat-form-field-infix{color:#101828;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;width:500px!important;line-height:24px}.checkconfigcont ::ng-deep .storechip{color:#101828;font-size:16px;width:100%;font-family:Inter;font-weight:400;width:780px!important;line-height:24px}.checkconfigcont ::ng-deep .mat-chip{font-family:Inter;font-style:normal;font-weight:500;font-size:14px;line-height:17px;text-align:center;color:#5e6278!important}.checkconfigcont ::ng-deep .mat-chip-list-wrapper .mat-standard-chip{margin:4px}.checkconfigcont ::ng-deep .matChip-store{height:100px;display:block;overflow-y:scroll;overflow-x:hidden}.checkconfigcont ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.checkconfigcont ::ng-deep .mat-form-field-underline{display:none}.checkconfigcont ::ng-deep .mat-form-field-ripple{display:none}.checkconfigcont .subtext{color:var(--gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px;align-items:center;gap:8px;align-self:stretch}.checkconfigcont .zone-subscription{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:24px}.checkconfigcont .upload{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d;display:flex;padding:10px 18px;justify-content:center;align-items:center;gap:8px;flex:1 0 0}.checkconfigcont .upload:hover{background:#f3f8fd!important;border:1px solid var(--gray-300, #D0D5DD)!important}.checkconfigcont .uploadtext{color:var(--gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .savedraft{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);padding:10px 18px;justify-content:center;align-items:center;gap:8px;box-shadow:0 1px 2px #1018280d}.checkconfigcont .savedraft:hover{background:#f3f8fd!important;border:1px solid var(--gray-300, #D0D5DD)!important}.checkconfigcont .savedrafttext{color:var(--gray-700, #344054);font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .configureAcite{border:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-50, #EAF8FF)}.checkconfigcont .text-primary{color:var(--primary-700, #009BF3)!important}.checkconfigcont .border-primary{border:1px dashed var(--Primary-500, #33B5FF)!important;background:var(--Primary-25, #F6FCFF)!important}.checkconfigcont .download{border-radius:8px;border:1px solid var(--primary-50, #EAF8FF);background:var(--primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;display:flex;padding:10px 18px;justify-content:center;align-items:center;gap:8px;flex:1 0 0;color:var(--primary-700, #009BF3);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .svg-icon1:hover:not(.svg-active){color:#fff}.checkconfigcont .btn-outline{border:1px solid lightgrey!important;padding:calc(.75rem + 1px) calc(1.5rem + 1px)}.checkconfigcont .footertext{color:#000;font-family:Inter;font-size:14px;font-weight:500;line-height:20px;text-align:right}.checkconfigcont .footer1{text-align:end}.checkconfigcont ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#009ef7!important}.checkconfigcont ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#009ef7!important}.checkconfigcont ::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:#1da1f21a;color:#009ef7}.checkconfigcont ::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#009ef7}.checkconfigcont ::ng-deep th.mat-header-cell:first-of-type,.checkconfigcont ::ng-deep td.mat-cell:first-of-type,.checkconfigcont ::ng-deep td.mat-footer-cell:first-of-type{padding-right:none}.checkconfigcont ::ng-deep .sopTable input{border:none;padding:0!important}.checkconfigcont ::ng-deep .sopTable input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkconfigcont ::ng-deep .sopTable input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}.checkconfigcont ::ng-deep .sopTable input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.checkconfigcont ::ng-deep .card-body-sop{border:1px solid var(--gray-200, #EAECF0);background:var(--white, #FCFCFD);border-radius:6px}.checkconfigcont .schedule{color:var(--gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .user{color:var(--gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .dropdown{margin-left:-9%}.checkconfigcont .pillstyle{color:var(--gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .leftcard{position:relative}.checkconfigcont .editques{position:absolute!important;left:12%;transform:translate(-5%);bottom:30px}.checkconfigcont .orposition{top:0;left:50%;transform:translate(-50%,-50%);text-align:center}.checkconfigcont .questiontype{color:var(--primary-700, #009BF3);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;outline:none!important;background-color:#f1faff!important}.checkconfigcont .btn-left{display:inline-block;width:100%;font-size:16px;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis!important}.checkconfigcont .nav{display:flex;align-items:center;gap:16px;flex:1 0 0;align-self:stretch;--bs-nav-link-color: none}.checkconfigcont .form-control.form-control-solid,.checkconfigcont .form-select.form-select-solid{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d}.checkconfigcont .checklistturnoff{border-radius:8px;border:1px solid var(--gray-200, #EAECF0);background:var(--white, #FFF);display:flex;padding:16px;align-items:flex-start;align-self:stretch}.checkconfigcont .btn.btn-outline.btn-outline-dashed.btn-outline-default:hover:not(.btn-active){border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d;display:flex;padding:10px 18px;justify-content:center;align-items:center;gap:8px;flex:1 0 0}.checkconfigcont .sopTable input{border:none;padding:0!important}.checkconfigcont .sopTable input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkconfigcont .sopTable input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}.checkconfigcont .sopTable input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.checkconfigcont .option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px}.checkconfigcont .card hr{width:-webkit-fill-available}.checkconfigcont .imgnodata1{width:216px;height:245px}.checkconfigcont .editablecontent{display:inline-block;width:230px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important}.checkconfigcont #navfont{font-size:1.15rem!important}.checkconfigcont .imgdata{width:50%;height:50%}.checkconfigcont .imgnodata{width:312px;height:312px;margin-top:-4%}.checkconfigcont .card .card-header{display:flex;justify-content:space-between;align-items:stretch;flex-wrap:wrap;min-height:70px;padding:0 .25rem;background-color:transparent;border-bottom:none}.checkconfigcont ::ng-deep .mat-select{background:#f5f8fa;border-radius:8px}.checkconfigcont ::ng-deep .mat-select-value{height:42px}.checkconfigcont ::ng-deep .multiselect-dropdown .dropdown-btn{border:none!important}.checkconfigcont ::ng-deep .multiselect-dropdown .dropdown-list{border:none;box-shadow:0 1px 5px #959595;margin-left:-12px}.checkconfigcont ::ng-deep .multiselect-dropdown:focus-visible{border:none!important;box-shadow:0 1px 5px #959595;margin-left:-12px;max-height:250px}.checkconfigcont .custom-checkbox{--checkbox-background-checked: white !important;--checkmark-color: #009BF3;--border-color: #009BF3;--border-radius: 4px }.checkconfigcont .form-check.form-check-custom{display:flex;margin:0;height:44px;padding:12px 24px;align-items:center;gap:12px;align-self:stretch}.checkconfigcont .tabsub{color:var(--gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .selectstore{color:var(--primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.checkconfigcont .headeralign{color:var(--gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checkconfigcont .rotate{transform:rotate(180deg);transition:1s}.checkconfigcont .weekstyle{border-radius:20px;background:var(--gray-100, #F2F4F7)}.checkconfigcont ::ng-deep .swal2-popup.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;min-width:2em;height:0em;margin:0 .5em 0 0}.checkconfigcont ::ng-deep .listitem{display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem 1rem;background-color:#f3f6f9;margin-top:.75rem;border-radius:.42rem}.checkconfigcont ::ng-deep .list{overflow-y:auto}.checkconfigcont ::ng-deep .listitemlabel{font-size:13px!important;font-weight:600;font-family:Inter;color:#7e8299}.checkconfigcont ::ng-deep .swal2-container{padding:.4em!important}.checkconfigcont ::ng-deep .swal2-icon{border:1px solid white!important}.checkconfigcont ::ng-deep body.swal2-toast-shown .swal2-container{width:500px!important}.checkconfigcont ::ng-deep .swal2-popup.swal2-toast .swal2-title{margin:9px 5px auto!important}.checkconfigcont ::ng-deep .label{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.checkconfigcont ::ng-deep .form-check-input[disabled]~.form-check-label.spocName,.checkconfigcont ::ng-deep .form-check-input:disabled~.form-check-label.spocName{opacity:unset!important}.checkconfigcont tr.mat-header-row{height:56px;border-bottom:1px solid var(--gray-200, #EAECF0);background:var(--gray-25, #FCFCFD)}.checkconfigcont .detectiontext{color:var(--gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .alert{border-radius:16px;background:var(--Gray-100, #F2F4F7)}.checkconfigcont .alert .text{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.checkconfigcont .alerttext{color:var(--primary-600, #00A3FF);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checkconfigcont .alertlabel{width:24px;height:24px;padding:4px 0 2px;justify-content:center;align-items:center;border-radius:200px;background:var(--primary-50, #EAF8FF)}.checkconfigcont .create{color:var(--white, #FFF);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .create1{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.checkconfigcont .createbuttons{padding:10px 18px;justify-content:center;align-items:center;gap:8px;border-radius:8px;border:1px solid var(--primary-600, #00A3FF);background:var(--primary-600, #00A3FF);box-shadow:0 1px 2px #1018280d}.checkconfigcont .alertsinput{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px;align-items:center;gap:8px}.checkconfigcont .usageerror{display:block;width:255px}.checkconfigcont .reupload{padding:10px 18px!important;justify-content:center;align-items:center;gap:8px;flex:1 0 0;border-radius:8px;border:1px solid var(--primary-600, #00A3FF);background:var(--primary-600, #00A3FF);width:220px;cursor:pointer;box-shadow:0 1px 2px #1018280d}.checkconfigcont .reuploadtext{color:var(--White, #FFF);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;cursor:pointer}.checkconfigcont .download{border-radius:8px;border:1px solid var(--primary-50, #EAF8FF);background:var(--primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;padding:10px 18px!important;justify-content:center;align-items:center;gap:8px;width:220px}.checkconfigcont .downloadtext{color:var(--primary-700, #009BF3);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .assignpadding{padding:0 40px}.checkconfigcont .uploadpadding{padding:0 20% 9px}::ng-deep .swal2-popup.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;min-width:2em;height:0em;margin:0 .5em 0 0}::ng-deep .listitem{display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem 1rem;background-color:#f3f6f9;margin-top:.75rem;border-radius:.42rem}::ng-deep .question-left{max-height:50vh;overflow:auto;overflow-x:hidden}::ng-deep .toasttitile{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}::ng-deep .list{overflow-y:auto}::ng-deep .listitemlabel{font-size:13px!important;font-weight:600;font-family:Inter;color:#7e8299}::ng-deep .swal2-container{padding:.4em!important}::ng-deep .swal2-icon{border:1px solid white!important}::ng-deep body.swal2-toast-shown .swal2-container{width:500px!important}::ng-deep .swal2-popup.swal2-toast .swal2-title{margin:9px 5px auto!important}::ng-deep .label{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}::ng-deep .matWidth{margin-left:12px;margin-right:12px}::ng-deep .mat-tooltip{white-space:pre-line}::ng-deep .custom-test{color:var(--gray-700, #344054)!important;text-align:start;font-family:Inter;font-size:12px;font-style:normal;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;font-weight:600;line-height:18px;background:#fff}.checkconfigcont .matChip-store{height:113px;display:block;overflow-y:scroll;overflow-x:hidden}.emailalert{position:relative;height:500px!important;overflow:auto!important;overflow-x:hidden!important}.emailalert1{overflow-y:auto!important;height:10%!important;position:relative}.active-question{color:var(--primary-700, #009BF3);font-size:16px;font-style:normal;font-weight:500;line-height:24px;display:flex;padding:8px 12px;align-items:center;gap:105px;align-self:stretch;border-radius:6px;background:var(--primary-50, #EAF8FF)}.q-btn{color:var(--gray-700, #344054);font-size:16px;font-style:normal;font-weight:500;line-height:24px;display:flex;padding:8px 12px;align-items:center;gap:105px;align-self:stretch;border-radius:6px;background:var(--primary-50, white)}.concise-question{display:inline-block;width:100%;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis!important;text-align:left}@media screen and (min-width: 1400px){.emailalert{position:relative;height:700px!important;overflow:auto!important;overflow-x:hidden!important}}::ng-deep .swal2-html-container{overflow:hidden!important}.badgeColor{background-color:#fffaeb!important;color:#b54708!important;font-family:Inter;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0em;text-align:center}.config-heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px;width:35%}.ps-20{padding-left:7rem!important}.ps-18{padding-left:6.5rem!important}.remove{color:var(--Gray-500, #667085);font-size:12px;font-weight:600;line-height:18px;text-decoration-line:underline;text-transform:capitalize}.fw-400{font-weight:400}.chip-container{margin-top:10px}.mat-chip{margin:5px}.dropdown-menu{position:absolute;top:100%;left:0;right:0;background-color:#fff;z-index:1000;display:block;box-sizing:border-box;height:0%}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.formSeach{width:95%}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.nav-item .nav-link:hover{border-bottom:none!important}.nav-item .nav-link.active{border-radius:10px!important;border-bottom:none!important}.nav-item .bg-light-primary{background:var(--Primary-50, #EAF8FF)!important}.storetext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.position-relative{position:relative!important}.content{background-color:#fff;padding:10px 22px 10px 10px;border-radius:5px;box-shadow:0 0 10px #0000001a}.badge-pill{display:flex;padding:2px 6px 2px 8px;justify-content:center;align-items:center;gap:4px;border-radius:16px;background:var(--Gray-100, #F2F4F7)}.badge-specificdate{max-width:100%;overflow-x:hidden;white-space:normal;display:flex;flex-wrap:wrap}.badge-specificdate .badge{margin-bottom:8px}.bg-color-disabled{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}a.cursor-default{cursor:default!important;background-color:unset!important}.form-control.form-control-solid.disabled{background-color:#eef3f7!important}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.selectDay{background-color:var(--bs-primary)!important}a.selectDay span{color:#fff!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}tr th .form-check-label,tr td .form-check-label{color:var(--Gray-700, #344054)!important}:host::ng-deep .schedule .md-drppicker .btn{line-height:10px!important}:host::ng-deep .schedule .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .schedule .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .schedule .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .schedule .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 .schedule .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 .schedule .md-drppicker td.active,:host::ng-deep .schedule .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 .schedule .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .schedule .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .schedule .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 .schedule table th,:host::ng-deep .schedule table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .schedule .md-drppicker td.available.prev,:host::ng-deep .schedule .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 .schedule .md-drppicker td.available.next,:host::ng-deep .schedule .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 .schedule 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 .schedule .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}:host::ng-deep .schedule .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .schedule .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.fontSize{font-size:14px}.margin{margin-top:2px}.w-20{width:20%!important}.w-80{width:80%!important}.approver{color:var(--gray-700, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.line-height{line-height:25px}.storeAssign{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.selected-radio{width:1.5rem!important;height:1.5rem!important}.lineHeight{line-height:27px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.schedule-config-header{color:var(--Black, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:24px}.schedule-config-description{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:18px}.schedule-config-sub-header{color:var(--Black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.advancedConfigureAcite{border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--Primary-50, #EAF8FF)}.bg-light-custom{background-color:#f8fafc;min-height:100vh}.config-card{background:#fff;border:1px solid #eef2f6;border-radius:12px;box-shadow:0 2px 4px #00000003}.extra-small{font-size:.75rem}.tag-input-box{border:1px solid #e2e8f0;border-radius:8px;background:#fcfcfd;min-height:45px}.badge-tag{background:#e9ecef;color:#475467;padding:4px 12px;border-radius:20px;font-size:.85rem}.chip-container{border:1px solid #e2e8f0;border-radius:8px;display:flex;gap:8px;background:#fff;min-height:38px;align-items:center;padding-left:10px!important}.user-chip{background:#f0f9ff;border:1px solid #e0f2fe;border-radius:6px;padding:2px 8px;display:flex;align-items:center;font-size:.75rem}.user-chip .initials{color:#0ea5e9;font-weight:700;margin-right:6px}.user-chip .name{color:#344054}.info-banner{background:#f1f5f9;padding:10px 15px;border-radius:10px;font-size:.85rem;color:#64748b}.threshold-inner-card{border:1px solid #e2e8f0;border-radius:15px;position:relative}.floating-icon{position:absolute;top:-22px;right:25%;width:44px;height:44px;background:linear-gradient(135deg,#3b82f6,#2dd4bf);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px #3b82f666}.sub-config-box{border:1px solid #f1f5f9;border-radius:12px}.cursor-pointer{cursor:pointer}.time-input-wrapper{position:relative;display:inline-block}.time-field{border-radius:8px;border:1px solid #dee2e6;padding:8px 35px 8px 12px;font-weight:500;color:#334155;width:120px}.time-input-wrapper i{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#334155;pointer-events:none;font-size:1.1rem}.custom-switch{width:3em!important;height:1.5em!important;cursor:pointer}.form-check-input:checked{background-color:#0095ff;border-color:#0095ff}.form-select{border-radius:8px;padding:8px 25px 8px 15px;border:1px solid #dee2e6;background-color:#f8fafc}.animate-fade-in{animation:fadeIn .3s ease-in}input[type=time]::-webkit-calendar-picker-indicator{background:transparent;color:transparent;cursor:pointer;height:auto;inset:0;position:absolute;width:auto}.text-dark-blue{color:#1e293b}.text-secondary-blue{color:#334155}.custom-switch{width:3.2em!important;height:1.6em!important;cursor:pointer}.form-check-input:checked{background-color:#0ea5e9;border-color:#0ea5e9}.custom-select{width:70px;height:48px;border-radius:10px;border:1px solid #e2e8f0;text-align:center;padding:0 10px;font-weight:500;background-color:#fff;color:#334155}.summary-text{color:#475569;font-size:.95rem;font-weight:500;margin-top:1.5rem}.fade-in{animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.text-dark-blue{color:#334155}.text-secondary-blue{color:#475569}.info-banner{background-color:#f1f5f9;border-radius:12px;color:#64748b}.small-text{font-size:.9rem;font-weight:500}.threshold-container{border:1px solid #e2e8f0;border-radius:16px;background-color:#fff}.description-text{font-size:.8rem;color:#94a3b8}.custom-switch{width:2.8em!important;height:1.4em!important;cursor:pointer}.form-check-input:checked{background-color:#38bdf8;border-color:#38bdf8}.custom-select{width:75px;height:42px;border-radius:8px;border:1px solid #e2e8f0;text-align:center;font-weight:500;color:#334155;cursor:pointer;background-color:#fff}.custom-select:focus{border-color:#cbd5e1;box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.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: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i7.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.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: "component", type: i10.MultiDateDatepickerComponent, selector: "lib-multi-date-datepicker", inputs: ["startDate", "endDate", "predefinedDates"], outputs: ["selectedDates"] }, { kind: "component", type: i11.ChipDropdownComponent, selector: "lib-chip-dropdown", inputs: ["data", "selectedData"], outputs: ["selectedList"] }, { kind: "component", type: i12.MultiChipDropdownComponent, selector: "lib-multi-chip-dropdown", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "badgeValue", "searchKey", "assignType"], outputs: ["selected", "removed"] }, { kind: "component", type: i13.AssignComponent, selector: "lib-assign", inputs: ["configData", "uploadData", "configureType"], outputs: ["dataToParent"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
3024
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChecklistConfigureComponent, selector: "lib-checklist-configure", host: { listeners: { "document:click": "clickOutside($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["file"], descendants: true }, { propertyName: "fileInput1", first: true, predicate: ["file1"], descendants: true }, { propertyName: "bulkupload", first: true, predicate: ["bulkupload"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }, { propertyName: "confirmUser", first: true, predicate: ["confirmUser"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"loading\" class=\"card 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>\r\n<div *ngIf=\"!loading\">\r\n <div class=\"card\">\r\n <ng-container>\r\n <div class=\"card-header border-0 pt-3 pb-3\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-9\">\r\n <div class=\"align-items-center\">\r\n <div *ngIf=\"!disabledQuestion&&type === 'custom'\"\r\n [routerLink]=\"'/manage/trax/createChecklist'\" [queryParams]=\"{checklistId: checklistId}\"\r\n class=\"btn btn-sm btn-outline me-5 px-3 py-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M15.8332 10.0003H4.1665M4.1665 10.0003L9.99984 15.8337M4.1665 10.0003L9.99984 4.16699\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <div *ngIf=\"type === 'custom'\" class=\"flex-column\">\r\n <div class=\"editablecontent mb-4 w-100\"><input type=\"text\" class=\"checklist plain-input\"\r\n placeholder=\"Enter Checklist Name\"\r\n [value]=\"configData?.checkListDetails?.checkListName\" readonly></div>\r\n <div class=\"editablecontent w-100\"><input type=\"text\"\r\n class=\"checklistDescription plain-input\" #checklistDescription\r\n placeholder=\"Enter Checklist Description\"\r\n [value]=\"configData?.checkListDetails?.checkListDescription\" readonly></div>\r\n </div>\r\n <div *ngIf=\"type !== 'custom'\" class=\"flex-column\">\r\n <div class=\"editablecontent mb-4 w-100\"><input type=\"text\" class=\"checklist plain-input\"\r\n placeholder=\"Enter Checklist Name\" [value]=\"configData?.checkListName\" readonly>\r\n </div>\r\n <div class=\"editablecontent w-100\"><input type=\"text\"\r\n class=\"checklistDescription plain-input\" #checklistDescription\r\n placeholder=\"Enter Checklist Description\"\r\n [value]=\"configData?.checkListDescription\" readonly></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <div class=\"d-flex my-6 justify-content-end\">\r\n <div>\r\n <button type=\"button\"\r\n class=\"btn btn-primary btn-md py-4 mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n (click)=\"type === 'custom' ? publish() : publishAI()\"\r\n [disabled]=\"disabledPublish || disableBtn\"><span class=\"ms-2\">Publish</span>\r\n </button>\r\n </div>\r\n <div>\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n (click)=\"type ==='custom' ? savedraft() : saveDraftAI()\"\r\n [disabled]=\"disableBtn\"><span class=\"ms-2\">Save as Draft</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"row checkconfigcont mt-2\" *ngIf=\"configData\">\r\n <div class=\"col-xl-3 leftcard\">\r\n <div class=\"card px-7 py-7\">\r\n <div class=\"section-leftheading1\">{{configData?.checkListDetails?.checkListName}}</div>\r\n <div *ngIf=\"obj.checkListId\" class=\"section-left\">\r\n <div *ngFor=\"let section of sections; let i=index;\">\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\">\r\n <div class=\"fs-4 fw-bold section\">{{section.name}}</div>\r\n <hr class=\"mx-2\">\r\n <svg (click)=\"accordian(i)\" [ngClass]=\"{'rotate' : show !== i}\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"35\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"show===i\" class=\"question-left\">\r\n <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n\r\n <div *ngFor=\"let question of section.questions;let j=index;\" class=\"my-2 q-btn\" cdkDrag>\r\n\r\n <div class=\"editablecontent\">\r\n {{question.qname}}\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <h3 class=\"card-title align-items-start flex-column \">\r\n <div class=\"card-label section-leftheading1 mt-6\">Schedule</div>\r\n\r\n <!-- <div *ngIf=\"type === 'mobileusagedetection' || type === 'storeopenandclose'\" class=\"mt-4 mx-2 sub\"><span\r\n class=\" mx-4\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"mt-2\">{{configData.checkListDetails.scheduleStartTime}} to\r\n {{configData.checkListDetails.scheduleEndTime}}</span>\r\n </div> -->\r\n\r\n <div *ngIf=\"['custom'].includes(type)\">\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"23\" height=\"23\"\r\n viewBox=\"0 0 23 23\" fill=\"none\">\r\n <path\r\n d=\"M8.41448 4.52303C8.69518 4.80371 8.69518 5.2588 8.41448 5.53948L5.53948 8.41448C5.2588 8.69518 4.80371 8.69518 4.52303 8.41448L3.08553 6.97698C2.80482 6.6963 2.80482 6.24121 3.08553 5.96053C3.36621 5.67982 3.8213 5.67982 4.10198 5.96053L5.03125 6.88978L7.39803 4.52303C7.67871 4.24232 8.1338 4.24232 8.41448 4.52303Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M8.41448 11.7105C8.69518 11.9912 8.69518 12.4463 8.41448 12.727L5.53948 15.602C5.2588 15.8826 4.80371 15.8826 4.52303 15.602L3.08553 14.1645C2.80482 13.8838 2.80482 13.4287 3.08553 13.1479C3.36621 12.8673 3.8213 12.8673 4.10198 13.1479L5.03125 14.0773L7.39803 11.7105C7.67871 11.4299 8.1338 11.4299 8.41448 11.7105Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M10.0625 6.46875C10.0625 6.0718 10.3844 5.75 10.7812 5.75H15.0938C15.4906 5.75 15.8125 6.0718 15.8125 6.46875C15.8125 6.8657 15.4906 7.1875 15.0938 7.1875H10.7812C10.3844 7.1875 10.0625 6.8657 10.0625 6.46875Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M3.59375 0C1.60898 0 0 1.60898 0 3.59375V16.5312C0 18.516 1.60898 20.125 3.59375 20.125H9.48708C9.25429 19.6696 9.06436 19.1886 8.92261 18.6875H3.59375C2.40288 18.6875 1.4375 17.7221 1.4375 16.5312V3.59375C1.4375 2.40288 2.40288 1.4375 3.59375 1.4375H16.5312C17.7221 1.4375 18.6875 2.40288 18.6875 3.59375V8.92261C19.1886 9.06436 19.6696 9.25429 20.125 9.48708V3.59375C20.125 1.60898 18.516 0 16.5312 0H3.59375Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M16.5313 23C20.1039 23 23 20.1039 23 16.5313C23 12.9586 20.1039 10.0625 16.5313 10.0625C12.9586 10.0625 10.0625 12.9586 10.0625 16.5313C10.0625 20.1039 12.9586 23 16.5313 23ZM16.5313 12.9375C16.9281 12.9375 17.25 13.2594 17.25 13.6563V15.8125H19.4063C19.8031 15.8125 20.125 16.1344 20.125 16.5313C20.125 16.9281 19.8031 17.25 19.4063 17.25H17.25V19.4063C17.25 19.8031 16.9281 20.125 16.5313 20.125C16.1344 20.125 15.8125 19.8031 15.8125 19.4063V17.25H13.6563C13.2594 17.25 12.9375 16.9281 12.9375 16.5313C12.9375 16.1344 13.2594 15.8125 13.6563 15.8125H15.8125V13.6563C15.8125 13.2594 16.1344 12.9375 16.5313 12.9375Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\">{{configData?.checkListDetails?.schedule === 'onetime' ?\r\n 'One-time' : (configData?.checkListDetails?.schedule | titlecase)}}\r\n </span></div>\r\n\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"mt-2 ms-2\">{{configData?.checkListDetails?.scheduleStartTime ?\r\n configData?.checkListDetails?.scheduleStartTime.substr(-8) : configData?.openTime}} to\r\n {{configData?.checkListDetails?.scheduleEndTime ?\r\n configData?.checkListDetails?.scheduleEndTime.substr(-8) :\r\n configData?.closeTime}}</span>\r\n </div>\r\n\r\n <div class=\"mt-4 mx-2 sub\" *ngIf=\"showRangeValue\"><span><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M16 2V6M8 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span><span\r\n class=\"mt-2 ms-2\"><span>{{configData?.checkListDetails?.configStartDate}}</span><span\r\n *ngIf=\"configData?.checkListDetails?.configEndDate !== '' && configData?.checkListDetails?.configEndDate !== null\">\r\n to {{configData?.checkListDetails?.configEndDate}}</span></span></div>\r\n\r\n <div class=\"card-label section-leftheading1 mt-6\">Assign</div>\r\n\r\n <div *ngIf=\"['custom'].includes(type)\">\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8M9 2H15C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6H9C8.44772 6 8 5.55228 8 5V3C8 2.44772 8.44772 2 9 2Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"> {{coverage | titlecase}}s\r\n </span></div>\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88332L3.02401 6.98632C2.30358 8.25521 3.06101 9.87908 4.46464 10.0659C4.58627 10.0808 4.70112 10.0889 4.8145 10.0889C5.55255 10.0889 6.20523 9.77192 6.65953 9.2788L7.21286 8.67818L7.76432 9.28052C8.21367 9.77135 8.8652 10.0889 9.60776 10.0889C10.3471 10.0889 11.0022 9.771 11.4512 9.28052L12.0044 8.67629L12.5576 9.28052C13.0066 9.771 13.6617 10.0889 14.401 10.0889C15.1404 10.0889 15.7954 9.771 16.2445 9.28052L16.7977 8.67629L17.3508 9.28052C17.7999 9.771 18.4549 10.0889 19.1943 10.0889C19.3041 10.0889 19.4223 10.0808 19.5433 10.066C20.9772 9.87131 21.7355 8.16351 20.9155 6.88382C20.9154 6.88376 20.9154 6.88371 20.9154 6.88365L18.8056 3.59392L18.8056 3.59392L18.8046 3.59246C18.7582 3.51966 18.6649 3.46387 18.5584 3.46387H5.44307C5.3365 3.46387 5.24326 3.51966 5.19681 3.59246L5.19619 3.59342L3.08995 6.88332ZM4.81818 12.7496C4.71644 12.7496 4.616 12.7465 4.5169 12.7406V16.6424V18.9639C4.5169 19.8207 5.22663 20.5353 6.11942 20.5353H17.882C18.7748 20.5353 19.4845 19.8207 19.4845 18.9639V16.6424V12.7411C19.3874 12.7466 19.2893 12.7496 19.1906 12.7496C19.0022 12.7496 18.8157 12.7395 18.632 12.7198V16.6424V17.3924H17.882H6.11942H5.36942V16.6424V12.7206C5.18866 12.7397 5.00472 12.7496 4.81818 12.7496Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span><span class=\"mt-2 ms-2\">{{assignSingle?.length + groupAssign?.length}}\r\n {{coverage}}{{(assignSingle?.length + groupAssign?.length) > 1 ? 's':''}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"col-lg-10 editques\" *ngIf=\"['custom'].includes(type) && !disabledQuestion\">\r\n <a (click)=\"saveandredirect(obj.checkListId)\"\r\n class=\"btn-outline btn-outline-dashed btn btn-light upload\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M14.6666 2.5009C14.8855 2.28203 15.1453 2.10842 15.4313 1.98996C15.7173 1.87151 16.0238 1.81055 16.3333 1.81055C16.6428 1.81055 16.9493 1.87151 17.2353 1.98996C17.5213 2.10842 17.7811 2.28203 18 2.5009C18.2188 2.71977 18.3924 2.97961 18.5109 3.26558C18.6294 3.55154 18.6903 3.85804 18.6903 4.16757C18.6903 4.4771 18.6294 4.7836 18.5109 5.06956C18.3924 5.35553 18.2188 5.61537 18 5.83424L6.74996 17.0842L2.16663 18.3342L3.41663 13.7509L14.6666 2.5009Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"uploadtext\">Edit Questions</span></a> \r\n </div> -->\r\n\r\n <div class=\"col-lg-10 editques\" *ngIf=\"!disabledQuestion&&type === 'custom'\"\r\n [routerLink]=\"'/manage/trax/createChecklist'\" [queryParams]=\"{checklistId: checklistId}\">\r\n <a class=\"btn-outline btn-outline-dashed btn btn-light upload\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M14.6666 2.5009C14.8855 2.28203 15.1453 2.10842 15.4313 1.98996C15.7173 1.87151 16.0238 1.81055 16.3333 1.81055C16.6428 1.81055 16.9493 1.87151 17.2353 1.98996C17.5213 2.10842 17.7811 2.28203 18 2.5009C18.2188 2.71977 18.3924 2.97961 18.5109 3.26558C18.6294 3.55154 18.6903 3.85804 18.6903 4.16757C18.6903 4.4771 18.6294 4.7836 18.5109 5.06956C18.3924 5.35553 18.2188 5.61537 18 5.83424L6.74996 17.0842L2.16663 18.3342L3.41663 13.7509L14.6666 2.5009Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"uploadtext\">Edit Questions</span></a>\r\n </div>\r\n </div>\r\n </h3>\r\n <!-- <div *ngIf=\"['uniformdetection','mobileusagedetection'].includes(type)\">\r\n <div class=\"card-label section-leftheading1\">Alerts</div>\r\n <div class=\"mt-6 mx-4 sub\">Email</div>\r\n </div> -->\r\n <!-- <div *ngIf=\"['uniformdetection','mobileusagedetection'].includes(type)\" class=\"mx-4 mt-4 sub\">if usage exceeds\r\n {{configData?.aiConfig?.mobileDetection?.usageExceed}}\r\n events\r\n </div> -->\r\n <!-- <div *ngIf=\"type === 'storeopenandclose'\">\r\n <div class=\"card-label section-leftheading1\">Alerts</div>\r\n <div class=\"mt-4 mx-4 sub\">Send email everyday to</div>\r\n </div> -->\r\n <div *ngIf=\"!['custom'].includes(type) && configData.aiConfig.events?.length\" class=\"\">\r\n <span *ngIf=\"configData.aiConfig.assignConfig ==='global'\" class=\"scedule-text\">Everyday at {{\r\n dayjs(configData.aiConfig.events[0]?.time,'HH:MM').format('hh:mm A') }} for\r\n {{configData.aiConfig.events[0]?.duration}} mins</span>\r\n <span *ngIf=\"configData.aiConfig.assignConfig ==='store'\" class=\"scedule-text\">Multiple times are\r\n allocated for multiple stores</span>\r\n </div>\r\n <div *ngIf=\"!['custom'].includes(type) && configData.aiConfig.alerts.users?.length\">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Alerts To</div>\r\n <span *ngFor=\"let alert of configData.aiConfig.alerts.users\"\r\n class=\"mt-2 ms-2 badge badge-light-default h-25px\"><span\r\n class=\"bg-light-primary text-primary rounded-5 me-1\">{{getInitials(alert?.name)}}</span>\r\n {{alert?.name}}</span>\r\n </div>\r\n <h3 *ngIf=\"['uniformdetection','mobileusagedetection','tvcompliance'].includes(type) && configData?.aiConfig?.mobileDetection?.detectionArea?.length\"\r\n class=\"card-title align-items-start flex-column \">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Detection Areas</div>\r\n <p>Checklist will run on this Zone</p>\r\n\r\n <div class=\"mx-2 sub\"><span\r\n *ngFor=\"let zone of configData?.aiConfig?.mobileDetection?.detectionArea\"\r\n class=\"badge mx-2 mt-4 badge-light checklistlabel h-25px fs-base\">\r\n <span\r\n class=\"bg-light-primary text-primary rounded-5 me-1\">{{getInitials(zone?.name)}}</span>\r\n <i class=\"ki-duotone ki-arrow-up checklisttext\"></i>\r\n {{zone?.name}}\r\n </span></div>\r\n </h3>\r\n <div *ngIf=\"!['custom'].includes(type)\">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Assign</div>\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8M9 2H15C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6H9C8.44772 6 8 5.55228 8 5V3C8 2.44772 8.44772 2 9 2Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"> Stores\r\n </span></div>\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88332L3.02401 6.98632C2.30358 8.25521 3.06101 9.87908 4.46464 10.0659C4.58627 10.0808 4.70112 10.0889 4.8145 10.0889C5.55255 10.0889 6.20523 9.77192 6.65953 9.2788L7.21286 8.67818L7.76432 9.28052C8.21367 9.77135 8.8652 10.0889 9.60776 10.0889C10.3471 10.0889 11.0022 9.771 11.4512 9.28052L12.0044 8.67629L12.5576 9.28052C13.0066 9.771 13.6617 10.0889 14.401 10.0889C15.1404 10.0889 15.7954 9.771 16.2445 9.28052L16.7977 8.67629L17.3508 9.28052C17.7999 9.771 18.4549 10.0889 19.1943 10.0889C19.3041 10.0889 19.4223 10.0808 19.5433 10.066C20.9772 9.87131 21.7355 8.16351 20.9155 6.88382C20.9154 6.88376 20.9154 6.88371 20.9154 6.88365L18.8056 3.59392L18.8056 3.59392L18.8046 3.59246C18.7582 3.51966 18.6649 3.46387 18.5584 3.46387H5.44307C5.3365 3.46387 5.24326 3.51966 5.19681 3.59246L5.19619 3.59342L3.08995 6.88332ZM4.81818 12.7496C4.71644 12.7496 4.616 12.7465 4.5169 12.7406V16.6424V18.9639C4.5169 19.8207 5.22663 20.5353 6.11942 20.5353H17.882C18.7748 20.5353 19.4845 19.8207 19.4845 18.9639V16.6424V12.7411C19.3874 12.7466 19.2893 12.7496 19.1906 12.7496C19.0022 12.7496 18.8157 12.7395 18.632 12.7198V16.6424V17.3924H17.882H6.11942H5.36942V16.6424V12.7206C5.18866 12.7397 5.00472 12.7496 4.81818 12.7496Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span><span class=\"mt-2 ms-2\">{{this.configData?.storeList?.length}}\r\n Store{{this.configData?.storeList?.length > 1 ? 's':''}}</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!['custom'].includes(type) && configData.approver?.length && clientId!=='452'\">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Automatic Task</div>\r\n <span *ngFor=\"let approve of configData.approver\"\r\n class=\"mt-2 ms-2 badge badge-light-default h-25px\"><span\r\n class=\"bg-light-primary text-primary rounded-5 me-1\">{{getInitials(approve?.name)}}</span>{{approve?.name}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Config div -->\r\n <div class=\"col-xl-9\">\r\n <div class=\"card bg-transparent border-0 outline-0 card-flush h-xl-100\">\r\n <div *ngIf=\"!['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"card-body bg-white rounded-4 px-7\">\r\n <div class=\"schedule\">\r\n <div>\r\n <h2 class=\"section-leftheading\">Schedule\r\n <span class=\"mx-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\">\r\n <path\r\n d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1874_66195\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </h2>\r\n <!-- <div class=\"row\" *ngIf=\"['uniformdetection'].includes(type)\">\r\n <div class=\"col-md-4 d-flex\">\r\n <span class=\"sub mt-2 mx-4\">From</span>&nbsp;&nbsp; \r\n <input class=\"form-control form-control-solid flatpickr-input w-200px mt-2\"\r\n (change)=\"updateTime('start')\" [(ngModel)]=\"startTime\"\r\n placeholder=\"Set store open time\" name=\"due_date\" type=\"time\">\r\n </div>\r\n <div class=\"col-md-4 d-flex\">\r\n <span class=\"sub mt-3 mx-4\">To</span>&nbsp;&nbsp;\r\n <input class=\"form-control form-control-solid flatpickr-input w-200px mt-2\"\r\n (change)=\"updateTime('end')\" [(ngModel)]=\"endTime\" placeholder=\"Set store open time\"\r\n name=\"due_date\" type=\"time\">\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n \r\n </div> -->\r\n <div>\r\n <div *ngIf=\"['mobileusagedetection'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Mobile detections are pre-scheduled, operate during the store's open hours\r\n based on its opening and closing times, and cannot be edited.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['storeopenandclose'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Store open and close detections operate based on the current store's opening\r\n and closing times. You can view/edit store\u2019s open and close timings in the\r\n 'Assign Stores and Cluster' section below\r\n </span>\r\n </div>\r\n <div *ngIf=\"['scrum'].includes(type)\" class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n The store's open and close times are set in the <span\r\n class=\"fw-bolder\">store configurations.</span> To make changes, please\r\n update <span routerLink=\"/manage/settings/configuration\"\r\n class=\"text-decoration-underline cursor-pointer\">click here</span>\r\n </span>\r\n </div>\r\n <div *ngIf=\"['cleaning'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n The store's open and close times are set in the <span\r\n class=\"fw-bolder\">store configurations.</span> To make changes, please\r\n update <span routerLink=\"/manage/settings/configuration\"\r\n class=\"text-decoration-underline cursor-pointer\">click here</span>\r\n </span>\r\n </div>\r\n <div *ngIf=\"['staffleftinthemiddle'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n This AI checklist will initiate detections based on the store's operational\r\n hours, starting when the store opens and stopping when it closes.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['customerunattended'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n This AI checklist will initiate detections based on the store's operational\r\n hours, starting when the store opens and stopping when it closes.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['uniformdetection'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Uniform detections are automatically scheduled based on the store's\r\n operating hours and run during open hours. These schedules cannot be\r\n modified.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['cleaning','scrum'].includes(type)\" class=\"row\">\r\n <div class=\"col-sm-6 cursor-pointer\">\r\n <div (click)=\"clickAIconfigure('global')\"\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'global'? 'configureAcite' : 'border border-1'\"\r\n class=\"d-flex align-items-center justify-content-between h-70px rounded-3 p-3\">\r\n <div class=\"d-flex\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\"\r\n viewBox=\"0 0 36 36\" fill=\"none\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.fill]=\"configData?.aiConfig?.assignConfig === 'global' ? '#EAF8FF' : '#F2F4F7'\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.stroke]=\"configData?.aiConfig?.assignConfig === 'global' ? '#DAF1FF' :'#F9FAFB'\"\r\n stroke-width=\"4\" />\r\n <g clip-path=\"url(#clip0_10179_46867)\">\r\n <path\r\n d=\"M11.75 26C11.2859 26 10.8408 25.8156 10.5126 25.4874C10.1844 25.1592 10 24.7141 10 24.25V11.75C10 10.784 10.784 10 11.75 10H20.25C21.216 10 22 10.784 22 11.75V24.25C22 24.335 21.994 24.418 21.982 24.5H24.25C24.3163 24.5 24.3799 24.4737 24.4268 24.4268C24.4737 24.3799 24.5 24.3163 24.5 24.25V18.285C24.5 18.2439 24.4899 18.2034 24.4706 18.1671C24.4512 18.1308 24.4232 18.0999 24.389 18.077L23.334 17.374C23.2521 17.3194 23.1817 17.2491 23.1269 17.1673C23.0721 17.0855 23.0339 16.9937 23.0146 16.8971C22.9953 16.8005 22.9952 16.7011 23.0143 16.6045C23.0334 16.5078 23.0714 16.4159 23.126 16.334C23.1806 16.2521 23.2509 16.1817 23.3327 16.1269C23.4145 16.0721 23.5063 16.0339 23.6029 16.0146C23.6995 15.9953 23.7989 15.9952 23.8955 16.0143C23.9922 16.0334 24.0841 16.0714 24.166 16.126L25.221 16.829C25.708 17.154 26 17.7 26 18.285V24.25C26 24.7141 25.8156 25.1592 25.4874 25.4874C25.1592 25.8156 24.7141 26 24.25 26H20.75C20.6835 25.9999 20.6173 25.9912 20.553 25.974C20.454 25.991 20.353 26 20.25 26H17.25C17.0511 26 16.8603 25.921 16.7197 25.7803C16.579 25.6397 16.5 25.4489 16.5 25.25V24H15.5V25.25C15.5 25.4489 15.421 25.6397 15.2803 25.7803C15.1397 25.921 14.9489 26 14.75 26H11.75ZM11.5 24.25C11.5 24.388 11.612 24.5 11.75 24.5H14V23.25C14 23.0511 14.079 22.8603 14.2197 22.7197C14.3603 22.579 14.5511 22.5 14.75 22.5H17.25C17.4489 22.5 17.6397 22.579 17.7803 22.7197C17.921 22.8603 18 23.0511 18 23.25V24.5H20.25C20.3163 24.5 20.3799 24.4737 20.4268 24.4268C20.4737 24.3799 20.5 24.3163 20.5 24.25V11.75C20.5 11.6837 20.4737 11.6201 20.4268 11.5732C20.3799 11.5263 20.3163 11.5 20.25 11.5H11.75C11.6837 11.5 11.6201 11.5263 11.5732 11.5732C11.5263 11.6201 11.5 11.6837 11.5 11.75V24.25ZM13.75 16H14.25C14.4489 16 14.6397 16.079 14.7803 16.2197C14.921 16.3603 15 16.5511 15 16.75C15 16.9489 14.921 17.1397 14.7803 17.2803C14.6397 17.421 14.4489 17.5 14.25 17.5H13.75C13.5511 17.5 13.3603 17.421 13.2197 17.2803C13.079 17.1397 13 16.9489 13 16.75C13 16.5511 13.079 16.3603 13.2197 16.2197C13.3603 16.079 13.5511 16 13.75 16ZM13 13.75C13 13.5511 13.079 13.3603 13.2197 13.2197C13.3603 13.079 13.5511 13 13.75 13H14.25C14.4489 13 14.6397 13.079 14.7803 13.2197C14.921 13.3603 15 13.5511 15 13.75C15 13.9489 14.921 14.1397 14.7803 14.2803C14.6397 14.421 14.4489 14.5 14.25 14.5H13.75C13.5511 14.5 13.3603 14.421 13.2197 14.2803C13.079 14.1397 13 13.9489 13 13.75ZM17 16.75C17 16.5511 17.079 16.3603 17.2197 16.2197C17.3603 16.079 17.5511 16 17.75 16H18.25C18.4489 16 18.6397 16.079 18.7803 16.2197C18.921 16.3603 19 16.5511 19 16.75C19 16.9489 18.921 17.1397 18.7803 17.2803C18.6397 17.421 18.4489 17.5 18.25 17.5H17.75C17.5511 17.5 17.3603 17.421 17.2197 17.2803C17.079 17.1397 17 16.9489 17 16.75ZM17.75 13H18.25C18.4489 13 18.6397 13.079 18.7803 13.2197C18.921 13.3603 19 13.5511 19 13.75C19 13.9489 18.921 14.1397 18.7803 14.2803C18.6397 14.421 18.4489 14.5 18.25 14.5H17.75C17.5511 14.5 17.3603 14.421 17.2197 14.2803C17.079 14.1397 17 13.9489 17 13.75C17 13.5511 17.079 13.3603 17.2197 13.2197C17.3603 13.079 17.5511 13 17.75 13ZM13 19.75C13 19.5511 13.079 19.3603 13.2197 19.2197C13.3603 19.079 13.5511 19 13.75 19H14.25C14.4489 19 14.6397 19.079 14.7803 19.2197C14.921 19.3603 15 19.5511 15 19.75C15 19.9489 14.921 20.1397 14.7803 20.2803C14.6397 20.421 14.4489 20.5 14.25 20.5H13.75C13.5511 20.5 13.3603 20.421 13.2197 20.2803C13.079 20.1397 13 19.9489 13 19.75ZM17.75 19H18.25C18.4489 19 18.6397 19.079 18.7803 19.2197C18.921 19.3603 19 19.5511 19 19.75C19 19.9489 18.921 20.1397 18.7803 20.2803C18.6397 20.421 18.4489 20.5 18.25 20.5H17.75C17.5511 20.5 17.3603 20.421 17.2197 20.2803C17.079 20.1397 17 19.9489 17 19.75C17 19.5511 17.079 19.3603 17.2197 19.2197C17.3603 19.079 17.5511 19 17.75 19Z\"\r\n [attr.fill]=\"configData?.aiConfig?.assignConfig === 'global' ? '#00A3FF' : 'black'\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_10179_46867\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"\r\n transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'global' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Global Configuration</span>\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'global' ? 'alerttext' : 'headeralign'\">Configure\r\n huddle time in a store level for all stores</span>\r\n </div>\r\n </div>\r\n <span>\r\n <input class=\"form-check-input w-15px h-15px mt-1 rounded-5\"\r\n [checked]=\"configData?.aiConfig?.assignConfig === 'global'\"\r\n type=\"checkbox\" id=\"oneTime\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-6 cursor-pointer\">\r\n <div (click)=\"clickAIconfigure('store')\"\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'store' ? 'configureAcite' : 'border border-1'\"\r\n class=\"d-flex align-items-center justify-content-between h-70px rounded-3 p-3\">\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\"\r\n viewBox=\"0 0 36 36\" fill=\"none\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.fill]=\"configData.aiConfig.assignConfig === 'store' ? '#EAF8FF':'#F2F4F7'\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.stroke]=\"configData.aiConfig.assignConfig === 'store' ? '#DAF1FF' : '#F9FAFB'\"\r\n stroke-width=\"4\" />\r\n <path\r\n d=\"M12.0574 14.5882L12.0134 14.6569C11.5331 15.5028 12.0381 16.5854 12.9738 16.7099C13.0549 16.7199 13.1315 16.7253 13.2071 16.7253C13.6991 16.7253 14.1342 16.514 14.4371 16.1852L14.806 15.7848L15.1736 16.1864C15.4732 16.5136 15.9075 16.7253 16.4026 16.7253C16.8955 16.7253 17.3322 16.5133 17.6315 16.1864L18.0003 15.7835L18.3691 16.1864C18.6685 16.5133 19.1052 16.7253 19.5981 16.7253C20.091 16.7253 20.5277 16.5133 20.827 16.1864L21.1958 15.7835L21.5646 16.1864C21.864 16.5133 22.3007 16.7253 22.7936 16.7253C22.8668 16.7253 22.9456 16.7199 23.0262 16.71C23.9822 16.5802 24.4878 15.4417 23.9411 14.5886C23.941 14.5885 23.941 14.5885 23.941 14.5884L22.5344 12.3953L22.5338 12.3943C22.5028 12.3458 22.4407 12.3086 22.3696 12.3086H13.6261C13.5551 12.3086 13.4929 12.3458 13.4619 12.3943L13.4615 12.395L12.0574 14.5882ZM11.6363 14.3186L13.0404 12.1254L11.6363 14.3186ZM13.2095 18.4991C13.1417 18.4991 13.0747 18.497 13.0087 18.4931V21.0943V22.6419C13.0087 23.2131 13.4818 23.6895 14.077 23.6895H21.9187C22.5139 23.6895 22.9871 23.2131 22.9871 22.6419V21.0943V18.4934C22.9224 18.4971 22.8569 18.4991 22.7911 18.4991C22.6655 18.4991 22.5412 18.4923 22.4187 18.4792V21.0943V21.5943H21.9187H14.077H13.577V21.0943V18.4798C13.4565 18.4925 13.3339 18.4991 13.2095 18.4991Z\"\r\n [attr.stroke]=\"configData?.aiConfig?.assignConfig === 'store' ? '#00A3FF' : '#101828'\" />\r\n </svg></span>\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'store' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Store Wise Configuration</span>\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'store' ? 'alerttext' : 'headeralign'\">Configure\r\n huddle time in a store level for all stores</span>\r\n </div>\r\n </div>\r\n <span>\r\n <input class=\"form-check-input w-15px h-15px mt-1 rounded-5\"\r\n [checked]=\"configData?.aiConfig?.assignConfig === 'store'\"\r\n type=\"checkbox\" id=\"oneTime\">\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData?.aiConfig?.assignConfig === 'store'\"\r\n class=\"col-sm-12 mt-5\">\r\n <div class=\"text-center d-flex flex-column align-items-center cursor-pointer\"\r\n (click)=\"uploadAIfiles()\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"108\" height=\"88\"\r\n viewBox=\"0 0 108 88\" fill=\"none\">\r\n <circle cx=\"30.8469\" cy=\"30.8469\" r=\"30.8469\"\r\n transform=\"matrix(-1 0 0 1 84.8516 0)\" fill=\"#EAECF0\" />\r\n <g filter=\"url(#filter0_dd_9548_99613)\">\r\n <path\r\n d=\"M53.0499 9.49219C59.4404 9.49219 65.0933 12.65 68.5334 17.4904C69.6568 17.2255 70.8283 17.0853 72.0326 17.0853C80.4197 17.0853 87.2188 23.8844 87.2188 32.2715C87.2188 40.6585 80.4197 47.4576 72.0326 47.4576L34.0671 47.4576C26.7284 47.4576 20.7793 41.5084 20.7793 34.1697C20.7793 26.831 26.7284 20.8818 34.0672 20.8818C34.5884 20.8818 35.1027 20.9118 35.6083 20.9702C38.5172 14.2187 45.2316 9.49219 53.0499 9.49219Z\"\r\n fill=\"#F9FAFB\" />\r\n <ellipse cx=\"15.1862\" cy=\"15.1862\" rx=\"15.1862\" ry=\"15.1862\"\r\n transform=\"matrix(-1 0 0 1 87.2188 17.0859)\"\r\n fill=\"url(#paint0_linear_9548_99613)\" />\r\n <circle cx=\"18.9827\" cy=\"18.9827\" r=\"18.9827\"\r\n transform=\"matrix(-1 0 0 1 72.0312 9.49219)\"\r\n fill=\"url(#paint1_linear_9548_99613)\" />\r\n <ellipse cx=\"13.2879\" cy=\"13.2879\" rx=\"13.2879\" ry=\"13.2879\"\r\n transform=\"matrix(-1 0 0 1 47.3594 20.8789)\"\r\n fill=\"url(#paint2_linear_9548_99613)\" />\r\n </g>\r\n <circle cx=\"2.96605\" cy=\"2.96605\" r=\"2.96605\"\r\n transform=\"matrix(-1 0 0 1 89.5938 8.30469)\"\r\n fill=\"#F2F4F7\" />\r\n <circle cx=\"4.15247\" cy=\"4.15247\" r=\"4.15247\"\r\n transform=\"matrix(-1 0 0 1 92.5625 60.5078)\"\r\n fill=\"#F2F4F7\" />\r\n <circle cx=\"4.15247\" cy=\"4.15247\" r=\"4.15247\"\r\n transform=\"matrix(-1 0 0 1 17.2266 16.6094)\"\r\n fill=\"#F2F4F7\" />\r\n <circle cx=\"2.37284\" cy=\"2.37284\" r=\"2.37284\"\r\n transform=\"matrix(-1 0 0 1 21.9688 2.37109)\"\r\n fill=\"#F2F4F7\" />\r\n <rect width=\"28.4741\" height=\"28.4741\" rx=\"14.237\"\r\n transform=\"matrix(-1 0 0 1 68.2422 36.7773)\" fill=\"#344054\"\r\n fill-opacity=\"0.4\" />\r\n <path\r\n d=\"M48.666 52.7943V55.1671C48.666 55.4818 48.791 55.7836 49.0135 56.0061C49.236 56.2286 49.5377 56.3536 49.8524 56.3536H58.1573C58.472 56.3536 58.7738 56.2286 58.9963 56.0061C59.2188 55.7836 59.3438 55.4818 59.3438 55.1671V52.7943M51.0388 48.6418L54.0049 45.6758M54.0049 45.6758L56.9709 48.6418M54.0049 45.6758V52.7943\"\r\n stroke=\"white\" stroke-width=\"1.18642\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <defs>\r\n <filter id=\"filter0_dd_9548_99613\" x=\"0.78125\" y=\"9.49219\"\r\n width=\"106.438\" height=\"77.9648\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\"\r\n in=\"SourceAlpha\"\r\n result=\"effect1_dropShadow_9548_99613\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_9548_99613\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\"\r\n in=\"SourceAlpha\"\r\n result=\"effect2_dropShadow_9548_99613\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\"\r\n in2=\"effect1_dropShadow_9548_99613\"\r\n result=\"effect2_dropShadow_9548_99613\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect2_dropShadow_9548_99613\"\r\n result=\"shape\" />\r\n </filter>\r\n <linearGradient id=\"paint0_linear_9548_99613\" x1=\"3.52536\"\r\n y1=\"5.15245\" x2=\"30.3724\" y2=\"30.3723\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#D0D5DD\" />\r\n <stop offset=\"0.350715\" stop-color=\"white\"\r\n stop-opacity=\"0\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear_9548_99613\" x1=\"4.4067\"\r\n y1=\"6.44056\" x2=\"37.9654\" y2=\"37.9654\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#D0D5DD\" />\r\n <stop offset=\"0.350715\" stop-color=\"white\"\r\n stop-opacity=\"0\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear_9548_99613\" x1=\"3.08469\"\r\n y1=\"4.50839\" x2=\"26.5758\" y2=\"26.5758\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#D0D5DD\" />\r\n <stop offset=\"0.350715\" stop-color=\"white\"\r\n stop-opacity=\"0\" />\r\n </linearGradient>\r\n </defs>\r\n </svg></span>\r\n <div class=\"w-400px subtitle text-center\">\r\n Download the template below in the <span class=\"fw-bolder\">\u2018Assign\r\n Stores\u2019</span> section and upload to configure store-wise time\r\n to the checklist accordingly.\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData?.aiConfig?.assignConfig !== 'store'\"\r\n class=\"col-sm-12 mt-5\">\r\n <div *ngFor=\"let array of configData?.aiConfig?.events; let i= index\"\r\n class=\"d-flex mb-5 align-items-center\">\r\n <span class=\"me-3\">Start huddle at</span>\r\n <span><input\r\n class=\"form-control form-control-solid flatpickr-input w-auto margin\"\r\n (change)=\"updateHuddletime($event,'time')\"\r\n [(ngModel)]=\"array.time\" placeholder=\"Set store open time\"\r\n name=\"start_date_{{i}}\" type=\"time\"></span>\r\n <span class=\"mx-3\">for a duration of</span>\r\n <span class=\"w-150px\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"array.duration\"\r\n (change)=\"updateHuddletime($event,'duration')\">\r\n <option value=\"15\">15 mins</option>\r\n <option value=\"30\">30 mins</option>\r\n <option value=\"45\">45 mins</option>\r\n <option value=\"60\">60 mins</option>\r\n </select>\r\n </span>\r\n <span *ngIf=\"configData?.aiConfig?.events?.length > 1\"><button\r\n class=\"btn btn-outline px-3 ms-3\" (click)=\"deleteHuddle(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button></span>\r\n </div>\r\n <div *ngIf=\"configData?.aiConfig?.events?.length < 3\"\r\n class=\"btn btn-outline\" (click)=\"AddHuddleEent()\"> <span><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.9974 4.16797V15.8346M4.16406 10.0013H15.8307\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span class=\"ms-3\">Add Event</span></div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['outsidebusinesshoursqueuetracking'].includes(type)\" class=\"row\">\r\n <div class=\"border border-2 rounded-3 px-3\">\r\n <div>\r\n <h2 class=\"schedule-config-header m-3\">Configuration </h2>\r\n </div>\r\n\r\n <div class=\"border-top border-top-2\"\r\n style=\"height: 1px; margin: 1rem -9.750px;\"></div>\r\n <div class=\"border border-2 rounded-3 px-3 mb-3\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Pre-Open Time\r\n Configuration</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changePreopentimeconfig($event)\"\r\n [checked]=\"configData?.aiConfig?.outsidebusinesshoursqueuetracking?.preopentimeconfig !== '' \">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, this\r\n allows detections before store open time</div>\r\n </div>\r\n <div *ngIf=\"preopentimeconfig || configData.aiConfig.outsidebusinesshoursqueuetracking?.preopentimeconfig\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-1\">\r\n <div class=\"schedule-config-sub-header me-3\"> Monitor Store for\r\n </div>\r\n <div>\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.outsidebusinesshoursqueuetracking.preopentimeconfig\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of preOpenCloseTimeConfig\"\r\n [value]=\"time\">{{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes before the\r\n scheduled open Time </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-3 px-3 mb-3\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Post-Close Time\r\n Configuration</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changePreclosetimeconfig($event)\"\r\n [checked]=\"configData?.aiConfig?.outsidebusinesshoursqueuetracking?.preclosetimeconfig !== '' \">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, this\r\n allows detections after store close time</div>\r\n </div>\r\n <div *ngIf=\"preclosetimeconfig || configData.aiConfig.outsidebusinesshoursqueuetracking?.preclosetimeconfig\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-1\">\r\n <div class=\"schedule-config-sub-header me-3\"> Monitor Store for\r\n </div>\r\n <div>\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.outsidebusinesshoursqueuetracking.preclosetimeconfig\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of preOpenCloseTimeConfig\"\r\n [value]=\"time\">{{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes after the\r\n scheduled close Time </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-3 px-3 mb-3\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Person Detection Time\r\n Threshold</div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled,\r\n detection count is based on the configured time</div>\r\n </div>\r\n <div class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-1\">\r\n <div class=\"schedule-config-sub-header me-3\"> Flag, If detection\r\n of a person exceeds </div>\r\n <div>\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.outsidebusinesshoursqueuetracking.persondetectiontimethreshold\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option\r\n *ngFor=\"let time of personDetectionTimeThreshold\"\r\n [value]=\"time\">{{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['custom'].includes(type)\">\r\n <div class=\"col-md-12 mt-6 mb-1\">\r\n <div class=\"row\">\r\n <div class=\"col-md-2 mt-3\">\r\n <span class=\"mx-6 sub\">For</span>\r\n </div>\r\n <div class=\"col-md-3 dropdown\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"configData.checkListDetails.schedule\"\r\n (change)=\"updateSchedule($event)\">\r\n <option value=\"onetime\">Does Not Repeat</option>\r\n <option value=\"weekday\"> Every Weekday (Mon - Fri)</option>\r\n <option value=\"daily\">Daily</option>\r\n <option value=\"weekly\">Weekly</option>\r\n <option value=\"monthly\">Monthly</option>\r\n <option value=\"range\">Custom Range</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3 mx-2\">At</span>&nbsp;&nbsp;\r\n <input\r\n class=\"form-control form-control-solid flatpickr-input w-200px margin\"\r\n (change)=\"updateTime('start')\" [(ngModel)]=\"startTime\"\r\n placeholder=\"Set store open time\" name=\"due_date\" type=\"time\">\r\n </div>\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3 ms-5\">Ends</span>&nbsp;&nbsp;\r\n <input\r\n class=\"form-control form-control-solid flatpickr-input w-200px margin\"\r\n (change)=\"updateTime('end')\" [(ngModel)]=\"endTime\"\r\n placeholder=\"Set store open time\" name=\"due_date\" type=\"time\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"justify-content-between mt-4\">\r\n <div class=\"config-heading\">Checklist Configuration</div>\r\n <div *ngIf=\"configData.checkListDetails.schedule === 'onetime'\">\r\n <div class=\"row col-lg-12 d-flex mt-5\">\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3\">Once On</span>\r\n </div>\r\n <div class=\"col-md-3 px-4 pe-3\" id=\"dateclass\"\r\n data-kt-daterangepicker=\"true\" data-kt-daterangepicker-opens=\"left\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\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\"\r\n 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\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n matInput ngxDaterangepickerMd [singleDatePicker]=\"true\"\r\n [minDate]=\"minDate\" [drops]=\"'down'\" [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDates\"\r\n [autoApply]=\"false\"\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)=\"dateRangeStart($event)\" name=\"daterange\"\r\n [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.schedule !== 'onetime'\">\r\n <div class=\"form-check form-switch mt-6\">\r\n <input type=\"checkbox\" id=\"rangeDate\"\r\n class=\"form-check-input ng-valid ng-dirty ng-touched\"\r\n [(ngModel)]=\"showRangeValue\"\r\n [disabled]=\"configData.checkListDetails?.schedule === 'range'\"\r\n (change)=\"updateDateValue($event)\">\r\n <label for=\"rangeDate\" class=\"form-check-label checklisttext ms-2\">Set\r\n defined\r\n date range</label>\r\n </div>\r\n <div class=\"row col-lg-12 d-flex mt-5\" *ngIf=\"showRangeValue\">\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3\">Starts from</span>\r\n </div>\r\n <div class=\"col-md-3\"\r\n [ngClass]=\"configData.checkListDetails.schedule === 'range' ? 'ps-10' : 'px-4 pe-3'\"\r\n id=\"dateclass\" data-kt-daterangepicker=\"true\"\r\n data-kt-daterangepicker-opens=\"left\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\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\"\r\n 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\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n matInput ngxDaterangepickerMd [singleDatePicker]=\"true\"\r\n [minDate]=\"minStartDate\" [drops]=\"'down'\" [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedStartDate\"\r\n [autoApply]=\"false\"\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)=\"dateRangeStart($event)\" name=\"daterange\"\r\n [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 mt-8 ng-star-inserted\">\r\n <div class=\"row\"\r\n *ngIf=\"configData.checkListDetails.schedule !== 'range'\">\r\n <div class=\"col-md-2 mt-2\">\r\n <span class=\"sub\">Repeats every</span>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div\r\n class=\"fv-row mb-5 fv-plugins-icon-container d-flex flex-column\">\r\n <input type=\"text\" autocomplete=\"off\" required=\"\"\r\n class=\"form-control form-control-solid w-100px ng-pristine ng-invalid ng-touched\"\r\n [(ngModel)]=\"configData.checkListDetails.scheduleRepeatedDay\"\r\n maxlength=\"2\" min=\"1\" (change)=\"updateRepeatDay()\"\r\n (input)=\"removeAlphapet($event)\">\r\n </div>\r\n <div\r\n class=\"fv-row mb-5 mx-2 fv-plugins-icon-container d-flex flex-column\">\r\n <input type=\"text\" autocomplete=\"off\"\r\n class=\"form-control form-control-solid w-100px ng-pristine ng-invalid ng-touched\"\r\n [(ngModel)]=\"repeatType\" readonly>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.schedule === 'monthly'\">\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n\r\n </div>\r\n <div class=\"col-lg-2 mt-3\">\r\n <div class=\"form-check fontSize\">\r\n <input class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"day\"\r\n [checked]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup === 'day'\"\r\n (change)=\"updateMonth('day')\">\r\n <label class=\"cursor-pointer\" for=\"inlineRadio1\">On\r\n Day</label>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div\r\n class=\"fv-row mb-5 fv-plugins-icon-container d-flex flex-column\">\r\n <input type=\"text\" autocomplete=\"off\"\r\n class=\"form-control form-control-solid w-100px\"\r\n [ngClass]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'day' ? 'disabled' : ''\"\r\n [(ngModel)]=\"configData.checkListDetails.scheduleRepeatedMonthWeek\"\r\n (change)=\"updateValue($event)\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'day'\"\r\n maxLength=\"2\" (input)=\"validate($event)\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n\r\n </div>\r\n <div class=\"col-lg-2 mt-3\">\r\n <div class=\"form-check fontSize\">\r\n <input class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"day\"\r\n [checked]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup === 'date'\"\r\n (change)=\"updateMonth('date')\">\r\n <label class=\"cursor-pointer\" for=\"inlineRadio1\">On\r\n the</label>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div\r\n class=\"fv-row mb-5 fv-plugins-icon-container d-flex flex-column\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"monthDate\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'date'\">\r\n <option value=\"1\"> First </option>\r\n <option value=\"2\"> Second </option>\r\n <option value=\"3\"> Third</option>\r\n <option value=\"4\"> Fourth</option>\r\n <option value=\"5\"> Last</option>\r\n </select>\r\n </div>\r\n <div\r\n class=\"fv-row mb-5 mx-2 fv-plugins-icon-container d-flex flex-column\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"monthDay\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'date'\">\r\n <option value=\"Sunday\"> Sunday </option>\r\n <option value=\"Monday\"> Monday </option>\r\n <option value=\"Tuesday\"> Tuesday</option>\r\n <option value=\"Wednesday\"> Wednesday</option>\r\n <option value=\"Thursday\"> Thursday</option>\r\n <option value=\"Friday\">Friday</option>\r\n <option value=\"Saturday\"> Saturday</option>\r\n </select>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-2 mt-3\">\r\n <div class=\"form-check fontSize\">\r\n <input class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"day\"\r\n [checked]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup === 'specific'\"\r\n (change)=\"updateMonth('specific')\">\r\n <label class=\"cursor-pointer\" for=\"inlineRadio1\">On\r\n Specific Dates</label>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div class=\"position-relative\"\r\n (clickOutside)=\"closeDropDown()\">\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div\r\n class=\"d-flex align-items-center position-relative w-100\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n 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=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\"\r\n class=\"form-control dropdown-input ps-14\"\r\n (click)=\"toggleDropDown()\" readonly\r\n placeholder=\"Select Dates\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'specific'\" />\r\n </div>\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu w-100\"\r\n *ngIf=\"showDropDown\">\r\n <div class=\"calendar-container\">\r\n <div class=\"content\">\r\n <div class=\"dates\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"row d-flex\">\r\n <div class=\"col-2 mb-2\"\r\n *ngFor=\"let date of dates\">\r\n <li class=\"nav-item me-1\"\r\n role=\"presentation\"\r\n (click)=\"selectDate(date)\">\r\n <a class=\"nav-link btn weekstyledate d-flex flex-column flex-center rounded-pill min-w-35px py-2 px-3 \"\r\n [ngClass]=\"selectedDate.includes(date) ? 'active btn-active-primary' : ''\"\r\n data-bs-toggle=\"tab\"\r\n aria-selected=\"false\"\r\n tabindex=\"-1\"\r\n role=\"tab\">\r\n <span\r\n class=\"pillstyle\">{{\r\n date\r\n }}</span>\r\n </a>\r\n </li>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button ms-2\"\r\n (click)=\"submitDate();showDropDown= false;\">\r\n <button\r\n class=\"btn btn-primary btn-block w-100\">\r\n Submit\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-6 py-3 badge-specificdate\">\r\n <div class=\"d-flex mt-3 flex-wrap\">\r\n <span *ngFor=\"let date of submittedDates\"\r\n class=\"badge badge-pill badge-light checklisttext me-4\">\r\n {{ getDateWithSuffix(date) }}\r\n <span (click)=\"removeBadge(date)\"\r\n class=\"cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div\r\n *ngIf=\"['weekday','weekly'].includes(configData.checkListDetails.schedule)\">\r\n <ul class=\"nav nav-pills d-flex flex-nowrap mb-3\"\r\n role=\"tablist\">\r\n\r\n <ng-container\r\n *ngFor=\"let day of ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']\">\r\n <li class=\"nav-item me-1\" role=\"presentation\"\r\n (click)=\"(configData.checkListDetails.schedule === 'weekly' || (configData.checkListDetails.schedule === 'weekday' && !['Sunday','Saturday'].includes(day))) ? setDay(day) : ''\">\r\n <a class=\"nav-link btn weekstyle d-flex flex-column flex-center rounded-pill min-w-45px me-2 py-4 px-3\"\r\n [ngClass]=\"(configData.checkListDetails.schedule === 'weekday' && ['Sunday','Saturday'].includes(day)) ? 'cursor-default' : selectedDays.includes(day) ? 'selectDay' : ''\"\r\n data-bs-toggle=\"tab\" aria-selected=\"false\"\r\n tabindex=\"-1\" role=\"tab\">\r\n <span class=\"pillstyle\">{{ day[0] }}</span>\r\n </a>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.schedule === 'range'\">\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n\r\n <div class=\"col-lg-6 d-flex\">\r\n <div class=\"form-check form-switch mt-3\">\r\n <input type=\"checkbox\" id=\"flexSwitchCheckDefault\"\r\n class=\"form-check-input ng-valid ng-dirty ng-touched\"\r\n [(ngModel)]=\"specific\"\r\n (change)=\"updateSpecific($event)\">\r\n <label for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label checklisttext ms-2\">On Specific\r\n Dates</label>\r\n </div>\r\n <div class=\"px-4 pe-3 position-relative\"\r\n (clickOutside)=\"closeDropDown()\">\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div\r\n class=\"d-flex align-items-center position-relative w-300px\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n 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=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\"\r\n class=\"form-control dropdown-input ps-14\"\r\n (click)=\"toggleDropDown()\" readonly\r\n placeholder=\"Select Dates\"\r\n [disabled]=\"!specific\" />\r\n </div>\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu w-100\"\r\n *ngIf=\"showDropDown\">\r\n <lib-multi-date-datepicker\r\n (selectedDates)=\"selectSpecificDate($event)\"\r\n [predefinedDates]=\"selectedDateList\"\r\n [startDate]=\"configData.checkListDetails.configStartDate\"\r\n [endDate]=\"configData.checkListDetails.configEndDate\"></lib-multi-date-datepicker>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-6 py-3 badge-specificdate\">\r\n <div class=\"d-flex mt-3 ms-5 flex-wrap\">\r\n <span *ngFor=\"let date of selectedDateList\"\r\n class=\"badge badge-pill badge-light checklisttext me-4\">\r\n {{ date }}\r\n <span (click)=\"removeDate(date)\"\r\n class=\"cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\"\r\n stroke=\"#667085\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\"\r\n [hidden]=\"!showRangeValue || configData.checkListDetails.schedule === 'onetime'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-2\"\r\n [ngClass]=\"configData.checkListDetails.schedule === 'range' ? 'mt-4' : 'mt-2'\">\r\n <span class=\"sub\">Ends On</span>\r\n </div>\r\n <div class=\"col-md-3\" id=\"dateclass\"\r\n [ngClass]=\"configData.checkListDetails.schedule === 'range' ? 'ps-9' : 'px-4 pe-3'\"\r\n data-kt-daterangepicker=\"true\" data-kt-daterangepicker-opens=\"left\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\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\"\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n matInput ngxDaterangepickerMd [singleDatePicker]=\"true\"\r\n [minDate]=\"minEndDate\" [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedEndDate\" [autoApply]=\"false\"\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)=\"dateRangeEnd($event)\" name=\"daterange\"\r\n [readonly]=\"true\" />\r\n </div>\r\n <div class=\"mt-5 remove cursor-pointer ms-4\"\r\n (click)=\"onDatepickerRefresh()\"\r\n *ngIf=\"configData.checkListDetails.configEndDate !== '' && configData.checkListDetails.configEndDate !== null && configData.checkListDetails.schedule !=='range'\">\r\n Remove\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'onetime'\">\r\n Occurs on\r\n the day {{configData.checkListDetails?.scheduleDate | date:'dd MMM YYYY'}}</div>\r\n <div class=\"my-3 user\"\r\n *ngIf=\"['weekday','weekly'].includes(configData.checkListDetails?.schedule)\">\r\n Occurs\r\n every {{(configData.checkListDetails?.scheduleRepeatedDay?.length &&\r\n configData.checkListDetails?.scheduleRepeatedDay !=='01') ?\r\n configData.checkListDetails?.scheduleRepeatedDay : ''}} week<span\r\n *ngIf=\"configData.checkListDetails?.scheduleRepeatedDay !== 01\">s</span> on\r\n {{selectedDays.toString()}}<span *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate | date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate\">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'daily'\">\r\n Occurs every\r\n {{(configData.checkListDetails?.scheduleRepeatedDay?.length &&\r\n configData.checkListDetails?.scheduleRepeatedDay !== '01') ?\r\n configData.checkListDetails?.scheduleRepeatedDay : ''}} day<span\r\n *ngIf=\"configData.checkListDetails?.scheduleRepeatedDay !== 01\">s</span><span\r\n *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate |\r\n date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate \">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'monthly'\">\r\n Occurs\r\n every\r\n {{(configData.checkListDetails?.scheduleRepeatedDay?.length &&\r\n configData.checkListDetails?.scheduleRepeatedDay !== '01') ?\r\n configData.checkListDetails?.scheduleRepeatedDay : ''}} month<span\r\n *ngIf=\"configData.checkListDetails?.scheduleRepeatedDay !== 01\">s\r\n </span>{{(configData.checkListDetails?.scheduleRepeatedMonthSetup === 'day') ?\r\n ('on day ' + configData.checkListDetails.scheduleRepeatedMonthWeek) :\r\n configData.checkListDetails?.scheduleRepeatedMonthSetup === 'date' ?\r\n updateMonthValue():\r\n updateSpecificValue()}}<span *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate | date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate\">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'range'\">\r\n Occurs every\r\n {{configData.checkListDetails?.scheduleWeekDays?.toString()}} <span\r\n *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate |\r\n date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate\">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"section-left\" *ngIf=\"['custom'].includes(type)\">\r\n <div>\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\">\r\n <div class=\"config-heading\">Response Configuration</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" (click)=\"configaccordian()\"\r\n [ngClass]=\"{'rotate' : showconfig}\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"35\" height=\"35\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"showconfig\">\r\n <div cdkDropList>\r\n <div cdkDrag>\r\n <div class=\"col-lg-12\"\r\n [ngClass]=\"['onetime','daily'].includes(configData?.checkListDetails.schedule) || (configData?.checkListDetails.schedule === 'monthly' && configData?.checkListDetails.scheduleRepeatedMonthSetup !=='specific') ? 'bg-color-disabled' : ''\">\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.allowOnce ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowOnce\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"oneTime\"\r\n [disabled]=\"['onetime','daily'].includes(configData?.checkListDetails.schedule) || (configData?.checkListDetails.schedule === 'monthly' && configData?.checkListDetails.scheduleRepeatedMonthSetup !=='specific')\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"oneTime\">Only one\r\n time\r\n </label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"oneTime\">By\r\n enabling this, the response can be captured only\r\n once for\r\n this checklist <span *ngIf=\"showRangeValue\">from\r\n {{configData.checkListDetails.configStartDate}}\r\n <span\r\n *ngIf=\"configData.checkListDetails.configEndDate\">to\r\n {{configData.checkListDetails.configEndDate}}.</span></span></label>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\" configData?.checkListDetails?.allowedOverTime ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowedOverTime\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"fillResponse\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"fillResponse\">Fill response after configure\r\n time.</label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"fillResponse\">By enabling, the user can\r\n fill the\r\n checklist even after the above configured\r\n end-time.</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.allowedStoreLocation ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowedStoreLocation\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"geoFencing\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"geoFencing\">Geo\r\n fencing\r\n </label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"geoFencing\">By\r\n enabling, the checklist can be filled by the user\r\n only when\r\n inside the store.</label>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.allowedMultiSubmit ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowedMultiSubmit\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"allowedMultiSubmitSwitch\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"allowedMultiSubmitSwitch\">Allow multiple\r\n responses</label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"allowedMultiSubmitSwitch\">By enabling, the\r\n checklist\r\n can be filled multiple times in a day</label>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.restrictAttendance ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.restrictAttendance\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"restrictAttendance\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"restrictAttendance\">Restrict\r\n attendance</label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"restrictAttendance\">By enabling, user can't be\r\n able to clockout without completing the\r\n task.</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <div class=\"section-left\" *ngIf=\"['custom'].includes(type)\">\r\n <div>\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\">\r\n <div class=\"config-heading\">Advance Configuration</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" (click)=\"advanceaccordian()\"\r\n [ngClass]=\"{'rotate' : showadvance}\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"35\" height=\"35\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"showadvance\">\r\n <div cdkDropList>\r\n <div cdkDrag>\r\n <div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex\">\r\n <div class=\"mt-2 form-check-label sub\">\r\n <span>Checklist Owner</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-check-label subtext\">\r\n Owners get access to manage the checklist\r\n </div>\r\n <div class=\"col-lg-12 mt-3\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">Can be managed by </div>\r\n </div>\r\n </div>\r\n <div class=\"w-80\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData?.checkListDetails?.owner\"\r\n (selectedList)=\"updateOwner($event)\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-5\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex\">\r\n <div class=\"mt-2 form-check-label sub\">\r\n <span>Approver</span>\r\n </div>\r\n <div class=\"form-check form-switch ms-5\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.approver?.length ? true : false\"\r\n [(ngModel)]=\"approve\" type=\"checkbox\"\r\n id=\"approver\"\r\n (change)=\"updateConfigApprover($event)\"\r\n disabled>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-check-label subtext\">\r\n By enabling, the users will be able to approve the checklist\r\n </div>\r\n <div class=\"col-lg-12 mt-3\" *ngIf=\"approve\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">To be approved by </div>\r\n </div>\r\n </div>\r\n <div class=\"w-80\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData?.checkListDetails?.approver\"\r\n (selectedList)=\"updateApprover($event)\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-5\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex\">\r\n <div class=\"mt-2 form-check-label sub\">\r\n <span>Reminder</span>\r\n </div>\r\n <div class=\"form-check form-switch ms-5\">\r\n <input class=\"form-check-input mt-3\"\r\n [(ngModel)]=\"remainder\" type=\"checkbox\"\r\n id=\"oneTime\"\r\n (change)=\"updateConfigRemainder($event)\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-check-label subtext\">\r\n By enabling, the users will be reminded in the selected\r\n interval\r\n </div>\r\n <div class=\"col-lg-12 mt-3\" *ngIf=\"remainder\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">Notify user before</div>\r\n </div>\r\n </div>\r\n <div class=\"w-80\">\r\n <div class=\"w-100 d-flex\">\r\n <div class=\"d-flex align-items-center position-relative w-200px ,\"\r\n *ngFor=\"let loop of configData.checkListDetails?.remainder;let i=index\">\r\n <!-- <span *ngFor=\"let loop of timeLoop\"> -->\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g\r\n clip-path=\"url(#clip0_1487_47636)\">\r\n <path\r\n d=\"M10.0013 5.00033V10.0003L13.3346 11.667M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1487_47636\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <select class=\"form-select ps-14 me-5\"\r\n (change)=\"updateRemainder($event,i)\"\r\n [id]=\"'remainder'+ i\">\r\n <option\r\n *ngFor=\"let time of updateTimeLoop(i)\"\r\n class=\"h-200px\"\r\n [selected]=\"loop === time\"\r\n [value]=\"time\">{{time}} mins\r\n </option>\r\n </select>\r\n <!-- </span> -->\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.remainder.length < 3\"\r\n class=\"ms-5\">\r\n <button class=\"btn btn-sm btn-outline\"\r\n (click)=\"updateLoop()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10.0013 4.16699V15.8337M4.16797 10.0003H15.8346\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"remainder\" class=\"mt-2 user\">\r\n Send Alerts <span\r\n *ngFor=\"let item of configData.checkListDetails.remainder;let i=index\"><span\r\n *ngIf=\"i !== configData.checkListDetails.remainder.length-1 && i !== 0\">\r\n ,</span><span\r\n *ngIf=\"i === configData.checkListDetails.remainder.length-1 && i !== 0\">\r\n and</span> {{item}}mins </span>before the checklist\r\n end time\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <div *ngIf=\"['eyetest'].includes(type)\" class=\"mt-6 mx-4 sub\">Store opens at <span\r\n class=\"fw-600\"><u>{{configData?.openTime}}</u></span> and closes\r\n at <span class=\"fw-600\"><u>{{configData?.closeTime}}</u></span>, everyday. <div\r\n class=\"separator mt-8\"></div>\r\n </div>\r\n <div *ngIf=\"type === 'unattended'\" class=\"mt-6 mx-4 sub\">\r\n Time taken to assist by staff &lt;= 1 mins | Staff to customer time spent &lt;=1\r\n mins\r\n <!-- Store opens at <span\r\n class=\"fw-600\"><u>{{configData?.openTime}}</u></span> and closes\r\n at <span class=\"fw-600\"><u>{{configData?.closeTime}}</u></span>, everyday. <div\r\n class=\"separator mt-8\"></div> -->\r\n </div>\r\n <div *ngIf=\"type !=='custom'\">\r\n <div *ngIf=\"!['eyetest','halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"separator mt-8\"></div>\r\n <h2 class=\"section-leftheading mt-8\">Notify Alerts\r\n <span class=\"mx-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\">\r\n <path\r\n d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1874_66195\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </h2>\r\n <div *ngIf=\"['mobileusagedetection'].includes(type)\" class=\"col-md-12 mt-8\">\r\n <div class=\"row mt-4\">\r\n <div class=\"col-md-2 mt-2 \">\r\n <span class=\"mx-4 sub\">If usage exceeds</span>\r\n </div>\r\n <div class=\"col-lg-1\">\r\n <div class=\"fv-row mb-5 fv-plugins-icon-container flex flex-column\">\r\n\r\n <input\r\n class=\"form-control form-control-solid text-center w-55px\"\r\n [(ngModel)]=\"configData.aiConfig.mobileDetection.usageExceed\"\r\n type=\"text\" (keypress)=\"omit_special_char($event)\"\r\n autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (input)=\"validateLimit($event)\" />\r\n <span class=\"text-danger usageerror\" *ngIf=\"errormsg\">Please\r\n enter event count\r\n between 15 to 999</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mt-2\">\r\n <span class=\"sub\">detections per day</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['uniformdetection','mobileusagedetection','scrum','cleaning','storeopenandclose','unattended','packageConfiguration','staffleftinthemiddle','customerunattended','outsidebusinesshoursqueuetracking','halfshutter','tvcompliance'].includes(type)\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"col-lg-2\">\r\n <div class=\"d-flex align-items-center my-5\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mx-4\">Send Alert to </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-9\">\r\n <div class=\"fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.alerts.users\"\r\n (selectedList)=\"updateAlert($event,'user')\"></lib-chip-dropdown>\r\n <!-- <lib-chip-dropdown [data]=\"alertUsers\" [selectedData]=\"configData?.checkListDetails?.owner\"\r\n (selectedList)=\"updateOwner($event)\"></lib-chip-dropdown> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Schedule Checklist -->\r\n <div *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <div>\r\n <h2 class=\"section-leftheading\">Schedule Checklist </h2>\r\n </div>\r\n <div class=\"schedule-config-description mb-6\">Set the desired time to run the\r\n checklist</div>\r\n <div>\r\n <div *ngIf=\"['halfshutter'].includes(type)\"\r\n class=\"d-flex align-items-center p-2 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-2\">\r\n This checklist will run based on each store\u2019s opening and closing\r\n time. You can view store timings in the 'Assign Stores' section\r\n below.\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"row ng-star-inserted\" *ngIf=\"['halfshutter'].includes(type)\">\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\"> Start Detection for a\r\n duration, </div>\r\n </div>\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.halfshutter.schedule.afterOpenTime\"\r\n required>\r\n <option *ngFor=\"let time of scheduleTimeConfig\" [value]=\"time\">\r\n {{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header me-3\"> minutes after Store Open\r\n time and </div>\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.halfshutter.schedule.beforeCloseTime\"\r\n required>\r\n <option *ngFor=\"let time of scheduleTimeConfig\" [value]=\"time\">\r\n {{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes before Store Close\r\n time </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-4 mb-4\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"sched\" id=\"std\"\r\n [(ngModel)]=\"scheduletype\" value=\"standard\">\r\n <label class=\"small fw-medium\" for=\"std\">Standard Store Open & Close\r\n Time</label>\r\n </div>\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"sched\" id=\"custom\"\r\n [(ngModel)]=\"scheduletype\" value=\"custom\">\r\n <label class=\"small fw-medium\" for=\"custom\">Custom Time</label>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-3 mb-4\"\r\n *ngIf=\"scheduletype==='custom'\">\r\n <span class=\"fw-medium text-dark\">Start at</span>\r\n <div class=\"time-input-wrapper\">\r\n <input type=\"time\" class=\"form-control time-field\"\r\n [(ngModel)]=\"schedulestartTime\">\r\n <i class=\"bi bi-clock\"></i>\r\n </div>\r\n\r\n <span class=\"fw-medium text-dark ms-2\">Ends at</span>\r\n <div class=\"time-input-wrapper\">\r\n <input type=\"time\" class=\"form-control time-field\"\r\n [(ngModel)]=\"scheduleendTime\">\r\n <i class=\"bi bi-clock\"></i>\r\n </div>\r\n </div>\r\n <hr style=\"border:1px solid #cbcdd1\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"fw-bold small me-3\">Set recurrence</span>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n [(ngModel)]=\"recurrenceStatus\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"recurrenceStatus\" class=\"fade-in mt-3\">\r\n <div class=\"d-flex align-items-center gap-2 mb-4\">\r\n <span class=\"text-secondary-blue fw-medium\">Repeat every</span>\r\n\r\n <select class=\"form-select custom-select shadow-none\"\r\n [(ngModel)]=\"recurrencetime\">\r\n <option [value]=\"1\">1</option>\r\n <option [value]=\"2\">2</option>\r\n <option [value]=\"3\">3</option>\r\n <option [value]=\"4\">4</option>\r\n <option [value]=\"5\">5</option>\r\n <option [value]=\"6\">6</option>\r\n <option [value]=\"7\">7</option>\r\n <option [value]=\"8\">8</option>\r\n </select>\r\n\r\n <span class=\"text-secondary-blue fw-medium\">Hours</span>\r\n </div>\r\n\r\n <!-- Row 3: Summary Text -->\r\n <p class=\"summary-text\">\r\n Occurs every {{recurrencetime}} Hours between\r\n <span *ngIf=\"scheduletype!=='custom'\">Store Open & Close Time</span>\r\n <span *ngIf=\"scheduletype==='custom'\">{{schedulestartTime}}\r\n \u2013{{scheduleendTime}}</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Detection Areas -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['mobileusagedetection','outsidebusinesshoursqueuetracking','halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <h2 class=\"section-leftheading\">Detection Areas\r\n <!-- <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\"> <path d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g>\r\n <defs> <clipPath id=\"clip0_1874_66195\"> <rect width=\"16\" height=\"16\" fill=\"white\" /> </clipPath> </defs>\r\n </svg>\r\n </span> -->\r\n </h2>\r\n\r\n <div *ngIf=\"configData?.product.includes('tangoZone')\" class=\"row ng-star-inserted\">\r\n <div *ngIf=\"configData?.product.includes('tangoZone')\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mb-4\" *ngIf=\"['mobileusagedetection'].includes(type)\">\r\n Detect mobile usage except </div>\r\n <div class=\"schedule-config-description mb-6\"\r\n *ngIf=\"['outsidebusinesshoursqueuetracking','halfshutter','tvcompliance'].includes(type)\">\r\n Checklist will run on this Zone </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"configData?.product.includes('tangoZone')\">\r\n <!-- <lib-chip-dropdown [data]=\"zoneList\" [selectedData]=\"configData.aiConfig?.detectionArea\" (selectedList)=\"updateZone($event)\"></lib-chip-dropdown> -->\r\n <div class=\"border border-2 p-3 rounded\" style=\"min-height: 44px;\"> <span\r\n class=\"badge badge-light-default mx-2\"\r\n *ngFor=\"let item of zoneList;let i=index\">{{item.name}}</span></div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!configData?.product.includes('tangoZone')\"\r\n class=\"row ng-star-inserted mx-4\">\r\n <div *ngIf=\"!configData?.product.includes('tangoZone')\"\r\n class=\"card mt-3 p-3 border border-1\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex align-items-center\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\"\r\n viewBox=\"0 0 90 90\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"75.6666\" height=\"75.6666\"\r\n rx=\"37.8333\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"75.6666\" height=\"75.6666\"\r\n rx=\"37.8333\" stroke=\"#EAF8FF\" stroke-width=\"13.5119\" />\r\n <path\r\n d=\"M45.4287 37.9157L44.8683 38.2416L45.1709 38.815L47.7248 43.6539C48.3333 44.8068 49.8697 45.1058 50.8961 44.3291L50.8965 44.3288L54.8678 41.3181L55.2485 41.0295L55.1912 41.328L53.1546 51.9421C52.9711 52.8889 52.0879 53.6161 51.0099 53.6161H38.6549C37.5722 53.6161 36.6903 52.8848 36.5106 51.9439L36.5105 51.9433L34.4736 41.328L34.4163 41.0295L34.797 41.3181L38.7683 44.3288L38.7687 44.3291C39.7951 45.1058 41.3315 44.8068 41.94 43.6539L44.4939 38.815L44.7965 38.2416L44.2361 37.9157C43.9174 37.7302 43.7252 37.4107 43.7252 37.064C43.7252 36.5379 44.1856 36.0506 44.8324 36.0506C45.4792 36.0506 45.9396 36.5379 45.9396 37.064C45.9396 37.4074 45.7465 37.7308 45.4287 37.9157ZM55.8547 40.7798H55.3197L54.9903 40.3617C54.8544 40.1892 54.7787 39.984 54.7787 39.7664C54.7787 39.2403 55.2391 38.753 55.8859 38.753C56.5326 38.753 56.9931 39.2403 56.9931 39.7664C56.9931 40.2925 56.5326 40.7798 55.8859 40.7798H55.8858H55.8858H55.8857H55.8857H55.8856H55.8856H55.8855H55.8855H55.8854H55.8854H55.8853H55.8852H55.8852H55.8851H55.8851H55.885H55.885H55.8849H55.8849H55.8848H55.8848H55.8847H55.8847H55.8846H55.8845H55.8845H55.8844H55.8844H55.8843H55.8843H55.8842H55.8842H55.8841H55.884H55.884H55.8839H55.8839H55.8838H55.8838H55.8837H55.8837H55.8836H55.8835H55.8835H55.8834H55.8834H55.8833H55.8833H55.8832H55.8831H55.8831H55.883H55.883H55.8829H55.8829H55.8828H55.8827H55.8827H55.8826H55.8826H55.8825H55.8825H55.8824H55.8823H55.8823H55.8822H55.8822H55.8821H55.8821H55.882H55.8819H55.8819H55.8818H55.8818H55.8817H55.8816H55.8816H55.8815H55.8815H55.8814H55.8813H55.8813H55.8812H55.8812H55.8811H55.8811H55.881H55.8809H55.8809H55.8808H55.8808H55.8807H55.8806H55.8806H55.8805H55.8805H55.8804H55.8803H55.8803H55.8802H55.8802H55.8801H55.88H55.88H55.8799H55.8798H55.8798H55.8797H55.8797H55.8796H55.8795H55.8795H55.8794H55.8794H55.8793H55.8792H55.8792H55.8791H55.8791H55.879H55.8789H55.8789H55.8788H55.8787H55.8787H55.8786H55.8786H55.8785H55.8784H55.8784H55.8783H55.8782H55.8782H55.8781H55.8781H55.878H55.8779H55.8779H55.8778H55.8777H55.8777H55.8776H55.8776H55.8775H55.8774H55.8774H55.8773H55.8772H55.8772H55.8771H55.8771H55.877H55.8769H55.8769H55.8768H55.8767H55.8767H55.8766H55.8766H55.8765H55.8764H55.8764H55.8763H55.8762H55.8762H55.8761H55.876H55.876H55.8759H55.8759H55.8758H55.8757H55.8757H55.8756H55.8755H55.8755H55.8754H55.8753H55.8753H55.8752H55.8751H55.8751H55.875H55.875H55.8749H55.8748H55.8748H55.8747H55.8746H55.8746H55.8745H55.8744H55.8744H55.8743H55.8742H55.8742H55.8741H55.8741H55.874H55.8739H55.8739H55.8738H55.8737H55.8737H55.8736H55.8735H55.8735H55.8734H55.8733H55.8733H55.8732H55.8731H55.8731H55.873H55.873H55.8729H55.8728H55.8728H55.8727H55.8726H55.8726H55.8725H55.8724H55.8724H55.8723H55.8722H55.8722H55.8721H55.872H55.872H55.8719H55.8718H55.8718H55.8717H55.8717H55.8716H55.8715H55.8715H55.8714H55.8713H55.8713H55.8712H55.8711H55.8711H55.871H55.8709H55.8709H55.8708H55.8707H55.8707H55.8706H55.8705H55.8705H55.8704H55.8703H55.8703H55.8702H55.8701H55.8701H55.87H55.87H55.8699H55.8698H55.8698H55.8697H55.8696H55.8696H55.8695H55.8694H55.8694H55.8693H55.8692H55.8692H55.8691H55.869H55.869H55.8689H55.8688H55.8688H55.8687H55.8686H55.8686H55.8685H55.8685H55.8684H55.8683H55.8683H55.8682H55.8681H55.8681H55.868H55.8679H55.8679H55.8678H55.8677H55.8677H55.8676H55.8675H55.8675H55.8674H55.8673H55.8673H55.8672H55.8672H55.8671H55.867H55.867H55.8669H55.8668H55.8668H55.8667H55.8666H55.8666H55.8665H55.8664H55.8664H55.8663H55.8662H55.8662H55.8661H55.8661H55.866H55.8659H55.8659H55.8658H55.8657H55.8657H55.8656H55.8655H55.8655H55.8654H55.8653H55.8653H55.8652H55.8652H55.8651H55.865H55.865H55.8649H55.8648H55.8648H55.8647H55.8646H55.8646H55.8645H55.8645H55.8644H55.8643H55.8643H55.8642H55.8641H55.8641H55.864H55.8639H55.8639H55.8638H55.8638H55.8637H55.8636H55.8636H55.8635H55.8634H55.8634H55.8633H55.8632H55.8632H55.8631H55.8631H55.863H55.8629H55.8629H55.8628H55.8627H55.8627H55.8626H55.8626H55.8625H55.8624H55.8624H55.8623H55.8622H55.8622H55.8621H55.8621H55.862H55.8619H55.8619H55.8618H55.8618H55.8617H55.8616H55.8616H55.8615H55.8614H55.8614H55.8613H55.8613H55.8612H55.8611H55.8611H55.861H55.861H55.8609H55.8608H55.8608H55.8607H55.8606H55.8606H55.8605H55.8605H55.8604H55.8603H55.8603H55.8602H55.8602H55.8601H55.86H55.86H55.8599H55.8599H55.8598H55.8597H55.8597H55.8596H55.8596H55.8595H55.8594H55.8594H55.8593H55.8593H55.8592H55.8591H55.8591H55.859H55.859H55.8589H55.8589H55.8588H55.8587H55.8587H55.8586H55.8586H55.8585H55.8584H55.8584H55.8583H55.8583H55.8582H55.8582H55.8581H55.858H55.858H55.8579H55.8579H55.8578H55.8578H55.8577H55.8576H55.8576H55.8575H55.8575H55.8574H55.8574H55.8573H55.8572H55.8572H55.8571H55.8571H55.857H55.857H55.8569H55.8568H55.8568H55.8567H55.8567H55.8566H55.8566H55.8565H55.8565H55.8564H55.8563H55.8563H55.8562H55.8562H55.8561H55.8561H55.856H55.856H55.8559H55.8559H55.8558H55.8557H55.8557H55.8556H55.8556H55.8555H55.8555H55.8554H55.8554H55.8553H55.8553H55.8552H55.8552H55.8551H55.855H55.855H55.8549H55.8549H55.8548H55.8548H55.8547H55.8547ZM34.6745 40.3617L34.3451 40.7798H33.8101H33.8101H33.81H33.81H33.8099H33.8099H33.8098H33.8097H33.8097H33.8096H33.8096H33.8095H33.8095H33.8094H33.8094H33.8093H33.8093H33.8092H33.8092H33.8091H33.809H33.809H33.8089H33.8089H33.8088H33.8088H33.8087H33.8087H33.8086H33.8086H33.8085H33.8084H33.8084H33.8083H33.8083H33.8082H33.8082H33.8081H33.8081H33.808H33.8079H33.8079H33.8078H33.8078H33.8077H33.8077H33.8076H33.8076H33.8075H33.8074H33.8074H33.8073H33.8073H33.8072H33.8072H33.8071H33.807H33.807H33.8069H33.8069H33.8068H33.8068H33.8067H33.8066H33.8066H33.8065H33.8065H33.8064H33.8063H33.8063H33.8062H33.8062H33.8061H33.8061H33.806H33.8059H33.8059H33.8058H33.8058H33.8057H33.8056H33.8056H33.8055H33.8055H33.8054H33.8053H33.8053H33.8052H33.8052H33.8051H33.805H33.805H33.8049H33.8049H33.8048H33.8047H33.8047H33.8046H33.8046H33.8045H33.8044H33.8044H33.8043H33.8043H33.8042H33.8041H33.8041H33.804H33.804H33.8039H33.8038H33.8038H33.8037H33.8037H33.8036H33.8035H33.8035H33.8034H33.8033H33.8033H33.8032H33.8032H33.8031H33.803H33.803H33.8029H33.8029H33.8028H33.8027H33.8027H33.8026H33.8025H33.8025H33.8024H33.8024H33.8023H33.8022H33.8022H33.8021H33.802H33.802H33.8019H33.8019H33.8018H33.8017H33.8017H33.8016H33.8015H33.8015H33.8014H33.8014H33.8013H33.8012H33.8012H33.8011H33.801H33.801H33.8009H33.8008H33.8008H33.8007H33.8007H33.8006H33.8005H33.8005H33.8004H33.8003H33.8003H33.8002H33.8001H33.8001H33.8H33.8H33.7999H33.7998H33.7998H33.7997H33.7996H33.7996H33.7995H33.7994H33.7994H33.7993H33.7993H33.7992H33.7991H33.7991H33.799H33.7989H33.7989H33.7988H33.7987H33.7987H33.7986H33.7985H33.7985H33.7984H33.7984H33.7983H33.7982H33.7982H33.7981H33.798H33.798H33.7979H33.7978H33.7978H33.7977H33.7976H33.7976H33.7975H33.7974H33.7974H33.7973H33.7973H33.7972H33.7971H33.7971H33.797H33.7969H33.7969H33.7968H33.7967H33.7967H33.7966H33.7965H33.7965H33.7964H33.7963H33.7963H33.7962H33.7961H33.7961H33.796H33.7959H33.7959H33.7958H33.7958H33.7957H33.7956H33.7956H33.7955H33.7954H33.7954H33.7953H33.7952H33.7952H33.7951H33.795H33.795H33.7949H33.7948H33.7948H33.7947H33.7946H33.7946H33.7945H33.7944H33.7944H33.7943H33.7943H33.7942H33.7941H33.7941H33.794H33.7939H33.7939H33.7938H33.7937H33.7937H33.7936H33.7935H33.7935H33.7934H33.7933H33.7933H33.7932H33.7931H33.7931H33.793H33.7929H33.7929H33.7928H33.7928H33.7927H33.7926H33.7926H33.7925H33.7924H33.7924H33.7923H33.7922H33.7922H33.7921H33.792H33.792H33.7919H33.7918H33.7918H33.7917H33.7916H33.7916H33.7915H33.7915H33.7914H33.7913H33.7913H33.7912H33.7911H33.7911H33.791H33.7909H33.7909H33.7908H33.7907H33.7907H33.7906H33.7905H33.7905H33.7904H33.7904H33.7903H33.7902H33.7902H33.7901H33.79H33.79H33.7899H33.7898H33.7898H33.7897H33.7896H33.7896H33.7895H33.7895H33.7894H33.7893H33.7893H33.7892H33.7891H33.7891H33.789H33.7889H33.7889H33.7888H33.7887H33.7887H33.7886H33.7886H33.7885H33.7884H33.7884H33.7883H33.7882H33.7882H33.7881H33.7881H33.788H33.7879H33.7879H33.7878H33.7877H33.7877H33.7876H33.7875H33.7875H33.7874H33.7874H33.7873H33.7872H33.7872H33.7871H33.787H33.787H33.7869H33.7869H33.7868H33.7867H33.7867H33.7866H33.7865H33.7865H33.7864H33.7864H33.7863H33.7862H33.7862H33.7861H33.786H33.786H33.7859H33.7859H33.7858H33.7857H33.7857H33.7856H33.7856H33.7855H33.7854H33.7854H33.7853H33.7852H33.7852H33.7851H33.7851H33.785H33.7849H33.7849H33.7848H33.7848H33.7847H33.7846H33.7846H33.7845H33.7845H33.7844H33.7843H33.7843H33.7842H33.7842H33.7841H33.784H33.784H33.7839H33.7839H33.7838H33.7837H33.7837H33.7836H33.7836H33.7835H33.7834H33.7834H33.7833H33.7833H33.7832H33.7831H33.7831H33.783H33.783H33.7829H33.7829H33.7828H33.7827H33.7827H33.7826H33.7826H33.7825H33.7824H33.7824H33.7823H33.7823H33.7822H33.7822H33.7821H33.782H33.782H33.7819H33.7819H33.7818H33.7818H33.7817H33.7816H33.7816H33.7815H33.7815H33.7814H33.7814H33.7813H33.7812H33.7812H33.7811H33.7811H33.781H33.781H33.7809H33.7809H33.7808H33.7807H33.7807H33.7806H33.7806H33.7805H33.7805H33.7804H33.7804H33.7803H33.7803H33.7802H33.7801H33.7801H33.78H33.78H33.7799H33.7799H33.7798H33.7798H33.7797H33.7797H33.7796H33.7795H33.7795H33.7794H33.7794H33.7793H33.7793H33.7792H33.7792H33.7791H33.7791H33.779H33.779H33.7789C33.1321 40.7798 32.6717 40.2925 32.6717 39.7664C32.6717 39.2403 33.1321 38.753 33.7789 38.753C34.4257 38.753 34.8861 39.2403 34.8861 39.7664C34.8861 39.984 34.8103 40.1892 34.6745 40.3617Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.35119\" />\r\n </svg></span>\r\n <div class=\"ms-3\">\r\n <div class=\"section-leftheading\">Exclude Zone</div>\r\n <div class=\"zone-subscription\">To add an Excluded Zone inside\r\n the store, please upgrade your plan and subscribe to\r\n TangoEye.</div>\r\n </div>\r\n </div>\r\n <div routerLink=\"/manage/settings/payment-subscription\"\r\n class=\"button btn btn-sm py-3 btn-primary d-flex\">\r\n <span>Upgrade plan</span><span><svg class=\"ms-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M11.3607 6.14453C11.7367 5.92578 11.9874 5.52891 11.9874 5.08203C11.9874 4.39141 11.397 3.83203 10.668 3.83203C9.93898 3.83203 9.34852 4.39141 9.34852 5.08203C9.34852 5.53203 9.59922 5.92578 9.97526 6.14453L8.08516 9.72578C7.78498 10.2945 7.00651 10.457 6.48203 10.0602L3.54297 7.83203C3.7079 7.62266 3.80686 7.36328 3.80686 7.08203C3.80686 6.39141 3.21641 5.83203 2.48741 5.83203C1.75842 5.83203 1.16797 6.39141 1.16797 7.08203C1.16797 7.77266 1.75842 8.33203 2.48741 8.33203C2.49401 8.33203 2.50391 8.33203 2.5105 8.33203L4.01797 16.1883C4.19939 17.1383 5.07352 17.832 6.09609 17.832H15.2398C16.2591 17.832 17.1332 17.1414 17.318 16.1883L18.8254 8.33203C18.832 8.33203 18.8419 8.33203 18.8485 8.33203C19.5775 8.33203 20.168 7.77266 20.168 7.08203C20.168 6.39141 19.5775 5.83203 18.8485 5.83203C18.1195 5.83203 17.5291 6.39141 17.5291 7.08203C17.5291 7.36328 17.628 7.62266 17.793 7.83203L14.8539 10.0602C14.3294 10.457 13.551 10.2945 13.2508 9.72578L11.3607 6.14453Z\"\r\n fill=\"white\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"separator mt-8\"></div> -->\r\n </div>\r\n\r\n <div *ngIf=\"['storeopenandclose'].includes(type)\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"sub mt-2\">Set Buffer Time</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeBufferTime($event)\"\r\n [checked]=\"configData.aiConfig.storeOpenClose.buffer.openTime > 0 || configData.aiConfig.storeOpenClose.buffer.closeTime > 0\">\r\n </span>\r\n </div>\r\n <div class=\"detectiontext mt-2\">When enabled, alerts will be paused during the\r\n buffer period</div>\r\n </div>\r\n\r\n <div *ngIf=\"checkBuffer || configData.aiConfig.storeOpenClose.buffer.openTime || configData.aiConfig.storeOpenClose.buffer.closeTime\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-3\">\r\n <div class=\"section1 me-3\"> If Store Open time exceeds by </div>\r\n <div><input class=\"form-control form-control-solid p-3 text-center w-45px\"\r\n [(ngModel)]=\"configData.aiConfig.storeOpenClose.buffer.openTime\"\r\n type=\"text\" (keypress)=\"omit_special_char($event)\"\r\n autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (blur)=\"validateLimit($event)\" /></div>\r\n <div class=\"section1 ms-3\"> minutes </div>\r\n </div>\r\n <div class=\"d-flex align-items-center my-3\">\r\n <div class=\"section1 me-3\"> If Store Close time exceeds by </div>\r\n <div><input class=\"form-control form-control-solid p-3 text-center w-45px\"\r\n [(ngModel)]=\"configData.aiConfig.storeOpenClose.buffer.closeTime\"\r\n type=\"text\" (keypress)=\"omit_special_char($event)\"\r\n autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (blur)=\"validateLimit($event)\" /></div>\r\n <div class=\"section1 ms-3\"> minutes </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <div *ngIf=\"['scrum','cleaning'].includes(type) && clientId!=='452'\">\r\n <h2 class=\"section-leftheading mt-8\">Automatic Task\r\n <span class=\"form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n [(ngModel)]=\"configData.aiConfig.autoTask\"\r\n class=\"form-check-input mt-1 cursor-pointer\">\r\n </span>\r\n </h2>\r\n\r\n <div class=\"row ng-star-inserted\">\r\n <div class=\"col-lg-3\">\r\n <div class=\"d-flex align-items-center my-4\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mx-4\"> Select Approver </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-9\">\r\n <lib-chip-dropdown [data]=\"alertUsers\" [selectedData]=\"configData.approver\"\r\n (selectedList)=\"updateAlert($event,'approve')\"></lib-chip-dropdown>\r\n </div>\r\n\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <!-- <div>\r\n <div class=\"d-flex\">\r\n <div><h2 class=\"section-leftheading mt-8\">{{type === 'mobileusagedetection' ? 'To be Acknowledged by' : 'Approver'}}</h2></div>\r\n <div><span class=\"form-check form-switch ms-3 mt-6\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\" class=\"form-check-input mt-3 cursor-pointer\">\r\n </span></div>\r\n </div>\r\n <span>By enabling, the users will be able to acknowledge the checklist</span>\r\n <div *ngIf=\"type === 'mobileusagedetection'\" class=\"col-md-12 mt-8\">\r\n <div class=\"row mt-4\">\r\n <div class=\"col-md-3 mt-2 \">\r\n <span class=\"mx-4 sub\">If usage exceeds</span>\r\n </div>\r\n <div class=\"col-lg-1\">\r\n <div class=\"fv-row mb-5 fv-plugins-icon-container flex flex-column\">\r\n \r\n <input class=\"form-control form-control-solid w-55px\"\r\n [(ngModel)]=\"configData?.checkListDetails.alert.usageExceeds\" type=\"text\"\r\n (keypress)=\"omit_special_char($event)\" autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (blur)=\"validateLimit($event)\" />\r\n <span class=\"text-danger usageerror\" *ngIf=\"errormsg\">Please enter event count\r\n between 15 to 999</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mt-2\">\r\n <span class=\"sub\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row ng-star-inserted mt-3\">\r\n <div class=\"col-lg-3\">\r\n <div class=\"d-flex align-items-center my-5\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mx-4\">To be approved by </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"col-lg-9\">\r\n <lib-chip-dropdown [data]=\"alertUsers\" [selectedData]=\"configData.checkListDetails.approver\"></lib-chip-dropdown>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"separator mt-8\"></div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Alert Configuration -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <h2 class=\"section-leftheading\">Alert Configuration\r\n <!-- <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\"> <path d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g>\r\n <defs> <clipPath id=\"clip0_1874_66195\"> <rect width=\"16\" height=\"16\" fill=\"white\" /> </clipPath> </defs>\r\n </svg>\r\n </span> -->\r\n </h2>\r\n <div>\r\n <div *ngIf=\"['halfshutter'].includes(type)\"\r\n class=\"d-flex align-items-center p-2 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Alerts will be sent, If the store shutter is left half opened during the\r\n configured open & close time\r\n </span>\r\n </div>\r\n </div>\r\n <div>\r\n <div *ngIf=\"['tvcompliance'].includes(type)\"\r\n class=\"d-flex align-items-center p-2 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Alerts will be sent, when there is a breach happened between the\r\n configured time\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-3\"\r\n *ngIf=\"['halfshutter'].includes(type)\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Allow Buffer Time</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changealerttimeconfig($event)\"\r\n [checked]=\"configData.aiConfig.alertConfig.allowBuffer.enabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, alerts will be\r\n paused during the buffer period</div>\r\n </div>\r\n <div class=\"row ng-star-inserted\" *ngIf=\"alerttimekeyconfig\">\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\"> Store shutter can remain\r\n half-open, </div>\r\n </div>\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.alertConfig.allowBuffer.afterOpenTime\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of alertTimeConfig\" [value]=\"time\">{{\r\n time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header me-3\"> minutes after store open\r\n time and </div>\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.alertConfig.allowBuffer.beforeCloseTime\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of alertTimeConfig\" [value]=\"time\">{{\r\n time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes before store close\r\n time </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"threshold-container p-4\" *ngIf=\"['tvcompliance'].includes(type)\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Breached Detection Threshold</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input class=\"form-check-input custom-switch\" type=\"checkbox\"\r\n role=\"switch\" [(ngModel)]=\"isThresholdEnabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, detections over the\r\n configured daily limit are flagged as a breach</div>\r\n </div>\r\n <div>\r\n\r\n\r\n <div class=\"d-flex align-items-center gap-3 mt-4\" *ngIf=\"isThresholdEnabled\">\r\n <span class=\"text-secondary-blue fw-medium\">Flag, as breached if detections\r\n exceeds</span>\r\n\r\n <select class=\"form-select custom-select\" [(ngModel)]=\"detectionThreshold\"\r\n [disabled]=\"!isThresholdEnabled\">\r\n <option *ngFor=\"let opt of thresholdOptions\" [value]=\"opt\">{{ opt }}\r\n </option>\r\n </select>\r\n\r\n <span class=\"text-secondary-blue fw-medium\">in a day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Push Notifications -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Push Notifications</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n [checked]=\"configData.aiConfig.alertConfig.alertSendTo.enabled\"\r\n (change)=\"changenotificationconfig($event)\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Send notifications to Mobile, Web, or both -\r\n Configure as per your needs</div>\r\n </div>\r\n <div *ngIf=\"notificationkeyconfig\" class=\"mt-8\">\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Mobile Notifications</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-4\">\r\n <div class=\"col-lg-1\"> Send to </div>\r\n <div class=\"col-lg-11 fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.alertConfig.alertSendTo.mobile\"\r\n (selectedList)=\"updateNotificationAlert($event,'user','mobile')\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2 col-6\">Web Notifications</div>\r\n <div class=\"schedule-config-header mt-2 d-flex justify-content-end col-6\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"14\"\r\n viewBox=\"0 0 16 14\" fill=\"none\">\r\n <path\r\n d=\"M15.3346 1.66509V5.66509M15.3346 5.66509H11.3346M15.3346 5.66509L12.2413 2.75842C11.5248 2.04157 10.6384 1.51789 9.66476 1.23627C8.69114 0.95465 7.66204 0.924257 6.67349 1.14793C5.68495 1.3716 4.76917 1.84205 4.01161 2.51537C3.25406 3.18869 2.67941 4.04295 2.3413 4.99842M0.667969 12.3318V8.33176M0.667969 8.33176H4.66797M0.667969 8.33176L3.7613 11.2384C4.4778 11.9553 5.36422 12.479 6.33784 12.7606C7.31147 13.0422 8.34056 13.0726 9.32911 12.8489C10.3177 12.6252 11.2334 12.1548 11.991 11.4815C12.7485 10.8082 13.3232 9.9539 13.6613 8.99842\"\r\n stroke=\"#475467\" stroke-width=\"1.25\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"schedule-config-description mt-2 ms-3\"> Sync users from Mobile\r\n </span>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-1 cursor-pointer\"\r\n (change)=\"changesyncMobileWebconfig($event)\"\r\n [checked]=\"configData.aiConfig.alertConfig.alertSendTo.syncMobileWeb\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-4\">\r\n <div class=\"col-lg-1\"> Send to </div>\r\n <div class=\"col-lg-11 fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.alertConfig.alertSendTo.web\"\r\n (selectedList)=\"updateNotificationAlert($event,'user','web')\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Auto-Assign Tasks -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Auto-Assign Tasks</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeautotaskconfig($event)\"\r\n [checked]=\"configData.aiConfig.autoTaskConfig.enabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">On breach, tasks are auto-created and assigned\r\n to users</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-8\" *ngIf=\"autotaskkeyconfig\">\r\n <div class=\"col-lg-2\"> Select Approver </div>\r\n <div class=\"col-lg-10 fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.autoTaskConfig.approver\"\r\n (selectedList)=\"updateAutoTask($event,'user')\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Export data -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Export data</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeexportconfig($event)\"\r\n [checked]=\"configData.aiConfig.exportConfig.enabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Export your data in the format you need</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-8\" *ngIf=\"exportkeyconfig\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"mt-5 mb-5 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'ALL'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('ALL')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n All\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'CSV'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('CSV')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n CSV\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'PDF'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('PDF')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n PDF\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'PPT'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('PPT')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n PPT\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'ZIP'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('ZIP')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n ZIP\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"['custom'].includes(type)\" class=\"card-body bg-white mt-3 rounded-4 px-7\">\r\n <div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div>\r\n <h2 class=\"section-leftheading \">Assign<span class=\"mx-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\">\r\n <path\r\n d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1874_66195\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></h2>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ms-5 mt-3 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input selected-radio me-3 cursor-pointer\" type=\"radio\"\r\n name=\"stores\" [checked]=\"storeCoverage\" (click)=\"selectRadio('store','change')\">\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">Assign Stores and Clusters</label>\r\n </div>\r\n <div class=\"form-check d-flex align-items-center ms-5\">\r\n <input class=\"form-check-input selected-radio me-3 cursor-pointer\" type=\"radio\"\r\n name=\"users\" [checked]=\"userCoverage\" (click)=\"selectRadio('user','change')\">\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">Assign Users and Teams</label>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"storeCoverage && assignType ==='store'\"\r\n class=\"mt-5 ms-5 storeAssign sopTable d-flex\">\r\n <div>\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\" name=\"flag\"\r\n [(ngModel)]=\"configData.checkListDetails.enableNewDeployedStore\">\r\n </div>\r\n <div> <span class=\"ms-2 lineHeight\">Auto assign to newly deployed stores</span> </div>\r\n </div>\r\n\r\n <div class=\"d-flex ms-5 align-items-end justify-content-between\">\r\n <div class=\"d-flex overflow-auto h-45px w-75 mt-5\">\r\n <ul *ngIf=\"storeCoverage\"\r\n class=\"nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap\">\r\n <li (click)=\"selectedTab('store')\" class=\"nav-item cursor-pointer h-100\"><span\r\n [ngClass]=\"assignType ==='store' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Stores</span>\r\n </li>\r\n <li (click)=\"selectedTab('cluster')\" class=\"nav-item cursor-pointer h-100\"><a\r\n [ngClass]=\"assignType ==='cluster' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Clusters</a></li>\r\n </ul>\r\n <ul *ngIf=\"userCoverage\"\r\n class=\"nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap\">\r\n <li (click)=\"selectedTab('user')\" class=\"nav-item cursor-pointer h-100\"><a\r\n [ngClass]=\"assignType ==='user' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Users</a>\r\n </li>\r\n <li (click)=\"selectedTab('team')\" class=\"nav-item cursor-pointer h-100\"><a\r\n [ngClass]=\"assignType ==='team' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Teams</a></li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"!['cluster','team'].includes(assignType)\">\r\n <a *ngIf=\"storeCoverage\" (click)=\"addStoreComponent()\" type=\"button\"\r\n class=\"btn btn-outline px-4 ng-star-inserted mt-8\" style=\"white-space: nowrap;\"\r\n tabindex=\"0\"><span class=\"svg-icon svg-icon-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"create1\">Assign Store</span></a>\r\n <a *ngIf=\"userCoverage\" (click)=\"addStoreComponent()\" type=\"button\"\r\n class=\"btn btn-outline px-4 ng-star-inserted mt-8\" style=\"white-space: nowrap;\"\r\n tabindex=\"0\"><span class=\"svg-icon svg-icon-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"create1\">Assign User</span></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-100 ms-5\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">Selected <span>{{assignType | titlecase}}s</span> </div>\r\n </div>\r\n </div>\r\n <!-- *ngIf=\"!['cluster','team'].includes(assignType)\" -->\r\n <div class=\"w-100 pe-5\">\r\n <lib-multi-chip-dropdown *ngIf=\"storeList\" [items]=\"storeList\" [multi]=\"true\"\r\n [searchField]=\"['storeName','clusterName','storeId','userName','teamName']\"\r\n [searchKey]=\"searchKey\" [idField]=\"'_id'\" (selected)=\"updateAssign($event)\"\r\n (removed)=\"removedChip($event)\"\r\n [selectedValues]=\"configData?.checkListDetails?.assign\"></lib-multi-chip-dropdown>\r\n </div>\r\n <!-- <div *ngIf=\"['cluster','team'].includes(assignType)\" class=\"w-100 pe-5\">\r\n <lib-multi-chip-dropdown *ngIf=\"storeList\" [items]=\"storeList\" [multi]=\"true\" [searchField]=\"['storeName','clusterName','storeId','userName','teamName']\" [searchKey]=\"searchKey\" [idField]=\"'_id'\"\r\n (selected)=\"updateAssign($event)\" (removed)=\"removedChip($event)\" [selectedValues]=\"configData?.checkListDetails?.assign\"></lib-multi-chip-dropdown>\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"\" *ngIf=\"tableData.length || tableFilter.length || !showImage\">\r\n\r\n <div *ngIf=\"!tableLoading && tableArray?.length\"\r\n class=\"card-body px-0 mt-0 pt-0 pb-0 mx-4 mb-5\">\r\n <div class=\" w-100\">\r\n <div class=\"table-header mt-5 d-flex align-items-center justify-content-between\">\r\n <div class=\"table-title\">Selected <span>{{assignType | titlecase}}s</span> List\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-start\">\r\n <div class=\"me-3\">\r\n <input type=\"text\" data-kt-subscription-table-filter=\"search\"\r\n (change)=\"searchTableData()\" [(ngModel)]=\"tableFilter\"\r\n class=\"form-control form-control-solid w-200px ps-5 mx-1 me-4\"\r\n autocomplete=\"off\" autocapitalize=\"none\" spellcheck=\"false\"\r\n style=\"text-transform: none\" placeholder=\"Search...\">\r\n </div>\r\n\r\n <div *ngIf=\"!['cluster','team'].includes(assignType)\"\r\n class=\"position-relative w-100 mt-5 mb-5\">\r\n <button type=\"button\"\r\n class=\"btn py-3 btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\">\r\n <span class=\"me-3 cursor-pointer\" #upload\r\n (click)=\"file.click()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <span class=\"template-dropdown bg-white ms-3\">BulkUpload\r\n </span>\r\n </span>\r\n <span><input style=\"display: none;\" type=\"file\" #file\r\n id=\"kt_account_team_size_select_1\"\r\n (change)=\"onFileUpload($event)\" /></span>\r\n <span class=\"subtitle mx-3 me-2\"> | </span>\r\n <span class=\"cursor-pointer\" (click)=\"openDropdown($event)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 9L12 15L18 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n\r\n <div *ngIf=\"dropDown\"\r\n class=\"card template-dropdown h-40px w-100 position-absolute rounded-3 z-1 top-50px end-0\">\r\n <ul class=\"list-unstyled mb-0 w-auto cursor-pointer\"\r\n (click)=\"bulkuploadModel()\">\r\n <li class=\"px-5 fw-semibold cursor-pointer py-2\">Download\r\n Template</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['cluster','team'].includes(assignType)\">\r\n <button type=\"button\"\r\n class=\"btn py-3 btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\"\r\n (click)=\"downloadTemplateV2()\">\r\n <span class=\"me-3 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M8.125 13.125H16.3562L14.7438 14.7438L15.625 15.625L18.75 12.5L15.625 9.375L14.7438 10.2562L16.3562 11.875H8.125V13.125Z\"\r\n fill=\"black\" />\r\n <path\r\n d=\"M13.75 8.75001V6.25001C13.7505 6.16776 13.7347 6.08622 13.7036 6.01007C13.6725 5.93392 13.6267 5.86466 13.5688 5.80626L9.19375 1.43126C9.13535 1.37333 9.06609 1.32751 8.98994 1.2964C8.91379 1.2653 8.83225 1.24953 8.75 1.25001H2.5C2.16848 1.25001 1.85054 1.38171 1.61612 1.61613C1.3817 1.85055 1.25 2.16849 1.25 2.50001V17.5C1.25 17.8315 1.3817 18.1495 1.61612 18.3839C1.85054 18.6183 2.16848 18.75 2.5 18.75H12.5C12.8315 18.75 13.1495 18.6183 13.3839 18.3839C13.6183 18.1495 13.75 17.8315 13.75 17.5V16.25H12.5V17.5H2.5V2.50001H7.5V6.25001C7.5 6.58153 7.6317 6.89947 7.86612 7.13389C8.10054 7.36831 8.41848 7.50001 8.75 7.50001H12.5V8.75001H13.75ZM8.75 6.25001V2.75626L12.2438 6.25001H8.75Z\"\r\n fill=\"black\" />\r\n </svg> <span class=\"template-dropdown bg-white ms-3\">Export\r\n </span>\r\n </span>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row mt-2\">\r\n <div class=\"col-lg-12\" *ngIf=\"!tableData?.length && !tableFilter && !showImage\">\r\n <div\r\n class=\"card-body my-8 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for the <span>{{assignType}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"pt-0 mx-4\" *ngIf=\"tableArray.length\">\r\n <div class=\"sopTable table-responsive overflow-hidden\">\r\n <div *ngIf=\"tableLoading\"\r\n 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>\r\n <div class=\"col-lg-12\" *ngIf=\"tableFilter && !tableData?.length\">\r\n <div\r\n class=\"card-body my-8 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for the\r\n <span>{{assignType}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body-sop\" *ngIf=\"tableData.length && !tableLoading\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"storeCoverage\" class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <span\r\n *ngIf=\"sortColumn === 'storeName' && sortBy !== 1 || sortColumn !== 'storeName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'storeName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userName')\">\r\n SPOC Name\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== 1 || sortColumn !== 'userName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">\r\n SPOC Email\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== 1 || sortColumn !== 'userEmail' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th *ngIf=\"assignType ==='cluster'\" class=\"text-align-left\">\r\n <div class=\"cursor-pointer\"\r\n (click)=\"sortData('clusterName')\">\r\n Cluster Name\r\n <span\r\n *ngIf=\"sortColumn === 'clusterName' && sortBy !== 1 || sortColumn !== 'clusterName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'clusterName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of tableData;let i=index\">\r\n <td>{{data.storeName}}\r\n </td>\r\n <td>{{data.userName ? data.userName : '--'}}</td>\r\n <td>{{data.userEmail ? data.userEmail : '--'}}</td>\r\n <td *ngIf=\"assignType === 'cluster'\">{{data.clusterName ?\r\n data.clusterName : '--'}}</td>\r\n </tbody>\r\n </table>\r\n <table *ngIf=\"userCoverage\" class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userName')\">\r\n User Name\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== 1 || sortColumn !== 'userName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">\r\n User Email\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== 1 || sortColumn !== 'userEmail' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th *ngIf=\"assignType ==='team'\" class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('teamName')\">\r\n Teams Name\r\n <span\r\n *ngIf=\"sortColumn === 'teamName' && sortBy !== 1 || sortColumn !== 'teamName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'teamName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of tableData;let i=index\">\r\n <td>\r\n <span\r\n class=\"form-check-label mx-4 line-height\">{{data.userName}}</span>\r\n </td>\r\n <td>{{data.userEmail ? data.userEmail : '--'}}</td>\r\n <td *ngIf=\"assignType ==='team'\">{{data.teamName ? data.teamName\r\n : '--'}}</td>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"size\" [currentPage]=\"currentValue\"\r\n [totalItems]=\"recordsTotal\" [paginationSizes]=\"paginationSize\"\r\n [pageSize]=\"size\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n <br>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"tableLoading1 && showImage\"\r\n 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>\r\n <div>\r\n <div *ngIf=\"!tableArray.length && !tableLoading1 && !tableFilter.length && showImage && !configData.checkListDetails.assignedUsers && !['cluster','team'].includes(assignType)\"\r\n class=\"row mb-6\">\r\n <div class=\"col-lg-12 assignpadding mb-10 mt-10\">\r\n <div class=\"row\">\r\n <div class=\"hr w-100 border border-1 position-relative\">\r\n <div\r\n class=\"position-absolute template-dropdown orposition bg-white w-100px\">\r\n or</div>\r\n </div>\r\n <div class=\"uploadpadding mt-10\">\r\n <ul\r\n class=\"subtext list-unstyled d-flex flex-column align-items-center mx-4\">\r\n <li>Use the template to upload multiple <span\r\n *ngIf=\"storeCoverage\">stores</span> <span\r\n *ngIf=\"userCoverage\">users</span> at once.</li>\r\n <li> Download the template here - <span (click)=\"downloadTemplateV2()\"\r\n class=\"cursor-pointer\"><span class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"text-primary\">Download\r\n Template</span></span></li>\r\n <li> Add your data to the Template File</li>\r\n </ul>\r\n </div>\r\n <div class=\"w-100 border border-2 text-center border-dashed rounded-3 border-primary p-5\"\r\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\" (click)=\"file.click()\">\r\n <div class=\"\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"46\"\r\n viewBox=\"0 0 46 46\" fill=\"none\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_7979_5202)\">\r\n <path\r\n d=\"M26.3335 26.3332L23.0002 22.9999M23.0002 22.9999L19.6669 26.3332M23.0002 22.9999V30.4999M29.9919 28.3249C30.8047 27.8818 31.4467 27.1806 31.8168 26.3321C32.1868 25.4835 32.2637 24.5359 32.0354 23.6388C31.807 22.7417 31.2865 21.9462 30.5558 21.3778C29.8251 20.8094 28.9259 20.5005 28.0002 20.4999H26.9502C26.698 19.5243 26.2278 18.6185 25.5752 17.8507C24.9225 17.0829 24.1042 16.4731 23.182 16.0671C22.2597 15.661 21.2573 15.4694 20.2503 15.5065C19.2433 15.5436 18.2578 15.8085 17.3679 16.2813C16.4779 16.7541 15.7068 17.4225 15.1124 18.2362C14.518 19.05 14.1158 19.9879 13.936 20.9794C13.7563 21.9709 13.8036 22.9903 14.0746 23.961C14.3455 24.9316 14.8329 25.8281 15.5002 26.5832\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7979_5202\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></div>\r\n <div class=\"storetext cursor-pointer mb-2 fw-bold\"><span\r\n class=\"text-primary text-decoration-underline\">Click To\r\n Upload</span>\r\n or drag and drop\r\n </div>\r\n <div class=\"headeralign fw-400\">the data added template file for processing.\r\n </div>\r\n <input style=\"visibility: hidden;\" type=\"file\" #file\r\n id=\"kt_account_team_size_select_1\" (change)=\"onFileUpload($event)\" />\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"!tableArray.length && !tableLoading1 && !tableFilter.length && showImage && !configData.checkListDetails.assignedUsers && ['cluster','team'].includes(assignType)\"\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div\r\n class=\"card-body my-8 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for the <span>{{assignType}}</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"type !== 'custom'\" class=\"\">\r\n <lib-assign [configData]=\"configData\" [uploadData]=\"uploadData\" [configureType]=\"configureType\"\r\n (dataToParent)=\"handleDataFromChild($event)\"></lib-assign>\r\n </div>\r\n\r\n <!-- Advanced Configuration -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type) && userType === 'tango'\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header\">Advanced Configuration</div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header\">Data Processing</div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When you want to process this\r\n checklist report</div>\r\n <div class=\"d-flex align-items-center me-6\">\r\n <div class=\"col-sm-12 cursor-pointer border border-2 rounded-4 px-3 mb-2 mt-2 ms-4 me-4\"\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'live' ? 'advancedConfigureAcite': ''\">\r\n <div class=\"d-flex h-70px rounded-3 p-3 mt-2\">\r\n <span class=\"mt-1\">\r\n <input id=\"dataprocessing\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"dataprocessing\" value=\"live\"\r\n (change)=\"changeDataprocessing('live')\"\r\n [(ngModel)]=\"selectedDataprocessing\">\r\n </span>\r\n <span class=\"\">\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'live' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Live Notifications</span>\r\n <span class=\"schedule-config-description mt-2\">Triggered\r\n immediately whenever a detection or breach\r\n occurs</span>\r\n </div>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center me-6\">\r\n <div class=\"col-sm-12 cursor-pointer border border-2 rounded-4 px-3 mb-2 mt-2 ms-4 me-4\"\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'eod' ? 'advancedConfigureAcite': ''\">\r\n <div class=\"d-flex h-70px rounded-3 p-3 mt-2\">\r\n <span class=\"mt-1\">\r\n <input id=\"dataprocessing\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"dataprocessing\" value=\"eod\"\r\n (change)=\"changeDataprocessing('eod')\"\r\n [(ngModel)]=\"selectedDataprocessing\">\r\n </span>\r\n <span class=\"\">\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'eod' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Daily (EOD)</span>\r\n <span class=\"schedule-config-description mt-2\">Full\r\n detection/breach history delivered the next day for\r\n smarter decisions</span>\r\n </div>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Detected Status</div>\r\n <div class=\"d-flex\">\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changedetectedstatusconfig($event)\"\r\n [checked]=\"configData.aiConfig.advancedConfig.detectedStatus.enabled\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Choose which detections to\r\n display on dashboard</div>\r\n <div class=\"d-flex align-items-center\" *ngIf=\"detectedstatuskeyconfig\">\r\n <div class=\"mt-5 mb-5 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\"\r\n type=\"checkbox\" [value]=\"'detected'\"\r\n (change)=\"changeDetectionStatus($event)\"\r\n [checked]=\"selectedDetectionStatus.includes('detected')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold ms-2\">\r\n Breached Detections\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\"\r\n type=\"checkbox\" [value]=\"'nondetected'\"\r\n (change)=\"changeDetectionStatus($event)\"\r\n [checked]=\"selectedDetectionStatus.includes('nondetected')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold ms-2\">\r\n Non Breached Detections\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Audit Required</div>\r\n <div class=\"d-flex\">\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeauditrequiredconfig($event)\"\r\n [checked]=\"configData.aiConfig.advancedConfig.auditConfig.enabled\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Is an audit required for this\r\n checklist</div>\r\n\r\n <div class=\"border border-2 rounded-4 px-3 mb-4 mt-4\"\r\n *ngIf=\"auditkeyconfig\">\r\n <div class=\"schedule-config-header mt-4\">Input Source File Type</div>\r\n <div class=\"schedule-config-description mt-2\">Is an audit required for\r\n this checklist</div>\r\n <div class=\"ms-8 mt-5 mb-5 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input id=\"image\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"stores\" value=\"image\"\r\n (change)=\"changeInputSourceFileRadio('image')\"\r\n [(ngModel)]=\"selectedSource\">\r\n <label for=\"image\"\r\n class=\"uploadtext cursor-pointer fw-semibold\">Image</label>\r\n </div>\r\n <div class=\"form-check d-flex align-items-center ms-5\">\r\n <input id=\"video\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"stores\" value=\"video\"\r\n (change)=\"changeInputSourceFileRadio('video')\"\r\n [(ngModel)]=\"selectedSource\">\r\n <label for=\"video\"\r\n class=\"uploadtext cursor-pointer fw-semibold\">Video</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n<ng-template #bulkupload let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-5\">\r\n <div class=\"card-title mt-3\">\r\n <div class=\"bg-light-primary rounded-5 w-40px h-40px d-flex justify-content-center align-items-center\">\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=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div> <span class=\"config-heading fw-semibold ms-5 w-auto\">Bulk Upload</span>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"flex-column\">\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">Step 1 - <a\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"downloadTemplateV2()\">Download the\r\n template here</a></div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">Step2 - Add your data to the Template File with\r\n existing <span *ngIf=\"storeCoverage\">store</span> <span *ngIf=\"userCoverage\">user</span> data</div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">Step3 - Upload it below for processing</div>\r\n\r\n <div class=\"fw-bold storeAssign mt-10\">**Note : On upload, all the existing data will be replaced</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"model.close()\">Cancel</button>\r\n <button class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"file1.click()\">Upload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Assign <span\r\n *ngIf=\"storeCoverage\">Stores</span> <span *ngIf=\"userCoverage\">Users</span></span></div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total <span *ngIf=\"storeCoverage\">Stores</span> <span\r\n *ngIf=\"userCoverage\">Users</span></div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">\r\n {{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div *ngIf=\"!showStore&&!showTeam&&!showCluster&&!showUser&&!showInactive\">You're about to assign\r\n {{getStoreCounts(excelData)}} <span *ngIf=\"storeCoverage\">stores</span><span\r\n *ngIf=\"userCoverage\">users</span> to the checklist. Are you sure want to proceed?</div>\r\n <div *ngIf=\"storeCoverage && showStore\" class=\"mt-3\">Store <span\r\n *ngFor=\"let store of validatedStore;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a routerLink=\"/manage/stores\" [queryParams]=\"{tyoe: 'stores'}\"\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"closeactivepopup()\">Onboard Stores</a>\r\n </div>\r\n <div *ngIf=\"userCoverage && showUser\" class=\"mt-3\">User <span\r\n *ngFor=\"let store of validatedUser;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a class=\"text-decoration-underline cursor-pointer\"\r\n (click)=\"closeactivepopup();confirmUserpopup()\">Onboard Users</a></div>\r\n <div *ngIf=\"userCoverage && showTeam\" class=\"mt-3\">Team <span\r\n *ngFor=\"let store of validatedTeam;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a routerLink=\"/manage/users/client\"\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"closeactivepopup()\">Create Team</a>\r\n </div>\r\n <div *ngIf=\"storeCoverage && showCluster\" class=\"mt-3\">user <span\r\n *ngFor=\"let store of validatedCluster;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a routerLink=\"/manage/stores\" class=\"text-decoration-underline cursor-pointer\"\r\n [queryParams]=\"{tyoe: 'cluster'}\" (click)=\"closeactivepopup()\">Create Cluster</a></div>\r\n <div *ngIf=\"storeCoverage && showUser\" class=\"mt-3\">User <span\r\n *ngFor=\"let store of validatedUser;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a class=\"text-decoration-underline cursor-pointer\"\r\n (click)=\"closeactivepopup();confirmUserpopup()\">Onboard Users</a></div>\r\n <div *ngIf=\"storeCoverage && showInactive\" class=\"mt-3\">Store <span\r\n *ngFor=\"let store of inactiveStores;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for is inactive, <a routerLink=\"/manage/stores\" [queryParams]=\"{tyoe: 'stores'}\"\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"closeactivepopup()\">Onboard Stores</a>\r\n </div>\r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct and complete layout information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\"\r\n [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError&&!showStore&&!showCluster&&!showUser&&!showTeam&&!showInactive\"\r\n class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n <button *ngIf=\"excelError||showStore||showCluster||showUser||showTeam || showInactive\"\r\n class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"Reupload();\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event,'reupload')\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmUser let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-5\">\r\n <div class=\"card-title d-flex flex-column mt-3\">\r\n <div class=\"bg-light-primary rounded-5 w-40px h-40px d-flex justify-content-center align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEF0C7\" />\r\n <path\r\n d=\"M27.9998 24.0012V28.0012M27.9998 32.0012H28.0098M26.2898 18.8612L17.8198 33.0012C17.6451 33.3036 17.5527 33.6465 17.5518 33.9957C17.5508 34.3449 17.6413 34.6883 17.8142 34.9917C17.9871 35.2951 18.2365 35.5479 18.5375 35.725C18.8385 35.9021 19.1806 35.9973 19.5298 36.0012H36.4698C36.819 35.9973 37.1611 35.9021 37.4621 35.725C37.7631 35.5479 38.0124 35.2951 38.1854 34.9917C38.3583 34.6883 38.4488 34.3449 38.4478 33.9957C38.4468 33.6465 38.3544 33.3036 38.1798 33.0012L29.7098 18.8612C29.5315 18.5673 29.2805 18.3243 28.981 18.1557C28.6814 17.987 28.3435 17.8984 27.9998 17.8984C27.656 17.8984 27.3181 17.987 27.0186 18.1557C26.7191 18.3243 26.468 18.5673 26.2898 18.8612Z\"\r\n stroke=\"#DC6803\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FFFAEB\" stroke-width=\"8\" />\r\n </svg>\r\n </div><br>\r\n <div class=\"config-heading fw-semibold w-auto\">New User found in uploaded file</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"flex-column\">\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">This CSV contains a new User. Add new User in the\r\n User Management under Manage menu.</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <!-- <button class=\"btn btn-md btn-default btn-outline\" routerLink=\"/manage/users/client\" (click)=\"closeactivepopup()\">Skip New Entries</button> -->\r\n <button class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"model.close('confirm')\">Invite\r\n Selected</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".card{border-radius:16px}.section1{color:var(--Black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.row>*{padding-right:0}.storeAssign a:hover,.table-header a:hover{text-decoration:underline!important}.checkconfigcont .card{height:100%}.checkconfigcont .section{display:inline-block;width:160px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important}.checkconfigcont .radio{font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .mat-radio-button.mat-primary .mat-radio-inner-circle,.checkconfigcont .mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),.checkconfigcont .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple,.checkconfigcont .mat-radio-button.mat-primary:active .mat-radio-persistent-ripple{background-color:#00a3ff}.checkconfigcont .section-leftheading1{overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checkconfigcont .section{color:var(--Black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .scedule-text{overflow:hidden;color:var(--Black, #101828);text-overflow:ellipsis;font-size:12px;font-weight:400;line-height:18px}.checkconfigcont .svg-icon svg{height:1.25em;width:1.25em}.checkconfigcont .section-leftheading{overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:20px;font-style:normal;font-weight:600;line-height:28px}.checkconfigcont .sub{color:var(--gray-700, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .subopen{color:var(--black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .symbol-circle{margin-left:-6px}.checkconfigcont .checklistlabel{padding:4px 12px;justify-content:center;align-items:center;border-radius:16px;background:var(--gray-100, #F2F4F7)}.checkconfigcont .subtitle{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0em;text-align:left;color:#667085}.checkconfigcont .template-dropdown{background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.checkconfigcont .form-control.form-control-solid{display:flex;padding:11px 14px;align-items:center;gap:8px;align-self:stretch;border-radius:8px;border:1px solid var(--gray-500, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d}.checkconfigcont .searchplaceholder{font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.checkconfigcont .custom-appbox{border-radius:12px}.checkconfigcont input::placeholder{color:#667085!important;opacity:1}.checkconfigcont .checklisttext{color:var(--gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.checkconfigcont .separator{height:1px;align-self:stretch}.checkconfigcont ::ng-deep .mat-form-field-infix{color:#101828;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;width:500px!important;line-height:24px}.checkconfigcont ::ng-deep .storechip{color:#101828;font-size:16px;width:100%;font-family:Inter;font-weight:400;width:780px!important;line-height:24px}.checkconfigcont ::ng-deep .mat-chip{font-family:Inter;font-style:normal;font-weight:500;font-size:14px;line-height:17px;text-align:center;color:#5e6278!important}.checkconfigcont ::ng-deep .mat-chip-list-wrapper .mat-standard-chip{margin:4px}.checkconfigcont ::ng-deep .matChip-store{height:100px;display:block;overflow-y:scroll;overflow-x:hidden}.checkconfigcont ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.checkconfigcont ::ng-deep .mat-form-field-underline{display:none}.checkconfigcont ::ng-deep .mat-form-field-ripple{display:none}.checkconfigcont .subtext{color:var(--gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px;align-items:center;gap:8px;align-self:stretch}.checkconfigcont .zone-subscription{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:24px}.checkconfigcont .upload{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d;display:flex;padding:10px 18px;justify-content:center;align-items:center;gap:8px;flex:1 0 0}.checkconfigcont .upload:hover{background:#f3f8fd!important;border:1px solid var(--gray-300, #D0D5DD)!important}.checkconfigcont .uploadtext{color:var(--gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .savedraft{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);padding:10px 18px;justify-content:center;align-items:center;gap:8px;box-shadow:0 1px 2px #1018280d}.checkconfigcont .savedraft:hover{background:#f3f8fd!important;border:1px solid var(--gray-300, #D0D5DD)!important}.checkconfigcont .savedrafttext{color:var(--gray-700, #344054);font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .configureAcite{border:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-50, #EAF8FF)}.checkconfigcont .text-primary{color:var(--primary-700, #009BF3)!important}.checkconfigcont .border-primary{border:1px dashed var(--Primary-500, #33B5FF)!important;background:var(--Primary-25, #F6FCFF)!important}.checkconfigcont .download{border-radius:8px;border:1px solid var(--primary-50, #EAF8FF);background:var(--primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;display:flex;padding:10px 18px;justify-content:center;align-items:center;gap:8px;flex:1 0 0;color:var(--primary-700, #009BF3);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .svg-icon1:hover:not(.svg-active){color:#fff}.checkconfigcont .btn-outline{border:1px solid lightgrey!important;padding:calc(.75rem + 1px) calc(1.5rem + 1px)}.checkconfigcont .footertext{color:#000;font-family:Inter;font-size:14px;font-weight:500;line-height:20px;text-align:right}.checkconfigcont .footer1{text-align:end}.checkconfigcont ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#009ef7!important}.checkconfigcont ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#009ef7!important}.checkconfigcont ::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:#1da1f21a;color:#009ef7}.checkconfigcont ::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#009ef7}.checkconfigcont ::ng-deep th.mat-header-cell:first-of-type,.checkconfigcont ::ng-deep td.mat-cell:first-of-type,.checkconfigcont ::ng-deep td.mat-footer-cell:first-of-type{padding-right:none}.checkconfigcont ::ng-deep .sopTable input{border:none;padding:0!important}.checkconfigcont ::ng-deep .sopTable input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkconfigcont ::ng-deep .sopTable input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}.checkconfigcont ::ng-deep .sopTable input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.checkconfigcont ::ng-deep .card-body-sop{border:1px solid var(--gray-200, #EAECF0);background:var(--white, #FCFCFD);border-radius:6px}.checkconfigcont .schedule{color:var(--gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .user{color:var(--gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .dropdown{margin-left:-9%}.checkconfigcont .pillstyle{color:var(--gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .leftcard{position:relative}.checkconfigcont .editques{position:absolute!important;left:12%;transform:translate(-5%);bottom:30px}.checkconfigcont .orposition{top:0;left:50%;transform:translate(-50%,-50%);text-align:center}.checkconfigcont .questiontype{color:var(--primary-700, #009BF3);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;outline:none!important;background-color:#f1faff!important}.checkconfigcont .btn-left{display:inline-block;width:100%;font-size:16px;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis!important}.checkconfigcont .nav{display:flex;align-items:center;gap:16px;flex:1 0 0;align-self:stretch;--bs-nav-link-color: none}.checkconfigcont .form-control.form-control-solid,.checkconfigcont .form-select.form-select-solid{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d}.checkconfigcont .checklistturnoff{border-radius:8px;border:1px solid var(--gray-200, #EAECF0);background:var(--white, #FFF);display:flex;padding:16px;align-items:flex-start;align-self:stretch}.checkconfigcont .btn.btn-outline.btn-outline-dashed.btn-outline-default:hover:not(.btn-active){border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d;display:flex;padding:10px 18px;justify-content:center;align-items:center;gap:8px;flex:1 0 0}.checkconfigcont .sopTable input{border:none;padding:0!important}.checkconfigcont .sopTable input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkconfigcont .sopTable input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}.checkconfigcont .sopTable input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.checkconfigcont .option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px}.checkconfigcont .card hr{width:-webkit-fill-available}.checkconfigcont .imgnodata1{width:216px;height:245px}.checkconfigcont .editablecontent{display:inline-block;width:230px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important}.checkconfigcont #navfont{font-size:1.15rem!important}.checkconfigcont .imgdata{width:50%;height:50%}.checkconfigcont .imgnodata{width:312px;height:312px;margin-top:-4%}.checkconfigcont .card .card-header{display:flex;justify-content:space-between;align-items:stretch;flex-wrap:wrap;min-height:70px;padding:0 .25rem;background-color:transparent;border-bottom:none}.checkconfigcont ::ng-deep .mat-select{background:#f5f8fa;border-radius:8px}.checkconfigcont ::ng-deep .mat-select-value{height:42px}.checkconfigcont ::ng-deep .multiselect-dropdown .dropdown-btn{border:none!important}.checkconfigcont ::ng-deep .multiselect-dropdown .dropdown-list{border:none;box-shadow:0 1px 5px #959595;margin-left:-12px}.checkconfigcont ::ng-deep .multiselect-dropdown:focus-visible{border:none!important;box-shadow:0 1px 5px #959595;margin-left:-12px;max-height:250px}.checkconfigcont .custom-checkbox{--checkbox-background-checked: white !important;--checkmark-color: #009BF3;--border-color: #009BF3;--border-radius: 4px }.checkconfigcont .form-check.form-check-custom{display:flex;margin:0;height:44px;padding:12px 24px;align-items:center;gap:12px;align-self:stretch}.checkconfigcont .tabsub{color:var(--gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .selectstore{color:var(--primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.checkconfigcont .headeralign{color:var(--gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checkconfigcont .rotate{transform:rotate(180deg);transition:1s}.checkconfigcont .weekstyle{border-radius:20px;background:var(--gray-100, #F2F4F7)}.checkconfigcont ::ng-deep .swal2-popup.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;min-width:2em;height:0em;margin:0 .5em 0 0}.checkconfigcont ::ng-deep .listitem{display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem 1rem;background-color:#f3f6f9;margin-top:.75rem;border-radius:.42rem}.checkconfigcont ::ng-deep .list{overflow-y:auto}.checkconfigcont ::ng-deep .listitemlabel{font-size:13px!important;font-weight:600;font-family:Inter;color:#7e8299}.checkconfigcont ::ng-deep .swal2-container{padding:.4em!important}.checkconfigcont ::ng-deep .swal2-icon{border:1px solid white!important}.checkconfigcont ::ng-deep body.swal2-toast-shown .swal2-container{width:500px!important}.checkconfigcont ::ng-deep .swal2-popup.swal2-toast .swal2-title{margin:9px 5px auto!important}.checkconfigcont ::ng-deep .label{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.checkconfigcont ::ng-deep .form-check-input[disabled]~.form-check-label.spocName,.checkconfigcont ::ng-deep .form-check-input:disabled~.form-check-label.spocName{opacity:unset!important}.checkconfigcont tr.mat-header-row{height:56px;border-bottom:1px solid var(--gray-200, #EAECF0);background:var(--gray-25, #FCFCFD)}.checkconfigcont .detectiontext{color:var(--gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .alert{border-radius:16px;background:var(--Gray-100, #F2F4F7)}.checkconfigcont .alert .text{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.checkconfigcont .alerttext{color:var(--primary-600, #00A3FF);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checkconfigcont .alertlabel{width:24px;height:24px;padding:4px 0 2px;justify-content:center;align-items:center;border-radius:200px;background:var(--primary-50, #EAF8FF)}.checkconfigcont .create{color:var(--white, #FFF);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .create1{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.checkconfigcont .createbuttons{padding:10px 18px;justify-content:center;align-items:center;gap:8px;border-radius:8px;border:1px solid var(--primary-600, #00A3FF);background:var(--primary-600, #00A3FF);box-shadow:0 1px 2px #1018280d}.checkconfigcont .alertsinput{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px;align-items:center;gap:8px}.checkconfigcont .usageerror{display:block;width:255px}.checkconfigcont .reupload{padding:10px 18px!important;justify-content:center;align-items:center;gap:8px;flex:1 0 0;border-radius:8px;border:1px solid var(--primary-600, #00A3FF);background:var(--primary-600, #00A3FF);width:220px;cursor:pointer;box-shadow:0 1px 2px #1018280d}.checkconfigcont .reuploadtext{color:var(--White, #FFF);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;cursor:pointer}.checkconfigcont .download{border-radius:8px;border:1px solid var(--primary-50, #EAF8FF);background:var(--primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;padding:10px 18px!important;justify-content:center;align-items:center;gap:8px;width:220px}.checkconfigcont .downloadtext{color:var(--primary-700, #009BF3);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .assignpadding{padding:0 40px}.checkconfigcont .uploadpadding{padding:0 20% 9px}::ng-deep .swal2-popup.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;min-width:2em;height:0em;margin:0 .5em 0 0}::ng-deep .listitem{display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem 1rem;background-color:#f3f6f9;margin-top:.75rem;border-radius:.42rem}::ng-deep .question-left{max-height:50vh;overflow:auto;overflow-x:hidden}::ng-deep .toasttitile{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}::ng-deep .list{overflow-y:auto}::ng-deep .listitemlabel{font-size:13px!important;font-weight:600;font-family:Inter;color:#7e8299}::ng-deep .swal2-container{padding:.4em!important}::ng-deep .swal2-icon{border:1px solid white!important}::ng-deep body.swal2-toast-shown .swal2-container{width:500px!important}::ng-deep .swal2-popup.swal2-toast .swal2-title{margin:9px 5px auto!important}::ng-deep .label{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}::ng-deep .matWidth{margin-left:12px;margin-right:12px}::ng-deep .mat-tooltip{white-space:pre-line}::ng-deep .custom-test{color:var(--gray-700, #344054)!important;text-align:start;font-family:Inter;font-size:12px;font-style:normal;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;font-weight:600;line-height:18px;background:#fff}.checkconfigcont .matChip-store{height:113px;display:block;overflow-y:scroll;overflow-x:hidden}.emailalert{position:relative;height:500px!important;overflow:auto!important;overflow-x:hidden!important}.emailalert1{overflow-y:auto!important;height:10%!important;position:relative}.active-question{color:var(--primary-700, #009BF3);font-size:16px;font-style:normal;font-weight:500;line-height:24px;display:flex;padding:8px 12px;align-items:center;gap:105px;align-self:stretch;border-radius:6px;background:var(--primary-50, #EAF8FF)}.q-btn{color:var(--gray-700, #344054);font-size:16px;font-style:normal;font-weight:500;line-height:24px;display:flex;padding:8px 12px;align-items:center;gap:105px;align-self:stretch;border-radius:6px;background:var(--primary-50, white)}.concise-question{display:inline-block;width:100%;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis!important;text-align:left}@media screen and (min-width: 1400px){.emailalert{position:relative;height:700px!important;overflow:auto!important;overflow-x:hidden!important}}::ng-deep .swal2-html-container{overflow:hidden!important}.badgeColor{background-color:#fffaeb!important;color:#b54708!important;font-family:Inter;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0em;text-align:center}.config-heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px;width:35%}.ps-20{padding-left:7rem!important}.ps-18{padding-left:6.5rem!important}.remove{color:var(--Gray-500, #667085);font-size:12px;font-weight:600;line-height:18px;text-decoration-line:underline;text-transform:capitalize}.fw-400{font-weight:400}.chip-container{margin-top:10px}.mat-chip{margin:5px}.dropdown-menu{position:absolute;top:100%;left:0;right:0;background-color:#fff;z-index:1000;display:block;box-sizing:border-box;height:0%}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.formSeach{width:95%}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.nav-item .nav-link:hover{border-bottom:none!important}.nav-item .nav-link.active{border-radius:10px!important;border-bottom:none!important}.nav-item .bg-light-primary{background:var(--Primary-50, #EAF8FF)!important}.storetext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.position-relative{position:relative!important}.content{background-color:#fff;padding:10px 22px 10px 10px;border-radius:5px;box-shadow:0 0 10px #0000001a}.badge-pill{display:flex;padding:2px 6px 2px 8px;justify-content:center;align-items:center;gap:4px;border-radius:16px;background:var(--Gray-100, #F2F4F7)}.badge-specificdate{max-width:100%;overflow-x:hidden;white-space:normal;display:flex;flex-wrap:wrap}.badge-specificdate .badge{margin-bottom:8px}.bg-color-disabled{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}a.cursor-default{cursor:default!important;background-color:unset!important}.form-control.form-control-solid.disabled{background-color:#eef3f7!important}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.selectDay{background-color:var(--bs-primary)!important}a.selectDay span{color:#fff!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}tr th .form-check-label,tr td .form-check-label{color:var(--Gray-700, #344054)!important}:host::ng-deep .schedule .md-drppicker .btn{line-height:10px!important}:host::ng-deep .schedule .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .schedule .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .schedule .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .schedule .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 .schedule .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 .schedule .md-drppicker td.active,:host::ng-deep .schedule .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 .schedule .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .schedule .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .schedule .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 .schedule table th,:host::ng-deep .schedule table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .schedule .md-drppicker td.available.prev,:host::ng-deep .schedule .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 .schedule .md-drppicker td.available.next,:host::ng-deep .schedule .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 .schedule 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 .schedule .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}:host::ng-deep .schedule .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .schedule .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.fontSize{font-size:14px}.margin{margin-top:2px}.w-20{width:20%!important}.w-80{width:80%!important}.approver{color:var(--gray-700, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.line-height{line-height:25px}.storeAssign{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.selected-radio{width:1.5rem!important;height:1.5rem!important}.lineHeight{line-height:27px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.schedule-config-header{color:var(--Black, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:24px}.schedule-config-description{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:18px}.schedule-config-sub-header{color:var(--Black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.advancedConfigureAcite{border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--Primary-50, #EAF8FF)}.bg-light-custom{background-color:#f8fafc;min-height:100vh}.config-card{background:#fff;border:1px solid #eef2f6;border-radius:12px;box-shadow:0 2px 4px #00000003}.extra-small{font-size:.75rem}.tag-input-box{border:1px solid #e2e8f0;border-radius:8px;background:#fcfcfd;min-height:45px}.badge-tag{background:#e9ecef;color:#475467;padding:4px 12px;border-radius:20px;font-size:.85rem}.chip-container{border:1px solid #e2e8f0;border-radius:8px;display:flex;gap:8px;background:#fff;min-height:38px;align-items:center;padding-left:10px!important}.user-chip{background:#f0f9ff;border:1px solid #e0f2fe;border-radius:6px;padding:2px 8px;display:flex;align-items:center;font-size:.75rem}.user-chip .initials{color:#0ea5e9;font-weight:700;margin-right:6px}.user-chip .name{color:#344054}.info-banner{background:#f1f5f9;padding:10px 15px;border-radius:10px;font-size:.85rem;color:#64748b}.threshold-inner-card{border:1px solid #e2e8f0;border-radius:15px;position:relative}.floating-icon{position:absolute;top:-22px;right:25%;width:44px;height:44px;background:linear-gradient(135deg,#3b82f6,#2dd4bf);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px #3b82f666}.sub-config-box{border:1px solid #f1f5f9;border-radius:12px}.cursor-pointer{cursor:pointer}.time-input-wrapper{position:relative;display:inline-block}.time-field{border-radius:8px;border:1px solid #dee2e6;padding:8px 35px 8px 12px;font-weight:500;color:#334155;width:120px}.time-input-wrapper i{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#334155;pointer-events:none;font-size:1.1rem}.custom-switch{width:3em!important;height:1.5em!important;cursor:pointer}.form-check-input:checked{background-color:#0095ff;border-color:#0095ff}.form-select{border-radius:8px;padding:8px 25px 8px 15px;border:1px solid #dee2e6;background-color:#f8fafc}.animate-fade-in{animation:fadeIn .3s ease-in}.text-dark-blue{color:#1e293b}.text-secondary-blue{color:#334155}.custom-switch{width:3.2em!important;height:1.6em!important;cursor:pointer}.form-check-input:checked{background-color:#0ea5e9;border-color:#0ea5e9}.custom-select{width:70px;height:48px;border-radius:10px;border:1px solid #e2e8f0;text-align:center;padding:0 10px;font-weight:500;background-color:#fff;color:#334155}.summary-text{color:#475569;font-size:.95rem;font-weight:500;margin-top:1.5rem}.fade-in{animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.text-dark-blue{color:#334155}.text-secondary-blue{color:#475569}.info-banner{background-color:#f1f5f9;border-radius:12px;color:#64748b}.small-text{font-size:.9rem;font-weight:500}.threshold-container{border:1px solid #e2e8f0;border-radius:16px;background-color:#fff}.description-text{font-size:.8rem;color:#94a3b8}.custom-switch{width:2.8em!important;height:1.4em!important;cursor:pointer}.form-check-input:checked{background-color:#38bdf8;border-color:#38bdf8}.custom-select{width:75px;height:42px;border-radius:8px;border:1px solid #e2e8f0;text-align:center;font-weight:500;color:#334155;cursor:pointer;background-color:#fff}.custom-select:focus{border-color:#cbd5e1;box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.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: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i7.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.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: "component", type: i10.MultiDateDatepickerComponent, selector: "lib-multi-date-datepicker", inputs: ["startDate", "endDate", "predefinedDates"], outputs: ["selectedDates"] }, { kind: "component", type: i11.ChipDropdownComponent, selector: "lib-chip-dropdown", inputs: ["data", "selectedData"], outputs: ["selectedList"] }, { kind: "component", type: i12.MultiChipDropdownComponent, selector: "lib-multi-chip-dropdown", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "badgeValue", "searchKey", "assignType"], outputs: ["selected", "removed"] }, { kind: "component", type: i13.AssignComponent, selector: "lib-assign", inputs: ["configData", "uploadData", "configureType"], outputs: ["dataToParent"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
3025
3025
  }
3026
3026
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChecklistConfigureComponent, decorators: [{
3027
3027
  type: Component,
3028
- args: [{ selector: 'lib-checklist-configure', template: "<div *ngIf=\"loading\" class=\"card 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>\r\n<div *ngIf=\"!loading\">\r\n <div class=\"card\">\r\n <ng-container>\r\n <div class=\"card-header border-0 pt-3 pb-3\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-9\">\r\n <div class=\"align-items-center\">\r\n <div *ngIf=\"!disabledQuestion&&type === 'custom'\"\r\n [routerLink]=\"'/manage/trax/createChecklist'\" [queryParams]=\"{checklistId: checklistId}\"\r\n class=\"btn btn-sm btn-outline me-5 px-3 py-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M15.8332 10.0003H4.1665M4.1665 10.0003L9.99984 15.8337M4.1665 10.0003L9.99984 4.16699\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <div *ngIf=\"type === 'custom'\" class=\"flex-column\">\r\n <div class=\"editablecontent mb-4 w-100\"><input type=\"text\" class=\"checklist plain-input\"\r\n placeholder=\"Enter Checklist Name\"\r\n [value]=\"configData?.checkListDetails?.checkListName\" readonly></div>\r\n <div class=\"editablecontent w-100\"><input type=\"text\"\r\n class=\"checklistDescription plain-input\" #checklistDescription\r\n placeholder=\"Enter Checklist Description\"\r\n [value]=\"configData?.checkListDetails?.checkListDescription\" readonly></div>\r\n </div>\r\n <div *ngIf=\"type !== 'custom'\" class=\"flex-column\">\r\n <div class=\"editablecontent mb-4 w-100\"><input type=\"text\" class=\"checklist plain-input\"\r\n placeholder=\"Enter Checklist Name\" [value]=\"configData?.checkListName\" readonly>\r\n </div>\r\n <div class=\"editablecontent w-100\"><input type=\"text\"\r\n class=\"checklistDescription plain-input\" #checklistDescription\r\n placeholder=\"Enter Checklist Description\"\r\n [value]=\"configData?.checkListDescription\" readonly></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <div class=\"d-flex my-6 justify-content-end\">\r\n <div>\r\n <button type=\"button\"\r\n class=\"btn btn-primary btn-md py-4 mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n (click)=\"type === 'custom' ? publish() : publishAI()\"\r\n [disabled]=\"disabledPublish || disableBtn\"><span class=\"ms-2\">Publish</span>\r\n </button>\r\n </div>\r\n <div>\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n (click)=\"type ==='custom' ? savedraft() : saveDraftAI()\"\r\n [disabled]=\"disableBtn\"><span class=\"ms-2\">Save as Draft</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"row checkconfigcont mt-2\" *ngIf=\"configData\">\r\n <div class=\"col-xl-3 leftcard\">\r\n <div class=\"card px-7 py-7\">\r\n <div class=\"section-leftheading1\">{{configData?.checkListDetails?.checkListName}}</div>\r\n <div *ngIf=\"obj.checkListId\" class=\"section-left\">\r\n <div *ngFor=\"let section of sections; let i=index;\">\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\">\r\n <div class=\"fs-4 fw-bold section\">{{section.name}}</div>\r\n <hr class=\"mx-2\">\r\n <svg (click)=\"accordian(i)\" [ngClass]=\"{'rotate' : show !== i}\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"35\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"show===i\" class=\"question-left\">\r\n <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n\r\n <div *ngFor=\"let question of section.questions;let j=index;\" class=\"my-2 q-btn\" cdkDrag>\r\n\r\n <div class=\"editablecontent\">\r\n {{question.qname}}\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <h3 class=\"card-title align-items-start flex-column \">\r\n <div class=\"card-label section-leftheading1 mt-6\">Schedule</div>\r\n\r\n <!-- <div *ngIf=\"type === 'mobileusagedetection' || type === 'storeopenandclose'\" class=\"mt-4 mx-2 sub\"><span\r\n class=\" mx-4\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"mt-2\">{{configData.checkListDetails.scheduleStartTime}} to\r\n {{configData.checkListDetails.scheduleEndTime}}</span>\r\n </div> -->\r\n\r\n <div *ngIf=\"['custom'].includes(type)\">\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"23\" height=\"23\"\r\n viewBox=\"0 0 23 23\" fill=\"none\">\r\n <path\r\n d=\"M8.41448 4.52303C8.69518 4.80371 8.69518 5.2588 8.41448 5.53948L5.53948 8.41448C5.2588 8.69518 4.80371 8.69518 4.52303 8.41448L3.08553 6.97698C2.80482 6.6963 2.80482 6.24121 3.08553 5.96053C3.36621 5.67982 3.8213 5.67982 4.10198 5.96053L5.03125 6.88978L7.39803 4.52303C7.67871 4.24232 8.1338 4.24232 8.41448 4.52303Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M8.41448 11.7105C8.69518 11.9912 8.69518 12.4463 8.41448 12.727L5.53948 15.602C5.2588 15.8826 4.80371 15.8826 4.52303 15.602L3.08553 14.1645C2.80482 13.8838 2.80482 13.4287 3.08553 13.1479C3.36621 12.8673 3.8213 12.8673 4.10198 13.1479L5.03125 14.0773L7.39803 11.7105C7.67871 11.4299 8.1338 11.4299 8.41448 11.7105Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M10.0625 6.46875C10.0625 6.0718 10.3844 5.75 10.7812 5.75H15.0938C15.4906 5.75 15.8125 6.0718 15.8125 6.46875C15.8125 6.8657 15.4906 7.1875 15.0938 7.1875H10.7812C10.3844 7.1875 10.0625 6.8657 10.0625 6.46875Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M3.59375 0C1.60898 0 0 1.60898 0 3.59375V16.5312C0 18.516 1.60898 20.125 3.59375 20.125H9.48708C9.25429 19.6696 9.06436 19.1886 8.92261 18.6875H3.59375C2.40288 18.6875 1.4375 17.7221 1.4375 16.5312V3.59375C1.4375 2.40288 2.40288 1.4375 3.59375 1.4375H16.5312C17.7221 1.4375 18.6875 2.40288 18.6875 3.59375V8.92261C19.1886 9.06436 19.6696 9.25429 20.125 9.48708V3.59375C20.125 1.60898 18.516 0 16.5312 0H3.59375Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M16.5313 23C20.1039 23 23 20.1039 23 16.5313C23 12.9586 20.1039 10.0625 16.5313 10.0625C12.9586 10.0625 10.0625 12.9586 10.0625 16.5313C10.0625 20.1039 12.9586 23 16.5313 23ZM16.5313 12.9375C16.9281 12.9375 17.25 13.2594 17.25 13.6563V15.8125H19.4063C19.8031 15.8125 20.125 16.1344 20.125 16.5313C20.125 16.9281 19.8031 17.25 19.4063 17.25H17.25V19.4063C17.25 19.8031 16.9281 20.125 16.5313 20.125C16.1344 20.125 15.8125 19.8031 15.8125 19.4063V17.25H13.6563C13.2594 17.25 12.9375 16.9281 12.9375 16.5313C12.9375 16.1344 13.2594 15.8125 13.6563 15.8125H15.8125V13.6563C15.8125 13.2594 16.1344 12.9375 16.5313 12.9375Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\">{{configData?.checkListDetails?.schedule === 'onetime' ?\r\n 'One-time' : (configData?.checkListDetails?.schedule | titlecase)}}\r\n </span></div>\r\n\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"mt-2 ms-2\">{{configData?.checkListDetails?.scheduleStartTime ?\r\n configData?.checkListDetails?.scheduleStartTime.substr(-8) : configData?.openTime}} to\r\n {{configData?.checkListDetails?.scheduleEndTime ?\r\n configData?.checkListDetails?.scheduleEndTime.substr(-8) :\r\n configData?.closeTime}}</span>\r\n </div>\r\n\r\n <div class=\"mt-4 mx-2 sub\" *ngIf=\"showRangeValue\"><span><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M16 2V6M8 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span><span\r\n class=\"mt-2 ms-2\"><span>{{configData?.checkListDetails?.configStartDate}}</span><span\r\n *ngIf=\"configData?.checkListDetails?.configEndDate !== '' && configData?.checkListDetails?.configEndDate !== null\">\r\n to {{configData?.checkListDetails?.configEndDate}}</span></span></div>\r\n\r\n <div class=\"card-label section-leftheading1 mt-6\">Assign</div>\r\n\r\n <div *ngIf=\"['custom'].includes(type)\">\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8M9 2H15C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6H9C8.44772 6 8 5.55228 8 5V3C8 2.44772 8.44772 2 9 2Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"> {{coverage | titlecase}}s\r\n </span></div>\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88332L3.02401 6.98632C2.30358 8.25521 3.06101 9.87908 4.46464 10.0659C4.58627 10.0808 4.70112 10.0889 4.8145 10.0889C5.55255 10.0889 6.20523 9.77192 6.65953 9.2788L7.21286 8.67818L7.76432 9.28052C8.21367 9.77135 8.8652 10.0889 9.60776 10.0889C10.3471 10.0889 11.0022 9.771 11.4512 9.28052L12.0044 8.67629L12.5576 9.28052C13.0066 9.771 13.6617 10.0889 14.401 10.0889C15.1404 10.0889 15.7954 9.771 16.2445 9.28052L16.7977 8.67629L17.3508 9.28052C17.7999 9.771 18.4549 10.0889 19.1943 10.0889C19.3041 10.0889 19.4223 10.0808 19.5433 10.066C20.9772 9.87131 21.7355 8.16351 20.9155 6.88382C20.9154 6.88376 20.9154 6.88371 20.9154 6.88365L18.8056 3.59392L18.8056 3.59392L18.8046 3.59246C18.7582 3.51966 18.6649 3.46387 18.5584 3.46387H5.44307C5.3365 3.46387 5.24326 3.51966 5.19681 3.59246L5.19619 3.59342L3.08995 6.88332ZM4.81818 12.7496C4.71644 12.7496 4.616 12.7465 4.5169 12.7406V16.6424V18.9639C4.5169 19.8207 5.22663 20.5353 6.11942 20.5353H17.882C18.7748 20.5353 19.4845 19.8207 19.4845 18.9639V16.6424V12.7411C19.3874 12.7466 19.2893 12.7496 19.1906 12.7496C19.0022 12.7496 18.8157 12.7395 18.632 12.7198V16.6424V17.3924H17.882H6.11942H5.36942V16.6424V12.7206C5.18866 12.7397 5.00472 12.7496 4.81818 12.7496Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span><span class=\"mt-2 ms-2\">{{assignSingle?.length + groupAssign?.length}}\r\n {{coverage}}{{(assignSingle?.length + groupAssign?.length) > 1 ? 's':''}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"col-lg-10 editques\" *ngIf=\"['custom'].includes(type) && !disabledQuestion\">\r\n <a (click)=\"saveandredirect(obj.checkListId)\"\r\n class=\"btn-outline btn-outline-dashed btn btn-light upload\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M14.6666 2.5009C14.8855 2.28203 15.1453 2.10842 15.4313 1.98996C15.7173 1.87151 16.0238 1.81055 16.3333 1.81055C16.6428 1.81055 16.9493 1.87151 17.2353 1.98996C17.5213 2.10842 17.7811 2.28203 18 2.5009C18.2188 2.71977 18.3924 2.97961 18.5109 3.26558C18.6294 3.55154 18.6903 3.85804 18.6903 4.16757C18.6903 4.4771 18.6294 4.7836 18.5109 5.06956C18.3924 5.35553 18.2188 5.61537 18 5.83424L6.74996 17.0842L2.16663 18.3342L3.41663 13.7509L14.6666 2.5009Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"uploadtext\">Edit Questions</span></a> \r\n </div> -->\r\n\r\n <div class=\"col-lg-10 editques\" *ngIf=\"!disabledQuestion&&type === 'custom'\"\r\n [routerLink]=\"'/manage/trax/createChecklist'\" [queryParams]=\"{checklistId: checklistId}\">\r\n <a class=\"btn-outline btn-outline-dashed btn btn-light upload\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M14.6666 2.5009C14.8855 2.28203 15.1453 2.10842 15.4313 1.98996C15.7173 1.87151 16.0238 1.81055 16.3333 1.81055C16.6428 1.81055 16.9493 1.87151 17.2353 1.98996C17.5213 2.10842 17.7811 2.28203 18 2.5009C18.2188 2.71977 18.3924 2.97961 18.5109 3.26558C18.6294 3.55154 18.6903 3.85804 18.6903 4.16757C18.6903 4.4771 18.6294 4.7836 18.5109 5.06956C18.3924 5.35553 18.2188 5.61537 18 5.83424L6.74996 17.0842L2.16663 18.3342L3.41663 13.7509L14.6666 2.5009Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"uploadtext\">Edit Questions</span></a>\r\n </div>\r\n </div>\r\n </h3>\r\n <!-- <div *ngIf=\"['uniformdetection','mobileusagedetection'].includes(type)\">\r\n <div class=\"card-label section-leftheading1\">Alerts</div>\r\n <div class=\"mt-6 mx-4 sub\">Email</div>\r\n </div> -->\r\n <!-- <div *ngIf=\"['uniformdetection','mobileusagedetection'].includes(type)\" class=\"mx-4 mt-4 sub\">if usage exceeds\r\n {{configData?.aiConfig?.mobileDetection?.usageExceed}}\r\n events\r\n </div> -->\r\n <!-- <div *ngIf=\"type === 'storeopenandclose'\">\r\n <div class=\"card-label section-leftheading1\">Alerts</div>\r\n <div class=\"mt-4 mx-4 sub\">Send email everyday to</div>\r\n </div> -->\r\n <div *ngIf=\"!['custom'].includes(type) && configData.aiConfig.events?.length\" class=\"\">\r\n <span *ngIf=\"configData.aiConfig.assignConfig ==='global'\" class=\"scedule-text\">Everyday at {{\r\n dayjs(configData.aiConfig.events[0]?.time,'HH:MM').format('hh:mm A') }} for\r\n {{configData.aiConfig.events[0]?.duration}} mins</span>\r\n <span *ngIf=\"configData.aiConfig.assignConfig ==='store'\" class=\"scedule-text\">Multiple times are\r\n allocated for multiple stores</span>\r\n </div>\r\n <div *ngIf=\"!['custom'].includes(type) && configData.aiConfig.alerts.users?.length\">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Alerts To</div>\r\n <span *ngFor=\"let alert of configData.aiConfig.alerts.users\"\r\n class=\"mt-2 ms-2 badge badge-light-default h-25px\"><span\r\n class=\"bg-light-primary text-primary rounded-5 me-1\">{{getInitials(alert?.name)}}</span>\r\n {{alert?.name}}</span>\r\n </div>\r\n <h3 *ngIf=\"['uniformdetection','mobileusagedetection','tvcompliance'].includes(type) && configData?.aiConfig?.mobileDetection?.detectionArea?.length\"\r\n class=\"card-title align-items-start flex-column \">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Detection Areas</div>\r\n <p>Checklist will run on this Zone</p>\r\n\r\n <div class=\"mx-2 sub\"><span\r\n *ngFor=\"let zone of configData?.aiConfig?.mobileDetection?.detectionArea\"\r\n class=\"badge mx-2 mt-4 badge-light checklistlabel h-25px fs-base\">\r\n <span\r\n class=\"bg-light-primary text-primary rounded-5 me-1\">{{getInitials(zone?.name)}}</span>\r\n <i class=\"ki-duotone ki-arrow-up checklisttext\"></i>\r\n {{zone?.name}}\r\n </span></div>\r\n </h3>\r\n <div *ngIf=\"!['custom'].includes(type)\">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Assign</div>\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8M9 2H15C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6H9C8.44772 6 8 5.55228 8 5V3C8 2.44772 8.44772 2 9 2Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"> Stores\r\n </span></div>\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88332L3.02401 6.98632C2.30358 8.25521 3.06101 9.87908 4.46464 10.0659C4.58627 10.0808 4.70112 10.0889 4.8145 10.0889C5.55255 10.0889 6.20523 9.77192 6.65953 9.2788L7.21286 8.67818L7.76432 9.28052C8.21367 9.77135 8.8652 10.0889 9.60776 10.0889C10.3471 10.0889 11.0022 9.771 11.4512 9.28052L12.0044 8.67629L12.5576 9.28052C13.0066 9.771 13.6617 10.0889 14.401 10.0889C15.1404 10.0889 15.7954 9.771 16.2445 9.28052L16.7977 8.67629L17.3508 9.28052C17.7999 9.771 18.4549 10.0889 19.1943 10.0889C19.3041 10.0889 19.4223 10.0808 19.5433 10.066C20.9772 9.87131 21.7355 8.16351 20.9155 6.88382C20.9154 6.88376 20.9154 6.88371 20.9154 6.88365L18.8056 3.59392L18.8056 3.59392L18.8046 3.59246C18.7582 3.51966 18.6649 3.46387 18.5584 3.46387H5.44307C5.3365 3.46387 5.24326 3.51966 5.19681 3.59246L5.19619 3.59342L3.08995 6.88332ZM4.81818 12.7496C4.71644 12.7496 4.616 12.7465 4.5169 12.7406V16.6424V18.9639C4.5169 19.8207 5.22663 20.5353 6.11942 20.5353H17.882C18.7748 20.5353 19.4845 19.8207 19.4845 18.9639V16.6424V12.7411C19.3874 12.7466 19.2893 12.7496 19.1906 12.7496C19.0022 12.7496 18.8157 12.7395 18.632 12.7198V16.6424V17.3924H17.882H6.11942H5.36942V16.6424V12.7206C5.18866 12.7397 5.00472 12.7496 4.81818 12.7496Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span><span class=\"mt-2 ms-2\">{{this.configData?.storeList?.length}}\r\n Store{{this.configData?.storeList?.length > 1 ? 's':''}}</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!['custom'].includes(type) && configData.approver?.length && clientId!=='452'\">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Automatic Task</div>\r\n <span *ngFor=\"let approve of configData.approver\"\r\n class=\"mt-2 ms-2 badge badge-light-default h-25px\"><span\r\n class=\"bg-light-primary text-primary rounded-5 me-1\">{{getInitials(approve?.name)}}</span>{{approve?.name}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Config div -->\r\n <div class=\"col-xl-9\">\r\n <div class=\"card bg-transparent border-0 outline-0 card-flush h-xl-100\">\r\n <div *ngIf=\"!['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"card-body bg-white rounded-4 px-7\">\r\n <div class=\"schedule\">\r\n <div>\r\n <h2 class=\"section-leftheading\">Schedule\r\n <span class=\"mx-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\">\r\n <path\r\n d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1874_66195\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </h2>\r\n <!-- <div class=\"row\" *ngIf=\"['uniformdetection'].includes(type)\">\r\n <div class=\"col-md-4 d-flex\">\r\n <span class=\"sub mt-2 mx-4\">From</span>&nbsp;&nbsp; \r\n <input class=\"form-control form-control-solid flatpickr-input w-200px mt-2\"\r\n (change)=\"updateTime('start')\" [(ngModel)]=\"startTime\"\r\n placeholder=\"Set store open time\" name=\"due_date\" type=\"time\">\r\n </div>\r\n <div class=\"col-md-4 d-flex\">\r\n <span class=\"sub mt-3 mx-4\">To</span>&nbsp;&nbsp;\r\n <input class=\"form-control form-control-solid flatpickr-input w-200px mt-2\"\r\n (change)=\"updateTime('end')\" [(ngModel)]=\"endTime\" placeholder=\"Set store open time\"\r\n name=\"due_date\" type=\"time\">\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n \r\n </div> -->\r\n <div>\r\n <div *ngIf=\"['mobileusagedetection'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Mobile detections are pre-scheduled, operate during the store's open hours\r\n based on its opening and closing times, and cannot be edited.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['storeopenandclose'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Store open and close detections operate based on the current store's opening\r\n and closing times. You can view/edit store\u2019s open and close timings in the\r\n 'Assign Stores and Cluster' section below\r\n </span>\r\n </div>\r\n <div *ngIf=\"['scrum'].includes(type)\" class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n The store's open and close times are set in the <span\r\n class=\"fw-bolder\">store configurations.</span> To make changes, please\r\n update <span routerLink=\"/manage/settings/configuration\"\r\n class=\"text-decoration-underline cursor-pointer\">click here</span>\r\n </span>\r\n </div>\r\n <div *ngIf=\"['cleaning'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n The store's open and close times are set in the <span\r\n class=\"fw-bolder\">store configurations.</span> To make changes, please\r\n update <span routerLink=\"/manage/settings/configuration\"\r\n class=\"text-decoration-underline cursor-pointer\">click here</span>\r\n </span>\r\n </div>\r\n <div *ngIf=\"['staffleftinthemiddle'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n This AI checklist will initiate detections based on the store's operational\r\n hours, starting when the store opens and stopping when it closes.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['customerunattended'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n This AI checklist will initiate detections based on the store's operational\r\n hours, starting when the store opens and stopping when it closes.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['uniformdetection'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Uniform detections are automatically scheduled based on the store's\r\n operating hours and run during open hours. These schedules cannot be\r\n modified.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['cleaning','scrum'].includes(type)\" class=\"row\">\r\n <div class=\"col-sm-6 cursor-pointer\">\r\n <div (click)=\"clickAIconfigure('global')\"\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'global'? 'configureAcite' : 'border border-1'\"\r\n class=\"d-flex align-items-center justify-content-between h-70px rounded-3 p-3\">\r\n <div class=\"d-flex\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\"\r\n viewBox=\"0 0 36 36\" fill=\"none\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.fill]=\"configData?.aiConfig?.assignConfig === 'global' ? '#EAF8FF' : '#F2F4F7'\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.stroke]=\"configData?.aiConfig?.assignConfig === 'global' ? '#DAF1FF' :'#F9FAFB'\"\r\n stroke-width=\"4\" />\r\n <g clip-path=\"url(#clip0_10179_46867)\">\r\n <path\r\n d=\"M11.75 26C11.2859 26 10.8408 25.8156 10.5126 25.4874C10.1844 25.1592 10 24.7141 10 24.25V11.75C10 10.784 10.784 10 11.75 10H20.25C21.216 10 22 10.784 22 11.75V24.25C22 24.335 21.994 24.418 21.982 24.5H24.25C24.3163 24.5 24.3799 24.4737 24.4268 24.4268C24.4737 24.3799 24.5 24.3163 24.5 24.25V18.285C24.5 18.2439 24.4899 18.2034 24.4706 18.1671C24.4512 18.1308 24.4232 18.0999 24.389 18.077L23.334 17.374C23.2521 17.3194 23.1817 17.2491 23.1269 17.1673C23.0721 17.0855 23.0339 16.9937 23.0146 16.8971C22.9953 16.8005 22.9952 16.7011 23.0143 16.6045C23.0334 16.5078 23.0714 16.4159 23.126 16.334C23.1806 16.2521 23.2509 16.1817 23.3327 16.1269C23.4145 16.0721 23.5063 16.0339 23.6029 16.0146C23.6995 15.9953 23.7989 15.9952 23.8955 16.0143C23.9922 16.0334 24.0841 16.0714 24.166 16.126L25.221 16.829C25.708 17.154 26 17.7 26 18.285V24.25C26 24.7141 25.8156 25.1592 25.4874 25.4874C25.1592 25.8156 24.7141 26 24.25 26H20.75C20.6835 25.9999 20.6173 25.9912 20.553 25.974C20.454 25.991 20.353 26 20.25 26H17.25C17.0511 26 16.8603 25.921 16.7197 25.7803C16.579 25.6397 16.5 25.4489 16.5 25.25V24H15.5V25.25C15.5 25.4489 15.421 25.6397 15.2803 25.7803C15.1397 25.921 14.9489 26 14.75 26H11.75ZM11.5 24.25C11.5 24.388 11.612 24.5 11.75 24.5H14V23.25C14 23.0511 14.079 22.8603 14.2197 22.7197C14.3603 22.579 14.5511 22.5 14.75 22.5H17.25C17.4489 22.5 17.6397 22.579 17.7803 22.7197C17.921 22.8603 18 23.0511 18 23.25V24.5H20.25C20.3163 24.5 20.3799 24.4737 20.4268 24.4268C20.4737 24.3799 20.5 24.3163 20.5 24.25V11.75C20.5 11.6837 20.4737 11.6201 20.4268 11.5732C20.3799 11.5263 20.3163 11.5 20.25 11.5H11.75C11.6837 11.5 11.6201 11.5263 11.5732 11.5732C11.5263 11.6201 11.5 11.6837 11.5 11.75V24.25ZM13.75 16H14.25C14.4489 16 14.6397 16.079 14.7803 16.2197C14.921 16.3603 15 16.5511 15 16.75C15 16.9489 14.921 17.1397 14.7803 17.2803C14.6397 17.421 14.4489 17.5 14.25 17.5H13.75C13.5511 17.5 13.3603 17.421 13.2197 17.2803C13.079 17.1397 13 16.9489 13 16.75C13 16.5511 13.079 16.3603 13.2197 16.2197C13.3603 16.079 13.5511 16 13.75 16ZM13 13.75C13 13.5511 13.079 13.3603 13.2197 13.2197C13.3603 13.079 13.5511 13 13.75 13H14.25C14.4489 13 14.6397 13.079 14.7803 13.2197C14.921 13.3603 15 13.5511 15 13.75C15 13.9489 14.921 14.1397 14.7803 14.2803C14.6397 14.421 14.4489 14.5 14.25 14.5H13.75C13.5511 14.5 13.3603 14.421 13.2197 14.2803C13.079 14.1397 13 13.9489 13 13.75ZM17 16.75C17 16.5511 17.079 16.3603 17.2197 16.2197C17.3603 16.079 17.5511 16 17.75 16H18.25C18.4489 16 18.6397 16.079 18.7803 16.2197C18.921 16.3603 19 16.5511 19 16.75C19 16.9489 18.921 17.1397 18.7803 17.2803C18.6397 17.421 18.4489 17.5 18.25 17.5H17.75C17.5511 17.5 17.3603 17.421 17.2197 17.2803C17.079 17.1397 17 16.9489 17 16.75ZM17.75 13H18.25C18.4489 13 18.6397 13.079 18.7803 13.2197C18.921 13.3603 19 13.5511 19 13.75C19 13.9489 18.921 14.1397 18.7803 14.2803C18.6397 14.421 18.4489 14.5 18.25 14.5H17.75C17.5511 14.5 17.3603 14.421 17.2197 14.2803C17.079 14.1397 17 13.9489 17 13.75C17 13.5511 17.079 13.3603 17.2197 13.2197C17.3603 13.079 17.5511 13 17.75 13ZM13 19.75C13 19.5511 13.079 19.3603 13.2197 19.2197C13.3603 19.079 13.5511 19 13.75 19H14.25C14.4489 19 14.6397 19.079 14.7803 19.2197C14.921 19.3603 15 19.5511 15 19.75C15 19.9489 14.921 20.1397 14.7803 20.2803C14.6397 20.421 14.4489 20.5 14.25 20.5H13.75C13.5511 20.5 13.3603 20.421 13.2197 20.2803C13.079 20.1397 13 19.9489 13 19.75ZM17.75 19H18.25C18.4489 19 18.6397 19.079 18.7803 19.2197C18.921 19.3603 19 19.5511 19 19.75C19 19.9489 18.921 20.1397 18.7803 20.2803C18.6397 20.421 18.4489 20.5 18.25 20.5H17.75C17.5511 20.5 17.3603 20.421 17.2197 20.2803C17.079 20.1397 17 19.9489 17 19.75C17 19.5511 17.079 19.3603 17.2197 19.2197C17.3603 19.079 17.5511 19 17.75 19Z\"\r\n [attr.fill]=\"configData?.aiConfig?.assignConfig === 'global' ? '#00A3FF' : 'black'\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_10179_46867\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"\r\n transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'global' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Global Configuration</span>\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'global' ? 'alerttext' : 'headeralign'\">Configure\r\n huddle time in a store level for all stores</span>\r\n </div>\r\n </div>\r\n <span>\r\n <input class=\"form-check-input w-15px h-15px mt-1 rounded-5\"\r\n [checked]=\"configData?.aiConfig?.assignConfig === 'global'\"\r\n type=\"checkbox\" id=\"oneTime\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-6 cursor-pointer\">\r\n <div (click)=\"clickAIconfigure('store')\"\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'store' ? 'configureAcite' : 'border border-1'\"\r\n class=\"d-flex align-items-center justify-content-between h-70px rounded-3 p-3\">\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\"\r\n viewBox=\"0 0 36 36\" fill=\"none\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.fill]=\"configData.aiConfig.assignConfig === 'store' ? '#EAF8FF':'#F2F4F7'\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.stroke]=\"configData.aiConfig.assignConfig === 'store' ? '#DAF1FF' : '#F9FAFB'\"\r\n stroke-width=\"4\" />\r\n <path\r\n d=\"M12.0574 14.5882L12.0134 14.6569C11.5331 15.5028 12.0381 16.5854 12.9738 16.7099C13.0549 16.7199 13.1315 16.7253 13.2071 16.7253C13.6991 16.7253 14.1342 16.514 14.4371 16.1852L14.806 15.7848L15.1736 16.1864C15.4732 16.5136 15.9075 16.7253 16.4026 16.7253C16.8955 16.7253 17.3322 16.5133 17.6315 16.1864L18.0003 15.7835L18.3691 16.1864C18.6685 16.5133 19.1052 16.7253 19.5981 16.7253C20.091 16.7253 20.5277 16.5133 20.827 16.1864L21.1958 15.7835L21.5646 16.1864C21.864 16.5133 22.3007 16.7253 22.7936 16.7253C22.8668 16.7253 22.9456 16.7199 23.0262 16.71C23.9822 16.5802 24.4878 15.4417 23.9411 14.5886C23.941 14.5885 23.941 14.5885 23.941 14.5884L22.5344 12.3953L22.5338 12.3943C22.5028 12.3458 22.4407 12.3086 22.3696 12.3086H13.6261C13.5551 12.3086 13.4929 12.3458 13.4619 12.3943L13.4615 12.395L12.0574 14.5882ZM11.6363 14.3186L13.0404 12.1254L11.6363 14.3186ZM13.2095 18.4991C13.1417 18.4991 13.0747 18.497 13.0087 18.4931V21.0943V22.6419C13.0087 23.2131 13.4818 23.6895 14.077 23.6895H21.9187C22.5139 23.6895 22.9871 23.2131 22.9871 22.6419V21.0943V18.4934C22.9224 18.4971 22.8569 18.4991 22.7911 18.4991C22.6655 18.4991 22.5412 18.4923 22.4187 18.4792V21.0943V21.5943H21.9187H14.077H13.577V21.0943V18.4798C13.4565 18.4925 13.3339 18.4991 13.2095 18.4991Z\"\r\n [attr.stroke]=\"configData?.aiConfig?.assignConfig === 'store' ? '#00A3FF' : '#101828'\" />\r\n </svg></span>\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'store' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Store Wise Configuration</span>\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'store' ? 'alerttext' : 'headeralign'\">Configure\r\n huddle time in a store level for all stores</span>\r\n </div>\r\n </div>\r\n <span>\r\n <input class=\"form-check-input w-15px h-15px mt-1 rounded-5\"\r\n [checked]=\"configData?.aiConfig?.assignConfig === 'store'\"\r\n type=\"checkbox\" id=\"oneTime\">\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData?.aiConfig?.assignConfig === 'store'\"\r\n class=\"col-sm-12 mt-5\">\r\n <div class=\"text-center d-flex flex-column align-items-center cursor-pointer\"\r\n (click)=\"uploadAIfiles()\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"108\" height=\"88\"\r\n viewBox=\"0 0 108 88\" fill=\"none\">\r\n <circle cx=\"30.8469\" cy=\"30.8469\" r=\"30.8469\"\r\n transform=\"matrix(-1 0 0 1 84.8516 0)\" fill=\"#EAECF0\" />\r\n <g filter=\"url(#filter0_dd_9548_99613)\">\r\n <path\r\n d=\"M53.0499 9.49219C59.4404 9.49219 65.0933 12.65 68.5334 17.4904C69.6568 17.2255 70.8283 17.0853 72.0326 17.0853C80.4197 17.0853 87.2188 23.8844 87.2188 32.2715C87.2188 40.6585 80.4197 47.4576 72.0326 47.4576L34.0671 47.4576C26.7284 47.4576 20.7793 41.5084 20.7793 34.1697C20.7793 26.831 26.7284 20.8818 34.0672 20.8818C34.5884 20.8818 35.1027 20.9118 35.6083 20.9702C38.5172 14.2187 45.2316 9.49219 53.0499 9.49219Z\"\r\n fill=\"#F9FAFB\" />\r\n <ellipse cx=\"15.1862\" cy=\"15.1862\" rx=\"15.1862\" ry=\"15.1862\"\r\n transform=\"matrix(-1 0 0 1 87.2188 17.0859)\"\r\n fill=\"url(#paint0_linear_9548_99613)\" />\r\n <circle cx=\"18.9827\" cy=\"18.9827\" r=\"18.9827\"\r\n transform=\"matrix(-1 0 0 1 72.0312 9.49219)\"\r\n fill=\"url(#paint1_linear_9548_99613)\" />\r\n <ellipse cx=\"13.2879\" cy=\"13.2879\" rx=\"13.2879\" ry=\"13.2879\"\r\n transform=\"matrix(-1 0 0 1 47.3594 20.8789)\"\r\n fill=\"url(#paint2_linear_9548_99613)\" />\r\n </g>\r\n <circle cx=\"2.96605\" cy=\"2.96605\" r=\"2.96605\"\r\n transform=\"matrix(-1 0 0 1 89.5938 8.30469)\"\r\n fill=\"#F2F4F7\" />\r\n <circle cx=\"4.15247\" cy=\"4.15247\" r=\"4.15247\"\r\n transform=\"matrix(-1 0 0 1 92.5625 60.5078)\"\r\n fill=\"#F2F4F7\" />\r\n <circle cx=\"4.15247\" cy=\"4.15247\" r=\"4.15247\"\r\n transform=\"matrix(-1 0 0 1 17.2266 16.6094)\"\r\n fill=\"#F2F4F7\" />\r\n <circle cx=\"2.37284\" cy=\"2.37284\" r=\"2.37284\"\r\n transform=\"matrix(-1 0 0 1 21.9688 2.37109)\"\r\n fill=\"#F2F4F7\" />\r\n <rect width=\"28.4741\" height=\"28.4741\" rx=\"14.237\"\r\n transform=\"matrix(-1 0 0 1 68.2422 36.7773)\" fill=\"#344054\"\r\n fill-opacity=\"0.4\" />\r\n <path\r\n d=\"M48.666 52.7943V55.1671C48.666 55.4818 48.791 55.7836 49.0135 56.0061C49.236 56.2286 49.5377 56.3536 49.8524 56.3536H58.1573C58.472 56.3536 58.7738 56.2286 58.9963 56.0061C59.2188 55.7836 59.3438 55.4818 59.3438 55.1671V52.7943M51.0388 48.6418L54.0049 45.6758M54.0049 45.6758L56.9709 48.6418M54.0049 45.6758V52.7943\"\r\n stroke=\"white\" stroke-width=\"1.18642\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <defs>\r\n <filter id=\"filter0_dd_9548_99613\" x=\"0.78125\" y=\"9.49219\"\r\n width=\"106.438\" height=\"77.9648\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\"\r\n in=\"SourceAlpha\"\r\n result=\"effect1_dropShadow_9548_99613\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_9548_99613\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\"\r\n in=\"SourceAlpha\"\r\n result=\"effect2_dropShadow_9548_99613\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\"\r\n in2=\"effect1_dropShadow_9548_99613\"\r\n result=\"effect2_dropShadow_9548_99613\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect2_dropShadow_9548_99613\"\r\n result=\"shape\" />\r\n </filter>\r\n <linearGradient id=\"paint0_linear_9548_99613\" x1=\"3.52536\"\r\n y1=\"5.15245\" x2=\"30.3724\" y2=\"30.3723\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#D0D5DD\" />\r\n <stop offset=\"0.350715\" stop-color=\"white\"\r\n stop-opacity=\"0\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear_9548_99613\" x1=\"4.4067\"\r\n y1=\"6.44056\" x2=\"37.9654\" y2=\"37.9654\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#D0D5DD\" />\r\n <stop offset=\"0.350715\" stop-color=\"white\"\r\n stop-opacity=\"0\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear_9548_99613\" x1=\"3.08469\"\r\n y1=\"4.50839\" x2=\"26.5758\" y2=\"26.5758\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#D0D5DD\" />\r\n <stop offset=\"0.350715\" stop-color=\"white\"\r\n stop-opacity=\"0\" />\r\n </linearGradient>\r\n </defs>\r\n </svg></span>\r\n <div class=\"w-400px subtitle text-center\">\r\n Download the template below in the <span class=\"fw-bolder\">\u2018Assign\r\n Stores\u2019</span> section and upload to configure store-wise time\r\n to the checklist accordingly.\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData?.aiConfig?.assignConfig !== 'store'\"\r\n class=\"col-sm-12 mt-5\">\r\n <div *ngFor=\"let array of configData?.aiConfig?.events; let i= index\"\r\n class=\"d-flex mb-5 align-items-center\">\r\n <span class=\"me-3\">Start huddle at</span>\r\n <span><input\r\n class=\"form-control form-control-solid flatpickr-input w-auto margin\"\r\n (change)=\"updateHuddletime($event,'time')\"\r\n [(ngModel)]=\"array.time\" placeholder=\"Set store open time\"\r\n name=\"start_date_{{i}}\" type=\"time\"></span>\r\n <span class=\"mx-3\">for a duration of</span>\r\n <span class=\"w-150px\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"array.duration\"\r\n (change)=\"updateHuddletime($event,'duration')\">\r\n <option value=\"15\">15 mins</option>\r\n <option value=\"30\">30 mins</option>\r\n <option value=\"45\">45 mins</option>\r\n <option value=\"60\">60 mins</option>\r\n </select>\r\n </span>\r\n <span *ngIf=\"configData?.aiConfig?.events?.length > 1\"><button\r\n class=\"btn btn-outline px-3 ms-3\" (click)=\"deleteHuddle(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button></span>\r\n </div>\r\n <div *ngIf=\"configData?.aiConfig?.events?.length < 3\"\r\n class=\"btn btn-outline\" (click)=\"AddHuddleEent()\"> <span><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.9974 4.16797V15.8346M4.16406 10.0013H15.8307\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span class=\"ms-3\">Add Event</span></div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['outsidebusinesshoursqueuetracking'].includes(type)\" class=\"row\">\r\n <div class=\"border border-2 rounded-3 px-3\">\r\n <div>\r\n <h2 class=\"schedule-config-header m-3\">Configuration </h2>\r\n </div>\r\n\r\n <div class=\"border-top border-top-2\"\r\n style=\"height: 1px; margin: 1rem -9.750px;\"></div>\r\n <div class=\"border border-2 rounded-3 px-3 mb-3\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Pre-Open Time\r\n Configuration</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changePreopentimeconfig($event)\"\r\n [checked]=\"configData?.aiConfig?.outsidebusinesshoursqueuetracking?.preopentimeconfig !== '' \">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, this\r\n allows detections before store open time</div>\r\n </div>\r\n <div *ngIf=\"preopentimeconfig || configData.aiConfig.outsidebusinesshoursqueuetracking?.preopentimeconfig\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-1\">\r\n <div class=\"schedule-config-sub-header me-3\"> Monitor Store for\r\n </div>\r\n <div>\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.outsidebusinesshoursqueuetracking.preopentimeconfig\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of preOpenCloseTimeConfig\"\r\n [value]=\"time\">{{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes before the\r\n scheduled open Time </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-3 px-3 mb-3\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Post-Close Time\r\n Configuration</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changePreclosetimeconfig($event)\"\r\n [checked]=\"configData?.aiConfig?.outsidebusinesshoursqueuetracking?.preclosetimeconfig !== '' \">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, this\r\n allows detections after store close time</div>\r\n </div>\r\n <div *ngIf=\"preclosetimeconfig || configData.aiConfig.outsidebusinesshoursqueuetracking?.preclosetimeconfig\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-1\">\r\n <div class=\"schedule-config-sub-header me-3\"> Monitor Store for\r\n </div>\r\n <div>\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.outsidebusinesshoursqueuetracking.preclosetimeconfig\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of preOpenCloseTimeConfig\"\r\n [value]=\"time\">{{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes after the\r\n scheduled close Time </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-3 px-3 mb-3\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Person Detection Time\r\n Threshold</div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled,\r\n detection count is based on the configured time</div>\r\n </div>\r\n <div class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-1\">\r\n <div class=\"schedule-config-sub-header me-3\"> Flag, If detection\r\n of a person exceeds </div>\r\n <div>\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.outsidebusinesshoursqueuetracking.persondetectiontimethreshold\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option\r\n *ngFor=\"let time of personDetectionTimeThreshold\"\r\n [value]=\"time\">{{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['custom'].includes(type)\">\r\n <div class=\"col-md-12 mt-6 mb-1\">\r\n <div class=\"row\">\r\n <div class=\"col-md-2 mt-3\">\r\n <span class=\"mx-6 sub\">For</span>\r\n </div>\r\n <div class=\"col-md-3 dropdown\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"configData.checkListDetails.schedule\"\r\n (change)=\"updateSchedule($event)\">\r\n <option value=\"onetime\">Does Not Repeat</option>\r\n <option value=\"weekday\"> Every Weekday (Mon - Fri)</option>\r\n <option value=\"daily\">Daily</option>\r\n <option value=\"weekly\">Weekly</option>\r\n <option value=\"monthly\">Monthly</option>\r\n <option value=\"range\">Custom Range</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3 mx-2\">At</span>&nbsp;&nbsp;\r\n <input\r\n class=\"form-control form-control-solid flatpickr-input w-200px margin\"\r\n (change)=\"updateTime('start')\" [(ngModel)]=\"startTime\"\r\n placeholder=\"Set store open time\" name=\"due_date\" type=\"time\">\r\n </div>\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3 ms-5\">Ends</span>&nbsp;&nbsp;\r\n <input\r\n class=\"form-control form-control-solid flatpickr-input w-200px margin\"\r\n (change)=\"updateTime('end')\" [(ngModel)]=\"endTime\"\r\n placeholder=\"Set store open time\" name=\"due_date\" type=\"time\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"justify-content-between mt-4\">\r\n <div class=\"config-heading\">Checklist Configuration</div>\r\n <div *ngIf=\"configData.checkListDetails.schedule === 'onetime'\">\r\n <div class=\"row col-lg-12 d-flex mt-5\">\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3\">Once On</span>\r\n </div>\r\n <div class=\"col-md-3 px-4 pe-3\" id=\"dateclass\"\r\n data-kt-daterangepicker=\"true\" data-kt-daterangepicker-opens=\"left\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\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\"\r\n 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\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n matInput ngxDaterangepickerMd [singleDatePicker]=\"true\"\r\n [minDate]=\"minDate\" [drops]=\"'down'\" [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDates\"\r\n [autoApply]=\"false\"\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)=\"dateRangeStart($event)\" name=\"daterange\"\r\n [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.schedule !== 'onetime'\">\r\n <div class=\"form-check form-switch mt-6\">\r\n <input type=\"checkbox\" id=\"rangeDate\"\r\n class=\"form-check-input ng-valid ng-dirty ng-touched\"\r\n [(ngModel)]=\"showRangeValue\"\r\n [disabled]=\"configData.checkListDetails?.schedule === 'range'\"\r\n (change)=\"updateDateValue($event)\">\r\n <label for=\"rangeDate\" class=\"form-check-label checklisttext ms-2\">Set\r\n defined\r\n date range</label>\r\n </div>\r\n <div class=\"row col-lg-12 d-flex mt-5\" *ngIf=\"showRangeValue\">\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3\">Starts from</span>\r\n </div>\r\n <div class=\"col-md-3\"\r\n [ngClass]=\"configData.checkListDetails.schedule === 'range' ? 'ps-10' : 'px-4 pe-3'\"\r\n id=\"dateclass\" data-kt-daterangepicker=\"true\"\r\n data-kt-daterangepicker-opens=\"left\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\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\"\r\n 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\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n matInput ngxDaterangepickerMd [singleDatePicker]=\"true\"\r\n [minDate]=\"minStartDate\" [drops]=\"'down'\" [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedStartDate\"\r\n [autoApply]=\"false\"\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)=\"dateRangeStart($event)\" name=\"daterange\"\r\n [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 mt-8 ng-star-inserted\">\r\n <div class=\"row\"\r\n *ngIf=\"configData.checkListDetails.schedule !== 'range'\">\r\n <div class=\"col-md-2 mt-2\">\r\n <span class=\"sub\">Repeats every</span>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div\r\n class=\"fv-row mb-5 fv-plugins-icon-container d-flex flex-column\">\r\n <input type=\"text\" autocomplete=\"off\" required=\"\"\r\n class=\"form-control form-control-solid w-100px ng-pristine ng-invalid ng-touched\"\r\n [(ngModel)]=\"configData.checkListDetails.scheduleRepeatedDay\"\r\n maxlength=\"2\" min=\"1\" (change)=\"updateRepeatDay()\"\r\n (input)=\"removeAlphapet($event)\">\r\n </div>\r\n <div\r\n class=\"fv-row mb-5 mx-2 fv-plugins-icon-container d-flex flex-column\">\r\n <input type=\"text\" autocomplete=\"off\"\r\n class=\"form-control form-control-solid w-100px ng-pristine ng-invalid ng-touched\"\r\n [(ngModel)]=\"repeatType\" readonly>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.schedule === 'monthly'\">\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n\r\n </div>\r\n <div class=\"col-lg-2 mt-3\">\r\n <div class=\"form-check fontSize\">\r\n <input class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"day\"\r\n [checked]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup === 'day'\"\r\n (change)=\"updateMonth('day')\">\r\n <label class=\"cursor-pointer\" for=\"inlineRadio1\">On\r\n Day</label>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div\r\n class=\"fv-row mb-5 fv-plugins-icon-container d-flex flex-column\">\r\n <input type=\"text\" autocomplete=\"off\"\r\n class=\"form-control form-control-solid w-100px\"\r\n [ngClass]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'day' ? 'disabled' : ''\"\r\n [(ngModel)]=\"configData.checkListDetails.scheduleRepeatedMonthWeek\"\r\n (change)=\"updateValue($event)\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'day'\"\r\n maxLength=\"2\" (input)=\"validate($event)\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n\r\n </div>\r\n <div class=\"col-lg-2 mt-3\">\r\n <div class=\"form-check fontSize\">\r\n <input class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"day\"\r\n [checked]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup === 'date'\"\r\n (change)=\"updateMonth('date')\">\r\n <label class=\"cursor-pointer\" for=\"inlineRadio1\">On\r\n the</label>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div\r\n class=\"fv-row mb-5 fv-plugins-icon-container d-flex flex-column\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"monthDate\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'date'\">\r\n <option value=\"1\"> First </option>\r\n <option value=\"2\"> Second </option>\r\n <option value=\"3\"> Third</option>\r\n <option value=\"4\"> Fourth</option>\r\n <option value=\"5\"> Last</option>\r\n </select>\r\n </div>\r\n <div\r\n class=\"fv-row mb-5 mx-2 fv-plugins-icon-container d-flex flex-column\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"monthDay\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'date'\">\r\n <option value=\"Sunday\"> Sunday </option>\r\n <option value=\"Monday\"> Monday </option>\r\n <option value=\"Tuesday\"> Tuesday</option>\r\n <option value=\"Wednesday\"> Wednesday</option>\r\n <option value=\"Thursday\"> Thursday</option>\r\n <option value=\"Friday\">Friday</option>\r\n <option value=\"Saturday\"> Saturday</option>\r\n </select>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-2 mt-3\">\r\n <div class=\"form-check fontSize\">\r\n <input class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"day\"\r\n [checked]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup === 'specific'\"\r\n (change)=\"updateMonth('specific')\">\r\n <label class=\"cursor-pointer\" for=\"inlineRadio1\">On\r\n Specific Dates</label>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div class=\"position-relative\"\r\n (clickOutside)=\"closeDropDown()\">\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div\r\n class=\"d-flex align-items-center position-relative w-100\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n 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=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\"\r\n class=\"form-control dropdown-input ps-14\"\r\n (click)=\"toggleDropDown()\" readonly\r\n placeholder=\"Select Dates\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'specific'\" />\r\n </div>\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu w-100\"\r\n *ngIf=\"showDropDown\">\r\n <div class=\"calendar-container\">\r\n <div class=\"content\">\r\n <div class=\"dates\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"row d-flex\">\r\n <div class=\"col-2 mb-2\"\r\n *ngFor=\"let date of dates\">\r\n <li class=\"nav-item me-1\"\r\n role=\"presentation\"\r\n (click)=\"selectDate(date)\">\r\n <a class=\"nav-link btn weekstyledate d-flex flex-column flex-center rounded-pill min-w-35px py-2 px-3 \"\r\n [ngClass]=\"selectedDate.includes(date) ? 'active btn-active-primary' : ''\"\r\n data-bs-toggle=\"tab\"\r\n aria-selected=\"false\"\r\n tabindex=\"-1\"\r\n role=\"tab\">\r\n <span\r\n class=\"pillstyle\">{{\r\n date\r\n }}</span>\r\n </a>\r\n </li>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button ms-2\"\r\n (click)=\"submitDate();showDropDown= false;\">\r\n <button\r\n class=\"btn btn-primary btn-block w-100\">\r\n Submit\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-6 py-3 badge-specificdate\">\r\n <div class=\"d-flex mt-3 flex-wrap\">\r\n <span *ngFor=\"let date of submittedDates\"\r\n class=\"badge badge-pill badge-light checklisttext me-4\">\r\n {{ getDateWithSuffix(date) }}\r\n <span (click)=\"removeBadge(date)\"\r\n class=\"cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div\r\n *ngIf=\"['weekday','weekly'].includes(configData.checkListDetails.schedule)\">\r\n <ul class=\"nav nav-pills d-flex flex-nowrap mb-3\"\r\n role=\"tablist\">\r\n\r\n <ng-container\r\n *ngFor=\"let day of ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']\">\r\n <li class=\"nav-item me-1\" role=\"presentation\"\r\n (click)=\"(configData.checkListDetails.schedule === 'weekly' || (configData.checkListDetails.schedule === 'weekday' && !['Sunday','Saturday'].includes(day))) ? setDay(day) : ''\">\r\n <a class=\"nav-link btn weekstyle d-flex flex-column flex-center rounded-pill min-w-45px me-2 py-4 px-3\"\r\n [ngClass]=\"(configData.checkListDetails.schedule === 'weekday' && ['Sunday','Saturday'].includes(day)) ? 'cursor-default' : selectedDays.includes(day) ? 'selectDay' : ''\"\r\n data-bs-toggle=\"tab\" aria-selected=\"false\"\r\n tabindex=\"-1\" role=\"tab\">\r\n <span class=\"pillstyle\">{{ day[0] }}</span>\r\n </a>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.schedule === 'range'\">\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n\r\n <div class=\"col-lg-6 d-flex\">\r\n <div class=\"form-check form-switch mt-3\">\r\n <input type=\"checkbox\" id=\"flexSwitchCheckDefault\"\r\n class=\"form-check-input ng-valid ng-dirty ng-touched\"\r\n [(ngModel)]=\"specific\"\r\n (change)=\"updateSpecific($event)\">\r\n <label for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label checklisttext ms-2\">On Specific\r\n Dates</label>\r\n </div>\r\n <div class=\"px-4 pe-3 position-relative\"\r\n (clickOutside)=\"closeDropDown()\">\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div\r\n class=\"d-flex align-items-center position-relative w-300px\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n 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=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\"\r\n class=\"form-control dropdown-input ps-14\"\r\n (click)=\"toggleDropDown()\" readonly\r\n placeholder=\"Select Dates\"\r\n [disabled]=\"!specific\" />\r\n </div>\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu w-100\"\r\n *ngIf=\"showDropDown\">\r\n <lib-multi-date-datepicker\r\n (selectedDates)=\"selectSpecificDate($event)\"\r\n [predefinedDates]=\"selectedDateList\"\r\n [startDate]=\"configData.checkListDetails.configStartDate\"\r\n [endDate]=\"configData.checkListDetails.configEndDate\"></lib-multi-date-datepicker>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-6 py-3 badge-specificdate\">\r\n <div class=\"d-flex mt-3 ms-5 flex-wrap\">\r\n <span *ngFor=\"let date of selectedDateList\"\r\n class=\"badge badge-pill badge-light checklisttext me-4\">\r\n {{ date }}\r\n <span (click)=\"removeDate(date)\"\r\n class=\"cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\"\r\n stroke=\"#667085\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\"\r\n [hidden]=\"!showRangeValue || configData.checkListDetails.schedule === 'onetime'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-2\"\r\n [ngClass]=\"configData.checkListDetails.schedule === 'range' ? 'mt-4' : 'mt-2'\">\r\n <span class=\"sub\">Ends On</span>\r\n </div>\r\n <div class=\"col-md-3\" id=\"dateclass\"\r\n [ngClass]=\"configData.checkListDetails.schedule === 'range' ? 'ps-9' : 'px-4 pe-3'\"\r\n data-kt-daterangepicker=\"true\" data-kt-daterangepicker-opens=\"left\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\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\"\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n matInput ngxDaterangepickerMd [singleDatePicker]=\"true\"\r\n [minDate]=\"minEndDate\" [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedEndDate\" [autoApply]=\"false\"\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)=\"dateRangeEnd($event)\" name=\"daterange\"\r\n [readonly]=\"true\" />\r\n </div>\r\n <div class=\"mt-5 remove cursor-pointer ms-4\"\r\n (click)=\"onDatepickerRefresh()\"\r\n *ngIf=\"configData.checkListDetails.configEndDate !== '' && configData.checkListDetails.configEndDate !== null && configData.checkListDetails.schedule !=='range'\">\r\n Remove\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'onetime'\">\r\n Occurs on\r\n the day {{configData.checkListDetails?.scheduleDate | date:'dd MMM YYYY'}}</div>\r\n <div class=\"my-3 user\"\r\n *ngIf=\"['weekday','weekly'].includes(configData.checkListDetails?.schedule)\">\r\n Occurs\r\n every {{(configData.checkListDetails?.scheduleRepeatedDay?.length &&\r\n configData.checkListDetails?.scheduleRepeatedDay !=='01') ?\r\n configData.checkListDetails?.scheduleRepeatedDay : ''}} week<span\r\n *ngIf=\"configData.checkListDetails?.scheduleRepeatedDay !== 01\">s</span> on\r\n {{selectedDays.toString()}}<span *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate | date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate\">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'daily'\">\r\n Occurs every\r\n {{(configData.checkListDetails?.scheduleRepeatedDay?.length &&\r\n configData.checkListDetails?.scheduleRepeatedDay !== '01') ?\r\n configData.checkListDetails?.scheduleRepeatedDay : ''}} day<span\r\n *ngIf=\"configData.checkListDetails?.scheduleRepeatedDay !== 01\">s</span><span\r\n *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate |\r\n date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate \">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'monthly'\">\r\n Occurs\r\n every\r\n {{(configData.checkListDetails?.scheduleRepeatedDay?.length &&\r\n configData.checkListDetails?.scheduleRepeatedDay !== '01') ?\r\n configData.checkListDetails?.scheduleRepeatedDay : ''}} month<span\r\n *ngIf=\"configData.checkListDetails?.scheduleRepeatedDay !== 01\">s\r\n </span>{{(configData.checkListDetails?.scheduleRepeatedMonthSetup === 'day') ?\r\n ('on day ' + configData.checkListDetails.scheduleRepeatedMonthWeek) :\r\n configData.checkListDetails?.scheduleRepeatedMonthSetup === 'date' ?\r\n updateMonthValue():\r\n updateSpecificValue()}}<span *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate | date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate\">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'range'\">\r\n Occurs every\r\n {{configData.checkListDetails?.scheduleWeekDays?.toString()}} <span\r\n *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate |\r\n date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate\">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"section-left\" *ngIf=\"['custom'].includes(type)\">\r\n <div>\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\">\r\n <div class=\"config-heading\">Response Configuration</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" (click)=\"configaccordian()\"\r\n [ngClass]=\"{'rotate' : showconfig}\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"35\" height=\"35\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"showconfig\">\r\n <div cdkDropList>\r\n <div cdkDrag>\r\n <div class=\"col-lg-12\"\r\n [ngClass]=\"['onetime','daily'].includes(configData?.checkListDetails.schedule) || (configData?.checkListDetails.schedule === 'monthly' && configData?.checkListDetails.scheduleRepeatedMonthSetup !=='specific') ? 'bg-color-disabled' : ''\">\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.allowOnce ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowOnce\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"oneTime\"\r\n [disabled]=\"['onetime','daily'].includes(configData?.checkListDetails.schedule) || (configData?.checkListDetails.schedule === 'monthly' && configData?.checkListDetails.scheduleRepeatedMonthSetup !=='specific')\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"oneTime\">Only one\r\n time\r\n </label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"oneTime\">By\r\n enabling this, the response can be captured only\r\n once for\r\n this checklist <span *ngIf=\"showRangeValue\">from\r\n {{configData.checkListDetails.configStartDate}}\r\n <span\r\n *ngIf=\"configData.checkListDetails.configEndDate\">to\r\n {{configData.checkListDetails.configEndDate}}.</span></span></label>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\" configData?.checkListDetails?.allowedOverTime ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowedOverTime\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"fillResponse\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"fillResponse\">Fill response after configure\r\n time.</label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"fillResponse\">By enabling, the user can\r\n fill the\r\n checklist even after the above configured\r\n end-time.</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.allowedStoreLocation ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowedStoreLocation\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"geoFencing\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"geoFencing\">Geo\r\n fencing\r\n </label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"geoFencing\">By\r\n enabling, the checklist can be filled by the user\r\n only when\r\n inside the store.</label>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.allowedMultiSubmit ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowedMultiSubmit\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"allowedMultiSubmitSwitch\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"allowedMultiSubmitSwitch\">Allow multiple\r\n responses</label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"allowedMultiSubmitSwitch\">By enabling, the\r\n checklist\r\n can be filled multiple times in a day</label>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.restrictAttendance ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.restrictAttendance\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"restrictAttendance\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"restrictAttendance\">Restrict\r\n attendance</label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"restrictAttendance\">By enabling, user can't be\r\n able to clockout without completing the\r\n task.</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <div class=\"section-left\" *ngIf=\"['custom'].includes(type)\">\r\n <div>\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\">\r\n <div class=\"config-heading\">Advance Configuration</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" (click)=\"advanceaccordian()\"\r\n [ngClass]=\"{'rotate' : showadvance}\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"35\" height=\"35\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"showadvance\">\r\n <div cdkDropList>\r\n <div cdkDrag>\r\n <div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex\">\r\n <div class=\"mt-2 form-check-label sub\">\r\n <span>Checklist Owner</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-check-label subtext\">\r\n Owners get access to manage the checklist\r\n </div>\r\n <div class=\"col-lg-12 mt-3\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">Can be managed by </div>\r\n </div>\r\n </div>\r\n <div class=\"w-80\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData?.checkListDetails?.owner\"\r\n (selectedList)=\"updateOwner($event)\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-5\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex\">\r\n <div class=\"mt-2 form-check-label sub\">\r\n <span>Approver</span>\r\n </div>\r\n <div class=\"form-check form-switch ms-5\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.approver?.length ? true : false\"\r\n [(ngModel)]=\"approve\" type=\"checkbox\"\r\n id=\"approver\"\r\n (change)=\"updateConfigApprover($event)\"\r\n disabled>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-check-label subtext\">\r\n By enabling, the users will be able to approve the checklist\r\n </div>\r\n <div class=\"col-lg-12 mt-3\" *ngIf=\"approve\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">To be approved by </div>\r\n </div>\r\n </div>\r\n <div class=\"w-80\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData?.checkListDetails?.approver\"\r\n (selectedList)=\"updateApprover($event)\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-5\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex\">\r\n <div class=\"mt-2 form-check-label sub\">\r\n <span>Reminder</span>\r\n </div>\r\n <div class=\"form-check form-switch ms-5\">\r\n <input class=\"form-check-input mt-3\"\r\n [(ngModel)]=\"remainder\" type=\"checkbox\"\r\n id=\"oneTime\"\r\n (change)=\"updateConfigRemainder($event)\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-check-label subtext\">\r\n By enabling, the users will be reminded in the selected\r\n interval\r\n </div>\r\n <div class=\"col-lg-12 mt-3\" *ngIf=\"remainder\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">Notify user before</div>\r\n </div>\r\n </div>\r\n <div class=\"w-80\">\r\n <div class=\"w-100 d-flex\">\r\n <div class=\"d-flex align-items-center position-relative w-200px ,\"\r\n *ngFor=\"let loop of configData.checkListDetails?.remainder;let i=index\">\r\n <!-- <span *ngFor=\"let loop of timeLoop\"> -->\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g\r\n clip-path=\"url(#clip0_1487_47636)\">\r\n <path\r\n d=\"M10.0013 5.00033V10.0003L13.3346 11.667M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1487_47636\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <select class=\"form-select ps-14 me-5\"\r\n (change)=\"updateRemainder($event,i)\"\r\n [id]=\"'remainder'+ i\">\r\n <option\r\n *ngFor=\"let time of updateTimeLoop(i)\"\r\n class=\"h-200px\"\r\n [selected]=\"loop === time\"\r\n [value]=\"time\">{{time}} mins\r\n </option>\r\n </select>\r\n <!-- </span> -->\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.remainder.length < 3\"\r\n class=\"ms-5\">\r\n <button class=\"btn btn-sm btn-outline\"\r\n (click)=\"updateLoop()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10.0013 4.16699V15.8337M4.16797 10.0003H15.8346\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"remainder\" class=\"mt-2 user\">\r\n Send Alerts <span\r\n *ngFor=\"let item of configData.checkListDetails.remainder;let i=index\"><span\r\n *ngIf=\"i !== configData.checkListDetails.remainder.length-1 && i !== 0\">\r\n ,</span><span\r\n *ngIf=\"i === configData.checkListDetails.remainder.length-1 && i !== 0\">\r\n and</span> {{item}}mins </span>before the checklist\r\n end time\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <div *ngIf=\"['eyetest'].includes(type)\" class=\"mt-6 mx-4 sub\">Store opens at <span\r\n class=\"fw-600\"><u>{{configData?.openTime}}</u></span> and closes\r\n at <span class=\"fw-600\"><u>{{configData?.closeTime}}</u></span>, everyday. <div\r\n class=\"separator mt-8\"></div>\r\n </div>\r\n <div *ngIf=\"type === 'unattended'\" class=\"mt-6 mx-4 sub\">\r\n Time taken to assist by staff &lt;= 1 mins | Staff to customer time spent &lt;=1\r\n mins\r\n <!-- Store opens at <span\r\n class=\"fw-600\"><u>{{configData?.openTime}}</u></span> and closes\r\n at <span class=\"fw-600\"><u>{{configData?.closeTime}}</u></span>, everyday. <div\r\n class=\"separator mt-8\"></div> -->\r\n </div>\r\n <div *ngIf=\"type !=='custom'\">\r\n <div *ngIf=\"!['eyetest','halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"separator mt-8\"></div>\r\n <h2 class=\"section-leftheading mt-8\">Notify Alerts\r\n <span class=\"mx-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\">\r\n <path\r\n d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1874_66195\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </h2>\r\n <div *ngIf=\"['mobileusagedetection'].includes(type)\" class=\"col-md-12 mt-8\">\r\n <div class=\"row mt-4\">\r\n <div class=\"col-md-2 mt-2 \">\r\n <span class=\"mx-4 sub\">If usage exceeds</span>\r\n </div>\r\n <div class=\"col-lg-1\">\r\n <div class=\"fv-row mb-5 fv-plugins-icon-container flex flex-column\">\r\n\r\n <input\r\n class=\"form-control form-control-solid text-center w-55px\"\r\n [(ngModel)]=\"configData.aiConfig.mobileDetection.usageExceed\"\r\n type=\"text\" (keypress)=\"omit_special_char($event)\"\r\n autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (input)=\"validateLimit($event)\" />\r\n <span class=\"text-danger usageerror\" *ngIf=\"errormsg\">Please\r\n enter event count\r\n between 15 to 999</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mt-2\">\r\n <span class=\"sub\">detections per day</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['uniformdetection','mobileusagedetection','scrum','cleaning','storeopenandclose','unattended','packageConfiguration','staffleftinthemiddle','customerunattended','outsidebusinesshoursqueuetracking','halfshutter','tvcompliance'].includes(type)\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"col-lg-2\">\r\n <div class=\"d-flex align-items-center my-5\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mx-4\">Send Alert to </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-9\">\r\n <div class=\"fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.alerts.users\"\r\n (selectedList)=\"updateAlert($event,'user')\"></lib-chip-dropdown>\r\n <!-- <lib-chip-dropdown [data]=\"alertUsers\" [selectedData]=\"configData?.checkListDetails?.owner\"\r\n (selectedList)=\"updateOwner($event)\"></lib-chip-dropdown> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Schedule Checklist -->\r\n <div *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <div>\r\n <h2 class=\"section-leftheading\">Schedule Checklist </h2>\r\n </div>\r\n <div class=\"schedule-config-description mb-6\">Set the desired time to run the\r\n checklist</div>\r\n <div>\r\n <div *ngIf=\"['halfshutter'].includes(type)\"\r\n class=\"d-flex align-items-center p-2 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-2\">\r\n This checklist will run based on each store\u2019s opening and closing\r\n time. You can view store timings in the 'Assign Stores' section\r\n below.\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"row ng-star-inserted\" *ngIf=\"['halfshutter'].includes(type)\">\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\"> Start Detection for a\r\n duration, </div>\r\n </div>\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.halfshutter.schedule.afterOpenTime\"\r\n required>\r\n <option *ngFor=\"let time of scheduleTimeConfig\" [value]=\"time\">\r\n {{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header me-3\"> minutes after Store Open\r\n time and </div>\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.halfshutter.schedule.beforeCloseTime\"\r\n required>\r\n <option *ngFor=\"let time of scheduleTimeConfig\" [value]=\"time\">\r\n {{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes before Store Close\r\n time </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-4 mb-4\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"sched\" id=\"std\"\r\n [(ngModel)]=\"scheduletype\" value=\"standard\">\r\n <label class=\"small fw-medium\" for=\"std\">Standard Store Open & Close\r\n Time</label>\r\n </div>\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"sched\" id=\"custom\"\r\n [(ngModel)]=\"scheduletype\" value=\"custom\">\r\n <label class=\"small fw-medium\" for=\"custom\">Custom Time</label>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-3 mb-4\"\r\n *ngIf=\"scheduletype==='custom'\">\r\n <span class=\"fw-medium text-dark\">Start at</span>\r\n <div class=\"time-input-wrapper\">\r\n <input type=\"time\" class=\"form-control time-field\"\r\n [(ngModel)]=\"schedulestartTime\">\r\n <i class=\"bi bi-clock\"></i>\r\n </div>\r\n\r\n <span class=\"fw-medium text-dark ms-2\">Ends at</span>\r\n <div class=\"time-input-wrapper\">\r\n <input type=\"time\" class=\"form-control time-field\"\r\n [(ngModel)]=\"scheduleendTime\">\r\n <i class=\"bi bi-clock\"></i>\r\n </div>\r\n </div>\r\n <hr style=\"border:1px solid #cbcdd1\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"fw-bold small me-3\">Set recurrence</span>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n [(ngModel)]=\"recurrenceStatus\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"recurrenceStatus\" class=\"fade-in mt-3\">\r\n <div class=\"d-flex align-items-center gap-2 mb-4\">\r\n <span class=\"text-secondary-blue fw-medium\">Repeat every</span>\r\n\r\n <select class=\"form-select custom-select shadow-none\"\r\n [(ngModel)]=\"recurrencetime\">\r\n <option [value]=\"1\">1</option>\r\n <option [value]=\"2\">2</option>\r\n <option [value]=\"3\">3</option>\r\n <option [value]=\"4\">4</option>\r\n <option [value]=\"5\">5</option>\r\n <option [value]=\"6\">6</option>\r\n <option [value]=\"7\">7</option>\r\n <option [value]=\"8\">8</option>\r\n </select>\r\n\r\n <span class=\"text-secondary-blue fw-medium\">Hours</span>\r\n </div>\r\n\r\n <!-- Row 3: Summary Text -->\r\n <p class=\"summary-text\">\r\n Occurs every {{recurrencetime}} Hours between\r\n <span *ngIf=\"scheduletype!=='custom'\">Store Open & Close Time</span>\r\n <span *ngIf=\"scheduletype==='custom'\">{{schedulestartTime}}\r\n \u2013{{scheduleendTime}}</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Detection Areas -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['mobileusagedetection','outsidebusinesshoursqueuetracking','halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <h2 class=\"section-leftheading\">Detection Areas\r\n <!-- <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\"> <path d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g>\r\n <defs> <clipPath id=\"clip0_1874_66195\"> <rect width=\"16\" height=\"16\" fill=\"white\" /> </clipPath> </defs>\r\n </svg>\r\n </span> -->\r\n </h2>\r\n\r\n <div *ngIf=\"configData?.product.includes('tangoZone')\" class=\"row ng-star-inserted\">\r\n <div *ngIf=\"configData?.product.includes('tangoZone')\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mb-4\" *ngIf=\"['mobileusagedetection'].includes(type)\">\r\n Detect mobile usage except </div>\r\n <div class=\"schedule-config-description mb-6\"\r\n *ngIf=\"['outsidebusinesshoursqueuetracking','halfshutter','tvcompliance'].includes(type)\">\r\n Checklist will run on this Zone </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"configData?.product.includes('tangoZone')\">\r\n <!-- <lib-chip-dropdown [data]=\"zoneList\" [selectedData]=\"configData.aiConfig?.detectionArea\" (selectedList)=\"updateZone($event)\"></lib-chip-dropdown> -->\r\n <div class=\"border border-2 p-3 rounded\" style=\"min-height: 44px;\"> <span\r\n class=\"badge badge-light-default mx-2\"\r\n *ngFor=\"let item of zoneList;let i=index\">{{item.name}}</span></div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!configData?.product.includes('tangoZone')\"\r\n class=\"row ng-star-inserted mx-4\">\r\n <div *ngIf=\"!configData?.product.includes('tangoZone')\"\r\n class=\"card mt-3 p-3 border border-1\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex align-items-center\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\"\r\n viewBox=\"0 0 90 90\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"75.6666\" height=\"75.6666\"\r\n rx=\"37.8333\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"75.6666\" height=\"75.6666\"\r\n rx=\"37.8333\" stroke=\"#EAF8FF\" stroke-width=\"13.5119\" />\r\n <path\r\n d=\"M45.4287 37.9157L44.8683 38.2416L45.1709 38.815L47.7248 43.6539C48.3333 44.8068 49.8697 45.1058 50.8961 44.3291L50.8965 44.3288L54.8678 41.3181L55.2485 41.0295L55.1912 41.328L53.1546 51.9421C52.9711 52.8889 52.0879 53.6161 51.0099 53.6161H38.6549C37.5722 53.6161 36.6903 52.8848 36.5106 51.9439L36.5105 51.9433L34.4736 41.328L34.4163 41.0295L34.797 41.3181L38.7683 44.3288L38.7687 44.3291C39.7951 45.1058 41.3315 44.8068 41.94 43.6539L44.4939 38.815L44.7965 38.2416L44.2361 37.9157C43.9174 37.7302 43.7252 37.4107 43.7252 37.064C43.7252 36.5379 44.1856 36.0506 44.8324 36.0506C45.4792 36.0506 45.9396 36.5379 45.9396 37.064C45.9396 37.4074 45.7465 37.7308 45.4287 37.9157ZM55.8547 40.7798H55.3197L54.9903 40.3617C54.8544 40.1892 54.7787 39.984 54.7787 39.7664C54.7787 39.2403 55.2391 38.753 55.8859 38.753C56.5326 38.753 56.9931 39.2403 56.9931 39.7664C56.9931 40.2925 56.5326 40.7798 55.8859 40.7798H55.8858H55.8858H55.8857H55.8857H55.8856H55.8856H55.8855H55.8855H55.8854H55.8854H55.8853H55.8852H55.8852H55.8851H55.8851H55.885H55.885H55.8849H55.8849H55.8848H55.8848H55.8847H55.8847H55.8846H55.8845H55.8845H55.8844H55.8844H55.8843H55.8843H55.8842H55.8842H55.8841H55.884H55.884H55.8839H55.8839H55.8838H55.8838H55.8837H55.8837H55.8836H55.8835H55.8835H55.8834H55.8834H55.8833H55.8833H55.8832H55.8831H55.8831H55.883H55.883H55.8829H55.8829H55.8828H55.8827H55.8827H55.8826H55.8826H55.8825H55.8825H55.8824H55.8823H55.8823H55.8822H55.8822H55.8821H55.8821H55.882H55.8819H55.8819H55.8818H55.8818H55.8817H55.8816H55.8816H55.8815H55.8815H55.8814H55.8813H55.8813H55.8812H55.8812H55.8811H55.8811H55.881H55.8809H55.8809H55.8808H55.8808H55.8807H55.8806H55.8806H55.8805H55.8805H55.8804H55.8803H55.8803H55.8802H55.8802H55.8801H55.88H55.88H55.8799H55.8798H55.8798H55.8797H55.8797H55.8796H55.8795H55.8795H55.8794H55.8794H55.8793H55.8792H55.8792H55.8791H55.8791H55.879H55.8789H55.8789H55.8788H55.8787H55.8787H55.8786H55.8786H55.8785H55.8784H55.8784H55.8783H55.8782H55.8782H55.8781H55.8781H55.878H55.8779H55.8779H55.8778H55.8777H55.8777H55.8776H55.8776H55.8775H55.8774H55.8774H55.8773H55.8772H55.8772H55.8771H55.8771H55.877H55.8769H55.8769H55.8768H55.8767H55.8767H55.8766H55.8766H55.8765H55.8764H55.8764H55.8763H55.8762H55.8762H55.8761H55.876H55.876H55.8759H55.8759H55.8758H55.8757H55.8757H55.8756H55.8755H55.8755H55.8754H55.8753H55.8753H55.8752H55.8751H55.8751H55.875H55.875H55.8749H55.8748H55.8748H55.8747H55.8746H55.8746H55.8745H55.8744H55.8744H55.8743H55.8742H55.8742H55.8741H55.8741H55.874H55.8739H55.8739H55.8738H55.8737H55.8737H55.8736H55.8735H55.8735H55.8734H55.8733H55.8733H55.8732H55.8731H55.8731H55.873H55.873H55.8729H55.8728H55.8728H55.8727H55.8726H55.8726H55.8725H55.8724H55.8724H55.8723H55.8722H55.8722H55.8721H55.872H55.872H55.8719H55.8718H55.8718H55.8717H55.8717H55.8716H55.8715H55.8715H55.8714H55.8713H55.8713H55.8712H55.8711H55.8711H55.871H55.8709H55.8709H55.8708H55.8707H55.8707H55.8706H55.8705H55.8705H55.8704H55.8703H55.8703H55.8702H55.8701H55.8701H55.87H55.87H55.8699H55.8698H55.8698H55.8697H55.8696H55.8696H55.8695H55.8694H55.8694H55.8693H55.8692H55.8692H55.8691H55.869H55.869H55.8689H55.8688H55.8688H55.8687H55.8686H55.8686H55.8685H55.8685H55.8684H55.8683H55.8683H55.8682H55.8681H55.8681H55.868H55.8679H55.8679H55.8678H55.8677H55.8677H55.8676H55.8675H55.8675H55.8674H55.8673H55.8673H55.8672H55.8672H55.8671H55.867H55.867H55.8669H55.8668H55.8668H55.8667H55.8666H55.8666H55.8665H55.8664H55.8664H55.8663H55.8662H55.8662H55.8661H55.8661H55.866H55.8659H55.8659H55.8658H55.8657H55.8657H55.8656H55.8655H55.8655H55.8654H55.8653H55.8653H55.8652H55.8652H55.8651H55.865H55.865H55.8649H55.8648H55.8648H55.8647H55.8646H55.8646H55.8645H55.8645H55.8644H55.8643H55.8643H55.8642H55.8641H55.8641H55.864H55.8639H55.8639H55.8638H55.8638H55.8637H55.8636H55.8636H55.8635H55.8634H55.8634H55.8633H55.8632H55.8632H55.8631H55.8631H55.863H55.8629H55.8629H55.8628H55.8627H55.8627H55.8626H55.8626H55.8625H55.8624H55.8624H55.8623H55.8622H55.8622H55.8621H55.8621H55.862H55.8619H55.8619H55.8618H55.8618H55.8617H55.8616H55.8616H55.8615H55.8614H55.8614H55.8613H55.8613H55.8612H55.8611H55.8611H55.861H55.861H55.8609H55.8608H55.8608H55.8607H55.8606H55.8606H55.8605H55.8605H55.8604H55.8603H55.8603H55.8602H55.8602H55.8601H55.86H55.86H55.8599H55.8599H55.8598H55.8597H55.8597H55.8596H55.8596H55.8595H55.8594H55.8594H55.8593H55.8593H55.8592H55.8591H55.8591H55.859H55.859H55.8589H55.8589H55.8588H55.8587H55.8587H55.8586H55.8586H55.8585H55.8584H55.8584H55.8583H55.8583H55.8582H55.8582H55.8581H55.858H55.858H55.8579H55.8579H55.8578H55.8578H55.8577H55.8576H55.8576H55.8575H55.8575H55.8574H55.8574H55.8573H55.8572H55.8572H55.8571H55.8571H55.857H55.857H55.8569H55.8568H55.8568H55.8567H55.8567H55.8566H55.8566H55.8565H55.8565H55.8564H55.8563H55.8563H55.8562H55.8562H55.8561H55.8561H55.856H55.856H55.8559H55.8559H55.8558H55.8557H55.8557H55.8556H55.8556H55.8555H55.8555H55.8554H55.8554H55.8553H55.8553H55.8552H55.8552H55.8551H55.855H55.855H55.8549H55.8549H55.8548H55.8548H55.8547H55.8547ZM34.6745 40.3617L34.3451 40.7798H33.8101H33.8101H33.81H33.81H33.8099H33.8099H33.8098H33.8097H33.8097H33.8096H33.8096H33.8095H33.8095H33.8094H33.8094H33.8093H33.8093H33.8092H33.8092H33.8091H33.809H33.809H33.8089H33.8089H33.8088H33.8088H33.8087H33.8087H33.8086H33.8086H33.8085H33.8084H33.8084H33.8083H33.8083H33.8082H33.8082H33.8081H33.8081H33.808H33.8079H33.8079H33.8078H33.8078H33.8077H33.8077H33.8076H33.8076H33.8075H33.8074H33.8074H33.8073H33.8073H33.8072H33.8072H33.8071H33.807H33.807H33.8069H33.8069H33.8068H33.8068H33.8067H33.8066H33.8066H33.8065H33.8065H33.8064H33.8063H33.8063H33.8062H33.8062H33.8061H33.8061H33.806H33.8059H33.8059H33.8058H33.8058H33.8057H33.8056H33.8056H33.8055H33.8055H33.8054H33.8053H33.8053H33.8052H33.8052H33.8051H33.805H33.805H33.8049H33.8049H33.8048H33.8047H33.8047H33.8046H33.8046H33.8045H33.8044H33.8044H33.8043H33.8043H33.8042H33.8041H33.8041H33.804H33.804H33.8039H33.8038H33.8038H33.8037H33.8037H33.8036H33.8035H33.8035H33.8034H33.8033H33.8033H33.8032H33.8032H33.8031H33.803H33.803H33.8029H33.8029H33.8028H33.8027H33.8027H33.8026H33.8025H33.8025H33.8024H33.8024H33.8023H33.8022H33.8022H33.8021H33.802H33.802H33.8019H33.8019H33.8018H33.8017H33.8017H33.8016H33.8015H33.8015H33.8014H33.8014H33.8013H33.8012H33.8012H33.8011H33.801H33.801H33.8009H33.8008H33.8008H33.8007H33.8007H33.8006H33.8005H33.8005H33.8004H33.8003H33.8003H33.8002H33.8001H33.8001H33.8H33.8H33.7999H33.7998H33.7998H33.7997H33.7996H33.7996H33.7995H33.7994H33.7994H33.7993H33.7993H33.7992H33.7991H33.7991H33.799H33.7989H33.7989H33.7988H33.7987H33.7987H33.7986H33.7985H33.7985H33.7984H33.7984H33.7983H33.7982H33.7982H33.7981H33.798H33.798H33.7979H33.7978H33.7978H33.7977H33.7976H33.7976H33.7975H33.7974H33.7974H33.7973H33.7973H33.7972H33.7971H33.7971H33.797H33.7969H33.7969H33.7968H33.7967H33.7967H33.7966H33.7965H33.7965H33.7964H33.7963H33.7963H33.7962H33.7961H33.7961H33.796H33.7959H33.7959H33.7958H33.7958H33.7957H33.7956H33.7956H33.7955H33.7954H33.7954H33.7953H33.7952H33.7952H33.7951H33.795H33.795H33.7949H33.7948H33.7948H33.7947H33.7946H33.7946H33.7945H33.7944H33.7944H33.7943H33.7943H33.7942H33.7941H33.7941H33.794H33.7939H33.7939H33.7938H33.7937H33.7937H33.7936H33.7935H33.7935H33.7934H33.7933H33.7933H33.7932H33.7931H33.7931H33.793H33.7929H33.7929H33.7928H33.7928H33.7927H33.7926H33.7926H33.7925H33.7924H33.7924H33.7923H33.7922H33.7922H33.7921H33.792H33.792H33.7919H33.7918H33.7918H33.7917H33.7916H33.7916H33.7915H33.7915H33.7914H33.7913H33.7913H33.7912H33.7911H33.7911H33.791H33.7909H33.7909H33.7908H33.7907H33.7907H33.7906H33.7905H33.7905H33.7904H33.7904H33.7903H33.7902H33.7902H33.7901H33.79H33.79H33.7899H33.7898H33.7898H33.7897H33.7896H33.7896H33.7895H33.7895H33.7894H33.7893H33.7893H33.7892H33.7891H33.7891H33.789H33.7889H33.7889H33.7888H33.7887H33.7887H33.7886H33.7886H33.7885H33.7884H33.7884H33.7883H33.7882H33.7882H33.7881H33.7881H33.788H33.7879H33.7879H33.7878H33.7877H33.7877H33.7876H33.7875H33.7875H33.7874H33.7874H33.7873H33.7872H33.7872H33.7871H33.787H33.787H33.7869H33.7869H33.7868H33.7867H33.7867H33.7866H33.7865H33.7865H33.7864H33.7864H33.7863H33.7862H33.7862H33.7861H33.786H33.786H33.7859H33.7859H33.7858H33.7857H33.7857H33.7856H33.7856H33.7855H33.7854H33.7854H33.7853H33.7852H33.7852H33.7851H33.7851H33.785H33.7849H33.7849H33.7848H33.7848H33.7847H33.7846H33.7846H33.7845H33.7845H33.7844H33.7843H33.7843H33.7842H33.7842H33.7841H33.784H33.784H33.7839H33.7839H33.7838H33.7837H33.7837H33.7836H33.7836H33.7835H33.7834H33.7834H33.7833H33.7833H33.7832H33.7831H33.7831H33.783H33.783H33.7829H33.7829H33.7828H33.7827H33.7827H33.7826H33.7826H33.7825H33.7824H33.7824H33.7823H33.7823H33.7822H33.7822H33.7821H33.782H33.782H33.7819H33.7819H33.7818H33.7818H33.7817H33.7816H33.7816H33.7815H33.7815H33.7814H33.7814H33.7813H33.7812H33.7812H33.7811H33.7811H33.781H33.781H33.7809H33.7809H33.7808H33.7807H33.7807H33.7806H33.7806H33.7805H33.7805H33.7804H33.7804H33.7803H33.7803H33.7802H33.7801H33.7801H33.78H33.78H33.7799H33.7799H33.7798H33.7798H33.7797H33.7797H33.7796H33.7795H33.7795H33.7794H33.7794H33.7793H33.7793H33.7792H33.7792H33.7791H33.7791H33.779H33.779H33.7789C33.1321 40.7798 32.6717 40.2925 32.6717 39.7664C32.6717 39.2403 33.1321 38.753 33.7789 38.753C34.4257 38.753 34.8861 39.2403 34.8861 39.7664C34.8861 39.984 34.8103 40.1892 34.6745 40.3617Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.35119\" />\r\n </svg></span>\r\n <div class=\"ms-3\">\r\n <div class=\"section-leftheading\">Exclude Zone</div>\r\n <div class=\"zone-subscription\">To add an Excluded Zone inside\r\n the store, please upgrade your plan and subscribe to\r\n TangoEye.</div>\r\n </div>\r\n </div>\r\n <div routerLink=\"/manage/settings/payment-subscription\"\r\n class=\"button btn btn-sm py-3 btn-primary d-flex\">\r\n <span>Upgrade plan</span><span><svg class=\"ms-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M11.3607 6.14453C11.7367 5.92578 11.9874 5.52891 11.9874 5.08203C11.9874 4.39141 11.397 3.83203 10.668 3.83203C9.93898 3.83203 9.34852 4.39141 9.34852 5.08203C9.34852 5.53203 9.59922 5.92578 9.97526 6.14453L8.08516 9.72578C7.78498 10.2945 7.00651 10.457 6.48203 10.0602L3.54297 7.83203C3.7079 7.62266 3.80686 7.36328 3.80686 7.08203C3.80686 6.39141 3.21641 5.83203 2.48741 5.83203C1.75842 5.83203 1.16797 6.39141 1.16797 7.08203C1.16797 7.77266 1.75842 8.33203 2.48741 8.33203C2.49401 8.33203 2.50391 8.33203 2.5105 8.33203L4.01797 16.1883C4.19939 17.1383 5.07352 17.832 6.09609 17.832H15.2398C16.2591 17.832 17.1332 17.1414 17.318 16.1883L18.8254 8.33203C18.832 8.33203 18.8419 8.33203 18.8485 8.33203C19.5775 8.33203 20.168 7.77266 20.168 7.08203C20.168 6.39141 19.5775 5.83203 18.8485 5.83203C18.1195 5.83203 17.5291 6.39141 17.5291 7.08203C17.5291 7.36328 17.628 7.62266 17.793 7.83203L14.8539 10.0602C14.3294 10.457 13.551 10.2945 13.2508 9.72578L11.3607 6.14453Z\"\r\n fill=\"white\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"separator mt-8\"></div> -->\r\n </div>\r\n\r\n <div *ngIf=\"['storeopenandclose'].includes(type)\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"sub mt-2\">Set Buffer Time</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeBufferTime($event)\"\r\n [checked]=\"configData.aiConfig.storeOpenClose.buffer.openTime > 0 || configData.aiConfig.storeOpenClose.buffer.closeTime > 0\">\r\n </span>\r\n </div>\r\n <div class=\"detectiontext mt-2\">When enabled, alerts will be paused during the\r\n buffer period</div>\r\n </div>\r\n\r\n <div *ngIf=\"checkBuffer || configData.aiConfig.storeOpenClose.buffer.openTime || configData.aiConfig.storeOpenClose.buffer.closeTime\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-3\">\r\n <div class=\"section1 me-3\"> If Store Open time exceeds by </div>\r\n <div><input class=\"form-control form-control-solid p-3 text-center w-45px\"\r\n [(ngModel)]=\"configData.aiConfig.storeOpenClose.buffer.openTime\"\r\n type=\"text\" (keypress)=\"omit_special_char($event)\"\r\n autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (blur)=\"validateLimit($event)\" /></div>\r\n <div class=\"section1 ms-3\"> minutes </div>\r\n </div>\r\n <div class=\"d-flex align-items-center my-3\">\r\n <div class=\"section1 me-3\"> If Store Close time exceeds by </div>\r\n <div><input class=\"form-control form-control-solid p-3 text-center w-45px\"\r\n [(ngModel)]=\"configData.aiConfig.storeOpenClose.buffer.closeTime\"\r\n type=\"text\" (keypress)=\"omit_special_char($event)\"\r\n autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (blur)=\"validateLimit($event)\" /></div>\r\n <div class=\"section1 ms-3\"> minutes </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <div *ngIf=\"['scrum','cleaning'].includes(type) && clientId!=='452'\">\r\n <h2 class=\"section-leftheading mt-8\">Automatic Task\r\n <span class=\"form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n [(ngModel)]=\"configData.aiConfig.autoTask\"\r\n class=\"form-check-input mt-1 cursor-pointer\">\r\n </span>\r\n </h2>\r\n\r\n <div class=\"row ng-star-inserted\">\r\n <div class=\"col-lg-3\">\r\n <div class=\"d-flex align-items-center my-4\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mx-4\"> Select Approver </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-9\">\r\n <lib-chip-dropdown [data]=\"alertUsers\" [selectedData]=\"configData.approver\"\r\n (selectedList)=\"updateAlert($event,'approve')\"></lib-chip-dropdown>\r\n </div>\r\n\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <!-- <div>\r\n <div class=\"d-flex\">\r\n <div><h2 class=\"section-leftheading mt-8\">{{type === 'mobileusagedetection' ? 'To be Acknowledged by' : 'Approver'}}</h2></div>\r\n <div><span class=\"form-check form-switch ms-3 mt-6\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\" class=\"form-check-input mt-3 cursor-pointer\">\r\n </span></div>\r\n </div>\r\n <span>By enabling, the users will be able to acknowledge the checklist</span>\r\n <div *ngIf=\"type === 'mobileusagedetection'\" class=\"col-md-12 mt-8\">\r\n <div class=\"row mt-4\">\r\n <div class=\"col-md-3 mt-2 \">\r\n <span class=\"mx-4 sub\">If usage exceeds</span>\r\n </div>\r\n <div class=\"col-lg-1\">\r\n <div class=\"fv-row mb-5 fv-plugins-icon-container flex flex-column\">\r\n \r\n <input class=\"form-control form-control-solid w-55px\"\r\n [(ngModel)]=\"configData?.checkListDetails.alert.usageExceeds\" type=\"text\"\r\n (keypress)=\"omit_special_char($event)\" autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (blur)=\"validateLimit($event)\" />\r\n <span class=\"text-danger usageerror\" *ngIf=\"errormsg\">Please enter event count\r\n between 15 to 999</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mt-2\">\r\n <span class=\"sub\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row ng-star-inserted mt-3\">\r\n <div class=\"col-lg-3\">\r\n <div class=\"d-flex align-items-center my-5\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mx-4\">To be approved by </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"col-lg-9\">\r\n <lib-chip-dropdown [data]=\"alertUsers\" [selectedData]=\"configData.checkListDetails.approver\"></lib-chip-dropdown>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"separator mt-8\"></div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Alert Configuration -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <h2 class=\"section-leftheading\">Alert Configuration\r\n <!-- <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\"> <path d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g>\r\n <defs> <clipPath id=\"clip0_1874_66195\"> <rect width=\"16\" height=\"16\" fill=\"white\" /> </clipPath> </defs>\r\n </svg>\r\n </span> -->\r\n </h2>\r\n <div>\r\n <div *ngIf=\"['halfshutter'].includes(type)\"\r\n class=\"d-flex align-items-center p-2 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Alerts will be sent, If the store shutter is left half opened during the\r\n configured open & close time\r\n </span>\r\n </div>\r\n </div>\r\n <div>\r\n <div *ngIf=\"['tvcompliance'].includes(type)\"\r\n class=\"d-flex align-items-center p-2 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Alerts will be sent, when there is a breach happened between the\r\n configured time\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-3\"\r\n *ngIf=\"['halfshutter'].includes(type)\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Allow Buffer Time</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changealerttimeconfig($event)\"\r\n [checked]=\"configData.aiConfig.alertConfig.allowBuffer.enabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, alerts will be\r\n paused during the buffer period</div>\r\n </div>\r\n <div class=\"row ng-star-inserted\" *ngIf=\"alerttimekeyconfig\">\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\"> Store shutter can remain\r\n half-open, </div>\r\n </div>\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.alertConfig.allowBuffer.afterOpenTime\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of alertTimeConfig\" [value]=\"time\">{{\r\n time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header me-3\"> minutes after store open\r\n time and </div>\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.alertConfig.allowBuffer.beforeCloseTime\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of alertTimeConfig\" [value]=\"time\">{{\r\n time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes before store close\r\n time </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"threshold-container p-4\" *ngIf=\"['tvcompliance'].includes(type)\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Breached Detection Threshold</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input class=\"form-check-input custom-switch\" type=\"checkbox\"\r\n role=\"switch\" [(ngModel)]=\"isThresholdEnabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, detections over the\r\n configured daily limit are flagged as a breach</div>\r\n </div>\r\n <div>\r\n\r\n\r\n <div class=\"d-flex align-items-center gap-3 mt-4\" *ngIf=\"isThresholdEnabled\">\r\n <span class=\"text-secondary-blue fw-medium\">Flag, as breached if detections\r\n exceeds</span>\r\n\r\n <select class=\"form-select custom-select\" [(ngModel)]=\"detectionThreshold\"\r\n [disabled]=\"!isThresholdEnabled\">\r\n <option *ngFor=\"let opt of thresholdOptions\" [value]=\"opt\">{{ opt }}\r\n </option>\r\n </select>\r\n\r\n <span class=\"text-secondary-blue fw-medium\">in a day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Push Notifications -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Push Notifications</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n [checked]=\"configData.aiConfig.alertConfig.alertSendTo.enabled\"\r\n (change)=\"changenotificationconfig($event)\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Send notifications to Mobile, Web, or both -\r\n Configure as per your needs</div>\r\n </div>\r\n <div *ngIf=\"notificationkeyconfig\" class=\"mt-8\">\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Mobile Notifications</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-4\">\r\n <div class=\"col-lg-1\"> Send to </div>\r\n <div class=\"col-lg-11 fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.alertConfig.alertSendTo.mobile\"\r\n (selectedList)=\"updateNotificationAlert($event,'user','mobile')\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2 col-6\">Web Notifications</div>\r\n <div class=\"schedule-config-header mt-2 d-flex justify-content-end col-6\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"14\"\r\n viewBox=\"0 0 16 14\" fill=\"none\">\r\n <path\r\n d=\"M15.3346 1.66509V5.66509M15.3346 5.66509H11.3346M15.3346 5.66509L12.2413 2.75842C11.5248 2.04157 10.6384 1.51789 9.66476 1.23627C8.69114 0.95465 7.66204 0.924257 6.67349 1.14793C5.68495 1.3716 4.76917 1.84205 4.01161 2.51537C3.25406 3.18869 2.67941 4.04295 2.3413 4.99842M0.667969 12.3318V8.33176M0.667969 8.33176H4.66797M0.667969 8.33176L3.7613 11.2384C4.4778 11.9553 5.36422 12.479 6.33784 12.7606C7.31147 13.0422 8.34056 13.0726 9.32911 12.8489C10.3177 12.6252 11.2334 12.1548 11.991 11.4815C12.7485 10.8082 13.3232 9.9539 13.6613 8.99842\"\r\n stroke=\"#475467\" stroke-width=\"1.25\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"schedule-config-description mt-2 ms-3\"> Sync users from Mobile\r\n </span>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-1 cursor-pointer\"\r\n (change)=\"changesyncMobileWebconfig($event)\"\r\n [checked]=\"configData.aiConfig.alertConfig.alertSendTo.syncMobileWeb\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-4\">\r\n <div class=\"col-lg-1\"> Send to </div>\r\n <div class=\"col-lg-11 fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.alertConfig.alertSendTo.web\"\r\n (selectedList)=\"updateNotificationAlert($event,'user','web')\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Auto-Assign Tasks -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Auto-Assign Tasks</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeautotaskconfig($event)\"\r\n [checked]=\"configData.aiConfig.autoTaskConfig.enabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">On breach, tasks are auto-created and assigned\r\n to users</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-8\" *ngIf=\"autotaskkeyconfig\">\r\n <div class=\"col-lg-2\"> Select Approver </div>\r\n <div class=\"col-lg-10 fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.autoTaskConfig.approver\"\r\n (selectedList)=\"updateAutoTask($event,'user')\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Export data -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Export data</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeexportconfig($event)\"\r\n [checked]=\"configData.aiConfig.exportConfig.enabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Export your data in the format you need</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-8\" *ngIf=\"exportkeyconfig\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"mt-5 mb-5 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'ALL'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('ALL')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n All\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'CSV'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('CSV')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n CSV\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'PDF'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('PDF')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n PDF\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'PPT'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('PPT')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n PPT\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'ZIP'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('ZIP')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n ZIP\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"['custom'].includes(type)\" class=\"card-body bg-white mt-3 rounded-4 px-7\">\r\n <div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div>\r\n <h2 class=\"section-leftheading \">Assign<span class=\"mx-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\">\r\n <path\r\n d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1874_66195\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></h2>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ms-5 mt-3 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input selected-radio me-3 cursor-pointer\" type=\"radio\"\r\n name=\"stores\" [checked]=\"storeCoverage\" (click)=\"selectRadio('store','change')\">\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">Assign Stores and Clusters</label>\r\n </div>\r\n <div class=\"form-check d-flex align-items-center ms-5\">\r\n <input class=\"form-check-input selected-radio me-3 cursor-pointer\" type=\"radio\"\r\n name=\"users\" [checked]=\"userCoverage\" (click)=\"selectRadio('user','change')\">\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">Assign Users and Teams</label>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"storeCoverage && assignType ==='store'\"\r\n class=\"mt-5 ms-5 storeAssign sopTable d-flex\">\r\n <div>\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\" name=\"flag\"\r\n [(ngModel)]=\"configData.checkListDetails.enableNewDeployedStore\">\r\n </div>\r\n <div> <span class=\"ms-2 lineHeight\">Auto assign to newly deployed stores</span> </div>\r\n </div>\r\n\r\n <div class=\"d-flex ms-5 align-items-end justify-content-between\">\r\n <div class=\"d-flex overflow-auto h-45px w-75 mt-5\">\r\n <ul *ngIf=\"storeCoverage\"\r\n class=\"nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap\">\r\n <li (click)=\"selectedTab('store')\" class=\"nav-item cursor-pointer h-100\"><span\r\n [ngClass]=\"assignType ==='store' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Stores</span>\r\n </li>\r\n <li (click)=\"selectedTab('cluster')\" class=\"nav-item cursor-pointer h-100\"><a\r\n [ngClass]=\"assignType ==='cluster' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Clusters</a></li>\r\n </ul>\r\n <ul *ngIf=\"userCoverage\"\r\n class=\"nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap\">\r\n <li (click)=\"selectedTab('user')\" class=\"nav-item cursor-pointer h-100\"><a\r\n [ngClass]=\"assignType ==='user' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Users</a>\r\n </li>\r\n <li (click)=\"selectedTab('team')\" class=\"nav-item cursor-pointer h-100\"><a\r\n [ngClass]=\"assignType ==='team' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Teams</a></li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"!['cluster','team'].includes(assignType)\">\r\n <a *ngIf=\"storeCoverage\" (click)=\"addStoreComponent()\" type=\"button\"\r\n class=\"btn btn-outline px-4 ng-star-inserted mt-8\" style=\"white-space: nowrap;\"\r\n tabindex=\"0\"><span class=\"svg-icon svg-icon-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"create1\">Assign Store</span></a>\r\n <a *ngIf=\"userCoverage\" (click)=\"addStoreComponent()\" type=\"button\"\r\n class=\"btn btn-outline px-4 ng-star-inserted mt-8\" style=\"white-space: nowrap;\"\r\n tabindex=\"0\"><span class=\"svg-icon svg-icon-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"create1\">Assign User</span></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-100 ms-5\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">Selected <span>{{assignType | titlecase}}s</span> </div>\r\n </div>\r\n </div>\r\n <!-- *ngIf=\"!['cluster','team'].includes(assignType)\" -->\r\n <div class=\"w-100 pe-5\">\r\n <lib-multi-chip-dropdown *ngIf=\"storeList\" [items]=\"storeList\" [multi]=\"true\"\r\n [searchField]=\"['storeName','clusterName','storeId','userName','teamName']\"\r\n [searchKey]=\"searchKey\" [idField]=\"'_id'\" (selected)=\"updateAssign($event)\"\r\n (removed)=\"removedChip($event)\"\r\n [selectedValues]=\"configData?.checkListDetails?.assign\"></lib-multi-chip-dropdown>\r\n </div>\r\n <!-- <div *ngIf=\"['cluster','team'].includes(assignType)\" class=\"w-100 pe-5\">\r\n <lib-multi-chip-dropdown *ngIf=\"storeList\" [items]=\"storeList\" [multi]=\"true\" [searchField]=\"['storeName','clusterName','storeId','userName','teamName']\" [searchKey]=\"searchKey\" [idField]=\"'_id'\"\r\n (selected)=\"updateAssign($event)\" (removed)=\"removedChip($event)\" [selectedValues]=\"configData?.checkListDetails?.assign\"></lib-multi-chip-dropdown>\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"\" *ngIf=\"tableData.length || tableFilter.length || !showImage\">\r\n\r\n <div *ngIf=\"!tableLoading && tableArray?.length\"\r\n class=\"card-body px-0 mt-0 pt-0 pb-0 mx-4 mb-5\">\r\n <div class=\" w-100\">\r\n <div class=\"table-header mt-5 d-flex align-items-center justify-content-between\">\r\n <div class=\"table-title\">Selected <span>{{assignType | titlecase}}s</span> List\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-start\">\r\n <div class=\"me-3\">\r\n <input type=\"text\" data-kt-subscription-table-filter=\"search\"\r\n (change)=\"searchTableData()\" [(ngModel)]=\"tableFilter\"\r\n class=\"form-control form-control-solid w-200px ps-5 mx-1 me-4\"\r\n autocomplete=\"off\" autocapitalize=\"none\" spellcheck=\"false\"\r\n style=\"text-transform: none\" placeholder=\"Search...\">\r\n </div>\r\n\r\n <div *ngIf=\"!['cluster','team'].includes(assignType)\"\r\n class=\"position-relative w-100 mt-5 mb-5\">\r\n <button type=\"button\"\r\n class=\"btn py-3 btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\">\r\n <span class=\"me-3 cursor-pointer\" #upload\r\n (click)=\"file.click()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <span class=\"template-dropdown bg-white ms-3\">BulkUpload\r\n </span>\r\n </span>\r\n <span><input style=\"display: none;\" type=\"file\" #file\r\n id=\"kt_account_team_size_select_1\"\r\n (change)=\"onFileUpload($event)\" /></span>\r\n <span class=\"subtitle mx-3 me-2\"> | </span>\r\n <span class=\"cursor-pointer\" (click)=\"openDropdown($event)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 9L12 15L18 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n\r\n <div *ngIf=\"dropDown\"\r\n class=\"card template-dropdown h-40px w-100 position-absolute rounded-3 z-1 top-50px end-0\">\r\n <ul class=\"list-unstyled mb-0 w-auto cursor-pointer\"\r\n (click)=\"bulkuploadModel()\">\r\n <li class=\"px-5 fw-semibold cursor-pointer py-2\">Download\r\n Template</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['cluster','team'].includes(assignType)\">\r\n <button type=\"button\"\r\n class=\"btn py-3 btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\"\r\n (click)=\"downloadTemplateV2()\">\r\n <span class=\"me-3 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M8.125 13.125H16.3562L14.7438 14.7438L15.625 15.625L18.75 12.5L15.625 9.375L14.7438 10.2562L16.3562 11.875H8.125V13.125Z\"\r\n fill=\"black\" />\r\n <path\r\n d=\"M13.75 8.75001V6.25001C13.7505 6.16776 13.7347 6.08622 13.7036 6.01007C13.6725 5.93392 13.6267 5.86466 13.5688 5.80626L9.19375 1.43126C9.13535 1.37333 9.06609 1.32751 8.98994 1.2964C8.91379 1.2653 8.83225 1.24953 8.75 1.25001H2.5C2.16848 1.25001 1.85054 1.38171 1.61612 1.61613C1.3817 1.85055 1.25 2.16849 1.25 2.50001V17.5C1.25 17.8315 1.3817 18.1495 1.61612 18.3839C1.85054 18.6183 2.16848 18.75 2.5 18.75H12.5C12.8315 18.75 13.1495 18.6183 13.3839 18.3839C13.6183 18.1495 13.75 17.8315 13.75 17.5V16.25H12.5V17.5H2.5V2.50001H7.5V6.25001C7.5 6.58153 7.6317 6.89947 7.86612 7.13389C8.10054 7.36831 8.41848 7.50001 8.75 7.50001H12.5V8.75001H13.75ZM8.75 6.25001V2.75626L12.2438 6.25001H8.75Z\"\r\n fill=\"black\" />\r\n </svg> <span class=\"template-dropdown bg-white ms-3\">Export\r\n </span>\r\n </span>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row mt-2\">\r\n <div class=\"col-lg-12\" *ngIf=\"!tableData?.length && !tableFilter && !showImage\">\r\n <div\r\n class=\"card-body my-8 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for the <span>{{assignType}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"pt-0 mx-4\" *ngIf=\"tableArray.length\">\r\n <div class=\"sopTable table-responsive overflow-hidden\">\r\n <div *ngIf=\"tableLoading\"\r\n 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>\r\n <div class=\"col-lg-12\" *ngIf=\"tableFilter && !tableData?.length\">\r\n <div\r\n class=\"card-body my-8 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for the\r\n <span>{{assignType}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body-sop\" *ngIf=\"tableData.length && !tableLoading\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"storeCoverage\" class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <span\r\n *ngIf=\"sortColumn === 'storeName' && sortBy !== 1 || sortColumn !== 'storeName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'storeName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userName')\">\r\n SPOC Name\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== 1 || sortColumn !== 'userName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">\r\n SPOC Email\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== 1 || sortColumn !== 'userEmail' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th *ngIf=\"assignType ==='cluster'\" class=\"text-align-left\">\r\n <div class=\"cursor-pointer\"\r\n (click)=\"sortData('clusterName')\">\r\n Cluster Name\r\n <span\r\n *ngIf=\"sortColumn === 'clusterName' && sortBy !== 1 || sortColumn !== 'clusterName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'clusterName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of tableData;let i=index\">\r\n <td>{{data.storeName}}\r\n </td>\r\n <td>{{data.userName ? data.userName : '--'}}</td>\r\n <td>{{data.userEmail ? data.userEmail : '--'}}</td>\r\n <td *ngIf=\"assignType === 'cluster'\">{{data.clusterName ?\r\n data.clusterName : '--'}}</td>\r\n </tbody>\r\n </table>\r\n <table *ngIf=\"userCoverage\" class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userName')\">\r\n User Name\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== 1 || sortColumn !== 'userName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">\r\n User Email\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== 1 || sortColumn !== 'userEmail' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th *ngIf=\"assignType ==='team'\" class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('teamName')\">\r\n Teams Name\r\n <span\r\n *ngIf=\"sortColumn === 'teamName' && sortBy !== 1 || sortColumn !== 'teamName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'teamName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of tableData;let i=index\">\r\n <td>\r\n <span\r\n class=\"form-check-label mx-4 line-height\">{{data.userName}}</span>\r\n </td>\r\n <td>{{data.userEmail ? data.userEmail : '--'}}</td>\r\n <td *ngIf=\"assignType ==='team'\">{{data.teamName ? data.teamName\r\n : '--'}}</td>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"size\" [currentPage]=\"currentValue\"\r\n [totalItems]=\"recordsTotal\" [paginationSizes]=\"paginationSize\"\r\n [pageSize]=\"size\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n <br>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"tableLoading1 && showImage\"\r\n 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>\r\n <div>\r\n <div *ngIf=\"!tableArray.length && !tableLoading1 && !tableFilter.length && showImage && !configData.checkListDetails.assignedUsers && !['cluster','team'].includes(assignType)\"\r\n class=\"row mb-6\">\r\n <div class=\"col-lg-12 assignpadding mb-10 mt-10\">\r\n <div class=\"row\">\r\n <div class=\"hr w-100 border border-1 position-relative\">\r\n <div\r\n class=\"position-absolute template-dropdown orposition bg-white w-100px\">\r\n or</div>\r\n </div>\r\n <div class=\"uploadpadding mt-10\">\r\n <ul\r\n class=\"subtext list-unstyled d-flex flex-column align-items-center mx-4\">\r\n <li>Use the template to upload multiple <span\r\n *ngIf=\"storeCoverage\">stores</span> <span\r\n *ngIf=\"userCoverage\">users</span> at once.</li>\r\n <li> Download the template here - <span (click)=\"downloadTemplateV2()\"\r\n class=\"cursor-pointer\"><span class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"text-primary\">Download\r\n Template</span></span></li>\r\n <li> Add your data to the Template File</li>\r\n </ul>\r\n </div>\r\n <div class=\"w-100 border border-2 text-center border-dashed rounded-3 border-primary p-5\"\r\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\" (click)=\"file.click()\">\r\n <div class=\"\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"46\"\r\n viewBox=\"0 0 46 46\" fill=\"none\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_7979_5202)\">\r\n <path\r\n d=\"M26.3335 26.3332L23.0002 22.9999M23.0002 22.9999L19.6669 26.3332M23.0002 22.9999V30.4999M29.9919 28.3249C30.8047 27.8818 31.4467 27.1806 31.8168 26.3321C32.1868 25.4835 32.2637 24.5359 32.0354 23.6388C31.807 22.7417 31.2865 21.9462 30.5558 21.3778C29.8251 20.8094 28.9259 20.5005 28.0002 20.4999H26.9502C26.698 19.5243 26.2278 18.6185 25.5752 17.8507C24.9225 17.0829 24.1042 16.4731 23.182 16.0671C22.2597 15.661 21.2573 15.4694 20.2503 15.5065C19.2433 15.5436 18.2578 15.8085 17.3679 16.2813C16.4779 16.7541 15.7068 17.4225 15.1124 18.2362C14.518 19.05 14.1158 19.9879 13.936 20.9794C13.7563 21.9709 13.8036 22.9903 14.0746 23.961C14.3455 24.9316 14.8329 25.8281 15.5002 26.5832\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7979_5202\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></div>\r\n <div class=\"storetext cursor-pointer mb-2 fw-bold\"><span\r\n class=\"text-primary text-decoration-underline\">Click To\r\n Upload</span>\r\n or drag and drop\r\n </div>\r\n <div class=\"headeralign fw-400\">the data added template file for processing.\r\n </div>\r\n <input style=\"visibility: hidden;\" type=\"file\" #file\r\n id=\"kt_account_team_size_select_1\" (change)=\"onFileUpload($event)\" />\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"!tableArray.length && !tableLoading1 && !tableFilter.length && showImage && !configData.checkListDetails.assignedUsers && ['cluster','team'].includes(assignType)\"\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div\r\n class=\"card-body my-8 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for the <span>{{assignType}}</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"type !== 'custom'\" class=\"\">\r\n <lib-assign [configData]=\"configData\" [uploadData]=\"uploadData\" [configureType]=\"configureType\"\r\n (dataToParent)=\"handleDataFromChild($event)\"></lib-assign>\r\n </div>\r\n\r\n <!-- Advanced Configuration -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type) && userType === 'tango'\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header\">Advanced Configuration</div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header\">Data Processing</div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When you want to process this\r\n checklist report</div>\r\n <div class=\"d-flex align-items-center me-6\">\r\n <div class=\"col-sm-12 cursor-pointer border border-2 rounded-4 px-3 mb-2 mt-2 ms-4 me-4\"\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'live' ? 'advancedConfigureAcite': ''\">\r\n <div class=\"d-flex h-70px rounded-3 p-3 mt-2\">\r\n <span class=\"mt-1\">\r\n <input id=\"dataprocessing\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"dataprocessing\" value=\"live\"\r\n (change)=\"changeDataprocessing('live')\"\r\n [(ngModel)]=\"selectedDataprocessing\">\r\n </span>\r\n <span class=\"\">\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'live' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Live Notifications</span>\r\n <span class=\"schedule-config-description mt-2\">Triggered\r\n immediately whenever a detection or breach\r\n occurs</span>\r\n </div>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center me-6\">\r\n <div class=\"col-sm-12 cursor-pointer border border-2 rounded-4 px-3 mb-2 mt-2 ms-4 me-4\"\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'eod' ? 'advancedConfigureAcite': ''\">\r\n <div class=\"d-flex h-70px rounded-3 p-3 mt-2\">\r\n <span class=\"mt-1\">\r\n <input id=\"dataprocessing\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"dataprocessing\" value=\"eod\"\r\n (change)=\"changeDataprocessing('eod')\"\r\n [(ngModel)]=\"selectedDataprocessing\">\r\n </span>\r\n <span class=\"\">\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'eod' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Daily (EOD)</span>\r\n <span class=\"schedule-config-description mt-2\">Full\r\n detection/breach history delivered the next day for\r\n smarter decisions</span>\r\n </div>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Detected Status</div>\r\n <div class=\"d-flex\">\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changedetectedstatusconfig($event)\"\r\n [checked]=\"configData.aiConfig.advancedConfig.detectedStatus.enabled\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Choose which detections to\r\n display on dashboard</div>\r\n <div class=\"d-flex align-items-center\" *ngIf=\"detectedstatuskeyconfig\">\r\n <div class=\"mt-5 mb-5 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\"\r\n type=\"checkbox\" [value]=\"'detected'\"\r\n (change)=\"changeDetectionStatus($event)\"\r\n [checked]=\"selectedDetectionStatus.includes('detected')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold ms-2\">\r\n Breached Detections\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\"\r\n type=\"checkbox\" [value]=\"'nondetected'\"\r\n (change)=\"changeDetectionStatus($event)\"\r\n [checked]=\"selectedDetectionStatus.includes('nondetected')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold ms-2\">\r\n Non Breached Detections\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Audit Required</div>\r\n <div class=\"d-flex\">\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeauditrequiredconfig($event)\"\r\n [checked]=\"configData.aiConfig.advancedConfig.auditConfig.enabled\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Is an audit required for this\r\n checklist</div>\r\n\r\n <div class=\"border border-2 rounded-4 px-3 mb-4 mt-4\"\r\n *ngIf=\"auditkeyconfig\">\r\n <div class=\"schedule-config-header mt-4\">Input Source File Type</div>\r\n <div class=\"schedule-config-description mt-2\">Is an audit required for\r\n this checklist</div>\r\n <div class=\"ms-8 mt-5 mb-5 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input id=\"image\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"stores\" value=\"image\"\r\n (change)=\"changeInputSourceFileRadio('image')\"\r\n [(ngModel)]=\"selectedSource\">\r\n <label for=\"image\"\r\n class=\"uploadtext cursor-pointer fw-semibold\">Image</label>\r\n </div>\r\n <div class=\"form-check d-flex align-items-center ms-5\">\r\n <input id=\"video\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"stores\" value=\"video\"\r\n (change)=\"changeInputSourceFileRadio('video')\"\r\n [(ngModel)]=\"selectedSource\">\r\n <label for=\"video\"\r\n class=\"uploadtext cursor-pointer fw-semibold\">Video</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n<ng-template #bulkupload let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-5\">\r\n <div class=\"card-title mt-3\">\r\n <div class=\"bg-light-primary rounded-5 w-40px h-40px d-flex justify-content-center align-items-center\">\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=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div> <span class=\"config-heading fw-semibold ms-5 w-auto\">Bulk Upload</span>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"flex-column\">\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">Step 1 - <a\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"downloadTemplateV2()\">Download the\r\n template here</a></div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">Step2 - Add your data to the Template File with\r\n existing <span *ngIf=\"storeCoverage\">store</span> <span *ngIf=\"userCoverage\">user</span> data</div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">Step3 - Upload it below for processing</div>\r\n\r\n <div class=\"fw-bold storeAssign mt-10\">**Note : On upload, all the existing data will be replaced</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"model.close()\">Cancel</button>\r\n <button class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"file1.click()\">Upload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Assign <span\r\n *ngIf=\"storeCoverage\">Stores</span> <span *ngIf=\"userCoverage\">Users</span></span></div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total <span *ngIf=\"storeCoverage\">Stores</span> <span\r\n *ngIf=\"userCoverage\">Users</span></div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">\r\n {{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div *ngIf=\"!showStore&&!showTeam&&!showCluster&&!showUser&&!showInactive\">You're about to assign\r\n {{getStoreCounts(excelData)}} <span *ngIf=\"storeCoverage\">stores</span><span\r\n *ngIf=\"userCoverage\">users</span> to the checklist. Are you sure want to proceed?</div>\r\n <div *ngIf=\"storeCoverage && showStore\" class=\"mt-3\">Store <span\r\n *ngFor=\"let store of validatedStore;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a routerLink=\"/manage/stores\" [queryParams]=\"{tyoe: 'stores'}\"\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"closeactivepopup()\">Onboard Stores</a>\r\n </div>\r\n <div *ngIf=\"userCoverage && showUser\" class=\"mt-3\">User <span\r\n *ngFor=\"let store of validatedUser;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a class=\"text-decoration-underline cursor-pointer\"\r\n (click)=\"closeactivepopup();confirmUserpopup()\">Onboard Users</a></div>\r\n <div *ngIf=\"userCoverage && showTeam\" class=\"mt-3\">Team <span\r\n *ngFor=\"let store of validatedTeam;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a routerLink=\"/manage/users/client\"\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"closeactivepopup()\">Create Team</a>\r\n </div>\r\n <div *ngIf=\"storeCoverage && showCluster\" class=\"mt-3\">user <span\r\n *ngFor=\"let store of validatedCluster;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a routerLink=\"/manage/stores\" class=\"text-decoration-underline cursor-pointer\"\r\n [queryParams]=\"{tyoe: 'cluster'}\" (click)=\"closeactivepopup()\">Create Cluster</a></div>\r\n <div *ngIf=\"storeCoverage && showUser\" class=\"mt-3\">User <span\r\n *ngFor=\"let store of validatedUser;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a class=\"text-decoration-underline cursor-pointer\"\r\n (click)=\"closeactivepopup();confirmUserpopup()\">Onboard Users</a></div>\r\n <div *ngIf=\"storeCoverage && showInactive\" class=\"mt-3\">Store <span\r\n *ngFor=\"let store of inactiveStores;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for is inactive, <a routerLink=\"/manage/stores\" [queryParams]=\"{tyoe: 'stores'}\"\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"closeactivepopup()\">Onboard Stores</a>\r\n </div>\r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct and complete layout information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\"\r\n [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError&&!showStore&&!showCluster&&!showUser&&!showTeam&&!showInactive\"\r\n class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n <button *ngIf=\"excelError||showStore||showCluster||showUser||showTeam || showInactive\"\r\n class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"Reupload();\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event,'reupload')\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmUser let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-5\">\r\n <div class=\"card-title d-flex flex-column mt-3\">\r\n <div class=\"bg-light-primary rounded-5 w-40px h-40px d-flex justify-content-center align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEF0C7\" />\r\n <path\r\n d=\"M27.9998 24.0012V28.0012M27.9998 32.0012H28.0098M26.2898 18.8612L17.8198 33.0012C17.6451 33.3036 17.5527 33.6465 17.5518 33.9957C17.5508 34.3449 17.6413 34.6883 17.8142 34.9917C17.9871 35.2951 18.2365 35.5479 18.5375 35.725C18.8385 35.9021 19.1806 35.9973 19.5298 36.0012H36.4698C36.819 35.9973 37.1611 35.9021 37.4621 35.725C37.7631 35.5479 38.0124 35.2951 38.1854 34.9917C38.3583 34.6883 38.4488 34.3449 38.4478 33.9957C38.4468 33.6465 38.3544 33.3036 38.1798 33.0012L29.7098 18.8612C29.5315 18.5673 29.2805 18.3243 28.981 18.1557C28.6814 17.987 28.3435 17.8984 27.9998 17.8984C27.656 17.8984 27.3181 17.987 27.0186 18.1557C26.7191 18.3243 26.468 18.5673 26.2898 18.8612Z\"\r\n stroke=\"#DC6803\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FFFAEB\" stroke-width=\"8\" />\r\n </svg>\r\n </div><br>\r\n <div class=\"config-heading fw-semibold w-auto\">New User found in uploaded file</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"flex-column\">\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">This CSV contains a new User. Add new User in the\r\n User Management under Manage menu.</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <!-- <button class=\"btn btn-md btn-default btn-outline\" routerLink=\"/manage/users/client\" (click)=\"closeactivepopup()\">Skip New Entries</button> -->\r\n <button class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"model.close('confirm')\">Invite\r\n Selected</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".card{border-radius:16px}.section1{color:var(--Black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.row>*{padding-right:0}.storeAssign a:hover,.table-header a:hover{text-decoration:underline!important}.checkconfigcont .card{height:100%}.checkconfigcont .section{display:inline-block;width:160px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important}.checkconfigcont .radio{font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .mat-radio-button.mat-primary .mat-radio-inner-circle,.checkconfigcont .mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),.checkconfigcont .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple,.checkconfigcont .mat-radio-button.mat-primary:active .mat-radio-persistent-ripple{background-color:#00a3ff}.checkconfigcont .section-leftheading1{overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checkconfigcont .section{color:var(--Black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .scedule-text{overflow:hidden;color:var(--Black, #101828);text-overflow:ellipsis;font-size:12px;font-weight:400;line-height:18px}.checkconfigcont .svg-icon svg{height:1.25em;width:1.25em}.checkconfigcont .section-leftheading{overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:20px;font-style:normal;font-weight:600;line-height:28px}.checkconfigcont .sub{color:var(--gray-700, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .subopen{color:var(--black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .symbol-circle{margin-left:-6px}.checkconfigcont .checklistlabel{padding:4px 12px;justify-content:center;align-items:center;border-radius:16px;background:var(--gray-100, #F2F4F7)}.checkconfigcont .subtitle{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0em;text-align:left;color:#667085}.checkconfigcont .template-dropdown{background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.checkconfigcont .form-control.form-control-solid{display:flex;padding:11px 14px;align-items:center;gap:8px;align-self:stretch;border-radius:8px;border:1px solid var(--gray-500, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d}.checkconfigcont .searchplaceholder{font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.checkconfigcont .custom-appbox{border-radius:12px}.checkconfigcont input::placeholder{color:#667085!important;opacity:1}.checkconfigcont .checklisttext{color:var(--gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.checkconfigcont .separator{height:1px;align-self:stretch}.checkconfigcont ::ng-deep .mat-form-field-infix{color:#101828;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;width:500px!important;line-height:24px}.checkconfigcont ::ng-deep .storechip{color:#101828;font-size:16px;width:100%;font-family:Inter;font-weight:400;width:780px!important;line-height:24px}.checkconfigcont ::ng-deep .mat-chip{font-family:Inter;font-style:normal;font-weight:500;font-size:14px;line-height:17px;text-align:center;color:#5e6278!important}.checkconfigcont ::ng-deep .mat-chip-list-wrapper .mat-standard-chip{margin:4px}.checkconfigcont ::ng-deep .matChip-store{height:100px;display:block;overflow-y:scroll;overflow-x:hidden}.checkconfigcont ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.checkconfigcont ::ng-deep .mat-form-field-underline{display:none}.checkconfigcont ::ng-deep .mat-form-field-ripple{display:none}.checkconfigcont .subtext{color:var(--gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px;align-items:center;gap:8px;align-self:stretch}.checkconfigcont .zone-subscription{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:24px}.checkconfigcont .upload{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d;display:flex;padding:10px 18px;justify-content:center;align-items:center;gap:8px;flex:1 0 0}.checkconfigcont .upload:hover{background:#f3f8fd!important;border:1px solid var(--gray-300, #D0D5DD)!important}.checkconfigcont .uploadtext{color:var(--gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .savedraft{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);padding:10px 18px;justify-content:center;align-items:center;gap:8px;box-shadow:0 1px 2px #1018280d}.checkconfigcont .savedraft:hover{background:#f3f8fd!important;border:1px solid var(--gray-300, #D0D5DD)!important}.checkconfigcont .savedrafttext{color:var(--gray-700, #344054);font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .configureAcite{border:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-50, #EAF8FF)}.checkconfigcont .text-primary{color:var(--primary-700, #009BF3)!important}.checkconfigcont .border-primary{border:1px dashed var(--Primary-500, #33B5FF)!important;background:var(--Primary-25, #F6FCFF)!important}.checkconfigcont .download{border-radius:8px;border:1px solid var(--primary-50, #EAF8FF);background:var(--primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;display:flex;padding:10px 18px;justify-content:center;align-items:center;gap:8px;flex:1 0 0;color:var(--primary-700, #009BF3);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .svg-icon1:hover:not(.svg-active){color:#fff}.checkconfigcont .btn-outline{border:1px solid lightgrey!important;padding:calc(.75rem + 1px) calc(1.5rem + 1px)}.checkconfigcont .footertext{color:#000;font-family:Inter;font-size:14px;font-weight:500;line-height:20px;text-align:right}.checkconfigcont .footer1{text-align:end}.checkconfigcont ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#009ef7!important}.checkconfigcont ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#009ef7!important}.checkconfigcont ::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:#1da1f21a;color:#009ef7}.checkconfigcont ::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#009ef7}.checkconfigcont ::ng-deep th.mat-header-cell:first-of-type,.checkconfigcont ::ng-deep td.mat-cell:first-of-type,.checkconfigcont ::ng-deep td.mat-footer-cell:first-of-type{padding-right:none}.checkconfigcont ::ng-deep .sopTable input{border:none;padding:0!important}.checkconfigcont ::ng-deep .sopTable input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkconfigcont ::ng-deep .sopTable input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}.checkconfigcont ::ng-deep .sopTable input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.checkconfigcont ::ng-deep .card-body-sop{border:1px solid var(--gray-200, #EAECF0);background:var(--white, #FCFCFD);border-radius:6px}.checkconfigcont .schedule{color:var(--gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .user{color:var(--gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .dropdown{margin-left:-9%}.checkconfigcont .pillstyle{color:var(--gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .leftcard{position:relative}.checkconfigcont .editques{position:absolute!important;left:12%;transform:translate(-5%);bottom:30px}.checkconfigcont .orposition{top:0;left:50%;transform:translate(-50%,-50%);text-align:center}.checkconfigcont .questiontype{color:var(--primary-700, #009BF3);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;outline:none!important;background-color:#f1faff!important}.checkconfigcont .btn-left{display:inline-block;width:100%;font-size:16px;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis!important}.checkconfigcont .nav{display:flex;align-items:center;gap:16px;flex:1 0 0;align-self:stretch;--bs-nav-link-color: none}.checkconfigcont .form-control.form-control-solid,.checkconfigcont .form-select.form-select-solid{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d}.checkconfigcont .checklistturnoff{border-radius:8px;border:1px solid var(--gray-200, #EAECF0);background:var(--white, #FFF);display:flex;padding:16px;align-items:flex-start;align-self:stretch}.checkconfigcont .btn.btn-outline.btn-outline-dashed.btn-outline-default:hover:not(.btn-active){border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d;display:flex;padding:10px 18px;justify-content:center;align-items:center;gap:8px;flex:1 0 0}.checkconfigcont .sopTable input{border:none;padding:0!important}.checkconfigcont .sopTable input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkconfigcont .sopTable input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}.checkconfigcont .sopTable input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.checkconfigcont .option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px}.checkconfigcont .card hr{width:-webkit-fill-available}.checkconfigcont .imgnodata1{width:216px;height:245px}.checkconfigcont .editablecontent{display:inline-block;width:230px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important}.checkconfigcont #navfont{font-size:1.15rem!important}.checkconfigcont .imgdata{width:50%;height:50%}.checkconfigcont .imgnodata{width:312px;height:312px;margin-top:-4%}.checkconfigcont .card .card-header{display:flex;justify-content:space-between;align-items:stretch;flex-wrap:wrap;min-height:70px;padding:0 .25rem;background-color:transparent;border-bottom:none}.checkconfigcont ::ng-deep .mat-select{background:#f5f8fa;border-radius:8px}.checkconfigcont ::ng-deep .mat-select-value{height:42px}.checkconfigcont ::ng-deep .multiselect-dropdown .dropdown-btn{border:none!important}.checkconfigcont ::ng-deep .multiselect-dropdown .dropdown-list{border:none;box-shadow:0 1px 5px #959595;margin-left:-12px}.checkconfigcont ::ng-deep .multiselect-dropdown:focus-visible{border:none!important;box-shadow:0 1px 5px #959595;margin-left:-12px;max-height:250px}.checkconfigcont .custom-checkbox{--checkbox-background-checked: white !important;--checkmark-color: #009BF3;--border-color: #009BF3;--border-radius: 4px }.checkconfigcont .form-check.form-check-custom{display:flex;margin:0;height:44px;padding:12px 24px;align-items:center;gap:12px;align-self:stretch}.checkconfigcont .tabsub{color:var(--gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .selectstore{color:var(--primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.checkconfigcont .headeralign{color:var(--gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checkconfigcont .rotate{transform:rotate(180deg);transition:1s}.checkconfigcont .weekstyle{border-radius:20px;background:var(--gray-100, #F2F4F7)}.checkconfigcont ::ng-deep .swal2-popup.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;min-width:2em;height:0em;margin:0 .5em 0 0}.checkconfigcont ::ng-deep .listitem{display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem 1rem;background-color:#f3f6f9;margin-top:.75rem;border-radius:.42rem}.checkconfigcont ::ng-deep .list{overflow-y:auto}.checkconfigcont ::ng-deep .listitemlabel{font-size:13px!important;font-weight:600;font-family:Inter;color:#7e8299}.checkconfigcont ::ng-deep .swal2-container{padding:.4em!important}.checkconfigcont ::ng-deep .swal2-icon{border:1px solid white!important}.checkconfigcont ::ng-deep body.swal2-toast-shown .swal2-container{width:500px!important}.checkconfigcont ::ng-deep .swal2-popup.swal2-toast .swal2-title{margin:9px 5px auto!important}.checkconfigcont ::ng-deep .label{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.checkconfigcont ::ng-deep .form-check-input[disabled]~.form-check-label.spocName,.checkconfigcont ::ng-deep .form-check-input:disabled~.form-check-label.spocName{opacity:unset!important}.checkconfigcont tr.mat-header-row{height:56px;border-bottom:1px solid var(--gray-200, #EAECF0);background:var(--gray-25, #FCFCFD)}.checkconfigcont .detectiontext{color:var(--gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .alert{border-radius:16px;background:var(--Gray-100, #F2F4F7)}.checkconfigcont .alert .text{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.checkconfigcont .alerttext{color:var(--primary-600, #00A3FF);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checkconfigcont .alertlabel{width:24px;height:24px;padding:4px 0 2px;justify-content:center;align-items:center;border-radius:200px;background:var(--primary-50, #EAF8FF)}.checkconfigcont .create{color:var(--white, #FFF);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .create1{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.checkconfigcont .createbuttons{padding:10px 18px;justify-content:center;align-items:center;gap:8px;border-radius:8px;border:1px solid var(--primary-600, #00A3FF);background:var(--primary-600, #00A3FF);box-shadow:0 1px 2px #1018280d}.checkconfigcont .alertsinput{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px;align-items:center;gap:8px}.checkconfigcont .usageerror{display:block;width:255px}.checkconfigcont .reupload{padding:10px 18px!important;justify-content:center;align-items:center;gap:8px;flex:1 0 0;border-radius:8px;border:1px solid var(--primary-600, #00A3FF);background:var(--primary-600, #00A3FF);width:220px;cursor:pointer;box-shadow:0 1px 2px #1018280d}.checkconfigcont .reuploadtext{color:var(--White, #FFF);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;cursor:pointer}.checkconfigcont .download{border-radius:8px;border:1px solid var(--primary-50, #EAF8FF);background:var(--primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;padding:10px 18px!important;justify-content:center;align-items:center;gap:8px;width:220px}.checkconfigcont .downloadtext{color:var(--primary-700, #009BF3);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .assignpadding{padding:0 40px}.checkconfigcont .uploadpadding{padding:0 20% 9px}::ng-deep .swal2-popup.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;min-width:2em;height:0em;margin:0 .5em 0 0}::ng-deep .listitem{display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem 1rem;background-color:#f3f6f9;margin-top:.75rem;border-radius:.42rem}::ng-deep .question-left{max-height:50vh;overflow:auto;overflow-x:hidden}::ng-deep .toasttitile{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}::ng-deep .list{overflow-y:auto}::ng-deep .listitemlabel{font-size:13px!important;font-weight:600;font-family:Inter;color:#7e8299}::ng-deep .swal2-container{padding:.4em!important}::ng-deep .swal2-icon{border:1px solid white!important}::ng-deep body.swal2-toast-shown .swal2-container{width:500px!important}::ng-deep .swal2-popup.swal2-toast .swal2-title{margin:9px 5px auto!important}::ng-deep .label{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}::ng-deep .matWidth{margin-left:12px;margin-right:12px}::ng-deep .mat-tooltip{white-space:pre-line}::ng-deep .custom-test{color:var(--gray-700, #344054)!important;text-align:start;font-family:Inter;font-size:12px;font-style:normal;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;font-weight:600;line-height:18px;background:#fff}.checkconfigcont .matChip-store{height:113px;display:block;overflow-y:scroll;overflow-x:hidden}.emailalert{position:relative;height:500px!important;overflow:auto!important;overflow-x:hidden!important}.emailalert1{overflow-y:auto!important;height:10%!important;position:relative}.active-question{color:var(--primary-700, #009BF3);font-size:16px;font-style:normal;font-weight:500;line-height:24px;display:flex;padding:8px 12px;align-items:center;gap:105px;align-self:stretch;border-radius:6px;background:var(--primary-50, #EAF8FF)}.q-btn{color:var(--gray-700, #344054);font-size:16px;font-style:normal;font-weight:500;line-height:24px;display:flex;padding:8px 12px;align-items:center;gap:105px;align-self:stretch;border-radius:6px;background:var(--primary-50, white)}.concise-question{display:inline-block;width:100%;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis!important;text-align:left}@media screen and (min-width: 1400px){.emailalert{position:relative;height:700px!important;overflow:auto!important;overflow-x:hidden!important}}::ng-deep .swal2-html-container{overflow:hidden!important}.badgeColor{background-color:#fffaeb!important;color:#b54708!important;font-family:Inter;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0em;text-align:center}.config-heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px;width:35%}.ps-20{padding-left:7rem!important}.ps-18{padding-left:6.5rem!important}.remove{color:var(--Gray-500, #667085);font-size:12px;font-weight:600;line-height:18px;text-decoration-line:underline;text-transform:capitalize}.fw-400{font-weight:400}.chip-container{margin-top:10px}.mat-chip{margin:5px}.dropdown-menu{position:absolute;top:100%;left:0;right:0;background-color:#fff;z-index:1000;display:block;box-sizing:border-box;height:0%}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.formSeach{width:95%}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.nav-item .nav-link:hover{border-bottom:none!important}.nav-item .nav-link.active{border-radius:10px!important;border-bottom:none!important}.nav-item .bg-light-primary{background:var(--Primary-50, #EAF8FF)!important}.storetext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.position-relative{position:relative!important}.content{background-color:#fff;padding:10px 22px 10px 10px;border-radius:5px;box-shadow:0 0 10px #0000001a}.badge-pill{display:flex;padding:2px 6px 2px 8px;justify-content:center;align-items:center;gap:4px;border-radius:16px;background:var(--Gray-100, #F2F4F7)}.badge-specificdate{max-width:100%;overflow-x:hidden;white-space:normal;display:flex;flex-wrap:wrap}.badge-specificdate .badge{margin-bottom:8px}.bg-color-disabled{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}a.cursor-default{cursor:default!important;background-color:unset!important}.form-control.form-control-solid.disabled{background-color:#eef3f7!important}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.selectDay{background-color:var(--bs-primary)!important}a.selectDay span{color:#fff!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}tr th .form-check-label,tr td .form-check-label{color:var(--Gray-700, #344054)!important}:host::ng-deep .schedule .md-drppicker .btn{line-height:10px!important}:host::ng-deep .schedule .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .schedule .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .schedule .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .schedule .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 .schedule .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 .schedule .md-drppicker td.active,:host::ng-deep .schedule .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 .schedule .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .schedule .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .schedule .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 .schedule table th,:host::ng-deep .schedule table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .schedule .md-drppicker td.available.prev,:host::ng-deep .schedule .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 .schedule .md-drppicker td.available.next,:host::ng-deep .schedule .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 .schedule 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 .schedule .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}:host::ng-deep .schedule .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .schedule .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.fontSize{font-size:14px}.margin{margin-top:2px}.w-20{width:20%!important}.w-80{width:80%!important}.approver{color:var(--gray-700, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.line-height{line-height:25px}.storeAssign{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.selected-radio{width:1.5rem!important;height:1.5rem!important}.lineHeight{line-height:27px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.schedule-config-header{color:var(--Black, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:24px}.schedule-config-description{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:18px}.schedule-config-sub-header{color:var(--Black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.advancedConfigureAcite{border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--Primary-50, #EAF8FF)}.bg-light-custom{background-color:#f8fafc;min-height:100vh}.config-card{background:#fff;border:1px solid #eef2f6;border-radius:12px;box-shadow:0 2px 4px #00000003}.extra-small{font-size:.75rem}.tag-input-box{border:1px solid #e2e8f0;border-radius:8px;background:#fcfcfd;min-height:45px}.badge-tag{background:#e9ecef;color:#475467;padding:4px 12px;border-radius:20px;font-size:.85rem}.chip-container{border:1px solid #e2e8f0;border-radius:8px;display:flex;gap:8px;background:#fff;min-height:38px;align-items:center;padding-left:10px!important}.user-chip{background:#f0f9ff;border:1px solid #e0f2fe;border-radius:6px;padding:2px 8px;display:flex;align-items:center;font-size:.75rem}.user-chip .initials{color:#0ea5e9;font-weight:700;margin-right:6px}.user-chip .name{color:#344054}.info-banner{background:#f1f5f9;padding:10px 15px;border-radius:10px;font-size:.85rem;color:#64748b}.threshold-inner-card{border:1px solid #e2e8f0;border-radius:15px;position:relative}.floating-icon{position:absolute;top:-22px;right:25%;width:44px;height:44px;background:linear-gradient(135deg,#3b82f6,#2dd4bf);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px #3b82f666}.sub-config-box{border:1px solid #f1f5f9;border-radius:12px}.cursor-pointer{cursor:pointer}.time-input-wrapper{position:relative;display:inline-block}.time-field{border-radius:8px;border:1px solid #dee2e6;padding:8px 35px 8px 12px;font-weight:500;color:#334155;width:120px}.time-input-wrapper i{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#334155;pointer-events:none;font-size:1.1rem}.custom-switch{width:3em!important;height:1.5em!important;cursor:pointer}.form-check-input:checked{background-color:#0095ff;border-color:#0095ff}.form-select{border-radius:8px;padding:8px 25px 8px 15px;border:1px solid #dee2e6;background-color:#f8fafc}.animate-fade-in{animation:fadeIn .3s ease-in}input[type=time]::-webkit-calendar-picker-indicator{background:transparent;color:transparent;cursor:pointer;height:auto;inset:0;position:absolute;width:auto}.text-dark-blue{color:#1e293b}.text-secondary-blue{color:#334155}.custom-switch{width:3.2em!important;height:1.6em!important;cursor:pointer}.form-check-input:checked{background-color:#0ea5e9;border-color:#0ea5e9}.custom-select{width:70px;height:48px;border-radius:10px;border:1px solid #e2e8f0;text-align:center;padding:0 10px;font-weight:500;background-color:#fff;color:#334155}.summary-text{color:#475569;font-size:.95rem;font-weight:500;margin-top:1.5rem}.fade-in{animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.text-dark-blue{color:#334155}.text-secondary-blue{color:#475569}.info-banner{background-color:#f1f5f9;border-radius:12px;color:#64748b}.small-text{font-size:.9rem;font-weight:500}.threshold-container{border:1px solid #e2e8f0;border-radius:16px;background-color:#fff}.description-text{font-size:.8rem;color:#94a3b8}.custom-switch{width:2.8em!important;height:1.4em!important;cursor:pointer}.form-check-input:checked{background-color:#38bdf8;border-color:#38bdf8}.custom-select{width:75px;height:42px;border-radius:8px;border:1px solid #e2e8f0;text-align:center;font-weight:500;color:#334155;cursor:pointer;background-color:#fff}.custom-select:focus{border-color:#cbd5e1;box-shadow:none}\n"] }]
3028
+ args: [{ selector: 'lib-checklist-configure', template: "<div *ngIf=\"loading\" class=\"card 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>\r\n<div *ngIf=\"!loading\">\r\n <div class=\"card\">\r\n <ng-container>\r\n <div class=\"card-header border-0 pt-3 pb-3\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-9\">\r\n <div class=\"align-items-center\">\r\n <div *ngIf=\"!disabledQuestion&&type === 'custom'\"\r\n [routerLink]=\"'/manage/trax/createChecklist'\" [queryParams]=\"{checklistId: checklistId}\"\r\n class=\"btn btn-sm btn-outline me-5 px-3 py-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M15.8332 10.0003H4.1665M4.1665 10.0003L9.99984 15.8337M4.1665 10.0003L9.99984 4.16699\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <div *ngIf=\"type === 'custom'\" class=\"flex-column\">\r\n <div class=\"editablecontent mb-4 w-100\"><input type=\"text\" class=\"checklist plain-input\"\r\n placeholder=\"Enter Checklist Name\"\r\n [value]=\"configData?.checkListDetails?.checkListName\" readonly></div>\r\n <div class=\"editablecontent w-100\"><input type=\"text\"\r\n class=\"checklistDescription plain-input\" #checklistDescription\r\n placeholder=\"Enter Checklist Description\"\r\n [value]=\"configData?.checkListDetails?.checkListDescription\" readonly></div>\r\n </div>\r\n <div *ngIf=\"type !== 'custom'\" class=\"flex-column\">\r\n <div class=\"editablecontent mb-4 w-100\"><input type=\"text\" class=\"checklist plain-input\"\r\n placeholder=\"Enter Checklist Name\" [value]=\"configData?.checkListName\" readonly>\r\n </div>\r\n <div class=\"editablecontent w-100\"><input type=\"text\"\r\n class=\"checklistDescription plain-input\" #checklistDescription\r\n placeholder=\"Enter Checklist Description\"\r\n [value]=\"configData?.checkListDescription\" readonly></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <div class=\"d-flex my-6 justify-content-end\">\r\n <div>\r\n <button type=\"button\"\r\n class=\"btn btn-primary btn-md py-4 mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n (click)=\"type === 'custom' ? publish() : publishAI()\"\r\n [disabled]=\"disabledPublish || disableBtn\"><span class=\"ms-2\">Publish</span>\r\n </button>\r\n </div>\r\n <div>\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n (click)=\"type ==='custom' ? savedraft() : saveDraftAI()\"\r\n [disabled]=\"disableBtn\"><span class=\"ms-2\">Save as Draft</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"row checkconfigcont mt-2\" *ngIf=\"configData\">\r\n <div class=\"col-xl-3 leftcard\">\r\n <div class=\"card px-7 py-7\">\r\n <div class=\"section-leftheading1\">{{configData?.checkListDetails?.checkListName}}</div>\r\n <div *ngIf=\"obj.checkListId\" class=\"section-left\">\r\n <div *ngFor=\"let section of sections; let i=index;\">\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\">\r\n <div class=\"fs-4 fw-bold section\">{{section.name}}</div>\r\n <hr class=\"mx-2\">\r\n <svg (click)=\"accordian(i)\" [ngClass]=\"{'rotate' : show !== i}\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"35\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"show===i\" class=\"question-left\">\r\n <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n\r\n <div *ngFor=\"let question of section.questions;let j=index;\" class=\"my-2 q-btn\" cdkDrag>\r\n\r\n <div class=\"editablecontent\">\r\n {{question.qname}}\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <h3 class=\"card-title align-items-start flex-column \">\r\n <div class=\"card-label section-leftheading1 mt-6\">Schedule</div>\r\n\r\n <!-- <div *ngIf=\"type === 'mobileusagedetection' || type === 'storeopenandclose'\" class=\"mt-4 mx-2 sub\"><span\r\n class=\" mx-4\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"mt-2\">{{configData.checkListDetails.scheduleStartTime}} to\r\n {{configData.checkListDetails.scheduleEndTime}}</span>\r\n </div> -->\r\n\r\n <div *ngIf=\"['custom'].includes(type)\">\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"23\" height=\"23\"\r\n viewBox=\"0 0 23 23\" fill=\"none\">\r\n <path\r\n d=\"M8.41448 4.52303C8.69518 4.80371 8.69518 5.2588 8.41448 5.53948L5.53948 8.41448C5.2588 8.69518 4.80371 8.69518 4.52303 8.41448L3.08553 6.97698C2.80482 6.6963 2.80482 6.24121 3.08553 5.96053C3.36621 5.67982 3.8213 5.67982 4.10198 5.96053L5.03125 6.88978L7.39803 4.52303C7.67871 4.24232 8.1338 4.24232 8.41448 4.52303Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M8.41448 11.7105C8.69518 11.9912 8.69518 12.4463 8.41448 12.727L5.53948 15.602C5.2588 15.8826 4.80371 15.8826 4.52303 15.602L3.08553 14.1645C2.80482 13.8838 2.80482 13.4287 3.08553 13.1479C3.36621 12.8673 3.8213 12.8673 4.10198 13.1479L5.03125 14.0773L7.39803 11.7105C7.67871 11.4299 8.1338 11.4299 8.41448 11.7105Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M10.0625 6.46875C10.0625 6.0718 10.3844 5.75 10.7812 5.75H15.0938C15.4906 5.75 15.8125 6.0718 15.8125 6.46875C15.8125 6.8657 15.4906 7.1875 15.0938 7.1875H10.7812C10.3844 7.1875 10.0625 6.8657 10.0625 6.46875Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M3.59375 0C1.60898 0 0 1.60898 0 3.59375V16.5312C0 18.516 1.60898 20.125 3.59375 20.125H9.48708C9.25429 19.6696 9.06436 19.1886 8.92261 18.6875H3.59375C2.40288 18.6875 1.4375 17.7221 1.4375 16.5312V3.59375C1.4375 2.40288 2.40288 1.4375 3.59375 1.4375H16.5312C17.7221 1.4375 18.6875 2.40288 18.6875 3.59375V8.92261C19.1886 9.06436 19.6696 9.25429 20.125 9.48708V3.59375C20.125 1.60898 18.516 0 16.5312 0H3.59375Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M16.5313 23C20.1039 23 23 20.1039 23 16.5313C23 12.9586 20.1039 10.0625 16.5313 10.0625C12.9586 10.0625 10.0625 12.9586 10.0625 16.5313C10.0625 20.1039 12.9586 23 16.5313 23ZM16.5313 12.9375C16.9281 12.9375 17.25 13.2594 17.25 13.6563V15.8125H19.4063C19.8031 15.8125 20.125 16.1344 20.125 16.5313C20.125 16.9281 19.8031 17.25 19.4063 17.25H17.25V19.4063C17.25 19.8031 16.9281 20.125 16.5313 20.125C16.1344 20.125 15.8125 19.8031 15.8125 19.4063V17.25H13.6563C13.2594 17.25 12.9375 16.9281 12.9375 16.5313C12.9375 16.1344 13.2594 15.8125 13.6563 15.8125H15.8125V13.6563C15.8125 13.2594 16.1344 12.9375 16.5313 12.9375Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\">{{configData?.checkListDetails?.schedule === 'onetime' ?\r\n 'One-time' : (configData?.checkListDetails?.schedule | titlecase)}}\r\n </span></div>\r\n\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"mt-2 ms-2\">{{configData?.checkListDetails?.scheduleStartTime ?\r\n configData?.checkListDetails?.scheduleStartTime.substr(-8) : configData?.openTime}} to\r\n {{configData?.checkListDetails?.scheduleEndTime ?\r\n configData?.checkListDetails?.scheduleEndTime.substr(-8) :\r\n configData?.closeTime}}</span>\r\n </div>\r\n\r\n <div class=\"mt-4 mx-2 sub\" *ngIf=\"showRangeValue\"><span><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M16 2V6M8 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span><span\r\n class=\"mt-2 ms-2\"><span>{{configData?.checkListDetails?.configStartDate}}</span><span\r\n *ngIf=\"configData?.checkListDetails?.configEndDate !== '' && configData?.checkListDetails?.configEndDate !== null\">\r\n to {{configData?.checkListDetails?.configEndDate}}</span></span></div>\r\n\r\n <div class=\"card-label section-leftheading1 mt-6\">Assign</div>\r\n\r\n <div *ngIf=\"['custom'].includes(type)\">\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8M9 2H15C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6H9C8.44772 6 8 5.55228 8 5V3C8 2.44772 8.44772 2 9 2Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"> {{coverage | titlecase}}s\r\n </span></div>\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88332L3.02401 6.98632C2.30358 8.25521 3.06101 9.87908 4.46464 10.0659C4.58627 10.0808 4.70112 10.0889 4.8145 10.0889C5.55255 10.0889 6.20523 9.77192 6.65953 9.2788L7.21286 8.67818L7.76432 9.28052C8.21367 9.77135 8.8652 10.0889 9.60776 10.0889C10.3471 10.0889 11.0022 9.771 11.4512 9.28052L12.0044 8.67629L12.5576 9.28052C13.0066 9.771 13.6617 10.0889 14.401 10.0889C15.1404 10.0889 15.7954 9.771 16.2445 9.28052L16.7977 8.67629L17.3508 9.28052C17.7999 9.771 18.4549 10.0889 19.1943 10.0889C19.3041 10.0889 19.4223 10.0808 19.5433 10.066C20.9772 9.87131 21.7355 8.16351 20.9155 6.88382C20.9154 6.88376 20.9154 6.88371 20.9154 6.88365L18.8056 3.59392L18.8056 3.59392L18.8046 3.59246C18.7582 3.51966 18.6649 3.46387 18.5584 3.46387H5.44307C5.3365 3.46387 5.24326 3.51966 5.19681 3.59246L5.19619 3.59342L3.08995 6.88332ZM4.81818 12.7496C4.71644 12.7496 4.616 12.7465 4.5169 12.7406V16.6424V18.9639C4.5169 19.8207 5.22663 20.5353 6.11942 20.5353H17.882C18.7748 20.5353 19.4845 19.8207 19.4845 18.9639V16.6424V12.7411C19.3874 12.7466 19.2893 12.7496 19.1906 12.7496C19.0022 12.7496 18.8157 12.7395 18.632 12.7198V16.6424V17.3924H17.882H6.11942H5.36942V16.6424V12.7206C5.18866 12.7397 5.00472 12.7496 4.81818 12.7496Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span><span class=\"mt-2 ms-2\">{{assignSingle?.length + groupAssign?.length}}\r\n {{coverage}}{{(assignSingle?.length + groupAssign?.length) > 1 ? 's':''}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"col-lg-10 editques\" *ngIf=\"['custom'].includes(type) && !disabledQuestion\">\r\n <a (click)=\"saveandredirect(obj.checkListId)\"\r\n class=\"btn-outline btn-outline-dashed btn btn-light upload\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M14.6666 2.5009C14.8855 2.28203 15.1453 2.10842 15.4313 1.98996C15.7173 1.87151 16.0238 1.81055 16.3333 1.81055C16.6428 1.81055 16.9493 1.87151 17.2353 1.98996C17.5213 2.10842 17.7811 2.28203 18 2.5009C18.2188 2.71977 18.3924 2.97961 18.5109 3.26558C18.6294 3.55154 18.6903 3.85804 18.6903 4.16757C18.6903 4.4771 18.6294 4.7836 18.5109 5.06956C18.3924 5.35553 18.2188 5.61537 18 5.83424L6.74996 17.0842L2.16663 18.3342L3.41663 13.7509L14.6666 2.5009Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"uploadtext\">Edit Questions</span></a> \r\n </div> -->\r\n\r\n <div class=\"col-lg-10 editques\" *ngIf=\"!disabledQuestion&&type === 'custom'\"\r\n [routerLink]=\"'/manage/trax/createChecklist'\" [queryParams]=\"{checklistId: checklistId}\">\r\n <a class=\"btn-outline btn-outline-dashed btn btn-light upload\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M14.6666 2.5009C14.8855 2.28203 15.1453 2.10842 15.4313 1.98996C15.7173 1.87151 16.0238 1.81055 16.3333 1.81055C16.6428 1.81055 16.9493 1.87151 17.2353 1.98996C17.5213 2.10842 17.7811 2.28203 18 2.5009C18.2188 2.71977 18.3924 2.97961 18.5109 3.26558C18.6294 3.55154 18.6903 3.85804 18.6903 4.16757C18.6903 4.4771 18.6294 4.7836 18.5109 5.06956C18.3924 5.35553 18.2188 5.61537 18 5.83424L6.74996 17.0842L2.16663 18.3342L3.41663 13.7509L14.6666 2.5009Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"uploadtext\">Edit Questions</span></a>\r\n </div>\r\n </div>\r\n </h3>\r\n <!-- <div *ngIf=\"['uniformdetection','mobileusagedetection'].includes(type)\">\r\n <div class=\"card-label section-leftheading1\">Alerts</div>\r\n <div class=\"mt-6 mx-4 sub\">Email</div>\r\n </div> -->\r\n <!-- <div *ngIf=\"['uniformdetection','mobileusagedetection'].includes(type)\" class=\"mx-4 mt-4 sub\">if usage exceeds\r\n {{configData?.aiConfig?.mobileDetection?.usageExceed}}\r\n events\r\n </div> -->\r\n <!-- <div *ngIf=\"type === 'storeopenandclose'\">\r\n <div class=\"card-label section-leftheading1\">Alerts</div>\r\n <div class=\"mt-4 mx-4 sub\">Send email everyday to</div>\r\n </div> -->\r\n <div *ngIf=\"!['custom'].includes(type) && configData.aiConfig.events?.length\" class=\"\">\r\n <span *ngIf=\"configData.aiConfig.assignConfig ==='global'\" class=\"scedule-text\">Everyday at {{\r\n dayjs(configData.aiConfig.events[0]?.time,'HH:MM').format('hh:mm A') }} for\r\n {{configData.aiConfig.events[0]?.duration}} mins</span>\r\n <span *ngIf=\"configData.aiConfig.assignConfig ==='store'\" class=\"scedule-text\">Multiple times are\r\n allocated for multiple stores</span>\r\n </div>\r\n <div *ngIf=\"!['custom'].includes(type) && configData.aiConfig.alerts.users?.length\">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Alerts To</div>\r\n <span *ngFor=\"let alert of configData.aiConfig.alerts.users\"\r\n class=\"mt-2 ms-2 badge badge-light-default h-25px\"><span\r\n class=\"bg-light-primary text-primary rounded-5 me-1\">{{getInitials(alert?.name)}}</span>\r\n {{alert?.name}}</span>\r\n </div>\r\n <h3 *ngIf=\"['uniformdetection','mobileusagedetection','tvcompliance'].includes(type) && configData?.aiConfig?.mobileDetection?.detectionArea?.length\"\r\n class=\"card-title align-items-start flex-column \">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Detection Areas</div>\r\n <p>Checklist will run on this Zone</p>\r\n\r\n <div class=\"mx-2 sub\"><span\r\n *ngFor=\"let zone of configData?.aiConfig?.mobileDetection?.detectionArea\"\r\n class=\"badge mx-2 mt-4 badge-light checklistlabel h-25px fs-base\">\r\n <span\r\n class=\"bg-light-primary text-primary rounded-5 me-1\">{{getInitials(zone?.name)}}</span>\r\n <i class=\"ki-duotone ki-arrow-up checklisttext\"></i>\r\n {{zone?.name}}\r\n </span></div>\r\n </h3>\r\n <div *ngIf=\"!['custom'].includes(type)\">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Assign</div>\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8M9 2H15C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6H9C8.44772 6 8 5.55228 8 5V3C8 2.44772 8.44772 2 9 2Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"> Stores\r\n </span></div>\r\n <div class=\"mt-4 mx-2 sub\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88332L3.02401 6.98632C2.30358 8.25521 3.06101 9.87908 4.46464 10.0659C4.58627 10.0808 4.70112 10.0889 4.8145 10.0889C5.55255 10.0889 6.20523 9.77192 6.65953 9.2788L7.21286 8.67818L7.76432 9.28052C8.21367 9.77135 8.8652 10.0889 9.60776 10.0889C10.3471 10.0889 11.0022 9.771 11.4512 9.28052L12.0044 8.67629L12.5576 9.28052C13.0066 9.771 13.6617 10.0889 14.401 10.0889C15.1404 10.0889 15.7954 9.771 16.2445 9.28052L16.7977 8.67629L17.3508 9.28052C17.7999 9.771 18.4549 10.0889 19.1943 10.0889C19.3041 10.0889 19.4223 10.0808 19.5433 10.066C20.9772 9.87131 21.7355 8.16351 20.9155 6.88382C20.9154 6.88376 20.9154 6.88371 20.9154 6.88365L18.8056 3.59392L18.8056 3.59392L18.8046 3.59246C18.7582 3.51966 18.6649 3.46387 18.5584 3.46387H5.44307C5.3365 3.46387 5.24326 3.51966 5.19681 3.59246L5.19619 3.59342L3.08995 6.88332ZM4.81818 12.7496C4.71644 12.7496 4.616 12.7465 4.5169 12.7406V16.6424V18.9639C4.5169 19.8207 5.22663 20.5353 6.11942 20.5353H17.882C18.7748 20.5353 19.4845 19.8207 19.4845 18.9639V16.6424V12.7411C19.3874 12.7466 19.2893 12.7496 19.1906 12.7496C19.0022 12.7496 18.8157 12.7395 18.632 12.7198V16.6424V17.3924H17.882H6.11942H5.36942V16.6424V12.7206C5.18866 12.7397 5.00472 12.7496 4.81818 12.7496Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span><span class=\"mt-2 ms-2\">{{this.configData?.storeList?.length}}\r\n Store{{this.configData?.storeList?.length > 1 ? 's':''}}</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!['custom'].includes(type) && configData.approver?.length && clientId!=='452'\">\r\n <div class=\"separator mt-8\"></div>\r\n <div class=\"card-label section-leftheading1 mt-4\">Automatic Task</div>\r\n <span *ngFor=\"let approve of configData.approver\"\r\n class=\"mt-2 ms-2 badge badge-light-default h-25px\"><span\r\n class=\"bg-light-primary text-primary rounded-5 me-1\">{{getInitials(approve?.name)}}</span>{{approve?.name}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Config div -->\r\n <div class=\"col-xl-9\">\r\n <div class=\"card bg-transparent border-0 outline-0 card-flush h-xl-100\">\r\n <div *ngIf=\"!['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"card-body bg-white rounded-4 px-7\">\r\n <div class=\"schedule\">\r\n <div>\r\n <h2 class=\"section-leftheading\">Schedule\r\n <span class=\"mx-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\">\r\n <path\r\n d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1874_66195\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </h2>\r\n <!-- <div class=\"row\" *ngIf=\"['uniformdetection'].includes(type)\">\r\n <div class=\"col-md-4 d-flex\">\r\n <span class=\"sub mt-2 mx-4\">From</span>&nbsp;&nbsp; \r\n <input class=\"form-control form-control-solid flatpickr-input w-200px mt-2\"\r\n (change)=\"updateTime('start')\" [(ngModel)]=\"startTime\"\r\n placeholder=\"Set store open time\" name=\"due_date\" type=\"time\">\r\n </div>\r\n <div class=\"col-md-4 d-flex\">\r\n <span class=\"sub mt-3 mx-4\">To</span>&nbsp;&nbsp;\r\n <input class=\"form-control form-control-solid flatpickr-input w-200px mt-2\"\r\n (change)=\"updateTime('end')\" [(ngModel)]=\"endTime\" placeholder=\"Set store open time\"\r\n name=\"due_date\" type=\"time\">\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n \r\n </div> -->\r\n <div>\r\n <div *ngIf=\"['mobileusagedetection'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Mobile detections are pre-scheduled, operate during the store's open hours\r\n based on its opening and closing times, and cannot be edited.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['storeopenandclose'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Store open and close detections operate based on the current store's opening\r\n and closing times. You can view/edit store\u2019s open and close timings in the\r\n 'Assign Stores and Cluster' section below\r\n </span>\r\n </div>\r\n <div *ngIf=\"['scrum'].includes(type)\" class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n The store's open and close times are set in the <span\r\n class=\"fw-bolder\">store configurations.</span> To make changes, please\r\n update <span routerLink=\"/manage/settings/configuration\"\r\n class=\"text-decoration-underline cursor-pointer\">click here</span>\r\n </span>\r\n </div>\r\n <div *ngIf=\"['cleaning'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n The store's open and close times are set in the <span\r\n class=\"fw-bolder\">store configurations.</span> To make changes, please\r\n update <span routerLink=\"/manage/settings/configuration\"\r\n class=\"text-decoration-underline cursor-pointer\">click here</span>\r\n </span>\r\n </div>\r\n <div *ngIf=\"['staffleftinthemiddle'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n This AI checklist will initiate detections based on the store's operational\r\n hours, starting when the store opens and stopping when it closes.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['customerunattended'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n This AI checklist will initiate detections based on the store's operational\r\n hours, starting when the store opens and stopping when it closes.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['uniformdetection'].includes(type)\"\r\n class=\"d-flex align-items-center p-5 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Uniform detections are automatically scheduled based on the store's\r\n operating hours and run during open hours. These schedules cannot be\r\n modified.\r\n </span>\r\n </div>\r\n <div *ngIf=\"['cleaning','scrum'].includes(type)\" class=\"row\">\r\n <div class=\"col-sm-6 cursor-pointer\">\r\n <div (click)=\"clickAIconfigure('global')\"\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'global'? 'configureAcite' : 'border border-1'\"\r\n class=\"d-flex align-items-center justify-content-between h-70px rounded-3 p-3\">\r\n <div class=\"d-flex\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\"\r\n viewBox=\"0 0 36 36\" fill=\"none\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.fill]=\"configData?.aiConfig?.assignConfig === 'global' ? '#EAF8FF' : '#F2F4F7'\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.stroke]=\"configData?.aiConfig?.assignConfig === 'global' ? '#DAF1FF' :'#F9FAFB'\"\r\n stroke-width=\"4\" />\r\n <g clip-path=\"url(#clip0_10179_46867)\">\r\n <path\r\n d=\"M11.75 26C11.2859 26 10.8408 25.8156 10.5126 25.4874C10.1844 25.1592 10 24.7141 10 24.25V11.75C10 10.784 10.784 10 11.75 10H20.25C21.216 10 22 10.784 22 11.75V24.25C22 24.335 21.994 24.418 21.982 24.5H24.25C24.3163 24.5 24.3799 24.4737 24.4268 24.4268C24.4737 24.3799 24.5 24.3163 24.5 24.25V18.285C24.5 18.2439 24.4899 18.2034 24.4706 18.1671C24.4512 18.1308 24.4232 18.0999 24.389 18.077L23.334 17.374C23.2521 17.3194 23.1817 17.2491 23.1269 17.1673C23.0721 17.0855 23.0339 16.9937 23.0146 16.8971C22.9953 16.8005 22.9952 16.7011 23.0143 16.6045C23.0334 16.5078 23.0714 16.4159 23.126 16.334C23.1806 16.2521 23.2509 16.1817 23.3327 16.1269C23.4145 16.0721 23.5063 16.0339 23.6029 16.0146C23.6995 15.9953 23.7989 15.9952 23.8955 16.0143C23.9922 16.0334 24.0841 16.0714 24.166 16.126L25.221 16.829C25.708 17.154 26 17.7 26 18.285V24.25C26 24.7141 25.8156 25.1592 25.4874 25.4874C25.1592 25.8156 24.7141 26 24.25 26H20.75C20.6835 25.9999 20.6173 25.9912 20.553 25.974C20.454 25.991 20.353 26 20.25 26H17.25C17.0511 26 16.8603 25.921 16.7197 25.7803C16.579 25.6397 16.5 25.4489 16.5 25.25V24H15.5V25.25C15.5 25.4489 15.421 25.6397 15.2803 25.7803C15.1397 25.921 14.9489 26 14.75 26H11.75ZM11.5 24.25C11.5 24.388 11.612 24.5 11.75 24.5H14V23.25C14 23.0511 14.079 22.8603 14.2197 22.7197C14.3603 22.579 14.5511 22.5 14.75 22.5H17.25C17.4489 22.5 17.6397 22.579 17.7803 22.7197C17.921 22.8603 18 23.0511 18 23.25V24.5H20.25C20.3163 24.5 20.3799 24.4737 20.4268 24.4268C20.4737 24.3799 20.5 24.3163 20.5 24.25V11.75C20.5 11.6837 20.4737 11.6201 20.4268 11.5732C20.3799 11.5263 20.3163 11.5 20.25 11.5H11.75C11.6837 11.5 11.6201 11.5263 11.5732 11.5732C11.5263 11.6201 11.5 11.6837 11.5 11.75V24.25ZM13.75 16H14.25C14.4489 16 14.6397 16.079 14.7803 16.2197C14.921 16.3603 15 16.5511 15 16.75C15 16.9489 14.921 17.1397 14.7803 17.2803C14.6397 17.421 14.4489 17.5 14.25 17.5H13.75C13.5511 17.5 13.3603 17.421 13.2197 17.2803C13.079 17.1397 13 16.9489 13 16.75C13 16.5511 13.079 16.3603 13.2197 16.2197C13.3603 16.079 13.5511 16 13.75 16ZM13 13.75C13 13.5511 13.079 13.3603 13.2197 13.2197C13.3603 13.079 13.5511 13 13.75 13H14.25C14.4489 13 14.6397 13.079 14.7803 13.2197C14.921 13.3603 15 13.5511 15 13.75C15 13.9489 14.921 14.1397 14.7803 14.2803C14.6397 14.421 14.4489 14.5 14.25 14.5H13.75C13.5511 14.5 13.3603 14.421 13.2197 14.2803C13.079 14.1397 13 13.9489 13 13.75ZM17 16.75C17 16.5511 17.079 16.3603 17.2197 16.2197C17.3603 16.079 17.5511 16 17.75 16H18.25C18.4489 16 18.6397 16.079 18.7803 16.2197C18.921 16.3603 19 16.5511 19 16.75C19 16.9489 18.921 17.1397 18.7803 17.2803C18.6397 17.421 18.4489 17.5 18.25 17.5H17.75C17.5511 17.5 17.3603 17.421 17.2197 17.2803C17.079 17.1397 17 16.9489 17 16.75ZM17.75 13H18.25C18.4489 13 18.6397 13.079 18.7803 13.2197C18.921 13.3603 19 13.5511 19 13.75C19 13.9489 18.921 14.1397 18.7803 14.2803C18.6397 14.421 18.4489 14.5 18.25 14.5H17.75C17.5511 14.5 17.3603 14.421 17.2197 14.2803C17.079 14.1397 17 13.9489 17 13.75C17 13.5511 17.079 13.3603 17.2197 13.2197C17.3603 13.079 17.5511 13 17.75 13ZM13 19.75C13 19.5511 13.079 19.3603 13.2197 19.2197C13.3603 19.079 13.5511 19 13.75 19H14.25C14.4489 19 14.6397 19.079 14.7803 19.2197C14.921 19.3603 15 19.5511 15 19.75C15 19.9489 14.921 20.1397 14.7803 20.2803C14.6397 20.421 14.4489 20.5 14.25 20.5H13.75C13.5511 20.5 13.3603 20.421 13.2197 20.2803C13.079 20.1397 13 19.9489 13 19.75ZM17.75 19H18.25C18.4489 19 18.6397 19.079 18.7803 19.2197C18.921 19.3603 19 19.5511 19 19.75C19 19.9489 18.921 20.1397 18.7803 20.2803C18.6397 20.421 18.4489 20.5 18.25 20.5H17.75C17.5511 20.5 17.3603 20.421 17.2197 20.2803C17.079 20.1397 17 19.9489 17 19.75C17 19.5511 17.079 19.3603 17.2197 19.2197C17.3603 19.079 17.5511 19 17.75 19Z\"\r\n [attr.fill]=\"configData?.aiConfig?.assignConfig === 'global' ? '#00A3FF' : 'black'\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_10179_46867\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"\r\n transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'global' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Global Configuration</span>\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'global' ? 'alerttext' : 'headeralign'\">Configure\r\n huddle time in a store level for all stores</span>\r\n </div>\r\n </div>\r\n <span>\r\n <input class=\"form-check-input w-15px h-15px mt-1 rounded-5\"\r\n [checked]=\"configData?.aiConfig?.assignConfig === 'global'\"\r\n type=\"checkbox\" id=\"oneTime\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-6 cursor-pointer\">\r\n <div (click)=\"clickAIconfigure('store')\"\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'store' ? 'configureAcite' : 'border border-1'\"\r\n class=\"d-flex align-items-center justify-content-between h-70px rounded-3 p-3\">\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\"\r\n viewBox=\"0 0 36 36\" fill=\"none\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.fill]=\"configData.aiConfig.assignConfig === 'store' ? '#EAF8FF':'#F2F4F7'\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\"\r\n [attr.stroke]=\"configData.aiConfig.assignConfig === 'store' ? '#DAF1FF' : '#F9FAFB'\"\r\n stroke-width=\"4\" />\r\n <path\r\n d=\"M12.0574 14.5882L12.0134 14.6569C11.5331 15.5028 12.0381 16.5854 12.9738 16.7099C13.0549 16.7199 13.1315 16.7253 13.2071 16.7253C13.6991 16.7253 14.1342 16.514 14.4371 16.1852L14.806 15.7848L15.1736 16.1864C15.4732 16.5136 15.9075 16.7253 16.4026 16.7253C16.8955 16.7253 17.3322 16.5133 17.6315 16.1864L18.0003 15.7835L18.3691 16.1864C18.6685 16.5133 19.1052 16.7253 19.5981 16.7253C20.091 16.7253 20.5277 16.5133 20.827 16.1864L21.1958 15.7835L21.5646 16.1864C21.864 16.5133 22.3007 16.7253 22.7936 16.7253C22.8668 16.7253 22.9456 16.7199 23.0262 16.71C23.9822 16.5802 24.4878 15.4417 23.9411 14.5886C23.941 14.5885 23.941 14.5885 23.941 14.5884L22.5344 12.3953L22.5338 12.3943C22.5028 12.3458 22.4407 12.3086 22.3696 12.3086H13.6261C13.5551 12.3086 13.4929 12.3458 13.4619 12.3943L13.4615 12.395L12.0574 14.5882ZM11.6363 14.3186L13.0404 12.1254L11.6363 14.3186ZM13.2095 18.4991C13.1417 18.4991 13.0747 18.497 13.0087 18.4931V21.0943V22.6419C13.0087 23.2131 13.4818 23.6895 14.077 23.6895H21.9187C22.5139 23.6895 22.9871 23.2131 22.9871 22.6419V21.0943V18.4934C22.9224 18.4971 22.8569 18.4991 22.7911 18.4991C22.6655 18.4991 22.5412 18.4923 22.4187 18.4792V21.0943V21.5943H21.9187H14.077H13.577V21.0943V18.4798C13.4565 18.4925 13.3339 18.4991 13.2095 18.4991Z\"\r\n [attr.stroke]=\"configData?.aiConfig?.assignConfig === 'store' ? '#00A3FF' : '#101828'\" />\r\n </svg></span>\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'store' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Store Wise Configuration</span>\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.assignConfig === 'store' ? 'alerttext' : 'headeralign'\">Configure\r\n huddle time in a store level for all stores</span>\r\n </div>\r\n </div>\r\n <span>\r\n <input class=\"form-check-input w-15px h-15px mt-1 rounded-5\"\r\n [checked]=\"configData?.aiConfig?.assignConfig === 'store'\"\r\n type=\"checkbox\" id=\"oneTime\">\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData?.aiConfig?.assignConfig === 'store'\"\r\n class=\"col-sm-12 mt-5\">\r\n <div class=\"text-center d-flex flex-column align-items-center cursor-pointer\"\r\n (click)=\"uploadAIfiles()\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"108\" height=\"88\"\r\n viewBox=\"0 0 108 88\" fill=\"none\">\r\n <circle cx=\"30.8469\" cy=\"30.8469\" r=\"30.8469\"\r\n transform=\"matrix(-1 0 0 1 84.8516 0)\" fill=\"#EAECF0\" />\r\n <g filter=\"url(#filter0_dd_9548_99613)\">\r\n <path\r\n d=\"M53.0499 9.49219C59.4404 9.49219 65.0933 12.65 68.5334 17.4904C69.6568 17.2255 70.8283 17.0853 72.0326 17.0853C80.4197 17.0853 87.2188 23.8844 87.2188 32.2715C87.2188 40.6585 80.4197 47.4576 72.0326 47.4576L34.0671 47.4576C26.7284 47.4576 20.7793 41.5084 20.7793 34.1697C20.7793 26.831 26.7284 20.8818 34.0672 20.8818C34.5884 20.8818 35.1027 20.9118 35.6083 20.9702C38.5172 14.2187 45.2316 9.49219 53.0499 9.49219Z\"\r\n fill=\"#F9FAFB\" />\r\n <ellipse cx=\"15.1862\" cy=\"15.1862\" rx=\"15.1862\" ry=\"15.1862\"\r\n transform=\"matrix(-1 0 0 1 87.2188 17.0859)\"\r\n fill=\"url(#paint0_linear_9548_99613)\" />\r\n <circle cx=\"18.9827\" cy=\"18.9827\" r=\"18.9827\"\r\n transform=\"matrix(-1 0 0 1 72.0312 9.49219)\"\r\n fill=\"url(#paint1_linear_9548_99613)\" />\r\n <ellipse cx=\"13.2879\" cy=\"13.2879\" rx=\"13.2879\" ry=\"13.2879\"\r\n transform=\"matrix(-1 0 0 1 47.3594 20.8789)\"\r\n fill=\"url(#paint2_linear_9548_99613)\" />\r\n </g>\r\n <circle cx=\"2.96605\" cy=\"2.96605\" r=\"2.96605\"\r\n transform=\"matrix(-1 0 0 1 89.5938 8.30469)\"\r\n fill=\"#F2F4F7\" />\r\n <circle cx=\"4.15247\" cy=\"4.15247\" r=\"4.15247\"\r\n transform=\"matrix(-1 0 0 1 92.5625 60.5078)\"\r\n fill=\"#F2F4F7\" />\r\n <circle cx=\"4.15247\" cy=\"4.15247\" r=\"4.15247\"\r\n transform=\"matrix(-1 0 0 1 17.2266 16.6094)\"\r\n fill=\"#F2F4F7\" />\r\n <circle cx=\"2.37284\" cy=\"2.37284\" r=\"2.37284\"\r\n transform=\"matrix(-1 0 0 1 21.9688 2.37109)\"\r\n fill=\"#F2F4F7\" />\r\n <rect width=\"28.4741\" height=\"28.4741\" rx=\"14.237\"\r\n transform=\"matrix(-1 0 0 1 68.2422 36.7773)\" fill=\"#344054\"\r\n fill-opacity=\"0.4\" />\r\n <path\r\n d=\"M48.666 52.7943V55.1671C48.666 55.4818 48.791 55.7836 49.0135 56.0061C49.236 56.2286 49.5377 56.3536 49.8524 56.3536H58.1573C58.472 56.3536 58.7738 56.2286 58.9963 56.0061C59.2188 55.7836 59.3438 55.4818 59.3438 55.1671V52.7943M51.0388 48.6418L54.0049 45.6758M54.0049 45.6758L56.9709 48.6418M54.0049 45.6758V52.7943\"\r\n stroke=\"white\" stroke-width=\"1.18642\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <defs>\r\n <filter id=\"filter0_dd_9548_99613\" x=\"0.78125\" y=\"9.49219\"\r\n width=\"106.438\" height=\"77.9648\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\"\r\n in=\"SourceAlpha\"\r\n result=\"effect1_dropShadow_9548_99613\" />\r\n <feOffset dy=\"8\" />\r\n <feGaussianBlur stdDeviation=\"4\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_9548_99613\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\"\r\n in=\"SourceAlpha\"\r\n result=\"effect2_dropShadow_9548_99613\" />\r\n <feOffset dy=\"20\" />\r\n <feGaussianBlur stdDeviation=\"12\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\"\r\n in2=\"effect1_dropShadow_9548_99613\"\r\n result=\"effect2_dropShadow_9548_99613\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect2_dropShadow_9548_99613\"\r\n result=\"shape\" />\r\n </filter>\r\n <linearGradient id=\"paint0_linear_9548_99613\" x1=\"3.52536\"\r\n y1=\"5.15245\" x2=\"30.3724\" y2=\"30.3723\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#D0D5DD\" />\r\n <stop offset=\"0.350715\" stop-color=\"white\"\r\n stop-opacity=\"0\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear_9548_99613\" x1=\"4.4067\"\r\n y1=\"6.44056\" x2=\"37.9654\" y2=\"37.9654\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#D0D5DD\" />\r\n <stop offset=\"0.350715\" stop-color=\"white\"\r\n stop-opacity=\"0\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear_9548_99613\" x1=\"3.08469\"\r\n y1=\"4.50839\" x2=\"26.5758\" y2=\"26.5758\"\r\n gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#D0D5DD\" />\r\n <stop offset=\"0.350715\" stop-color=\"white\"\r\n stop-opacity=\"0\" />\r\n </linearGradient>\r\n </defs>\r\n </svg></span>\r\n <div class=\"w-400px subtitle text-center\">\r\n Download the template below in the <span class=\"fw-bolder\">\u2018Assign\r\n Stores\u2019</span> section and upload to configure store-wise time\r\n to the checklist accordingly.\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData?.aiConfig?.assignConfig !== 'store'\"\r\n class=\"col-sm-12 mt-5\">\r\n <div *ngFor=\"let array of configData?.aiConfig?.events; let i= index\"\r\n class=\"d-flex mb-5 align-items-center\">\r\n <span class=\"me-3\">Start huddle at</span>\r\n <span><input\r\n class=\"form-control form-control-solid flatpickr-input w-auto margin\"\r\n (change)=\"updateHuddletime($event,'time')\"\r\n [(ngModel)]=\"array.time\" placeholder=\"Set store open time\"\r\n name=\"start_date_{{i}}\" type=\"time\"></span>\r\n <span class=\"mx-3\">for a duration of</span>\r\n <span class=\"w-150px\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"array.duration\"\r\n (change)=\"updateHuddletime($event,'duration')\">\r\n <option value=\"15\">15 mins</option>\r\n <option value=\"30\">30 mins</option>\r\n <option value=\"45\">45 mins</option>\r\n <option value=\"60\">60 mins</option>\r\n </select>\r\n </span>\r\n <span *ngIf=\"configData?.aiConfig?.events?.length > 1\"><button\r\n class=\"btn btn-outline px-3 ms-3\" (click)=\"deleteHuddle(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button></span>\r\n </div>\r\n <div *ngIf=\"configData?.aiConfig?.events?.length < 3\"\r\n class=\"btn btn-outline\" (click)=\"AddHuddleEent()\"> <span><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.9974 4.16797V15.8346M4.16406 10.0013H15.8307\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span class=\"ms-3\">Add Event</span></div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['outsidebusinesshoursqueuetracking'].includes(type)\" class=\"row\">\r\n <div class=\"border border-2 rounded-3 px-3\">\r\n <div>\r\n <h2 class=\"schedule-config-header m-3\">Configuration </h2>\r\n </div>\r\n\r\n <div class=\"border-top border-top-2\"\r\n style=\"height: 1px; margin: 1rem -9.750px;\"></div>\r\n <div class=\"border border-2 rounded-3 px-3 mb-3\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Pre-Open Time\r\n Configuration</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changePreopentimeconfig($event)\"\r\n [checked]=\"configData?.aiConfig?.outsidebusinesshoursqueuetracking?.preopentimeconfig !== '' \">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, this\r\n allows detections before store open time</div>\r\n </div>\r\n <div *ngIf=\"preopentimeconfig || configData.aiConfig.outsidebusinesshoursqueuetracking?.preopentimeconfig\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-1\">\r\n <div class=\"schedule-config-sub-header me-3\"> Monitor Store for\r\n </div>\r\n <div>\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.outsidebusinesshoursqueuetracking.preopentimeconfig\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of preOpenCloseTimeConfig\"\r\n [value]=\"time\">{{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes before the\r\n scheduled open Time </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-3 px-3 mb-3\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Post-Close Time\r\n Configuration</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changePreclosetimeconfig($event)\"\r\n [checked]=\"configData?.aiConfig?.outsidebusinesshoursqueuetracking?.preclosetimeconfig !== '' \">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, this\r\n allows detections after store close time</div>\r\n </div>\r\n <div *ngIf=\"preclosetimeconfig || configData.aiConfig.outsidebusinesshoursqueuetracking?.preclosetimeconfig\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-1\">\r\n <div class=\"schedule-config-sub-header me-3\"> Monitor Store for\r\n </div>\r\n <div>\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.outsidebusinesshoursqueuetracking.preclosetimeconfig\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of preOpenCloseTimeConfig\"\r\n [value]=\"time\">{{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes after the\r\n scheduled close Time </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-3 px-3 mb-3\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Person Detection Time\r\n Threshold</div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled,\r\n detection count is based on the configured time</div>\r\n </div>\r\n <div class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-1\">\r\n <div class=\"schedule-config-sub-header me-3\"> Flag, If detection\r\n of a person exceeds </div>\r\n <div>\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.outsidebusinesshoursqueuetracking.persondetectiontimethreshold\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option\r\n *ngFor=\"let time of personDetectionTimeThreshold\"\r\n [value]=\"time\">{{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['custom'].includes(type)\">\r\n <div class=\"col-md-12 mt-6 mb-1\">\r\n <div class=\"row\">\r\n <div class=\"col-md-2 mt-3\">\r\n <span class=\"mx-6 sub\">For</span>\r\n </div>\r\n <div class=\"col-md-3 dropdown\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"configData.checkListDetails.schedule\"\r\n (change)=\"updateSchedule($event)\">\r\n <option value=\"onetime\">Does Not Repeat</option>\r\n <option value=\"weekday\"> Every Weekday (Mon - Fri)</option>\r\n <option value=\"daily\">Daily</option>\r\n <option value=\"weekly\">Weekly</option>\r\n <option value=\"monthly\">Monthly</option>\r\n <option value=\"range\">Custom Range</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3 mx-2\">At</span>&nbsp;&nbsp;\r\n <input\r\n class=\"form-control form-control-solid flatpickr-input w-200px margin\"\r\n (change)=\"updateTime('start')\" [(ngModel)]=\"startTime\"\r\n placeholder=\"Set store open time\" name=\"due_date\" type=\"time\">\r\n </div>\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3 ms-5\">Ends</span>&nbsp;&nbsp;\r\n <input\r\n class=\"form-control form-control-solid flatpickr-input w-200px margin\"\r\n (change)=\"updateTime('end')\" [(ngModel)]=\"endTime\"\r\n placeholder=\"Set store open time\" name=\"due_date\" type=\"time\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"justify-content-between mt-4\">\r\n <div class=\"config-heading\">Checklist Configuration</div>\r\n <div *ngIf=\"configData.checkListDetails.schedule === 'onetime'\">\r\n <div class=\"row col-lg-12 d-flex mt-5\">\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3\">Once On</span>\r\n </div>\r\n <div class=\"col-md-3 px-4 pe-3\" id=\"dateclass\"\r\n data-kt-daterangepicker=\"true\" data-kt-daterangepicker-opens=\"left\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\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\"\r\n 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\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n matInput ngxDaterangepickerMd [singleDatePicker]=\"true\"\r\n [minDate]=\"minDate\" [drops]=\"'down'\" [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDates\"\r\n [autoApply]=\"false\"\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)=\"dateRangeStart($event)\" name=\"daterange\"\r\n [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.schedule !== 'onetime'\">\r\n <div class=\"form-check form-switch mt-6\">\r\n <input type=\"checkbox\" id=\"rangeDate\"\r\n class=\"form-check-input ng-valid ng-dirty ng-touched\"\r\n [(ngModel)]=\"showRangeValue\"\r\n [disabled]=\"configData.checkListDetails?.schedule === 'range'\"\r\n (change)=\"updateDateValue($event)\">\r\n <label for=\"rangeDate\" class=\"form-check-label checklisttext ms-2\">Set\r\n defined\r\n date range</label>\r\n </div>\r\n <div class=\"row col-lg-12 d-flex mt-5\" *ngIf=\"showRangeValue\">\r\n <div class=\"col-md-2 d-flex\">\r\n <span class=\"sub mt-3\">Starts from</span>\r\n </div>\r\n <div class=\"col-md-3\"\r\n [ngClass]=\"configData.checkListDetails.schedule === 'range' ? 'ps-10' : 'px-4 pe-3'\"\r\n id=\"dateclass\" data-kt-daterangepicker=\"true\"\r\n data-kt-daterangepicker-opens=\"left\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\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\"\r\n 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\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n matInput ngxDaterangepickerMd [singleDatePicker]=\"true\"\r\n [minDate]=\"minStartDate\" [drops]=\"'down'\" [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedStartDate\"\r\n [autoApply]=\"false\"\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)=\"dateRangeStart($event)\" name=\"daterange\"\r\n [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 mt-8 ng-star-inserted\">\r\n <div class=\"row\"\r\n *ngIf=\"configData.checkListDetails.schedule !== 'range'\">\r\n <div class=\"col-md-2 mt-2\">\r\n <span class=\"sub\">Repeats every</span>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div\r\n class=\"fv-row mb-5 fv-plugins-icon-container d-flex flex-column\">\r\n <input type=\"text\" autocomplete=\"off\" required=\"\"\r\n class=\"form-control form-control-solid w-100px ng-pristine ng-invalid ng-touched\"\r\n [(ngModel)]=\"configData.checkListDetails.scheduleRepeatedDay\"\r\n maxlength=\"2\" min=\"1\" (change)=\"updateRepeatDay()\"\r\n (input)=\"removeAlphapet($event)\">\r\n </div>\r\n <div\r\n class=\"fv-row mb-5 mx-2 fv-plugins-icon-container d-flex flex-column\">\r\n <input type=\"text\" autocomplete=\"off\"\r\n class=\"form-control form-control-solid w-100px ng-pristine ng-invalid ng-touched\"\r\n [(ngModel)]=\"repeatType\" readonly>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.schedule === 'monthly'\">\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n\r\n </div>\r\n <div class=\"col-lg-2 mt-3\">\r\n <div class=\"form-check fontSize\">\r\n <input class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"day\"\r\n [checked]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup === 'day'\"\r\n (change)=\"updateMonth('day')\">\r\n <label class=\"cursor-pointer\" for=\"inlineRadio1\">On\r\n Day</label>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div\r\n class=\"fv-row mb-5 fv-plugins-icon-container d-flex flex-column\">\r\n <input type=\"text\" autocomplete=\"off\"\r\n class=\"form-control form-control-solid w-100px\"\r\n [ngClass]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'day' ? 'disabled' : ''\"\r\n [(ngModel)]=\"configData.checkListDetails.scheduleRepeatedMonthWeek\"\r\n (change)=\"updateValue($event)\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'day'\"\r\n maxLength=\"2\" (input)=\"validate($event)\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n\r\n </div>\r\n <div class=\"col-lg-2 mt-3\">\r\n <div class=\"form-check fontSize\">\r\n <input class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"day\"\r\n [checked]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup === 'date'\"\r\n (change)=\"updateMonth('date')\">\r\n <label class=\"cursor-pointer\" for=\"inlineRadio1\">On\r\n the</label>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div\r\n class=\"fv-row mb-5 fv-plugins-icon-container d-flex flex-column\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"monthDate\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'date'\">\r\n <option value=\"1\"> First </option>\r\n <option value=\"2\"> Second </option>\r\n <option value=\"3\"> Third</option>\r\n <option value=\"4\"> Fourth</option>\r\n <option value=\"5\"> Last</option>\r\n </select>\r\n </div>\r\n <div\r\n class=\"fv-row mb-5 mx-2 fv-plugins-icon-container d-flex flex-column\">\r\n <select\r\n class=\"form-select form-select-lg select2-hidden-accessible ng-pristine ng-valid ng-touched\"\r\n [(ngModel)]=\"monthDay\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'date'\">\r\n <option value=\"Sunday\"> Sunday </option>\r\n <option value=\"Monday\"> Monday </option>\r\n <option value=\"Tuesday\"> Tuesday</option>\r\n <option value=\"Wednesday\"> Wednesday</option>\r\n <option value=\"Thursday\"> Thursday</option>\r\n <option value=\"Friday\">Friday</option>\r\n <option value=\"Saturday\"> Saturday</option>\r\n </select>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-2 mt-3\">\r\n <div class=\"form-check fontSize\">\r\n <input class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"day\"\r\n [checked]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup === 'specific'\"\r\n (change)=\"updateMonth('specific')\">\r\n <label class=\"cursor-pointer\" for=\"inlineRadio1\">On\r\n Specific Dates</label>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 d-flex\">\r\n <div class=\"position-relative\"\r\n (clickOutside)=\"closeDropDown()\">\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div\r\n class=\"d-flex align-items-center position-relative w-100\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n 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=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\"\r\n class=\"form-control dropdown-input ps-14\"\r\n (click)=\"toggleDropDown()\" readonly\r\n placeholder=\"Select Dates\"\r\n [disabled]=\"configData.checkListDetails?.scheduleRepeatedMonthSetup !== 'specific'\" />\r\n </div>\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu w-100\"\r\n *ngIf=\"showDropDown\">\r\n <div class=\"calendar-container\">\r\n <div class=\"content\">\r\n <div class=\"dates\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"row d-flex\">\r\n <div class=\"col-2 mb-2\"\r\n *ngFor=\"let date of dates\">\r\n <li class=\"nav-item me-1\"\r\n role=\"presentation\"\r\n (click)=\"selectDate(date)\">\r\n <a class=\"nav-link btn weekstyledate d-flex flex-column flex-center rounded-pill min-w-35px py-2 px-3 \"\r\n [ngClass]=\"selectedDate.includes(date) ? 'active btn-active-primary' : ''\"\r\n data-bs-toggle=\"tab\"\r\n aria-selected=\"false\"\r\n tabindex=\"-1\"\r\n role=\"tab\">\r\n <span\r\n class=\"pillstyle\">{{\r\n date\r\n }}</span>\r\n </a>\r\n </li>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button ms-2\"\r\n (click)=\"submitDate();showDropDown= false;\">\r\n <button\r\n class=\"btn btn-primary btn-block w-100\">\r\n Submit\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-6 py-3 badge-specificdate\">\r\n <div class=\"d-flex mt-3 flex-wrap\">\r\n <span *ngFor=\"let date of submittedDates\"\r\n class=\"badge badge-pill badge-light checklisttext me-4\">\r\n {{ getDateWithSuffix(date) }}\r\n <span (click)=\"removeBadge(date)\"\r\n class=\"cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div\r\n *ngIf=\"['weekday','weekly'].includes(configData.checkListDetails.schedule)\">\r\n <ul class=\"nav nav-pills d-flex flex-nowrap mb-3\"\r\n role=\"tablist\">\r\n\r\n <ng-container\r\n *ngFor=\"let day of ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']\">\r\n <li class=\"nav-item me-1\" role=\"presentation\"\r\n (click)=\"(configData.checkListDetails.schedule === 'weekly' || (configData.checkListDetails.schedule === 'weekday' && !['Sunday','Saturday'].includes(day))) ? setDay(day) : ''\">\r\n <a class=\"nav-link btn weekstyle d-flex flex-column flex-center rounded-pill min-w-45px me-2 py-4 px-3\"\r\n [ngClass]=\"(configData.checkListDetails.schedule === 'weekday' && ['Sunday','Saturday'].includes(day)) ? 'cursor-default' : selectedDays.includes(day) ? 'selectDay' : ''\"\r\n data-bs-toggle=\"tab\" aria-selected=\"false\"\r\n tabindex=\"-1\" role=\"tab\">\r\n <span class=\"pillstyle\">{{ day[0] }}</span>\r\n </a>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.schedule === 'range'\">\r\n <div class=\"col-md-12 ng-star-inserted\">\r\n <div class=\"row\">\r\n\r\n <div class=\"col-lg-6 d-flex\">\r\n <div class=\"form-check form-switch mt-3\">\r\n <input type=\"checkbox\" id=\"flexSwitchCheckDefault\"\r\n class=\"form-check-input ng-valid ng-dirty ng-touched\"\r\n [(ngModel)]=\"specific\"\r\n (change)=\"updateSpecific($event)\">\r\n <label for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label checklisttext ms-2\">On Specific\r\n Dates</label>\r\n </div>\r\n <div class=\"px-4 pe-3 position-relative\"\r\n (clickOutside)=\"closeDropDown()\">\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div\r\n class=\"d-flex align-items-center position-relative w-300px\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n 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=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\"\r\n class=\"form-control dropdown-input ps-14\"\r\n (click)=\"toggleDropDown()\" readonly\r\n placeholder=\"Select Dates\"\r\n [disabled]=\"!specific\" />\r\n </div>\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu w-100\"\r\n *ngIf=\"showDropDown\">\r\n <lib-multi-date-datepicker\r\n (selectedDates)=\"selectSpecificDate($event)\"\r\n [predefinedDates]=\"selectedDateList\"\r\n [startDate]=\"configData.checkListDetails.configStartDate\"\r\n [endDate]=\"configData.checkListDetails.configEndDate\"></lib-multi-date-datepicker>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-2\">\r\n </div>\r\n <div class=\"col-lg-6 py-3 badge-specificdate\">\r\n <div class=\"d-flex mt-3 ms-5 flex-wrap\">\r\n <span *ngFor=\"let date of selectedDateList\"\r\n class=\"badge badge-pill badge-light checklisttext me-4\">\r\n {{ date }}\r\n <span (click)=\"removeDate(date)\"\r\n class=\"cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\"\r\n stroke=\"#667085\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 ng-star-inserted\"\r\n [hidden]=\"!showRangeValue || configData.checkListDetails.schedule === 'onetime'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-2\"\r\n [ngClass]=\"configData.checkListDetails.schedule === 'range' ? 'mt-4' : 'mt-2'\">\r\n <span class=\"sub\">Ends On</span>\r\n </div>\r\n <div class=\"col-md-3\" id=\"dateclass\"\r\n [ngClass]=\"configData.checkListDetails.schedule === 'range' ? 'ps-9' : 'px-4 pe-3'\"\r\n data-kt-daterangepicker=\"true\" data-kt-daterangepicker-opens=\"left\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\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\"\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n matInput ngxDaterangepickerMd [singleDatePicker]=\"true\"\r\n [minDate]=\"minEndDate\" [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedEndDate\" [autoApply]=\"false\"\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)=\"dateRangeEnd($event)\" name=\"daterange\"\r\n [readonly]=\"true\" />\r\n </div>\r\n <div class=\"mt-5 remove cursor-pointer ms-4\"\r\n (click)=\"onDatepickerRefresh()\"\r\n *ngIf=\"configData.checkListDetails.configEndDate !== '' && configData.checkListDetails.configEndDate !== null && configData.checkListDetails.schedule !=='range'\">\r\n Remove\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'onetime'\">\r\n Occurs on\r\n the day {{configData.checkListDetails?.scheduleDate | date:'dd MMM YYYY'}}</div>\r\n <div class=\"my-3 user\"\r\n *ngIf=\"['weekday','weekly'].includes(configData.checkListDetails?.schedule)\">\r\n Occurs\r\n every {{(configData.checkListDetails?.scheduleRepeatedDay?.length &&\r\n configData.checkListDetails?.scheduleRepeatedDay !=='01') ?\r\n configData.checkListDetails?.scheduleRepeatedDay : ''}} week<span\r\n *ngIf=\"configData.checkListDetails?.scheduleRepeatedDay !== 01\">s</span> on\r\n {{selectedDays.toString()}}<span *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate | date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate\">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'daily'\">\r\n Occurs every\r\n {{(configData.checkListDetails?.scheduleRepeatedDay?.length &&\r\n configData.checkListDetails?.scheduleRepeatedDay !== '01') ?\r\n configData.checkListDetails?.scheduleRepeatedDay : ''}} day<span\r\n *ngIf=\"configData.checkListDetails?.scheduleRepeatedDay !== 01\">s</span><span\r\n *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate |\r\n date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate \">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'monthly'\">\r\n Occurs\r\n every\r\n {{(configData.checkListDetails?.scheduleRepeatedDay?.length &&\r\n configData.checkListDetails?.scheduleRepeatedDay !== '01') ?\r\n configData.checkListDetails?.scheduleRepeatedDay : ''}} month<span\r\n *ngIf=\"configData.checkListDetails?.scheduleRepeatedDay !== 01\">s\r\n </span>{{(configData.checkListDetails?.scheduleRepeatedMonthSetup === 'day') ?\r\n ('on day ' + configData.checkListDetails.scheduleRepeatedMonthWeek) :\r\n configData.checkListDetails?.scheduleRepeatedMonthSetup === 'date' ?\r\n updateMonthValue():\r\n updateSpecificValue()}}<span *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate | date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate\">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n <div class=\"my-3 user\" *ngIf=\"configData.checkListDetails?.schedule === 'range'\">\r\n Occurs every\r\n {{configData.checkListDetails?.scheduleWeekDays?.toString()}} <span\r\n *ngIf=\"showRangeValue\"> starting\r\n {{configData.checkListDetails?.configStartDate |\r\n date:'dd MMM YYYY'}} <span\r\n *ngIf=\"configData.checkListDetails?.configEndDate\">until\r\n {{configData.checkListDetails?.configEndDate | date:'dd MMM\r\n YYYY'}}</span></span></div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"section-left\" *ngIf=\"['custom'].includes(type)\">\r\n <div>\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\">\r\n <div class=\"config-heading\">Response Configuration</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" (click)=\"configaccordian()\"\r\n [ngClass]=\"{'rotate' : showconfig}\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"35\" height=\"35\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"showconfig\">\r\n <div cdkDropList>\r\n <div cdkDrag>\r\n <div class=\"col-lg-12\"\r\n [ngClass]=\"['onetime','daily'].includes(configData?.checkListDetails.schedule) || (configData?.checkListDetails.schedule === 'monthly' && configData?.checkListDetails.scheduleRepeatedMonthSetup !=='specific') ? 'bg-color-disabled' : ''\">\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.allowOnce ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowOnce\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"oneTime\"\r\n [disabled]=\"['onetime','daily'].includes(configData?.checkListDetails.schedule) || (configData?.checkListDetails.schedule === 'monthly' && configData?.checkListDetails.scheduleRepeatedMonthSetup !=='specific')\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"oneTime\">Only one\r\n time\r\n </label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"oneTime\">By\r\n enabling this, the response can be captured only\r\n once for\r\n this checklist <span *ngIf=\"showRangeValue\">from\r\n {{configData.checkListDetails.configStartDate}}\r\n <span\r\n *ngIf=\"configData.checkListDetails.configEndDate\">to\r\n {{configData.checkListDetails.configEndDate}}.</span></span></label>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\" configData?.checkListDetails?.allowedOverTime ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowedOverTime\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"fillResponse\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"fillResponse\">Fill response after configure\r\n time.</label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"fillResponse\">By enabling, the user can\r\n fill the\r\n checklist even after the above configured\r\n end-time.</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.allowedStoreLocation ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowedStoreLocation\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"geoFencing\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"geoFencing\">Geo\r\n fencing\r\n </label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"geoFencing\">By\r\n enabling, the checklist can be filled by the user\r\n only when\r\n inside the store.</label>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.allowedMultiSubmit ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.allowedMultiSubmit\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"allowedMultiSubmitSwitch\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"allowedMultiSubmitSwitch\">Allow multiple\r\n responses</label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"allowedMultiSubmitSwitch\">By enabling, the\r\n checklist\r\n can be filled multiple times in a day</label>\r\n </div>\r\n </div>\r\n <div\r\n class=\"fv-row checklistturnoff mt-4 fv-plugins-icon-containe\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.restrictAttendance ? true : false\"\r\n [(ngModel)]=\"configData.checkListDetails.restrictAttendance\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n type=\"checkbox\" id=\"restrictAttendance\">\r\n <label class=\"form-check-label sub ms-2\"\r\n for=\"restrictAttendance\">Restrict\r\n attendance</label><br>\r\n <label class=\"form-check-label subtext ms-2\"\r\n for=\"restrictAttendance\">By enabling, user can't be\r\n able to clockout without completing the\r\n task.</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <div class=\"section-left\" *ngIf=\"['custom'].includes(type)\">\r\n <div>\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\">\r\n <div class=\"config-heading\">Advance Configuration</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" (click)=\"advanceaccordian()\"\r\n [ngClass]=\"{'rotate' : showadvance}\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"35\" height=\"35\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"showadvance\">\r\n <div cdkDropList>\r\n <div cdkDrag>\r\n <div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex\">\r\n <div class=\"mt-2 form-check-label sub\">\r\n <span>Checklist Owner</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-check-label subtext\">\r\n Owners get access to manage the checklist\r\n </div>\r\n <div class=\"col-lg-12 mt-3\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">Can be managed by </div>\r\n </div>\r\n </div>\r\n <div class=\"w-80\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData?.checkListDetails?.owner\"\r\n (selectedList)=\"updateOwner($event)\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-5\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex\">\r\n <div class=\"mt-2 form-check-label sub\">\r\n <span>Approver</span>\r\n </div>\r\n <div class=\"form-check form-switch ms-5\">\r\n <input class=\"form-check-input mt-3\"\r\n [checked]=\"configData?.checkListDetails?.approver?.length ? true : false\"\r\n [(ngModel)]=\"approve\" type=\"checkbox\"\r\n id=\"approver\"\r\n (change)=\"updateConfigApprover($event)\"\r\n disabled>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-check-label subtext\">\r\n By enabling, the users will be able to approve the checklist\r\n </div>\r\n <div class=\"col-lg-12 mt-3\" *ngIf=\"approve\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">To be approved by </div>\r\n </div>\r\n </div>\r\n <div class=\"w-80\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData?.checkListDetails?.approver\"\r\n (selectedList)=\"updateApprover($event)\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-5\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex\">\r\n <div class=\"mt-2 form-check-label sub\">\r\n <span>Reminder</span>\r\n </div>\r\n <div class=\"form-check form-switch ms-5\">\r\n <input class=\"form-check-input mt-3\"\r\n [(ngModel)]=\"remainder\" type=\"checkbox\"\r\n id=\"oneTime\"\r\n (change)=\"updateConfigRemainder($event)\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-check-label subtext\">\r\n By enabling, the users will be reminded in the selected\r\n interval\r\n </div>\r\n <div class=\"col-lg-12 mt-3\" *ngIf=\"remainder\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">Notify user before</div>\r\n </div>\r\n </div>\r\n <div class=\"w-80\">\r\n <div class=\"w-100 d-flex\">\r\n <div class=\"d-flex align-items-center position-relative w-200px ,\"\r\n *ngFor=\"let loop of configData.checkListDetails?.remainder;let i=index\">\r\n <!-- <span *ngFor=\"let loop of timeLoop\"> -->\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g\r\n clip-path=\"url(#clip0_1487_47636)\">\r\n <path\r\n d=\"M10.0013 5.00033V10.0003L13.3346 11.667M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1487_47636\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <select class=\"form-select ps-14 me-5\"\r\n (change)=\"updateRemainder($event,i)\"\r\n [id]=\"'remainder'+ i\">\r\n <option\r\n *ngFor=\"let time of updateTimeLoop(i)\"\r\n class=\"h-200px\"\r\n [selected]=\"loop === time\"\r\n [value]=\"time\">{{time}} mins\r\n </option>\r\n </select>\r\n <!-- </span> -->\r\n </div>\r\n <div *ngIf=\"configData.checkListDetails.remainder.length < 3\"\r\n class=\"ms-5\">\r\n <button class=\"btn btn-sm btn-outline\"\r\n (click)=\"updateLoop()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10.0013 4.16699V15.8337M4.16797 10.0003H15.8346\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"remainder\" class=\"mt-2 user\">\r\n Send Alerts <span\r\n *ngFor=\"let item of configData.checkListDetails.remainder;let i=index\"><span\r\n *ngIf=\"i !== configData.checkListDetails.remainder.length-1 && i !== 0\">\r\n ,</span><span\r\n *ngIf=\"i === configData.checkListDetails.remainder.length-1 && i !== 0\">\r\n and</span> {{item}}mins </span>before the checklist\r\n end time\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <div *ngIf=\"['eyetest'].includes(type)\" class=\"mt-6 mx-4 sub\">Store opens at <span\r\n class=\"fw-600\"><u>{{configData?.openTime}}</u></span> and closes\r\n at <span class=\"fw-600\"><u>{{configData?.closeTime}}</u></span>, everyday. <div\r\n class=\"separator mt-8\"></div>\r\n </div>\r\n <div *ngIf=\"type === 'unattended'\" class=\"mt-6 mx-4 sub\">\r\n Time taken to assist by staff &lt;= 1 mins | Staff to customer time spent &lt;=1\r\n mins\r\n <!-- Store opens at <span\r\n class=\"fw-600\"><u>{{configData?.openTime}}</u></span> and closes\r\n at <span class=\"fw-600\"><u>{{configData?.closeTime}}</u></span>, everyday. <div\r\n class=\"separator mt-8\"></div> -->\r\n </div>\r\n <div *ngIf=\"type !=='custom'\">\r\n <div *ngIf=\"!['eyetest','halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"separator mt-8\"></div>\r\n <h2 class=\"section-leftheading mt-8\">Notify Alerts\r\n <span class=\"mx-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\">\r\n <path\r\n d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1874_66195\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </h2>\r\n <div *ngIf=\"['mobileusagedetection'].includes(type)\" class=\"col-md-12 mt-8\">\r\n <div class=\"row mt-4\">\r\n <div class=\"col-md-2 mt-2 \">\r\n <span class=\"mx-4 sub\">If usage exceeds</span>\r\n </div>\r\n <div class=\"col-lg-1\">\r\n <div class=\"fv-row mb-5 fv-plugins-icon-container flex flex-column\">\r\n\r\n <input\r\n class=\"form-control form-control-solid text-center w-55px\"\r\n [(ngModel)]=\"configData.aiConfig.mobileDetection.usageExceed\"\r\n type=\"text\" (keypress)=\"omit_special_char($event)\"\r\n autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (input)=\"validateLimit($event)\" />\r\n <span class=\"text-danger usageerror\" *ngIf=\"errormsg\">Please\r\n enter event count\r\n between 15 to 999</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mt-2\">\r\n <span class=\"sub\">detections per day</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['uniformdetection','mobileusagedetection','scrum','cleaning','storeopenandclose','unattended','packageConfiguration','staffleftinthemiddle','customerunattended','outsidebusinesshoursqueuetracking','halfshutter','tvcompliance'].includes(type)\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"col-lg-2\">\r\n <div class=\"d-flex align-items-center my-5\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mx-4\">Send Alert to </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-9\">\r\n <div class=\"fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.alerts.users\"\r\n (selectedList)=\"updateAlert($event,'user')\"></lib-chip-dropdown>\r\n <!-- <lib-chip-dropdown [data]=\"alertUsers\" [selectedData]=\"configData?.checkListDetails?.owner\"\r\n (selectedList)=\"updateOwner($event)\"></lib-chip-dropdown> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Schedule Checklist -->\r\n <div *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <div>\r\n <h2 class=\"section-leftheading\">Schedule Checklist </h2>\r\n </div>\r\n <div class=\"schedule-config-description mb-6\">Set the desired time to run the\r\n checklist</div>\r\n <div>\r\n <div *ngIf=\"['halfshutter'].includes(type)\"\r\n class=\"d-flex align-items-center p-2 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-2\">\r\n This checklist will run based on each store\u2019s opening and closing\r\n time. You can view store timings in the 'Assign Stores' section\r\n below.\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"row ng-star-inserted\" *ngIf=\"['halfshutter'].includes(type)\">\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\"> Start Detection for a\r\n duration, </div>\r\n </div>\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.halfshutter.schedule.afterOpenTime\"\r\n required>\r\n <option *ngFor=\"let time of scheduleTimeConfig\" [value]=\"time\">\r\n {{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header me-3\"> minutes after Store Open\r\n time and </div>\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.halfshutter.schedule.beforeCloseTime\"\r\n required>\r\n <option *ngFor=\"let time of scheduleTimeConfig\" [value]=\"time\">\r\n {{ time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes before Store Close\r\n time </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-4 mb-4\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"sched\" id=\"std\"\r\n [(ngModel)]=\"scheduletype\" value=\"standard\">\r\n <label class=\"small fw-medium\" for=\"std\">Standard Store Open & Close\r\n Time</label>\r\n </div>\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"sched\" id=\"custom\"\r\n [(ngModel)]=\"scheduletype\" value=\"custom\">\r\n <label class=\"small fw-medium\" for=\"custom\">Custom Time</label>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-3 mb-4\"\r\n *ngIf=\"scheduletype==='custom'\">\r\n <span class=\"fw-medium text-dark\">Start at</span>\r\n <div class=\"time-input-wrapper\">\r\n <input type=\"time\" class=\"form-control time-field\"\r\n [(ngModel)]=\"schedulestartTime\">\r\n <i class=\"bi bi-clock\"></i>\r\n </div>\r\n\r\n <span class=\"fw-medium text-dark ms-2\">Ends at</span>\r\n <div class=\"time-input-wrapper\">\r\n <input type=\"time\" class=\"form-control time-field\"\r\n [(ngModel)]=\"scheduleendTime\">\r\n <i class=\"bi bi-clock\"></i>\r\n </div>\r\n </div>\r\n <hr style=\"border:1px solid #cbcdd1\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"fw-bold small me-3\">Set recurrence</span>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n [(ngModel)]=\"recurrenceStatus\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"recurrenceStatus\" class=\"fade-in mt-3\">\r\n <div class=\"d-flex align-items-center gap-2 mb-4\">\r\n <span class=\"text-secondary-blue fw-medium\">Repeat every</span>\r\n\r\n <select class=\"form-select custom-select shadow-none\"\r\n [(ngModel)]=\"recurrencetime\">\r\n <option [value]=\"1\">1</option>\r\n <option [value]=\"2\">2</option>\r\n <option [value]=\"3\">3</option>\r\n <option [value]=\"4\">4</option>\r\n <option [value]=\"5\">5</option>\r\n <option [value]=\"6\">6</option>\r\n <option [value]=\"7\">7</option>\r\n <option [value]=\"8\">8</option>\r\n </select>\r\n\r\n <span class=\"text-secondary-blue fw-medium\">Hours</span>\r\n </div>\r\n\r\n <!-- Row 3: Summary Text -->\r\n <p class=\"summary-text\">\r\n Occurs every {{recurrencetime}} Hours between\r\n <span *ngIf=\"scheduletype!=='custom'\">Store Open & Close Time</span>\r\n <span *ngIf=\"scheduletype==='custom'\">{{schedulestartTime}}\r\n \u2013{{scheduleendTime}}</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Detection Areas -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['mobileusagedetection','outsidebusinesshoursqueuetracking','halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <h2 class=\"section-leftheading\">Detection Areas\r\n <!-- <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\"> <path d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g>\r\n <defs> <clipPath id=\"clip0_1874_66195\"> <rect width=\"16\" height=\"16\" fill=\"white\" /> </clipPath> </defs>\r\n </svg>\r\n </span> -->\r\n </h2>\r\n\r\n <div *ngIf=\"configData?.product.includes('tangoZone')\" class=\"row ng-star-inserted\">\r\n <div *ngIf=\"configData?.product.includes('tangoZone')\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mb-4\" *ngIf=\"['mobileusagedetection'].includes(type)\">\r\n Detect mobile usage except </div>\r\n <div class=\"schedule-config-description mb-6\"\r\n *ngIf=\"['outsidebusinesshoursqueuetracking','halfshutter','tvcompliance'].includes(type)\">\r\n Checklist will run on this Zone </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"configData?.product.includes('tangoZone')\">\r\n <!-- <lib-chip-dropdown [data]=\"zoneList\" [selectedData]=\"configData.aiConfig?.detectionArea\" (selectedList)=\"updateZone($event)\"></lib-chip-dropdown> -->\r\n <div class=\"border border-2 p-3 rounded\" style=\"min-height: 44px;\"> <span\r\n class=\"badge badge-light-default mx-2\"\r\n *ngFor=\"let item of zoneList;let i=index\">{{item.name}}</span></div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!configData?.product.includes('tangoZone')\"\r\n class=\"row ng-star-inserted mx-4\">\r\n <div *ngIf=\"!configData?.product.includes('tangoZone')\"\r\n class=\"card mt-3 p-3 border border-1\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex align-items-center\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\"\r\n viewBox=\"0 0 90 90\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"75.6666\" height=\"75.6666\"\r\n rx=\"37.8333\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"75.6666\" height=\"75.6666\"\r\n rx=\"37.8333\" stroke=\"#EAF8FF\" stroke-width=\"13.5119\" />\r\n <path\r\n d=\"M45.4287 37.9157L44.8683 38.2416L45.1709 38.815L47.7248 43.6539C48.3333 44.8068 49.8697 45.1058 50.8961 44.3291L50.8965 44.3288L54.8678 41.3181L55.2485 41.0295L55.1912 41.328L53.1546 51.9421C52.9711 52.8889 52.0879 53.6161 51.0099 53.6161H38.6549C37.5722 53.6161 36.6903 52.8848 36.5106 51.9439L36.5105 51.9433L34.4736 41.328L34.4163 41.0295L34.797 41.3181L38.7683 44.3288L38.7687 44.3291C39.7951 45.1058 41.3315 44.8068 41.94 43.6539L44.4939 38.815L44.7965 38.2416L44.2361 37.9157C43.9174 37.7302 43.7252 37.4107 43.7252 37.064C43.7252 36.5379 44.1856 36.0506 44.8324 36.0506C45.4792 36.0506 45.9396 36.5379 45.9396 37.064C45.9396 37.4074 45.7465 37.7308 45.4287 37.9157ZM55.8547 40.7798H55.3197L54.9903 40.3617C54.8544 40.1892 54.7787 39.984 54.7787 39.7664C54.7787 39.2403 55.2391 38.753 55.8859 38.753C56.5326 38.753 56.9931 39.2403 56.9931 39.7664C56.9931 40.2925 56.5326 40.7798 55.8859 40.7798H55.8858H55.8858H55.8857H55.8857H55.8856H55.8856H55.8855H55.8855H55.8854H55.8854H55.8853H55.8852H55.8852H55.8851H55.8851H55.885H55.885H55.8849H55.8849H55.8848H55.8848H55.8847H55.8847H55.8846H55.8845H55.8845H55.8844H55.8844H55.8843H55.8843H55.8842H55.8842H55.8841H55.884H55.884H55.8839H55.8839H55.8838H55.8838H55.8837H55.8837H55.8836H55.8835H55.8835H55.8834H55.8834H55.8833H55.8833H55.8832H55.8831H55.8831H55.883H55.883H55.8829H55.8829H55.8828H55.8827H55.8827H55.8826H55.8826H55.8825H55.8825H55.8824H55.8823H55.8823H55.8822H55.8822H55.8821H55.8821H55.882H55.8819H55.8819H55.8818H55.8818H55.8817H55.8816H55.8816H55.8815H55.8815H55.8814H55.8813H55.8813H55.8812H55.8812H55.8811H55.8811H55.881H55.8809H55.8809H55.8808H55.8808H55.8807H55.8806H55.8806H55.8805H55.8805H55.8804H55.8803H55.8803H55.8802H55.8802H55.8801H55.88H55.88H55.8799H55.8798H55.8798H55.8797H55.8797H55.8796H55.8795H55.8795H55.8794H55.8794H55.8793H55.8792H55.8792H55.8791H55.8791H55.879H55.8789H55.8789H55.8788H55.8787H55.8787H55.8786H55.8786H55.8785H55.8784H55.8784H55.8783H55.8782H55.8782H55.8781H55.8781H55.878H55.8779H55.8779H55.8778H55.8777H55.8777H55.8776H55.8776H55.8775H55.8774H55.8774H55.8773H55.8772H55.8772H55.8771H55.8771H55.877H55.8769H55.8769H55.8768H55.8767H55.8767H55.8766H55.8766H55.8765H55.8764H55.8764H55.8763H55.8762H55.8762H55.8761H55.876H55.876H55.8759H55.8759H55.8758H55.8757H55.8757H55.8756H55.8755H55.8755H55.8754H55.8753H55.8753H55.8752H55.8751H55.8751H55.875H55.875H55.8749H55.8748H55.8748H55.8747H55.8746H55.8746H55.8745H55.8744H55.8744H55.8743H55.8742H55.8742H55.8741H55.8741H55.874H55.8739H55.8739H55.8738H55.8737H55.8737H55.8736H55.8735H55.8735H55.8734H55.8733H55.8733H55.8732H55.8731H55.8731H55.873H55.873H55.8729H55.8728H55.8728H55.8727H55.8726H55.8726H55.8725H55.8724H55.8724H55.8723H55.8722H55.8722H55.8721H55.872H55.872H55.8719H55.8718H55.8718H55.8717H55.8717H55.8716H55.8715H55.8715H55.8714H55.8713H55.8713H55.8712H55.8711H55.8711H55.871H55.8709H55.8709H55.8708H55.8707H55.8707H55.8706H55.8705H55.8705H55.8704H55.8703H55.8703H55.8702H55.8701H55.8701H55.87H55.87H55.8699H55.8698H55.8698H55.8697H55.8696H55.8696H55.8695H55.8694H55.8694H55.8693H55.8692H55.8692H55.8691H55.869H55.869H55.8689H55.8688H55.8688H55.8687H55.8686H55.8686H55.8685H55.8685H55.8684H55.8683H55.8683H55.8682H55.8681H55.8681H55.868H55.8679H55.8679H55.8678H55.8677H55.8677H55.8676H55.8675H55.8675H55.8674H55.8673H55.8673H55.8672H55.8672H55.8671H55.867H55.867H55.8669H55.8668H55.8668H55.8667H55.8666H55.8666H55.8665H55.8664H55.8664H55.8663H55.8662H55.8662H55.8661H55.8661H55.866H55.8659H55.8659H55.8658H55.8657H55.8657H55.8656H55.8655H55.8655H55.8654H55.8653H55.8653H55.8652H55.8652H55.8651H55.865H55.865H55.8649H55.8648H55.8648H55.8647H55.8646H55.8646H55.8645H55.8645H55.8644H55.8643H55.8643H55.8642H55.8641H55.8641H55.864H55.8639H55.8639H55.8638H55.8638H55.8637H55.8636H55.8636H55.8635H55.8634H55.8634H55.8633H55.8632H55.8632H55.8631H55.8631H55.863H55.8629H55.8629H55.8628H55.8627H55.8627H55.8626H55.8626H55.8625H55.8624H55.8624H55.8623H55.8622H55.8622H55.8621H55.8621H55.862H55.8619H55.8619H55.8618H55.8618H55.8617H55.8616H55.8616H55.8615H55.8614H55.8614H55.8613H55.8613H55.8612H55.8611H55.8611H55.861H55.861H55.8609H55.8608H55.8608H55.8607H55.8606H55.8606H55.8605H55.8605H55.8604H55.8603H55.8603H55.8602H55.8602H55.8601H55.86H55.86H55.8599H55.8599H55.8598H55.8597H55.8597H55.8596H55.8596H55.8595H55.8594H55.8594H55.8593H55.8593H55.8592H55.8591H55.8591H55.859H55.859H55.8589H55.8589H55.8588H55.8587H55.8587H55.8586H55.8586H55.8585H55.8584H55.8584H55.8583H55.8583H55.8582H55.8582H55.8581H55.858H55.858H55.8579H55.8579H55.8578H55.8578H55.8577H55.8576H55.8576H55.8575H55.8575H55.8574H55.8574H55.8573H55.8572H55.8572H55.8571H55.8571H55.857H55.857H55.8569H55.8568H55.8568H55.8567H55.8567H55.8566H55.8566H55.8565H55.8565H55.8564H55.8563H55.8563H55.8562H55.8562H55.8561H55.8561H55.856H55.856H55.8559H55.8559H55.8558H55.8557H55.8557H55.8556H55.8556H55.8555H55.8555H55.8554H55.8554H55.8553H55.8553H55.8552H55.8552H55.8551H55.855H55.855H55.8549H55.8549H55.8548H55.8548H55.8547H55.8547ZM34.6745 40.3617L34.3451 40.7798H33.8101H33.8101H33.81H33.81H33.8099H33.8099H33.8098H33.8097H33.8097H33.8096H33.8096H33.8095H33.8095H33.8094H33.8094H33.8093H33.8093H33.8092H33.8092H33.8091H33.809H33.809H33.8089H33.8089H33.8088H33.8088H33.8087H33.8087H33.8086H33.8086H33.8085H33.8084H33.8084H33.8083H33.8083H33.8082H33.8082H33.8081H33.8081H33.808H33.8079H33.8079H33.8078H33.8078H33.8077H33.8077H33.8076H33.8076H33.8075H33.8074H33.8074H33.8073H33.8073H33.8072H33.8072H33.8071H33.807H33.807H33.8069H33.8069H33.8068H33.8068H33.8067H33.8066H33.8066H33.8065H33.8065H33.8064H33.8063H33.8063H33.8062H33.8062H33.8061H33.8061H33.806H33.8059H33.8059H33.8058H33.8058H33.8057H33.8056H33.8056H33.8055H33.8055H33.8054H33.8053H33.8053H33.8052H33.8052H33.8051H33.805H33.805H33.8049H33.8049H33.8048H33.8047H33.8047H33.8046H33.8046H33.8045H33.8044H33.8044H33.8043H33.8043H33.8042H33.8041H33.8041H33.804H33.804H33.8039H33.8038H33.8038H33.8037H33.8037H33.8036H33.8035H33.8035H33.8034H33.8033H33.8033H33.8032H33.8032H33.8031H33.803H33.803H33.8029H33.8029H33.8028H33.8027H33.8027H33.8026H33.8025H33.8025H33.8024H33.8024H33.8023H33.8022H33.8022H33.8021H33.802H33.802H33.8019H33.8019H33.8018H33.8017H33.8017H33.8016H33.8015H33.8015H33.8014H33.8014H33.8013H33.8012H33.8012H33.8011H33.801H33.801H33.8009H33.8008H33.8008H33.8007H33.8007H33.8006H33.8005H33.8005H33.8004H33.8003H33.8003H33.8002H33.8001H33.8001H33.8H33.8H33.7999H33.7998H33.7998H33.7997H33.7996H33.7996H33.7995H33.7994H33.7994H33.7993H33.7993H33.7992H33.7991H33.7991H33.799H33.7989H33.7989H33.7988H33.7987H33.7987H33.7986H33.7985H33.7985H33.7984H33.7984H33.7983H33.7982H33.7982H33.7981H33.798H33.798H33.7979H33.7978H33.7978H33.7977H33.7976H33.7976H33.7975H33.7974H33.7974H33.7973H33.7973H33.7972H33.7971H33.7971H33.797H33.7969H33.7969H33.7968H33.7967H33.7967H33.7966H33.7965H33.7965H33.7964H33.7963H33.7963H33.7962H33.7961H33.7961H33.796H33.7959H33.7959H33.7958H33.7958H33.7957H33.7956H33.7956H33.7955H33.7954H33.7954H33.7953H33.7952H33.7952H33.7951H33.795H33.795H33.7949H33.7948H33.7948H33.7947H33.7946H33.7946H33.7945H33.7944H33.7944H33.7943H33.7943H33.7942H33.7941H33.7941H33.794H33.7939H33.7939H33.7938H33.7937H33.7937H33.7936H33.7935H33.7935H33.7934H33.7933H33.7933H33.7932H33.7931H33.7931H33.793H33.7929H33.7929H33.7928H33.7928H33.7927H33.7926H33.7926H33.7925H33.7924H33.7924H33.7923H33.7922H33.7922H33.7921H33.792H33.792H33.7919H33.7918H33.7918H33.7917H33.7916H33.7916H33.7915H33.7915H33.7914H33.7913H33.7913H33.7912H33.7911H33.7911H33.791H33.7909H33.7909H33.7908H33.7907H33.7907H33.7906H33.7905H33.7905H33.7904H33.7904H33.7903H33.7902H33.7902H33.7901H33.79H33.79H33.7899H33.7898H33.7898H33.7897H33.7896H33.7896H33.7895H33.7895H33.7894H33.7893H33.7893H33.7892H33.7891H33.7891H33.789H33.7889H33.7889H33.7888H33.7887H33.7887H33.7886H33.7886H33.7885H33.7884H33.7884H33.7883H33.7882H33.7882H33.7881H33.7881H33.788H33.7879H33.7879H33.7878H33.7877H33.7877H33.7876H33.7875H33.7875H33.7874H33.7874H33.7873H33.7872H33.7872H33.7871H33.787H33.787H33.7869H33.7869H33.7868H33.7867H33.7867H33.7866H33.7865H33.7865H33.7864H33.7864H33.7863H33.7862H33.7862H33.7861H33.786H33.786H33.7859H33.7859H33.7858H33.7857H33.7857H33.7856H33.7856H33.7855H33.7854H33.7854H33.7853H33.7852H33.7852H33.7851H33.7851H33.785H33.7849H33.7849H33.7848H33.7848H33.7847H33.7846H33.7846H33.7845H33.7845H33.7844H33.7843H33.7843H33.7842H33.7842H33.7841H33.784H33.784H33.7839H33.7839H33.7838H33.7837H33.7837H33.7836H33.7836H33.7835H33.7834H33.7834H33.7833H33.7833H33.7832H33.7831H33.7831H33.783H33.783H33.7829H33.7829H33.7828H33.7827H33.7827H33.7826H33.7826H33.7825H33.7824H33.7824H33.7823H33.7823H33.7822H33.7822H33.7821H33.782H33.782H33.7819H33.7819H33.7818H33.7818H33.7817H33.7816H33.7816H33.7815H33.7815H33.7814H33.7814H33.7813H33.7812H33.7812H33.7811H33.7811H33.781H33.781H33.7809H33.7809H33.7808H33.7807H33.7807H33.7806H33.7806H33.7805H33.7805H33.7804H33.7804H33.7803H33.7803H33.7802H33.7801H33.7801H33.78H33.78H33.7799H33.7799H33.7798H33.7798H33.7797H33.7797H33.7796H33.7795H33.7795H33.7794H33.7794H33.7793H33.7793H33.7792H33.7792H33.7791H33.7791H33.779H33.779H33.7789C33.1321 40.7798 32.6717 40.2925 32.6717 39.7664C32.6717 39.2403 33.1321 38.753 33.7789 38.753C34.4257 38.753 34.8861 39.2403 34.8861 39.7664C34.8861 39.984 34.8103 40.1892 34.6745 40.3617Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.35119\" />\r\n </svg></span>\r\n <div class=\"ms-3\">\r\n <div class=\"section-leftheading\">Exclude Zone</div>\r\n <div class=\"zone-subscription\">To add an Excluded Zone inside\r\n the store, please upgrade your plan and subscribe to\r\n TangoEye.</div>\r\n </div>\r\n </div>\r\n <div routerLink=\"/manage/settings/payment-subscription\"\r\n class=\"button btn btn-sm py-3 btn-primary d-flex\">\r\n <span>Upgrade plan</span><span><svg class=\"ms-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M11.3607 6.14453C11.7367 5.92578 11.9874 5.52891 11.9874 5.08203C11.9874 4.39141 11.397 3.83203 10.668 3.83203C9.93898 3.83203 9.34852 4.39141 9.34852 5.08203C9.34852 5.53203 9.59922 5.92578 9.97526 6.14453L8.08516 9.72578C7.78498 10.2945 7.00651 10.457 6.48203 10.0602L3.54297 7.83203C3.7079 7.62266 3.80686 7.36328 3.80686 7.08203C3.80686 6.39141 3.21641 5.83203 2.48741 5.83203C1.75842 5.83203 1.16797 6.39141 1.16797 7.08203C1.16797 7.77266 1.75842 8.33203 2.48741 8.33203C2.49401 8.33203 2.50391 8.33203 2.5105 8.33203L4.01797 16.1883C4.19939 17.1383 5.07352 17.832 6.09609 17.832H15.2398C16.2591 17.832 17.1332 17.1414 17.318 16.1883L18.8254 8.33203C18.832 8.33203 18.8419 8.33203 18.8485 8.33203C19.5775 8.33203 20.168 7.77266 20.168 7.08203C20.168 6.39141 19.5775 5.83203 18.8485 5.83203C18.1195 5.83203 17.5291 6.39141 17.5291 7.08203C17.5291 7.36328 17.628 7.62266 17.793 7.83203L14.8539 10.0602C14.3294 10.457 13.551 10.2945 13.2508 9.72578L11.3607 6.14453Z\"\r\n fill=\"white\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"separator mt-8\"></div> -->\r\n </div>\r\n\r\n <div *ngIf=\"['storeopenandclose'].includes(type)\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"sub mt-2\">Set Buffer Time</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeBufferTime($event)\"\r\n [checked]=\"configData.aiConfig.storeOpenClose.buffer.openTime > 0 || configData.aiConfig.storeOpenClose.buffer.closeTime > 0\">\r\n </span>\r\n </div>\r\n <div class=\"detectiontext mt-2\">When enabled, alerts will be paused during the\r\n buffer period</div>\r\n </div>\r\n\r\n <div *ngIf=\"checkBuffer || configData.aiConfig.storeOpenClose.buffer.openTime || configData.aiConfig.storeOpenClose.buffer.closeTime\"\r\n class=\"row ng-star-inserted\">\r\n <div class=\"d-flex align-items-center my-3\">\r\n <div class=\"section1 me-3\"> If Store Open time exceeds by </div>\r\n <div><input class=\"form-control form-control-solid p-3 text-center w-45px\"\r\n [(ngModel)]=\"configData.aiConfig.storeOpenClose.buffer.openTime\"\r\n type=\"text\" (keypress)=\"omit_special_char($event)\"\r\n autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (blur)=\"validateLimit($event)\" /></div>\r\n <div class=\"section1 ms-3\"> minutes </div>\r\n </div>\r\n <div class=\"d-flex align-items-center my-3\">\r\n <div class=\"section1 me-3\"> If Store Close time exceeds by </div>\r\n <div><input class=\"form-control form-control-solid p-3 text-center w-45px\"\r\n [(ngModel)]=\"configData.aiConfig.storeOpenClose.buffer.closeTime\"\r\n type=\"text\" (keypress)=\"omit_special_char($event)\"\r\n autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (blur)=\"validateLimit($event)\" /></div>\r\n <div class=\"section1 ms-3\"> minutes </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <div *ngIf=\"['scrum','cleaning'].includes(type) && clientId!=='452'\">\r\n <h2 class=\"section-leftheading mt-8\">Automatic Task\r\n <span class=\"form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n [(ngModel)]=\"configData.aiConfig.autoTask\"\r\n class=\"form-check-input mt-1 cursor-pointer\">\r\n </span>\r\n </h2>\r\n\r\n <div class=\"row ng-star-inserted\">\r\n <div class=\"col-lg-3\">\r\n <div class=\"d-flex align-items-center my-4\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mx-4\"> Select Approver </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-9\">\r\n <lib-chip-dropdown [data]=\"alertUsers\" [selectedData]=\"configData.approver\"\r\n (selectedList)=\"updateAlert($event,'approve')\"></lib-chip-dropdown>\r\n </div>\r\n\r\n </div>\r\n <div class=\"separator mt-8\"></div>\r\n </div>\r\n\r\n <!-- <div>\r\n <div class=\"d-flex\">\r\n <div><h2 class=\"section-leftheading mt-8\">{{type === 'mobileusagedetection' ? 'To be Acknowledged by' : 'Approver'}}</h2></div>\r\n <div><span class=\"form-check form-switch ms-3 mt-6\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\" class=\"form-check-input mt-3 cursor-pointer\">\r\n </span></div>\r\n </div>\r\n <span>By enabling, the users will be able to acknowledge the checklist</span>\r\n <div *ngIf=\"type === 'mobileusagedetection'\" class=\"col-md-12 mt-8\">\r\n <div class=\"row mt-4\">\r\n <div class=\"col-md-3 mt-2 \">\r\n <span class=\"mx-4 sub\">If usage exceeds</span>\r\n </div>\r\n <div class=\"col-lg-1\">\r\n <div class=\"fv-row mb-5 fv-plugins-icon-container flex flex-column\">\r\n \r\n <input class=\"form-control form-control-solid w-55px\"\r\n [(ngModel)]=\"configData?.checkListDetails.alert.usageExceeds\" type=\"text\"\r\n (keypress)=\"omit_special_char($event)\" autocomplete=\"off\" required minlength=\"2\" maxlength=\"3\"\r\n (blur)=\"validateLimit($event)\" />\r\n <span class=\"text-danger usageerror\" *ngIf=\"errormsg\">Please enter event count\r\n between 15 to 999</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mt-2\">\r\n <span class=\"sub\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row ng-star-inserted mt-3\">\r\n <div class=\"col-lg-3\">\r\n <div class=\"d-flex align-items-center my-5\">\r\n <div class=\"flex-grow-1\">\r\n <div class=\"sub mx-4\">To be approved by </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"col-lg-9\">\r\n <lib-chip-dropdown [data]=\"alertUsers\" [selectedData]=\"configData.checkListDetails.approver\"></lib-chip-dropdown>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"separator mt-8\"></div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Alert Configuration -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <h2 class=\"section-leftheading\">Alert Configuration\r\n <!-- <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\"> <path d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g>\r\n <defs> <clipPath id=\"clip0_1874_66195\"> <rect width=\"16\" height=\"16\" fill=\"white\" /> </clipPath> </defs>\r\n </svg>\r\n </span> -->\r\n </h2>\r\n <div>\r\n <div *ngIf=\"['halfshutter'].includes(type)\"\r\n class=\"d-flex align-items-center p-2 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Alerts will be sent, If the store shutter is left half opened during the\r\n configured open & close time\r\n </span>\r\n </div>\r\n </div>\r\n <div>\r\n <div *ngIf=\"['tvcompliance'].includes(type)\"\r\n class=\"d-flex align-items-center p-2 alert\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"text ms-3\">\r\n Alerts will be sent, when there is a breach happened between the\r\n configured time\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-3\"\r\n *ngIf=\"['halfshutter'].includes(type)\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Allow Buffer Time</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changealerttimeconfig($event)\"\r\n [checked]=\"configData.aiConfig.alertConfig.allowBuffer.enabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, alerts will be\r\n paused during the buffer period</div>\r\n </div>\r\n <div class=\"row ng-star-inserted\" *ngIf=\"alerttimekeyconfig\">\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\"> Store shutter can remain\r\n half-open, </div>\r\n </div>\r\n <div class=\"d-flex align-items-center my-1 mb-3\">\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.alertConfig.allowBuffer.afterOpenTime\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of alertTimeConfig\" [value]=\"time\">{{\r\n time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header me-3\"> minutes after store open\r\n time and </div>\r\n <div class=\"schedule-config-sub-header me-3\">\r\n <select class=\"form-select\"\r\n [(ngModel)]=\"configData.aiConfig.alertConfig.allowBuffer.beforeCloseTime\"\r\n (blur)=\"validateLimit($event)\" required>\r\n <option *ngFor=\"let time of alertTimeConfig\" [value]=\"time\">{{\r\n time }}</option>\r\n </select>\r\n </div>\r\n <div class=\"schedule-config-sub-header ms-3\"> minutes before store close\r\n time </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"threshold-container p-4\" *ngIf=\"['tvcompliance'].includes(type)\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Breached Detection Threshold</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input class=\"form-check-input custom-switch\" type=\"checkbox\"\r\n role=\"switch\" [(ngModel)]=\"isThresholdEnabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When enabled, detections over the\r\n configured daily limit are flagged as a breach</div>\r\n </div>\r\n <div>\r\n\r\n\r\n <div class=\"d-flex align-items-center gap-3 mt-4\" *ngIf=\"isThresholdEnabled\">\r\n <span class=\"text-secondary-blue fw-medium\">Flag, as breached if detections\r\n exceeds</span>\r\n\r\n <select class=\"form-select custom-select\" [(ngModel)]=\"detectionThreshold\"\r\n [disabled]=\"!isThresholdEnabled\">\r\n <option *ngFor=\"let opt of thresholdOptions\" [value]=\"opt\">{{ opt }}\r\n </option>\r\n </select>\r\n\r\n <span class=\"text-secondary-blue fw-medium\">in a day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Push Notifications -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Push Notifications</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n [checked]=\"configData.aiConfig.alertConfig.alertSendTo.enabled\"\r\n (change)=\"changenotificationconfig($event)\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Send notifications to Mobile, Web, or both -\r\n Configure as per your needs</div>\r\n </div>\r\n <div *ngIf=\"notificationkeyconfig\" class=\"mt-8\">\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2\">Mobile Notifications</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-4\">\r\n <div class=\"col-lg-1\"> Send to </div>\r\n <div class=\"col-lg-11 fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.alertConfig.alertSendTo.mobile\"\r\n (selectedList)=\"updateNotificationAlert($event,'user','mobile')\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-2 col-6\">Web Notifications</div>\r\n <div class=\"schedule-config-header mt-2 d-flex justify-content-end col-6\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"14\"\r\n viewBox=\"0 0 16 14\" fill=\"none\">\r\n <path\r\n d=\"M15.3346 1.66509V5.66509M15.3346 5.66509H11.3346M15.3346 5.66509L12.2413 2.75842C11.5248 2.04157 10.6384 1.51789 9.66476 1.23627C8.69114 0.95465 7.66204 0.924257 6.67349 1.14793C5.68495 1.3716 4.76917 1.84205 4.01161 2.51537C3.25406 3.18869 2.67941 4.04295 2.3413 4.99842M0.667969 12.3318V8.33176M0.667969 8.33176H4.66797M0.667969 8.33176L3.7613 11.2384C4.4778 11.9553 5.36422 12.479 6.33784 12.7606C7.31147 13.0422 8.34056 13.0726 9.32911 12.8489C10.3177 12.6252 11.2334 12.1548 11.991 11.4815C12.7485 10.8082 13.3232 9.9539 13.6613 8.99842\"\r\n stroke=\"#475467\" stroke-width=\"1.25\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"schedule-config-description mt-2 ms-3\"> Sync users from Mobile\r\n </span>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-1 cursor-pointer\"\r\n (change)=\"changesyncMobileWebconfig($event)\"\r\n [checked]=\"configData.aiConfig.alertConfig.alertSendTo.syncMobileWeb\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-4\">\r\n <div class=\"col-lg-1\"> Send to </div>\r\n <div class=\"col-lg-11 fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.alertConfig.alertSendTo.web\"\r\n (selectedList)=\"updateNotificationAlert($event,'user','web')\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Auto-Assign Tasks -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Auto-Assign Tasks</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeautotaskconfig($event)\"\r\n [checked]=\"configData.aiConfig.autoTaskConfig.enabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">On breach, tasks are auto-created and assigned\r\n to users</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-8\" *ngIf=\"autotaskkeyconfig\">\r\n <div class=\"col-lg-2\"> Select Approver </div>\r\n <div class=\"col-lg-10 fv-row fv-plugins-icon-container\">\r\n <lib-chip-dropdown [data]=\"alertUsers\"\r\n [selectedData]=\"configData.aiConfig.autoTaskConfig.approver\"\r\n (selectedList)=\"updateAutoTask($event,'user')\"></lib-chip-dropdown>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Export data -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type)\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Export data</div>\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeexportconfig($event)\"\r\n [checked]=\"configData.aiConfig.exportConfig.enabled\">\r\n </span>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Export your data in the format you need</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mt-8\" *ngIf=\"exportkeyconfig\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"mt-5 mb-5 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'ALL'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('ALL')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n All\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'CSV'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('CSV')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n CSV\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'PDF'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('PDF')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n PDF\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'PPT'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('PPT')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n PPT\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\"\r\n [value]=\"'ZIP'\" (change)=\"changeExportValue($event)\"\r\n [checked]=\"selectedExportConfig.includes('ZIP')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">\r\n ZIP\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"['custom'].includes(type)\" class=\"card-body bg-white mt-3 rounded-4 px-7\">\r\n <div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div>\r\n <h2 class=\"section-leftheading \">Assign<span class=\"mx-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1874_66195)\">\r\n <path\r\n d=\"M8.00016 10.6673V8.00065M8.00016 5.33398H8.00683M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1874_66195\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></h2>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ms-5 mt-3 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input selected-radio me-3 cursor-pointer\" type=\"radio\"\r\n name=\"stores\" [checked]=\"storeCoverage\" (click)=\"selectRadio('store','change')\">\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">Assign Stores and Clusters</label>\r\n </div>\r\n <div class=\"form-check d-flex align-items-center ms-5\">\r\n <input class=\"form-check-input selected-radio me-3 cursor-pointer\" type=\"radio\"\r\n name=\"users\" [checked]=\"userCoverage\" (click)=\"selectRadio('user','change')\">\r\n <label class=\"uploadtext cursor-pointer fw-semibold\">Assign Users and Teams</label>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"storeCoverage && assignType ==='store'\"\r\n class=\"mt-5 ms-5 storeAssign sopTable d-flex\">\r\n <div>\r\n <input class=\"form-check-input h-14px w-14px mx-1\" type=\"checkbox\" name=\"flag\"\r\n [(ngModel)]=\"configData.checkListDetails.enableNewDeployedStore\">\r\n </div>\r\n <div> <span class=\"ms-2 lineHeight\">Auto assign to newly deployed stores</span> </div>\r\n </div>\r\n\r\n <div class=\"d-flex ms-5 align-items-end justify-content-between\">\r\n <div class=\"d-flex overflow-auto h-45px w-75 mt-5\">\r\n <ul *ngIf=\"storeCoverage\"\r\n class=\"nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap\">\r\n <li (click)=\"selectedTab('store')\" class=\"nav-item cursor-pointer h-100\"><span\r\n [ngClass]=\"assignType ==='store' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Stores</span>\r\n </li>\r\n <li (click)=\"selectedTab('cluster')\" class=\"nav-item cursor-pointer h-100\"><a\r\n [ngClass]=\"assignType ==='cluster' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Clusters</a></li>\r\n </ul>\r\n <ul *ngIf=\"userCoverage\"\r\n class=\"nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap\">\r\n <li (click)=\"selectedTab('user')\" class=\"nav-item cursor-pointer h-100\"><a\r\n [ngClass]=\"assignType ==='user' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Users</a>\r\n </li>\r\n <li (click)=\"selectedTab('team')\" class=\"nav-item cursor-pointer h-100\"><a\r\n [ngClass]=\"assignType ==='team' ? 'active bg-light-primary text-primary' :''\"\r\n class=\"nav-link text-active-primary m-0 px-5\">Teams</a></li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"!['cluster','team'].includes(assignType)\">\r\n <a *ngIf=\"storeCoverage\" (click)=\"addStoreComponent()\" type=\"button\"\r\n class=\"btn btn-outline px-4 ng-star-inserted mt-8\" style=\"white-space: nowrap;\"\r\n tabindex=\"0\"><span class=\"svg-icon svg-icon-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"create1\">Assign Store</span></a>\r\n <a *ngIf=\"userCoverage\" (click)=\"addStoreComponent()\" type=\"button\"\r\n class=\"btn btn-outline px-4 ng-star-inserted mt-8\" style=\"white-space: nowrap;\"\r\n tabindex=\"0\"><span class=\"svg-icon svg-icon-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"create1\">Assign User</span></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-100 ms-5\">\r\n <div class=\"d-flex align-items-center my-5 w-20\">\r\n <div class=\"flex-grow-2\">\r\n <div class=\"sub\">Selected <span>{{assignType | titlecase}}s</span> </div>\r\n </div>\r\n </div>\r\n <!-- *ngIf=\"!['cluster','team'].includes(assignType)\" -->\r\n <div class=\"w-100 pe-5\">\r\n <lib-multi-chip-dropdown *ngIf=\"storeList\" [items]=\"storeList\" [multi]=\"true\"\r\n [searchField]=\"['storeName','clusterName','storeId','userName','teamName']\"\r\n [searchKey]=\"searchKey\" [idField]=\"'_id'\" (selected)=\"updateAssign($event)\"\r\n (removed)=\"removedChip($event)\"\r\n [selectedValues]=\"configData?.checkListDetails?.assign\"></lib-multi-chip-dropdown>\r\n </div>\r\n <!-- <div *ngIf=\"['cluster','team'].includes(assignType)\" class=\"w-100 pe-5\">\r\n <lib-multi-chip-dropdown *ngIf=\"storeList\" [items]=\"storeList\" [multi]=\"true\" [searchField]=\"['storeName','clusterName','storeId','userName','teamName']\" [searchKey]=\"searchKey\" [idField]=\"'_id'\"\r\n (selected)=\"updateAssign($event)\" (removed)=\"removedChip($event)\" [selectedValues]=\"configData?.checkListDetails?.assign\"></lib-multi-chip-dropdown>\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"\" *ngIf=\"tableData.length || tableFilter.length || !showImage\">\r\n\r\n <div *ngIf=\"!tableLoading && tableArray?.length\"\r\n class=\"card-body px-0 mt-0 pt-0 pb-0 mx-4 mb-5\">\r\n <div class=\" w-100\">\r\n <div class=\"table-header mt-5 d-flex align-items-center justify-content-between\">\r\n <div class=\"table-title\">Selected <span>{{assignType | titlecase}}s</span> List\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-start\">\r\n <div class=\"me-3\">\r\n <input type=\"text\" data-kt-subscription-table-filter=\"search\"\r\n (change)=\"searchTableData()\" [(ngModel)]=\"tableFilter\"\r\n class=\"form-control form-control-solid w-200px ps-5 mx-1 me-4\"\r\n autocomplete=\"off\" autocapitalize=\"none\" spellcheck=\"false\"\r\n style=\"text-transform: none\" placeholder=\"Search...\">\r\n </div>\r\n\r\n <div *ngIf=\"!['cluster','team'].includes(assignType)\"\r\n class=\"position-relative w-100 mt-5 mb-5\">\r\n <button type=\"button\"\r\n class=\"btn py-3 btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\">\r\n <span class=\"me-3 cursor-pointer\" #upload\r\n (click)=\"file.click()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <span class=\"template-dropdown bg-white ms-3\">BulkUpload\r\n </span>\r\n </span>\r\n <span><input style=\"display: none;\" type=\"file\" #file\r\n id=\"kt_account_team_size_select_1\"\r\n (change)=\"onFileUpload($event)\" /></span>\r\n <span class=\"subtitle mx-3 me-2\"> | </span>\r\n <span class=\"cursor-pointer\" (click)=\"openDropdown($event)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 9L12 15L18 9\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n\r\n <div *ngIf=\"dropDown\"\r\n class=\"card template-dropdown h-40px w-100 position-absolute rounded-3 z-1 top-50px end-0\">\r\n <ul class=\"list-unstyled mb-0 w-auto cursor-pointer\"\r\n (click)=\"bulkuploadModel()\">\r\n <li class=\"px-5 fw-semibold cursor-pointer py-2\">Download\r\n Template</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['cluster','team'].includes(assignType)\">\r\n <button type=\"button\"\r\n class=\"btn py-3 btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\"\r\n (click)=\"downloadTemplateV2()\">\r\n <span class=\"me-3 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M8.125 13.125H16.3562L14.7438 14.7438L15.625 15.625L18.75 12.5L15.625 9.375L14.7438 10.2562L16.3562 11.875H8.125V13.125Z\"\r\n fill=\"black\" />\r\n <path\r\n d=\"M13.75 8.75001V6.25001C13.7505 6.16776 13.7347 6.08622 13.7036 6.01007C13.6725 5.93392 13.6267 5.86466 13.5688 5.80626L9.19375 1.43126C9.13535 1.37333 9.06609 1.32751 8.98994 1.2964C8.91379 1.2653 8.83225 1.24953 8.75 1.25001H2.5C2.16848 1.25001 1.85054 1.38171 1.61612 1.61613C1.3817 1.85055 1.25 2.16849 1.25 2.50001V17.5C1.25 17.8315 1.3817 18.1495 1.61612 18.3839C1.85054 18.6183 2.16848 18.75 2.5 18.75H12.5C12.8315 18.75 13.1495 18.6183 13.3839 18.3839C13.6183 18.1495 13.75 17.8315 13.75 17.5V16.25H12.5V17.5H2.5V2.50001H7.5V6.25001C7.5 6.58153 7.6317 6.89947 7.86612 7.13389C8.10054 7.36831 8.41848 7.50001 8.75 7.50001H12.5V8.75001H13.75ZM8.75 6.25001V2.75626L12.2438 6.25001H8.75Z\"\r\n fill=\"black\" />\r\n </svg> <span class=\"template-dropdown bg-white ms-3\">Export\r\n </span>\r\n </span>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row mt-2\">\r\n <div class=\"col-lg-12\" *ngIf=\"!tableData?.length && !tableFilter && !showImage\">\r\n <div\r\n class=\"card-body my-8 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for the <span>{{assignType}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"pt-0 mx-4\" *ngIf=\"tableArray.length\">\r\n <div class=\"sopTable table-responsive overflow-hidden\">\r\n <div *ngIf=\"tableLoading\"\r\n 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>\r\n <div class=\"col-lg-12\" *ngIf=\"tableFilter && !tableData?.length\">\r\n <div\r\n class=\"card-body my-8 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for the\r\n <span>{{assignType}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body-sop\" *ngIf=\"tableData.length && !tableLoading\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"storeCoverage\" class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <span\r\n *ngIf=\"sortColumn === 'storeName' && sortBy !== 1 || sortColumn !== 'storeName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'storeName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userName')\">\r\n SPOC Name\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== 1 || sortColumn !== 'userName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">\r\n SPOC Email\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== 1 || sortColumn !== 'userEmail' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th *ngIf=\"assignType ==='cluster'\" class=\"text-align-left\">\r\n <div class=\"cursor-pointer\"\r\n (click)=\"sortData('clusterName')\">\r\n Cluster Name\r\n <span\r\n *ngIf=\"sortColumn === 'clusterName' && sortBy !== 1 || sortColumn !== 'clusterName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'clusterName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of tableData;let i=index\">\r\n <td>{{data.storeName}}\r\n </td>\r\n <td>{{data.userName ? data.userName : '--'}}</td>\r\n <td>{{data.userEmail ? data.userEmail : '--'}}</td>\r\n <td *ngIf=\"assignType === 'cluster'\">{{data.clusterName ?\r\n data.clusterName : '--'}}</td>\r\n </tbody>\r\n </table>\r\n <table *ngIf=\"userCoverage\" class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userName')\">\r\n User Name\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== 1 || sortColumn !== 'userName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">\r\n User Email\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== 1 || sortColumn !== 'userEmail' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'userEmail' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th *ngIf=\"assignType ==='team'\" class=\"text-align-left\">\r\n <div class=\"cursor-pointer\" (click)=\"sortData('teamName')\">\r\n Teams Name\r\n <span\r\n *ngIf=\"sortColumn === 'teamName' && sortBy !== 1 || sortColumn !== 'teamName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"sortColumn === 'teamName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of tableData;let i=index\">\r\n <td>\r\n <span\r\n class=\"form-check-label mx-4 line-height\">{{data.userName}}</span>\r\n </td>\r\n <td>{{data.userEmail ? data.userEmail : '--'}}</td>\r\n <td *ngIf=\"assignType ==='team'\">{{data.teamName ? data.teamName\r\n : '--'}}</td>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"size\" [currentPage]=\"currentValue\"\r\n [totalItems]=\"recordsTotal\" [paginationSizes]=\"paginationSize\"\r\n [pageSize]=\"size\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n <br>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"tableLoading1 && showImage\"\r\n 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>\r\n <div>\r\n <div *ngIf=\"!tableArray.length && !tableLoading1 && !tableFilter.length && showImage && !configData.checkListDetails.assignedUsers && !['cluster','team'].includes(assignType)\"\r\n class=\"row mb-6\">\r\n <div class=\"col-lg-12 assignpadding mb-10 mt-10\">\r\n <div class=\"row\">\r\n <div class=\"hr w-100 border border-1 position-relative\">\r\n <div\r\n class=\"position-absolute template-dropdown orposition bg-white w-100px\">\r\n or</div>\r\n </div>\r\n <div class=\"uploadpadding mt-10\">\r\n <ul\r\n class=\"subtext list-unstyled d-flex flex-column align-items-center mx-4\">\r\n <li>Use the template to upload multiple <span\r\n *ngIf=\"storeCoverage\">stores</span> <span\r\n *ngIf=\"userCoverage\">users</span> at once.</li>\r\n <li> Download the template here - <span (click)=\"downloadTemplateV2()\"\r\n class=\"cursor-pointer\"><span class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span><span class=\"text-primary\">Download\r\n Template</span></span></li>\r\n <li> Add your data to the Template File</li>\r\n </ul>\r\n </div>\r\n <div class=\"w-100 border border-2 text-center border-dashed rounded-3 border-primary p-5\"\r\n (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\" (click)=\"file.click()\">\r\n <div class=\"\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"46\"\r\n viewBox=\"0 0 46 46\" fill=\"none\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\"\r\n stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_7979_5202)\">\r\n <path\r\n d=\"M26.3335 26.3332L23.0002 22.9999M23.0002 22.9999L19.6669 26.3332M23.0002 22.9999V30.4999M29.9919 28.3249C30.8047 27.8818 31.4467 27.1806 31.8168 26.3321C32.1868 25.4835 32.2637 24.5359 32.0354 23.6388C31.807 22.7417 31.2865 21.9462 30.5558 21.3778C29.8251 20.8094 28.9259 20.5005 28.0002 20.4999H26.9502C26.698 19.5243 26.2278 18.6185 25.5752 17.8507C24.9225 17.0829 24.1042 16.4731 23.182 16.0671C22.2597 15.661 21.2573 15.4694 20.2503 15.5065C19.2433 15.5436 18.2578 15.8085 17.3679 16.2813C16.4779 16.7541 15.7068 17.4225 15.1124 18.2362C14.518 19.05 14.1158 19.9879 13.936 20.9794C13.7563 21.9709 13.8036 22.9903 14.0746 23.961C14.3455 24.9316 14.8329 25.8281 15.5002 26.5832\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7979_5202\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></div>\r\n <div class=\"storetext cursor-pointer mb-2 fw-bold\"><span\r\n class=\"text-primary text-decoration-underline\">Click To\r\n Upload</span>\r\n or drag and drop\r\n </div>\r\n <div class=\"headeralign fw-400\">the data added template file for processing.\r\n </div>\r\n <input style=\"visibility: hidden;\" type=\"file\" #file\r\n id=\"kt_account_team_size_select_1\" (change)=\"onFileUpload($event)\" />\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"!tableArray.length && !tableLoading1 && !tableFilter.length && showImage && !configData.checkListDetails.assignedUsers && ['cluster','team'].includes(assignType)\"\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div\r\n class=\"card-body my-8 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for the <span>{{assignType}}</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"type !== 'custom'\" class=\"\">\r\n <lib-assign [configData]=\"configData\" [uploadData]=\"uploadData\" [configureType]=\"configureType\"\r\n (dataToParent)=\"handleDataFromChild($event)\"></lib-assign>\r\n </div>\r\n\r\n <!-- Advanced Configuration -->\r\n <div class=\"card-body bg-white rounded-4 px-7 mt-3\"\r\n *ngIf=\"['halfshutter','tvcompliance'].includes(type) && userType === 'tango'\">\r\n <div class=\"schedule\">\r\n <div>\r\n <div>\r\n <div>\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header\">Advanced Configuration</div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header\">Data Processing</div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">When you want to process this\r\n checklist report</div>\r\n <div class=\"d-flex align-items-center me-6\">\r\n <div class=\"col-sm-12 cursor-pointer border border-2 rounded-4 px-3 mb-2 mt-2 ms-4 me-4\"\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'live' ? 'advancedConfigureAcite': ''\">\r\n <div class=\"d-flex h-70px rounded-3 p-3 mt-2\">\r\n <span class=\"mt-1\">\r\n <input id=\"dataprocessing\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"dataprocessing\" value=\"live\"\r\n (change)=\"changeDataprocessing('live')\"\r\n [(ngModel)]=\"selectedDataprocessing\">\r\n </span>\r\n <span class=\"\">\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'live' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Live Notifications</span>\r\n <span class=\"schedule-config-description mt-2\">Triggered\r\n immediately whenever a detection or breach\r\n occurs</span>\r\n </div>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center me-6\">\r\n <div class=\"col-sm-12 cursor-pointer border border-2 rounded-4 px-3 mb-2 mt-2 ms-4 me-4\"\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'eod' ? 'advancedConfigureAcite': ''\">\r\n <div class=\"d-flex h-70px rounded-3 p-3 mt-2\">\r\n <span class=\"mt-1\">\r\n <input id=\"dataprocessing\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"dataprocessing\" value=\"eod\"\r\n (change)=\"changeDataprocessing('eod')\"\r\n [(ngModel)]=\"selectedDataprocessing\">\r\n </span>\r\n <span class=\"\">\r\n <div class=\"ms-3 d-flex flex-column\">\r\n <span\r\n [ngClass]=\"configData?.aiConfig?.advancedConfig?.dataProcessing === 'eod' ? 'text-primary' : ''\"\r\n class=\"user fw-bold\">Daily (EOD)</span>\r\n <span class=\"schedule-config-description mt-2\">Full\r\n detection/breach history delivered the next day for\r\n smarter decisions</span>\r\n </div>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Detected Status</div>\r\n <div class=\"d-flex\">\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changedetectedstatusconfig($event)\"\r\n [checked]=\"configData.aiConfig.advancedConfig.detectedStatus.enabled\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Choose which detections to\r\n display on dashboard</div>\r\n <div class=\"d-flex align-items-center\" *ngIf=\"detectedstatuskeyconfig\">\r\n <div class=\"mt-5 mb-5 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\"\r\n type=\"checkbox\" [value]=\"'detected'\"\r\n (change)=\"changeDetectionStatus($event)\"\r\n [checked]=\"selectedDetectionStatus.includes('detected')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold ms-2\">\r\n Breached Detections\r\n </label>\r\n </div>\r\n\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input class=\"form-check-input h-14px w-14px mx-1\"\r\n type=\"checkbox\" [value]=\"'nondetected'\"\r\n (change)=\"changeDetectionStatus($event)\"\r\n [checked]=\"selectedDetectionStatus.includes('nondetected')\" />\r\n <label class=\"uploadtext cursor-pointer fw-semibold ms-2\">\r\n Non Breached Detections\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"border border-2 rounded-4 px-3 mb-2 mt-2\">\r\n <div class=\"my-5\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"schedule-config-header mt-3\">Audit Required</div>\r\n <div class=\"d-flex\">\r\n <span class=\"form-check form-switch ms-3\">\r\n <input type=\"checkbox\" role=\"switch\" id=\"support\"\r\n class=\"form-check-input mt-3 cursor-pointer\"\r\n (change)=\"changeauditrequiredconfig($event)\"\r\n [checked]=\"configData.aiConfig.advancedConfig.auditConfig.enabled\">\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"schedule-config-description mt-2\">Is an audit required for this\r\n checklist</div>\r\n\r\n <div class=\"border border-2 rounded-4 px-3 mb-4 mt-4\"\r\n *ngIf=\"auditkeyconfig\">\r\n <div class=\"schedule-config-header mt-4\">Input Source File Type</div>\r\n <div class=\"schedule-config-description mt-2\">Is an audit required for\r\n this checklist</div>\r\n <div class=\"ms-8 mt-5 mb-5 d-flex\">\r\n <div class=\"form-check d-flex align-items-center\">\r\n <input id=\"image\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"stores\" value=\"image\"\r\n (change)=\"changeInputSourceFileRadio('image')\"\r\n [(ngModel)]=\"selectedSource\">\r\n <label for=\"image\"\r\n class=\"uploadtext cursor-pointer fw-semibold\">Image</label>\r\n </div>\r\n <div class=\"form-check d-flex align-items-center ms-5\">\r\n <input id=\"video\"\r\n class=\"form-check-input selected-radio me-3 cursor-pointer\"\r\n type=\"radio\" name=\"stores\" value=\"video\"\r\n (change)=\"changeInputSourceFileRadio('video')\"\r\n [(ngModel)]=\"selectedSource\">\r\n <label for=\"video\"\r\n class=\"uploadtext cursor-pointer fw-semibold\">Video</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n<ng-template #bulkupload let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-5\">\r\n <div class=\"card-title mt-3\">\r\n <div class=\"bg-light-primary rounded-5 w-40px h-40px d-flex justify-content-center align-items-center\">\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=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div> <span class=\"config-heading fw-semibold ms-5 w-auto\">Bulk Upload</span>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"flex-column\">\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">Step 1 - <a\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"downloadTemplateV2()\">Download the\r\n template here</a></div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">Step2 - Add your data to the Template File with\r\n existing <span *ngIf=\"storeCoverage\">store</span> <span *ngIf=\"userCoverage\">user</span> data</div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">Step3 - Upload it below for processing</div>\r\n\r\n <div class=\"fw-bold storeAssign mt-10\">**Note : On upload, all the existing data will be replaced</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"model.close()\">Cancel</button>\r\n <button class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"file1.click()\">Upload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event)\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Assign <span\r\n *ngIf=\"storeCoverage\">Stores</span> <span *ngIf=\"userCoverage\">Users</span></span></div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total <span *ngIf=\"storeCoverage\">Stores</span> <span\r\n *ngIf=\"userCoverage\">Users</span></div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">\r\n {{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n <div *ngIf=\"!showStore&&!showTeam&&!showCluster&&!showUser&&!showInactive\">You're about to assign\r\n {{getStoreCounts(excelData)}} <span *ngIf=\"storeCoverage\">stores</span><span\r\n *ngIf=\"userCoverage\">users</span> to the checklist. Are you sure want to proceed?</div>\r\n <div *ngIf=\"storeCoverage && showStore\" class=\"mt-3\">Store <span\r\n *ngFor=\"let store of validatedStore;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a routerLink=\"/manage/stores\" [queryParams]=\"{tyoe: 'stores'}\"\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"closeactivepopup()\">Onboard Stores</a>\r\n </div>\r\n <div *ngIf=\"userCoverage && showUser\" class=\"mt-3\">User <span\r\n *ngFor=\"let store of validatedUser;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a class=\"text-decoration-underline cursor-pointer\"\r\n (click)=\"closeactivepopup();confirmUserpopup()\">Onboard Users</a></div>\r\n <div *ngIf=\"userCoverage && showTeam\" class=\"mt-3\">Team <span\r\n *ngFor=\"let store of validatedTeam;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a routerLink=\"/manage/users/client\"\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"closeactivepopup()\">Create Team</a>\r\n </div>\r\n <div *ngIf=\"storeCoverage && showCluster\" class=\"mt-3\">user <span\r\n *ngFor=\"let store of validatedCluster;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a routerLink=\"/manage/stores\" class=\"text-decoration-underline cursor-pointer\"\r\n [queryParams]=\"{tyoe: 'cluster'}\" (click)=\"closeactivepopup()\">Create Cluster</a></div>\r\n <div *ngIf=\"storeCoverage && showUser\" class=\"mt-3\">User <span\r\n *ngFor=\"let store of validatedUser;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for isn\u2019t available, <a class=\"text-decoration-underline cursor-pointer\"\r\n (click)=\"closeactivepopup();confirmUserpopup()\">Onboard Users</a></div>\r\n <div *ngIf=\"storeCoverage && showInactive\" class=\"mt-3\">Store <span\r\n *ngFor=\"let store of inactiveStores;let last = last\"\r\n class=\"fw-semibold config-heading\">{{store}}<span *ngIf=\"!last\">,</span></span> that I\u2019m looking\r\n for is inactive, <a routerLink=\"/manage/stores\" [queryParams]=\"{tyoe: 'stores'}\"\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"closeactivepopup()\">Onboard Stores</a>\r\n </div>\r\n </div>\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct and complete layout information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\"\r\n [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError&&!showStore&&!showCluster&&!showUser&&!showTeam&&!showInactive\"\r\n class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n <button *ngIf=\"excelError||showStore||showCluster||showUser||showTeam || showInactive\"\r\n class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"Reupload();\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event,'reupload')\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmUser let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-5\">\r\n <div class=\"card-title d-flex flex-column mt-3\">\r\n <div class=\"bg-light-primary rounded-5 w-40px h-40px d-flex justify-content-center align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEF0C7\" />\r\n <path\r\n d=\"M27.9998 24.0012V28.0012M27.9998 32.0012H28.0098M26.2898 18.8612L17.8198 33.0012C17.6451 33.3036 17.5527 33.6465 17.5518 33.9957C17.5508 34.3449 17.6413 34.6883 17.8142 34.9917C17.9871 35.2951 18.2365 35.5479 18.5375 35.725C18.8385 35.9021 19.1806 35.9973 19.5298 36.0012H36.4698C36.819 35.9973 37.1611 35.9021 37.4621 35.725C37.7631 35.5479 38.0124 35.2951 38.1854 34.9917C38.3583 34.6883 38.4488 34.3449 38.4478 33.9957C38.4468 33.6465 38.3544 33.3036 38.1798 33.0012L29.7098 18.8612C29.5315 18.5673 29.2805 18.3243 28.981 18.1557C28.6814 17.987 28.3435 17.8984 27.9998 17.8984C27.656 17.8984 27.3181 17.987 27.0186 18.1557C26.7191 18.3243 26.468 18.5673 26.2898 18.8612Z\"\r\n stroke=\"#DC6803\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FFFAEB\" stroke-width=\"8\" />\r\n </svg>\r\n </div><br>\r\n <div class=\"config-heading fw-semibold w-auto\">New User found in uploaded file</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"flex-column\">\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">This CSV contains a new User. Add new User in the\r\n User Management under Manage menu.</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <!-- <button class=\"btn btn-md btn-default btn-outline\" routerLink=\"/manage/users/client\" (click)=\"closeactivepopup()\">Skip New Entries</button> -->\r\n <button class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"model.close('confirm')\">Invite\r\n Selected</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".card{border-radius:16px}.section1{color:var(--Black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.row>*{padding-right:0}.storeAssign a:hover,.table-header a:hover{text-decoration:underline!important}.checkconfigcont .card{height:100%}.checkconfigcont .section{display:inline-block;width:160px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important}.checkconfigcont .radio{font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .mat-radio-button.mat-primary .mat-radio-inner-circle,.checkconfigcont .mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),.checkconfigcont .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple,.checkconfigcont .mat-radio-button.mat-primary:active .mat-radio-persistent-ripple{background-color:#00a3ff}.checkconfigcont .section-leftheading1{overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checkconfigcont .section{color:var(--Black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .scedule-text{overflow:hidden;color:var(--Black, #101828);text-overflow:ellipsis;font-size:12px;font-weight:400;line-height:18px}.checkconfigcont .svg-icon svg{height:1.25em;width:1.25em}.checkconfigcont .section-leftheading{overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:20px;font-style:normal;font-weight:600;line-height:28px}.checkconfigcont .sub{color:var(--gray-700, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .subopen{color:var(--black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .symbol-circle{margin-left:-6px}.checkconfigcont .checklistlabel{padding:4px 12px;justify-content:center;align-items:center;border-radius:16px;background:var(--gray-100, #F2F4F7)}.checkconfigcont .subtitle{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0em;text-align:left;color:#667085}.checkconfigcont .template-dropdown{background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.checkconfigcont .form-control.form-control-solid{display:flex;padding:11px 14px;align-items:center;gap:8px;align-self:stretch;border-radius:8px;border:1px solid var(--gray-500, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d}.checkconfigcont .searchplaceholder{font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.checkconfigcont .custom-appbox{border-radius:12px}.checkconfigcont input::placeholder{color:#667085!important;opacity:1}.checkconfigcont .checklisttext{color:var(--gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.checkconfigcont .separator{height:1px;align-self:stretch}.checkconfigcont ::ng-deep .mat-form-field-infix{color:#101828;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;width:500px!important;line-height:24px}.checkconfigcont ::ng-deep .storechip{color:#101828;font-size:16px;width:100%;font-family:Inter;font-weight:400;width:780px!important;line-height:24px}.checkconfigcont ::ng-deep .mat-chip{font-family:Inter;font-style:normal;font-weight:500;font-size:14px;line-height:17px;text-align:center;color:#5e6278!important}.checkconfigcont ::ng-deep .mat-chip-list-wrapper .mat-standard-chip{margin:4px}.checkconfigcont ::ng-deep .matChip-store{height:100px;display:block;overflow-y:scroll;overflow-x:hidden}.checkconfigcont ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.checkconfigcont ::ng-deep .mat-form-field-underline{display:none}.checkconfigcont ::ng-deep .mat-form-field-ripple{display:none}.checkconfigcont .subtext{color:var(--gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px;align-items:center;gap:8px;align-self:stretch}.checkconfigcont .zone-subscription{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:24px}.checkconfigcont .upload{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d;display:flex;padding:10px 18px;justify-content:center;align-items:center;gap:8px;flex:1 0 0}.checkconfigcont .upload:hover{background:#f3f8fd!important;border:1px solid var(--gray-300, #D0D5DD)!important}.checkconfigcont .uploadtext{color:var(--gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .savedraft{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);padding:10px 18px;justify-content:center;align-items:center;gap:8px;box-shadow:0 1px 2px #1018280d}.checkconfigcont .savedraft:hover{background:#f3f8fd!important;border:1px solid var(--gray-300, #D0D5DD)!important}.checkconfigcont .savedrafttext{color:var(--gray-700, #344054);font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .configureAcite{border:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-50, #EAF8FF)}.checkconfigcont .text-primary{color:var(--primary-700, #009BF3)!important}.checkconfigcont .border-primary{border:1px dashed var(--Primary-500, #33B5FF)!important;background:var(--Primary-25, #F6FCFF)!important}.checkconfigcont .download{border-radius:8px;border:1px solid var(--primary-50, #EAF8FF);background:var(--primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;display:flex;padding:10px 18px;justify-content:center;align-items:center;gap:8px;flex:1 0 0;color:var(--primary-700, #009BF3);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .svg-icon1:hover:not(.svg-active){color:#fff}.checkconfigcont .btn-outline{border:1px solid lightgrey!important;padding:calc(.75rem + 1px) calc(1.5rem + 1px)}.checkconfigcont .footertext{color:#000;font-family:Inter;font-size:14px;font-weight:500;line-height:20px;text-align:right}.checkconfigcont .footer1{text-align:end}.checkconfigcont ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#009ef7!important}.checkconfigcont ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#009ef7!important}.checkconfigcont ::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:#1da1f21a;color:#009ef7}.checkconfigcont ::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#009ef7}.checkconfigcont ::ng-deep th.mat-header-cell:first-of-type,.checkconfigcont ::ng-deep td.mat-cell:first-of-type,.checkconfigcont ::ng-deep td.mat-footer-cell:first-of-type{padding-right:none}.checkconfigcont ::ng-deep .sopTable input{border:none;padding:0!important}.checkconfigcont ::ng-deep .sopTable input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkconfigcont ::ng-deep .sopTable input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}.checkconfigcont ::ng-deep .sopTable input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.checkconfigcont ::ng-deep .card-body-sop{border:1px solid var(--gray-200, #EAECF0);background:var(--white, #FCFCFD);border-radius:6px}.checkconfigcont .schedule{color:var(--gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.checkconfigcont .user{color:var(--gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .dropdown{margin-left:-9%}.checkconfigcont .pillstyle{color:var(--gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .leftcard{position:relative}.checkconfigcont .editques{position:absolute!important;left:12%;transform:translate(-5%);bottom:30px}.checkconfigcont .orposition{top:0;left:50%;transform:translate(-50%,-50%);text-align:center}.checkconfigcont .questiontype{color:var(--primary-700, #009BF3);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;outline:none!important;background-color:#f1faff!important}.checkconfigcont .btn-left{display:inline-block;width:100%;font-size:16px;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis!important}.checkconfigcont .nav{display:flex;align-items:center;gap:16px;flex:1 0 0;align-self:stretch;--bs-nav-link-color: none}.checkconfigcont .form-control.form-control-solid,.checkconfigcont .form-select.form-select-solid{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d}.checkconfigcont .checklistturnoff{border-radius:8px;border:1px solid var(--gray-200, #EAECF0);background:var(--white, #FFF);display:flex;padding:16px;align-items:flex-start;align-self:stretch}.checkconfigcont .btn.btn-outline.btn-outline-dashed.btn-outline-default:hover:not(.btn-active){border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d;display:flex;padding:10px 18px;justify-content:center;align-items:center;gap:8px;flex:1 0 0}.checkconfigcont .sopTable input{border:none;padding:0!important}.checkconfigcont .sopTable input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkconfigcont .sopTable input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}.checkconfigcont .sopTable input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.checkconfigcont .option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px}.checkconfigcont .card hr{width:-webkit-fill-available}.checkconfigcont .imgnodata1{width:216px;height:245px}.checkconfigcont .editablecontent{display:inline-block;width:230px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important}.checkconfigcont #navfont{font-size:1.15rem!important}.checkconfigcont .imgdata{width:50%;height:50%}.checkconfigcont .imgnodata{width:312px;height:312px;margin-top:-4%}.checkconfigcont .card .card-header{display:flex;justify-content:space-between;align-items:stretch;flex-wrap:wrap;min-height:70px;padding:0 .25rem;background-color:transparent;border-bottom:none}.checkconfigcont ::ng-deep .mat-select{background:#f5f8fa;border-radius:8px}.checkconfigcont ::ng-deep .mat-select-value{height:42px}.checkconfigcont ::ng-deep .multiselect-dropdown .dropdown-btn{border:none!important}.checkconfigcont ::ng-deep .multiselect-dropdown .dropdown-list{border:none;box-shadow:0 1px 5px #959595;margin-left:-12px}.checkconfigcont ::ng-deep .multiselect-dropdown:focus-visible{border:none!important;box-shadow:0 1px 5px #959595;margin-left:-12px;max-height:250px}.checkconfigcont .custom-checkbox{--checkbox-background-checked: white !important;--checkmark-color: #009BF3;--border-color: #009BF3;--border-radius: 4px }.checkconfigcont .form-check.form-check-custom{display:flex;margin:0;height:44px;padding:12px 24px;align-items:center;gap:12px;align-self:stretch}.checkconfigcont .tabsub{color:var(--gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .selectstore{color:var(--primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.checkconfigcont .headeralign{color:var(--gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checkconfigcont .rotate{transform:rotate(180deg);transition:1s}.checkconfigcont .weekstyle{border-radius:20px;background:var(--gray-100, #F2F4F7)}.checkconfigcont ::ng-deep .swal2-popup.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;min-width:2em;height:0em;margin:0 .5em 0 0}.checkconfigcont ::ng-deep .listitem{display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem 1rem;background-color:#f3f6f9;margin-top:.75rem;border-radius:.42rem}.checkconfigcont ::ng-deep .list{overflow-y:auto}.checkconfigcont ::ng-deep .listitemlabel{font-size:13px!important;font-weight:600;font-family:Inter;color:#7e8299}.checkconfigcont ::ng-deep .swal2-container{padding:.4em!important}.checkconfigcont ::ng-deep .swal2-icon{border:1px solid white!important}.checkconfigcont ::ng-deep body.swal2-toast-shown .swal2-container{width:500px!important}.checkconfigcont ::ng-deep .swal2-popup.swal2-toast .swal2-title{margin:9px 5px auto!important}.checkconfigcont ::ng-deep .label{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.checkconfigcont ::ng-deep .form-check-input[disabled]~.form-check-label.spocName,.checkconfigcont ::ng-deep .form-check-input:disabled~.form-check-label.spocName{opacity:unset!important}.checkconfigcont tr.mat-header-row{height:56px;border-bottom:1px solid var(--gray-200, #EAECF0);background:var(--gray-25, #FCFCFD)}.checkconfigcont .detectiontext{color:var(--gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.checkconfigcont .alert{border-radius:16px;background:var(--Gray-100, #F2F4F7)}.checkconfigcont .alert .text{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.checkconfigcont .alerttext{color:var(--primary-600, #00A3FF);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checkconfigcont .alertlabel{width:24px;height:24px;padding:4px 0 2px;justify-content:center;align-items:center;border-radius:200px;background:var(--primary-50, #EAF8FF)}.checkconfigcont .create{color:var(--white, #FFF);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .create1{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.checkconfigcont .createbuttons{padding:10px 18px;justify-content:center;align-items:center;gap:8px;border-radius:8px;border:1px solid var(--primary-600, #00A3FF);background:var(--primary-600, #00A3FF);box-shadow:0 1px 2px #1018280d}.checkconfigcont .alertsinput{border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px;align-items:center;gap:8px}.checkconfigcont .usageerror{display:block;width:255px}.checkconfigcont .reupload{padding:10px 18px!important;justify-content:center;align-items:center;gap:8px;flex:1 0 0;border-radius:8px;border:1px solid var(--primary-600, #00A3FF);background:var(--primary-600, #00A3FF);width:220px;cursor:pointer;box-shadow:0 1px 2px #1018280d}.checkconfigcont .reuploadtext{color:var(--White, #FFF);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;cursor:pointer}.checkconfigcont .download{border-radius:8px;border:1px solid var(--primary-50, #EAF8FF);background:var(--primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;padding:10px 18px!important;justify-content:center;align-items:center;gap:8px;width:220px}.checkconfigcont .downloadtext{color:var(--primary-700, #009BF3);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.checkconfigcont .assignpadding{padding:0 40px}.checkconfigcont .uploadpadding{padding:0 20% 9px}::ng-deep .swal2-popup.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;min-width:2em;height:0em;margin:0 .5em 0 0}::ng-deep .listitem{display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem 1rem;background-color:#f3f6f9;margin-top:.75rem;border-radius:.42rem}::ng-deep .question-left{max-height:50vh;overflow:auto;overflow-x:hidden}::ng-deep .toasttitile{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}::ng-deep .list{overflow-y:auto}::ng-deep .listitemlabel{font-size:13px!important;font-weight:600;font-family:Inter;color:#7e8299}::ng-deep .swal2-container{padding:.4em!important}::ng-deep .swal2-icon{border:1px solid white!important}::ng-deep body.swal2-toast-shown .swal2-container{width:500px!important}::ng-deep .swal2-popup.swal2-toast .swal2-title{margin:9px 5px auto!important}::ng-deep .label{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}::ng-deep .matWidth{margin-left:12px;margin-right:12px}::ng-deep .mat-tooltip{white-space:pre-line}::ng-deep .custom-test{color:var(--gray-700, #344054)!important;text-align:start;font-family:Inter;font-size:12px;font-style:normal;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;font-weight:600;line-height:18px;background:#fff}.checkconfigcont .matChip-store{height:113px;display:block;overflow-y:scroll;overflow-x:hidden}.emailalert{position:relative;height:500px!important;overflow:auto!important;overflow-x:hidden!important}.emailalert1{overflow-y:auto!important;height:10%!important;position:relative}.active-question{color:var(--primary-700, #009BF3);font-size:16px;font-style:normal;font-weight:500;line-height:24px;display:flex;padding:8px 12px;align-items:center;gap:105px;align-self:stretch;border-radius:6px;background:var(--primary-50, #EAF8FF)}.q-btn{color:var(--gray-700, #344054);font-size:16px;font-style:normal;font-weight:500;line-height:24px;display:flex;padding:8px 12px;align-items:center;gap:105px;align-self:stretch;border-radius:6px;background:var(--primary-50, white)}.concise-question{display:inline-block;width:100%;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis!important;text-align:left}@media screen and (min-width: 1400px){.emailalert{position:relative;height:700px!important;overflow:auto!important;overflow-x:hidden!important}}::ng-deep .swal2-html-container{overflow:hidden!important}.badgeColor{background-color:#fffaeb!important;color:#b54708!important;font-family:Inter;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0em;text-align:center}.config-heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px;width:35%}.ps-20{padding-left:7rem!important}.ps-18{padding-left:6.5rem!important}.remove{color:var(--Gray-500, #667085);font-size:12px;font-weight:600;line-height:18px;text-decoration-line:underline;text-transform:capitalize}.fw-400{font-weight:400}.chip-container{margin-top:10px}.mat-chip{margin:5px}.dropdown-menu{position:absolute;top:100%;left:0;right:0;background-color:#fff;z-index:1000;display:block;box-sizing:border-box;height:0%}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.formSeach{width:95%}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.nav-item .nav-link:hover{border-bottom:none!important}.nav-item .nav-link.active{border-radius:10px!important;border-bottom:none!important}.nav-item .bg-light-primary{background:var(--Primary-50, #EAF8FF)!important}.storetext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.position-relative{position:relative!important}.content{background-color:#fff;padding:10px 22px 10px 10px;border-radius:5px;box-shadow:0 0 10px #0000001a}.badge-pill{display:flex;padding:2px 6px 2px 8px;justify-content:center;align-items:center;gap:4px;border-radius:16px;background:var(--Gray-100, #F2F4F7)}.badge-specificdate{max-width:100%;overflow-x:hidden;white-space:normal;display:flex;flex-wrap:wrap}.badge-specificdate .badge{margin-bottom:8px}.bg-color-disabled{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}a.cursor-default{cursor:default!important;background-color:unset!important}.form-control.form-control-solid.disabled{background-color:#eef3f7!important}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.selectDay{background-color:var(--bs-primary)!important}a.selectDay span{color:#fff!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}tr th .form-check-label,tr td .form-check-label{color:var(--Gray-700, #344054)!important}:host::ng-deep .schedule .md-drppicker .btn{line-height:10px!important}:host::ng-deep .schedule .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .schedule .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .schedule .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .schedule .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 .schedule .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 .schedule .md-drppicker td.active,:host::ng-deep .schedule .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 .schedule .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .schedule .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .schedule .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 .schedule table th,:host::ng-deep .schedule table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .schedule .md-drppicker td.available.prev,:host::ng-deep .schedule .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 .schedule .md-drppicker td.available.next,:host::ng-deep .schedule .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 .schedule 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 .schedule .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}:host::ng-deep .schedule .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .schedule .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.fontSize{font-size:14px}.margin{margin-top:2px}.w-20{width:20%!important}.w-80{width:80%!important}.approver{color:var(--gray-700, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.line-height{line-height:25px}.storeAssign{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.selected-radio{width:1.5rem!important;height:1.5rem!important}.lineHeight{line-height:27px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.schedule-config-header{color:var(--Black, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:24px}.schedule-config-description{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:18px}.schedule-config-sub-header{color:var(--Black, #101828);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.advancedConfigureAcite{border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--Primary-50, #EAF8FF)}.bg-light-custom{background-color:#f8fafc;min-height:100vh}.config-card{background:#fff;border:1px solid #eef2f6;border-radius:12px;box-shadow:0 2px 4px #00000003}.extra-small{font-size:.75rem}.tag-input-box{border:1px solid #e2e8f0;border-radius:8px;background:#fcfcfd;min-height:45px}.badge-tag{background:#e9ecef;color:#475467;padding:4px 12px;border-radius:20px;font-size:.85rem}.chip-container{border:1px solid #e2e8f0;border-radius:8px;display:flex;gap:8px;background:#fff;min-height:38px;align-items:center;padding-left:10px!important}.user-chip{background:#f0f9ff;border:1px solid #e0f2fe;border-radius:6px;padding:2px 8px;display:flex;align-items:center;font-size:.75rem}.user-chip .initials{color:#0ea5e9;font-weight:700;margin-right:6px}.user-chip .name{color:#344054}.info-banner{background:#f1f5f9;padding:10px 15px;border-radius:10px;font-size:.85rem;color:#64748b}.threshold-inner-card{border:1px solid #e2e8f0;border-radius:15px;position:relative}.floating-icon{position:absolute;top:-22px;right:25%;width:44px;height:44px;background:linear-gradient(135deg,#3b82f6,#2dd4bf);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px #3b82f666}.sub-config-box{border:1px solid #f1f5f9;border-radius:12px}.cursor-pointer{cursor:pointer}.time-input-wrapper{position:relative;display:inline-block}.time-field{border-radius:8px;border:1px solid #dee2e6;padding:8px 35px 8px 12px;font-weight:500;color:#334155;width:120px}.time-input-wrapper i{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#334155;pointer-events:none;font-size:1.1rem}.custom-switch{width:3em!important;height:1.5em!important;cursor:pointer}.form-check-input:checked{background-color:#0095ff;border-color:#0095ff}.form-select{border-radius:8px;padding:8px 25px 8px 15px;border:1px solid #dee2e6;background-color:#f8fafc}.animate-fade-in{animation:fadeIn .3s ease-in}.text-dark-blue{color:#1e293b}.text-secondary-blue{color:#334155}.custom-switch{width:3.2em!important;height:1.6em!important;cursor:pointer}.form-check-input:checked{background-color:#0ea5e9;border-color:#0ea5e9}.custom-select{width:70px;height:48px;border-radius:10px;border:1px solid #e2e8f0;text-align:center;padding:0 10px;font-weight:500;background-color:#fff;color:#334155}.summary-text{color:#475569;font-size:.95rem;font-weight:500;margin-top:1.5rem}.fade-in{animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.text-dark-blue{color:#334155}.text-secondary-blue{color:#475569}.info-banner{background-color:#f1f5f9;border-radius:12px;color:#64748b}.small-text{font-size:.9rem;font-weight:500}.threshold-container{border:1px solid #e2e8f0;border-radius:16px;background-color:#fff}.description-text{font-size:.8rem;color:#94a3b8}.custom-switch{width:2.8em!important;height:1.4em!important;cursor:pointer}.form-check-input:checked{background-color:#38bdf8;border-color:#38bdf8}.custom-select{width:75px;height:42px;border-radius:8px;border:1px solid #e2e8f0;text-align:center;font-weight:500;color:#334155;cursor:pointer;background-color:#fff}.custom-select:focus{border-color:#cbd5e1;box-shadow:none}\n"] }]
3029
3029
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.NgbModal }, { type: i3.TraxService }, { type: i4.ToastService }, { type: i5.GlobalStateService }, { type: i5.PageInfoService }], propDecorators: { fileInput: [{
3030
3030
  type: ViewChild,
3031
3031
  args: ['file']