tango-app-ui-manage-settings 3.0.10-dev → 3.0.11-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 (9) hide show
  1. package/esm2022/lib/components/payments-subscription/subscription-popups/multidropdown/multidropdown.component.mjs +8 -9
  2. package/esm2022/lib/services/client-api.service.mjs +2 -2
  3. package/esm2022/lib/services/payment-subscription.service.mjs +2 -2
  4. package/fesm2022/tango-app-ui-manage-settings.mjs +34 -33
  5. package/fesm2022/tango-app-ui-manage-settings.mjs.map +1 -1
  6. package/lib/components/payments-subscription/subscription-popups/multidropdown/multidropdown.component.d.ts +1 -2
  7. package/lib/services/client-api.service.d.ts +1 -1
  8. package/lib/services/payment-subscription.service.d.ts +1 -1
  9. package/package.json +1 -1
package/fesm2022/tango-app-ui-manage-settings.mjs CHANGED
@@ -9,7 +9,8 @@ import * as i1$1 from 'tango-app-ui-metronics';
9
9
  import * as FileSaver from 'file-saver';
10
10
  import * as i1 from '@angular/common/http';
11
11
  import { HttpClientModule } from '@angular/common/http';
12
- import * as i2 from 'tango-app-ui-shared';
12
+ import * as i2 from 'tango-app-ui-global';
13
+ import * as i3$1 from 'tango-app-ui-shared';
13
14
  import { CommonSharedModule } from 'tango-app-ui-shared';
14
15
  import * as i1$3 from '@ng-bootstrap/ng-bootstrap';
15
16
  import { NgbAccordionModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
@@ -600,13 +601,13 @@ class BrandDetailsComponent {
600
601
  }
601
602
  return formData;
602
603
  }
