tango-app-ui-manage-settings 3.7.21 → 3.7.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/esm2022/lib/components/configurations/footfall-configuration/footfall-configuration.component.mjs +3 -3
  2. package/esm2022/lib/components/tango-manage-settings/tango-manage-settings.component.mjs +3 -3
  3. package/fesm2022/tango-app-ui-manage-settings.mjs +4 -4
  4. package/fesm2022/tango-app-ui-manage-settings.mjs.map +1 -1
  5. package/package.json +1 -1
package/fesm2022/tango-app-ui-manage-settings.mjs CHANGED
@@ -1089,11 +1089,11 @@ class TangoManageSettingsComponent {
1089
1089
  }
1090
1090
  }
1091
1091
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoManageSettingsComponent, deps: [{ token: i3.PageInfoService }, { token: ClientApiService }, { token: i3.GlobalStateService }, { token: PaymentSubscriptionService }, { token: i0.ChangeDetectorRef }, { token: i4.ToastService }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
1092
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TangoManageSettingsComponent, selector: "lib-tango-manage-settings", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- client request card start -->\r\n<div class=\"g-4\">\r\n <div class=\"my-2 d-flex overflow\">\r\n <div *ngFor=\"let notification of notificationDetails.notificationList;let i= index;let last = last\"\r\n [ngClass]=\"notificationDetails.notificationList?.length === 2 ? 'col-6' : (notificationDetails.notificationList?.length > 2 ? 'col-4' : 'col-12')\">\r\n <div class=\"toastcard\" [ngClass]=\"!last ? 'me-4' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">{{notification.name}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\"\r\n *ngIf=\"notification.category === 'Trial' && notificationDetails.notificationList.length === 1&&userType ==='tango'\">\r\n <a type=\"submit\" (click)=\"approvetrial(notification,'cancel')\"\r\n class=\"btn-outline btn needhelp me-6\"><span class=\"mt-6\">Skip\r\n Trial</span></a><a type=\"button\" (click)=\"approvetrial(notification,'approve')\"\r\n tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n <div class=\"row mt-1\"\r\n *ngIf=\"notification.category === 'trial product' && notificationDetails.notificationList.length === 1\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"align-items-start justify-content-between daysleft my-2\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail\">\r\n Free trial</div>\r\n </div>\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"70\" viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n\r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\"\r\n stroke=\"#007bff\" stroke-width=\"8\" stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n\r\n <text id=\"percentage-text-{{i}}\" x=\"50\" y=\"54\" class=\"producttext\"\r\n text-anchor=\"middle\" fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n\r\n <a type=\"button\" tabindex=\"0\" (click)=\"subscribeproduct(notification,'subscription')\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"><span>Subscribe\r\n </span></a>\r\n <div class=\"position-relative\" *ngIf=\"userType==='tango'\">\r\n <div class=\"ms-5\" (click)=\"producttrailDropdown($event,i)\">\r\n <span class=\"justify-content-end cursor-pointer\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_14876_280367)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0013 21.834C22.4615 21.834 22.8346 21.4609 22.8346 21.0007C22.8346 20.5404 22.4615 20.1673 22.0013 20.1673C21.5411 20.1673 21.168 20.5404 21.168 21.0007C21.168 21.4609 21.5411 21.834 22.0013 21.834Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 16.0007C22.4615 16.0007 22.8346 15.6276 22.8346 15.1673C22.8346 14.7071 22.4615 14.334 22.0013 14.334C21.5411 14.334 21.168 14.7071 21.168 15.1673C21.168 15.6276 21.5411 16.0007 22.0013 16.0007Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 27.6673C22.4615 27.6673 22.8346 27.2942 22.8346 26.834C22.8346 26.3737 22.4615 26.0007 22.0013 26.0007C21.5411 26.0007 21.168 26.3737 21.168 26.834C21.168 27.2942 21.5411 27.6673 22.0013 27.6673Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_14876_280367\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <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\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_14876_280367\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_14876_280367\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute productdrop top-20 end-0\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\" class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification, 'unsubscribe')\">\r\n {{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex my-3\"\r\n *ngIf=\"notification.category === 'Trial' && notificationDetails.notificationList.length > 1&&userType ==='tango'\"><a\r\n type=\"submit\" (click)=\"approvetrial(notification,'cancel')\"\r\n class=\"btn-outline btn needhelp w-50 me-6 mt-3\"><span class=\"mt-6\">Skip\r\n Trial</span></a><a type=\"button\" (click)=\"approvetrial(notification,'approve')\"\r\n tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 w-50 ng-star-inserted\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n\r\n <div class=\"row mt-1\"\r\n *ngIf=\"notification.category === 'trial product' && notificationDetails.notificationList.length > 1\">\r\n <div class=\"col-lg-6 d-flex\">\r\n <div class=\"align-items-start justify-content-between daysleft my-2\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail\">\r\n Free trial</div>\r\n </div>\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"70\" viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n\r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#007bff\"\r\n stroke-width=\"8\" stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n\r\n <text id=\"percentage-text-{{i}}\" x=\"50\" y=\"54\" class=\"producttext\" text-anchor=\"middle\"\r\n fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 \">\r\n <div class=\"d-flex\" style=\"justify-content: end;\">\r\n <a type=\"button\" tabindex=\"0\" (click)=\"subscribeproduct(notification,'subscription')\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Subscribe\r\n </span></a>\r\n <div class=\"position-relative\" *ngIf=\"userType==='tango'\">\r\n <div class=\"ms-5 mt-4\" (click)=\"producttrailDropdown($event,i)\">\r\n <span class=\"justify-content-end cursor-pointer\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_14876_280367)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0013 21.834C22.4615 21.834 22.8346 21.4609 22.8346 21.0007C22.8346 20.5404 22.4615 20.1673 22.0013 20.1673C21.5411 20.1673 21.168 20.5404 21.168 21.0007C21.168 21.4609 21.5411 21.834 22.0013 21.834Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 16.0007C22.4615 16.0007 22.8346 15.6276 22.8346 15.1673C22.8346 14.7071 22.4615 14.334 22.0013 14.334C21.5411 14.334 21.168 14.7071 21.168 15.1673C21.168 15.6276 21.5411 16.0007 22.0013 16.0007Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 27.6673C22.4615 27.6673 22.8346 27.2942 22.8346 26.834C22.8346 26.3737 22.4615 26.0007 22.0013 26.0007C21.5411 26.0007 21.168 26.3737 21.168 26.834C21.168 27.2942 21.5411 27.6673 22.0013 27.6673Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_14876_280367\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <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\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_14876_280367\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_14876_280367\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute mt-17 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\" class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification, 'unsubscribe')\">\r\n {{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- <div [ngClass]=\"{\r\n 'col-md-4': type === 'trail',\r\n 'col-md-6': type !== 'trail',\r\n 'col-12': type === 'trail'\r\n }\" class=\"col-md-4 mb-5\">\r\n <div class=\"toastcard\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Client has Requested Tango Zone </span>\r\n </div>\r\n <div class=\"d-flex mb-2\"><a type=\"submit\" class=\"btn-outline btn needhelp w-50 me-6 mt-3\"><span\r\n class=\"mt-6\">Skip\r\n Trial</span></a><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 w-50 ng-star-inserted\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n </div>\r\n </div> -->\r\n</div>\r\n<!-- client request card end -->\r\n\r\n<!-- <div class=\"row gx-4 mb-4\">\r\n <div class=\"col-xl-6\" [ngClass]=\"i > 1? 'mt-5' : ''\"\r\n *ngFor=\"let notification of notificationDetails.notificationList;let i= index;\">\r\n <div 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\" *ngIf=\"notification.category === 'Trial'\">\r\n <div class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span class=\"badge-light-grey ms-2\">{{currentPlan |\r\n titlecase}}</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\" class=\"d-flex mt-15\"><a\r\n (click)=\"approvetrial(notification,'cancel')\" type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span class=\"mt-6\">Skip Trial</span></a><a\r\n (click)=\"approvetrial(notification,'approve')\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-11\" *ngIf=\"notification.category === 'unsubscribe'\">\r\n <div 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\" class=\"d-flex mt-20\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"\r\n (click)=\"cancelUnsubscribe(notification,'cancel')\"><span class=\"mt-6\">Cancel</span></a><a\r\n (click)=\"approveUnsubscribe(notification,'unsubscribe')\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-danger px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-10\" *ngIf=\"notification.category === 'trial product'\">\r\n <div class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span class=\"badge-light-grey ms-2\">{{currentPlan |\r\n titlecase}}</span>\r\n </div>\r\n <div class=\"subtext\">You will not be billed during your free\r\n <span class=\"subtextbold\">trial</span>.To keep your\r\n projects running after the trial end, upgrade to a paid\r\n option.\r\n </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\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n \r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n \r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#007bff\"\r\n stroke-width=\"8\" stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n \r\n <text id=\"percentage-text-{{i}}\" x=\"50\" y=\"54\" class=\"producttext\" text-anchor=\"middle\"\r\n fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n <div class=\"align-items-start justify-content-between daysleft ms-6 mt-3\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail mt-4 me-16\">\r\n Free trial</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-lg-4 mt-6\">\r\n <div class=\"position-relative\">\r\n <div (click)=\"producttrailDropdown($event,i)\">\r\n <span class=\"justify-content-end cursor-pointer ms-20\"><svg width=\"60\" height=\"60\"\r\n viewBox=\"0 0 60 60\" fill=\"none\" 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\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"55\" height=\"55\" rx=\"7.5\" 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\" stroke-width=\"2\" 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\" stroke-width=\"2\" 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\" y=\"0\" width=\"60\" height=\"60\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <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\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_5221_60143\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_5221_60143\" result=\"shape\" />\r\n </filter>\r\n <clipPath id=\"clip0_5221_60143\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\"\r\n transform=\"translate(18 17)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\" class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification)\">\r\n {{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 \r\n</div> -->\r\n\r\n\r\n\r\n\r\n<div class=\"row mb-5\">\r\n <div class=\"col-md-3\">\r\n <div class=\"card h-100\">\r\n <div class=\"m-0 w-100\">\r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/brand-detail\" routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"{exact: true}\" #BR=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"BR.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1842_19728)\">\r\n <path [ngClass]=\" BR.isActive ? 'fillpath' : ''\"\r\n d=\"M2.625 24C1.92881 24 1.26113 23.7234 0.768845 23.2312C0.276562 22.7389 0 22.0712 0 21.375L0 2.625C0 1.176 1.176 0 2.625 0H15.375C16.824 0 18 1.176 18 2.625V21.375C18 21.5025 17.991 21.627 17.973 21.75H21.375C21.4745 21.75 21.5698 21.7105 21.6402 21.6402C21.7105 21.5698 21.75 21.4745 21.75 21.375V12.4275C21.75 12.3658 21.7349 12.3051 21.7058 12.2506C21.6768 12.1962 21.6348 12.1498 21.5835 12.1155L20.001 11.061C19.8781 10.9791 19.7725 10.8737 19.6903 10.751C19.6081 10.6282 19.5509 10.4905 19.5219 10.3456C19.4929 10.2008 19.4928 10.0516 19.5215 9.90669C19.5501 9.76177 19.6071 9.62392 19.689 9.501C19.7709 9.37808 19.8763 9.27251 19.999 9.19031C20.1218 9.10811 20.2595 9.05089 20.4044 9.02191C20.5492 8.99294 20.6984 8.99279 20.8433 9.02145C20.9882 9.05012 21.1261 9.10706 21.249 9.189L22.8315 10.2435C23.562 10.731 24 11.55 24 12.4275V21.375C24 22.0712 23.7234 22.7389 23.2312 23.2312C22.7389 23.7234 22.0712 24 21.375 24H16.125C16.0252 23.9999 15.9259 23.9868 15.8295 23.961C15.681 23.9865 15.5295 24 15.375 24H10.875C10.5766 24 10.2905 23.8815 10.0795 23.6705C9.86853 23.4595 9.75 23.1734 9.75 22.875V21H8.25V22.875C8.25 23.1734 8.13147 23.4595 7.9205 23.6705C7.70952 23.8815 7.42337 24 7.125 24H2.625ZM2.25 21.375C2.25 21.582 2.418 21.75 2.625 21.75H6V19.875C6 19.5766 6.11853 19.2905 6.3295 19.0795C6.54048 18.8685 6.82663 18.75 7.125 18.75H10.875C11.1734 18.75 11.4595 18.8685 11.6705 19.0795C11.8815 19.2905 12 19.5766 12 19.875V21.75H15.375C15.4745 21.75 15.5698 21.7105 15.6402 21.6402C15.7105 21.5698 15.75 21.4745 15.75 21.375V2.625C15.75 2.52554 15.7105 2.43016 15.6402 2.35984C15.5698 2.28951 15.4745 2.25 15.375 2.25H2.625C2.52554 2.25 2.43016 2.28951 2.35984 2.35984C2.28951 2.43016 2.25 2.52554 2.25 2.625V21.375ZM5.625 9H6.375C6.67337 9 6.95952 9.11853 7.1705 9.3295C7.38147 9.54048 7.5 9.82663 7.5 10.125C7.5 10.4234 7.38147 10.7095 7.1705 10.9205C6.95952 11.1315 6.67337 11.25 6.375 11.25H5.625C5.32663 11.25 5.04048 11.1315 4.8295 10.9205C4.61853 10.7095 4.5 10.4234 4.5 10.125C4.5 9.82663 4.61853 9.54048 4.8295 9.3295C5.04048 9.11853 5.32663 9 5.625 9ZM4.5 5.625C4.5 5.32663 4.61853 5.04048 4.8295 4.8295C5.04048 4.61853 5.32663 4.5 5.625 4.5H6.375C6.67337 4.5 6.95952 4.61853 7.1705 4.8295C7.38147 5.04048 7.5 5.32663 7.5 5.625C7.5 5.92337 7.38147 6.20952 7.1705 6.4205C6.95952 6.63147 6.67337 6.75 6.375 6.75H5.625C5.32663 6.75 5.04048 6.63147 4.8295 6.4205C4.61853 6.20952 4.5 5.92337 4.5 5.625ZM10.5 10.125C10.5 9.82663 10.6185 9.54048 10.8295 9.3295C11.0405 9.11853 11.3266 9 11.625 9H12.375C12.6734 9 12.9595 9.11853 13.1705 9.3295C13.3815 9.54048 13.5 9.82663 13.5 10.125C13.5 10.4234 13.3815 10.7095 13.1705 10.9205C12.9595 11.1315 12.6734 11.25 12.375 11.25H11.625C11.3266 11.25 11.0405 11.1315 10.8295 10.9205C10.6185 10.7095 10.5 10.4234 10.5 10.125ZM11.625 4.5H12.375C12.6734 4.5 12.9595 4.61853 13.1705 4.8295C13.3815 5.04048 13.5 5.32663 13.5 5.625C13.5 5.92337 13.3815 6.20952 13.1705 6.4205C12.9595 6.63147 12.6734 6.75 12.375 6.75H11.625C11.3266 6.75 11.0405 6.63147 10.8295 6.4205C10.6185 6.20952 10.5 5.92337 10.5 5.625C10.5 5.32663 10.6185 5.04048 10.8295 4.8295C11.0405 4.61853 11.3266 4.5 11.625 4.5ZM4.5 14.625C4.5 14.3266 4.61853 14.0405 4.8295 13.8295C5.04048 13.6185 5.32663 13.5 5.625 13.5H6.375C6.67337 13.5 6.95952 13.6185 7.1705 13.8295C7.38147 14.0405 7.5 14.3266 7.5 14.625C7.5 14.9234 7.38147 15.2095 7.1705 15.4205C6.95952 15.6315 6.67337 15.75 6.375 15.75H5.625C5.32663 15.75 5.04048 15.6315 4.8295 15.4205C4.61853 15.2095 4.5 14.9234 4.5 14.625ZM11.625 13.5H12.375C12.6734 13.5 12.9595 13.6185 13.1705 13.8295C13.3815 14.0405 13.5 14.3266 13.5 14.625C13.5 14.9234 13.3815 15.2095 13.1705 15.4205C12.9595 15.6315 12.6734 15.75 12.375 15.75H11.625C11.3266 15.75 11.0405 15.6315 10.8295 15.4205C10.6185 15.2095 10.5 14.9234 10.5 14.625C10.5 14.3266 10.6185 14.0405 10.8295 13.8295C11.0405 13.6185 11.3266 13.5 11.625 13.5Z\"\r\n fill=\"#667085\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1842_19728\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" BR.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Brand Details\r\n </div>\r\n </div>\r\n </a></div>\r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/configuration\" routerLinkActive=\"active\" #CON=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"CON.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1842_19733)\">\r\n <path [ngClass]=\" CON.isActive ? 'fillstroke' : ''\"\r\n d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path [ngClass]=\" CON.isActive ? 'fillstroke' : ''\"\r\n d=\"M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1842_19733\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" CON.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">\r\n Configuration\r\n </div>\r\n </div>\r\n </a></div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/contact-directory\" routerLinkActive=\"active\"\r\n #CONDIR=\"routerLinkActive\" class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"CONDIR.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path [ngClass]=\"CONDIR.isActive ? 'fillstroke' : ''\"\r\n d=\"M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13M16 3.13C16.8604 3.3503 17.623 3.8507 18.1676 4.55231C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89317 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88M13 7C13 9.20914 11.2091 11 9 11C6.79086 11 5 9.20914 5 7C5 4.79086 6.79086 3 9 3C11.2091 3 13 4.79086 13 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" CONDIR.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Contact\r\n Directory</div>\r\n </div>\r\n </a></div>\r\n <ng-container *ngIf=\"!billingDisabled || (gs.userAccess | async)?.userType === 'tango'\">\r\n <div class=\"mb-3\"><a routerLink=\"/manage/settings/payment-subscription\" routerLinkActive=\"active\"\r\n #sa=\"routerLinkActive\" class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"sa.isActive ? 'btn text-tab' : ''\">\r\n <div class=\" me-4\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path [ngClass]=\"sa.isActive ? 'fillstroke' : ''\"\r\n d=\"M14.1755 4.22225C14.1766 2.99445 11.6731 2 8.58832 2C5.50357 2 3.00224 2.99557 3 4.22225M3 4.22225C3 5.45004 5.50133 6.44449 8.58832 6.44449C11.6753 6.44449 14.1766 5.45004 14.1766 4.22225L14.1766 12.8445M3 4.22225V17.5556C3.00112 18.7834 5.50245 19.7779 8.58832 19.7779C10.0849 19.7779 11.4361 19.5412 12.4387 19.1601M3.00112 8.66672C3.00112 9.89451 5.50245 10.889 8.58944 10.889C11.6764 10.889 14.1778 9.89451 14.1778 8.66672M12.5057 14.6946C11.4976 15.0891 10.115 15.3335 8.58832 15.3335C5.50245 15.3335 3.00112 14.3391 3.00112 13.1113M20.5272 13.4646C22.4909 15.4169 22.4909 18.5836 20.5272 20.5358C18.5635 22.4881 15.3781 22.4881 13.4144 20.5358C11.4507 18.5836 11.4507 15.4169 13.4144 13.4646C15.3781 11.5124 18.5635 11.5124 20.5272 13.4646Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column \">\r\n <div [ngClass]=\"sa.isActive ? 'text-tab' : ''\" class=\"sideheading mb-1\">Plans &\r\n Subscription</div>\r\n </div>\r\n </a></div>\r\n </ng-container>\r\n \r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/documents\" routerLinkActive=\"active\" #DOC=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"DOC.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path [ngClass]=\" DOC.isActive ? 'fillstroke' : ''\"\r\n d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8M14 2L20 8M14 2V8H20M16 13H8M16 17H8M10 9H8\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" DOC.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Documents\r\n </div>\r\n </div>\r\n </a></div>\r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/activity-logs\" routerLinkActive=\"active\" #ACT=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"ACT.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path [ngClass]=\" ACT.isActive ? 'fillstroke fillpath' : ''\"\r\n d=\"M18.1539 7.72911L18.0341 7.85239L18.1539 7.72911C17.9972 7.57686 17.7859 7.49231 17.5667 7.49231H8.7C8.48081 7.49231 8.26948 7.57686 8.11279 7.72911C7.9559 7.88155 7.86667 8.08955 7.86667 8.30769C7.86667 8.52583 7.9559 8.73383 8.11279 8.88627C8.26948 9.03853 8.48081 9.12308 8.7 9.12308H17.5667C17.7859 9.12308 17.9972 9.03853 18.1539 8.88627C18.3108 8.73383 18.4 8.52583 18.4 8.30769C18.4 8.08955 18.3108 7.88155 18.1539 7.72911ZM3.04612 4.0368C2.88924 4.18924 2.8 4.39725 2.8 4.61538C2.8 4.83352 2.88924 5.04152 3.04612 5.19397C3.20282 5.34622 3.41415 5.43077 3.63333 5.43077H6.16667C6.38585 5.43077 6.59718 5.34622 6.75388 5.19397C6.91076 5.04152 7 4.83352 7 4.61538C7 4.39725 6.91076 4.18924 6.75388 4.0368C6.59718 3.88455 6.38585 3.8 6.16667 3.8H3.63333C3.41415 3.8 3.20282 3.88455 3.04612 4.0368ZM8.11279 4.0368C7.9559 4.18924 7.86667 4.39725 7.86667 4.61538C7.86667 4.83352 7.9559 5.04152 8.11279 5.19397C8.26948 5.34622 8.48081 5.43077 8.7 5.43077H21.3667C21.5859 5.43077 21.7972 5.34622 21.9539 5.19397C22.1108 5.04152 22.2 4.83352 22.2 4.61538C22.2 4.39725 22.1108 4.18924 21.9539 4.0368C21.7972 3.88455 21.5859 3.8 21.3667 3.8H8.7C8.48081 3.8 8.26948 3.88455 8.11279 4.0368ZM3.04612 11.4214C2.88924 11.5739 2.8 11.7819 2.8 12C2.8 12.2181 2.88924 12.4261 3.04612 12.5786C3.20282 12.7308 3.41414 12.8154 3.63333 12.8154H6.16667C6.38586 12.8154 6.59718 12.7308 6.75388 12.5786C6.91076 12.4261 7 12.2181 7 12C7 11.7819 6.91076 11.5739 6.75388 11.4214C6.59718 11.2692 6.38585 11.1846 6.16667 11.1846H3.63333C3.41415 11.1846 3.20282 11.2692 3.04612 11.4214ZM8.11279 11.4214C7.9559 11.5739 7.86667 11.7819 7.86667 12C7.86667 12.2181 7.9559 12.4261 8.11279 12.5786C8.26948 12.7308 8.48081 12.8154 8.7 12.8154H21.3667C21.5859 12.8154 21.7972 12.7308 21.9539 12.5786C22.1108 12.4261 22.2 12.2181 22.2 12C22.2 11.7819 22.1108 11.5739 21.9539 11.4214C21.7972 11.2692 21.5859 11.1846 21.3667 11.1846H8.7C8.48081 11.1846 8.26948 11.2692 8.11279 11.4214ZM8.11279 15.1137C7.9559 15.2662 7.86667 15.4742 7.86667 15.6923C7.86667 15.9104 7.9559 16.1184 8.11279 16.2709C8.26948 16.4231 8.48081 16.5077 8.7 16.5077H17.5667C17.7859 16.5077 17.9972 16.4231 18.1539 16.2709C18.3108 16.1184 18.4 15.9104 18.4 15.6923C18.4 15.4742 18.3108 15.2662 18.1539 15.1137C17.9972 14.9615 17.7859 14.8769 17.5667 14.8769H8.7C8.48081 14.8769 8.26948 14.9615 8.11279 15.1137ZM3.04612 18.806C2.88924 18.9585 2.8 19.1665 2.8 19.3846C2.8 19.6028 2.88924 19.8108 3.04612 19.9632C3.20282 20.1155 3.41415 20.2 3.63333 20.2H6.16667C6.38585 20.2 6.59718 20.1155 6.75388 19.9632C6.91076 19.8108 7 19.6028 7 19.3846C7 19.1665 6.91076 18.9585 6.75388 18.806C6.59718 18.6538 6.38585 18.5692 6.16667 18.5692H3.63333C3.41415 18.5692 3.20282 18.6538 3.04612 18.806ZM8.11279 18.806C7.9559 18.9585 7.86667 19.1665 7.86667 19.3846C7.86667 19.6028 7.9559 19.8108 8.11279 19.9632C8.26948 20.1155 8.48081 20.2 8.7 20.2H21.3667C21.5859 20.2 21.7972 20.1155 21.9539 19.9632C22.1108 19.8108 22.2 19.6028 22.2 19.3846C22.2 19.1665 22.1108 18.9585 21.9539 18.806C21.7972 18.6538 21.5859 18.5692 21.3667 18.5692H8.7C8.48081 18.5692 8.26948 18.6538 8.11279 18.806Z\"\r\n fill=\"#667085\" stroke=\"#667085\" stroke-width=\"0.4\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" ACT.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Activity Log\r\n </div>\r\n </div>\r\n </a></div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\">\r\n <ng-container [ngSwitch]=\"pageState\">\r\n <ng-container *ngSwitchCase=\"'loaded'\">\r\n <router-outlet></router-outlet>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\">\r\n <div class=\"shimmer-card w-100\">\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 </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n</div>", styles: [".sideheading{color:var(--Gray-700, #344054);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.card{border-radius:8px;padding:16px;flex-direction:column;align-items:flex-start}svg .fillpath{fill:#00a3ff!important}svg .fillstroke{stroke:#00a3ff!important}.text-tab{color:var(--Primary-700, #009BF3);font-size:16px;font-style:normal;font-weight:500;line-height:24px;border-radius:6px;background:var(--Primary-50, #EAF8FF)}.shimmer-card{border-radius:10px;background:#fff}.toastcard{border-left:2px solid #00A3FF;background:#fff;box-shadow:0 4px 16px #0000001a;padding:6px 12px 6px 16px;align-items:center;gap:16px;align-self:stretch;border-radius:4px}.overflow{overflow-x:scroll}.toasttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.needhelp{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:600!important;text-transform:capitalize}.daysleft{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:32px}.trail{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:28px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.productitem{right:545px!important}.productdrop{margin-top:12%;left:83%;z-index:10}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i7.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] });
1092
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TangoManageSettingsComponent, selector: "lib-tango-manage-settings", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- client request card start -->\r\n<div class=\"g-4\">\r\n <div class=\"my-2 d-flex overflow\">\r\n <div *ngFor=\"let notification of notificationDetails.notificationList;let i= index;let last = last\"\r\n [ngClass]=\"notificationDetails.notificationList?.length === 2 ? 'col-6' : (notificationDetails.notificationList?.length > 2 ? 'col-4' : 'col-12')\">\r\n <div class=\"toastcard\" [ngClass]=\"!last ? 'me-4' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">{{notification.name}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\"\r\n *ngIf=\"notification.category === 'Trial' && notificationDetails.notificationList.length === 1&&userType ==='tango'\">\r\n <a type=\"submit\" (click)=\"approvetrial(notification,'cancel')\"\r\n class=\"btn-outline btn needhelp me-6\"><span class=\"mt-6\">Skip\r\n Trial</span></a><a type=\"button\" (click)=\"approvetrial(notification,'approve')\"\r\n tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n <div class=\"row mt-1\"\r\n *ngIf=\"notification.category === 'trial product' && notificationDetails.notificationList.length === 1\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"align-items-start justify-content-between daysleft my-2\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail\">\r\n Free trial</div>\r\n </div>\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"70\" viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n\r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\"\r\n stroke=\"#007bff\" stroke-width=\"8\" stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n\r\n <text id=\"percentage-text-{{i}}\" x=\"50\" y=\"54\" class=\"producttext\"\r\n text-anchor=\"middle\" fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n\r\n <a type=\"button\" tabindex=\"0\" (click)=\"subscribeproduct(notification,'subscription')\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"><span>Subscribe\r\n </span></a>\r\n <div class=\"position-relative\" *ngIf=\"userType==='tango'\">\r\n <div class=\"ms-5\" (click)=\"producttrailDropdown($event,i)\">\r\n <span class=\"justify-content-end cursor-pointer\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_14876_280367)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0013 21.834C22.4615 21.834 22.8346 21.4609 22.8346 21.0007C22.8346 20.5404 22.4615 20.1673 22.0013 20.1673C21.5411 20.1673 21.168 20.5404 21.168 21.0007C21.168 21.4609 21.5411 21.834 22.0013 21.834Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 16.0007C22.4615 16.0007 22.8346 15.6276 22.8346 15.1673C22.8346 14.7071 22.4615 14.334 22.0013 14.334C21.5411 14.334 21.168 14.7071 21.168 15.1673C21.168 15.6276 21.5411 16.0007 22.0013 16.0007Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 27.6673C22.4615 27.6673 22.8346 27.2942 22.8346 26.834C22.8346 26.3737 22.4615 26.0007 22.0013 26.0007C21.5411 26.0007 21.168 26.3737 21.168 26.834C21.168 27.2942 21.5411 27.6673 22.0013 27.6673Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_14876_280367\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <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\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_14876_280367\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_14876_280367\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute productdrop top-20 end-0\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\" class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification, 'unsubscribe')\">\r\n {{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex my-3\"\r\n *ngIf=\"notification.category === 'Trial' && notificationDetails.notificationList.length > 1&&userType ==='tango'\"><a\r\n type=\"submit\" (click)=\"approvetrial(notification,'cancel')\"\r\n class=\"btn-outline btn needhelp w-50 me-6 mt-3\"><span class=\"mt-6\">Skip\r\n Trial</span></a><a type=\"button\" (click)=\"approvetrial(notification,'approve')\"\r\n tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 w-50 ng-star-inserted\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n\r\n <div class=\"row mt-1\"\r\n *ngIf=\"notification.category === 'trial product' && notificationDetails.notificationList.length > 1\">\r\n <div class=\"col-lg-6 d-flex\">\r\n <div class=\"align-items-start justify-content-between daysleft my-2\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail\">\r\n Free trial</div>\r\n </div>\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"70\" viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n\r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#007bff\"\r\n stroke-width=\"8\" stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n\r\n <text id=\"percentage-text-{{i}}\" x=\"50\" y=\"54\" class=\"producttext\" text-anchor=\"middle\"\r\n fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 \">\r\n <div class=\"d-flex\" style=\"justify-content: end;\">\r\n <a type=\"button\" tabindex=\"0\" (click)=\"subscribeproduct(notification,'subscription')\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Subscribe\r\n </span></a>\r\n <div class=\"position-relative\" *ngIf=\"userType==='tango'\">\r\n <div class=\"ms-5 mt-4\" (click)=\"producttrailDropdown($event,i)\">\r\n <span class=\"justify-content-end cursor-pointer\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_14876_280367)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0013 21.834C22.4615 21.834 22.8346 21.4609 22.8346 21.0007C22.8346 20.5404 22.4615 20.1673 22.0013 20.1673C21.5411 20.1673 21.168 20.5404 21.168 21.0007C21.168 21.4609 21.5411 21.834 22.0013 21.834Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 16.0007C22.4615 16.0007 22.8346 15.6276 22.8346 15.1673C22.8346 14.7071 22.4615 14.334 22.0013 14.334C21.5411 14.334 21.168 14.7071 21.168 15.1673C21.168 15.6276 21.5411 16.0007 22.0013 16.0007Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 27.6673C22.4615 27.6673 22.8346 27.2942 22.8346 26.834C22.8346 26.3737 22.4615 26.0007 22.0013 26.0007C21.5411 26.0007 21.168 26.3737 21.168 26.834C21.168 27.2942 21.5411 27.6673 22.0013 27.6673Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_14876_280367\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <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\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_14876_280367\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_14876_280367\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute mt-17 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\" class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification, 'unsubscribe')\">\r\n {{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- <div [ngClass]=\"{\r\n 'col-md-4': type === 'trail',\r\n 'col-md-6': type !== 'trail',\r\n 'col-12': type === 'trail'\r\n }\" class=\"col-md-4 mb-5\">\r\n <div class=\"toastcard\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Client has Requested Tango Zone </span>\r\n </div>\r\n <div class=\"d-flex mb-2\"><a type=\"submit\" class=\"btn-outline btn needhelp w-50 me-6 mt-3\"><span\r\n class=\"mt-6\">Skip\r\n Trial</span></a><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 w-50 ng-star-inserted\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n </div>\r\n </div> -->\r\n</div>\r\n<!-- client request card end -->\r\n\r\n<!-- <div class=\"row gx-4 mb-4\">\r\n <div class=\"col-xl-6\" [ngClass]=\"i > 1? 'mt-5' : ''\"\r\n *ngFor=\"let notification of notificationDetails.notificationList;let i= index;\">\r\n <div 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\" *ngIf=\"notification.category === 'Trial'\">\r\n <div class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span class=\"badge-light-grey ms-2\">{{currentPlan |\r\n titlecase}}</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\" class=\"d-flex mt-15\"><a\r\n (click)=\"approvetrial(notification,'cancel')\" type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span class=\"mt-6\">Skip Trial</span></a><a\r\n (click)=\"approvetrial(notification,'approve')\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-11\" *ngIf=\"notification.category === 'unsubscribe'\">\r\n <div 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\" class=\"d-flex mt-20\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"\r\n (click)=\"cancelUnsubscribe(notification,'cancel')\"><span class=\"mt-6\">Cancel</span></a><a\r\n (click)=\"approveUnsubscribe(notification,'unsubscribe')\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-danger px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-10\" *ngIf=\"notification.category === 'trial product'\">\r\n <div class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span class=\"badge-light-grey ms-2\">{{currentPlan |\r\n titlecase}}</span>\r\n </div>\r\n <div class=\"subtext\">You will not be billed during your free\r\n <span class=\"subtextbold\">trial</span>.To keep your\r\n projects running after the trial end, upgrade to a paid\r\n option.\r\n </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\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n \r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n \r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#007bff\"\r\n stroke-width=\"8\" stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n \r\n <text id=\"percentage-text-{{i}}\" x=\"50\" y=\"54\" class=\"producttext\" text-anchor=\"middle\"\r\n fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n <div class=\"align-items-start justify-content-between daysleft ms-6 mt-3\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail mt-4 me-16\">\r\n Free trial</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-lg-4 mt-6\">\r\n <div class=\"position-relative\">\r\n <div (click)=\"producttrailDropdown($event,i)\">\r\n <span class=\"justify-content-end cursor-pointer ms-20\"><svg width=\"60\" height=\"60\"\r\n viewBox=\"0 0 60 60\" fill=\"none\" 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\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"55\" height=\"55\" rx=\"7.5\" 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\" stroke-width=\"2\" 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\" stroke-width=\"2\" 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\" y=\"0\" width=\"60\" height=\"60\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <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\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_5221_60143\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_5221_60143\" result=\"shape\" />\r\n </filter>\r\n <clipPath id=\"clip0_5221_60143\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\"\r\n transform=\"translate(18 17)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\" class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification)\">\r\n {{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 \r\n</div> -->\r\n\r\n\r\n\r\n\r\n<div class=\"row mb-5\">\r\n <div class=\"col-md-3\">\r\n <div class=\"card h-100\">\r\n <div class=\"m-0 w-100\">\r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/brand-detail\" routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"{exact: true}\" #BR=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"BR.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1842_19728)\">\r\n <path [ngClass]=\" BR.isActive ? 'fillpath' : ''\"\r\n d=\"M2.625 24C1.92881 24 1.26113 23.7234 0.768845 23.2312C0.276562 22.7389 0 22.0712 0 21.375L0 2.625C0 1.176 1.176 0 2.625 0H15.375C16.824 0 18 1.176 18 2.625V21.375C18 21.5025 17.991 21.627 17.973 21.75H21.375C21.4745 21.75 21.5698 21.7105 21.6402 21.6402C21.7105 21.5698 21.75 21.4745 21.75 21.375V12.4275C21.75 12.3658 21.7349 12.3051 21.7058 12.2506C21.6768 12.1962 21.6348 12.1498 21.5835 12.1155L20.001 11.061C19.8781 10.9791 19.7725 10.8737 19.6903 10.751C19.6081 10.6282 19.5509 10.4905 19.5219 10.3456C19.4929 10.2008 19.4928 10.0516 19.5215 9.90669C19.5501 9.76177 19.6071 9.62392 19.689 9.501C19.7709 9.37808 19.8763 9.27251 19.999 9.19031C20.1218 9.10811 20.2595 9.05089 20.4044 9.02191C20.5492 8.99294 20.6984 8.99279 20.8433 9.02145C20.9882 9.05012 21.1261 9.10706 21.249 9.189L22.8315 10.2435C23.562 10.731 24 11.55 24 12.4275V21.375C24 22.0712 23.7234 22.7389 23.2312 23.2312C22.7389 23.7234 22.0712 24 21.375 24H16.125C16.0252 23.9999 15.9259 23.9868 15.8295 23.961C15.681 23.9865 15.5295 24 15.375 24H10.875C10.5766 24 10.2905 23.8815 10.0795 23.6705C9.86853 23.4595 9.75 23.1734 9.75 22.875V21H8.25V22.875C8.25 23.1734 8.13147 23.4595 7.9205 23.6705C7.70952 23.8815 7.42337 24 7.125 24H2.625ZM2.25 21.375C2.25 21.582 2.418 21.75 2.625 21.75H6V19.875C6 19.5766 6.11853 19.2905 6.3295 19.0795C6.54048 18.8685 6.82663 18.75 7.125 18.75H10.875C11.1734 18.75 11.4595 18.8685 11.6705 19.0795C11.8815 19.2905 12 19.5766 12 19.875V21.75H15.375C15.4745 21.75 15.5698 21.7105 15.6402 21.6402C15.7105 21.5698 15.75 21.4745 15.75 21.375V2.625C15.75 2.52554 15.7105 2.43016 15.6402 2.35984C15.5698 2.28951 15.4745 2.25 15.375 2.25H2.625C2.52554 2.25 2.43016 2.28951 2.35984 2.35984C2.28951 2.43016 2.25 2.52554 2.25 2.625V21.375ZM5.625 9H6.375C6.67337 9 6.95952 9.11853 7.1705 9.3295C7.38147 9.54048 7.5 9.82663 7.5 10.125C7.5 10.4234 7.38147 10.7095 7.1705 10.9205C6.95952 11.1315 6.67337 11.25 6.375 11.25H5.625C5.32663 11.25 5.04048 11.1315 4.8295 10.9205C4.61853 10.7095 4.5 10.4234 4.5 10.125C4.5 9.82663 4.61853 9.54048 4.8295 9.3295C5.04048 9.11853 5.32663 9 5.625 9ZM4.5 5.625C4.5 5.32663 4.61853 5.04048 4.8295 4.8295C5.04048 4.61853 5.32663 4.5 5.625 4.5H6.375C6.67337 4.5 6.95952 4.61853 7.1705 4.8295C7.38147 5.04048 7.5 5.32663 7.5 5.625C7.5 5.92337 7.38147 6.20952 7.1705 6.4205C6.95952 6.63147 6.67337 6.75 6.375 6.75H5.625C5.32663 6.75 5.04048 6.63147 4.8295 6.4205C4.61853 6.20952 4.5 5.92337 4.5 5.625ZM10.5 10.125C10.5 9.82663 10.6185 9.54048 10.8295 9.3295C11.0405 9.11853 11.3266 9 11.625 9H12.375C12.6734 9 12.9595 9.11853 13.1705 9.3295C13.3815 9.54048 13.5 9.82663 13.5 10.125C13.5 10.4234 13.3815 10.7095 13.1705 10.9205C12.9595 11.1315 12.6734 11.25 12.375 11.25H11.625C11.3266 11.25 11.0405 11.1315 10.8295 10.9205C10.6185 10.7095 10.5 10.4234 10.5 10.125ZM11.625 4.5H12.375C12.6734 4.5 12.9595 4.61853 13.1705 4.8295C13.3815 5.04048 13.5 5.32663 13.5 5.625C13.5 5.92337 13.3815 6.20952 13.1705 6.4205C12.9595 6.63147 12.6734 6.75 12.375 6.75H11.625C11.3266 6.75 11.0405 6.63147 10.8295 6.4205C10.6185 6.20952 10.5 5.92337 10.5 5.625C10.5 5.32663 10.6185 5.04048 10.8295 4.8295C11.0405 4.61853 11.3266 4.5 11.625 4.5ZM4.5 14.625C4.5 14.3266 4.61853 14.0405 4.8295 13.8295C5.04048 13.6185 5.32663 13.5 5.625 13.5H6.375C6.67337 13.5 6.95952 13.6185 7.1705 13.8295C7.38147 14.0405 7.5 14.3266 7.5 14.625C7.5 14.9234 7.38147 15.2095 7.1705 15.4205C6.95952 15.6315 6.67337 15.75 6.375 15.75H5.625C5.32663 15.75 5.04048 15.6315 4.8295 15.4205C4.61853 15.2095 4.5 14.9234 4.5 14.625ZM11.625 13.5H12.375C12.6734 13.5 12.9595 13.6185 13.1705 13.8295C13.3815 14.0405 13.5 14.3266 13.5 14.625C13.5 14.9234 13.3815 15.2095 13.1705 15.4205C12.9595 15.6315 12.6734 15.75 12.375 15.75H11.625C11.3266 15.75 11.0405 15.6315 10.8295 15.4205C10.6185 15.2095 10.5 14.9234 10.5 14.625C10.5 14.3266 10.6185 14.0405 10.8295 13.8295C11.0405 13.6185 11.3266 13.5 11.625 13.5Z\"\r\n fill=\"#667085\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1842_19728\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" BR.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Brand Details\r\n </div>\r\n </div>\r\n </a></div>\r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/configuration\" routerLinkActive=\"active\" #CON=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"CON.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1842_19733)\">\r\n <path [ngClass]=\" CON.isActive ? 'fillstroke' : ''\"\r\n d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path [ngClass]=\" CON.isActive ? 'fillstroke' : ''\"\r\n d=\"M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1842_19733\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" CON.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">\r\n Configuration\r\n </div>\r\n </div>\r\n </a></div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/contact-directory\" routerLinkActive=\"active\"\r\n #CONDIR=\"routerLinkActive\" class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"CONDIR.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path [ngClass]=\"CONDIR.isActive ? 'fillstroke' : ''\"\r\n d=\"M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13M16 3.13C16.8604 3.3503 17.623 3.8507 18.1676 4.55231C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89317 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88M13 7C13 9.20914 11.2091 11 9 11C6.79086 11 5 9.20914 5 7C5 4.79086 6.79086 3 9 3C11.2091 3 13 4.79086 13 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" CONDIR.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Contact\r\n Directory</div>\r\n </div>\r\n </a></div>\r\n <!-- <ng-container *ngIf=\"!billingDisabled || (gs.userAccess | async)?.userType === 'tango'\">\r\n <div class=\"mb-3\"><a routerLink=\"/manage/settings/payment-subscription\" routerLinkActive=\"active\"\r\n #sa=\"routerLinkActive\" class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"sa.isActive ? 'btn text-tab' : ''\">\r\n <div class=\" me-4\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path [ngClass]=\"sa.isActive ? 'fillstroke' : ''\"\r\n d=\"M14.1755 4.22225C14.1766 2.99445 11.6731 2 8.58832 2C5.50357 2 3.00224 2.99557 3 4.22225M3 4.22225C3 5.45004 5.50133 6.44449 8.58832 6.44449C11.6753 6.44449 14.1766 5.45004 14.1766 4.22225L14.1766 12.8445M3 4.22225V17.5556C3.00112 18.7834 5.50245 19.7779 8.58832 19.7779C10.0849 19.7779 11.4361 19.5412 12.4387 19.1601M3.00112 8.66672C3.00112 9.89451 5.50245 10.889 8.58944 10.889C11.6764 10.889 14.1778 9.89451 14.1778 8.66672M12.5057 14.6946C11.4976 15.0891 10.115 15.3335 8.58832 15.3335C5.50245 15.3335 3.00112 14.3391 3.00112 13.1113M20.5272 13.4646C22.4909 15.4169 22.4909 18.5836 20.5272 20.5358C18.5635 22.4881 15.3781 22.4881 13.4144 20.5358C11.4507 18.5836 11.4507 15.4169 13.4144 13.4646C15.3781 11.5124 18.5635 11.5124 20.5272 13.4646Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column \">\r\n <div [ngClass]=\"sa.isActive ? 'text-tab' : ''\" class=\"sideheading mb-1\">Plans &\r\n Subscription</div>\r\n </div>\r\n </a></div>\r\n </ng-container> -->\r\n \r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/documents\" routerLinkActive=\"active\" #DOC=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"DOC.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path [ngClass]=\" DOC.isActive ? 'fillstroke' : ''\"\r\n d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8M14 2L20 8M14 2V8H20M16 13H8M16 17H8M10 9H8\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" DOC.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Documents\r\n </div>\r\n </div>\r\n </a></div>\r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/activity-logs\" routerLinkActive=\"active\" #ACT=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"ACT.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path [ngClass]=\" ACT.isActive ? 'fillstroke fillpath' : ''\"\r\n d=\"M18.1539 7.72911L18.0341 7.85239L18.1539 7.72911C17.9972 7.57686 17.7859 7.49231 17.5667 7.49231H8.7C8.48081 7.49231 8.26948 7.57686 8.11279 7.72911C7.9559 7.88155 7.86667 8.08955 7.86667 8.30769C7.86667 8.52583 7.9559 8.73383 8.11279 8.88627C8.26948 9.03853 8.48081 9.12308 8.7 9.12308H17.5667C17.7859 9.12308 17.9972 9.03853 18.1539 8.88627C18.3108 8.73383 18.4 8.52583 18.4 8.30769C18.4 8.08955 18.3108 7.88155 18.1539 7.72911ZM3.04612 4.0368C2.88924 4.18924 2.8 4.39725 2.8 4.61538C2.8 4.83352 2.88924 5.04152 3.04612 5.19397C3.20282 5.34622 3.41415 5.43077 3.63333 5.43077H6.16667C6.38585 5.43077 6.59718 5.34622 6.75388 5.19397C6.91076 5.04152 7 4.83352 7 4.61538C7 4.39725 6.91076 4.18924 6.75388 4.0368C6.59718 3.88455 6.38585 3.8 6.16667 3.8H3.63333C3.41415 3.8 3.20282 3.88455 3.04612 4.0368ZM8.11279 4.0368C7.9559 4.18924 7.86667 4.39725 7.86667 4.61538C7.86667 4.83352 7.9559 5.04152 8.11279 5.19397C8.26948 5.34622 8.48081 5.43077 8.7 5.43077H21.3667C21.5859 5.43077 21.7972 5.34622 21.9539 5.19397C22.1108 5.04152 22.2 4.83352 22.2 4.61538C22.2 4.39725 22.1108 4.18924 21.9539 4.0368C21.7972 3.88455 21.5859 3.8 21.3667 3.8H8.7C8.48081 3.8 8.26948 3.88455 8.11279 4.0368ZM3.04612 11.4214C2.88924 11.5739 2.8 11.7819 2.8 12C2.8 12.2181 2.88924 12.4261 3.04612 12.5786C3.20282 12.7308 3.41414 12.8154 3.63333 12.8154H6.16667C6.38586 12.8154 6.59718 12.7308 6.75388 12.5786C6.91076 12.4261 7 12.2181 7 12C7 11.7819 6.91076 11.5739 6.75388 11.4214C6.59718 11.2692 6.38585 11.1846 6.16667 11.1846H3.63333C3.41415 11.1846 3.20282 11.2692 3.04612 11.4214ZM8.11279 11.4214C7.9559 11.5739 7.86667 11.7819 7.86667 12C7.86667 12.2181 7.9559 12.4261 8.11279 12.5786C8.26948 12.7308 8.48081 12.8154 8.7 12.8154H21.3667C21.5859 12.8154 21.7972 12.7308 21.9539 12.5786C22.1108 12.4261 22.2 12.2181 22.2 12C22.2 11.7819 22.1108 11.5739 21.9539 11.4214C21.7972 11.2692 21.5859 11.1846 21.3667 11.1846H8.7C8.48081 11.1846 8.26948 11.2692 8.11279 11.4214ZM8.11279 15.1137C7.9559 15.2662 7.86667 15.4742 7.86667 15.6923C7.86667 15.9104 7.9559 16.1184 8.11279 16.2709C8.26948 16.4231 8.48081 16.5077 8.7 16.5077H17.5667C17.7859 16.5077 17.9972 16.4231 18.1539 16.2709C18.3108 16.1184 18.4 15.9104 18.4 15.6923C18.4 15.4742 18.3108 15.2662 18.1539 15.1137C17.9972 14.9615 17.7859 14.8769 17.5667 14.8769H8.7C8.48081 14.8769 8.26948 14.9615 8.11279 15.1137ZM3.04612 18.806C2.88924 18.9585 2.8 19.1665 2.8 19.3846C2.8 19.6028 2.88924 19.8108 3.04612 19.9632C3.20282 20.1155 3.41415 20.2 3.63333 20.2H6.16667C6.38585 20.2 6.59718 20.1155 6.75388 19.9632C6.91076 19.8108 7 19.6028 7 19.3846C7 19.1665 6.91076 18.9585 6.75388 18.806C6.59718 18.6538 6.38585 18.5692 6.16667 18.5692H3.63333C3.41415 18.5692 3.20282 18.6538 3.04612 18.806ZM8.11279 18.806C7.9559 18.9585 7.86667 19.1665 7.86667 19.3846C7.86667 19.6028 7.9559 19.8108 8.11279 19.9632C8.26948 20.1155 8.48081 20.2 8.7 20.2H21.3667C21.5859 20.2 21.7972 20.1155 21.9539 19.9632C22.1108 19.8108 22.2 19.6028 22.2 19.3846C22.2 19.1665 22.1108 18.9585 21.9539 18.806C21.7972 18.6538 21.5859 18.5692 21.3667 18.5692H8.7C8.48081 18.5692 8.26948 18.6538 8.11279 18.806Z\"\r\n fill=\"#667085\" stroke=\"#667085\" stroke-width=\"0.4\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" ACT.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Activity Log\r\n </div>\r\n </div>\r\n </a></div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\">\r\n <ng-container [ngSwitch]=\"pageState\">\r\n <ng-container *ngSwitchCase=\"'loaded'\">\r\n <router-outlet></router-outlet>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\">\r\n <div class=\"shimmer-card w-100\">\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 </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n</div>", styles: [".sideheading{color:var(--Gray-700, #344054);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.card{border-radius:8px;padding:16px;flex-direction:column;align-items:flex-start}svg .fillpath{fill:#00a3ff!important}svg .fillstroke{stroke:#00a3ff!important}.text-tab{color:var(--Primary-700, #009BF3);font-size:16px;font-style:normal;font-weight:500;line-height:24px;border-radius:6px;background:var(--Primary-50, #EAF8FF)}.shimmer-card{border-radius:10px;background:#fff}.toastcard{border-left:2px solid #00A3FF;background:#fff;box-shadow:0 4px 16px #0000001a;padding:6px 12px 6px 16px;align-items:center;gap:16px;align-self:stretch;border-radius:4px}.overflow{overflow-x:scroll}.toasttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.needhelp{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:600!important;text-transform:capitalize}.daysleft{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:32px}.trail{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:28px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.productitem{right:545px!important}.productdrop{margin-top:12%;left:83%;z-index:10}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i7.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] });
1093
1093
  }
