tango-app-ui-manage-settings 3.0.27-dev → 3.0.28-dev

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/esm2022/lib/components/brand-details/brand-info/brand-info.component.mjs +3 -2
  2. package/esm2022/lib/components/contact-directory/contact-directory.component.mjs +6 -5
  3. package/fesm2022/tango-app-ui-manage-settings.mjs +7 -5
  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
@@ -348,8 +348,9 @@ class BrandInfoComponent {
348
348
  ];
349
349
  status = [
350
350
  { value: "active", label: "Active" },
351
+ { value: "hold", label: "Hold" },
352
+ { value: "suspended", label: "Suspend" },
351
353
  { value: "deactive", label: "Deactive" },
352
- { value: "hold", label: "Hold" }
353
354
  ];
354
355
  constructor(fb, apiService, cd, gs) {
355
356
  this.fb = fb;
@@ -5017,11 +5018,12 @@ class ContactDirectoryComponent {
5017
5018
  });
5018
5019
  }
5019
5020
  onPageChange(pageOffset) {
5020
- this.currentPage = pageOffset;
5021
+ this.currentPage = Number(pageOffset);
5021
5022
  this.getSpocTable();
5022
5023
  }
5023
5024
  onPageSizeChange(pageSize) {
5024
- this.pageSize = pageSize;
5025
+ this.pageSize = Number(pageSize);
5026
+ this.currentPage = 1;
5025
5027
  this.getSpocTable();
5026
5028
  }