603
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BrandDetailsComponent, deps: [{ token: ClientApiService }, { token: i2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
604
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BrandDetailsComponent, deps: [{ token: ClientApiService }, { token: i3$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
604
605
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: BrandDetailsComponent, selector: "lib-brand-details", ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion [closeOthers]=\"true\" [destroyOnHide]=\"true\" (show)=\"openItem($event)\">\r\n <div class=\"settings-accordian-card \" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Brand Info</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-brand-info></lib-brand-info>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Billing Details</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-billing-details></lib-billing-details>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Signatory Details</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-signatory-details></lib-signatory-details>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".settings-accordian-card{border-radius:10px;background:var(#FFF);overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$3.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$3.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$3.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$3.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$3.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: BrandInfoComponent, selector: "lib-brand-info" }, { kind: "component", type: BillingDetailsComponent, selector: "lib-billing-details" }, { kind: "component", type: SignatoryDetailsComponent, selector: "lib-signatory-details" }] });
605
606
  }
606
607
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: BrandDetailsComponent, decorators: [{
607
608
  type: Component,
608
609
  args: [{ selector: 'lib-brand-details', template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion [closeOthers]=\"true\" [destroyOnHide]=\"true\" (show)=\"openItem($event)\">\r\n <div class=\"settings-accordian-card \" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Brand Info</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-brand-info></lib-brand-info>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Billing Details</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-billing-details></lib-billing-details>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Signatory Details</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-signatory-details></lib-signatory-details>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".settings-accordian-card{border-radius:10px;background:var(#FFF);overflow:hidden}\n"] }]
609
- }], ctorParameters: () => [{ type: ClientApiService }, { type: i2.ToastService }] });
610
+ }], ctorParameters: () => [{ type: ClientApiService }, { type: i3$1.ToastService }] });
610
611
 
611
612
  class PaymentSubscriptionService {
612
613
  http;
@@ -819,13 +820,13 @@ class SubscriptionApprovalComponent {
819
820
  support(event, daystrail) {
820
821
  this.supportselect = daystrail;
821
822
  }
822
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubscriptionApprovalComponent, deps: [{ token: i1$3.NgbModal }, { token: i1$3.NgbActiveModal }, { token: i2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
823
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubscriptionApprovalComponent, deps: [{ token: i1$3.NgbModal }, { token: i1$3.NgbActiveModal }, { token: i3$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
823
824
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SubscriptionApprovalComponent, selector: "lib-subscription-approval", ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Confirmation</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please update the status of below product\r\n </div>\r\n </div>\r\n <div class=\"modal-body\">\r\n <!--begin::Form-->\r\n <form id=\"kt_modal_new_card_form\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n \r\n <div class=\"fv-row fv-plugins-icon-container \">\r\n <div class=\"confirmationborder\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">Tango Zone</label>\r\n <span class=\"badge badge-light-primary ms-2\">On Trail\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"onTrail($event, 'continuetrail')\">\r\n <input [ngClass]=\"select ==='continuetrail' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions\"\r\n id=\"inlineRadio1\" value=\"continuetrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Continue with Trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"onTrail($event, 'addsubscription')\">\r\n <input [ngClass]=\"select ==='addsubscription' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions\"\r\n id=\"inlineRadio1\" value=\"addsubscription\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"confirmationborder mt-4\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">Tango SOP</label>\r\n <span class=\"badge badge-light-warning ms-2\">Trail Expired\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"TrailExpired($event, 'subscribenow')\">\r\n <input [ngClass]=\"trailselect ==='subscribenow' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions\"\r\n id=\"inlineRadio1\" value=\"subscribenow\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Continue with Trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"TrailExpired($event, 'dolater')\">\r\n <input [ngClass]=\"trailselect ==='dolater' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions\"\r\n id=\"inlineRadio1\" value=\"dolater\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"confirmationborder mt-4\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">Priority Support</label>\r\n <!-- <span class=\"badge badge-light-primary ms-2\">\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/clockexpiry-icon.svg\" alt=\"\">\r\n </span> -->\r\n </div>\r\n <div class=\"form-group pt-1\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"support($event, 'daystrail')\">\r\n <input [ngClass]=\"supportselect ==='daystrail' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions\"\r\n id=\"inlineRadio1\" value=\"daystrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Start 14 days Trial</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"support($event, 'subscribenow')\">\r\n <input [ngClass]=\"supportselect ==='subscribenow' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions\"\r\n id=\"inlineRadio1\" value=\"subscribenow\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Subscribe Now</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"support($event, 'later')\">\r\n <input [ngClass]=\"supportselect ==='later' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions\"\r\n id=\"inlineRadio1\" value=\"later\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">I'll do it later</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n <div class=\"d-flex mt-9 my-2\">\r\n <button type=\"submit\" class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"suscribed();showGif()\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Submit</span></button>\r\n </div>\r\n </div>\r\n \r\n \r\n <!--end::Actions-->\r\n </form>\r\n <!--end::Form-->\r\n \r\n </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.radio-custom{width:20px;height:20px;background-color:#eaf8ff}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:8px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff;width:16px;height:16px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.confirmationborder{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;flex-direction:column;align-items:flex-start;gap:18px;align-self:stretch}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
824
825
  }
825
826
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubscriptionApprovalComponent, decorators: [{
826
827
  type: Component,
827
828
  args: [{ selector: 'lib-subscription-approval', template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Confirmation</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please update the status of below product\r\n </div>\r\n </div>\r\n <div class=\"modal-body\">\r\n <!--begin::Form-->\r\n <form id=\"kt_modal_new_card_form\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n \r\n <div class=\"fv-row fv-plugins-icon-container \">\r\n <div class=\"confirmationborder\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">Tango Zone</label>\r\n <span class=\"badge badge-light-primary ms-2\">On Trail\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"onTrail($event, 'continuetrail')\">\r\n <input [ngClass]=\"select ==='continuetrail' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions\"\r\n id=\"inlineRadio1\" value=\"continuetrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Continue with Trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"onTrail($event, 'addsubscription')\">\r\n <input [ngClass]=\"select ==='addsubscription' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions\"\r\n id=\"inlineRadio1\" value=\"addsubscription\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"confirmationborder mt-4\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">Tango SOP</label>\r\n <span class=\"badge badge-light-warning ms-2\">Trail Expired\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"TrailExpired($event, 'subscribenow')\">\r\n <input [ngClass]=\"trailselect ==='subscribenow' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions\"\r\n id=\"inlineRadio1\" value=\"subscribenow\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Continue with Trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"TrailExpired($event, 'dolater')\">\r\n <input [ngClass]=\"trailselect ==='dolater' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions\"\r\n id=\"inlineRadio1\" value=\"dolater\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"confirmationborder mt-4\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">Priority Support</label>\r\n <!-- <span class=\"badge badge-light-primary ms-2\">\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/clockexpiry-icon.svg\" alt=\"\">\r\n </span> -->\r\n </div>\r\n <div class=\"form-group pt-1\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"support($event, 'daystrail')\">\r\n <input [ngClass]=\"supportselect ==='daystrail' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions\"\r\n id=\"inlineRadio1\" value=\"daystrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Start 14 days Trial</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"support($event, 'subscribenow')\">\r\n <input [ngClass]=\"supportselect ==='subscribenow' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions\"\r\n id=\"inlineRadio1\" value=\"subscribenow\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Subscribe Now</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"support($event, 'later')\">\r\n <input [ngClass]=\"supportselect ==='later' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions\"\r\n id=\"inlineRadio1\" value=\"later\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">I'll do it later</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n <div class=\"d-flex mt-9 my-2\">\r\n <button type=\"submit\" class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"suscribed();showGif()\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Submit</span></button>\r\n </div>\r\n </div>\r\n \r\n \r\n <!--end::Actions-->\r\n </form>\r\n <!--end::Form-->\r\n \r\n </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.radio-custom{width:20px;height:20px;background-color:#eaf8ff}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:8px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff;width:16px;height:16px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.confirmationborder{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;flex-direction:column;align-items:flex-start;gap:18px;align-self:stretch}\n"] }]
828
- }], ctorParameters: () => [{ type: i1$3.NgbModal }, { type: i1$3.NgbActiveModal }, { type: i2.ToastService }] });
829
+ }], ctorParameters: () => [{ type: i1$3.NgbModal }, { type: i1$3.NgbActiveModal }, { type: i3$1.ToastService }] });
829
830
 
830
831
  class UpgradePlanComponent {
831
832
  modalService;
@@ -899,13 +900,13 @@ class UpgradePlanComponent {
899
900
  event.stopPropagation();
900
901
  this.AvgstoresdropDown = !this.AvgstoresdropDown;
901
902
  }
902
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UpgradePlanComponent, deps: [{ token: i1$3.NgbModal }, { token: i1$3.NgbActiveModal }, { token: i2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
903
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UpgradePlanComponent, deps: [{ token: i1$3.NgbModal }, { token: i1$3.NgbActiveModal }, { token: i3$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
903
904
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UpgradePlanComponent, selector: "lib-upgrade-plan", ngImport: i0, template: "<div *ngIf=\"showNavGroup\" class=\"nav-group nav-group-outline mx-auto mt-8 d-flex justify-content-center\">\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'monthly'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"month\"\r\n (click)=\"selectPlan('monthly')\">\r\n Monthly\r\n </button>\r\n\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'quarterly'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"Quarterly\"\r\n (click)=\"selectPlan('quarterly')\">\r\n Quarterly - 10%\r\n </button>\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'annual'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"annual\"\r\n (click)=\"selectPlan('annual')\">\r\n Annual - 15%\r\n </button>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"plan == 'monthly'\" class=\"modal-body row \">\r\n <div class=\"col-lg-6 pe-8 vertical\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">No of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"noofstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{noofstoresIssue}}</div>\r\n <div *ngIf=\"noofstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let noofstoresitem of noofstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.noofstoresIssue == noofstoresitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"noofstoresItem(noofstoresitem)\">{{noofstoresitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">Average Size of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"AvgstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{AvgstoresIssue}}</div>\r\n <div *ngIf=\"AvgstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let Avgstoresitem of Avgstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.AvgstoresIssue == Avgstoresitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"AvgstoresItem(Avgstoresitem)\">{{Avgstoresitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maxcam mt-2\">\r\n Maximum 2 Cameras are permitted in stores with square feet between 50 -500.\r\n </div>\r\n </div>\r\n\r\n <div class=\"selecttext my-5 mt-12\">Select Products</div>\r\n\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-4\">\r\n <div><input disabled class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango Traffic <span class=\"badge badge-light-success ms-2\">Subscribed\r\n </span> </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango Zone <span class=\"badge badge-light-warning ms-2\">Trail Expired\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span> </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango SOP <span class=\"badge badge-light-primary ms-2\">On Trail\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span></label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Priority Support </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 px-8\">\r\n <div class=\"pb-6\">\r\n\r\n <div class=\"pricingtext\">Free</div>\r\n\r\n <div class=\"semi mt-2\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <div class=\"d-flex\"><span class=\"me-3 mt-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2231_42342)\">\r\n <path\r\n d=\"M7.99967 10.6673V8.00065M7.99967 5.33398H8.00634M14.6663 8.00065C14.6663 11.6826 11.6816 14.6673 7.99967 14.6673C4.31778 14.6673 1.33301 11.6826 1.33301 8.00065C1.33301 4.31875 4.31778 1.33398 7.99967 1.33398C11.6816 1.33398 14.6663 4.31875 14.6663 8.00065Z\"\r\n stroke=\"#B54708\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2231_42342\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span><div class=\"subtext mt-6\">You will only be charged for < Tango Traffic,Tango <br >Zone & Tango RevOps ></div> </div>\r\n <div class=\"sub1text mt-5\">Starts from <span class=\"billedtext ms-2\"><s>\u20B91899</s></span><span\r\n class=\"billingtext ms-4\">\u20B9799</span></div>\r\n <div class=\"sub1text mt-2\">Per store Per month</div>\r\n\r\n </div>\r\n <div class=\"detailstext\">Billing Details</div>\r\n\r\n <div class=\"sub1text py-4\">\r\n <div class=\"mb-4\">Brand Name: --</div>\r\n <div>Billing Address: --</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end subscribe\" >\r\n <button (click)=\"update()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block text-nowrap\"><span\r\n class=\"submit\">Enter Billing Details </span></button>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"plan == 'quarterly'\" class=\"modal-body row \">\r\n <div class=\"col-lg-6 pe-8 vertical\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">No of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"noofstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{noofstoresIssue}}</div>\r\n <div *ngIf=\"noofstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let noofstoresitem of noofstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.noofstoresIssue == noofstoresitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"noofstoresItem(noofstoresitem)\">{{noofstoresitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">Average Size of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"AvgstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{AvgstoresIssue}}</div>\r\n <div *ngIf=\"AvgstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let Avgstoresitem of Avgstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.AvgstoresIssue == Avgstoresitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"AvgstoresItem(Avgstoresitem)\">{{Avgstoresitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maxcam mt-2\">\r\n Maximum 2 Cameras are permitted in stores with square feet between 50 -500.\r\n </div>\r\n </div>\r\n\r\n <div class=\"selecttext py-4\">Select Products</div>\r\n\r\n \r\n <div class=\"form-check form-switch d-flex justify-content-between mt-4\">\r\n <div><input disabled class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango Traffic <span class=\"badge badge-light-success ms-2\">Subscribed\r\n </span> </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango Zone <span class=\"badge badge-light-warning ms-2\">Trail Expired\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span> </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango SOP <span class=\"badge badge-light-primary ms-2\">On Trail\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span></label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Priority Support </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 px-8\">\r\n <div class=\"pb-6\">\r\n\r\n <div class=\"pricingtext\">Free</div>\r\n\r\n <div class=\"semi mt-2\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <div class=\"d-flex\"><span class=\"me-3 mt-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2231_42342)\">\r\n <path\r\n d=\"M7.99967 10.6673V8.00065M7.99967 5.33398H8.00634M14.6663 8.00065C14.6663 11.6826 11.6816 14.6673 7.99967 14.6673C4.31778 14.6673 1.33301 11.6826 1.33301 8.00065C1.33301 4.31875 4.31778 1.33398 7.99967 1.33398C11.6816 1.33398 14.6663 4.31875 14.6663 8.00065Z\"\r\n stroke=\"#B54708\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2231_42342\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span><div class=\"subtext mt-6\">You will only be charged for < Tango Traffic,Tango <br >Zone & Tango RevOps ></div> </div>\r\n <div class=\"sub1text mt-5\">Starts from <span class=\"billedtext ms-2\"><s>\u20B91899</s></span><span\r\n class=\"billingtext ms-4\">\u20B9799</span></div>\r\n <div class=\"sub1text mt-2\">Per store Per month</div>\r\n\r\n </div>\r\n <div class=\"detailstext\">Billing Details</div>\r\n\r\n <div class=\"sub1text py-4\">\r\n <div class=\"mb-4\">Brand Name: --</div>\r\n <div>Billing Address: --</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end subscribe\" >\r\n <button (click)=\"confirmation()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block text-nowrap\"><span\r\n class=\"submit\">Subscribe Now</span></button>\r\n <!-- (click)=\"suscribed();showGif()\" -->\r\n\r\n </div>\r\n \r\n\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"plan == 'annual'\" class=\"modal-body row \">\r\n <div class=\"col-lg-6 pe-8 vertical\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">No of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"noofstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{noofstoresIssue}}</div>\r\n <div *ngIf=\"noofstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let noofstoresitem of noofstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.noofstoresIssue == noofstoresitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"noofstoresItem(noofstoresitem)\">{{noofstoresitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">Average Size of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"AvgstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{AvgstoresIssue}}</div>\r\n <div *ngIf=\"AvgstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let Avgstoresitem of Avgstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.AvgstoresIssue == Avgstoresitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"AvgstoresItem(Avgstoresitem)\">{{Avgstoresitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maxcam mt-2\">\r\n Maximum 2 Cameras are permitted in stores with square feet between 50 -500.\r\n </div>\r\n </div>\r\n\r\n <div class=\"selecttext py-4\">Select Products</div>\r\n\r\n \r\n <div class=\"form-check form-switch d-flex justify-content-between mt-4\">\r\n <div><input disabled class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango Traffic <span class=\"badge badge-light-success ms-2\">Subscribed\r\n </span> </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango Zone <span class=\"badge badge-light-warning ms-2\">Trail Expired\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span> </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango SOP <span class=\"badge badge-light-primary ms-2\">On Trail\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span></label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Priority Support </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 px-8\">\r\n <div class=\"pb-6\">\r\n\r\n <div class=\"pricingtext\">Free</div>\r\n\r\n <div class=\"semi mt-2\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <div class=\"d-flex\"><span class=\"me-3 mt-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2231_42342)\">\r\n <path\r\n d=\"M7.99967 10.6673V8.00065M7.99967 5.33398H8.00634M14.6663 8.00065C14.6663 11.6826 11.6816 14.6673 7.99967 14.6673C4.31778 14.6673 1.33301 11.6826 1.33301 8.00065C1.33301 4.31875 4.31778 1.33398 7.99967 1.33398C11.6816 1.33398 14.6663 4.31875 14.6663 8.00065Z\"\r\n stroke=\"#B54708\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2231_42342\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span><div class=\"subtext mt-6\">You will only be charged for < Tango Traffic,Tango <br >Zone & Tango RevOps ></div> </div>\r\n <div class=\"sub1text mt-5\">Starts from <span class=\"billedtext ms-2\"><s>\u20B91899</s></span><span\r\n class=\"billingtext ms-4\">\u20B9799</span></div>\r\n <div class=\"sub1text mt-2\">Per store Per month</div>\r\n\r\n </div>\r\n <div class=\"detailstext\">Billing Details</div>\r\n\r\n <div class=\"sub1text py-4\">\r\n <div class=\"mb-4\">Brand Name: --</div>\r\n <div>Billing Address: --</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end subscribe\">\r\n <button (click)=\"trailexpired()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Subscribe Now </span></button>\r\n </div>\r\n \r\n\r\n </div>\r\n</div>\r\n\r\n\r\n", styles: [".tabchange{align-items:center;gap:8px;padding:1% 25%}.pricingtext{color:var(--Gray-900, #101828);font-family:Inter;font-size:20px;font-weight:600;line-height:30px}.semi{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px}.subtext{color:var(--Error-700, #B42318);font-family:Inter;font-size:12px;font-weight:400;line-height:18px}.billingtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:24px;font-weight:600;line-height:32px}.billedtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:18px;font-weight:600;line-height:32px;text-decoration-line:\"strikethrough\"}.sub1text{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.detailstext{color:var(--Gray-500, #667085);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.maxcam{color:var(--Primary-800, #008EDF);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.selecttext{color:#000;font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;width:fit-content}.form-check-label{color:var(--Gray-700, #344054)!important}.view{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:12px;font-weight:500;line-height:18px;cursor:pointer}.modal-body{padding:4%!important}.vertical{border-right:1px solid var(--Gray-200, #EAECF0)}.subscribe{margin-top:38%}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
904
905
  }
905
906
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UpgradePlanComponent, decorators: [{
906
907
  type: Component,
907
908
  args: [{ selector: 'lib-upgrade-plan', template: "<div *ngIf=\"showNavGroup\" class=\"nav-group nav-group-outline mx-auto mt-8 d-flex justify-content-center\">\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'monthly'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"month\"\r\n (click)=\"selectPlan('monthly')\">\r\n Monthly\r\n </button>\r\n\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'quarterly'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"Quarterly\"\r\n (click)=\"selectPlan('quarterly')\">\r\n Quarterly - 10%\r\n </button>\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'annual'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"annual\"\r\n (click)=\"selectPlan('annual')\">\r\n Annual - 15%\r\n </button>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"plan == 'monthly'\" class=\"modal-body row \">\r\n <div class=\"col-lg-6 pe-8 vertical\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">No of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"noofstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{noofstoresIssue}}</div>\r\n <div *ngIf=\"noofstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let noofstoresitem of noofstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.noofstoresIssue == noofstoresitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"noofstoresItem(noofstoresitem)\">{{noofstoresitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">Average Size of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"AvgstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{AvgstoresIssue}}</div>\r\n <div *ngIf=\"AvgstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let Avgstoresitem of Avgstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.AvgstoresIssue == Avgstoresitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"AvgstoresItem(Avgstoresitem)\">{{Avgstoresitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maxcam mt-2\">\r\n Maximum 2 Cameras are permitted in stores with square feet between 50 -500.\r\n </div>\r\n </div>\r\n\r\n <div class=\"selecttext my-5 mt-12\">Select Products</div>\r\n\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-4\">\r\n <div><input disabled class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango Traffic <span class=\"badge badge-light-success ms-2\">Subscribed\r\n </span> </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango Zone <span class=\"badge badge-light-warning ms-2\">Trail Expired\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span> </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango SOP <span class=\"badge badge-light-primary ms-2\">On Trail\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span></label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Priority Support </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 px-8\">\r\n <div class=\"pb-6\">\r\n\r\n <div class=\"pricingtext\">Free</div>\r\n\r\n <div class=\"semi mt-2\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <div class=\"d-flex\"><span class=\"me-3 mt-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2231_42342)\">\r\n <path\r\n d=\"M7.99967 10.6673V8.00065M7.99967 5.33398H8.00634M14.6663 8.00065C14.6663 11.6826 11.6816 14.6673 7.99967 14.6673C4.31778 14.6673 1.33301 11.6826 1.33301 8.00065C1.33301 4.31875 4.31778 1.33398 7.99967 1.33398C11.6816 1.33398 14.6663 4.31875 14.6663 8.00065Z\"\r\n stroke=\"#B54708\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2231_42342\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span><div class=\"subtext mt-6\">You will only be charged for < Tango Traffic,Tango <br >Zone & Tango RevOps ></div> </div>\r\n <div class=\"sub1text mt-5\">Starts from <span class=\"billedtext ms-2\"><s>\u20B91899</s></span><span\r\n class=\"billingtext ms-4\">\u20B9799</span></div>\r\n <div class=\"sub1text mt-2\">Per store Per month</div>\r\n\r\n </div>\r\n <div class=\"detailstext\">Billing Details</div>\r\n\r\n <div class=\"sub1text py-4\">\r\n <div class=\"mb-4\">Brand Name: --</div>\r\n <div>Billing Address: --</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end subscribe\" >\r\n <button (click)=\"update()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block text-nowrap\"><span\r\n class=\"submit\">Enter Billing Details </span></button>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"plan == 'quarterly'\" class=\"modal-body row \">\r\n <div class=\"col-lg-6 pe-8 vertical\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">No of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"noofstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{noofstoresIssue}}</div>\r\n <div *ngIf=\"noofstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let noofstoresitem of noofstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.noofstoresIssue == noofstoresitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"noofstoresItem(noofstoresitem)\">{{noofstoresitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">Average Size of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"AvgstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{AvgstoresIssue}}</div>\r\n <div *ngIf=\"AvgstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let Avgstoresitem of Avgstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.AvgstoresIssue == Avgstoresitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"AvgstoresItem(Avgstoresitem)\">{{Avgstoresitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maxcam mt-2\">\r\n Maximum 2 Cameras are permitted in stores with square feet between 50 -500.\r\n </div>\r\n </div>\r\n\r\n <div class=\"selecttext py-4\">Select Products</div>\r\n\r\n \r\n <div class=\"form-check form-switch d-flex justify-content-between mt-4\">\r\n <div><input disabled class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango Traffic <span class=\"badge badge-light-success ms-2\">Subscribed\r\n </span> </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango Zone <span class=\"badge badge-light-warning ms-2\">Trail Expired\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span> </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango SOP <span class=\"badge badge-light-primary ms-2\">On Trail\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span></label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Priority Support </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 px-8\">\r\n <div class=\"pb-6\">\r\n\r\n <div class=\"pricingtext\">Free</div>\r\n\r\n <div class=\"semi mt-2\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <div class=\"d-flex\"><span class=\"me-3 mt-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2231_42342)\">\r\n <path\r\n d=\"M7.99967 10.6673V8.00065M7.99967 5.33398H8.00634M14.6663 8.00065C14.6663 11.6826 11.6816 14.6673 7.99967 14.6673C4.31778 14.6673 1.33301 11.6826 1.33301 8.00065C1.33301 4.31875 4.31778 1.33398 7.99967 1.33398C11.6816 1.33398 14.6663 4.31875 14.6663 8.00065Z\"\r\n stroke=\"#B54708\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2231_42342\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span><div class=\"subtext mt-6\">You will only be charged for < Tango Traffic,Tango <br >Zone & Tango RevOps ></div> </div>\r\n <div class=\"sub1text mt-5\">Starts from <span class=\"billedtext ms-2\"><s>\u20B91899</s></span><span\r\n class=\"billingtext ms-4\">\u20B9799</span></div>\r\n <div class=\"sub1text mt-2\">Per store Per month</div>\r\n\r\n </div>\r\n <div class=\"detailstext\">Billing Details</div>\r\n\r\n <div class=\"sub1text py-4\">\r\n <div class=\"mb-4\">Brand Name: --</div>\r\n <div>Billing Address: --</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end subscribe\" >\r\n <button (click)=\"confirmation()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block text-nowrap\"><span\r\n class=\"submit\">Subscribe Now</span></button>\r\n <!-- (click)=\"suscribed();showGif()\" -->\r\n\r\n </div>\r\n \r\n\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"plan == 'annual'\" class=\"modal-body row \">\r\n <div class=\"col-lg-6 pe-8 vertical\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">No of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"noofstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{noofstoresIssue}}</div>\r\n <div *ngIf=\"noofstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let noofstoresitem of noofstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.noofstoresIssue == noofstoresitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"noofstoresItem(noofstoresitem)\">{{noofstoresitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">Average Size of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"AvgstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{AvgstoresIssue}}</div>\r\n <div *ngIf=\"AvgstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let Avgstoresitem of Avgstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.AvgstoresIssue == Avgstoresitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"AvgstoresItem(Avgstoresitem)\">{{Avgstoresitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maxcam mt-2\">\r\n Maximum 2 Cameras are permitted in stores with square feet between 50 -500.\r\n </div>\r\n </div>\r\n\r\n <div class=\"selecttext py-4\">Select Products</div>\r\n\r\n \r\n <div class=\"form-check form-switch d-flex justify-content-between mt-4\">\r\n <div><input disabled class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango Traffic <span class=\"badge badge-light-success ms-2\">Subscribed\r\n </span> </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango Zone <span class=\"badge badge-light-warning ms-2\">Trail Expired\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span> </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Tango SOP <span class=\"badge badge-light-primary ms-2\">On Trail\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span></label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n <div class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangorevop\" checked=\"\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Priority Support </label>\r\n </div>\r\n <span class=\"view\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 px-8\">\r\n <div class=\"pb-6\">\r\n\r\n <div class=\"pricingtext\">Free</div>\r\n\r\n <div class=\"semi mt-2\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <div class=\"d-flex\"><span class=\"me-3 mt-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2231_42342)\">\r\n <path\r\n d=\"M7.99967 10.6673V8.00065M7.99967 5.33398H8.00634M14.6663 8.00065C14.6663 11.6826 11.6816 14.6673 7.99967 14.6673C4.31778 14.6673 1.33301 11.6826 1.33301 8.00065C1.33301 4.31875 4.31778 1.33398 7.99967 1.33398C11.6816 1.33398 14.6663 4.31875 14.6663 8.00065Z\"\r\n stroke=\"#B54708\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2231_42342\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span><div class=\"subtext mt-6\">You will only be charged for < Tango Traffic,Tango <br >Zone & Tango RevOps ></div> </div>\r\n <div class=\"sub1text mt-5\">Starts from <span class=\"billedtext ms-2\"><s>\u20B91899</s></span><span\r\n class=\"billingtext ms-4\">\u20B9799</span></div>\r\n <div class=\"sub1text mt-2\">Per store Per month</div>\r\n\r\n </div>\r\n <div class=\"detailstext\">Billing Details</div>\r\n\r\n <div class=\"sub1text py-4\">\r\n <div class=\"mb-4\">Brand Name: --</div>\r\n <div>Billing Address: --</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end subscribe\">\r\n <button (click)=\"trailexpired()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Subscribe Now </span></button>\r\n </div>\r\n \r\n\r\n </div>\r\n</div>\r\n\r\n\r\n", styles: [".tabchange{align-items:center;gap:8px;padding:1% 25%}.pricingtext{color:var(--Gray-900, #101828);font-family:Inter;font-size:20px;font-weight:600;line-height:30px}.semi{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px}.subtext{color:var(--Error-700, #B42318);font-family:Inter;font-size:12px;font-weight:400;line-height:18px}.billingtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:24px;font-weight:600;line-height:32px}.billedtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:18px;font-weight:600;line-height:32px;text-decoration-line:\"strikethrough\"}.sub1text{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.detailstext{color:var(--Gray-500, #667085);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.maxcam{color:var(--Primary-800, #008EDF);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.selecttext{color:#000;font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;width:fit-content}.form-check-label{color:var(--Gray-700, #344054)!important}.view{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:12px;font-weight:500;line-height:18px;cursor:pointer}.modal-body{padding:4%!important}.vertical{border-right:1px solid var(--Gray-200, #EAECF0)}.subscribe{margin-top:38%}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}\n"] }]
908
- }], ctorParameters: () => [{ type: i1$3.NgbModal }, { type: i1$3.NgbActiveModal }, { type: i2.ToastService }] });
909
+ }], ctorParameters: () => [{ type: i1$3.NgbModal }, { type: i1$3.NgbActiveModal }, { type: i3$1.ToastService }] });
909
910
 
910
911
  class CreditNoteComponent {
911
912
  activeModal;
@@ -1054,13 +1055,13 @@ class TrailSettingsComponent {
1054
1055
  subscribed() {
1055
1056
  this.activeModal.close('subscribed');
1056
1057
  }
1057
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TrailSettingsComponent, deps: [{ token: i1$3.NgbModal }, { token: PaymentSubscriptionService }, { token: i2.ToastService }, { token: i1$3.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
1058
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TrailSettingsComponent, deps: [{ token: i1$3.NgbModal }, { token: PaymentSubscriptionService }, { token: i3$1.ToastService }, { token: i1$3.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
1058
1059
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TrailSettingsComponent, selector: "lib-trail-settings", inputs: { settingsvalue: "settingsvalue" }, ngImport: i0, template: "<div *ngIf=\"settingsvalue === 'Extend Trail'\" class=\"mx-8 py-8\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading my-4 ms-1\">Extend your trial</div>\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div>\r\n <label class=\"headingtext mb-4\">Please pick no of days for trial extension.</label>\r\n <div class=\"w-lg-100 position-relative mt-2\">\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\"\r\n (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16699 10H15.8337\" stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"extendpayment\"\r\n style=\"text-align: center;\"\r\n value=\"{{count}}\" placeholder=\"\" />\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\"\r\n height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <path\r\n d=\"M8.49967 3.33301V12.6663M3.83301 7.99967H13.1663\"\r\n stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-6 py-3\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"trailextended()\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Submit</span></button>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"settingsvalue === 'Subscribe Product'\" class=\"modal-content\" >\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Subscribe product</div>\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n \r\n <div class=\"contenttext mt-4 mx-2\">By clicking \u2018Add to subscription\u2019 this product will be<br> moved to subscribed products\r\n </div>\r\n</div>\r\n<div class=\"d-flex mt-5 py-3\">\r\n <button type=\"button\" (click)=\"subscribed()\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-100\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Add To Subscription</span></button>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n", styles: [".heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1059
1060
  }
1060
1061
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TrailSettingsComponent, decorators: [{
1061
1062
  type: Component,
1062
1063
  args: [{ selector: 'lib-trail-settings', template: "<div *ngIf=\"settingsvalue === 'Extend Trail'\" class=\"mx-8 py-8\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading my-4 ms-1\">Extend your trial</div>\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div>\r\n <label class=\"headingtext mb-4\">Please pick no of days for trial extension.</label>\r\n <div class=\"w-lg-100 position-relative mt-2\">\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\"\r\n (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16699 10H15.8337\" stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"extendpayment\"\r\n style=\"text-align: center;\"\r\n value=\"{{count}}\" placeholder=\"\" />\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\"\r\n height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <path\r\n d=\"M8.49967 3.33301V12.6663M3.83301 7.99967H13.1663\"\r\n stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-6 py-3\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"trailextended()\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Submit</span></button>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"settingsvalue === 'Subscribe Product'\" class=\"modal-content\" >\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Subscribe product</div>\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n \r\n <div class=\"contenttext mt-4 mx-2\">By clicking \u2018Add to subscription\u2019 this product will be<br> moved to subscribed products\r\n </div>\r\n</div>\r\n<div class=\"d-flex mt-5 py-3\">\r\n <button type=\"button\" (click)=\"subscribed()\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-100\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Add To Subscription</span></button>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n", styles: [".heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}\n"] }]
1063
- }], ctorParameters: () => [{ type: i1$3.NgbModal }, { type: PaymentSubscriptionService }, { type: i2.ToastService }, { type: i1$3.NgbActiveModal }], propDecorators: { settingsvalue: [{
1064
+ }], ctorParameters: () => [{ type: i1$3.NgbModal }, { type: PaymentSubscriptionService }, { type: i3$1.ToastService }, { type: i1$3.NgbActiveModal }], propDecorators: { settingsvalue: [{
1064
1065
  type: Input
1065
1066
  }] } });
1066
1067
 
@@ -1105,13 +1106,13 @@ class ProductConfirmationComponent {
1105
1106
  support(event, daystrail) {
1106
1107
  this.supportselect = daystrail;
1107
1108
  }
1108
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProductConfirmationComponent, deps: [{ token: i1$3.NgbModal }, { token: i1$3.NgbActiveModal }, { token: i2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1109
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProductConfirmationComponent, deps: [{ token: i1$3.NgbModal }, { token: i1$3.NgbActiveModal }, { token: i3$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1109
1110
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ProductConfirmationComponent, selector: "lib-product-confirmation", ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Confirmation</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please update the status of below product\r\n </div>\r\n </div>\r\n <div class=\"modal-body\">\r\n <!--begin::Form-->\r\n <form id=\"kt_modal_new_card_form\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n \r\n <div class=\"fv-row fv-plugins-icon-container \">\r\n <div class=\"confirmationborder\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">Tango Zone , Priority support</label>\r\n <span class=\"badge badge-light-primary ms-2\">Subscribe\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"onTrail($event, 'continuetrail')\">\r\n <input [ngClass]=\"select ==='continuetrail' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions\"\r\n id=\"inlineRadio1\" value=\"continuetrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Start with trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"onTrail($event, 'addsubscription')\">\r\n <input [ngClass]=\"select ==='addsubscription' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions\"\r\n id=\"inlineRadio1\" value=\"addsubscription\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"confirmationborder mt-4\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">Tango SOP</label>\r\n <span class=\"badge badge-light-warning ms-2\">Unsubscribe\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"TrailExpired($event, 'subscribenow')\">\r\n <input [ngClass]=\"trailselect ==='subscribenow' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions\"\r\n id=\"inlineRadio1\" value=\"subscribenow\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Unsubscribe</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"TrailExpired($event, 'dolater')\">\r\n <input [ngClass]=\"trailselect ==='dolater' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions\"\r\n id=\"inlineRadio1\" value=\"dolater\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Cancel</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"d-flex mt-9 my-2\">\r\n <button type=\"submit\" class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Submit</span></button>\r\n </div>\r\n </div>\r\n \r\n \r\n <!--end::Actions-->\r\n </form>\r\n <!--end::Form-->\r\n \r\n </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.radio-custom{width:20px;height:20px;background-color:#eaf8ff}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:8px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff;width:16px;height:16px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.confirmationborder{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;flex-direction:column;align-items:flex-start;gap:18px;align-self:stretch}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
1110
1111
  }
1111
1112
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProductConfirmationComponent, decorators: [{
1112
1113
  type: Component,
1113
1114
  args: [{ selector: 'lib-product-confirmation', template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Confirmation</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please update the status of below product\r\n </div>\r\n </div>\r\n <div class=\"modal-body\">\r\n <!--begin::Form-->\r\n <form id=\"kt_modal_new_card_form\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n \r\n <div class=\"fv-row fv-plugins-icon-container \">\r\n <div class=\"confirmationborder\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">Tango Zone , Priority support</label>\r\n <span class=\"badge badge-light-primary ms-2\">Subscribe\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"onTrail($event, 'continuetrail')\">\r\n <input [ngClass]=\"select ==='continuetrail' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions\"\r\n id=\"inlineRadio1\" value=\"continuetrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Start with trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"onTrail($event, 'addsubscription')\">\r\n <input [ngClass]=\"select ==='addsubscription' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions\"\r\n id=\"inlineRadio1\" value=\"addsubscription\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"confirmationborder mt-4\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">Tango SOP</label>\r\n <span class=\"badge badge-light-warning ms-2\">Unsubscribe\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"TrailExpired($event, 'subscribenow')\">\r\n <input [ngClass]=\"trailselect ==='subscribenow' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions\"\r\n id=\"inlineRadio1\" value=\"subscribenow\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Unsubscribe</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"TrailExpired($event, 'dolater')\">\r\n <input [ngClass]=\"trailselect ==='dolater' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions\"\r\n id=\"inlineRadio1\" value=\"dolater\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Cancel</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"d-flex mt-9 my-2\">\r\n <button type=\"submit\" class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Submit</span></button>\r\n </div>\r\n </div>\r\n \r\n \r\n <!--end::Actions-->\r\n </form>\r\n <!--end::Form-->\r\n \r\n </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.radio-custom{width:20px;height:20px;background-color:#eaf8ff}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:8px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff;width:16px;height:16px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.confirmationborder{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;flex-direction:column;align-items:flex-start;gap:18px;align-self:stretch}\n"] }]
1114
- }], ctorParameters: () => [{ type: i1$3.NgbModal }, { type: i1$3.NgbActiveModal }, { type: i2.ToastService }] });
1115
+ }], ctorParameters: () => [{ type: i1$3.NgbModal }, { type: i1$3.NgbActiveModal }, { type: i3$1.ToastService }] });
1115
1116
 
1116
1117
  class MultidropdownComponent {
1117
1118
  layout;
@@ -1284,13 +1285,13 @@ class MultidropdownComponent {
1284
1285
  // }
1285
1286
  });
1286
1287
  }
1287
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MultidropdownComponent, deps: [{ token: i1$1.LayoutService }, { token: i2.GlobalStateService }, { token: i1$3.NgbModal }, { token: PaymentSubscriptionService }], target: i0.ɵɵFactoryTarget.Component });
1288
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MultidropdownComponent, deps: [{ token: i2.LayoutService }, { token: i2.GlobalStateService }, { token: i1$3.NgbModal }, { token: PaymentSubscriptionService }], target: i0.ɵɵFactoryTarget.Component });
1288
1289
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: MultidropdownComponent, selector: "lib-multidropdown", inputs: { text: "text" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"mt-2 dropdown1 position-relative cursor-pointer\" *ngFor=\"let item of dataObject; let i = index\">\r\n <a (click)=\"Dropdown('Clients',i,$event)\">\r\n <span *ngIf=\"!text.length\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_3094_38243)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0003 15.1665V26.8332M16.167 20.9998H27.8337\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3094_38243\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur\r\n stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3094_38243\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3094_38243\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>{{text}}</span>\r\n <button type=\"button\" class=\"btn-outline btn align-items-end text-nowrap me-4\" *ngIf=\"text.length\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-2\">Add Products</span> </button>\r\n </a>\r\n <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ?\r\n selectedValuesArray[i]?.length + ' ' + 'Clients'.split(' ').pop() : 'Clients' }}</span> -->\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute end-0 \" [ngClass]=\"!text.length ? 'left' : 'addselect'\">\r\n <div class=\"form-check d-flex align-items-center px-5 mt-5\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox('Select All', i)\">\r\n <label class=\"form-check-label ms-3\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"border border-gray mt-3\"></div>\r\n <div class=\"mt-3 d-flex align-items-center mx-2\">\r\n \r\n <!-- <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\"\r\n class=\"form-control searchinput ps-14 py-2 mt-2\" placeholder=\"Search\" autocomplete=\"off\" /> -->\r\n </div>\r\n <div *ngFor=\"let issue of item.Issues\" class=\"form-check d-flex align-items-center py-3 px-5\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"issue.storeName\" id=\"option{{issue.storeId}}\"\r\n [checked]=\"selectedValuesArray[i]?.includes(issue.storeId)\" (change)=\"toggleCheckbox(issue.storeId,i)\">\r\n <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{issue.storeId}}\">\r\n {{ issue.storeName }}\r\n </label>\r\n </div>\r\n <div class=\"mt-4 d-flex justify-content-center \">\r\n <span class=\"form-check-label\" *ngIf=\"noFilter\">No filters available</span>\r\n </div>\r\n <div role=\"group\" class=\"d-flex justify-content-between mb-4 mx-5\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"productconfirmation()\">Apply</button>\r\n </div>\r\n </div>\r\n \r\n</div>\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\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n</div> -->\r\n\r\n", styles: [".dropdown1{float:right}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;height:300px;overflow:auto;right:0;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 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}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1289
1290
  }
1290
1291
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MultidropdownComponent, decorators: [{
1291
1292
  type: Component,
1292
1293
  args: [{ selector: 'lib-multidropdown', template: "<div class=\"mt-2 dropdown1 position-relative cursor-pointer\" *ngFor=\"let item of dataObject; let i = index\">\r\n <a (click)=\"Dropdown('Clients',i,$event)\">\r\n <span *ngIf=\"!text.length\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_3094_38243)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0003 15.1665V26.8332M16.167 20.9998H27.8337\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3094_38243\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur\r\n stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3094_38243\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3094_38243\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>{{text}}</span>\r\n <button type=\"button\" class=\"btn-outline btn align-items-end text-nowrap me-4\" *ngIf=\"text.length\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-2\">Add Products</span> </button>\r\n </a>\r\n <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ?\r\n selectedValuesArray[i]?.length + ' ' + 'Clients'.split(' ').pop() : 'Clients' }}</span> -->\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute end-0 \" [ngClass]=\"!text.length ? 'left' : 'addselect'\">\r\n <div class=\"form-check d-flex align-items-center px-5 mt-5\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox('Select All', i)\">\r\n <label class=\"form-check-label ms-3\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"border border-gray mt-3\"></div>\r\n <div class=\"mt-3 d-flex align-items-center mx-2\">\r\n \r\n <!-- <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\"\r\n class=\"form-control searchinput ps-14 py-2 mt-2\" placeholder=\"Search\" autocomplete=\"off\" /> -->\r\n </div>\r\n <div *ngFor=\"let issue of item.Issues\" class=\"form-check d-flex align-items-center py-3 px-5\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"issue.storeName\" id=\"option{{issue.storeId}}\"\r\n [checked]=\"selectedValuesArray[i]?.includes(issue.storeId)\" (change)=\"toggleCheckbox(issue.storeId,i)\">\r\n <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{issue.storeId}}\">\r\n {{ issue.storeName }}\r\n </label>\r\n </div>\r\n <div class=\"mt-4 d-flex justify-content-center \">\r\n <span class=\"form-check-label\" *ngIf=\"noFilter\">No filters available</span>\r\n </div>\r\n <div role=\"group\" class=\"d-flex justify-content-between mb-4 mx-5\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"productconfirmation()\">Apply</button>\r\n </div>\r\n </div>\r\n \r\n</div>\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\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n</div> -->\r\n\r\n", styles: [".dropdown1{float:right}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;height:300px;overflow:auto;right:0;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 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}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}\n"] }]
1293
- }], ctorParameters: () => [{ type: i1$1.LayoutService }, { type: i2.GlobalStateService }, { type: i1$3.NgbModal }, { type: PaymentSubscriptionService }], propDecorators: { text: [{
1294
+ }], ctorParameters: () => [{ type: i2.LayoutService }, { type: i2.GlobalStateService }, { type: i1$3.NgbModal }, { type: PaymentSubscriptionService }], propDecorators: { text: [{
1294
1295
  type: Input
1295
1296
  }], onClick: [{
1296
1297
  type: HostListener,
@@ -1658,13 +1659,13 @@ class PaymentsSubscriptionComponent {
1658
1659
  }
1659
1660
  });
1660
1661
  }
1661
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaymentsSubscriptionComponent, deps: [{ token: i1$3.NgbModal }, { token: i1$2.FormBuilder }, { token: PaymentSubscriptionService }, { token: i0.ChangeDetectorRef }, { token: i2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1662
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PaymentsSubscriptionComponent, selector: "lib-payments-subscription", ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion [closeOthers]=\"true\">\r\n <!-- Billing & subscription start -->\r\n <div class=\"card\" ngbAccordionItem [collapsed]=\"openaccordian\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>Billing & Subscription<div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <!--begin::plan details Card-->\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"toastcard col-md-12\">\r\n <div class=\"d-flex align-items-center justify-content-end\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\"\r\n alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Kind Reminder: You have a reached your due\r\n limit ,To continue enjoying our services, please renew your subscription\r\n by making the payment. Thank you for your cooperation</span>\r\n <span><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Pay Now\r\n </span></a></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-column mt-6\">\r\n <div class=\"d-flex align-items-center justify-content-between border-val mb-2\">\r\n Current Plan Info<span class=\"badge-light-grey ms-2\">Standard Pricing</span>\r\n </div>\r\n <div class=\"d-flex align-items-center pricingtext my-2\">\r\n \u20B9 799<span\r\n class=\"pricingspan ms-2\">Store/{{clientinfo?.clientDetails?.planDetails?.subscriptionPeriod\r\n || '--'}}</span>\r\n </div>\r\n <hr>\r\n <div class=\"d-flex justify-content-between\">\r\n\r\n\r\n <div class=\"d-flex justify-content-start flex-column\">\r\n <div class=\" heading mb-3\">\r\n {{clientinfo?.clientDetails?.planDetails?.subscriptionType || '--'}}\r\n plan - {{clientinfo?.storeCount || '--'}}\r\n <span class=\"subheading ms-2\"> store\r\n onboarded</span>\r\n <span class=\"badge badge-light-warning ms-2\">Tango Sop\r\n <img class=\"ms-2\"\r\n src=\"./assets/tango/custompopup-Icons/clockexpiry-icon.svg\"\r\n alt=\"\"> </span>\r\n </div>\r\n <span class=\"sub d-block\">Cameras : 1000 | Avg sq.ft : 500 -1000 sq.ft |\r\n Products : Tango Traffic , Tango Zone </span>\r\n </div>\r\n <div class=\" d-flex align-items-end me-3\">\r\n <a type=\"submit\" (click)=\"needhelp()\"\r\n class=\"btn-outline btn needhelp me-4\"><span class=\"me-2\"><svg\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1965_2301)\">\r\n <path\r\n d=\"M7.57533 7.50033C7.77125 6.94338 8.15795 6.47375 8.66695 6.1746C9.17596 5.87546 9.77441 5.76611 10.3563 5.86592C10.9382 5.96573 11.466 6.26826 11.8462 6.71993C12.2264 7.1716 12.4345 7.74326 12.4337 8.33366C12.4337 10.0003 9.93366 10.8337 9.93366 10.8337M10.0003 14.167H10.0087M18.3337 10.0003C18.3337 14.6027 14.6027 18.3337 10.0003 18.3337C5.39795 18.3337 1.66699 14.6027 1.66699 10.0003C1.66699 5.39795 5.39795 1.66699 10.0003 1.66699C14.6027 1.66699 18.3337 5.39795 18.3337 10.0003Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1965_2301\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span><span class=\"mt-2\"> Need Help</span></a><a\r\n (click)=\"upgradeplan()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Upgrade Plan\r\n </span></a>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <!-- <div class=\"d-flex align-items-center heading mb-3\">\r\n {{clientinfo?.clientDetails?.planDetails?.subscriptionType || '--'}} plan - {{clientinfo?.storeCount || '--'}}\r\n <span class=\"subheading ms-2\"> store\r\n onboarded</span>\r\n <span class=\"badge badge-light-warning ms-2\">Tango Sop\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/expiry-icon.svg\"\r\n alt=\"\"> </span>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-8 sub pe-7\">Cameras : 1000 | Avg sq.ft : 500 -1000 sq.ft | Products : Tango Traffic , Tango Zone \r\n </div>\r\n <div class=\"col-lg-4\">\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end\"><a type=\"submit\"\r\n (click)=\"needhelp()\" class=\"btn-outline btn needhelp me-4\"><span\r\n class=\"me-2\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1965_2301)\">\r\n <path\r\n d=\"M7.57533 7.50033C7.77125 6.94338 8.15795 6.47375 8.66695 6.1746C9.17596 5.87546 9.77441 5.76611 10.3563 5.86592C10.9382 5.96573 11.466 6.26826 11.8462 6.71993C12.2264 7.1716 12.4345 7.74326 12.4337 8.33366C12.4337 10.0003 9.93366 10.8337 9.93366 10.8337M10.0003 14.167H10.0087M18.3337 10.0003C18.3337 14.6027 14.6027 18.3337 10.0003 18.3337C5.39795 18.3337 1.66699 14.6027 1.66699 10.0003C1.66699 5.39795 5.39795 1.66699 10.0003 1.66699C14.6027 1.66699 18.3337 5.39795 18.3337 10.0003Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1965_2301\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span><span class=\"mt-2\"> Need Help</span></a><a\r\n (click)=\"upgradeplan()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Upgrade Plan\r\n </span></a></div>\r\n </div>\r\n\r\n </div> -->\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!--end::plan details Card-->\r\n\r\n\r\n <div class=\"row gx-4 mt-4\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-7 \">\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div class=\"d-flex align-items-center billingtext mb-8\">\r\n Bank Details\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Payment Type</div>\r\n <div class=\"billingmain\">{{clientinfo?.bankDetails?.paymentType ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Account No </div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.accNo || '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">IFSC Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.IFSCCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center mt-4\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">SWIFT Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.swiftCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Branch </div>\r\n <div class=\"billingmain\">{{clientinfo?.bankDetails?.branch || '--'}}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Bank details Card-->\r\n\r\n\r\n <div class=\"col-xl-5 \">\r\n <!-- Billing Information start -->\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between billingtext mb-5\">\r\n Billing\r\n <a type=\"submit\" (click)=\"update()\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"><span class=\"mt-2\">\r\n Update</span></a>\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center\">\r\n\r\n <div class=\"billingdetails\">Next Billing Date</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.clientDetails?.billingDetails?.billingdate || '--'}}\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center mt-6\">\r\n <div class=\"billingdetails\">Billing Address</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.clientDetails?.billingDetails?.billingAddress ||\r\n '--'}}\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Billing Information End -->\r\n\r\n <!-- Add Billing start -->\r\n <!-- <div class=\" billing h-xl-100 w-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"modal-content align-items-center mt-2\">\r\n <div class=\"d-flex\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/addbilling_icon.svg\"\r\n alt=\"\"></div>\r\n\r\n </div>\r\n <div class=\"heading mt-4 ms-1\">Add billing address</div>\r\n <div class=\"d-flex justify-content-center mt-8 w-100\">\r\n <button type=\"button\" tabindex=\"0\" (click)=\"update()\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted address w-100\"\r\n style=\"white-space: nowrap;\"><span class=\"submit\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0003 4.16675V15.8334M4.16699 10.0001H15.8337\"\r\n stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> New Address </button>\r\n </div>\r\n\r\n </div>\r\n </div> -->\r\n <!-- Add Billing end -->\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Billing & subscription End -->\r\n\r\n <!--subscription Config start -->\r\n <div class=\"card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>Subscription Config <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n\r\n <ng-template>\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap mx-5 pt-4\">\r\n <div class=\"d-flex flex-column\">\r\n <!-- subscription info header start -->\r\n <div class=\"d-flex justify-content-between\">\r\n\r\n <div *ngIf=\"showNavGroup\" class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'subscription'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"subscription\" (click)=\"selectPlan('subscription')\">\r\n Subscription\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'pricing'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"pricing\" (click)=\"selectPlan('pricing')\">\r\n Pricing\r\n </button>\r\n </div>\r\n <!-- \r\n <div *ngIf=\"plan == 'pricing'\" class=\"d-flex mt-2\" style=\"text-align: end;\">\r\n <div class=\"input-group\">\r\n <span class=\"input-group-text\" id=\"basic-addon1\">Discount %</span>\r\n <input type=\"text\" class=\"form-control discountinput\"\r\n aria-label=\"Username\" aria-describedby=\"basic-addon1\">\r\n </div>\r\n </div> -->\r\n </div>\r\n <!-- subscription info header end -->\r\n\r\n <!-- subscription tab starts -->\r\n <div *ngIf=\"plan == 'subscription'\">\r\n <!-- client request card start -->\r\n <div class=\"row gx-4 mt-4\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-6\">\r\n <!-- Billing Information start -->\r\n <div\r\n class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap mb-6 px-6\">\r\n <div class=\"d-flex flex-column mt-10\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n Tango SOP <span\r\n class=\"badge-light-grey ms-2\">Premium</span>\r\n </div>\r\n <div class=\"subtext\">Kindly make necessary action for trial\r\n request or skip product to subscription list</div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-9\"><a (click)=\"skiptrail()\" type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span\r\n class=\"mt-6\">Skip Trail</span></a><a (click)=\"approvetrail()\"\r\n type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Approve\r\n Trail\r\n </span></a></div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <!--end::Bank details Card-->\r\n\r\n <div class=\"col-xl-6\">\r\n <!-- Billing Information start -->\r\n <div\r\n class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap mb-6 px-6\">\r\n <div class=\"d-flex flex-column mt-10\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n Tango SOP <span\r\n class=\"badge-light-grey ms-2\">Premium</span>\r\n </div>\r\n <div class=\"subtext\">Current Plan Info</div>\r\n <div class=\"row mt-7\">\r\n <div class=\"col-lg-8 d-flex\">\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"94\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <!-- Background circle -->\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\"></circle>\r\n <!-- Foreground circle -->\r\n <circle id=\"progress-circle\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#007bff\" stroke-width=\"8\" stroke-dasharray=\"251.2\" stroke-dashoffset=\"62.8\"></circle>\r\n <!-- Text displaying percentage -->\r\n <text id=\"percentage-text\" x=\"50\" y=\"54\" class=\"producttext\" text-anchor=\"middle\" fill=\"#333333\">40%</text>\r\n </svg></div>\r\n <div\r\n class=\"align-items-start justify-content-between daysleft ms-6 mt-3\">\r\n 12 Days Left\r\n <div class=\"align-items-start trail mt-2 me-14\">Free trial</div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-lg-4 mt-6\">\r\n <script type=\"module\">\r\n updateCircleChart({ percentageChange: 30 });\r\n </script>\r\n\r\n <div class=\"position-relative\">\r\n <div (click)=\"producttrailDropdown($event)\"\r\n > <span class=\"justify-content-end cursor-pointer ms-20\"><svg width=\"60\"\r\n height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_5221_60143)\">\r\n <rect x=\"2\" y=\"1\" width=\"56\" height=\"56\"\r\n rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"55\"\r\n height=\"55\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <g clip-path=\"url(#clip0_5221_60143)\">\r\n <path\r\n d=\"M30 32C31.6569 32 33 30.6569 33 29C33 27.3431 31.6569 26 30 26C28.3431 26 27 27.3431 27 29C27 30.6569 28.3431 32 30 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M37.4 32C37.2669 32.3016 37.2272 32.6362 37.286 32.9606C37.3448 33.285 37.4995 33.5843 37.73 33.82L37.79 33.88C37.976 34.0657 38.1235 34.2863 38.2241 34.5291C38.3248 34.7719 38.3766 35.0322 38.3766 35.295C38.3766 35.5578 38.3248 35.8181 38.2241 36.0609C38.1235 36.3037 37.976 36.5243 37.79 36.71C37.6043 36.896 37.3837 37.0435 37.1409 37.1441C36.8981 37.2448 36.6378 37.2966 36.375 37.2966C36.1122 37.2966 35.8519 37.2448 35.6091 37.1441C35.3663 37.0435 35.1457 36.896 34.96 36.71L34.9 36.65C34.6643 36.4195 34.365 36.2648 34.0406 36.206C33.7162 36.1472 33.3816 36.1869 33.08 36.32C32.7842 36.4468 32.532 36.6572 32.3543 36.9255C32.1766 37.1938 32.0813 37.5082 32.08 37.83V38C32.08 38.5304 31.8693 39.0391 31.4942 39.4142C31.1191 39.7893 30.6104 40 30.08 40C29.5496 40 29.0409 39.7893 28.6658 39.4142C28.2907 39.0391 28.08 38.5304 28.08 38V37.91C28.0723 37.579 27.9651 37.258 27.7725 36.9887C27.5799 36.7194 27.3107 36.5143 27 36.4C26.6984 36.2669 26.3638 36.2272 26.0394 36.286C25.715 36.3448 25.4157 36.4995 25.18 36.73L25.12 36.79C24.9343 36.976 24.7137 37.1235 24.4709 37.2241C24.2281 37.3248 23.9678 37.3766 23.705 37.3766C23.4422 37.3766 23.1819 37.3248 22.9391 37.2241C22.6963 37.1235 22.4757 36.976 22.29 36.79C22.104 36.6043 21.9565 36.3837 21.8559 36.1409C21.7552 35.8981 21.7034 35.6378 21.7034 35.375C21.7034 35.1122 21.7552 34.8519 21.8559 34.6091C21.9565 34.3663 22.104 34.1457 22.29 33.96L22.35 33.9C22.5805 33.6643 22.7352 33.365 22.794 33.0406C22.8528 32.7162 22.8131 32.3816 22.68 32.08C22.5532 31.7842 22.3428 31.532 22.0745 31.3543C21.8062 31.1766 21.4918 31.0813 21.17 31.08H21C20.4696 31.08 19.9609 30.8693 19.5858 30.4942C19.2107 30.1191 19 29.6104 19 29.08C19 28.5496 19.2107 28.0409 19.5858 27.6658C19.9609 27.2907 20.4696 27.08 21 27.08H21.09C21.421 27.0723 21.742 26.9651 22.0113 26.7725C22.2806 26.5799 22.4857 26.3107 22.6 26C22.7331 25.6984 22.7728 25.3638 22.714 25.0394C22.6552 24.715 22.5005 24.4157 22.27 24.18L22.21 24.12C22.024 23.9343 21.8765 23.7137 21.7759 23.4709C21.6752 23.2281 21.6234 22.9678 21.6234 22.705C21.6234 22.4422 21.6752 22.1819 21.7759 21.9391C21.8765 21.6963 22.024 21.4757 22.21 21.29C22.3957 21.104 22.6163 20.9565 22.8591 20.8559C23.1019 20.7552 23.3622 20.7034 23.625 20.7034C23.8878 20.7034 24.1481 20.7552 24.3909 20.8559C24.6337 20.9565 24.8543 21.104 25.04 21.29L25.1 21.35C25.3357 21.5805 25.635 21.7352 25.9594 21.794C26.2838 21.8528 26.6184 21.8131 26.92 21.68H27C27.2958 21.5532 27.548 21.3428 27.7257 21.0745C27.9034 20.8062 27.9987 20.4918 28 20.17V20C28 19.4696 28.2107 18.9609 28.5858 18.5858C28.9609 18.2107 29.4696 18 30 18C30.5304 18 31.0391 18.2107 31.4142 18.5858C31.7893 18.9609 32 19.4696 32 20V20.09C32.0013 20.4118 32.0966 20.7262 32.2743 20.9945C32.452 21.2628 32.7042 21.4732 33 21.6C33.3016 21.7331 33.6362 21.7728 33.9606 21.714C34.285 21.6552 34.5843 21.5005 34.82 21.27L34.88 21.21C35.0657 21.024 35.2863 20.8765 35.5291 20.7759C35.7719 20.6752 36.0322 20.6234 36.295 20.6234C36.5578 20.6234 36.8181 20.6752 37.0609 20.7759C37.3037 20.8765 37.5243 21.024 37.71 21.21C37.896 21.3957 38.0435 21.6163 38.1441 21.8591C38.2448 22.1019 38.2966 22.3622 38.2966 22.625C38.2966 22.8878 38.2448 23.1481 38.1441 23.3909C38.0435 23.6337 37.896 23.8543 37.71 24.04L37.65 24.1C37.4195 24.3357 37.2648 24.635 37.206 24.9594C37.1472 25.2838 37.1869 25.6184 37.32 25.92V26C37.4468 26.2958 37.6572 26.548 37.9255 26.7257C38.1938 26.9034 38.5082 26.9987 38.83 27H39C39.5304 27 40.0391 27.2107 40.4142 27.5858C40.7893 27.9609 41 28.4696 41 29C41 29.5304 40.7893 30.0391 40.4142 30.4142C40.0391 30.7893 39.5304 31 39 31H38.91C38.5882 31.0013 38.2738 31.0966 38.0055 31.2743C37.7372 31.452 37.5268 31.7042 37.4 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_5221_60143\" x=\"0\"\r\n y=\"0\" width=\"60\" height=\"60\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_5221_60143\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_5221_60143\"\r\n result=\"shape\" />\r\n </filter>\r\n <clipPath id=\"clip0_5221_60143\">\r\n <rect width=\"24\" height=\"24\"\r\n fill=\"white\"\r\n transform=\"translate(18 17)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span></div>\r\n <div *ngIf=\"producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.producttrailIssue == producttrailitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem)\">{{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row gx-4 mt-4\">\r\n <div class=\"col-xl-6\">\r\n <!-- Billing Information start -->\r\n <div\r\n class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap mb-6 px-6\">\r\n <div class=\"d-flex flex-column mt-10\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n Unsubscribe Request\r\n </div>\r\n <div class=\"subtext\">Client has requested to unsubscribe\r\n <span class=\"subtextbold\">Tango Suite</span>\r\n </div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-9\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span\r\n class=\"mt-6\">Cancel</span></a><a (click)=\"unsubscribe()\" type=\"button\"\r\n tabindex=\"0\"\r\n class=\"btn btn-danger px-4 mt-3 ng-star-inserted\"><span>Approve\r\n </span></a></div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- client request card end -->\r\n\r\n <!-- level view dropdown start -->\r\n <div *ngIf=\"sublevelview\"\r\n class=\"d-flex justify-content-between heading mt-6\">\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\"\r\n (click)=\"viewplanDropdown($event)\"\r\n aria-label=\"Default select example\">{{viewplanIssue}}</div>\r\n <div *ngIf=\"viewplandropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let viewplanitem of viewplantype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.viewplanIssue == viewplanitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"viewplanItem(viewplanitem)\">{{viewplanitem}}\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"text-sub\">Based on Current Subscribed Product</div>\r\n </div>\r\n\r\n\r\n <!-- <div>\r\n <select class=\"form-select form-select-lg levelviewtext\"\r\n aria-label=\".form-select-lg example\"\r\n (change)=\"levelviewPlan($event)\">\r\n <option\r\n [ngClass]=\"subscriptionplan === 'productlevelview'? 'activePlanBtn':'inactivePlanBtn'\"\r\n value=\"productlevelview\">Product Level View</option>\r\n <option\r\n [ngClass]=\"subscriptionplan === 'storelevelview'? 'activePlanBtn':'inactivePlanBtn'\"\r\n value=\"storelevelview\">Store Level View</option>\r\n </select>\r\n <div class=\"text-sub\">Based on Current Subscribed Product</div>\r\n\r\n </div> -->\r\n <!-- level view dropdown end -->\r\n\r\n <!-- subscription config toolbar start -->\r\n <div class=\"card-toolbar\">\r\n <div *ngIf=\"plan == 'subscription' && viewplanIssue == 'Product Level View'\"\r\n class=\" d-flex justify-content-end mt-6\">\r\n <lib-multidropdown text=\"Add Products\"></lib-multidropdown>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar mt-3\"\r\n *ngIf=\"viewplanIssue == 'Store Level View' && plan == 'subscription'\">\r\n <div class=\"d-flex justify-content-end\">\r\n <div class=\"d-flex align-items-end position-relative my-1\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute mb-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\"\r\n width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n <lib-filters class=\"me-2\"\r\n [dataObject]=\"dataObject\"></lib-filters>\r\n <lib-multidropdown text=\"Add Products\"></lib-multidropdown>\r\n <!-- (click)=\"creditnote()\" -->\r\n\r\n\r\n <!-- <button type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap me-4\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\"\r\n height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span>Add Products</span> </button> -->\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config toolbar end -->\r\n </div>\r\n\r\n <!-- product subscription plan start -->\r\n <div *ngIf=\"viewplanIssue == 'Product Level View'\">\r\n <div class=\"card-body p-0 mt-4\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <!-- <th>Trail Days Left</th> -->\r\n <th>No of Stores</th>\r\n <th>Cost Per Store</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"table-title subscribedtext\">Tango\r\n Traffic</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$1500</div>\r\n </td>\r\n\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title subscribedtext\">Tango\r\n Zone\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$1500</div>\r\n </td>\r\n\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title subscribedtext\">Priority\r\n Support</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$1500</div>\r\n </td>\r\n\r\n\r\n </tr>\r\n <!-- <tr>\r\n <td>\r\n <div\r\n class=\"form-check form-switch d-flex justify-content-between\">\r\n <div><input type=\"checkbox\" role=\"switch\"\r\n id=\"livestore\" checked=\"\"\r\n ng-reflect-name=\"livestore\"\r\n class=\"form-check-input\"><label\r\n for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Priority\r\n Support\r\n\r\n </label></div>\r\n </div>\r\n\r\n </td>\r\n <td>\r\n \r\n <div class=\"w-lg-50 position-relative d-flex\">\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\"\r\n (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16699 10H15.8337\"\r\n stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\"\r\n style=\"text-align: center;\"\r\n value=\"{{count}}\" placeholder=\"\" />\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span\r\n class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\" height=\"16\"\r\n viewBox=\"0 0 17 16\" fill=\"none\">\r\n <path\r\n d=\"M8.49967 3.33301V12.6663M3.83301 7.99967H13.1663\"\r\n stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">300</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-warning \">Trail\r\n Requested</span>\r\n </td>\r\n\r\n\r\n </tr> -->\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product subscription plan end -->\r\n\r\n <!-- store subscription plan start -->\r\n <div *ngIf=\"viewplanIssue == 'Store Level View'\">\r\n <div class=\"card-body p-0 mt-6\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"d-flex\">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <label class=\"form-check-label\"\r\n for=\"flexCheckDefault\">\r\n <span>Store Info</span>\r\n </label>\r\n </div>\r\n </th>\r\n <th>Location</th>\r\n <th>Group Name</th>\r\n <th>Products</th>\r\n <th>Actions</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex \">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n\r\n <div>\r\n\r\n\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex\">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex \">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex \">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex\">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div class=\"mb-4\">\r\n <lib-pagination></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- store subscription plan end -->\r\n </div>\r\n <!-- subscription tab starts -->\r\n\r\n <!--pricing tab start -->\r\n <div *ngIf=\"plan == 'pricing'\">\r\n <div class=\"d-flex justify-content-between py-6\">\r\n <div class=\" levelviewtext mt-4\">\r\n Pricing Table<br><span class=\"text-sub\">Based on Product &\r\n stores</span> </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"justify-content-end\">\r\n <div class=\"producttext\">Switch to</div>\r\n <div *ngIf=\"PricingshowNav\"\r\n class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"pricingplan === 'standardprice'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"standardprice\"\r\n (click)=\"selectPricePlan('standardprice')\">\r\n Standard Price\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"pricingplan === 'stepprice'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"stepprice\"\r\n (click)=\"selectPricePlan('stepprice')\">\r\n Step Price\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricingplan == 'stepprice'\" class=\"d-flex justify-content-end mb-8\">\r\n <button (click)=\"addstepprice('add')\" type=\"button\" class=\"btn-outline btn needhelp text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Add Step</span> </button>\r\n </div>\r\n\r\n <div class=\"card-body p-0 mt-4\">\r\n <div *ngIf=\"pricingplan == 'standardprice'\" class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th class=\"discountheader\">Discount %</th>\r\n <th class=\"negheader\">Negotiated Price</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">$600</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">$300</div>\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">$300</div>\r\n </th>\r\n <th></th>\r\n\r\n <th>\r\n <div class=\"table-title bolddata\">$60000</div>\r\n </th>\r\n\r\n </tr>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n <div *ngIf=\"pricingplan == 'stepprice'\" class=\"table-responsive\">\r\n <table class=\"table bottom-border pricingtab\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th>Discount %</th>\r\n <th>Negotiated Price</th>\r\n <th>Store Range</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n <td>\r\n <div class=\"cursor-pointer table-title d-flex\"><span (click)=\"addstepprice('delete')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span (click)=\"addstepprice('edit')\" class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic<span\r\n class=\"ms-4\"><img\r\n src=\"./assets/tango/custompopup-Icons/expiry-icon.svg\"\r\n alt=\"\"></span></div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Zone</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">$600</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">35.9%</div>\r\n </th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th>\r\n <div class=\"table-title bolddata\">$ 60000</div>\r\n </th>\r\n <th></th>\r\n\r\n </tr>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n <!-- <div class=\"ms-15 me-15\">\r\n <hr>\r\n </div> -->\r\n\r\n <div class=\"card-body pt-14\">\r\n <div class=\"d-flex flex-stack\">\r\n <div class=\"fianlvaltext me-2\">Actual Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">$ 100000</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Discount</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">40% (- $ 40000)</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Negotiated Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">$ 60000</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Tax</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">18% GST</span>\r\n </div>\r\n </div>\r\n <hr>\r\n\r\n <div class=\"d-flex flex-stack py-2\">\r\n <div class=\"fianlvaltext me-2\">Final Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">$ 49200</span>\r\n </div>\r\n </div>\r\n\r\n <hr>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Save\r\n </span></a></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- pricing tab plan end -->\r\n\r\n\r\n\r\n <!-- submit plan start -->\r\n <div *ngIf=\"plan == 'storesubscription'\" class=\"row\">\r\n <div class=\"col-lg-8\">\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Apply\r\n Changes\r\n </span></a></div>\r\n </div>\r\n\r\n </div>\r\n <!-- submit plan end -->\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product info end -->\r\n\r\n <!-- payment invoice start -->\r\n <div class=\"col-xl-12 my-4 billingcard\">\r\n <div class=\"d-flex justify-content-between ps-4 pt-6\">\r\n <!--begin::Title-->\r\n <h3 class=\"align-items-start flex-column\">\r\n <span class=\"heading mb-2\">Payment and Invoice</span>\r\n </h3>\r\n <!--end::Title-->\r\n\r\n <!--begin::Toolbar-->\r\n <div class=\"card-toolbar mb-2\">\r\n <button type=\"submit\"\r\n class=\"btn-outline btn align-items-end needhelp me-4\"><span\r\n class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n <!--end::Toolbar-->\r\n </div>\r\n <!-- payment invoice form start -->\r\n <div class=\"d-flex flex-column row fv-row fv-plugins-icon-container px-4\">\r\n <form [formGroup]=\"paymentinvoiceform\" (ngSubmit)=\"Submit()\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Enable Pro-Rate\r\n for Charges</label>\r\n <div class=\"d-flex mt-3\">\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'fixedpricing')\">\r\n <input\r\n [ngClass]=\"select ==='fixedpricing' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\"radio-custom cursor-pointer\" type=\"radio\"\r\n name=\"inlineRadioOptions\" id=\"inlineRadio1\"\r\n value=\"fixedpricing\" checked>\r\n <label\r\n class=\"form-check-label radio-custom-label mx-3 headingtext cursor-pointer\"\r\n for=\"inlineRadio1\">Before 15th of Month</label>\r\n </div>\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'steppricing')\">\r\n <input\r\n [ngClass]=\"select ==='steppricing' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\"radio-custom cursor-pointer\" type=\"radio\"\r\n name=\"inlineRadioOptions\" id=\"inlineRadio1\"\r\n value=\"steppricing\">\r\n <label\r\n class=\"form-check-label headingtext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">After 15th of Month</label>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Payment\r\n Cycle</label>\r\n\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymentcycle\"\r\n (click)=\"openDropdown($event)\"\r\n aria-label=\"Default select example\">{{selectedIssue}}</div>\r\n <div *ngIf=\"dropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let item of dropdownItems\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.selectedIssue == item ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"selectItem(item)\">{{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"generateinvoice\" class=\"headingtext mb-2\">Generate\r\n Invoice To <span> <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let domain of allowedDomains; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{domain}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"removeChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\"\r\n formControlName=\"generateinvoice\"\r\n (keydown)=\"onKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"generateinvoiceon\" class=\"headingtext mb-2\">Generate\r\n Invoice\r\n On\r\n </label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"generateinvoiceon\"\r\n (click)=\"invoiceDropdown($event)\"\r\n aria-label=\"Default select example\">{{invoiceonIssue}}</div>\r\n <div *ngIf=\"invoicedropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let invoiceitem of generateinvoiceon\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.invoiceonIssue == invoiceitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"invoiceItem(invoiceitem)\">{{invoiceitem}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymenttype\" class=\"headingtext mb-2\">Payment\r\n Type</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymenttype\"\r\n (click)=\"paymenttypeDropdown($event)\"\r\n aria-label=\"Default select example\">{{paymentIssue}}</div>\r\n <div *ngIf=\"paymenttypedropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let paymentitem of paymenttype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.paymentIssue == paymentitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"paymentItem(paymentitem)\">{{paymentitem}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"currency\" class=\"headingtext mb-2\">Currency</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"currency\"\r\n (click)=\"currencyDropdown($event)\"\r\n aria-label=\"Default select example\">{{currencyIssue}}</div>\r\n <div *ngIf=\"currencydropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let currencyitem of currencytype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.currencyIssue == currencyitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"currencyItem(currencyitem)\">\r\n {{currencyitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"sendpayment\" class=\"headingtext mb-2\">Send Payment\r\n Agreement<span class=\"ms-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let domain of paymentallowedDomains; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{domain}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"sendpaymentremoveChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\"\r\n formControlName=\"sendpayment\"\r\n (keydown)=\"sendpaymentonKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"extendpayment\" class=\" headingtext mb-2\">Extend Payment\r\n Period Days </label>\r\n <div class=\"w-lg-100 position-relative\">\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\"\r\n (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16699 10H15.8337\" stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"extendpayment\"\r\n formControlName=\"extendpayment\" style=\"text-align: center;\"\r\n value=\"{{count}}\" placeholder=\"\" />\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\"\r\n height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <path\r\n d=\"M8.49967 3.33301V12.6663M3.83301 7.99967H13.1663\"\r\n stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end my-6\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4\">Cancel</a><a type=\"button\"\r\n tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"><span>Apply\r\n Changes\r\n </span></a></div>\r\n </div>\r\n\r\n </form>\r\n </div>\r\n <!-- payment invoice form end -->\r\n </div>\r\n <!-- payment invoice end -->\r\n\r\n </ng-template>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config End -->\r\n\r\n <!--Invoices start -->\r\n <div class=\"card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>Invoices <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div class=\"card-header\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Payment History</span>\r\n\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\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=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\"\r\n rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-4\" placeholder=\"Search\"\r\n autocomplete=\"off\" />\r\n <!-- \r\n <button type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M18.8327 2.5H2.16602L8.83268 10.3833V15.8333L12.166 17.5V10.3833L18.8327 2.5Z\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\">Last 3 Months</span> </button> -->\r\n\r\n <div class=\"me-3 monthwidth\">\r\n <div class=\"dropdown\">\r\n <select class=\"form-select \" aria-label=\"Default select example\">\r\n <option selected>Current Month</option>\r\n <option value=\"1\">Previous Month</option>\r\n <option value=\"2\">Last 3 Mon</option>\r\n\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <button (click)=\"creditnote()\" type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap me-4\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span>Credit Note</span> </button>\r\n <button type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap me-4\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\"></span> Export</button>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template>\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Invoice #</th>\r\n <th>Month</th>\r\n <th>Stores</th>\r\n <th>Products</th>\r\n <th>Amount</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <lib-pagination></lib-pagination>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <!--Invoices end -->\r\n </div>\r\n </div>", styles: [".accordion-button:not(.collapsed){color:none!important;background-color:#fff!important;box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed){color:none!important;background-color:var(--bs-accordion-active-bg);box-shadow:none!important}.billingcard{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff}.heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600}.subheading{color:var(--Gray-900, #101828);font-size:16px;font-weight:400;line-height:24px}.sub{color:var(--Gray-900, #101828);font-size:14px;font-weight:400;line-height:20px}.pricingtext{color:var(--Gray-800, #1D2939);font-size:30px;font-weight:600;line-height:38px}.pricingspan{color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}input [type=text] [disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}input[type=text]{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-weight:400;line-height:24px}input:active [type=text],input:focus [type=text],input:focus-visible [type=text]{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.mainheading{color:var(--Black, #101828);font-size:18px;font-weight:600;line-height:28px}.trail{color:var(--Gray-500, #667085);font-size:18px;font-weight:600;line-height:28px}.daysleft{color:var(--Error-700, #B42318);text-align:center;font-size:12px;font-weight:500;line-height:18px}.subtext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.needhelp{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.billingtext{color:#000;font-size:20px;font-weight:500;line-height:30px}.billingdetails{color:var(--Gray-500, #667085);font-size:16px;font-weight:500;line-height:24px}.billingmain{color:#000;font-size:16px;font-weight:600;line-height:24px}.update{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.address{border-radius:8px;border:1px solid var(--Primary-600, #00A3FF);background:var(--Primary-600, #00A3FF);box-shadow:0 1px 2px #1018280d}.billing{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Primary-25, #F6FCFF)}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;width:fit-content}.form-check-label{color:var(--Gray-700, #344054)!important}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important;border:1px solid black;width:100%!important}.fieldwidth{width:100%!important;background-color:#fff!important}.text-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.pointer{cursor:pointer}.invoice{width:120%}.monthwidth{width:65%}.storeinput{width:10%!important;box-shadow:none!important}.storerange{width:15%!important}.discountprice{width:11%!important}.negprice{width:14%}.discountheader{width:12%}.negheader{width:16%}.bolddata{font-weight:700!important;color:var(--Gray-700, #344054)!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.table:not(.table-bordered) tbody tr:last-child{border-bottom:1px solid #EAECF0!important}hr{border:1px solid var(--Gray-300, #D0D5DD);height:1px!important}.fianlvaltext{color:var(--Gray-500, #667085);font-size:16px;font-weight:600;line-height:24px}.input-group-text{background-color:#fff!important;color:var(--Gray-400, #98A2B3);font-size:16px;font-weight:400;line-height:24px}.discountinput{width:80px!important;text-align:center;color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.radio-custom{width:20px;height:20px;background-color:#eaf8ff}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:8px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff;width:16px;height:16px}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px;border:none!important}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.form-control{display:block;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}tr{vertical-align:middle!important}.levelviewtext{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:18px;border:none!important;font-weight:600;line-height:28px;padding-left:0!important}.subscribedtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:45px!important}.badge-light-grey{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:4px 12px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.daysleft{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:24px;font-style:normal;font-weight:500;line-height:32px}.btn-danger{border-radius:8px;border:1px solid var(--Error-600, #D92D20);background:var(--Error-600, #D92D20);box-shadow:0 1px 2px #1018280d}.subtextbold{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:700;line-height:18px}.toastcard{border-radius:4px;border-left:2px solid #00A3FF;background:#f5f8fa;box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 12px 6px 16px;align-items:center;gap:16px;align-self:stretch}.toasttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.billingupdate{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054);font-family:Inter;font-size:12px;font-weight:600;line-height:18px;text-transform:capitalize}.pricingtab{width:115%}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$3.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$3.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$3.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$3.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i2.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "component", type: MultidropdownComponent, selector: "lib-multidropdown", inputs: ["text"] }] });
1662
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaymentsSubscriptionComponent, deps: [{ token: i1$3.NgbModal }, { token: i1$2.FormBuilder }, { token: PaymentSubscriptionService }, { token: i0.ChangeDetectorRef }, { token: i3$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1663
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PaymentsSubscriptionComponent, selector: "lib-payments-subscription", ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion [closeOthers]=\"true\">\r\n <!-- Billing & subscription start -->\r\n <div class=\"card\" ngbAccordionItem [collapsed]=\"openaccordian\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>Billing & Subscription<div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <!--begin::plan details Card-->\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"toastcard col-md-12\">\r\n <div class=\"d-flex align-items-center justify-content-end\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\"\r\n alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Kind Reminder: You have a reached your due\r\n limit ,To continue enjoying our services, please renew your subscription\r\n by making the payment. Thank you for your cooperation</span>\r\n <span><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Pay Now\r\n </span></a></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-column mt-6\">\r\n <div class=\"d-flex align-items-center justify-content-between border-val mb-2\">\r\n Current Plan Info<span class=\"badge-light-grey ms-2\">Standard Pricing</span>\r\n </div>\r\n <div class=\"d-flex align-items-center pricingtext my-2\">\r\n \u20B9 799<span\r\n class=\"pricingspan ms-2\">Store/{{clientinfo?.clientDetails?.planDetails?.subscriptionPeriod\r\n || '--'}}</span>\r\n </div>\r\n <hr>\r\n <div class=\"d-flex justify-content-between\">\r\n\r\n\r\n <div class=\"d-flex justify-content-start flex-column\">\r\n <div class=\" heading mb-3\">\r\n {{clientinfo?.clientDetails?.planDetails?.subscriptionType || '--'}}\r\n plan - {{clientinfo?.storeCount || '--'}}\r\n <span class=\"subheading ms-2\"> store\r\n onboarded</span>\r\n <span class=\"badge badge-light-warning ms-2\">Tango Sop\r\n <img class=\"ms-2\"\r\n src=\"./assets/tango/custompopup-Icons/clockexpiry-icon.svg\"\r\n alt=\"\"> </span>\r\n </div>\r\n <span class=\"sub d-block\">Cameras : 1000 | Avg sq.ft : 500 -1000 sq.ft |\r\n Products : Tango Traffic , Tango Zone </span>\r\n </div>\r\n <div class=\" d-flex align-items-end me-3\">\r\n <a type=\"submit\" (click)=\"needhelp()\"\r\n class=\"btn-outline btn needhelp me-4\"><span class=\"me-2\"><svg\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1965_2301)\">\r\n <path\r\n d=\"M7.57533 7.50033C7.77125 6.94338 8.15795 6.47375 8.66695 6.1746C9.17596 5.87546 9.77441 5.76611 10.3563 5.86592C10.9382 5.96573 11.466 6.26826 11.8462 6.71993C12.2264 7.1716 12.4345 7.74326 12.4337 8.33366C12.4337 10.0003 9.93366 10.8337 9.93366 10.8337M10.0003 14.167H10.0087M18.3337 10.0003C18.3337 14.6027 14.6027 18.3337 10.0003 18.3337C5.39795 18.3337 1.66699 14.6027 1.66699 10.0003C1.66699 5.39795 5.39795 1.66699 10.0003 1.66699C14.6027 1.66699 18.3337 5.39795 18.3337 10.0003Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1965_2301\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span><span class=\"mt-2\"> Need Help</span></a><a\r\n (click)=\"upgradeplan()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Upgrade Plan\r\n </span></a>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <!-- <div class=\"d-flex align-items-center heading mb-3\">\r\n {{clientinfo?.clientDetails?.planDetails?.subscriptionType || '--'}} plan - {{clientinfo?.storeCount || '--'}}\r\n <span class=\"subheading ms-2\"> store\r\n onboarded</span>\r\n <span class=\"badge badge-light-warning ms-2\">Tango Sop\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/expiry-icon.svg\"\r\n alt=\"\"> </span>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-8 sub pe-7\">Cameras : 1000 | Avg sq.ft : 500 -1000 sq.ft | Products : Tango Traffic , Tango Zone \r\n </div>\r\n <div class=\"col-lg-4\">\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end\"><a type=\"submit\"\r\n (click)=\"needhelp()\" class=\"btn-outline btn needhelp me-4\"><span\r\n class=\"me-2\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1965_2301)\">\r\n <path\r\n d=\"M7.57533 7.50033C7.77125 6.94338 8.15795 6.47375 8.66695 6.1746C9.17596 5.87546 9.77441 5.76611 10.3563 5.86592C10.9382 5.96573 11.466 6.26826 11.8462 6.71993C12.2264 7.1716 12.4345 7.74326 12.4337 8.33366C12.4337 10.0003 9.93366 10.8337 9.93366 10.8337M10.0003 14.167H10.0087M18.3337 10.0003C18.3337 14.6027 14.6027 18.3337 10.0003 18.3337C5.39795 18.3337 1.66699 14.6027 1.66699 10.0003C1.66699 5.39795 5.39795 1.66699 10.0003 1.66699C14.6027 1.66699 18.3337 5.39795 18.3337 10.0003Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1965_2301\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span><span class=\"mt-2\"> Need Help</span></a><a\r\n (click)=\"upgradeplan()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Upgrade Plan\r\n </span></a></div>\r\n </div>\r\n\r\n </div> -->\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!--end::plan details Card-->\r\n\r\n\r\n <div class=\"row gx-4 mt-4\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-7 \">\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div class=\"d-flex align-items-center billingtext mb-8\">\r\n Bank Details\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Payment Type</div>\r\n <div class=\"billingmain\">{{clientinfo?.bankDetails?.paymentType ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Account No </div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.accNo || '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">IFSC Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.IFSCCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center mt-4\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">SWIFT Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.swiftCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Branch </div>\r\n <div class=\"billingmain\">{{clientinfo?.bankDetails?.branch || '--'}}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Bank details Card-->\r\n\r\n\r\n <div class=\"col-xl-5 \">\r\n <!-- Billing Information start -->\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between billingtext mb-5\">\r\n Billing\r\n <a type=\"submit\" (click)=\"update()\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"><span class=\"mt-2\">\r\n Update</span></a>\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center\">\r\n\r\n <div class=\"billingdetails\">Next Billing Date</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.clientDetails?.billingDetails?.billingdate || '--'}}\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center mt-6\">\r\n <div class=\"billingdetails\">Billing Address</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.clientDetails?.billingDetails?.billingAddress ||\r\n '--'}}\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Billing Information End -->\r\n\r\n <!-- Add Billing start -->\r\n <!-- <div class=\" billing h-xl-100 w-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"modal-content align-items-center mt-2\">\r\n <div class=\"d-flex\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/addbilling_icon.svg\"\r\n alt=\"\"></div>\r\n\r\n </div>\r\n <div class=\"heading mt-4 ms-1\">Add billing address</div>\r\n <div class=\"d-flex justify-content-center mt-8 w-100\">\r\n <button type=\"button\" tabindex=\"0\" (click)=\"update()\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted address w-100\"\r\n style=\"white-space: nowrap;\"><span class=\"submit\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0003 4.16675V15.8334M4.16699 10.0001H15.8337\"\r\n stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> New Address </button>\r\n </div>\r\n\r\n </div>\r\n </div> -->\r\n <!-- Add Billing end -->\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Billing & subscription End -->\r\n\r\n <!--subscription Config start -->\r\n <div class=\"card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>Subscription Config <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n\r\n <ng-template>\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap mx-5 pt-4\">\r\n <div class=\"d-flex flex-column\">\r\n <!-- subscription info header start -->\r\n <div class=\"d-flex justify-content-between\">\r\n\r\n <div *ngIf=\"showNavGroup\" class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'subscription'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"subscription\" (click)=\"selectPlan('subscription')\">\r\n Subscription\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'pricing'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"pricing\" (click)=\"selectPlan('pricing')\">\r\n Pricing\r\n </button>\r\n </div>\r\n <!-- \r\n <div *ngIf=\"plan == 'pricing'\" class=\"d-flex mt-2\" style=\"text-align: end;\">\r\n <div class=\"input-group\">\r\n <span class=\"input-group-text\" id=\"basic-addon1\">Discount %</span>\r\n <input type=\"text\" class=\"form-control discountinput\"\r\n aria-label=\"Username\" aria-describedby=\"basic-addon1\">\r\n </div>\r\n </div> -->\r\n </div>\r\n <!-- subscription info header end -->\r\n\r\n <!-- subscription tab starts -->\r\n <div *ngIf=\"plan == 'subscription'\">\r\n <!-- client request card start -->\r\n <div class=\"row gx-4 mt-4\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-6\">\r\n <!-- Billing Information start -->\r\n <div\r\n class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap mb-6 px-6\">\r\n <div class=\"d-flex flex-column mt-10\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n Tango SOP <span\r\n class=\"badge-light-grey ms-2\">Premium</span>\r\n </div>\r\n <div class=\"subtext\">Kindly make necessary action for trial\r\n request or skip product to subscription list</div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-9\"><a (click)=\"skiptrail()\" type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span\r\n class=\"mt-6\">Skip Trail</span></a><a (click)=\"approvetrail()\"\r\n type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Approve\r\n Trail\r\n </span></a></div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <!--end::Bank details Card-->\r\n\r\n <div class=\"col-xl-6\">\r\n <!-- Billing Information start -->\r\n <div\r\n class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap mb-6 px-6\">\r\n <div class=\"d-flex flex-column mt-10\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n Tango SOP <span\r\n class=\"badge-light-grey ms-2\">Premium</span>\r\n </div>\r\n <div class=\"subtext\">Current Plan Info</div>\r\n <div class=\"row mt-7\">\r\n <div class=\"col-lg-8 d-flex\">\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"94\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <!-- Background circle -->\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\"></circle>\r\n <!-- Foreground circle -->\r\n <circle id=\"progress-circle\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#007bff\" stroke-width=\"8\" stroke-dasharray=\"251.2\" stroke-dashoffset=\"62.8\"></circle>\r\n <!-- Text displaying percentage -->\r\n <text id=\"percentage-text\" x=\"50\" y=\"54\" class=\"producttext\" text-anchor=\"middle\" fill=\"#333333\">40%</text>\r\n </svg></div>\r\n <div\r\n class=\"align-items-start justify-content-between daysleft ms-6 mt-3\">\r\n 12 Days Left\r\n <div class=\"align-items-start trail mt-2 me-14\">Free trial</div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-lg-4 mt-6\">\r\n <script type=\"module\">\r\n updateCircleChart({ percentageChange: 30 });\r\n </script>\r\n\r\n <div class=\"position-relative\">\r\n <div (click)=\"producttrailDropdown($event)\"\r\n > <span class=\"justify-content-end cursor-pointer ms-20\"><svg width=\"60\"\r\n height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_5221_60143)\">\r\n <rect x=\"2\" y=\"1\" width=\"56\" height=\"56\"\r\n rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"55\"\r\n height=\"55\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <g clip-path=\"url(#clip0_5221_60143)\">\r\n <path\r\n d=\"M30 32C31.6569 32 33 30.6569 33 29C33 27.3431 31.6569 26 30 26C28.3431 26 27 27.3431 27 29C27 30.6569 28.3431 32 30 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M37.4 32C37.2669 32.3016 37.2272 32.6362 37.286 32.9606C37.3448 33.285 37.4995 33.5843 37.73 33.82L37.79 33.88C37.976 34.0657 38.1235 34.2863 38.2241 34.5291C38.3248 34.7719 38.3766 35.0322 38.3766 35.295C38.3766 35.5578 38.3248 35.8181 38.2241 36.0609C38.1235 36.3037 37.976 36.5243 37.79 36.71C37.6043 36.896 37.3837 37.0435 37.1409 37.1441C36.8981 37.2448 36.6378 37.2966 36.375 37.2966C36.1122 37.2966 35.8519 37.2448 35.6091 37.1441C35.3663 37.0435 35.1457 36.896 34.96 36.71L34.9 36.65C34.6643 36.4195 34.365 36.2648 34.0406 36.206C33.7162 36.1472 33.3816 36.1869 33.08 36.32C32.7842 36.4468 32.532 36.6572 32.3543 36.9255C32.1766 37.1938 32.0813 37.5082 32.08 37.83V38C32.08 38.5304 31.8693 39.0391 31.4942 39.4142C31.1191 39.7893 30.6104 40 30.08 40C29.5496 40 29.0409 39.7893 28.6658 39.4142C28.2907 39.0391 28.08 38.5304 28.08 38V37.91C28.0723 37.579 27.9651 37.258 27.7725 36.9887C27.5799 36.7194 27.3107 36.5143 27 36.4C26.6984 36.2669 26.3638 36.2272 26.0394 36.286C25.715 36.3448 25.4157 36.4995 25.18 36.73L25.12 36.79C24.9343 36.976 24.7137 37.1235 24.4709 37.2241C24.2281 37.3248 23.9678 37.3766 23.705 37.3766C23.4422 37.3766 23.1819 37.3248 22.9391 37.2241C22.6963 37.1235 22.4757 36.976 22.29 36.79C22.104 36.6043 21.9565 36.3837 21.8559 36.1409C21.7552 35.8981 21.7034 35.6378 21.7034 35.375C21.7034 35.1122 21.7552 34.8519 21.8559 34.6091C21.9565 34.3663 22.104 34.1457 22.29 33.96L22.35 33.9C22.5805 33.6643 22.7352 33.365 22.794 33.0406C22.8528 32.7162 22.8131 32.3816 22.68 32.08C22.5532 31.7842 22.3428 31.532 22.0745 31.3543C21.8062 31.1766 21.4918 31.0813 21.17 31.08H21C20.4696 31.08 19.9609 30.8693 19.5858 30.4942C19.2107 30.1191 19 29.6104 19 29.08C19 28.5496 19.2107 28.0409 19.5858 27.6658C19.9609 27.2907 20.4696 27.08 21 27.08H21.09C21.421 27.0723 21.742 26.9651 22.0113 26.7725C22.2806 26.5799 22.4857 26.3107 22.6 26C22.7331 25.6984 22.7728 25.3638 22.714 25.0394C22.6552 24.715 22.5005 24.4157 22.27 24.18L22.21 24.12C22.024 23.9343 21.8765 23.7137 21.7759 23.4709C21.6752 23.2281 21.6234 22.9678 21.6234 22.705C21.6234 22.4422 21.6752 22.1819 21.7759 21.9391C21.8765 21.6963 22.024 21.4757 22.21 21.29C22.3957 21.104 22.6163 20.9565 22.8591 20.8559C23.1019 20.7552 23.3622 20.7034 23.625 20.7034C23.8878 20.7034 24.1481 20.7552 24.3909 20.8559C24.6337 20.9565 24.8543 21.104 25.04 21.29L25.1 21.35C25.3357 21.5805 25.635 21.7352 25.9594 21.794C26.2838 21.8528 26.6184 21.8131 26.92 21.68H27C27.2958 21.5532 27.548 21.3428 27.7257 21.0745C27.9034 20.8062 27.9987 20.4918 28 20.17V20C28 19.4696 28.2107 18.9609 28.5858 18.5858C28.9609 18.2107 29.4696 18 30 18C30.5304 18 31.0391 18.2107 31.4142 18.5858C31.7893 18.9609 32 19.4696 32 20V20.09C32.0013 20.4118 32.0966 20.7262 32.2743 20.9945C32.452 21.2628 32.7042 21.4732 33 21.6C33.3016 21.7331 33.6362 21.7728 33.9606 21.714C34.285 21.6552 34.5843 21.5005 34.82 21.27L34.88 21.21C35.0657 21.024 35.2863 20.8765 35.5291 20.7759C35.7719 20.6752 36.0322 20.6234 36.295 20.6234C36.5578 20.6234 36.8181 20.6752 37.0609 20.7759C37.3037 20.8765 37.5243 21.024 37.71 21.21C37.896 21.3957 38.0435 21.6163 38.1441 21.8591C38.2448 22.1019 38.2966 22.3622 38.2966 22.625C38.2966 22.8878 38.2448 23.1481 38.1441 23.3909C38.0435 23.6337 37.896 23.8543 37.71 24.04L37.65 24.1C37.4195 24.3357 37.2648 24.635 37.206 24.9594C37.1472 25.2838 37.1869 25.6184 37.32 25.92V26C37.4468 26.2958 37.6572 26.548 37.9255 26.7257C38.1938 26.9034 38.5082 26.9987 38.83 27H39C39.5304 27 40.0391 27.2107 40.4142 27.5858C40.7893 27.9609 41 28.4696 41 29C41 29.5304 40.7893 30.0391 40.4142 30.4142C40.0391 30.7893 39.5304 31 39 31H38.91C38.5882 31.0013 38.2738 31.0966 38.0055 31.2743C37.7372 31.452 37.5268 31.7042 37.4 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_5221_60143\" x=\"0\"\r\n y=\"0\" width=\"60\" height=\"60\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_5221_60143\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_5221_60143\"\r\n result=\"shape\" />\r\n </filter>\r\n <clipPath id=\"clip0_5221_60143\">\r\n <rect width=\"24\" height=\"24\"\r\n fill=\"white\"\r\n transform=\"translate(18 17)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span></div>\r\n <div *ngIf=\"producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.producttrailIssue == producttrailitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem)\">{{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row gx-4 mt-4\">\r\n <div class=\"col-xl-6\">\r\n <!-- Billing Information start -->\r\n <div\r\n class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap mb-6 px-6\">\r\n <div class=\"d-flex flex-column mt-10\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n Unsubscribe Request\r\n </div>\r\n <div class=\"subtext\">Client has requested to unsubscribe\r\n <span class=\"subtextbold\">Tango Suite</span>\r\n </div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-9\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span\r\n class=\"mt-6\">Cancel</span></a><a (click)=\"unsubscribe()\" type=\"button\"\r\n tabindex=\"0\"\r\n class=\"btn btn-danger px-4 mt-3 ng-star-inserted\"><span>Approve\r\n </span></a></div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- client request card end -->\r\n\r\n <!-- level view dropdown start -->\r\n <div *ngIf=\"sublevelview\"\r\n class=\"d-flex justify-content-between heading mt-6\">\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\"\r\n (click)=\"viewplanDropdown($event)\"\r\n aria-label=\"Default select example\">{{viewplanIssue}}</div>\r\n <div *ngIf=\"viewplandropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let viewplanitem of viewplantype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.viewplanIssue == viewplanitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"viewplanItem(viewplanitem)\">{{viewplanitem}}\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"text-sub\">Based on Current Subscribed Product</div>\r\n </div>\r\n\r\n\r\n <!-- <div>\r\n <select class=\"form-select form-select-lg levelviewtext\"\r\n aria-label=\".form-select-lg example\"\r\n (change)=\"levelviewPlan($event)\">\r\n <option\r\n [ngClass]=\"subscriptionplan === 'productlevelview'? 'activePlanBtn':'inactivePlanBtn'\"\r\n value=\"productlevelview\">Product Level View</option>\r\n <option\r\n [ngClass]=\"subscriptionplan === 'storelevelview'? 'activePlanBtn':'inactivePlanBtn'\"\r\n value=\"storelevelview\">Store Level View</option>\r\n </select>\r\n <div class=\"text-sub\">Based on Current Subscribed Product</div>\r\n\r\n </div> -->\r\n <!-- level view dropdown end -->\r\n\r\n <!-- subscription config toolbar start -->\r\n <div class=\"card-toolbar\">\r\n <div *ngIf=\"plan == 'subscription' && viewplanIssue == 'Product Level View'\"\r\n class=\" d-flex justify-content-end mt-6\">\r\n <lib-multidropdown text=\"Add Products\"></lib-multidropdown>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar mt-3\"\r\n *ngIf=\"viewplanIssue == 'Store Level View' && plan == 'subscription'\">\r\n <div class=\"d-flex justify-content-end\">\r\n <div class=\"d-flex align-items-end position-relative my-1\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute mb-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\"\r\n width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n <lib-filters class=\"me-2\"\r\n [dataObject]=\"dataObject\"></lib-filters>\r\n <lib-multidropdown text=\"Add Products\"></lib-multidropdown>\r\n <!-- (click)=\"creditnote()\" -->\r\n\r\n\r\n <!-- <button type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap me-4\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\"\r\n height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span>Add Products</span> </button> -->\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config toolbar end -->\r\n </div>\r\n\r\n <!-- product subscription plan start -->\r\n <div *ngIf=\"viewplanIssue == 'Product Level View'\">\r\n <div class=\"card-body p-0 mt-4\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <!-- <th>Trail Days Left</th> -->\r\n <th>No of Stores</th>\r\n <th>Cost Per Store</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"table-title subscribedtext\">Tango\r\n Traffic</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$1500</div>\r\n </td>\r\n\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title subscribedtext\">Tango\r\n Zone\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$1500</div>\r\n </td>\r\n\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title subscribedtext\">Priority\r\n Support</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$1500</div>\r\n </td>\r\n\r\n\r\n </tr>\r\n <!-- <tr>\r\n <td>\r\n <div\r\n class=\"form-check form-switch d-flex justify-content-between\">\r\n <div><input type=\"checkbox\" role=\"switch\"\r\n id=\"livestore\" checked=\"\"\r\n ng-reflect-name=\"livestore\"\r\n class=\"form-check-input\"><label\r\n for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Priority\r\n Support\r\n\r\n </label></div>\r\n </div>\r\n\r\n </td>\r\n <td>\r\n \r\n <div class=\"w-lg-50 position-relative d-flex\">\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\"\r\n (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16699 10H15.8337\"\r\n stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\"\r\n style=\"text-align: center;\"\r\n value=\"{{count}}\" placeholder=\"\" />\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span\r\n class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\" height=\"16\"\r\n viewBox=\"0 0 17 16\" fill=\"none\">\r\n <path\r\n d=\"M8.49967 3.33301V12.6663M3.83301 7.99967H13.1663\"\r\n stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">300</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-warning \">Trail\r\n Requested</span>\r\n </td>\r\n\r\n\r\n </tr> -->\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product subscription plan end -->\r\n\r\n <!-- store subscription plan start -->\r\n <div *ngIf=\"viewplanIssue == 'Store Level View'\">\r\n <div class=\"card-body p-0 mt-6\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"d-flex\">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <label class=\"form-check-label\"\r\n for=\"flexCheckDefault\">\r\n <span>Store Info</span>\r\n </label>\r\n </div>\r\n </th>\r\n <th>Location</th>\r\n <th>Group Name</th>\r\n <th>Products</th>\r\n <th>Actions</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex \">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n\r\n <div>\r\n\r\n\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex\">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex \">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex \">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex\">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div class=\"mb-4\">\r\n <lib-pagination></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- store subscription plan end -->\r\n </div>\r\n <!-- subscription tab starts -->\r\n\r\n <!--pricing tab start -->\r\n <div *ngIf=\"plan == 'pricing'\">\r\n <div class=\"d-flex justify-content-between py-6\">\r\n <div class=\" levelviewtext mt-4\">\r\n Pricing Table<br><span class=\"text-sub\">Based on Product &\r\n stores</span> </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"justify-content-end\">\r\n <div class=\"producttext\">Switch to</div>\r\n <div *ngIf=\"PricingshowNav\"\r\n class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"pricingplan === 'standardprice'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"standardprice\"\r\n (click)=\"selectPricePlan('standardprice')\">\r\n Standard Price\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"pricingplan === 'stepprice'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"stepprice\"\r\n (click)=\"selectPricePlan('stepprice')\">\r\n Step Price\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricingplan == 'stepprice'\" class=\"d-flex justify-content-end mb-8\">\r\n <button (click)=\"addstepprice('add')\" type=\"button\" class=\"btn-outline btn needhelp text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Add Step</span> </button>\r\n </div>\r\n\r\n <div class=\"card-body p-0 mt-4\">\r\n <div *ngIf=\"pricingplan == 'standardprice'\" class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th class=\"discountheader\">Discount %</th>\r\n <th class=\"negheader\">Negotiated Price</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">$600</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">$300</div>\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">$300</div>\r\n </th>\r\n <th></th>\r\n\r\n <th>\r\n <div class=\"table-title bolddata\">$60000</div>\r\n </th>\r\n\r\n </tr>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n <div *ngIf=\"pricingplan == 'stepprice'\" class=\"table-responsive\">\r\n <table class=\"table bottom-border pricingtab\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th>Discount %</th>\r\n <th>Negotiated Price</th>\r\n <th>Store Range</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n <td>\r\n <div class=\"cursor-pointer table-title d-flex\"><span (click)=\"addstepprice('delete')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span (click)=\"addstepprice('edit')\" class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic<span\r\n class=\"ms-4\"><img\r\n src=\"./assets/tango/custompopup-Icons/expiry-icon.svg\"\r\n alt=\"\"></span></div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Zone</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">$600</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">35.9%</div>\r\n </th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th>\r\n <div class=\"table-title bolddata\">$ 60000</div>\r\n </th>\r\n <th></th>\r\n\r\n </tr>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n <!-- <div class=\"ms-15 me-15\">\r\n <hr>\r\n </div> -->\r\n\r\n <div class=\"card-body pt-14\">\r\n <div class=\"d-flex flex-stack\">\r\n <div class=\"fianlvaltext me-2\">Actual Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">$ 100000</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Discount</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">40% (- $ 40000)</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Negotiated Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">$ 60000</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Tax</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">18% GST</span>\r\n </div>\r\n </div>\r\n <hr>\r\n\r\n <div class=\"d-flex flex-stack py-2\">\r\n <div class=\"fianlvaltext me-2\">Final Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">$ 49200</span>\r\n </div>\r\n </div>\r\n\r\n <hr>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Save\r\n </span></a></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- pricing tab plan end -->\r\n\r\n\r\n\r\n <!-- submit plan start -->\r\n <div *ngIf=\"plan == 'storesubscription'\" class=\"row\">\r\n <div class=\"col-lg-8\">\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Apply\r\n Changes\r\n </span></a></div>\r\n </div>\r\n\r\n </div>\r\n <!-- submit plan end -->\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product info end -->\r\n\r\n <!-- payment invoice start -->\r\n <div class=\"col-xl-12 my-4 billingcard\">\r\n <div class=\"d-flex justify-content-between ps-4 pt-6\">\r\n <!--begin::Title-->\r\n <h3 class=\"align-items-start flex-column\">\r\n <span class=\"heading mb-2\">Payment and Invoice</span>\r\n </h3>\r\n <!--end::Title-->\r\n\r\n <!--begin::Toolbar-->\r\n <div class=\"card-toolbar mb-2\">\r\n <button type=\"submit\"\r\n class=\"btn-outline btn align-items-end needhelp me-4\"><span\r\n class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n <!--end::Toolbar-->\r\n </div>\r\n <!-- payment invoice form start -->\r\n <div class=\"d-flex flex-column row fv-row fv-plugins-icon-container px-4\">\r\n <form [formGroup]=\"paymentinvoiceform\" (ngSubmit)=\"Submit()\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Enable Pro-Rate\r\n for Charges</label>\r\n <div class=\"d-flex mt-3\">\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'fixedpricing')\">\r\n <input\r\n [ngClass]=\"select ==='fixedpricing' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\"radio-custom cursor-pointer\" type=\"radio\"\r\n name=\"inlineRadioOptions\" id=\"inlineRadio1\"\r\n value=\"fixedpricing\" checked>\r\n <label\r\n class=\"form-check-label radio-custom-label mx-3 headingtext cursor-pointer\"\r\n for=\"inlineRadio1\">Before 15th of Month</label>\r\n </div>\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'steppricing')\">\r\n <input\r\n [ngClass]=\"select ==='steppricing' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\"radio-custom cursor-pointer\" type=\"radio\"\r\n name=\"inlineRadioOptions\" id=\"inlineRadio1\"\r\n value=\"steppricing\">\r\n <label\r\n class=\"form-check-label headingtext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">After 15th of Month</label>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Payment\r\n Cycle</label>\r\n\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymentcycle\"\r\n (click)=\"openDropdown($event)\"\r\n aria-label=\"Default select example\">{{selectedIssue}}</div>\r\n <div *ngIf=\"dropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let item of dropdownItems\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.selectedIssue == item ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"selectItem(item)\">{{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"generateinvoice\" class=\"headingtext mb-2\">Generate\r\n Invoice To <span> <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let domain of allowedDomains; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{domain}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"removeChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\"\r\n formControlName=\"generateinvoice\"\r\n (keydown)=\"onKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"generateinvoiceon\" class=\"headingtext mb-2\">Generate\r\n Invoice\r\n On\r\n </label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"generateinvoiceon\"\r\n (click)=\"invoiceDropdown($event)\"\r\n aria-label=\"Default select example\">{{invoiceonIssue}}</div>\r\n <div *ngIf=\"invoicedropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let invoiceitem of generateinvoiceon\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.invoiceonIssue == invoiceitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"invoiceItem(invoiceitem)\">{{invoiceitem}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymenttype\" class=\"headingtext mb-2\">Payment\r\n Type</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymenttype\"\r\n (click)=\"paymenttypeDropdown($event)\"\r\n aria-label=\"Default select example\">{{paymentIssue}}</div>\r\n <div *ngIf=\"paymenttypedropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let paymentitem of paymenttype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.paymentIssue == paymentitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"paymentItem(paymentitem)\">{{paymentitem}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"currency\" class=\"headingtext mb-2\">Currency</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"currency\"\r\n (click)=\"currencyDropdown($event)\"\r\n aria-label=\"Default select example\">{{currencyIssue}}</div>\r\n <div *ngIf=\"currencydropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let currencyitem of currencytype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.currencyIssue == currencyitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"currencyItem(currencyitem)\">\r\n {{currencyitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"sendpayment\" class=\"headingtext mb-2\">Send Payment\r\n Agreement<span class=\"ms-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let domain of paymentallowedDomains; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{domain}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"sendpaymentremoveChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\"\r\n formControlName=\"sendpayment\"\r\n (keydown)=\"sendpaymentonKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"extendpayment\" class=\" headingtext mb-2\">Extend Payment\r\n Period Days </label>\r\n <div class=\"w-lg-100 position-relative\">\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\"\r\n (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16699 10H15.8337\" stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"extendpayment\"\r\n formControlName=\"extendpayment\" style=\"text-align: center;\"\r\n value=\"{{count}}\" placeholder=\"\" />\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\"\r\n height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <path\r\n d=\"M8.49967 3.33301V12.6663M3.83301 7.99967H13.1663\"\r\n stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end my-6\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4\">Cancel</a><a type=\"button\"\r\n tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"><span>Apply\r\n Changes\r\n </span></a></div>\r\n </div>\r\n\r\n </form>\r\n </div>\r\n <!-- payment invoice form end -->\r\n </div>\r\n <!-- payment invoice end -->\r\n\r\n </ng-template>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config End -->\r\n\r\n <!--Invoices start -->\r\n <div class=\"card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>Invoices <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div class=\"card-header\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Payment History</span>\r\n\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\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=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\"\r\n rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-4\" placeholder=\"Search\"\r\n autocomplete=\"off\" />\r\n <!-- \r\n <button type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M18.8327 2.5H2.16602L8.83268 10.3833V15.8333L12.166 17.5V10.3833L18.8327 2.5Z\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\">Last 3 Months</span> </button> -->\r\n\r\n <div class=\"me-3 monthwidth\">\r\n <div class=\"dropdown\">\r\n <select class=\"form-select \" aria-label=\"Default select example\">\r\n <option selected>Current Month</option>\r\n <option value=\"1\">Previous Month</option>\r\n <option value=\"2\">Last 3 Mon</option>\r\n\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <button (click)=\"creditnote()\" type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap me-4\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span>Credit Note</span> </button>\r\n <button type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap me-4\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\"></span> Export</button>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template>\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Invoice #</th>\r\n <th>Month</th>\r\n <th>Stores</th>\r\n <th>Products</th>\r\n <th>Amount</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <lib-pagination></lib-pagination>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <!--Invoices end -->\r\n </div>\r\n </div>", styles: [".accordion-button:not(.collapsed){color:none!important;background-color:#fff!important;box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed){color:none!important;background-color:var(--bs-accordion-active-bg);box-shadow:none!important}.billingcard{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff}.heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600}.subheading{color:var(--Gray-900, #101828);font-size:16px;font-weight:400;line-height:24px}.sub{color:var(--Gray-900, #101828);font-size:14px;font-weight:400;line-height:20px}.pricingtext{color:var(--Gray-800, #1D2939);font-size:30px;font-weight:600;line-height:38px}.pricingspan{color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}input [type=text] [disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}input[type=text]{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-weight:400;line-height:24px}input:active [type=text],input:focus [type=text],input:focus-visible [type=text]{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.mainheading{color:var(--Black, #101828);font-size:18px;font-weight:600;line-height:28px}.trail{color:var(--Gray-500, #667085);font-size:18px;font-weight:600;line-height:28px}.daysleft{color:var(--Error-700, #B42318);text-align:center;font-size:12px;font-weight:500;line-height:18px}.subtext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.needhelp{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.billingtext{color:#000;font-size:20px;font-weight:500;line-height:30px}.billingdetails{color:var(--Gray-500, #667085);font-size:16px;font-weight:500;line-height:24px}.billingmain{color:#000;font-size:16px;font-weight:600;line-height:24px}.update{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.address{border-radius:8px;border:1px solid var(--Primary-600, #00A3FF);background:var(--Primary-600, #00A3FF);box-shadow:0 1px 2px #1018280d}.billing{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Primary-25, #F6FCFF)}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;width:fit-content}.form-check-label{color:var(--Gray-700, #344054)!important}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important;border:1px solid black;width:100%!important}.fieldwidth{width:100%!important;background-color:#fff!important}.text-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.pointer{cursor:pointer}.invoice{width:120%}.monthwidth{width:65%}.storeinput{width:10%!important;box-shadow:none!important}.storerange{width:15%!important}.discountprice{width:11%!important}.negprice{width:14%}.discountheader{width:12%}.negheader{width:16%}.bolddata{font-weight:700!important;color:var(--Gray-700, #344054)!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.table:not(.table-bordered) tbody tr:last-child{border-bottom:1px solid #EAECF0!important}hr{border:1px solid var(--Gray-300, #D0D5DD);height:1px!important}.fianlvaltext{color:var(--Gray-500, #667085);font-size:16px;font-weight:600;line-height:24px}.input-group-text{background-color:#fff!important;color:var(--Gray-400, #98A2B3);font-size:16px;font-weight:400;line-height:24px}.discountinput{width:80px!important;text-align:center;color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.radio-custom{width:20px;height:20px;background-color:#eaf8ff}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:8px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff;width:16px;height:16px}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px;border:none!important}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.form-control{display:block;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}tr{vertical-align:middle!important}.levelviewtext{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:18px;border:none!important;font-weight:600;line-height:28px;padding-left:0!important}.subscribedtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:45px!important}.badge-light-grey{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:4px 12px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.daysleft{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:24px;font-style:normal;font-weight:500;line-height:32px}.btn-danger{border-radius:8px;border:1px solid var(--Error-600, #D92D20);background:var(--Error-600, #D92D20);box-shadow:0 1px 2px #1018280d}.subtextbold{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:700;line-height:18px}.toastcard{border-radius:4px;border-left:2px solid #00A3FF;background:#f5f8fa;box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 12px 6px 16px;align-items:center;gap:16px;align-self:stretch}.toasttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.billingupdate{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054);font-family:Inter;font-size:12px;font-weight:600;line-height:18px;text-transform:capitalize}.pricingtab{width:115%}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$3.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$3.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$3.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$3.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i3$1.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "component", type: MultidropdownComponent, selector: "lib-multidropdown", inputs: ["text"] }] });
1663
1664
  }
1664
1665
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaymentsSubscriptionComponent, decorators: [{
1665
1666
  type: Component,
1666
1667
  args: [{ selector: 'lib-payments-subscription', template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion [closeOthers]=\"true\">\r\n <!-- Billing & subscription start -->\r\n <div class=\"card\" ngbAccordionItem [collapsed]=\"openaccordian\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>Billing & Subscription<div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <!--begin::plan details Card-->\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"toastcard col-md-12\">\r\n <div class=\"d-flex align-items-center justify-content-end\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\"\r\n alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Kind Reminder: You have a reached your due\r\n limit ,To continue enjoying our services, please renew your subscription\r\n by making the payment. Thank you for your cooperation</span>\r\n <span><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Pay Now\r\n </span></a></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-column mt-6\">\r\n <div class=\"d-flex align-items-center justify-content-between border-val mb-2\">\r\n Current Plan Info<span class=\"badge-light-grey ms-2\">Standard Pricing</span>\r\n </div>\r\n <div class=\"d-flex align-items-center pricingtext my-2\">\r\n \u20B9 799<span\r\n class=\"pricingspan ms-2\">Store/{{clientinfo?.clientDetails?.planDetails?.subscriptionPeriod\r\n || '--'}}</span>\r\n </div>\r\n <hr>\r\n <div class=\"d-flex justify-content-between\">\r\n\r\n\r\n <div class=\"d-flex justify-content-start flex-column\">\r\n <div class=\" heading mb-3\">\r\n {{clientinfo?.clientDetails?.planDetails?.subscriptionType || '--'}}\r\n plan - {{clientinfo?.storeCount || '--'}}\r\n <span class=\"subheading ms-2\"> store\r\n onboarded</span>\r\n <span class=\"badge badge-light-warning ms-2\">Tango Sop\r\n <img class=\"ms-2\"\r\n src=\"./assets/tango/custompopup-Icons/clockexpiry-icon.svg\"\r\n alt=\"\"> </span>\r\n </div>\r\n <span class=\"sub d-block\">Cameras : 1000 | Avg sq.ft : 500 -1000 sq.ft |\r\n Products : Tango Traffic , Tango Zone </span>\r\n </div>\r\n <div class=\" d-flex align-items-end me-3\">\r\n <a type=\"submit\" (click)=\"needhelp()\"\r\n class=\"btn-outline btn needhelp me-4\"><span class=\"me-2\"><svg\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1965_2301)\">\r\n <path\r\n d=\"M7.57533 7.50033C7.77125 6.94338 8.15795 6.47375 8.66695 6.1746C9.17596 5.87546 9.77441 5.76611 10.3563 5.86592C10.9382 5.96573 11.466 6.26826 11.8462 6.71993C12.2264 7.1716 12.4345 7.74326 12.4337 8.33366C12.4337 10.0003 9.93366 10.8337 9.93366 10.8337M10.0003 14.167H10.0087M18.3337 10.0003C18.3337 14.6027 14.6027 18.3337 10.0003 18.3337C5.39795 18.3337 1.66699 14.6027 1.66699 10.0003C1.66699 5.39795 5.39795 1.66699 10.0003 1.66699C14.6027 1.66699 18.3337 5.39795 18.3337 10.0003Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1965_2301\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span><span class=\"mt-2\"> Need Help</span></a><a\r\n (click)=\"upgradeplan()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Upgrade Plan\r\n </span></a>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <!-- <div class=\"d-flex align-items-center heading mb-3\">\r\n {{clientinfo?.clientDetails?.planDetails?.subscriptionType || '--'}} plan - {{clientinfo?.storeCount || '--'}}\r\n <span class=\"subheading ms-2\"> store\r\n onboarded</span>\r\n <span class=\"badge badge-light-warning ms-2\">Tango Sop\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/expiry-icon.svg\"\r\n alt=\"\"> </span>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-8 sub pe-7\">Cameras : 1000 | Avg sq.ft : 500 -1000 sq.ft | Products : Tango Traffic , Tango Zone \r\n </div>\r\n <div class=\"col-lg-4\">\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end\"><a type=\"submit\"\r\n (click)=\"needhelp()\" class=\"btn-outline btn needhelp me-4\"><span\r\n class=\"me-2\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1965_2301)\">\r\n <path\r\n d=\"M7.57533 7.50033C7.77125 6.94338 8.15795 6.47375 8.66695 6.1746C9.17596 5.87546 9.77441 5.76611 10.3563 5.86592C10.9382 5.96573 11.466 6.26826 11.8462 6.71993C12.2264 7.1716 12.4345 7.74326 12.4337 8.33366C12.4337 10.0003 9.93366 10.8337 9.93366 10.8337M10.0003 14.167H10.0087M18.3337 10.0003C18.3337 14.6027 14.6027 18.3337 10.0003 18.3337C5.39795 18.3337 1.66699 14.6027 1.66699 10.0003C1.66699 5.39795 5.39795 1.66699 10.0003 1.66699C14.6027 1.66699 18.3337 5.39795 18.3337 10.0003Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1965_2301\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span><span class=\"mt-2\"> Need Help</span></a><a\r\n (click)=\"upgradeplan()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Upgrade Plan\r\n </span></a></div>\r\n </div>\r\n\r\n </div> -->\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!--end::plan details Card-->\r\n\r\n\r\n <div class=\"row gx-4 mt-4\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-7 \">\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div class=\"d-flex align-items-center billingtext mb-8\">\r\n Bank Details\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Payment Type</div>\r\n <div class=\"billingmain\">{{clientinfo?.bankDetails?.paymentType ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Account No </div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.accNo || '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">IFSC Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.IFSCCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center mt-4\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">SWIFT Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.swiftCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Branch </div>\r\n <div class=\"billingmain\">{{clientinfo?.bankDetails?.branch || '--'}}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Bank details Card-->\r\n\r\n\r\n <div class=\"col-xl-5 \">\r\n <!-- Billing Information start -->\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between billingtext mb-5\">\r\n Billing\r\n <a type=\"submit\" (click)=\"update()\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"><span class=\"mt-2\">\r\n Update</span></a>\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center\">\r\n\r\n <div class=\"billingdetails\">Next Billing Date</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.clientDetails?.billingDetails?.billingdate || '--'}}\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center mt-6\">\r\n <div class=\"billingdetails\">Billing Address</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.clientDetails?.billingDetails?.billingAddress ||\r\n '--'}}\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Billing Information End -->\r\n\r\n <!-- Add Billing start -->\r\n <!-- <div class=\" billing h-xl-100 w-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"modal-content align-items-center mt-2\">\r\n <div class=\"d-flex\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/addbilling_icon.svg\"\r\n alt=\"\"></div>\r\n\r\n </div>\r\n <div class=\"heading mt-4 ms-1\">Add billing address</div>\r\n <div class=\"d-flex justify-content-center mt-8 w-100\">\r\n <button type=\"button\" tabindex=\"0\" (click)=\"update()\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted address w-100\"\r\n style=\"white-space: nowrap;\"><span class=\"submit\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0003 4.16675V15.8334M4.16699 10.0001H15.8337\"\r\n stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> New Address </button>\r\n </div>\r\n\r\n </div>\r\n </div> -->\r\n <!-- Add Billing end -->\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Billing & subscription End -->\r\n\r\n <!--subscription Config start -->\r\n <div class=\"card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>Subscription Config <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n\r\n <ng-template>\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap mx-5 pt-4\">\r\n <div class=\"d-flex flex-column\">\r\n <!-- subscription info header start -->\r\n <div class=\"d-flex justify-content-between\">\r\n\r\n <div *ngIf=\"showNavGroup\" class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'subscription'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"subscription\" (click)=\"selectPlan('subscription')\">\r\n Subscription\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'pricing'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"pricing\" (click)=\"selectPlan('pricing')\">\r\n Pricing\r\n </button>\r\n </div>\r\n <!-- \r\n <div *ngIf=\"plan == 'pricing'\" class=\"d-flex mt-2\" style=\"text-align: end;\">\r\n <div class=\"input-group\">\r\n <span class=\"input-group-text\" id=\"basic-addon1\">Discount %</span>\r\n <input type=\"text\" class=\"form-control discountinput\"\r\n aria-label=\"Username\" aria-describedby=\"basic-addon1\">\r\n </div>\r\n </div> -->\r\n </div>\r\n <!-- subscription info header end -->\r\n\r\n <!-- subscription tab starts -->\r\n <div *ngIf=\"plan == 'subscription'\">\r\n <!-- client request card start -->\r\n <div class=\"row gx-4 mt-4\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-6\">\r\n <!-- Billing Information start -->\r\n <div\r\n class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap mb-6 px-6\">\r\n <div class=\"d-flex flex-column mt-10\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n Tango SOP <span\r\n class=\"badge-light-grey ms-2\">Premium</span>\r\n </div>\r\n <div class=\"subtext\">Kindly make necessary action for trial\r\n request or skip product to subscription list</div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-9\"><a (click)=\"skiptrail()\" type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span\r\n class=\"mt-6\">Skip Trail</span></a><a (click)=\"approvetrail()\"\r\n type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Approve\r\n Trail\r\n </span></a></div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <!--end::Bank details Card-->\r\n\r\n <div class=\"col-xl-6\">\r\n <!-- Billing Information start -->\r\n <div\r\n class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap mb-6 px-6\">\r\n <div class=\"d-flex flex-column mt-10\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n Tango SOP <span\r\n class=\"badge-light-grey ms-2\">Premium</span>\r\n </div>\r\n <div class=\"subtext\">Current Plan Info</div>\r\n <div class=\"row mt-7\">\r\n <div class=\"col-lg-8 d-flex\">\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"94\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <!-- Background circle -->\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\"></circle>\r\n <!-- Foreground circle -->\r\n <circle id=\"progress-circle\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#007bff\" stroke-width=\"8\" stroke-dasharray=\"251.2\" stroke-dashoffset=\"62.8\"></circle>\r\n <!-- Text displaying percentage -->\r\n <text id=\"percentage-text\" x=\"50\" y=\"54\" class=\"producttext\" text-anchor=\"middle\" fill=\"#333333\">40%</text>\r\n </svg></div>\r\n <div\r\n class=\"align-items-start justify-content-between daysleft ms-6 mt-3\">\r\n 12 Days Left\r\n <div class=\"align-items-start trail mt-2 me-14\">Free trial</div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-lg-4 mt-6\">\r\n <script type=\"module\">\r\n updateCircleChart({ percentageChange: 30 });\r\n </script>\r\n\r\n <div class=\"position-relative\">\r\n <div (click)=\"producttrailDropdown($event)\"\r\n > <span class=\"justify-content-end cursor-pointer ms-20\"><svg width=\"60\"\r\n height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_5221_60143)\">\r\n <rect x=\"2\" y=\"1\" width=\"56\" height=\"56\"\r\n rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"55\"\r\n height=\"55\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <g clip-path=\"url(#clip0_5221_60143)\">\r\n <path\r\n d=\"M30 32C31.6569 32 33 30.6569 33 29C33 27.3431 31.6569 26 30 26C28.3431 26 27 27.3431 27 29C27 30.6569 28.3431 32 30 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M37.4 32C37.2669 32.3016 37.2272 32.6362 37.286 32.9606C37.3448 33.285 37.4995 33.5843 37.73 33.82L37.79 33.88C37.976 34.0657 38.1235 34.2863 38.2241 34.5291C38.3248 34.7719 38.3766 35.0322 38.3766 35.295C38.3766 35.5578 38.3248 35.8181 38.2241 36.0609C38.1235 36.3037 37.976 36.5243 37.79 36.71C37.6043 36.896 37.3837 37.0435 37.1409 37.1441C36.8981 37.2448 36.6378 37.2966 36.375 37.2966C36.1122 37.2966 35.8519 37.2448 35.6091 37.1441C35.3663 37.0435 35.1457 36.896 34.96 36.71L34.9 36.65C34.6643 36.4195 34.365 36.2648 34.0406 36.206C33.7162 36.1472 33.3816 36.1869 33.08 36.32C32.7842 36.4468 32.532 36.6572 32.3543 36.9255C32.1766 37.1938 32.0813 37.5082 32.08 37.83V38C32.08 38.5304 31.8693 39.0391 31.4942 39.4142C31.1191 39.7893 30.6104 40 30.08 40C29.5496 40 29.0409 39.7893 28.6658 39.4142C28.2907 39.0391 28.08 38.5304 28.08 38V37.91C28.0723 37.579 27.9651 37.258 27.7725 36.9887C27.5799 36.7194 27.3107 36.5143 27 36.4C26.6984 36.2669 26.3638 36.2272 26.0394 36.286C25.715 36.3448 25.4157 36.4995 25.18 36.73L25.12 36.79C24.9343 36.976 24.7137 37.1235 24.4709 37.2241C24.2281 37.3248 23.9678 37.3766 23.705 37.3766C23.4422 37.3766 23.1819 37.3248 22.9391 37.2241C22.6963 37.1235 22.4757 36.976 22.29 36.79C22.104 36.6043 21.9565 36.3837 21.8559 36.1409C21.7552 35.8981 21.7034 35.6378 21.7034 35.375C21.7034 35.1122 21.7552 34.8519 21.8559 34.6091C21.9565 34.3663 22.104 34.1457 22.29 33.96L22.35 33.9C22.5805 33.6643 22.7352 33.365 22.794 33.0406C22.8528 32.7162 22.8131 32.3816 22.68 32.08C22.5532 31.7842 22.3428 31.532 22.0745 31.3543C21.8062 31.1766 21.4918 31.0813 21.17 31.08H21C20.4696 31.08 19.9609 30.8693 19.5858 30.4942C19.2107 30.1191 19 29.6104 19 29.08C19 28.5496 19.2107 28.0409 19.5858 27.6658C19.9609 27.2907 20.4696 27.08 21 27.08H21.09C21.421 27.0723 21.742 26.9651 22.0113 26.7725C22.2806 26.5799 22.4857 26.3107 22.6 26C22.7331 25.6984 22.7728 25.3638 22.714 25.0394C22.6552 24.715 22.5005 24.4157 22.27 24.18L22.21 24.12C22.024 23.9343 21.8765 23.7137 21.7759 23.4709C21.6752 23.2281 21.6234 22.9678 21.6234 22.705C21.6234 22.4422 21.6752 22.1819 21.7759 21.9391C21.8765 21.6963 22.024 21.4757 22.21 21.29C22.3957 21.104 22.6163 20.9565 22.8591 20.8559C23.1019 20.7552 23.3622 20.7034 23.625 20.7034C23.8878 20.7034 24.1481 20.7552 24.3909 20.8559C24.6337 20.9565 24.8543 21.104 25.04 21.29L25.1 21.35C25.3357 21.5805 25.635 21.7352 25.9594 21.794C26.2838 21.8528 26.6184 21.8131 26.92 21.68H27C27.2958 21.5532 27.548 21.3428 27.7257 21.0745C27.9034 20.8062 27.9987 20.4918 28 20.17V20C28 19.4696 28.2107 18.9609 28.5858 18.5858C28.9609 18.2107 29.4696 18 30 18C30.5304 18 31.0391 18.2107 31.4142 18.5858C31.7893 18.9609 32 19.4696 32 20V20.09C32.0013 20.4118 32.0966 20.7262 32.2743 20.9945C32.452 21.2628 32.7042 21.4732 33 21.6C33.3016 21.7331 33.6362 21.7728 33.9606 21.714C34.285 21.6552 34.5843 21.5005 34.82 21.27L34.88 21.21C35.0657 21.024 35.2863 20.8765 35.5291 20.7759C35.7719 20.6752 36.0322 20.6234 36.295 20.6234C36.5578 20.6234 36.8181 20.6752 37.0609 20.7759C37.3037 20.8765 37.5243 21.024 37.71 21.21C37.896 21.3957 38.0435 21.6163 38.1441 21.8591C38.2448 22.1019 38.2966 22.3622 38.2966 22.625C38.2966 22.8878 38.2448 23.1481 38.1441 23.3909C38.0435 23.6337 37.896 23.8543 37.71 24.04L37.65 24.1C37.4195 24.3357 37.2648 24.635 37.206 24.9594C37.1472 25.2838 37.1869 25.6184 37.32 25.92V26C37.4468 26.2958 37.6572 26.548 37.9255 26.7257C38.1938 26.9034 38.5082 26.9987 38.83 27H39C39.5304 27 40.0391 27.2107 40.4142 27.5858C40.7893 27.9609 41 28.4696 41 29C41 29.5304 40.7893 30.0391 40.4142 30.4142C40.0391 30.7893 39.5304 31 39 31H38.91C38.5882 31.0013 38.2738 31.0966 38.0055 31.2743C37.7372 31.452 37.5268 31.7042 37.4 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_5221_60143\" x=\"0\"\r\n y=\"0\" width=\"60\" height=\"60\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_5221_60143\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_5221_60143\"\r\n result=\"shape\" />\r\n </filter>\r\n <clipPath id=\"clip0_5221_60143\">\r\n <rect width=\"24\" height=\"24\"\r\n fill=\"white\"\r\n transform=\"translate(18 17)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span></div>\r\n <div *ngIf=\"producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.producttrailIssue == producttrailitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem)\">{{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row gx-4 mt-4\">\r\n <div class=\"col-xl-6\">\r\n <!-- Billing Information start -->\r\n <div\r\n class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap mb-6 px-6\">\r\n <div class=\"d-flex flex-column mt-10\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n Unsubscribe Request\r\n </div>\r\n <div class=\"subtext\">Client has requested to unsubscribe\r\n <span class=\"subtextbold\">Tango Suite</span>\r\n </div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-9\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span\r\n class=\"mt-6\">Cancel</span></a><a (click)=\"unsubscribe()\" type=\"button\"\r\n tabindex=\"0\"\r\n class=\"btn btn-danger px-4 mt-3 ng-star-inserted\"><span>Approve\r\n </span></a></div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- client request card end -->\r\n\r\n <!-- level view dropdown start -->\r\n <div *ngIf=\"sublevelview\"\r\n class=\"d-flex justify-content-between heading mt-6\">\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\"\r\n (click)=\"viewplanDropdown($event)\"\r\n aria-label=\"Default select example\">{{viewplanIssue}}</div>\r\n <div *ngIf=\"viewplandropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let viewplanitem of viewplantype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.viewplanIssue == viewplanitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"viewplanItem(viewplanitem)\">{{viewplanitem}}\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"text-sub\">Based on Current Subscribed Product</div>\r\n </div>\r\n\r\n\r\n <!-- <div>\r\n <select class=\"form-select form-select-lg levelviewtext\"\r\n aria-label=\".form-select-lg example\"\r\n (change)=\"levelviewPlan($event)\">\r\n <option\r\n [ngClass]=\"subscriptionplan === 'productlevelview'? 'activePlanBtn':'inactivePlanBtn'\"\r\n value=\"productlevelview\">Product Level View</option>\r\n <option\r\n [ngClass]=\"subscriptionplan === 'storelevelview'? 'activePlanBtn':'inactivePlanBtn'\"\r\n value=\"storelevelview\">Store Level View</option>\r\n </select>\r\n <div class=\"text-sub\">Based on Current Subscribed Product</div>\r\n\r\n </div> -->\r\n <!-- level view dropdown end -->\r\n\r\n <!-- subscription config toolbar start -->\r\n <div class=\"card-toolbar\">\r\n <div *ngIf=\"plan == 'subscription' && viewplanIssue == 'Product Level View'\"\r\n class=\" d-flex justify-content-end mt-6\">\r\n <lib-multidropdown text=\"Add Products\"></lib-multidropdown>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar mt-3\"\r\n *ngIf=\"viewplanIssue == 'Store Level View' && plan == 'subscription'\">\r\n <div class=\"d-flex justify-content-end\">\r\n <div class=\"d-flex align-items-end position-relative my-1\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute mb-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\"\r\n width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n <lib-filters class=\"me-2\"\r\n [dataObject]=\"dataObject\"></lib-filters>\r\n <lib-multidropdown text=\"Add Products\"></lib-multidropdown>\r\n <!-- (click)=\"creditnote()\" -->\r\n\r\n\r\n <!-- <button type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap me-4\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\"\r\n height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span>Add Products</span> </button> -->\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config toolbar end -->\r\n </div>\r\n\r\n <!-- product subscription plan start -->\r\n <div *ngIf=\"viewplanIssue == 'Product Level View'\">\r\n <div class=\"card-body p-0 mt-4\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <!-- <th>Trail Days Left</th> -->\r\n <th>No of Stores</th>\r\n <th>Cost Per Store</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"table-title subscribedtext\">Tango\r\n Traffic</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$1500</div>\r\n </td>\r\n\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title subscribedtext\">Tango\r\n Zone\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$1500</div>\r\n </td>\r\n\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title subscribedtext\">Priority\r\n Support</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$1500</div>\r\n </td>\r\n\r\n\r\n </tr>\r\n <!-- <tr>\r\n <td>\r\n <div\r\n class=\"form-check form-switch d-flex justify-content-between\">\r\n <div><input type=\"checkbox\" role=\"switch\"\r\n id=\"livestore\" checked=\"\"\r\n ng-reflect-name=\"livestore\"\r\n class=\"form-check-input\"><label\r\n for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">Priority\r\n Support\r\n\r\n </label></div>\r\n </div>\r\n\r\n </td>\r\n <td>\r\n \r\n <div class=\"w-lg-50 position-relative d-flex\">\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\"\r\n (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16699 10H15.8337\"\r\n stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\"\r\n style=\"text-align: center;\"\r\n value=\"{{count}}\" placeholder=\"\" />\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span\r\n class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\" height=\"16\"\r\n viewBox=\"0 0 17 16\" fill=\"none\">\r\n <path\r\n d=\"M8.49967 3.33301V12.6663M3.83301 7.99967H13.1663\"\r\n stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">300</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-warning \">Trail\r\n Requested</span>\r\n </td>\r\n\r\n\r\n </tr> -->\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product subscription plan end -->\r\n\r\n <!-- store subscription plan start -->\r\n <div *ngIf=\"viewplanIssue == 'Store Level View'\">\r\n <div class=\"card-body p-0 mt-6\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"d-flex\">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <label class=\"form-check-label\"\r\n for=\"flexCheckDefault\">\r\n <span>Store Info</span>\r\n </label>\r\n </div>\r\n </th>\r\n <th>Location</th>\r\n <th>Group Name</th>\r\n <th>Products</th>\r\n <th>Actions</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex \">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n\r\n <div>\r\n\r\n\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex\">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex \">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex \">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"d-flex\">\r\n <input class=\"storeinput me-4\"\r\n type=\"checkbox\" value=\"\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>LKST1567</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n 11-102r</span>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Nungambakkam, </div>\r\n <div class=\"table-sub\">Chennai, Tamil Nadu</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Tamilnadu</div>\r\n\r\n </td>\r\n\r\n <td><span\r\n class=\"badge badge-light-primary me-1\">Traffic</span>\r\n </td>\r\n <td>\r\n <lib-multidropdown></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div class=\"mb-4\">\r\n <lib-pagination></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- store subscription plan end -->\r\n </div>\r\n <!-- subscription tab starts -->\r\n\r\n <!--pricing tab start -->\r\n <div *ngIf=\"plan == 'pricing'\">\r\n <div class=\"d-flex justify-content-between py-6\">\r\n <div class=\" levelviewtext mt-4\">\r\n Pricing Table<br><span class=\"text-sub\">Based on Product &\r\n stores</span> </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"justify-content-end\">\r\n <div class=\"producttext\">Switch to</div>\r\n <div *ngIf=\"PricingshowNav\"\r\n class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"pricingplan === 'standardprice'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"standardprice\"\r\n (click)=\"selectPricePlan('standardprice')\">\r\n Standard Price\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"pricingplan === 'stepprice'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"stepprice\"\r\n (click)=\"selectPricePlan('stepprice')\">\r\n Step Price\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricingplan == 'stepprice'\" class=\"d-flex justify-content-end mb-8\">\r\n <button (click)=\"addstepprice('add')\" type=\"button\" class=\"btn-outline btn needhelp text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Add Step</span> </button>\r\n </div>\r\n\r\n <div class=\"card-body p-0 mt-4\">\r\n <div *ngIf=\"pricingplan == 'standardprice'\" class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th class=\"discountheader\">Discount %</th>\r\n <th class=\"negheader\">Negotiated Price</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">$600</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">$300</div>\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">$300</div>\r\n </th>\r\n <th></th>\r\n\r\n <th>\r\n <div class=\"table-title bolddata\">$60000</div>\r\n </th>\r\n\r\n </tr>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n <div *ngIf=\"pricingplan == 'stepprice'\" class=\"table-responsive\">\r\n <table class=\"table bottom-border pricingtab\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th>Discount %</th>\r\n <th>Negotiated Price</th>\r\n <th>Store Range</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n <td>\r\n <div class=\"cursor-pointer table-title d-flex\"><span (click)=\"addstepprice('delete')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span (click)=\"addstepprice('edit')\" class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic<span\r\n class=\"ms-4\"><img\r\n src=\"./assets/tango/custompopup-Icons/expiry-icon.svg\"\r\n alt=\"\"></span></div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Zone</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"producttext\">Tango Traffic</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">$200</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"></div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">100</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">$ 30000</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">$600</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\">35.9%</div>\r\n </th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th>\r\n <div class=\"table-title bolddata\">$ 60000</div>\r\n </th>\r\n <th></th>\r\n\r\n </tr>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n <!-- <div class=\"ms-15 me-15\">\r\n <hr>\r\n </div> -->\r\n\r\n <div class=\"card-body pt-14\">\r\n <div class=\"d-flex flex-stack\">\r\n <div class=\"fianlvaltext me-2\">Actual Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">$ 100000</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Discount</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">40% (- $ 40000)</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Negotiated Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">$ 60000</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Tax</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">18% GST</span>\r\n </div>\r\n </div>\r\n <hr>\r\n\r\n <div class=\"d-flex flex-stack py-2\">\r\n <div class=\"fianlvaltext me-2\">Final Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">$ 49200</span>\r\n </div>\r\n </div>\r\n\r\n <hr>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Save\r\n </span></a></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- pricing tab plan end -->\r\n\r\n\r\n\r\n <!-- submit plan start -->\r\n <div *ngIf=\"plan == 'storesubscription'\" class=\"row\">\r\n <div class=\"col-lg-8\">\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Apply\r\n Changes\r\n </span></a></div>\r\n </div>\r\n\r\n </div>\r\n <!-- submit plan end -->\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product info end -->\r\n\r\n <!-- payment invoice start -->\r\n <div class=\"col-xl-12 my-4 billingcard\">\r\n <div class=\"d-flex justify-content-between ps-4 pt-6\">\r\n <!--begin::Title-->\r\n <h3 class=\"align-items-start flex-column\">\r\n <span class=\"heading mb-2\">Payment and Invoice</span>\r\n </h3>\r\n <!--end::Title-->\r\n\r\n <!--begin::Toolbar-->\r\n <div class=\"card-toolbar mb-2\">\r\n <button type=\"submit\"\r\n class=\"btn-outline btn align-items-end needhelp me-4\"><span\r\n class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n <!--end::Toolbar-->\r\n </div>\r\n <!-- payment invoice form start -->\r\n <div class=\"d-flex flex-column row fv-row fv-plugins-icon-container px-4\">\r\n <form [formGroup]=\"paymentinvoiceform\" (ngSubmit)=\"Submit()\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Enable Pro-Rate\r\n for Charges</label>\r\n <div class=\"d-flex mt-3\">\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'fixedpricing')\">\r\n <input\r\n [ngClass]=\"select ==='fixedpricing' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\"radio-custom cursor-pointer\" type=\"radio\"\r\n name=\"inlineRadioOptions\" id=\"inlineRadio1\"\r\n value=\"fixedpricing\" checked>\r\n <label\r\n class=\"form-check-label radio-custom-label mx-3 headingtext cursor-pointer\"\r\n for=\"inlineRadio1\">Before 15th of Month</label>\r\n </div>\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'steppricing')\">\r\n <input\r\n [ngClass]=\"select ==='steppricing' ? 'radio-custom ms-0' :'text-muted '\"\r\n class=\"radio-custom cursor-pointer\" type=\"radio\"\r\n name=\"inlineRadioOptions\" id=\"inlineRadio1\"\r\n value=\"steppricing\">\r\n <label\r\n class=\"form-check-label headingtext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">After 15th of Month</label>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Payment\r\n Cycle</label>\r\n\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymentcycle\"\r\n (click)=\"openDropdown($event)\"\r\n aria-label=\"Default select example\">{{selectedIssue}}</div>\r\n <div *ngIf=\"dropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let item of dropdownItems\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.selectedIssue == item ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"selectItem(item)\">{{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"generateinvoice\" class=\"headingtext mb-2\">Generate\r\n Invoice To <span> <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let domain of allowedDomains; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{domain}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"removeChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\"\r\n formControlName=\"generateinvoice\"\r\n (keydown)=\"onKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"generateinvoiceon\" class=\"headingtext mb-2\">Generate\r\n Invoice\r\n On\r\n </label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"generateinvoiceon\"\r\n (click)=\"invoiceDropdown($event)\"\r\n aria-label=\"Default select example\">{{invoiceonIssue}}</div>\r\n <div *ngIf=\"invoicedropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let invoiceitem of generateinvoiceon\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.invoiceonIssue == invoiceitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"invoiceItem(invoiceitem)\">{{invoiceitem}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymenttype\" class=\"headingtext mb-2\">Payment\r\n Type</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymenttype\"\r\n (click)=\"paymenttypeDropdown($event)\"\r\n aria-label=\"Default select example\">{{paymentIssue}}</div>\r\n <div *ngIf=\"paymenttypedropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let paymentitem of paymenttype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.paymentIssue == paymentitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"paymentItem(paymentitem)\">{{paymentitem}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"currency\" class=\"headingtext mb-2\">Currency</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"currency\"\r\n (click)=\"currencyDropdown($event)\"\r\n aria-label=\"Default select example\">{{currencyIssue}}</div>\r\n <div *ngIf=\"currencydropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let currencyitem of currencytype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.currencyIssue == currencyitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"currencyItem(currencyitem)\">\r\n {{currencyitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"sendpayment\" class=\"headingtext mb-2\">Send Payment\r\n Agreement<span class=\"ms-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let domain of paymentallowedDomains; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{domain}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"sendpaymentremoveChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\"\r\n formControlName=\"sendpayment\"\r\n (keydown)=\"sendpaymentonKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"extendpayment\" class=\" headingtext mb-2\">Extend Payment\r\n Period Days </label>\r\n <div class=\"w-lg-100 position-relative\">\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\"\r\n (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16699 10H15.8337\" stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"extendpayment\"\r\n formControlName=\"extendpayment\" style=\"text-align: center;\"\r\n value=\"{{count}}\" placeholder=\"\" />\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\"\r\n height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <path\r\n d=\"M8.49967 3.33301V12.6663M3.83301 7.99967H13.1663\"\r\n stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end my-6\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4\">Cancel</a><a type=\"button\"\r\n tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"><span>Apply\r\n Changes\r\n </span></a></div>\r\n </div>\r\n\r\n </form>\r\n </div>\r\n <!-- payment invoice form end -->\r\n </div>\r\n <!-- payment invoice end -->\r\n\r\n </ng-template>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config End -->\r\n\r\n <!--Invoices start -->\r\n <div class=\"card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>Invoices <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <div class=\"card-header\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Payment History</span>\r\n\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\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=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\"\r\n rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-4\" placeholder=\"Search\"\r\n autocomplete=\"off\" />\r\n <!-- \r\n <button type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M18.8327 2.5H2.16602L8.83268 10.3833V15.8333L12.166 17.5V10.3833L18.8327 2.5Z\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\">Last 3 Months</span> </button> -->\r\n\r\n <div class=\"me-3 monthwidth\">\r\n <div class=\"dropdown\">\r\n <select class=\"form-select \" aria-label=\"Default select example\">\r\n <option selected>Current Month</option>\r\n <option value=\"1\">Previous Month</option>\r\n <option value=\"2\">Last 3 Mon</option>\r\n\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <button (click)=\"creditnote()\" type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap me-4\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span>Credit Note</span> </button>\r\n <button type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap me-4\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\"></span> Export</button>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template>\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Invoice #</th>\r\n <th>Month</th>\r\n <th>Stores</th>\r\n <th>Products</th>\r\n <th>Amount</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <td>\r\n <div class=\"table-title-primary invoice\">Invoice #009 -Dec 20323</div>\r\n <span class=\"badge badge-light-success\">Free</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">Jan </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">173</div>\r\n\r\n </td>\r\n\r\n <td><span class=\"badge badge-light-primary\">Traffic</span></td>\r\n <td>\r\n <div class=\"table-title\">Free</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <lib-pagination></lib-pagination>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <!--Invoices end -->\r\n </div>\r\n </div>", styles: [".accordion-button:not(.collapsed){color:none!important;background-color:#fff!important;box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed){color:none!important;background-color:var(--bs-accordion-active-bg);box-shadow:none!important}.billingcard{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff}.heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600}.subheading{color:var(--Gray-900, #101828);font-size:16px;font-weight:400;line-height:24px}.sub{color:var(--Gray-900, #101828);font-size:14px;font-weight:400;line-height:20px}.pricingtext{color:var(--Gray-800, #1D2939);font-size:30px;font-weight:600;line-height:38px}.pricingspan{color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}input [type=text] [disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}input[type=text]{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-weight:400;line-height:24px}input:active [type=text],input:focus [type=text],input:focus-visible [type=text]{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.mainheading{color:var(--Black, #101828);font-size:18px;font-weight:600;line-height:28px}.trail{color:var(--Gray-500, #667085);font-size:18px;font-weight:600;line-height:28px}.daysleft{color:var(--Error-700, #B42318);text-align:center;font-size:12px;font-weight:500;line-height:18px}.subtext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.needhelp{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.billingtext{color:#000;font-size:20px;font-weight:500;line-height:30px}.billingdetails{color:var(--Gray-500, #667085);font-size:16px;font-weight:500;line-height:24px}.billingmain{color:#000;font-size:16px;font-weight:600;line-height:24px}.update{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.address{border-radius:8px;border:1px solid var(--Primary-600, #00A3FF);background:var(--Primary-600, #00A3FF);box-shadow:0 1px 2px #1018280d}.billing{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Primary-25, #F6FCFF)}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;width:fit-content}.form-check-label{color:var(--Gray-700, #344054)!important}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important;border:1px solid black;width:100%!important}.fieldwidth{width:100%!important;background-color:#fff!important}.text-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.pointer{cursor:pointer}.invoice{width:120%}.monthwidth{width:65%}.storeinput{width:10%!important;box-shadow:none!important}.storerange{width:15%!important}.discountprice{width:11%!important}.negprice{width:14%}.discountheader{width:12%}.negheader{width:16%}.bolddata{font-weight:700!important;color:var(--Gray-700, #344054)!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.table:not(.table-bordered) tbody tr:last-child{border-bottom:1px solid #EAECF0!important}hr{border:1px solid var(--Gray-300, #D0D5DD);height:1px!important}.fianlvaltext{color:var(--Gray-500, #667085);font-size:16px;font-weight:600;line-height:24px}.input-group-text{background-color:#fff!important;color:var(--Gray-400, #98A2B3);font-size:16px;font-weight:400;line-height:24px}.discountinput{width:80px!important;text-align:center;color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.radio-custom{width:20px;height:20px;background-color:#eaf8ff}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:8px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff;width:16px;height:16px}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px;border:none!important}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.form-control{display:block;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}tr{vertical-align:middle!important}.levelviewtext{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:18px;border:none!important;font-weight:600;line-height:28px;padding-left:0!important}.subscribedtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:45px!important}.badge-light-grey{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:4px 12px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.daysleft{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:24px;font-style:normal;font-weight:500;line-height:32px}.btn-danger{border-radius:8px;border:1px solid var(--Error-600, #D92D20);background:var(--Error-600, #D92D20);box-shadow:0 1px 2px #1018280d}.subtextbold{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:700;line-height:18px}.toastcard{border-radius:4px;border-left:2px solid #00A3FF;background:#f5f8fa;box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 12px 6px 16px;align-items:center;gap:16px;align-self:stretch}.toasttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.billingupdate{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054);font-family:Inter;font-size:12px;font-weight:600;line-height:18px;text-transform:capitalize}.pricingtab{width:115%}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
1667
- }], ctorParameters: () => [{ type: i1$3.NgbModal }, { type: i1$2.FormBuilder }, { type: PaymentSubscriptionService }, { type: i0.ChangeDetectorRef }, { type: i2.ToastService }] });
1668
+ }], ctorParameters: () => [{ type: i1$3.NgbModal }, { type: i1$2.FormBuilder }, { type: PaymentSubscriptionService }, { type: i0.ChangeDetectorRef }, { type: i3$1.ToastService }] });
1668
1669
 
1669
1670
  class DndDirective {
1670
1671
  fileover;
@@ -1851,13 +1852,13 @@ class AuditConfigurationComponent {
1851
1852
  });
1852
1853
  }
1853
1854
  }
1854
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuditConfigurationComponent, deps: [{ token: i1$2.FormBuilder }, { token: ClientApiService }, { token: i0.ChangeDetectorRef }, { token: i2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1855
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AuditConfigurationComponent, selector: "lib-audit-configuration", viewQueries: [{ propertyName: "bulkUploadInput", first: true, predicate: ["bulkUploadInput"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"auditConfigForm\">\r\n <div class=\"row\">\r\n <div *ngIf=\"auditConfigForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button (click)=\"auditConfigForm.disabled ? auditConfigForm.enable() : auditConfigForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!isMultiple\" class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"storeId\" class=\"form-label\">Store ID</label>\r\n <!-- <select (change)=\"onStoreChange($event)\" formControlName=\"storeId\" id=\"storeId\" class=\"form-select \"\r\n aria-label=\"Default select example\">\r\n <option *ngFor=\"let store of storeList\" [value]=\"store.storeId\">{{store.storeName}}</option>\r\n </select> -->\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [label]=\"'Stores'\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" [disabled]=\"auditConfigForm.get('storeId')?.disabled\"\r\n [selectedValues]=\"[selectedStore]\" (selected)=\"onStoreChange($event)\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"iteration\" class=\"form-label\">No of times for re-audit <span\r\n class=\"alert-required\"></span></label>\r\n <input formControlName=\"iteration\" type=\"number\" class=\"form-control disabled-input\" id=\"iteration\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"ratio\" class=\"form-label\">Mapping Percentage <span class=\"alert-required\"></span></label>\r\n <input formControlName=\"ratio\" type=\"number\" class=\"form-control disabled-input\" id=\"ratio\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"count\" class=\"form-label\">Audit Count / Store <span class=\"alert-required\"></span></label>\r\n <input formControlName=\"count\" type=\"number\" class=\"form-control disabled-input\" id=\"count\"\r\n autocomplete=\"off\">\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <div *ngIf=\"isMultiple\" class=\"row g-0\">\r\n <div class=\"col-5 mb-5 d-flex align-items-center\">\r\n <ul>\r\n <li class=\"mb-2\">\r\n 1. Use the template to upload multiple stores at once.\r\n </li>\r\n <li class=\"mb-2 d-flex\">\r\n 2. Download the template here - &nbsp; <a [href]=\"fileUploadTemplate\" class=\"d-flex\" href=\"\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n Download Template\r\n </a>\r\n </li>\r\n <li class=\"mb-2\">\r\n 3. Add your data to the Template File\r\n </li>\r\n <li class=\"mb-2\">\r\n 4. Upload it on the right for processing\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n <div class=\"col-2 d-flex justify-content-center align-items-center mb-5\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1\" height=\"76\" viewBox=\"0 0 1 76\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 2.74181e-06L1 76H0L0 2.74181e-06H1Z\"\r\n fill=\"#EAECF0\" />\r\n </svg>\r\n </div>\r\n <div class=\"col-5 mb-5\">\r\n\r\n <div class=\"drop-zone\" libDnd (fileDropped)=\"triggerBulkUploadInput()\">\r\n <svg class=\"mb-2\" width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4213_43399)\">\r\n <path\r\n d=\"M26.3335 26.3332L23.0002 22.9999M23.0002 22.9999L19.6669 26.3332M23.0002 22.9999V30.4999M29.9919 28.3249C30.8047 27.8818 31.4467 27.1806 31.8168 26.3321C32.1868 25.4835 32.2637 24.5359 32.0354 23.6388C31.807 22.7417 31.2865 21.9462 30.5558 21.3778C29.8251 20.8094 28.9259 20.5005 28.0002 20.4999H26.9502C26.698 19.5243 26.2278 18.6185 25.5752 17.8507C24.9225 17.0829 24.1042 16.4731 23.182 16.0671C22.2597 15.661 21.2573 15.4694 20.2503 15.5065C19.2433 15.5436 18.2578 15.8085 17.3679 16.2813C16.4779 16.7541 15.7068 17.4225 15.1124 18.2362C14.518 19.05 14.1158 19.9879 13.936 20.9794C13.7563 21.9709 13.8036 22.9903 14.0746 23.961C14.3455 24.9316 14.8329 25.8281 15.5002 26.5832\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4213_43399\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"mb-2\">\r\n <a (click)=\"triggerBulkUploadInput()\">Click to upload</a>&nbsp;\r\n <span class=\"t1\">or drag and drop</span>\r\n </div>\r\n <div class=\"mb-2\">the data added template file for processing.</div>\r\n <ng-container *ngIf=\"fileName\">\r\n <div class=\"mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"320\" height=\"1\" viewBox=\"0 0 320 1\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M320 1H0V0H320V1Z\" fill=\"#EAECF0\" />\r\n </svg>\r\n </div>\r\n <div class=\"mb-2 d-flex align-items-center\">\r\n <svg class=\"me-2\" width=\"37\" height=\"36\" viewBox=\"0 0 37 36\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M19.167 11.333H14.5003C14.1467 11.333 13.8076 11.4735 13.5575 11.7235C13.3075 11.9736 13.167 12.3127 13.167 12.6663V23.333C13.167 23.6866 13.3075 24.0258 13.5575 24.2758C13.8076 24.5259 14.1467 24.6663 14.5003 24.6663H22.5003C22.8539 24.6663 23.1931 24.5259 23.4431 24.2758C23.6932 24.0258 23.8337 23.6866 23.8337 23.333V15.9997M19.167 11.333L23.8337 15.9997M19.167 11.333V15.9997H23.8337\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"t3\">{{fileName}}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <input [disabled]=\"auditConfigForm.disabled\" (change)=\"onBulkInputChange($event)\" class=\"d-none\"\r\n #bulkUploadInput type=\"file\"\r\n accept=\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\">\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"auditConfigForm.enabled\">\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row align-items-start g-0 mb-2 mt-2\">\r\n <div class=\"col-5\">\r\n <hr>\r\n </div>\r\n <div class=\"col-2 text-center\">\r\n Or\r\n </div>\r\n <div class=\"col-5\">\r\n <hr>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<div class=\"switch-form-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-2\" width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M24 20V22.6667C24 23.0203 23.8595 23.3594 23.6095 23.6095C23.3594 23.8595 23.0203 24 22.6667 24H13.3333C12.9797 24 12.6406 23.8595 12.3905 23.6095C12.1405 23.3594 12 23.0203 12 22.6667V20M21.3333 15.3333L18 12M18 12L14.6667 15.3333M18 12V20\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"txt-one\">\r\n <ng-container *ngIf=\"!isMultiple\">Add single store for configuration</ng-container>\r\n <ng-container *ngIf=\"isMultiple\">Upload multiple stores for configuration</ng-container>\r\n </div>\r\n </div>\r\n <div>\r\n <button (click)=\"isMultiple = !isMultiple\" class=\"btn btn-outline\">Click Here</button>\r\n </div>\r\n\r\n\r\n</div>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}hr{opacity:.15}.switch-form-card{padding:8px 16px;border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Primary-25, #F6FCFF);display:flex;align-items:center;justify-content:space-between}.switch-form-card .txt-one{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:140%}ul{list-style:none}ul li{color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px}ul li a{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px}.drop-zone{padding:16px 24px;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);display:flex;flex-direction:column;align-items:center}.drop-zone a{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;cursor:pointer}.drop-zone .t1{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.drop-zone .t2{color:var(--Gray-500, #667085);font-size:12px;font-weight:400;line-height:18px}.drop-zone .t3{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: DndDirective, selector: "[libDnd]", outputs: ["fileDropped"] }] });
1855
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuditConfigurationComponent, deps: [{ token: i1$2.FormBuilder }, { token: ClientApiService }, { token: i0.ChangeDetectorRef }, { token: i3$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1856
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AuditConfigurationComponent, selector: "lib-audit-configuration", viewQueries: [{ propertyName: "bulkUploadInput", first: true, predicate: ["bulkUploadInput"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"auditConfigForm\">\r\n <div class=\"row\">\r\n <div *ngIf=\"auditConfigForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button (click)=\"auditConfigForm.disabled ? auditConfigForm.enable() : auditConfigForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!isMultiple\" class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"storeId\" class=\"form-label\">Store ID</label>\r\n <!-- <select (change)=\"onStoreChange($event)\" formControlName=\"storeId\" id=\"storeId\" class=\"form-select \"\r\n aria-label=\"Default select example\">\r\n <option *ngFor=\"let store of storeList\" [value]=\"store.storeId\">{{store.storeName}}</option>\r\n </select> -->\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [label]=\"'Stores'\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" [disabled]=\"auditConfigForm.get('storeId')?.disabled\"\r\n [selectedValues]=\"[selectedStore]\" (selected)=\"onStoreChange($event)\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"iteration\" class=\"form-label\">No of times for re-audit <span\r\n class=\"alert-required\"></span></label>\r\n <input formControlName=\"iteration\" type=\"number\" class=\"form-control disabled-input\" id=\"iteration\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"ratio\" class=\"form-label\">Mapping Percentage <span class=\"alert-required\"></span></label>\r\n <input formControlName=\"ratio\" type=\"number\" class=\"form-control disabled-input\" id=\"ratio\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"count\" class=\"form-label\">Audit Count / Store <span class=\"alert-required\"></span></label>\r\n <input formControlName=\"count\" type=\"number\" class=\"form-control disabled-input\" id=\"count\"\r\n autocomplete=\"off\">\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <div *ngIf=\"isMultiple\" class=\"row g-0\">\r\n <div class=\"col-5 mb-5 d-flex align-items-center\">\r\n <ul>\r\n <li class=\"mb-2\">\r\n 1. Use the template to upload multiple stores at once.\r\n </li>\r\n <li class=\"mb-2 d-flex\">\r\n 2. Download the template here - &nbsp; <a [href]=\"fileUploadTemplate\" class=\"d-flex\" href=\"\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n Download Template\r\n </a>\r\n </li>\r\n <li class=\"mb-2\">\r\n 3. Add your data to the Template File\r\n </li>\r\n <li class=\"mb-2\">\r\n 4. Upload it on the right for processing\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n <div class=\"col-2 d-flex justify-content-center align-items-center mb-5\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1\" height=\"76\" viewBox=\"0 0 1 76\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 2.74181e-06L1 76H0L0 2.74181e-06H1Z\"\r\n fill=\"#EAECF0\" />\r\n </svg>\r\n </div>\r\n <div class=\"col-5 mb-5\">\r\n\r\n <div class=\"drop-zone\" libDnd (fileDropped)=\"triggerBulkUploadInput()\">\r\n <svg class=\"mb-2\" width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4213_43399)\">\r\n <path\r\n d=\"M26.3335 26.3332L23.0002 22.9999M23.0002 22.9999L19.6669 26.3332M23.0002 22.9999V30.4999M29.9919 28.3249C30.8047 27.8818 31.4467 27.1806 31.8168 26.3321C32.1868 25.4835 32.2637 24.5359 32.0354 23.6388C31.807 22.7417 31.2865 21.9462 30.5558 21.3778C29.8251 20.8094 28.9259 20.5005 28.0002 20.4999H26.9502C26.698 19.5243 26.2278 18.6185 25.5752 17.8507C24.9225 17.0829 24.1042 16.4731 23.182 16.0671C22.2597 15.661 21.2573 15.4694 20.2503 15.5065C19.2433 15.5436 18.2578 15.8085 17.3679 16.2813C16.4779 16.7541 15.7068 17.4225 15.1124 18.2362C14.518 19.05 14.1158 19.9879 13.936 20.9794C13.7563 21.9709 13.8036 22.9903 14.0746 23.961C14.3455 24.9316 14.8329 25.8281 15.5002 26.5832\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4213_43399\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"mb-2\">\r\n <a (click)=\"triggerBulkUploadInput()\">Click to upload</a>&nbsp;\r\n <span class=\"t1\">or drag and drop</span>\r\n </div>\r\n <div class=\"mb-2\">the data added template file for processing.</div>\r\n <ng-container *ngIf=\"fileName\">\r\n <div class=\"mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"320\" height=\"1\" viewBox=\"0 0 320 1\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M320 1H0V0H320V1Z\" fill=\"#EAECF0\" />\r\n </svg>\r\n </div>\r\n <div class=\"mb-2 d-flex align-items-center\">\r\n <svg class=\"me-2\" width=\"37\" height=\"36\" viewBox=\"0 0 37 36\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M19.167 11.333H14.5003C14.1467 11.333 13.8076 11.4735 13.5575 11.7235C13.3075 11.9736 13.167 12.3127 13.167 12.6663V23.333C13.167 23.6866 13.3075 24.0258 13.5575 24.2758C13.8076 24.5259 14.1467 24.6663 14.5003 24.6663H22.5003C22.8539 24.6663 23.1931 24.5259 23.4431 24.2758C23.6932 24.0258 23.8337 23.6866 23.8337 23.333V15.9997M19.167 11.333L23.8337 15.9997M19.167 11.333V15.9997H23.8337\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"t3\">{{fileName}}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <input [disabled]=\"auditConfigForm.disabled\" (change)=\"onBulkInputChange($event)\" class=\"d-none\"\r\n #bulkUploadInput type=\"file\"\r\n accept=\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\">\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"auditConfigForm.enabled\">\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row align-items-start g-0 mb-2 mt-2\">\r\n <div class=\"col-5\">\r\n <hr>\r\n </div>\r\n <div class=\"col-2 text-center\">\r\n Or\r\n </div>\r\n <div class=\"col-5\">\r\n <hr>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<div class=\"switch-form-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-2\" width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M24 20V22.6667C24 23.0203 23.8595 23.3594 23.6095 23.6095C23.3594 23.8595 23.0203 24 22.6667 24H13.3333C12.9797 24 12.6406 23.8595 12.3905 23.6095C12.1405 23.3594 12 23.0203 12 22.6667V20M21.3333 15.3333L18 12M18 12L14.6667 15.3333M18 12V20\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"txt-one\">\r\n <ng-container *ngIf=\"!isMultiple\">Add single store for configuration</ng-container>\r\n <ng-container *ngIf=\"isMultiple\">Upload multiple stores for configuration</ng-container>\r\n </div>\r\n </div>\r\n <div>\r\n <button (click)=\"isMultiple = !isMultiple\" class=\"btn btn-outline\">Click Here</button>\r\n </div>\r\n\r\n\r\n</div>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}hr{opacity:.15}.switch-form-card{padding:8px 16px;border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Primary-25, #F6FCFF);display:flex;align-items:center;justify-content:space-between}.switch-form-card .txt-one{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:140%}ul{list-style:none}ul li{color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px}ul li a{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px}.drop-zone{padding:16px 24px;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);display:flex;flex-direction:column;align-items:center}.drop-zone a{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;cursor:pointer}.drop-zone .t1{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.drop-zone .t2{color:var(--Gray-500, #667085);font-size:12px;font-weight:400;line-height:18px}.drop-zone .t3{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: DndDirective, selector: "[libDnd]", outputs: ["fileDropped"] }] });
1856
1857
  }
1857
1858
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuditConfigurationComponent, decorators: [{
1858
1859
  type: Component,
1859
1860
  args: [{ selector: 'lib-audit-configuration', template: "<form [formGroup]=\"auditConfigForm\">\r\n <div class=\"row\">\r\n <div *ngIf=\"auditConfigForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button (click)=\"auditConfigForm.disabled ? auditConfigForm.enable() : auditConfigForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!isMultiple\" class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"storeId\" class=\"form-label\">Store ID</label>\r\n <!-- <select (change)=\"onStoreChange($event)\" formControlName=\"storeId\" id=\"storeId\" class=\"form-select \"\r\n aria-label=\"Default select example\">\r\n <option *ngFor=\"let store of storeList\" [value]=\"store.storeId\">{{store.storeName}}</option>\r\n </select> -->\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [label]=\"'Stores'\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" [disabled]=\"auditConfigForm.get('storeId')?.disabled\"\r\n [selectedValues]=\"[selectedStore]\" (selected)=\"onStoreChange($event)\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"iteration\" class=\"form-label\">No of times for re-audit <span\r\n class=\"alert-required\"></span></label>\r\n <input formControlName=\"iteration\" type=\"number\" class=\"form-control disabled-input\" id=\"iteration\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"ratio\" class=\"form-label\">Mapping Percentage <span class=\"alert-required\"></span></label>\r\n <input formControlName=\"ratio\" type=\"number\" class=\"form-control disabled-input\" id=\"ratio\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"count\" class=\"form-label\">Audit Count / Store <span class=\"alert-required\"></span></label>\r\n <input formControlName=\"count\" type=\"number\" class=\"form-control disabled-input\" id=\"count\"\r\n autocomplete=\"off\">\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <div *ngIf=\"isMultiple\" class=\"row g-0\">\r\n <div class=\"col-5 mb-5 d-flex align-items-center\">\r\n <ul>\r\n <li class=\"mb-2\">\r\n 1. Use the template to upload multiple stores at once.\r\n </li>\r\n <li class=\"mb-2 d-flex\">\r\n 2. Download the template here - &nbsp; <a [href]=\"fileUploadTemplate\" class=\"d-flex\" href=\"\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n Download Template\r\n </a>\r\n </li>\r\n <li class=\"mb-2\">\r\n 3. Add your data to the Template File\r\n </li>\r\n <li class=\"mb-2\">\r\n 4. Upload it on the right for processing\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n <div class=\"col-2 d-flex justify-content-center align-items-center mb-5\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1\" height=\"76\" viewBox=\"0 0 1 76\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 2.74181e-06L1 76H0L0 2.74181e-06H1Z\"\r\n fill=\"#EAECF0\" />\r\n </svg>\r\n </div>\r\n <div class=\"col-5 mb-5\">\r\n\r\n <div class=\"drop-zone\" libDnd (fileDropped)=\"triggerBulkUploadInput()\">\r\n <svg class=\"mb-2\" width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_4213_43399)\">\r\n <path\r\n d=\"M26.3335 26.3332L23.0002 22.9999M23.0002 22.9999L19.6669 26.3332M23.0002 22.9999V30.4999M29.9919 28.3249C30.8047 27.8818 31.4467 27.1806 31.8168 26.3321C32.1868 25.4835 32.2637 24.5359 32.0354 23.6388C31.807 22.7417 31.2865 21.9462 30.5558 21.3778C29.8251 20.8094 28.9259 20.5005 28.0002 20.4999H26.9502C26.698 19.5243 26.2278 18.6185 25.5752 17.8507C24.9225 17.0829 24.1042 16.4731 23.182 16.0671C22.2597 15.661 21.2573 15.4694 20.2503 15.5065C19.2433 15.5436 18.2578 15.8085 17.3679 16.2813C16.4779 16.7541 15.7068 17.4225 15.1124 18.2362C14.518 19.05 14.1158 19.9879 13.936 20.9794C13.7563 21.9709 13.8036 22.9903 14.0746 23.961C14.3455 24.9316 14.8329 25.8281 15.5002 26.5832\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4213_43399\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"mb-2\">\r\n <a (click)=\"triggerBulkUploadInput()\">Click to upload</a>&nbsp;\r\n <span class=\"t1\">or drag and drop</span>\r\n </div>\r\n <div class=\"mb-2\">the data added template file for processing.</div>\r\n <ng-container *ngIf=\"fileName\">\r\n <div class=\"mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"320\" height=\"1\" viewBox=\"0 0 320 1\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M320 1H0V0H320V1Z\" fill=\"#EAECF0\" />\r\n </svg>\r\n </div>\r\n <div class=\"mb-2 d-flex align-items-center\">\r\n <svg class=\"me-2\" width=\"37\" height=\"36\" viewBox=\"0 0 37 36\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M19.167 11.333H14.5003C14.1467 11.333 13.8076 11.4735 13.5575 11.7235C13.3075 11.9736 13.167 12.3127 13.167 12.6663V23.333C13.167 23.6866 13.3075 24.0258 13.5575 24.2758C13.8076 24.5259 14.1467 24.6663 14.5003 24.6663H22.5003C22.8539 24.6663 23.1931 24.5259 23.4431 24.2758C23.6932 24.0258 23.8337 23.6866 23.8337 23.333V15.9997M19.167 11.333L23.8337 15.9997M19.167 11.333V15.9997H23.8337\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"t3\">{{fileName}}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <input [disabled]=\"auditConfigForm.disabled\" (change)=\"onBulkInputChange($event)\" class=\"d-none\"\r\n #bulkUploadInput type=\"file\"\r\n accept=\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\">\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"auditConfigForm.enabled\">\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row align-items-start g-0 mb-2 mt-2\">\r\n <div class=\"col-5\">\r\n <hr>\r\n </div>\r\n <div class=\"col-2 text-center\">\r\n Or\r\n </div>\r\n <div class=\"col-5\">\r\n <hr>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<div class=\"switch-form-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-2\" width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path\r\n d=\"M24 20V22.6667C24 23.0203 23.8595 23.3594 23.6095 23.6095C23.3594 23.8595 23.0203 24 22.6667 24H13.3333C12.9797 24 12.6406 23.8595 12.3905 23.6095C12.1405 23.3594 12 23.0203 12 22.6667V20M21.3333 15.3333L18 12M18 12L14.6667 15.3333M18 12V20\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"txt-one\">\r\n <ng-container *ngIf=\"!isMultiple\">Add single store for configuration</ng-container>\r\n <ng-container *ngIf=\"isMultiple\">Upload multiple stores for configuration</ng-container>\r\n </div>\r\n </div>\r\n <div>\r\n <button (click)=\"isMultiple = !isMultiple\" class=\"btn btn-outline\">Click Here</button>\r\n </div>\r\n\r\n\r\n</div>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}hr{opacity:.15}.switch-form-card{padding:8px 16px;border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Primary-25, #F6FCFF);display:flex;align-items:center;justify-content:space-between}.switch-form-card .txt-one{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:140%}ul{list-style:none}ul li{color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px}ul li a{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px}.drop-zone{padding:16px 24px;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);display:flex;flex-direction:column;align-items:center}.drop-zone a{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;cursor:pointer}.drop-zone .t1{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.drop-zone .t2{color:var(--Gray-500, #667085);font-size:12px;font-weight:400;line-height:18px}.drop-zone .t3{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
1860
- }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: ClientApiService }, { type: i0.ChangeDetectorRef }, { type: i2.ToastService }], propDecorators: { bulkUploadInput: [{
1861
+ }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: ClientApiService }, { type: i0.ChangeDetectorRef }, { type: i3$1.ToastService }], propDecorators: { bulkUploadInput: [{
1861
1862
  type: ViewChild,
1862
1863
  args: ['bulkUploadInput']
1863
1864
  }] } });
@@ -1991,13 +1992,13 @@ class AddReportComponent {
1991
1992
  }
1992
1993
  });
1993
1994
  }
1994
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AddReportComponent, deps: [{ token: i1$2.FormBuilder }, { token: ClientApiService }, { token: i1$3.NgbActiveModal }, { token: i2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1995
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AddReportComponent, deps: [{ token: i1$2.FormBuilder }, { token: ClientApiService }, { token: i1$3.NgbActiveModal }, { token: i3$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1995
1996
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AddReportComponent, selector: "lib-add-report", ngImport: i0, template: "<form [formGroup]=\"addReportForm\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n <path d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <div class=\"col-12 mb-10 header\">\r\n Add Report\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <label for=\"fileName\" class=\"form-label\">File Type<span class=\"alert-required\"></span></label>\r\n <input formControlName=\"fileName\" type=\"text\" class=\"form-control disabled-input\" id=\"fileName\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <label for=\"fileType\" class=\"form-label\">File Type<span class=\"alert-required\"></span></label>\r\n <input formControlName=\"fileType\" type=\"text\" class=\"form-control disabled-input\" id=\"fileType\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Receivers Email <span class=\"alert-required\"></span></label>\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container *ngFor=\"let email of emailList; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{email}}</span>\r\n <span *ngIf=\"addReportForm.enabled\" (click)=\"removeChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <textarea rows=\"5\" formControlName=\"email\" (keydown)=\"onKeyDown($event)\"></textarea>\r\n <!-- <input style=\"min-height: 44px;\" formControlName=\"email\" (keydown)=\"onKeyDown($event)\" type=\"text\"> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mt-10\">\r\n <div class=\"row\" >\r\n <div class=\"col \">\r\n <a type=\"button\" class=\"btn btn-outline w-100 \" (click)=\"onCancel()\">Cancel</a>\r\n </div>\r\n <div class=\"col\">\r\n <a type=\"submit\" class=\"btn btn-primary w-100\" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n", styles: [":host{padding:1.5rem}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container textarea{all:unset;flex:1;min-width:50px;line-height:16px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px;height:25px}.outer-container .input-container .chip:nth-child(1){margin-left:0}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
1996
1997
  }
1997
1998
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AddReportComponent, decorators: [{
1998
1999
  type: Component,
1999
2000
  args: [{ selector: 'lib-add-report', template: "<form [formGroup]=\"addReportForm\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n <path d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <div class=\"col-12 mb-10 header\">\r\n Add Report\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <label for=\"fileName\" class=\"form-label\">File Type<span class=\"alert-required\"></span></label>\r\n <input formControlName=\"fileName\" type=\"text\" class=\"form-control disabled-input\" id=\"fileName\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <label for=\"fileType\" class=\"form-label\">File Type<span class=\"alert-required\"></span></label>\r\n <input formControlName=\"fileType\" type=\"text\" class=\"form-control disabled-input\" id=\"fileType\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Receivers Email <span class=\"alert-required\"></span></label>\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container *ngFor=\"let email of emailList; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{email}}</span>\r\n <span *ngIf=\"addReportForm.enabled\" (click)=\"removeChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <textarea rows=\"5\" formControlName=\"email\" (keydown)=\"onKeyDown($event)\"></textarea>\r\n <!-- <input style=\"min-height: 44px;\" formControlName=\"email\" (keydown)=\"onKeyDown($event)\" type=\"text\"> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mt-10\">\r\n <div class=\"row\" >\r\n <div class=\"col \">\r\n <a type=\"button\" class=\"btn btn-outline w-100 \" (click)=\"onCancel()\">Cancel</a>\r\n </div>\r\n <div class=\"col\">\r\n <a type=\"submit\" class=\"btn btn-primary w-100\" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n", styles: [":host{padding:1.5rem}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container textarea{all:unset;flex:1;min-width:50px;line-height:16px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px;height:25px}.outer-container .input-container .chip:nth-child(1){margin-left:0}\n"] }]
2000
- }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: ClientApiService }, { type: i1$3.NgbActiveModal }, { type: i2.ToastService }] });
2001
+ }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: ClientApiService }, { type: i1$3.NgbActiveModal }, { type: i3$1.ToastService }] });
2001
2002
 
2002
2003
  class ReportConfigurationComponent {
2003
2004
  fb;
@@ -2124,13 +2125,13 @@ class ReportConfigurationComponent {
2124
2125
  }
2125
2126
  });
2126
2127
  }
2127
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReportConfigurationComponent, deps: [{ token: i1$2.FormBuilder }, { token: ClientApiService }, { token: i1$3.NgbModal }, { token: i2.ToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2128
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ReportConfigurationComponent, selector: "lib-report-configuration", ngImport: i0, template: "<form [formGroup]=\"reportConfigurationForm\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button *ngIf=\"reportConfigurationForm.disabled\"\r\n (click)=\"reportConfigurationForm.disabled ? reportConfigurationForm.enable() : reportConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end me-5\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n <button [disabled]=\"reportConfigurationForm.disabled\" (click)=\"openAddModal()\" type=\"button\" class=\"btn btn-primary align-items-end\"><span\r\n class=\"me-2\">\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=\"M10.0003 4.16663V15.8333M4.16699 9.99996H15.8337\" stroke=\"white\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>Add Report</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Report Name <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"reportList\" [multi]=\"false\" [searchField]=\"'fileName'\"\r\n [disabled]=\"reportConfigurationForm.get('fileName')?.disabled\" [idField]=\"'_id'\"\r\n (selected)=\"onReportSelect($event)\" [selectedValues]=\"[selectedReport]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"count\" class=\"form-label\">File Type<span class=\"alert-required\"></span></label>\r\n <input formControlName=\"fileType\" type=\"text\" class=\"form-control disabled-input\" id=\"count\"\r\n autocomplete=\"off\">\r\n </div>\r\n\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Receivers Email <span class=\"alert-required\"></span></label>\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container *ngFor=\"let domain of emailList; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{domain}}</span>\r\n <span *ngIf=\"reportConfigurationForm.enabled\" (click)=\"removeChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\" formControlName=\"email\" (keydown)=\"onKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"reportConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}:host{width:100%;height:100%}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.sso-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.sso-sub{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
2128
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReportConfigurationComponent, deps: [{ token: i1$2.FormBuilder }, { token: ClientApiService }, { token: i1$3.NgbModal }, { token: i3$1.ToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2129
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ReportConfigurationComponent, selector: "lib-report-configuration", ngImport: i0, template: "<form [formGroup]=\"reportConfigurationForm\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button *ngIf=\"reportConfigurationForm.disabled\"\r\n (click)=\"reportConfigurationForm.disabled ? reportConfigurationForm.enable() : reportConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end me-5\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n <button [disabled]=\"reportConfigurationForm.disabled\" (click)=\"openAddModal()\" type=\"button\" class=\"btn btn-primary align-items-end\"><span\r\n class=\"me-2\">\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=\"M10.0003 4.16663V15.8333M4.16699 9.99996H15.8337\" stroke=\"white\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>Add Report</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Report Name <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"reportList\" [multi]=\"false\" [searchField]=\"'fileName'\"\r\n [disabled]=\"reportConfigurationForm.get('fileName')?.disabled\" [idField]=\"'_id'\"\r\n (selected)=\"onReportSelect($event)\" [selectedValues]=\"[selectedReport]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"count\" class=\"form-label\">File Type<span class=\"alert-required\"></span></label>\r\n <input formControlName=\"fileType\" type=\"text\" class=\"form-control disabled-input\" id=\"count\"\r\n autocomplete=\"off\">\r\n </div>\r\n\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Receivers Email <span class=\"alert-required\"></span></label>\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container *ngFor=\"let domain of emailList; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{domain}}</span>\r\n <span *ngIf=\"reportConfigurationForm.enabled\" (click)=\"removeChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\" formControlName=\"email\" (keydown)=\"onKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"reportConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}:host{width:100%;height:100%}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.sso-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.sso-sub{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
2129
2130
  }
2130
2131
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReportConfigurationComponent, decorators: [{
2131
2132
  type: Component,
2132
2133
  args: [{ selector: 'lib-report-configuration', template: "<form [formGroup]=\"reportConfigurationForm\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button *ngIf=\"reportConfigurationForm.disabled\"\r\n (click)=\"reportConfigurationForm.disabled ? reportConfigurationForm.enable() : reportConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end me-5\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n <button [disabled]=\"reportConfigurationForm.disabled\" (click)=\"openAddModal()\" type=\"button\" class=\"btn btn-primary align-items-end\"><span\r\n class=\"me-2\">\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=\"M10.0003 4.16663V15.8333M4.16699 9.99996H15.8337\" stroke=\"white\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>Add Report</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Report Name <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"reportList\" [multi]=\"false\" [searchField]=\"'fileName'\"\r\n [disabled]=\"reportConfigurationForm.get('fileName')?.disabled\" [idField]=\"'_id'\"\r\n (selected)=\"onReportSelect($event)\" [selectedValues]=\"[selectedReport]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"count\" class=\"form-label\">File Type<span class=\"alert-required\"></span></label>\r\n <input formControlName=\"fileType\" type=\"text\" class=\"form-control disabled-input\" id=\"count\"\r\n autocomplete=\"off\">\r\n </div>\r\n\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Receivers Email <span class=\"alert-required\"></span></label>\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container *ngFor=\"let domain of emailList; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{domain}}</span>\r\n <span *ngIf=\"reportConfigurationForm.enabled\" (click)=\"removeChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\" formControlName=\"email\" (keydown)=\"onKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"reportConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}:host{width:100%;height:100%}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.sso-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.sso-sub{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}\n"] }]
2133
- }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: ClientApiService }, { type: i1$3.NgbModal }, { type: i2.ToastService }, { type: i0.ChangeDetectorRef }] });
2134
+ }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: ClientApiService }, { type: i1$3.NgbModal }, { type: i3$1.ToastService }, { type: i0.ChangeDetectorRef }] });
2134
2135
 
