tango-app-ui-store-builder 1.2.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/esm2022/lib/components/create-layout/create-layout.component.mjs +1 -1
  2. package/esm2022/lib/components/create-store/create-store.component.mjs +1 -1
  3. package/esm2022/lib/components/custom-select/custom-select.component.mjs +6 -3
  4. package/esm2022/lib/components/fixture-template/template-products/template-products.component.mjs +1 -1
  5. package/esm2022/lib/components/layout-summary/layout-summary.component.mjs +1 -1
  6. package/esm2022/lib/components/manage-store-plano/manage-store-plano.component.mjs +38 -7
  7. package/esm2022/lib/components/manage-store-plano/plano-rollout/plano-rollout.component.mjs +1 -1
  8. package/esm2022/lib/components/manage-store-plano/template-products/template-products.component.mjs +2 -2
  9. package/esm2022/lib/components/manage-store-plano/verification-feedback/action-confirm-popup/action-confirm-popup.component.mjs +11 -1
  10. package/esm2022/lib/components/manage-store-plano/verification-feedback/fixture/fixture.component.mjs +1 -1
  11. package/esm2022/lib/components/manage-store-plano/verification-feedback/verification-feedback.component.mjs +2 -2
  12. package/esm2022/lib/components/manage-store-plano/verification-feedback/zone-editable-fixture/zone-editable-fixture.component.mjs +628 -0
  13. package/esm2022/lib/components/manage-store-plano/zone-verification-feedback/zone-verification-feedback.component.mjs +24 -12
  14. package/esm2022/lib/components/multiselect-chip-dropdown/multiselect-chip-dropdown.component.mjs +34 -8
  15. package/esm2022/lib/components/onboard-store-plano/create-planogram/create-planogram.component.mjs +19 -7
  16. package/esm2022/lib/components/onboard-store-plano/onboard-store-plano.component.mjs +2 -2
  17. package/esm2022/lib/components/planogram/plano-details-parent/plano-details-parent.component.mjs +1 -1
  18. package/esm2022/lib/services/store-builder.service.mjs +10 -2
  19. package/esm2022/lib/tango-store-builder.module.mjs +8 -1
  20. package/fesm2022/tango-app-ui-store-builder.mjs +761 -40
  21. package/fesm2022/tango-app-ui-store-builder.mjs.map +1 -1
  22. package/lib/components/custom-select/custom-select.component.d.ts +2 -1
  23. package/lib/components/manage-plano/onboard-table/onboard-table.component.d.ts +1 -1
  24. package/lib/components/manage-plano/rollout-table/rollout-table.component.d.ts +4 -4
  25. package/lib/components/manage-plano/verification-table/verification-table.component.d.ts +5 -5
  26. package/lib/components/manage-store-plano/manage-store-plano.component.d.ts +1 -0
  27. package/lib/components/manage-store-plano/verification-feedback/action-confirm-popup/action-confirm-popup.component.d.ts +1 -1
  28. package/lib/components/manage-store-plano/verification-feedback/zone-editable-fixture/zone-editable-fixture.component.d.ts +89 -0
  29. package/lib/components/manage-store-plano/zone-verification-feedback/zone-verification-feedback.component.d.ts +4 -1
  30. package/lib/components/multiselect-chip-dropdown/multiselect-chip-dropdown.component.d.ts +9 -2
  31. package/lib/components/onboard-store-plano/create-planogram/create-planogram.component.d.ts +1 -0
  32. package/lib/components/onboard-store-plano/onboard-store-plano.component.d.ts +1 -1
  33. package/lib/services/store-builder.service.d.ts +5 -3
  34. package/lib/tango-store-builder.module.d.ts +68 -66
  35. package/package.json +1 -1
package/esm2022/lib/components/planogram/plano-details-parent/plano-details-parent.component.mjs CHANGED
@@ -355,7 +355,7 @@ export class PlanoDetailsParentComponent {
355
355
  this.getStoreFixtures(event._id);
356
356
  }
