tango-app-ui-store-builder 1.2.18 → 1.2.20
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.
- package/esm2022/lib/components/manage-plano/onboard-table/onboard-table.component.mjs +3 -3
- package/esm2022/lib/components/manage-plano/rollout-table/rollout-table.component.mjs +3 -3
- package/esm2022/lib/components/manage-plano/verification-table/verification-table.component.mjs +31 -11
- package/esm2022/lib/components/plano-tools/delete-floor/delete-floor.component.mjs +3 -3
- package/esm2022/lib/components/plano-tools/layout-touchup/layout-touchup.component.mjs +3 -3
- package/esm2022/lib/components/plano-tools/tool-page-header/tool-page-header.component.mjs +3 -3
- package/esm2022/lib/components/plano-tools/tools-parent/tools-parent.component.mjs +3 -3
- package/esm2022/lib/components/planogram/plano-overview/plano-comparison/plano-comparison.component.mjs +5 -2
- package/esm2022/lib/components/popups/publish-plano-modal/publish-plano-modal.component.mjs +1 -1
- package/fesm2022/tango-app-ui-store-builder.mjs +48 -25
- package/fesm2022/tango-app-ui-store-builder.mjs.map +1 -1
- package/lib/components/manage-plano/rollout-table/rollout-table.component.d.ts +4 -4
- package/lib/components/manage-plano/verification-table/verification-table.component.d.ts +7 -5
- package/package.json +1 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Injectable, inject,
|
|
2
|
+
import { Component, Injectable, inject, ViewChild, Input, EventEmitter, Output, HostListener, ChangeDetectionStrategy, forwardRef, Pipe, ViewChildren, ChangeDetectorRef, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/router';
|
|
4
4
|
import { NavigationEnd, RouterLink, RouterOutlet, RouterModule, Router } from '@angular/router';
|
|
5
5
|
import * as i2$1 from 'tango-app-ui-global';
|
|
6
6
|
import { GlobalStateService } from 'tango-app-ui-global';
|
|
7
7
|
import * as i5 from '@angular/common';
|
|
8
|
-
import {
|
|
8
|
+
import { CommonModule, DatePipe, NgClass, NgStyle, NgFor, NgIf, TitleCasePipe, UpperCasePipe } from '@angular/common';
|
|
9
9
|
import * as i1$2 from '@angular/forms';
|
|
10
10
|
import { FormControl, FormGroup, FormsModule, FormArray, NG_VALUE_ACCESSOR, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
11
11
|
import * as i7 from '@angular/cdk/drag-drop';
|
|
@@ -29608,11 +29608,11 @@ class PlanoRolloutTableComponent {
|
|
|
29608
29608
|
});
|
|
29609
29609
|
}
|
|
29610
29610
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoRolloutTableComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
29611
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoRolloutTableComponent, selector: "lib-plano-rollout-table", ngImport: i0, template: "<!-- Filter Tabs (only show for All Planograms) -->\r\n<div class=\"row mx-0 my-5 gap-2\" >\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <h3>{{ cardData?.totalStore || 0 }}</h3>\r\n <p>All store</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'rollout' }\" (click)=\"filterTable('rollout')\">\r\n <h3>{{ cardData?.rolloutStore ?? 0 }}</h3>\r\n <p>Rollout store</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'merch' }\" (click)=\"filterTable('merch')\">\r\n <h3>{{ cardData?.merchPendingStore ?? 0 }}</h3>\r\n <p>Merch approval pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'vm' }\" (click)=\"filterTable('vm')\">\r\n <h3>{{ cardData?.vmPendingStore ?? 0 }}</h3>\r\n <p>Visual Merch approval pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'flag' }\" (click)=\"filterTable('flag')\">\r\n <h3>{{ cardData?.flagStore ?? 0 }}</h3>\r\n <p>Flags</p>\r\n </div>\r\n</div>\r\n\r\n<!-- Tabs Navigation -->\r\n<div class=\"d-flex justify-content-start mb-4\">\r\n <ul class=\"nav nav-line-tabs nav-line-tabs-2x\">\r\n <li class=\"nav-item\">\r\n <a\r\n class=\"nav-link\"\r\n [routerLink]=\"[]\"\r\n [queryParams]=\"{ view: 'all-planograms' }\"\r\n [queryParamsHandling]=\"'merge'\"\r\n [class.active]=\"activeTab === 'all-planograms'\"\r\n (click)=\"onTabChange('all-planograms')\"\r\n >\r\n All Planograms\r\n </a>\r\n </li>\r\n <li class=\"nav-item\">\r\n <a\r\n class=\"nav-link\"\r\n [routerLink]=\"[]\"\r\n [queryParams]=\"{ view: 'find-replace' }\"\r\n [queryParamsHandling]=\"'merge'\"\r\n [class.active]=\"activeTab === 'find-replace'\"\r\n (click)=\"onTabChange('find-replace')\"\r\n >\r\n Find and Replace\r\n </a>\r\n </li>\r\n </ul>\r\n</div>\r\n\r\n<div >\r\n <!-- All Planograms Table -->\r\n <div *ngIf=\"activeTab === 'all-planograms'\" [class.restrict-interaction]=\"isButtonLoading\">\r\n <div class=\"content-wrapper\" >\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>All Planograms</h4>\r\n <span>{{ totalItems }} - Total Stores</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div style=\"position: relative\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"onClickCreateFixture()\" class=\"btn btn-primary d-inline-flex align-items-center me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n stroke=\"white\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n <!-- <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n <plano-filter [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\" [config]=\"{ 'Merchandise compliance': false }\"></plano-filter>\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n \r\n <svg *ngIf=\"!isButtonLoading\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.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\"></path>\r\n </svg>\r\n \r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n <span class=\"ms-2\"> Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\"\r\n >\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">\r\n {{\r\n selectedFilterTab === \"all\"\r\n ? \"No data found\"\r\n : selectedFilterTab === \"rollout\"\r\n ? \"Rollout stores\"\r\n : selectedFilterTab === \"merch\"\r\n ? \"Merchandise approval\"\r\n : selectedFilterTab === \"vm\"\r\n ? \"Visual merchandise approval\"\r\n : \"Flags\"\r\n }}\r\n </div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'all'\">There is no result for manage rollout table</div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'rollout'\">No rollout initiated for any store</div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'merch'\">Looks like there are no merchandise approval pending</div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'vm'\">\r\n Looks like there are no visual merchandise approval pending\r\n </div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'flag'\">Looks like no issue so far with any stores</div>\r\n </div>\r\n\r\n <!-- Manage Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Plano Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th> Country </th>\r\n <th> City </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Floor\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n Merch Fixtures\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('vmCount')\" class=\"cursor-pointer\">\r\n Visual Merch\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'vmCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'vmCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span class=\"cursor-pointer\">\r\n Rollout Status\r\n </span>\r\n </th>\r\n <!-- <th></th> -->\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a\r\n [routerLink]=\"['/manage/stores/plano']\"\r\n [queryParams]=\"{ storeId: plano?.storeId }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n {{ plano.storeName }}</a\r\n >\r\n </div>\r\n </td>\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-rollout']\"\r\n [queryParams]=\"{ planoId: plano.planoId, floorId: plano?.floorId }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n <!-- cardData.doubleFloorStore.includes(plano?.storeId)\r\n ? plano.layoutName + \"-\" + plano?.floorName -->\r\n {{\r\n plano.layoutName\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n {{plano?.layoutCount}}\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.fixtureCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'merchRollout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'merchRollout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'merchRollout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'merchRollout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.vmCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'vmRollout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'vmRollout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'vmRollout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'vmRollout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n <!-- <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatus(plano) === 'Completed' ? 'bg-success' : 'badgeStyle'\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td> -->\r\n <!-- <td>\r\n <div class=\"d-flex align-items-center gap-2 justify-content-center\">\r\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_17_71425)\">\r\n <path\r\n d=\"M12.1971 18.7144C12.0464 18.9742 11.8302 19.1898 11.5699 19.3397C11.3097 19.4896 11.0146 19.5685 10.7143 19.5685C10.414 19.5685 10.1189 19.4896 9.85866 19.3397C9.59842 19.1898 9.38212 18.9742 9.23143 18.7144M15.8571 7.57157C15.8571 6.2076 15.3153 4.89949 14.3508 3.93502C13.3864 2.97055 12.0783 2.42871 10.7143 2.42871C9.35032 2.42871 8.04221 2.97055 7.07774 3.93502C6.11326 4.89949 5.57143 6.2076 5.57143 7.57157C5.57143 13.5716 3 15.2859 3 15.2859H18.4286C18.4286 15.2859 15.8571 13.5716 15.8571 7.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.08574 8.04805C1.55611 8.04805 1.12146 7.61768 1.17082 7.09036C1.286 5.85989 1.627 4.71322 2.19383 3.65034C2.75229 2.60318 3.46062 1.69605 4.31882 0.928939C4.71052 0.578823 5.30965 0.673501 5.62062 1.09695C5.93175 1.52062 5.83525 2.1121 5.45225 2.47212C4.82875 3.05819 4.30987 3.74239 3.89559 4.52471C3.47303 5.32267 3.20776 6.17833 3.0998 7.09169C3.03766 7.61747 2.61518 8.04805 2.08574 8.04805ZM19.3431 8.04805C18.8134 8.04805 18.3908 7.6171 18.3287 7.09105C18.2209 6.17793 17.9556 5.32248 17.5326 4.52471C17.118 3.74258 16.5993 3.05852 15.9765 2.47254C15.5937 2.11226 15.4973 1.5207 15.8085 1.09696C16.1196 0.673433 16.7187 0.578551 17.1107 0.928571C17.9693 1.6954 18.6778 2.60266 19.2363 3.65034C19.8032 4.71381 20.1438 5.86068 20.2581 7.09095C20.3071 7.61809 19.8725 8.04805 19.3431 8.04805Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_17_71425\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.428711 0.714355)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_139_112685)\">\r\n <path\r\n d=\"M12.4843 21.4302C12.3336 21.69 12.1173 21.9057 11.857 22.0556C11.5968 22.2055 11.3017 22.2844 11.0014 22.2844C10.7011 22.2844 10.406 22.2055 10.1458 22.0556C9.88553 21.9057 9.66923 21.69 9.51854 21.4302M16.1443 10.2874C16.1443 8.92342 15.6024 7.61531 14.6379 6.65084C13.6735 5.68637 12.3654 5.14453 11.0014 5.14453C9.63742 5.14453 8.32932 5.68637 7.36485 6.65084C6.40037 7.61531 5.85854 8.92342 5.85854 10.2874C5.85854 16.2874 3.28711 18.0017 3.28711 18.0017H18.7157C18.7157 18.0017 16.1443 16.2874 16.1443 10.2874Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.37187 10.7634C1.84224 10.7634 1.40759 10.333 1.45695 9.80569C1.57213 8.57522 1.91313 7.42855 2.47997 6.36567C3.03842 5.31851 3.74675 4.41138 4.60496 3.64427C4.99665 3.29415 5.59578 3.38883 5.90675 3.81228C6.21788 4.23595 6.12138 4.82744 5.73838 5.18745C5.11489 5.77352 4.596 6.45772 4.18172 7.24004C3.75916 8.038 3.4939 8.89366 3.38594 9.80702C3.32379 10.3328 2.90131 10.7634 2.37187 10.7634ZM19.6292 10.7634C19.0995 10.7634 18.6769 10.3324 18.6148 9.80638C18.507 8.89326 18.2417 8.03781 17.8188 7.24004C17.4041 6.45791 16.8854 5.77385 16.2627 5.18787C15.8798 4.8276 15.7835 4.23603 16.0947 3.81229C16.4057 3.38876 17.0049 3.29388 17.3968 3.6439C18.2554 4.41073 18.964 5.31799 19.5224 6.36567C20.0893 7.42914 20.4299 8.57601 20.5442 9.80628C20.5932 10.3334 20.1586 10.7634 19.6292 10.7634Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n <defs>\r\n <clipPath id=\"clip0_139_112685\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.714844 3.42969)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 5C11 5.55228 11.4477 6 12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </td> -->\r\n <!-- <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano.planoId, floorId: plano?.floorId }\"\r\n >\r\n <svg\r\n width=\"23\"\r\n height=\"24\"\r\n viewBox=\"0 0 23 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n *ngIf=\"getSubmit(plano)\"\r\n >\r\n <path\r\n d=\"M10.1395 6.85728H4.13946C3.6848 6.85728 3.24876 7.0379 2.92727 7.35939C2.60578 7.68088 2.42517 8.11691 2.42517 8.57157V20.5716C2.42517 21.0262 2.60578 21.4623 2.92727 21.7838C3.24876 22.1052 3.6848 22.2859 4.13946 22.2859H16.1395C16.5941 22.2859 17.0301 22.1052 17.3516 21.7838C17.6731 21.4623 17.8537 21.0262 17.8537 20.5716V14.5716M16.568 5.57157C16.909 5.23058 17.3715 5.03901 17.8537 5.03901C18.336 5.03901 18.7985 5.23058 19.1395 5.57157C19.4805 5.91256 19.672 6.37505 19.672 6.85728C19.672 7.33952 19.4805 7.80201 19.1395 8.143L10.9966 16.2859L7.56803 17.143L8.42517 13.7144L16.568 5.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n </svg>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\"\r\n height=\"22\"\r\n viewBox=\"0 0 21 22\"\r\n fill=\"none\"\r\n *ngIf=\"!getSubmit(plano)\"\r\n >\r\n <g clip-path=\"url(#clip0_844_18318)\">\r\n <path\r\n d=\"M9.85686 4.14249H3.85686C3.40221 4.14249 2.96617 4.32311 2.64468 4.6446C2.32319 4.96609 2.14258 5.40212 2.14258 5.85678V17.8568C2.14258 18.3114 2.32319 18.7475 2.64468 19.069C2.96617 19.3905 3.40221 19.5711 3.85686 19.5711H15.8569C16.3115 19.5711 16.7476 19.3905 17.069 19.069C17.3905 18.7475 17.5712 18.3114 17.5712 17.8568V11.8568M16.2854 2.85678C16.6264 2.51579 17.0889 2.32422 17.5712 2.32422C18.0534 2.32422 18.5159 2.51579 18.8569 2.85678C19.1979 3.19777 19.3894 3.66026 19.3894 4.14249C19.3894 4.62473 19.1979 5.08722 18.8569 5.42821L10.714 13.5711L7.28544 14.4282L8.14258 10.9996L16.2854 2.85678Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_18318\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.427734 0.713867)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </td> -->\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Manage Planogram grid view -->\r\n <!-- <ng-template #gridView>\r\n <section id=\"grid-view\">\r\n <div class=\"row gx-6 gy-4\">\r\n <div class=\"col-md-4\" *ngFor=\"let fixture of fixtureTemplatesList\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"card-action dropdown\">\r\n <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <i class=\"bi bi-three-dots-vertical\"></i>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{ fixture.name }}</h3>\r\n <div class=\"badge\" [ngClass]=\"fixture.status\">{{ fixture.status | titlecase }}</div>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <div *ngFor=\"let subBrand of fixture.subBrand; let i = index\">\r\n <span *ngIf=\"i != 0\" class=\"me-2 card-tagline\">•</span>\r\n <div class=\"badge\">{{ subBrand }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template> -->\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n *ngIf=\"!isPageLoading && planogramsList.length !== 0\"\r\n >\r\n </lib-pagination>\r\n </div>\r\n\r\n \r\n </div>\r\n\r\n <!-- Find and Replace Table -->\r\n <div *ngIf=\"activeTab === 'find-replace'\">\r\n <lib-find-replace-table></lib-find-replace-table>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.reviewPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009BF3);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { 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: "component", type: PlanoFilterComponent, selector: "plano-filter", inputs: ["clientId", "data", "config"], outputs: ["applyFilters", "resetFilters", "filterChanged"] }, { kind: "component", type: FindReplaceTableComponent, selector: "lib-find-replace-table" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
29611
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoRolloutTableComponent, selector: "lib-plano-rollout-table", ngImport: i0, template: "<!-- Filter Tabs (only show for All Planograms) -->\r\n<div class=\"row mx-0 my-5 gap-2\" >\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardData?.totalStore || 0 }}</h3>\r\n <p>All store</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'rollout' }\" (click)=\"filterTable('rollout')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardData?.rolloutStore ?? 0 }}</h3>\r\n <p>Rollout store</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'merch' }\" (click)=\"filterTable('merch')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardData?.merchPendingStore ?? 0 }}</h3>\r\n <p>Merch approval pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'vm' }\" (click)=\"filterTable('vm')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardData?.vmPendingStore ?? 0 }}</h3>\r\n <p>Visual Merch approval pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'flag' }\" (click)=\"filterTable('flag')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardData?.flagStore ?? 0 }}</h3>\r\n <p>Flags</p>\r\n </div>\r\n</div>\r\n\r\n<!-- Tabs Navigation -->\r\n<div class=\"d-flex justify-content-start mb-4\">\r\n <ul class=\"nav nav-line-tabs nav-line-tabs-2x\">\r\n <li class=\"nav-item\">\r\n <a\r\n class=\"nav-link\"\r\n [routerLink]=\"[]\"\r\n [queryParams]=\"{ view: 'all-planograms' }\"\r\n [queryParamsHandling]=\"'merge'\"\r\n [class.active]=\"activeTab === 'all-planograms'\"\r\n (click)=\"onTabChange('all-planograms')\"\r\n >\r\n All Planograms\r\n </a>\r\n </li>\r\n <li class=\"nav-item\">\r\n <a\r\n class=\"nav-link\"\r\n [routerLink]=\"[]\"\r\n [queryParams]=\"{ view: 'find-replace' }\"\r\n [queryParamsHandling]=\"'merge'\"\r\n [class.active]=\"activeTab === 'find-replace'\"\r\n (click)=\"onTabChange('find-replace')\"\r\n >\r\n Find and Replace\r\n </a>\r\n </li>\r\n </ul>\r\n</div>\r\n\r\n<div >\r\n <!-- All Planograms Table -->\r\n <div *ngIf=\"activeTab === 'all-planograms'\" [class.restrict-interaction]=\"isButtonLoading\">\r\n <div class=\"content-wrapper\" >\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>All Planograms</h4>\r\n <span>{{ totalItems }} - Total Stores</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div style=\"position: relative\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"onClickCreateFixture()\" class=\"btn btn-primary d-inline-flex align-items-center me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n stroke=\"white\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n <!-- <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n <plano-filter [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\" [config]=\"{ 'Merchandise compliance': false }\"></plano-filter>\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n \r\n <svg *ngIf=\"!isButtonLoading\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.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\"></path>\r\n </svg>\r\n \r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n <span class=\"ms-2\"> Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\"\r\n >\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">\r\n {{\r\n selectedFilterTab === \"all\"\r\n ? \"No data found\"\r\n : selectedFilterTab === \"rollout\"\r\n ? \"Rollout stores\"\r\n : selectedFilterTab === \"merch\"\r\n ? \"Merchandise approval\"\r\n : selectedFilterTab === \"vm\"\r\n ? \"Visual merchandise approval\"\r\n : \"Flags\"\r\n }}\r\n </div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'all'\">There is no result for manage rollout table</div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'rollout'\">No rollout initiated for any store</div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'merch'\">Looks like there are no merchandise approval pending</div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'vm'\">\r\n Looks like there are no visual merchandise approval pending\r\n </div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'flag'\">Looks like no issue so far with any stores</div>\r\n </div>\r\n\r\n <!-- Manage Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Plano Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th> Country </th>\r\n <th> City </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Floor\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n Merch Fixtures\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('vmCount')\" class=\"cursor-pointer\">\r\n Visual Merch\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'vmCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'vmCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span class=\"cursor-pointer\">\r\n Rollout Status\r\n </span>\r\n </th>\r\n <!-- <th></th> -->\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a\r\n [routerLink]=\"['/manage/stores/plano']\"\r\n [queryParams]=\"{ storeId: plano?.storeId }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n {{ plano.storeName }}</a\r\n >\r\n </div>\r\n </td>\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-rollout']\"\r\n [queryParams]=\"{ planoId: plano.planoId, floorId: plano?.floorId }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n <!-- cardData.doubleFloorStore.includes(plano?.storeId)\r\n ? plano.layoutName + \"-\" + plano?.floorName -->\r\n {{\r\n plano.layoutName\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n {{plano?.layoutCount}}\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.fixtureCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'merchRollout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'merchRollout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'merchRollout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'merchRollout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.vmCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'vmRollout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'vmRollout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'vmRollout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'vmRollout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n <!-- <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatus(plano) === 'Completed' ? 'bg-success' : 'badgeStyle'\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td> -->\r\n <!-- <td>\r\n <div class=\"d-flex align-items-center gap-2 justify-content-center\">\r\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_17_71425)\">\r\n <path\r\n d=\"M12.1971 18.7144C12.0464 18.9742 11.8302 19.1898 11.5699 19.3397C11.3097 19.4896 11.0146 19.5685 10.7143 19.5685C10.414 19.5685 10.1189 19.4896 9.85866 19.3397C9.59842 19.1898 9.38212 18.9742 9.23143 18.7144M15.8571 7.57157C15.8571 6.2076 15.3153 4.89949 14.3508 3.93502C13.3864 2.97055 12.0783 2.42871 10.7143 2.42871C9.35032 2.42871 8.04221 2.97055 7.07774 3.93502C6.11326 4.89949 5.57143 6.2076 5.57143 7.57157C5.57143 13.5716 3 15.2859 3 15.2859H18.4286C18.4286 15.2859 15.8571 13.5716 15.8571 7.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.08574 8.04805C1.55611 8.04805 1.12146 7.61768 1.17082 7.09036C1.286 5.85989 1.627 4.71322 2.19383 3.65034C2.75229 2.60318 3.46062 1.69605 4.31882 0.928939C4.71052 0.578823 5.30965 0.673501 5.62062 1.09695C5.93175 1.52062 5.83525 2.1121 5.45225 2.47212C4.82875 3.05819 4.30987 3.74239 3.89559 4.52471C3.47303 5.32267 3.20776 6.17833 3.0998 7.09169C3.03766 7.61747 2.61518 8.04805 2.08574 8.04805ZM19.3431 8.04805C18.8134 8.04805 18.3908 7.6171 18.3287 7.09105C18.2209 6.17793 17.9556 5.32248 17.5326 4.52471C17.118 3.74258 16.5993 3.05852 15.9765 2.47254C15.5937 2.11226 15.4973 1.5207 15.8085 1.09696C16.1196 0.673433 16.7187 0.578551 17.1107 0.928571C17.9693 1.6954 18.6778 2.60266 19.2363 3.65034C19.8032 4.71381 20.1438 5.86068 20.2581 7.09095C20.3071 7.61809 19.8725 8.04805 19.3431 8.04805Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_17_71425\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.428711 0.714355)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_139_112685)\">\r\n <path\r\n d=\"M12.4843 21.4302C12.3336 21.69 12.1173 21.9057 11.857 22.0556C11.5968 22.2055 11.3017 22.2844 11.0014 22.2844C10.7011 22.2844 10.406 22.2055 10.1458 22.0556C9.88553 21.9057 9.66923 21.69 9.51854 21.4302M16.1443 10.2874C16.1443 8.92342 15.6024 7.61531 14.6379 6.65084C13.6735 5.68637 12.3654 5.14453 11.0014 5.14453C9.63742 5.14453 8.32932 5.68637 7.36485 6.65084C6.40037 7.61531 5.85854 8.92342 5.85854 10.2874C5.85854 16.2874 3.28711 18.0017 3.28711 18.0017H18.7157C18.7157 18.0017 16.1443 16.2874 16.1443 10.2874Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.37187 10.7634C1.84224 10.7634 1.40759 10.333 1.45695 9.80569C1.57213 8.57522 1.91313 7.42855 2.47997 6.36567C3.03842 5.31851 3.74675 4.41138 4.60496 3.64427C4.99665 3.29415 5.59578 3.38883 5.90675 3.81228C6.21788 4.23595 6.12138 4.82744 5.73838 5.18745C5.11489 5.77352 4.596 6.45772 4.18172 7.24004C3.75916 8.038 3.4939 8.89366 3.38594 9.80702C3.32379 10.3328 2.90131 10.7634 2.37187 10.7634ZM19.6292 10.7634C19.0995 10.7634 18.6769 10.3324 18.6148 9.80638C18.507 8.89326 18.2417 8.03781 17.8188 7.24004C17.4041 6.45791 16.8854 5.77385 16.2627 5.18787C15.8798 4.8276 15.7835 4.23603 16.0947 3.81229C16.4057 3.38876 17.0049 3.29388 17.3968 3.6439C18.2554 4.41073 18.964 5.31799 19.5224 6.36567C20.0893 7.42914 20.4299 8.57601 20.5442 9.80628C20.5932 10.3334 20.1586 10.7634 19.6292 10.7634Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n <defs>\r\n <clipPath id=\"clip0_139_112685\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.714844 3.42969)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 5C11 5.55228 11.4477 6 12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </td> -->\r\n <!-- <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano.planoId, floorId: plano?.floorId }\"\r\n >\r\n <svg\r\n width=\"23\"\r\n height=\"24\"\r\n viewBox=\"0 0 23 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n *ngIf=\"getSubmit(plano)\"\r\n >\r\n <path\r\n d=\"M10.1395 6.85728H4.13946C3.6848 6.85728 3.24876 7.0379 2.92727 7.35939C2.60578 7.68088 2.42517 8.11691 2.42517 8.57157V20.5716C2.42517 21.0262 2.60578 21.4623 2.92727 21.7838C3.24876 22.1052 3.6848 22.2859 4.13946 22.2859H16.1395C16.5941 22.2859 17.0301 22.1052 17.3516 21.7838C17.6731 21.4623 17.8537 21.0262 17.8537 20.5716V14.5716M16.568 5.57157C16.909 5.23058 17.3715 5.03901 17.8537 5.03901C18.336 5.03901 18.7985 5.23058 19.1395 5.57157C19.4805 5.91256 19.672 6.37505 19.672 6.85728C19.672 7.33952 19.4805 7.80201 19.1395 8.143L10.9966 16.2859L7.56803 17.143L8.42517 13.7144L16.568 5.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n </svg>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\"\r\n height=\"22\"\r\n viewBox=\"0 0 21 22\"\r\n fill=\"none\"\r\n *ngIf=\"!getSubmit(plano)\"\r\n >\r\n <g clip-path=\"url(#clip0_844_18318)\">\r\n <path\r\n d=\"M9.85686 4.14249H3.85686C3.40221 4.14249 2.96617 4.32311 2.64468 4.6446C2.32319 4.96609 2.14258 5.40212 2.14258 5.85678V17.8568C2.14258 18.3114 2.32319 18.7475 2.64468 19.069C2.96617 19.3905 3.40221 19.5711 3.85686 19.5711H15.8569C16.3115 19.5711 16.7476 19.3905 17.069 19.069C17.3905 18.7475 17.5712 18.3114 17.5712 17.8568V11.8568M16.2854 2.85678C16.6264 2.51579 17.0889 2.32422 17.5712 2.32422C18.0534 2.32422 18.5159 2.51579 18.8569 2.85678C19.1979 3.19777 19.3894 3.66026 19.3894 4.14249C19.3894 4.62473 19.1979 5.08722 18.8569 5.42821L10.714 13.5711L7.28544 14.4282L8.14258 10.9996L16.2854 2.85678Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_18318\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.427734 0.713867)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </td> -->\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Manage Planogram grid view -->\r\n <!-- <ng-template #gridView>\r\n <section id=\"grid-view\">\r\n <div class=\"row gx-6 gy-4\">\r\n <div class=\"col-md-4\" *ngFor=\"let fixture of fixtureTemplatesList\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"card-action dropdown\">\r\n <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <i class=\"bi bi-three-dots-vertical\"></i>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{ fixture.name }}</h3>\r\n <div class=\"badge\" [ngClass]=\"fixture.status\">{{ fixture.status | titlecase }}</div>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <div *ngFor=\"let subBrand of fixture.subBrand; let i = index\">\r\n <span *ngIf=\"i != 0\" class=\"me-2 card-tagline\">•</span>\r\n <div class=\"badge\">{{ subBrand }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template> -->\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n *ngIf=\"!isPageLoading && planogramsList.length !== 0\"\r\n >\r\n </lib-pagination>\r\n </div>\r\n\r\n \r\n </div>\r\n\r\n <!-- Find and Replace Table -->\r\n <div *ngIf=\"activeTab === 'find-replace'\">\r\n <lib-find-replace-table></lib-find-replace-table>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.card-stat-shimmer{width:56px;height:24px;margin:3px 0;border-radius:6px;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%;animation:shimmer 3s infinite}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.reviewPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009BF3);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { 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: "component", type: PlanoFilterComponent, selector: "plano-filter", inputs: ["clientId", "data", "config"], outputs: ["applyFilters", "resetFilters", "filterChanged"] }, { kind: "component", type: FindReplaceTableComponent, selector: "lib-find-replace-table" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
29612
29612
|
}
|
|
29613
29613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoRolloutTableComponent, decorators: [{
|
|
29614
29614
|
type: Component,
|
|
29615
|
-
args: [{ selector: "lib-plano-rollout-table", template: "<!-- Filter Tabs (only show for All Planograms) -->\r\n<div class=\"row mx-0 my-5 gap-2\" >\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <h3>{{ cardData?.totalStore || 0 }}</h3>\r\n <p>All store</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'rollout' }\" (click)=\"filterTable('rollout')\">\r\n <h3>{{ cardData?.rolloutStore ?? 0 }}</h3>\r\n <p>Rollout store</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'merch' }\" (click)=\"filterTable('merch')\">\r\n <h3>{{ cardData?.merchPendingStore ?? 0 }}</h3>\r\n <p>Merch approval pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'vm' }\" (click)=\"filterTable('vm')\">\r\n <h3>{{ cardData?.vmPendingStore ?? 0 }}</h3>\r\n <p>Visual Merch approval pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'flag' }\" (click)=\"filterTable('flag')\">\r\n <h3>{{ cardData?.flagStore ?? 0 }}</h3>\r\n <p>Flags</p>\r\n </div>\r\n</div>\r\n\r\n<!-- Tabs Navigation -->\r\n<div class=\"d-flex justify-content-start mb-4\">\r\n <ul class=\"nav nav-line-tabs nav-line-tabs-2x\">\r\n <li class=\"nav-item\">\r\n <a\r\n class=\"nav-link\"\r\n [routerLink]=\"[]\"\r\n [queryParams]=\"{ view: 'all-planograms' }\"\r\n [queryParamsHandling]=\"'merge'\"\r\n [class.active]=\"activeTab === 'all-planograms'\"\r\n (click)=\"onTabChange('all-planograms')\"\r\n >\r\n All Planograms\r\n </a>\r\n </li>\r\n <li class=\"nav-item\">\r\n <a\r\n class=\"nav-link\"\r\n [routerLink]=\"[]\"\r\n [queryParams]=\"{ view: 'find-replace' }\"\r\n [queryParamsHandling]=\"'merge'\"\r\n [class.active]=\"activeTab === 'find-replace'\"\r\n (click)=\"onTabChange('find-replace')\"\r\n >\r\n Find and Replace\r\n </a>\r\n </li>\r\n </ul>\r\n</div>\r\n\r\n<div >\r\n <!-- All Planograms Table -->\r\n <div *ngIf=\"activeTab === 'all-planograms'\" [class.restrict-interaction]=\"isButtonLoading\">\r\n <div class=\"content-wrapper\" >\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>All Planograms</h4>\r\n <span>{{ totalItems }} - Total Stores</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div style=\"position: relative\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"onClickCreateFixture()\" class=\"btn btn-primary d-inline-flex align-items-center me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n stroke=\"white\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n <!-- <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n <plano-filter [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\" [config]=\"{ 'Merchandise compliance': false }\"></plano-filter>\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n \r\n <svg *ngIf=\"!isButtonLoading\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.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\"></path>\r\n </svg>\r\n \r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n <span class=\"ms-2\"> Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\"\r\n >\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">\r\n {{\r\n selectedFilterTab === \"all\"\r\n ? \"No data found\"\r\n : selectedFilterTab === \"rollout\"\r\n ? \"Rollout stores\"\r\n : selectedFilterTab === \"merch\"\r\n ? \"Merchandise approval\"\r\n : selectedFilterTab === \"vm\"\r\n ? \"Visual merchandise approval\"\r\n : \"Flags\"\r\n }}\r\n </div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'all'\">There is no result for manage rollout table</div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'rollout'\">No rollout initiated for any store</div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'merch'\">Looks like there are no merchandise approval pending</div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'vm'\">\r\n Looks like there are no visual merchandise approval pending\r\n </div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'flag'\">Looks like no issue so far with any stores</div>\r\n </div>\r\n\r\n <!-- Manage Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Plano Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th> Country </th>\r\n <th> City </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Floor\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n Merch Fixtures\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('vmCount')\" class=\"cursor-pointer\">\r\n Visual Merch\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'vmCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'vmCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span class=\"cursor-pointer\">\r\n Rollout Status\r\n </span>\r\n </th>\r\n <!-- <th></th> -->\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a\r\n [routerLink]=\"['/manage/stores/plano']\"\r\n [queryParams]=\"{ storeId: plano?.storeId }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n {{ plano.storeName }}</a\r\n >\r\n </div>\r\n </td>\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-rollout']\"\r\n [queryParams]=\"{ planoId: plano.planoId, floorId: plano?.floorId }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n <!-- cardData.doubleFloorStore.includes(plano?.storeId)\r\n ? plano.layoutName + \"-\" + plano?.floorName -->\r\n {{\r\n plano.layoutName\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n {{plano?.layoutCount}}\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.fixtureCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'merchRollout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'merchRollout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'merchRollout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'merchRollout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.vmCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'vmRollout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'vmRollout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'vmRollout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'vmRollout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n <!-- <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatus(plano) === 'Completed' ? 'bg-success' : 'badgeStyle'\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td> -->\r\n <!-- <td>\r\n <div class=\"d-flex align-items-center gap-2 justify-content-center\">\r\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_17_71425)\">\r\n <path\r\n d=\"M12.1971 18.7144C12.0464 18.9742 11.8302 19.1898 11.5699 19.3397C11.3097 19.4896 11.0146 19.5685 10.7143 19.5685C10.414 19.5685 10.1189 19.4896 9.85866 19.3397C9.59842 19.1898 9.38212 18.9742 9.23143 18.7144M15.8571 7.57157C15.8571 6.2076 15.3153 4.89949 14.3508 3.93502C13.3864 2.97055 12.0783 2.42871 10.7143 2.42871C9.35032 2.42871 8.04221 2.97055 7.07774 3.93502C6.11326 4.89949 5.57143 6.2076 5.57143 7.57157C5.57143 13.5716 3 15.2859 3 15.2859H18.4286C18.4286 15.2859 15.8571 13.5716 15.8571 7.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.08574 8.04805C1.55611 8.04805 1.12146 7.61768 1.17082 7.09036C1.286 5.85989 1.627 4.71322 2.19383 3.65034C2.75229 2.60318 3.46062 1.69605 4.31882 0.928939C4.71052 0.578823 5.30965 0.673501 5.62062 1.09695C5.93175 1.52062 5.83525 2.1121 5.45225 2.47212C4.82875 3.05819 4.30987 3.74239 3.89559 4.52471C3.47303 5.32267 3.20776 6.17833 3.0998 7.09169C3.03766 7.61747 2.61518 8.04805 2.08574 8.04805ZM19.3431 8.04805C18.8134 8.04805 18.3908 7.6171 18.3287 7.09105C18.2209 6.17793 17.9556 5.32248 17.5326 4.52471C17.118 3.74258 16.5993 3.05852 15.9765 2.47254C15.5937 2.11226 15.4973 1.5207 15.8085 1.09696C16.1196 0.673433 16.7187 0.578551 17.1107 0.928571C17.9693 1.6954 18.6778 2.60266 19.2363 3.65034C19.8032 4.71381 20.1438 5.86068 20.2581 7.09095C20.3071 7.61809 19.8725 8.04805 19.3431 8.04805Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_17_71425\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.428711 0.714355)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_139_112685)\">\r\n <path\r\n d=\"M12.4843 21.4302C12.3336 21.69 12.1173 21.9057 11.857 22.0556C11.5968 22.2055 11.3017 22.2844 11.0014 22.2844C10.7011 22.2844 10.406 22.2055 10.1458 22.0556C9.88553 21.9057 9.66923 21.69 9.51854 21.4302M16.1443 10.2874C16.1443 8.92342 15.6024 7.61531 14.6379 6.65084C13.6735 5.68637 12.3654 5.14453 11.0014 5.14453C9.63742 5.14453 8.32932 5.68637 7.36485 6.65084C6.40037 7.61531 5.85854 8.92342 5.85854 10.2874C5.85854 16.2874 3.28711 18.0017 3.28711 18.0017H18.7157C18.7157 18.0017 16.1443 16.2874 16.1443 10.2874Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.37187 10.7634C1.84224 10.7634 1.40759 10.333 1.45695 9.80569C1.57213 8.57522 1.91313 7.42855 2.47997 6.36567C3.03842 5.31851 3.74675 4.41138 4.60496 3.64427C4.99665 3.29415 5.59578 3.38883 5.90675 3.81228C6.21788 4.23595 6.12138 4.82744 5.73838 5.18745C5.11489 5.77352 4.596 6.45772 4.18172 7.24004C3.75916 8.038 3.4939 8.89366 3.38594 9.80702C3.32379 10.3328 2.90131 10.7634 2.37187 10.7634ZM19.6292 10.7634C19.0995 10.7634 18.6769 10.3324 18.6148 9.80638C18.507 8.89326 18.2417 8.03781 17.8188 7.24004C17.4041 6.45791 16.8854 5.77385 16.2627 5.18787C15.8798 4.8276 15.7835 4.23603 16.0947 3.81229C16.4057 3.38876 17.0049 3.29388 17.3968 3.6439C18.2554 4.41073 18.964 5.31799 19.5224 6.36567C20.0893 7.42914 20.4299 8.57601 20.5442 9.80628C20.5932 10.3334 20.1586 10.7634 19.6292 10.7634Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n <defs>\r\n <clipPath id=\"clip0_139_112685\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.714844 3.42969)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 5C11 5.55228 11.4477 6 12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </td> -->\r\n <!-- <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano.planoId, floorId: plano?.floorId }\"\r\n >\r\n <svg\r\n width=\"23\"\r\n height=\"24\"\r\n viewBox=\"0 0 23 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n *ngIf=\"getSubmit(plano)\"\r\n >\r\n <path\r\n d=\"M10.1395 6.85728H4.13946C3.6848 6.85728 3.24876 7.0379 2.92727 7.35939C2.60578 7.68088 2.42517 8.11691 2.42517 8.57157V20.5716C2.42517 21.0262 2.60578 21.4623 2.92727 21.7838C3.24876 22.1052 3.6848 22.2859 4.13946 22.2859H16.1395C16.5941 22.2859 17.0301 22.1052 17.3516 21.7838C17.6731 21.4623 17.8537 21.0262 17.8537 20.5716V14.5716M16.568 5.57157C16.909 5.23058 17.3715 5.03901 17.8537 5.03901C18.336 5.03901 18.7985 5.23058 19.1395 5.57157C19.4805 5.91256 19.672 6.37505 19.672 6.85728C19.672 7.33952 19.4805 7.80201 19.1395 8.143L10.9966 16.2859L7.56803 17.143L8.42517 13.7144L16.568 5.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n </svg>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\"\r\n height=\"22\"\r\n viewBox=\"0 0 21 22\"\r\n fill=\"none\"\r\n *ngIf=\"!getSubmit(plano)\"\r\n >\r\n <g clip-path=\"url(#clip0_844_18318)\">\r\n <path\r\n d=\"M9.85686 4.14249H3.85686C3.40221 4.14249 2.96617 4.32311 2.64468 4.6446C2.32319 4.96609 2.14258 5.40212 2.14258 5.85678V17.8568C2.14258 18.3114 2.32319 18.7475 2.64468 19.069C2.96617 19.3905 3.40221 19.5711 3.85686 19.5711H15.8569C16.3115 19.5711 16.7476 19.3905 17.069 19.069C17.3905 18.7475 17.5712 18.3114 17.5712 17.8568V11.8568M16.2854 2.85678C16.6264 2.51579 17.0889 2.32422 17.5712 2.32422C18.0534 2.32422 18.5159 2.51579 18.8569 2.85678C19.1979 3.19777 19.3894 3.66026 19.3894 4.14249C19.3894 4.62473 19.1979 5.08722 18.8569 5.42821L10.714 13.5711L7.28544 14.4282L8.14258 10.9996L16.2854 2.85678Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_18318\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.427734 0.713867)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </td> -->\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Manage Planogram grid view -->\r\n <!-- <ng-template #gridView>\r\n <section id=\"grid-view\">\r\n <div class=\"row gx-6 gy-4\">\r\n <div class=\"col-md-4\" *ngFor=\"let fixture of fixtureTemplatesList\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"card-action dropdown\">\r\n <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <i class=\"bi bi-three-dots-vertical\"></i>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{ fixture.name }}</h3>\r\n <div class=\"badge\" [ngClass]=\"fixture.status\">{{ fixture.status | titlecase }}</div>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <div *ngFor=\"let subBrand of fixture.subBrand; let i = index\">\r\n <span *ngIf=\"i != 0\" class=\"me-2 card-tagline\">•</span>\r\n <div class=\"badge\">{{ subBrand }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template> -->\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n *ngIf=\"!isPageLoading && planogramsList.length !== 0\"\r\n >\r\n </lib-pagination>\r\n </div>\r\n\r\n \r\n </div>\r\n\r\n <!-- Find and Replace Table -->\r\n <div *ngIf=\"activeTab === 'find-replace'\">\r\n <lib-find-replace-table></lib-find-replace-table>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.reviewPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009BF3);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"] }]
|
|
29615
|
+
args: [{ selector: "lib-plano-rollout-table", template: "<!-- Filter Tabs (only show for All Planograms) -->\r\n<div class=\"row mx-0 my-5 gap-2\" >\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardData?.totalStore || 0 }}</h3>\r\n <p>All store</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'rollout' }\" (click)=\"filterTable('rollout')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardData?.rolloutStore ?? 0 }}</h3>\r\n <p>Rollout store</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'merch' }\" (click)=\"filterTable('merch')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardData?.merchPendingStore ?? 0 }}</h3>\r\n <p>Merch approval pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'vm' }\" (click)=\"filterTable('vm')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardData?.vmPendingStore ?? 0 }}</h3>\r\n <p>Visual Merch approval pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'flag' }\" (click)=\"filterTable('flag')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardData?.flagStore ?? 0 }}</h3>\r\n <p>Flags</p>\r\n </div>\r\n</div>\r\n\r\n<!-- Tabs Navigation -->\r\n<div class=\"d-flex justify-content-start mb-4\">\r\n <ul class=\"nav nav-line-tabs nav-line-tabs-2x\">\r\n <li class=\"nav-item\">\r\n <a\r\n class=\"nav-link\"\r\n [routerLink]=\"[]\"\r\n [queryParams]=\"{ view: 'all-planograms' }\"\r\n [queryParamsHandling]=\"'merge'\"\r\n [class.active]=\"activeTab === 'all-planograms'\"\r\n (click)=\"onTabChange('all-planograms')\"\r\n >\r\n All Planograms\r\n </a>\r\n </li>\r\n <li class=\"nav-item\">\r\n <a\r\n class=\"nav-link\"\r\n [routerLink]=\"[]\"\r\n [queryParams]=\"{ view: 'find-replace' }\"\r\n [queryParamsHandling]=\"'merge'\"\r\n [class.active]=\"activeTab === 'find-replace'\"\r\n (click)=\"onTabChange('find-replace')\"\r\n >\r\n Find and Replace\r\n </a>\r\n </li>\r\n </ul>\r\n</div>\r\n\r\n<div >\r\n <!-- All Planograms Table -->\r\n <div *ngIf=\"activeTab === 'all-planograms'\" [class.restrict-interaction]=\"isButtonLoading\">\r\n <div class=\"content-wrapper\" >\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>All Planograms</h4>\r\n <span>{{ totalItems }} - Total Stores</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div style=\"position: relative\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"onClickCreateFixture()\" class=\"btn btn-primary d-inline-flex align-items-center me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n stroke=\"white\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n <!-- <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n <plano-filter [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\" [config]=\"{ 'Merchandise compliance': false }\"></plano-filter>\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n \r\n <svg *ngIf=\"!isButtonLoading\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.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\"></path>\r\n </svg>\r\n \r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n <span class=\"ms-2\"> Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\"\r\n >\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">\r\n {{\r\n selectedFilterTab === \"all\"\r\n ? \"No data found\"\r\n : selectedFilterTab === \"rollout\"\r\n ? \"Rollout stores\"\r\n : selectedFilterTab === \"merch\"\r\n ? \"Merchandise approval\"\r\n : selectedFilterTab === \"vm\"\r\n ? \"Visual merchandise approval\"\r\n : \"Flags\"\r\n }}\r\n </div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'all'\">There is no result for manage rollout table</div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'rollout'\">No rollout initiated for any store</div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'merch'\">Looks like there are no merchandise approval pending</div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'vm'\">\r\n Looks like there are no visual merchandise approval pending\r\n </div>\r\n <div class=\"nodatasubtext\" *ngIf=\"selectedFilterTab === 'flag'\">Looks like no issue so far with any stores</div>\r\n </div>\r\n\r\n <!-- Manage Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Plano Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th> Country </th>\r\n <th> City </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Floor\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n Merch Fixtures\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('vmCount')\" class=\"cursor-pointer\">\r\n Visual Merch\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'vmCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'vmCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span class=\"cursor-pointer\">\r\n Rollout Status\r\n </span>\r\n </th>\r\n <!-- <th></th> -->\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a\r\n [routerLink]=\"['/manage/stores/plano']\"\r\n [queryParams]=\"{ storeId: plano?.storeId }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n {{ plano.storeName }}</a\r\n >\r\n </div>\r\n </td>\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-rollout']\"\r\n [queryParams]=\"{ planoId: plano.planoId, floorId: plano?.floorId }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n <!-- cardData.doubleFloorStore.includes(plano?.storeId)\r\n ? plano.layoutName + \"-\" + plano?.floorName -->\r\n {{\r\n plano.layoutName\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n {{plano?.layoutCount}}\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.fixtureCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'merchRollout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'merchRollout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'merchRollout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'merchRollout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.vmCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'vmRollout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'vmRollout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'vmRollout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'vmRollout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n <!-- <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatus(plano) === 'Completed' ? 'bg-success' : 'badgeStyle'\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td> -->\r\n <!-- <td>\r\n <div class=\"d-flex align-items-center gap-2 justify-content-center\">\r\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_17_71425)\">\r\n <path\r\n d=\"M12.1971 18.7144C12.0464 18.9742 11.8302 19.1898 11.5699 19.3397C11.3097 19.4896 11.0146 19.5685 10.7143 19.5685C10.414 19.5685 10.1189 19.4896 9.85866 19.3397C9.59842 19.1898 9.38212 18.9742 9.23143 18.7144M15.8571 7.57157C15.8571 6.2076 15.3153 4.89949 14.3508 3.93502C13.3864 2.97055 12.0783 2.42871 10.7143 2.42871C9.35032 2.42871 8.04221 2.97055 7.07774 3.93502C6.11326 4.89949 5.57143 6.2076 5.57143 7.57157C5.57143 13.5716 3 15.2859 3 15.2859H18.4286C18.4286 15.2859 15.8571 13.5716 15.8571 7.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.08574 8.04805C1.55611 8.04805 1.12146 7.61768 1.17082 7.09036C1.286 5.85989 1.627 4.71322 2.19383 3.65034C2.75229 2.60318 3.46062 1.69605 4.31882 0.928939C4.71052 0.578823 5.30965 0.673501 5.62062 1.09695C5.93175 1.52062 5.83525 2.1121 5.45225 2.47212C4.82875 3.05819 4.30987 3.74239 3.89559 4.52471C3.47303 5.32267 3.20776 6.17833 3.0998 7.09169C3.03766 7.61747 2.61518 8.04805 2.08574 8.04805ZM19.3431 8.04805C18.8134 8.04805 18.3908 7.6171 18.3287 7.09105C18.2209 6.17793 17.9556 5.32248 17.5326 4.52471C17.118 3.74258 16.5993 3.05852 15.9765 2.47254C15.5937 2.11226 15.4973 1.5207 15.8085 1.09696C16.1196 0.673433 16.7187 0.578551 17.1107 0.928571C17.9693 1.6954 18.6778 2.60266 19.2363 3.65034C19.8032 4.71381 20.1438 5.86068 20.2581 7.09095C20.3071 7.61809 19.8725 8.04805 19.3431 8.04805Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_17_71425\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.428711 0.714355)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_139_112685)\">\r\n <path\r\n d=\"M12.4843 21.4302C12.3336 21.69 12.1173 21.9057 11.857 22.0556C11.5968 22.2055 11.3017 22.2844 11.0014 22.2844C10.7011 22.2844 10.406 22.2055 10.1458 22.0556C9.88553 21.9057 9.66923 21.69 9.51854 21.4302M16.1443 10.2874C16.1443 8.92342 15.6024 7.61531 14.6379 6.65084C13.6735 5.68637 12.3654 5.14453 11.0014 5.14453C9.63742 5.14453 8.32932 5.68637 7.36485 6.65084C6.40037 7.61531 5.85854 8.92342 5.85854 10.2874C5.85854 16.2874 3.28711 18.0017 3.28711 18.0017H18.7157C18.7157 18.0017 16.1443 16.2874 16.1443 10.2874Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.37187 10.7634C1.84224 10.7634 1.40759 10.333 1.45695 9.80569C1.57213 8.57522 1.91313 7.42855 2.47997 6.36567C3.03842 5.31851 3.74675 4.41138 4.60496 3.64427C4.99665 3.29415 5.59578 3.38883 5.90675 3.81228C6.21788 4.23595 6.12138 4.82744 5.73838 5.18745C5.11489 5.77352 4.596 6.45772 4.18172 7.24004C3.75916 8.038 3.4939 8.89366 3.38594 9.80702C3.32379 10.3328 2.90131 10.7634 2.37187 10.7634ZM19.6292 10.7634C19.0995 10.7634 18.6769 10.3324 18.6148 9.80638C18.507 8.89326 18.2417 8.03781 17.8188 7.24004C17.4041 6.45791 16.8854 5.77385 16.2627 5.18787C15.8798 4.8276 15.7835 4.23603 16.0947 3.81229C16.4057 3.38876 17.0049 3.29388 17.3968 3.6439C18.2554 4.41073 18.964 5.31799 19.5224 6.36567C20.0893 7.42914 20.4299 8.57601 20.5442 9.80628C20.5932 10.3334 20.1586 10.7634 19.6292 10.7634Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n <defs>\r\n <clipPath id=\"clip0_139_112685\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.714844 3.42969)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 5C11 5.55228 11.4477 6 12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </td> -->\r\n <!-- <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano.planoId, floorId: plano?.floorId }\"\r\n >\r\n <svg\r\n width=\"23\"\r\n height=\"24\"\r\n viewBox=\"0 0 23 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n *ngIf=\"getSubmit(plano)\"\r\n >\r\n <path\r\n d=\"M10.1395 6.85728H4.13946C3.6848 6.85728 3.24876 7.0379 2.92727 7.35939C2.60578 7.68088 2.42517 8.11691 2.42517 8.57157V20.5716C2.42517 21.0262 2.60578 21.4623 2.92727 21.7838C3.24876 22.1052 3.6848 22.2859 4.13946 22.2859H16.1395C16.5941 22.2859 17.0301 22.1052 17.3516 21.7838C17.6731 21.4623 17.8537 21.0262 17.8537 20.5716V14.5716M16.568 5.57157C16.909 5.23058 17.3715 5.03901 17.8537 5.03901C18.336 5.03901 18.7985 5.23058 19.1395 5.57157C19.4805 5.91256 19.672 6.37505 19.672 6.85728C19.672 7.33952 19.4805 7.80201 19.1395 8.143L10.9966 16.2859L7.56803 17.143L8.42517 13.7144L16.568 5.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n </svg>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\"\r\n height=\"22\"\r\n viewBox=\"0 0 21 22\"\r\n fill=\"none\"\r\n *ngIf=\"!getSubmit(plano)\"\r\n >\r\n <g clip-path=\"url(#clip0_844_18318)\">\r\n <path\r\n d=\"M9.85686 4.14249H3.85686C3.40221 4.14249 2.96617 4.32311 2.64468 4.6446C2.32319 4.96609 2.14258 5.40212 2.14258 5.85678V17.8568C2.14258 18.3114 2.32319 18.7475 2.64468 19.069C2.96617 19.3905 3.40221 19.5711 3.85686 19.5711H15.8569C16.3115 19.5711 16.7476 19.3905 17.069 19.069C17.3905 18.7475 17.5712 18.3114 17.5712 17.8568V11.8568M16.2854 2.85678C16.6264 2.51579 17.0889 2.32422 17.5712 2.32422C18.0534 2.32422 18.5159 2.51579 18.8569 2.85678C19.1979 3.19777 19.3894 3.66026 19.3894 4.14249C19.3894 4.62473 19.1979 5.08722 18.8569 5.42821L10.714 13.5711L7.28544 14.4282L8.14258 10.9996L16.2854 2.85678Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_18318\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.427734 0.713867)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </td> -->\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Manage Planogram grid view -->\r\n <!-- <ng-template #gridView>\r\n <section id=\"grid-view\">\r\n <div class=\"row gx-6 gy-4\">\r\n <div class=\"col-md-4\" *ngFor=\"let fixture of fixtureTemplatesList\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"card-action dropdown\">\r\n <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <i class=\"bi bi-three-dots-vertical\"></i>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{ fixture.name }}</h3>\r\n <div class=\"badge\" [ngClass]=\"fixture.status\">{{ fixture.status | titlecase }}</div>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <div *ngFor=\"let subBrand of fixture.subBrand; let i = index\">\r\n <span *ngIf=\"i != 0\" class=\"me-2 card-tagline\">•</span>\r\n <div class=\"badge\">{{ subBrand }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template> -->\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n *ngIf=\"!isPageLoading && planogramsList.length !== 0\"\r\n >\r\n </lib-pagination>\r\n </div>\r\n\r\n \r\n </div>\r\n\r\n <!-- Find and Replace Table -->\r\n <div *ngIf=\"activeTab === 'find-replace'\">\r\n <lib-find-replace-table></lib-find-replace-table>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.card-stat-shimmer{width:56px;height:24px;margin:3px 0;border-radius:6px;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%;animation:shimmer 3s infinite}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.reviewPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009BF3);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"] }]
|
|
29616
29616
|
}], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i2$1.PageInfoService }] });
|
|
29617
29617
|
|
|
29618
29618
|
class PlanoVerificationTableComponent {
|
|
@@ -29733,6 +29733,7 @@ class PlanoVerificationTableComponent {
|
|
|
29733
29733
|
};
|
|
29734
29734
|
isFilterApplied = false;
|
|
29735
29735
|
isPageLoading = true;
|
|
29736
|
+
isCardsLoading = true;
|
|
29736
29737
|
isButtonLoading = false;
|
|
29737
29738
|
isError = false;
|
|
29738
29739
|
destroy$ = new Subject();
|
|
@@ -29772,6 +29773,9 @@ class PlanoVerificationTableComponent {
|
|
|
29772
29773
|
let data = JSON.parse(localStorage.getItem("header-filters"));
|
|
29773
29774
|
this.clientId = data?.client;
|
|
29774
29775
|
}
|
|
29776
|
+
// Cards are frozen full-bucket totals (independent of search / filter /
|
|
29777
|
+
// tab), so fetch them once per client change — not on every table reload.
|
|
29778
|
+
this.getCards();
|
|
29775
29779
|
this.route.queryParamMap
|
|
29776
29780
|
.pipe(takeUntil(this.destroy$))
|
|
29777
29781
|
.subscribe((params) => {
|
|
@@ -29786,10 +29790,8 @@ class PlanoVerificationTableComponent {
|
|
|
29786
29790
|
key: "tab",
|
|
29787
29791
|
fallback: "all",
|
|
29788
29792
|
});
|
|
29789
|
-
|
|
29790
|
-
|
|
29791
|
-
? "fixture"
|
|
29792
|
-
: this.selectedFilterTab;
|
|
29793
|
+
// VM card/tab removed — taskPending maps straight through.
|
|
29794
|
+
this.appliedFilters.taskPending = this.selectedFilterTab;
|
|
29793
29795
|
this.limit = getQueryParamNumber({
|
|
29794
29796
|
params,
|
|
29795
29797
|
key: "limit",
|
|
@@ -29848,7 +29850,6 @@ class PlanoVerificationTableComponent {
|
|
|
29848
29850
|
if (res && res?.code == 200) {
|
|
29849
29851
|
this.totalItems = res?.data?.count;
|
|
29850
29852
|
this.planogramsList = res?.data?.data ?? [];
|
|
29851
|
-
this.pendingDetails = res?.data?.pendingDetails?.[0] || [];
|
|
29852
29853
|
if (this.totalItems < 10) {
|
|
29853
29854
|
this.paginationSizes = [this.totalItems];
|
|
29854
29855
|
}
|
|
@@ -29864,6 +29865,27 @@ class PlanoVerificationTableComponent {
|
|
|
29864
29865
|
});
|
|
29865
29866
|
this.totalItems = this.planogramsList.length;
|
|
29866
29867
|
}
|
|
29868
|
+
// Frozen verification cards (allStores / layoutComplete / fixturePending /
|
|
29869
|
+
// zonePending), computed over the full active-store bucket independent of any UI
|
|
29870
|
+
// filter. Fetched once per client change so search / filter / pagination never
|
|
29871
|
+
// recompute them (also keeps the heavy card aggregation off the table requests).
|
|
29872
|
+
getCards() {
|
|
29873
|
+
this.isCardsLoading = true;
|
|
29874
|
+
this.storeBuilderService
|
|
29875
|
+
.getPlanoCards({ clientId: this.clientId })
|
|
29876
|
+
.pipe(takeUntil(this.destroy$))
|
|
29877
|
+
.subscribe({
|
|
29878
|
+
next: (res) => {
|
|
29879
|
+
if (res && res?.code == 200) {
|
|
29880
|
+
this.pendingDetails = res?.data || {};
|
|
29881
|
+
}
|
|
29882
|
+
this.isCardsLoading = false;
|
|
29883
|
+
},
|
|
29884
|
+
error: () => {
|
|
29885
|
+
this.isCardsLoading = false;
|
|
29886
|
+
},
|
|
29887
|
+
});
|
|
29888
|
+
}
|
|
29867
29889
|
openBulkUploadModal() {
|
|
29868
29890
|
const modelRef = this.ngbModal.open(BulkUploadPlanogramComponent);
|
|
29869
29891
|
}
|
|
@@ -29925,10 +29947,8 @@ class PlanoVerificationTableComponent {
|
|
|
29925
29947
|
this.appliedFilters[ele.title.toLowerCase()] = ele.selected;
|
|
29926
29948
|
}
|
|
29927
29949
|
});
|
|
29950
|
+
// VM card/tab removed.
|
|
29928
29951
|
let task = this.selectedFilterTab;
|
|
29929
|
-
if (this.selectedFilterTab == "vm") {
|
|
29930
|
-
task = "fixture";
|
|
29931
|
-
}
|
|
29932
29952
|
if (this.appliedFilters["planogram status"]?.length) {
|
|
29933
29953
|
this.appliedFilters["fixture"].push(...this.appliedFilters["planogram status"]);
|
|
29934
29954
|
this.appliedFilters["fixture"] = [...new Set(this.appliedFilters["fixture"].map((ele) => ele))];
|
|
@@ -30221,11 +30241,11 @@ class PlanoVerificationTableComponent {
|
|
|
30221
30241
|
});
|
|
30222
30242
|
}
|
|
30223
30243
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoVerificationTableComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
30224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoVerificationTableComponent, selector: "lib-plano-verification-table", ngImport: i0, template: "<div class=\"row mx-0 my-5 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <h3>{{ pendingDetails?.allStores || 0 }}</h3>\r\n <p>Total stores</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'layout' }\" (click)=\"filterTable('layout')\">\r\n <h3>{{ pendingDetails?.layoutComplete ?? 0 }}</h3>\r\n <p>Layout verification completed</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'fixture' }\" (click)=\"filterTable('fixture')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>Fixture verification pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'vm' }\" (click)=\"filterTable('vm')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>VM verification pending</p>\r\n </div>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 5th stat card -->\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'zone' }\" (click)=\"filterTable('zone')\">\r\n <h3>{{ pendingDetails?.zonePending ?? 0 }}</h3>\r\n <p>Zone verification pending</p>\r\n </div>\r\n</div>\r\n\r\n<div class=\"content-wrapper\">\r\n <div [class.restrict-interaction]=\"isButtonLoading\">\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>All Planograms</h4>\r\n <span>{{ totalItems }} - Total Records</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div style=\"position: relative\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n <plano-filter [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\" [config]=\"{ 'Merchandise compliance': false }\"></plano-filter>\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n \r\n <svg *ngIf=\"!isButtonLoading\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.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\"></path>\r\n </svg>\r\n \r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n <span class=\"ms-2\"> Export</span>\r\n </button>\r\n\r\n <!-- <button type=\"button\" (click)=\"onClickCreatePlanogram()\" class=\"btn btn-primary d-inline-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n stroke=\"white\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button> -->\r\n\r\n <!-- <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\"\r\n >\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for manage planogram table</div>\r\n </div>\r\n\r\n <!-- Manage Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Layout Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n </th>\r\n <th>\r\n City\r\n </th>\r\n <th>\r\n <span class=\"cursor-pointer d-flex align-items-center\">\r\n Plano Completion %\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planoProgress' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planoProgress' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Layout\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n No of Fixtures\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('vmCount')\" class=\"cursor-pointer\">\r\n No of VMs\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'vmCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'vmCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status header -->\r\n <th class=\"text-center\">\r\n <span>Zone</span>\r\n </th>\r\n <th class=\"text-center\">\r\n <ng-template #tooltip>\r\n <div class=\"w-100\">\r\n <h6>Total store capacity</h6>\r\n <span> Combining product capacity of all fixtures </span>\r\n </div>\r\n </ng-template>\r\n <span (click)=\"onSortTable('fixtureCapacity')\" class=\"cursor-pointer d-flex align-items-center\">\r\n Store Capacity\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n [ngbTooltip]=\"tooltip\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span class=\"cursor-pointer\">\r\n Planogram Status\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planogramStatus' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planogramStatus' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n </span>\r\n </th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"redirectStore(plano.storeId)\" class=\"cursor-pointer text-decoration-underline\">\r\n {{ plano.storeName }}</a\r\n >\r\n </div>\r\n </td>\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.[0]?.id }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n {{\r\n plano.layoutName\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div\r\n class=\"progress-bar\"\r\n [ngClass]=\"\r\n [25, 50].includes(getProgressValue(plano))\r\n ? 'bg-warning'\r\n : 'bg-success'\r\n \"\r\n role=\"progressbar\"\r\n [style]=\"getProgressValue(plano) ? 'width: ' + getProgressValue(plano) + '%' : 'width:25%'\"\r\n [attr.aria-valuenow]=\"getProgressValue(plano)\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue(plano) }}%</div>\r\n </div>\r\n <!-- <div class=\"row align-items-center\">\r\n <div class=\"col-8 progress\" style=\"height: 4px; border-radius: 4px;\">\r\n <div\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n style=\"width: 25%\"\r\n aria-valuenow=\"25\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n <div class=\"col-4\">\r\n {{ plano.planoCompletion }}\r\n </div>\r\n </div> -->\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.layoutCount === 1 ? 1 : updateFloor(plano) }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'layout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'layout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'layout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'layout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.fixtureCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'fixture') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'fixture') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.vmCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'vm') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'vm') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status cell -->\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"getZoneStatus(plano) === 'flag'\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getZoneStatus(plano)\"\r\n *ngIf=\"getZoneStatus(plano) !== 'flag'\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getZoneTooltip(plano) }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCapacity ?? 0 }}\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n <!-- <td>\r\n <div class=\"d-flex align-items-center gap-2 justify-content-center\">\r\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_17_71425)\">\r\n <path\r\n d=\"M12.1971 18.7144C12.0464 18.9742 11.8302 19.1898 11.5699 19.3397C11.3097 19.4896 11.0146 19.5685 10.7143 19.5685C10.414 19.5685 10.1189 19.4896 9.85866 19.3397C9.59842 19.1898 9.38212 18.9742 9.23143 18.7144M15.8571 7.57157C15.8571 6.2076 15.3153 4.89949 14.3508 3.93502C13.3864 2.97055 12.0783 2.42871 10.7143 2.42871C9.35032 2.42871 8.04221 2.97055 7.07774 3.93502C6.11326 4.89949 5.57143 6.2076 5.57143 7.57157C5.57143 13.5716 3 15.2859 3 15.2859H18.4286C18.4286 15.2859 15.8571 13.5716 15.8571 7.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.08574 8.04805C1.55611 8.04805 1.12146 7.61768 1.17082 7.09036C1.286 5.85989 1.627 4.71322 2.19383 3.65034C2.75229 2.60318 3.46062 1.69605 4.31882 0.928939C4.71052 0.578823 5.30965 0.673501 5.62062 1.09695C5.93175 1.52062 5.83525 2.1121 5.45225 2.47212C4.82875 3.05819 4.30987 3.74239 3.89559 4.52471C3.47303 5.32267 3.20776 6.17833 3.0998 7.09169C3.03766 7.61747 2.61518 8.04805 2.08574 8.04805ZM19.3431 8.04805C18.8134 8.04805 18.3908 7.6171 18.3287 7.09105C18.2209 6.17793 17.9556 5.32248 17.5326 4.52471C17.118 3.74258 16.5993 3.05852 15.9765 2.47254C15.5937 2.11226 15.4973 1.5207 15.8085 1.09696C16.1196 0.673433 16.7187 0.578551 17.1107 0.928571C17.9693 1.6954 18.6778 2.60266 19.2363 3.65034C19.8032 4.71381 20.1438 5.86068 20.2581 7.09095C20.3071 7.61809 19.8725 8.04805 19.3431 8.04805Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_17_71425\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.428711 0.714355)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_139_112685)\">\r\n <path\r\n d=\"M12.4843 21.4302C12.3336 21.69 12.1173 21.9057 11.857 22.0556C11.5968 22.2055 11.3017 22.2844 11.0014 22.2844C10.7011 22.2844 10.406 22.2055 10.1458 22.0556C9.88553 21.9057 9.66923 21.69 9.51854 21.4302M16.1443 10.2874C16.1443 8.92342 15.6024 7.61531 14.6379 6.65084C13.6735 5.68637 12.3654 5.14453 11.0014 5.14453C9.63742 5.14453 8.32932 5.68637 7.36485 6.65084C6.40037 7.61531 5.85854 8.92342 5.85854 10.2874C5.85854 16.2874 3.28711 18.0017 3.28711 18.0017H18.7157C18.7157 18.0017 16.1443 16.2874 16.1443 10.2874Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.37187 10.7634C1.84224 10.7634 1.40759 10.333 1.45695 9.80569C1.57213 8.57522 1.91313 7.42855 2.47997 6.36567C3.03842 5.31851 3.74675 4.41138 4.60496 3.64427C4.99665 3.29415 5.59578 3.38883 5.90675 3.81228C6.21788 4.23595 6.12138 4.82744 5.73838 5.18745C5.11489 5.77352 4.596 6.45772 4.18172 7.24004C3.75916 8.038 3.4939 8.89366 3.38594 9.80702C3.32379 10.3328 2.90131 10.7634 2.37187 10.7634ZM19.6292 10.7634C19.0995 10.7634 18.6769 10.3324 18.6148 9.80638C18.507 8.89326 18.2417 8.03781 17.8188 7.24004C17.4041 6.45791 16.8854 5.77385 16.2627 5.18787C15.8798 4.8276 15.7835 4.23603 16.0947 3.81229C16.4057 3.38876 17.0049 3.29388 17.3968 3.6439C18.2554 4.41073 18.964 5.31799 19.5224 6.36567C20.0893 7.42914 20.4299 8.57601 20.5442 9.80628C20.5932 10.3334 20.1586 10.7634 19.6292 10.7634Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n <defs>\r\n <clipPath id=\"clip0_139_112685\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.714844 3.42969)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 5C11 5.55228 11.4477 6 12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </td> -->\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.id }\"\r\n >\r\n <svg\r\n width=\"23\"\r\n height=\"24\"\r\n viewBox=\"0 0 23 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n *ngIf=\"getSubmit(plano)\"\r\n >\r\n <path\r\n d=\"M10.1395 6.85728H4.13946C3.6848 6.85728 3.24876 7.0379 2.92727 7.35939C2.60578 7.68088 2.42517 8.11691 2.42517 8.57157V20.5716C2.42517 21.0262 2.60578 21.4623 2.92727 21.7838C3.24876 22.1052 3.6848 22.2859 4.13946 22.2859H16.1395C16.5941 22.2859 17.0301 22.1052 17.3516 21.7838C17.6731 21.4623 17.8537 21.0262 17.8537 20.5716V14.5716M16.568 5.57157C16.909 5.23058 17.3715 5.03901 17.8537 5.03901C18.336 5.03901 18.7985 5.23058 19.1395 5.57157C19.4805 5.91256 19.672 6.37505 19.672 6.85728C19.672 7.33952 19.4805 7.80201 19.1395 8.143L10.9966 16.2859L7.56803 17.143L8.42517 13.7144L16.568 5.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n </svg>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\"\r\n height=\"22\"\r\n viewBox=\"0 0 21 22\"\r\n fill=\"none\"\r\n *ngIf=\"!getSubmit(plano)\"\r\n >\r\n <g clip-path=\"url(#clip0_844_18318)\">\r\n <path\r\n d=\"M9.85686 4.14249H3.85686C3.40221 4.14249 2.96617 4.32311 2.64468 4.6446C2.32319 4.96609 2.14258 5.40212 2.14258 5.85678V17.8568C2.14258 18.3114 2.32319 18.7475 2.64468 19.069C2.96617 19.3905 3.40221 19.5711 3.85686 19.5711H15.8569C16.3115 19.5711 16.7476 19.3905 17.069 19.069C17.3905 18.7475 17.5712 18.3114 17.5712 17.8568V11.8568M16.2854 2.85678C16.6264 2.51579 17.0889 2.32422 17.5712 2.32422C18.0534 2.32422 18.5159 2.51579 18.8569 2.85678C19.1979 3.19777 19.3894 3.66026 19.3894 4.14249C19.3894 4.62473 19.1979 5.08722 18.8569 5.42821L10.714 13.5711L7.28544 14.4282L8.14258 10.9996L16.2854 2.85678Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_18318\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.427734 0.713867)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Manage Planogram grid view -->\r\n <!-- <ng-template #gridView>\r\n <section id=\"grid-view\">\r\n <div class=\"row gx-6 gy-4\">\r\n <div class=\"col-md-4\" *ngFor=\"let fixture of fixtureTemplatesList\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"card-action dropdown\">\r\n <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <i class=\"bi bi-three-dots-vertical\"></i>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{ fixture.name }}</h3>\r\n <div class=\"badge\" [ngClass]=\"fixture.status\">{{ fixture.status | titlecase }}</div>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <div *ngFor=\"let subBrand of fixture.subBrand; let i = index\">\r\n <span *ngIf=\"i != 0\" class=\"me-2 card-tagline\">•</span>\r\n <div class=\"badge\">{{ subBrand }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template> -->\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n *ngIf=\"!isPageLoading && planogramsList.length !== 0\"\r\n >\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.reviewPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009BF3);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { 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: "component", type: PlanoFilterComponent, selector: "plano-filter", inputs: ["clientId", "data", "config"], outputs: ["applyFilters", "resetFilters", "filterChanged"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
30244
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoVerificationTableComponent, selector: "lib-plano-verification-table", ngImport: i0, template: "<div class=\"row mx-0 my-5 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isCardsLoading\"></div>\r\n <h3 *ngIf=\"!isCardsLoading\">{{ pendingDetails?.allStores || 0 }}</h3>\r\n <p>Total stores</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'layout' }\" (click)=\"filterTable('layout')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isCardsLoading\"></div>\r\n <h3 *ngIf=\"!isCardsLoading\">{{ pendingDetails?.layoutComplete ?? 0 }}</h3>\r\n <p>Layout verification completed</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'fixture' }\" (click)=\"filterTable('fixture')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isCardsLoading\"></div>\r\n <h3 *ngIf=\"!isCardsLoading\">{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>Fixture verification pending</p>\r\n </div>\r\n <!-- [VM CARD REMOVED] VM verification card hidden \u2014 not needed for now.\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'vm' }\" (click)=\"filterTable('vm')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>VM verification pending</p>\r\n </div>\r\n -->\r\n <!-- [ZONE-VERIFICATION] additive \u2014 5th stat card -->\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'zone' }\" (click)=\"filterTable('zone')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isCardsLoading\"></div>\r\n <h3 *ngIf=\"!isCardsLoading\">{{ pendingDetails?.zonePending ?? 0 }}</h3>\r\n <p>Zone verification pending</p>\r\n </div>\r\n</div>\r\n\r\n<div class=\"content-wrapper\">\r\n <div [class.restrict-interaction]=\"isButtonLoading\">\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>All Planograms</h4>\r\n <span>{{ totalItems }} - Total Records</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div style=\"position: relative\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n <plano-filter [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\" [config]=\"{ 'Merchandise compliance': false }\"></plano-filter>\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n \r\n <svg *ngIf=\"!isButtonLoading\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.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\"></path>\r\n </svg>\r\n \r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n <span class=\"ms-2\"> Export</span>\r\n </button>\r\n\r\n <!-- <button type=\"button\" (click)=\"onClickCreatePlanogram()\" class=\"btn btn-primary d-inline-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n stroke=\"white\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button> -->\r\n\r\n <!-- <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\"\r\n >\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for manage planogram table</div>\r\n </div>\r\n\r\n <!-- Manage Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Layout Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n </th>\r\n <th>\r\n City\r\n </th>\r\n <th>\r\n <span class=\"cursor-pointer d-flex align-items-center\">\r\n Plano Completion %\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planoProgress' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planoProgress' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Layout\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n No of Fixtures\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('vmCount')\" class=\"cursor-pointer\">\r\n No of VMs\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'vmCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'vmCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status header -->\r\n <th class=\"text-center\">\r\n <span>Zone</span>\r\n </th>\r\n <th class=\"text-center\">\r\n <ng-template #tooltip>\r\n <div class=\"w-100\">\r\n <h6>Total store capacity</h6>\r\n <span> Combining product capacity of all fixtures </span>\r\n </div>\r\n </ng-template>\r\n <span (click)=\"onSortTable('fixtureCapacity')\" class=\"cursor-pointer d-flex align-items-center\">\r\n Store Capacity\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n [ngbTooltip]=\"tooltip\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span class=\"cursor-pointer\">\r\n Planogram Status\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planogramStatus' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planogramStatus' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n </span>\r\n </th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"redirectStore(plano.storeId)\" class=\"cursor-pointer text-decoration-underline\">\r\n {{ plano.storeName }}</a\r\n >\r\n </div>\r\n </td>\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.[0]?.id }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n {{\r\n plano.layoutName\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div\r\n class=\"progress-bar\"\r\n [ngClass]=\"\r\n [25, 50].includes(getProgressValue(plano))\r\n ? 'bg-warning'\r\n : 'bg-success'\r\n \"\r\n role=\"progressbar\"\r\n [style]=\"getProgressValue(plano) ? 'width: ' + getProgressValue(plano) + '%' : 'width:25%'\"\r\n [attr.aria-valuenow]=\"getProgressValue(plano)\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue(plano) }}%</div>\r\n </div>\r\n <!-- <div class=\"row align-items-center\">\r\n <div class=\"col-8 progress\" style=\"height: 4px; border-radius: 4px;\">\r\n <div\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n style=\"width: 25%\"\r\n aria-valuenow=\"25\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n <div class=\"col-4\">\r\n {{ plano.planoCompletion }}\r\n </div>\r\n </div> -->\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.layoutCount === 1 ? 1 : updateFloor(plano) }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'layout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'layout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'layout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'layout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.fixtureCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'fixture') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'fixture') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.vmCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'vm') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'vm') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status cell -->\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"getZoneStatus(plano) === 'flag'\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getZoneStatus(plano)\"\r\n *ngIf=\"getZoneStatus(plano) !== 'flag'\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getZoneTooltip(plano) }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCapacity ?? 0 }}\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n <!-- <td>\r\n <div class=\"d-flex align-items-center gap-2 justify-content-center\">\r\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_17_71425)\">\r\n <path\r\n d=\"M12.1971 18.7144C12.0464 18.9742 11.8302 19.1898 11.5699 19.3397C11.3097 19.4896 11.0146 19.5685 10.7143 19.5685C10.414 19.5685 10.1189 19.4896 9.85866 19.3397C9.59842 19.1898 9.38212 18.9742 9.23143 18.7144M15.8571 7.57157C15.8571 6.2076 15.3153 4.89949 14.3508 3.93502C13.3864 2.97055 12.0783 2.42871 10.7143 2.42871C9.35032 2.42871 8.04221 2.97055 7.07774 3.93502C6.11326 4.89949 5.57143 6.2076 5.57143 7.57157C5.57143 13.5716 3 15.2859 3 15.2859H18.4286C18.4286 15.2859 15.8571 13.5716 15.8571 7.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.08574 8.04805C1.55611 8.04805 1.12146 7.61768 1.17082 7.09036C1.286 5.85989 1.627 4.71322 2.19383 3.65034C2.75229 2.60318 3.46062 1.69605 4.31882 0.928939C4.71052 0.578823 5.30965 0.673501 5.62062 1.09695C5.93175 1.52062 5.83525 2.1121 5.45225 2.47212C4.82875 3.05819 4.30987 3.74239 3.89559 4.52471C3.47303 5.32267 3.20776 6.17833 3.0998 7.09169C3.03766 7.61747 2.61518 8.04805 2.08574 8.04805ZM19.3431 8.04805C18.8134 8.04805 18.3908 7.6171 18.3287 7.09105C18.2209 6.17793 17.9556 5.32248 17.5326 4.52471C17.118 3.74258 16.5993 3.05852 15.9765 2.47254C15.5937 2.11226 15.4973 1.5207 15.8085 1.09696C16.1196 0.673433 16.7187 0.578551 17.1107 0.928571C17.9693 1.6954 18.6778 2.60266 19.2363 3.65034C19.8032 4.71381 20.1438 5.86068 20.2581 7.09095C20.3071 7.61809 19.8725 8.04805 19.3431 8.04805Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_17_71425\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.428711 0.714355)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_139_112685)\">\r\n <path\r\n d=\"M12.4843 21.4302C12.3336 21.69 12.1173 21.9057 11.857 22.0556C11.5968 22.2055 11.3017 22.2844 11.0014 22.2844C10.7011 22.2844 10.406 22.2055 10.1458 22.0556C9.88553 21.9057 9.66923 21.69 9.51854 21.4302M16.1443 10.2874C16.1443 8.92342 15.6024 7.61531 14.6379 6.65084C13.6735 5.68637 12.3654 5.14453 11.0014 5.14453C9.63742 5.14453 8.32932 5.68637 7.36485 6.65084C6.40037 7.61531 5.85854 8.92342 5.85854 10.2874C5.85854 16.2874 3.28711 18.0017 3.28711 18.0017H18.7157C18.7157 18.0017 16.1443 16.2874 16.1443 10.2874Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.37187 10.7634C1.84224 10.7634 1.40759 10.333 1.45695 9.80569C1.57213 8.57522 1.91313 7.42855 2.47997 6.36567C3.03842 5.31851 3.74675 4.41138 4.60496 3.64427C4.99665 3.29415 5.59578 3.38883 5.90675 3.81228C6.21788 4.23595 6.12138 4.82744 5.73838 5.18745C5.11489 5.77352 4.596 6.45772 4.18172 7.24004C3.75916 8.038 3.4939 8.89366 3.38594 9.80702C3.32379 10.3328 2.90131 10.7634 2.37187 10.7634ZM19.6292 10.7634C19.0995 10.7634 18.6769 10.3324 18.6148 9.80638C18.507 8.89326 18.2417 8.03781 17.8188 7.24004C17.4041 6.45791 16.8854 5.77385 16.2627 5.18787C15.8798 4.8276 15.7835 4.23603 16.0947 3.81229C16.4057 3.38876 17.0049 3.29388 17.3968 3.6439C18.2554 4.41073 18.964 5.31799 19.5224 6.36567C20.0893 7.42914 20.4299 8.57601 20.5442 9.80628C20.5932 10.3334 20.1586 10.7634 19.6292 10.7634Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n <defs>\r\n <clipPath id=\"clip0_139_112685\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.714844 3.42969)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 5C11 5.55228 11.4477 6 12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </td> -->\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.id }\"\r\n >\r\n <svg\r\n width=\"23\"\r\n height=\"24\"\r\n viewBox=\"0 0 23 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n *ngIf=\"getSubmit(plano)\"\r\n >\r\n <path\r\n d=\"M10.1395 6.85728H4.13946C3.6848 6.85728 3.24876 7.0379 2.92727 7.35939C2.60578 7.68088 2.42517 8.11691 2.42517 8.57157V20.5716C2.42517 21.0262 2.60578 21.4623 2.92727 21.7838C3.24876 22.1052 3.6848 22.2859 4.13946 22.2859H16.1395C16.5941 22.2859 17.0301 22.1052 17.3516 21.7838C17.6731 21.4623 17.8537 21.0262 17.8537 20.5716V14.5716M16.568 5.57157C16.909 5.23058 17.3715 5.03901 17.8537 5.03901C18.336 5.03901 18.7985 5.23058 19.1395 5.57157C19.4805 5.91256 19.672 6.37505 19.672 6.85728C19.672 7.33952 19.4805 7.80201 19.1395 8.143L10.9966 16.2859L7.56803 17.143L8.42517 13.7144L16.568 5.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n </svg>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\"\r\n height=\"22\"\r\n viewBox=\"0 0 21 22\"\r\n fill=\"none\"\r\n *ngIf=\"!getSubmit(plano)\"\r\n >\r\n <g clip-path=\"url(#clip0_844_18318)\">\r\n <path\r\n d=\"M9.85686 4.14249H3.85686C3.40221 4.14249 2.96617 4.32311 2.64468 4.6446C2.32319 4.96609 2.14258 5.40212 2.14258 5.85678V17.8568C2.14258 18.3114 2.32319 18.7475 2.64468 19.069C2.96617 19.3905 3.40221 19.5711 3.85686 19.5711H15.8569C16.3115 19.5711 16.7476 19.3905 17.069 19.069C17.3905 18.7475 17.5712 18.3114 17.5712 17.8568V11.8568M16.2854 2.85678C16.6264 2.51579 17.0889 2.32422 17.5712 2.32422C18.0534 2.32422 18.5159 2.51579 18.8569 2.85678C19.1979 3.19777 19.3894 3.66026 19.3894 4.14249C19.3894 4.62473 19.1979 5.08722 18.8569 5.42821L10.714 13.5711L7.28544 14.4282L8.14258 10.9996L16.2854 2.85678Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_18318\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.427734 0.713867)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Manage Planogram grid view -->\r\n <!-- <ng-template #gridView>\r\n <section id=\"grid-view\">\r\n <div class=\"row gx-6 gy-4\">\r\n <div class=\"col-md-4\" *ngFor=\"let fixture of fixtureTemplatesList\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"card-action dropdown\">\r\n <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <i class=\"bi bi-three-dots-vertical\"></i>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{ fixture.name }}</h3>\r\n <div class=\"badge\" [ngClass]=\"fixture.status\">{{ fixture.status | titlecase }}</div>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <div *ngFor=\"let subBrand of fixture.subBrand; let i = index\">\r\n <span *ngIf=\"i != 0\" class=\"me-2 card-tagline\">•</span>\r\n <div class=\"badge\">{{ subBrand }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template> -->\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n *ngIf=\"!isPageLoading && planogramsList.length !== 0\"\r\n >\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.card-stat-shimmer{width:56px;height:24px;margin:3px 0;border-radius:6px;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%;animation:shimmer 3s infinite}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.reviewPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009BF3);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { 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: "component", type: PlanoFilterComponent, selector: "plano-filter", inputs: ["clientId", "data", "config"], outputs: ["applyFilters", "resetFilters", "filterChanged"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
30225
30245
|
}
|
|
30226
30246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoVerificationTableComponent, decorators: [{
|
|
30227
30247
|
type: Component,
|
|
30228
|
-
args: [{ selector: "lib-plano-verification-table", template: "<div class=\"row mx-0 my-5 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <h3>{{ pendingDetails?.allStores || 0 }}</h3>\r\n <p>Total stores</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'layout' }\" (click)=\"filterTable('layout')\">\r\n <h3>{{ pendingDetails?.layoutComplete ?? 0 }}</h3>\r\n <p>Layout verification completed</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'fixture' }\" (click)=\"filterTable('fixture')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>Fixture verification pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'vm' }\" (click)=\"filterTable('vm')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>VM verification pending</p>\r\n </div>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 5th stat card -->\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'zone' }\" (click)=\"filterTable('zone')\">\r\n <h3>{{ pendingDetails?.zonePending ?? 0 }}</h3>\r\n <p>Zone verification pending</p>\r\n </div>\r\n</div>\r\n\r\n<div class=\"content-wrapper\">\r\n <div [class.restrict-interaction]=\"isButtonLoading\">\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>All Planograms</h4>\r\n <span>{{ totalItems }} - Total Records</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div style=\"position: relative\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n <plano-filter [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\" [config]=\"{ 'Merchandise compliance': false }\"></plano-filter>\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n \r\n <svg *ngIf=\"!isButtonLoading\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.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\"></path>\r\n </svg>\r\n \r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n <span class=\"ms-2\"> Export</span>\r\n </button>\r\n\r\n <!-- <button type=\"button\" (click)=\"onClickCreatePlanogram()\" class=\"btn btn-primary d-inline-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n stroke=\"white\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button> -->\r\n\r\n <!-- <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\"\r\n >\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for manage planogram table</div>\r\n </div>\r\n\r\n <!-- Manage Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Layout Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n </th>\r\n <th>\r\n City\r\n </th>\r\n <th>\r\n <span class=\"cursor-pointer d-flex align-items-center\">\r\n Plano Completion %\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planoProgress' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planoProgress' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Layout\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n No of Fixtures\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('vmCount')\" class=\"cursor-pointer\">\r\n No of VMs\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'vmCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'vmCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status header -->\r\n <th class=\"text-center\">\r\n <span>Zone</span>\r\n </th>\r\n <th class=\"text-center\">\r\n <ng-template #tooltip>\r\n <div class=\"w-100\">\r\n <h6>Total store capacity</h6>\r\n <span> Combining product capacity of all fixtures </span>\r\n </div>\r\n </ng-template>\r\n <span (click)=\"onSortTable('fixtureCapacity')\" class=\"cursor-pointer d-flex align-items-center\">\r\n Store Capacity\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n [ngbTooltip]=\"tooltip\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span class=\"cursor-pointer\">\r\n Planogram Status\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planogramStatus' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planogramStatus' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n </span>\r\n </th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"redirectStore(plano.storeId)\" class=\"cursor-pointer text-decoration-underline\">\r\n {{ plano.storeName }}</a\r\n >\r\n </div>\r\n </td>\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.[0]?.id }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n {{\r\n plano.layoutName\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div\r\n class=\"progress-bar\"\r\n [ngClass]=\"\r\n [25, 50].includes(getProgressValue(plano))\r\n ? 'bg-warning'\r\n : 'bg-success'\r\n \"\r\n role=\"progressbar\"\r\n [style]=\"getProgressValue(plano) ? 'width: ' + getProgressValue(plano) + '%' : 'width:25%'\"\r\n [attr.aria-valuenow]=\"getProgressValue(plano)\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue(plano) }}%</div>\r\n </div>\r\n <!-- <div class=\"row align-items-center\">\r\n <div class=\"col-8 progress\" style=\"height: 4px; border-radius: 4px;\">\r\n <div\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n style=\"width: 25%\"\r\n aria-valuenow=\"25\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n <div class=\"col-4\">\r\n {{ plano.planoCompletion }}\r\n </div>\r\n </div> -->\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.layoutCount === 1 ? 1 : updateFloor(plano) }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'layout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'layout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'layout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'layout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.fixtureCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'fixture') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'fixture') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.vmCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'vm') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'vm') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status cell -->\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"getZoneStatus(plano) === 'flag'\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getZoneStatus(plano)\"\r\n *ngIf=\"getZoneStatus(plano) !== 'flag'\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getZoneTooltip(plano) }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCapacity ?? 0 }}\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n <!-- <td>\r\n <div class=\"d-flex align-items-center gap-2 justify-content-center\">\r\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_17_71425)\">\r\n <path\r\n d=\"M12.1971 18.7144C12.0464 18.9742 11.8302 19.1898 11.5699 19.3397C11.3097 19.4896 11.0146 19.5685 10.7143 19.5685C10.414 19.5685 10.1189 19.4896 9.85866 19.3397C9.59842 19.1898 9.38212 18.9742 9.23143 18.7144M15.8571 7.57157C15.8571 6.2076 15.3153 4.89949 14.3508 3.93502C13.3864 2.97055 12.0783 2.42871 10.7143 2.42871C9.35032 2.42871 8.04221 2.97055 7.07774 3.93502C6.11326 4.89949 5.57143 6.2076 5.57143 7.57157C5.57143 13.5716 3 15.2859 3 15.2859H18.4286C18.4286 15.2859 15.8571 13.5716 15.8571 7.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.08574 8.04805C1.55611 8.04805 1.12146 7.61768 1.17082 7.09036C1.286 5.85989 1.627 4.71322 2.19383 3.65034C2.75229 2.60318 3.46062 1.69605 4.31882 0.928939C4.71052 0.578823 5.30965 0.673501 5.62062 1.09695C5.93175 1.52062 5.83525 2.1121 5.45225 2.47212C4.82875 3.05819 4.30987 3.74239 3.89559 4.52471C3.47303 5.32267 3.20776 6.17833 3.0998 7.09169C3.03766 7.61747 2.61518 8.04805 2.08574 8.04805ZM19.3431 8.04805C18.8134 8.04805 18.3908 7.6171 18.3287 7.09105C18.2209 6.17793 17.9556 5.32248 17.5326 4.52471C17.118 3.74258 16.5993 3.05852 15.9765 2.47254C15.5937 2.11226 15.4973 1.5207 15.8085 1.09696C16.1196 0.673433 16.7187 0.578551 17.1107 0.928571C17.9693 1.6954 18.6778 2.60266 19.2363 3.65034C19.8032 4.71381 20.1438 5.86068 20.2581 7.09095C20.3071 7.61809 19.8725 8.04805 19.3431 8.04805Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_17_71425\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.428711 0.714355)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_139_112685)\">\r\n <path\r\n d=\"M12.4843 21.4302C12.3336 21.69 12.1173 21.9057 11.857 22.0556C11.5968 22.2055 11.3017 22.2844 11.0014 22.2844C10.7011 22.2844 10.406 22.2055 10.1458 22.0556C9.88553 21.9057 9.66923 21.69 9.51854 21.4302M16.1443 10.2874C16.1443 8.92342 15.6024 7.61531 14.6379 6.65084C13.6735 5.68637 12.3654 5.14453 11.0014 5.14453C9.63742 5.14453 8.32932 5.68637 7.36485 6.65084C6.40037 7.61531 5.85854 8.92342 5.85854 10.2874C5.85854 16.2874 3.28711 18.0017 3.28711 18.0017H18.7157C18.7157 18.0017 16.1443 16.2874 16.1443 10.2874Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.37187 10.7634C1.84224 10.7634 1.40759 10.333 1.45695 9.80569C1.57213 8.57522 1.91313 7.42855 2.47997 6.36567C3.03842 5.31851 3.74675 4.41138 4.60496 3.64427C4.99665 3.29415 5.59578 3.38883 5.90675 3.81228C6.21788 4.23595 6.12138 4.82744 5.73838 5.18745C5.11489 5.77352 4.596 6.45772 4.18172 7.24004C3.75916 8.038 3.4939 8.89366 3.38594 9.80702C3.32379 10.3328 2.90131 10.7634 2.37187 10.7634ZM19.6292 10.7634C19.0995 10.7634 18.6769 10.3324 18.6148 9.80638C18.507 8.89326 18.2417 8.03781 17.8188 7.24004C17.4041 6.45791 16.8854 5.77385 16.2627 5.18787C15.8798 4.8276 15.7835 4.23603 16.0947 3.81229C16.4057 3.38876 17.0049 3.29388 17.3968 3.6439C18.2554 4.41073 18.964 5.31799 19.5224 6.36567C20.0893 7.42914 20.4299 8.57601 20.5442 9.80628C20.5932 10.3334 20.1586 10.7634 19.6292 10.7634Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n <defs>\r\n <clipPath id=\"clip0_139_112685\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.714844 3.42969)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 5C11 5.55228 11.4477 6 12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </td> -->\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.id }\"\r\n >\r\n <svg\r\n width=\"23\"\r\n height=\"24\"\r\n viewBox=\"0 0 23 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n *ngIf=\"getSubmit(plano)\"\r\n >\r\n <path\r\n d=\"M10.1395 6.85728H4.13946C3.6848 6.85728 3.24876 7.0379 2.92727 7.35939C2.60578 7.68088 2.42517 8.11691 2.42517 8.57157V20.5716C2.42517 21.0262 2.60578 21.4623 2.92727 21.7838C3.24876 22.1052 3.6848 22.2859 4.13946 22.2859H16.1395C16.5941 22.2859 17.0301 22.1052 17.3516 21.7838C17.6731 21.4623 17.8537 21.0262 17.8537 20.5716V14.5716M16.568 5.57157C16.909 5.23058 17.3715 5.03901 17.8537 5.03901C18.336 5.03901 18.7985 5.23058 19.1395 5.57157C19.4805 5.91256 19.672 6.37505 19.672 6.85728C19.672 7.33952 19.4805 7.80201 19.1395 8.143L10.9966 16.2859L7.56803 17.143L8.42517 13.7144L16.568 5.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n </svg>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\"\r\n height=\"22\"\r\n viewBox=\"0 0 21 22\"\r\n fill=\"none\"\r\n *ngIf=\"!getSubmit(plano)\"\r\n >\r\n <g clip-path=\"url(#clip0_844_18318)\">\r\n <path\r\n d=\"M9.85686 4.14249H3.85686C3.40221 4.14249 2.96617 4.32311 2.64468 4.6446C2.32319 4.96609 2.14258 5.40212 2.14258 5.85678V17.8568C2.14258 18.3114 2.32319 18.7475 2.64468 19.069C2.96617 19.3905 3.40221 19.5711 3.85686 19.5711H15.8569C16.3115 19.5711 16.7476 19.3905 17.069 19.069C17.3905 18.7475 17.5712 18.3114 17.5712 17.8568V11.8568M16.2854 2.85678C16.6264 2.51579 17.0889 2.32422 17.5712 2.32422C18.0534 2.32422 18.5159 2.51579 18.8569 2.85678C19.1979 3.19777 19.3894 3.66026 19.3894 4.14249C19.3894 4.62473 19.1979 5.08722 18.8569 5.42821L10.714 13.5711L7.28544 14.4282L8.14258 10.9996L16.2854 2.85678Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_18318\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.427734 0.713867)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Manage Planogram grid view -->\r\n <!-- <ng-template #gridView>\r\n <section id=\"grid-view\">\r\n <div class=\"row gx-6 gy-4\">\r\n <div class=\"col-md-4\" *ngFor=\"let fixture of fixtureTemplatesList\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"card-action dropdown\">\r\n <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <i class=\"bi bi-three-dots-vertical\"></i>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{ fixture.name }}</h3>\r\n <div class=\"badge\" [ngClass]=\"fixture.status\">{{ fixture.status | titlecase }}</div>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <div *ngFor=\"let subBrand of fixture.subBrand; let i = index\">\r\n <span *ngIf=\"i != 0\" class=\"me-2 card-tagline\">•</span>\r\n <div class=\"badge\">{{ subBrand }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template> -->\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n *ngIf=\"!isPageLoading && planogramsList.length !== 0\"\r\n >\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.reviewPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009BF3);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"] }]
|
|
30248
|
+
args: [{ selector: "lib-plano-verification-table", template: "<div class=\"row mx-0 my-5 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isCardsLoading\"></div>\r\n <h3 *ngIf=\"!isCardsLoading\">{{ pendingDetails?.allStores || 0 }}</h3>\r\n <p>Total stores</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'layout' }\" (click)=\"filterTable('layout')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isCardsLoading\"></div>\r\n <h3 *ngIf=\"!isCardsLoading\">{{ pendingDetails?.layoutComplete ?? 0 }}</h3>\r\n <p>Layout verification completed</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'fixture' }\" (click)=\"filterTable('fixture')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isCardsLoading\"></div>\r\n <h3 *ngIf=\"!isCardsLoading\">{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>Fixture verification pending</p>\r\n </div>\r\n <!-- [VM CARD REMOVED] VM verification card hidden \u2014 not needed for now.\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'vm' }\" (click)=\"filterTable('vm')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>VM verification pending</p>\r\n </div>\r\n -->\r\n <!-- [ZONE-VERIFICATION] additive \u2014 5th stat card -->\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'zone' }\" (click)=\"filterTable('zone')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isCardsLoading\"></div>\r\n <h3 *ngIf=\"!isCardsLoading\">{{ pendingDetails?.zonePending ?? 0 }}</h3>\r\n <p>Zone verification pending</p>\r\n </div>\r\n</div>\r\n\r\n<div class=\"content-wrapper\">\r\n <div [class.restrict-interaction]=\"isButtonLoading\">\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>All Planograms</h4>\r\n <span>{{ totalItems }} - Total Records</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div style=\"position: relative\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n <plano-filter [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\" [config]=\"{ 'Merchandise compliance': false }\"></plano-filter>\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n \r\n <svg *ngIf=\"!isButtonLoading\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.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\"></path>\r\n </svg>\r\n \r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n <span class=\"ms-2\"> Export</span>\r\n </button>\r\n\r\n <!-- <button type=\"button\" (click)=\"onClickCreatePlanogram()\" class=\"btn btn-primary d-inline-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n stroke=\"white\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button> -->\r\n\r\n <!-- <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\"\r\n >\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for manage planogram table</div>\r\n </div>\r\n\r\n <!-- Manage Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Layout Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n </th>\r\n <th>\r\n City\r\n </th>\r\n <th>\r\n <span class=\"cursor-pointer d-flex align-items-center\">\r\n Plano Completion %\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planoProgress' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planoProgress' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Layout\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n No of Fixtures\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('vmCount')\" class=\"cursor-pointer\">\r\n No of VMs\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'vmCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'vmCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status header -->\r\n <th class=\"text-center\">\r\n <span>Zone</span>\r\n </th>\r\n <th class=\"text-center\">\r\n <ng-template #tooltip>\r\n <div class=\"w-100\">\r\n <h6>Total store capacity</h6>\r\n <span> Combining product capacity of all fixtures </span>\r\n </div>\r\n </ng-template>\r\n <span (click)=\"onSortTable('fixtureCapacity')\" class=\"cursor-pointer d-flex align-items-center\">\r\n Store Capacity\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n [ngbTooltip]=\"tooltip\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span class=\"cursor-pointer\">\r\n Planogram Status\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planogramStatus' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planogramStatus' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n </span>\r\n </th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"redirectStore(plano.storeId)\" class=\"cursor-pointer text-decoration-underline\">\r\n {{ plano.storeName }}</a\r\n >\r\n </div>\r\n </td>\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.[0]?.id }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n {{\r\n plano.layoutName\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div\r\n class=\"progress-bar\"\r\n [ngClass]=\"\r\n [25, 50].includes(getProgressValue(plano))\r\n ? 'bg-warning'\r\n : 'bg-success'\r\n \"\r\n role=\"progressbar\"\r\n [style]=\"getProgressValue(plano) ? 'width: ' + getProgressValue(plano) + '%' : 'width:25%'\"\r\n [attr.aria-valuenow]=\"getProgressValue(plano)\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue(plano) }}%</div>\r\n </div>\r\n <!-- <div class=\"row align-items-center\">\r\n <div class=\"col-8 progress\" style=\"height: 4px; border-radius: 4px;\">\r\n <div\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n style=\"width: 25%\"\r\n aria-valuenow=\"25\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n <div class=\"col-4\">\r\n {{ plano.planoCompletion }}\r\n </div>\r\n </div> -->\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.layoutCount === 1 ? 1 : updateFloor(plano) }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'layout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'layout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'layout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'layout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.fixtureCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'fixture') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'fixture') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.vmCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'vm') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'vm') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status cell -->\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"getZoneStatus(plano) === 'flag'\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getZoneStatus(plano)\"\r\n *ngIf=\"getZoneStatus(plano) !== 'flag'\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getZoneTooltip(plano) }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCapacity ?? 0 }}\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n <!-- <td>\r\n <div class=\"d-flex align-items-center gap-2 justify-content-center\">\r\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_17_71425)\">\r\n <path\r\n d=\"M12.1971 18.7144C12.0464 18.9742 11.8302 19.1898 11.5699 19.3397C11.3097 19.4896 11.0146 19.5685 10.7143 19.5685C10.414 19.5685 10.1189 19.4896 9.85866 19.3397C9.59842 19.1898 9.38212 18.9742 9.23143 18.7144M15.8571 7.57157C15.8571 6.2076 15.3153 4.89949 14.3508 3.93502C13.3864 2.97055 12.0783 2.42871 10.7143 2.42871C9.35032 2.42871 8.04221 2.97055 7.07774 3.93502C6.11326 4.89949 5.57143 6.2076 5.57143 7.57157C5.57143 13.5716 3 15.2859 3 15.2859H18.4286C18.4286 15.2859 15.8571 13.5716 15.8571 7.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.08574 8.04805C1.55611 8.04805 1.12146 7.61768 1.17082 7.09036C1.286 5.85989 1.627 4.71322 2.19383 3.65034C2.75229 2.60318 3.46062 1.69605 4.31882 0.928939C4.71052 0.578823 5.30965 0.673501 5.62062 1.09695C5.93175 1.52062 5.83525 2.1121 5.45225 2.47212C4.82875 3.05819 4.30987 3.74239 3.89559 4.52471C3.47303 5.32267 3.20776 6.17833 3.0998 7.09169C3.03766 7.61747 2.61518 8.04805 2.08574 8.04805ZM19.3431 8.04805C18.8134 8.04805 18.3908 7.6171 18.3287 7.09105C18.2209 6.17793 17.9556 5.32248 17.5326 4.52471C17.118 3.74258 16.5993 3.05852 15.9765 2.47254C15.5937 2.11226 15.4973 1.5207 15.8085 1.09696C16.1196 0.673433 16.7187 0.578551 17.1107 0.928571C17.9693 1.6954 18.6778 2.60266 19.2363 3.65034C19.8032 4.71381 20.1438 5.86068 20.2581 7.09095C20.3071 7.61809 19.8725 8.04805 19.3431 8.04805Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_17_71425\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.428711 0.714355)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_139_112685)\">\r\n <path\r\n d=\"M12.4843 21.4302C12.3336 21.69 12.1173 21.9057 11.857 22.0556C11.5968 22.2055 11.3017 22.2844 11.0014 22.2844C10.7011 22.2844 10.406 22.2055 10.1458 22.0556C9.88553 21.9057 9.66923 21.69 9.51854 21.4302M16.1443 10.2874C16.1443 8.92342 15.6024 7.61531 14.6379 6.65084C13.6735 5.68637 12.3654 5.14453 11.0014 5.14453C9.63742 5.14453 8.32932 5.68637 7.36485 6.65084C6.40037 7.61531 5.85854 8.92342 5.85854 10.2874C5.85854 16.2874 3.28711 18.0017 3.28711 18.0017H18.7157C18.7157 18.0017 16.1443 16.2874 16.1443 10.2874Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.37187 10.7634C1.84224 10.7634 1.40759 10.333 1.45695 9.80569C1.57213 8.57522 1.91313 7.42855 2.47997 6.36567C3.03842 5.31851 3.74675 4.41138 4.60496 3.64427C4.99665 3.29415 5.59578 3.38883 5.90675 3.81228C6.21788 4.23595 6.12138 4.82744 5.73838 5.18745C5.11489 5.77352 4.596 6.45772 4.18172 7.24004C3.75916 8.038 3.4939 8.89366 3.38594 9.80702C3.32379 10.3328 2.90131 10.7634 2.37187 10.7634ZM19.6292 10.7634C19.0995 10.7634 18.6769 10.3324 18.6148 9.80638C18.507 8.89326 18.2417 8.03781 17.8188 7.24004C17.4041 6.45791 16.8854 5.77385 16.2627 5.18787C15.8798 4.8276 15.7835 4.23603 16.0947 3.81229C16.4057 3.38876 17.0049 3.29388 17.3968 3.6439C18.2554 4.41073 18.964 5.31799 19.5224 6.36567C20.0893 7.42914 20.4299 8.57601 20.5442 9.80628C20.5932 10.3334 20.1586 10.7634 19.6292 10.7634Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n <defs>\r\n <clipPath id=\"clip0_139_112685\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.714844 3.42969)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 5C11 5.55228 11.4477 6 12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </td> -->\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.id }\"\r\n >\r\n <svg\r\n width=\"23\"\r\n height=\"24\"\r\n viewBox=\"0 0 23 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n *ngIf=\"getSubmit(plano)\"\r\n >\r\n <path\r\n d=\"M10.1395 6.85728H4.13946C3.6848 6.85728 3.24876 7.0379 2.92727 7.35939C2.60578 7.68088 2.42517 8.11691 2.42517 8.57157V20.5716C2.42517 21.0262 2.60578 21.4623 2.92727 21.7838C3.24876 22.1052 3.6848 22.2859 4.13946 22.2859H16.1395C16.5941 22.2859 17.0301 22.1052 17.3516 21.7838C17.6731 21.4623 17.8537 21.0262 17.8537 20.5716V14.5716M16.568 5.57157C16.909 5.23058 17.3715 5.03901 17.8537 5.03901C18.336 5.03901 18.7985 5.23058 19.1395 5.57157C19.4805 5.91256 19.672 6.37505 19.672 6.85728C19.672 7.33952 19.4805 7.80201 19.1395 8.143L10.9966 16.2859L7.56803 17.143L8.42517 13.7144L16.568 5.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n </svg>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\"\r\n height=\"22\"\r\n viewBox=\"0 0 21 22\"\r\n fill=\"none\"\r\n *ngIf=\"!getSubmit(plano)\"\r\n >\r\n <g clip-path=\"url(#clip0_844_18318)\">\r\n <path\r\n d=\"M9.85686 4.14249H3.85686C3.40221 4.14249 2.96617 4.32311 2.64468 4.6446C2.32319 4.96609 2.14258 5.40212 2.14258 5.85678V17.8568C2.14258 18.3114 2.32319 18.7475 2.64468 19.069C2.96617 19.3905 3.40221 19.5711 3.85686 19.5711H15.8569C16.3115 19.5711 16.7476 19.3905 17.069 19.069C17.3905 18.7475 17.5712 18.3114 17.5712 17.8568V11.8568M16.2854 2.85678C16.6264 2.51579 17.0889 2.32422 17.5712 2.32422C18.0534 2.32422 18.5159 2.51579 18.8569 2.85678C19.1979 3.19777 19.3894 3.66026 19.3894 4.14249C19.3894 4.62473 19.1979 5.08722 18.8569 5.42821L10.714 13.5711L7.28544 14.4282L8.14258 10.9996L16.2854 2.85678Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_18318\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.427734 0.713867)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Manage Planogram grid view -->\r\n <!-- <ng-template #gridView>\r\n <section id=\"grid-view\">\r\n <div class=\"row gx-6 gy-4\">\r\n <div class=\"col-md-4\" *ngFor=\"let fixture of fixtureTemplatesList\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"card-action dropdown\">\r\n <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <i class=\"bi bi-three-dots-vertical\"></i>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{ fixture.name }}</h3>\r\n <div class=\"badge\" [ngClass]=\"fixture.status\">{{ fixture.status | titlecase }}</div>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <div *ngFor=\"let subBrand of fixture.subBrand; let i = index\">\r\n <span *ngIf=\"i != 0\" class=\"me-2 card-tagline\">•</span>\r\n <div class=\"badge\">{{ subBrand }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template> -->\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n *ngIf=\"!isPageLoading && planogramsList.length !== 0\"\r\n >\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.card-stat-shimmer{width:56px;height:24px;margin:3px 0;border-radius:6px;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%;animation:shimmer 3s infinite}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.reviewPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009BF3);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"] }]
|
|
30229
30249
|
}], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i2$1.PageInfoService }] });
|
|
30230
30250
|
|
|
30231
30251
|
class ManagePlanoComponent {
|
|
@@ -38172,11 +38192,11 @@ class ToolPageHeaderComponent {
|
|
|
38172
38192
|
description = "";
|
|
38173
38193
|
backLink = "/manage/planogram/plano-tools";
|
|
38174
38194
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
38175
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: { title: "title", description: "description", backLink: "backLink" }, ngImport: i0, template: "<div class=\"tool-page-header d-flex align-items-start gap-3 mb-3\">\
|
|
38195
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: { title: "title", description: "description", backLink: "backLink" }, ngImport: i0, template: "<div class=\"tool-page-header d-flex align-items-start gap-3 mb-3\">\n <a\n class=\"back-btn\"\n [routerLink]=\"backLink\"\n aria-label=\"Back to Plano Tools\"\n title=\"Back to Plano Tools\"\n >\n <i class=\"bi bi-arrow-left\"></i>\n </a>\n <div class=\"flex-grow-1\">\n <h4 class=\"title mb-1\">{{ title }}</h4>\n <p *ngIf=\"description\" class=\"text-muted small mb-0\">{{ description }}</p>\n </div>\n</div>\n", styles: [".tool-page-header{padding-bottom:.75rem;border-bottom:1px solid #e5e7eb}.tool-page-header .back-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;color:#475569;background:#f1f5f9;text-decoration:none;flex-shrink:0;transition:background .15s,color .15s}.tool-page-header .back-btn:hover{background:#e2e8f0;color:#0f172a}.tool-page-header .back-btn i{font-size:1rem}.tool-page-header .title{font-weight:600;margin:0;color:#0f172a}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
38176
38196
|
}
|
|
38177
38197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolPageHeaderComponent, decorators: [{
|
|
38178
38198
|
type: Component,
|
|
38179
|
-
args: [{ selector: "lib-tool-page-header", template: "<div class=\"tool-page-header d-flex align-items-start gap-3 mb-3\">\
|
|
38199
|
+
args: [{ selector: "lib-tool-page-header", template: "<div class=\"tool-page-header d-flex align-items-start gap-3 mb-3\">\n <a\n class=\"back-btn\"\n [routerLink]=\"backLink\"\n aria-label=\"Back to Plano Tools\"\n title=\"Back to Plano Tools\"\n >\n <i class=\"bi bi-arrow-left\"></i>\n </a>\n <div class=\"flex-grow-1\">\n <h4 class=\"title mb-1\">{{ title }}</h4>\n <p *ngIf=\"description\" class=\"text-muted small mb-0\">{{ description }}</p>\n </div>\n</div>\n", styles: [".tool-page-header{padding-bottom:.75rem;border-bottom:1px solid #e5e7eb}.tool-page-header .back-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;color:#475569;background:#f1f5f9;text-decoration:none;flex-shrink:0;transition:background .15s,color .15s}.tool-page-header .back-btn:hover{background:#e2e8f0;color:#0f172a}.tool-page-header .back-btn i{font-size:1rem}.tool-page-header .title{font-weight:600;margin:0;color:#0f172a}\n"] }]
|
|
38180
38200
|
}], propDecorators: { title: [{
|
|
38181
38201
|
type: Input
|
|
38182
38202
|
}], description: [{
|
|
@@ -40096,11 +40116,11 @@ class ToolsParentComponent {
|
|
|
40096
40116
|
this.destroy$.complete();
|
|
40097
40117
|
}
|
|
40098
40118
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolsParentComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.Router }, { token: i2$1.GlobalStateService }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
40099
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolsParentComponent, selector: "lib-tools-parent", ngImport: i0, template: "<div class=\"plano-tools-hub\">\
|
|
40119
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolsParentComponent, selector: "lib-tools-parent", ngImport: i0, template: "<div class=\"plano-tools-hub\">\n <div class=\"hub-header mb-4\">\n <h4 class=\"mb-1\">Plano Tools</h4>\n <p class=\"text-muted small mb-0\">\n Utilities for managing planograms, layouts, exports and templates.\n </p>\n </div>\n\n <div class=\"tool-section mb-4\">\n <h6 class=\"section-title\">Export & Inspect</h6>\n <div class=\"card-grid\">\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/migrate\">\n <div class=\"icon\"><i class=\"bi bi-images\"></i></div>\n <div class=\"title\">Download Layout Images</div>\n <div class=\"desc\">Export layout images store by store.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-render\">\n <div class=\"icon\"><i class=\"bi bi-bounding-box\"></i></div>\n <div class=\"title\">Check CAD Output</div>\n <div class=\"desc\">Paste CAD data and preview the parsed layout.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-files\">\n <div class=\"icon\"><i class=\"bi bi-folder2-open\"></i></div>\n <div class=\"title\">CAD Files</div>\n <div class=\"desc\">List uploaded CAD & Kissflow files for a store.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/data-export\">\n <div class=\"icon\"><i class=\"bi bi-database-down\"></i></div>\n <div class=\"title\">Data Export</div>\n <div class=\"desc\">Query planogram fixtures and export as Excel.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/store-exports\">\n <div class=\"icon\"><i class=\"bi bi-file-earmark-spreadsheet\"></i></div>\n <div class=\"title\">MBQ & Order</div>\n <div class=\"desc\">Generate per-store fixture export bundles.</div>\n </a>\n </div>\n </div>\n\n <div class=\"tool-section mb-4\">\n <h6 class=\"section-title\">Edit & Modify</h6>\n <div class=\"card-grid\">\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/allow-edit\">\n <div class=\"icon\"><i class=\"bi bi-pencil-square\"></i></div>\n <div class=\"title\">Allow Edit</div>\n <div class=\"desc\">Re-enable editing on a published task without losing responses.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/modify-fixture-numbers\">\n <div class=\"icon\"><i class=\"bi bi-input-cursor-text\"></i></div>\n <div class=\"title\">Modify Fixture Numbers</div>\n <div class=\"desc\">Renumber fixtures in a planogram.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/layout-touchup\">\n <div class=\"icon\"><i class=\"bi bi-arrows-move\"></i></div>\n <div class=\"title\">Layout Touchup</div>\n <div class=\"desc\">Reposition or resize layout elements without invalidating responses.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/swap-template\">\n <div class=\"icon\"><i class=\"bi bi-arrow-left-right\"></i></div>\n <div class=\"title\">Template Swap</div>\n <div class=\"desc\">Replace one fixture template with another.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/move-bucket\">\n <div class=\"icon\"><i class=\"bi bi-arrow-down-up\"></i></div>\n <div class=\"title\">Move Store Bucket</div>\n <div class=\"desc\">Move a floor between Onboarding and ManagePlano.</div>\n </a>\n </div>\n </div>\n\n <div class=\"tool-section mb-4\">\n <h6 class=\"section-title text-danger\">Destructive</h6>\n <div class=\"card-grid\">\n <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-task\">\n <div class=\"icon\"><i class=\"bi bi-trash\"></i></div>\n <div class=\"title\">Delete Task</div>\n <div class=\"desc\">Remove a task and its responses.</div>\n </a>\n <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-floor\">\n <div class=\"icon\"><i class=\"bi bi-trash3\"></i></div>\n <div class=\"title\">Delete Floor</div>\n <div class=\"desc\">Remove a floor and all rows referencing it.</div>\n </a>\n </div>\n </div>\n\n <div class=\"tool-section\">\n <h6 class=\"section-title\">Create</h6>\n <div class=\"card-grid\">\n <button type=\"button\" class=\"tool-card tool-card-primary\" (click)=\"onClickCreateFixtureTemplate()\">\n <div class=\"icon\"><i class=\"bi bi-plus-lg text-white\" ></i></div>\n <div class=\"title\">Create Template</div>\n <div class=\"desc\">Start a new fixture template from scratch.</div>\n </button>\n </div>\n </div>\n</div>\n", styles: [".plano-tools-hub{padding:.25rem}.hub-header h4{font-weight:600;color:#0f172a}.section-title{font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;margin-bottom:.75rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.tool-card{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1rem 1.1rem;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}.tool-card:hover{border-color:#94a3b8;box-shadow:0 4px 12px #0f172a0f;transform:translateY(-1px)}.tool-card .icon{width:36px;height:36px;border-radius:8px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.6rem}.tool-card .title{font-weight:600;color:#0f172a;margin-bottom:.25rem}.tool-card .desc{font-size:.825rem;color:#64748b;line-height:1.35}.tool-card.tool-card-danger .icon{background:#fef2f2;color:#dc2626}.tool-card.tool-card-danger:hover{border-color:#fca5a5}.tool-card.tool-card-primary{border-color:#16a34a;background:#f0fdf4}.tool-card.tool-card-primary .icon{background:#16a34a;color:#fff;font-size:1.5rem;line-height:1;font-weight:700}.tool-card.tool-card-primary .title{color:#14532d}.tool-card.tool-card-primary:hover{border-color:#15803d;box-shadow:0 4px 14px #16a34a2e}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
|
|
40100
40120
|
}
|
|
40101
40121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolsParentComponent, decorators: [{
|
|
40102
40122
|
type: Component,
|
|
40103
|
-
args: [{ selector: "lib-tools-parent", template: "<div class=\"plano-tools-hub\">\
|
|
40123
|
+
args: [{ selector: "lib-tools-parent", template: "<div class=\"plano-tools-hub\">\n <div class=\"hub-header mb-4\">\n <h4 class=\"mb-1\">Plano Tools</h4>\n <p class=\"text-muted small mb-0\">\n Utilities for managing planograms, layouts, exports and templates.\n </p>\n </div>\n\n <div class=\"tool-section mb-4\">\n <h6 class=\"section-title\">Export & Inspect</h6>\n <div class=\"card-grid\">\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/migrate\">\n <div class=\"icon\"><i class=\"bi bi-images\"></i></div>\n <div class=\"title\">Download Layout Images</div>\n <div class=\"desc\">Export layout images store by store.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-render\">\n <div class=\"icon\"><i class=\"bi bi-bounding-box\"></i></div>\n <div class=\"title\">Check CAD Output</div>\n <div class=\"desc\">Paste CAD data and preview the parsed layout.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-files\">\n <div class=\"icon\"><i class=\"bi bi-folder2-open\"></i></div>\n <div class=\"title\">CAD Files</div>\n <div class=\"desc\">List uploaded CAD & Kissflow files for a store.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/data-export\">\n <div class=\"icon\"><i class=\"bi bi-database-down\"></i></div>\n <div class=\"title\">Data Export</div>\n <div class=\"desc\">Query planogram fixtures and export as Excel.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/store-exports\">\n <div class=\"icon\"><i class=\"bi bi-file-earmark-spreadsheet\"></i></div>\n <div class=\"title\">MBQ & Order</div>\n <div class=\"desc\">Generate per-store fixture export bundles.</div>\n </a>\n </div>\n </div>\n\n <div class=\"tool-section mb-4\">\n <h6 class=\"section-title\">Edit & Modify</h6>\n <div class=\"card-grid\">\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/allow-edit\">\n <div class=\"icon\"><i class=\"bi bi-pencil-square\"></i></div>\n <div class=\"title\">Allow Edit</div>\n <div class=\"desc\">Re-enable editing on a published task without losing responses.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/modify-fixture-numbers\">\n <div class=\"icon\"><i class=\"bi bi-input-cursor-text\"></i></div>\n <div class=\"title\">Modify Fixture Numbers</div>\n <div class=\"desc\">Renumber fixtures in a planogram.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/layout-touchup\">\n <div class=\"icon\"><i class=\"bi bi-arrows-move\"></i></div>\n <div class=\"title\">Layout Touchup</div>\n <div class=\"desc\">Reposition or resize layout elements without invalidating responses.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/swap-template\">\n <div class=\"icon\"><i class=\"bi bi-arrow-left-right\"></i></div>\n <div class=\"title\">Template Swap</div>\n <div class=\"desc\">Replace one fixture template with another.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/move-bucket\">\n <div class=\"icon\"><i class=\"bi bi-arrow-down-up\"></i></div>\n <div class=\"title\">Move Store Bucket</div>\n <div class=\"desc\">Move a floor between Onboarding and ManagePlano.</div>\n </a>\n </div>\n </div>\n\n <div class=\"tool-section mb-4\">\n <h6 class=\"section-title text-danger\">Destructive</h6>\n <div class=\"card-grid\">\n <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-task\">\n <div class=\"icon\"><i class=\"bi bi-trash\"></i></div>\n <div class=\"title\">Delete Task</div>\n <div class=\"desc\">Remove a task and its responses.</div>\n </a>\n <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-floor\">\n <div class=\"icon\"><i class=\"bi bi-trash3\"></i></div>\n <div class=\"title\">Delete Floor</div>\n <div class=\"desc\">Remove a floor and all rows referencing it.</div>\n </a>\n </div>\n </div>\n\n <div class=\"tool-section\">\n <h6 class=\"section-title\">Create</h6>\n <div class=\"card-grid\">\n <button type=\"button\" class=\"tool-card tool-card-primary\" (click)=\"onClickCreateFixtureTemplate()\">\n <div class=\"icon\"><i class=\"bi bi-plus-lg text-white\" ></i></div>\n <div class=\"title\">Create Template</div>\n <div class=\"desc\">Start a new fixture template from scratch.</div>\n </button>\n </div>\n </div>\n</div>\n", styles: [".plano-tools-hub{padding:.25rem}.hub-header h4{font-weight:600;color:#0f172a}.section-title{font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;margin-bottom:.75rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.tool-card{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1rem 1.1rem;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}.tool-card:hover{border-color:#94a3b8;box-shadow:0 4px 12px #0f172a0f;transform:translateY(-1px)}.tool-card .icon{width:36px;height:36px;border-radius:8px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.6rem}.tool-card .title{font-weight:600;color:#0f172a;margin-bottom:.25rem}.tool-card .desc{font-size:.825rem;color:#64748b;line-height:1.35}.tool-card.tool-card-danger .icon{background:#fef2f2;color:#dc2626}.tool-card.tool-card-danger:hover{border-color:#fca5a5}.tool-card.tool-card-primary{border-color:#16a34a;background:#f0fdf4}.tool-card.tool-card-primary .icon{background:#16a34a;color:#fff;font-size:1.5rem;line-height:1;font-weight:700}.tool-card.tool-card-primary .title{color:#14532d}.tool-card.tool-card-primary:hover{border-color:#15803d;box-shadow:0 4px 14px #16a34a2e}\n"] }]
|
|
40104
40124
|
}], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: i2$1.GlobalStateService }, { type: i2$1.PageInfoService }] });
|
|
40105
40125
|
|
|
40106
40126
|
class MisplacedProductFixtureComponent {
|
|
@@ -44283,7 +44303,10 @@ class PlanoComparisonComponent {
|
|
|
44283
44303
|
fill: "transparent",
|
|
44284
44304
|
});
|
|
44285
44305
|
const topText = new fabric.Textbox(`Fixture ${fixtureData.associatedElementFixtureNumber
|
|
44286
|
-
? fixtureData.associatedElementFixtureNumber
|
|
44306
|
+
? fixtureData.associatedElementFixtureNumber +
|
|
44307
|
+
(fixtureData?.fixtureNumber
|
|
44308
|
+
? " - FX-" + fixtureData.fixtureNumber
|
|
44309
|
+
: "")
|
|
44287
44310
|
: "new"}`, {
|
|
44288
44311
|
left: topX + topWidth / 2,
|
|
44289
44312
|
top: topY + innerBoxHeight / 2,
|
|
@@ -59277,11 +59300,11 @@ class PlanoOnboardTableComponent {
|
|
|
59277
59300
|
this.planoSub?.unsubscribe();
|
|
59278
59301
|
}
|
|
59279
59302
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoOnboardTableComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
59280
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PlanoOnboardTableComponent, selector: "lib-plano-onboard-table", viewQueries: [{ propertyName: "planoFilterRef", first: true, predicate: ["planoFilterRef"], descendants: true }], ngImport: i0, template: "<div class=\"row mx-0 my-5 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <h3>{{ cardInfo?.allStores ?? 0 }}</h3>\r\n <p>All stores</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'allocationPending' }\"\r\n (click)=\"filterTable('allocationPending')\">\r\n <h3>{{ cardInfo?.allocationPendingStores ?? 0 }}</h3>\r\n <p>Allocation pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'draft' }\" (click)=\"filterTable('draft')\">\r\n <h3>{{ cardInfo?.draftStores ?? 0 }}</h3>\r\n <p>Draft</p>\r\n </div>\r\n</div>\r\n\r\n<div class=\"content-wrapper\">\r\n <div [class.restrict-interaction]=\"isButtonLoading\">\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>Onboard stores</h4>\r\n <span>{{ totalItems }} - Total stores</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div style=\"position: relative\">\r\n <input type=\"text\" [(ngModel)]=\"searchTerm\" (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\" class=\"form-control\" name=\"search\" autocomplete=\"off\"\r\n placeholder=\"Search\" />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\"\r\n class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n @if(selectedFilterTab === 'all'){\r\n <plano-filter #planoFilterRef [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\"\r\n [config]=\"{ 'Merchandise compliance': false, 'Store category': false }\"></plano-filter>\r\n }\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n\r\n <svg *ngIf=\"!isButtonLoading\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.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\"></path>\r\n </svg>\r\n\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n\r\n <span class=\"ms-2\"> Export</span>\r\n\r\n </button>\r\n\r\n <button type=\"button\" (click)=\"onClickCreatePlanogram()\"\r\n class=\"btn btn-primary d-inline-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 <div class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for onboard planogram table</div>\r\n </div>\r\n\r\n <!-- Onboard Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Plano Name\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n </th>\r\n <th>\r\n City\r\n </th>\r\n <th>\r\n <span class=\"cursor-pointer d-flex align-items-center\">\r\n Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\" class=\"ms-2\">\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Layout\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n #Fixtures\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <ng-template #tooltip>\r\n <div class=\"w-100\">\r\n <h6>Total store capacity</h6>\r\n <span> Combining product capacity of all fixtures </span>\r\n </div>\r\n </ng-template>\r\n <span (click)=\"onSortTable('fixtureCapacity')\" class=\"cursor-pointer d-flex align-items-center\">\r\n Capacity\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'fixtureCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n [ngbTooltip]=\"tooltip\" class=\"ms-2\">\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n Status\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"redirectStore(plano.storeId)\" class=\"cursor-pointer text-decoration-underline\">\r\n {{ plano.storeName }}</a>\r\n </div>\r\n </td>\r\n <td>\r\n <a [routerLink]=\"['/manage/planogram/onboard-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: getPriorityFloor(plano)?.id }\"\r\n class=\"text-decoration-underline\">\r\n {{ plano.layoutName }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n [25, 50].includes(getProgressValue(plano))\r\n ? 'bg-warning'\r\n : 'bg-success'\r\n \" role=\"progressbar\"\r\n [style]=\" (plano) ? 'width: ' + getProgressValue(plano) + '%' : 'width:25%'\"\r\n [attr.aria-valuenow]=\"getProgressValue(plano)\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue(plano) }}%</div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n @if(plano?.layoutCount === 1){\r\n 1\r\n }@else{\r\n {{getPriorityFloor(plano)?.floorNumber??0}}/{{plano?.layoutCount??0}}\r\n }\r\n </span>\r\n\r\n @if(getStatusBadge(plano) === 'allocationPending'){\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n\r\n }@else{\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#F2F4F7\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n }\r\n\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCount ?? 0 }}\r\n @if(getStatusBadge(plano) === 'allocationPending'){\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#FFFAEB\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#B54708\" />\r\n </svg>\r\n\r\n\r\n }@else{\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#F2F4F7\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n }\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCapacity ?? 0 }}\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td>\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Pagination -->\r\n <lib-pagination [itemsPerPage]=\"limit\" [currentPage]=\"offset\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.allocationPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.badge.draft{background:#f2f4f7;color:#344054}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009bf3);text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { 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: "component", type: PlanoFilterComponent, selector: "plano-filter", inputs: ["clientId", "data", "config"], outputs: ["applyFilters", "resetFilters", "filterChanged"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
59303
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PlanoOnboardTableComponent, selector: "lib-plano-onboard-table", viewQueries: [{ propertyName: "planoFilterRef", first: true, predicate: ["planoFilterRef"], descendants: true }], ngImport: i0, template: "<div class=\"row mx-0 my-5 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardInfo?.allStores ?? 0 }}</h3>\r\n <p>All stores</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'allocationPending' }\"\r\n (click)=\"filterTable('allocationPending')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardInfo?.allocationPendingStores ?? 0 }}</h3>\r\n <p>Allocation pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'draft' }\" (click)=\"filterTable('draft')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardInfo?.draftStores ?? 0 }}</h3>\r\n <p>Draft</p>\r\n </div>\r\n</div>\r\n\r\n<div class=\"content-wrapper\">\r\n <div [class.restrict-interaction]=\"isButtonLoading\">\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>Onboard stores</h4>\r\n <span>{{ totalItems }} - Total stores</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div style=\"position: relative\">\r\n <input type=\"text\" [(ngModel)]=\"searchTerm\" (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\" class=\"form-control\" name=\"search\" autocomplete=\"off\"\r\n placeholder=\"Search\" />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\"\r\n class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n @if(selectedFilterTab === 'all'){\r\n <plano-filter #planoFilterRef [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\"\r\n [config]=\"{ 'Merchandise compliance': false, 'Store category': false }\"></plano-filter>\r\n }\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n\r\n <svg *ngIf=\"!isButtonLoading\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.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\"></path>\r\n </svg>\r\n\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n\r\n <span class=\"ms-2\"> Export</span>\r\n\r\n </button>\r\n\r\n <button type=\"button\" (click)=\"onClickCreatePlanogram()\"\r\n class=\"btn btn-primary d-inline-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 <div class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for onboard planogram table</div>\r\n </div>\r\n\r\n <!-- Onboard Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Plano Name\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n </th>\r\n <th>\r\n City\r\n </th>\r\n <th>\r\n <span class=\"cursor-pointer d-flex align-items-center\">\r\n Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\" class=\"ms-2\">\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Layout\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n #Fixtures\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <ng-template #tooltip>\r\n <div class=\"w-100\">\r\n <h6>Total store capacity</h6>\r\n <span> Combining product capacity of all fixtures </span>\r\n </div>\r\n </ng-template>\r\n <span (click)=\"onSortTable('fixtureCapacity')\" class=\"cursor-pointer d-flex align-items-center\">\r\n Capacity\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'fixtureCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n [ngbTooltip]=\"tooltip\" class=\"ms-2\">\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n Status\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"redirectStore(plano.storeId)\" class=\"cursor-pointer text-decoration-underline\">\r\n {{ plano.storeName }}</a>\r\n </div>\r\n </td>\r\n <td>\r\n <a [routerLink]=\"['/manage/planogram/onboard-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: getPriorityFloor(plano)?.id }\"\r\n class=\"text-decoration-underline\">\r\n {{ plano.layoutName }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n [25, 50].includes(getProgressValue(plano))\r\n ? 'bg-warning'\r\n : 'bg-success'\r\n \" role=\"progressbar\"\r\n [style]=\" (plano) ? 'width: ' + getProgressValue(plano) + '%' : 'width:25%'\"\r\n [attr.aria-valuenow]=\"getProgressValue(plano)\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue(plano) }}%</div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n @if(plano?.layoutCount === 1){\r\n 1\r\n }@else{\r\n {{getPriorityFloor(plano)?.floorNumber??0}}/{{plano?.layoutCount??0}}\r\n }\r\n </span>\r\n\r\n @if(getStatusBadge(plano) === 'allocationPending'){\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n\r\n }@else{\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#F2F4F7\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n }\r\n\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCount ?? 0 }}\r\n @if(getStatusBadge(plano) === 'allocationPending'){\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#FFFAEB\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#B54708\" />\r\n </svg>\r\n\r\n\r\n }@else{\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#F2F4F7\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n }\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCapacity ?? 0 }}\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td>\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Pagination -->\r\n <lib-pagination [itemsPerPage]=\"limit\" [currentPage]=\"offset\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.card-stat-shimmer{width:56px;height:24px;margin:3px 0;border-radius:6px;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%;animation:shimmer 3s infinite}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.allocationPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.badge.draft{background:#f2f4f7;color:#344054}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009bf3);text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { 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: "component", type: PlanoFilterComponent, selector: "plano-filter", inputs: ["clientId", "data", "config"], outputs: ["applyFilters", "resetFilters", "filterChanged"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
59281
59304
|
}
|
|
59282
59305
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoOnboardTableComponent, decorators: [{
|
|
59283
59306
|
type: Component,
|
|
59284
|
-
args: [{ selector: "lib-plano-onboard-table", template: "<div class=\"row mx-0 my-5 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <h3>{{ cardInfo?.allStores ?? 0 }}</h3>\r\n <p>All stores</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'allocationPending' }\"\r\n (click)=\"filterTable('allocationPending')\">\r\n <h3>{{ cardInfo?.allocationPendingStores ?? 0 }}</h3>\r\n <p>Allocation pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'draft' }\" (click)=\"filterTable('draft')\">\r\n <h3>{{ cardInfo?.draftStores ?? 0 }}</h3>\r\n <p>Draft</p>\r\n </div>\r\n</div>\r\n\r\n<div class=\"content-wrapper\">\r\n <div [class.restrict-interaction]=\"isButtonLoading\">\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>Onboard stores</h4>\r\n <span>{{ totalItems }} - Total stores</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div style=\"position: relative\">\r\n <input type=\"text\" [(ngModel)]=\"searchTerm\" (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\" class=\"form-control\" name=\"search\" autocomplete=\"off\"\r\n placeholder=\"Search\" />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\"\r\n class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n @if(selectedFilterTab === 'all'){\r\n <plano-filter #planoFilterRef [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\"\r\n [config]=\"{ 'Merchandise compliance': false, 'Store category': false }\"></plano-filter>\r\n }\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n\r\n <svg *ngIf=\"!isButtonLoading\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.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\"></path>\r\n </svg>\r\n\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n\r\n <span class=\"ms-2\"> Export</span>\r\n\r\n </button>\r\n\r\n <button type=\"button\" (click)=\"onClickCreatePlanogram()\"\r\n class=\"btn btn-primary d-inline-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 <div class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for onboard planogram table</div>\r\n </div>\r\n\r\n <!-- Onboard Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Plano Name\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n </th>\r\n <th>\r\n City\r\n </th>\r\n <th>\r\n <span class=\"cursor-pointer d-flex align-items-center\">\r\n Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\" class=\"ms-2\">\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Layout\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n #Fixtures\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <ng-template #tooltip>\r\n <div class=\"w-100\">\r\n <h6>Total store capacity</h6>\r\n <span> Combining product capacity of all fixtures </span>\r\n </div>\r\n </ng-template>\r\n <span (click)=\"onSortTable('fixtureCapacity')\" class=\"cursor-pointer d-flex align-items-center\">\r\n Capacity\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'fixtureCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n [ngbTooltip]=\"tooltip\" class=\"ms-2\">\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n Status\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"redirectStore(plano.storeId)\" class=\"cursor-pointer text-decoration-underline\">\r\n {{ plano.storeName }}</a>\r\n </div>\r\n </td>\r\n <td>\r\n <a [routerLink]=\"['/manage/planogram/onboard-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: getPriorityFloor(plano)?.id }\"\r\n class=\"text-decoration-underline\">\r\n {{ plano.layoutName }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n [25, 50].includes(getProgressValue(plano))\r\n ? 'bg-warning'\r\n : 'bg-success'\r\n \" role=\"progressbar\"\r\n [style]=\" (plano) ? 'width: ' + getProgressValue(plano) + '%' : 'width:25%'\"\r\n [attr.aria-valuenow]=\"getProgressValue(plano)\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue(plano) }}%</div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n @if(plano?.layoutCount === 1){\r\n 1\r\n }@else{\r\n {{getPriorityFloor(plano)?.floorNumber??0}}/{{plano?.layoutCount??0}}\r\n }\r\n </span>\r\n\r\n @if(getStatusBadge(plano) === 'allocationPending'){\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n\r\n }@else{\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#F2F4F7\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n }\r\n\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCount ?? 0 }}\r\n @if(getStatusBadge(plano) === 'allocationPending'){\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#FFFAEB\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#B54708\" />\r\n </svg>\r\n\r\n\r\n }@else{\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#F2F4F7\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n }\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCapacity ?? 0 }}\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td>\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Pagination -->\r\n <lib-pagination [itemsPerPage]=\"limit\" [currentPage]=\"offset\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.allocationPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.badge.draft{background:#f2f4f7;color:#344054}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009bf3);text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"] }]
|
|
59307
|
+
args: [{ selector: "lib-plano-onboard-table", template: "<div class=\"row mx-0 my-5 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardInfo?.allStores ?? 0 }}</h3>\r\n <p>All stores</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'allocationPending' }\"\r\n (click)=\"filterTable('allocationPending')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardInfo?.allocationPendingStores ?? 0 }}</h3>\r\n <p>Allocation pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'draft' }\" (click)=\"filterTable('draft')\">\r\n <div class=\"card-stat-shimmer\" *ngIf=\"isPageLoading\"></div>\r\n <h3 *ngIf=\"!isPageLoading\">{{ cardInfo?.draftStores ?? 0 }}</h3>\r\n <p>Draft</p>\r\n </div>\r\n</div>\r\n\r\n<div class=\"content-wrapper\">\r\n <div [class.restrict-interaction]=\"isButtonLoading\">\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>Onboard stores</h4>\r\n <span>{{ totalItems }} - Total stores</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div style=\"position: relative\">\r\n <input type=\"text\" [(ngModel)]=\"searchTerm\" (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\" class=\"form-control\" name=\"search\" autocomplete=\"off\"\r\n placeholder=\"Search\" />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\"\r\n class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n @if(selectedFilterTab === 'all'){\r\n <plano-filter #planoFilterRef [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\"\r\n [config]=\"{ 'Merchandise compliance': false, 'Store category': false }\"></plano-filter>\r\n }\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n\r\n <svg *ngIf=\"!isButtonLoading\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.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\"></path>\r\n </svg>\r\n\r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n\r\n <span class=\"ms-2\"> Export</span>\r\n\r\n </button>\r\n\r\n <button type=\"button\" (click)=\"onClickCreatePlanogram()\"\r\n class=\"btn btn-primary d-inline-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 <div class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for onboard planogram table</div>\r\n </div>\r\n\r\n <!-- Onboard Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Plano Name\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n </th>\r\n <th>\r\n City\r\n </th>\r\n <th>\r\n <span class=\"cursor-pointer d-flex align-items-center\">\r\n Completion %\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\" class=\"ms-2\">\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Layout\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n #Fixtures\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <ng-template #tooltip>\r\n <div class=\"w-100\">\r\n <h6>Total store capacity</h6>\r\n <span> Combining product capacity of all fixtures </span>\r\n </div>\r\n </ng-template>\r\n <span (click)=\"onSortTable('fixtureCapacity')\" class=\"cursor-pointer d-flex align-items-center\">\r\n Capacity\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'fixtureCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n [ngbTooltip]=\"tooltip\" class=\"ms-2\">\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i class=\"fa ms-1 mt-1\" [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"></i>\r\n </span>\r\n </th>\r\n <th>\r\n Status\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"redirectStore(plano.storeId)\" class=\"cursor-pointer text-decoration-underline\">\r\n {{ plano.storeName }}</a>\r\n </div>\r\n </td>\r\n <td>\r\n <a [routerLink]=\"['/manage/planogram/onboard-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: getPriorityFloor(plano)?.id }\"\r\n class=\"text-decoration-underline\">\r\n {{ plano.layoutName }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div class=\"progress-bar\" [ngClass]=\"\r\n [25, 50].includes(getProgressValue(plano))\r\n ? 'bg-warning'\r\n : 'bg-success'\r\n \" role=\"progressbar\"\r\n [style]=\" (plano) ? 'width: ' + getProgressValue(plano) + '%' : 'width:25%'\"\r\n [attr.aria-valuenow]=\"getProgressValue(plano)\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue(plano) }}%</div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n @if(plano?.layoutCount === 1){\r\n 1\r\n }@else{\r\n {{getPriorityFloor(plano)?.floorNumber??0}}/{{plano?.layoutCount??0}}\r\n }\r\n </span>\r\n\r\n @if(getStatusBadge(plano) === 'allocationPending'){\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n\r\n }@else{\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#F2F4F7\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n }\r\n\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCount ?? 0 }}\r\n @if(getStatusBadge(plano) === 'allocationPending'){\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#FFFAEB\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#B54708\" />\r\n </svg>\r\n\r\n\r\n }@else{\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"14\" height=\"14\" rx=\"7\" fill=\"#F2F4F7\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M9.97284 4.31097L5.79617 8.3418L4.68784 7.15763C4.48367 6.96513 4.16284 6.95347 3.9295 7.1168C3.702 7.28597 3.63784 7.58347 3.77784 7.82263L5.09034 9.95763C5.21867 10.156 5.44034 10.2785 5.69117 10.2785C5.93034 10.2785 6.15784 10.156 6.28617 9.95763C6.49617 9.68347 10.5037 4.90597 10.5037 4.90597C11.0287 4.3693 10.3928 3.8968 9.97284 4.30513V4.31097Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n }\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCapacity ?? 0 }}\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td>\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Pagination -->\r\n <lib-pagination [itemsPerPage]=\"limit\" [currentPage]=\"offset\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.card-stat-shimmer{width:56px;height:24px;margin:3px 0;border-radius:6px;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%;animation:shimmer 3s infinite}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.allocationPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.badge.draft{background:#f2f4f7;color:#344054}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009bf3);text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"] }]
|
|
59285
59308
|
}], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i2$1.PageInfoService }], propDecorators: { planoFilterRef: [{
|
|
59286
59309
|
type: ViewChild,
|
|
59287
59310
|
args: ["planoFilterRef"]
|
|
@@ -67633,11 +67656,11 @@ class DeleteFloorComponent {
|
|
|
67633
67656
|
this.destroy$.complete();
|
|
67634
67657
|
}
|
|
67635
67658
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteFloorComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
67636
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DeleteFloorComponent, selector: "lib-delete-floor", ngImport: i0, template: "<section class=\"delete-floor p-3\">\
|
|
67659
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DeleteFloorComponent, selector: "lib-delete-floor", ngImport: i0, template: "<section class=\"delete-floor p-3\">\n <lib-tool-page-header\n title=\"Delete Floor\"\n description=\"Removes a floor and every row that references it \u2014 fixtures, shelves, task compliance, processed tasks, comments, and revisions. If this is the only floor, the entire planogram is removed. The store entry is never touched.\"\n ></lib-tool-page-header>\n <div class=\"card p-4\" style=\"max-width: 720px;\">\n\n <!-- Store -->\n <div class=\"mb-3\">\n <lib-reactive-select\n label=\"Store\"\n [idField]=\"'storeId'\"\n [nameField]=\"'storeName'\"\n [data]=\"storeOptions\"\n [search]=\"true\"\n [ngModel]=\"selectedStoreId\"\n (ngModelChange)=\"onStoreSelected($event)\">\n </lib-reactive-select>\n <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n </div>\n\n <!-- Floor -->\n <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\n <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\n <div class=\"text-muted small\">Loading floors...</div>\n </ng-container>\n <ng-template #floorPicker>\n <ng-container *ngIf=\"floors.length > 0; else noFloors\">\n <lib-reactive-select\n label=\"Floor\"\n [idField]=\"'_id'\"\n [nameField]=\"'displayName'\"\n [data]=\"floors\"\n [search]=\"true\"\n [ngModel]=\"selectedFloorId\"\n (ngModelChange)=\"onFloorSelected($event)\">\n </lib-reactive-select>\n </ng-container>\n <ng-template #noFloors>\n <div class=\"text-muted small\">No floors found for this store.</div>\n </ng-template>\n </ng-template>\n </div>\n\n <!-- Status + cascade preview -->\n <ng-container *ngIf=\"selectedFloorId\">\n <ng-container *ngIf=\"isLoadingImpact; else impactBlock\">\n <div class=\"text-muted small\">Loading floor details...</div>\n </ng-container>\n <ng-template #impactBlock>\n <ng-container *ngIf=\"impact\">\n <div class=\"mb-3 p-3 rounded info-block\">\n <div class=\"row gx-3 gy-2 small\">\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Floor status</span>\n <span class=\"fw-semibold\">{{ formatStatus(impact.floor.status) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Planogram status</span>\n <span class=\"fw-semibold\">{{ formatStatus(impact.planogram.status) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Plano approved</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.isPlanoApproved) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Verification done</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.verificationStatus) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Merch rollout done</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.merchRolloutStatus) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">VM rollout done</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.vmRolloutStatus) }}</span>\n </div>\n <div class=\"col-12\">\n <span class=\"text-muted d-block\">Total floors in this planogram</span>\n <span class=\"fw-semibold\">{{ impact.totalFloors }}</span>\n </div>\n </div>\n </div>\n\n <div class=\"mb-3 p-3 rounded cascade-block\">\n <div class=\"fw-semibold mb-2\">Will delete</div>\n <ul class=\"small mb-0 ps-3\">\n <li>1 floor (storelayouts)</li>\n <li>{{ impact.cascade.storefixtures }} fixture(s) (storefixtures)</li>\n <li>{{ impact.cascade.fixtureshelves }} shelf row(s) (fixtureshelves)</li>\n <li>{{ impact.cascade.planotaskcompliances }} task compliance row(s) (planotaskcompliances)</li>\n <li>{{ impact.cascade.processedtasks }} processed task(s) (processedtasks)</li>\n <li>{{ impact.cascade.planoglobalcomments }} global comment(s) (planoglobalcomments)</li>\n <li>{{ impact.cascade.planorevisions }} revision(s) (planorevisions)</li>\n </ul>\n <div class=\"text-muted small mt-2\">Total downstream rows: {{ totalCascadeRows }}</div>\n </div>\n\n <div class=\"alert alert-warning small\" *ngIf=\"impact.isLastFloor\">\n <strong>This is the only floor in this planogram.</strong>\n Deleting it will also remove the planogram entry \u2014 the plano will\n disappear completely. The store record itself will NOT be deleted.\n </div>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <!-- Submit -->\n <button class=\"btn btn-danger\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\n {{ isSubmitting ? 'Deleting...' : 'Delete Floor' }}\n </button>\n\n <div class=\"mt-3 alert\" *ngIf=\"message\"\n [class.alert-success]=\"messageType === 'success'\"\n [class.alert-danger]=\"messageType === 'error'\"\n style=\"white-space: pre-line;\">\n {{ message }}\n </div>\n </div>\n</section>\n", styles: [".delete-floor .info-block{background-color:#f9fafb;border:1px solid #e4e7ec}.delete-floor .cascade-block{background-color:#fff7ed;border:1px solid #fed7aa}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: ["title", "description", "backLink"] }] });
|
|
67637
67660
|
}
|
|
67638
67661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteFloorComponent, decorators: [{
|
|
67639
67662
|
type: Component,
|
|
67640
|
-
args: [{ selector: "lib-delete-floor", template: "<section class=\"delete-floor p-3\">\
|
|
67663
|
+
args: [{ selector: "lib-delete-floor", template: "<section class=\"delete-floor p-3\">\n <lib-tool-page-header\n title=\"Delete Floor\"\n description=\"Removes a floor and every row that references it \u2014 fixtures, shelves, task compliance, processed tasks, comments, and revisions. If this is the only floor, the entire planogram is removed. The store entry is never touched.\"\n ></lib-tool-page-header>\n <div class=\"card p-4\" style=\"max-width: 720px;\">\n\n <!-- Store -->\n <div class=\"mb-3\">\n <lib-reactive-select\n label=\"Store\"\n [idField]=\"'storeId'\"\n [nameField]=\"'storeName'\"\n [data]=\"storeOptions\"\n [search]=\"true\"\n [ngModel]=\"selectedStoreId\"\n (ngModelChange)=\"onStoreSelected($event)\">\n </lib-reactive-select>\n <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n </div>\n\n <!-- Floor -->\n <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\n <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\n <div class=\"text-muted small\">Loading floors...</div>\n </ng-container>\n <ng-template #floorPicker>\n <ng-container *ngIf=\"floors.length > 0; else noFloors\">\n <lib-reactive-select\n label=\"Floor\"\n [idField]=\"'_id'\"\n [nameField]=\"'displayName'\"\n [data]=\"floors\"\n [search]=\"true\"\n [ngModel]=\"selectedFloorId\"\n (ngModelChange)=\"onFloorSelected($event)\">\n </lib-reactive-select>\n </ng-container>\n <ng-template #noFloors>\n <div class=\"text-muted small\">No floors found for this store.</div>\n </ng-template>\n </ng-template>\n </div>\n\n <!-- Status + cascade preview -->\n <ng-container *ngIf=\"selectedFloorId\">\n <ng-container *ngIf=\"isLoadingImpact; else impactBlock\">\n <div class=\"text-muted small\">Loading floor details...</div>\n </ng-container>\n <ng-template #impactBlock>\n <ng-container *ngIf=\"impact\">\n <div class=\"mb-3 p-3 rounded info-block\">\n <div class=\"row gx-3 gy-2 small\">\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Floor status</span>\n <span class=\"fw-semibold\">{{ formatStatus(impact.floor.status) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Planogram status</span>\n <span class=\"fw-semibold\">{{ formatStatus(impact.planogram.status) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Plano approved</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.isPlanoApproved) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Verification done</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.verificationStatus) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Merch rollout done</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.merchRolloutStatus) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">VM rollout done</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.vmRolloutStatus) }}</span>\n </div>\n <div class=\"col-12\">\n <span class=\"text-muted d-block\">Total floors in this planogram</span>\n <span class=\"fw-semibold\">{{ impact.totalFloors }}</span>\n </div>\n </div>\n </div>\n\n <div class=\"mb-3 p-3 rounded cascade-block\">\n <div class=\"fw-semibold mb-2\">Will delete</div>\n <ul class=\"small mb-0 ps-3\">\n <li>1 floor (storelayouts)</li>\n <li>{{ impact.cascade.storefixtures }} fixture(s) (storefixtures)</li>\n <li>{{ impact.cascade.fixtureshelves }} shelf row(s) (fixtureshelves)</li>\n <li>{{ impact.cascade.planotaskcompliances }} task compliance row(s) (planotaskcompliances)</li>\n <li>{{ impact.cascade.processedtasks }} processed task(s) (processedtasks)</li>\n <li>{{ impact.cascade.planoglobalcomments }} global comment(s) (planoglobalcomments)</li>\n <li>{{ impact.cascade.planorevisions }} revision(s) (planorevisions)</li>\n </ul>\n <div class=\"text-muted small mt-2\">Total downstream rows: {{ totalCascadeRows }}</div>\n </div>\n\n <div class=\"alert alert-warning small\" *ngIf=\"impact.isLastFloor\">\n <strong>This is the only floor in this planogram.</strong>\n Deleting it will also remove the planogram entry \u2014 the plano will\n disappear completely. The store record itself will NOT be deleted.\n </div>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <!-- Submit -->\n <button class=\"btn btn-danger\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\n {{ isSubmitting ? 'Deleting...' : 'Delete Floor' }}\n </button>\n\n <div class=\"mt-3 alert\" *ngIf=\"message\"\n [class.alert-success]=\"messageType === 'success'\"\n [class.alert-danger]=\"messageType === 'error'\"\n style=\"white-space: pre-line;\">\n {{ message }}\n </div>\n </div>\n</section>\n", styles: [".delete-floor .info-block{background-color:#f9fafb;border:1px solid #e4e7ec}.delete-floor .cascade-block{background-color:#fff7ed;border:1px solid #fed7aa}\n"] }]
|
|
67641
67664
|
}], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i1$1.NgbModal }] });
|
|
67642
67665
|
|
|
67643
67666
|
class UpdateFixtureTypeComponent {
|
|
@@ -69260,11 +69283,11 @@ class LayoutTouchupComponent {
|
|
|
69260
69283
|
});
|
|
69261
69284
|
}
|
|
69262
69285
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutTouchupComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i4.ToastService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
69263
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutTouchupComponent, selector: "lib-layout-touchup", ngImport: i0, template: "<div class=\"touchup-selector\">\
|
|
69286
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutTouchupComponent, selector: "lib-layout-touchup", ngImport: i0, template: "<div class=\"touchup-selector\">\n <lib-tool-page-header\n title=\"Layout Touchup\"\n description=\"Reposition or resize existing walls, fixtures, entrances and other elements, or tweak individual fixture details \u2014 without invalidating any verification responses.\"\n ></lib-tool-page-header>\n\n <div class=\"row g-3\">\n <div class=\"col-md-6\">\n <lib-reactive-select\n label=\"Store\"\n [idField]=\"'id'\"\n [nameField]=\"'label'\"\n [data]=\"storeOptions\"\n [search]=\"true\"\n [ngModel]=\"selectedStore?.id\"\n (ngModelChange)=\"onStoreChange($event)\">\n </lib-reactive-select>\n <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n <div class=\"text-muted small mt-1\" *ngIf=\"!isLoadingStores\">\n Active stores with a planogram only.\n </div>\n </div>\n\n <div class=\"col-md-6\" *ngIf=\"selectedStore\">\n <ng-container *ngIf=\"isLoadingFloor; else floorPicker\">\n <div class=\"text-muted small\">Loading floors...</div>\n </ng-container>\n <ng-template #floorPicker>\n <lib-reactive-select\n label=\"Floor\"\n [idField]=\"'id'\"\n [nameField]=\"'label'\"\n [data]=\"floorOptions\"\n [search]=\"false\"\n [ngModel]=\"selectedFloorId\"\n (ngModelChange)=\"selectedFloorId = $event\">\n </lib-reactive-select>\n </ng-template>\n </div>\n </div>\n\n <div class=\"mt-4 d-flex justify-content-end\">\n <button\n type=\"button\"\n class=\"btn btn-primary\"\n [disabled]=\"!selectedFloorId || isLoadingFloor\"\n (click)=\"openEditor()\">\n Open Editor\n </button>\n </div>\n</div>\n", styles: [".touchup-selector{max-width:960px}.touchup-selector h4{font-size:18px;font-weight:600;color:#101828}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: ["title", "description", "backLink"] }] });
|
|
69264
69287
|
}
|
|
69265
69288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutTouchupComponent, decorators: [{
|
|
69266
69289
|
type: Component,
|
|
69267
|
-
args: [{ selector: "lib-layout-touchup", template: "<div class=\"touchup-selector\">\
|
|
69290
|
+
args: [{ selector: "lib-layout-touchup", template: "<div class=\"touchup-selector\">\n <lib-tool-page-header\n title=\"Layout Touchup\"\n description=\"Reposition or resize existing walls, fixtures, entrances and other elements, or tweak individual fixture details \u2014 without invalidating any verification responses.\"\n ></lib-tool-page-header>\n\n <div class=\"row g-3\">\n <div class=\"col-md-6\">\n <lib-reactive-select\n label=\"Store\"\n [idField]=\"'id'\"\n [nameField]=\"'label'\"\n [data]=\"storeOptions\"\n [search]=\"true\"\n [ngModel]=\"selectedStore?.id\"\n (ngModelChange)=\"onStoreChange($event)\">\n </lib-reactive-select>\n <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n <div class=\"text-muted small mt-1\" *ngIf=\"!isLoadingStores\">\n Active stores with a planogram only.\n </div>\n </div>\n\n <div class=\"col-md-6\" *ngIf=\"selectedStore\">\n <ng-container *ngIf=\"isLoadingFloor; else floorPicker\">\n <div class=\"text-muted small\">Loading floors...</div>\n </ng-container>\n <ng-template #floorPicker>\n <lib-reactive-select\n label=\"Floor\"\n [idField]=\"'id'\"\n [nameField]=\"'label'\"\n [data]=\"floorOptions\"\n [search]=\"false\"\n [ngModel]=\"selectedFloorId\"\n (ngModelChange)=\"selectedFloorId = $event\">\n </lib-reactive-select>\n </ng-template>\n </div>\n </div>\n\n <div class=\"mt-4 d-flex justify-content-end\">\n <button\n type=\"button\"\n class=\"btn btn-primary\"\n [disabled]=\"!selectedFloorId || isLoadingFloor\"\n (click)=\"openEditor()\">\n Open Editor\n </button>\n </div>\n</div>\n", styles: [".touchup-selector{max-width:960px}.touchup-selector h4{font-size:18px;font-weight:600;color:#101828}\n"] }]
|
|
69268
69291
|
}], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i4.ToastService }, { type: i2.Router }] });
|
|
69269
69292
|
|
|
69270
69293
|
/**
|