1094
1094
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoManageSettingsComponent, decorators: [{
1095
1095
  type: Component,
1096
- args: [{ selector: 'lib-tango-manage-settings', template: "<!-- client request card start -->\r\n<div class=\"g-4\">\r\n <div class=\"my-2 d-flex overflow\">\r\n <div *ngFor=\"let notification of notificationDetails.notificationList;let i= index;let last = last\"\r\n [ngClass]=\"notificationDetails.notificationList?.length === 2 ? 'col-6' : (notificationDetails.notificationList?.length > 2 ? 'col-4' : 'col-12')\">\r\n <div class=\"toastcard\" [ngClass]=\"!last ? 'me-4' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">{{notification.name}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\"\r\n *ngIf=\"notification.category === 'Trial' && notificationDetails.notificationList.length === 1&&userType ==='tango'\">\r\n <a type=\"submit\" (click)=\"approvetrial(notification,'cancel')\"\r\n class=\"btn-outline btn needhelp me-6\"><span class=\"mt-6\">Skip\r\n Trial</span></a><a type=\"button\" (click)=\"approvetrial(notification,'approve')\"\r\n tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n <div class=\"row mt-1\"\r\n *ngIf=\"notification.category === 'trial product' && notificationDetails.notificationList.length === 1\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"align-items-start justify-content-between daysleft my-2\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail\">\r\n Free trial</div>\r\n </div>\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"70\" viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n\r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\"\r\n stroke=\"#007bff\" stroke-width=\"8\" stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n\r\n <text id=\"percentage-text-{{i}}\" x=\"50\" y=\"54\" class=\"producttext\"\r\n text-anchor=\"middle\" fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n\r\n <a type=\"button\" tabindex=\"0\" (click)=\"subscribeproduct(notification,'subscription')\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"><span>Subscribe\r\n </span></a>\r\n <div class=\"position-relative\" *ngIf=\"userType==='tango'\">\r\n <div class=\"ms-5\" (click)=\"producttrailDropdown($event,i)\">\r\n <span class=\"justify-content-end cursor-pointer\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_14876_280367)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0013 21.834C22.4615 21.834 22.8346 21.4609 22.8346 21.0007C22.8346 20.5404 22.4615 20.1673 22.0013 20.1673C21.5411 20.1673 21.168 20.5404 21.168 21.0007C21.168 21.4609 21.5411 21.834 22.0013 21.834Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 16.0007C22.4615 16.0007 22.8346 15.6276 22.8346 15.1673C22.8346 14.7071 22.4615 14.334 22.0013 14.334C21.5411 14.334 21.168 14.7071 21.168 15.1673C21.168 15.6276 21.5411 16.0007 22.0013 16.0007Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 27.6673C22.4615 27.6673 22.8346 27.2942 22.8346 26.834C22.8346 26.3737 22.4615 26.0007 22.0013 26.0007C21.5411 26.0007 21.168 26.3737 21.168 26.834C21.168 27.2942 21.5411 27.6673 22.0013 27.6673Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_14876_280367\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <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\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_14876_280367\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_14876_280367\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute productdrop top-20 end-0\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\" class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification, 'unsubscribe')\">\r\n {{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex my-3\"\r\n *ngIf=\"notification.category === 'Trial' && notificationDetails.notificationList.length > 1&&userType ==='tango'\"><a\r\n type=\"submit\" (click)=\"approvetrial(notification,'cancel')\"\r\n class=\"btn-outline btn needhelp w-50 me-6 mt-3\"><span class=\"mt-6\">Skip\r\n Trial</span></a><a type=\"button\" (click)=\"approvetrial(notification,'approve')\"\r\n tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 w-50 ng-star-inserted\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n\r\n <div class=\"row mt-1\"\r\n *ngIf=\"notification.category === 'trial product' && notificationDetails.notificationList.length > 1\">\r\n <div class=\"col-lg-6 d-flex\">\r\n <div class=\"align-items-start justify-content-between daysleft my-2\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail\">\r\n Free trial</div>\r\n </div>\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"70\" viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n\r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#007bff\"\r\n stroke-width=\"8\" stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n\r\n <text id=\"percentage-text-{{i}}\" x=\"50\" y=\"54\" class=\"producttext\" text-anchor=\"middle\"\r\n fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 \">\r\n <div class=\"d-flex\" style=\"justify-content: end;\">\r\n <a type=\"button\" tabindex=\"0\" (click)=\"subscribeproduct(notification,'subscription')\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Subscribe\r\n </span></a>\r\n <div class=\"position-relative\" *ngIf=\"userType==='tango'\">\r\n <div class=\"ms-5 mt-4\" (click)=\"producttrailDropdown($event,i)\">\r\n <span class=\"justify-content-end cursor-pointer\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_14876_280367)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0013 21.834C22.4615 21.834 22.8346 21.4609 22.8346 21.0007C22.8346 20.5404 22.4615 20.1673 22.0013 20.1673C21.5411 20.1673 21.168 20.5404 21.168 21.0007C21.168 21.4609 21.5411 21.834 22.0013 21.834Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 16.0007C22.4615 16.0007 22.8346 15.6276 22.8346 15.1673C22.8346 14.7071 22.4615 14.334 22.0013 14.334C21.5411 14.334 21.168 14.7071 21.168 15.1673C21.168 15.6276 21.5411 16.0007 22.0013 16.0007Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 27.6673C22.4615 27.6673 22.8346 27.2942 22.8346 26.834C22.8346 26.3737 22.4615 26.0007 22.0013 26.0007C21.5411 26.0007 21.168 26.3737 21.168 26.834C21.168 27.2942 21.5411 27.6673 22.0013 27.6673Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_14876_280367\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <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\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_14876_280367\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_14876_280367\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute mt-17 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\" class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification, 'unsubscribe')\">\r\n {{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- <div [ngClass]=\"{\r\n 'col-md-4': type === 'trail',\r\n 'col-md-6': type !== 'trail',\r\n 'col-12': type === 'trail'\r\n }\" class=\"col-md-4 mb-5\">\r\n <div class=\"toastcard\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Client has Requested Tango Zone </span>\r\n </div>\r\n <div class=\"d-flex mb-2\"><a type=\"submit\" class=\"btn-outline btn needhelp w-50 me-6 mt-3\"><span\r\n class=\"mt-6\">Skip\r\n Trial</span></a><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 w-50 ng-star-inserted\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n </div>\r\n </div> -->\r\n</div>\r\n<!-- client request card end -->\r\n\r\n<!-- <div class=\"row gx-4 mb-4\">\r\n <div class=\"col-xl-6\" [ngClass]=\"i > 1? 'mt-5' : ''\"\r\n *ngFor=\"let notification of notificationDetails.notificationList;let i= index;\">\r\n <div 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\" *ngIf=\"notification.category === 'Trial'\">\r\n <div class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span class=\"badge-light-grey ms-2\">{{currentPlan |\r\n titlecase}}</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\" class=\"d-flex mt-15\"><a\r\n (click)=\"approvetrial(notification,'cancel')\" type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span class=\"mt-6\">Skip Trial</span></a><a\r\n (click)=\"approvetrial(notification,'approve')\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-11\" *ngIf=\"notification.category === 'unsubscribe'\">\r\n <div 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\" class=\"d-flex mt-20\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"\r\n (click)=\"cancelUnsubscribe(notification,'cancel')\"><span class=\"mt-6\">Cancel</span></a><a\r\n (click)=\"approveUnsubscribe(notification,'unsubscribe')\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-danger px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-10\" *ngIf=\"notification.category === 'trial product'\">\r\n <div class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span class=\"badge-light-grey ms-2\">{{currentPlan |\r\n titlecase}}</span>\r\n </div>\r\n <div class=\"subtext\">You will not be billed during your free\r\n <span class=\"subtextbold\">trial</span>.To keep your\r\n projects running after the trial end, upgrade to a paid\r\n option.\r\n </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\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n \r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n \r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#007bff\"\r\n stroke-width=\"8\" stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n \r\n <text id=\"percentage-text-{{i}}\" x=\"50\" y=\"54\" class=\"producttext\" text-anchor=\"middle\"\r\n fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n <div class=\"align-items-start justify-content-between daysleft ms-6 mt-3\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail mt-4 me-16\">\r\n Free trial</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-lg-4 mt-6\">\r\n <div class=\"position-relative\">\r\n <div (click)=\"producttrailDropdown($event,i)\">\r\n <span class=\"justify-content-end cursor-pointer ms-20\"><svg width=\"60\" height=\"60\"\r\n viewBox=\"0 0 60 60\" fill=\"none\" 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\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"55\" height=\"55\" rx=\"7.5\" 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\" stroke-width=\"2\" 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\" stroke-width=\"2\" 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\" y=\"0\" width=\"60\" height=\"60\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <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\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_5221_60143\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_5221_60143\" result=\"shape\" />\r\n </filter>\r\n <clipPath id=\"clip0_5221_60143\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\"\r\n transform=\"translate(18 17)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\" class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification)\">\r\n {{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 \r\n</div> -->\r\n\r\n\r\n\r\n\r\n<div class=\"row mb-5\">\r\n <div class=\"col-md-3\">\r\n <div class=\"card h-100\">\r\n <div class=\"m-0 w-100\">\r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/brand-detail\" routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"{exact: true}\" #BR=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"BR.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1842_19728)\">\r\n <path [ngClass]=\" BR.isActive ? 'fillpath' : ''\"\r\n d=\"M2.625 24C1.92881 24 1.26113 23.7234 0.768845 23.2312C0.276562 22.7389 0 22.0712 0 21.375L0 2.625C0 1.176 1.176 0 2.625 0H15.375C16.824 0 18 1.176 18 2.625V21.375C18 21.5025 17.991 21.627 17.973 21.75H21.375C21.4745 21.75 21.5698 21.7105 21.6402 21.6402C21.7105 21.5698 21.75 21.4745 21.75 21.375V12.4275C21.75 12.3658 21.7349 12.3051 21.7058 12.2506C21.6768 12.1962 21.6348 12.1498 21.5835 12.1155L20.001 11.061C19.8781 10.9791 19.7725 10.8737 19.6903 10.751C19.6081 10.6282 19.5509 10.4905 19.5219 10.3456C19.4929 10.2008 19.4928 10.0516 19.5215 9.90669C19.5501 9.76177 19.6071 9.62392 19.689 9.501C19.7709 9.37808 19.8763 9.27251 19.999 9.19031C20.1218 9.10811 20.2595 9.05089 20.4044 9.02191C20.5492 8.99294 20.6984 8.99279 20.8433 9.02145C20.9882 9.05012 21.1261 9.10706 21.249 9.189L22.8315 10.2435C23.562 10.731 24 11.55 24 12.4275V21.375C24 22.0712 23.7234 22.7389 23.2312 23.2312C22.7389 23.7234 22.0712 24 21.375 24H16.125C16.0252 23.9999 15.9259 23.9868 15.8295 23.961C15.681 23.9865 15.5295 24 15.375 24H10.875C10.5766 24 10.2905 23.8815 10.0795 23.6705C9.86853 23.4595 9.75 23.1734 9.75 22.875V21H8.25V22.875C8.25 23.1734 8.13147 23.4595 7.9205 23.6705C7.70952 23.8815 7.42337 24 7.125 24H2.625ZM2.25 21.375C2.25 21.582 2.418 21.75 2.625 21.75H6V19.875C6 19.5766 6.11853 19.2905 6.3295 19.0795C6.54048 18.8685 6.82663 18.75 7.125 18.75H10.875C11.1734 18.75 11.4595 18.8685 11.6705 19.0795C11.8815 19.2905 12 19.5766 12 19.875V21.75H15.375C15.4745 21.75 15.5698 21.7105 15.6402 21.6402C15.7105 21.5698 15.75 21.4745 15.75 21.375V2.625C15.75 2.52554 15.7105 2.43016 15.6402 2.35984C15.5698 2.28951 15.4745 2.25 15.375 2.25H2.625C2.52554 2.25 2.43016 2.28951 2.35984 2.35984C2.28951 2.43016 2.25 2.52554 2.25 2.625V21.375ZM5.625 9H6.375C6.67337 9 6.95952 9.11853 7.1705 9.3295C7.38147 9.54048 7.5 9.82663 7.5 10.125C7.5 10.4234 7.38147 10.7095 7.1705 10.9205C6.95952 11.1315 6.67337 11.25 6.375 11.25H5.625C5.32663 11.25 5.04048 11.1315 4.8295 10.9205C4.61853 10.7095 4.5 10.4234 4.5 10.125C4.5 9.82663 4.61853 9.54048 4.8295 9.3295C5.04048 9.11853 5.32663 9 5.625 9ZM4.5 5.625C4.5 5.32663 4.61853 5.04048 4.8295 4.8295C5.04048 4.61853 5.32663 4.5 5.625 4.5H6.375C6.67337 4.5 6.95952 4.61853 7.1705 4.8295C7.38147 5.04048 7.5 5.32663 7.5 5.625C7.5 5.92337 7.38147 6.20952 7.1705 6.4205C6.95952 6.63147 6.67337 6.75 6.375 6.75H5.625C5.32663 6.75 5.04048 6.63147 4.8295 6.4205C4.61853 6.20952 4.5 5.92337 4.5 5.625ZM10.5 10.125C10.5 9.82663 10.6185 9.54048 10.8295 9.3295C11.0405 9.11853 11.3266 9 11.625 9H12.375C12.6734 9 12.9595 9.11853 13.1705 9.3295C13.3815 9.54048 13.5 9.82663 13.5 10.125C13.5 10.4234 13.3815 10.7095 13.1705 10.9205C12.9595 11.1315 12.6734 11.25 12.375 11.25H11.625C11.3266 11.25 11.0405 11.1315 10.8295 10.9205C10.6185 10.7095 10.5 10.4234 10.5 10.125ZM11.625 4.5H12.375C12.6734 4.5 12.9595 4.61853 13.1705 4.8295C13.3815 5.04048 13.5 5.32663 13.5 5.625C13.5 5.92337 13.3815 6.20952 13.1705 6.4205C12.9595 6.63147 12.6734 6.75 12.375 6.75H11.625C11.3266 6.75 11.0405 6.63147 10.8295 6.4205C10.6185 6.20952 10.5 5.92337 10.5 5.625C10.5 5.32663 10.6185 5.04048 10.8295 4.8295C11.0405 4.61853 11.3266 4.5 11.625 4.5ZM4.5 14.625C4.5 14.3266 4.61853 14.0405 4.8295 13.8295C5.04048 13.6185 5.32663 13.5 5.625 13.5H6.375C6.67337 13.5 6.95952 13.6185 7.1705 13.8295C7.38147 14.0405 7.5 14.3266 7.5 14.625C7.5 14.9234 7.38147 15.2095 7.1705 15.4205C6.95952 15.6315 6.67337 15.75 6.375 15.75H5.625C5.32663 15.75 5.04048 15.6315 4.8295 15.4205C4.61853 15.2095 4.5 14.9234 4.5 14.625ZM11.625 13.5H12.375C12.6734 13.5 12.9595 13.6185 13.1705 13.8295C13.3815 14.0405 13.5 14.3266 13.5 14.625C13.5 14.9234 13.3815 15.2095 13.1705 15.4205C12.9595 15.6315 12.6734 15.75 12.375 15.75H11.625C11.3266 15.75 11.0405 15.6315 10.8295 15.4205C10.6185 15.2095 10.5 14.9234 10.5 14.625C10.5 14.3266 10.6185 14.0405 10.8295 13.8295C11.0405 13.6185 11.3266 13.5 11.625 13.5Z\"\r\n fill=\"#667085\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1842_19728\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" BR.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Brand Details\r\n </div>\r\n </div>\r\n </a></div>\r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/configuration\" routerLinkActive=\"active\" #CON=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"CON.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1842_19733)\">\r\n <path [ngClass]=\" CON.isActive ? 'fillstroke' : ''\"\r\n d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path [ngClass]=\" CON.isActive ? 'fillstroke' : ''\"\r\n d=\"M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1842_19733\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" CON.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">\r\n Configuration\r\n </div>\r\n </div>\r\n </a></div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/contact-directory\" routerLinkActive=\"active\"\r\n #CONDIR=\"routerLinkActive\" class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"CONDIR.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path [ngClass]=\"CONDIR.isActive ? 'fillstroke' : ''\"\r\n d=\"M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13M16 3.13C16.8604 3.3503 17.623 3.8507 18.1676 4.55231C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89317 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88M13 7C13 9.20914 11.2091 11 9 11C6.79086 11 5 9.20914 5 7C5 4.79086 6.79086 3 9 3C11.2091 3 13 4.79086 13 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" CONDIR.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Contact\r\n Directory</div>\r\n </div>\r\n </a></div>\r\n <ng-container *ngIf=\"!billingDisabled || (gs.userAccess | async)?.userType === 'tango'\">\r\n <div class=\"mb-3\"><a routerLink=\"/manage/settings/payment-subscription\" routerLinkActive=\"active\"\r\n #sa=\"routerLinkActive\" class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"sa.isActive ? 'btn text-tab' : ''\">\r\n <div class=\" me-4\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path [ngClass]=\"sa.isActive ? 'fillstroke' : ''\"\r\n d=\"M14.1755 4.22225C14.1766 2.99445 11.6731 2 8.58832 2C5.50357 2 3.00224 2.99557 3 4.22225M3 4.22225C3 5.45004 5.50133 6.44449 8.58832 6.44449C11.6753 6.44449 14.1766 5.45004 14.1766 4.22225L14.1766 12.8445M3 4.22225V17.5556C3.00112 18.7834 5.50245 19.7779 8.58832 19.7779C10.0849 19.7779 11.4361 19.5412 12.4387 19.1601M3.00112 8.66672C3.00112 9.89451 5.50245 10.889 8.58944 10.889C11.6764 10.889 14.1778 9.89451 14.1778 8.66672M12.5057 14.6946C11.4976 15.0891 10.115 15.3335 8.58832 15.3335C5.50245 15.3335 3.00112 14.3391 3.00112 13.1113M20.5272 13.4646C22.4909 15.4169 22.4909 18.5836 20.5272 20.5358C18.5635 22.4881 15.3781 22.4881 13.4144 20.5358C11.4507 18.5836 11.4507 15.4169 13.4144 13.4646C15.3781 11.5124 18.5635 11.5124 20.5272 13.4646Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column \">\r\n <div [ngClass]=\"sa.isActive ? 'text-tab' : ''\" class=\"sideheading mb-1\">Plans &\r\n Subscription</div>\r\n </div>\r\n </a></div>\r\n </ng-container>\r\n \r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/documents\" routerLinkActive=\"active\" #DOC=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"DOC.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path [ngClass]=\" DOC.isActive ? 'fillstroke' : ''\"\r\n d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8M14 2L20 8M14 2V8H20M16 13H8M16 17H8M10 9H8\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" DOC.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Documents\r\n </div>\r\n </div>\r\n </a></div>\r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/activity-logs\" routerLinkActive=\"active\" #ACT=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"ACT.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path [ngClass]=\" ACT.isActive ? 'fillstroke fillpath' : ''\"\r\n d=\"M18.1539 7.72911L18.0341 7.85239L18.1539 7.72911C17.9972 7.57686 17.7859 7.49231 17.5667 7.49231H8.7C8.48081 7.49231 8.26948 7.57686 8.11279 7.72911C7.9559 7.88155 7.86667 8.08955 7.86667 8.30769C7.86667 8.52583 7.9559 8.73383 8.11279 8.88627C8.26948 9.03853 8.48081 9.12308 8.7 9.12308H17.5667C17.7859 9.12308 17.9972 9.03853 18.1539 8.88627C18.3108 8.73383 18.4 8.52583 18.4 8.30769C18.4 8.08955 18.3108 7.88155 18.1539 7.72911ZM3.04612 4.0368C2.88924 4.18924 2.8 4.39725 2.8 4.61538C2.8 4.83352 2.88924 5.04152 3.04612 5.19397C3.20282 5.34622 3.41415 5.43077 3.63333 5.43077H6.16667C6.38585 5.43077 6.59718 5.34622 6.75388 5.19397C6.91076 5.04152 7 4.83352 7 4.61538C7 4.39725 6.91076 4.18924 6.75388 4.0368C6.59718 3.88455 6.38585 3.8 6.16667 3.8H3.63333C3.41415 3.8 3.20282 3.88455 3.04612 4.0368ZM8.11279 4.0368C7.9559 4.18924 7.86667 4.39725 7.86667 4.61538C7.86667 4.83352 7.9559 5.04152 8.11279 5.19397C8.26948 5.34622 8.48081 5.43077 8.7 5.43077H21.3667C21.5859 5.43077 21.7972 5.34622 21.9539 5.19397C22.1108 5.04152 22.2 4.83352 22.2 4.61538C22.2 4.39725 22.1108 4.18924 21.9539 4.0368C21.7972 3.88455 21.5859 3.8 21.3667 3.8H8.7C8.48081 3.8 8.26948 3.88455 8.11279 4.0368ZM3.04612 11.4214C2.88924 11.5739 2.8 11.7819 2.8 12C2.8 12.2181 2.88924 12.4261 3.04612 12.5786C3.20282 12.7308 3.41414 12.8154 3.63333 12.8154H6.16667C6.38586 12.8154 6.59718 12.7308 6.75388 12.5786C6.91076 12.4261 7 12.2181 7 12C7 11.7819 6.91076 11.5739 6.75388 11.4214C6.59718 11.2692 6.38585 11.1846 6.16667 11.1846H3.63333C3.41415 11.1846 3.20282 11.2692 3.04612 11.4214ZM8.11279 11.4214C7.9559 11.5739 7.86667 11.7819 7.86667 12C7.86667 12.2181 7.9559 12.4261 8.11279 12.5786C8.26948 12.7308 8.48081 12.8154 8.7 12.8154H21.3667C21.5859 12.8154 21.7972 12.7308 21.9539 12.5786C22.1108 12.4261 22.2 12.2181 22.2 12C22.2 11.7819 22.1108 11.5739 21.9539 11.4214C21.7972 11.2692 21.5859 11.1846 21.3667 11.1846H8.7C8.48081 11.1846 8.26948 11.2692 8.11279 11.4214ZM8.11279 15.1137C7.9559 15.2662 7.86667 15.4742 7.86667 15.6923C7.86667 15.9104 7.9559 16.1184 8.11279 16.2709C8.26948 16.4231 8.48081 16.5077 8.7 16.5077H17.5667C17.7859 16.5077 17.9972 16.4231 18.1539 16.2709C18.3108 16.1184 18.4 15.9104 18.4 15.6923C18.4 15.4742 18.3108 15.2662 18.1539 15.1137C17.9972 14.9615 17.7859 14.8769 17.5667 14.8769H8.7C8.48081 14.8769 8.26948 14.9615 8.11279 15.1137ZM3.04612 18.806C2.88924 18.9585 2.8 19.1665 2.8 19.3846C2.8 19.6028 2.88924 19.8108 3.04612 19.9632C3.20282 20.1155 3.41415 20.2 3.63333 20.2H6.16667C6.38585 20.2 6.59718 20.1155 6.75388 19.9632C6.91076 19.8108 7 19.6028 7 19.3846C7 19.1665 6.91076 18.9585 6.75388 18.806C6.59718 18.6538 6.38585 18.5692 6.16667 18.5692H3.63333C3.41415 18.5692 3.20282 18.6538 3.04612 18.806ZM8.11279 18.806C7.9559 18.9585 7.86667 19.1665 7.86667 19.3846C7.86667 19.6028 7.9559 19.8108 8.11279 19.9632C8.26948 20.1155 8.48081 20.2 8.7 20.2H21.3667C21.5859 20.2 21.7972 20.1155 21.9539 19.9632C22.1108 19.8108 22.2 19.6028 22.2 19.3846C22.2 19.1665 22.1108 18.9585 21.9539 18.806C21.7972 18.6538 21.5859 18.5692 21.3667 18.5692H8.7C8.48081 18.5692 8.26948 18.6538 8.11279 18.806Z\"\r\n fill=\"#667085\" stroke=\"#667085\" stroke-width=\"0.4\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" ACT.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Activity Log\r\n </div>\r\n </div>\r\n </a></div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\">\r\n <ng-container [ngSwitch]=\"pageState\">\r\n <ng-container *ngSwitchCase=\"'loaded'\">\r\n <router-outlet></router-outlet>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\">\r\n <div class=\"shimmer-card w-100\">\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 </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n</div>", styles: [".sideheading{color:var(--Gray-700, #344054);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.card{border-radius:8px;padding:16px;flex-direction:column;align-items:flex-start}svg .fillpath{fill:#00a3ff!important}svg .fillstroke{stroke:#00a3ff!important}.text-tab{color:var(--Primary-700, #009BF3);font-size:16px;font-style:normal;font-weight:500;line-height:24px;border-radius:6px;background:var(--Primary-50, #EAF8FF)}.shimmer-card{border-radius:10px;background:#fff}.toastcard{border-left:2px solid #00A3FF;background:#fff;box-shadow:0 4px 16px #0000001a;padding:6px 12px 6px 16px;align-items:center;gap:16px;align-self:stretch;border-radius:4px}.overflow{overflow-x:scroll}.toasttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.needhelp{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:600!important;text-transform:capitalize}.daysleft{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:32px}.trail{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:28px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.productitem{right:545px!important}.productdrop{margin-top:12%;left:83%;z-index:10}\n"] }]
1096
+ args: [{ selector: 'lib-tango-manage-settings', template: "<!-- client request card start -->\r\n<div class=\"g-4\">\r\n <div class=\"my-2 d-flex overflow\">\r\n <div *ngFor=\"let notification of notificationDetails.notificationList;let i= index;let last = last\"\r\n [ngClass]=\"notificationDetails.notificationList?.length === 2 ? 'col-6' : (notificationDetails.notificationList?.length > 2 ? 'col-4' : 'col-12')\">\r\n <div class=\"toastcard\" [ngClass]=\"!last ? 'me-4' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">{{notification.name}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\"\r\n *ngIf=\"notification.category === 'Trial' && notificationDetails.notificationList.length === 1&&userType ==='tango'\">\r\n <a type=\"submit\" (click)=\"approvetrial(notification,'cancel')\"\r\n class=\"btn-outline btn needhelp me-6\"><span class=\"mt-6\">Skip\r\n Trial</span></a><a type=\"button\" (click)=\"approvetrial(notification,'approve')\"\r\n tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n <div class=\"row mt-1\"\r\n *ngIf=\"notification.category === 'trial product' && notificationDetails.notificationList.length === 1\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"align-items-start justify-content-between daysleft my-2\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail\">\r\n Free trial</div>\r\n </div>\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"70\" viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n\r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\"\r\n stroke=\"#007bff\" stroke-width=\"8\" stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n\r\n <text id=\"percentage-text-{{i}}\" x=\"50\" y=\"54\" class=\"producttext\"\r\n text-anchor=\"middle\" fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n\r\n <a type=\"button\" tabindex=\"0\" (click)=\"subscribeproduct(notification,'subscription')\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"><span>Subscribe\r\n </span></a>\r\n <div class=\"position-relative\" *ngIf=\"userType==='tango'\">\r\n <div class=\"ms-5\" (click)=\"producttrailDropdown($event,i)\">\r\n <span class=\"justify-content-end cursor-pointer\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_14876_280367)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0013 21.834C22.4615 21.834 22.8346 21.4609 22.8346 21.0007C22.8346 20.5404 22.4615 20.1673 22.0013 20.1673C21.5411 20.1673 21.168 20.5404 21.168 21.0007C21.168 21.4609 21.5411 21.834 22.0013 21.834Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 16.0007C22.4615 16.0007 22.8346 15.6276 22.8346 15.1673C22.8346 14.7071 22.4615 14.334 22.0013 14.334C21.5411 14.334 21.168 14.7071 21.168 15.1673C21.168 15.6276 21.5411 16.0007 22.0013 16.0007Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 27.6673C22.4615 27.6673 22.8346 27.2942 22.8346 26.834C22.8346 26.3737 22.4615 26.0007 22.0013 26.0007C21.5411 26.0007 21.168 26.3737 21.168 26.834C21.168 27.2942 21.5411 27.6673 22.0013 27.6673Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_14876_280367\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <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\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_14876_280367\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_14876_280367\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute productdrop top-20 end-0\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\" class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification, 'unsubscribe')\">\r\n {{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex my-3\"\r\n *ngIf=\"notification.category === 'Trial' && notificationDetails.notificationList.length > 1&&userType ==='tango'\"><a\r\n type=\"submit\" (click)=\"approvetrial(notification,'cancel')\"\r\n class=\"btn-outline btn needhelp w-50 me-6 mt-3\"><span class=\"mt-6\">Skip\r\n Trial</span></a><a type=\"button\" (click)=\"approvetrial(notification,'approve')\"\r\n tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 w-50 ng-star-inserted\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n\r\n <div class=\"row mt-1\"\r\n *ngIf=\"notification.category === 'trial product' && notificationDetails.notificationList.length > 1\">\r\n <div class=\"col-lg-6 d-flex\">\r\n <div class=\"align-items-start justify-content-between daysleft my-2\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail\">\r\n Free trial</div>\r\n </div>\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"70\" viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n\r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#007bff\"\r\n stroke-width=\"8\" stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n\r\n <text id=\"percentage-text-{{i}}\" x=\"50\" y=\"54\" class=\"producttext\" text-anchor=\"middle\"\r\n fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 \">\r\n <div class=\"d-flex\" style=\"justify-content: end;\">\r\n <a type=\"button\" tabindex=\"0\" (click)=\"subscribeproduct(notification,'subscription')\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Subscribe\r\n </span></a>\r\n <div class=\"position-relative\" *ngIf=\"userType==='tango'\">\r\n <div class=\"ms-5 mt-4\" (click)=\"producttrailDropdown($event,i)\">\r\n <span class=\"justify-content-end cursor-pointer\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_14876_280367)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0013 21.834C22.4615 21.834 22.8346 21.4609 22.8346 21.0007C22.8346 20.5404 22.4615 20.1673 22.0013 20.1673C21.5411 20.1673 21.168 20.5404 21.168 21.0007C21.168 21.4609 21.5411 21.834 22.0013 21.834Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 16.0007C22.4615 16.0007 22.8346 15.6276 22.8346 15.1673C22.8346 14.7071 22.4615 14.334 22.0013 14.334C21.5411 14.334 21.168 14.7071 21.168 15.1673C21.168 15.6276 21.5411 16.0007 22.0013 16.0007Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M22.0013 27.6673C22.4615 27.6673 22.8346 27.2942 22.8346 26.834C22.8346 26.3737 22.4615 26.0007 22.0013 26.0007C21.5411 26.0007 21.168 26.3737 21.168 26.834C21.168 27.2942 21.5411 27.6673 22.0013 27.6673Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_14876_280367\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <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\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_14876_280367\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_14876_280367\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute mt-17 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\" class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification, 'unsubscribe')\">\r\n {{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- <div [ngClass]=\"{\r\n 'col-md-4': type === 'trail',\r\n 'col-md-6': type !== 'trail',\r\n 'col-12': type === 'trail'\r\n }\" class=\"col-md-4 mb-5\">\r\n <div class=\"toastcard\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Client has Requested Tango Zone </span>\r\n </div>\r\n <div class=\"d-flex mb-2\"><a type=\"submit\" class=\"btn-outline btn needhelp w-50 me-6 mt-3\"><span\r\n class=\"mt-6\">Skip\r\n Trial</span></a><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 w-50 ng-star-inserted\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n </div>\r\n </div> -->\r\n</div>\r\n<!-- client request card end -->\r\n\r\n<!-- <div class=\"row gx-4 mb-4\">\r\n <div class=\"col-xl-6\" [ngClass]=\"i > 1? 'mt-5' : ''\"\r\n *ngFor=\"let notification of notificationDetails.notificationList;let i= index;\">\r\n <div 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\" *ngIf=\"notification.category === 'Trial'\">\r\n <div class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span class=\"badge-light-grey ms-2\">{{currentPlan |\r\n titlecase}}</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\" class=\"d-flex mt-15\"><a\r\n (click)=\"approvetrial(notification,'cancel')\" type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span class=\"mt-6\">Skip Trial</span></a><a\r\n (click)=\"approvetrial(notification,'approve')\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n Trial\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-11\" *ngIf=\"notification.category === 'unsubscribe'\">\r\n <div 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\" class=\"d-flex mt-20\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"\r\n (click)=\"cancelUnsubscribe(notification,'cancel')\"><span class=\"mt-6\">Cancel</span></a><a\r\n (click)=\"approveUnsubscribe(notification,'unsubscribe')\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-danger px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-10\" *ngIf=\"notification.category === 'trial product'\">\r\n <div class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span class=\"badge-light-grey ms-2\">{{currentPlan |\r\n titlecase}}</span>\r\n </div>\r\n <div class=\"subtext\">You will not be billed during your free\r\n <span class=\"subtextbold\">trial</span>.To keep your\r\n projects running after the trial end, upgrade to a paid\r\n option.\r\n </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\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n \r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n \r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#007bff\"\r\n stroke-width=\"8\" stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n \r\n <text id=\"percentage-text-{{i}}\" x=\"50\" y=\"54\" class=\"producttext\" text-anchor=\"middle\"\r\n fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n <div class=\"align-items-start justify-content-between daysleft ms-6 mt-3\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail mt-4 me-16\">\r\n Free trial</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-lg-4 mt-6\">\r\n <div class=\"position-relative\">\r\n <div (click)=\"producttrailDropdown($event,i)\">\r\n <span class=\"justify-content-end cursor-pointer ms-20\"><svg width=\"60\" height=\"60\"\r\n viewBox=\"0 0 60 60\" fill=\"none\" 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\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"55\" height=\"55\" rx=\"7.5\" 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\" stroke-width=\"2\" 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\" stroke-width=\"2\" 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\" y=\"0\" width=\"60\" height=\"60\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <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\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_5221_60143\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_5221_60143\" result=\"shape\" />\r\n </filter>\r\n <clipPath id=\"clip0_5221_60143\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\"\r\n transform=\"translate(18 17)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\" class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification)\">\r\n {{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 \r\n</div> -->\r\n\r\n\r\n\r\n\r\n<div class=\"row mb-5\">\r\n <div class=\"col-md-3\">\r\n <div class=\"card h-100\">\r\n <div class=\"m-0 w-100\">\r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/brand-detail\" routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"{exact: true}\" #BR=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"BR.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1842_19728)\">\r\n <path [ngClass]=\" BR.isActive ? 'fillpath' : ''\"\r\n d=\"M2.625 24C1.92881 24 1.26113 23.7234 0.768845 23.2312C0.276562 22.7389 0 22.0712 0 21.375L0 2.625C0 1.176 1.176 0 2.625 0H15.375C16.824 0 18 1.176 18 2.625V21.375C18 21.5025 17.991 21.627 17.973 21.75H21.375C21.4745 21.75 21.5698 21.7105 21.6402 21.6402C21.7105 21.5698 21.75 21.4745 21.75 21.375V12.4275C21.75 12.3658 21.7349 12.3051 21.7058 12.2506C21.6768 12.1962 21.6348 12.1498 21.5835 12.1155L20.001 11.061C19.8781 10.9791 19.7725 10.8737 19.6903 10.751C19.6081 10.6282 19.5509 10.4905 19.5219 10.3456C19.4929 10.2008 19.4928 10.0516 19.5215 9.90669C19.5501 9.76177 19.6071 9.62392 19.689 9.501C19.7709 9.37808 19.8763 9.27251 19.999 9.19031C20.1218 9.10811 20.2595 9.05089 20.4044 9.02191C20.5492 8.99294 20.6984 8.99279 20.8433 9.02145C20.9882 9.05012 21.1261 9.10706 21.249 9.189L22.8315 10.2435C23.562 10.731 24 11.55 24 12.4275V21.375C24 22.0712 23.7234 22.7389 23.2312 23.2312C22.7389 23.7234 22.0712 24 21.375 24H16.125C16.0252 23.9999 15.9259 23.9868 15.8295 23.961C15.681 23.9865 15.5295 24 15.375 24H10.875C10.5766 24 10.2905 23.8815 10.0795 23.6705C9.86853 23.4595 9.75 23.1734 9.75 22.875V21H8.25V22.875C8.25 23.1734 8.13147 23.4595 7.9205 23.6705C7.70952 23.8815 7.42337 24 7.125 24H2.625ZM2.25 21.375C2.25 21.582 2.418 21.75 2.625 21.75H6V19.875C6 19.5766 6.11853 19.2905 6.3295 19.0795C6.54048 18.8685 6.82663 18.75 7.125 18.75H10.875C11.1734 18.75 11.4595 18.8685 11.6705 19.0795C11.8815 19.2905 12 19.5766 12 19.875V21.75H15.375C15.4745 21.75 15.5698 21.7105 15.6402 21.6402C15.7105 21.5698 15.75 21.4745 15.75 21.375V2.625C15.75 2.52554 15.7105 2.43016 15.6402 2.35984C15.5698 2.28951 15.4745 2.25 15.375 2.25H2.625C2.52554 2.25 2.43016 2.28951 2.35984 2.35984C2.28951 2.43016 2.25 2.52554 2.25 2.625V21.375ZM5.625 9H6.375C6.67337 9 6.95952 9.11853 7.1705 9.3295C7.38147 9.54048 7.5 9.82663 7.5 10.125C7.5 10.4234 7.38147 10.7095 7.1705 10.9205C6.95952 11.1315 6.67337 11.25 6.375 11.25H5.625C5.32663 11.25 5.04048 11.1315 4.8295 10.9205C4.61853 10.7095 4.5 10.4234 4.5 10.125C4.5 9.82663 4.61853 9.54048 4.8295 9.3295C5.04048 9.11853 5.32663 9 5.625 9ZM4.5 5.625C4.5 5.32663 4.61853 5.04048 4.8295 4.8295C5.04048 4.61853 5.32663 4.5 5.625 4.5H6.375C6.67337 4.5 6.95952 4.61853 7.1705 4.8295C7.38147 5.04048 7.5 5.32663 7.5 5.625C7.5 5.92337 7.38147 6.20952 7.1705 6.4205C6.95952 6.63147 6.67337 6.75 6.375 6.75H5.625C5.32663 6.75 5.04048 6.63147 4.8295 6.4205C4.61853 6.20952 4.5 5.92337 4.5 5.625ZM10.5 10.125C10.5 9.82663 10.6185 9.54048 10.8295 9.3295C11.0405 9.11853 11.3266 9 11.625 9H12.375C12.6734 9 12.9595 9.11853 13.1705 9.3295C13.3815 9.54048 13.5 9.82663 13.5 10.125C13.5 10.4234 13.3815 10.7095 13.1705 10.9205C12.9595 11.1315 12.6734 11.25 12.375 11.25H11.625C11.3266 11.25 11.0405 11.1315 10.8295 10.9205C10.6185 10.7095 10.5 10.4234 10.5 10.125ZM11.625 4.5H12.375C12.6734 4.5 12.9595 4.61853 13.1705 4.8295C13.3815 5.04048 13.5 5.32663 13.5 5.625C13.5 5.92337 13.3815 6.20952 13.1705 6.4205C12.9595 6.63147 12.6734 6.75 12.375 6.75H11.625C11.3266 6.75 11.0405 6.63147 10.8295 6.4205C10.6185 6.20952 10.5 5.92337 10.5 5.625C10.5 5.32663 10.6185 5.04048 10.8295 4.8295C11.0405 4.61853 11.3266 4.5 11.625 4.5ZM4.5 14.625C4.5 14.3266 4.61853 14.0405 4.8295 13.8295C5.04048 13.6185 5.32663 13.5 5.625 13.5H6.375C6.67337 13.5 6.95952 13.6185 7.1705 13.8295C7.38147 14.0405 7.5 14.3266 7.5 14.625C7.5 14.9234 7.38147 15.2095 7.1705 15.4205C6.95952 15.6315 6.67337 15.75 6.375 15.75H5.625C5.32663 15.75 5.04048 15.6315 4.8295 15.4205C4.61853 15.2095 4.5 14.9234 4.5 14.625ZM11.625 13.5H12.375C12.6734 13.5 12.9595 13.6185 13.1705 13.8295C13.3815 14.0405 13.5 14.3266 13.5 14.625C13.5 14.9234 13.3815 15.2095 13.1705 15.4205C12.9595 15.6315 12.6734 15.75 12.375 15.75H11.625C11.3266 15.75 11.0405 15.6315 10.8295 15.4205C10.6185 15.2095 10.5 14.9234 10.5 14.625C10.5 14.3266 10.6185 14.0405 10.8295 13.8295C11.0405 13.6185 11.3266 13.5 11.625 13.5Z\"\r\n fill=\"#667085\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1842_19728\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" BR.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Brand Details\r\n </div>\r\n </div>\r\n </a></div>\r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/configuration\" routerLinkActive=\"active\" #CON=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"CON.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1842_19733)\">\r\n <path [ngClass]=\" CON.isActive ? 'fillstroke' : ''\"\r\n d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path [ngClass]=\" CON.isActive ? 'fillstroke' : ''\"\r\n d=\"M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1842_19733\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" CON.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">\r\n Configuration\r\n </div>\r\n </div>\r\n </a></div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/contact-directory\" routerLinkActive=\"active\"\r\n #CONDIR=\"routerLinkActive\" class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"CONDIR.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path [ngClass]=\"CONDIR.isActive ? 'fillstroke' : ''\"\r\n d=\"M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13M16 3.13C16.8604 3.3503 17.623 3.8507 18.1676 4.55231C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89317 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88M13 7C13 9.20914 11.2091 11 9 11C6.79086 11 5 9.20914 5 7C5 4.79086 6.79086 3 9 3C11.2091 3 13 4.79086 13 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" CONDIR.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Contact\r\n Directory</div>\r\n </div>\r\n </a></div>\r\n <!-- <ng-container *ngIf=\"!billingDisabled || (gs.userAccess | async)?.userType === 'tango'\">\r\n <div class=\"mb-3\"><a routerLink=\"/manage/settings/payment-subscription\" routerLinkActive=\"active\"\r\n #sa=\"routerLinkActive\" class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"sa.isActive ? 'btn text-tab' : ''\">\r\n <div class=\" me-4\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path [ngClass]=\"sa.isActive ? 'fillstroke' : ''\"\r\n d=\"M14.1755 4.22225C14.1766 2.99445 11.6731 2 8.58832 2C5.50357 2 3.00224 2.99557 3 4.22225M3 4.22225C3 5.45004 5.50133 6.44449 8.58832 6.44449C11.6753 6.44449 14.1766 5.45004 14.1766 4.22225L14.1766 12.8445M3 4.22225V17.5556C3.00112 18.7834 5.50245 19.7779 8.58832 19.7779C10.0849 19.7779 11.4361 19.5412 12.4387 19.1601M3.00112 8.66672C3.00112 9.89451 5.50245 10.889 8.58944 10.889C11.6764 10.889 14.1778 9.89451 14.1778 8.66672M12.5057 14.6946C11.4976 15.0891 10.115 15.3335 8.58832 15.3335C5.50245 15.3335 3.00112 14.3391 3.00112 13.1113M20.5272 13.4646C22.4909 15.4169 22.4909 18.5836 20.5272 20.5358C18.5635 22.4881 15.3781 22.4881 13.4144 20.5358C11.4507 18.5836 11.4507 15.4169 13.4144 13.4646C15.3781 11.5124 18.5635 11.5124 20.5272 13.4646Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column \">\r\n <div [ngClass]=\"sa.isActive ? 'text-tab' : ''\" class=\"sideheading mb-1\">Plans &\r\n Subscription</div>\r\n </div>\r\n </a></div>\r\n </ng-container> -->\r\n \r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/documents\" routerLinkActive=\"active\" #DOC=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"DOC.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path [ngClass]=\" DOC.isActive ? 'fillstroke' : ''\"\r\n d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8M14 2L20 8M14 2V8H20M16 13H8M16 17H8M10 9H8\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" DOC.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Documents\r\n </div>\r\n </div>\r\n </a></div>\r\n <div class=\"mb-3\"><a\r\n routerLink=\"/manage/settings/activity-logs\" routerLinkActive=\"active\" #ACT=\"routerLinkActive\"\r\n class=\"custom-list d-flex align-items-center px-5 py-4\"\r\n [ngClass]=\"ACT.isActive ? 'btn text-tab' : ''\">\r\n <div class=\"me-4\"><span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path [ngClass]=\" ACT.isActive ? 'fillstroke fillpath' : ''\"\r\n d=\"M18.1539 7.72911L18.0341 7.85239L18.1539 7.72911C17.9972 7.57686 17.7859 7.49231 17.5667 7.49231H8.7C8.48081 7.49231 8.26948 7.57686 8.11279 7.72911C7.9559 7.88155 7.86667 8.08955 7.86667 8.30769C7.86667 8.52583 7.9559 8.73383 8.11279 8.88627C8.26948 9.03853 8.48081 9.12308 8.7 9.12308H17.5667C17.7859 9.12308 17.9972 9.03853 18.1539 8.88627C18.3108 8.73383 18.4 8.52583 18.4 8.30769C18.4 8.08955 18.3108 7.88155 18.1539 7.72911ZM3.04612 4.0368C2.88924 4.18924 2.8 4.39725 2.8 4.61538C2.8 4.83352 2.88924 5.04152 3.04612 5.19397C3.20282 5.34622 3.41415 5.43077 3.63333 5.43077H6.16667C6.38585 5.43077 6.59718 5.34622 6.75388 5.19397C6.91076 5.04152 7 4.83352 7 4.61538C7 4.39725 6.91076 4.18924 6.75388 4.0368C6.59718 3.88455 6.38585 3.8 6.16667 3.8H3.63333C3.41415 3.8 3.20282 3.88455 3.04612 4.0368ZM8.11279 4.0368C7.9559 4.18924 7.86667 4.39725 7.86667 4.61538C7.86667 4.83352 7.9559 5.04152 8.11279 5.19397C8.26948 5.34622 8.48081 5.43077 8.7 5.43077H21.3667C21.5859 5.43077 21.7972 5.34622 21.9539 5.19397C22.1108 5.04152 22.2 4.83352 22.2 4.61538C22.2 4.39725 22.1108 4.18924 21.9539 4.0368C21.7972 3.88455 21.5859 3.8 21.3667 3.8H8.7C8.48081 3.8 8.26948 3.88455 8.11279 4.0368ZM3.04612 11.4214C2.88924 11.5739 2.8 11.7819 2.8 12C2.8 12.2181 2.88924 12.4261 3.04612 12.5786C3.20282 12.7308 3.41414 12.8154 3.63333 12.8154H6.16667C6.38586 12.8154 6.59718 12.7308 6.75388 12.5786C6.91076 12.4261 7 12.2181 7 12C7 11.7819 6.91076 11.5739 6.75388 11.4214C6.59718 11.2692 6.38585 11.1846 6.16667 11.1846H3.63333C3.41415 11.1846 3.20282 11.2692 3.04612 11.4214ZM8.11279 11.4214C7.9559 11.5739 7.86667 11.7819 7.86667 12C7.86667 12.2181 7.9559 12.4261 8.11279 12.5786C8.26948 12.7308 8.48081 12.8154 8.7 12.8154H21.3667C21.5859 12.8154 21.7972 12.7308 21.9539 12.5786C22.1108 12.4261 22.2 12.2181 22.2 12C22.2 11.7819 22.1108 11.5739 21.9539 11.4214C21.7972 11.2692 21.5859 11.1846 21.3667 11.1846H8.7C8.48081 11.1846 8.26948 11.2692 8.11279 11.4214ZM8.11279 15.1137C7.9559 15.2662 7.86667 15.4742 7.86667 15.6923C7.86667 15.9104 7.9559 16.1184 8.11279 16.2709C8.26948 16.4231 8.48081 16.5077 8.7 16.5077H17.5667C17.7859 16.5077 17.9972 16.4231 18.1539 16.2709C18.3108 16.1184 18.4 15.9104 18.4 15.6923C18.4 15.4742 18.3108 15.2662 18.1539 15.1137C17.9972 14.9615 17.7859 14.8769 17.5667 14.8769H8.7C8.48081 14.8769 8.26948 14.9615 8.11279 15.1137ZM3.04612 18.806C2.88924 18.9585 2.8 19.1665 2.8 19.3846C2.8 19.6028 2.88924 19.8108 3.04612 19.9632C3.20282 20.1155 3.41415 20.2 3.63333 20.2H6.16667C6.38585 20.2 6.59718 20.1155 6.75388 19.9632C6.91076 19.8108 7 19.6028 7 19.3846C7 19.1665 6.91076 18.9585 6.75388 18.806C6.59718 18.6538 6.38585 18.5692 6.16667 18.5692H3.63333C3.41415 18.5692 3.20282 18.6538 3.04612 18.806ZM8.11279 18.806C7.9559 18.9585 7.86667 19.1665 7.86667 19.3846C7.86667 19.6028 7.9559 19.8108 8.11279 19.9632C8.26948 20.1155 8.48081 20.2 8.7 20.2H21.3667C21.5859 20.2 21.7972 20.1155 21.9539 19.9632C22.1108 19.8108 22.2 19.6028 22.2 19.3846C22.2 19.1665 22.1108 18.9585 21.9539 18.806C21.7972 18.6538 21.5859 18.5692 21.3667 18.5692H8.7C8.48081 18.5692 8.26948 18.6538 8.11279 18.806Z\"\r\n fill=\"#667085\" stroke=\"#667085\" stroke-width=\"0.4\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div [ngClass]=\" ACT.isActive ? ' text-tab' : ''\" class=\"sideheading mb-1\">Activity Log\r\n </div>\r\n </div>\r\n </a></div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <ng-container *ngIf=\"pageState$ | async as pageState\">\r\n <ng-container [ngSwitch]=\"pageState\">\r\n <ng-container *ngSwitchCase=\"'loaded'\">\r\n <router-outlet></router-outlet>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\">\r\n <div class=\"shimmer-card w-100\">\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 </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n</div>", styles: [".sideheading{color:var(--Gray-700, #344054);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.card{border-radius:8px;padding:16px;flex-direction:column;align-items:flex-start}svg .fillpath{fill:#00a3ff!important}svg .fillstroke{stroke:#00a3ff!important}.text-tab{color:var(--Primary-700, #009BF3);font-size:16px;font-style:normal;font-weight:500;line-height:24px;border-radius:6px;background:var(--Primary-50, #EAF8FF)}.shimmer-card{border-radius:10px;background:#fff}.toastcard{border-left:2px solid #00A3FF;background:#fff;box-shadow:0 4px 16px #0000001a;padding:6px 12px 6px 16px;align-items:center;gap:16px;align-self:stretch;border-radius:4px}.overflow{overflow-x:scroll}.toasttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.needhelp{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:600!important;text-transform:capitalize}.daysleft{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:32px}.trail{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:28px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.productitem{right:545px!important}.productdrop{margin-top:12%;left:83%;z-index:10}\n"] }]
1097
1097
  }], ctorParameters: () => [{ type: i3.PageInfoService }, { type: ClientApiService }, { type: i3.GlobalStateService }, { type: PaymentSubscriptionService }, { type: i0.ChangeDetectorRef }, { type: i4.ToastService }, { type: i1$1.NgbModal }], propDecorators: { onDocumentClick: [{
1098
1098
  type: HostListener,
1099
1099
  args: ['document:click', ['$event']]
@@ -8800,11 +8800,11 @@ class FootfallConfigurationComponent {
8800
8800
  return match?.label || '';
8801
8801
  }
8802
8802
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FootfallConfigurationComponent, deps: [{ token: i1$2.FormBuilder }, { token: i3.GlobalStateService }, { token: ClientApiService }, { token: i1$1.NgbModal }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
8803
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FootfallConfigurationComponent, selector: "lib-footfall-configuration", host: { listeners: { "document:click": "closeMenus()" } }, viewQueries: [{ propertyName: "categoryModalTpl", first: true, predicate: ["categoryModal"], descendants: true }, { propertyName: "deleteCategoryModalTpl", first: true, predicate: ["deleteCategoryModal"], descendants: true }, { propertyName: "resetConfirmationModalTpl", first: true, predicate: ["resetConfirmationModal"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"footfallDirConfigurationForm\" class=\"container-fluid\">\n <ng-container *ngIf=\"(gs.userAccess | async)?.Global_Configuration_isEdit\">\n <div *ngIf=\"isEdit\" class=\"col-12 mb-5\">\n <div class=\"d-flex justify-content-end\">\n <button (click)=\"toggleForm();\" type=\"button\" class=\"btn btn-outline py-3 align-items-end\">\n <span class=\"me-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <g clip-path=\"url(#clip0_2579_25125)\">\n <path\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\"\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_2579_25125\">\n <rect width=\"20\" height=\"20\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>Edit Details\n </button>\n </div>\n </div>\n </ng-container>\n\n <!-- Approver Configuration -->\n <div class=\"card p-4 mb-4 ff-section-card\">\n <h5 class=\"ff-section-title mb-1\">Approver configuration</h5>\n <p class=\"ff-section-desc mb-4\">\n Set level of revisions required for a store raised tickets\n </p>\n\n <div formArrayName=\"revision\" class=\"d-flex flex-wrap gap-5\">\n <div *ngFor=\"let rev of revisionArray.controls; let i = index\" [formGroupName]=\"i\"\n class=\"approver-option d-flex flex-column\"\n [class.disabled-option]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\n\n <label class=\"custom-checkbox align-items-start\"\n [class.disabled-checkbox]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\n <input type=\"checkbox\" formControlName=\"isChecked\" [id]=\"'action-' + i\" />\n <span class=\"checkmark\"></span>\n <div class=\"label-text\">\n <div class=\"title\">\n {{ rev.get('actionType')?.value | titlecase }}\n </div>\n <div class=\"desc text-muted\">\n <ng-container [ngSwitch]=\"rev.get('actionType')?.value\">\n <span *ngSwitchCase=\"'reviewer'\">The ticket undergoes a single review to verify\n footfall.</span>\n <span *ngSwitchCase=\"'approver'\">The ticket undergoes a final review after the initial\n check.</span>\n <span *ngSwitchCase=\"'tango'\">Finalize tickets and update footfall count.</span>\n </ng-container>\n </div>\n </div>\n </label>\n\n </div>\n </div>\n </div>\n\n <hr class=\"ff-divider\">\n\n <!-- Store SPOC Ticket Creation -->\n <div class=\"card p-4 mb-4 ff-section-card\">\n <h5 class=\"ff-section-title mb-3\">Store SPOC Ticket Creation</h5>\n\n <div class=\"d-flex align-items-center flex-wrap gap-2\">\n <label class=\"mb-0\">\n Allow store SPOC to create tickets only for the last\n </label>\n\n <div class=\"position-relative ff-select-wrapper compact ms-2\"\n [class.open]=\"isAllowTicketCreationDropdownOpen\" [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\"\n (click)=\"toggleAllowTicketCreationDropdown($event)\">\n <span>{{ footfallDirConfigurationForm.get('allowTicketCreation')?.value ||\n spocTicketCreationdays[0] }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isAllowTicketCreationDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let day of spocTicketCreationdays\"\n (click)=\"selectAllowTicketCreation($event, day)\">\n {{ day }}\n </button>\n </div>\n </div>\n\n <span class=\"mb-0\">Days</span>\n </div>\n </div>\n\n <hr class=\"ff-divider\">\n\n <!-- Ticket Auto-close -->\n <div class=\"card p-4 mb-4 ff-section-card\">\n <div class=\"d-flex align-items-center mb-2\">\n <h5 class=\"ff-section-title m-0\">Ticket Auto-close</h5>\n\n <label class=\"switch m-0 ms-3\" [class.disabled]=\"isEdit\">\n <input type=\"checkbox\" formControlName=\"isAutoCloseEnable\" [disabled]=\"isEdit\">\n <span class=\"slider round\"></span>\n </label>\n </div>\n\n <div class=\"d-flex align-items-center mt-2\">\n <span class=\"mb-0\">\n Ticket should be auto-closed, if the created ticket accuracy is greater than or equal to\n </span>\n\n <div class=\"position-relative ff-select-wrapper compact ms-2\" [class.open]=\"isAutoCloseDropdownOpen\"\n [class.disabled]=\"isEdit || !footfallDirConfigurationForm.get('isAutoCloseEnable')?.value\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleAutoCloseDropdown($event)\">\n <span>{{ footfallDirConfigurationForm.get('autoCloseAccuracy')?.value || '1%' }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isAutoCloseDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of accuracyPercentageList\"\n (click)=\"selectAutoCloseAccuracy($event, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <hr class=\"ff-divider\">\n\n <!-- Footfall Directory Limitations -->\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\n <div>\n <h5 class=\"ff-section-title m-0\">Footfall directory limitations</h5>\n <p class=\"ff-section-desc mb-2\">\n Set maximum limitation for stores to tag non-Purchasers from Total Footfall\n </p>\n </div>\n\n <button type=\"button\" [disabled]=\"isEdit\" class=\"add-new-btn d-inline-flex align-items-center gap-2\"\n (click)=\"openCategoryModal('add')\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3.33334V12.6667M3.33334 8H12.6667\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <span>Add New</span>\n </button>\n </div>\n\n <!-- Category Cards Grid -->\n <div formArrayName=\"taggingLimitation\" class=\"category-grid mt-3\">\n <div *ngFor=\"let tag of tagLimits.controls; let i = index\" [formGroupName]=\"i\" class=\"category-card\">\n <div class=\"category-card-header\">\n <div class=\"category-icon\" [ngClass]=\"tag.get('iconName')?.value\">\n <ng-container [ngSwitch]=\"tag.get('iconName')?.value\">\n <svg *ngSwitchCase=\"'duplicateTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\n height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <g clip-path=\"url(#clip0_1162_24621)\">\n <path\n d=\"M2.5 7.5H2C1.73478 7.5 1.48043 7.39464 1.29289 7.20711C1.10536 7.01957 1 6.76522 1 6.5V2C1 1.73478 1.10536 1.48043 1.29289 1.29289C1.48043 1.10536 1.73478 1 2 1H6.5C6.76522 1 7.01957 1.10536 7.20711 1.29289C7.39464 1.48043 7.5 1.73478 7.5 2V2.5M5.5 4.5H10C10.5523 4.5 11 4.94772 11 5.5V10C11 10.5523 10.5523 11 10 11H5.5C4.94772 11 4.5 10.5523 4.5 10V5.5C4.5 4.94772 4.94772 4.5 5.5 4.5Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1162_24621\">\n <rect width=\"12\" height=\"12\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n\n <svg *ngSwitchCase=\"'employeeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\n height=\"13\" viewBox=\"0 0 16 13\" fill=\"none\">\n <path\n d=\"M11.1667 12.5V11.1667C11.1667 10.4594 10.8857 9.78115 10.3856 9.28105C9.88552 8.78095 9.20724 8.5 8.5 8.5H3.16667C2.45942 8.5 1.78115 8.78095 1.28105 9.28105C0.780952 9.78115 0.5 10.4594 0.5 11.1667V12.5M15.1667 12.5V11.1667C15.1662 10.5758 14.9696 10.0018 14.6076 9.53488C14.2456 9.06791 13.7388 8.73438 13.1667 8.58667M10.5 0.586667C11.0736 0.733534 11.582 1.06713 11.9451 1.53487C12.3082 2.00261 12.5052 2.57789 12.5052 3.17C12.5052 3.76211 12.3082 4.33739 11.9451 4.80513C11.582 5.27287 11.0736 5.60647 10.5 5.75333M8.5 3.16667C8.5 4.63943 7.30609 5.83333 5.83333 5.83333C4.36057 5.83333 3.16667 4.63943 3.16667 3.16667C3.16667 1.69391 4.36057 0.5 5.83333 0.5C7.30609 0.5 8.5 1.69391 8.5 3.16667Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_1162_24650)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\n fill=\"currentColor\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1162_24650\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\n fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\n fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </div>\n <div class=\"category-name\">\n {{ tag.get('name')?.value }}\n </div>\n <button\n *ngIf=\"(tag.get('iconName')?.value !== 'duplicateTag' && tag.get('iconName')?.value !== 'employeeTag')\"\n type=\"button\" class=\"category-menu-btn\" (click)=\"toggleCategoryMenu($event, i)\"\n [disabled]=\"isEdit\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\"\n viewBox=\"0 0 24 24\">\n <path\n d=\"M12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5Z\"\n fill=\"#475467\" />\n <path\n d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\n fill=\"#475467\" />\n <path\n d=\"M12 21C12.5523 21 13 20.5523 13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20C11 20.5523 11.4477 21 12 21Z\"\n fill=\"#475467\" />\n </svg>\n </button>\n <div class=\"category-menu\" *ngIf=\"activeMenuIndex === i\">\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'edit', i)\">Edit Name</button>\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'delete', i)\">Delete</button>\n </div>\n </div>\n\n <div class=\"category-percentage-section\">\n <div class=\"position-relative ff-select-wrapper compact\"\n [class.open]=\"openLimitDropdownIndex === i\" [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\"\n (click)=\"toggleLimitDropdown($event, i)\">\n <span>{{ tag.get('value')?.value || 0 }}%</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"openLimitDropdownIndex === i\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\n (click)=\"selectLimitValue($event, i, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\n\n <!-- Store Requests -->\n <div formGroupName=\"accuracyBreach\" class=\"card p-4 mb-4 ff-section-card\">\n <div class=\"d-flex justify-content-between align-items-start mb-4\">\n <div>\n <h5 class=\"ff-section-title mb-2\">Store Requests</h5>\n <p class=\"ff-section-desc mb-0\">\n Below stores have requested to raise a ticket after breaching the configured limit\n <span class=\"info-icon\">i</span>\n </p>\n </div>\n <button type=\"button\" class=\"btn btn-primary reset-btn d-inline-flex align-items-center gap-2\"\n *ngIf=\"!isEdit\" [disabled]=\"isResetDisabled\" (click)=\"openResetConfirmationModal()\" aria-live=\"polite\">\n <span>Reset</span>\n </button>\n </div>\n\n <!-- Restriction Criteria -->\n <div class=\"restriction-criteria mb-4\">\n <label class=\"mb-3 d-block\">\n Restrict ticket creation for any store that:\n </label>\n <div class=\"d-flex align-items-center flex-nowrap gap-2\">\n <span>Has raised more than</span>\n <div class=\"position-relative ff-select-wrapper compact\" [class.open]=\"isTicketCountDropdownOpen\"\n [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleTicketCountDropdown($event)\">\n <span>\n {{ footfallDirConfigurationForm.get('accuracyBreach.ticketCount')?.value || 1 }}\n </span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isTicketCountDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let c of [1, 2, 3, 4, 5]\"\n (click)=\"selectTicketCount($event, c)\">\n {{ c }}\n </button>\n </div>\n </div>\n <span>tickets in the calender</span>\n <div class=\"position-relative ff-select-wrapper compact store-days-select\"\n [class.open]=\"isStoreDaysDropdownOpen\" [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleStoreDaysDropdown($event)\">\n <span>{{ selectedDaysLabel }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isStoreDaysDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let opt of daysOptions\"\n (click)=\"selectStoreDays($event, opt)\">\n {{ opt.label }}\n </button>\n </div>\n </div>\n <span>based on configured conditions\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n placement=\"top\" [ngbTooltip]=\"conditionsTooltip\" tooltipClass=\"conditions-tooltip\">\n <g clip-path=\"url(#clip0_1432_80035)\">\n <path\n d=\"M8.00065 10.6666V7.99992M8.00065 5.33325H8.00732M14.6673 7.99992C14.6673 11.6818 11.6826 14.6666 8.00065 14.6666C4.31875 14.6666 1.33398 11.6818 1.33398 7.99992C1.33398 4.31802 4.31875 1.33325 8.00065 1.33325C11.6826 1.33325 14.6673 4.31802 14.6673 7.99992Z\"\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1432_80035\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>\n <ng-template #conditionsTooltip>\n <div style=\"text-align: left; font-size: 12px; line-height: 1.6;\">\n <b>1.</b> Delta between Store/AOM accuracy and Central Ops/Tango accuracy exceeds 10%<br>\n <b>2.</b> The overall accuracy after all reviews is greater than 85%.<br>\n <b>3.</b> Overall the Number of Images (Footfall) marked for validation in the ticket by the\n Store is Less than equal to 10\n </div>\n </ng-template>\n </div>\n </div>\n\n <!-- Store Requests Table -->\n <div class=\"store-requests-table\" [class.disabled]=\"isEdit\"\n *ngIf=\"storeList?.length > 0; else emptyStoreRequests\">\n <div class=\"table-responsive\" [ngClass]=\"{'store-table-scroll': storeList?.length > 5}\">\n <table class=\"table table-hover store-requests-table-content\">\n <thead>\n <tr>\n <th class=\"checkbox-column\">\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\n <input type=\"checkbox\" [checked]=\"isAllSelected\" [disabled]=\"isEdit\"\n (change)=\"toggleSelectAll($event)\" />\n <span class=\"checkmark-select\"></span>\n\n </label>\n </th>\n <th class=\"sortable store-name-column\">\n <div class=\"d-flex align-items-center\">\n <span>Select all stores ({{ storeList?.length || 0 }})</span>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" class=\"ms-2 dropdown-arrow\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#344054\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </th>\n <th class=\"sortable\">\n Raised on\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\n fill=\"none\" class=\"ms-1 sort-icon\">\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </th>\n <th class=\"sortable\">\n Last raised(Approved)\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\n fill=\"none\" class=\"ms-1 sort-icon\">\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </th>\n <th class=\"sortable\">\n No of Time Raised\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\n fill=\"none\" class=\"ms-1 sort-icon\">\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let store of storeList\">\n <td class=\"checkbox-column\">\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\n <input #cb type=\"checkbox\" [checked]=\"isStoreSelected(store)\" [disabled]=\"isEdit\"\n (change)=\"toggleStoreSelection(store, cb.checked)\" />\n <span class=\"checkmark-select\"></span>\n </label>\n </td>\n <td>{{ store.storeName }}</td>\n <td>{{ store.raisedOn }}</td>\n <td>{{ store.lastApproved || '-' }}</td>\n <td>{{ store.totalRaised }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <ng-template #emptyStoreRequests>\n <div class=\"empty-store-state text-center\">\n <div class=\"empty-store-icon mb-3\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.94629 21.1995C8.645 21.2313 8.33828 21.2502 8.02734 21.2502C7.85782 21.2502 7.69052 21.2434 7.52539 21.2336V31.6067C7.52539 33.0347 8.70837 34.2258 10.1963 34.2258H29.8008C31.2888 34.2258 32.4717 33.0347 32.4717 31.6067V21.2346C32.3098 21.2438 32.1459 21.2502 31.9814 21.2502C31.6675 21.2502 31.3569 21.2323 31.0508 21.1995V28.9875H8.94629V21.1995ZM30.9277 5.77368H9.06934C8.89197 5.77368 8.73671 5.86647 8.65918 5.98755L8.65723 5.9895L5.14746 11.4729L5.05273 11.6204C3.82719 13.7402 5.0918 16.4671 7.44336 16.7766C7.64428 16.8011 7.83403 16.8157 8.02148 16.8157C9.25156 16.8157 10.3395 16.287 11.0967 15.4651L12.0186 14.4641L12.9375 15.468C13.6864 16.2861 14.7731 16.8157 16.0107 16.8157C17.2428 16.8156 18.3347 16.2854 19.083 15.468L20.0049 14.4612L20.9268 15.468C21.6751 16.2855 22.7668 16.8157 23.999 16.8157C25.2312 16.8157 26.3229 16.2854 27.0713 15.468L27.9932 14.4612L28.915 15.468C29.6634 16.2855 30.756 16.8157 31.9883 16.8157C32.1697 16.8157 32.3648 16.8018 32.5645 16.7776H32.5635C34.9572 16.4571 36.2254 13.6075 34.8574 11.4729L34.8564 11.4739L31.3398 5.99048L31.3389 5.98755C31.2614 5.86628 31.1053 5.77368 30.9277 5.77368Z\"\n stroke=\"#009BF3\" stroke-width=\"2.5\" />\n </svg>\n </div>\n <p class=\"mb-0 fw-semibold text-muted\">No reset request from store</p>\n </div>\n </ng-template>\n </div>\n\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\n\n <!-- Send Ticket to Tango -->\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\n <h5 class=\"ff-section-title mb-1\">Send Ticket to Tango</h5>\n <div class=\"d-flex align-items-center mt-2\">\n <label class=\"me-2 mb-0 tango-label\">Send ticket to Tango if accuracy falls below</label>\n <div class=\"position-relative ff-select-wrapper compact ms-0\" [class.open]=\"issendTangoDropdownOpen\"\n [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleSendTangoCloseDropdown($event)\">\n <span>{{ footfallDirConfigurationForm.get('tangoReview')?.value || '1%' }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"issendTangoDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of sendTicketTango\"\n (click)=\"selectSendTicketTango($event, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer Actions -->\n <div *ngIf=\"!isEdit\">\n <div class=\"mb-5 w-100 footer-seperator\"></div>\n <div class=\"d-flex justify-content-end\">\n <a type=\"button\" class=\"btn btn-outline mt-1 pt-3 me-4\" (click)=\"onCancel()\">Cancel</a>\n <a type=\"submit\" class=\"btn btn-primary px-4\" (click)=\"onSubmit()\"><span>Save Changes</span></a>\n </div>\n </div>\n\n <!-- Category Modal -->\n <ng-template #categoryModal>\n <div class=\"modal-header border-0 pb-0\">\n <h5 class=\"modal-title\">\n {{ categoryModalMode === 'add' ? 'Add New Category' : 'Edit Category' }}\n </h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closeCategoryModal()\"></button>\n </div>\n <div class=\"modal-body category-modal-body\">\n <form [formGroup]=\"categoryForm\">\n <div class=\"mb-3\">\n <label class=\"form-label text-muted\">Icon</label>\n <div class=\"ff-select-wrapper icon-select\" [class.open]=\"isCategoryIconDropdownOpen\">\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryIconDropdown($event)\">\n <span class=\"d-inline-flex align-items-center gap-2\">\n <span class=\"category-icon\"\n [ngClass]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\n <ng-container\n [ngSwitch]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_icon_housekeeping)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\n fill=\"currentColor\" />\n </g>\n <defs>\n <clipPath id=\"clip0_icon_housekeeping\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </span>\n <span class=\"icon-label\">{{ selectedCategoryIconLabel }}</span>\n </span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryIconDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option d-flex align-items-center gap-2\"\n *ngFor=\"let icon of categoryIcons\"\n (click)=\"selectCategoryIconFromDropdown($event, icon.value)\">\n <span class=\"category-icon\" [ngClass]=\"icon.value\">\n <ng-container [ngSwitch]=\"icon.value\">\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_1162_24650)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\n fill=\"currentColor\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1162_24650\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </span>\n <span>{{ icon.label }}</span>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"mb-3\">\n <label class=\"form-label text-muted\">Category Name</label>\n <input type=\"text\" class=\"form-control\"\n [class.is-invalid]=\"categoryForm.get('name')?.invalid && categoryForm.get('name')?.touched\"\n placeholder=\"Enter your new category\" formControlName=\"name\" />\n <small class=\"text-danger\"\n *ngIf=\"categoryForm.get('name')?.hasError('required') && categoryForm.get('name')?.touched\">\n Category name is required.\n </small>\n <small class=\"text-danger\"\n *ngIf=\"categoryForm.get('name')?.hasError('duplicate') && categoryForm.get('name')?.touched\">\n Category name already exists.\n </small>\n </div>\n\n <div class=\"mb-2\">\n <label class=\"form-label text-muted\">Limitation</label>\n <div class=\"ff-select-wrapper\" [class.open]=\"isCategoryLimitDropdownOpen\">\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryLimitDropdown($event)\">\n <span>{{ categoryForm.get('limit')?.value || percentageList[0] }}%</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryLimitDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\n (click)=\"selectCategoryLimitValue($event, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n <div class=\"modal-footer border-0 pt-0\">\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeCategoryModal()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitCategoryForm()\">\n {{ categoryModalMode === 'add' ? 'Create' : 'Save' }}\n </button>\n </div>\n </ng-template>\n\n <!-- Delete Confirmation Modal -->\n <ng-template #deleteCategoryModal>\n <div class=\"modal-body text-center p-4\">\n <h5 class=\"fw-semibold mb-2\">Confirmation</h5>\n <p class=\"mb-4 text-muted\">\n You're about to delete <span class=\"fw-semibold\">{{ categoryPendingDeleteName }}</span> category.\n </p>\n <div class=\"d-flex justify-content-center gap-3\">\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeDeleteModal()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-danger\" (click)=\"confirmDeleteCategory()\">Delete</button>\n </div>\n </div>\n </ng-template>\n\n <!-- Reset Store Requests Confirmation Modal -->\n <ng-template #resetConfirmationModal>\n <div class=\"modal-body text-center p-4\">\n <h5 class=\"fw-semibold mb-2\">Reset Store Requests</h5>\n <p class=\"mb-4 text-muted\">\n Are you sure you want to proceed with resetting the selected <span class=\"fw-semibold\">{{\n resetRequest.arrayOfStores.length }}</span> store(s) requests?\n </p>\n <div class=\"d-flex justify-content-center gap-3\">\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeResetModal()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"confirmResetStoreRequest()\">Reset</button>\n </div>\n </div>\n </ng-template>\n\n</form>\n", styles: ["::ng-deep .conditions-tooltip .tooltip-inner{max-width:450px;text-align:left;padding:10px 14px;font-size:12px;line-height:1.6}form{padding:32px 20px;border-radius:16px;font-family:Inter,Segoe UI,sans-serif}.ff-section-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 4px #0f172a0a}.ff-section-title{font-size:16px;font-weight:600;color:#101828}.ff-section-desc{font-size:13px;color:#667085}.ff-divider{margin:8px 24px;border-color:#e4e7ec}.form-check{display:flex;align-items:center;gap:10px}.form-check-input{width:42px;height:22px;cursor:pointer;accent-color:#2563eb;border:1px solid #d1d5db;transition:all .2s ease-in-out}.form-check-input:checked{background-color:#2563eb;border-color:#2563eb}.form-check-input:disabled{opacity:.6;cursor:not-allowed}input[type=radio].form-check-input{width:16px;height:16px;accent-color:#2563eb}input[type=radio]:checked{border-color:#2563eb}select.form-select{border:1px solid #d1d5db;border-radius:8px;height:38px;font-size:14px;color:#374151;padding:6px 10px;outline:none;transition:.2s}select.form-select:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.btn-outline{background-color:#fff;border:1px solid #d1d5db;color:#374151;padding:6px 16px;border-radius:8px;transition:all .2s}.btn-outline:hover{background:#f9fafb}.btn-primary{background-color:#2563eb;border:none;color:#fff;border-radius:8px;padding:6px 16px;transition:.2s}.btn-primary:hover{background-color:#1e40af}.approver-option{display:flex;flex-direction:column;justify-content:flex-start;width:220px}.custom-checkbox{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;gap:12px}.custom-checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.custom-checkbox .checkmark{height:18px;width:18px;min-width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease}.custom-checkbox input:checked~.checkmark{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.label-text{display:flex;flex-direction:column}.label-text .title{font-weight:600;color:#101828}.label-text .desc{font-size:13px;color:#667085;margin-top:2px;max-width:190px;line-height:1.4}.custom-checkbox input:not(:checked)~.label-text .desc{opacity:.6}.approver-option.disabled-option{opacity:.6;pointer-events:none}.approver-option.disabled-option .custom-checkbox.disabled-checkbox{cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .checkmark{background-color:#f3f4f6;border-color:#d1d5dd;cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark{background-color:#f3f4f6;border-color:#d1d5dd}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #9ca3af;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:.5}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .title{color:#9ca3af}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .desc{color:#d1d5dd}.switch{position:relative;display:inline-block;width:44px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;transition:.3s;border-radius:22px}.slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:2px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.slider{background-color:#4c9aff}input:checked+.slider:before{transform:translate(21px)}.switch.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.switch.disabled .slider{cursor:not-allowed;background-color:#e5e7eb}.switch.disabled input:checked+.slider{background-color:#7dd3fc}.category-grid{display:flex;flex-wrap:wrap;gap:12px}.category-card{min-width:180px;border:1px solid #e5e7eb;border-radius:10px;padding:12px;background-color:#fff;box-shadow:0 1px 3px #1018280f;position:relative;display:flex;flex-direction:column;gap:12px}.category-card-header{display:flex;align-items:center;gap:10px}.category-icon{width:32px;height:32px;min-width:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.category-name{font-weight:500;color:#101828;font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-percentage-section{width:100%}.category-percentage-section .ff-select-wrapper.compact{width:100%;min-width:auto}.category-percentage-section .ff-select-toggle.small{width:100%;min-height:36px;padding:6px 10px;font-size:13px}.category-menu-btn{border:none;background:transparent;padding:4px;line-height:1;cursor:pointer;flex-shrink:0;margin-left:4px;display:inline-flex;align-items:center;justify-content:center}.category-menu-btn:disabled{cursor:default}.category-menu{position:absolute;top:48px;right:16px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;box-shadow:0 12px 30px #0f172a26;min-width:140px;z-index:5;padding:4px}.category-menu button{width:100%;text-align:left;background:transparent;border:none;padding:8px 10px;border-radius:8px;font-size:13px;color:#101828}.category-menu button:hover{background:#f4f7fb}.duplicateTag{background:#4755691f;color:#475569}.employeeTag{background:#3b82f61f;color:#3b82f6}.houseKeepingTag{background:#22c55e1f;color:#22c55e}.junkTag{background:#ef44441f;color:#ef4444}.purpleTag{background:#7c3aed1f;color:#7c3aed}.orangeTag{background:#ea580c1f;color:#ea580c}.add-new-btn{background:#fff;border:1px solid #d0d5dd;border-radius:10px;padding:5px 13px;font-size:14px;font-weight:600;color:#101828;transition:all .2s ease;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 1px 2px #1018280d}.add-new-btn:hover:not(:disabled){background:#f9fafb;border-color:#004aad;color:#004aad;box-shadow:0 2px 4px #10182814}.add-new-btn:active:not(:disabled){background:#f4f7fb;transform:translateY(1px);box-shadow:0 1px 2px #1018280d}.add-new-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9fafb;border-color:#e5e7eb;color:#9ca3af}.add-new-btn svg{transition:transform .2s ease;flex-shrink:0}.add-new-btn:hover:not(:disabled) svg{transform:rotate(90deg)}.info-icon{display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:600;border-radius:50%;background:#f3f3f3;color:#555;cursor:pointer;margin-left:6px;border:1.5px solid #8a8a8a}.tango-label{font-size:13px;color:#475467;font-weight:500}.store-requests-section{background:#fff;border:1px solid #e5e7eb;border-radius:10px}.reset-btn{border-width:1px;border-color:#d0d5dd;color:#004aad;font-weight:600;padding:6px 18px;background-color:#fff;transition:all .2s ease}.reset-btn svg path{stroke:currentColor}.reset-btn .spinner-border{color:#004aad}.reset-btn:disabled{opacity:.6;cursor:not-allowed}.reset-btn:not(:disabled):hover{background-color:#f4f7fb;border-color:#004aad;box-shadow:0 1px 2px #1018280f}.restriction-criteria{padding:16px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}.custom-checkbox-select{position:relative;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.custom-checkbox-select input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;width:0;height:0}.checkmark-select{height:18px;width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease;position:relative}.custom-checkbox-select input:checked~.checkmark-select{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox-select input:checked~.checkmark-select:after{content:\"\";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.dropdown-arrow{cursor:pointer;transition:transform .2s}.dropdown-arrow:hover{transform:translateY(2px)}.store-requests-table{margin-top:16px;position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}.store-requests-table.disabled{pointer-events:none;opacity:.6;-webkit-user-select:none;user-select:none}.store-requests-table-content{border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:0}.store-requests-table-content thead{background:linear-gradient(180deg,#f0f6ff,#f7f9fc)}.store-requests-table-content thead th{padding:14px 16px;font-weight:600;font-size:12px;color:#475467;text-align:left;border-bottom:1px solid #e5e7eb;white-space:nowrap;vertical-align:middle;text-transform:uppercase;letter-spacing:.04em}.store-requests-table-content tbody td{padding:14px 16px;font-size:13px;color:#344054;border-bottom:1px solid #f2f4f7;vertical-align:middle}.store-requests-table-content tbody tr{transition:background .15s}.store-requests-table-content tbody tr:hover{background-color:#f8fbff}.store-requests-table-content tbody tr:last-child td{border-bottom:none}.store-table-scroll{max-height:360px;overflow-y:auto}.store-table-scroll table{margin-bottom:0}.store-table-scroll .store-requests-table-content thead th{position:sticky;top:0;z-index:2;background:#f0f6ff}.checkbox-column{width:50px;padding-left:16px!important;padding-right:0!important}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sortable:hover{background-color:#e8eef8}.sort-icon{opacity:.5;transition:opacity .2s}.sortable:hover .sort-icon{opacity:1}.store-name-column{min-width:240px}.store-name-column .column-header{justify-content:space-between}.store-name-column .select-all-row{padding-top:8px;margin-top:8px;border-top:1px solid #e5e7eb}.empty-store-state{border:1px dashed #c7d7f0;border-radius:12px;padding:40px 16px;background:#f9fbff;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-store-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#2e90fa1f}.store-days-select .ff-select-toggle{min-width:99px}.store-days-select .ff-select-toggle span{white-space:nowrap}.ff-select-wrapper{width:100%;position:relative}.ff-select-wrapper.compact{width:auto;min-width:80px}.ff-select-wrapper.disabled{pointer-events:none;opacity:.7}.ff-select-wrapper.open .ff-select-toggle svg{transform:rotate(180deg)}.ff-select-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #d0d5dd;border-radius:10px;padding:8px 12px;background:#fff;font-weight:600;color:#101828;min-height:40px}.ff-select-toggle.small{min-height:36px;padding:6px 10px;font-size:13px}.ff-select-toggle svg{transition:transform .2s ease}.ff-select-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e4e7ec;border-radius:12px;box-shadow:0 16px 40px #0f172a26;max-height:220px;overflow-y:auto;z-index:15;padding:4px}.ff-select-option{width:100%;text-align:left;border:none;background:transparent;padding:8px 10px;border-radius:8px;font-size:14px;color:#101828}.ff-select-option:hover{background:#f4f7fb}.category-modal-body .form-control,.category-modal-body .form-select{border-radius:10px;min-height:44px}.category-modal-body .form-label{font-size:13px}.category-modal-body .text-danger{font-size:12px}.custom-modal{border-radius:16px;padding:10px 20px 20px;background:#fff;box-shadow:0 10px 40px #00000014;width:500px}.field-label{color:#8b8b8b;font-size:14px;margin-bottom:4px;display:block}.input-box{width:100%;height:46px;border:1px solid #e5e7eb;border-radius:10px;padding:0 14px;font-size:15px;background:#f8fafc;display:flex;align-items:center}.input-box:focus-within{border-color:#4daeff;background:#fff;box-shadow:0 0 0 2px #4daeff26}.icon-row{display:flex}.icon-box{width:60px;cursor:pointer;justify-content:space-between}.clean-select{border:none;width:100%;height:100%;background:transparent;font-size:15px;outline:none}.select-box{padding:0}.button-area{display:flex;justify-content:space-between;gap:15px}.btn-cancel{width:50%;height:46px;border-radius:10px;border:1px solid #dbdbdb;background:#fff;font-weight:500;cursor:pointer}.btn-create{width:50%;height:46px;border-radius:10px;border:none;background:#0094ff;color:#fff;font-weight:600;cursor:pointer}.btn-create:hover{background:#007bdb}.card .btn-outline.btn-sm{padding:6px 10px;border-radius:8px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { 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.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.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: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
8803
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FootfallConfigurationComponent, selector: "lib-footfall-configuration", host: { listeners: { "document:click": "closeMenus()" } }, viewQueries: [{ propertyName: "categoryModalTpl", first: true, predicate: ["categoryModal"], descendants: true }, { propertyName: "deleteCategoryModalTpl", first: true, predicate: ["deleteCategoryModal"], descendants: true }, { propertyName: "resetConfirmationModalTpl", first: true, predicate: ["resetConfirmationModal"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"footfallDirConfigurationForm\" class=\"container-fluid\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.Global_Configuration_isEdit\">\r\n <div *ngIf=\"isEdit\" class=\"col-12 mb-5\">\r\n <div class=\"d-flex justify-content-end\">\r\n <button (click)=\"toggleForm();\" type=\"button\" class=\"btn btn-outline py-3 align-items-end\">\r\n <span 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 <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>\r\n </span>Edit Details\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Approver Configuration -->\r\n <div class=\"card p-4 mb-4 ff-section-card\">\r\n <h5 class=\"ff-section-title mb-1\">Approver configuration</h5>\r\n <p class=\"ff-section-desc mb-4\">\r\n Set level of revisions required for a store raised tickets\r\n </p>\r\n\r\n <div formArrayName=\"revision\" class=\"d-flex flex-wrap gap-5\">\r\n <div *ngFor=\"let rev of revisionArray.controls; let i = index\" [formGroupName]=\"i\"\r\n class=\"approver-option d-flex flex-column\"\r\n [class.disabled-option]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\r\n\r\n <label class=\"custom-checkbox align-items-start\"\r\n [class.disabled-checkbox]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\r\n <input type=\"checkbox\" formControlName=\"isChecked\" [id]=\"'action-' + i\" />\r\n <span class=\"checkmark\"></span>\r\n <div class=\"label-text\">\r\n <div class=\"title\">\r\n {{ rev.get('actionType')?.value | titlecase }}\r\n </div>\r\n <div class=\"desc text-muted\">\r\n <ng-container [ngSwitch]=\"rev.get('actionType')?.value\">\r\n <span *ngSwitchCase=\"'reviewer'\">The ticket undergoes a single review to verify\r\n footfall.</span>\r\n <span *ngSwitchCase=\"'approver'\">The ticket undergoes a final review after the initial\r\n check.</span>\r\n <span *ngSwitchCase=\"'tango'\">Finalize tickets and update footfall count.</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </label>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\">\r\n\r\n <!-- Store SPOC Ticket Creation -->\r\n <div class=\"card p-4 mb-4 ff-section-card\">\r\n <h5 class=\"ff-section-title mb-3\">Store SPOC Ticket Creation</h5>\r\n\r\n <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n <label class=\"mb-0\">\r\n Allow store SPOC to create tickets only for the last\r\n </label>\r\n\r\n <div class=\"position-relative ff-select-wrapper compact ms-2\"\r\n [class.open]=\"isAllowTicketCreationDropdownOpen\" [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\"\r\n (click)=\"toggleAllowTicketCreationDropdown($event)\">\r\n <span>{{ footfallDirConfigurationForm.get('allowTicketCreation')?.value ||\r\n spocTicketCreationdays[0] }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isAllowTicketCreationDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let day of spocTicketCreationdays\"\r\n (click)=\"selectAllowTicketCreation($event, day)\">\r\n {{ day }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <span class=\"mb-0\">Days</span>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\">\r\n\r\n <!-- Ticket Auto-close -->\r\n <div class=\"card p-4 mb-4 ff-section-card\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <h5 class=\"ff-section-title m-0\">Ticket Auto-close</h5>\r\n\r\n <label class=\"switch m-0 ms-3\" [class.disabled]=\"isEdit\">\r\n <input type=\"checkbox\" formControlName=\"isAutoCloseEnable\" [disabled]=\"isEdit\">\r\n <span class=\"slider round\"></span>\r\n </label>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center mt-2\">\r\n <span class=\"mb-0\">\r\n Ticket should be auto-closed, if the created ticket accuracy is greater than or equal to\r\n </span>\r\n\r\n <div class=\"position-relative ff-select-wrapper compact ms-2\" [class.open]=\"isAutoCloseDropdownOpen\"\r\n [class.disabled]=\"isEdit || !footfallDirConfigurationForm.get('isAutoCloseEnable')?.value\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleAutoCloseDropdown($event)\">\r\n <span>{{ footfallDirConfigurationForm.get('autoCloseAccuracy')?.value || '1%' }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isAutoCloseDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of accuracyPercentageList\"\r\n (click)=\"selectAutoCloseAccuracy($event, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\">\r\n\r\n <!-- Footfall Directory Limitations -->\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div>\r\n <h5 class=\"ff-section-title m-0\">Footfall directory limitations</h5>\r\n <p class=\"ff-section-desc mb-2\">\r\n Set maximum limitation for stores to tag non-Purchasers from Total Footfall\r\n </p>\r\n </div>\r\n\r\n <button type=\"button\" [disabled]=\"isEdit\" class=\"add-new-btn d-inline-flex align-items-center gap-2\"\r\n (click)=\"openCategoryModal('add')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8 3.33334V12.6667M3.33334 8H12.6667\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span>Add New</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Category Cards Grid -->\r\n <div formArrayName=\"taggingLimitation\" class=\"category-grid mt-3\">\r\n <div *ngFor=\"let tag of tagLimits.controls; let i = index\" [formGroupName]=\"i\" class=\"category-card\">\r\n <div class=\"category-card-header\">\r\n <div class=\"category-icon\" [ngClass]=\"tag.get('iconName')?.value\">\r\n <ng-container [ngSwitch]=\"tag.get('iconName')?.value\">\r\n <svg *ngSwitchCase=\"'duplicateTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1162_24621)\">\r\n <path\r\n d=\"M2.5 7.5H2C1.73478 7.5 1.48043 7.39464 1.29289 7.20711C1.10536 7.01957 1 6.76522 1 6.5V2C1 1.73478 1.10536 1.48043 1.29289 1.29289C1.48043 1.10536 1.73478 1 2 1H6.5C6.76522 1 7.01957 1.10536 7.20711 1.29289C7.39464 1.48043 7.5 1.73478 7.5 2V2.5M5.5 4.5H10C10.5523 4.5 11 4.94772 11 5.5V10C11 10.5523 10.5523 11 10 11H5.5C4.94772 11 4.5 10.5523 4.5 10V5.5C4.5 4.94772 4.94772 4.5 5.5 4.5Z\"\r\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1162_24621\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'employeeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"13\" viewBox=\"0 0 16 13\" fill=\"none\">\r\n <path\r\n d=\"M11.1667 12.5V11.1667C11.1667 10.4594 10.8857 9.78115 10.3856 9.28105C9.88552 8.78095 9.20724 8.5 8.5 8.5H3.16667C2.45942 8.5 1.78115 8.78095 1.28105 9.28105C0.780952 9.78115 0.5 10.4594 0.5 11.1667V12.5M15.1667 12.5V11.1667C15.1662 10.5758 14.9696 10.0018 14.6076 9.53488C14.2456 9.06791 13.7388 8.73438 13.1667 8.58667M10.5 0.586667C11.0736 0.733534 11.582 1.06713 11.9451 1.53487C12.3082 2.00261 12.5052 2.57789 12.5052 3.17C12.5052 3.76211 12.3082 4.33739 11.9451 4.80513C11.582 5.27287 11.0736 5.60647 10.5 5.75333M8.5 3.16667C8.5 4.63943 7.30609 5.83333 5.83333 5.83333C4.36057 5.83333 3.16667 4.63943 3.16667 3.16667C3.16667 1.69391 4.36057 0.5 5.83333 0.5C7.30609 0.5 8.5 1.69391 8.5 3.16667Z\"\r\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1162_24650)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\r\n fill=\"currentColor\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1162_24650\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n </div>\r\n <div class=\"category-name\">\r\n {{ tag.get('name')?.value }}\r\n </div>\r\n <button\r\n *ngIf=\"(tag.get('iconName')?.value !== 'duplicateTag' && tag.get('iconName')?.value !== 'employeeTag')\"\r\n type=\"button\" class=\"category-menu-btn\" (click)=\"toggleCategoryMenu($event, i)\"\r\n [disabled]=\"isEdit\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M12 21C12.5523 21 13 20.5523 13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20C11 20.5523 11.4477 21 12 21Z\"\r\n fill=\"#475467\" />\r\n </svg>\r\n </button>\r\n <div class=\"category-menu\" *ngIf=\"activeMenuIndex === i\">\r\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'edit', i)\">Edit Name</button>\r\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'delete', i)\">Delete</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"category-percentage-section\">\r\n <div class=\"position-relative ff-select-wrapper compact\"\r\n [class.open]=\"openLimitDropdownIndex === i\" [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\"\r\n (click)=\"toggleLimitDropdown($event, i)\">\r\n <span>{{ tag.get('value')?.value || 0 }}%</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"openLimitDropdownIndex === i\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\r\n (click)=\"selectLimitValue($event, i, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n\r\n <!-- Store Requests -->\r\n <div formGroupName=\"accuracyBreach\" class=\"card p-4 mb-4 ff-section-card\">\r\n <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n <div>\r\n <h5 class=\"ff-section-title mb-2\">Store Requests</h5>\r\n <p class=\"ff-section-desc mb-0\">\r\n Below stores have requested to raise a ticket after breaching the configured limit\r\n <span class=\"info-icon\">i</span>\r\n </p>\r\n </div>\r\n <button type=\"button\" class=\"btn btn-primary reset-btn d-inline-flex align-items-center gap-2\"\r\n *ngIf=\"!isEdit\" [disabled]=\"isResetDisabled\" (click)=\"openResetConfirmationModal()\" aria-live=\"polite\">\r\n <span>Reset</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Restriction Criteria -->\r\n <div class=\"restriction-criteria mb-4\">\r\n <label class=\"mb-3 d-block\">\r\n Restrict ticket creation for any store that:\r\n </label>\r\n <div class=\"d-flex align-items-center flex-nowrap gap-2\">\r\n <span>Has raised more than</span>\r\n <div class=\"position-relative ff-select-wrapper compact\" [class.open]=\"isTicketCountDropdownOpen\"\r\n [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleTicketCountDropdown($event)\">\r\n <span>\r\n {{ footfallDirConfigurationForm.get('accuracyBreach.ticketCount')?.value || 1 }}\r\n </span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isTicketCountDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let c of [1, 2, 3, 4, 5]\"\r\n (click)=\"selectTicketCount($event, c)\">\r\n {{ c }}\r\n </button>\r\n </div>\r\n </div>\r\n <span>tickets in the calender</span>\r\n <div class=\"position-relative ff-select-wrapper compact store-days-select\"\r\n [class.open]=\"isStoreDaysDropdownOpen\" [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleStoreDaysDropdown($event)\">\r\n <span>{{ selectedDaysLabel }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isStoreDaysDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let opt of daysOptions\"\r\n (click)=\"selectStoreDays($event, opt)\">\r\n {{ opt.label }}\r\n </button>\r\n </div>\r\n </div>\r\n <span>based on configured conditions\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n placement=\"top\" [ngbTooltip]=\"conditionsTooltip\" tooltipClass=\"conditions-tooltip\">\r\n <g clip-path=\"url(#clip0_1432_80035)\">\r\n <path\r\n d=\"M8.00065 10.6666V7.99992M8.00065 5.33325H8.00732M14.6673 7.99992C14.6673 11.6818 11.6826 14.6666 8.00065 14.6666C4.31875 14.6666 1.33398 11.6818 1.33398 7.99992C1.33398 4.31802 4.31875 1.33325 8.00065 1.33325C11.6826 1.33325 14.6673 4.31802 14.6673 7.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1432_80035\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #conditionsTooltip>\r\n <div style=\"text-align: left; font-size: 12px; line-height: 1.6;\">\r\n <b>1.</b> Delta between Store/AOM accuracy and Central Ops/Tango accuracy exceeds 10%<br>\r\n <b>2.</b> The overall accuracy after all reviews is greater than 85%.<br>\r\n <b>3.</b> Overall the Number of Images (Footfall) marked for validation in the ticket by the\r\n Store is Less than equal to 10\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Store Requests Table -->\r\n <div class=\"store-requests-table\" [class.disabled]=\"isEdit\"\r\n *ngIf=\"storeList?.length > 0; else emptyStoreRequests\">\r\n <div class=\"table-responsive\" [ngClass]=\"{'store-table-scroll': storeList?.length > 5}\">\r\n <table class=\"table table-hover store-requests-table-content\">\r\n <thead>\r\n <tr>\r\n <th class=\"checkbox-column\">\r\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\r\n <input type=\"checkbox\" [checked]=\"isAllSelected\" [disabled]=\"isEdit\"\r\n (change)=\"toggleSelectAll($event)\" />\r\n <span class=\"checkmark-select\"></span>\r\n\r\n </label>\r\n </th>\r\n <th class=\"sortable store-name-column\">\r\n <div class=\"d-flex align-items-center\">\r\n <span>Select all stores ({{ storeList?.length || 0 }})</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" class=\"ms-2 dropdown-arrow\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#344054\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th class=\"sortable\">\r\n Raised on\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" class=\"ms-1 sort-icon\">\r\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"sortable\">\r\n Last raised(Approved)\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" class=\"ms-1 sort-icon\">\r\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"sortable\">\r\n No of Time Raised\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" class=\"ms-1 sort-icon\">\r\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of storeList\">\r\n <td class=\"checkbox-column\">\r\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\r\n <input #cb type=\"checkbox\" [checked]=\"isStoreSelected(store)\" [disabled]=\"isEdit\"\r\n (change)=\"toggleStoreSelection(store, cb.checked)\" />\r\n <span class=\"checkmark-select\"></span>\r\n </label>\r\n </td>\r\n <td>{{ store.storeName }}</td>\r\n <td>{{ store.raisedOn }}</td>\r\n <td>{{ store.lastApproved || '-' }}</td>\r\n <td>{{ store.totalRaised }}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <ng-template #emptyStoreRequests>\r\n <div class=\"empty-store-state text-center\">\r\n <div class=\"empty-store-icon mb-3\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8.94629 21.1995C8.645 21.2313 8.33828 21.2502 8.02734 21.2502C7.85782 21.2502 7.69052 21.2434 7.52539 21.2336V31.6067C7.52539 33.0347 8.70837 34.2258 10.1963 34.2258H29.8008C31.2888 34.2258 32.4717 33.0347 32.4717 31.6067V21.2346C32.3098 21.2438 32.1459 21.2502 31.9814 21.2502C31.6675 21.2502 31.3569 21.2323 31.0508 21.1995V28.9875H8.94629V21.1995ZM30.9277 5.77368H9.06934C8.89197 5.77368 8.73671 5.86647 8.65918 5.98755L8.65723 5.9895L5.14746 11.4729L5.05273 11.6204C3.82719 13.7402 5.0918 16.4671 7.44336 16.7766C7.64428 16.8011 7.83403 16.8157 8.02148 16.8157C9.25156 16.8157 10.3395 16.287 11.0967 15.4651L12.0186 14.4641L12.9375 15.468C13.6864 16.2861 14.7731 16.8157 16.0107 16.8157C17.2428 16.8156 18.3347 16.2854 19.083 15.468L20.0049 14.4612L20.9268 15.468C21.6751 16.2855 22.7668 16.8157 23.999 16.8157C25.2312 16.8157 26.3229 16.2854 27.0713 15.468L27.9932 14.4612L28.915 15.468C29.6634 16.2855 30.756 16.8157 31.9883 16.8157C32.1697 16.8157 32.3648 16.8018 32.5645 16.7776H32.5635C34.9572 16.4571 36.2254 13.6075 34.8574 11.4729L34.8564 11.4739L31.3398 5.99048L31.3389 5.98755C31.2614 5.86628 31.1053 5.77368 30.9277 5.77368Z\"\r\n stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n </svg>\r\n </div>\r\n <p class=\"mb-0 fw-semibold text-muted\">No reset request from store</p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n\r\n <!-- Send Ticket to Tango -->\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\r\n <h5 class=\"ff-section-title mb-1\">Send Ticket to Tango</h5>\r\n <div class=\"d-flex align-items-center mt-2\">\r\n <label class=\"me-2 mb-0 tango-label\">Send ticket to Tango if accuracy falls below</label>\r\n <div class=\"position-relative ff-select-wrapper compact ms-0\" [class.open]=\"issendTangoDropdownOpen\"\r\n [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleSendTangoCloseDropdown($event)\">\r\n <span>{{ footfallDirConfigurationForm.get('tangoReview')?.value || '1%' }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"issendTangoDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of sendTicketTango\"\r\n (click)=\"selectSendTicketTango($event, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Footer Actions -->\r\n <div *ngIf=\"!isEdit\">\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 mt-1 pt-3 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 <!-- Category Modal -->\r\n <ng-template #categoryModal>\r\n <div class=\"modal-header border-0 pb-0\">\r\n <h5 class=\"modal-title\">\r\n {{ categoryModalMode === 'add' ? 'Add New Category' : 'Edit Category' }}\r\n </h5>\r\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closeCategoryModal()\"></button>\r\n </div>\r\n <div class=\"modal-body category-modal-body\">\r\n <form [formGroup]=\"categoryForm\">\r\n <div class=\"mb-3\">\r\n <label class=\"form-label text-muted\">Icon</label>\r\n <div class=\"ff-select-wrapper icon-select\" [class.open]=\"isCategoryIconDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryIconDropdown($event)\">\r\n <span class=\"d-inline-flex align-items-center gap-2\">\r\n <span class=\"category-icon\"\r\n [ngClass]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\r\n <ng-container\r\n [ngSwitch]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\r\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_icon_housekeeping)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\r\n fill=\"currentColor\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_icon_housekeeping\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n </span>\r\n <span class=\"icon-label\">{{ selectedCategoryIconLabel }}</span>\r\n </span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryIconDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option d-flex align-items-center gap-2\"\r\n *ngFor=\"let icon of categoryIcons\"\r\n (click)=\"selectCategoryIconFromDropdown($event, icon.value)\">\r\n <span class=\"category-icon\" [ngClass]=\"icon.value\">\r\n <ng-container [ngSwitch]=\"icon.value\">\r\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1162_24650)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\r\n fill=\"currentColor\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1162_24650\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n </span>\r\n <span>{{ icon.label }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-3\">\r\n <label class=\"form-label text-muted\">Category Name</label>\r\n <input type=\"text\" class=\"form-control\"\r\n [class.is-invalid]=\"categoryForm.get('name')?.invalid && categoryForm.get('name')?.touched\"\r\n placeholder=\"Enter your new category\" formControlName=\"name\" />\r\n <small class=\"text-danger\"\r\n *ngIf=\"categoryForm.get('name')?.hasError('required') && categoryForm.get('name')?.touched\">\r\n Category name is required.\r\n </small>\r\n <small class=\"text-danger\"\r\n *ngIf=\"categoryForm.get('name')?.hasError('duplicate') && categoryForm.get('name')?.touched\">\r\n Category name already exists.\r\n </small>\r\n </div>\r\n\r\n <div class=\"mb-2\">\r\n <label class=\"form-label text-muted\">Limitation</label>\r\n <div class=\"ff-select-wrapper\" [class.open]=\"isCategoryLimitDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryLimitDropdown($event)\">\r\n <span>{{ categoryForm.get('limit')?.value || percentageList[0] }}%</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryLimitDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\r\n (click)=\"selectCategoryLimitValue($event, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n <div class=\"modal-footer border-0 pt-0\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeCategoryModal()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitCategoryForm()\">\r\n {{ categoryModalMode === 'add' ? 'Create' : 'Save' }}\r\n </button>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Delete Confirmation Modal -->\r\n <ng-template #deleteCategoryModal>\r\n <div class=\"modal-body text-center p-4\">\r\n <h5 class=\"fw-semibold mb-2\">Confirmation</h5>\r\n <p class=\"mb-4 text-muted\">\r\n You're about to delete <span class=\"fw-semibold\">{{ categoryPendingDeleteName }}</span> category.\r\n </p>\r\n <div class=\"d-flex justify-content-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeDeleteModal()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-danger\" (click)=\"confirmDeleteCategory()\">Delete</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Reset Store Requests Confirmation Modal -->\r\n <ng-template #resetConfirmationModal>\r\n <div class=\"modal-body text-center p-4\">\r\n <h5 class=\"fw-semibold mb-2\">Reset Store Requests</h5>\r\n <p class=\"mb-4 text-muted\">\r\n Are you sure you want to proceed with resetting the selected <span class=\"fw-semibold\">{{\r\n resetRequest.arrayOfStores.length }}</span> store(s) requests?\r\n </p>\r\n <div class=\"d-flex justify-content-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeResetModal()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"confirmResetStoreRequest()\">Reset</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n</form>\r\n", styles: ["::ng-deep .conditions-tooltip .tooltip-inner{max-width:450px;text-align:left;padding:10px 14px;font-size:12px;line-height:1.6}form{padding:32px 20px;border-radius:16px;font-family:Inter,Segoe UI,sans-serif}.ff-section-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 4px #0f172a0a}.ff-section-title{font-size:16px;font-weight:600;color:#101828}.ff-section-desc{font-size:13px;color:#667085}.ff-divider{margin:8px 24px;border-color:#e4e7ec}.form-check{display:flex;align-items:center;gap:10px}.form-check-input{width:42px;height:22px;cursor:pointer;accent-color:#2563eb;border:1px solid #d1d5db;transition:all .2s ease-in-out}.form-check-input:checked{background-color:#2563eb;border-color:#2563eb}.form-check-input:disabled{opacity:.6;cursor:not-allowed}input[type=radio].form-check-input{width:16px;height:16px;accent-color:#2563eb}input[type=radio]:checked{border-color:#2563eb}select.form-select{border:1px solid #d1d5db;border-radius:8px;height:38px;font-size:14px;color:#374151;padding:6px 10px;outline:none;transition:.2s}select.form-select:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.btn-outline{background-color:#fff;border:1px solid #d1d5db;color:#374151;padding:6px 16px;border-radius:8px;transition:all .2s}.btn-outline:hover{background:#f9fafb}.btn-primary{background-color:#2563eb;border:none;color:#fff;border-radius:8px;padding:6px 16px;transition:.2s}.btn-primary:hover{background-color:#1e40af}.approver-option{display:flex;flex-direction:column;justify-content:flex-start;width:220px}.custom-checkbox{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;gap:12px}.custom-checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.custom-checkbox .checkmark{height:18px;width:18px;min-width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease}.custom-checkbox input:checked~.checkmark{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.label-text{display:flex;flex-direction:column}.label-text .title{font-weight:600;color:#101828}.label-text .desc{font-size:13px;color:#667085;margin-top:2px;max-width:190px;line-height:1.4}.custom-checkbox input:not(:checked)~.label-text .desc{opacity:.6}.approver-option.disabled-option{opacity:.6;pointer-events:none}.approver-option.disabled-option .custom-checkbox.disabled-checkbox{cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .checkmark{background-color:#f3f4f6;border-color:#d1d5dd;cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark{background-color:#f3f4f6;border-color:#d1d5dd}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #9ca3af;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:.5}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .title{color:#9ca3af}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .desc{color:#d1d5dd}.switch{position:relative;display:inline-block;width:44px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;transition:.3s;border-radius:22px}.slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:2px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.slider{background-color:#4c9aff}input:checked+.slider:before{transform:translate(21px)}.switch.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.switch.disabled .slider{cursor:not-allowed;background-color:#e5e7eb}.switch.disabled input:checked+.slider{background-color:#7dd3fc}.category-grid{display:flex;flex-wrap:wrap;gap:12px}.category-card{min-width:180px;border:1px solid #e5e7eb;border-radius:10px;padding:12px;background-color:#fff;box-shadow:0 1px 3px #1018280f;position:relative;display:flex;flex-direction:column;gap:12px}.category-card-header{display:flex;align-items:center;gap:10px}.category-icon{width:32px;height:32px;min-width:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.category-name{font-weight:500;color:#101828;font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-percentage-section{width:100%}.category-percentage-section .ff-select-wrapper.compact{width:100%;min-width:auto}.category-percentage-section .ff-select-toggle.small{width:100%;min-height:36px;padding:6px 10px;font-size:13px}.category-menu-btn{border:none;background:transparent;padding:4px;line-height:1;cursor:pointer;flex-shrink:0;margin-left:4px;display:inline-flex;align-items:center;justify-content:center}.category-menu-btn:disabled{cursor:default}.category-menu{position:absolute;top:48px;right:16px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;box-shadow:0 12px 30px #0f172a26;min-width:140px;z-index:5;padding:4px}.category-menu button{width:100%;text-align:left;background:transparent;border:none;padding:8px 10px;border-radius:8px;font-size:13px;color:#101828}.category-menu button:hover{background:#f4f7fb}.duplicateTag{background:#4755691f;color:#475569}.employeeTag{background:#3b82f61f;color:#3b82f6}.houseKeepingTag{background:#22c55e1f;color:#22c55e}.junkTag{background:#ef44441f;color:#ef4444}.purpleTag{background:#7c3aed1f;color:#7c3aed}.orangeTag{background:#ea580c1f;color:#ea580c}.add-new-btn{background:#fff;border:1px solid #d0d5dd;border-radius:10px;padding:5px 13px;font-size:14px;font-weight:600;color:#101828;transition:all .2s ease;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 1px 2px #1018280d}.add-new-btn:hover:not(:disabled){background:#f9fafb;border-color:#004aad;color:#004aad;box-shadow:0 2px 4px #10182814}.add-new-btn:active:not(:disabled){background:#f4f7fb;transform:translateY(1px);box-shadow:0 1px 2px #1018280d}.add-new-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9fafb;border-color:#e5e7eb;color:#9ca3af}.add-new-btn svg{transition:transform .2s ease;flex-shrink:0}.add-new-btn:hover:not(:disabled) svg{transform:rotate(90deg)}.info-icon{display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:600;border-radius:50%;background:#f3f3f3;color:#555;cursor:pointer;margin-left:6px;border:1.5px solid #8a8a8a}.tango-label{font-size:13px;color:#475467;font-weight:500}.store-requests-section{background:#fff;border:1px solid #e5e7eb;border-radius:10px}.reset-btn{border-width:1px;border-color:#d0d5dd;color:#004aad;font-weight:600;padding:6px 18px;background-color:#fff;transition:all .2s ease}.reset-btn svg path{stroke:currentColor}.reset-btn .spinner-border{color:#004aad}.reset-btn:disabled{opacity:.6;cursor:not-allowed}.reset-btn:not(:disabled):hover{background-color:#f4f7fb;border-color:#004aad;box-shadow:0 1px 2px #1018280f}.restriction-criteria{padding:16px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}.custom-checkbox-select{position:relative;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.custom-checkbox-select input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;width:0;height:0}.checkmark-select{height:18px;width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease;position:relative}.custom-checkbox-select input:checked~.checkmark-select{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox-select input:checked~.checkmark-select:after{content:\"\";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.dropdown-arrow{cursor:pointer;transition:transform .2s}.dropdown-arrow:hover{transform:translateY(2px)}.store-requests-table{margin-top:16px;position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}.store-requests-table.disabled{pointer-events:none;opacity:.6;-webkit-user-select:none;user-select:none}.store-requests-table-content{border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:0}.store-requests-table-content thead{background:linear-gradient(180deg,#f0f6ff,#f7f9fc)}.store-requests-table-content thead th{padding:14px 16px;font-weight:600;font-size:12px;color:#475467;text-align:left;border-bottom:1px solid #e5e7eb;white-space:nowrap;vertical-align:middle;text-transform:uppercase;letter-spacing:.04em}.store-requests-table-content tbody td{padding:14px 16px;font-size:13px;color:#344054;border-bottom:1px solid #f2f4f7;vertical-align:middle}.store-requests-table-content tbody tr{transition:background .15s}.store-requests-table-content tbody tr:hover{background-color:#f8fbff}.store-requests-table-content tbody tr:last-child td{border-bottom:none}.store-table-scroll{max-height:360px;overflow-y:auto}.store-table-scroll table{margin-bottom:0}.store-table-scroll .store-requests-table-content thead th{position:sticky;top:0;z-index:2;background:#f0f6ff}.checkbox-column{width:50px;padding-left:16px!important;padding-right:0!important}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sortable:hover{background-color:#e8eef8}.sort-icon{opacity:.5;transition:opacity .2s}.sortable:hover .sort-icon{opacity:1}.store-name-column{min-width:240px}.store-name-column .column-header{justify-content:space-between}.store-name-column .select-all-row{padding-top:8px;margin-top:8px;border-top:1px solid #e5e7eb}.empty-store-state{border:1px dashed #c7d7f0;border-radius:12px;padding:40px 16px;background:#f9fbff;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-store-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#2e90fa1f}.store-days-select .ff-select-toggle{min-width:99px}.store-days-select .ff-select-toggle span{white-space:nowrap}.ff-select-wrapper{width:100%;position:relative}.ff-select-wrapper.compact{width:auto;min-width:80px}.ff-select-wrapper.disabled{pointer-events:none;opacity:.7}.ff-select-wrapper.open .ff-select-toggle svg{transform:rotate(180deg)}.ff-select-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #d0d5dd;border-radius:10px;padding:8px 12px;background:#fff;font-weight:600;color:#101828;min-height:40px}.ff-select-toggle.small{min-height:36px;padding:6px 10px;font-size:13px}.ff-select-toggle svg{transition:transform .2s ease}.ff-select-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e4e7ec;border-radius:12px;box-shadow:0 16px 40px #0f172a26;max-height:220px;overflow-y:auto;z-index:15;padding:4px}.ff-select-option{width:100%;text-align:left;border:none;background:transparent;padding:8px 10px;border-radius:8px;font-size:14px;color:#101828}.ff-select-option:hover{background:#f4f7fb}.category-modal-body .form-control,.category-modal-body .form-select{border-radius:10px;min-height:44px}.category-modal-body .form-label{font-size:13px}.category-modal-body .text-danger{font-size:12px}.custom-modal{border-radius:16px;padding:10px 20px 20px;background:#fff;box-shadow:0 10px 40px #00000014;width:500px}.field-label{color:#8b8b8b;font-size:14px;margin-bottom:4px;display:block}.input-box{width:100%;height:46px;border:1px solid #e5e7eb;border-radius:10px;padding:0 14px;font-size:15px;background:#f8fafc;display:flex;align-items:center}.input-box:focus-within{border-color:#4daeff;background:#fff;box-shadow:0 0 0 2px #4daeff26}.icon-row{display:flex}.icon-box{width:60px;cursor:pointer;justify-content:space-between}.clean-select{border:none;width:100%;height:100%;background:transparent;font-size:15px;outline:none}.select-box{padding:0}.button-area{display:flex;justify-content:space-between;gap:15px}.btn-cancel{width:50%;height:46px;border-radius:10px;border:1px solid #dbdbdb;background:#fff;font-weight:500;cursor:pointer}.btn-create{width:50%;height:46px;border-radius:10px;border:none;background:#0094ff;color:#fff;font-weight:600;cursor:pointer}.btn-create:hover{background:#007bdb}.card .btn-outline.btn-sm{padding:6px 10px;border-radius:8px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { 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.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.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: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
8804
8804
  }
8805
8805
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FootfallConfigurationComponent, decorators: [{
8806
8806
  type: Component,
8807
- args: [{ selector: 'lib-footfall-configuration', template: "<form [formGroup]=\"footfallDirConfigurationForm\" class=\"container-fluid\">\n <ng-container *ngIf=\"(gs.userAccess | async)?.Global_Configuration_isEdit\">\n <div *ngIf=\"isEdit\" class=\"col-12 mb-5\">\n <div class=\"d-flex justify-content-end\">\n <button (click)=\"toggleForm();\" type=\"button\" class=\"btn btn-outline py-3 align-items-end\">\n <span class=\"me-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <g clip-path=\"url(#clip0_2579_25125)\">\n <path\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\"\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_2579_25125\">\n <rect width=\"20\" height=\"20\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>Edit Details\n </button>\n </div>\n </div>\n </ng-container>\n\n <!-- Approver Configuration -->\n <div class=\"card p-4 mb-4 ff-section-card\">\n <h5 class=\"ff-section-title mb-1\">Approver configuration</h5>\n <p class=\"ff-section-desc mb-4\">\n Set level of revisions required for a store raised tickets\n </p>\n\n <div formArrayName=\"revision\" class=\"d-flex flex-wrap gap-5\">\n <div *ngFor=\"let rev of revisionArray.controls; let i = index\" [formGroupName]=\"i\"\n class=\"approver-option d-flex flex-column\"\n [class.disabled-option]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\n\n <label class=\"custom-checkbox align-items-start\"\n [class.disabled-checkbox]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\n <input type=\"checkbox\" formControlName=\"isChecked\" [id]=\"'action-' + i\" />\n <span class=\"checkmark\"></span>\n <div class=\"label-text\">\n <div class=\"title\">\n {{ rev.get('actionType')?.value | titlecase }}\n </div>\n <div class=\"desc text-muted\">\n <ng-container [ngSwitch]=\"rev.get('actionType')?.value\">\n <span *ngSwitchCase=\"'reviewer'\">The ticket undergoes a single review to verify\n footfall.</span>\n <span *ngSwitchCase=\"'approver'\">The ticket undergoes a final review after the initial\n check.</span>\n <span *ngSwitchCase=\"'tango'\">Finalize tickets and update footfall count.</span>\n </ng-container>\n </div>\n </div>\n </label>\n\n </div>\n </div>\n </div>\n\n <hr class=\"ff-divider\">\n\n <!-- Store SPOC Ticket Creation -->\n <div class=\"card p-4 mb-4 ff-section-card\">\n <h5 class=\"ff-section-title mb-3\">Store SPOC Ticket Creation</h5>\n\n <div class=\"d-flex align-items-center flex-wrap gap-2\">\n <label class=\"mb-0\">\n Allow store SPOC to create tickets only for the last\n </label>\n\n <div class=\"position-relative ff-select-wrapper compact ms-2\"\n [class.open]=\"isAllowTicketCreationDropdownOpen\" [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\"\n (click)=\"toggleAllowTicketCreationDropdown($event)\">\n <span>{{ footfallDirConfigurationForm.get('allowTicketCreation')?.value ||\n spocTicketCreationdays[0] }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isAllowTicketCreationDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let day of spocTicketCreationdays\"\n (click)=\"selectAllowTicketCreation($event, day)\">\n {{ day }}\n </button>\n </div>\n </div>\n\n <span class=\"mb-0\">Days</span>\n </div>\n </div>\n\n <hr class=\"ff-divider\">\n\n <!-- Ticket Auto-close -->\n <div class=\"card p-4 mb-4 ff-section-card\">\n <div class=\"d-flex align-items-center mb-2\">\n <h5 class=\"ff-section-title m-0\">Ticket Auto-close</h5>\n\n <label class=\"switch m-0 ms-3\" [class.disabled]=\"isEdit\">\n <input type=\"checkbox\" formControlName=\"isAutoCloseEnable\" [disabled]=\"isEdit\">\n <span class=\"slider round\"></span>\n </label>\n </div>\n\n <div class=\"d-flex align-items-center mt-2\">\n <span class=\"mb-0\">\n Ticket should be auto-closed, if the created ticket accuracy is greater than or equal to\n </span>\n\n <div class=\"position-relative ff-select-wrapper compact ms-2\" [class.open]=\"isAutoCloseDropdownOpen\"\n [class.disabled]=\"isEdit || !footfallDirConfigurationForm.get('isAutoCloseEnable')?.value\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleAutoCloseDropdown($event)\">\n <span>{{ footfallDirConfigurationForm.get('autoCloseAccuracy')?.value || '1%' }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isAutoCloseDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of accuracyPercentageList\"\n (click)=\"selectAutoCloseAccuracy($event, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <hr class=\"ff-divider\">\n\n <!-- Footfall Directory Limitations -->\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\n <div>\n <h5 class=\"ff-section-title m-0\">Footfall directory limitations</h5>\n <p class=\"ff-section-desc mb-2\">\n Set maximum limitation for stores to tag non-Purchasers from Total Footfall\n </p>\n </div>\n\n <button type=\"button\" [disabled]=\"isEdit\" class=\"add-new-btn d-inline-flex align-items-center gap-2\"\n (click)=\"openCategoryModal('add')\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3.33334V12.6667M3.33334 8H12.6667\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <span>Add New</span>\n </button>\n </div>\n\n <!-- Category Cards Grid -->\n <div formArrayName=\"taggingLimitation\" class=\"category-grid mt-3\">\n <div *ngFor=\"let tag of tagLimits.controls; let i = index\" [formGroupName]=\"i\" class=\"category-card\">\n <div class=\"category-card-header\">\n <div class=\"category-icon\" [ngClass]=\"tag.get('iconName')?.value\">\n <ng-container [ngSwitch]=\"tag.get('iconName')?.value\">\n <svg *ngSwitchCase=\"'duplicateTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\n height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <g clip-path=\"url(#clip0_1162_24621)\">\n <path\n d=\"M2.5 7.5H2C1.73478 7.5 1.48043 7.39464 1.29289 7.20711C1.10536 7.01957 1 6.76522 1 6.5V2C1 1.73478 1.10536 1.48043 1.29289 1.29289C1.48043 1.10536 1.73478 1 2 1H6.5C6.76522 1 7.01957 1.10536 7.20711 1.29289C7.39464 1.48043 7.5 1.73478 7.5 2V2.5M5.5 4.5H10C10.5523 4.5 11 4.94772 11 5.5V10C11 10.5523 10.5523 11 10 11H5.5C4.94772 11 4.5 10.5523 4.5 10V5.5C4.5 4.94772 4.94772 4.5 5.5 4.5Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1162_24621\">\n <rect width=\"12\" height=\"12\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n\n <svg *ngSwitchCase=\"'employeeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\n height=\"13\" viewBox=\"0 0 16 13\" fill=\"none\">\n <path\n d=\"M11.1667 12.5V11.1667C11.1667 10.4594 10.8857 9.78115 10.3856 9.28105C9.88552 8.78095 9.20724 8.5 8.5 8.5H3.16667C2.45942 8.5 1.78115 8.78095 1.28105 9.28105C0.780952 9.78115 0.5 10.4594 0.5 11.1667V12.5M15.1667 12.5V11.1667C15.1662 10.5758 14.9696 10.0018 14.6076 9.53488C14.2456 9.06791 13.7388 8.73438 13.1667 8.58667M10.5 0.586667C11.0736 0.733534 11.582 1.06713 11.9451 1.53487C12.3082 2.00261 12.5052 2.57789 12.5052 3.17C12.5052 3.76211 12.3082 4.33739 11.9451 4.80513C11.582 5.27287 11.0736 5.60647 10.5 5.75333M8.5 3.16667C8.5 4.63943 7.30609 5.83333 5.83333 5.83333C4.36057 5.83333 3.16667 4.63943 3.16667 3.16667C3.16667 1.69391 4.36057 0.5 5.83333 0.5C7.30609 0.5 8.5 1.69391 8.5 3.16667Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_1162_24650)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\n fill=\"currentColor\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1162_24650\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\n fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\n fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </div>\n <div class=\"category-name\">\n {{ tag.get('name')?.value }}\n </div>\n <button\n *ngIf=\"(tag.get('iconName')?.value !== 'duplicateTag' && tag.get('iconName')?.value !== 'employeeTag')\"\n type=\"button\" class=\"category-menu-btn\" (click)=\"toggleCategoryMenu($event, i)\"\n [disabled]=\"isEdit\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\"\n viewBox=\"0 0 24 24\">\n <path\n d=\"M12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5Z\"\n fill=\"#475467\" />\n <path\n d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\n fill=\"#475467\" />\n <path\n d=\"M12 21C12.5523 21 13 20.5523 13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20C11 20.5523 11.4477 21 12 21Z\"\n fill=\"#475467\" />\n </svg>\n </button>\n <div class=\"category-menu\" *ngIf=\"activeMenuIndex === i\">\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'edit', i)\">Edit Name</button>\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'delete', i)\">Delete</button>\n </div>\n </div>\n\n <div class=\"category-percentage-section\">\n <div class=\"position-relative ff-select-wrapper compact\"\n [class.open]=\"openLimitDropdownIndex === i\" [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\"\n (click)=\"toggleLimitDropdown($event, i)\">\n <span>{{ tag.get('value')?.value || 0 }}%</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"openLimitDropdownIndex === i\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\n (click)=\"selectLimitValue($event, i, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\n\n <!-- Store Requests -->\n <div formGroupName=\"accuracyBreach\" class=\"card p-4 mb-4 ff-section-card\">\n <div class=\"d-flex justify-content-between align-items-start mb-4\">\n <div>\n <h5 class=\"ff-section-title mb-2\">Store Requests</h5>\n <p class=\"ff-section-desc mb-0\">\n Below stores have requested to raise a ticket after breaching the configured limit\n <span class=\"info-icon\">i</span>\n </p>\n </div>\n <button type=\"button\" class=\"btn btn-primary reset-btn d-inline-flex align-items-center gap-2\"\n *ngIf=\"!isEdit\" [disabled]=\"isResetDisabled\" (click)=\"openResetConfirmationModal()\" aria-live=\"polite\">\n <span>Reset</span>\n </button>\n </div>\n\n <!-- Restriction Criteria -->\n <div class=\"restriction-criteria mb-4\">\n <label class=\"mb-3 d-block\">\n Restrict ticket creation for any store that:\n </label>\n <div class=\"d-flex align-items-center flex-nowrap gap-2\">\n <span>Has raised more than</span>\n <div class=\"position-relative ff-select-wrapper compact\" [class.open]=\"isTicketCountDropdownOpen\"\n [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleTicketCountDropdown($event)\">\n <span>\n {{ footfallDirConfigurationForm.get('accuracyBreach.ticketCount')?.value || 1 }}\n </span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isTicketCountDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let c of [1, 2, 3, 4, 5]\"\n (click)=\"selectTicketCount($event, c)\">\n {{ c }}\n </button>\n </div>\n </div>\n <span>tickets in the calender</span>\n <div class=\"position-relative ff-select-wrapper compact store-days-select\"\n [class.open]=\"isStoreDaysDropdownOpen\" [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleStoreDaysDropdown($event)\">\n <span>{{ selectedDaysLabel }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isStoreDaysDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let opt of daysOptions\"\n (click)=\"selectStoreDays($event, opt)\">\n {{ opt.label }}\n </button>\n </div>\n </div>\n <span>based on configured conditions\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n placement=\"top\" [ngbTooltip]=\"conditionsTooltip\" tooltipClass=\"conditions-tooltip\">\n <g clip-path=\"url(#clip0_1432_80035)\">\n <path\n d=\"M8.00065 10.6666V7.99992M8.00065 5.33325H8.00732M14.6673 7.99992C14.6673 11.6818 11.6826 14.6666 8.00065 14.6666C4.31875 14.6666 1.33398 11.6818 1.33398 7.99992C1.33398 4.31802 4.31875 1.33325 8.00065 1.33325C11.6826 1.33325 14.6673 4.31802 14.6673 7.99992Z\"\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1432_80035\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>\n <ng-template #conditionsTooltip>\n <div style=\"text-align: left; font-size: 12px; line-height: 1.6;\">\n <b>1.</b> Delta between Store/AOM accuracy and Central Ops/Tango accuracy exceeds 10%<br>\n <b>2.</b> The overall accuracy after all reviews is greater than 85%.<br>\n <b>3.</b> Overall the Number of Images (Footfall) marked for validation in the ticket by the\n Store is Less than equal to 10\n </div>\n </ng-template>\n </div>\n </div>\n\n <!-- Store Requests Table -->\n <div class=\"store-requests-table\" [class.disabled]=\"isEdit\"\n *ngIf=\"storeList?.length > 0; else emptyStoreRequests\">\n <div class=\"table-responsive\" [ngClass]=\"{'store-table-scroll': storeList?.length > 5}\">\n <table class=\"table table-hover store-requests-table-content\">\n <thead>\n <tr>\n <th class=\"checkbox-column\">\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\n <input type=\"checkbox\" [checked]=\"isAllSelected\" [disabled]=\"isEdit\"\n (change)=\"toggleSelectAll($event)\" />\n <span class=\"checkmark-select\"></span>\n\n </label>\n </th>\n <th class=\"sortable store-name-column\">\n <div class=\"d-flex align-items-center\">\n <span>Select all stores ({{ storeList?.length || 0 }})</span>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" class=\"ms-2 dropdown-arrow\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#344054\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </th>\n <th class=\"sortable\">\n Raised on\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\n fill=\"none\" class=\"ms-1 sort-icon\">\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </th>\n <th class=\"sortable\">\n Last raised(Approved)\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\n fill=\"none\" class=\"ms-1 sort-icon\">\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </th>\n <th class=\"sortable\">\n No of Time Raised\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\n fill=\"none\" class=\"ms-1 sort-icon\">\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let store of storeList\">\n <td class=\"checkbox-column\">\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\n <input #cb type=\"checkbox\" [checked]=\"isStoreSelected(store)\" [disabled]=\"isEdit\"\n (change)=\"toggleStoreSelection(store, cb.checked)\" />\n <span class=\"checkmark-select\"></span>\n </label>\n </td>\n <td>{{ store.storeName }}</td>\n <td>{{ store.raisedOn }}</td>\n <td>{{ store.lastApproved || '-' }}</td>\n <td>{{ store.totalRaised }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <ng-template #emptyStoreRequests>\n <div class=\"empty-store-state text-center\">\n <div class=\"empty-store-icon mb-3\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.94629 21.1995C8.645 21.2313 8.33828 21.2502 8.02734 21.2502C7.85782 21.2502 7.69052 21.2434 7.52539 21.2336V31.6067C7.52539 33.0347 8.70837 34.2258 10.1963 34.2258H29.8008C31.2888 34.2258 32.4717 33.0347 32.4717 31.6067V21.2346C32.3098 21.2438 32.1459 21.2502 31.9814 21.2502C31.6675 21.2502 31.3569 21.2323 31.0508 21.1995V28.9875H8.94629V21.1995ZM30.9277 5.77368H9.06934C8.89197 5.77368 8.73671 5.86647 8.65918 5.98755L8.65723 5.9895L5.14746 11.4729L5.05273 11.6204C3.82719 13.7402 5.0918 16.4671 7.44336 16.7766C7.64428 16.8011 7.83403 16.8157 8.02148 16.8157C9.25156 16.8157 10.3395 16.287 11.0967 15.4651L12.0186 14.4641L12.9375 15.468C13.6864 16.2861 14.7731 16.8157 16.0107 16.8157C17.2428 16.8156 18.3347 16.2854 19.083 15.468L20.0049 14.4612L20.9268 15.468C21.6751 16.2855 22.7668 16.8157 23.999 16.8157C25.2312 16.8157 26.3229 16.2854 27.0713 15.468L27.9932 14.4612L28.915 15.468C29.6634 16.2855 30.756 16.8157 31.9883 16.8157C32.1697 16.8157 32.3648 16.8018 32.5645 16.7776H32.5635C34.9572 16.4571 36.2254 13.6075 34.8574 11.4729L34.8564 11.4739L31.3398 5.99048L31.3389 5.98755C31.2614 5.86628 31.1053 5.77368 30.9277 5.77368Z\"\n stroke=\"#009BF3\" stroke-width=\"2.5\" />\n </svg>\n </div>\n <p class=\"mb-0 fw-semibold text-muted\">No reset request from store</p>\n </div>\n </ng-template>\n </div>\n\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\n\n <!-- Send Ticket to Tango -->\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\n <h5 class=\"ff-section-title mb-1\">Send Ticket to Tango</h5>\n <div class=\"d-flex align-items-center mt-2\">\n <label class=\"me-2 mb-0 tango-label\">Send ticket to Tango if accuracy falls below</label>\n <div class=\"position-relative ff-select-wrapper compact ms-0\" [class.open]=\"issendTangoDropdownOpen\"\n [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleSendTangoCloseDropdown($event)\">\n <span>{{ footfallDirConfigurationForm.get('tangoReview')?.value || '1%' }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"issendTangoDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of sendTicketTango\"\n (click)=\"selectSendTicketTango($event, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer Actions -->\n <div *ngIf=\"!isEdit\">\n <div class=\"mb-5 w-100 footer-seperator\"></div>\n <div class=\"d-flex justify-content-end\">\n <a type=\"button\" class=\"btn btn-outline mt-1 pt-3 me-4\" (click)=\"onCancel()\">Cancel</a>\n <a type=\"submit\" class=\"btn btn-primary px-4\" (click)=\"onSubmit()\"><span>Save Changes</span></a>\n </div>\n </div>\n\n <!-- Category Modal -->\n <ng-template #categoryModal>\n <div class=\"modal-header border-0 pb-0\">\n <h5 class=\"modal-title\">\n {{ categoryModalMode === 'add' ? 'Add New Category' : 'Edit Category' }}\n </h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closeCategoryModal()\"></button>\n </div>\n <div class=\"modal-body category-modal-body\">\n <form [formGroup]=\"categoryForm\">\n <div class=\"mb-3\">\n <label class=\"form-label text-muted\">Icon</label>\n <div class=\"ff-select-wrapper icon-select\" [class.open]=\"isCategoryIconDropdownOpen\">\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryIconDropdown($event)\">\n <span class=\"d-inline-flex align-items-center gap-2\">\n <span class=\"category-icon\"\n [ngClass]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\n <ng-container\n [ngSwitch]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_icon_housekeeping)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\n fill=\"currentColor\" />\n </g>\n <defs>\n <clipPath id=\"clip0_icon_housekeeping\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </span>\n <span class=\"icon-label\">{{ selectedCategoryIconLabel }}</span>\n </span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryIconDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option d-flex align-items-center gap-2\"\n *ngFor=\"let icon of categoryIcons\"\n (click)=\"selectCategoryIconFromDropdown($event, icon.value)\">\n <span class=\"category-icon\" [ngClass]=\"icon.value\">\n <ng-container [ngSwitch]=\"icon.value\">\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_1162_24650)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\n fill=\"currentColor\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1162_24650\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </span>\n <span>{{ icon.label }}</span>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"mb-3\">\n <label class=\"form-label text-muted\">Category Name</label>\n <input type=\"text\" class=\"form-control\"\n [class.is-invalid]=\"categoryForm.get('name')?.invalid && categoryForm.get('name')?.touched\"\n placeholder=\"Enter your new category\" formControlName=\"name\" />\n <small class=\"text-danger\"\n *ngIf=\"categoryForm.get('name')?.hasError('required') && categoryForm.get('name')?.touched\">\n Category name is required.\n </small>\n <small class=\"text-danger\"\n *ngIf=\"categoryForm.get('name')?.hasError('duplicate') && categoryForm.get('name')?.touched\">\n Category name already exists.\n </small>\n </div>\n\n <div class=\"mb-2\">\n <label class=\"form-label text-muted\">Limitation</label>\n <div class=\"ff-select-wrapper\" [class.open]=\"isCategoryLimitDropdownOpen\">\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryLimitDropdown($event)\">\n <span>{{ categoryForm.get('limit')?.value || percentageList[0] }}%</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryLimitDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\n (click)=\"selectCategoryLimitValue($event, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n <div class=\"modal-footer border-0 pt-0\">\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeCategoryModal()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitCategoryForm()\">\n {{ categoryModalMode === 'add' ? 'Create' : 'Save' }}\n </button>\n </div>\n </ng-template>\n\n <!-- Delete Confirmation Modal -->\n <ng-template #deleteCategoryModal>\n <div class=\"modal-body text-center p-4\">\n <h5 class=\"fw-semibold mb-2\">Confirmation</h5>\n <p class=\"mb-4 text-muted\">\n You're about to delete <span class=\"fw-semibold\">{{ categoryPendingDeleteName }}</span> category.\n </p>\n <div class=\"d-flex justify-content-center gap-3\">\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeDeleteModal()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-danger\" (click)=\"confirmDeleteCategory()\">Delete</button>\n </div>\n </div>\n </ng-template>\n\n <!-- Reset Store Requests Confirmation Modal -->\n <ng-template #resetConfirmationModal>\n <div class=\"modal-body text-center p-4\">\n <h5 class=\"fw-semibold mb-2\">Reset Store Requests</h5>\n <p class=\"mb-4 text-muted\">\n Are you sure you want to proceed with resetting the selected <span class=\"fw-semibold\">{{\n resetRequest.arrayOfStores.length }}</span> store(s) requests?\n </p>\n <div class=\"d-flex justify-content-center gap-3\">\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeResetModal()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"confirmResetStoreRequest()\">Reset</button>\n </div>\n </div>\n </ng-template>\n\n</form>\n", styles: ["::ng-deep .conditions-tooltip .tooltip-inner{max-width:450px;text-align:left;padding:10px 14px;font-size:12px;line-height:1.6}form{padding:32px 20px;border-radius:16px;font-family:Inter,Segoe UI,sans-serif}.ff-section-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 4px #0f172a0a}.ff-section-title{font-size:16px;font-weight:600;color:#101828}.ff-section-desc{font-size:13px;color:#667085}.ff-divider{margin:8px 24px;border-color:#e4e7ec}.form-check{display:flex;align-items:center;gap:10px}.form-check-input{width:42px;height:22px;cursor:pointer;accent-color:#2563eb;border:1px solid #d1d5db;transition:all .2s ease-in-out}.form-check-input:checked{background-color:#2563eb;border-color:#2563eb}.form-check-input:disabled{opacity:.6;cursor:not-allowed}input[type=radio].form-check-input{width:16px;height:16px;accent-color:#2563eb}input[type=radio]:checked{border-color:#2563eb}select.form-select{border:1px solid #d1d5db;border-radius:8px;height:38px;font-size:14px;color:#374151;padding:6px 10px;outline:none;transition:.2s}select.form-select:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.btn-outline{background-color:#fff;border:1px solid #d1d5db;color:#374151;padding:6px 16px;border-radius:8px;transition:all .2s}.btn-outline:hover{background:#f9fafb}.btn-primary{background-color:#2563eb;border:none;color:#fff;border-radius:8px;padding:6px 16px;transition:.2s}.btn-primary:hover{background-color:#1e40af}.approver-option{display:flex;flex-direction:column;justify-content:flex-start;width:220px}.custom-checkbox{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;gap:12px}.custom-checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.custom-checkbox .checkmark{height:18px;width:18px;min-width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease}.custom-checkbox input:checked~.checkmark{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.label-text{display:flex;flex-direction:column}.label-text .title{font-weight:600;color:#101828}.label-text .desc{font-size:13px;color:#667085;margin-top:2px;max-width:190px;line-height:1.4}.custom-checkbox input:not(:checked)~.label-text .desc{opacity:.6}.approver-option.disabled-option{opacity:.6;pointer-events:none}.approver-option.disabled-option .custom-checkbox.disabled-checkbox{cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .checkmark{background-color:#f3f4f6;border-color:#d1d5dd;cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark{background-color:#f3f4f6;border-color:#d1d5dd}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #9ca3af;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:.5}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .title{color:#9ca3af}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .desc{color:#d1d5dd}.switch{position:relative;display:inline-block;width:44px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;transition:.3s;border-radius:22px}.slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:2px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.slider{background-color:#4c9aff}input:checked+.slider:before{transform:translate(21px)}.switch.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.switch.disabled .slider{cursor:not-allowed;background-color:#e5e7eb}.switch.disabled input:checked+.slider{background-color:#7dd3fc}.category-grid{display:flex;flex-wrap:wrap;gap:12px}.category-card{min-width:180px;border:1px solid #e5e7eb;border-radius:10px;padding:12px;background-color:#fff;box-shadow:0 1px 3px #1018280f;position:relative;display:flex;flex-direction:column;gap:12px}.category-card-header{display:flex;align-items:center;gap:10px}.category-icon{width:32px;height:32px;min-width:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.category-name{font-weight:500;color:#101828;font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-percentage-section{width:100%}.category-percentage-section .ff-select-wrapper.compact{width:100%;min-width:auto}.category-percentage-section .ff-select-toggle.small{width:100%;min-height:36px;padding:6px 10px;font-size:13px}.category-menu-btn{border:none;background:transparent;padding:4px;line-height:1;cursor:pointer;flex-shrink:0;margin-left:4px;display:inline-flex;align-items:center;justify-content:center}.category-menu-btn:disabled{cursor:default}.category-menu{position:absolute;top:48px;right:16px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;box-shadow:0 12px 30px #0f172a26;min-width:140px;z-index:5;padding:4px}.category-menu button{width:100%;text-align:left;background:transparent;border:none;padding:8px 10px;border-radius:8px;font-size:13px;color:#101828}.category-menu button:hover{background:#f4f7fb}.duplicateTag{background:#4755691f;color:#475569}.employeeTag{background:#3b82f61f;color:#3b82f6}.houseKeepingTag{background:#22c55e1f;color:#22c55e}.junkTag{background:#ef44441f;color:#ef4444}.purpleTag{background:#7c3aed1f;color:#7c3aed}.orangeTag{background:#ea580c1f;color:#ea580c}.add-new-btn{background:#fff;border:1px solid #d0d5dd;border-radius:10px;padding:5px 13px;font-size:14px;font-weight:600;color:#101828;transition:all .2s ease;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 1px 2px #1018280d}.add-new-btn:hover:not(:disabled){background:#f9fafb;border-color:#004aad;color:#004aad;box-shadow:0 2px 4px #10182814}.add-new-btn:active:not(:disabled){background:#f4f7fb;transform:translateY(1px);box-shadow:0 1px 2px #1018280d}.add-new-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9fafb;border-color:#e5e7eb;color:#9ca3af}.add-new-btn svg{transition:transform .2s ease;flex-shrink:0}.add-new-btn:hover:not(:disabled) svg{transform:rotate(90deg)}.info-icon{display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:600;border-radius:50%;background:#f3f3f3;color:#555;cursor:pointer;margin-left:6px;border:1.5px solid #8a8a8a}.tango-label{font-size:13px;color:#475467;font-weight:500}.store-requests-section{background:#fff;border:1px solid #e5e7eb;border-radius:10px}.reset-btn{border-width:1px;border-color:#d0d5dd;color:#004aad;font-weight:600;padding:6px 18px;background-color:#fff;transition:all .2s ease}.reset-btn svg path{stroke:currentColor}.reset-btn .spinner-border{color:#004aad}.reset-btn:disabled{opacity:.6;cursor:not-allowed}.reset-btn:not(:disabled):hover{background-color:#f4f7fb;border-color:#004aad;box-shadow:0 1px 2px #1018280f}.restriction-criteria{padding:16px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}.custom-checkbox-select{position:relative;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.custom-checkbox-select input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;width:0;height:0}.checkmark-select{height:18px;width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease;position:relative}.custom-checkbox-select input:checked~.checkmark-select{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox-select input:checked~.checkmark-select:after{content:\"\";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.dropdown-arrow{cursor:pointer;transition:transform .2s}.dropdown-arrow:hover{transform:translateY(2px)}.store-requests-table{margin-top:16px;position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}.store-requests-table.disabled{pointer-events:none;opacity:.6;-webkit-user-select:none;user-select:none}.store-requests-table-content{border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:0}.store-requests-table-content thead{background:linear-gradient(180deg,#f0f6ff,#f7f9fc)}.store-requests-table-content thead th{padding:14px 16px;font-weight:600;font-size:12px;color:#475467;text-align:left;border-bottom:1px solid #e5e7eb;white-space:nowrap;vertical-align:middle;text-transform:uppercase;letter-spacing:.04em}.store-requests-table-content tbody td{padding:14px 16px;font-size:13px;color:#344054;border-bottom:1px solid #f2f4f7;vertical-align:middle}.store-requests-table-content tbody tr{transition:background .15s}.store-requests-table-content tbody tr:hover{background-color:#f8fbff}.store-requests-table-content tbody tr:last-child td{border-bottom:none}.store-table-scroll{max-height:360px;overflow-y:auto}.store-table-scroll table{margin-bottom:0}.store-table-scroll .store-requests-table-content thead th{position:sticky;top:0;z-index:2;background:#f0f6ff}.checkbox-column{width:50px;padding-left:16px!important;padding-right:0!important}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sortable:hover{background-color:#e8eef8}.sort-icon{opacity:.5;transition:opacity .2s}.sortable:hover .sort-icon{opacity:1}.store-name-column{min-width:240px}.store-name-column .column-header{justify-content:space-between}.store-name-column .select-all-row{padding-top:8px;margin-top:8px;border-top:1px solid #e5e7eb}.empty-store-state{border:1px dashed #c7d7f0;border-radius:12px;padding:40px 16px;background:#f9fbff;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-store-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#2e90fa1f}.store-days-select .ff-select-toggle{min-width:99px}.store-days-select .ff-select-toggle span{white-space:nowrap}.ff-select-wrapper{width:100%;position:relative}.ff-select-wrapper.compact{width:auto;min-width:80px}.ff-select-wrapper.disabled{pointer-events:none;opacity:.7}.ff-select-wrapper.open .ff-select-toggle svg{transform:rotate(180deg)}.ff-select-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #d0d5dd;border-radius:10px;padding:8px 12px;background:#fff;font-weight:600;color:#101828;min-height:40px}.ff-select-toggle.small{min-height:36px;padding:6px 10px;font-size:13px}.ff-select-toggle svg{transition:transform .2s ease}.ff-select-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e4e7ec;border-radius:12px;box-shadow:0 16px 40px #0f172a26;max-height:220px;overflow-y:auto;z-index:15;padding:4px}.ff-select-option{width:100%;text-align:left;border:none;background:transparent;padding:8px 10px;border-radius:8px;font-size:14px;color:#101828}.ff-select-option:hover{background:#f4f7fb}.category-modal-body .form-control,.category-modal-body .form-select{border-radius:10px;min-height:44px}.category-modal-body .form-label{font-size:13px}.category-modal-body .text-danger{font-size:12px}.custom-modal{border-radius:16px;padding:10px 20px 20px;background:#fff;box-shadow:0 10px 40px #00000014;width:500px}.field-label{color:#8b8b8b;font-size:14px;margin-bottom:4px;display:block}.input-box{width:100%;height:46px;border:1px solid #e5e7eb;border-radius:10px;padding:0 14px;font-size:15px;background:#f8fafc;display:flex;align-items:center}.input-box:focus-within{border-color:#4daeff;background:#fff;box-shadow:0 0 0 2px #4daeff26}.icon-row{display:flex}.icon-box{width:60px;cursor:pointer;justify-content:space-between}.clean-select{border:none;width:100%;height:100%;background:transparent;font-size:15px;outline:none}.select-box{padding:0}.button-area{display:flex;justify-content:space-between;gap:15px}.btn-cancel{width:50%;height:46px;border-radius:10px;border:1px solid #dbdbdb;background:#fff;font-weight:500;cursor:pointer}.btn-create{width:50%;height:46px;border-radius:10px;border:none;background:#0094ff;color:#fff;font-weight:600;cursor:pointer}.btn-create:hover{background:#007bdb}.card .btn-outline.btn-sm{padding:6px 10px;border-radius:8px}\n"] }]
8807
+ args: [{ selector: 'lib-footfall-configuration', template: "<form [formGroup]=\"footfallDirConfigurationForm\" class=\"container-fluid\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.Global_Configuration_isEdit\">\r\n <div *ngIf=\"isEdit\" class=\"col-12 mb-5\">\r\n <div class=\"d-flex justify-content-end\">\r\n <button (click)=\"toggleForm();\" type=\"button\" class=\"btn btn-outline py-3 align-items-end\">\r\n <span 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 <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>\r\n </span>Edit Details\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Approver Configuration -->\r\n <div class=\"card p-4 mb-4 ff-section-card\">\r\n <h5 class=\"ff-section-title mb-1\">Approver configuration</h5>\r\n <p class=\"ff-section-desc mb-4\">\r\n Set level of revisions required for a store raised tickets\r\n </p>\r\n\r\n <div formArrayName=\"revision\" class=\"d-flex flex-wrap gap-5\">\r\n <div *ngFor=\"let rev of revisionArray.controls; let i = index\" [formGroupName]=\"i\"\r\n class=\"approver-option d-flex flex-column\"\r\n [class.disabled-option]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\r\n\r\n <label class=\"custom-checkbox align-items-start\"\r\n [class.disabled-checkbox]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\r\n <input type=\"checkbox\" formControlName=\"isChecked\" [id]=\"'action-' + i\" />\r\n <span class=\"checkmark\"></span>\r\n <div class=\"label-text\">\r\n <div class=\"title\">\r\n {{ rev.get('actionType')?.value | titlecase }}\r\n </div>\r\n <div class=\"desc text-muted\">\r\n <ng-container [ngSwitch]=\"rev.get('actionType')?.value\">\r\n <span *ngSwitchCase=\"'reviewer'\">The ticket undergoes a single review to verify\r\n footfall.</span>\r\n <span *ngSwitchCase=\"'approver'\">The ticket undergoes a final review after the initial\r\n check.</span>\r\n <span *ngSwitchCase=\"'tango'\">Finalize tickets and update footfall count.</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </label>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\">\r\n\r\n <!-- Store SPOC Ticket Creation -->\r\n <div class=\"card p-4 mb-4 ff-section-card\">\r\n <h5 class=\"ff-section-title mb-3\">Store SPOC Ticket Creation</h5>\r\n\r\n <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n <label class=\"mb-0\">\r\n Allow store SPOC to create tickets only for the last\r\n </label>\r\n\r\n <div class=\"position-relative ff-select-wrapper compact ms-2\"\r\n [class.open]=\"isAllowTicketCreationDropdownOpen\" [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\"\r\n (click)=\"toggleAllowTicketCreationDropdown($event)\">\r\n <span>{{ footfallDirConfigurationForm.get('allowTicketCreation')?.value ||\r\n spocTicketCreationdays[0] }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isAllowTicketCreationDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let day of spocTicketCreationdays\"\r\n (click)=\"selectAllowTicketCreation($event, day)\">\r\n {{ day }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <span class=\"mb-0\">Days</span>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\">\r\n\r\n <!-- Ticket Auto-close -->\r\n <div class=\"card p-4 mb-4 ff-section-card\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <h5 class=\"ff-section-title m-0\">Ticket Auto-close</h5>\r\n\r\n <label class=\"switch m-0 ms-3\" [class.disabled]=\"isEdit\">\r\n <input type=\"checkbox\" formControlName=\"isAutoCloseEnable\" [disabled]=\"isEdit\">\r\n <span class=\"slider round\"></span>\r\n </label>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center mt-2\">\r\n <span class=\"mb-0\">\r\n Ticket should be auto-closed, if the created ticket accuracy is greater than or equal to\r\n </span>\r\n\r\n <div class=\"position-relative ff-select-wrapper compact ms-2\" [class.open]=\"isAutoCloseDropdownOpen\"\r\n [class.disabled]=\"isEdit || !footfallDirConfigurationForm.get('isAutoCloseEnable')?.value\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleAutoCloseDropdown($event)\">\r\n <span>{{ footfallDirConfigurationForm.get('autoCloseAccuracy')?.value || '1%' }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isAutoCloseDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of accuracyPercentageList\"\r\n (click)=\"selectAutoCloseAccuracy($event, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\">\r\n\r\n <!-- Footfall Directory Limitations -->\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div>\r\n <h5 class=\"ff-section-title m-0\">Footfall directory limitations</h5>\r\n <p class=\"ff-section-desc mb-2\">\r\n Set maximum limitation for stores to tag non-Purchasers from Total Footfall\r\n </p>\r\n </div>\r\n\r\n <button type=\"button\" [disabled]=\"isEdit\" class=\"add-new-btn d-inline-flex align-items-center gap-2\"\r\n (click)=\"openCategoryModal('add')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8 3.33334V12.6667M3.33334 8H12.6667\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span>Add New</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Category Cards Grid -->\r\n <div formArrayName=\"taggingLimitation\" class=\"category-grid mt-3\">\r\n <div *ngFor=\"let tag of tagLimits.controls; let i = index\" [formGroupName]=\"i\" class=\"category-card\">\r\n <div class=\"category-card-header\">\r\n <div class=\"category-icon\" [ngClass]=\"tag.get('iconName')?.value\">\r\n <ng-container [ngSwitch]=\"tag.get('iconName')?.value\">\r\n <svg *ngSwitchCase=\"'duplicateTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1162_24621)\">\r\n <path\r\n d=\"M2.5 7.5H2C1.73478 7.5 1.48043 7.39464 1.29289 7.20711C1.10536 7.01957 1 6.76522 1 6.5V2C1 1.73478 1.10536 1.48043 1.29289 1.29289C1.48043 1.10536 1.73478 1 2 1H6.5C6.76522 1 7.01957 1.10536 7.20711 1.29289C7.39464 1.48043 7.5 1.73478 7.5 2V2.5M5.5 4.5H10C10.5523 4.5 11 4.94772 11 5.5V10C11 10.5523 10.5523 11 10 11H5.5C4.94772 11 4.5 10.5523 4.5 10V5.5C4.5 4.94772 4.94772 4.5 5.5 4.5Z\"\r\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1162_24621\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'employeeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"13\" viewBox=\"0 0 16 13\" fill=\"none\">\r\n <path\r\n d=\"M11.1667 12.5V11.1667C11.1667 10.4594 10.8857 9.78115 10.3856 9.28105C9.88552 8.78095 9.20724 8.5 8.5 8.5H3.16667C2.45942 8.5 1.78115 8.78095 1.28105 9.28105C0.780952 9.78115 0.5 10.4594 0.5 11.1667V12.5M15.1667 12.5V11.1667C15.1662 10.5758 14.9696 10.0018 14.6076 9.53488C14.2456 9.06791 13.7388 8.73438 13.1667 8.58667M10.5 0.586667C11.0736 0.733534 11.582 1.06713 11.9451 1.53487C12.3082 2.00261 12.5052 2.57789 12.5052 3.17C12.5052 3.76211 12.3082 4.33739 11.9451 4.80513C11.582 5.27287 11.0736 5.60647 10.5 5.75333M8.5 3.16667C8.5 4.63943 7.30609 5.83333 5.83333 5.83333C4.36057 5.83333 3.16667 4.63943 3.16667 3.16667C3.16667 1.69391 4.36057 0.5 5.83333 0.5C7.30609 0.5 8.5 1.69391 8.5 3.16667Z\"\r\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1162_24650)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\r\n fill=\"currentColor\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1162_24650\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n </div>\r\n <div class=\"category-name\">\r\n {{ tag.get('name')?.value }}\r\n </div>\r\n <button\r\n *ngIf=\"(tag.get('iconName')?.value !== 'duplicateTag' && tag.get('iconName')?.value !== 'employeeTag')\"\r\n type=\"button\" class=\"category-menu-btn\" (click)=\"toggleCategoryMenu($event, i)\"\r\n [disabled]=\"isEdit\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M12 21C12.5523 21 13 20.5523 13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20C11 20.5523 11.4477 21 12 21Z\"\r\n fill=\"#475467\" />\r\n </svg>\r\n </button>\r\n <div class=\"category-menu\" *ngIf=\"activeMenuIndex === i\">\r\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'edit', i)\">Edit Name</button>\r\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'delete', i)\">Delete</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"category-percentage-section\">\r\n <div class=\"position-relative ff-select-wrapper compact\"\r\n [class.open]=\"openLimitDropdownIndex === i\" [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\"\r\n (click)=\"toggleLimitDropdown($event, i)\">\r\n <span>{{ tag.get('value')?.value || 0 }}%</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"openLimitDropdownIndex === i\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\r\n (click)=\"selectLimitValue($event, i, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n\r\n <!-- Store Requests -->\r\n <div formGroupName=\"accuracyBreach\" class=\"card p-4 mb-4 ff-section-card\">\r\n <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n <div>\r\n <h5 class=\"ff-section-title mb-2\">Store Requests</h5>\r\n <p class=\"ff-section-desc mb-0\">\r\n Below stores have requested to raise a ticket after breaching the configured limit\r\n <span class=\"info-icon\">i</span>\r\n </p>\r\n </div>\r\n <button type=\"button\" class=\"btn btn-primary reset-btn d-inline-flex align-items-center gap-2\"\r\n *ngIf=\"!isEdit\" [disabled]=\"isResetDisabled\" (click)=\"openResetConfirmationModal()\" aria-live=\"polite\">\r\n <span>Reset</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Restriction Criteria -->\r\n <div class=\"restriction-criteria mb-4\">\r\n <label class=\"mb-3 d-block\">\r\n Restrict ticket creation for any store that:\r\n </label>\r\n <div class=\"d-flex align-items-center flex-nowrap gap-2\">\r\n <span>Has raised more than</span>\r\n <div class=\"position-relative ff-select-wrapper compact\" [class.open]=\"isTicketCountDropdownOpen\"\r\n [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleTicketCountDropdown($event)\">\r\n <span>\r\n {{ footfallDirConfigurationForm.get('accuracyBreach.ticketCount')?.value || 1 }}\r\n </span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isTicketCountDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let c of [1, 2, 3, 4, 5]\"\r\n (click)=\"selectTicketCount($event, c)\">\r\n {{ c }}\r\n </button>\r\n </div>\r\n </div>\r\n <span>tickets in the calender</span>\r\n <div class=\"position-relative ff-select-wrapper compact store-days-select\"\r\n [class.open]=\"isStoreDaysDropdownOpen\" [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleStoreDaysDropdown($event)\">\r\n <span>{{ selectedDaysLabel }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isStoreDaysDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let opt of daysOptions\"\r\n (click)=\"selectStoreDays($event, opt)\">\r\n {{ opt.label }}\r\n </button>\r\n </div>\r\n </div>\r\n <span>based on configured conditions\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n placement=\"top\" [ngbTooltip]=\"conditionsTooltip\" tooltipClass=\"conditions-tooltip\">\r\n <g clip-path=\"url(#clip0_1432_80035)\">\r\n <path\r\n d=\"M8.00065 10.6666V7.99992M8.00065 5.33325H8.00732M14.6673 7.99992C14.6673 11.6818 11.6826 14.6666 8.00065 14.6666C4.31875 14.6666 1.33398 11.6818 1.33398 7.99992C1.33398 4.31802 4.31875 1.33325 8.00065 1.33325C11.6826 1.33325 14.6673 4.31802 14.6673 7.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1432_80035\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #conditionsTooltip>\r\n <div style=\"text-align: left; font-size: 12px; line-height: 1.6;\">\r\n <b>1.</b> Delta between Store/AOM accuracy and Central Ops/Tango accuracy exceeds 10%<br>\r\n <b>2.</b> The overall accuracy after all reviews is greater than 85%.<br>\r\n <b>3.</b> Overall the Number of Images (Footfall) marked for validation in the ticket by the\r\n Store is Less than equal to 10\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Store Requests Table -->\r\n <div class=\"store-requests-table\" [class.disabled]=\"isEdit\"\r\n *ngIf=\"storeList?.length > 0; else emptyStoreRequests\">\r\n <div class=\"table-responsive\" [ngClass]=\"{'store-table-scroll': storeList?.length > 5}\">\r\n <table class=\"table table-hover store-requests-table-content\">\r\n <thead>\r\n <tr>\r\n <th class=\"checkbox-column\">\r\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\r\n <input type=\"checkbox\" [checked]=\"isAllSelected\" [disabled]=\"isEdit\"\r\n (change)=\"toggleSelectAll($event)\" />\r\n <span class=\"checkmark-select\"></span>\r\n\r\n </label>\r\n </th>\r\n <th class=\"sortable store-name-column\">\r\n <div class=\"d-flex align-items-center\">\r\n <span>Select all stores ({{ storeList?.length || 0 }})</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" class=\"ms-2 dropdown-arrow\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#344054\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th class=\"sortable\">\r\n Raised on\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" class=\"ms-1 sort-icon\">\r\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"sortable\">\r\n Last raised(Approved)\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" class=\"ms-1 sort-icon\">\r\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"sortable\">\r\n No of Time Raised\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" class=\"ms-1 sort-icon\">\r\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of storeList\">\r\n <td class=\"checkbox-column\">\r\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\r\n <input #cb type=\"checkbox\" [checked]=\"isStoreSelected(store)\" [disabled]=\"isEdit\"\r\n (change)=\"toggleStoreSelection(store, cb.checked)\" />\r\n <span class=\"checkmark-select\"></span>\r\n </label>\r\n </td>\r\n <td>{{ store.storeName }}</td>\r\n <td>{{ store.raisedOn }}</td>\r\n <td>{{ store.lastApproved || '-' }}</td>\r\n <td>{{ store.totalRaised }}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <ng-template #emptyStoreRequests>\r\n <div class=\"empty-store-state text-center\">\r\n <div class=\"empty-store-icon mb-3\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8.94629 21.1995C8.645 21.2313 8.33828 21.2502 8.02734 21.2502C7.85782 21.2502 7.69052 21.2434 7.52539 21.2336V31.6067C7.52539 33.0347 8.70837 34.2258 10.1963 34.2258H29.8008C31.2888 34.2258 32.4717 33.0347 32.4717 31.6067V21.2346C32.3098 21.2438 32.1459 21.2502 31.9814 21.2502C31.6675 21.2502 31.3569 21.2323 31.0508 21.1995V28.9875H8.94629V21.1995ZM30.9277 5.77368H9.06934C8.89197 5.77368 8.73671 5.86647 8.65918 5.98755L8.65723 5.9895L5.14746 11.4729L5.05273 11.6204C3.82719 13.7402 5.0918 16.4671 7.44336 16.7766C7.64428 16.8011 7.83403 16.8157 8.02148 16.8157C9.25156 16.8157 10.3395 16.287 11.0967 15.4651L12.0186 14.4641L12.9375 15.468C13.6864 16.2861 14.7731 16.8157 16.0107 16.8157C17.2428 16.8156 18.3347 16.2854 19.083 15.468L20.0049 14.4612L20.9268 15.468C21.6751 16.2855 22.7668 16.8157 23.999 16.8157C25.2312 16.8157 26.3229 16.2854 27.0713 15.468L27.9932 14.4612L28.915 15.468C29.6634 16.2855 30.756 16.8157 31.9883 16.8157C32.1697 16.8157 32.3648 16.8018 32.5645 16.7776H32.5635C34.9572 16.4571 36.2254 13.6075 34.8574 11.4729L34.8564 11.4739L31.3398 5.99048L31.3389 5.98755C31.2614 5.86628 31.1053 5.77368 30.9277 5.77368Z\"\r\n stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n </svg>\r\n </div>\r\n <p class=\"mb-0 fw-semibold text-muted\">No reset request from store</p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n\r\n <!-- Send Ticket to Tango -->\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\r\n <h5 class=\"ff-section-title mb-1\">Send Ticket to Tango</h5>\r\n <div class=\"d-flex align-items-center mt-2\">\r\n <label class=\"me-2 mb-0 tango-label\">Send ticket to Tango if accuracy falls below</label>\r\n <div class=\"position-relative ff-select-wrapper compact ms-0\" [class.open]=\"issendTangoDropdownOpen\"\r\n [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleSendTangoCloseDropdown($event)\">\r\n <span>{{ footfallDirConfigurationForm.get('tangoReview')?.value || '1%' }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"issendTangoDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of sendTicketTango\"\r\n (click)=\"selectSendTicketTango($event, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Footer Actions -->\r\n <div *ngIf=\"!isEdit\">\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 mt-1 pt-3 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 <!-- Category Modal -->\r\n <ng-template #categoryModal>\r\n <div class=\"modal-header border-0 pb-0\">\r\n <h5 class=\"modal-title\">\r\n {{ categoryModalMode === 'add' ? 'Add New Category' : 'Edit Category' }}\r\n </h5>\r\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closeCategoryModal()\"></button>\r\n </div>\r\n <div class=\"modal-body category-modal-body\">\r\n <form [formGroup]=\"categoryForm\">\r\n <div class=\"mb-3\">\r\n <label class=\"form-label text-muted\">Icon</label>\r\n <div class=\"ff-select-wrapper icon-select\" [class.open]=\"isCategoryIconDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryIconDropdown($event)\">\r\n <span class=\"d-inline-flex align-items-center gap-2\">\r\n <span class=\"category-icon\"\r\n [ngClass]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\r\n <ng-container\r\n [ngSwitch]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\r\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_icon_housekeeping)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\r\n fill=\"currentColor\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_icon_housekeeping\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n </span>\r\n <span class=\"icon-label\">{{ selectedCategoryIconLabel }}</span>\r\n </span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryIconDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option d-flex align-items-center gap-2\"\r\n *ngFor=\"let icon of categoryIcons\"\r\n (click)=\"selectCategoryIconFromDropdown($event, icon.value)\">\r\n <span class=\"category-icon\" [ngClass]=\"icon.value\">\r\n <ng-container [ngSwitch]=\"icon.value\">\r\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1162_24650)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\r\n fill=\"currentColor\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1162_24650\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n </span>\r\n <span>{{ icon.label }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-3\">\r\n <label class=\"form-label text-muted\">Category Name</label>\r\n <input type=\"text\" class=\"form-control\"\r\n [class.is-invalid]=\"categoryForm.get('name')?.invalid && categoryForm.get('name')?.touched\"\r\n placeholder=\"Enter your new category\" formControlName=\"name\" />\r\n <small class=\"text-danger\"\r\n *ngIf=\"categoryForm.get('name')?.hasError('required') && categoryForm.get('name')?.touched\">\r\n Category name is required.\r\n </small>\r\n <small class=\"text-danger\"\r\n *ngIf=\"categoryForm.get('name')?.hasError('duplicate') && categoryForm.get('name')?.touched\">\r\n Category name already exists.\r\n </small>\r\n </div>\r\n\r\n <div class=\"mb-2\">\r\n <label class=\"form-label text-muted\">Limitation</label>\r\n <div class=\"ff-select-wrapper\" [class.open]=\"isCategoryLimitDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryLimitDropdown($event)\">\r\n <span>{{ categoryForm.get('limit')?.value || percentageList[0] }}%</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryLimitDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\r\n (click)=\"selectCategoryLimitValue($event, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n <div class=\"modal-footer border-0 pt-0\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeCategoryModal()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitCategoryForm()\">\r\n {{ categoryModalMode === 'add' ? 'Create' : 'Save' }}\r\n </button>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Delete Confirmation Modal -->\r\n <ng-template #deleteCategoryModal>\r\n <div class=\"modal-body text-center p-4\">\r\n <h5 class=\"fw-semibold mb-2\">Confirmation</h5>\r\n <p class=\"mb-4 text-muted\">\r\n You're about to delete <span class=\"fw-semibold\">{{ categoryPendingDeleteName }}</span> category.\r\n </p>\r\n <div class=\"d-flex justify-content-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeDeleteModal()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-danger\" (click)=\"confirmDeleteCategory()\">Delete</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Reset Store Requests Confirmation Modal -->\r\n <ng-template #resetConfirmationModal>\r\n <div class=\"modal-body text-center p-4\">\r\n <h5 class=\"fw-semibold mb-2\">Reset Store Requests</h5>\r\n <p class=\"mb-4 text-muted\">\r\n Are you sure you want to proceed with resetting the selected <span class=\"fw-semibold\">{{\r\n resetRequest.arrayOfStores.length }}</span> store(s) requests?\r\n </p>\r\n <div class=\"d-flex justify-content-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeResetModal()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"confirmResetStoreRequest()\">Reset</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n</form>\r\n", styles: ["::ng-deep .conditions-tooltip .tooltip-inner{max-width:450px;text-align:left;padding:10px 14px;font-size:12px;line-height:1.6}form{padding:32px 20px;border-radius:16px;font-family:Inter,Segoe UI,sans-serif}.ff-section-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 4px #0f172a0a}.ff-section-title{font-size:16px;font-weight:600;color:#101828}.ff-section-desc{font-size:13px;color:#667085}.ff-divider{margin:8px 24px;border-color:#e4e7ec}.form-check{display:flex;align-items:center;gap:10px}.form-check-input{width:42px;height:22px;cursor:pointer;accent-color:#2563eb;border:1px solid #d1d5db;transition:all .2s ease-in-out}.form-check-input:checked{background-color:#2563eb;border-color:#2563eb}.form-check-input:disabled{opacity:.6;cursor:not-allowed}input[type=radio].form-check-input{width:16px;height:16px;accent-color:#2563eb}input[type=radio]:checked{border-color:#2563eb}select.form-select{border:1px solid #d1d5db;border-radius:8px;height:38px;font-size:14px;color:#374151;padding:6px 10px;outline:none;transition:.2s}select.form-select:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.btn-outline{background-color:#fff;border:1px solid #d1d5db;color:#374151;padding:6px 16px;border-radius:8px;transition:all .2s}.btn-outline:hover{background:#f9fafb}.btn-primary{background-color:#2563eb;border:none;color:#fff;border-radius:8px;padding:6px 16px;transition:.2s}.btn-primary:hover{background-color:#1e40af}.approver-option{display:flex;flex-direction:column;justify-content:flex-start;width:220px}.custom-checkbox{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;gap:12px}.custom-checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.custom-checkbox .checkmark{height:18px;width:18px;min-width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease}.custom-checkbox input:checked~.checkmark{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.label-text{display:flex;flex-direction:column}.label-text .title{font-weight:600;color:#101828}.label-text .desc{font-size:13px;color:#667085;margin-top:2px;max-width:190px;line-height:1.4}.custom-checkbox input:not(:checked)~.label-text .desc{opacity:.6}.approver-option.disabled-option{opacity:.6;pointer-events:none}.approver-option.disabled-option .custom-checkbox.disabled-checkbox{cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .checkmark{background-color:#f3f4f6;border-color:#d1d5dd;cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark{background-color:#f3f4f6;border-color:#d1d5dd}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #9ca3af;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:.5}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .title{color:#9ca3af}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .desc{color:#d1d5dd}.switch{position:relative;display:inline-block;width:44px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;transition:.3s;border-radius:22px}.slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:2px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.slider{background-color:#4c9aff}input:checked+.slider:before{transform:translate(21px)}.switch.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.switch.disabled .slider{cursor:not-allowed;background-color:#e5e7eb}.switch.disabled input:checked+.slider{background-color:#7dd3fc}.category-grid{display:flex;flex-wrap:wrap;gap:12px}.category-card{min-width:180px;border:1px solid #e5e7eb;border-radius:10px;padding:12px;background-color:#fff;box-shadow:0 1px 3px #1018280f;position:relative;display:flex;flex-direction:column;gap:12px}.category-card-header{display:flex;align-items:center;gap:10px}.category-icon{width:32px;height:32px;min-width:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.category-name{font-weight:500;color:#101828;font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-percentage-section{width:100%}.category-percentage-section .ff-select-wrapper.compact{width:100%;min-width:auto}.category-percentage-section .ff-select-toggle.small{width:100%;min-height:36px;padding:6px 10px;font-size:13px}.category-menu-btn{border:none;background:transparent;padding:4px;line-height:1;cursor:pointer;flex-shrink:0;margin-left:4px;display:inline-flex;align-items:center;justify-content:center}.category-menu-btn:disabled{cursor:default}.category-menu{position:absolute;top:48px;right:16px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;box-shadow:0 12px 30px #0f172a26;min-width:140px;z-index:5;padding:4px}.category-menu button{width:100%;text-align:left;background:transparent;border:none;padding:8px 10px;border-radius:8px;font-size:13px;color:#101828}.category-menu button:hover{background:#f4f7fb}.duplicateTag{background:#4755691f;color:#475569}.employeeTag{background:#3b82f61f;color:#3b82f6}.houseKeepingTag{background:#22c55e1f;color:#22c55e}.junkTag{background:#ef44441f;color:#ef4444}.purpleTag{background:#7c3aed1f;color:#7c3aed}.orangeTag{background:#ea580c1f;color:#ea580c}.add-new-btn{background:#fff;border:1px solid #d0d5dd;border-radius:10px;padding:5px 13px;font-size:14px;font-weight:600;color:#101828;transition:all .2s ease;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 1px 2px #1018280d}.add-new-btn:hover:not(:disabled){background:#f9fafb;border-color:#004aad;color:#004aad;box-shadow:0 2px 4px #10182814}.add-new-btn:active:not(:disabled){background:#f4f7fb;transform:translateY(1px);box-shadow:0 1px 2px #1018280d}.add-new-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9fafb;border-color:#e5e7eb;color:#9ca3af}.add-new-btn svg{transition:transform .2s ease;flex-shrink:0}.add-new-btn:hover:not(:disabled) svg{transform:rotate(90deg)}.info-icon{display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:600;border-radius:50%;background:#f3f3f3;color:#555;cursor:pointer;margin-left:6px;border:1.5px solid #8a8a8a}.tango-label{font-size:13px;color:#475467;font-weight:500}.store-requests-section{background:#fff;border:1px solid #e5e7eb;border-radius:10px}.reset-btn{border-width:1px;border-color:#d0d5dd;color:#004aad;font-weight:600;padding:6px 18px;background-color:#fff;transition:all .2s ease}.reset-btn svg path{stroke:currentColor}.reset-btn .spinner-border{color:#004aad}.reset-btn:disabled{opacity:.6;cursor:not-allowed}.reset-btn:not(:disabled):hover{background-color:#f4f7fb;border-color:#004aad;box-shadow:0 1px 2px #1018280f}.restriction-criteria{padding:16px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}.custom-checkbox-select{position:relative;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.custom-checkbox-select input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;width:0;height:0}.checkmark-select{height:18px;width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease;position:relative}.custom-checkbox-select input:checked~.checkmark-select{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox-select input:checked~.checkmark-select:after{content:\"\";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.dropdown-arrow{cursor:pointer;transition:transform .2s}.dropdown-arrow:hover{transform:translateY(2px)}.store-requests-table{margin-top:16px;position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}.store-requests-table.disabled{pointer-events:none;opacity:.6;-webkit-user-select:none;user-select:none}.store-requests-table-content{border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:0}.store-requests-table-content thead{background:linear-gradient(180deg,#f0f6ff,#f7f9fc)}.store-requests-table-content thead th{padding:14px 16px;font-weight:600;font-size:12px;color:#475467;text-align:left;border-bottom:1px solid #e5e7eb;white-space:nowrap;vertical-align:middle;text-transform:uppercase;letter-spacing:.04em}.store-requests-table-content tbody td{padding:14px 16px;font-size:13px;color:#344054;border-bottom:1px solid #f2f4f7;vertical-align:middle}.store-requests-table-content tbody tr{transition:background .15s}.store-requests-table-content tbody tr:hover{background-color:#f8fbff}.store-requests-table-content tbody tr:last-child td{border-bottom:none}.store-table-scroll{max-height:360px;overflow-y:auto}.store-table-scroll table{margin-bottom:0}.store-table-scroll .store-requests-table-content thead th{position:sticky;top:0;z-index:2;background:#f0f6ff}.checkbox-column{width:50px;padding-left:16px!important;padding-right:0!important}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sortable:hover{background-color:#e8eef8}.sort-icon{opacity:.5;transition:opacity .2s}.sortable:hover .sort-icon{opacity:1}.store-name-column{min-width:240px}.store-name-column .column-header{justify-content:space-between}.store-name-column .select-all-row{padding-top:8px;margin-top:8px;border-top:1px solid #e5e7eb}.empty-store-state{border:1px dashed #c7d7f0;border-radius:12px;padding:40px 16px;background:#f9fbff;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-store-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#2e90fa1f}.store-days-select .ff-select-toggle{min-width:99px}.store-days-select .ff-select-toggle span{white-space:nowrap}.ff-select-wrapper{width:100%;position:relative}.ff-select-wrapper.compact{width:auto;min-width:80px}.ff-select-wrapper.disabled{pointer-events:none;opacity:.7}.ff-select-wrapper.open .ff-select-toggle svg{transform:rotate(180deg)}.ff-select-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #d0d5dd;border-radius:10px;padding:8px 12px;background:#fff;font-weight:600;color:#101828;min-height:40px}.ff-select-toggle.small{min-height:36px;padding:6px 10px;font-size:13px}.ff-select-toggle svg{transition:transform .2s ease}.ff-select-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e4e7ec;border-radius:12px;box-shadow:0 16px 40px #0f172a26;max-height:220px;overflow-y:auto;z-index:15;padding:4px}.ff-select-option{width:100%;text-align:left;border:none;background:transparent;padding:8px 10px;border-radius:8px;font-size:14px;color:#101828}.ff-select-option:hover{background:#f4f7fb}.category-modal-body .form-control,.category-modal-body .form-select{border-radius:10px;min-height:44px}.category-modal-body .form-label{font-size:13px}.category-modal-body .text-danger{font-size:12px}.custom-modal{border-radius:16px;padding:10px 20px 20px;background:#fff;box-shadow:0 10px 40px #00000014;width:500px}.field-label{color:#8b8b8b;font-size:14px;margin-bottom:4px;display:block}.input-box{width:100%;height:46px;border:1px solid #e5e7eb;border-radius:10px;padding:0 14px;font-size:15px;background:#f8fafc;display:flex;align-items:center}.input-box:focus-within{border-color:#4daeff;background:#fff;box-shadow:0 0 0 2px #4daeff26}.icon-row{display:flex}.icon-box{width:60px;cursor:pointer;justify-content:space-between}.clean-select{border:none;width:100%;height:100%;background:transparent;font-size:15px;outline:none}.select-box{padding:0}.button-area{display:flex;justify-content:space-between;gap:15px}.btn-cancel{width:50%;height:46px;border-radius:10px;border:1px solid #dbdbdb;background:#fff;font-weight:500;cursor:pointer}.btn-create{width:50%;height:46px;border-radius:10px;border:none;background:#0094ff;color:#fff;font-weight:600;cursor:pointer}.btn-create:hover{background:#007bdb}.card .btn-outline.btn-sm{padding:6px 10px;border-radius:8px}\n"] }]
8808
8808
  }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i3.GlobalStateService }, { type: ClientApiService }, { type: i1$1.NgbModal }, { type: i4.ToastService }], propDecorators: { categoryModalTpl: [{
8809
8809
  type: ViewChild,
8810
8810
  args: ['categoryModal']