2135
2136
  class UserConfigurationComponent {
2136
2137
  fb;
@@ -2231,7 +2232,7 @@ class UserConfigurationComponent {
2231
2232
  });
2232
2233
  }
2233
2234
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UserConfigurationComponent, deps: [{ token: i1$2.FormBuilder }, { token: ClientApiService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2234
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UserConfigurationComponent, selector: "lib-user-configuration", ngImport: i0, template: "<form [formGroup]=\"userConfigurationForm\">\r\n <div class=\"row\">\r\n <div *ngIf=\"userConfigurationForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button\r\n (click)=\"userConfigurationForm.disabled ? userConfigurationForm.enable() : userConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Assign CSM <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"csmUserList\" [disabled]=\"userConfigurationForm.disabled\" [multi]=\"false\" [searchField]=\"'userName'\" [idField]=\"'email'\"\r\n (selected)=\"onCsmSelect($event)\" [selectedValues]=\"[selectedCsm]\"></lib-select>\r\n </div>\r\n\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Assign Ops User <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"opsUserList\" [disabled]=\"userConfigurationForm.disabled\" [multi]=\"true\" [searchField]=\"'userName'\" [idField]=\"'email'\"\r\n (selected)=\"onOpsSelect($event)\" [selectedValues]=\"selectedOps\"></lib-select>\r\n </div>\r\n \r\n </div>\r\n\r\n <div *ngIf=\"userConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}:host{width:100%;height:100%}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.sso-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.sso-sub{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
2235
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UserConfigurationComponent, selector: "lib-user-configuration", ngImport: i0, template: "<form [formGroup]=\"userConfigurationForm\">\r\n <div class=\"row\">\r\n <div *ngIf=\"userConfigurationForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button\r\n (click)=\"userConfigurationForm.disabled ? userConfigurationForm.enable() : userConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Assign CSM <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"csmUserList\" [disabled]=\"userConfigurationForm.disabled\" [multi]=\"false\" [searchField]=\"'userName'\" [idField]=\"'email'\"\r\n (selected)=\"onCsmSelect($event)\" [selectedValues]=\"[selectedCsm]\"></lib-select>\r\n </div>\r\n\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Assign Ops User <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"opsUserList\" [disabled]=\"userConfigurationForm.disabled\" [multi]=\"true\" [searchField]=\"'userName'\" [idField]=\"'email'\"\r\n (selected)=\"onOpsSelect($event)\" [selectedValues]=\"selectedOps\"></lib-select>\r\n </div>\r\n \r\n </div>\r\n\r\n <div *ngIf=\"userConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}:host{width:100%;height:100%}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.sso-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.sso-sub{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
2235
2236
  }
2236
2237
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UserConfigurationComponent, decorators: [{
2237
2238
  type: Component,
@@ -2599,13 +2600,13 @@ class ConfigurationsComponent {
2599
2600
  }
2600
2601
  return differentEntries;
2601
2602
  }
2602
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ConfigurationsComponent, deps: [{ token: ClientApiService }, { token: i2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
2603
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ConfigurationsComponent, deps: [{ token: ClientApiService }, { token: i3$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
2603
2604
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ConfigurationsComponent, selector: "lib-configurations", ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion [closeOthers]=\"true\" [destroyOnHide]=\"true\" (show)=\"openItem()\" >\r\n <div class=\"settings-accordian-card \" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Audit Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-audit-configuration></lib-audit-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Ticket Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-ticket-configuration></lib-ticket-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Report Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-report-configuration></lib-report-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >User Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-user-configuration></lib-user-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Domain Details</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-domain-details></lib-domain-details> \r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Feature Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-feature-configuration></lib-feature-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".settings-accordian-card{border-radius:10px;background:var(#FFF)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$3.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$3.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$3.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$3.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: AuditConfigurationComponent, selector: "lib-audit-configuration" }, { kind: "component", type: TicketConfigurationComponent, selector: "lib-ticket-configuration" }, { kind: "component", type: ReportConfigurationComponent, selector: "lib-report-configuration" }, { kind: "component", type: UserConfigurationComponent, selector: "lib-user-configuration" }, { kind: "component", type: DomainDetailsComponent, selector: "lib-domain-details" }, { kind: "component", type: FeatureConfigurationComponent, selector: "lib-feature-configuration" }] });
2604
2605
  }
2605
2606
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ConfigurationsComponent, decorators: [{
2606
2607
  type: Component,
2607
2608
  args: [{ selector: 'lib-configurations', template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion [closeOthers]=\"true\" [destroyOnHide]=\"true\" (show)=\"openItem()\" >\r\n <div class=\"settings-accordian-card \" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Audit Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-audit-configuration></lib-audit-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Ticket Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-ticket-configuration></lib-ticket-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Report Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-report-configuration></lib-report-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >User Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-user-configuration></lib-user-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Domain Details</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-domain-details></lib-domain-details> \r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Feature Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-feature-configuration></lib-feature-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".settings-accordian-card{border-radius:10px;background:var(#FFF)}\n"] }]
2608
- }], ctorParameters: () => [{ type: ClientApiService }, { type: i2.ToastService }] });
2609
+ }], ctorParameters: () => [{ type: ClientApiService }, { type: i3$1.ToastService }] });
2609
2610
 
2610
2611
  class DocumentsComponent {
2611
2612
  fb;
@@ -2754,13 +2755,13 @@ class DocumentsComponent {
2754
2755
  }
2755
2756
  return formData;
2756
2757
  }
2757
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DocumentsComponent, deps: [{ token: i1$2.FormBuilder }, { token: ClientApiService }, { token: i0.ChangeDetectorRef }, { token: i2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
2758
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DocumentsComponent, deps: [{ token: i1$2.FormBuilder }, { token: ClientApiService }, { token: i0.ChangeDetectorRef }, { token: i3$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
2758
2759
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DocumentsComponent, selector: "lib-documents", viewQueries: [{ propertyName: "gstFormInput", first: true, predicate: ["gstFormInput"], descendants: true }, { propertyName: "addressProofFormInput", first: true, predicate: ["addressProofFormInput"], descendants: true }, { propertyName: "panFormInput", first: true, predicate: ["panFormInput"], descendants: true }, { propertyName: "cinFormInput", first: true, predicate: ["cinFormInput"], descendants: true }], ngImport: i0, template: "<div class=\"settings-accordian-card\">\r\n <form [formGroup]=\"documentsForm\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-between\">\r\n <div class=\"header\">Upload Your Documents</div>\r\n <button *ngIf=\"documentsForm.disabled\"\r\n (click)=\"documentsForm.disabled ? documentsForm.enable() : documentsForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"gstNumber\" class=\"form-label\">Address Proof <span class=\"alert-required\"></span></label>\r\n <div class=\"input-group \">\r\n <input readonly type=\"text\" class=\"form-control\" placeholder=\"\"\r\n aria-label=\"Example text with button addon\" aria-describedby=\"button-addon1\" id=\"gstNumber\">\r\n <button (click)=\"triggerGstInput('address')\" [disabled]=\"documentsForm.disabled\"\r\n class=\"btn btn-outline upload-btn\" type=\"button\" id=\"button-addon1\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n Upload</button>\r\n </div>\r\n <input (change)=\"onFileSelect($event, 'address')\" class=\"d-none\" #addressProofFormInput\r\n type=\"file\">\r\n <a [href]=\"clientData?.document?.addressProof?.path\" target=\"_blank\" class=\"mt-3\">\r\n <span class=\"uploaded-doc-text me-2\">Incorporate Certificate</span>\r\n </a>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"gstNumber\" class=\"form-label\">GST Number <span class=\"alert-required\"></span></label>\r\n <div class=\"input-group \">\r\n <input formControlName=\"gstNumber\" type=\"text\" class=\"form-control\" placeholder=\"\"\r\n aria-label=\"Example text with button addon\" aria-describedby=\"button-addon1\" id=\"gstNumber\">\r\n <button (click)=\"triggerGstInput('gst')\" [disabled]=\"documentsForm.disabled\"\r\n class=\"btn btn-outline upload-btn\" type=\"button\" id=\"button-addon1\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n Upload</button>\r\n </div>\r\n <input (change)=\"onFileSelect($event, 'gst')\" accept=\".pdf\" class=\"d-none\" #gstFormInput type=\"file\">\r\n <a [href]=\"clientData?.document?.gst?.path\" target=\"_blank\" class=\"mt-3\">\r\n <span class=\"uploaded-doc-text me-2\">GST Certificate</span>\r\n </a>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"gstNumber\" class=\"form-label\">Pan Number <span class=\"alert-required\"></span></label>\r\n <div class=\"input-group \">\r\n <input formControlName=\"panNumber\" type=\"text\" class=\"form-control\" placeholder=\"\"\r\n aria-label=\"Example text with button addon\" aria-describedby=\"button-addon1\" id=\"gstNumber\">\r\n <button (click)=\"triggerGstInput('pan')\" [disabled]=\"documentsForm.disabled\"\r\n class=\"btn btn-outline upload-btn\" type=\"button\" id=\"button-addon1\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n Upload</button>\r\n </div>\r\n <input (change)=\"onFileSelect($event, 'pan')\" accept=\".pdf\" class=\"d-none\" #panFormInput type=\"file\">\r\n <a [href]=\"clientData?.document?.pan?.path\" target=\"_blank\" class=\"mt-3\">\r\n <span class=\"uploaded-doc-text me-2\">PAN Certificate</span>\r\n </a>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"gstNumber\" class=\"form-label\">CIN Number <span class=\"alert-required\"></span></label>\r\n <div class=\"input-group \">\r\n <input formControlName=\"cinNumber\" type=\"text\" class=\"form-control\" placeholder=\"\"\r\n aria-label=\"Example text with button addon\" aria-describedby=\"button-addon1\" id=\"gstNumber\">\r\n <button (click)=\"triggerGstInput('cin')\" [disabled]=\"documentsForm.disabled\"\r\n class=\"btn btn-outline upload-btn\" type=\"button\" id=\"button-addon1\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n Upload</button>\r\n </div>\r\n <input (change)=\"onFileSelect($event, 'cin')\" accept=\".pdf\" class=\"d-none\" #cinFormInput type=\"file\">\r\n <a [href]=\"clientData?.document?.cin?.path\" target=\"_blank\" class=\"mt-3\">\r\n <span class=\"uploaded-doc-text me-2\">CIN Certificate</span>\r\n </a>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"invoiceAuthorityName\" class=\"form-label\">Contract Agreement <span\r\n class=\"alert-required\"></span></label>\r\n \r\n \r\n <div class=\"file-open-input\" >\r\n <svg class=\"l-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M3.24998 0H17.0568L24.3749 7.28977V24.375C24.3749 25.2728 23.647 26 22.75 26H3.24998C2.35296 26 1.625 25.2728 1.625 24.375V1.62498C1.625 0.727203 2.35304 0 3.24998 0Z\"\r\n fill=\"#E2574C\" />\r\n <path\r\n d=\"M24.3514 7.31187H18.6875C17.7905 7.31187 17.0625 6.58391 17.0625 5.68689V0.015625L24.3514 7.31187Z\"\r\n fill=\"#B53629\" />\r\n <path\r\n d=\"M18.2793 12.318C18.5515 12.318 18.6848 12.0808 18.6848 11.8508C18.6848 11.6127 18.5458 11.3828 18.2793 11.3828H16.7291C16.426 11.3828 16.257 11.6338 16.257 11.9109V15.7207C16.257 16.0604 16.4504 16.2489 16.712 16.2489C16.972 16.2489 17.1662 16.0604 17.1662 15.7207V14.6751H18.1039C18.3947 14.6751 18.5402 14.437 18.5402 14.2006C18.5402 13.9691 18.3947 13.739 18.1039 13.739H17.1662V12.318H18.2793ZM13.0395 11.3828H11.9052C11.5973 11.3828 11.3787 11.5941 11.3787 11.9077V15.724C11.3787 16.1132 11.6931 16.2351 11.9182 16.2351H13.1085C14.5174 16.2351 15.4477 15.308 15.4477 13.8772C15.4469 12.3643 14.5711 11.3828 13.0395 11.3828ZM13.094 15.2942H12.4025V12.3237H13.0257C13.9691 12.3237 14.3793 12.9567 14.3793 13.8301C14.3793 14.6475 13.9763 15.2942 13.094 15.2942ZM8.93882 11.3828H7.81515C7.49745 11.3828 7.32031 11.5924 7.32031 11.9109V15.7207C7.32031 16.0604 7.52342 16.2489 7.7964 16.2489C8.06937 16.2489 8.27249 16.0604 8.27249 15.7207V14.6084H8.97691C9.84627 14.6084 10.5637 13.9925 10.5637 13.0021C10.5638 12.0328 9.87158 11.3828 8.93882 11.3828ZM8.92016 13.7147H8.27257V12.2774H8.92016C9.31991 12.2774 9.57422 12.5894 9.57422 12.9964C9.57338 13.4028 9.31991 13.7147 8.92016 13.7147Z\"\r\n fill=\"white\" />\r\n </svg>\r\n <input type=\"type\" value=\"Contract Agreement.pdf\" readonly class=\"form-control\" id=\"invoiceAuthorityName\" autocomplete=\"off\">\r\n <a target=\"_blank\" class=\"r-icon\" [href]=\"clientData?.document?.contract\">\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=\"M0.833984 10C0.833984 10 4.16732 3.33337 10.0007 3.33337C15.834 3.33337 19.1673 10 19.1673 10C19.1673 10 15.834 16.6667 10.0007 16.6667C4.16732 16.6667 0.833984 10 0.833984 10Z\"\r\n stroke=\"#344054\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.0007 12.5C11.3814 12.5 12.5006 11.3808 12.5006 10C12.5006 8.61933 11.3814 7.50004 10.0007 7.50004C8.61994 7.50004 7.50065 8.61933 7.50065 10C7.50065 11.3808 8.61994 12.5 10.0007 12.5Z\"\r\n stroke=\"#344054\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </a>\r\n \r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"invoiceAuthorityName\" class=\"form-label\">T&C Agreement <span\r\n class=\"alert-required\"></span></label>\r\n <div class=\"file-open-input\" >\r\n <svg class=\"l-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M3.24998 0H17.0568L24.3749 7.28977V24.375C24.3749 25.2728 23.647 26 22.75 26H3.24998C2.35296 26 1.625 25.2728 1.625 24.375V1.62498C1.625 0.727203 2.35304 0 3.24998 0Z\"\r\n fill=\"#E2574C\" />\r\n <path\r\n d=\"M24.3514 7.31187H18.6875C17.7905 7.31187 17.0625 6.58391 17.0625 5.68689V0.015625L24.3514 7.31187Z\"\r\n fill=\"#B53629\" />\r\n <path\r\n d=\"M18.2793 12.318C18.5515 12.318 18.6848 12.0808 18.6848 11.8508C18.6848 11.6127 18.5458 11.3828 18.2793 11.3828H16.7291C16.426 11.3828 16.257 11.6338 16.257 11.9109V15.7207C16.257 16.0604 16.4504 16.2489 16.712 16.2489C16.972 16.2489 17.1662 16.0604 17.1662 15.7207V14.6751H18.1039C18.3947 14.6751 18.5402 14.437 18.5402 14.2006C18.5402 13.9691 18.3947 13.739 18.1039 13.739H17.1662V12.318H18.2793ZM13.0395 11.3828H11.9052C11.5973 11.3828 11.3787 11.5941 11.3787 11.9077V15.724C11.3787 16.1132 11.6931 16.2351 11.9182 16.2351H13.1085C14.5174 16.2351 15.4477 15.308 15.4477 13.8772C15.4469 12.3643 14.5711 11.3828 13.0395 11.3828ZM13.094 15.2942H12.4025V12.3237H13.0257C13.9691 12.3237 14.3793 12.9567 14.3793 13.8301C14.3793 14.6475 13.9763 15.2942 13.094 15.2942ZM8.93882 11.3828H7.81515C7.49745 11.3828 7.32031 11.5924 7.32031 11.9109V15.7207C7.32031 16.0604 7.52342 16.2489 7.7964 16.2489C8.06937 16.2489 8.27249 16.0604 8.27249 15.7207V14.6084H8.97691C9.84627 14.6084 10.5637 13.9925 10.5637 13.0021C10.5638 12.0328 9.87158 11.3828 8.93882 11.3828ZM8.92016 13.7147H8.27257V12.2774H8.92016C9.31991 12.2774 9.57422 12.5894 9.57422 12.9964C9.57338 13.4028 9.31991 13.7147 8.92016 13.7147Z\"\r\n fill=\"white\" />\r\n </svg>\r\n <input type=\"type\" value=\"T & C Agreement.pdf\" readonly class=\"form-control\" id=\"invoiceAuthorityName\" autocomplete=\"off\">\r\n <a target=\"_blank\" class=\"r-icon\" [href]=\"clientData?.document?.termsAndconditions\">\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=\"M0.833984 10C0.833984 10 4.16732 3.33337 10.0007 3.33337C15.834 3.33337 19.1673 10 19.1673 10C19.1673 10 15.834 16.6667 10.0007 16.6667C4.16732 16.6667 0.833984 10 0.833984 10Z\"\r\n stroke=\"#344054\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.0007 12.5C11.3814 12.5 12.5006 11.3808 12.5006 10C12.5006 8.61933 11.3814 7.50004 10.0007 7.50004C8.61994 7.50004 7.50065 8.61933 7.50065 10C7.50065 11.3808 8.61994 12.5 10.0007 12.5Z\"\r\n stroke=\"#344054\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n </a>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"documentsForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n</div>", styles: [".settings-accordian-card{border-radius:10px;background:#fff;overflow:hidden;padding:16px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}input[disabled],input[readonly],select[disabled],textarea[disabled],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.footer-seperator{border-top:1px solid #EAECF0}.upload-btn{box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-500, #667085);font-size:16px;font-weight:600}.uploaded-doc-text{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:600;text-transform:capitalize;cursor:pointer}.header{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.file-open-input{position:relative}.file-open-input input{padding-left:50px}.file-open-input input[readonly]{background-color:#fff!important}.file-open-input .l-icon{position:absolute;left:10px;top:10px}.file-open-input .r-icon{position:absolute;right:10px;top:12px}.input-group input[readonly]{background-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
2759
2760
  }
2760
2761
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DocumentsComponent, decorators: [{
2761
2762
  type: Component,
2762
2763
  args: [{ selector: 'lib-documents', template: "<div class=\"settings-accordian-card\">\r\n <form [formGroup]=\"documentsForm\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-between\">\r\n <div class=\"header\">Upload Your Documents</div>\r\n <button *ngIf=\"documentsForm.disabled\"\r\n (click)=\"documentsForm.disabled ? documentsForm.enable() : documentsForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"gstNumber\" class=\"form-label\">Address Proof <span class=\"alert-required\"></span></label>\r\n <div class=\"input-group \">\r\n <input readonly type=\"text\" class=\"form-control\" placeholder=\"\"\r\n aria-label=\"Example text with button addon\" aria-describedby=\"button-addon1\" id=\"gstNumber\">\r\n <button (click)=\"triggerGstInput('address')\" [disabled]=\"documentsForm.disabled\"\r\n class=\"btn btn-outline upload-btn\" type=\"button\" id=\"button-addon1\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n Upload</button>\r\n </div>\r\n <input (change)=\"onFileSelect($event, 'address')\" class=\"d-none\" #addressProofFormInput\r\n type=\"file\">\r\n <a [href]=\"clientData?.document?.addressProof?.path\" target=\"_blank\" class=\"mt-3\">\r\n <span class=\"uploaded-doc-text me-2\">Incorporate Certificate</span>\r\n </a>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"gstNumber\" class=\"form-label\">GST Number <span class=\"alert-required\"></span></label>\r\n <div class=\"input-group \">\r\n <input formControlName=\"gstNumber\" type=\"text\" class=\"form-control\" placeholder=\"\"\r\n aria-label=\"Example text with button addon\" aria-describedby=\"button-addon1\" id=\"gstNumber\">\r\n <button (click)=\"triggerGstInput('gst')\" [disabled]=\"documentsForm.disabled\"\r\n class=\"btn btn-outline upload-btn\" type=\"button\" id=\"button-addon1\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n Upload</button>\r\n </div>\r\n <input (change)=\"onFileSelect($event, 'gst')\" accept=\".pdf\" class=\"d-none\" #gstFormInput type=\"file\">\r\n <a [href]=\"clientData?.document?.gst?.path\" target=\"_blank\" class=\"mt-3\">\r\n <span class=\"uploaded-doc-text me-2\">GST Certificate</span>\r\n </a>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"gstNumber\" class=\"form-label\">Pan Number <span class=\"alert-required\"></span></label>\r\n <div class=\"input-group \">\r\n <input formControlName=\"panNumber\" type=\"text\" class=\"form-control\" placeholder=\"\"\r\n aria-label=\"Example text with button addon\" aria-describedby=\"button-addon1\" id=\"gstNumber\">\r\n <button (click)=\"triggerGstInput('pan')\" [disabled]=\"documentsForm.disabled\"\r\n class=\"btn btn-outline upload-btn\" type=\"button\" id=\"button-addon1\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n Upload</button>\r\n </div>\r\n <input (change)=\"onFileSelect($event, 'pan')\" accept=\".pdf\" class=\"d-none\" #panFormInput type=\"file\">\r\n <a [href]=\"clientData?.document?.pan?.path\" target=\"_blank\" class=\"mt-3\">\r\n <span class=\"uploaded-doc-text me-2\">PAN Certificate</span>\r\n </a>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"gstNumber\" class=\"form-label\">CIN Number <span class=\"alert-required\"></span></label>\r\n <div class=\"input-group \">\r\n <input formControlName=\"cinNumber\" type=\"text\" class=\"form-control\" placeholder=\"\"\r\n aria-label=\"Example text with button addon\" aria-describedby=\"button-addon1\" id=\"gstNumber\">\r\n <button (click)=\"triggerGstInput('cin')\" [disabled]=\"documentsForm.disabled\"\r\n class=\"btn btn-outline upload-btn\" type=\"button\" id=\"button-addon1\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n Upload</button>\r\n </div>\r\n <input (change)=\"onFileSelect($event, 'cin')\" accept=\".pdf\" class=\"d-none\" #cinFormInput type=\"file\">\r\n <a [href]=\"clientData?.document?.cin?.path\" target=\"_blank\" class=\"mt-3\">\r\n <span class=\"uploaded-doc-text me-2\">CIN Certificate</span>\r\n </a>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"invoiceAuthorityName\" class=\"form-label\">Contract Agreement <span\r\n class=\"alert-required\"></span></label>\r\n \r\n \r\n <div class=\"file-open-input\" >\r\n <svg class=\"l-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M3.24998 0H17.0568L24.3749 7.28977V24.375C24.3749 25.2728 23.647 26 22.75 26H3.24998C2.35296 26 1.625 25.2728 1.625 24.375V1.62498C1.625 0.727203 2.35304 0 3.24998 0Z\"\r\n fill=\"#E2574C\" />\r\n <path\r\n d=\"M24.3514 7.31187H18.6875C17.7905 7.31187 17.0625 6.58391 17.0625 5.68689V0.015625L24.3514 7.31187Z\"\r\n fill=\"#B53629\" />\r\n <path\r\n d=\"M18.2793 12.318C18.5515 12.318 18.6848 12.0808 18.6848 11.8508C18.6848 11.6127 18.5458 11.3828 18.2793 11.3828H16.7291C16.426 11.3828 16.257 11.6338 16.257 11.9109V15.7207C16.257 16.0604 16.4504 16.2489 16.712 16.2489C16.972 16.2489 17.1662 16.0604 17.1662 15.7207V14.6751H18.1039C18.3947 14.6751 18.5402 14.437 18.5402 14.2006C18.5402 13.9691 18.3947 13.739 18.1039 13.739H17.1662V12.318H18.2793ZM13.0395 11.3828H11.9052C11.5973 11.3828 11.3787 11.5941 11.3787 11.9077V15.724C11.3787 16.1132 11.6931 16.2351 11.9182 16.2351H13.1085C14.5174 16.2351 15.4477 15.308 15.4477 13.8772C15.4469 12.3643 14.5711 11.3828 13.0395 11.3828ZM13.094 15.2942H12.4025V12.3237H13.0257C13.9691 12.3237 14.3793 12.9567 14.3793 13.8301C14.3793 14.6475 13.9763 15.2942 13.094 15.2942ZM8.93882 11.3828H7.81515C7.49745 11.3828 7.32031 11.5924 7.32031 11.9109V15.7207C7.32031 16.0604 7.52342 16.2489 7.7964 16.2489C8.06937 16.2489 8.27249 16.0604 8.27249 15.7207V14.6084H8.97691C9.84627 14.6084 10.5637 13.9925 10.5637 13.0021C10.5638 12.0328 9.87158 11.3828 8.93882 11.3828ZM8.92016 13.7147H8.27257V12.2774H8.92016C9.31991 12.2774 9.57422 12.5894 9.57422 12.9964C9.57338 13.4028 9.31991 13.7147 8.92016 13.7147Z\"\r\n fill=\"white\" />\r\n </svg>\r\n <input type=\"type\" value=\"Contract Agreement.pdf\" readonly class=\"form-control\" id=\"invoiceAuthorityName\" autocomplete=\"off\">\r\n <a target=\"_blank\" class=\"r-icon\" [href]=\"clientData?.document?.contract\">\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=\"M0.833984 10C0.833984 10 4.16732 3.33337 10.0007 3.33337C15.834 3.33337 19.1673 10 19.1673 10C19.1673 10 15.834 16.6667 10.0007 16.6667C4.16732 16.6667 0.833984 10 0.833984 10Z\"\r\n stroke=\"#344054\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.0007 12.5C11.3814 12.5 12.5006 11.3808 12.5006 10C12.5006 8.61933 11.3814 7.50004 10.0007 7.50004C8.61994 7.50004 7.50065 8.61933 7.50065 10C7.50065 11.3808 8.61994 12.5 10.0007 12.5Z\"\r\n stroke=\"#344054\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </a>\r\n \r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"invoiceAuthorityName\" class=\"form-label\">T&C Agreement <span\r\n class=\"alert-required\"></span></label>\r\n <div class=\"file-open-input\" >\r\n <svg class=\"l-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M3.24998 0H17.0568L24.3749 7.28977V24.375C24.3749 25.2728 23.647 26 22.75 26H3.24998C2.35296 26 1.625 25.2728 1.625 24.375V1.62498C1.625 0.727203 2.35304 0 3.24998 0Z\"\r\n fill=\"#E2574C\" />\r\n <path\r\n d=\"M24.3514 7.31187H18.6875C17.7905 7.31187 17.0625 6.58391 17.0625 5.68689V0.015625L24.3514 7.31187Z\"\r\n fill=\"#B53629\" />\r\n <path\r\n d=\"M18.2793 12.318C18.5515 12.318 18.6848 12.0808 18.6848 11.8508C18.6848 11.6127 18.5458 11.3828 18.2793 11.3828H16.7291C16.426 11.3828 16.257 11.6338 16.257 11.9109V15.7207C16.257 16.0604 16.4504 16.2489 16.712 16.2489C16.972 16.2489 17.1662 16.0604 17.1662 15.7207V14.6751H18.1039C18.3947 14.6751 18.5402 14.437 18.5402 14.2006C18.5402 13.9691 18.3947 13.739 18.1039 13.739H17.1662V12.318H18.2793ZM13.0395 11.3828H11.9052C11.5973 11.3828 11.3787 11.5941 11.3787 11.9077V15.724C11.3787 16.1132 11.6931 16.2351 11.9182 16.2351H13.1085C14.5174 16.2351 15.4477 15.308 15.4477 13.8772C15.4469 12.3643 14.5711 11.3828 13.0395 11.3828ZM13.094 15.2942H12.4025V12.3237H13.0257C13.9691 12.3237 14.3793 12.9567 14.3793 13.8301C14.3793 14.6475 13.9763 15.2942 13.094 15.2942ZM8.93882 11.3828H7.81515C7.49745 11.3828 7.32031 11.5924 7.32031 11.9109V15.7207C7.32031 16.0604 7.52342 16.2489 7.7964 16.2489C8.06937 16.2489 8.27249 16.0604 8.27249 15.7207V14.6084H8.97691C9.84627 14.6084 10.5637 13.9925 10.5637 13.0021C10.5638 12.0328 9.87158 11.3828 8.93882 11.3828ZM8.92016 13.7147H8.27257V12.2774H8.92016C9.31991 12.2774 9.57422 12.5894 9.57422 12.9964C9.57338 13.4028 9.31991 13.7147 8.92016 13.7147Z\"\r\n fill=\"white\" />\r\n </svg>\r\n <input type=\"type\" value=\"T & C Agreement.pdf\" readonly class=\"form-control\" id=\"invoiceAuthorityName\" autocomplete=\"off\">\r\n <a target=\"_blank\" class=\"r-icon\" [href]=\"clientData?.document?.termsAndconditions\">\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=\"M0.833984 10C0.833984 10 4.16732 3.33337 10.0007 3.33337C15.834 3.33337 19.1673 10 19.1673 10C19.1673 10 15.834 16.6667 10.0007 16.6667C4.16732 16.6667 0.833984 10 0.833984 10Z\"\r\n stroke=\"#344054\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.0007 12.5C11.3814 12.5 12.5006 11.3808 12.5006 10C12.5006 8.61933 11.3814 7.50004 10.0007 7.50004C8.61994 7.50004 7.50065 8.61933 7.50065 10C7.50065 11.3808 8.61994 12.5 10.0007 12.5Z\"\r\n stroke=\"#344054\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n </a>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"documentsForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n</div>", styles: [".settings-accordian-card{border-radius:10px;background:#fff;overflow:hidden;padding:16px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}input[disabled],input[readonly],select[disabled],textarea[disabled],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.footer-seperator{border-top:1px solid #EAECF0}.upload-btn{box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-500, #667085);font-size:16px;font-weight:600}.uploaded-doc-text{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:600;text-transform:capitalize;cursor:pointer}.header{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.file-open-input{position:relative}.file-open-input input{padding-left:50px}.file-open-input input[readonly]{background-color:#fff!important}.file-open-input .l-icon{position:absolute;left:10px;top:10px}.file-open-input .r-icon{position:absolute;right:10px;top:12px}.input-group input[readonly]{background-color:#fff!important}\n"] }]
2763
- }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: ClientApiService }, { type: i0.ChangeDetectorRef }, { type: i2.ToastService }], propDecorators: { gstFormInput: [{
2764
+ }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: ClientApiService }, { type: i0.ChangeDetectorRef }, { type: i3$1.ToastService }], propDecorators: { gstFormInput: [{
2764
2765
  type: ViewChild,
2765
2766
  args: ['gstFormInput']
2766
2767
  }], addressProofFormInput: [{
@@ -3089,13 +3090,13 @@ class ContactDirectoryComponent {
3089
3090
  const idArray = stores.map((e) => e.storeId);
3090
3091
  return idArray;
3091
3092
  }
3092
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ContactDirectoryComponent, deps: [{ token: ClientApiService }, { token: i0.ChangeDetectorRef }, { token: i1$3.NgbModal }, { token: i2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
3093
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ContactDirectoryComponent, selector: "lib-contact-directory", ngImport: i0, template: "<div class=\"contact-card\">\r\n <h3 class=\"mb-5\">\r\n <span class=\"card-label mb-2\">Select Your Preferences</span>\r\n </h3>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Country <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"countryList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onCountrySelect($event)\" [selectedValues]=\"[selectedCountry]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">State <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"stateList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onStateSelect($event)\" [selectedValues]=\"[selectedState]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">City <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"cityList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onCitySelect($event)\" [selectedValues]=\"[selectedCity]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Store Id <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"storeList\" [multi]=\"true\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedStore\"></lib-select>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"d-flex justify-content-end\">\r\n <a (click)=\"onFilterApply()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n <div class=\"footer-seperator mb-10\"></div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Contacts List</span>\r\n </h3>\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=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n <button (click)=\"onExport()\" type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-responsive mt-10\">\r\n <table class=\"w-100 table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Store Info</th>\r\n <th>Spoc Name & Email</th>\r\n <th>Contact Number</th>\r\n <th>Location</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let spoc of spocList\">\r\n <td>\r\n <div class=\"table-title-primary text-decoration-underline cursor-pointer\"\r\n routerLink=\"/manage/stores/LKST123/infra-ticket\">{{spoc?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{spoc?.storeId}}</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocName}} </div>\r\n <div class=\"table-sub\">{{spoc?.spocEmail}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocNumber}} </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.storeState}} </div>\r\n <div class=\"table-sub\">{{spoc?.storeCity}}</div>\r\n </td>\r\n <td class=\"align-height\"><span class=\"cursor-pointer\">\r\n <svg (click)=\"openEditSpocModal(spoc?.spocId, spoc?.storeId)\" class=\"me-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_5541_6759)\">\r\n <path\r\n d=\"M9.16699 3.33332H3.33366C2.89163 3.33332 2.46771 3.50891 2.15515 3.82147C1.84259 4.13403 1.66699 4.55796 1.66699 4.99999V16.6667C1.66699 17.1087 1.84259 17.5326 2.15515 17.8452C2.46771 18.1577 2.89163 18.3333 3.33366 18.3333H15.0003C15.4424 18.3333 15.8663 18.1577 16.1788 17.8452C16.4914 17.5326 16.667 17.1087 16.667 16.6667V10.8333M15.417 2.08332C15.7485 1.7518 16.1982 1.56555 16.667 1.56555C17.1358 1.56555 17.5855 1.7518 17.917 2.08332C18.2485 2.41484 18.4348 2.86448 18.4348 3.33332C18.4348 3.80216 18.2485 4.2518 17.917 4.58332L10.0003 12.5L6.66699 13.3333L7.50033 9.99999L15.417 2.08332Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5541_6759\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg (click)=\"openDeleteSpocModal(spoc?.spocId, spoc?.storeId)\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00002H4.16667M4.16667 5.00002H17.5M4.16667 5.00002V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1578 5.39131 18.3334 5.83333 18.3334H14.1667C14.6087 18.3334 15.0326 18.1578 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00002H4.16667ZM6.66667 5.00002V3.33335C6.66667 2.89133 6.84226 2.4674 7.15482 2.15484C7.46738 1.84228 7.89131 1.66669 8.33333 1.66669H11.6667C12.1087 1.66669 12.5326 1.84228 12.8452 2.15484C13.1577 2.4674 13.3333 2.89133 13.3333 3.33335V5.00002M8.33333 9.16669V14.1667M11.6667 9.16669V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n</div>", styles: [".contact-card{border-radius:8px;background:var(--White, #FFF);padding:16px}.settings-accordian-card{border-radius:10px;background:#fff;overflow:hidden;padding:16px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}.header{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}td{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i2.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
3093
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ContactDirectoryComponent, deps: [{ token: ClientApiService }, { token: i0.ChangeDetectorRef }, { token: i1$3.NgbModal }, { token: i3$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
3094
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ContactDirectoryComponent, selector: "lib-contact-directory", ngImport: i0, template: "<div class=\"contact-card\">\r\n <h3 class=\"mb-5\">\r\n <span class=\"card-label mb-2\">Select Your Preferences</span>\r\n </h3>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Country <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"countryList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onCountrySelect($event)\" [selectedValues]=\"[selectedCountry]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">State <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"stateList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onStateSelect($event)\" [selectedValues]=\"[selectedState]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">City <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"cityList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onCitySelect($event)\" [selectedValues]=\"[selectedCity]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Store Id <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"storeList\" [multi]=\"true\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedStore\"></lib-select>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"d-flex justify-content-end\">\r\n <a (click)=\"onFilterApply()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n <div class=\"footer-seperator mb-10\"></div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Contacts List</span>\r\n </h3>\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=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n <button (click)=\"onExport()\" type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-responsive mt-10\">\r\n <table class=\"w-100 table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Store Info</th>\r\n <th>Spoc Name & Email</th>\r\n <th>Contact Number</th>\r\n <th>Location</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let spoc of spocList\">\r\n <td>\r\n <div class=\"table-title-primary text-decoration-underline cursor-pointer\"\r\n routerLink=\"/manage/stores/LKST123/infra-ticket\">{{spoc?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{spoc?.storeId}}</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocName}} </div>\r\n <div class=\"table-sub\">{{spoc?.spocEmail}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocNumber}} </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.storeState}} </div>\r\n <div class=\"table-sub\">{{spoc?.storeCity}}</div>\r\n </td>\r\n <td class=\"align-height\"><span class=\"cursor-pointer\">\r\n <svg (click)=\"openEditSpocModal(spoc?.spocId, spoc?.storeId)\" class=\"me-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_5541_6759)\">\r\n <path\r\n d=\"M9.16699 3.33332H3.33366C2.89163 3.33332 2.46771 3.50891 2.15515 3.82147C1.84259 4.13403 1.66699 4.55796 1.66699 4.99999V16.6667C1.66699 17.1087 1.84259 17.5326 2.15515 17.8452C2.46771 18.1577 2.89163 18.3333 3.33366 18.3333H15.0003C15.4424 18.3333 15.8663 18.1577 16.1788 17.8452C16.4914 17.5326 16.667 17.1087 16.667 16.6667V10.8333M15.417 2.08332C15.7485 1.7518 16.1982 1.56555 16.667 1.56555C17.1358 1.56555 17.5855 1.7518 17.917 2.08332C18.2485 2.41484 18.4348 2.86448 18.4348 3.33332C18.4348 3.80216 18.2485 4.2518 17.917 4.58332L10.0003 12.5L6.66699 13.3333L7.50033 9.99999L15.417 2.08332Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5541_6759\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg (click)=\"openDeleteSpocModal(spoc?.spocId, spoc?.storeId)\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00002H4.16667M4.16667 5.00002H17.5M4.16667 5.00002V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1578 5.39131 18.3334 5.83333 18.3334H14.1667C14.6087 18.3334 15.0326 18.1578 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00002H4.16667ZM6.66667 5.00002V3.33335C6.66667 2.89133 6.84226 2.4674 7.15482 2.15484C7.46738 1.84228 7.89131 1.66669 8.33333 1.66669H11.6667C12.1087 1.66669 12.5326 1.84228 12.8452 2.15484C13.1577 2.4674 13.3333 2.89133 13.3333 3.33335V5.00002M8.33333 9.16669V14.1667M11.6667 9.16669V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n</div>", styles: [".contact-card{border-radius:8px;background:var(--White, #FFF);padding:16px}.settings-accordian-card{border-radius:10px;background:#fff;overflow:hidden;padding:16px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}.header{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}td{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i3$1.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
3094
3095
  }
3095
3096
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ContactDirectoryComponent, decorators: [{
3096
3097
  type: Component,
3097
3098
  args: [{ selector: 'lib-contact-directory', template: "<div class=\"contact-card\">\r\n <h3 class=\"mb-5\">\r\n <span class=\"card-label mb-2\">Select Your Preferences</span>\r\n </h3>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Country <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"countryList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onCountrySelect($event)\" [selectedValues]=\"[selectedCountry]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">State <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"stateList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onStateSelect($event)\" [selectedValues]=\"[selectedState]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">City <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"cityList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onCitySelect($event)\" [selectedValues]=\"[selectedCity]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Store Id <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"storeList\" [multi]=\"true\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedStore\"></lib-select>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"d-flex justify-content-end\">\r\n <a (click)=\"onFilterApply()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n <div class=\"footer-seperator mb-10\"></div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Contacts List</span>\r\n </h3>\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=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n <button (click)=\"onExport()\" type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-responsive mt-10\">\r\n <table class=\"w-100 table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Store Info</th>\r\n <th>Spoc Name & Email</th>\r\n <th>Contact Number</th>\r\n <th>Location</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let spoc of spocList\">\r\n <td>\r\n <div class=\"table-title-primary text-decoration-underline cursor-pointer\"\r\n routerLink=\"/manage/stores/LKST123/infra-ticket\">{{spoc?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{spoc?.storeId}}</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocName}} </div>\r\n <div class=\"table-sub\">{{spoc?.spocEmail}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocNumber}} </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.storeState}} </div>\r\n <div class=\"table-sub\">{{spoc?.storeCity}}</div>\r\n </td>\r\n <td class=\"align-height\"><span class=\"cursor-pointer\">\r\n <svg (click)=\"openEditSpocModal(spoc?.spocId, spoc?.storeId)\" class=\"me-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_5541_6759)\">\r\n <path\r\n d=\"M9.16699 3.33332H3.33366C2.89163 3.33332 2.46771 3.50891 2.15515 3.82147C1.84259 4.13403 1.66699 4.55796 1.66699 4.99999V16.6667C1.66699 17.1087 1.84259 17.5326 2.15515 17.8452C2.46771 18.1577 2.89163 18.3333 3.33366 18.3333H15.0003C15.4424 18.3333 15.8663 18.1577 16.1788 17.8452C16.4914 17.5326 16.667 17.1087 16.667 16.6667V10.8333M15.417 2.08332C15.7485 1.7518 16.1982 1.56555 16.667 1.56555C17.1358 1.56555 17.5855 1.7518 17.917 2.08332C18.2485 2.41484 18.4348 2.86448 18.4348 3.33332C18.4348 3.80216 18.2485 4.2518 17.917 4.58332L10.0003 12.5L6.66699 13.3333L7.50033 9.99999L15.417 2.08332Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5541_6759\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg (click)=\"openDeleteSpocModal(spoc?.spocId, spoc?.storeId)\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00002H4.16667M4.16667 5.00002H17.5M4.16667 5.00002V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1578 5.39131 18.3334 5.83333 18.3334H14.1667C14.6087 18.3334 15.0326 18.1578 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00002H4.16667ZM6.66667 5.00002V3.33335C6.66667 2.89133 6.84226 2.4674 7.15482 2.15484C7.46738 1.84228 7.89131 1.66669 8.33333 1.66669H11.6667C12.1087 1.66669 12.5326 1.84228 12.8452 2.15484C13.1577 2.4674 13.3333 2.89133 13.3333 3.33335V5.00002M8.33333 9.16669V14.1667M11.6667 9.16669V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n</div>", styles: [".contact-card{border-radius:8px;background:var(--White, #FFF);padding:16px}.settings-accordian-card{border-radius:10px;background:#fff;overflow:hidden;padding:16px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}.header{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}td{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important}\n"] }]
3098
- }], ctorParameters: () => [{ type: ClientApiService }, { type: i0.ChangeDetectorRef }, { type: i1$3.NgbModal }, { type: i2.ToastService }] });
3099
+ }], ctorParameters: () => [{ type: ClientApiService }, { type: i0.ChangeDetectorRef }, { type: i1$3.NgbModal }, { type: i3$1.ToastService }] });
3099
3100
 
3100
3101
  dayjs.extend(utc);
3101
3102
  dayjs.extend(timezone);
@@ -3250,7 +3251,7 @@ class ActivityLogsComponent {
3250
3251
  return checkedIds;
3251
3252
  }
3252
3253
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActivityLogsComponent, deps: [{ token: ClientApiService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
3253
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ActivityLogsComponent, selector: "lib-activity-logs", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"activity-card\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n <div class=\"header\">Activity Logs</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"d-flex align-items-center position-relative me-5\">\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div>\r\n <div class=\"multi-select-dropdown\" >\r\n <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n </button> \r\n <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n <div>\r\n <ul>\r\n <li >\r\n <div class=\"form-check\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <label class=\"form-check-label\" for=\"selectAll\">\r\n All Logs\r\n </label>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let filter of filters\" >\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n {{filter.label}}\r\n </label>\r\n </div>\r\n </li>\r\n \r\n </ul> \r\n </div>\r\n <div >\r\n <div class=\" w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end m-2\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"getActivityLogs(); showFilters = false\" >Apply</a>\r\n </div>\r\n </div>\r\n \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n <div class=\"d-flex me-10\">\r\n <div class=\"line me-4\"></div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n </div>\r\n <div class=\"sub\">{{arrayToString(item?.changes)}} {{item?.eventType + 'd'}}</div>\r\n <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"chip\">\r\n {{camelCaseToWords(item?.logType)}}\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$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: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
3254
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ActivityLogsComponent, selector: "lib-activity-logs", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"activity-card\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n <div class=\"header\">Activity Logs</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"d-flex align-items-center position-relative me-5\">\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div>\r\n <div class=\"multi-select-dropdown\" >\r\n <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n </button> \r\n <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n <div>\r\n <ul>\r\n <li >\r\n <div class=\"form-check\">\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n id=\"selectAll\">\r\n <label class=\"form-check-label\" for=\"selectAll\">\r\n All Logs\r\n </label>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let filter of filters\" >\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n {{filter.label}}\r\n </label>\r\n </div>\r\n </li>\r\n \r\n </ul> \r\n </div>\r\n <div >\r\n <div class=\" w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end m-2\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"getActivityLogs(); showFilters = false\" >Apply</a>\r\n </div>\r\n </div>\r\n \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n <div class=\"d-flex me-10\">\r\n <div class=\"line me-4\"></div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n </div>\r\n <div class=\"sub\">{{arrayToString(item?.changes)}} {{item?.eventType + 'd'}}</div>\r\n <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"chip\">\r\n {{camelCaseToWords(item?.logType)}}\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$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: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
3254
3255
  }
3255
3256
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActivityLogsComponent, decorators: [{
3256
3257
  type: Component,