5027
5029
  onExport() {
@@ -5055,11 +5057,11 @@ class ContactDirectoryComponent {
5055
5057
  return idArray;
5056
5058
  }
5057
5059
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ContactDirectoryComponent, deps: [{ token: ClientApiService }, { token: i0.ChangeDetectorRef }, { token: i1$2.NgbModal }, { token: i4$2.ToastService }, { token: i3.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
5058
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ContactDirectoryComponent, selector: "lib-contact-directory", ngImport: i0, template: "<div class=\"contact-card\">\r\n <h3 class=\"mb-5\">\r\n <span class=\"card-label mb-2\">Select Your Preferences</span>\r\n </h3>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Country <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"countryList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onCountrySelect($event)\" [selectedValues]=\"[selectedCountry]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">State <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"stateList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onStateSelect($event)\" [selectedValues]=\"[selectedState]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">City <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"cityList\" [multi]=\"true\" [searchField]=\"'name'\" [idField]=\"'latitude'\"\r\n (selected)=\"onCitySelect($event)\" [selectedValues]=\"selectedCity\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Store Id <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"storeList\" [multi]=\"true\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedStore\"></lib-select>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"d-flex justify-content-end\">\r\n <a (click)=\"onFilterApply()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n <div class=\"footer-seperator mb-10\"></div>\r\n\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Contacts List</span>\r\n </h3>\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n <button *ngIf=\"(gs.userAccess | async)?.settings_contactDirectory_isDownload \" (click)=\"onExport()\" type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n \r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"spocList?.length\" >\r\n <div class=\"table-responsive mt-10\">\r\n <table class=\"w-100 table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Store Info</th>\r\n <th>Spoc Name & Email</th>\r\n <th>Contact Number</th>\r\n <th>Location</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let spoc of spocList\">\r\n <td>\r\n <div class=\"table-title-primary text-decoration-underline cursor-pointer\"\r\n routerLink=\"/manage/stores/LKST123/infra-ticket\">{{spoc?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{spoc?.storeId}}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocName}} </div>\r\n <div class=\"table-sub\">{{spoc?.spocEmail}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocNumber}} </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.storeState}} </div>\r\n <div class=\"table-sub\">{{spoc?.storeCity}}</div>\r\n </td>\r\n <td class=\"align-height\"><span class=\"cursor-pointer\">\r\n <svg *ngIf=\"(gs.userAccess | async)?.settings_contactDirectory_isEdit \" (click)=\"openEditSpocModal(spoc?.spocId, spoc?.storeId)\" class=\"me-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_5541_6759)\">\r\n <path\r\n d=\"M9.16699 3.33332H3.33366C2.89163 3.33332 2.46771 3.50891 2.15515 3.82147C1.84259 4.13403 1.66699 4.55796 1.66699 4.99999V16.6667C1.66699 17.1087 1.84259 17.5326 2.15515 17.8452C2.46771 18.1577 2.89163 18.3333 3.33366 18.3333H15.0003C15.4424 18.3333 15.8663 18.1577 16.1788 17.8452C16.4914 17.5326 16.667 17.1087 16.667 16.6667V10.8333M15.417 2.08332C15.7485 1.7518 16.1982 1.56555 16.667 1.56555C17.1358 1.56555 17.5855 1.7518 17.917 2.08332C18.2485 2.41484 18.4348 2.86448 18.4348 3.33332C18.4348 3.80216 18.2485 4.2518 17.917 4.58332L10.0003 12.5L6.66699 13.3333L7.50033 9.99999L15.417 2.08332Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5541_6759\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngIf=\"(gs.userAccess | async)?.settings_contactDirectory_isDelete \" (click)=\"openDeleteSpocModal(spoc?.spocId, spoc?.storeId)\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00002H4.16667M4.16667 5.00002H17.5M4.16667 5.00002V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1578 5.39131 18.3334 5.83333 18.3334H14.1667C14.6087 18.3334 15.0326 18.1578 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00002H4.16667ZM6.66667 5.00002V3.33335C6.66667 2.89133 6.84226 2.4674 7.15482 2.15484C7.46738 1.84228 7.89131 1.66669 8.33333 1.66669H11.6667C12.1087 1.66669 12.5326 1.84228 12.8452 2.15484C13.1577 2.4674 13.3333 2.89133 13.3333 3.33335V5.00002M8.33333 9.16669V14.1667M11.6667 9.16669V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div> \r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!spocList?.length\" >\r\n <div class=\"d-flex align-items-center justify-content-center\" >\r\n <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\"> \r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"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: [".contact-card{border-radius:8px;background:var(--White, #FFF);padding:16px}.settings-accordian-card{border-radius:10px;background:#fff;overflow:hidden;padding:16px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}.header{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}td{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4$2.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
5060
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ContactDirectoryComponent, selector: "lib-contact-directory", ngImport: i0, template: "<div class=\"contact-card\">\r\n <h3 class=\"mb-5\">\r\n <span class=\"card-label mb-2\">Select Your Preferences</span>\r\n </h3>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Country <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"countryList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onCountrySelect($event)\" [selectedValues]=\"[selectedCountry]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">State <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"stateList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onStateSelect($event)\" [selectedValues]=\"[selectedState]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">City <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"cityList\" [multi]=\"true\" [searchField]=\"'name'\" [idField]=\"'latitude'\"\r\n (selected)=\"onCitySelect($event)\" [selectedValues]=\"selectedCity\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Store Id <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"storeList\" [multi]=\"true\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedStore\"></lib-select>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"d-flex justify-content-end\">\r\n <a (click)=\"onFilterApply()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n <div class=\"footer-seperator mb-10\"></div>\r\n\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Contacts List</span>\r\n </h3>\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n <button *ngIf=\"(gs.userAccess | async)?.settings_contactDirectory_isDownload \" (click)=\"onExport()\" type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n \r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"spocList?.length\" >\r\n <div class=\"table-responsive mt-10\">\r\n <table class=\"w-100 table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Store Info</th>\r\n <th>Spoc Name & Email</th>\r\n <th>Contact Number</th>\r\n <th>Location</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let spoc of spocList\">\r\n <td>\r\n <div class=\"table-title-primary text-decoration-underline cursor-pointer\"\r\n routerLink=\"/manage/stores/LKST123/infra-ticket\">{{spoc?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{spoc?.storeId}}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocName}} </div>\r\n <div class=\"table-sub\">{{spoc?.spocEmail}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocNumber}} </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.storeState}} </div>\r\n <div class=\"table-sub\">{{spoc?.storeCity}}</div>\r\n </td>\r\n <td class=\"align-height\"><span class=\"cursor-pointer\">\r\n <svg *ngIf=\"(gs.userAccess | async)?.settings_contactDirectory_isEdit \" (click)=\"openEditSpocModal(spoc?.spocId, spoc?.storeId)\" class=\"me-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_5541_6759)\">\r\n <path\r\n d=\"M9.16699 3.33332H3.33366C2.89163 3.33332 2.46771 3.50891 2.15515 3.82147C1.84259 4.13403 1.66699 4.55796 1.66699 4.99999V16.6667C1.66699 17.1087 1.84259 17.5326 2.15515 17.8452C2.46771 18.1577 2.89163 18.3333 3.33366 18.3333H15.0003C15.4424 18.3333 15.8663 18.1577 16.1788 17.8452C16.4914 17.5326 16.667 17.1087 16.667 16.6667V10.8333M15.417 2.08332C15.7485 1.7518 16.1982 1.56555 16.667 1.56555C17.1358 1.56555 17.5855 1.7518 17.917 2.08332C18.2485 2.41484 18.4348 2.86448 18.4348 3.33332C18.4348 3.80216 18.2485 4.2518 17.917 4.58332L10.0003 12.5L6.66699 13.3333L7.50033 9.99999L15.417 2.08332Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5541_6759\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngIf=\"(gs.userAccess | async)?.settings_contactDirectory_isDelete \" (click)=\"openDeleteSpocModal(spoc?.spocId, spoc?.storeId)\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00002H4.16667M4.16667 5.00002H17.5M4.16667 5.00002V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1578 5.39131 18.3334 5.83333 18.3334H14.1667C14.6087 18.3334 15.0326 18.1578 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00002H4.16667ZM6.66667 5.00002V3.33335C6.66667 2.89133 6.84226 2.4674 7.15482 2.15484C7.46738 1.84228 7.89131 1.66669 8.33333 1.66669H11.6667C12.1087 1.66669 12.5326 1.84228 12.8452 2.15484C13.1577 2.4674 13.3333 2.89133 13.3333 3.33335V5.00002M8.33333 9.16669V14.1667M11.6667 9.16669V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div> \r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!spocList?.length\" >\r\n <div class=\"d-flex align-items-center justify-content-center\" >\r\n <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\"> \r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"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: [".contact-card{border-radius:8px;background:var(--White, #FFF);padding:16px}.settings-accordian-card{border-radius:10px;background:#fff;overflow:hidden;padding:16px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}.header{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}td{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4$2.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
5059
5061
  }
5060
5062
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ContactDirectoryComponent, decorators: [{
5061
5063
  type: Component,
5062
- args: [{ selector: 'lib-contact-directory', template: "<div class=\"contact-card\">\r\n <h3 class=\"mb-5\">\r\n <span class=\"card-label mb-2\">Select Your Preferences</span>\r\n </h3>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Country <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"countryList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onCountrySelect($event)\" [selectedValues]=\"[selectedCountry]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">State <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"stateList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onStateSelect($event)\" [selectedValues]=\"[selectedState]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">City <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"cityList\" [multi]=\"true\" [searchField]=\"'name'\" [idField]=\"'latitude'\"\r\n (selected)=\"onCitySelect($event)\" [selectedValues]=\"selectedCity\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Store Id <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"storeList\" [multi]=\"true\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedStore\"></lib-select>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"d-flex justify-content-end\">\r\n <a (click)=\"onFilterApply()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n <div class=\"footer-seperator mb-10\"></div>\r\n\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Contacts List</span>\r\n </h3>\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n <button *ngIf=\"(gs.userAccess | async)?.settings_contactDirectory_isDownload \" (click)=\"onExport()\" type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n \r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"spocList?.length\" >\r\n <div class=\"table-responsive mt-10\">\r\n <table class=\"w-100 table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Store Info</th>\r\n <th>Spoc Name & Email</th>\r\n <th>Contact Number</th>\r\n <th>Location</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let spoc of spocList\">\r\n <td>\r\n <div class=\"table-title-primary text-decoration-underline cursor-pointer\"\r\n routerLink=\"/manage/stores/LKST123/infra-ticket\">{{spoc?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{spoc?.storeId}}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocName}} </div>\r\n <div class=\"table-sub\">{{spoc?.spocEmail}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocNumber}} </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.storeState}} </div>\r\n <div class=\"table-sub\">{{spoc?.storeCity}}</div>\r\n </td>\r\n <td class=\"align-height\"><span class=\"cursor-pointer\">\r\n <svg *ngIf=\"(gs.userAccess | async)?.settings_contactDirectory_isEdit \" (click)=\"openEditSpocModal(spoc?.spocId, spoc?.storeId)\" class=\"me-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_5541_6759)\">\r\n <path\r\n d=\"M9.16699 3.33332H3.33366C2.89163 3.33332 2.46771 3.50891 2.15515 3.82147C1.84259 4.13403 1.66699 4.55796 1.66699 4.99999V16.6667C1.66699 17.1087 1.84259 17.5326 2.15515 17.8452C2.46771 18.1577 2.89163 18.3333 3.33366 18.3333H15.0003C15.4424 18.3333 15.8663 18.1577 16.1788 17.8452C16.4914 17.5326 16.667 17.1087 16.667 16.6667V10.8333M15.417 2.08332C15.7485 1.7518 16.1982 1.56555 16.667 1.56555C17.1358 1.56555 17.5855 1.7518 17.917 2.08332C18.2485 2.41484 18.4348 2.86448 18.4348 3.33332C18.4348 3.80216 18.2485 4.2518 17.917 4.58332L10.0003 12.5L6.66699 13.3333L7.50033 9.99999L15.417 2.08332Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5541_6759\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngIf=\"(gs.userAccess | async)?.settings_contactDirectory_isDelete \" (click)=\"openDeleteSpocModal(spoc?.spocId, spoc?.storeId)\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00002H4.16667M4.16667 5.00002H17.5M4.16667 5.00002V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1578 5.39131 18.3334 5.83333 18.3334H14.1667C14.6087 18.3334 15.0326 18.1578 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00002H4.16667ZM6.66667 5.00002V3.33335C6.66667 2.89133 6.84226 2.4674 7.15482 2.15484C7.46738 1.84228 7.89131 1.66669 8.33333 1.66669H11.6667C12.1087 1.66669 12.5326 1.84228 12.8452 2.15484C13.1577 2.4674 13.3333 2.89133 13.3333 3.33335V5.00002M8.33333 9.16669V14.1667M11.6667 9.16669V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div> \r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!spocList?.length\" >\r\n <div class=\"d-flex align-items-center justify-content-center\" >\r\n <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\"> \r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"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: [".contact-card{border-radius:8px;background:var(--White, #FFF);padding:16px}.settings-accordian-card{border-radius:10px;background:#fff;overflow:hidden;padding:16px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}.header{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}td{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important}\n"] }]
5064
+ args: [{ selector: 'lib-contact-directory', template: "<div class=\"contact-card\">\r\n <h3 class=\"mb-5\">\r\n <span class=\"card-label mb-2\">Select Your Preferences</span>\r\n </h3>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Country <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"countryList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onCountrySelect($event)\" [selectedValues]=\"[selectedCountry]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">State <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"stateList\" [multi]=\"false\" [searchField]=\"'name'\" [idField]=\"'isoCode'\"\r\n (selected)=\"onStateSelect($event)\" [selectedValues]=\"[selectedState]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">City <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"cityList\" [multi]=\"true\" [searchField]=\"'name'\" [idField]=\"'latitude'\"\r\n (selected)=\"onCitySelect($event)\" [selectedValues]=\"selectedCity\"></lib-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"infraDownTime\" class=\"form-label\">Store Id <span class=\"alert-required\"></span></label>\r\n <lib-select [items]=\"storeList\" [multi]=\"true\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedStore\"></lib-select>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"d-flex justify-content-end\">\r\n <a (click)=\"onFilterApply()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n <div class=\"footer-seperator mb-10\"></div>\r\n\r\n <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n <ng-container [ngSwitch]=\"pageState\" >\r\n <ng-container *ngSwitchCase=\"'loaded'\" >\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Contacts List</span>\r\n </h3>\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n <button *ngIf=\"(gs.userAccess | async)?.settings_contactDirectory_isDownload \" (click)=\"onExport()\" type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n \r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"spocList?.length\" >\r\n <div class=\"table-responsive mt-10\">\r\n <table class=\"w-100 table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Store Info</th>\r\n <th>Spoc Name & Email</th>\r\n <th>Contact Number</th>\r\n <th>Location</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let spoc of spocList\">\r\n <td>\r\n <div class=\"table-title-primary text-decoration-underline cursor-pointer\"\r\n routerLink=\"/manage/stores/LKST123/infra-ticket\">{{spoc?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{spoc?.storeId}}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocName}} </div>\r\n <div class=\"table-sub\">{{spoc?.spocEmail}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.spocNumber}} </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{spoc?.storeState}} </div>\r\n <div class=\"table-sub\">{{spoc?.storeCity}}</div>\r\n </td>\r\n <td class=\"align-height\"><span class=\"cursor-pointer\">\r\n <svg *ngIf=\"(gs.userAccess | async)?.settings_contactDirectory_isEdit \" (click)=\"openEditSpocModal(spoc?.spocId, spoc?.storeId)\" class=\"me-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_5541_6759)\">\r\n <path\r\n d=\"M9.16699 3.33332H3.33366C2.89163 3.33332 2.46771 3.50891 2.15515 3.82147C1.84259 4.13403 1.66699 4.55796 1.66699 4.99999V16.6667C1.66699 17.1087 1.84259 17.5326 2.15515 17.8452C2.46771 18.1577 2.89163 18.3333 3.33366 18.3333H15.0003C15.4424 18.3333 15.8663 18.1577 16.1788 17.8452C16.4914 17.5326 16.667 17.1087 16.667 16.6667V10.8333M15.417 2.08332C15.7485 1.7518 16.1982 1.56555 16.667 1.56555C17.1358 1.56555 17.5855 1.7518 17.917 2.08332C18.2485 2.41484 18.4348 2.86448 18.4348 3.33332C18.4348 3.80216 18.2485 4.2518 17.917 4.58332L10.0003 12.5L6.66699 13.3333L7.50033 9.99999L15.417 2.08332Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5541_6759\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngIf=\"(gs.userAccess | async)?.settings_contactDirectory_isDelete \" (click)=\"openDeleteSpocModal(spoc?.spocId, spoc?.storeId)\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00002H4.16667M4.16667 5.00002H17.5M4.16667 5.00002V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1578 5.39131 18.3334 5.83333 18.3334H14.1667C14.6087 18.3334 15.0326 18.1578 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00002H4.16667ZM6.66667 5.00002V3.33335C6.66667 2.89133 6.84226 2.4674 7.15482 2.15484C7.46738 1.84228 7.89131 1.66669 8.33333 1.66669H11.6667C12.1087 1.66669 12.5326 1.84228 12.8452 2.15484C13.1577 2.4674 13.3333 2.89133 13.3333 3.33335V5.00002M8.33333 9.16669V14.1667M11.6667 9.16669V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div> \r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!spocList?.length\" >\r\n <div class=\"d-flex align-items-center justify-content-center\" >\r\n <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\"> \r\n </div>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'loading'\" >\r\n <div class=\"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: [".contact-card{border-radius:8px;background:var(--White, #FFF);padding:16px}.settings-accordian-card{border-radius:10px;background:#fff;overflow:hidden;padding:16px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}.header{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}td{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important}\n"] }]
5063
5065
  }], ctorParameters: () => [{ type: ClientApiService }, { type: i0.ChangeDetectorRef }, { type: i1$2.NgbModal }, { type: i4$2.ToastService }, { type: i3.GlobalStateService }] });
5064
5066
 
5065
5067
  dayjs.extend(utc);