tango-app-ui-store-ticket-infra 3.0.19-dev → 3.0.20-dev

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/esm2022/lib/components/analyze-report/analyze-report.component.mjs +4 -4
  2. package/esm2022/lib/components/create-ticket/create-ticket.component.mjs +14 -5
  3. package/fesm2022/tango-app-ui-store-ticket-infra.mjs +16 -7
  4. package/fesm2022/tango-app-ui-store-ticket-infra.mjs.map +1 -1
  5. package/lib/components/create-ticket/create-ticket.component.d.ts +3 -0
  6. package/package.json +1 -1
package/fesm2022/tango-app-ui-store-ticket-infra.mjs CHANGED
@@ -749,7 +749,7 @@ class AnalyzeReportComponent {
749
749
  getCameraAngle() {
750
750
  let data = {
751
751
  "Date": this.activeDate,
752
- "StreamName": this.activeStream,
752
+ "StreamName": this.activeStream?.streamName,
753
753
  "storeId": this.analyzereport?.filteredStoreId
754
754
  };
755
755
  this.service.cameraAngleChange(data).pipe(takeUntil(this.destroy$)).subscribe({
@@ -812,11 +812,11 @@ class AnalyzeReportComponent {
812
812
  this.activeModal.close();
813
813
  }
814
814
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AnalyzeReportComponent, deps: [{ token: i1$1.NgbModal }, { token: i1$1.NgbActiveModal }, { token: TicketsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
815
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AnalyzeReportComponent, selector: "lib-analyze-report", inputs: { analyzereport: "analyzereport" }, viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true }, { propertyName: "ReconfirmationModal", first: true, predicate: ["ReconfirmationModal"], descendants: true }], ngImport: i0, template: "<div class=\"card py-0 scroll-y\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Images/edgeapp icon.svg\">\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Analyze Report</a>\r\n <div class=\"sub-title q-query-text\">Your Queries reported below stores are got {{analyzereport?.countType}} {{analyzereport?.filteredFeature}} on {{selectedDate[0]}} to\r\n {{selectedDate[selectedDate.length - 1]}}</div>\r\n </div>\r\n </div>\r\n <ul class=\"nav my-3 w-100 mt-5\">\r\n <li *ngFor=\"let date of selectedDate;let i=index\" class=\"nav-item pe-none\" (click)=\"handleClick($event)\" ><a data-bs-toggle=\"tab\" [ngClass]=\"activeDate === date.date ? 'active':''\"\r\n class=\"nav-link btn btn-sm btn-color-muted btn-active fw-bolder px-10 me-1 show\">\r\n {{date.date}} <span *ngIf=\"activeDate === date.date && date?.showIcon\" class=\"mx-2\"><svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#EAF8FF\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span *ngIf=\"activeDate !== date.date && date?.showIcon\" class=\"mx-2\">\r\n <svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#F2F4F7\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a></li>\r\n </ul>\r\n <div *ngIf=\"activeArray?.primaryIssue\" class=\"my-3 mt-5\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div *ngIf=\"!activeArray?.primaryIssue\" class=\"my-3 mt-5\">\r\n <img style=\"width:50px; height:50px\" src=\"./assets/tango/Images/Successtoast.png\">\r\n </div>\r\n <div *ngIf=\"activeArray\" class=\"ul-list\">\r\n <ul>\r\n <li *ngIf=\"activeArray?.primaryIssue\" class=\"list-size my-3\">The primary issue was <span class=\"fw-bold-700\">{{activeArray?.primaryIssue}}</span> where\r\n the <span *ngFor=\"let data of activeArray?.secondaryReason let last = last\" class=\"fw-bold-700\">data <span *ngIf=\"!last\">,</span></span> was the secondary concern. </li>\r\n <li class=\"list-size my-3\">Store Experienced a downtime of <span class=\"fw-bold-700\">{{activeArray?.downTime}} mins</span>\r\n dated <span class=\"fw-bold-700\">{{activeArray?.issueDate}}</span> where \"N Files Lost\" and was unable to send to our\r\n cloud due to speed being <span class=\"fw-bold-700\">{{activeArray?.speedTest}} Mbps.</span> </li>\r\n <!-- <li class=\"list-size my-3\">We were able to capture only <span class=\"fw-bold-700\">100 Footfalls</span>\r\n despite the <span class=\"fw-bold-700\">Internet slow</span> issue </li> -->\r\n\r\n </ul>\r\n </div> \r\n </div>\r\n <div class=\"card-header border-0 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label fw-bolder fs-3 mb-1\">Tango Pre-Requisite <span class=\"badge badge-light-warning ms-2\">Warning</span></span>\r\n </h3>\r\n <div class=\"card-toolbar text-end\">\r\n <span class=\"list-size\">Camera 01</span>\r\n </div>\r\n </div>\r\n <div class=\"row mx-3\"> \r\n <div class=\"table-reponsive\">\r\n <table class=\"bottom-border w-100\">\r\n <thead>\r\n <tr>\r\n <th>Instances</th>\r\n <th>Excepted</th>\r\n <th>Actual</th>\r\n <th>Result</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>Camera Angle</td>\r\n <td></td>\r\n <td><img src=\"{{angleChange?.angleChangeImage}}\"></td>\r\n <td *ngIf=\"!angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationsuccess.svg\"></td>\r\n <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td>\r\n </tr>\r\n <tr>\r\n <td>Resolution</td>\r\n <td>1080 x 908</td>\r\n <td>{{angleChange?.resolution ? angleChange?.resolution : '--'}}</td>\r\n <!-- <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td> -->\r\n <td><img src=\"./assets/tango/Image/verificationsuccess.svg\"></td>\r\n </tr>\r\n <!-- <tr>\r\n <td>Downtime</td>\r\n <td>4.00 AM</td>\r\n <td>9.00 AM</td>\r\n <td><img src=\"./assets/tango/Image/verificationdanger.svg\"></td>\r\n </tr> -->\r\n </tbody>\r\n </table>\r\n <div *ngIf=\"streamDetails?.length\" class=\"d-flex justify-content-center align-items-center mt-10\">\r\n <div *ngFor=\"let stream of streamDetails\" [ngClass]=\"stream === activeStream ? 'bg-dark' : 'bg-opacity-25'\" class=\"w-10px h-10px rounded-5 bg-dark cursor-pointer mx-3\" (click)=\"getstreambasedAngle(stream)\"></div>\r\n </div>\r\n <div class=\"card-header px-4 border-0 pt-5 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label-title mb-1\">Queries History</span>\r\n </h3>\r\n <div (click)=\"viewMore()\" class=\"card-toolbar text-end\">\r\n <span class=\"primary-list\">View more Details</span>\r\n </div>\r\n </div>\r\n <div class=\"px-5 q-query-text\">From the date of installation till today the below queries success rate has been maintained</div>\r\n <div class=\"d-flex flex-wrap py-3\">\r\n <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"h-history-title\">Earnings</div>\r\n <div class=\"d-flex align-items-center py-2\">\r\n <div class=\"h-history-count\">10 Tickets</div>\r\n </div>\r\n </div>\r\n <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"h-history-title\">Earnings</div>\r\n <div class=\"d-flex align-items-center py-2\">\r\n <div class=\"h-history-count\">78%</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"fw-bold fs-6 text-gray-500\">Earnings</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"fs-2 fw-bolder\">4500$</div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3 cursor-pointer \"\r\n (click)=\"raiseTicket()\">Raise a Ticket</button>\r\n <button *ngIf=\"(currentIdx + 1) !== selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"closeTicket()\">Accept & Close</button>\r\n <button *ngIf=\"(currentIdx + 1) === selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"openPopup()\">Close</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Unsaved Changes</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">Do you want to clise the tickets?</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmSave();modal.close()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #ReconfirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Are you sure, want to view more details?</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">If so you will redirect to Queries summary & can\u2019t able to come back to the screen.</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmMore();modal.dismiss()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n ", styles: [".nav-line-tabs1.nav-line-tabs-2x .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;color:var(--Primary-700, #009BF3)!important}.nav-line-tabs1 .nav-link{color:var(--Gray-500, #667085)!important;font-size:16px;font-weight:500!important;line-height:24px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.drops-down-down.ltr.double.show-ranges.shown{left:0!important;height:350px}:host::ng-deep .md-drppicker td{border-radius:44px}:host::ng-deep .md-drppicker .btn{border-radius:7px!important;background-color:#019df5!important}:host::ng-deep .md-drppicker .btn{right:99px;top:300px}:host::ng-deep .md-drppicker .ranges ul li button.active{background-color:#029cf3!important}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important}.title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.active{border-radius:6px!important;padding:8px 25px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.list-size{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.fw-bold-700{font-weight:700!important}.c-label{color:var(--Gray-800, #1D2939)!important;font-size:16px!important;font-weight:500!important;line-height:24px}.c-label-title{color:#000!important;font-size:16px!important;font-weight:500;line-height:24px!important}.primary-list{color:var(--Primary-700, #009BF3)!important;font-size:12px!important;font-weight:600;line-height:18px;text-transform:capitalize}.h-history-title{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.h-history-count{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.q-query-text{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.cameraDetail{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
815
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AnalyzeReportComponent, selector: "lib-analyze-report", inputs: { analyzereport: "analyzereport" }, viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true }, { propertyName: "ReconfirmationModal", first: true, predicate: ["ReconfirmationModal"], descendants: true }], ngImport: i0, template: "<div class=\"card py-0 scroll-y\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Images/edgeapp icon.svg\">\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Analyze Report</a>\r\n <div class=\"sub-title q-query-text\">Your Queries reported below stores are got {{analyzereport?.countType}} {{analyzereport?.filteredFeature}} on {{selectedDate[0]?.date}} to\r\n {{selectedDate[selectedDate.length - 1]?.date}}</div>\r\n </div>\r\n </div>\r\n <ul class=\"nav my-3 w-100 mt-5\">\r\n <li *ngFor=\"let date of selectedDate;let i=index\" class=\"nav-item pe-none\" (click)=\"handleClick($event)\" ><a data-bs-toggle=\"tab\" [ngClass]=\"activeDate === date.date ? 'active':''\"\r\n class=\"nav-link btn btn-sm btn-color-muted btn-active fw-bolder px-10 me-1 show\">\r\n {{date.date}} <span *ngIf=\"activeDate === date.date && date?.showIcon\" class=\"mx-2\"><svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#EAF8FF\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span *ngIf=\"activeDate !== date.date && date?.showIcon\" class=\"mx-2\">\r\n <svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#F2F4F7\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a></li>\r\n </ul>\r\n <div *ngIf=\"activeArray?.primaryIssue\" class=\"my-3 mt-5\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div *ngIf=\"!activeArray?.primaryIssue\" class=\"my-3 mt-5\">\r\n <img style=\"width:50px; height:50px\" src=\"./assets/tango/Images/Successtoast.png\">\r\n </div>\r\n <div *ngIf=\"activeArray\" class=\"ul-list\">\r\n <ul>\r\n <li *ngIf=\"activeArray?.primaryIssue\" class=\"list-size my-3\">The primary issue was <span class=\"fw-bold-700\">{{activeArray?.primaryIssue}}</span> where\r\n the <span *ngFor=\"let data of activeArray?.secondaryReason let last = last\" class=\"fw-bold-700\">data <span *ngIf=\"!last\">,</span></span> was the secondary concern. </li>\r\n <li *ngIf=\"activeArray?.downTime > 0\" class=\"list-size my-3\">Store Experienced a downtime of <span class=\"fw-bold-700\">{{activeArray?.downTime}} mins</span>\r\n dated <span class=\"fw-bold-700\">{{activeArray?.issueDate}}</span> where \"N Files Lost\" and was unable to send to our\r\n cloud due to speed being <span class=\"fw-bold-700\">{{activeArray?.speedTest}} Mbps.</span> </li>\r\n <!-- <li class=\"list-size my-3\">We were able to capture only <span class=\"fw-bold-700\">100 Footfalls</span>\r\n despite the <span class=\"fw-bold-700\">Internet slow</span> issue </li> -->\r\n\r\n </ul>\r\n </div> \r\n </div>\r\n <div class=\"card-header border-0 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label fw-bolder fs-3 mb-1\">Tango Pre-Requisite <span class=\"badge badge-light-warning ms-2\">Warning</span></span>\r\n </h3>\r\n <div class=\"card-toolbar text-end\">\r\n <span class=\"list-size\">{{activeStream?.cameraNumber}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mx-3\"> \r\n <div class=\"table-reponsive\">\r\n <table class=\"bottom-border w-100\">\r\n <thead>\r\n <tr>\r\n <th>Instances</th>\r\n <th>Excepted</th>\r\n <th>Actual</th>\r\n <th>Result</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>Camera Angle</td>\r\n <td></td>\r\n <td><img [src]=\"angleChange?.angleChangeImage ? angleChange?.angleChangeImage :activeStream?.thumbnailImage\"></td>\r\n <td *ngIf=\"!angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationsuccess.svg\"></td>\r\n <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td>\r\n </tr>\r\n <tr>\r\n <td>Resolution</td>\r\n <td>1080 x 908</td>\r\n <td>{{angleChange?.resolution ? angleChange?.resolution : '--'}}</td>\r\n <!-- <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td> -->\r\n <td><img src=\"./assets/tango/Image/verificationsuccess.svg\"></td>\r\n </tr>\r\n <!-- <tr>\r\n <td>Downtime</td>\r\n <td>4.00 AM</td>\r\n <td>9.00 AM</td>\r\n <td><img src=\"./assets/tango/Image/verificationdanger.svg\"></td>\r\n </tr> -->\r\n </tbody>\r\n </table>\r\n <div *ngIf=\"streamDetails?.length\" class=\"d-flex justify-content-center align-items-center mt-10\">\r\n <div *ngFor=\"let stream of streamDetails\" [ngClass]=\"stream?.streamName === activeStream?.streamName? 'bg-dark' : 'bg-opacity-25'\" class=\"w-10px h-10px rounded-5 bg-dark cursor-pointer mx-3\" (click)=\"getstreambasedAngle(stream)\"></div>\r\n </div>\r\n <div class=\"card-header px-4 border-0 pt-5 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label-title mb-1\">Queries History</span>\r\n </h3>\r\n <div (click)=\"viewMore()\" class=\"card-toolbar text-end\">\r\n <span class=\"primary-list\">View more Details</span>\r\n </div>\r\n </div>\r\n <div class=\"px-5 q-query-text\">From the date of installation till today the below queries success rate has been maintained</div>\r\n <div class=\"d-flex flex-wrap py-3\">\r\n <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"h-history-title\">Earnings</div>\r\n <div class=\"d-flex align-items-center py-2\">\r\n <div class=\"h-history-count\">10 Tickets</div>\r\n </div>\r\n </div>\r\n <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"h-history-title\">Earnings</div>\r\n <div class=\"d-flex align-items-center py-2\">\r\n <div class=\"h-history-count\">78%</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"fw-bold fs-6 text-gray-500\">Earnings</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"fs-2 fw-bolder\">4500$</div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3 cursor-pointer \"\r\n (click)=\"raiseTicket()\">Raise a Ticket</button>\r\n <button *ngIf=\"(currentIdx + 1) !== selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"closeTicket()\">Accept & Close</button>\r\n <button *ngIf=\"(currentIdx + 1) === selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"openPopup()\">Close</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Unsaved Changes</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">Do you want to clise the tickets?</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmSave();modal.close()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #ReconfirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Are you sure, want to view more details?</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">If so you will redirect to Queries summary & can\u2019t able to come back to the screen.</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmMore();modal.dismiss()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n ", styles: [".nav-line-tabs1.nav-line-tabs-2x .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;color:var(--Primary-700, #009BF3)!important}.nav-line-tabs1 .nav-link{color:var(--Gray-500, #667085)!important;font-size:16px;font-weight:500!important;line-height:24px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.drops-down-down.ltr.double.show-ranges.shown{left:0!important;height:350px}:host::ng-deep .md-drppicker td{border-radius:44px}:host::ng-deep .md-drppicker .btn{border-radius:7px!important;background-color:#019df5!important}:host::ng-deep .md-drppicker .btn{right:99px;top:300px}:host::ng-deep .md-drppicker .ranges ul li button.active{background-color:#029cf3!important}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important}.title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.active{border-radius:6px!important;padding:8px 25px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.list-size{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.fw-bold-700{font-weight:700!important}.c-label{color:var(--Gray-800, #1D2939)!important;font-size:16px!important;font-weight:500!important;line-height:24px}.c-label-title{color:#000!important;font-size:16px!important;font-weight:500;line-height:24px!important}.primary-list{color:var(--Primary-700, #009BF3)!important;font-size:12px!important;font-weight:600;line-height:18px;text-transform:capitalize}.h-history-title{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.h-history-count{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.q-query-text{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.cameraDetail{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
816
816
  }
817
817
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AnalyzeReportComponent, decorators: [{
818
818
  type: Component,
819
- args: [{ selector: 'lib-analyze-report', template: "<div class=\"card py-0 scroll-y\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Images/edgeapp icon.svg\">\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Analyze Report</a>\r\n <div class=\"sub-title q-query-text\">Your Queries reported below stores are got {{analyzereport?.countType}} {{analyzereport?.filteredFeature}} on {{selectedDate[0]}} to\r\n {{selectedDate[selectedDate.length - 1]}}</div>\r\n </div>\r\n </div>\r\n <ul class=\"nav my-3 w-100 mt-5\">\r\n <li *ngFor=\"let date of selectedDate;let i=index\" class=\"nav-item pe-none\" (click)=\"handleClick($event)\" ><a data-bs-toggle=\"tab\" [ngClass]=\"activeDate === date.date ? 'active':''\"\r\n class=\"nav-link btn btn-sm btn-color-muted btn-active fw-bolder px-10 me-1 show\">\r\n {{date.date}} <span *ngIf=\"activeDate === date.date && date?.showIcon\" class=\"mx-2\"><svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#EAF8FF\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span *ngIf=\"activeDate !== date.date && date?.showIcon\" class=\"mx-2\">\r\n <svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#F2F4F7\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a></li>\r\n </ul>\r\n <div *ngIf=\"activeArray?.primaryIssue\" class=\"my-3 mt-5\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div *ngIf=\"!activeArray?.primaryIssue\" class=\"my-3 mt-5\">\r\n <img style=\"width:50px; height:50px\" src=\"./assets/tango/Images/Successtoast.png\">\r\n </div>\r\n <div *ngIf=\"activeArray\" class=\"ul-list\">\r\n <ul>\r\n <li *ngIf=\"activeArray?.primaryIssue\" class=\"list-size my-3\">The primary issue was <span class=\"fw-bold-700\">{{activeArray?.primaryIssue}}</span> where\r\n the <span *ngFor=\"let data of activeArray?.secondaryReason let last = last\" class=\"fw-bold-700\">data <span *ngIf=\"!last\">,</span></span> was the secondary concern. </li>\r\n <li class=\"list-size my-3\">Store Experienced a downtime of <span class=\"fw-bold-700\">{{activeArray?.downTime}} mins</span>\r\n dated <span class=\"fw-bold-700\">{{activeArray?.issueDate}}</span> where \"N Files Lost\" and was unable to send to our\r\n cloud due to speed being <span class=\"fw-bold-700\">{{activeArray?.speedTest}} Mbps.</span> </li>\r\n <!-- <li class=\"list-size my-3\">We were able to capture only <span class=\"fw-bold-700\">100 Footfalls</span>\r\n despite the <span class=\"fw-bold-700\">Internet slow</span> issue </li> -->\r\n\r\n </ul>\r\n </div> \r\n </div>\r\n <div class=\"card-header border-0 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label fw-bolder fs-3 mb-1\">Tango Pre-Requisite <span class=\"badge badge-light-warning ms-2\">Warning</span></span>\r\n </h3>\r\n <div class=\"card-toolbar text-end\">\r\n <span class=\"list-size\">Camera 01</span>\r\n </div>\r\n </div>\r\n <div class=\"row mx-3\"> \r\n <div class=\"table-reponsive\">\r\n <table class=\"bottom-border w-100\">\r\n <thead>\r\n <tr>\r\n <th>Instances</th>\r\n <th>Excepted</th>\r\n <th>Actual</th>\r\n <th>Result</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>Camera Angle</td>\r\n <td></td>\r\n <td><img src=\"{{angleChange?.angleChangeImage}}\"></td>\r\n <td *ngIf=\"!angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationsuccess.svg\"></td>\r\n <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td>\r\n </tr>\r\n <tr>\r\n <td>Resolution</td>\r\n <td>1080 x 908</td>\r\n <td>{{angleChange?.resolution ? angleChange?.resolution : '--'}}</td>\r\n <!-- <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td> -->\r\n <td><img src=\"./assets/tango/Image/verificationsuccess.svg\"></td>\r\n </tr>\r\n <!-- <tr>\r\n <td>Downtime</td>\r\n <td>4.00 AM</td>\r\n <td>9.00 AM</td>\r\n <td><img src=\"./assets/tango/Image/verificationdanger.svg\"></td>\r\n </tr> -->\r\n </tbody>\r\n </table>\r\n <div *ngIf=\"streamDetails?.length\" class=\"d-flex justify-content-center align-items-center mt-10\">\r\n <div *ngFor=\"let stream of streamDetails\" [ngClass]=\"stream === activeStream ? 'bg-dark' : 'bg-opacity-25'\" class=\"w-10px h-10px rounded-5 bg-dark cursor-pointer mx-3\" (click)=\"getstreambasedAngle(stream)\"></div>\r\n </div>\r\n <div class=\"card-header px-4 border-0 pt-5 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label-title mb-1\">Queries History</span>\r\n </h3>\r\n <div (click)=\"viewMore()\" class=\"card-toolbar text-end\">\r\n <span class=\"primary-list\">View more Details</span>\r\n </div>\r\n </div>\r\n <div class=\"px-5 q-query-text\">From the date of installation till today the below queries success rate has been maintained</div>\r\n <div class=\"d-flex flex-wrap py-3\">\r\n <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"h-history-title\">Earnings</div>\r\n <div class=\"d-flex align-items-center py-2\">\r\n <div class=\"h-history-count\">10 Tickets</div>\r\n </div>\r\n </div>\r\n <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"h-history-title\">Earnings</div>\r\n <div class=\"d-flex align-items-center py-2\">\r\n <div class=\"h-history-count\">78%</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"fw-bold fs-6 text-gray-500\">Earnings</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"fs-2 fw-bolder\">4500$</div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3 cursor-pointer \"\r\n (click)=\"raiseTicket()\">Raise a Ticket</button>\r\n <button *ngIf=\"(currentIdx + 1) !== selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"closeTicket()\">Accept & Close</button>\r\n <button *ngIf=\"(currentIdx + 1) === selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"openPopup()\">Close</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Unsaved Changes</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">Do you want to clise the tickets?</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmSave();modal.close()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #ReconfirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Are you sure, want to view more details?</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">If so you will redirect to Queries summary & can\u2019t able to come back to the screen.</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmMore();modal.dismiss()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n ", styles: [".nav-line-tabs1.nav-line-tabs-2x .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;color:var(--Primary-700, #009BF3)!important}.nav-line-tabs1 .nav-link{color:var(--Gray-500, #667085)!important;font-size:16px;font-weight:500!important;line-height:24px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.drops-down-down.ltr.double.show-ranges.shown{left:0!important;height:350px}:host::ng-deep .md-drppicker td{border-radius:44px}:host::ng-deep .md-drppicker .btn{border-radius:7px!important;background-color:#019df5!important}:host::ng-deep .md-drppicker .btn{right:99px;top:300px}:host::ng-deep .md-drppicker .ranges ul li button.active{background-color:#029cf3!important}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important}.title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.active{border-radius:6px!important;padding:8px 25px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.list-size{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.fw-bold-700{font-weight:700!important}.c-label{color:var(--Gray-800, #1D2939)!important;font-size:16px!important;font-weight:500!important;line-height:24px}.c-label-title{color:#000!important;font-size:16px!important;font-weight:500;line-height:24px!important}.primary-list{color:var(--Primary-700, #009BF3)!important;font-size:12px!important;font-weight:600;line-height:18px;text-transform:capitalize}.h-history-title{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.h-history-count{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.q-query-text{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.cameraDetail{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}\n"] }]
819
+ args: [{ selector: 'lib-analyze-report', template: "<div class=\"card py-0 scroll-y\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Images/edgeapp icon.svg\">\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Analyze Report</a>\r\n <div class=\"sub-title q-query-text\">Your Queries reported below stores are got {{analyzereport?.countType}} {{analyzereport?.filteredFeature}} on {{selectedDate[0]?.date}} to\r\n {{selectedDate[selectedDate.length - 1]?.date}}</div>\r\n </div>\r\n </div>\r\n <ul class=\"nav my-3 w-100 mt-5\">\r\n <li *ngFor=\"let date of selectedDate;let i=index\" class=\"nav-item pe-none\" (click)=\"handleClick($event)\" ><a data-bs-toggle=\"tab\" [ngClass]=\"activeDate === date.date ? 'active':''\"\r\n class=\"nav-link btn btn-sm btn-color-muted btn-active fw-bolder px-10 me-1 show\">\r\n {{date.date}} <span *ngIf=\"activeDate === date.date && date?.showIcon\" class=\"mx-2\"><svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#EAF8FF\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span *ngIf=\"activeDate !== date.date && date?.showIcon\" class=\"mx-2\">\r\n <svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#F2F4F7\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a></li>\r\n </ul>\r\n <div *ngIf=\"activeArray?.primaryIssue\" class=\"my-3 mt-5\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div *ngIf=\"!activeArray?.primaryIssue\" class=\"my-3 mt-5\">\r\n <img style=\"width:50px; height:50px\" src=\"./assets/tango/Images/Successtoast.png\">\r\n </div>\r\n <div *ngIf=\"activeArray\" class=\"ul-list\">\r\n <ul>\r\n <li *ngIf=\"activeArray?.primaryIssue\" class=\"list-size my-3\">The primary issue was <span class=\"fw-bold-700\">{{activeArray?.primaryIssue}}</span> where\r\n the <span *ngFor=\"let data of activeArray?.secondaryReason let last = last\" class=\"fw-bold-700\">data <span *ngIf=\"!last\">,</span></span> was the secondary concern. </li>\r\n <li *ngIf=\"activeArray?.downTime > 0\" class=\"list-size my-3\">Store Experienced a downtime of <span class=\"fw-bold-700\">{{activeArray?.downTime}} mins</span>\r\n dated <span class=\"fw-bold-700\">{{activeArray?.issueDate}}</span> where \"N Files Lost\" and was unable to send to our\r\n cloud due to speed being <span class=\"fw-bold-700\">{{activeArray?.speedTest}} Mbps.</span> </li>\r\n <!-- <li class=\"list-size my-3\">We were able to capture only <span class=\"fw-bold-700\">100 Footfalls</span>\r\n despite the <span class=\"fw-bold-700\">Internet slow</span> issue </li> -->\r\n\r\n </ul>\r\n </div> \r\n </div>\r\n <div class=\"card-header border-0 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label fw-bolder fs-3 mb-1\">Tango Pre-Requisite <span class=\"badge badge-light-warning ms-2\">Warning</span></span>\r\n </h3>\r\n <div class=\"card-toolbar text-end\">\r\n <span class=\"list-size\">{{activeStream?.cameraNumber}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mx-3\"> \r\n <div class=\"table-reponsive\">\r\n <table class=\"bottom-border w-100\">\r\n <thead>\r\n <tr>\r\n <th>Instances</th>\r\n <th>Excepted</th>\r\n <th>Actual</th>\r\n <th>Result</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>Camera Angle</td>\r\n <td></td>\r\n <td><img [src]=\"angleChange?.angleChangeImage ? angleChange?.angleChangeImage :activeStream?.thumbnailImage\"></td>\r\n <td *ngIf=\"!angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationsuccess.svg\"></td>\r\n <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td>\r\n </tr>\r\n <tr>\r\n <td>Resolution</td>\r\n <td>1080 x 908</td>\r\n <td>{{angleChange?.resolution ? angleChange?.resolution : '--'}}</td>\r\n <!-- <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td> -->\r\n <td><img src=\"./assets/tango/Image/verificationsuccess.svg\"></td>\r\n </tr>\r\n <!-- <tr>\r\n <td>Downtime</td>\r\n <td>4.00 AM</td>\r\n <td>9.00 AM</td>\r\n <td><img src=\"./assets/tango/Image/verificationdanger.svg\"></td>\r\n </tr> -->\r\n </tbody>\r\n </table>\r\n <div *ngIf=\"streamDetails?.length\" class=\"d-flex justify-content-center align-items-center mt-10\">\r\n <div *ngFor=\"let stream of streamDetails\" [ngClass]=\"stream?.streamName === activeStream?.streamName? 'bg-dark' : 'bg-opacity-25'\" class=\"w-10px h-10px rounded-5 bg-dark cursor-pointer mx-3\" (click)=\"getstreambasedAngle(stream)\"></div>\r\n </div>\r\n <div class=\"card-header px-4 border-0 pt-5 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label-title mb-1\">Queries History</span>\r\n </h3>\r\n <div (click)=\"viewMore()\" class=\"card-toolbar text-end\">\r\n <span class=\"primary-list\">View more Details</span>\r\n </div>\r\n </div>\r\n <div class=\"px-5 q-query-text\">From the date of installation till today the below queries success rate has been maintained</div>\r\n <div class=\"d-flex flex-wrap py-3\">\r\n <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"h-history-title\">Earnings</div>\r\n <div class=\"d-flex align-items-center py-2\">\r\n <div class=\"h-history-count\">10 Tickets</div>\r\n </div>\r\n </div>\r\n <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"h-history-title\">Earnings</div>\r\n <div class=\"d-flex align-items-center py-2\">\r\n <div class=\"h-history-count\">78%</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"fw-bold fs-6 text-gray-500\">Earnings</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"fs-2 fw-bolder\">4500$</div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3 cursor-pointer \"\r\n (click)=\"raiseTicket()\">Raise a Ticket</button>\r\n <button *ngIf=\"(currentIdx + 1) !== selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"closeTicket()\">Accept & Close</button>\r\n <button *ngIf=\"(currentIdx + 1) === selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"openPopup()\">Close</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Unsaved Changes</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">Do you want to clise the tickets?</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmSave();modal.close()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #ReconfirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Are you sure, want to view more details?</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">If so you will redirect to Queries summary & can\u2019t able to come back to the screen.</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmMore();modal.dismiss()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n ", styles: [".nav-line-tabs1.nav-line-tabs-2x .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;color:var(--Primary-700, #009BF3)!important}.nav-line-tabs1 .nav-link{color:var(--Gray-500, #667085)!important;font-size:16px;font-weight:500!important;line-height:24px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.drops-down-down.ltr.double.show-ranges.shown{left:0!important;height:350px}:host::ng-deep .md-drppicker td{border-radius:44px}:host::ng-deep .md-drppicker .btn{border-radius:7px!important;background-color:#019df5!important}:host::ng-deep .md-drppicker .btn{right:99px;top:300px}:host::ng-deep .md-drppicker .ranges ul li button.active{background-color:#029cf3!important}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important}.title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.active{border-radius:6px!important;padding:8px 25px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.list-size{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.fw-bold-700{font-weight:700!important}.c-label{color:var(--Gray-800, #1D2939)!important;font-size:16px!important;font-weight:500!important;line-height:24px}.c-label-title{color:#000!important;font-size:16px!important;font-weight:500;line-height:24px!important}.primary-list{color:var(--Primary-700, #009BF3)!important;font-size:12px!important;font-weight:600;line-height:18px;text-transform:capitalize}.h-history-title{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.h-history-count{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.q-query-text{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.cameraDetail{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}\n"] }]
820
820
  }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i1$1.NgbActiveModal }, { type: TicketsService }, { type: i0.ChangeDetectorRef }], propDecorators: { analyzereport: [{
821
821
  type: Input
822
822
  }], confirmationModal: [{
@@ -837,9 +837,11 @@ class CreateTicketComponent {
837
837
  Features = ['Footfall'];
838
838
  filteredStore;
839
839
  filteredFeature;
840
+ searchData;
840
841
  dropDownFeature;
841
842
  dropDownStore;
842
843
  email;
844
+ filteredItems;
843
845
  emailError;
844
846
  selectedFilters = {};
845
847
  selectedDateRange = {};
@@ -863,8 +865,8 @@ class CreateTicketComponent {
863
865
  onClick(event) {
864
866
  const target = event.target;
865
867
  if (!target.closest('.dropdown')) {
866
- this.dropDownFeature = false;
867
- this.dropDownStore = false;
868
+ // this.dropDownFeature = false;
869
+ // this.dropDownStore = false;
868
870
  }
869
871
  }
870
872
  ngOnInit() {
@@ -896,6 +898,7 @@ class CreateTicketComponent {
896
898
  this.service.getStore(clientId).pipe(takeUntil(this.destroy$)).subscribe({
897
899
  next: (res) => {
898
900
  this.storeDetails = res.data.result;
901
+ this.filteredItems = this.storeDetails;
899
902
  },
900
903
  error: (err) => {
901
904
  },
@@ -903,6 +906,10 @@ class CreateTicketComponent {
903
906
  },
904
907
  });
905
908
  }
909
+ searchStore() {
910
+ const data = this.searchData.toLowerCase().trim();
911
+ this.filteredItems = this.storeDetails.filter((el) => el.storeName.toLowerCase().includes(data));
912
+ }
906
913
  datechange(event) {
907
914
  if (event && event.startDate && event.endDate) {
908
915
  if (this.dayjs(event.startDate).isValid() &&
@@ -970,9 +977,11 @@ class CreateTicketComponent {
970
977
  if (key === 'store') {
971
978
  this.filteredStore = value;
972
979
  this.filteredStoreId = Id;
980
+ this.dropDownStore = false;
973
981
  }
974
982
  else if (key === 'feature')
975
983
  this.filteredFeature = value.toLowerCase();
984
+ this.dropDownFeature = false;
976
985
  }
977
986
  // onEmailChange(event: any) {
978
987
  // this.email = event.target.value.toLowerCase();
@@ -989,11 +998,11 @@ class CreateTicketComponent {
989
998
  }
990
999
  }
991
1000
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CreateTicketComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgbModal }, { token: i1$1.NgbActiveModal }, { token: TicketsService }], target: i0.ɵɵFactoryTarget.Component });
992
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CreateTicketComponent, selector: "lib-create-ticket", inputs: { clientId: "clientId" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"card py-0 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"row w-100 my-5\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Support</a>\r\n <div class=\"sub-title mt-3\">Please fill the details for store analysis </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row my-3 mt-2\">\r\n <div class=\"col-md-12 my-2\">\r\n <label class=\"form-label mb-1\">Select Date Range</label>\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\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n <p class=\"notes mt-3\">Note : Analysis restricted to last 4 days only. </p>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div [ngClass]=\"countType === 'highcount' ? 'custom-container':'normal-container'\">\r\n <div class=\"icon-container\">\r\n <input type=\"radio\" id=\"highCount\" name=\"countType\" [(ngModel)]=\"countType\" value=\"highcount\" class=\"radio-input\" [ngClass]=\"{'high-dot': countType === 'highcount'}\">\r\n <label for=\"highCount\" class=\"radio-label\">\r\n <span [ngClass]=\"countType === 'highcount' ? 'text':'orval fw-semibold'\" class=\"text-nowrap fw-semibold\">High Count</span>\r\n </label>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div [ngClass]=\"countType === 'lowcount' ? 'custom-container':'normal-container'\">\r\n <div class=\"icon-container\">\r\n <input type=\"radio\" id=\"lowCount\" name=\"countType\" value=\"lowcount\" [(ngModel)]=\"countType\" class=\"radio-input\" [ngClass]=\"{'low-dot': countType === 'lowcount'}\">\r\n <label for=\"lowCount\" class=\"radio-label\">\r\n <span [ngClass]=\"countType === 'lowcount' ? 'text':'orval fw-semibold'\" class=\"text-nowrap\">Low Count</span>\r\n </label>\r\n \r\n </div>\r\n </div>\r\n </div> \r\n <div class=\"col-md-12 my-2 mt-5\">\r\n <label class=\"form-label mb-2\">Select Store</label>\r\n <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"openDropdown($event,'store')\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between selected fw-semibold bg-white\">\r\n {{filteredStore ? filteredStore : 'Select Store'}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"dropDownStore\" class=\"card py-1 w-100 position-absolute top-50px end-0 z-1 dropdown-height\">\r\n <ul *ngFor=\"let store of storeDetails\" class=\"list-unstyled mb-0\">\r\n <li [ngClass]=\"filteredStoreId === store?.storeId ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem(store?.storeName,store?.storeId,'store')\">\r\n {{store?.storeName}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 my-2 mt-5\">\r\n <label class=\"form-label mb-2\">Select Feature</label>\r\n <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"openDropdown($event,'feature')\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between selected fw-semibold bg-white\">\r\n {{filteredFeature ? filteredFeature : 'Select Feature'}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"dropDownFeature\" class=\"card py-1 w-100 position-absolute top-50px end-0 z-1 dropdown-height\">\r\n <ul *ngFor=\"let feature of Features\" class=\"list-unstyled mb-0\">\r\n <li [ngClass]=\"this.filteredFeature === feature ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem(feature,'id','feature')\">\r\n {{feature}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 my-2 mt-5\">\r\n <label class=\"form-label mb-2\">Email</label>\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\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M18.3337 4.99992C18.3337 4.08325 17.5837 3.33325 16.667 3.33325H3.33366C2.41699 3.33325 1.66699 4.08325 1.66699 4.99992M18.3337 4.99992V14.9999C18.3337 15.9166 17.5837 16.6666 16.667 16.6666H3.33366C2.41699 16.6666 1.66699 15.9166 1.66699 14.9999V4.99992M18.3337 4.99992L10.0003 10.8333L1.66699 4.99992\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" style=\"text-transform:lowercase;\" class=\"form-control custom-form-control ps-14 me-2\" [(ngModel)]=\"email\" placeholder=\"Email\" aria-label=\"Email\" aria-describedby=\"basic-addon1\" (input)=\"emailValidation()\">\r\n </div>\r\n <div *ngIf=\"emailError\" class=\"text-danger mt-3\">\r\n {{ emailError }}\r\n </div>\r\n </div>\r\n <div class=\"d-flex my-5\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\" [disabled]=\"disablebtn\"\r\n (click)=\"onSubmit()\">Analyze</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.selected{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}li{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:500!important;line-height:30px}.scroll{overflow-y:auto;overflow-x:hidden}.template{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}.orval{color:var(--Gray-700, #344054);font-size:14px;font-weight:500!important;line-height:20px}.single-user{color:var(--Gray-700, #344054);font-size:16px!important;line-height:24px;text-transform:capitalize}.form-label{color:var(--Gray-700, #344054);text-shadow:0px 0px 0px #D5EFFE,0px 1px 2px rgba(16,24,40,.05);font-size:14px;font-weight:500;line-height:20px}.form-control:focus{border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--White, #FFF)!important;box-shadow:0 0 0 4px #d5effe,0 1px 2px #1018280d!important}.font-sub{font-size:12px!important;line-height:18px!important}.accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg);border:none!important}.divider{border-bottom:1px solid #D0D5DD;width:75%;margin-left:2%;background:var(--Gray-300, #D0D5DD)}input[type=checkbox]{width:20px!important;height:20px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}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:0;padding-top:12px;padding-right:6px}.collapsed{display:none}.divider{border-right:1px solid #ccc;margin-left:10px;margin-right:10px}.notes{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.custom-container{padding:16px;background:#eaf8ff;border-radius:8px;border:1px #6BCAFF solid;display:flex;justify-content:flex-start;align-items:flex-start}.normal-container{padding:16px;background:#fff;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);display:flex;justify-content:flex-start;align-items:flex-start}.icon-container{flex:1 1 0;height:20px;display:flex;align-items:center;gap:8px}.icon{width:16px;height:16px;background:#eaf8ff;border-radius:8px;overflow:hidden;border:1px #00A3FF solid;display:flex;justify-content:center;align-items:center}.dot{width:6px;height:6px;position:absolute;background:#00a3ff;border-radius:9999px;left:5px;top:5px}.text-container{flex:1 1 0;flex-direction:column;display:flex;justify-content:flex-start;align-items:flex-start}.text{align-self:stretch;color:#008edf;font-size:14px;font-family:Inter;font-weight:500;line-height:20px;word-wrap:break-word}.radio-input{width:20px;height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.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}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:0!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .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 .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.dropdown-height{min-height:auto!important;max-height:300px!important;overflow:auto!important}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
1001
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CreateTicketComponent, selector: "lib-create-ticket", inputs: { clientId: "clientId" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"card py-0 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"row w-100 my-5\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Support</a>\r\n <div class=\"sub-title mt-3\">Please fill the details for store analysis </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row my-3 mt-2\">\r\n <div class=\"col-md-12 my-2\">\r\n <label class=\"form-label mb-1\">Select Date Range</label>\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\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n <p class=\"notes mt-3\">Note : Analysis restricted to last 4 days only. </p>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div [ngClass]=\"countType === 'highcount' ? 'custom-container':'normal-container'\">\r\n <div class=\"icon-container\">\r\n <input type=\"radio\" id=\"highCount\" name=\"countType\" [(ngModel)]=\"countType\" value=\"highcount\" class=\"radio-input\" [ngClass]=\"{'high-dot': countType === 'highcount'}\">\r\n <label for=\"highCount\" class=\"radio-label\">\r\n <span [ngClass]=\"countType === 'highcount' ? 'text':'orval fw-semibold'\" class=\"text-nowrap fw-semibold\">High Count</span>\r\n </label>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div [ngClass]=\"countType === 'lowcount' ? 'custom-container':'normal-container'\">\r\n <div class=\"icon-container\">\r\n <input type=\"radio\" id=\"lowCount\" name=\"countType\" value=\"lowcount\" [(ngModel)]=\"countType\" class=\"radio-input\" [ngClass]=\"{'low-dot': countType === 'lowcount'}\">\r\n <label for=\"lowCount\" class=\"radio-label\">\r\n <span [ngClass]=\"countType === 'lowcount' ? 'text':'orval fw-semibold'\" class=\"text-nowrap\">Low Count</span>\r\n </label>\r\n \r\n </div>\r\n </div>\r\n </div> \r\n <div class=\"col-md-12 my-2 mt-5\">\r\n <label class=\"form-label mb-2\">Select Store</label>\r\n <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"openDropdown($event,'store')\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between selected fw-semibold bg-white\">\r\n {{filteredStore ? filteredStore : 'Select Store'}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"dropDownStore\" class=\"card py-1 w-100 position-absolute top-50px end-0 z-1 dropdown-height px-5\">\r\n <input type=\"text\" [(ngModel)]=\"searchData\" (input)=\"searchStore()\" class=\"form-control\">\r\n <ul *ngFor=\"let store of filteredItems\" class=\"list-unstyled mb-0\">\r\n <li [ngClass]=\"filteredStoreId === store?.storeId ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem(store?.storeName,store?.storeId,'store')\">\r\n {{store?.storeName}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 my-2 mt-5\">\r\n <label class=\"form-label mb-2\">Select Feature</label>\r\n <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"openDropdown($event,'feature')\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between selected fw-semibold bg-white\">\r\n {{filteredFeature ? filteredFeature : 'Select Feature'}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"dropDownFeature\" class=\"card py-1 w-100 position-absolute top-50px end-0 z-1 dropdown-height\">\r\n <ul *ngFor=\"let feature of Features\" class=\"list-unstyled mb-0\">\r\n <li [ngClass]=\"this.filteredFeature === feature ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem(feature,'id','feature')\">\r\n {{feature}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 my-2 mt-5\">\r\n <label class=\"form-label mb-2\">Email</label>\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\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M18.3337 4.99992C18.3337 4.08325 17.5837 3.33325 16.667 3.33325H3.33366C2.41699 3.33325 1.66699 4.08325 1.66699 4.99992M18.3337 4.99992V14.9999C18.3337 15.9166 17.5837 16.6666 16.667 16.6666H3.33366C2.41699 16.6666 1.66699 15.9166 1.66699 14.9999V4.99992M18.3337 4.99992L10.0003 10.8333L1.66699 4.99992\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" style=\"text-transform:lowercase;\" class=\"form-control custom-form-control ps-14 me-2\" [(ngModel)]=\"email\" placeholder=\"Email\" aria-label=\"Email\" aria-describedby=\"basic-addon1\" (input)=\"emailValidation()\">\r\n </div>\r\n <div *ngIf=\"emailError\" class=\"text-danger mt-3\">\r\n {{ emailError }}\r\n </div>\r\n </div>\r\n <div class=\"d-flex my-5\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\" [disabled]=\"disablebtn\"\r\n (click)=\"onSubmit()\">Analyze</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.selected{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}li{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:500!important;line-height:30px}.scroll{overflow-y:auto;overflow-x:hidden}.template{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}.orval{color:var(--Gray-700, #344054);font-size:14px;font-weight:500!important;line-height:20px}.single-user{color:var(--Gray-700, #344054);font-size:16px!important;line-height:24px;text-transform:capitalize}.form-label{color:var(--Gray-700, #344054);text-shadow:0px 0px 0px #D5EFFE,0px 1px 2px rgba(16,24,40,.05);font-size:14px;font-weight:500;line-height:20px}.form-control:focus{border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--White, #FFF)!important;box-shadow:0 0 0 4px #d5effe,0 1px 2px #1018280d!important}.font-sub{font-size:12px!important;line-height:18px!important}.accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg);border:none!important}.divider{border-bottom:1px solid #D0D5DD;width:75%;margin-left:2%;background:var(--Gray-300, #D0D5DD)}input[type=checkbox]{width:20px!important;height:20px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}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:0;padding-top:12px;padding-right:6px}.collapsed{display:none}.divider{border-right:1px solid #ccc;margin-left:10px;margin-right:10px}.notes{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.custom-container{padding:16px;background:#eaf8ff;border-radius:8px;border:1px #6BCAFF solid;display:flex;justify-content:flex-start;align-items:flex-start}.normal-container{padding:16px;background:#fff;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);display:flex;justify-content:flex-start;align-items:flex-start}.icon-container{flex:1 1 0;height:20px;display:flex;align-items:center;gap:8px}.icon{width:16px;height:16px;background:#eaf8ff;border-radius:8px;overflow:hidden;border:1px #00A3FF solid;display:flex;justify-content:center;align-items:center}.dot{width:6px;height:6px;position:absolute;background:#00a3ff;border-radius:9999px;left:5px;top:5px}.text-container{flex:1 1 0;flex-direction:column;display:flex;justify-content:flex-start;align-items:flex-start}.text{align-self:stretch;color:#008edf;font-size:14px;font-family:Inter;font-weight:500;line-height:20px;word-wrap:break-word}.radio-input{width:20px;height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.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}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:0!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .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 .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.dropdown-height{min-height:auto!important;max-height:300px!important;overflow:auto!important}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
993
1002
  }
994
1003
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CreateTicketComponent, decorators: [{
995
1004
  type: Component,
996
- args: [{ selector: 'lib-create-ticket', template: "<div class=\"card py-0 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"row w-100 my-5\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Support</a>\r\n <div class=\"sub-title mt-3\">Please fill the details for store analysis </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row my-3 mt-2\">\r\n <div class=\"col-md-12 my-2\">\r\n <label class=\"form-label mb-1\">Select Date Range</label>\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\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n <p class=\"notes mt-3\">Note : Analysis restricted to last 4 days only. </p>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div [ngClass]=\"countType === 'highcount' ? 'custom-container':'normal-container'\">\r\n <div class=\"icon-container\">\r\n <input type=\"radio\" id=\"highCount\" name=\"countType\" [(ngModel)]=\"countType\" value=\"highcount\" class=\"radio-input\" [ngClass]=\"{'high-dot': countType === 'highcount'}\">\r\n <label for=\"highCount\" class=\"radio-label\">\r\n <span [ngClass]=\"countType === 'highcount' ? 'text':'orval fw-semibold'\" class=\"text-nowrap fw-semibold\">High Count</span>\r\n </label>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div [ngClass]=\"countType === 'lowcount' ? 'custom-container':'normal-container'\">\r\n <div class=\"icon-container\">\r\n <input type=\"radio\" id=\"lowCount\" name=\"countType\" value=\"lowcount\" [(ngModel)]=\"countType\" class=\"radio-input\" [ngClass]=\"{'low-dot': countType === 'lowcount'}\">\r\n <label for=\"lowCount\" class=\"radio-label\">\r\n <span [ngClass]=\"countType === 'lowcount' ? 'text':'orval fw-semibold'\" class=\"text-nowrap\">Low Count</span>\r\n </label>\r\n \r\n </div>\r\n </div>\r\n </div> \r\n <div class=\"col-md-12 my-2 mt-5\">\r\n <label class=\"form-label mb-2\">Select Store</label>\r\n <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"openDropdown($event,'store')\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between selected fw-semibold bg-white\">\r\n {{filteredStore ? filteredStore : 'Select Store'}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"dropDownStore\" class=\"card py-1 w-100 position-absolute top-50px end-0 z-1 dropdown-height\">\r\n <ul *ngFor=\"let store of storeDetails\" class=\"list-unstyled mb-0\">\r\n <li [ngClass]=\"filteredStoreId === store?.storeId ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem(store?.storeName,store?.storeId,'store')\">\r\n {{store?.storeName}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 my-2 mt-5\">\r\n <label class=\"form-label mb-2\">Select Feature</label>\r\n <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"openDropdown($event,'feature')\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between selected fw-semibold bg-white\">\r\n {{filteredFeature ? filteredFeature : 'Select Feature'}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"dropDownFeature\" class=\"card py-1 w-100 position-absolute top-50px end-0 z-1 dropdown-height\">\r\n <ul *ngFor=\"let feature of Features\" class=\"list-unstyled mb-0\">\r\n <li [ngClass]=\"this.filteredFeature === feature ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem(feature,'id','feature')\">\r\n {{feature}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 my-2 mt-5\">\r\n <label class=\"form-label mb-2\">Email</label>\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\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M18.3337 4.99992C18.3337 4.08325 17.5837 3.33325 16.667 3.33325H3.33366C2.41699 3.33325 1.66699 4.08325 1.66699 4.99992M18.3337 4.99992V14.9999C18.3337 15.9166 17.5837 16.6666 16.667 16.6666H3.33366C2.41699 16.6666 1.66699 15.9166 1.66699 14.9999V4.99992M18.3337 4.99992L10.0003 10.8333L1.66699 4.99992\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" style=\"text-transform:lowercase;\" class=\"form-control custom-form-control ps-14 me-2\" [(ngModel)]=\"email\" placeholder=\"Email\" aria-label=\"Email\" aria-describedby=\"basic-addon1\" (input)=\"emailValidation()\">\r\n </div>\r\n <div *ngIf=\"emailError\" class=\"text-danger mt-3\">\r\n {{ emailError }}\r\n </div>\r\n </div>\r\n <div class=\"d-flex my-5\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\" [disabled]=\"disablebtn\"\r\n (click)=\"onSubmit()\">Analyze</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.selected{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}li{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:500!important;line-height:30px}.scroll{overflow-y:auto;overflow-x:hidden}.template{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}.orval{color:var(--Gray-700, #344054);font-size:14px;font-weight:500!important;line-height:20px}.single-user{color:var(--Gray-700, #344054);font-size:16px!important;line-height:24px;text-transform:capitalize}.form-label{color:var(--Gray-700, #344054);text-shadow:0px 0px 0px #D5EFFE,0px 1px 2px rgba(16,24,40,.05);font-size:14px;font-weight:500;line-height:20px}.form-control:focus{border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--White, #FFF)!important;box-shadow:0 0 0 4px #d5effe,0 1px 2px #1018280d!important}.font-sub{font-size:12px!important;line-height:18px!important}.accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg);border:none!important}.divider{border-bottom:1px solid #D0D5DD;width:75%;margin-left:2%;background:var(--Gray-300, #D0D5DD)}input[type=checkbox]{width:20px!important;height:20px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}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:0;padding-top:12px;padding-right:6px}.collapsed{display:none}.divider{border-right:1px solid #ccc;margin-left:10px;margin-right:10px}.notes{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.custom-container{padding:16px;background:#eaf8ff;border-radius:8px;border:1px #6BCAFF solid;display:flex;justify-content:flex-start;align-items:flex-start}.normal-container{padding:16px;background:#fff;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);display:flex;justify-content:flex-start;align-items:flex-start}.icon-container{flex:1 1 0;height:20px;display:flex;align-items:center;gap:8px}.icon{width:16px;height:16px;background:#eaf8ff;border-radius:8px;overflow:hidden;border:1px #00A3FF solid;display:flex;justify-content:center;align-items:center}.dot{width:6px;height:6px;position:absolute;background:#00a3ff;border-radius:9999px;left:5px;top:5px}.text-container{flex:1 1 0;flex-direction:column;display:flex;justify-content:flex-start;align-items:flex-start}.text{align-self:stretch;color:#008edf;font-size:14px;font-family:Inter;font-weight:500;line-height:20px;word-wrap:break-word}.radio-input{width:20px;height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.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}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:0!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .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 .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.dropdown-height{min-height:auto!important;max-height:300px!important;overflow:auto!important}\n"] }]
1005
+ args: [{ selector: 'lib-create-ticket', template: "<div class=\"card py-0 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"row w-100 my-5\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Support</a>\r\n <div class=\"sub-title mt-3\">Please fill the details for store analysis </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row my-3 mt-2\">\r\n <div class=\"col-md-12 my-2\">\r\n <label class=\"form-label mb-1\">Select Date Range</label>\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\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n <p class=\"notes mt-3\">Note : Analysis restricted to last 4 days only. </p>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div [ngClass]=\"countType === 'highcount' ? 'custom-container':'normal-container'\">\r\n <div class=\"icon-container\">\r\n <input type=\"radio\" id=\"highCount\" name=\"countType\" [(ngModel)]=\"countType\" value=\"highcount\" class=\"radio-input\" [ngClass]=\"{'high-dot': countType === 'highcount'}\">\r\n <label for=\"highCount\" class=\"radio-label\">\r\n <span [ngClass]=\"countType === 'highcount' ? 'text':'orval fw-semibold'\" class=\"text-nowrap fw-semibold\">High Count</span>\r\n </label>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div [ngClass]=\"countType === 'lowcount' ? 'custom-container':'normal-container'\">\r\n <div class=\"icon-container\">\r\n <input type=\"radio\" id=\"lowCount\" name=\"countType\" value=\"lowcount\" [(ngModel)]=\"countType\" class=\"radio-input\" [ngClass]=\"{'low-dot': countType === 'lowcount'}\">\r\n <label for=\"lowCount\" class=\"radio-label\">\r\n <span [ngClass]=\"countType === 'lowcount' ? 'text':'orval fw-semibold'\" class=\"text-nowrap\">Low Count</span>\r\n </label>\r\n \r\n </div>\r\n </div>\r\n </div> \r\n <div class=\"col-md-12 my-2 mt-5\">\r\n <label class=\"form-label mb-2\">Select Store</label>\r\n <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"openDropdown($event,'store')\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between selected fw-semibold bg-white\">\r\n {{filteredStore ? filteredStore : 'Select Store'}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"dropDownStore\" class=\"card py-1 w-100 position-absolute top-50px end-0 z-1 dropdown-height px-5\">\r\n <input type=\"text\" [(ngModel)]=\"searchData\" (input)=\"searchStore()\" class=\"form-control\">\r\n <ul *ngFor=\"let store of filteredItems\" class=\"list-unstyled mb-0\">\r\n <li [ngClass]=\"filteredStoreId === store?.storeId ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem(store?.storeName,store?.storeId,'store')\">\r\n {{store?.storeName}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 my-2 mt-5\">\r\n <label class=\"form-label mb-2\">Select Feature</label>\r\n <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"openDropdown($event,'feature')\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between selected fw-semibold bg-white\">\r\n {{filteredFeature ? filteredFeature : 'Select Feature'}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"dropDownFeature\" class=\"card py-1 w-100 position-absolute top-50px end-0 z-1 dropdown-height\">\r\n <ul *ngFor=\"let feature of Features\" class=\"list-unstyled mb-0\">\r\n <li [ngClass]=\"this.filteredFeature === feature ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem(feature,'id','feature')\">\r\n {{feature}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 my-2 mt-5\">\r\n <label class=\"form-label mb-2\">Email</label>\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\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M18.3337 4.99992C18.3337 4.08325 17.5837 3.33325 16.667 3.33325H3.33366C2.41699 3.33325 1.66699 4.08325 1.66699 4.99992M18.3337 4.99992V14.9999C18.3337 15.9166 17.5837 16.6666 16.667 16.6666H3.33366C2.41699 16.6666 1.66699 15.9166 1.66699 14.9999V4.99992M18.3337 4.99992L10.0003 10.8333L1.66699 4.99992\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" style=\"text-transform:lowercase;\" class=\"form-control custom-form-control ps-14 me-2\" [(ngModel)]=\"email\" placeholder=\"Email\" aria-label=\"Email\" aria-describedby=\"basic-addon1\" (input)=\"emailValidation()\">\r\n </div>\r\n <div *ngIf=\"emailError\" class=\"text-danger mt-3\">\r\n {{ emailError }}\r\n </div>\r\n </div>\r\n <div class=\"d-flex my-5\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\" [disabled]=\"disablebtn\"\r\n (click)=\"onSubmit()\">Analyze</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.selected{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}li{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:500!important;line-height:30px}.scroll{overflow-y:auto;overflow-x:hidden}.template{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}.orval{color:var(--Gray-700, #344054);font-size:14px;font-weight:500!important;line-height:20px}.single-user{color:var(--Gray-700, #344054);font-size:16px!important;line-height:24px;text-transform:capitalize}.form-label{color:var(--Gray-700, #344054);text-shadow:0px 0px 0px #D5EFFE,0px 1px 2px rgba(16,24,40,.05);font-size:14px;font-weight:500;line-height:20px}.form-control:focus{border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--White, #FFF)!important;box-shadow:0 0 0 4px #d5effe,0 1px 2px #1018280d!important}.font-sub{font-size:12px!important;line-height:18px!important}.accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg);border:none!important}.divider{border-bottom:1px solid #D0D5DD;width:75%;margin-left:2%;background:var(--Gray-300, #D0D5DD)}input[type=checkbox]{width:20px!important;height:20px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}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:0;padding-top:12px;padding-right:6px}.collapsed{display:none}.divider{border-right:1px solid #ccc;margin-left:10px;margin-right:10px}.notes{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.custom-container{padding:16px;background:#eaf8ff;border-radius:8px;border:1px #6BCAFF solid;display:flex;justify-content:flex-start;align-items:flex-start}.normal-container{padding:16px;background:#fff;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);display:flex;justify-content:flex-start;align-items:flex-start}.icon-container{flex:1 1 0;height:20px;display:flex;align-items:center;gap:8px}.icon{width:16px;height:16px;background:#eaf8ff;border-radius:8px;overflow:hidden;border:1px #00A3FF solid;display:flex;justify-content:center;align-items:center}.dot{width:6px;height:6px;position:absolute;background:#00a3ff;border-radius:9999px;left:5px;top:5px}.text-container{flex:1 1 0;flex-direction:column;display:flex;justify-content:flex-start;align-items:flex-start}.text{align-self:stretch;color:#008edf;font-size:14px;font-family:Inter;font-weight:500;line-height:20px;word-wrap:break-word}.radio-input{width:20px;height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.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}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:0!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .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 .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.dropdown-height{min-height:auto!important;max-height:300px!important;overflow:auto!important}\n"] }]
997
1006
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }, { type: i1$1.NgbActiveModal }, { type: TicketsService }], propDecorators: { clientId: [{
998
1007
  type: Input
999
1008
  }], onClick: [{