357
357
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoDetailsParentComponent, deps: [{ token: i1.StoreBuilderService }, { token: i2.GlobalStateService }, { token: i3.ActivatedRoute }, { token: i3.Router }, { token: i4.Location }, { token: i2.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
358
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PlanoDetailsParentComponent, selector: "lib-plano-details-parent", ngImport: i0, template: "<section id=\"plano-details\">\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <div id=\"header\">\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex\">\r\n <div style=\"margin-top:10px;margin-left:5px;margin-right:5px\"\r\n *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\"\r\n [selectedValues]=\"[selectedStoreName]\" [items]=\"storeList\" [multi]=false\r\n searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'_id'\" [nameField]=\"'floorName'\"\r\n [data]=\"planoData.floors\"></lib-reactive-select>\r\n\r\n <div class=\"d-flex gap-2 align-items-center cursor-pointer\"\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\" [queryParams]=\"{\r\n planoId: floorData?.planoId,\r\n floorId: floorData?._id\r\n }\">\r\n <h2 class=\"title\" style=\"color: #008edf;\">\r\n Edit Plano\r\n </h2>\r\n <svg width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8.5 2.76777H2.66667C2.22464 2.76777 1.80072 2.94336 1.48816 3.25592C1.17559 3.56848 1 3.99241 1 4.43443V16.1011C1 16.5431 1.17559 16.9671 1.48816 17.2796C1.80072 17.5922 2.22464 17.7678 2.66667 17.7678H14.3333C14.7754 17.7678 15.1993 17.5922 15.5118 17.2796C15.8244 16.9671 16 16.5431 16 16.1011V10.2678M14.75 1.51777C15.0815 1.18625 15.5312 1 16 1C16.4688 1 16.9185 1.18625 17.25 1.51777C17.5815 1.84929 17.7678 2.29893 17.7678 2.76777C17.7678 3.23661 17.5815 3.68625 17.25 4.01777L9.33333 11.9344L6 12.7678L6.83333 9.43443L14.75 1.51777Z\"\r\n stroke=\"#008EDF\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n @if(planoData){\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div class=\"row mx-0 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedTab === 'overview' }\"\r\n (click)=\"onTabChange('overview')\">\r\n <h5>Total fixtures</h5>\r\n <h3>{{ planoBriefDetails.totalFixtures }}</h3>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <p>Last updated:</p>\r\n <p>{{ planoBriefDetails.floorLastUpdated | date:\"d MMM yyyy, hh:mm a\" }}</p>\r\n <div *ngIf=\"isRolloutPending\" class=\"indicator reviewPending\">\r\n Rollout review pending\r\n </div>\r\n </div>\r\n </div>\r\n @if(isShowCompliance){\r\n <div class=\"col filter-tab\"\r\n [ngClass]=\"{ selected: selectedTab === 'merch-compliance' }\"\r\n (click)=\"onTabChange('merch-compliance')\">\r\n <div class=\"d-flex gap-2 align-items-center mb-2\">\r\n <h5 class=\"m-0\">Merchandise compliance</h5>\r\n <div class=\"badge inactive\">Missing: {{planoBriefDetails.missedCount }}</div>\r\n <div class=\"badge inactive \">Misplaced: {{planoBriefDetails.misplacedCount}}</div>\r\n\r\n </div>\r\n <h3>{{ planoBriefDetails.merchCompliancePercentage }}%</h3>\r\n @if(planoBriefDetails.lastMerchComplianceCheck){\r\n <div class=\"d-flex align-items-center gap-2\">\r\n @if(planoBriefDetails.merchStatus != null){\r\n @if(planoBriefDetails.merchStatus ){\r\n\r\n <svg width=\"16\" height=\"10\" viewBox=\"0 0 16 10\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M15.3327 0.749999L8.99935 7.08333L5.66602 3.75L0.666016 8.75M15.3327 0.749999L11.3327 0.749999M15.3327 0.749999L15.3327 4.75\"\r\n stroke=\"#039855\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n }@else{\r\n\r\n <svg width=\"16\" height=\"10\" viewBox=\"0 0 16 10\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M0.66732 8.75L7.00065 2.41667L10.334 5.75L15.334 0.75M0.66732 8.75L4.66732 8.75M0.66732 8.75L0.66732 4.75\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n }\r\n <p\r\n [ngClass]=\"{'text-success':planoBriefDetails.merchStatus,'text-danger':!planoBriefDetails.merchStatus}\">\r\n {{ planoBriefDetails.lastMerchCompliancePercentage }}%\r\n </p>\r\n <p>vs </p>\r\n }\r\n <p>Last check:</p>\r\n <p>{{ planoBriefDetails.lastMerchComplianceCheck }}</p>\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n (click)=\"onClickReload($event)\" class=\"cursor-pointer\"\r\n [ngClass]=\"{'rotate':isReLoading}\">\r\n <g clip-path=\"url(#clip0_4753_11640)\">\r\n <path\r\n d=\"M17.25 3.00006V7.50006M17.25 7.50006H12.75M17.25 7.50006L13.77 4.23006C12.9639 3.42359 11.9667 2.83446 10.8714 2.51764C9.77607 2.20081 8.61833 2.16662 7.50621 2.41825C6.3941 2.66988 5.36385 3.19913 4.5116 3.95662C3.65935 4.71411 3.01288 5.67515 2.6325 6.75006M0.75 15.0001V10.5001M0.75 10.5001H5.25M0.75 10.5001L4.23 13.7701C5.03606 14.5765 6.03328 15.1657 7.12861 15.4825C8.22393 15.7993 9.38167 15.8335 10.4938 15.5819C11.6059 15.3302 12.6361 14.801 13.4884 14.0435C14.3407 13.286 14.9871 12.325 15.3675 11.2501\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4753_11640\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n }@else {\r\n <div class=\"d-flex\">\r\n <p>Last check: Not scanned yet</p>\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n (click)=\"onClickReload($event)\" class=\"cursor-pointer ms-3\"\r\n [ngClass]=\"{'rotate':isReLoading}\">\r\n <g clip-path=\"url(#clip0_4753_11640)\">\r\n <path\r\n d=\"M17.25 3.00006V7.50006M17.25 7.50006H12.75M17.25 7.50006L13.77 4.23006C12.9639 3.42359 11.9667 2.83446 10.8714 2.51764C9.77607 2.20081 8.61833 2.16662 7.50621 2.41825C6.3941 2.66988 5.36385 3.19913 4.5116 3.95662C3.65935 4.71411 3.01288 5.67515 2.6325 6.75006M0.75 15.0001V10.5001M0.75 10.5001H5.25M0.75 10.5001L4.23 13.7701C5.03606 14.5765 6.03328 15.1657 7.12861 15.4825C8.22393 15.7993 9.38167 15.8335 10.4938 15.5819C11.6059 15.3302 12.6361 14.801 13.4884 14.0435C14.3407 13.286 14.9871 12.325 15.3675 11.2501\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4753_11640\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedTab === 'analytics' }\"\r\n (click)=\"onTabChange('analytics')\">\r\n <h5>Plano Analytics</h5>\r\n <div class=\"d-flex align-items-center gap-2 mb-1\"><h3 class=\"me-2\">{{ planoBriefDetails.productCount}}</h3><p class=\"text\">Active products</p></div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <p>Last Check:</p>\r\n @if(planoBriefDetails.lastMerchComplianceCheck) {\r\n <p>{{ planoBriefDetails.lastMerchComplianceCheck}}</p>\r\n }@else {\r\n <p>Not scanned yet</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!isPageLoading && planoData\" id=\"body\" class=\"mb-3\">\r\n @if(selectedTab === 'merch-compliance'){\r\n <merch-compliance [floorData]=\"floorData\"></merch-compliance>\r\n }@else if(selectedTab == 'overview') {\r\n <plano-overview [floorData]=\"floorData\" (currentRevisionInfo)=\"onRevisionInfoChange($event)\"></plano-overview>\r\n }@else {\r\n <lib-plano-analytics [floorData]=\"floorData\"></lib-plano-analytics>\r\n }\r\n </div>\r\n <div *ngIf=\"!planoData\">\r\n <div class=\"card d-flex flex-column justify-content-center align-items-center\" style=\"height:60vh\">\r\n <div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\" fill=\"none\">\r\n <path\r\n d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\"\r\n fill=\"#EAECF0\" />\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 246.602 48.8572)\"\r\n fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 56.2979 113.282)\"\r\n fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 244.965 68.8262)\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 215.689 13.5271)\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 104.006 138.221)\"\r\n fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\" fill=\"#6BCAFF\"\r\n stroke=\"#00A3FF\" stroke-width=\"3\" />\r\n <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" />\r\n </mask>\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\"\r\n fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\" />\r\n <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\"\r\n stroke-width=\"3.98436\" stroke-linecap=\"round\" />\r\n <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\" />\r\n <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\" />\r\n <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\" />\r\n <path\r\n d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\"\r\n fill=\"white\" />\r\n <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\" fill=\"#99DAFF\" />\r\n <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" />\r\n </mask>\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"\r\n stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\" />\r\n <path\r\n d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n <div class=\"title\">\r\n Planogram Yet to Publish\r\n </div>\r\n <div class=\"lowerText\">\r\n <a\r\n href=\"/manage/planogram/manage-planogram?planoId={{planoBriefDetails.planoId}}&floorId={{planoBriefDetails.floorId}}\">{{selectedStoreName?.storeName}}</a>\r\n is still under verification\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden m-0\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>", 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)}.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;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#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:#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}.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)}.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)}}#plano-details #header .title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;margin:0}#plano-details #header .compliance{font-size:36px;font-weight:600}#plano-details #header .last-check{font-size:16px;font-weight:500}#plano-details .loader .shimmer{height:100%;width:100%}#plano-details .rotate{animation:spin 1s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#plano-details .indicator.reviewPending{color:#b54708;background:#fef0c7}#plano-details .indicator.reviewPending path{fill:#b54708}.title{font-family:Inter;font-weight:600;font-size:20px;line-height:30px;letter-spacing:0%;color:#1d2939}.lowerText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%}.text{font-family:Inter;font-weight:400;font-size:24px;line-height:32px;letter-spacing:0%;color:#667085}.titleText{font-family:Inter;font-weight:600;font-size:36px;line-height:44px;letter-spacing:-2%;color:#1d2939}\n"], dependencies: [{ kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i7.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i7.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i7.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i7.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i7.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: i8.CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: i9.MerchComplianceComponent, selector: "merch-compliance", inputs: ["floorData"] }, { kind: "component", type: i10.PlanoOverviewComponent, selector: "plano-overview", inputs: ["floorData"], outputs: ["currentRevisionInfo"] }, { kind: "component", type: i11.PlanoAnalyticsComponent, selector: "lib-plano-analytics", inputs: ["floorData"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
358
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PlanoDetailsParentComponent, selector: "lib-plano-details-parent", ngImport: i0, template: "<section id=\"plano-details\">\r\n <div *ngIf=\"isPageLoading\" class=\"row\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n <div id=\"header\">\r\n <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <div class=\"d-flex\">\r\n <div style=\"margin-top:10px;margin-left:5px;margin-right:5px\"\r\n *ngIf=\"planoData?.storeName\">\r\n <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n </div>\r\n <div>\r\n <lib-select-plano *ngIf=\"storeList?.length\" [idField]=\"'_id'\"\r\n [selectedValues]=\"[selectedStoreName]\" [items]=\"storeList\" [multi]=false\r\n searchField=\"storeName\" (selected)=\"onSelected($event)\">\r\n </lib-select-plano>\r\n </div>\r\n </div>\r\n\r\n <lib-reactive-select *ngIf=\"planoData?.floors?.length\" [formControl]=\"selectedFloorId\"\r\n [idField]=\"'_id'\" [nameField]=\"'floorName'\"\r\n [data]=\"planoData.floors\"></lib-reactive-select>\r\n\r\n <div class=\"d-flex gap-2 align-items-center cursor-pointer\"\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\" [queryParams]=\"{\r\n planoId: floorData?.planoId,\r\n floorId: floorData?._id\r\n }\">\r\n <h2 class=\"title\" style=\"color: #008edf;\">\r\n Edit Plano\r\n </h2>\r\n <svg width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8.5 2.76777H2.66667C2.22464 2.76777 1.80072 2.94336 1.48816 3.25592C1.17559 3.56848 1 3.99241 1 4.43443V16.1011C1 16.5431 1.17559 16.9671 1.48816 17.2796C1.80072 17.5922 2.22464 17.7678 2.66667 17.7678H14.3333C14.7754 17.7678 15.1993 17.5922 15.5118 17.2796C15.8244 16.9671 16 16.5431 16 16.1011V10.2678M14.75 1.51777C15.0815 1.18625 15.5312 1 16 1C16.4688 1 16.9185 1.18625 17.25 1.51777C17.5815 1.84929 17.7678 2.29893 17.7678 2.76777C17.7678 3.23661 17.5815 3.68625 17.25 4.01777L9.33333 11.9344L6 12.7678L6.83333 9.43443L14.75 1.51777Z\"\r\n stroke=\"#008EDF\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-4 align-items-center\">\r\n <button ngbAccordionButton></button>\r\n </div>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n @if(planoData){\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div class=\"row mx-0 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedTab === 'overview' }\"\r\n (click)=\"onTabChange('overview')\">\r\n <h5>Total fixtures</h5>\r\n <h3>{{ planoBriefDetails.totalFixtures }}</h3>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <p>Last updated:</p>\r\n <p>{{ planoBriefDetails.floorLastUpdated | date:\"d MMM yyyy, hh:mm a\" }}</p>\r\n <div *ngIf=\"isRolloutPending\" class=\"indicator reviewPending\">\r\n Rollout review pending\r\n </div>\r\n </div>\r\n </div>\r\n @if(isShowCompliance){\r\n <div class=\"col filter-tab\"\r\n [ngClass]=\"{ selected: selectedTab === 'merch-compliance' }\"\r\n (click)=\"onTabChange('merch-compliance')\">\r\n <div class=\"d-flex gap-2 align-items-center mb-2\">\r\n <h5 class=\"m-0\">Merchandise compliance</h5>\r\n <div class=\"badge inactive\">Missing: {{planoBriefDetails.missedCount }}</div>\r\n <div class=\"badge inactive \">Misplaced: {{planoBriefDetails.misplacedCount}}</div>\r\n\r\n </div>\r\n <h3>{{ planoBriefDetails.merchCompliancePercentage }}%</h3>\r\n @if(planoBriefDetails.lastMerchComplianceCheck){\r\n <div class=\"d-flex align-items-center gap-2\">\r\n @if(planoBriefDetails.merchStatus != null){\r\n @if(planoBriefDetails.merchStatus ){\r\n\r\n <svg width=\"16\" height=\"10\" viewBox=\"0 0 16 10\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M15.3327 0.749999L8.99935 7.08333L5.66602 3.75L0.666016 8.75M15.3327 0.749999L11.3327 0.749999M15.3327 0.749999L15.3327 4.75\"\r\n stroke=\"#039855\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n }@else{\r\n\r\n <svg width=\"16\" height=\"10\" viewBox=\"0 0 16 10\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M0.66732 8.75L7.00065 2.41667L10.334 5.75L15.334 0.75M0.66732 8.75L4.66732 8.75M0.66732 8.75L0.66732 4.75\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n }\r\n <p\r\n [ngClass]=\"{'text-success':planoBriefDetails.merchStatus,'text-danger':!planoBriefDetails.merchStatus}\">\r\n {{ planoBriefDetails.lastMerchCompliancePercentage }}%\r\n </p>\r\n <p>vs </p>\r\n }\r\n <p>Last check:</p>\r\n <p>{{ planoBriefDetails.lastMerchComplianceCheck }}</p>\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n (click)=\"onClickReload($event)\" class=\"cursor-pointer\"\r\n [ngClass]=\"{'rotate':isReLoading}\">\r\n <g clip-path=\"url(#clip0_4753_11640)\">\r\n <path\r\n d=\"M17.25 3.00006V7.50006M17.25 7.50006H12.75M17.25 7.50006L13.77 4.23006C12.9639 3.42359 11.9667 2.83446 10.8714 2.51764C9.77607 2.20081 8.61833 2.16662 7.50621 2.41825C6.3941 2.66988 5.36385 3.19913 4.5116 3.95662C3.65935 4.71411 3.01288 5.67515 2.6325 6.75006M0.75 15.0001V10.5001M0.75 10.5001H5.25M0.75 10.5001L4.23 13.7701C5.03606 14.5765 6.03328 15.1657 7.12861 15.4825C8.22393 15.7993 9.38167 15.8335 10.4938 15.5819C11.6059 15.3302 12.6361 14.801 13.4884 14.0435C14.3407 13.286 14.9871 12.325 15.3675 11.2501\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4753_11640\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n }@else {\r\n <div class=\"d-flex\">\r\n <p>Last check: Not scanned yet</p>\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n (click)=\"onClickReload($event)\" class=\"cursor-pointer ms-3\"\r\n [ngClass]=\"{'rotate':isReLoading}\">\r\n <g clip-path=\"url(#clip0_4753_11640)\">\r\n <path\r\n d=\"M17.25 3.00006V7.50006M17.25 7.50006H12.75M17.25 7.50006L13.77 4.23006C12.9639 3.42359 11.9667 2.83446 10.8714 2.51764C9.77607 2.20081 8.61833 2.16662 7.50621 2.41825C6.3941 2.66988 5.36385 3.19913 4.5116 3.95662C3.65935 4.71411 3.01288 5.67515 2.6325 6.75006M0.75 15.0001V10.5001M0.75 10.5001H5.25M0.75 10.5001L4.23 13.7701C5.03606 14.5765 6.03328 15.1657 7.12861 15.4825C8.22393 15.7993 9.38167 15.8335 10.4938 15.5819C11.6059 15.3302 12.6361 14.801 13.4884 14.0435C14.3407 13.286 14.9871 12.325 15.3675 11.2501\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4753_11640\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedTab === 'analytics' }\"\r\n (click)=\"onTabChange('analytics')\">\r\n <h5>Plano Analytics</h5>\r\n <div class=\"d-flex align-items-center gap-2 mb-1\"><h3 class=\"me-2\">{{ planoBriefDetails.productCount}}</h3><p class=\"text\">Active products</p></div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <p>Last Check:</p>\r\n @if(planoBriefDetails.lastMerchComplianceCheck) {\r\n <p>{{ planoBriefDetails.lastMerchComplianceCheck}}</p>\r\n }@else {\r\n <p>Not scanned yet</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!isPageLoading && planoData\" id=\"body\" class=\"mb-3\">\r\n @if(selectedTab === 'merch-compliance'){\r\n <merch-compliance [floorData]=\"floorData\"></merch-compliance>\r\n }@else if(selectedTab == 'overview') {\r\n <plano-overview [floorData]=\"floorData\" (currentRevisionInfo)=\"onRevisionInfoChange($event)\"></plano-overview>\r\n }@else {\r\n <lib-plano-analytics [floorData]=\"floorData\"></lib-plano-analytics>\r\n }\r\n </div>\r\n <div *ngIf=\"!planoData\">\r\n <div class=\"card d-flex flex-column justify-content-center align-items-center\" style=\"height:60vh\">\r\n <div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"315\" height=\"155\" viewBox=\"0 0 315 155\" fill=\"none\">\r\n <path\r\n d=\"M103.809 47.0198C89.5458 47.02 77.983 58.5826 77.9829 72.8459C77.9829 78.7619 73.9798 85.5061 68.0638 85.5061H45.2583C30.9948 85.5061 19.4312 97.0688 19.4312 111.332C19.4312 125.596 30.9948 137.158 45.2583 137.158H183.357C200.247 137.158 216.32 123.992 233.21 123.992H299.245C303.999 123.992 307.853 120.138 307.853 115.383C307.853 110.629 303.999 106.775 299.245 106.775H211.624C209.98 106.775 208.588 105.553 208.12 103.976C207.381 101.487 209.082 98.6721 211.678 98.6721H241.909C256.172 98.6719 267.735 87.1093 267.735 72.8459C267.735 58.5827 256.172 47.02 241.909 47.0198H103.809Z\"\r\n fill=\"#EAECF0\" />\r\n <rect width=\"240.694\" height=\"16.9956\" rx=\"8.4978\" transform=\"matrix(-1 0 0 1 246.602 48.8572)\"\r\n fill=\"#EAECF0\" />\r\n <circle cx=\"5.42147\" cy=\"5.42147\" r=\"5.42147\" transform=\"matrix(-1 0 0 1 56.2979 113.282)\"\r\n fill=\"#6BCAFF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 244.965 68.8262)\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"3.25288\" cy=\"3.25288\" r=\"3.25288\" transform=\"matrix(-1 0 0 1 215.689 13.5271)\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"2.16859\" cy=\"2.16859\" r=\"2.16859\" transform=\"matrix(-1 0 0 1 104.006 138.221)\"\r\n fill=\"#00A3FF\" />\r\n <rect x=\"68.501\" y=\"44.1523\" width=\"166.999\" height=\"97.9371\" rx=\"15.1015\" fill=\"#6BCAFF\"\r\n stroke=\"#00A3FF\" stroke-width=\"3\" />\r\n <mask id=\"path-8-inside-1_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\" />\r\n </mask>\r\n <path\r\n d=\"M93.1172 19C94.0625 19 94.9892 19.0828 95.8887 19.2422V116.784C94.9892 116.625 94.0625 116.542 93.1172 116.542H82.7744C74.0642 116.542 67.0031 123.603 67.0029 132.313V34.7715C67.0029 26.0612 74.0641 19 82.7744 19H93.1172Z\"\r\n fill=\"#6BCAFF\" />\r\n <path\r\n d=\"M93.1172 19L93.1173 16H93.1172V19ZM95.8887 19.2422H98.8887V16.7271L96.4122 16.2882L95.8887 19.2422ZM95.8887 116.784L95.3651 119.738L98.8887 120.363V116.784H95.8887ZM93.1172 116.542L93.1173 113.542H93.1172V116.542ZM67.0029 132.313H64.0029L70.0029 132.314L67.0029 132.313ZM93.1172 19L93.1171 22C93.8872 22 94.6387 22.0674 95.3651 22.1961L95.8887 19.2422L96.4122 16.2882C95.3396 16.0981 94.2377 16 93.1173 16L93.1172 19ZM95.8887 19.2422H92.8887V116.784H95.8887H98.8887V19.2422H95.8887ZM95.8887 116.784L96.4122 113.83C95.3396 113.64 94.2377 113.542 93.1173 113.542L93.1172 116.542L93.1171 119.542C93.8872 119.542 94.6387 119.609 95.3651 119.738L95.8887 116.784ZM93.1172 116.542V113.542H82.7744V116.542V119.542H93.1172V116.542ZM82.7744 116.542V113.542C72.4073 113.542 64.0032 121.947 64.0029 132.313L67.0029 132.313L70.0029 132.314C70.0031 125.26 75.7212 119.542 82.7744 119.542V116.542ZM67.0029 132.313H70.0029V34.7715H67.0029H64.0029V132.313H67.0029ZM67.0029 34.7715H70.0029C70.0029 27.718 75.721 22 82.7744 22V19V16C72.4072 16 64.0029 24.4043 64.0029 34.7715H67.0029ZM82.7744 19V22H93.1172V19V16H82.7744V19Z\"\r\n fill=\"#00A3FF\" mask=\"url(#path-8-inside-1_419_28888)\" />\r\n <line x1=\"76.9619\" y1=\"42.6523\" x2=\"76.9619\" y2=\"84.4881\" stroke=\"#99DAFF\"\r\n stroke-width=\"3.98436\" stroke-linecap=\"round\" />\r\n <circle cx=\"218.205\" cy=\"70.1763\" r=\"3.29663\" fill=\"white\" />\r\n <circle cx=\"111.787\" cy=\"55.1663\" r=\"2.52637\" fill=\"#99DAFF\" />\r\n <circle cx=\"99.3845\" cy=\"124.986\" r=\"3.44505\" fill=\"white\" />\r\n <path\r\n d=\"M135.529 33.4717C151.285 24.3749 171.432 29.7732 180.529 45.5293C188.56 59.4398 185.291 76.7707 173.573 86.9004L193.457 121.339C194.931 123.894 194.055 127.161 191.5 128.636C188.945 130.111 185.679 129.236 184.204 126.681L164.465 92.4932C149.446 98.6552 131.813 92.92 123.471 78.4717C114.374 62.7156 119.773 42.5685 135.529 33.4717ZM172.698 50.0518C166.098 38.6209 151.481 34.7041 140.05 41.3037C128.62 47.9035 124.703 62.5204 131.302 73.9512C137.902 85.3817 152.519 89.2977 163.95 82.6982C175.38 76.0987 179.297 61.4826 172.698 50.0518Z\"\r\n fill=\"white\" />\r\n <circle cx=\"153\" cy=\"57.0007\" r=\"23.8994\" transform=\"rotate(-30 153 57.0007)\" fill=\"#99DAFF\" />\r\n <mask id=\"path-16-inside-2_419_28888\" fill=\"white\">\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\" />\r\n </mask>\r\n <path\r\n d=\"M153.384 40.9952C153.435 39.6997 152.422 38.5923 151.131 38.709C148.857 38.9146 146.635 39.5486 144.585 40.5849C141.834 41.9755 139.483 44.0445 137.755 46.5965C136.026 49.1485 134.976 52.0991 134.705 55.1696C134.503 57.4578 134.739 59.7563 135.391 61.9442C135.761 63.1867 137.165 63.7164 138.35 63.1886C139.534 62.6607 140.044 61.2741 139.73 60.016C139.37 58.573 139.251 57.0748 139.382 55.5825C139.583 53.3073 140.361 51.1209 141.642 49.2299C142.923 47.3389 144.665 45.8058 146.703 44.7754C148.04 44.0995 149.476 43.6546 150.95 43.4538C152.234 43.2787 153.333 42.2908 153.384 40.9952Z\"\r\n stroke=\"white\" stroke-width=\"6\" mask=\"url(#path-16-inside-2_419_28888)\" />\r\n <path\r\n d=\"M136.529 28.4717C152.285 19.3749 172.432 24.7732 181.529 40.5293C189.56 54.4398 186.291 71.7707 174.573 81.9004L194.457 116.339C195.931 118.894 195.055 122.161 192.5 123.636C189.945 125.111 186.679 124.236 185.204 121.681L165.465 87.4932C150.446 93.6552 132.813 87.92 124.471 73.4717C115.374 57.7156 120.773 37.5685 136.529 28.4717ZM173.698 45.0518C167.098 33.6209 152.481 29.7041 141.05 36.3037C129.62 42.9035 125.703 57.5204 132.302 68.9512C138.902 80.3817 153.519 84.2977 164.95 77.6982C176.38 71.0987 180.297 56.4826 173.698 45.0518Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n </div>\r\n <div class=\"title\">\r\n Planogram Yet to Publish\r\n </div>\r\n <div class=\"lowerText\">\r\n <a\r\n href=\"/manage/planogram/manage-planogram?planoId={{planoBriefDetails.planoId}}&floorId={{planoBriefDetails.floorId}}\">{{selectedStoreName?.storeName}}</a>\r\n is still under verification\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden m-0\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>", 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)}.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;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#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:#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}.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)}.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)}}#plano-details #header .title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;margin:0}#plano-details #header .compliance{font-size:36px;font-weight:600}#plano-details #header .last-check{font-size:16px;font-weight:500}#plano-details .loader .shimmer{height:100%;width:100%}#plano-details .rotate{animation:spin 1s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#plano-details .indicator.reviewPending{color:#b54708;background:#fef0c7}#plano-details .indicator.reviewPending path{fill:#b54708}.title{font-family:Inter;font-weight:600;font-size:20px;line-height:30px;letter-spacing:0%;color:#1d2939}.lowerText{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;letter-spacing:0%}.text{font-family:Inter;font-weight:400;font-size:24px;line-height:32px;letter-spacing:0%;color:#667085}.titleText{font-family:Inter;font-weight:600;font-size:36px;line-height:44px;letter-spacing:-2%;color:#1d2939}\n"], dependencies: [{ kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel"], outputs: ["actionClick"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i7.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i7.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i7.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i7.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i7.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: i8.CustomSelectComponent, selector: "lib-select-plano", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label", "compact"], outputs: ["selected"] }, { kind: "component", type: i9.MerchComplianceComponent, selector: "merch-compliance", inputs: ["floorData"] }, { kind: "component", type: i10.PlanoOverviewComponent, selector: "plano-overview", inputs: ["floorData"], outputs: ["currentRevisionInfo"] }, { kind: "component", type: i11.PlanoAnalyticsComponent, selector: "lib-plano-analytics", inputs: ["floorData"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
359
359
  }
360
360
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoDetailsParentComponent, decorators: [{
361
361
  type: Component,